BHDicaire

Token-table

Données

Aperçu#

theme-preview modifie les cellules Valeur résolue des jetons de couleur définis par les thèmes. Valeur conserve la déclaration source, y compris tout alias.

Jetons de la catégorie Couleur
color.ink--color-ink{color.palette.near-black}#101010 #f8f8f5colorsemanticCouleur principale du texte pour les interfaces et les textes de marque à contraste élevé.
color.paper--color-paper{color.palette.warm-paper}#f8f8f5 #101010colorsemanticCouleur d’arrière-plan par défaut des pages.
color.line--color-line{color.palette.quiet-line}#d7d7d2 oklch(37.1% 0 none)colorsemanticCouleur discrète pour les séparateurs et les bordures.
color.accent--color-accent{color.palette.signal-orange}#e6461a #e6461acolorsemanticCouleur 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 #e6461acolorsemanticCouleur 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}#101010colorsemanticCouleur 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#272822colorsemanticCouleur d’arrière-plan des surfaces de code technique.
color.white--color-white{color.palette.white}#ffffffcolorsemanticBlanc utilisé pour le texte inversé et les surfaces élevées.
color.black--color-black{color.palette.black}#000000colorsemanticNoir utilisé pour les superpositions et les contrôles de code très contrastés.
color.code.foreground--color-code-foreground#f8f8f2#f8f8f2colorsemanticCouleur 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)colorsemanticSurface neutre la plus claire.
color.neutral.100--color-neutral-100{color.palette.neutral.100}oklch(97% 0 none) oklch(37.1% 0 none)colorsemanticSurface neutre claire.
color.neutral.300--color-neutral-300{color.palette.neutral.300}oklch(87% 0 none) oklch(43.9% 0 none)colorsemanticTon 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)colorsemanticTon 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)colorsemanticTon 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)colorsemanticTon 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)colorsemanticTon 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)colorsemanticSurface neutre foncée.
color.code.copy.success.foreground--color-code-copy-success-foregroundoklch(87.1% 0.15 154.449)oklch(87.1% 0.15 154.449)colorsemanticCouleur du texte de confirmation du contrôle de copie.
color.code.copy.success.border--color-code-copy-success-borderoklch(79.2% 0.209 151.711)oklch(79.2% 0.209 151.711)colorsemanticCouleur de bordure de confirmation du contrôle de copie.
color.code.copy.error.foreground--color-code-copy-error-foregroundoklch(80.8% 0.114 19.571)oklch(80.8% 0.114 19.571)colorsemanticCouleur du texte d’erreur du contrôle de copie.
color.code.copy.error.border--color-code-copy-error-borderoklch(70.4% 0.191 22.216)oklch(70.4% 0.191 22.216)colorsemanticCouleur de bordure d’erreur du contrôle de copie.
component.announcement.background--component-announcement-background{color.paper}#f8f8f5colorcomponentSurface d’arrière-plan de la bannière d’annonce présente sur tout le site.
status.note--status-noteoklch(62.3% 0.214 259.815)oklch(62.3% 0.214 259.815)colorsemanticAccent d’état informatif pour les notes et les avis de changement neutres.
component.announcement.foreground--component-announcement-foreground{color.ink}#101010colorcomponentCouleur de texte de la bannière d’annonce présente sur tout le site.
status.success--status-successoklch(72.3% 0.219 149.579)oklch(72.3% 0.219 149.579)colorsemanticAccent d’état positif pour les éléments confirmés ou nouvellement disponibles.
component.announcement.border--component-announcement-border{color.accent}#e6461acolorcomponentCouleur de bordure signal de la bannière d’annonce présente sur tout le site.
status.important--status-importantoklch(62.7% 0.265 303.9)oklch(62.7% 0.265 303.9)colorsemanticAccent d’état important pour les décisions qui demandent de l’attention.
component.announcement.link--component-announcement-link{color.accent-text}#c43810colorcomponentCouleur de lien accessible de la bannière d’annonce présente sur tout le site.
status.warning--status-warningoklch(76.9% 0.188 70.08)oklch(76.9% 0.188 70.08)colorsemanticAccent d’état d’avertissement pour les changements ou contraintes à surveiller.
status.danger--status-dangeroklch(63.7% 0.237 25.331)oklch(63.7% 0.237 25.331)colorsemanticAccent d’état critique pour les mises en garde, erreurs et obsolescences.
status.archived--status-archived{color.neutral.500}oklch(55.6% 0 none)colorsemanticAccent d’état atténué pour le contenu archivé.
component.avatar.background--component-avatar-background{color.neutral.100}oklch(97% 0 none)colorcomponentSurface d’avatar de repli pour l’attribution d’une recommandation.
component.avatar.foreground--component-avatar-foreground{color.ink}#101010colorcomponentCouleur des initiales de l’avatar de repli dans l’attribution d’une recommandation.
component.avatar.border--component-avatar-border{color.line}#d7d7d2colorcomponentCouleur de contour de l’avatar dans l’attribution d’une recommandation.
component.back-to-top.background--component-back-to-top-background{color.paper}#f8f8f5colorcomponentSurface derrière le lien de retour en haut.
component.back-to-top.foreground--component-back-to-top-foreground{color.ink}#101010colorcomponentCouleur 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}#d7d7d2colorcomponentBordure au repos du lien de retour en haut.
component.back-to-top.hover-border--component-back-to-top-hover-border{color.accent}#e6461acolorcomponentBordure au survol et au focus du lien de retour en haut.

Exemple

{{< token-table category="color" >}}

Quand l’utiliser

Un tableau généré d'une catégorie de jetons, rendu depuis `data/brand/tokens.yml`.

Implémentation

layouts/shortcodes/token-table.html

Options

OptionLu par le gabarit du shortcode
categoryLu par le gabarit du shortcode

Manifeste d’interface

Nature
Shortcode
Catégorie
Données
Statut
Implémenté
Implémentation
Shortcode:layouts/shortcodes/token-table.htmlDonnées:data/brand/tokens.ymlCSS:assets/css/site.cssJavaScript:assets/js/site.js