4 · Composants — formulaire
Button, Input, Textarea, Select, Checkbox, Radio, Switch. Rendus uniquement avec les variables générées.
Rien n'est écrit à la main. Seul le
button est role-aware :
il est généré pour les 6 rôles à partir d'une table qui dit quels slots
chaque variante consomme (<Button color="danger"> existe sans un token de plus).
checkbox, radio et switch, eux, sont mono-parti :
une case n'a pas de couleur à choisir, elle est primary. Ils gardent en revanche un
état d'erreur qui pointe le rôle danger — comme le error
d'un champ.
Button
filled
| default | hover | active | disabled | |
|---|---|---|---|---|
| primary | ||||
| neutral | ||||
| success | ||||
| warning | ||||
| danger | ||||
| info |
outlined
| default | hover | active | disabled | |
|---|---|---|---|---|
| primary | ||||
| neutral | ||||
| success | ||||
| warning | ||||
| danger | ||||
| info |
ghost
| default | hover | active | disabled | |
|---|---|---|---|---|
| primary | ||||
| neutral | ||||
| success | ||||
| warning | ||||
| danger | ||||
| info |
Tailles
sm
md
lg
Sur mobile, les contrôles GRANDISSENT. C'est la seule famille de tailles qui
augmente au lieu de diminuer : une cible tactile doit faire au moins 44px (WCAG 2.5.5). Un
bouton
md passe de 40px en desktop à 52px sous
768px.
Les 245 tokens de button, et le token
sémantique que chacun consomme. Aucun ne nomme jamais une palette ni une police —
suivre un lien mène à la page où ce rôle est défini.
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --color-button-filled-primary-default-background | --color-role-primary-main |
#9500ee |
| --color-button-filled-primary-default-text | --color-role-primary-on |
#f6fbff |
| --color-button-filled-primary-default-border | --color-role-primary-main |
#9500ee |
| --color-button-filled-primary-hover-background | --color-role-primary-hover |
#7400bb |
| --color-button-filled-primary-hover-text | --color-role-primary-on |
#f6fbff |
| --color-button-filled-primary-hover-border | --color-role-primary-hover |
#7400bb |
| --color-button-filled-primary-active-background | --color-role-primary-active |
#510085 |
| --color-button-filled-primary-active-text | --color-role-primary-on |
#f6fbff |
| --color-button-filled-primary-active-border | --color-role-primary-active |
#510085 |
| --color-button-filled-primary-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-button-filled-primary-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-filled-primary-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-button-filled-neutral-default-background | --color-role-neutral-main |
#4c7299 |
| --color-button-filled-neutral-default-text | --color-role-neutral-on |
#f6fbff |
| --color-button-filled-neutral-default-border | --color-role-neutral-main |
#4c7299 |
| --color-button-filled-neutral-hover-background | --color-role-neutral-hover |
#37587a |
| --color-button-filled-neutral-hover-text | --color-role-neutral-on |
#f6fbff |
| --color-button-filled-neutral-hover-border | --color-role-neutral-hover |
#37587a |
| --color-button-filled-neutral-active-background | --color-role-neutral-active |
#213c58 |
| --color-button-filled-neutral-active-text | --color-role-neutral-on |
#f6fbff |
| --color-button-filled-neutral-active-border | --color-role-neutral-active |
#213c58 |
| --color-button-filled-neutral-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-button-filled-neutral-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-filled-neutral-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-button-filled-success-default-background | --color-role-success-main |
#00853c |
| --color-button-filled-success-default-text | --color-role-success-on |
#f6fbff |
| --color-button-filled-success-default-border | --color-role-success-main |
#00853c |
| --color-button-filled-success-hover-background | --color-role-success-hover |
#00672d |
| --color-button-filled-success-hover-text | --color-role-success-on |
#f6fbff |
| --color-button-filled-success-hover-border | --color-role-success-hover |
#00672d |
| --color-button-filled-success-active-background | --color-role-success-active |
#00481d |
| --color-button-filled-success-active-text | --color-role-success-on |
#f6fbff |
| --color-button-filled-success-active-border | --color-role-success-active |
#00481d |
| --color-button-filled-success-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-button-filled-success-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-filled-success-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-button-filled-warning-default-background | --color-role-warning-main |
#ba4200 |
| --color-button-filled-warning-default-text | --color-role-warning-on |
#f6fbff |
| --color-button-filled-warning-default-border | --color-role-warning-main |
#ba4200 |
| --color-button-filled-warning-hover-background | --color-role-warning-hover |
#913200 |
| --color-button-filled-warning-hover-text | --color-role-warning-on |
#f6fbff |
| --color-button-filled-warning-hover-border | --color-role-warning-hover |
#913200 |
| --color-button-filled-warning-active-background | --color-role-warning-active |
#662000 |
| --color-button-filled-warning-active-text | --color-role-warning-on |
#f6fbff |
| --color-button-filled-warning-active-border | --color-role-warning-active |
#662000 |
| --color-button-filled-warning-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-button-filled-warning-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-filled-warning-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-button-filled-danger-default-background | --color-role-danger-main |
#cd161d |
| --color-button-filled-danger-default-text | --color-role-danger-on |
#f6fbff |
| --color-button-filled-danger-default-border | --color-role-danger-main |
#cd161d |
| --color-button-filled-danger-hover-background | --color-role-danger-hover |
#a3000f |
| --color-button-filled-danger-hover-text | --color-role-danger-on |
#f6fbff |
| --color-button-filled-danger-hover-border | --color-role-danger-hover |
#a3000f |
| --color-button-filled-danger-active-background | --color-role-danger-active |
#730007 |
| --color-button-filled-danger-active-text | --color-role-danger-on |
#f6fbff |
| --color-button-filled-danger-active-border | --color-role-danger-active |
#730007 |
| --color-button-filled-danger-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-button-filled-danger-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-filled-danger-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-button-filled-info-default-background | --color-role-info-main |
#2b60e8 |
| --color-button-filled-info-default-text | --color-role-info-on |
#f6fbff |
| --color-button-filled-info-default-border | --color-role-info-main |
#2b60e8 |
| --color-button-filled-info-hover-background | --color-role-info-hover |
#1846bf |
| --color-button-filled-info-hover-text | --color-role-info-on |
#f6fbff |
| --color-button-filled-info-hover-border | --color-role-info-hover |
#1846bf |
| --color-button-filled-info-active-background | --color-role-info-active |
#082c90 |
| --color-button-filled-info-active-text | --color-role-info-on |
#f6fbff |
| --color-button-filled-info-active-border | --color-role-info-active |
#082c90 |
| --color-button-filled-info-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-button-filled-info-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-filled-info-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-button-outlined-primary-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-outlined-primary-default-text | --color-role-primary-text |
#7400bb |
| --color-button-outlined-primary-default-border | --color-role-primary-border |
#cda5ff |
| --color-button-outlined-primary-hover-background | --color-role-primary-tint |
rgba(170, 76, 255, 0.05) |
| --color-button-outlined-primary-hover-text | --color-role-primary-text |
#7400bb |
| --color-button-outlined-primary-hover-border | --color-role-primary-main |
#9500ee |
| --color-button-outlined-primary-active-background | --color-role-primary-tint-strong |
rgba(170, 76, 255, 0.1) |
| --color-button-outlined-primary-active-text | --color-role-primary-text |
#7400bb |
| --color-button-outlined-primary-active-border | --color-role-primary-main |
#9500ee |
| --color-button-outlined-primary-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-outlined-primary-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-outlined-primary-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-button-outlined-neutral-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-outlined-neutral-default-text | --color-role-neutral-text |
#37587a |
| --color-button-outlined-neutral-default-border | --color-role-neutral-border |
#9fbede |
| --color-button-outlined-neutral-hover-background | --color-role-neutral-tint |
rgba(100, 139, 180, 0.05) |
| --color-button-outlined-neutral-hover-text | --color-role-neutral-text |
#37587a |
| --color-button-outlined-neutral-hover-border | --color-role-neutral-main |
#4c7299 |
| --color-button-outlined-neutral-active-background | --color-role-neutral-tint-strong |
rgba(100, 139, 180, 0.1) |
| --color-button-outlined-neutral-active-text | --color-role-neutral-text |
#37587a |
| --color-button-outlined-neutral-active-border | --color-role-neutral-main |
#4c7299 |
| --color-button-outlined-neutral-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-outlined-neutral-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-outlined-neutral-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-button-outlined-success-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-outlined-success-default-text | --color-role-success-text |
#00672d |
| --color-button-outlined-success-default-border | --color-role-success-border |
#6fd488 |
| --color-button-outlined-success-hover-background | --color-role-success-tint |
rgba(0, 163, 74, 0.05) |
| --color-button-outlined-success-hover-text | --color-role-success-text |
#00672d |
| --color-button-outlined-success-hover-border | --color-role-success-main |
#00853c |
| --color-button-outlined-success-active-background | --color-role-success-tint-strong |
rgba(0, 163, 74, 0.1) |
| --color-button-outlined-success-active-text | --color-role-success-text |
#00672d |
| --color-button-outlined-success-active-border | --color-role-success-main |
#00853c |
| --color-button-outlined-success-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-outlined-success-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-outlined-success-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-button-outlined-warning-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-outlined-warning-default-text | --color-role-warning-text |
#913200 |
| --color-button-outlined-warning-default-border | --color-role-warning-border |
#ff9e7a |
| --color-button-outlined-warning-hover-background | --color-role-warning-tint |
rgba(226, 82, 0, 0.05) |
| --color-button-outlined-warning-hover-text | --color-role-warning-text |
#913200 |
| --color-button-outlined-warning-hover-border | --color-role-warning-main |
#ba4200 |
| --color-button-outlined-warning-active-background | --color-role-warning-tint-strong |
rgba(226, 82, 0, 0.1) |
| --color-button-outlined-warning-active-text | --color-role-warning-text |
#913200 |
| --color-button-outlined-warning-active-border | --color-role-warning-main |
#ba4200 |
| --color-button-outlined-warning-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-outlined-warning-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-outlined-warning-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-button-outlined-danger-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-outlined-danger-default-text | --color-role-danger-text |
#a3000f |
| --color-button-outlined-danger-default-border | --color-role-danger-border |
#ff9b90 |
| --color-button-outlined-danger-hover-background | --color-role-danger-tint |
rgba(237, 59, 55, 0.05) |
| --color-button-outlined-danger-hover-text | --color-role-danger-text |
#a3000f |
| --color-button-outlined-danger-hover-border | --color-role-danger-main |
#cd161d |
| --color-button-outlined-danger-active-background | --color-role-danger-tint-strong |
rgba(237, 59, 55, 0.1) |
| --color-button-outlined-danger-active-text | --color-role-danger-text |
#a3000f |
| --color-button-outlined-danger-active-border | --color-role-danger-main |
#cd161d |
| --color-button-outlined-danger-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-outlined-danger-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-outlined-danger-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-button-outlined-info-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-outlined-info-default-text | --color-role-info-text |
#1846bf |
| --color-button-outlined-info-default-border | --color-role-info-border |
#98baff |
| --color-button-outlined-info-hover-background | --color-role-info-tint |
rgba(70, 126, 255, 0.05) |
| --color-button-outlined-info-hover-text | --color-role-info-text |
#1846bf |
| --color-button-outlined-info-hover-border | --color-role-info-main |
#2b60e8 |
| --color-button-outlined-info-active-background | --color-role-info-tint-strong |
rgba(70, 126, 255, 0.1) |
| --color-button-outlined-info-active-text | --color-role-info-text |
#1846bf |
| --color-button-outlined-info-active-border | --color-role-info-main |
#2b60e8 |
| --color-button-outlined-info-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-outlined-info-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-outlined-info-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-button-ghost-primary-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-primary-default-text | --color-role-primary-text |
#7400bb |
| --color-button-ghost-primary-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-primary-hover-background | --color-role-primary-tint |
rgba(170, 76, 255, 0.05) |
| --color-button-ghost-primary-hover-text | --color-role-primary-text |
#7400bb |
| --color-button-ghost-primary-hover-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-primary-active-background | --color-role-primary-tint-strong |
rgba(170, 76, 255, 0.1) |
| --color-button-ghost-primary-active-text | --color-role-primary-text |
#7400bb |
| --color-button-ghost-primary-active-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-primary-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-primary-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-ghost-primary-disabled-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-neutral-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-neutral-default-text | --color-role-neutral-text |
#37587a |
| --color-button-ghost-neutral-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-neutral-hover-background | --color-role-neutral-tint |
rgba(100, 139, 180, 0.05) |
| --color-button-ghost-neutral-hover-text | --color-role-neutral-text |
#37587a |
| --color-button-ghost-neutral-hover-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-neutral-active-background | --color-role-neutral-tint-strong |
rgba(100, 139, 180, 0.1) |
| --color-button-ghost-neutral-active-text | --color-role-neutral-text |
#37587a |
| --color-button-ghost-neutral-active-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-neutral-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-neutral-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-ghost-neutral-disabled-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-success-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-success-default-text | --color-role-success-text |
#00672d |
| --color-button-ghost-success-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-success-hover-background | --color-role-success-tint |
rgba(0, 163, 74, 0.05) |
| --color-button-ghost-success-hover-text | --color-role-success-text |
#00672d |
| --color-button-ghost-success-hover-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-success-active-background | --color-role-success-tint-strong |
rgba(0, 163, 74, 0.1) |
| --color-button-ghost-success-active-text | --color-role-success-text |
#00672d |
| --color-button-ghost-success-active-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-success-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-success-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-ghost-success-disabled-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-warning-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-warning-default-text | --color-role-warning-text |
#913200 |
| --color-button-ghost-warning-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-warning-hover-background | --color-role-warning-tint |
rgba(226, 82, 0, 0.05) |
| --color-button-ghost-warning-hover-text | --color-role-warning-text |
#913200 |
| --color-button-ghost-warning-hover-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-warning-active-background | --color-role-warning-tint-strong |
rgba(226, 82, 0, 0.1) |
| --color-button-ghost-warning-active-text | --color-role-warning-text |
#913200 |
| --color-button-ghost-warning-active-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-warning-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-warning-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-ghost-warning-disabled-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-danger-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-danger-default-text | --color-role-danger-text |
#a3000f |
| --color-button-ghost-danger-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-danger-hover-background | --color-role-danger-tint |
rgba(237, 59, 55, 0.05) |
| --color-button-ghost-danger-hover-text | --color-role-danger-text |
#a3000f |
| --color-button-ghost-danger-hover-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-danger-active-background | --color-role-danger-tint-strong |
rgba(237, 59, 55, 0.1) |
| --color-button-ghost-danger-active-text | --color-role-danger-text |
#a3000f |
| --color-button-ghost-danger-active-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-danger-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-danger-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-ghost-danger-disabled-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-info-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-info-default-text | --color-role-info-text |
#1846bf |
| --color-button-ghost-info-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-info-hover-background | --color-role-info-tint |
rgba(70, 126, 255, 0.05) |
| --color-button-ghost-info-hover-text | --color-role-info-text |
#1846bf |
| --color-button-ghost-info-hover-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-info-active-background | --color-role-info-tint-strong |
rgba(70, 126, 255, 0.1) |
| --color-button-ghost-info-active-text | --color-role-info-text |
#1846bf |
| --color-button-ghost-info-active-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-info-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-button-ghost-info-disabled-text | --color-text-disabled |
#9fbede |
| --color-button-ghost-info-disabled-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
size
6 tokens
consomme controlHeight glyphSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --size-button-sm-height | --control-height-sm |
32px |
| --size-button-sm-icon | --glyph-size-sm |
16px |
| --size-button-md-height | --control-height-md |
40px |
| --size-button-md-icon | --glyph-size-md |
20px |
| --size-button-lg-height | --control-height-lg |
48px |
| --size-button-lg-icon | --glyph-size-lg |
24px |
space
9 tokens
consomme space
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --space-button-sm-padding-x | --space-sm |
8px |
| --space-button-sm-padding-y | --space-xs |
4px |
| --space-button-sm-gap | --space-xs |
4px |
| --space-button-md-padding-x | --space-md |
16px |
| --space-button-md-padding-y | --space-sm |
8px |
| --space-button-md-gap | --space-xs |
4px |
| --space-button-lg-padding-x | --space-lg |
24px |
| --space-button-lg-padding-y | --space-sm |
8px |
| --space-button-lg-gap | --space-xs |
4px |
fontSize
3 tokens
consomme fontSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --font-size-button-sm | --font-size-small |
14px |
| --font-size-button-md | --font-size-body |
16px |
| --font-size-button-lg | --font-size-lead |
20px |
radius
3 tokens
consomme radius
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --radius-button-sm | --radius-sm |
4px |
| --radius-button-md | --radius-md |
8px |
| --radius-button-lg | --radius-md |
8px |
borderWidth
3 tokens
consomme borderWidth
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --border-width-button-sm | --border-width-default |
1px |
| --border-width-button-md | --border-width-default |
1px |
| --border-width-button-lg | --border-width-default |
1px |
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --typography-button-family | --typography-label-family |
'JetBrains Mono', ui-monospace, 'SF Mono', monospace |
| --typography-button-weight | --typography-label-weight |
500 |
| --typography-button-line-height | --typography-label-line-height |
1.2 |
| --typography-button-letter-spacing | --typography-label-letter-spacing |
0 |
| --typography-button-text-case | --typography-label-text-case |
none |
Input
default
hover
focus
disabled
error
Les 49 tokens de input, et le token
sémantique que chacun consomme. Aucun ne nomme jamais une palette ni une police —
suivre un lien mène à la page où ce rôle est défini.
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --color-input-default-background | --color-surface-base |
#f6fbff |
| --color-input-default-text | --color-text-body |
#213c58 |
| --color-input-default-border | --color-border-default |
#c0d7ef |
| --color-input-default-placeholder | --color-text-muted |
#4c7299 |
| --color-input-hover-background | --color-surface-base |
#f6fbff |
| --color-input-hover-text | --color-text-body |
#213c58 |
| --color-input-hover-border | --color-border-strong |
#80a5cc |
| --color-input-hover-placeholder | --color-text-muted |
#4c7299 |
| --color-input-focus-background | --color-surface-base |
#f6fbff |
| --color-input-focus-text | --color-text-body |
#213c58 |
| --color-input-focus-border | --color-role-primary-main |
#9500ee |
| --color-input-focus-placeholder | --color-text-muted |
#4c7299 |
| --color-input-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-input-disabled-text | --color-text-disabled |
#9fbede |
| --color-input-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-input-disabled-placeholder | --color-text-disabled |
#9fbede |
| --color-input-error-background | --color-surface-base |
#f6fbff |
| --color-input-error-text | --color-text-body |
#213c58 |
| --color-input-error-border | --color-role-danger-main |
#cd161d |
| --color-input-error-placeholder | --color-text-muted |
#4c7299 |
size
6 tokens
consomme controlHeight glyphSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --size-input-sm-height | --control-height-sm |
32px |
| --size-input-sm-icon | --glyph-size-sm |
16px |
| --size-input-md-height | --control-height-md |
40px |
| --size-input-md-icon | --glyph-size-md |
20px |
| --size-input-lg-height | --control-height-lg |
48px |
| --size-input-lg-icon | --glyph-size-lg |
24px |
space
9 tokens
consomme space
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --space-input-sm-padding-x | --space-sm |
8px |
| --space-input-sm-padding-y | --space-xs |
4px |
| --space-input-sm-gap | --space-xs |
4px |
| --space-input-md-padding-x | --space-sm |
8px |
| --space-input-md-padding-y | --space-sm |
8px |
| --space-input-md-gap | --space-xs |
4px |
| --space-input-lg-padding-x | --space-md |
16px |
| --space-input-lg-padding-y | --space-sm |
8px |
| --space-input-lg-gap | --space-xs |
4px |
fontSize
3 tokens
consomme fontSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --font-size-input-sm | --font-size-small |
14px |
| --font-size-input-md | --font-size-body |
16px |
| --font-size-input-lg | --font-size-lead |
20px |
radius
3 tokens
consomme radius
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --radius-input-sm | --radius-sm |
4px |
| --radius-input-md | --radius-sm |
4px |
| --radius-input-lg | --radius-md |
8px |
borderWidth
3 tokens
consomme borderWidth
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --border-width-input-sm | --border-width-default |
1px |
| --border-width-input-md | --border-width-default |
1px |
| --border-width-input-lg | --border-width-default |
1px |
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --typography-input-family | --typography-body-family |
'JetBrains Mono', ui-monospace, 'SF Mono', monospace |
| --typography-input-weight | --typography-body-weight |
400 |
| --typography-input-line-height | --typography-body-line-height |
1.5 |
| --typography-input-letter-spacing | --typography-body-letter-spacing |
0 |
| --typography-input-text-case | --typography-body-text-case |
none |
Textarea
Saisie multiligne
defaultSaisie multiligne
hoverSaisie multiligne
focusSaisie multiligne
disabledSaisie multiligne
errorLes 30 tokens de textarea, et le token
sémantique que chacun consomme. Aucun ne nomme jamais une palette ni une police —
suivre un lien mène à la page où ce rôle est défini.
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --color-textarea-default-background | --color-surface-base |
#f6fbff |
| --color-textarea-default-text | --color-text-body |
#213c58 |
| --color-textarea-default-border | --color-border-default |
#c0d7ef |
| --color-textarea-default-placeholder | --color-text-muted |
#4c7299 |
| --color-textarea-hover-background | --color-surface-base |
#f6fbff |
| --color-textarea-hover-text | --color-text-body |
#213c58 |
| --color-textarea-hover-border | --color-border-strong |
#80a5cc |
| --color-textarea-hover-placeholder | --color-text-muted |
#4c7299 |
| --color-textarea-focus-background | --color-surface-base |
#f6fbff |
| --color-textarea-focus-text | --color-text-body |
#213c58 |
| --color-textarea-focus-border | --color-role-primary-main |
#9500ee |
| --color-textarea-focus-placeholder | --color-text-muted |
#4c7299 |
| --color-textarea-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-textarea-disabled-text | --color-text-disabled |
#9fbede |
| --color-textarea-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-textarea-disabled-placeholder | --color-text-disabled |
#9fbede |
| --color-textarea-error-background | --color-surface-base |
#f6fbff |
| --color-textarea-error-text | --color-text-body |
#213c58 |
| --color-textarea-error-border | --color-role-danger-main |
#cd161d |
| --color-textarea-error-placeholder | --color-text-muted |
#4c7299 |
space
2 tokens
consomme space
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --space-textarea-padding-x | --space-sm |
8px |
| --space-textarea-padding-y | --space-sm |
8px |
fontSize
1 token
consomme fontSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --font-size-textarea | --font-size-body |
16px |
radius
1 token
consomme radius
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --radius-textarea | --radius-sm |
4px |
borderWidth
1 token
consomme borderWidth
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --border-width-textarea | --border-width-default |
1px |
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --typography-textarea-family | --typography-body-family |
'JetBrains Mono', ui-monospace, 'SF Mono', monospace |
| --typography-textarea-weight | --typography-body-weight |
400 |
| --typography-textarea-line-height | --typography-body-line-height |
1.5 |
| --typography-textarea-letter-spacing | --typography-body-letter-spacing |
0 |
| --typography-textarea-text-case | --typography-body-text-case |
none |
Select
Choix
▾
default
Choix
▾
hover
Choix
▾
focus
Choix
▾
disabled
Choix
▾
errorLes 54 tokens de select, et le token
sémantique que chacun consomme. Aucun ne nomme jamais une palette ni une police —
suivre un lien mène à la page où ce rôle est défini.
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --color-select-default-background | --color-surface-base |
#f6fbff |
| --color-select-default-text | --color-text-body |
#213c58 |
| --color-select-default-border | --color-border-default |
#c0d7ef |
| --color-select-default-placeholder | --color-text-muted |
#4c7299 |
| --color-select-default-icon | --color-text-muted |
#4c7299 |
| --color-select-hover-background | --color-surface-base |
#f6fbff |
| --color-select-hover-text | --color-text-body |
#213c58 |
| --color-select-hover-border | --color-border-strong |
#80a5cc |
| --color-select-hover-placeholder | --color-text-muted |
#4c7299 |
| --color-select-hover-icon | --color-text-muted |
#4c7299 |
| --color-select-focus-background | --color-surface-base |
#f6fbff |
| --color-select-focus-text | --color-text-body |
#213c58 |
| --color-select-focus-border | --color-role-primary-main |
#9500ee |
| --color-select-focus-placeholder | --color-text-muted |
#4c7299 |
| --color-select-focus-icon | --color-text-muted |
#4c7299 |
| --color-select-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-select-disabled-text | --color-text-disabled |
#9fbede |
| --color-select-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-select-disabled-placeholder | --color-text-disabled |
#9fbede |
| --color-select-disabled-icon | --color-text-disabled |
#9fbede |
| --color-select-error-background | --color-surface-base |
#f6fbff |
| --color-select-error-text | --color-text-body |
#213c58 |
| --color-select-error-border | --color-role-danger-main |
#cd161d |
| --color-select-error-placeholder | --color-text-muted |
#4c7299 |
| --color-select-error-icon | --color-text-muted |
#4c7299 |
size
6 tokens
consomme controlHeight glyphSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --size-select-sm-height | --control-height-sm |
32px |
| --size-select-sm-icon | --glyph-size-sm |
16px |
| --size-select-md-height | --control-height-md |
40px |
| --size-select-md-icon | --glyph-size-md |
20px |
| --size-select-lg-height | --control-height-lg |
48px |
| --size-select-lg-icon | --glyph-size-lg |
24px |
space
9 tokens
consomme space
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --space-select-sm-padding-x | --space-sm |
8px |
| --space-select-sm-padding-y | --space-xs |
4px |
| --space-select-sm-gap | --space-xs |
4px |
| --space-select-md-padding-x | --space-sm |
8px |
| --space-select-md-padding-y | --space-sm |
8px |
| --space-select-md-gap | --space-xs |
4px |
| --space-select-lg-padding-x | --space-md |
16px |
| --space-select-lg-padding-y | --space-sm |
8px |
| --space-select-lg-gap | --space-xs |
4px |
fontSize
3 tokens
consomme fontSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --font-size-select-sm | --font-size-small |
14px |
| --font-size-select-md | --font-size-body |
16px |
| --font-size-select-lg | --font-size-lead |
20px |
radius
3 tokens
consomme radius
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --radius-select-sm | --radius-sm |
4px |
| --radius-select-md | --radius-sm |
4px |
| --radius-select-lg | --radius-md |
8px |
borderWidth
3 tokens
consomme borderWidth
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --border-width-select-sm | --border-width-default |
1px |
| --border-width-select-md | --border-width-default |
1px |
| --border-width-select-lg | --border-width-default |
1px |
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --typography-select-family | --typography-body-family |
'JetBrains Mono', ui-monospace, 'SF Mono', monospace |
| --typography-select-weight | --typography-body-weight |
400 |
| --typography-select-line-height | --typography-body-line-height |
1.5 |
| --typography-select-letter-spacing | --typography-body-letter-spacing |
0 |
| --typography-select-text-case | --typography-body-text-case |
none |
Checkbox
| unchecked | uncheckedHover | checked | checkedHover | indeterminate | error | errorHover | disabled | disabledChecked |
|---|---|---|---|---|---|---|---|---|
|
✓ |
✓ |
✓ |
✓ |
– |
✓ |
✓ |
✓ |
✓ |
Les 39 tokens de checkbox, et le token
sémantique que chacun consomme. Aucun ne nomme jamais une palette ni une police —
suivre un lien mène à la page où ce rôle est défini.
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --color-checkbox-unchecked-background | --color-surface-base |
#f6fbff |
| --color-checkbox-unchecked-border | --color-border-strong |
#80a5cc |
| --color-checkbox-unchecked-mark | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-checkbox-unchecked-hover-background | --color-role-primary-tint |
rgba(170, 76, 255, 0.05) |
| --color-checkbox-unchecked-hover-border | --color-role-primary-main |
#9500ee |
| --color-checkbox-unchecked-hover-mark | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-checkbox-checked-background | --color-role-primary-main |
#9500ee |
| --color-checkbox-checked-border | --color-role-primary-main |
#9500ee |
| --color-checkbox-checked-mark | --color-role-primary-on |
#f6fbff |
| --color-checkbox-checked-hover-background | --color-role-primary-hover |
#7400bb |
| --color-checkbox-checked-hover-border | --color-role-primary-hover |
#7400bb |
| --color-checkbox-checked-hover-mark | --color-role-primary-on |
#f6fbff |
| --color-checkbox-indeterminate-background | --color-role-primary-main |
#9500ee |
| --color-checkbox-indeterminate-border | --color-role-primary-main |
#9500ee |
| --color-checkbox-indeterminate-mark | --color-role-primary-on |
#f6fbff |
| --color-checkbox-error-background | --color-surface-base |
#f6fbff |
| --color-checkbox-error-border | --color-role-danger-main |
#cd161d |
| --color-checkbox-error-mark | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-checkbox-error-hover-background | --color-role-danger-tint |
rgba(237, 59, 55, 0.05) |
| --color-checkbox-error-hover-border | --color-role-danger-main |
#cd161d |
| --color-checkbox-error-hover-mark | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-checkbox-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-checkbox-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-checkbox-disabled-mark | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-checkbox-disabled-checked-background | --color-surface-disabled |
#dceaf8 |
| --color-checkbox-disabled-checked-border | --color-border-disabled |
#c0d7ef |
| --color-checkbox-disabled-checked-mark | --color-text-disabled |
#9fbede |
size
6 tokens
consomme glyphSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --size-checkbox-sm-box | --glyph-size-sm |
16px |
| --size-checkbox-sm-icon | --glyph-size-xs |
12px |
| --size-checkbox-md-box | --glyph-size-md |
20px |
| --size-checkbox-md-icon | --glyph-size-sm |
16px |
| --size-checkbox-lg-box | --glyph-size-lg |
24px |
| --size-checkbox-lg-icon | --glyph-size-md |
20px |
radius
3 tokens
consomme radius
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --radius-checkbox-sm | --radius-sm |
4px |
| --radius-checkbox-md | --radius-sm |
4px |
| --radius-checkbox-lg | --radius-sm |
4px |
borderWidth
3 tokens
consomme borderWidth
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --border-width-checkbox-sm | --border-width-strong |
2px |
| --border-width-checkbox-md | --border-width-strong |
2px |
| --border-width-checkbox-lg | --border-width-strong |
2px |
Radio
| unchecked | uncheckedHover | checked | checkedHover | indeterminate | error | errorHover | disabled | disabledChecked |
|---|---|---|---|---|---|---|---|---|
|
● |
● |
● |
● |
● |
● |
● |
● |
● |
Les 39 tokens de radio, et le token
sémantique que chacun consomme. Aucun ne nomme jamais une palette ni une police —
suivre un lien mène à la page où ce rôle est défini.
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --color-radio-unchecked-background | --color-surface-base |
#f6fbff |
| --color-radio-unchecked-border | --color-border-strong |
#80a5cc |
| --color-radio-unchecked-mark | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-radio-unchecked-hover-background | --color-role-primary-tint |
rgba(170, 76, 255, 0.05) |
| --color-radio-unchecked-hover-border | --color-role-primary-main |
#9500ee |
| --color-radio-unchecked-hover-mark | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-radio-checked-background | --color-role-primary-main |
#9500ee |
| --color-radio-checked-border | --color-role-primary-main |
#9500ee |
| --color-radio-checked-mark | --color-role-primary-on |
#f6fbff |
| --color-radio-checked-hover-background | --color-role-primary-hover |
#7400bb |
| --color-radio-checked-hover-border | --color-role-primary-hover |
#7400bb |
| --color-radio-checked-hover-mark | --color-role-primary-on |
#f6fbff |
| --color-radio-indeterminate-background | --color-role-primary-main |
#9500ee |
| --color-radio-indeterminate-border | --color-role-primary-main |
#9500ee |
| --color-radio-indeterminate-mark | --color-role-primary-on |
#f6fbff |
| --color-radio-error-background | --color-surface-base |
#f6fbff |
| --color-radio-error-border | --color-role-danger-main |
#cd161d |
| --color-radio-error-mark | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-radio-error-hover-background | --color-role-danger-tint |
rgba(237, 59, 55, 0.05) |
| --color-radio-error-hover-border | --color-role-danger-main |
#cd161d |
| --color-radio-error-hover-mark | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-radio-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-radio-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-radio-disabled-mark | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-radio-disabled-checked-background | --color-surface-disabled |
#dceaf8 |
| --color-radio-disabled-checked-border | --color-border-disabled |
#c0d7ef |
| --color-radio-disabled-checked-mark | --color-text-disabled |
#9fbede |
size
6 tokens
consomme glyphSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --size-radio-sm-box | --glyph-size-sm |
16px |
| --size-radio-sm-icon | --glyph-size-xs |
12px |
| --size-radio-md-box | --glyph-size-md |
20px |
| --size-radio-md-icon | --glyph-size-sm |
16px |
| --size-radio-lg-box | --glyph-size-lg |
24px |
| --size-radio-lg-icon | --glyph-size-md |
20px |
radius
3 tokens
consomme radius
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --radius-radio-sm | --radius-full |
9999px |
| --radius-radio-md | --radius-full |
9999px |
| --radius-radio-lg | --radius-full |
9999px |
borderWidth
3 tokens
consomme borderWidth
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --border-width-radio-sm | --border-width-strong |
2px |
| --border-width-radio-md | --border-width-strong |
2px |
| --border-width-radio-lg | --border-width-strong |
2px |
Switch
| off | offHover | on | onHover | error | errorHover | disabledOff | disabledOn |
|---|---|---|---|---|---|---|---|
|
|
|
|
|
|
|
|
|
Les 39 tokens de switch, et le token
sémantique que chacun consomme. Aucun ne nomme jamais une palette ni une police —
suivre un lien mène à la page où ce rôle est défini.
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --color-switch-off-track | --color-border-strong |
#80a5cc |
| --color-switch-off-thumb | --color-surface-base |
#f6fbff |
| --color-switch-off-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-switch-off-hover-track | --color-role-neutral-main |
#4c7299 |
| --color-switch-off-hover-thumb | --color-surface-base |
#f6fbff |
| --color-switch-off-hover-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-switch-on-track | --color-role-primary-main |
#9500ee |
| --color-switch-on-thumb | --color-role-primary-on |
#f6fbff |
| --color-switch-on-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-switch-on-hover-track | --color-role-primary-hover |
#7400bb |
| --color-switch-on-hover-thumb | --color-role-primary-on |
#f6fbff |
| --color-switch-on-hover-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-switch-error-track | --color-border-strong |
#80a5cc |
| --color-switch-error-thumb | --color-surface-base |
#f6fbff |
| --color-switch-error-border | --color-role-danger-main |
#cd161d |
| --color-switch-error-hover-track | --color-role-neutral-main |
#4c7299 |
| --color-switch-error-hover-thumb | --color-surface-base |
#f6fbff |
| --color-switch-error-hover-border | --color-role-danger-main |
#cd161d |
| --color-switch-disabled-off-track | --color-surface-disabled |
#dceaf8 |
| --color-switch-disabled-off-thumb | --color-surface-base |
#f6fbff |
| --color-switch-disabled-off-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-switch-disabled-on-track | --color-surface-disabled |
#dceaf8 |
| --color-switch-disabled-on-thumb | --color-surface-base |
#f6fbff |
| --color-switch-disabled-on-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
size
9 tokens
consomme trackWidth trackHeight glyphSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --size-switch-sm-track-width | --track-width-sm |
48px |
| --size-switch-sm-track-height | --track-height-sm |
20px |
| --size-switch-sm-thumb | --glyph-size-sm |
16px |
| --size-switch-md-track-width | --track-width-md |
52px |
| --size-switch-md-track-height | --track-height-md |
24px |
| --size-switch-md-thumb | --glyph-size-md |
20px |
| --size-switch-lg-track-width | --track-width-lg |
64px |
| --size-switch-lg-track-height | --track-height-lg |
32px |
| --size-switch-lg-thumb | --glyph-size-md |
20px |
radius
3 tokens
consomme radius
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --radius-switch-sm | --radius-full |
9999px |
| --radius-switch-md | --radius-full |
9999px |
| --radius-switch-lg | --radius-full |
9999px |
borderWidth
3 tokens
consomme borderWidth
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --border-width-switch-sm | --border-width-strong |
2px |
| --border-width-switch-md | --border-width-strong |
2px |
| --border-width-switch-lg | --border-width-strong |
2px |