feat : refacto de la config couleur

.playground/pages/index.vue

@@ -37,7 +37,7 @@
               :key="item.name"
               type="button"
               class="rounded px-3 py-1.5 text-left text-sm text-black hover:bg-m-primary hover:text-white"
-              :class="selectedName === item.name ? 'bg-m-secondary text-white' : ''"
+              :class="selectedName === item.name ? 'bg-m-primary/50 text-white' : ''"
               @click="selectItem(item.name)"
             >
               {{ item.label }}

app/assets/css/malio.css

@@ -4,21 +4,37 @@
 
 @layer base {
   :root {
-    /* Couleurs en RGB “space separated” pour Tailwind */
+    /* ── Globales ── */
-    --m-primary: 34 39 131;       /* Couleur principal*/
+    --m-primary: 34 39 131;         /* #222783 - Bleu Malio */
-    --m-secondary: 48 73 152;     /* Couleur secondaire */
+    --m-bg: 243 244 248;            /* #F3F4F8 - Fond de page */
-    --m-tertiary: 243 244 248;    /* Couleur tertiaire (background) */
+    --m-surface: 243 244 248;       /* #F3F4F8 - Fond hover/cartes */
-    --m-border: 203 213 225;      /* Couleur des bordures */
+    --m-text: 15 23 42;             /* #0F172A */
-    --m-text: 15 23 42;           /*  Couleur du texte */
+    --m-muted: 100 116 139;         /* #64748B */
-    --m-muted: 100 116 139;       /* Couleur pour les éléments désactivés ou secondaires */
+    --m-border: 203 213 225;        /* #CBD5E1 */
-    --m-bg: 243 244 248;          /* Couleur de fond générale */
+    --m-disabled: 204 204 223;      /* #CCCCDF - Partagé entre toutes les familles bouton */
+    --m-error: 155 17 30;           /* #9B111E */
+    --m-success: 15 149 70;         /* #0F9546 */
 
-    --m-error: 155 17 30;         /* rouge pour les erreurs */
+    /* ── Boutons Primary ── */
-    --m-success: 15 149 70;       /* vert pour les succès  */
+    --m-btn-primary: 34 39 131;           /* #222783 */
+    --m-btn-primary-hover: 18 28 219;     /* #121CDB */
+    --m-btn-primary-active: 33 37 103;    /* #212567 */
 
-    --m-btn-default: 34 39 131;   /* #222783 - bouton par défaut */
+    /* ── Boutons Secondary ── */
-    --m-btn-hover: 18 28 219;     /* #121CDB - bouton hover */
+    --m-btn-secondary: 75 77 237;         /* #4B4DED */
-    --m-btn-active: 33 37 103;    /* #212567 - bouton active */
+    --m-btn-secondary-hover: 137 123 241; /* #897BF1 */
-    --m-btn-disabled: 204 204 223; /* #CCCCDF - bouton désactivé */
+    --m-btn-secondary-active: 18 28 219;  /* #121CDB */
+
+    /* ── Boutons Danger ── */
+    --m-btn-danger: 242 105 107;          /* #F2696B */
+    --m-btn-danger-hover: 234 151 151;    /* #EA9797 */
+    --m-btn-danger-active: 255 83 86;     /* #FF5356 */
+
+    /* ── Couleurs de site (usage ponctuel) ── */
+    --m-site-blue: 5 108 242;       /* #056CF2 - Bleu Châtellerault */
+    --m-site-yellow: 243 203 0;     /* #F3CB00 - Jaune Saint-Jean */
+    --m-site-green: 116 191 4;      /* #74BF04 - Vert Pommevic */
+
+    --m-radius: 8px;
   }
 }

app/components/malio/button/ButtonIcon.test.ts

