Mercurial

comparison design_system/src/styles/components.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 2b6e732087ff
children
comparison
equal deleted inserted replaced
257:609d3c6aff4e 258:60a876c4587a
1 @import url("./shadcn.css"); 1 @import url("./elements.css");
2 2
3 :where( 3 :where(
4 zen-button, 4 zen-button,
5 zen-card, 5 zen-card,
6 zen-alert, 6 zen-alert,
7 zen-field, 7 zen-field,
8 zen-stack, 8 zen-stack,
9 zen-notifications 9 zen-notifications
10 ) { 10 ) {
11 box-sizing: border-box; 11 box-sizing: border-box;
12 font-family: var(--zen-font-sans); 12 font-family: var(--zenbu-sys-font-family-ui);
13 color: var(--zen-color-text); 13 color: var(--zenbu-sys-color-text-primary);
14 } 14 }
15 15
16 zen-button { 16 zen-button {
17 display: inline-flex; 17 display: inline-flex;
18 } 18 }
19 19
20 zen-button > :where(button, a) { 20 zen-button:not([appearance="plain"]) > :where(button, a) {
21 --zenbu-button-background:
22 var(--zenbu-sys-color-action-primary-background);
23 --zenbu-button-background-hover:
24 var(--zenbu-sys-color-action-primary-background-hover);
25 --zenbu-button-background-pressed:
26 var(--zenbu-sys-color-action-primary-background-pressed);
27 --zenbu-button-border:
28 var(--zenbu-sys-color-action-primary-border);
29 --zenbu-button-foreground:
30 var(--zenbu-sys-color-action-primary-foreground);
21 appearance: none; 31 appearance: none;
32 box-sizing: border-box;
22 display: inline-flex; 33 display: inline-flex;
23 align-items: center; 34 align-items: center;
24 justify-content: center; 35 justify-content: center;
25 gap: var(--zen-space-2); 36 gap: var(--zenbu-control-gap);
26 min-height: 2.75rem; 37 min-height: var(--zenbu-control-height);
27 padding: var(--zen-space-2) var(--zen-space-4); 38 padding:
28 border: var(--zen-border-width) solid var(--zen-color-border); 39 var(--zenbu-control-padding-block)
29 border-radius: var(--zen-radius-md); 40 var(--zenbu-control-padding-inline);
30 box-shadow: var(--zen-shadow-sm); 41 border: var(--zenbu-sys-stroke-width) solid var(--zenbu-button-border);
31 background: var(--zen-color-accent); 42 border-radius: var(--zenbu-sys-radius-control);
32 color: var(--zen-color-on-accent); 43 box-shadow: var(--zenbu-sys-shadow-subtle);
33 font: 700 var(--zen-font-size-md)/1 var(--zen-font-sans); 44 background: var(--zenbu-button-background);
45 color: var(--zenbu-button-foreground);
46 font:
47 var(--zenbu-sys-font-weight-strong)
48 var(--zenbu-control-font-size) /
49 var(--zenbu-control-line-height)
50 var(--zenbu-sys-font-family-ui);
34 text-decoration: none; 51 text-decoration: none;
35 cursor: pointer; 52 cursor: pointer;
36 transition: 53 transition:
37 background var(--zen-motion-fast) ease, 54 background var(--zenbu-sys-motion-duration-state)
38 box-shadow var(--zen-motion-fast) ease, 55 var(--zenbu-sys-motion-ease-state),
39 transform var(--zen-motion-fast) ease; 56 border-color var(--zenbu-sys-motion-duration-state)
40 } 57 var(--zenbu-sys-motion-ease-state),
41 58 box-shadow var(--zenbu-sys-motion-duration-feedback)
42 zen-button > :where(button, a):hover { 59 var(--zenbu-sys-motion-ease-state),
43 background: var(--zen-color-accent-hover); 60 transform var(--zenbu-sys-motion-duration-feedback)
61 var(--zenbu-sys-motion-ease-state);
62 }
63
64 zen-button:not([appearance="plain"]) > :where(button, a):hover:not(
65 :disabled,
66 [aria-disabled="true"]
67 ) {
68 background: var(--zenbu-button-background-hover);
44 transform: translate(-1px, -1px); 69 transform: translate(-1px, -1px);
45 box-shadow: var(--zen-shadow-hover); 70 box-shadow: var(--zenbu-sys-shadow-raised);
46 } 71 }
47 72
48 zen-button > :where(button, a):active { 73 zen-button:not([appearance="plain"]) > :where(button, a):active:not(
74 :disabled,
75 [aria-disabled="true"]
76 ) {
77 background: var(--zenbu-button-background-pressed);
49 transform: translate(2px, 2px); 78 transform: translate(2px, 2px);
50 box-shadow: none; 79 box-shadow: none;
51 } 80 }
52 81
53 zen-button > :where(button, a):focus-visible, 82 zen-button:not([appearance="plain"]) > :where(button, a):focus-visible,
54 zen-alert [data-zen-dismiss]:focus-visible { 83 zen-alert [data-zen-dismiss]:focus-visible {
55 outline: 3px solid var(--zen-color-focus); 84 outline: var(--zenbu-sys-focus-width) solid
56 outline-offset: 3px; 85 var(--zenbu-sys-color-focus-outer);
57 } 86 outline-offset: var(--zenbu-sys-focus-offset);
58 87 }
59 zen-field :where(input, select, textarea):focus-visible { 88
89 zen-field:not([appearance="plain"]) :where(
90 input,
91 select,
92 textarea
93 ):focus-visible {
60 outline: none; 94 outline: none;
61 } 95 }
62 96
63 zen-button[variant="quiet"] > :where(button, a) { 97 zen-button:not([appearance="plain"])[variant="quiet"] > :where(button, a) {
64 background: var(--zen-color-surface); 98 --zenbu-button-background:
65 color: var(--zen-color-text); 99 var(--zenbu-sys-color-action-neutral-background);
66 } 100 --zenbu-button-background-hover:
67 101 var(--zenbu-sys-color-action-neutral-background-hover);
68 zen-button[variant="danger"] > :where(button, a) { 102 --zenbu-button-background-pressed:
69 background: var(--zen-color-danger); 103 var(--zenbu-sys-color-action-neutral-background-pressed);
70 color: var(--zen-color-on-danger); 104 --zenbu-button-border:
71 } 105 var(--zenbu-sys-color-action-neutral-border);
72 106 --zenbu-button-foreground:
73 zen-button[disabled] > :where(button, a), 107 var(--zenbu-sys-color-action-neutral-foreground);
74 zen-button[loading] > :where(button, a) { 108 }
75 opacity: 0.55; 109
110 zen-button:not([appearance="plain"])[variant="danger"] > :where(button, a) {
111 --zenbu-button-background:
112 var(--zenbu-sys-color-action-danger-background);
113 --zenbu-button-background-hover:
114 var(--zenbu-sys-color-action-danger-background-hover);
115 --zenbu-button-background-pressed:
116 var(--zenbu-sys-color-action-danger-background-pressed);
117 --zenbu-button-border:
118 var(--zenbu-sys-color-action-danger-border);
119 --zenbu-button-foreground:
120 var(--zenbu-sys-color-action-danger-foreground);
121 }
122
123 zen-button:not([appearance="plain"])[disabled] > :where(button, a),
124 zen-button:not([appearance="plain"])[loading] > :where(button, a) {
125 opacity: var(--zenbu-sys-opacity-disabled);
76 box-shadow: none; 126 box-shadow: none;
77 cursor: not-allowed; 127 cursor: not-allowed;
78 transform: none; 128 transform: none;
79 } 129 }
80 130
81 zen-button[loading] > :where(button, a)::before { 131 zen-button:not([appearance="plain"])[loading] > :where(button, a)::before {
82 width: 0.85rem; 132 width: var(--zenbu-control-icon-size);
83 height: 0.85rem; 133 height: var(--zenbu-control-icon-size);
84 border: 2px solid currentColor; 134 border: 2px solid currentColor;
85 border-right-color: transparent; 135 border-right-color: transparent;
86 border-radius: 50%; 136 border-radius: 50%;
87 content: ""; 137 content: "";
88 animation: zen-spin 700ms linear infinite; 138 animation: zen-spin 700ms linear infinite;
94 144
95 zen-card { 145 zen-card {
96 display: block; 146 display: block;
97 } 147 }
98 148
99 zen-card > :where(article, section) { 149 zen-card:not([appearance="plain"]) > :where(article, section) {
150 --zenbu-card-background: var(--zenbu-sys-color-surface-raised);
151 --zenbu-card-border: var(--zenbu-sys-color-border-subtle);
152 --zenbu-card-foreground: var(--zenbu-sys-color-text-primary);
100 height: 100%; 153 height: 100%;
101 padding: var(--zen-space-5); 154 padding: var(--zenbu-sys-padding-lg);
102 border: var(--zen-border-width) solid var(--zen-color-border); 155 border: var(--zenbu-sys-stroke-width) solid var(--zenbu-card-border);
103 border-radius: var(--zen-radius-lg); 156 border-radius: var(--zenbu-sys-radius-container);
104 box-shadow: var(--zen-shadow-md); 157 box-shadow: var(--zenbu-sys-shadow-raised);
105 background: var(--zen-color-surface-raised); 158 background: var(--zenbu-card-background);
106 } 159 color: var(--zenbu-card-foreground);
107 160 }
108 zen-card[interactive] > :where(article, section) { 161
162 zen-card:not([appearance="plain"])[interactive] > :where(article, section) {
109 transition: 163 transition:
110 box-shadow var(--zen-motion-fast) ease, 164 box-shadow var(--zenbu-sys-motion-duration-state)
111 transform var(--zen-motion-fast) ease; 165 var(--zenbu-sys-motion-ease-state),
112 } 166 transform var(--zenbu-sys-motion-duration-state)
113 167 var(--zenbu-sys-motion-ease-state);
114 zen-card[interactive] > :where(article, section):hover { 168 }
169
170 zen-card:not([appearance="plain"])[interactive] > :where(article, section):hover {
115 transform: translate(-2px, -2px); 171 transform: translate(-2px, -2px);
116 box-shadow: var(--zen-shadow-lifted); 172 box-shadow: var(--zenbu-sys-shadow-overlay);
117 } 173 }
118 174
119 zen-card :where(h2, h3, p) { 175 zen-card :where(h2, h3, p) {
120 margin-top: 0; 176 margin-top: 0;
121 } 177 }
122 178
123 zen-alert { 179 zen-alert {
180 --zenbu-alert-background: var(--zenbu-sys-color-info-background);
181 --zenbu-alert-border: var(--zenbu-sys-color-info-border);
182 --zenbu-alert-foreground: var(--zenbu-sys-color-info-foreground);
124 display: grid; 183 display: grid;
125 grid-template-columns: 0.35rem minmax(0, 1fr) auto; 184 --zenbu-alert-indicator-width: var(--zenbu-ref-space-1-5);
185 grid-template-columns:
186 var(--zenbu-alert-indicator-width)
187 minmax(0, 1fr)
188 auto;
126 align-items: start; 189 align-items: start;
127 gap: var(--zen-space-3); 190 gap: var(--zenbu-sys-space-control);
128 padding: var(--zen-space-4); 191 padding: var(--zenbu-sys-padding-md);
129 border: var(--zen-border-width) solid var(--zen-color-border); 192 border: var(--zenbu-sys-stroke-width) solid var(--zenbu-alert-border);
130 border-radius: var(--zen-radius-md); 193 border-radius: var(--zenbu-sys-radius-container);
131 background: var(--zen-color-surface-raised); 194 background: var(--zenbu-alert-background);
195 color: var(--zenbu-alert-foreground);
132 } 196 }
133 197
134 zen-alert::before { 198 zen-alert::before {
135 align-self: stretch; 199 align-self: stretch;
136 border-radius: 999px; 200 border-radius: var(--zenbu-sys-radius-pill);
137 background: var(--zen-color-info); 201 background: var(--zenbu-alert-border);
138 content: ""; 202 content: "";
139 } 203 }
140 204
141 zen-alert[tone="success"]::before { background: var(--zen-color-success); } 205 zen-alert[tone="success"] {
142 zen-alert[tone="warning"]::before { background: var(--zen-color-warning); } 206 --zenbu-alert-background: var(--zenbu-sys-color-success-background);
143 zen-alert[tone="danger"]::before { background: var(--zen-color-danger); } 207 --zenbu-alert-border: var(--zenbu-sys-color-success-border);
208 --zenbu-alert-foreground: var(--zenbu-sys-color-success-foreground);
209 }
210 zen-alert[tone="warning"] {
211 --zenbu-alert-background: var(--zenbu-sys-color-warning-background);
212 --zenbu-alert-border: var(--zenbu-sys-color-warning-border);
213 --zenbu-alert-foreground: var(--zenbu-sys-color-warning-foreground);
214 }
215 zen-alert[tone="danger"] {
216 --zenbu-alert-background: var(--zenbu-sys-color-danger-background);
217 --zenbu-alert-border: var(--zenbu-sys-color-danger-border);
218 --zenbu-alert-foreground: var(--zenbu-sys-color-danger-foreground);
219 }
144 220
145 zen-alert > :where(p, div) { 221 zen-alert > :where(p, div) {
146 margin: 0; 222 margin: 0;
147 } 223 }
148 224
149 zen-alert [data-zen-dismiss] { 225 zen-alert [data-zen-dismiss] {
150 min-width: 2rem; 226 min-width: var(--zenbu-sys-control-height-xs);
151 min-height: 2rem; 227 min-height: var(--zenbu-sys-control-height-xs);
152 padding: 0; 228 padding: 0;
153 border: 0; 229 border: 0;
154 border-radius: 50%; 230 border-radius: var(--zenbu-sys-radius-pill);
155 background: transparent; 231 background: transparent;
156 color: inherit; 232 color: inherit;
157 font: 700 1.2rem/1 var(--zen-font-sans); 233 font:
234 var(--zenbu-sys-font-weight-bold)
235 var(--zenbu-sys-font-size-lg) / 1
236 var(--zenbu-sys-font-family-ui);
158 cursor: pointer; 237 cursor: pointer;
159 } 238 }
160 239
161 zen-field { 240 zen-field {
241 --zenbu-field-textarea-min-height:
242 calc(var(--zenbu-ref-space-24) + var(--zenbu-ref-space-4));
162 display: grid; 243 display: grid;
163 gap: var(--zen-space-2); 244 gap: var(--zenbu-sys-space-icon-label);
164 } 245 }
165 246
166 zen-field > label { 247 zen-field[appearance="plain"] {
167 font-weight: 750; 248 display: contents;
168 } 249 }
169 250
170 zen-field > :where(input, select, textarea) { 251 zen-field:not([appearance="plain"]) > label {
252 font-family: var(--zenbu-sys-type-label-family);
253 font-size: var(--zenbu-sys-type-label-size);
254 font-weight: var(--zenbu-sys-type-label-weight);
255 line-height: var(--zenbu-sys-type-label-line-height);
256 }
257
258 zen-field:not([appearance="plain"]) > :where(input, select, textarea) {
171 width: 100%; 259 width: 100%;
172 min-height: 2.75rem; 260 min-height: var(--zenbu-control-height);
173 box-sizing: border-box; 261 box-sizing: border-box;
174 padding: var(--zen-space-3); 262 padding:
175 border: var(--zen-border-width) solid var(--zen-color-border); 263 var(--zenbu-control-padding-block)
176 border-radius: var(--zen-radius-md); 264 var(--zenbu-control-padding-inline);
177 background: var(--zen-color-surface); 265 border: var(--zenbu-sys-stroke-width) solid
178 color: var(--zen-color-text); 266 var(--zenbu-sys-color-border-default);
179 font: inherit; 267 border-radius: var(--zenbu-sys-radius-control);
180 } 268 background: var(--zenbu-sys-color-surface-default);
181 269 color: var(--zenbu-sys-color-text-primary);
182 zen-field > textarea { 270 font-family: inherit;
183 min-height: 7rem; 271 font-size: var(--zenbu-control-font-size);
272 line-height: var(--zenbu-control-line-height);
273 }
274
275 zen-field:not([appearance="plain"]) > textarea {
276 min-height: var(--zenbu-field-textarea-min-height);
184 resize: vertical; 277 resize: vertical;
185 } 278 }
186 279
187 zen-field > :where(small, [data-help]) { 280 zen-field:not([appearance="plain"]) > :where(small, [data-help]) {
188 color: var(--zen-color-text-muted); 281 color: var(--zenbu-sys-color-text-secondary);
189 } 282 }
190 283
191 zen-field[data-invalid] > :where(input, select, textarea) { 284 zen-field:not([appearance="plain"])[data-invalid] > :where(input, select, textarea) {
192 border-color: var(--zen-color-danger); 285 border-color: var(--zenbu-sys-color-danger-border);
193 } 286 }
194 287
195 zen-field[data-invalid] > :where(small, [data-help]) { 288 zen-field:not([appearance="plain"])[data-invalid] > :where(small, [data-help]) {
196 color: var(--zen-color-danger); 289 color: var(--zenbu-sys-color-danger-foreground);
197 } 290 }
198 291
199 zen-stack { 292 zen-stack {
293 --zenbu-stack-gap: var(--zenbu-sys-space-group);
200 display: flex; 294 display: flex;
201 flex-direction: column; 295 flex-direction: column;
202 gap: var(--zen-stack-gap, var(--zen-space-4)); 296 gap: var(--zenbu-stack-gap);
203 } 297 }
204 298
205 zen-stack[direction="row"] { 299 zen-stack[direction="row"] {
206 flex-flow: row wrap; 300 flex-flow: row wrap;
207 align-items: center; 301 align-items: center;
208 } 302 }
209 303
210 zen-stack[gap="tight"] { --zen-stack-gap: var(--zen-space-2); } 304 zen-stack[gap="tight"] {
211 zen-stack[gap="loose"] { --zen-stack-gap: var(--zen-space-6); } 305 --zenbu-stack-gap: var(--zenbu-sys-space-related);
306 }
307 zen-stack[gap="loose"] {
308 --zenbu-stack-gap: var(--zenbu-sys-space-container);
309 }
212 310
213 zen-notifications > [data-zen-notification-stack] { 311 zen-notifications > [data-zen-notification-stack] {
312 --zenbu-notification-z-index: var(--zenbu-sys-z-notification);
313 --zenbu-notification-inset: var(--zenbu-sys-padding-md);
314 --zenbu-notification-bottom-inset: var(--zenbu-sys-padding-md);
315 --zenbu-notification-collapsed-height: 0;
316 --zenbu-notification-expanded-height: 0;
214 position: fixed; 317 position: fixed;
215 z-index: var(--zen-notification-z-index, 1000); 318 z-index: var(
216 inset-inline-end: var(--zen-notification-inset, var(--zen-space-4)); 319 --zenbu-notification-z-index,
320 var(--zenbu-sys-z-notification)
321 );
322 inset-inline-end: var(
323 --zenbu-notification-inset,
324 var(--zenbu-sys-padding-md)
325 );
217 inset-block-end: var( 326 inset-block-end: var(
218 --zen-notification-bottom-inset, 327 --zenbu-notification-bottom-inset,
219 var(--zen-space-4) 328 var(--zenbu-sys-padding-md)
220 ); 329 );
221 inline-size: min(24rem, calc(100vi - 2rem)); 330 inline-size: min(24rem, calc(100vi - 2rem));
222 height: var(--zen-notification-collapsed-height, 0); 331 height: var(--zenbu-notification-collapsed-height, 0);
223 --zen-notification-gap: 12px; 332 --zenbu-notification-gap: var(--zenbu-sys-space-control);
224 pointer-events: auto; 333 pointer-events: auto;
225 isolation: isolate; 334 isolation: isolate;
226 transition: height 220ms cubic-bezier(0.2, 0.8, 0.2, 1); 335 transition:
336 height var(--zenbu-sys-motion-duration-layout)
337 var(--zenbu-sys-motion-ease-layout);
227 } 338 }
228 339
229 zen-notifications > [data-zen-notification-stack]:is( 340 zen-notifications > [data-zen-notification-stack]:is(
230 :hover, 341 :hover,
231 :focus-within 342 :focus-within
232 ) { 343 ) {
233 height: var(--zen-notification-expanded-height, 0); 344 height: var(--zenbu-notification-expanded-height, 0);
234 } 345 }
235 346
236 zen-notifications > [data-zen-notification-stack] > article { 347 zen-notifications > [data-zen-notification-stack] > article {
348 --zenbu-notification-collapsed-opacity: 1;
349 --zenbu-notification-collapsed-offset: 0;
350 --zenbu-notification-offset: 0;
351 --zenbu-notification-scale: 1;
352 --zenbu-notification-background:
353 var(--zenbu-sys-color-surface-raised);
354 --zenbu-notification-border:
355 var(--zenbu-sys-color-border-subtle);
356 --zenbu-notification-foreground:
357 var(--zenbu-sys-color-text-primary);
237 position: absolute; 358 position: absolute;
238 inset-inline: 0; 359 inset-inline: 0;
239 inset-block-end: 0; 360 inset-block-end: 0;
240 display: grid; 361 display: grid;
241 grid-template-columns: 1.75rem minmax(0, 1fr) 2rem; 362 grid-template-columns: 1.75rem minmax(0, 1fr) 2rem;
242 align-items: start; 363 align-items: start;
243 gap: var(--zen-space-3); 364 gap: var(--zenbu-sys-space-control);
244 padding: var(--zen-space-4); 365 padding: var(--zenbu-sys-padding-md);
245 border: var(--zen-border-width) solid var(--zen-color-border); 366 border: var(--zenbu-sys-stroke-width) solid
246 border-radius: var(--zen-radius-lg); 367 var(--zenbu-notification-border);
247 box-shadow: var(--zen-shadow-md); 368 border-radius: var(--zenbu-sys-radius-container);
248 background: var(--zen-color-surface-raised); 369 box-shadow: var(--zenbu-sys-shadow-overlay);
249 color: var(--zen-color-text); 370 background: var(--zenbu-notification-background);
250 opacity: var(--zen-notification-collapsed-opacity, 1); 371 color: var(--zenbu-notification-foreground);
372 opacity: var(--zenbu-notification-collapsed-opacity, 1);
251 pointer-events: none; 373 pointer-events: none;
252 transform: 374 transform:
253 translate3d( 375 translate3d(
254 0, 376 0,
255 var(--zen-notification-collapsed-offset, 0), 377 var(--zenbu-notification-collapsed-offset, 0),
256 0 378 0
257 ) 379 )
258 scale(var(--zen-notification-scale, 1)); 380 scale(var(--zenbu-notification-scale, 1));
259 transform-origin: center bottom; 381 transform-origin: center bottom;
260 transition: 382 transition:
261 opacity 180ms ease, 383 opacity var(--zenbu-sys-motion-duration-exit)
262 transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1); 384 var(--zenbu-sys-motion-ease-exit),
385 transform var(--zenbu-sys-motion-duration-layout)
386 var(--zenbu-sys-motion-ease-layout);
263 will-change: transform; 387 will-change: transform;
264 animation: zen-notification-enter 160ms ease-out; 388 animation: zen-notification-enter 160ms ease-out;
265 } 389 }
266 390
267 zen-notifications > [data-zen-notification-stack] > article[data-depth="0"] { 391 zen-notifications > [data-zen-notification-stack] > article[data-depth="0"] {
275 opacity: 1; 399 opacity: 1;
276 pointer-events: auto; 400 pointer-events: auto;
277 transform: 401 transform:
278 translate3d( 402 translate3d(
279 0, 403 0,
280 var(--zen-notification-offset, 0px), 404 var(--zenbu-notification-offset, 0px),
281 0 405 0
282 ) 406 )
283 scale(1); 407 scale(1);
284 } 408 }
285 409
288 pointer-events: none; 412 pointer-events: none;
289 transform: translate3d(110%, 0, 0) scale(0.96); 413 transform: translate3d(110%, 0, 0) scale(0.96);
290 } 414 }
291 415
292 .zen-notification-tone { 416 .zen-notification-tone {
417 --zenbu-notification-tone-background:
418 var(--zenbu-sys-color-info-foreground);
419 --zenbu-notification-tone-foreground:
420 var(--zenbu-sys-color-text-inverse);
293 display: grid; 421 display: grid;
294 width: 1.75rem; 422 width: 1.75rem;
295 height: 1.75rem; 423 height: 1.75rem;
296 place-items: center; 424 place-items: center;
297 border-radius: 50%; 425 border-radius: var(--zenbu-sys-radius-pill);
298 background: var(--zen-color-info); 426 background: var(--zenbu-notification-tone-background);
299 color: var(--zen-color-on-info); 427 color: var(--zenbu-notification-tone-foreground);
300 font-weight: 900; 428 font-weight: var(--zenbu-sys-font-weight-bold);
301 } 429 }
302 430
303 [data-tone="success"] > .zen-notification-tone { 431 [data-tone="success"] > .zen-notification-tone {
304 background: var(--zen-color-success); 432 --zenbu-notification-tone-background:
305 color: var(--zen-color-on-success); 433 var(--zenbu-sys-color-success-foreground);
306 } 434 }
307 435
308 [data-tone="warning"] > .zen-notification-tone { 436 [data-tone="warning"] > .zen-notification-tone {
309 background: var(--zen-color-warning); 437 --zenbu-notification-tone-background:
310 color: var(--zen-color-on-warning); 438 var(--zenbu-sys-color-warning-foreground);
311 } 439 }
312 440
313 [data-tone="error"] > .zen-notification-tone { 441 [data-tone="error"] > .zen-notification-tone {
314 background: var(--zen-color-danger); 442 --zenbu-notification-tone-background:
315 color: var(--zen-color-on-danger); 443 var(--zenbu-sys-color-danger-foreground);
316 } 444 }
317 445
318 .zen-notification-content { 446 .zen-notification-content {
319 display: grid; 447 display: grid;
320 gap: var(--zen-space-1); 448 gap: var(--zenbu-sys-space-icon-label);
321 } 449 }
322 450
323 .zen-notification-message, 451 .zen-notification-message,
324 .zen-notification-description { 452 .zen-notification-description {
325 margin: 0; 453 margin: 0;
326 } 454 }
327 455
328 .zen-notification-message { 456 .zen-notification-message {
329 font-weight: 800; 457 font-weight: var(--zenbu-sys-font-weight-bold);
330 } 458 }
331 459
332 .zen-notification-description { 460 .zen-notification-description {
333 color: var(--zen-color-text-muted); 461 color: var(--zenbu-sys-color-text-secondary);
334 font-size: var(--zen-font-size-sm); 462 font-size: var(--zenbu-sys-font-size-sm);
335 } 463 }
336 464
337 .zen-notification-action, 465 .zen-notification-action,
338 .zen-notification-dismiss { 466 .zen-notification-dismiss {
339 border: 0; 467 border: 0;
342 cursor: pointer; 470 cursor: pointer;
343 } 471 }
344 472
345 .zen-notification-action { 473 .zen-notification-action {
346 justify-self: start; 474 justify-self: start;
347 margin-top: var(--zen-space-2); 475 margin-top: var(--zenbu-sys-space-related);
348 padding: 0; 476 padding: 0;
349 color: var(--zen-color-info); 477 color: var(--zenbu-sys-color-text-link);
350 font-weight: 800; 478 font-weight: var(--zenbu-sys-font-weight-bold);
351 text-decoration: underline; 479 text-decoration: underline;
352 text-underline-offset: 0.2em; 480 text-underline-offset: 0.2em;
353 } 481 }
354 482
355 .zen-notification-dismiss { 483 .zen-notification-dismiss {
356 width: 2rem; 484 width: 2rem;
357 height: 2rem; 485 height: 2rem;
358 padding: 0; 486 padding: 0;
359 border-radius: 50%; 487 border-radius: var(--zenbu-sys-radius-pill);
360 font-size: 1.25rem; 488 font-size: var(--zenbu-sys-font-size-xl);
361 } 489 }
362 490
363 .zen-notification-action:focus-visible, 491 .zen-notification-action:focus-visible,
364 .zen-notification-dismiss:focus-visible { 492 .zen-notification-dismiss:focus-visible {
365 outline: 3px solid var(--zen-color-focus); 493 outline: var(--zenbu-sys-focus-width) solid
366 outline-offset: 2px; 494 var(--zenbu-sys-color-focus-outer);
495 outline-offset: var(--zenbu-sys-focus-offset);
367 } 496 }
368 497
369 .zen-visually-hidden { 498 .zen-visually-hidden {
370 position: absolute; 499 position: absolute;
371 width: 1px; 500 width: 1px;