Design Tokens

The complete CSS-variable surface that every WireKit component reads from. Override any variable in your :root {} (light) or .dark {} (dark mode) block to retheme the library — no Tailwind config changes, no component overrides, no rebuild needed.

Looking for setup help, theme presets, or accessibility guarantees? See the Theming guide. This page is the pure variable reference.

#All Design Tokens

#Colors — Accent

Three accent roles, don't mix them. --color-wk-accent is a fill — it sits behind other content and can be a bright, saturated brand color. Never use it as a text color: on a light brand accent, text drawn in the fill color fails contrast against the page background. Accent-toned text reads --color-wk-accent-text (an alias of --color-wk-accent-content), which defaults to a near-black/near-white that always clears WCAG AA. Text that sits on an accent fill (a button label) reads --color-wk-accent-fg. When you re-tint, set --color-wk-accent to your brand fill and --color-wk-accent-content to a readable text tone of it — otherwise links fall back to the safe near-neutral default.

#Colors — Danger

#Colors — Success

#Colors — Warning

#Colors — Neutrals

#Colors — Borders and Focus

#Border Radius

All radius values derive from a single base --radius-wk. Change one value, everything scales.

#Shadows

#Typography

#Motion

#Spacing and Layout

These tokens drive the gaps and padding inside the layout primitives (stack, row, grid, section) and component internals. WireKit components carry no outer margins — compose vertical and horizontal rhythm with the layout primitives + their gap prop instead of hand-rolling space-y-* / mb-* utilities.

The padding scale is axis-split (-x- / -y-) with no axis-less shorthand; the gap scale runs the full xs…2xl ladder (a reference to an undefined step would silently collapse the gap to 0, so the ladder is complete).

#Border Width

#States

#Focus Ring

#Component Sizing

Two ladders share the xs…2xl rung labels and they are not the same values. --gap-wk-* is the tighter one, for space between items inside a component; --space-wk-* is roomier, for space between blocks of a page. Only xs and sm happen to agree — reaching for the wrong one gets you 0.75rem where you expected 1rem, and the gap widens as you go up:

| --text-wk-2xs | 0.6875rem | Micro text (dense secondary labels) | | --text-wk-xs | 0.75rem | Caption / micro-label | | --text-wk-sm | 0.8125rem | Small font size | | --text-wk-md | 0.875rem | Default body font size | | --text-wk-lg | 1rem | Large body / lede | | --text-wk-xl | 1.25rem | Sub-heading | | --text-wk-2xl | 1.5rem | Section heading | | --text-wk-3xl | 1.875rem | Page heading |

#Overlay Tokens

#Scrollbar

Apply the .wk-scrollbar CSS class to any scrollable element for a slim, themed scrollbar:

<div class="wk-scrollbar overflow-auto max-h-64">
    <!-- long content here -->
</div>

The class uses scrollbar-width: thin for Firefox and ::-webkit-scrollbar pseudo-elements for Chrome/Safari/Edge.

#Reading Component Tokens

Tokens for the reading-* component family — six primitives for long-form content pages. Override any of them in your :root {} block to retheme without touching the component source.

#Reading Progress

Variant rendering: each variant resolves through var(--reading-progress-fill, var(--color-wk-X)), so the --reading-progress-fill token wins when set. Default variants pull from --color-wk-accent (primary, info), --color-wk-text-muted (neutral), --color-wk-success / --color-wk-warning / --color-wk-danger (semantic). The auto variant falls back to currentColor for embedded contexts.

#Reading Spine

#Reading Minimap

Rendered-mode canvas colors (mode="rendered" only)

The rendered-mode minimap paints an abstract content-texture map onto a canvas — one rectangle per rendered text line, colored by the source element's role. Override any of these tokens at :root to retheme the canvas without touching JS.

#Reading TOC

#Reading Bookmark

#Reading Meta

#Reduced Motion

All reading-* components honor prefers-reduced-motion: reduce via the global @media block in dist/wirekit.css. Every transition (bar fill transform: scaleX, dot stroke dashoffset, spine width / label opacity / tick color, bookmark pill enter/leave, minimap stripe color transitions, smooth-scroll on link click) collapses to 0.01ms — values still update on scroll, just without easing.

#Print Stylesheet

All five UI primitives (reading-progress, reading-spine, reading-minimap, reading-bookmark, reading-meta) carry a @media print { display: none !important } rule scoped via marker classes (.wk-reading-progress, .wk-reading-spine, .wk-reading-minimap, .wk-reading-bookmark, .wk-reading-meta). Print-friendly for blog-to-PDF workflows — only the article body prints, not the reading chrome.

#Chart Theming

When charts are enabled, the <x-wirekit-chart> component automatically reads WireKit CSS variables for consistent theming:

Overriding these tokens in your @theme block automatically updates chart colors. See the Chart documentation for details.

#See Also

• Theming — setup guide, theme presets, accent-color, accessibility guarantees
• Customization — when to override tokens vs. tweak PHP defaults vs. apply scope-based personalization
• Variants & Intents — cross-component reference for color/severity props