Mercurial
diff design_system/src/styles/themes.css @ 259:667156fcd3e3
Add dev-only cyberpunk JRPG page
| author | MrJuneJune <me@mrjunejune.com> |
|---|---|
| date | Wed, 05 Aug 2026 09:19:41 -0700 |
| parents | 60a876c4587a |
| children |
line wrap: on
line diff
--- a/design_system/src/styles/themes.css Wed Aug 05 05:25:40 2026 -0700 +++ b/design_system/src/styles/themes.css Wed Aug 05 09:19:41 2026 -0700 @@ -76,6 +76,30 @@ --zen-radius-lg: 1.5rem; } +:root[data-zen-theme="cyberpunk"] { + color-scheme: dark; + --zen-color-canvas: var(--zenbu-ref-color-midnight-950); + --zen-color-surface: var(--zenbu-ref-color-midnight-900); + --zen-color-surface-raised: var(--zenbu-ref-color-midnight-800); + --zen-color-surface-muted: var(--zenbu-ref-color-midnight-700); + --zen-color-surface-sunken: var(--zenbu-ref-color-midnight-950); + --zen-color-text: var(--zenbu-ref-color-electric-ice); + --zen-color-text-muted: var(--zenbu-ref-color-electric-slate); + --zen-color-text-subtle: var(--zenbu-ref-color-electric-slate); + --zen-color-border: var(--zenbu-ref-color-electric-cyan); + --zen-color-border-muted: var(--zenbu-ref-color-midnight-700); + --zen-color-accent: var(--zenbu-ref-color-electric-cyan); + --zen-color-accent-hover: var(--zenbu-ref-color-electric-magenta); + --zen-color-accent-muted: var(--zenbu-ref-color-midnight-700); + --zen-color-info: var(--zenbu-ref-color-electric-violet); + --zen-color-success: var(--zenbu-ref-color-electric-mint); + --zen-color-warning: var(--zenbu-ref-color-electric-yellow); + --zen-color-danger: var(--zenbu-ref-color-electric-magenta); + --zen-color-focus: var(--zenbu-ref-color-electric-yellow); + --zen-color-on-accent: var(--zenbu-ref-color-midnight-950); + --zen-color-text-inverse: var(--zenbu-ref-color-midnight-950); +} + :root[data-zen-theme="paper"] { --zenbu-sys-font-family-ui: var( --zenbu-font-editorial, @@ -172,6 +196,63 @@ --zenbu-sys-radius-container: var(--zenbu-ref-radius-5); } +:root[data-zen-theme="cyberpunk"] { + --zenbu-sys-color-surface-page: var(--zenbu-ref-color-midnight-950); + --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-midnight-950); + --zenbu-sys-color-surface-default: var(--zenbu-ref-color-midnight-900); + --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-midnight-700); + --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-midnight-800); + --zenbu-sys-color-surface-overlay: var(--zenbu-ref-color-midnight-800); + --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-midnight-950); + --zenbu-sys-color-text-primary: var(--zenbu-ref-color-electric-ice); + --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-electric-slate); + --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-electric-violet); + --zenbu-sys-color-text-placeholder: var(--zenbu-ref-color-electric-slate); + --zenbu-sys-color-text-disabled: var(--zenbu-ref-color-midnight-700); + --zenbu-sys-color-text-inverse: var(--zenbu-ref-color-midnight-950); + --zenbu-sys-color-text-link: var(--zenbu-ref-color-electric-cyan); + --zenbu-sys-color-link-decoration: var(--zenbu-ref-color-electric-magenta); + --zenbu-sys-color-icon-primary: var(--zenbu-ref-color-electric-ice); + --zenbu-sys-color-icon-secondary: var(--zenbu-ref-color-electric-cyan); + --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-midnight-700); + --zenbu-sys-color-border-default: var(--zenbu-ref-color-electric-violet); + --zenbu-sys-color-border-strong: var(--zenbu-ref-color-electric-cyan); + --zenbu-sys-color-action-primary-background: var(--zenbu-ref-color-electric-cyan); + --zenbu-sys-color-action-primary-background-hover: var(--zenbu-ref-color-electric-magenta); + --zenbu-sys-color-action-primary-background-pressed: var(--zenbu-ref-color-electric-violet); + --zenbu-sys-color-action-primary-foreground: var(--zenbu-ref-color-midnight-950); + --zenbu-sys-color-action-primary-border: var(--zenbu-ref-color-electric-cyan); + --zenbu-sys-color-action-neutral-background: var(--zenbu-ref-color-midnight-900); + --zenbu-sys-color-action-neutral-background-hover: var(--zenbu-ref-color-midnight-800); + --zenbu-sys-color-action-neutral-background-pressed: var(--zenbu-ref-color-midnight-950); + --zenbu-sys-color-action-neutral-foreground: var(--zenbu-ref-color-electric-ice); + --zenbu-sys-color-action-neutral-border: var(--zenbu-ref-color-electric-violet); + --zenbu-sys-color-action-danger-background: var(--zenbu-ref-color-electric-magenta); + --zenbu-sys-color-action-danger-background-hover: var(--zenbu-ref-color-electric-violet); + --zenbu-sys-color-action-danger-background-pressed: var(--zenbu-ref-color-midnight-700); + --zenbu-sys-color-action-danger-foreground: var(--zenbu-ref-color-midnight-950); + --zenbu-sys-color-action-danger-border: var(--zenbu-ref-color-electric-magenta); + --zenbu-sys-color-focus-inner: var(--zenbu-ref-color-midnight-950); + --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-electric-yellow); + --zenbu-sys-color-selection-background: var(--zenbu-ref-color-electric-magenta); + --zenbu-sys-color-selection-foreground: var(--zenbu-ref-color-midnight-950); + --zenbu-sys-color-info-background: var(--zenbu-ref-color-midnight-900); + --zenbu-sys-color-info-foreground: var(--zenbu-ref-color-electric-violet); + --zenbu-sys-color-info-border: var(--zenbu-ref-color-electric-violet); + --zenbu-sys-color-success-background: var(--zenbu-ref-color-midnight-900); + --zenbu-sys-color-success-foreground: var(--zenbu-ref-color-electric-mint); + --zenbu-sys-color-success-border: var(--zenbu-ref-color-electric-mint); + --zenbu-sys-color-warning-background: var(--zenbu-ref-color-midnight-900); + --zenbu-sys-color-warning-foreground: var(--zenbu-ref-color-electric-yellow); + --zenbu-sys-color-warning-border: var(--zenbu-ref-color-electric-yellow); + --zenbu-sys-color-danger-background: var(--zenbu-ref-color-midnight-900); + --zenbu-sys-color-danger-foreground: var(--zenbu-ref-color-electric-magenta); + --zenbu-sys-color-danger-border: var(--zenbu-ref-color-electric-magenta); + --zenbu-sys-color-code-surface: var(--zenbu-ref-color-midnight-950); + --zenbu-sys-color-code-text: var(--zenbu-ref-color-electric-mint); + --zenbu-sys-color-gridline: var(--zenbu-ref-color-midnight-700); +} + @media (prefers-color-scheme: dark) { :root:not([data-zen-theme]) { --zenbu-sys-color-surface-page: var(--zenbu-ref-color-neutral-950);