Tokens

Spry uses a consistent prefix: --spry-* for CSS variables and a nested spryTokens object in TypeScript. Broad categories include:

• Color — core brand (--spry-color-core-primary), semantic roles (--spry-color-semantic-*), and UI roles resolved per theme (--spry-color-surface, --spry-color-text-primary, etc.).
• Typography — --spry-font-size-*, --spry-font-family-*, line heights.
• Spacing & radius — --spry-spacing-*, --spry-radius-*.
• Motion — --spry-motion-duration-*, easing.

Package @spry/tokens exports spryTokens for build-time references (for example in createSpryTheme or app config). Values mirror the CSS file.

The canonical stylesheet @spry/tokens/styles.css (pulled in via @spry/theme/tailwind.css) defines :root defaults for palettes, type scale, spacing, shadows, and motion. Components and utilities reference these variables — not hard-coded hex in primitives.

@spry/theme layers semantic UI variables on top of tokens: surfaces, borders, and text colors that flip under data-spry-theme="light" / "dark". Density uses data-spry-density.

createSpryTheme writes overrides onto the document root (for example --spry-color-core-primary, --spry-radius-md) so brand colors flow into semantic derivation without editing every component.

Import @spry/theme/tailwind.css once at the app root. It wires Tailwind v4 with the correct content paths for Spry packages and loads token + theme CSS. Use arbitrary values such as bg-[var(--spry-color-surface)] or rely on components that already bind to variables.