Design system
Cette page lit les variables CSS du thème courant. Changez le thème, le mode clair ou sombre, ou une variable depuis la console, et chaque échantillon se met à jour sans rechargement.
Fondations
Chaque token de couleur avec son nom, sa valeur effective et un échantillon.
32 tokens de couleur, dans le mode actuellement affiché.
--background—--foreground—--card—--card-foreground—--popover—--popover-foreground—--muted—--muted-foreground—--surface-alt—--border—--input—--primary—--primary-foreground—--secondary—--secondary-foreground—--accent—--accent-foreground—--destructive—--destructive-foreground—--success—--success-foreground—--warning—--warning-foreground—--info—--info-foreground—--chart-1—--chart-2—--chart-3—--chart-4—--chart-5—--ring—--selection—Fondations
Ratio WCAG 2.1 de chaque paire texte et fond, en clair et en sombre. Une alerte s'affiche sous 4,5:1.
--foreground sur --background
--foreground sur --surface-alt
--foreground sur --card
--foreground sur --muted
--foreground sur --selection
--card-foreground sur --card
--popover-foreground sur --popover
--muted-foreground sur --muted
--muted-foreground sur --background
--muted-foreground sur --card
--muted-foreground sur --surface-alt
--primary-foreground sur --primary
--secondary-foreground sur --secondary
--accent-foreground sur --accent
--destructive-foreground sur --destructive
--success-foreground sur --success
--warning-foreground sur --warning
--info-foreground sur --info
Fondations
Les deux palettes sous le même nom de token, quel que soit le mode actif de la page.
--background——--foreground——--card——--card-foreground——--popover——--popover-foreground——--muted——--muted-foreground——--surface-alt——--border——--input——--primary——--primary-foreground——--secondary——--secondary-foreground——--accent——--accent-foreground——--destructive——--destructive-foreground——--success——--success-foreground——--warning——--warning-foreground——--info——--info-foreground——--chart-1——--chart-2——--chart-3——--chart-4——--chart-5——--ring——--selection——Fondations
Polices du thème et échelle construite sur la taille de base et le ratio d'échelle.
Paragraphe de texte courant. La largeur de lecture suit le token --measure et l'interlignage --body-leading.
Texte secondaire, petite taille.
Surtitre
Fondations
Échelle dérivée du rayon de base et rayons propres à chaque famille de composants.
--radius-button--radius-input--radius-card--radius-badge--radius-imageFondations
Trois niveaux d'élévation et élévation au survol.
--elevation-1--elevation-2--elevation-3Fondations
Multiples de l'unité d'espacement, rythme des sections et gouttière.
Rythme vertical des sections (--section-spacing) et gouttière (--gutter)
Fondations
Anneau de focus (couleur, épaisseur, décalage), toujours visible avec au moins 1 px.
Fondations
Valeurs effectives de tous les tokens qui ne sont pas des couleurs.
| Token | Rôle | Valeur |
|---|---|---|
| --ring-width | Épaisseur de l'anneau | — |
| --ring-offset | Décalage de l'anneau | — |
| --ring-halo | Halo de l'anneau (dérivé) | — |
| Token | Rôle | Valeur |
|---|---|---|
| --heading-font | Police des titres | — |
| --body-font | Police du texte | — |
| --mono-font | Police mono | — |
| --accent-font | Police d'accent | — |
| --heading-weight | Graisse des titres | — |
| --body-weight | Graisse du texte | — |
| --base-size | Taille de base | — |
| --scale-ratio | Ratio d'échelle | — |
| --heading-leading | Interlignage des titres | — |
| --body-leading | Interlignage du texte | — |
| --heading-tracking | Interlettrage des titres | — |
| --heading-transform | Casse des titres | — |
| --measure | Largeur de lecture | — |
| --eyebrow-transform | Casse du surtitre | — |
| --eyebrow-tracking | Interlettrage du surtitre | — |
| --eyebrow-background | Fond du surtitre | — |
| --eyebrow-color | Couleur du surtitre | — |
| --eyebrow-padding | Marge du surtitre | — |
| --eyebrow-radius | Rayon du surtitre | — |
| Token | Rôle | Valeur |
|---|---|---|
| --radius | Rayon de base | — |
| --radius-button | Rayon des boutons | — |
| --radius-input | Rayon des champs | — |
| --radius-card | Rayon des cartes | — |
| --radius-badge | Rayon des badges | — |
| --radius-image | Rayon des images | — |
| --border-width | Épaisseur des bordures | — |
| Token | Rôle | Valeur |
|---|---|---|
| --elevation-1 | Ombre niveau 1 | — |
| --elevation-2 | Ombre niveau 2 | — |
| --elevation-3 | Ombre niveau 3 | — |
| --hover-lift | Élévation au survol | — |
| Token | Rôle | Valeur |
|---|---|---|
| --space-unit | Unité d'espacement | — |
| --container-width | Largeur du conteneur | — |
| --section-spacing | Rythme vertical des sections | — |
| --gutter-base | Gouttière de base | — |
| --gutter-scale | Échelle de gouttière | — |
| --gutter | Gouttière | — |
| Token | Rôle | Valeur |
|---|---|---|
| --motion-duration | Durée | — |
| --motion-easing | Courbe | — |
| --reveal-name | Animation d'apparition | — |
| --reveal-distance | Distance d'apparition | — |
| Token | Rôle | Valeur |
|---|---|---|
| --icon-stroke | Épaisseur des icônes | — |
| --button-style | Style des boutons | — |
| --card-style | Style des cartes | — |
| --header-style | Style du header | — |
| --link-style | Style des liens | — |
| --default-mode | Mode par défaut | — |
| --link-decoration | Soulignement des liens (dérivé) | — |
| --background-pattern | Fond décoratif | — |
| --background-pattern-size | Taille du fond décoratif | — |
| --button-bg | Fond du bouton (dérivé) | — |
| --button-fg | Texte du bouton (dérivé) | — |
| --button-border | Bordure du bouton (dérivé) | — |
| --card-border-width | Bordure de carte (dérivé) | — |
| --card-shadow | Ombre de carte (dérivé) | — |
| --card-surface | Fond de carte (dérivé) | — |
| --header-bg | Fond du header (dérivé) | — |
| --header-blur | Flou du header (dérivé) | — |
| --header-border | Bordure du header (dérivé) | — |
| --image-treatment | Traitement des images | — |
| --image-filter | Filtre d'image (dérivé) | — |
| --image-overlay | Voile d'image (dérivé) | — |
| --image-overlay-blend | Fusion du voile (dérivé) | — |
| --brand-gradient | Dégradé de marque | — |
Composants
Toutes les primitives shadcn-vue, avec leurs variantes et leurs états.
États : normal, survol, focus, actif, désactivé.
default
destructive
outline
secondary
ghost
link
Composant statique : variantes uniquement.
Composant statique : variantes uniquement.
Titre, description et action en en-tête.
CardContent : le style (bordure, ombre ou aplat) suit --card-style.
Carte sans en-tête ni pied.
États : normal, survol, focus, actif, désactivé, erreur.
text
États : normal, survol, focus, actif, désactivé, erreur.
États : normal, survol, focus, actif, désactivé, erreur.
États : normal, survol, focus, actif, désactivé, erreur.
unchecked
checked
États : normal, survol, focus, actif, désactivé, erreur.
RadioGroupItem
États : normal, survol, focus, actif, désactivé.
off
on
États : normal, survol, focus, actif, désactivé.
Composant statique : variantes uniquement.
États : normal, survol, focus, actif, désactivé.
États : normal, survol, focus, actif, désactivé.
États : normal, survol, focus, actif, désactivé.
DialogTrigger (clic pour ouvrir)
États : normal, survol, focus, actif, désactivé.
SheetTrigger (clic pour ouvrir)
États : normal, survol, focus, actif, désactivé.
PopoverTrigger (clic pour ouvrir)
États : normal, survol, focus, actif, désactivé.
TooltipTrigger (survol ou focus pour ouvrir)
États : normal, survol, focus, actif, désactivé.
Déclencheur
Composant statique : variantes uniquement.
horizontal
Contenu sous le filet.
Composant statique : variantes uniquement.
États : normal, survol, focus, actif, désactivé.
NavigationMenuTrigger
Composant statique : variantes uniquement.
| Offre | Délai | Prix |
|---|---|---|
| Essentiel | 2 semaines | 1 200 € |
| Sélectionnée | 4 semaines | 2 400 € |
| Total | 3 600 € | |
Composant statique : variantes uniquement.
Composants
Les blocs réels des pages, en miniature, avec un renvoi vers la page où ils sont utilisés.
