tristan
b55050b2ad
Release / release (push) Successful in 1m36s
## Description Deux changements regroupés : ### 1. Nouveau token Tailwind partagé `w-m-btn-action` (150px) Exposé via `tailwind.config.ts` du layer + CSS var `--m-btn-action-width` dans `malio.css`. Utilisable côté projet consommateur pour les boutons d'action (`<MalioButton button-class="w-m-btn-action" />`), et themable en redéfinissant la CSS var dans son propre `:root`. Convention alignée sur les couleurs `m-btn-primary` / `m-btn-secondary` / `m-btn-danger` (préfixe `m-btn-`). ### 2. Fix alignement pagination DataTable Régression visuelle après l'introduction du `min-h-[1rem]` sur la zone message du MalioSelect (qui ajoute ~20px sous le field). La barre pagination du DataTable embarquait un MalioSelect pour le `perPage` à côté d'éléments centrés (span « Lignes : » + nav boutons Prev/Page/Next), faisant dériver l'alignement vertical. **Fix** : - La barre pagination passe en `items-center` - Le MalioSelect du sélecteur perPage est encapsulé dans un wrapper `h-12` qui borne sa taille flex à la hauteur du field — le slot vide déborde invisiblement en dessous - Tous les centres alignés exactement sur le field (y=24) ## Check list - [x] Pas de régression - [x] TU/TI/TF rédigée (34/34 tests DataTable OK) - [x] TU/TI/TF OK - [x] CHANGELOG modifié 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: THOLOT DECHENE Matthieu <matthieu@yuno.malio.fr> Co-authored-by: matthieu <matthieu@yuno.malio.fr> Reviewed-on: #59 Co-authored-by: tristan <tristan@yuno.malio.fr> Co-committed-by: tristan <tristan@yuno.malio.fr>
55 lines
2.2 KiB
TypeScript
55 lines
2.2 KiB
TypeScript
import type {Config} from 'tailwindcss'
|
|
import {fileURLToPath} from 'node:url'
|
|
import {dirname, join} from 'node:path'
|
|
|
|
const dir = dirname(fileURLToPath(import.meta.url))
|
|
|
|
export default {
|
|
content: [
|
|
join(dir, 'app/**/*.{vue,js,ts}'),
|
|
join(dir, 'app/**/*.story.{vue,js,ts}'),
|
|
join(dir, '.playground/**/*.{vue,js,ts}'),
|
|
join(dir, 'histoire.setup.ts'),
|
|
join(dir, 'histoire.config.ts'),
|
|
],
|
|
theme: {
|
|
extend: {
|
|
borderRadius: {
|
|
malio: 'var(--m-radius)',
|
|
},
|
|
width: {
|
|
'm-btn-action': 'var(--m-btn-action-width)',
|
|
},
|
|
colors: {
|
|
m: {
|
|
primary: 'rgb(var(--m-primary) / <alpha-value>)',
|
|
'primary-light': 'rgb(var(--m-primary-light) / <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>)',
|
|
disabled: 'rgb(var(--m-disabled) / <alpha-value>)',
|
|
danger: 'rgb(var(--m-danger) / <alpha-value>)',
|
|
success: 'rgb(var(--m-success) / <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: {
|
|
sans: ['"Inter"', 'Helvetica Neue', 'Helvetica', 'Arial', 'sans-serif'],
|
|
},
|
|
},
|
|
},
|
|
} satisfies Partial<Config>
|