@@ -106,7 +106,7 @@ describe('MalioButtonIcon', () => {
     const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', disabled: true})
 
     expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
-    expect(wrapper.get('button').classes()).toContain('bg-m-btn-disabled')
+    expect(wrapper.get('button').classes()).toContain('bg-m-disabled')
   })
 
   it('applies cursor-pointer when not disabled', () => {
@@ -124,7 +124,7 @@ describe('MalioButtonIcon', () => {
   it('applies default background color', () => {
     const wrapper = mountComponent()
 
-    expect(wrapper.get('button').classes()).toContain('bg-m-btn-default')
+    expect(wrapper.get('button').classes()).toContain('bg-m-btn-primary')
   })
 
   it('applies buttonClass', () => {
@@ -136,16 +136,16 @@ describe('MalioButtonIcon', () => {
   it('applies ghost variant with no background and colored icon', () => {
     const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', variant: 'ghost'})
 
-    expect(wrapper.get('button').classes()).toContain('text-m-btn-default')
+    expect(wrapper.get('button').classes()).toContain('text-m-btn-primary')
-    expect(wrapper.get('button').classes()).not.toContain('bg-m-btn-default')
+    expect(wrapper.get('button').classes()).not.toContain('bg-m-btn-primary')
     expect(wrapper.get('button').classes()).not.toContain('text-white')
   })
 
   it('applies ghost disabled styles with no background', () => {
     const wrapper = mountComponent({icon: 'mdi:arrow-left', ariaLabel: 'Retour', variant: 'ghost', disabled: true})
 
-    expect(wrapper.get('button').classes()).toContain('text-m-btn-disabled')
+    expect(wrapper.get('button').classes()).toContain('text-m-disabled')
     expect(wrapper.get('button').classes()).toContain('cursor-not-allowed')
-    expect(wrapper.get('button').classes()).not.toContain('bg-m-btn-disabled')
+    expect(wrapper.get('button').classes()).not.toContain('bg-m-disabled')
   })
 })

app/components/malio/button/ButtonIcon.vue

@@ -55,11 +55,11 @@ const mergedButtonClass = computed(() =>
     'inline-flex items-center justify-center rounded-md p-1 transition-colors duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-m-primary/50',
     isFilled.value
       ? props.disabled
-        ? 'bg-m-btn-disabled text-white cursor-not-allowed'
+        ? 'bg-m-disabled text-white cursor-not-allowed'
-        : 'bg-m-btn-default hover:bg-m-btn-hover active:bg-m-btn-active text-white cursor-pointer'
+        : 'bg-m-btn-primary hover:bg-m-btn-primary-hover active:bg-m-btn-primary-active text-white cursor-pointer'
       : props.disabled
-        ? 'text-m-btn-disabled cursor-not-allowed'
+        ? 'text-m-disabled cursor-not-allowed'
-        : 'text-m-btn-default hover:text-m-btn-hover active:text-m-btn-active cursor-pointer',
+        : 'text-m-btn-primary hover:text-m-btn-primary-hover active:text-m-btn-primary-active cursor-pointer',
     props.buttonClass,
   ),
 )

app/components/malio/sidebar/Sidebar.vue

@@ -54,7 +54,7 @@
             <NuxtLink
               :to="item.to"
               :class="twMerge(
-                'block truncate rounded-md text-[15px] text-m-text text-black transition-colors hover:bg-m-tertiary leading-[150%]',
+                'block truncate rounded-md text-[15px] text-m-text text-black transition-colors hover:bg-m-surface leading-[150%]',
                 collapsed ? 'px-3 text-center' : 'pl-[42px] pr-3',
               )"
             >
@@ -71,7 +71,7 @@
       :class="twMerge(
         'absolute top-1/2 -translate-y-1/2 right-0 translate-x-1/2 z-10',
         'flex h-8 w-8 items-center justify-center rounded-full border border-m-border bg-white shadow-sm',
-        'cursor-pointer transition-colors hover:bg-m-tertiary',
+        'cursor-pointer transition-colors hover:bg-m-surface',
         toggleClass,
       )"
       @click="toggleCollapse"

app/components/malio/tab/TabList.vue

@@ -2,7 +2,7 @@
   <div v-bind="$attrs">
     <div
       role="tablist"
-      class="flex justify-center gap-[60px] border-b border-m-border"
+      class="flex justify-center gap-[60px] border-b border-m-primary"
     >
       <button
         v-for="tab in tabs"

nuxt.config.ts

@@ -16,27 +16,6 @@ export default defineNuxtConfig({
   ],
 
   tailwindcss: {
-    config: {
+    configPath: join(dir, 'tailwind.config.ts'),
-      theme: {
-        extend: {
-          borderRadius: {
-            malio: 'var(--m-radius)',
-          },
-          colors: {
-            m: {
-              primary: 'rgb(var(--m-primary) / <alpha-value>)',
-              secondary: 'rgb(var(--m-secondary) / <alpha-value>)',
-              tertiary: 'rgb(var(--m-tertiary) / <alpha-value>)',
-              border: 'rgb(var(--m-border) / <alpha-value>)',
-              text: 'rgb(var(--m-text) / <alpha-value>)',
-              muted: 'rgb(var(--m-muted) / <alpha-value>)',
-              bg: 'rgb(var(--m-bg) / <alpha-value>)',
-              error: 'rgb(var(--m-error) / <alpha-value>)',
-              success: 'rgb(var(--m-success) / <alpha-value>)',
-            }
-          }
-        }
-      }
-    }
   }
 })

tailwind.config.ts

@@ -16,18 +16,26 @@ export default {
       colors: {
         m: {
           primary: 'rgb(var(--m-primary) / <alpha-value>)',
-          secondary: 'rgb(var(--m-secondary) / <alpha-value>)',
+          surface: 'rgb(var(--m-surface) / <alpha-value>)',
-          tertiary: 'rgb(var(--m-tertiary) / <alpha-value>)',
           border: 'rgb(var(--m-border) / <alpha-value>)',
           text: 'rgb(var(--m-text) / <alpha-value>)',
           muted: 'rgb(var(--m-muted) / <alpha-value>)',
           bg: 'rgb(var(--m-bg) / <alpha-value>)',
+          disabled: 'rgb(var(--m-disabled) / <alpha-value>)',
           error: 'rgb(var(--m-error) / <alpha-value>)',
           success: 'rgb(var(--m-success) / <alpha-value>)',
-          'btn-default': 'rgb(var(--m-btn-default) / <alpha-value>)',
+          'btn-primary': 'rgb(var(--m-btn-primary) / <alpha-value>)',
-          'btn-hover': 'rgb(var(--m-btn-hover) / <alpha-value>)',
+          'btn-primary-hover': 'rgb(var(--m-btn-primary-hover) / <alpha-value>)',
-          'btn-active': 'rgb(var(--m-btn-active) / <alpha-value>)',
+          'btn-primary-active': 'rgb(var(--m-btn-primary-active) / <alpha-value>)',
-          'btn-disabled': 'rgb(var(--m-btn-disabled) / <alpha-value>)',
+          'btn-secondary': 'rgb(var(--m-btn-secondary) / <alpha-value>)',
+          'btn-secondary-hover': 'rgb(var(--m-btn-secondary-hover) / <alpha-value>)',
+          'btn-secondary-active': 'rgb(var(--m-btn-secondary-active) / <alpha-value>)',
+          'btn-danger': 'rgb(var(--m-btn-danger) / <alpha-value>)',
+          'btn-danger-hover': 'rgb(var(--m-btn-danger-hover) / <alpha-value>)',
+          'btn-danger-active': 'rgb(var(--m-btn-danger-active) / <alpha-value>)',
+          'site-blue': 'rgb(var(--m-site-blue) / <alpha-value>)',
+          'site-yellow': 'rgb(var(--m-site-yellow) / <alpha-value>)',
+          'site-green': 'rgb(var(--m-site-green) / <alpha-value>)',
         },
       },
       fontFamily: {