Mercurial
view design_system/src/styles/themes.css @ 256:30c2196d03d4
[site] Integrate Zenbu themes and components
Co-authored-by: Copilot <[email protected]>
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Tue, 04 Aug 2026 16:49:01 -0700 |
| parents | |
| children | 60a876c4587a |
line wrap: on
line source
:root[data-zen-theme="paper"] { color-scheme: light; --zen-color-canvas: var(--zen-color-neutral-100); --zen-color-surface: var(--zen-color-neutral-50); --zen-color-surface-raised: var(--zen-color-neutral-50); --zen-color-surface-muted: var(--zen-color-neutral-100); --zen-color-surface-sunken: var(--zen-color-neutral-200); --zen-color-text: var(--zen-color-neutral-950); --zen-color-text-muted: var(--zen-color-neutral-600); --zen-color-text-subtle: var(--zen-color-neutral-500); --zen-color-border: var(--zen-color-neutral-800); --zen-color-border-muted: var(--zen-color-neutral-300); --zen-color-accent: var(--zen-color-amber-400); --zen-color-accent-hover: var(--zen-color-amber-300); --zen-color-accent-muted: var(--zen-color-amber-100); --zen-color-info: var(--zen-color-blue-600); --zen-color-success: var(--zen-color-green-600); --zen-color-warning: var(--zen-color-orange-600); --zen-color-danger: var(--zen-color-red-600); --zen-color-focus: var(--zen-color-violet-600); --zen-font-sans: var( --zen-font-editorial, ui-rounded, system-ui, sans-serif ); } :root[data-zen-theme="ink"] { color-scheme: dark; --zen-color-canvas: var(--zen-color-neutral-950); --zen-color-surface: var(--zen-color-neutral-900); --zen-color-surface-raised: var(--zen-color-neutral-800); --zen-color-surface-muted: var(--zen-color-neutral-800); --zen-color-surface-sunken: var(--zen-color-neutral-950); --zen-color-text: var(--zen-color-neutral-50); --zen-color-text-muted: var(--zen-color-neutral-300); --zen-color-text-subtle: var(--zen-color-neutral-400); --zen-color-border: var(--zen-color-neutral-200); --zen-color-border-muted: var(--zen-color-neutral-700); --zen-color-accent: var(--zen-color-amber-300); --zen-color-accent-hover: var(--zen-color-amber-200); --zen-color-accent-muted: var(--zen-color-amber-800); --zen-color-info: var(--zen-color-blue-300); --zen-color-success: var(--zen-color-green-300); --zen-color-warning: var(--zen-color-orange-300); --zen-color-danger: var(--zen-color-red-300); --zen-color-on-info: var(--zen-color-neutral-950); --zen-color-on-success: var(--zen-color-neutral-950); --zen-color-on-warning: var(--zen-color-neutral-950); --zen-color-on-danger: var(--zen-color-neutral-950); --zen-color-focus: var(--zen-color-violet-300); --zen-color-on-accent: var(--zen-color-neutral-950); --zen-color-text-inverse: var(--zen-color-neutral-950); --zen-font-sans: var( --zen-font-editorial, ui-rounded, system-ui, sans-serif ); } :root[data-zen-theme="playful"] { color-scheme: light; --zen-color-canvas: var(--zen-color-rose-100); --zen-color-surface: var(--zen-color-amber-50); --zen-color-surface-raised: var(--zen-color-neutral-50); --zen-color-surface-muted: var(--zen-color-orange-100); --zen-color-surface-sunken: var(--zen-color-violet-100); --zen-color-text: var(--zen-color-blue-900); --zen-color-text-muted: var(--zen-color-violet-700); --zen-color-text-subtle: var(--zen-color-blue-600); --zen-color-border: var(--zen-color-violet-700); --zen-color-border-muted: var(--zen-color-rose-300); --zen-color-accent: var(--zen-color-orange-300); --zen-color-accent-hover: var(--zen-color-amber-300); --zen-color-accent-muted: var(--zen-color-orange-100); --zen-color-info: var(--zen-color-blue-600); --zen-color-success: var(--zen-color-green-600); --zen-color-warning: var(--zen-color-amber-600); --zen-color-danger: var(--zen-color-rose-600); --zen-color-on-success: var(--zen-color-neutral-50); --zen-color-on-warning: var(--zen-color-neutral-50); --zen-color-focus: var(--zen-color-violet-500); --zen-color-on-accent: var(--zen-color-blue-950); --zen-font-sans: var( --zen-font-playful, ui-rounded, system-ui, sans-serif ); --zen-radius-sm: 0.65rem; --zen-radius-md: 1rem; --zen-radius-lg: 1.5rem; }