BHDicaire

Token-table

Data

Preview#

theme-preview changes the Resolved value cells for theme-owned colour tokens. Value keeps the source declaration visible, including any alias.

Colour token category
color.ink--color-ink{color.palette.near-black}#101010 #f8f8f5colorsemanticPrimary text colour for high-contrast interface and brand copy.
color.paper--color-paper{color.palette.warm-paper}#f8f8f5 #101010colorsemanticDefault page background colour.
color.line--color-line{color.palette.quiet-line}#d7d7d2 oklch(37.1% 0 none)colorsemanticQuiet divider and border colour.
color.accent--color-accent{color.palette.signal-orange}#e6461a #e6461acolorsemanticPrimary accent colour for emphasis, active states, and brand signals.
color.accent-text--color-accent-text{color.palette.deep-signal-orange}#c43810 #e6461acolorsemanticTheme-aware accent colour for normal-sized text on the page surface.
color.on-accent--color-on-accent{color.palette.near-black}#101010colorsemanticAccessible foreground colour for text and icons on the accent background.
color.code.background--color-code-background#272822#272822colorsemanticBackground colour for technical code surfaces.
color.white--color-white{color.palette.white}#ffffffcolorsemanticWhite used for inverse text and elevated surfaces.
color.black--color-black{color.palette.black}#000000colorsemanticBlack used for overlays and high-contrast code controls.
color.code.foreground--color-code-foreground#f8f8f2#f8f8f2colorsemanticForeground colour for technical code surfaces.
color.neutral.50--color-neutral-50{color.palette.neutral.50}oklch(98.5% 0 none) oklch(26.9% 0 none)colorsemanticLightest neutral surface.
color.neutral.100--color-neutral-100{color.palette.neutral.100}oklch(97% 0 none) oklch(37.1% 0 none)colorsemanticLight neutral surface.
color.neutral.300--color-neutral-300{color.palette.neutral.300}oklch(87% 0 none) oklch(43.9% 0 none)colorsemanticQuiet neutral marker and divider tone.
color.neutral.400--color-neutral-400{color.palette.neutral.400}oklch(70.8% 0 none) oklch(55.6% 0 none)colorsemanticSecondary neutral text tone.
color.neutral.500--color-neutral-500{color.palette.neutral.500}oklch(55.6% 0 none) oklch(70.8% 0 none)colorsemanticMuted neutral text tone.
color.neutral.600--color-neutral-600{color.palette.neutral.600}oklch(43.9% 0 none) oklch(87% 0 none)colorsemanticSupporting neutral text tone.
color.neutral.700--color-neutral-700{color.palette.neutral.700}oklch(37.1% 0 none) oklch(97% 0 none)colorsemanticStrong neutral text and border tone.
color.neutral.800--color-neutral-800{color.palette.neutral.800}oklch(26.9% 0 none) oklch(98.5% 0 none)colorsemanticDark neutral surface.
color.code.copy.success.foreground--color-code-copy-success-foregroundoklch(87.1% 0.15 154.449)oklch(87.1% 0.15 154.449)colorsemanticCopy-control confirmation text colour.
color.code.copy.success.border--color-code-copy-success-borderoklch(79.2% 0.209 151.711)oklch(79.2% 0.209 151.711)colorsemanticCopy-control confirmation border colour.
color.code.copy.error.foreground--color-code-copy-error-foregroundoklch(80.8% 0.114 19.571)oklch(80.8% 0.114 19.571)colorsemanticCopy-control error text colour.
color.code.copy.error.border--color-code-copy-error-borderoklch(70.4% 0.191 22.216)oklch(70.4% 0.191 22.216)colorsemanticCopy-control error border colour.
component.announcement.background--component-announcement-background{color.paper}#f8f8f5colorcomponentBackground surface for the site-wide announcement banner.
status.note--status-noteoklch(62.3% 0.214 259.815)oklch(62.3% 0.214 259.815)colorsemanticInformational status accent for notes and neutral change notices.
component.announcement.foreground--component-announcement-foreground{color.ink}#101010colorcomponentText colour for the site-wide announcement banner.
status.success--status-successoklch(72.3% 0.219 149.579)oklch(72.3% 0.219 149.579)colorsemanticPositive status accent for confirmed or newly available items.
component.announcement.border--component-announcement-border{color.accent}#e6461acolorcomponentSignal border colour for the site-wide announcement banner.
status.important--status-importantoklch(62.7% 0.265 303.9)oklch(62.7% 0.265 303.9)colorsemanticImportant status accent for decisions requiring attention.
component.announcement.link--component-announcement-link{color.accent-text}#c43810colorcomponentAccessible link colour for the site-wide announcement banner.
status.warning--status-warningoklch(76.9% 0.188 70.08)oklch(76.9% 0.188 70.08)colorsemanticWarning status accent for cautionary changes or constraints.
status.danger--status-dangeroklch(63.7% 0.237 25.331)oklch(63.7% 0.237 25.331)colorsemanticCritical status accent for cautions, errors, and deprecations.
status.archived--status-archived{color.neutral.500}oklch(55.6% 0 none)colorsemanticMuted status accent for archived material.
component.avatar.background--component-avatar-background{color.neutral.100}oklch(97% 0 none)colorcomponentFallback avatar surface for a recommendation attribution.
component.avatar.foreground--component-avatar-foreground{color.ink}#101010colorcomponentFallback avatar initials colour for a recommendation attribution.
component.avatar.border--component-avatar-border{color.line}#d7d7d2colorcomponentAvatar boundary colour for a recommendation attribution.
component.back-to-top.background--component-back-to-top-background{color.paper}#f8f8f5colorcomponentSurface behind the back-to-top link.
component.back-to-top.foreground--component-back-to-top-foreground{color.ink}#101010colorcomponentText and arrow colour for the back-to-top link.
component.back-to-top.border--component-back-to-top-border{color.line}#d7d7d2colorcomponentResting border of the back-to-top link.
component.back-to-top.hover-border--component-back-to-top-hover-border{color.accent}#e6461acolorcomponentHover and focus border of the back-to-top link.

Example

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

When to use

A generated token category table rendered from `data/brand/tokens.yml`.

Implementation

layouts/shortcodes/token-table.html

Options

OptionRead by the shortcode template
categoryRead by the shortcode template

Interface manifest

Kind
Shortcode
Category
Data
Status
Implemented
Implementation
Shortcode:layouts/shortcodes/token-table.htmlData:data/brand/tokens.ymlCSS:assets/css/site.cssJavaScript:assets/js/site.js