4 · Composants — affichage
Badge, Tag, Alert, Card, Tooltip, Link.
Badge
Statique : un badge ne réagit pas au survol. Un seul état.
filled
primary
neutral
success
warning
danger
info
subtle
primary
neutral
success
warning
danger
info
outlined
primary
neutral
success
warning
danger
info
Les 83 tokens de badge, 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-badge-filled-primary-default-background | --color-role-primary-main |
#9500ee |
| --color-badge-filled-primary-default-text | --color-role-primary-on |
#f6fbff |
| --color-badge-filled-primary-default-border | --color-role-primary-main |
#9500ee |
| --color-badge-filled-neutral-default-background | --color-role-neutral-main |
#4c7299 |
| --color-badge-filled-neutral-default-text | --color-role-neutral-on |
#f6fbff |
| --color-badge-filled-neutral-default-border | --color-role-neutral-main |
#4c7299 |
| --color-badge-filled-success-default-background | --color-role-success-main |
#00853c |
| --color-badge-filled-success-default-text | --color-role-success-on |
#f6fbff |
| --color-badge-filled-success-default-border | --color-role-success-main |
#00853c |
| --color-badge-filled-warning-default-background | --color-role-warning-main |
#ba4200 |
| --color-badge-filled-warning-default-text | --color-role-warning-on |
#f6fbff |
| --color-badge-filled-warning-default-border | --color-role-warning-main |
#ba4200 |
| --color-badge-filled-danger-default-background | --color-role-danger-main |
#cd161d |
| --color-badge-filled-danger-default-text | --color-role-danger-on |
#f6fbff |
| --color-badge-filled-danger-default-border | --color-role-danger-main |
#cd161d |
| --color-badge-filled-info-default-background | --color-role-info-main |
#2b60e8 |
| --color-badge-filled-info-default-text | --color-role-info-on |
#f6fbff |
| --color-badge-filled-info-default-border | --color-role-info-main |
#2b60e8 |
| --color-badge-subtle-primary-default-background | --color-role-primary-subtle |
#f6f0ff |
| --color-badge-subtle-primary-default-text | --color-role-primary-text |
#7400bb |
| --color-badge-subtle-primary-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-badge-subtle-neutral-default-background | --color-role-neutral-subtle |
#edf4fd |
| --color-badge-subtle-neutral-default-text | --color-role-neutral-text |
#37587a |
| --color-badge-subtle-neutral-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-badge-subtle-success-default-background | --color-role-success-subtle |
#e4fbe7 |
| --color-badge-subtle-success-default-text | --color-role-success-text |
#00672d |
| --color-badge-subtle-success-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-badge-subtle-warning-default-background | --color-role-warning-subtle |
#fff0ea |
| --color-badge-subtle-warning-default-text | --color-role-warning-text |
#913200 |
| --color-badge-subtle-warning-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-badge-subtle-danger-default-background | --color-role-danger-subtle |
#ffefed |
| --color-badge-subtle-danger-default-text | --color-role-danger-text |
#a3000f |
| --color-badge-subtle-danger-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-badge-subtle-info-default-background | --color-role-info-subtle |
#eef4ff |
| --color-badge-subtle-info-default-text | --color-role-info-text |
#1846bf |
| --color-badge-subtle-info-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-badge-outlined-primary-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-badge-outlined-primary-default-text | --color-role-primary-text |
#7400bb |
| --color-badge-outlined-primary-default-border | --color-role-primary-border |
#cda5ff |
| --color-badge-outlined-neutral-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-badge-outlined-neutral-default-text | --color-role-neutral-text |
#37587a |
| --color-badge-outlined-neutral-default-border | --color-role-neutral-border |
#9fbede |
| --color-badge-outlined-success-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-badge-outlined-success-default-text | --color-role-success-text |
#00672d |
| --color-badge-outlined-success-default-border | --color-role-success-border |
#6fd488 |
| --color-badge-outlined-warning-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-badge-outlined-warning-default-text | --color-role-warning-text |
#913200 |
| --color-badge-outlined-warning-default-border | --color-role-warning-border |
#ff9e7a |
| --color-badge-outlined-danger-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-badge-outlined-danger-default-text | --color-role-danger-text |
#a3000f |
| --color-badge-outlined-danger-default-border | --color-role-danger-border |
#ff9b90 |
| --color-badge-outlined-info-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-badge-outlined-info-default-text | --color-role-info-text |
#1846bf |
| --color-badge-outlined-info-default-border | --color-role-info-border |
#98baff |
size
6 tokens
consomme controlHeight glyphSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --size-badge-sm-height | --control-height-xs |
24px |
| --size-badge-sm-icon | --glyph-size-xs |
12px |
| --size-badge-md-height | --control-height-sm |
32px |
| --size-badge-md-icon | --glyph-size-sm |
16px |
| --size-badge-lg-height | --control-height-md |
40px |
| --size-badge-lg-icon | --glyph-size-md |
20px |
space
9 tokens
consomme space
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --space-badge-sm-padding-x | --space-xs |
4px |
| --space-badge-sm-padding-y | --space-xs |
4px |
| --space-badge-sm-gap | --space-xs |
4px |
| --space-badge-md-padding-x | --space-sm |
8px |
| --space-badge-md-padding-y | --space-xs |
4px |
| --space-badge-md-gap | --space-xs |
4px |
| --space-badge-lg-padding-x | --space-md |
16px |
| --space-badge-lg-padding-y | --space-xs |
4px |
| --space-badge-lg-gap | --space-xs |
4px |
fontSize
3 tokens
consomme fontSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --font-size-badge-sm | --font-size-small |
14px |
| --font-size-badge-md | --font-size-small |
14px |
| --font-size-badge-lg | --font-size-body |
16px |
radius
3 tokens
consomme radius
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --radius-badge-sm | --radius-full |
9999px |
| --radius-badge-md | --radius-full |
9999px |
| --radius-badge-lg | --radius-full |
9999px |
borderWidth
3 tokens
consomme borderWidth
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --border-width-badge-sm | --border-width-default |
1px |
| --border-width-badge-md | --border-width-default |
1px |
| --border-width-badge-lg | --border-width-default |
1px |
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --typography-badge-family | --typography-label-family |
'JetBrains Mono', ui-monospace, 'SF Mono', monospace |
| --typography-badge-weight | --typography-label-weight |
500 |
| --typography-badge-line-height | --typography-label-line-height |
1.2 |
| --typography-badge-letter-spacing | --typography-label-letter-spacing |
0 |
| --typography-badge-text-case | --typography-label-text-case |
none |
Tag
Interactif : c'est un badge qui se survole et se supprime.
filled
| default | hover | disabled | |
|---|---|---|---|
| primary | primary | primary | primary |
| neutral | neutral | neutral | neutral |
| success | success | success | success |
| warning | warning | warning | warning |
| danger | danger | danger | danger |
| info | info | info | info |
subtle
| default | hover | disabled | |
|---|---|---|---|
| primary | primary | primary | primary |
| neutral | neutral | neutral | neutral |
| success | success | success | success |
| warning | warning | warning | warning |
| danger | danger | danger | danger |
| info | info | info | info |
outlined
| default | hover | disabled | |
|---|---|---|---|
| primary | primary | primary | primary |
| neutral | neutral | neutral | neutral |
| success | success | success | success |
| warning | warning | warning | warning |
| danger | danger | danger | danger |
| info | info | info | info |
Les 191 tokens de tag, 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-tag-filled-primary-default-background | --color-role-primary-main |
#9500ee |
| --color-tag-filled-primary-default-text | --color-role-primary-on |
#f6fbff |
| --color-tag-filled-primary-default-border | --color-role-primary-main |
#9500ee |
| --color-tag-filled-primary-hover-background | --color-role-primary-hover |
#7400bb |
| --color-tag-filled-primary-hover-text | --color-role-primary-on |
#f6fbff |
| --color-tag-filled-primary-hover-border | --color-role-primary-hover |
#7400bb |
| --color-tag-filled-primary-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-tag-filled-primary-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-filled-primary-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-tag-filled-neutral-default-background | --color-role-neutral-main |
#4c7299 |
| --color-tag-filled-neutral-default-text | --color-role-neutral-on |
#f6fbff |
| --color-tag-filled-neutral-default-border | --color-role-neutral-main |
#4c7299 |
| --color-tag-filled-neutral-hover-background | --color-role-neutral-hover |
#37587a |
| --color-tag-filled-neutral-hover-text | --color-role-neutral-on |
#f6fbff |
| --color-tag-filled-neutral-hover-border | --color-role-neutral-hover |
#37587a |
| --color-tag-filled-neutral-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-tag-filled-neutral-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-filled-neutral-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-tag-filled-success-default-background | --color-role-success-main |
#00853c |
| --color-tag-filled-success-default-text | --color-role-success-on |
#f6fbff |
| --color-tag-filled-success-default-border | --color-role-success-main |
#00853c |
| --color-tag-filled-success-hover-background | --color-role-success-hover |
#00672d |
| --color-tag-filled-success-hover-text | --color-role-success-on |
#f6fbff |
| --color-tag-filled-success-hover-border | --color-role-success-hover |
#00672d |
| --color-tag-filled-success-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-tag-filled-success-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-filled-success-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-tag-filled-warning-default-background | --color-role-warning-main |
#ba4200 |
| --color-tag-filled-warning-default-text | --color-role-warning-on |
#f6fbff |
| --color-tag-filled-warning-default-border | --color-role-warning-main |
#ba4200 |
| --color-tag-filled-warning-hover-background | --color-role-warning-hover |
#913200 |
| --color-tag-filled-warning-hover-text | --color-role-warning-on |
#f6fbff |
| --color-tag-filled-warning-hover-border | --color-role-warning-hover |
#913200 |
| --color-tag-filled-warning-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-tag-filled-warning-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-filled-warning-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-tag-filled-danger-default-background | --color-role-danger-main |
#cd161d |
| --color-tag-filled-danger-default-text | --color-role-danger-on |
#f6fbff |
| --color-tag-filled-danger-default-border | --color-role-danger-main |
#cd161d |
| --color-tag-filled-danger-hover-background | --color-role-danger-hover |
#a3000f |
| --color-tag-filled-danger-hover-text | --color-role-danger-on |
#f6fbff |
| --color-tag-filled-danger-hover-border | --color-role-danger-hover |
#a3000f |
| --color-tag-filled-danger-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-tag-filled-danger-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-filled-danger-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-tag-filled-info-default-background | --color-role-info-main |
#2b60e8 |
| --color-tag-filled-info-default-text | --color-role-info-on |
#f6fbff |
| --color-tag-filled-info-default-border | --color-role-info-main |
#2b60e8 |
| --color-tag-filled-info-hover-background | --color-role-info-hover |
#1846bf |
| --color-tag-filled-info-hover-text | --color-role-info-on |
#f6fbff |
| --color-tag-filled-info-hover-border | --color-role-info-hover |
#1846bf |
| --color-tag-filled-info-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-tag-filled-info-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-filled-info-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-tag-subtle-primary-default-background | --color-role-primary-subtle |
#f6f0ff |
| --color-tag-subtle-primary-default-text | --color-role-primary-text |
#7400bb |
| --color-tag-subtle-primary-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-subtle-primary-hover-background | --color-role-primary-tint-strong |
rgba(170, 76, 255, 0.1) |
| --color-tag-subtle-primary-hover-text | --color-role-primary-text |
#7400bb |
| --color-tag-subtle-primary-hover-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-subtle-primary-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-tag-subtle-primary-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-subtle-primary-disabled-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-subtle-neutral-default-background | --color-role-neutral-subtle |
#edf4fd |
| --color-tag-subtle-neutral-default-text | --color-role-neutral-text |
#37587a |
| --color-tag-subtle-neutral-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-subtle-neutral-hover-background | --color-role-neutral-tint-strong |
rgba(100, 139, 180, 0.1) |
| --color-tag-subtle-neutral-hover-text | --color-role-neutral-text |
#37587a |
| --color-tag-subtle-neutral-hover-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-subtle-neutral-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-tag-subtle-neutral-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-subtle-neutral-disabled-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-subtle-success-default-background | --color-role-success-subtle |
#e4fbe7 |
| --color-tag-subtle-success-default-text | --color-role-success-text |
#00672d |
| --color-tag-subtle-success-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-subtle-success-hover-background | --color-role-success-tint-strong |
rgba(0, 163, 74, 0.1) |
| --color-tag-subtle-success-hover-text | --color-role-success-text |
#00672d |
| --color-tag-subtle-success-hover-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-subtle-success-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-tag-subtle-success-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-subtle-success-disabled-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-subtle-warning-default-background | --color-role-warning-subtle |
#fff0ea |
| --color-tag-subtle-warning-default-text | --color-role-warning-text |
#913200 |
| --color-tag-subtle-warning-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-subtle-warning-hover-background | --color-role-warning-tint-strong |
rgba(226, 82, 0, 0.1) |
| --color-tag-subtle-warning-hover-text | --color-role-warning-text |
#913200 |
| --color-tag-subtle-warning-hover-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-subtle-warning-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-tag-subtle-warning-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-subtle-warning-disabled-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-subtle-danger-default-background | --color-role-danger-subtle |
#ffefed |
| --color-tag-subtle-danger-default-text | --color-role-danger-text |
#a3000f |
| --color-tag-subtle-danger-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-subtle-danger-hover-background | --color-role-danger-tint-strong |
rgba(237, 59, 55, 0.1) |
| --color-tag-subtle-danger-hover-text | --color-role-danger-text |
#a3000f |
| --color-tag-subtle-danger-hover-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-subtle-danger-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-tag-subtle-danger-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-subtle-danger-disabled-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-subtle-info-default-background | --color-role-info-subtle |
#eef4ff |
| --color-tag-subtle-info-default-text | --color-role-info-text |
#1846bf |
| --color-tag-subtle-info-default-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-subtle-info-hover-background | --color-role-info-tint-strong |
rgba(70, 126, 255, 0.1) |
| --color-tag-subtle-info-hover-text | --color-role-info-text |
#1846bf |
| --color-tag-subtle-info-hover-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-subtle-info-disabled-background | --color-surface-disabled |
#dceaf8 |
| --color-tag-subtle-info-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-subtle-info-disabled-border | --color-border-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-outlined-primary-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-outlined-primary-default-text | --color-role-primary-text |
#7400bb |
| --color-tag-outlined-primary-default-border | --color-role-primary-border |
#cda5ff |
| --color-tag-outlined-primary-hover-background | --color-role-primary-tint |
rgba(170, 76, 255, 0.05) |
| --color-tag-outlined-primary-hover-text | --color-role-primary-text |
#7400bb |
| --color-tag-outlined-primary-hover-border | --color-role-primary-main |
#9500ee |
| --color-tag-outlined-primary-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-outlined-primary-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-outlined-primary-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-tag-outlined-neutral-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-outlined-neutral-default-text | --color-role-neutral-text |
#37587a |
| --color-tag-outlined-neutral-default-border | --color-role-neutral-border |
#9fbede |
| --color-tag-outlined-neutral-hover-background | --color-role-neutral-tint |
rgba(100, 139, 180, 0.05) |
| --color-tag-outlined-neutral-hover-text | --color-role-neutral-text |
#37587a |
| --color-tag-outlined-neutral-hover-border | --color-role-neutral-main |
#4c7299 |
| --color-tag-outlined-neutral-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-outlined-neutral-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-outlined-neutral-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-tag-outlined-success-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-outlined-success-default-text | --color-role-success-text |
#00672d |
| --color-tag-outlined-success-default-border | --color-role-success-border |
#6fd488 |
| --color-tag-outlined-success-hover-background | --color-role-success-tint |
rgba(0, 163, 74, 0.05) |
| --color-tag-outlined-success-hover-text | --color-role-success-text |
#00672d |
| --color-tag-outlined-success-hover-border | --color-role-success-main |
#00853c |
| --color-tag-outlined-success-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-outlined-success-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-outlined-success-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-tag-outlined-warning-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-outlined-warning-default-text | --color-role-warning-text |
#913200 |
| --color-tag-outlined-warning-default-border | --color-role-warning-border |
#ff9e7a |
| --color-tag-outlined-warning-hover-background | --color-role-warning-tint |
rgba(226, 82, 0, 0.05) |
| --color-tag-outlined-warning-hover-text | --color-role-warning-text |
#913200 |
| --color-tag-outlined-warning-hover-border | --color-role-warning-main |
#ba4200 |
| --color-tag-outlined-warning-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-outlined-warning-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-outlined-warning-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-tag-outlined-danger-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-outlined-danger-default-text | --color-role-danger-text |
#a3000f |
| --color-tag-outlined-danger-default-border | --color-role-danger-border |
#ff9b90 |
| --color-tag-outlined-danger-hover-background | --color-role-danger-tint |
rgba(237, 59, 55, 0.05) |
| --color-tag-outlined-danger-hover-text | --color-role-danger-text |
#a3000f |
| --color-tag-outlined-danger-hover-border | --color-role-danger-main |
#cd161d |
| --color-tag-outlined-danger-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-outlined-danger-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-outlined-danger-disabled-border | --color-border-disabled |
#c0d7ef |
| --color-tag-outlined-info-default-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-outlined-info-default-text | --color-role-info-text |
#1846bf |
| --color-tag-outlined-info-default-border | --color-role-info-border |
#98baff |
| --color-tag-outlined-info-hover-background | --color-role-info-tint |
rgba(70, 126, 255, 0.05) |
| --color-tag-outlined-info-hover-text | --color-role-info-text |
#1846bf |
| --color-tag-outlined-info-hover-border | --color-role-info-main |
#2b60e8 |
| --color-tag-outlined-info-disabled-background | --color-surface-transparent |
rgba(0, 0, 0, 0) |
| --color-tag-outlined-info-disabled-text | --color-text-disabled |
#9fbede |
| --color-tag-outlined-info-disabled-border | --color-border-disabled |
#c0d7ef |
size
6 tokens
consomme controlHeight glyphSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --size-tag-sm-height | --control-height-xs |
24px |
| --size-tag-sm-icon | --glyph-size-xs |
12px |
| --size-tag-md-height | --control-height-sm |
32px |
| --size-tag-md-icon | --glyph-size-sm |
16px |
| --size-tag-lg-height | --control-height-md |
40px |
| --size-tag-lg-icon | --glyph-size-md |
20px |
space
9 tokens
consomme space
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --space-tag-sm-padding-x | --space-xs |
4px |
| --space-tag-sm-padding-y | --space-xs |
4px |
| --space-tag-sm-gap | --space-xs |
4px |
| --space-tag-md-padding-x | --space-sm |
8px |
| --space-tag-md-padding-y | --space-xs |
4px |
| --space-tag-md-gap | --space-xs |
4px |
| --space-tag-lg-padding-x | --space-md |
16px |
| --space-tag-lg-padding-y | --space-xs |
4px |
| --space-tag-lg-gap | --space-xs |
4px |
fontSize
3 tokens
consomme fontSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --font-size-tag-sm | --font-size-small |
14px |
| --font-size-tag-md | --font-size-small |
14px |
| --font-size-tag-lg | --font-size-body |
16px |
radius
3 tokens
consomme radius
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --radius-tag-sm | --radius-full |
9999px |
| --radius-tag-md | --radius-full |
9999px |
| --radius-tag-lg | --radius-full |
9999px |
borderWidth
3 tokens
consomme borderWidth
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --border-width-tag-sm | --border-width-default |
1px |
| --border-width-tag-md | --border-width-default |
1px |
| --border-width-tag-lg | --border-width-default |
1px |
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --typography-tag-family | --typography-label-family |
'JetBrains Mono', ui-monospace, 'SF Mono', monospace |
| --typography-tag-weight | --typography-label-weight |
500 |
| --typography-tag-line-height | --typography-label-line-height |
1.2 |
| --typography-tag-letter-spacing | --typography-label-letter-spacing |
0 |
| --typography-tag-text-case | --typography-label-text-case |
none |
Alert
subtle
●
primary
Un message d'alerte.
●
neutral
Un message d'alerte.
●
success
Un message d'alerte.
●
warning
Un message d'alerte.
●
danger
Un message d'alerte.
●
info
Un message d'alerte.
filled
●
primary
Un message d'alerte.
●
neutral
Un message d'alerte.
●
success
Un message d'alerte.
●
warning
Un message d'alerte.
●
danger
Un message d'alerte.
●
info
Un message d'alerte.
Les 72 tokens de alert, 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-alert-subtle-primary-default-background | --color-role-primary-subtle |
#f6f0ff |
| --color-alert-subtle-primary-default-border | --color-role-primary-border |
#cda5ff |
| --color-alert-subtle-primary-default-icon | --color-role-primary-main |
#9500ee |
| --color-alert-subtle-primary-default-title | --color-text-strong |
#0e2338 |
| --color-alert-subtle-primary-default-text | --color-text-body |
#213c58 |
| --color-alert-subtle-neutral-default-background | --color-role-neutral-subtle |
#edf4fd |
| --color-alert-subtle-neutral-default-border | --color-role-neutral-border |
#9fbede |
| --color-alert-subtle-neutral-default-icon | --color-role-neutral-main |
#4c7299 |
| --color-alert-subtle-neutral-default-title | --color-text-strong |
#0e2338 |
| --color-alert-subtle-neutral-default-text | --color-text-body |
#213c58 |
| --color-alert-subtle-success-default-background | --color-role-success-subtle |
#e4fbe7 |
| --color-alert-subtle-success-default-border | --color-role-success-border |
#6fd488 |
| --color-alert-subtle-success-default-icon | --color-role-success-main |
#00853c |
| --color-alert-subtle-success-default-title | --color-text-strong |
#0e2338 |
| --color-alert-subtle-success-default-text | --color-text-body |
#213c58 |
| --color-alert-subtle-warning-default-background | --color-role-warning-subtle |
#fff0ea |
| --color-alert-subtle-warning-default-border | --color-role-warning-border |
#ff9e7a |
| --color-alert-subtle-warning-default-icon | --color-role-warning-main |
#ba4200 |
| --color-alert-subtle-warning-default-title | --color-text-strong |
#0e2338 |
| --color-alert-subtle-warning-default-text | --color-text-body |
#213c58 |
| --color-alert-subtle-danger-default-background | --color-role-danger-subtle |
#ffefed |
| --color-alert-subtle-danger-default-border | --color-role-danger-border |
#ff9b90 |
| --color-alert-subtle-danger-default-icon | --color-role-danger-main |
#cd161d |
| --color-alert-subtle-danger-default-title | --color-text-strong |
#0e2338 |
| --color-alert-subtle-danger-default-text | --color-text-body |
#213c58 |
| --color-alert-subtle-info-default-background | --color-role-info-subtle |
#eef4ff |
| --color-alert-subtle-info-default-border | --color-role-info-border |
#98baff |
| --color-alert-subtle-info-default-icon | --color-role-info-main |
#2b60e8 |
| --color-alert-subtle-info-default-title | --color-text-strong |
#0e2338 |
| --color-alert-subtle-info-default-text | --color-text-body |
#213c58 |
| --color-alert-filled-primary-default-background | --color-role-primary-main |
#9500ee |
| --color-alert-filled-primary-default-border | --color-role-primary-main |
#9500ee |
| --color-alert-filled-primary-default-icon | --color-role-primary-on |
#f6fbff |
| --color-alert-filled-primary-default-title | --color-role-primary-on |
#f6fbff |
| --color-alert-filled-primary-default-text | --color-role-primary-on |
#f6fbff |
| --color-alert-filled-neutral-default-background | --color-role-neutral-main |
#4c7299 |
| --color-alert-filled-neutral-default-border | --color-role-neutral-main |
#4c7299 |
| --color-alert-filled-neutral-default-icon | --color-role-neutral-on |
#f6fbff |
| --color-alert-filled-neutral-default-title | --color-role-neutral-on |
#f6fbff |
| --color-alert-filled-neutral-default-text | --color-role-neutral-on |
#f6fbff |
| --color-alert-filled-success-default-background | --color-role-success-main |
#00853c |
| --color-alert-filled-success-default-border | --color-role-success-main |
#00853c |
| --color-alert-filled-success-default-icon | --color-role-success-on |
#f6fbff |
| --color-alert-filled-success-default-title | --color-role-success-on |
#f6fbff |
| --color-alert-filled-success-default-text | --color-role-success-on |
#f6fbff |
| --color-alert-filled-warning-default-background | --color-role-warning-main |
#ba4200 |
| --color-alert-filled-warning-default-border | --color-role-warning-main |
#ba4200 |
| --color-alert-filled-warning-default-icon | --color-role-warning-on |
#f6fbff |
| --color-alert-filled-warning-default-title | --color-role-warning-on |
#f6fbff |
| --color-alert-filled-warning-default-text | --color-role-warning-on |
#f6fbff |
| --color-alert-filled-danger-default-background | --color-role-danger-main |
#cd161d |
| --color-alert-filled-danger-default-border | --color-role-danger-main |
#cd161d |
| --color-alert-filled-danger-default-icon | --color-role-danger-on |
#f6fbff |
| --color-alert-filled-danger-default-title | --color-role-danger-on |
#f6fbff |
| --color-alert-filled-danger-default-text | --color-role-danger-on |
#f6fbff |
| --color-alert-filled-info-default-background | --color-role-info-main |
#2b60e8 |
| --color-alert-filled-info-default-border | --color-role-info-main |
#2b60e8 |
| --color-alert-filled-info-default-icon | --color-role-info-on |
#f6fbff |
| --color-alert-filled-info-default-title | --color-role-info-on |
#f6fbff |
| --color-alert-filled-info-default-text | --color-role-info-on |
#f6fbff |
space
3 tokens
consomme space
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --space-alert-padding-x | --space-md |
16px |
| --space-alert-padding-y | --space-md |
16px |
| --space-alert-gap | --space-sm |
8px |
fontSize
1 token
consomme fontSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --font-size-alert | --font-size-body |
16px |
radius
1 token
consomme radius
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --radius-alert | --radius-md |
8px |
borderWidth
1 token
consomme borderWidth
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --border-width-alert | --border-width-default |
1px |
size
1 token
consomme glyphSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --size-alert-icon | --glyph-size-md |
20px |
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --typography-alert-family | --typography-body-family |
'JetBrains Mono', ui-monospace, 'SF Mono', monospace |
| --typography-alert-weight | --typography-body-weight |
400 |
| --typography-alert-line-height | --typography-body-line-height |
1.5 |
| --typography-alert-letter-spacing | --typography-body-letter-spacing |
0 |
| --typography-alert-text-case | --typography-body-text-case |
none |
Card
Carte
defaultCarte
hoverCarte
selectedLa carte est le seul composant qui consomme un token d'ombre :
shadow.raised au repos, shadow.float au survol.
Les 14 tokens de card, 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-card-default-background | --color-surface-raised |
#edf4fd |
| --color-card-default-border | --color-border-default |
#c0d7ef |
| --color-card-hover-background | --color-surface-raised |
#edf4fd |
| --color-card-hover-border | --color-border-strong |
#80a5cc |
| --color-card-selected-background | --color-surface-raised |
#edf4fd |
| --color-card-selected-border | --color-role-primary-main |
#9500ee |
shadow
3 tokens
consomme shadow
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --shadow-card-default | --shadow-raised |
[object Object] |
| --shadow-card-hover | --shadow-float |
[object Object] |
| --shadow-card-selected | --shadow-raised |
[object Object] |
space
3 tokens
consomme space
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --space-card-padding-x | --space-lg |
24px |
| --space-card-padding-y | --space-lg |
24px |
| --space-card-gap | --space-md |
16px |
radius
1 token
consomme radius
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --radius-card | --radius-lg |
16px |
borderWidth
1 token
consomme borderWidth
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --border-width-card | --border-width-default |
1px |
Tooltip
Une infobulledefault
Il consomme surface.inverse — le seul rôle pensé pour une rupture
visuelle négative.
Les 11 tokens de tooltip, 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-tooltip-default-background | --color-surface-inverse |
#0e2338 |
| --color-tooltip-default-text | --color-text-inverse |
#f6fbff |
space
2 tokens
consomme space
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --space-tooltip-padding-x | --space-sm |
8px |
| --space-tooltip-padding-y | --space-xs |
4px |
fontSize
1 token
consomme fontSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --font-size-tooltip | --font-size-small |
14px |
radius
1 token
consomme radius
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --radius-tooltip | --radius-sm |
4px |
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --typography-tooltip-family | --typography-small-family |
'JetBrains Mono', ui-monospace, 'SF Mono', monospace |
| --typography-tooltip-weight | --typography-small-weight |
400 |
| --typography-tooltip-line-height | --typography-small-line-height |
1.5 |
| --typography-tooltip-letter-spacing | --typography-small-letter-spacing |
0 |
| --typography-tooltip-text-case | --typography-small-text-case |
none |
Link
| default | hover | disabled | |
|---|---|---|---|
| primary | Un lien | Un lien | Un lien |
| neutral | Un lien | Un lien | Un lien |
| success | Un lien | Un lien | Un lien |
| warning | Un lien | Un lien | Un lien |
| danger | Un lien | Un lien | Un lien |
| info | Un lien | Un lien | Un lien |
Les 24 tokens de link, 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-link-default-primary-default-text | --color-role-primary-text |
#7400bb |
| --color-link-default-primary-hover-text | --color-role-primary-active |
#510085 |
| --color-link-default-primary-disabled-text | --color-text-disabled |
#9fbede |
| --color-link-default-neutral-default-text | --color-role-neutral-text |
#37587a |
| --color-link-default-neutral-hover-text | --color-role-neutral-active |
#213c58 |
| --color-link-default-neutral-disabled-text | --color-text-disabled |
#9fbede |
| --color-link-default-success-default-text | --color-role-success-text |
#00672d |
| --color-link-default-success-hover-text | --color-role-success-active |
#00481d |
| --color-link-default-success-disabled-text | --color-text-disabled |
#9fbede |
| --color-link-default-warning-default-text | --color-role-warning-text |
#913200 |
| --color-link-default-warning-hover-text | --color-role-warning-active |
#662000 |
| --color-link-default-warning-disabled-text | --color-text-disabled |
#9fbede |
| --color-link-default-danger-default-text | --color-role-danger-text |
#a3000f |
| --color-link-default-danger-hover-text | --color-role-danger-active |
#730007 |
| --color-link-default-danger-disabled-text | --color-text-disabled |
#9fbede |
| --color-link-default-info-default-text | --color-role-info-text |
#1846bf |
| --color-link-default-info-hover-text | --color-role-info-active |
#082c90 |
| --color-link-default-info-disabled-text | --color-text-disabled |
#9fbede |
fontSize
1 token
consomme fontSize
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --font-size-link | --font-size-body |
16px |
| Token du composant | Consomme (sémantique) | Valeur résolue |
|---|---|---|
| --typography-link-family | --typography-body-family |
'JetBrains Mono', ui-monospace, 'SF Mono', monospace |
| --typography-link-weight | --typography-body-weight |
400 |
| --typography-link-line-height | --typography-body-line-height |
1.5 |
| --typography-link-letter-spacing | --typography-body-letter-spacing |
0 |
| --typography-link-text-case | --typography-body-text-case |
none |