Système de design
Primitives
Les composants d'interface reposent sur les primitives shadcn-vue (src/components/ui/), le portage Vue quasi 1:1 des primitives shadcn/ui de la référence. Elles sont ajoutées via la CLI shadcn-vue par-dessus Tailwind v4 (@tailwindcss/vite), pas écrites à la main. La primitive calendar (et sa dépendance de registre native-select) s'appuie sur la dépendance @internationalized/date pour ses valeurs de date (CalendarDate).
Jetons de design (design tokens)
Les jetons sont définis dans le bloc @theme de src/style.css (Tailwind v4, approche CSS-first), en conservant les noms sémantiques shadcn pour que les primitives les reprennent automatiquement :
- Palette « vert forêt suisse » :
--primary(vert forêt),--secondary(mélèze),--accent(rouge suisse), plus la variante--primary-hover. - Rayons :
--radius-card(8px → utilitairerounded-card) et--radius-button(2px →rounded-button). - Ombre :
--shadow-elevated(→ utilitaireshadow-elevated). - Animation
fade-up(→animate-fade-up) et utilitaire.btn-press(retour tactile à l'appui).
Règles d'usage
Utilitaires Tailwind d'abord ; pas de valeurs arbitraires lorsqu'un jeton existe. Les classes conditionnelles passent par le helper cn() (src/lib/utils.ts).