CSS custom properties shipped by @prepared911/ui.
@prepared911/ui/styles.css publishes the design system's CSS custom properties (and every component rule). 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.
--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, subsection, title, subtitle, body, label, caption, code-1, overline, and their emphasis roles). No role is larger than 24px.--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-subtitle-font | font shorthand | 400 0.875rem/1.25rem | Default Text role. Emphasis roles are separate tokens, such as --text-subtitle-emphasis-font. |
--text-page-font | font shorthand | 600 1.5rem/2rem | Page title role. The heading element is chosen with Text's as prop, not by the role. |
| Name | Type | Default | Description |
|---|---|---|---|
--duration-fast … --duration-slower | time | 100ms–500ms | Core feedback scale (--duration-default is 150ms). Glide durations are separate: --duration-glide-instant through --duration-glide-considered (120–480ms), plus --duration-glide-stagger for sequenced entry delays. |
--easing-standard … --easing-emphasize | easing | cubic-bezier | Core easings. Glide easings: --easing-glide-enter, --easing-glide-exit, --easing-glide-standard, --easing-glide-in-out. |
--motion-state … --motion-expand | transition | duration + easing | Composed timing for state, enter, exit, move, and expand. Each role has -fade and -move variants (--motion-enter-fade, --motion-state-move, and so on). |
--motion-glide-state … --motion-glide-exit | transition | glide duration + easing | Motion-refresh glide shorthands (160ms state, 240ms enter, 180ms exit). Each has -fade and -move variants. |
--spring-snappy, --spring-smooth, --spring-morph, --spring-glide | easing | linear() spring | Sampled spring curves. Snappy, smooth, and morph overshoot; glide has no bounce. Pair with --duration-spring-snappy, --duration-spring-smooth, --duration-spring-morph, and --duration-spring-glide (432, 706, 718, and 530ms). |
--motion-spring-snappy, --motion-spring-smooth, --motion-spring-morph, --motion-spring-glide | transition | duration + spring curve | Spring shorthands as one transition value. Transform movement only; each becomes 0s under reduced motion. |
styles.css is loaded, every public custom property on this page is available to the app stylesheet.