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 — Info

There is no --color-wk-border-info in the stylesheet, and that is deliberate. No component renders an informational border — a form control is either in its error state or its resting one, with no third — so a token for it would exist only to be overridden into nothing. (--color-wk-info is a different token and does exist: it is the fifth chart dataset color, listed under Chart Theming below, and unrelated to this text token.)

Colors — Borders and Focus

Border Radius

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

Shadows

Typography

Motion

The four shimmer and stagger tokens above are inert under prefers-reduced-motion: reduce, like everything in this section.

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 spacing ladders, same rung names

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:

Font Sizes

Every step is calc(<base> * var(--font-scale-wk)), so the whole ladder scales from one number — see --font-scale-wk below.

Overlay Tokens

Application shell

The shell's chrome reads a set of ROLES rather than the generic neutrals, and each tone on <x-wirekit::app-rail>, <x-wirekit::sidebar> or <x-wirekit::app-shell> re-points that same set. The table below is the roster — it is the count, so this sentence does not carry one. Override them here to change every tone's fallback at once; override them under a tone's own selector to change one.

A toned navigation column also re-points the generic tokens (--color-wk-text, --color-wk-bg-muted, --color-wk-border, …) to these roles for its own subtree. That is how ordinary components inside a dark rail come out legible without any of them knowing that tones exist — and it is scoped to the navigation surfaces, never to the shell root, so a toned shell with a light content panel keeps its content on the normal palette.

The tones

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 in your :root {} and .dark {} blocks to retheme the canvas without touching JS.

These thirteen are the only reading tokens that carry a raw color literal rather than resolving through a --color-wk-* role, so unlike the rest of the family they do not flip with the theme on their own — each ships an explicit light and dark value. If you override one, override both: a :root-only override leaves your dark canvas painting the light color, and a canvas whose marks match its background still renders, it just shows no hierarchy. The alpha is the density encoding, so keep it the same across the pair and change only the hue.

Reading TOC

Reading Bookmark

Reading Meta

Reading Skeleton

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 1ms — values still update on scroll, just without easing.

The system preference is not the only way in. An application that offers the choice in its own settings puts data-reduce-motion="reduce" (or "no-preference") on <html> and these same rules follow it — see the Integration guide for reading it off the signed-in reader, and Theming for the rest of the motion surface.

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