Mercurial

comparison 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
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
16 --zen-color-info: var(--zen-color-blue-600); 16 --zen-color-info: var(--zen-color-blue-600);
17 --zen-color-success: var(--zen-color-green-600); 17 --zen-color-success: var(--zen-color-green-600);
18 --zen-color-warning: var(--zen-color-orange-600); 18 --zen-color-warning: var(--zen-color-orange-600);
19 --zen-color-danger: var(--zen-color-red-600); 19 --zen-color-danger: var(--zen-color-red-600);
20 --zen-color-focus: var(--zen-color-violet-600); 20 --zen-color-focus: var(--zen-color-violet-600);
21 --zen-font-sans: var(
22 --zen-font-editorial,
23 ui-rounded,
24 system-ui,
25 sans-serif
26 );
27 } 21 }
28 22
29 :root[data-zen-theme="ink"] { 23 :root[data-zen-theme="ink"] {
30 color-scheme: dark; 24 color-scheme: dark;
31 --zen-color-canvas: var(--zen-color-neutral-950); 25 --zen-color-canvas: var(--zen-color-neutral-950);
50 --zen-color-on-warning: var(--zen-color-neutral-950); 44 --zen-color-on-warning: var(--zen-color-neutral-950);
51 --zen-color-on-danger: var(--zen-color-neutral-950); 45 --zen-color-on-danger: var(--zen-color-neutral-950);
52 --zen-color-focus: var(--zen-color-violet-300); 46 --zen-color-focus: var(--zen-color-violet-300);
53 --zen-color-on-accent: var(--zen-color-neutral-950); 47 --zen-color-on-accent: var(--zen-color-neutral-950);
54 --zen-color-text-inverse: var(--zen-color-neutral-950); 48 --zen-color-text-inverse: var(--zen-color-neutral-950);
55 --zen-font-sans: var(
56 --zen-font-editorial,
57 ui-rounded,
58 system-ui,
59 sans-serif
60 );
61 } 49 }
62 50
63 :root[data-zen-theme="playful"] { 51 :root[data-zen-theme="playful"] {
64 color-scheme: light; 52 color-scheme: light;
65 --zen-color-canvas: var(--zen-color-rose-100); 53 --zen-color-canvas: var(--zen-color-rose-100);
81 --zen-color-danger: var(--zen-color-rose-600); 69 --zen-color-danger: var(--zen-color-rose-600);
82 --zen-color-on-success: var(--zen-color-neutral-50); 70 --zen-color-on-success: var(--zen-color-neutral-50);
83 --zen-color-on-warning: var(--zen-color-neutral-50); 71 --zen-color-on-warning: var(--zen-color-neutral-50);
84 --zen-color-focus: var(--zen-color-violet-500); 72 --zen-color-focus: var(--zen-color-violet-500);
85 --zen-color-on-accent: var(--zen-color-blue-950); 73 --zen-color-on-accent: var(--zen-color-blue-950);
86 --zen-font-sans: var(
87 --zen-font-playful,
88 ui-rounded,
89 system-ui,
90 sans-serif
91 );
92 --zen-radius-sm: 0.65rem; 74 --zen-radius-sm: 0.65rem;
93 --zen-radius-md: 1rem; 75 --zen-radius-md: 1rem;
94 --zen-radius-lg: 1.5rem; 76 --zen-radius-lg: 1.5rem;
95 } 77 }
78
79 :root[data-zen-theme="paper"] {
80 --zenbu-sys-font-family-ui: var(
81 --zenbu-font-editorial,
82 var(--zenbu-ref-font-family-sans)
83 );
84 --zenbu-sys-font-family-content: var(--zenbu-sys-font-family-ui);
85 --zenbu-sys-color-surface-page: var(--zenbu-ref-color-neutral-100);
86 --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-neutral-100);
87 --zenbu-sys-color-surface-default: var(--zenbu-ref-color-neutral-50);
88 --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-neutral-200);
89 --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-neutral-50);
90 --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-neutral-200);
91 --zenbu-sys-color-text-primary: var(--zenbu-ref-color-neutral-950);
92 --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-neutral-700);
93 --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-neutral-500);
94 --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-neutral-300);
95 --zenbu-sys-color-border-default: var(--zenbu-ref-color-neutral-500);
96 --zenbu-sys-color-border-strong: var(--zenbu-ref-color-neutral-800);
97 --zenbu-sys-color-action-primary-background: var(--zenbu-ref-color-amber-300);
98 --zenbu-sys-color-action-primary-background-hover: var(--zenbu-ref-color-amber-100);
99 --zenbu-sys-color-action-primary-background-pressed: var(--zenbu-ref-color-warning-600);
100 --zenbu-sys-color-action-primary-foreground: var(--zenbu-ref-color-neutral-950);
101 --zenbu-sys-color-text-link: var(--zenbu-ref-color-brand-600);
102 --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-focus);
103 }
104
105 :root[data-zen-theme="ink"],
106 :root[data-zen-theme="dark"] {
107 --zenbu-sys-font-family-ui: var(
108 --zenbu-font-editorial,
109 var(--zenbu-ref-font-family-sans)
110 );
111 --zenbu-sys-font-family-content: var(--zenbu-sys-font-family-ui);
112 --zenbu-sys-color-surface-page: var(--zenbu-ref-color-neutral-950);
113 --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-neutral-950);
114 --zenbu-sys-color-surface-default: var(--zenbu-ref-color-neutral-900);
115 --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-neutral-800);
116 --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-neutral-800);
117 --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-neutral-950);
118 --zenbu-sys-color-text-primary: var(--zenbu-ref-color-neutral-50);
119 --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-neutral-300);
120 --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-neutral-400);
121 --zenbu-sys-color-text-inverse: var(--zenbu-ref-color-neutral-950);
122 --zenbu-sys-color-text-link: var(--zenbu-ref-color-brand-300);
123 --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-neutral-700);
124 --zenbu-sys-color-border-default: var(--zenbu-ref-color-neutral-600);
125 --zenbu-sys-color-border-strong: var(--zenbu-ref-color-neutral-200);
126 --zenbu-sys-color-action-primary-background: var(--zenbu-ref-color-amber-300);
127 --zenbu-sys-color-action-primary-background-hover: var(--zenbu-ref-color-amber-100);
128 --zenbu-sys-color-action-primary-background-pressed: var(--zenbu-ref-color-warning-600);
129 --zenbu-sys-color-action-primary-foreground: var(--zenbu-ref-color-neutral-950);
130 --zenbu-sys-color-action-danger-background: var(--zenbu-ref-color-danger-300);
131 --zenbu-sys-color-action-danger-background-hover: var(--zenbu-ref-color-danger-500);
132 --zenbu-sys-color-action-danger-background-pressed: var(--zenbu-ref-color-danger-600);
133 --zenbu-sys-color-action-danger-foreground: var(--zenbu-ref-color-neutral-950);
134 --zenbu-sys-color-focus-inner: var(--zenbu-ref-color-neutral-950);
135 --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-neutral-50);
136 --zenbu-sys-color-info-background: var(--zenbu-ref-color-neutral-800);
137 --zenbu-sys-color-info-foreground: var(--zenbu-ref-color-brand-300);
138 --zenbu-sys-color-success-background: var(--zenbu-ref-color-neutral-800);
139 --zenbu-sys-color-success-foreground: var(--zenbu-ref-color-success-300);
140 --zenbu-sys-color-warning-background: var(--zenbu-ref-color-neutral-800);
141 --zenbu-sys-color-warning-foreground: var(--zenbu-ref-color-warning-300);
142 --zenbu-sys-color-danger-background: var(--zenbu-ref-color-neutral-800);
143 --zenbu-sys-color-danger-foreground: var(--zenbu-ref-color-danger-300);
144 }
145
146 :root[data-zen-theme="playful"] {
147 --zenbu-sys-font-family-ui: var(
148 --zenbu-font-playful,
149 var(--zenbu-ref-font-family-sans)
150 );
151 --zenbu-sys-font-family-content: var(--zenbu-sys-font-family-ui);
152 --zenbu-sys-color-surface-page: var(--zenbu-ref-color-rose-100);
153 --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-rose-100);
154 --zenbu-sys-color-surface-default: var(--zenbu-ref-color-amber-50);
155 --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-orange-100);
156 --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-neutral-50);
157 --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-violet-100);
158 --zenbu-sys-color-text-primary: var(--zenbu-ref-color-blue-900);
159 --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-violet-700);
160 --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-blue-600);
161 --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-rose-300);
162 --zenbu-sys-color-border-default: var(--zenbu-ref-color-violet-500);
163 --zenbu-sys-color-border-strong: var(--zenbu-ref-color-violet-700);
164 --zenbu-sys-color-action-primary-background: var(--zenbu-ref-color-orange-300);
165 --zenbu-sys-color-action-primary-background-hover: var(--zenbu-ref-color-amber-300);
166 --zenbu-sys-color-action-primary-background-pressed: var(--zenbu-ref-color-warning-600);
167 --zenbu-sys-color-action-primary-foreground: var(--zenbu-ref-color-blue-950);
168 --zenbu-sys-color-text-link: var(--zenbu-ref-color-blue-600);
169 --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-violet-500);
170 --zenbu-sys-radius-control-small: var(--zenbu-ref-radius-2);
171 --zenbu-sys-radius-control: var(--zenbu-ref-radius-4);
172 --zenbu-sys-radius-container: var(--zenbu-ref-radius-5);
173 }
174
175 @media (prefers-color-scheme: dark) {
176 :root:not([data-zen-theme]) {
177 --zenbu-sys-color-surface-page: var(--zenbu-ref-color-neutral-950);
178 --zenbu-sys-color-surface-canvas: var(--zenbu-ref-color-neutral-950);
179 --zenbu-sys-color-surface-default: var(--zenbu-ref-color-neutral-900);
180 --zenbu-sys-color-surface-subtle: var(--zenbu-ref-color-neutral-800);
181 --zenbu-sys-color-surface-raised: var(--zenbu-ref-color-neutral-800);
182 --zenbu-sys-color-surface-sunken: var(--zenbu-ref-color-neutral-950);
183 --zenbu-sys-color-text-primary: var(--zenbu-ref-color-neutral-50);
184 --zenbu-sys-color-text-secondary: var(--zenbu-ref-color-neutral-300);
185 --zenbu-sys-color-text-tertiary: var(--zenbu-ref-color-neutral-400);
186 --zenbu-sys-color-border-subtle: var(--zenbu-ref-color-neutral-700);
187 --zenbu-sys-color-border-default: var(--zenbu-ref-color-neutral-600);
188 --zenbu-sys-color-border-strong: var(--zenbu-ref-color-neutral-200);
189 --zenbu-sys-color-text-link: var(--zenbu-ref-color-brand-300);
190 --zenbu-sys-color-focus-inner: var(--zenbu-ref-color-neutral-950);
191 --zenbu-sys-color-focus-outer: var(--zenbu-ref-color-neutral-50);
192 }
193 }
194
195 @media (forced-colors: active) {
196 :root,
197 :root[data-zen-theme],
198 :root:not([data-zen-theme]) {
199 --zenbu-sys-color-surface-page: Canvas;
200 --zenbu-sys-color-surface-canvas: Canvas;
201 --zenbu-sys-color-surface-default: Canvas;
202 --zenbu-sys-color-surface-subtle: Canvas;
203 --zenbu-sys-color-surface-raised: Canvas;
204 --zenbu-sys-color-surface-overlay: Canvas;
205 --zenbu-sys-color-surface-sunken: Canvas;
206 --zenbu-sys-color-text-primary: CanvasText;
207 --zenbu-sys-color-text-secondary: CanvasText;
208 --zenbu-sys-color-text-tertiary: GrayText;
209 --zenbu-sys-color-text-disabled: GrayText;
210 --zenbu-sys-color-text-link: LinkText;
211 --zenbu-sys-color-border-subtle: CanvasText;
212 --zenbu-sys-color-border-default: CanvasText;
213 --zenbu-sys-color-border-strong: CanvasText;
214 --zenbu-sys-color-action-primary-background: Highlight;
215 --zenbu-sys-color-action-primary-background-hover: Highlight;
216 --zenbu-sys-color-action-primary-background-pressed: Highlight;
217 --zenbu-sys-color-action-primary-foreground: HighlightText;
218 --zenbu-sys-color-action-primary-border: Highlight;
219 --zenbu-sys-color-focus-inner: Canvas;
220 --zenbu-sys-color-focus-outer: CanvasText;
221 --zenbu-sys-shadow-subtle: none;
222 --zenbu-sys-shadow-raised: none;
223 --zenbu-sys-shadow-overlay: none;
224 --zenbu-sys-shadow-dialog: none;
225 }
226 }