From 04f16c1f042ea633e1e65afbb388d3853fdba730 Mon Sep 17 00:00:00 2001 From: tristan Date: Tue, 24 Mar 2026 09:05:35 +0100 Subject: [PATCH 1/2] feat : refacto de la config couleur --- .playground/pages/index.vue | 2 +- app/assets/css/malio.css | 44 +++++++++++++------ .../malio/button/ButtonIcon.test.ts | 12 ++--- app/components/malio/button/ButtonIcon.vue | 8 ++-- app/components/malio/sidebar/Sidebar.vue | 4 +- app/components/malio/tab/TabList.vue | 2 +- nuxt.config.ts | 23 +--------- tailwind.config.ts | 20 ++++++--- 8 files changed, 59 insertions(+), 56 deletions(-) diff --git a/.playground/pages/index.vue b/.playground/pages/index.vue index b9a2518..6b07306 100644 --- a/.playground/pages/index.vue +++ b/.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 }} diff --git a/app/assets/css/malio.css b/app/assets/css/malio.css index 5843a6d..8895355 100644 --- a/app/assets/css/malio.css +++ b/app/assets/css/malio.css @@ -4,21 +4,37 @@ @layer base { :root { - /* Couleurs en RGB “space separated” pour Tailwind */ - --m-primary: 34 39 131; /* Couleur principal*/ - --m-secondary: 48 73 152; /* Couleur secondaire */ - --m-tertiary: 243 244 248; /* Couleur tertiaire (background) */ - --m-border: 203 213 225; /* Couleur des bordures */ - --m-text: 15 23 42; /* Couleur du texte */ - --m-muted: 100 116 139; /* Couleur pour les éléments désactivés ou secondaires */ - --m-bg: 243 244 248; /* Couleur de fond générale */ + /* ── Globales ── */ + --m-primary: 34 39 131; /* #222783 - Bleu Malio */ + --m-bg: 243 244 248; /* #F3F4F8 - Fond de page */ + --m-surface: 243 244 248; /* #F3F4F8 - Fond hover/cartes */ + --m-text: 15 23 42; /* #0F172A */ + --m-muted: 100 116 139; /* #64748B */ + --m-border: 203 213 225; /* #CBD5E1 */ + --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 */ - --m-success: 15 149 70; /* vert pour les succès */ + /* ── Boutons Primary ── */ + --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 */ - --m-btn-hover: 18 28 219; /* #121CDB - bouton hover */ - --m-btn-active: 33 37 103; /* #212567 - bouton active */ - --m-btn-disabled: 204 204 223; /* #CCCCDF - bouton désactivé */ + /* ── Boutons Secondary ── */ + --m-btn-secondary: 75 77 237; /* #4B4DED */ + --m-btn-secondary-hover: 137 123 241; /* #897BF1 */ + --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; } } diff --git a/app/components/malio/button/ButtonIcon.test.ts b/app/components/malio/button/ButtonIcon.test.ts index 0778727..ec5b85b 100644 --- a/app/components/malio/button/ButtonIcon.test.ts +++ b/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()).not.toContain('bg-m-btn-default') + expect(wrapper.get('button').classes()).toContain('text-m-btn-primary') + 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') }) }) diff --git a/app/components/malio/button/ButtonIcon.vue b/app/components/malio/button/ButtonIcon.vue index 8b121d6..9534324 100644 --- a/app/components/malio/button/ButtonIcon.vue +++ b/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-btn-default hover:bg-m-btn-hover active:bg-m-btn-active text-white cursor-pointer' + ? 'bg-m-disabled text-white cursor-not-allowed' + : '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-btn-default hover:text-m-btn-hover active:text-m-btn-active cursor-pointer', + ? 'text-m-disabled cursor-not-allowed' + : 'text-m-btn-primary hover:text-m-btn-primary-hover active:text-m-btn-primary-active cursor-pointer', props.buttonClass, ), ) diff --git a/app/components/malio/sidebar/Sidebar.vue b/app/components/malio/sidebar/Sidebar.vue index 519e07f..99a39ba 100644 --- a/app/components/malio/sidebar/Sidebar.vue +++ b/app/components/malio/sidebar/Sidebar.vue @@ -54,7 +54,7 @@ @@ -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" diff --git a/app/components/malio/tab/TabList.vue b/app/components/malio/tab/TabList.vue index 6293880..3ae39db 100644 --- a/app/components/malio/tab/TabList.vue +++ b/app/components/malio/tab/TabList.vue @@ -2,7 +2,7 @@