Mercurial

comparison design_system/src/styles/themes.css @ 259:667156fcd3e3

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add dev-only cyberpunk JRPG page
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 09:19:41 -0700
parents 60a876c4587a
children
comparison
equal deleted inserted replaced
258:60a876c4587a 259:667156fcd3e3
72 --zen-color-focus: var(--zen-color-violet-500); 72 --zen-color-focus: var(--zen-color-violet-500);
73 --zen-color-on-accent: var(--zen-color-blue-950); 73 --zen-color-on-accent: var(--zen-color-blue-950);
74 --zen-radius-sm: 0.65rem; 74 --zen-radius-sm: 0.65rem;
75 --zen-radius-md: 1rem; 75 --zen-radius-md: 1rem;
76 --zen-radius-lg: 1.5rem; 76 --zen-radius-lg: 1.5rem;
77 }
78
79 :root[data-zen-theme="cyberpunk"] {
80 color-scheme: dark;
81 --zen-color-canvas: var(--zenbu-ref-color-midnight-950);
82 --zen-color-surface: var(--zenbu-ref-color-midnight-900);
83 --zen-color-surface-raised: var(--zenbu-ref-color-midnight-800);
84 --zen-color-surface-muted: var(--zenbu-ref-color-midnight-700);
85 --zen-color-surface-sunken: var(--zenbu-ref-color-midnight-950);
86 --zen-color-text: var(--zenbu-ref-color-electric-ice);
87 --zen-color-text-muted: var(--zenbu-ref-color-electric-slate);
88 --zen-color-text-subtle: var(--zenbu-ref-color-electric-slate);
89 --zen-color-border: var(--zenbu-ref-color-electric-cyan);
90 --zen-color-border-muted: var(--zenbu-ref-color-midnight-700);
91 --zen-color-accent: var(--zenbu-ref-color-electric-cyan);
92 --zen-color-accent-hover: var(--zenbu-ref-color-electric-magenta);
93 --zen-color-accent-muted: var(--zenbu-ref-color-midnight-700);
94 --zen-color-info: var(--zenbu-ref-color-electric-violet);
95 --zen-color-success: var(--zenbu-ref-color-electric-mint);
96 --zen-color-warning: var(--zenbu-ref-color-electric-yellow);
97 --zen-color-danger: var(--zenbu-ref-color-electric-magenta);
98 --zen-color-focus: var(--zenbu-ref-color-electric-yellow);
99 --zen-color-on-accent: var(--zenbu-ref-color-midnight-950);
100 --zen-color-text-inverse: var(--zenbu-ref-color-midnight-950);
77 } 101 }
78 102
79 :root[data-zen-theme="paper"] { 103 :root[data-zen-theme="paper"] {
80 --zenbu-sys-font-family-ui: var( 104 --zenbu-sys-font-family-ui: var(
81 --zenbu-font-editorial, 105 --zenbu-font-editorial,
170 --zenbu-sys-radius-control-small: var(--zenbu-ref-radius-2); 194 --zenbu-sys-radius-control-small: var(--zenbu-ref-radius-2);
171 --zenbu-sys-radius-control: var(--zenbu-ref-radius-4); 195 --zenbu-sys-radius-control: var(--zenbu-ref-radius-4);
172 --zenbu-sys-radius-container: var(--zenbu-ref-radius-5); 196 --zenbu-sys-radius-container: var(--zenbu-ref-radius-5);
173 } 197 }
174 198
199 :root[data-zen-theme="cyberpunk"] {
200 --zenbu-sys-color-surface-page: var(--zenbu-ref-color-midnight-950);
201 --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-midnight-950);
202 --zenbu-sys-color-surface-default: var(--zenbu-ref-color-midnight-900);
203 --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-midnight-700);
204 --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-midnight-800);
205 --zenbu-sys-color-surface-overlay: var(--zenbu-ref-color-midnight-800);
206 --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-midnight-950);
207 --zenbu-sys-color-text-primary: var(--zenbu-ref-color-electric-ice);
208 --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-electric-slate);
209 --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-electric-violet);
210 --zenbu-sys-color-text-placeholder: var(--zenbu-ref-color-electric-slate);
211 --zenbu-sys-color-text-disabled: var(--zenbu-ref-color-midnight-700);
212 --zenbu-sys-color-text-inverse: var(--zenbu-ref-color-midnight-950);
213 --zenbu-sys-color-text-link: var(--zenbu-ref-color-electric-cyan);
214 --zenbu-sys-color-link-decoration: var(--zenbu-ref-color-electric-magenta);
215 --zenbu-sys-color-icon-primary: var(--zenbu-ref-color-electric-ice);
216 --zenbu-sys-color-icon-secondary: var(--zenbu-ref-color-electric-cyan);
217 --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-midnight-700);
218 --zenbu-sys-color-border-default: var(--zenbu-ref-color-electric-violet);
219 --zenbu-sys-color-border-strong: var(--zenbu-ref-color-electric-cyan);
220 --zenbu-sys-color-action-primary-background: var(--zenbu-ref-color-electric-cyan);
221 --zenbu-sys-color-action-primary-background-hover: var(--zenbu-ref-color-electric-magenta);
222 --zenbu-sys-color-action-primary-background-pressed: var(--zenbu-ref-color-electric-violet);
223 --zenbu-sys-color-action-primary-foreground: var(--zenbu-ref-color-midnight-950);
224 --zenbu-sys-color-action-primary-border: var(--zenbu-ref-color-electric-cyan);
225 --zenbu-sys-color-action-neutral-background: var(--zenbu-ref-color-midnight-900);
226 --zenbu-sys-color-action-neutral-background-hover: var(--zenbu-ref-color-midnight-800);
227 --zenbu-sys-color-action-neutral-background-pressed: var(--zenbu-ref-color-midnight-950);
228 --zenbu-sys-color-action-neutral-foreground: var(--zenbu-ref-color-electric-ice);
229 --zenbu-sys-color-action-neutral-border: var(--zenbu-ref-color-electric-violet);
230 --zenbu-sys-color-action-danger-background: var(--zenbu-ref-color-electric-magenta);
231 --zenbu-sys-color-action-danger-background-hover: var(--zenbu-ref-color-electric-violet);
232 --zenbu-sys-color-action-danger-background-pressed: var(--zenbu-ref-color-midnight-700);
233 --zenbu-sys-color-action-danger-foreground: var(--zenbu-ref-color-midnight-950);
234 --zenbu-sys-color-action-danger-border: var(--zenbu-ref-color-electric-magenta);
235 --zenbu-sys-color-focus-inner: var(--zenbu-ref-color-midnight-950);
236 --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-electric-yellow);
237 --zenbu-sys-color-selection-background: var(--zenbu-ref-color-electric-magenta);
238 --zenbu-sys-color-selection-foreground: var(--zenbu-ref-color-midnight-950);
239 --zenbu-sys-color-info-background: var(--zenbu-ref-color-midnight-900);
240 --zenbu-sys-color-info-foreground: var(--zenbu-ref-color-electric-violet);
241 --zenbu-sys-color-info-border: var(--zenbu-ref-color-electric-violet);
242 --zenbu-sys-color-success-background: var(--zenbu-ref-color-midnight-900);
243 --zenbu-sys-color-success-foreground: var(--zenbu-ref-color-electric-mint);
244 --zenbu-sys-color-success-border: var(--zenbu-ref-color-electric-mint);
245 --zenbu-sys-color-warning-background: var(--zenbu-ref-color-midnight-900);
246 --zenbu-sys-color-warning-foreground: var(--zenbu-ref-color-electric-yellow);
247 --zenbu-sys-color-warning-border: var(--zenbu-ref-color-electric-yellow);
248 --zenbu-sys-color-danger-background: var(--zenbu-ref-color-midnight-900);
249 --zenbu-sys-color-danger-foreground: var(--zenbu-ref-color-electric-magenta);
250 --zenbu-sys-color-danger-border: var(--zenbu-ref-color-electric-magenta);
251 --zenbu-sys-color-code-surface: var(--zenbu-ref-color-midnight-950);
252 --zenbu-sys-color-code-text: var(--zenbu-ref-color-electric-mint);
253 --zenbu-sys-color-gridline: var(--zenbu-ref-color-midnight-700);
254 }
255
175 @media (prefers-color-scheme: dark) { 256 @media (prefers-color-scheme: dark) {
176 :root:not([data-zen-theme]) { 257 :root:not([data-zen-theme]) {
177 --zenbu-sys-color-surface-page: var(--zenbu-ref-color-neutral-950); 258 --zenbu-sys-color-surface-page: var(--zenbu-ref-color-neutral-950);
178 --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-neutral-950); 259 --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-neutral-950);
179 --zenbu-sys-color-surface-default: var(--zenbu-ref-color-neutral-900); 260 --zenbu-sys-color-surface-default: var(--zenbu-ref-color-neutral-900);