CSS custom properties shipped by @prepared911/ui.
@prepared911/ui/tokens.css publishes the design system's CSS custom properties. Prefer these names over hard-coded lengths and colors.
Light tokens are declared on :where(:root), at zero specificity, so a class or attribute on the same element wins. Dark tokens are declared under [data-theme='dark']. Set that attribute on the document element, or on a region that must stay dark. Do not import a Sass theme module.
@prepared911/ui/reset.css is a separate, optional document base. It is not part of tokens.css.
Use the semantic tier. Reference tokens prefixed --ref- and slot tokens such as --default-* are generator internals.
--color-bg-*, --color-fg-*, --color-border-*, --color-fill-*, --color-accent-*, --color-status-*, and --color-palette-* for data series.--space-* (4, 8, 12, 16, …). --space-16 is 1rem.--radius-sm, --radius-md, --radius-lg, --radius-control, --radius-pill, and the other --radius-* roles.--font-family-sans, --font-family-mono, and --text-<role>-* bundles (page, section, title, body-large, body-medium, label, caption, code-1, overline, and their emphasis roles).--duration-*, --easing-*, and the composed --motion-* transitions.--elevation-raised-shadow, --elevation-overlay-shadow, --elevation-modal-shadow.| Name | Type | Default | Description |
|---|---|---|---|
--color-bg-default | color | light on :where(:root) | Page canvas. The dark value is under [data-theme='dark']. |
--color-fg-default | color | per appearance | Body and heading text. |
--color-fg-subtle | color | per appearance | Secondary text. |
--color-fg-muted | color | per appearance | Captions, labels, and metadata. Use it at 16px or semibold. |
--color-border-default | color | per appearance | Card and panel edges. |
--color-accent-default | color | per appearance | Primary accent fill. |
--color-status-destructive-fg | color | per appearance | Destructive text on its own status background. Warning, success, and informative follow the same slot pattern. |
| Name | Type | Default | Description |
|---|---|---|---|
--space-4 … --space-128 | dimension | 0.25rem–8rem | Spacing scale. Box padding and gap take these steps as numbers (16 is --space-16). |
--radius-control | dimension | 0.5rem | Default corner radius for buttons and fields. |
--text-body-large-font | font shorthand | 400 0.875rem/1.25rem | Default Text role. Emphasis roles are separate tokens, such as --text-body-large-emphasis-font. |
--text-page-font | font shorthand | 700 2.25rem/2.75rem | Page title role. The heading element is chosen with Text's as prop, not by the role. |
| Name | Type | Default | Description |
|---|---|---|---|
--duration-fast | time | 100ms | Short feedback. --duration-default is 150ms. |
--easing-standard | easing | cubic-bezier | Default easing. Glide and spring tokens are separate (--easing-glide-*, --spring-*). |
--motion-state | transition | duration + easing | Shared control state transition. |
tokens.css is loaded, every public custom property on this page is available to the app stylesheet.