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);