Mercurial

annotate design_system/src/styles/themes.css @ 256:30c2196d03d4

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[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
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
256
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
1 :root[data-zen-theme="paper"] {
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
2 color-scheme: light;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
3 --zen-color-canvas: var(--zen-color-neutral-100);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4 --zen-color-surface: var(--zen-color-neutral-50);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
5 --zen-color-surface-raised: var(--zen-color-neutral-50);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
6 --zen-color-surface-muted: var(--zen-color-neutral-100);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
7 --zen-color-surface-sunken: var(--zen-color-neutral-200);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
8 --zen-color-text: var(--zen-color-neutral-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
9 --zen-color-text-muted: var(--zen-color-neutral-600);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
10 --zen-color-text-subtle: var(--zen-color-neutral-500);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
11 --zen-color-border: var(--zen-color-neutral-800);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
12 --zen-color-border-muted: var(--zen-color-neutral-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
13 --zen-color-accent: var(--zen-color-amber-400);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14 --zen-color-accent-hover: var(--zen-color-amber-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
15 --zen-color-accent-muted: var(--zen-color-amber-100);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
16 --zen-color-info: var(--zen-color-blue-600);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17 --zen-color-success: var(--zen-color-green-600);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18 --zen-color-warning: var(--zen-color-orange-600);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19 --zen-color-danger: var(--zen-color-red-600);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20 --zen-color-focus: var(--zen-color-violet-600);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21 --zen-font-sans: var(
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22 --zen-font-editorial,
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
23 ui-rounded,
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
24 system-ui,
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25 sans-serif
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 );
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27 }
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 :root[data-zen-theme="ink"] {
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30 color-scheme: dark;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31 --zen-color-canvas: var(--zen-color-neutral-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
32 --zen-color-surface: var(--zen-color-neutral-900);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
33 --zen-color-surface-raised: var(--zen-color-neutral-800);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
34 --zen-color-surface-muted: var(--zen-color-neutral-800);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
35 --zen-color-surface-sunken: var(--zen-color-neutral-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
36 --zen-color-text: var(--zen-color-neutral-50);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 --zen-color-text-muted: var(--zen-color-neutral-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
38 --zen-color-text-subtle: var(--zen-color-neutral-400);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
39 --zen-color-border: var(--zen-color-neutral-200);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 --zen-color-border-muted: var(--zen-color-neutral-700);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
41 --zen-color-accent: var(--zen-color-amber-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42 --zen-color-accent-hover: var(--zen-color-amber-200);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 --zen-color-accent-muted: var(--zen-color-amber-800);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 --zen-color-info: var(--zen-color-blue-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45 --zen-color-success: var(--zen-color-green-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
46 --zen-color-warning: var(--zen-color-orange-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
47 --zen-color-danger: var(--zen-color-red-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 --zen-color-on-info: var(--zen-color-neutral-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49 --zen-color-on-success: var(--zen-color-neutral-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
50 --zen-color-on-warning: var(--zen-color-neutral-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
51 --zen-color-on-danger: var(--zen-color-neutral-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
52 --zen-color-focus: var(--zen-color-violet-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53 --zen-color-on-accent: var(--zen-color-neutral-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54 --zen-color-text-inverse: var(--zen-color-neutral-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 --zen-font-sans: var(
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
56 --zen-font-editorial,
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
57 ui-rounded,
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58 system-ui,
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 sans-serif
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
60 );
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
61 }
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
62
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
63 :root[data-zen-theme="playful"] {
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64 color-scheme: light;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65 --zen-color-canvas: var(--zen-color-rose-100);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 --zen-color-surface: var(--zen-color-amber-50);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
67 --zen-color-surface-raised: var(--zen-color-neutral-50);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
68 --zen-color-surface-muted: var(--zen-color-orange-100);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69 --zen-color-surface-sunken: var(--zen-color-violet-100);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
70 --zen-color-text: var(--zen-color-blue-900);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
71 --zen-color-text-muted: var(--zen-color-violet-700);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
72 --zen-color-text-subtle: var(--zen-color-blue-600);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 --zen-color-border: var(--zen-color-violet-700);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74 --zen-color-border-muted: var(--zen-color-rose-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
75 --zen-color-accent: var(--zen-color-orange-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76 --zen-color-accent-hover: var(--zen-color-amber-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77 --zen-color-accent-muted: var(--zen-color-orange-100);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
78 --zen-color-info: var(--zen-color-blue-600);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
79 --zen-color-success: var(--zen-color-green-600);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80 --zen-color-warning: var(--zen-color-amber-600);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81 --zen-color-danger: var(--zen-color-rose-600);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
82 --zen-color-on-success: var(--zen-color-neutral-50);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83 --zen-color-on-warning: var(--zen-color-neutral-50);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
84 --zen-color-focus: var(--zen-color-violet-500);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
85 --zen-color-on-accent: var(--zen-color-blue-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
86 --zen-font-sans: var(
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
87 --zen-font-playful,
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
88 ui-rounded,
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
89 system-ui,
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
90 sans-serif
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
91 );
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
92 --zen-radius-sm: 0.65rem;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
93 --zen-radius-md: 1rem;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
94 --zen-radius-lg: 1.5rem;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
95 }