[#MUI-23] Revoir la config couleur tailwind (#18)

| Numéro du ticket | Titre du ticket |
|------------------|-----------------|
|                  |                 |

## Description de la PR

## Modification du .env

## Check list

- [ ] Pas de régression
- [ ] TU/TI/TF rédigée
- [ ] TU/TI/TF OK
- [ ] CHANGELOG modifié

Reviewed-on: #18
Co-authored-by: tristan <tristan@yuno.malio.fr>
Co-committed-by: tristan <tristan@yuno.malio.fr>

.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 }}

CHANGELOG.md

@@ -20,6 +20,7 @@ Liste des évolutions de la librairie Malio layer UI
 * [#MUI-14] Création d'un composant bouton icône
 * [#MUI-11] Création d'un composant navigation par onglets
 * [#MUI-20] Création d'un composant sidebar
+* [#MUI-23] Revoir la config couleur tailwind
 
 ### Changed
 

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-danger: 242 105 107;        /* #F2696B - Erreurs et boutons danger */
+    --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/checkbox/Checkbox.test.ts

@@ -114,7 +114,7 @@ describe('MalioCheckbox', () => {
     })
 
     expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
     expect(wrapper.get('p').text()).toBe('You must accept')
   })
 
@@ -125,7 +125,7 @@ describe('MalioCheckbox', () => {
     })
 
     expect(wrapper.get('p').text()).toBe('Invalid')
-    expect(wrapper.get('p').classes()).toContain('text-m-error')
+    expect(wrapper.get('p').classes()).toContain('text-m-danger')
   })
 
   it('shows success styles and message when there is no error', () => {

app/components/malio/input/Input.test.ts

@@ -161,19 +161,19 @@ describe('MalioInputText', () => {
   it('shows error message without label and icon', () => {
     const wrapper = mountInput({error: 'Error message test'})
 
-    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
-    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
     expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
-    expect(wrapper.get('p').classes()).toContain('text-m-error')
+    expect(wrapper.get('p').classes()).toContain('text-m-danger')
   })
 
   it('shows error message with label and without icon', () => {
     const wrapper = mountInput({error: 'Error message test', label: 'Error message'})
 
-    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
-    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
-    expect(wrapper.get('p').classes()).toContain('text-m-error')
+    expect(wrapper.get('p').classes()).toContain('text-m-danger')
   })
 
   it('shows error message with label and icon', () => {
@@ -183,19 +183,19 @@ describe('MalioInputText', () => {
       iconName: 'mdi:key-outline',
     })
 
-    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
-    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
-    expect(wrapper.get('p').classes()).toContain('text-m-error')
+    expect(wrapper.get('p').classes()).toContain('text-m-danger')
   })
 
   it('shows error message with icon and without label', () => {
     const wrapper = mountInput({error: 'Error message test', iconName: 'mdi:key-outline'})
 
-    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
-    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
   })
 
   it('shows success message without label and icon', () => {
@@ -240,10 +240,10 @@ describe('MalioInputText', () => {
       success: 'Success message test',
     })
 
-    expect(wrapper.find('p.text-m-error').exists()).toBe(true)
+    expect(wrapper.find('p.text-m-danger').exists()).toBe(true)
-    expect(wrapper.get('p.text-m-error').text()).toBe('Error message test')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
     expect(wrapper.find('p.text-m-success').exists()).toBe(false)
-    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
     expect(wrapper.get('input').classes()).not.toContain('border-m-success')
   })
 

app/components/malio/input/InputAmount.test.ts

@@ -87,7 +87,7 @@ describe('MalioInputAmount', () => {
 
     expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
     expect(wrapper.get('input').attributes('aria-describedby')).toBe(`${inputId}-describedby`)
-    expect(wrapper.get('p.text-m-error').text()).toBe('Montant invalide')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Montant invalide')
   })
 
   it('keeps dots as the decimal separator on input', async () => {

app/components/malio/input/InputPassword.test.ts

@@ -126,15 +126,15 @@ describe('MalioInputPassword', () => {
   it('shows error message and styles', () => {
     const wrapper = mountComponent({error: 'Mot de passe requis'})
 
-    expect(wrapper.get('p.text-m-error').text()).toBe('Mot de passe requis')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Mot de passe requis')
-    expect(wrapper.get('input').classes()).toContain('border-m-error')
+    expect(wrapper.get('input').classes()).toContain('border-m-danger')
     expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
   })
 
   it('shows error style on icon', () => {
     const wrapper = mountComponent({error: 'Error'})
 
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
   })
 
   it('shows success message and styles', () => {

app/components/malio/input/InputText.vue

@@ -40,7 +40,7 @@
       data-test="icon"
       :class="[
       hasError
-        ? 'text-m-error'
+        ? 'text-m-danger'
         : hasSuccess
           ? 'text-m-success' : iconColor,
       iconPositionClass,
@@ -53,7 +53,7 @@
     :id="`${inputId}-describedby`"
     :class="[
         hasError
-          ? 'text-m-error'
+          ? 'text-m-danger'
           : hasSuccess
             ? 'text-m-success'
             : 'text-m-muted',
@@ -148,7 +148,7 @@ const mergedInputClass = computed(() =>
     isFilled.value ? 'border-black' : 'border-m-muted',
     disabled.value ? 'cursor-not-allowed text-black/60 [&:not(:placeholder-shown)]:border-m-muted border-m-muted' : 'cursor-text',
     hasError.value
-      ? 'border-m-error focus:border-m-error [&:not(:placeholder-shown)]:border-m-error'
+      ? 'border-m-danger focus:border-m-danger [&:not(:placeholder-shown)]:border-m-danger'
       : hasSuccess.value
         ? 'border-m-success focus:border-m-success [&:not(:placeholder-shown)]:border-m-success'
         : 'focus:border-m-primary',
@@ -164,7 +164,7 @@ const mergedLabelClass = computed(() =>
     shouldFloatLabel.value ? '-translate-y-[1.25rem] peer-focus:-translate-y-[1.55rem] scale-90' : '',
     disabled.value ? 'peer-[&:not(:placeholder-shown):not(:focus)]:text-black/60' : '',
     hasError.value
-      ? 'text-m-error'
+      ? 'text-m-danger'
       : hasSuccess.value
         ? 'text-m-success'
         : 'peer-placeholder-shown:text-m-muted peer-[&:not(:placeholder-shown):not(:focus)]:text-black peer-focus:text-m-primary',

app/components/malio/input/InputTextArea.test.ts

@@ -118,9 +118,9 @@ describe('MalioInputTextArea', () => {
       },
     })
 
-    expect(wrapper.get('textarea').classes()).toContain('border-m-error')
+    expect(wrapper.get('textarea').classes()).toContain('border-m-danger')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
-    expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Textarea error')
     expect(wrapper.get('textarea').attributes('aria-invalid')).toBe('true')
   })
 
@@ -145,8 +145,8 @@ describe('MalioInputTextArea', () => {
       },
     })
 
-    expect(wrapper.get('textarea').classes()).toContain('border-m-error')
+    expect(wrapper.get('textarea').classes()).toContain('border-m-danger')
     expect(wrapper.find('p.text-m-success').exists()).toBe(false)
-    expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Textarea error')
   })
 })

app/components/malio/input/InputUpload.test.ts

@@ -115,15 +115,15 @@ describe('MalioInputUpload', () => {
   it('shows error message and styles', () => {
     const wrapper = mountComponent({error: 'Fichier requis'})
 
-    expect(wrapper.get('p.text-m-error').text()).toBe('Fichier requis')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Fichier requis')
-    expect(wrapper.get('input[type="text"]').classes()).toContain('border-m-error')
+    expect(wrapper.get('input[type="text"]').classes()).toContain('border-m-danger')
     expect(wrapper.get('input[type="text"]').attributes('aria-invalid')).toBe('true')
   })
 
   it('shows error style on icon', () => {
     const wrapper = mountComponent({error: 'Error'})
 
-    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
+    expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
   })
 
   it('shows success message and styles', () => {

app/components/malio/radio/RadioButton.test.ts

@@ -112,8 +112,8 @@ describe('MalioRadioButton', () => {
     })
 
     expect(wrapper.get('.radio-control').classes()).toContain('is-error')
-    expect(wrapper.get('.radio-text').classes()).toContain('text-m-error')
+    expect(wrapper.get('.radio-text').classes()).toContain('text-m-danger')
-    expect(wrapper.get('.radio-message').classes()).toContain('text-m-error')
+    expect(wrapper.get('.radio-message').classes()).toContain('text-m-danger')
     expect(wrapper.get('input').attributes('aria-invalid')).toBe('true')
   })
 
@@ -137,7 +137,7 @@ describe('MalioRadioButton', () => {
     expect(wrapper.get('.radio-control').classes()).toContain('is-error')
     expect(wrapper.get('.radio-control').classes()).not.toContain('is-success')
     expect(wrapper.get('.radio-message').text()).toBe('Selection required')
-    expect(wrapper.get('.radio-message').classes()).toContain('text-m-error')
+    expect(wrapper.get('.radio-message').classes()).toContain('text-m-danger')
   })
 
   it('merges custom classes on group, input and label', () => {

app/components/malio/select/Select.test.ts

@@ -139,9 +139,9 @@ describe('MalioSelect', () => {
       },
     })
 
-    expect(wrapper.get('button').classes()).toContain('border-m-error')
+    expect(wrapper.get('button').classes()).toContain('border-m-danger')
-    expect(wrapper.get('label').classes()).toContain('text-m-error')
+    expect(wrapper.get('label').classes()).toContain('text-m-danger')
-    expect(wrapper.get('p.text-m-error').text()).toBe('Selection error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Selection error')
     expect(wrapper.get('button').attributes('aria-invalid')).toBe('true')
   })
 
@@ -170,8 +170,8 @@ describe('MalioSelect', () => {
       },
     })
 
-    expect(wrapper.get('button').classes()).toContain('border-m-error')
+    expect(wrapper.get('button').classes()).toContain('border-m-danger')
     expect(wrapper.find('p.text-m-success').exists()).toBe(false)
-    expect(wrapper.get('p.text-m-error').text()).toBe('Selection error')
+    expect(wrapper.get('p.text-m-danger').text()).toBe('Selection error')
   })
 })

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"

app/story/input/inputPassword.story.vue

@@ -202,7 +202,7 @@ automatiquement.
 ### Couleur de l'icône
 
 -   `text-m-muted` par défaut.
--   `text-m-error` si la prop `error` est renseignée.
+-   `text-m-danger` si la prop `error` est renseignée.
 -   `text-m-success` si la prop `success` est renseignée.
 
 ------------------------------------------------------------------------

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>)',
-          error: 'rgb(var(--m-error) / <alpha-value>)',
+          disabled: 'rgb(var(--m-disabled) / <alpha-value>)',
+          danger: 'rgb(var(--m-danger) / <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: {