Mercurial

annotate design_system/src/styles/themes.css @ 258:60a876c4587a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[ui] Add semantic primitive ownership Build a layered Zenbu token and sizing system, make authored controls use native-underneath primitives, migrate mrjunejune without imposing visual surfaces, and document/enforce HTML ownership in the catalog and wiki. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Wed, 05 Aug 2026 05:25:40 -0700
parents 30c2196d03d4
children 667156fcd3e3
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 }
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
23 :root[data-zen-theme="ink"] {
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
24 color-scheme: dark;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25 --zen-color-canvas: var(--zen-color-neutral-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 --zen-color-surface: var(--zen-color-neutral-900);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27 --zen-color-surface-raised: var(--zen-color-neutral-800);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28 --zen-color-surface-muted: var(--zen-color-neutral-800);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 --zen-color-surface-sunken: var(--zen-color-neutral-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30 --zen-color-text: var(--zen-color-neutral-50);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31 --zen-color-text-muted: var(--zen-color-neutral-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
32 --zen-color-text-subtle: var(--zen-color-neutral-400);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
33 --zen-color-border: var(--zen-color-neutral-200);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
34 --zen-color-border-muted: var(--zen-color-neutral-700);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
35 --zen-color-accent: var(--zen-color-amber-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
36 --zen-color-accent-hover: var(--zen-color-amber-200);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 --zen-color-accent-muted: var(--zen-color-amber-800);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
38 --zen-color-info: var(--zen-color-blue-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
39 --zen-color-success: var(--zen-color-green-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 --zen-color-warning: var(--zen-color-orange-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
41 --zen-color-danger: var(--zen-color-red-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42 --zen-color-on-info: var(--zen-color-neutral-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 --zen-color-on-success: var(--zen-color-neutral-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 --zen-color-on-warning: var(--zen-color-neutral-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45 --zen-color-on-danger: var(--zen-color-neutral-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
46 --zen-color-focus: var(--zen-color-violet-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
47 --zen-color-on-accent: var(--zen-color-neutral-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 --zen-color-text-inverse: var(--zen-color-neutral-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49 }
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
50
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
51 :root[data-zen-theme="playful"] {
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
52 color-scheme: light;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53 --zen-color-canvas: var(--zen-color-rose-100);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54 --zen-color-surface: var(--zen-color-amber-50);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 --zen-color-surface-raised: var(--zen-color-neutral-50);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
56 --zen-color-surface-muted: var(--zen-color-orange-100);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
57 --zen-color-surface-sunken: var(--zen-color-violet-100);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58 --zen-color-text: var(--zen-color-blue-900);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 --zen-color-text-muted: var(--zen-color-violet-700);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
60 --zen-color-text-subtle: var(--zen-color-blue-600);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
61 --zen-color-border: var(--zen-color-violet-700);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
62 --zen-color-border-muted: var(--zen-color-rose-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
63 --zen-color-accent: var(--zen-color-orange-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64 --zen-color-accent-hover: var(--zen-color-amber-300);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65 --zen-color-accent-muted: var(--zen-color-orange-100);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 --zen-color-info: var(--zen-color-blue-600);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
67 --zen-color-success: var(--zen-color-green-600);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
68 --zen-color-warning: var(--zen-color-amber-600);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69 --zen-color-danger: var(--zen-color-rose-600);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
70 --zen-color-on-success: var(--zen-color-neutral-50);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
71 --zen-color-on-warning: var(--zen-color-neutral-50);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
72 --zen-color-focus: var(--zen-color-violet-500);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 --zen-color-on-accent: var(--zen-color-blue-950);
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74 --zen-radius-sm: 0.65rem;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
75 --zen-radius-md: 1rem;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76 --zen-radius-lg: 1.5rem;
30c2196d03d4 [site] Integrate Zenbu themes and components
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77 }
258
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
78
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
79 :root[data-zen-theme="paper"] {
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
80 --zenbu-sys-font-family-ui: var(
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
81 --zenbu-font-editorial,
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
82 var(--zenbu-ref-font-family-sans)
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
83 );
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
84 --zenbu-sys-font-family-content: var(--zenbu-sys-font-family-ui);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
85 --zenbu-sys-color-surface-page: var(--zenbu-ref-color-neutral-100);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
86 --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-neutral-100);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
87 --zenbu-sys-color-surface-default: var(--zenbu-ref-color-neutral-50);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
88 --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-neutral-200);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
89 --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-neutral-50);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
90 --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-neutral-200);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
91 --zenbu-sys-color-text-primary: var(--zenbu-ref-color-neutral-950);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
92 --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-neutral-700);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
93 --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-neutral-500);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
94 --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-neutral-300);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
95 --zenbu-sys-color-border-default: var(--zenbu-ref-color-neutral-500);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
96 --zenbu-sys-color-border-strong: var(--zenbu-ref-color-neutral-800);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
97 --zenbu-sys-color-action-primary-background: var(--zenbu-ref-color-amber-300);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
98 --zenbu-sys-color-action-primary-background-hover: var(--zenbu-ref-color-amber-100);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
99 --zenbu-sys-color-action-primary-background-pressed: var(--zenbu-ref-color-warning-600);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
100 --zenbu-sys-color-action-primary-foreground: var(--zenbu-ref-color-neutral-950);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
101 --zenbu-sys-color-text-link: var(--zenbu-ref-color-brand-600);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
102 --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-focus);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
103 }
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
104
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
105 :root[data-zen-theme="ink"],
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
106 :root[data-zen-theme="dark"] {
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
107 --zenbu-sys-font-family-ui: var(
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
108 --zenbu-font-editorial,
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
109 var(--zenbu-ref-font-family-sans)
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
110 );
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
111 --zenbu-sys-font-family-content: var(--zenbu-sys-font-family-ui);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
112 --zenbu-sys-color-surface-page: var(--zenbu-ref-color-neutral-950);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
113 --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-neutral-950);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
114 --zenbu-sys-color-surface-default: var(--zenbu-ref-color-neutral-900);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
115 --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-neutral-800);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
116 --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-neutral-800);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
117 --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-neutral-950);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
118 --zenbu-sys-color-text-primary: var(--zenbu-ref-color-neutral-50);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
119 --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-neutral-300);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
120 --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-neutral-400);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
121 --zenbu-sys-color-text-inverse: var(--zenbu-ref-color-neutral-950);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
122 --zenbu-sys-color-text-link: var(--zenbu-ref-color-brand-300);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
123 --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-neutral-700);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
124 --zenbu-sys-color-border-default: var(--zenbu-ref-color-neutral-600);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
125 --zenbu-sys-color-border-strong: var(--zenbu-ref-color-neutral-200);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
126 --zenbu-sys-color-action-primary-background: var(--zenbu-ref-color-amber-300);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
127 --zenbu-sys-color-action-primary-background-hover: var(--zenbu-ref-color-amber-100);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
128 --zenbu-sys-color-action-primary-background-pressed: var(--zenbu-ref-color-warning-600);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
129 --zenbu-sys-color-action-primary-foreground: var(--zenbu-ref-color-neutral-950);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
130 --zenbu-sys-color-action-danger-background: var(--zenbu-ref-color-danger-300);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
131 --zenbu-sys-color-action-danger-background-hover: var(--zenbu-ref-color-danger-500);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
132 --zenbu-sys-color-action-danger-background-pressed: var(--zenbu-ref-color-danger-600);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
133 --zenbu-sys-color-action-danger-foreground: var(--zenbu-ref-color-neutral-950);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
134 --zenbu-sys-color-focus-inner: var(--zenbu-ref-color-neutral-950);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
135 --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-neutral-50);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
136 --zenbu-sys-color-info-background: var(--zenbu-ref-color-neutral-800);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
137 --zenbu-sys-color-info-foreground: var(--zenbu-ref-color-brand-300);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
138 --zenbu-sys-color-success-background: var(--zenbu-ref-color-neutral-800);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
139 --zenbu-sys-color-success-foreground: var(--zenbu-ref-color-success-300);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
140 --zenbu-sys-color-warning-background: var(--zenbu-ref-color-neutral-800);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
141 --zenbu-sys-color-warning-foreground: var(--zenbu-ref-color-warning-300);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
142 --zenbu-sys-color-danger-background: var(--zenbu-ref-color-neutral-800);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
143 --zenbu-sys-color-danger-foreground: var(--zenbu-ref-color-danger-300);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
144 }
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
145
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
146 :root[data-zen-theme="playful"] {
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
147 --zenbu-sys-font-family-ui: var(
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
148 --zenbu-font-playful,
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
149 var(--zenbu-ref-font-family-sans)
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
150 );
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
151 --zenbu-sys-font-family-content: var(--zenbu-sys-font-family-ui);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
152 --zenbu-sys-color-surface-page: var(--zenbu-ref-color-rose-100);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
153 --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-rose-100);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
154 --zenbu-sys-color-surface-default: var(--zenbu-ref-color-amber-50);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
155 --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-orange-100);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
156 --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-neutral-50);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
157 --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-violet-100);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
158 --zenbu-sys-color-text-primary: var(--zenbu-ref-color-blue-900);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
159 --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-violet-700);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
160 --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-blue-600);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
161 --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-rose-300);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
162 --zenbu-sys-color-border-default: var(--zenbu-ref-color-violet-500);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
163 --zenbu-sys-color-border-strong: var(--zenbu-ref-color-violet-700);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
164 --zenbu-sys-color-action-primary-background: var(--zenbu-ref-color-orange-300);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
165 --zenbu-sys-color-action-primary-background-hover: var(--zenbu-ref-color-amber-300);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
166 --zenbu-sys-color-action-primary-background-pressed: var(--zenbu-ref-color-warning-600);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
167 --zenbu-sys-color-action-primary-foreground: var(--zenbu-ref-color-blue-950);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
168 --zenbu-sys-color-text-link: var(--zenbu-ref-color-blue-600);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
169 --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-violet-500);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
170 --zenbu-sys-radius-control-small: var(--zenbu-ref-radius-2);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
171 --zenbu-sys-radius-control: var(--zenbu-ref-radius-4);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
172 --zenbu-sys-radius-container: var(--zenbu-ref-radius-5);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
173 }
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
174
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
175 @media (prefers-color-scheme: dark) {
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
176 :root:not([data-zen-theme]) {
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
177 --zenbu-sys-color-surface-page: var(--zenbu-ref-color-neutral-950);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
178 --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-neutral-950);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
179 --zenbu-sys-color-surface-default: var(--zenbu-ref-color-neutral-900);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
180 --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-neutral-800);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
181 --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-neutral-800);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
182 --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-neutral-950);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
183 --zenbu-sys-color-text-primary: var(--zenbu-ref-color-neutral-50);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
184 --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-neutral-300);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
185 --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-neutral-400);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
186 --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-neutral-700);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
187 --zenbu-sys-color-border-default: var(--zenbu-ref-color-neutral-600);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
188 --zenbu-sys-color-border-strong: var(--zenbu-ref-color-neutral-200);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
189 --zenbu-sys-color-text-link: var(--zenbu-ref-color-brand-300);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
190 --zenbu-sys-color-focus-inner: var(--zenbu-ref-color-neutral-950);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
191 --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-neutral-50);
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
192 }
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
193 }
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
194
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
195 @media (forced-colors: active) {
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
196 :root,
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
197 :root[data-zen-theme],
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
198 :root:not([data-zen-theme]) {
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
199 --zenbu-sys-color-surface-page: Canvas;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
200 --zenbu-sys-color-surface-canvas: Canvas;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
201 --zenbu-sys-color-surface-default: Canvas;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
202 --zenbu-sys-color-surface-subtle: Canvas;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
203 --zenbu-sys-color-surface-raised: Canvas;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
204 --zenbu-sys-color-surface-overlay: Canvas;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
205 --zenbu-sys-color-surface-sunken: Canvas;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
206 --zenbu-sys-color-text-primary: CanvasText;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
207 --zenbu-sys-color-text-secondary: CanvasText;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
208 --zenbu-sys-color-text-tertiary: GrayText;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
209 --zenbu-sys-color-text-disabled: GrayText;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
210 --zenbu-sys-color-text-link: LinkText;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
211 --zenbu-sys-color-border-subtle: CanvasText;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
212 --zenbu-sys-color-border-default: CanvasText;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
213 --zenbu-sys-color-border-strong: CanvasText;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
214 --zenbu-sys-color-action-primary-background: Highlight;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
215 --zenbu-sys-color-action-primary-background-hover: Highlight;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
216 --zenbu-sys-color-action-primary-background-pressed: Highlight;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
217 --zenbu-sys-color-action-primary-foreground: HighlightText;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
218 --zenbu-sys-color-action-primary-border: Highlight;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
219 --zenbu-sys-color-focus-inner: Canvas;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
220 --zenbu-sys-color-focus-outer: CanvasText;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
221 --zenbu-sys-shadow-subtle: none;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
222 --zenbu-sys-shadow-raised: none;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
223 --zenbu-sys-shadow-overlay: none;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
224 --zenbu-sys-shadow-dialog: none;
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
225 }
60a876c4587a [ui] Add semantic primitive ownership
MrJuneJune <me@mrjunejune.com>
parents: 256
diff changeset
226 }