MALIO-DEV/malio-layer-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Merged
tristan merged 2 commits from feature/MUI-23-revoir-la-config-couleur-tailwind into develop 2026-03-24 09:05:24 +00:00
Conversation 0 Commits 2 Files Changed 19 +106 -102
19 changed files with 106 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.playground/pages/index.vue
View File

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

1
CHANGELOG.md
View File

@@ -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

44
app/assets/css/malio.css
View File

@@ -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-danger: 242 105 107; /* #F2696B - Erreurs et boutons danger */
--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;
}
}

12
app/components/malio/button/ButtonIcon.test.ts
View File

@@ -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')
})
})

8
app/components/malio/button/ButtonIcon.vue
View File

@@ -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,
),
)

4
app/components/malio/checkbox/Checkbox.test.ts
View File

@@ -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', () => {

36
app/components/malio/input/Input.test.ts
View File

@@ -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('input').classes()).toContain('border-m-error')
expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
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('input').classes()).toContain('border-m-error')
expect(wrapper.get('label').classes()).toContain('text-m-error')
expect(wrapper.get('p').classes()).toContain('text-m-error')
expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
expect(wrapper.get('input').classes()).toContain('border-m-danger')
expect(wrapper.get('label').classes()).toContain('text-m-danger')
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('input').classes()).toContain('border-m-error')
expect(wrapper.get('label').classes()).toContain('text-m-error')
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
expect(wrapper.get('p').classes()).toContain('text-m-error')
expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
expect(wrapper.get('input').classes()).toContain('border-m-danger')
expect(wrapper.get('label').classes()).toContain('text-m-danger')
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-danger')
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('input').classes()).toContain('border-m-error')
expect(wrapper.get('[data-test="icon"]').classes()).toContain('text-m-error')
expect(wrapper.get('p.text-m-danger').text()).toBe('Error message test')
expect(wrapper.get('input').classes()).toContain('border-m-danger')
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.get('p.text-m-error').text()).toBe('Error message test')
expect(wrapper.find('p.text-m-danger').exists()).toBe(true)
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')
})

2
app/components/malio/input/InputAmount.test.ts
View File

@@ -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 () => {

6
app/components/malio/input/InputPassword.test.ts
View File

@@ -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('input').classes()).toContain('border-m-error')
expect(wrapper.get('p.text-m-danger').text()).toBe('Mot de passe requis')
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', () => {

8
app/components/malio/input/InputText.vue
View File

@@ -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',

10
app/components/malio/input/InputTextArea.test.ts
View File

@@ -118,9 +118,9 @@ describe('MalioInputTextArea', () => {
},
})
expect(wrapper.get('textarea').classes()).toContain('border-m-error')
expect(wrapper.get('label').classes()).toContain('text-m-error')
expect(wrapper.get('p.text-m-error').text()).toBe('Textarea error')
expect(wrapper.get('textarea').classes()).toContain('border-m-danger')
expect(wrapper.get('label').classes()).toContain('text-m-danger')
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')
})
})

6
app/components/malio/input/InputUpload.test.ts
View File

@@ -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('input[type="text"]').classes()).toContain('border-m-error')
expect(wrapper.get('p.text-m-danger').text()).toBe('Fichier requis')
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', () => {

6
app/components/malio/radio/RadioButton.test.ts
View File

@@ -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-message').classes()).toContain('text-m-error')
expect(wrapper.get('.radio-text').classes()).toContain('text-m-danger')
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', () => {

10
app/components/malio/select/Select.test.ts
View File

@@ -139,9 +139,9 @@ describe('MalioSelect', () => {
},
})
expect(wrapper.get('button').classes()).toContain('border-m-error')
expect(wrapper.get('label').classes()).toContain('text-m-error')
expect(wrapper.get('p.text-m-error').text()).toBe('Selection error')
expect(wrapper.get('button').classes()).toContain('border-m-danger')
expect(wrapper.get('label').classes()).toContain('text-m-danger')
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')
})
})

4
app/components/malio/sidebar/Sidebar.vue
View File

@@ -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"

2
app/components/malio/tab/TabList.vue
View File

@@ -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"

2
app/story/input/inputPassword.story.vue
View File

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

23
nuxt.config.ts
View File

@@ -16,27 +16,6 @@ export default defineNuxtConfig({
],
tailwindcss: {
config: {
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>)',
}
}
}
}
}
configPath: join(dir, 'tailwind.config.ts'),
}
})

22
tailwind.config.ts
View File

@@ -16,18 +16,26 @@ export default {
colors: {
m: {
primary: 'rgb(var(--m-primary) / <alpha-value>)',
secondary: 'rgb(var(--m-secondary) / <alpha-value>)',
tertiary: 'rgb(var(--m-tertiary) / <alpha-value>)',
surface: 'rgb(var(--m-surface) / <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-hover': 'rgb(var(--m-btn-hover) / <alpha-value>)',
'btn-active': 'rgb(var(--m-btn-active) / <alpha-value>)',
'btn-disabled': 'rgb(var(--m-btn-disabled) / <alpha-value>)',
'btn-primary': 'rgb(var(--m-btn-primary) / <alpha-value>)',
'btn-primary-hover': 'rgb(var(--m-btn-primary-hover) / <alpha-value>)',
'btn-primary-active': 'rgb(var(--m-btn-primary-active) / <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: {