Jetons de couleur
Les jetons de couleur définissent la petite palette partagée par le travail de marque et d’interface. Le tableau est généré depuis les métadonnées des jetons et ne doit pas être modifié à la main.
color.ink | --color-ink | {color.palette.near-black} | #101010
#f8f8f5 | color | semantic | Couleur principale du texte pour les interfaces et les textes de marque à contraste élevé. |
color.paper | --color-paper | {color.palette.warm-paper} | #f8f8f5
#101010 | color | semantic | Couleur d’arrière-plan par défaut des pages. |
color.line | --color-line | {color.palette.quiet-line} | #d7d7d2
oklch(37.1% 0 none) | color | semantic | Couleur discrète pour les séparateurs et les bordures. |
color.accent | --color-accent | {color.palette.signal-orange} | #e6461a
#e6461a | color | semantic | Couleur d’accent principale pour l’emphase, les états actifs et les signaux de marque. |
color.accent-text | --color-accent-text | {color.palette.deep-signal-orange} | #c43810
#e6461a | color | semantic | Couleur d’accent adaptée au thème pour le texte de taille normale sur la surface de page. |
color.on-accent | --color-on-accent | {color.palette.near-black} | #101010 | color | semantic | Couleur de premier plan accessible pour le texte et les icônes sur l’arrière-plan d’accent. |
color.code.background | --color-code-background | #272822 | #272822 | color | semantic | Couleur d’arrière-plan des surfaces de code technique. |
color.white | --color-white | {color.palette.white} | #ffffff | color | semantic | Blanc utilisé pour le texte inversé et les surfaces élevées. |
color.black | --color-black | {color.palette.black} | #000000 | color | semantic | Noir utilisé pour les superpositions et les contrôles de code très contrastés. |
color.code.foreground | --color-code-foreground | #f8f8f2 | #f8f8f2 | color | semantic | Couleur de premier plan des surfaces de code technique. |
color.neutral.50 | --color-neutral-50 | {color.palette.neutral.50} | oklch(98.5% 0 none)
oklch(26.9% 0 none) | color | semantic | Surface neutre la plus claire. |
color.neutral.100 | --color-neutral-100 | {color.palette.neutral.100} | oklch(97% 0 none)
oklch(37.1% 0 none) | color | semantic | Surface neutre claire. |
color.neutral.300 | --color-neutral-300 | {color.palette.neutral.300} | oklch(87% 0 none)
oklch(43.9% 0 none) | color | semantic | Ton neutre discret pour les repères et séparateurs. |
color.neutral.400 | --color-neutral-400 | {color.palette.neutral.400} | oklch(70.8% 0 none)
oklch(55.6% 0 none) | color | semantic | Ton neutre pour le texte secondaire. |
color.neutral.500 | --color-neutral-500 | {color.palette.neutral.500} | oklch(55.6% 0 none)
oklch(70.8% 0 none) | color | semantic | Ton neutre atténué pour le texte. |
color.neutral.600 | --color-neutral-600 | {color.palette.neutral.600} | oklch(43.9% 0 none)
oklch(87% 0 none) | color | semantic | Ton neutre pour le texte d’appoint. |
color.neutral.700 | --color-neutral-700 | {color.palette.neutral.700} | oklch(37.1% 0 none)
oklch(97% 0 none) | color | semantic | Ton neutre fort pour le texte et les bordures. |
color.neutral.800 | --color-neutral-800 | {color.palette.neutral.800} | oklch(26.9% 0 none)
oklch(98.5% 0 none) | color | semantic | Surface neutre foncée. |
color.code.copy.success.foreground | --color-code-copy-success-foreground | oklch(87.1% 0.15 154.449) | oklch(87.1% 0.15 154.449) | color | semantic | Couleur du texte de confirmation du contrôle de copie. |
color.code.copy.success.border | --color-code-copy-success-border | oklch(79.2% 0.209 151.711) | oklch(79.2% 0.209 151.711) | color | semantic | Couleur de bordure de confirmation du contrôle de copie. |
color.code.copy.error.foreground | --color-code-copy-error-foreground | oklch(80.8% 0.114 19.571) | oklch(80.8% 0.114 19.571) | color | semantic | Couleur du texte d’erreur du contrôle de copie. |
color.code.copy.error.border | --color-code-copy-error-border | oklch(70.4% 0.191 22.216) | oklch(70.4% 0.191 22.216) | color | semantic | Couleur de bordure d’erreur du contrôle de copie. |
component.announcement.background | --component-announcement-background | {color.paper} | #f8f8f5 | color | component | Surface d’arrière-plan de la bannière d’annonce présente sur tout le site. |
status.note | --status-note | oklch(62.3% 0.214 259.815) | oklch(62.3% 0.214 259.815) | color | semantic | Accent d’état informatif pour les notes et les avis de changement neutres. |
component.announcement.foreground | --component-announcement-foreground | {color.ink} | #101010 | color | component | Couleur de texte de la bannière d’annonce présente sur tout le site. |
status.success | --status-success | oklch(72.3% 0.219 149.579) | oklch(72.3% 0.219 149.579) | color | semantic | Accent d’état positif pour les éléments confirmés ou nouvellement disponibles. |
component.announcement.border | --component-announcement-border | {color.accent} | #e6461a | color | component | Couleur de bordure signal de la bannière d’annonce présente sur tout le site. |
status.important | --status-important | oklch(62.7% 0.265 303.9) | oklch(62.7% 0.265 303.9) | color | semantic | Accent d’état important pour les décisions qui demandent de l’attention. |
component.announcement.link | --component-announcement-link | {color.accent-text} | #c43810 | color | component | Couleur de lien accessible de la bannière d’annonce présente sur tout le site. |
status.warning | --status-warning | oklch(76.9% 0.188 70.08) | oklch(76.9% 0.188 70.08) | color | semantic | Accent d’état d’avertissement pour les changements ou contraintes à surveiller. |
status.danger | --status-danger | oklch(63.7% 0.237 25.331) | oklch(63.7% 0.237 25.331) | color | semantic | Accent d’état critique pour les mises en garde, erreurs et obsolescences. |
status.archived | --status-archived | {color.neutral.500} | oklch(55.6% 0 none) | color | semantic | Accent d’état atténué pour le contenu archivé. |
component.avatar.background | --component-avatar-background | {color.neutral.100} | oklch(97% 0 none) | color | component | Surface d’avatar de repli pour l’attribution d’une recommandation. |
component.avatar.foreground | --component-avatar-foreground | {color.ink} | #101010 | color | component | Couleur des initiales de l’avatar de repli dans l’attribution d’une recommandation. |
component.avatar.border | --component-avatar-border | {color.line} | #d7d7d2 | color | component | Couleur de contour de l’avatar dans l’attribution d’une recommandation. |
component.back-to-top.background | --component-back-to-top-background | {color.paper} | #f8f8f5 | color | component | Surface derrière le lien de retour en haut. |
component.back-to-top.foreground | --component-back-to-top-foreground | {color.ink} | #101010 | color | component | Couleur du texte et de la flèche du lien de retour en haut. |
component.back-to-top.border | --component-back-to-top-border | {color.line} | #d7d7d2 | color | component | Bordure au repos du lien de retour en haut. |
component.back-to-top.hover-border | --component-back-to-top-hover-border | {color.accent} | #e6461a | color | component | Bordure au survol et au focus du lien de retour en haut. |