Merge pull request #437 from DissNik/2.0

minimalistic theme
moonshine-software · Apr 8, 2024 · 4228a95 · 4228a95
2 parents 3223b86 + b965bf3
commit 4228a95
Show file tree

Hide file tree

Showing 2 changed files with 144 additions and 0 deletions.
diff --git a/resources/views/pages/en/appearance/index.blade.php b/resources/views/pages/en/appearance/index.blade.php
@@ -4,8 +4,10 @@
         ['url' => '#theme', 'label' => 'Main theme'],
         ['url' => '#colors', 'label' => 'Color scheme'],
         ['url' => '#color-manager', 'label' => 'Color manager'],
+        ['url' => '#minimalistic', 'label' => 'Minimalistic theme'],
     ]
 ]">
+
 <x-sub-title id="logo">Logo</x-sub-title>
 
 <x-p>
@@ -239,4 +241,74 @@ public function boot(): void
     moonshineColors()->successBg('#000000', dark: true);
 </x-code>
 
+<x-sub-title id="minimalistic">Minimalistic theme</x-sub-title>
+
+<x-p>
+    For a minimal theme you need to add a style file,
+    set colors and set the <code>theme-minimalistic</code> class to the body tag.
+</x-p>
+
+<x-code language="php">
+// app/Providers/MoonShineServiceProvider.php
+
+public function boot(): void
+{
+    parent::boot();
+
+    moonshineAssets()->add(['/vendor/moonshine/assets/minimalistic.css']);
+
+    moonshineColors()
+        ->primary('#1E96FC')
+        ->secondary('#1D8A99')
+        ->body('255, 255, 255')
+        ->dark('30, 31, 67', 'DEFAULT')
+        ->dark('249, 250, 251', 50)
+        ->dark('243, 244, 246', 100)
+        ->dark('229, 231, 235', 200)
+        ->dark('209, 213, 219', 300)
+        ->dark('156, 163, 175', 400)
+        ->dark('107, 114, 128', 500)
+        ->dark('75, 85, 99', 600)
+        ->dark('55, 65, 81', 700)
+        ->dark('31, 41, 55', 800)
+        ->dark('17, 24, 39', 900)
+        ->successBg('209, 255, 209')
+        ->successText('15, 99, 15')
+        ->warningBg('255, 246, 207')
+        ->warningText('92, 77, 6')
+        ->errorBg('255, 224, 224')
+        ->errorText('81, 20, 20')
+        ->infoBg('196, 224, 255')
+        ->infoText('34, 65, 124');
+
+    moonshineColors()
+        ->body('27, 37, 59', dark: true)
+        ->dark('83, 103, 132', 50, dark: true)
+        ->dark('74, 90, 12', 100, dark: true)
+        ->dark('65, 81, 114', 200, dark: true)
+        ->dark('53, 69, 103', 300, dark: true)
+        ->dark('48, 61, 93', 400, dark: true)
+        ->dark('41, 53, 82', 500, dark: true)
+        ->dark('40, 51, 78', 600, dark: true)
+        ->dark('39, 45, 69', 700, dark: true)
+        ->dark('27, 37, 59', 800, dark: true)
+        ->dark('15, 23, 42', 900, dark: true)
+        ->successBg('17, 157, 17', dark: true)
+        ->successText('178, 255, 178', dark: true)
+        ->warningBg('225, 169, 0', dark: true)
+        ->warningText('255, 255, 199', dark: true)
+        ->errorBg('190, 10, 10', dark: true)
+        ->errorText('255, 197, 197', dark: true)
+        ->infoBg('38, 93, 205', dark: true)
+        ->infoText('179, 220, 255', dark: true);
+}
+</x-code>
+
+<x-code language="php">
+// app/MoonShine/MoonShineLayout.php
+
+LayoutBuilder::make(...)
+    ->bodyClass('theme-minimalistic'); // [tl! focus]
+</x-code>
+
 </x-page>
diff --git a/resources/views/pages/ru/appearance/index.blade.php b/resources/views/pages/ru/appearance/index.blade.php
@@ -4,8 +4,10 @@
         ['url' => '#theme', 'label' => 'Основная тема'],
         ['url' => '#colors', 'label' => 'Цветовая схема'],
         ['url' => '#color-manager', 'label' => 'Менеджер цветов'],
+        ['url' => '#minimalistic', 'label' => 'Минимальная тема'],
     ]
 ]">
+
 <x-sub-title id="logo">Логотип</x-sub-title>
 
 <x-p>
@@ -239,4 +241,74 @@ public function boot(): void
     moonshineColors()->successBg('#000000', dark: true);
 </x-code>
 
+<x-sub-title id="minimalistic">Минимальная тема</x-sub-title>
+
+<x-p>
+    Для минимальной темы необходимо добавить файл стилей,
+    задать цвета и установить класс <code>theme-minimalistic</code> у тега body.
+</x-p>
+
+<x-code language="php">
+// app/Providers/MoonShineServiceProvider.php
+
+public function boot(): void
+{
+    parent::boot();
+
+    moonshineAssets()->add(['/vendor/moonshine/assets/minimalistic.css']);
+
+    moonshineColors()
+        ->primary('#1E96FC')
+        ->secondary('#1D8A99')
+        ->body('255, 255, 255')
+        ->dark('30, 31, 67', 'DEFAULT')
+        ->dark('249, 250, 251', 50)
+        ->dark('243, 244, 246', 100)
+        ->dark('229, 231, 235', 200)
+        ->dark('209, 213, 219', 300)
+        ->dark('156, 163, 175', 400)
+        ->dark('107, 114, 128', 500)
+        ->dark('75, 85, 99', 600)
+        ->dark('55, 65, 81', 700)
+        ->dark('31, 41, 55', 800)
+        ->dark('17, 24, 39', 900)
+        ->successBg('209, 255, 209')
+        ->successText('15, 99, 15')
+        ->warningBg('255, 246, 207')
+        ->warningText('92, 77, 6')
+        ->errorBg('255, 224, 224')
+        ->errorText('81, 20, 20')
+        ->infoBg('196, 224, 255')
+        ->infoText('34, 65, 124');
+
+    moonshineColors()
+        ->body('27, 37, 59', dark: true)
+        ->dark('83, 103, 132', 50, dark: true)
+        ->dark('74, 90, 12', 100, dark: true)
+        ->dark('65, 81, 114', 200, dark: true)
+        ->dark('53, 69, 103', 300, dark: true)
+        ->dark('48, 61, 93', 400, dark: true)
+        ->dark('41, 53, 82', 500, dark: true)
+        ->dark('40, 51, 78', 600, dark: true)
+        ->dark('39, 45, 69', 700, dark: true)
+        ->dark('27, 37, 59', 800, dark: true)
+        ->dark('15, 23, 42', 900, dark: true)
+        ->successBg('17, 157, 17', dark: true)
+        ->successText('178, 255, 178', dark: true)
+        ->warningBg('225, 169, 0', dark: true)
+        ->warningText('255, 255, 199', dark: true)
+        ->errorBg('190, 10, 10', dark: true)
+        ->errorText('255, 197, 197', dark: true)
+        ->infoBg('38, 93, 205', dark: true)
+        ->infoText('179, 220, 255', dark: true);
+}
+</x-code>
+
+<x-code language="php">
+// app/MoonShine/MoonShineLayout.php
+
+LayoutBuilder::make(...)
+    ->bodyClass('theme-minimalistic'); // [tl! focus]
+</x-code>
+
 </x-page>