UPDATE Enhance Tailwind configuration by adding custom colors for Carhop Orange and Carhop Purple, and refactor color retrieval function.

tailwind.config.js

@@ -1,5 +1,13 @@
 const theme = require('./theme.json');
-const tailpress = require("@jeffreyvr/tailwindcss-tailpress");
+const tailpress = require('@jeffreyvr/tailwindcss-tailpress');
+
+// Fonction pour obtenir la couleur de base depuis theme.json
+const getBaseColor = (slug) => {
+  const color = theme.settings.color.palette.find(
+    (c) => c.slug === slug
+  );
+  return color ? color.color : null;
+};
 
 module.exports = {
   content: [
@@ -7,30 +15,69 @@ module.exports = {
     './**/*.php',
     './resources/css/*.css',
     './resources/js/*.js',
-        './safelist.txt'
+    './safelist.txt',
   ],
   theme: {
     container: {
       padding: {
         DEFAULT: '1rem',
         sm: '2rem',
-                lg: '0rem'
+        lg: '0rem',
       },
     },
     extend: {
-            colors: tailpress.colorMapper(tailpress.theme('settings.color.palette', theme)),
+      colors: {
-            fontSize: tailpress.fontSizeMapper(tailpress.theme('settings.typography.fontSizes', theme))
+        ...tailpress.colorMapper(
+          tailpress.theme('settings.color.palette', theme)
+        ),
+        'carhop-orange': {
+          50: '#fff8eb',
+          100: '#ffebc6',
+          200: '#ffd588',
+          300: '#ffba4a',
+          400: getBaseColor('carhop-orange'), // Base Color
+          500: '#f97a07',
+          600: '#dd5602',
+          700: '#b73806',
+          800: '#942a0c',
+          900: '#7a240d',
+          950: '#461002',
+        },
+        'carhop-purple': {
+          50: '#f8f5ff',
+          100: '#efe8ff',
+          200: '#e2d4ff',
+          300: getBaseColor('carhop-purple'), // Base Color
+          400: '#ab82fe',
+          500: '#8c53f9',
+          600: '#7331ec',
+          700: '#6020d0',
+          800: '#531faa',
+          900: '#451b88',
+          950: '#2b0665',
+        },
+      },
+      fontSize: tailpress.fontSizeMapper(
+        tailpress.theme(
+          'settings.typography.fontSizes',
+          theme
+        )
+      ),
     },
     screens: {
-            'xs': '480px',
+      xs: '480px',
-            'sm': '600px',
+      sm: '600px',
-            'md': '782px',
+      md: '782px',
-            'lg': tailpress.theme('settings.layout.contentSize', theme),
+      lg: tailpress.theme(
-            'xl': tailpress.theme('settings.layout.wideSize', theme),
+        'settings.layout.contentSize',
-            '2xl': '1440px'
+        theme
-        }
+      ),
+      xl: tailpress.theme(
+        'settings.layout.wideSize',
+        theme
+      ),
+      '2xl': '1440px',
     },
-    plugins: [
+  },
-        tailpress.tailwind
+  plugins: [tailpress.tailwind],
-    ]
 };