theme presets

Author: connorabbas

README.md

@@ -34,22 +34,25 @@ A basic authentication starter kit using [Laravel](https://laravel.com/docs/mast
 
 This starter kit provides a collection of custom theme presets to choose from, built using the powerful **PrimeVue V4** theming system. It leverages styled mode and custom design token values to create flexible and cohesive UI designs.
 
-### Prebuilt Theme Presets
+### Provided Theme Presets
 
-The prebuilt theme presets are located in the `/resources/js/theme` directory. Each preset offers a distinct visual style:
-
--   **noir**  
-    A minimal, monochromatic theme that serves as the default style.
+The theme presets are located in the `/resources/js/theme` directory. Each preset offers a distinct visual style:
 
 -   **bootstrap**  
-    Emulates the familiar look and feel of [Bootstrap](https://getbootstrap.com/).
+    Emulates the look and feel of [Bootstrap](https://getbootstrap.com/).
 
 -   **breeze**  
-    Captures the aesthetic of [Laravel Breeze](https://github.com/laravel/breeze).
+    Captures the aesthetic of [Laravel Breeze](https://github.com/laravel/breeze). (R.I.P. :pray:)
 
 -   **enterprise**  
     Provides a clean, no-nonsense corporate design.
 
+-   **noir**  
+    A minimal & clean monochromatic style that serves as the default theme.
+
+-   **warm**  
+    A boxy design with a warmer color pallette.
+
 ### Customizing Your Own Theme
 
 Creating your own theme preset is simple. You can:

resources/js/theme/enterprise-preset.js

@@ -1,4 +1,4 @@
-import Preset from '@primeuix/themes/nora';
+import Preset from '@primeuix/themes/material';
 import { definePreset } from '@primeuix/themes';
 
 const customThemePreset = definePreset(Preset, {

resources/js/theme/warm-preset.js

@@ -0,0 +1,54 @@
+import Preset from '@primeuix/themes/nora';
+import { definePreset } from '@primeuix/themes';
+
+const customThemePreset = definePreset(Preset, {
+    semantic: {
+        primary: {
+            50: '{orange.50}',
+            100: '{orange.100}',
+            200: '{orange.200}',
+            300: '{orange.300}',
+            400: '{orange.400}',
+            500: '{orange.500}',
+            600: '{orange.600}',
+            700: '{orange.700}',
+            800: '{orange.800}',
+            900: '{orange.900}',
+            950: '{orange.950}',
+        },
+        colorScheme: {
+            light: {
+                surface: {
+                    50: '{stone.50}',
+                    100: '{stone.100}',
+                    200: '{stone.200}',
+                    300: '{stone.300}',
+                    400: '{stone.400}',
+                    500: '{stone.500}',
+                    600: '{stone.600}',
+                    700: '{stone.700}',
+                    800: '{stone.800}',
+                    900: '{stone.900}',
+                    950: '{stone.950}',
+                },
+            },
+            dark: {
+                surface: {
+                    50: '{stone.50}',
+                    100: '{stone.100}',
+                    200: '{stone.200}',
+                    300: '{stone.300}',
+                    400: '{stone.400}',
+                    500: '{stone.500}',
+                    600: '{stone.600}',
+                    700: '{stone.700}',
+                    800: '{stone.800}',
+                    900: '{stone.900}',
+                    950: '{stone.950}',
+                },
+            },
+        },
+    },
+});
+
+export default customThemePreset;