@kb.ui/tokens 0.0.0-stage → 0.10.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +38 -2
  2. package/dist/tokens.css +763 -0
  3. package/dist/tokens.d.ts +493 -0
  4. package/dist/tokens.js +493 -0
  5. package/package.json +26 -4
  6. package/tokens.json +1783 -0
package/dist/tokens.css ADDED
@@ -0,0 +1,763 @@
1
+ :where(:root) {
2
+ --kb-white: #ffffff;
3
+ --kb-black: #000000;
4
+ --kb-gray-50: #fafafa;
5
+ --kb-gray-100: #f4f4f5;
6
+ --kb-gray-200: #e4e4e7;
7
+ --kb-gray-300: #d4d4d8;
8
+ --kb-gray-400: #a1a1aa;
9
+ --kb-gray-500: #71717a;
10
+ --kb-gray-600: #52525b;
11
+ --kb-gray-700: #3f3f46;
12
+ --kb-gray-800: #27272a;
13
+ --kb-gray-900: #18181b;
14
+ --kb-gray-950: #09090b;
15
+ --kb-blue-400: #60a5fa;
16
+ --kb-blue-500: #3b82f6;
17
+ --kb-blue-600: #2563eb;
18
+ --kb-blue-700: #1d4ed8;
19
+ --kb-red-400: #f87171;
20
+ --kb-red-500: #ef4444;
21
+ --kb-red-600: #dc2626;
22
+ --kb-amber-400: #fbbf24;
23
+ --kb-amber-500: #f59e0b;
24
+ --kb-amber-600: #d97706;
25
+ --kb-amber-700: #b45309;
26
+ --kb-green-400: #4ade80;
27
+ --kb-green-500: #22c55e;
28
+ --kb-green-600: #16a34a;
29
+ --kb-green-700: #15803d;
30
+ --kb-teal-400: #2dd4bf;
31
+ --kb-teal-500: #14b8a6;
32
+ --kb-teal-600: #0d9488;
33
+ --kb-teal-700: #0f766e;
34
+ --kb-space-1: 0.25rem;
35
+ --kb-space-2: 0.5rem;
36
+ --kb-space-3: 0.75rem;
37
+ --kb-space-4: 1rem;
38
+ --kb-space-5: 1.25rem;
39
+ --kb-space-6: 1.5rem;
40
+ --kb-space-8: 2rem;
41
+ --kb-radius-sm: 0.25rem;
42
+ --kb-radius-md: 0.5rem;
43
+ --kb-radius-lg: 0.875rem;
44
+ --kb-radius-full: 9999px;
45
+ --kb-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
46
+ --kb-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
47
+ --kb-font-weight-regular: 400;
48
+ --kb-font-weight-medium: 500;
49
+ --kb-font-weight-strong: 600;
50
+ --kb-size-xs: 0.75rem;
51
+ --kb-size-sm: 0.875rem;
52
+ --kb-size-md: 1rem;
53
+ --kb-size-lg: 1.125rem;
54
+ --kb-size-display: 2.5rem;
55
+ --kb-motion-duration-fast: 80ms;
56
+ --kb-motion-duration-base: 160ms;
57
+ --kb-motion-duration-slow: 240ms;
58
+ --kb-motion-duration-theme: 220ms;
59
+ --kb-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
60
+ --kb-motion-easing-enter: cubic-bezier(0, 0, 0.2, 1);
61
+ --kb-motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);
62
+ --kb-motion-easing-smooth: ease;
63
+ --kb-color-bg: #f5f6f8;
64
+ --kb-color-fg: #242831;
65
+ --kb-color-muted: #5d6572;
66
+ --kb-color-surface: #e9ecf1;
67
+ --kb-color-border: #ccd1da;
68
+ --kb-color-accent: #ed5a24;
69
+ --kb-color-accent-hover: #ff753b;
70
+ --kb-color-accent-fg: #25160f;
71
+ --kb-color-danger: #a33444;
72
+ --kb-color-danger-hover: #852537;
73
+ --kb-color-danger-fg: #fffdf5;
74
+ --kb-color-info: #276c69;
75
+ --kb-color-info-fg: var(--kb-white);
76
+ --kb-color-success: #32654f;
77
+ --kb-color-success-fg: var(--kb-white);
78
+ --kb-color-warning: #875b13;
79
+ --kb-color-warning-fg: var(--kb-white);
80
+ --kb-color-ring: #ba421b;
81
+ --kb-color-overlay: rgb(0 0 0 / 0.5);
82
+ --kb-color-accent-ink: #b43c17;
83
+ --kb-color-action: var(--kb-color-accent);
84
+ --kb-color-action-hover: var(--kb-color-accent-hover);
85
+ --kb-color-action-fg: var(--kb-color-accent-fg);
86
+ --kb-viz-current: #2f5fa8;
87
+ --kb-viz-current-bg: #e3ebf7;
88
+ --kb-viz-current-fg: #1f3f73;
89
+ --kb-viz-visited: #276c69;
90
+ --kb-viz-visited-bg: #dcefe9;
91
+ --kb-viz-visited-fg: #1d4f4c;
92
+ --kb-viz-changed: var(--kb-color-warning);
93
+ --kb-viz-changed-bg: #f8e7c4;
94
+ --kb-viz-changed-fg: #5e3d08;
95
+ --kb-viz-error: var(--kb-color-danger);
96
+ --kb-viz-error-bg: #f6dfe0;
97
+ --kb-viz-error-fg: #7d2433;
98
+ --kb-viz-discarded: var(--kb-color-muted);
99
+ --kb-viz-discarded-bg: var(--kb-color-surface);
100
+ --kb-viz-discarded-fg: var(--kb-color-muted);
101
+ --kb-viz-frontier: var(--kb-viz-current);
102
+ --kb-viz-frontier-bg: var(--kb-viz-current-bg);
103
+ --kb-viz-frontier-fg: var(--kb-viz-current-fg);
104
+ --kb-viz-path: var(--kb-color-accent-ink);
105
+ --kb-viz-path-bg: #f6e0d6;
106
+ --kb-viz-path-fg: #7f2f1c;
107
+ --kb-card-background: var(--kb-material-surface-bg);
108
+ --kb-card-color: var(--kb-color-fg);
109
+ --kb-card-border: var(--kb-material-control-border);
110
+ --kb-card-border-width: 1px;
111
+ --kb-card-radius: var(--kb-radius-lg);
112
+ --kb-card-padding: 1.5rem;
113
+ --kb-card-padding-compact: 20px;
114
+ --kb-card-face: linear-gradient(180deg, var(--kb-material-action-sheen), transparent 60%);
115
+ --kb-card-shadow: var(--kb-material-raised-shadow), 0 4px 0 -1px color-mix(in srgb, var(--kb-material-control-border) 50%, var(--kb-color-bg)), 0 12px 24px -16px rgb(36 40 49 / 0.22);
116
+ --kb-grid-gap: var(--kb-space-6);
117
+ --kb-grid-min-item-width: 18.75rem;
118
+ --kb-button-radius: var(--kb-radius-md);
119
+ --kb-button-motion-duration: 140ms;
120
+ --kb-button-motion-easing: ease;
121
+ --kb-button-press-offset: 1px;
122
+ --kb-button-height-sm: 34px;
123
+ --kb-button-height-md: 40px;
124
+ --kb-button-height-lg: 46px;
125
+ --kb-button-padding-sm: 11px;
126
+ --kb-button-padding-md: 15px;
127
+ --kb-button-padding-lg: 20px;
128
+ --kb-button-icon-size: 1.125rem;
129
+ --kb-button-touch-min: 44px;
130
+ --kb-input-radius: var(--kb-radius-md);
131
+ --kb-input-height-sm: 2.25rem;
132
+ --kb-input-height-md: 2.75rem;
133
+ --kb-input-height-lg: 3rem;
134
+ --kb-input-gap: 7px;
135
+ --kb-numberfield-radius: var(--kb-input-radius);
136
+ --kb-numberfield-background: var(--kb-color-bg);
137
+ --kb-numberfield-color: var(--kb-color-fg);
138
+ --kb-numberfield-border: var(--kb-color-border);
139
+ --kb-numberfield-border-width: 1px;
140
+ --kb-numberfield-step-width: 3rem;
141
+ --kb-numberfield-font-size: var(--kb-size-md);
142
+ --kb-numberfield-height-sm: var(--kb-input-height-sm);
143
+ --kb-numberfield-height-md: var(--kb-input-height-md);
144
+ --kb-numberfield-height-lg: var(--kb-input-height-lg);
145
+ --kb-fileinput-radius: var(--kb-button-radius);
146
+ --kb-fileinput-action-height: var(--kb-input-height-lg);
147
+ --kb-fileinput-border-width: 1px;
148
+ --kb-dialog-radius: 1rem;
149
+ --kb-dialog-width: 28rem;
150
+ --kb-dialog-background: var(--kb-material-surface-bg);
151
+ --kb-dialog-color: var(--kb-color-fg);
152
+ --kb-dialog-border: var(--kb-color-border);
153
+ --kb-dialog-border-width: 1px;
154
+ --kb-dialog-padding: var(--kb-space-6);
155
+ --kb-dialog-shadow: var(--kb-material-float-shadow);
156
+ --kb-dialog-description-color: var(--kb-color-muted);
157
+ --kb-dialog-overlay-background: var(--kb-color-overlay);
158
+ --kb-dialog-motion-duration: 150ms;
159
+ --kb-dialog-motion-easing: ease;
160
+ --kb-dialog-enter-scale: 0.96;
161
+ --kb-dialog-enter-offset: 0px;
162
+ --kb-dialog-title-size: 23px;
163
+ --kb-dialog-title-family: inherit;
164
+ --kb-dialog-title-weight: var(--kb-font-weight-strong);
165
+ --kb-dialog-header-padding: 0px;
166
+ --kb-dialog-body-padding: 0px;
167
+ --kb-dialog-footer-padding: 0px;
168
+ --kb-panel-background: var(--kb-material-surface-bg);
169
+ --kb-panel-background-active: var(--kb-material-surface-bg);
170
+ --kb-panel-background-sunken: var(--kb-material-field-bg);
171
+ --kb-panel-border: var(--kb-color-border);
172
+ --kb-panel-border-active: var(--kb-color-accent);
173
+ --kb-panel-border-critical: var(--kb-color-danger);
174
+ --kb-panel-rim-top: var(--kb-material-raised-top);
175
+ --kb-panel-rim-bottom: var(--kb-color-border);
176
+ --kb-panel-seam: 1px;
177
+ --kb-panel-radius: var(--kb-radius-lg);
178
+ --kb-panel-highlight: transparent;
179
+ --kb-panel-divider: var(--kb-material-soft-border);
180
+ --kb-panel-sheen: transparent;
181
+ --kb-panel-backdrop: none;
182
+ --kb-panel-glow: transparent;
183
+ --kb-panel-glow-active: transparent;
184
+ --kb-panel-glow-critical: transparent;
185
+ --kb-panel-glow-blur: 12px;
186
+ --kb-panel-shadow: var(--kb-material-panel-shadow);
187
+ --kb-panel-shadow-active: var(--kb-material-raised-shadow);
188
+ --kb-panel-well: var(--kb-material-field-bg);
189
+ --kb-panel-well-radius: var(--kb-radius-md);
190
+ --kb-panel-well-shadow: var(--kb-material-field-shadow);
191
+ --kb-panel-padding: var(--kb-space-4);
192
+ --kb-panel-rail: var(--kb-color-border);
193
+ --kb-panel-rail-active: var(--kb-color-accent);
194
+ --kb-panel-title-size: 17px;
195
+ --kb-panel-toggle-height: 2rem;
196
+ --kb-panel-handle-size: var(--kb-space-3);
197
+ --kb-panel-handle-hit: 1.5rem;
198
+ --kb-panel-handle-grip: 2rem;
199
+ --kb-panel-handle-line-width: 2px;
200
+ --kb-panel-handle-line: var(--kb-color-border);
201
+ --kb-panel-handle-line-active: var(--kb-color-accent);
202
+ --kb-popup-motion-duration: var(--kb-motion-duration-fast);
203
+ --kb-popup-motion-easing: var(--kb-motion-easing-standard);
204
+ --kb-popup-background: var(--kb-material-surface-bg);
205
+ --kb-popup-border: var(--kb-color-border);
206
+ --kb-popup-radius: 0.625rem;
207
+ --kb-popup-shadow: var(--kb-material-float-shadow);
208
+ --kb-checkbox-size: 1.5rem;
209
+ --kb-progress-track: var(--kb-material-recessed-face);
210
+ --kb-progress-fill: var(--kb-color-accent);
211
+ --kb-progress-fill-complete: var(--kb-color-success);
212
+ --kb-progress-height: 6px;
213
+ --kb-progress-glow: 0px;
214
+ --kb-progress-radius: var(--kb-radius-full);
215
+ --kb-stat-display-size: var(--kb-size-display);
216
+ --kb-stat-display-weight: 600;
217
+ --kb-stat-gap: 10px;
218
+ --kb-stat-value-size: 24px;
219
+ --kb-status-neutral: var(--kb-color-muted);
220
+ --kb-status-info: var(--kb-color-info);
221
+ --kb-status-running: var(--kb-color-accent-ink);
222
+ --kb-status-success: var(--kb-color-success);
223
+ --kb-status-warning: var(--kb-color-warning);
224
+ --kb-status-blocked: var(--kb-color-danger);
225
+ --kb-status-radius: var(--kb-radius-full);
226
+ --kb-status-glow: 0px;
227
+ --kb-status-gap: 6px;
228
+ --kb-status-padding-block: 5px;
229
+ --kb-status-padding-inline: 9px;
230
+ --kb-status-compact-gap: var(--kb-space-1);
231
+ --kb-status-compact-padding-block: 3px;
232
+ --kb-status-compact-padding-inline: 6px;
233
+ --kb-status-compact-size: 11px;
234
+ --kb-status-dot-size: 5px;
235
+ --kb-material-chrome-bg: #242831;
236
+ --kb-material-chrome-fg: #f5f6f8;
237
+ --kb-material-chrome-muted: #c7cdd7;
238
+ --kb-material-field-bg: #f8f9fb;
239
+ --kb-material-control-border: #858e9d;
240
+ --kb-material-soft-border: #e0e4eb;
241
+ --kb-material-raised-top: #ffffff;
242
+ --kb-material-raised-bottom: #e9edf3;
243
+ --kb-material-raised-border: #858e9d;
244
+ --kb-material-raised-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -1px 0 rgb(36 40 49 / 0.06), 0 1px 2px rgb(26 34 48 / 0.12), 0 3px 5px -3px rgb(26 34 48 / 0.12);
245
+ --kb-material-pressed-shadow: inset 0 1px 3px rgb(36 40 49 / 0.16), inset 0 -1px 0 rgb(255 255 255 / 0.5);
246
+ --kb-material-accent-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), inset 0 -1px 0 rgb(36 40 49 / 0.14), 0 1px 2px rgb(36 40 49 / 0.14), 0 3px 5px -2px rgb(36 40 49 / 0.18);
247
+ --kb-material-panel-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -1px 0 rgb(36 40 49 / 0.035), 0 1px 2px rgb(26 34 48 / 0.12), 0 8px 24px -12px rgb(26 34 48 / 0.12);
248
+ --kb-material-field-shadow: inset 0 1px 2px rgb(36 40 49 / 0.1), inset 0 -1px 0 rgb(255 255 255 / 0.9), 0 1px 0 rgb(255 255 255 / 0.75);
249
+ --kb-material-inlay-shadow: inset 0 1px 0 rgb(255 255 255 / 0.65), inset 0 -1px 0 rgb(36 40 49 / 0.04), 0 1px 1px rgb(36 40 49 / 0.035);
250
+ --kb-material-float-shadow: inset 0 1px 0 rgb(255 255 255 / 0.95), 0 2px 5px rgb(36 40 49 / 0.14), 0 24px 64px -16px rgb(36 40 49 / 0.32);
251
+ --kb-material-action-sheen: rgb(255 255 255 / 0.08);
252
+ --kb-material-soft-sheen: rgb(255 255 255 / 0.1);
253
+ --kb-material-fill-sheen: rgb(255 255 255 / 0.25);
254
+ --kb-material-fill-highlight: rgb(255 255 255 / 0.3);
255
+ --kb-material-fill-shade: rgb(36 40 49 / 0.15);
256
+ --kb-material-raised-face: linear-gradient(180deg, var(--kb-material-raised-top), var(--kb-material-raised-bottom));
257
+ --kb-material-recessed-face: linear-gradient(180deg, color-mix(in srgb, var(--kb-material-field-bg) 96%, var(--kb-color-fg)), var(--kb-material-field-bg));
258
+ --kb-material-scroll-thumb-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 1px 2px rgb(0 0 0 / 0.18);
259
+ --kb-material-surface-bg: #ffffff;
260
+ --kb-text-body-size: 15px;
261
+ --kb-text-small-size: 13px;
262
+ --kb-text-control-size: 14px;
263
+ --kb-text-leading-body: 1.6;
264
+ --kb-text-leading-control: 1.4;
265
+ --kb-text-caption-size: 12px;
266
+ --kb-text-h1-size: 32px;
267
+ --kb-text-h2-size: 22px;
268
+ --kb-text-h3-size: 18px;
269
+ --kb-text-h4-size: 16px;
270
+ --kb-text-measure: 65ch;
271
+ --kb-text-muted: var(--kb-color-muted);
272
+ --kb-radiogroup-primary-background: var(--kb-color-action);
273
+ --kb-radiogroup-primary-color: var(--kb-color-action-fg);
274
+ --kb-radiogroup-gap: var(--kb-space-2);
275
+ --kb-radiogroup-size: 1.5rem;
276
+ --kb-select-popup-min-width: 10rem;
277
+ --kb-select-max-height: 20rem;
278
+ --kb-select-layer: 50;
279
+ --kb-combobox-popup-min-width: 12rem;
280
+ --kb-combobox-max-height: 20rem;
281
+ --kb-combobox-layer: 50;
282
+ --kb-combobox-action-size: 1.75rem;
283
+ --kb-multiselect-popup-min-width: 12rem;
284
+ --kb-multiselect-max-height: 20rem;
285
+ --kb-multiselect-layer: 50;
286
+ --kb-multiselect-chip-gap: var(--kb-space-1);
287
+ --kb-multiselect-chip-radius: var(--kb-radius-sm);
288
+ --kb-multiselect-action-size: 1.75rem;
289
+ --kb-switch-width: 44px;
290
+ --kb-switch-height: 24px;
291
+ --kb-switch-inset: 2px;
292
+ --kb-switch-sm-width: 36px;
293
+ --kb-switch-sm-height: 20px;
294
+ --kb-switch-sm-inset: 2px;
295
+ --kb-switch-sm-icon-size: 10px;
296
+ --kb-switch-md-width: var(--kb-switch-width);
297
+ --kb-switch-md-height: var(--kb-switch-height);
298
+ --kb-switch-md-inset: var(--kb-switch-inset);
299
+ --kb-switch-md-icon-size: var(--kb-switch-icon-size);
300
+ --kb-switch-lg-width: 56px;
301
+ --kb-switch-lg-height: 32px;
302
+ --kb-switch-lg-inset: 3px;
303
+ --kb-switch-lg-icon-size: 15px;
304
+ --kb-switch-radius: var(--kb-radius-full);
305
+ --kb-switch-track-background: var(--kb-material-recessed-face);
306
+ --kb-switch-track-border: var(--kb-material-raised-border);
307
+ --kb-switch-track-shadow: var(--kb-material-field-shadow);
308
+ --kb-switch-thumb-background: var(--kb-material-raised-face);
309
+ --kb-switch-thumb-border: var(--kb-material-raised-border);
310
+ --kb-switch-thumb-shadow: var(--kb-material-raised-shadow);
311
+ --kb-switch-icon-size: 12px;
312
+ --kb-switch-duration: 220ms;
313
+ --kb-badge-radius: 5px;
314
+ --kb-badge-padding-block: 0.125rem;
315
+ --kb-callout-radius: 10px;
316
+ --kb-callout-padding-block: var(--kb-space-4);
317
+ --kb-callout-padding-inline: 18px;
318
+ --kb-menu-min-width: 10rem;
319
+ --kb-menu-item-height: 40px;
320
+ --kb-scrollarea-radius: 10px;
321
+ --kb-scrollarea-padding: var(--kb-space-3);
322
+ --kb-toolbar-radius: 12px;
323
+ --kb-toolbar-padding: 6px;
324
+ --kb-tooltip-padding-block: var(--kb-space-2);
325
+ --kb-tooltip-padding-inline: var(--kb-space-3);
326
+ --kb-heading-size-sm: var(--kb-text-h4-size);
327
+ --kb-heading-size-md: var(--kb-text-h3-size);
328
+ --kb-heading-size-lg: var(--kb-text-h2-size);
329
+ --kb-heading-size-xl: var(--kb-text-h1-size);
330
+ --kb-heading-size-display: var(--kb-size-display);
331
+ --kb-heading-weight: var(--kb-font-weight-strong);
332
+ --kb-heading-leading: 1.25;
333
+ --kb-heading-tracking: -0.025em;
334
+ --kb-link-color: var(--kb-color-accent-ink);
335
+ --kb-link-hover: var(--kb-color-fg);
336
+ --kb-link-underline-offset: 0.18em;
337
+ --kb-code-size: max(var(--kb-text-small-size), 0.875em);
338
+ --kb-code-background: var(--kb-color-surface);
339
+ --kb-code-border: var(--kb-color-border);
340
+ --kb-code-radius: var(--kb-radius-sm);
341
+ --kb-container-size-sm: 40rem;
342
+ --kb-container-size-md: 64rem;
343
+ --kb-container-size-lg: 80rem;
344
+ --kb-container-gutter: clamp(1rem, 4vw, 2rem);
345
+ --kb-layout-gap-sm: var(--kb-space-2);
346
+ --kb-layout-gap-md: var(--kb-space-4);
347
+ --kb-layout-gap-lg: var(--kb-space-6);
348
+ --kb-split-collapse-sm: 32rem;
349
+ --kb-split-collapse-md: 48rem;
350
+ --kb-split-collapse-lg: 64rem;
351
+ --kb-separator-color: var(--kb-color-border);
352
+ --kb-separator-width: 1px;
353
+ --kb-separator-min-length: var(--kb-space-4);
354
+ --kb-textarea-min-height: 6rem;
355
+ --kb-textarea-padding-block: var(--kb-space-2);
356
+ --kb-textarea-padding-inline: var(--kb-space-3);
357
+ --kb-fieldset-gap: var(--kb-space-3);
358
+ --kb-fieldset-fields-gap: var(--kb-space-4);
359
+ --kb-fieldset-legend-size: var(--kb-text-h4-size);
360
+ --kb-formactions-gap: var(--kb-space-2);
361
+ --kb-formactions-padding-top: var(--kb-space-4);
362
+ --kb-errorsummary-padding: var(--kb-space-4);
363
+ --kb-errorsummary-radius: var(--kb-radius-md);
364
+ --kb-errorsummary-gap: var(--kb-space-2);
365
+ color-scheme: light;
366
+ }
367
+
368
+ :where([data-theme="light"]) {
369
+ --kb-color-bg: #f5f6f8;
370
+ --kb-color-fg: #242831;
371
+ --kb-color-muted: #5d6572;
372
+ --kb-color-surface: #e9ecf1;
373
+ --kb-color-border: #ccd1da;
374
+ --kb-color-accent: #ed5a24;
375
+ --kb-color-accent-hover: #ff753b;
376
+ --kb-color-accent-fg: #25160f;
377
+ --kb-color-danger: #a33444;
378
+ --kb-color-danger-hover: #852537;
379
+ --kb-color-danger-fg: #fffdf5;
380
+ --kb-color-info: #276c69;
381
+ --kb-color-info-fg: var(--kb-white);
382
+ --kb-color-success: #32654f;
383
+ --kb-color-success-fg: var(--kb-white);
384
+ --kb-color-warning: #875b13;
385
+ --kb-color-warning-fg: var(--kb-white);
386
+ --kb-color-ring: #ba421b;
387
+ --kb-color-overlay: rgb(0 0 0 / 0.5);
388
+ --kb-color-accent-ink: #b43c17;
389
+ --kb-color-action: var(--kb-color-accent);
390
+ --kb-color-action-hover: var(--kb-color-accent-hover);
391
+ --kb-color-action-fg: var(--kb-color-accent-fg);
392
+ --kb-viz-current: #2f5fa8;
393
+ --kb-viz-current-bg: #e3ebf7;
394
+ --kb-viz-current-fg: #1f3f73;
395
+ --kb-viz-visited: #276c69;
396
+ --kb-viz-visited-bg: #dcefe9;
397
+ --kb-viz-visited-fg: #1d4f4c;
398
+ --kb-viz-changed: var(--kb-color-warning);
399
+ --kb-viz-changed-bg: #f8e7c4;
400
+ --kb-viz-changed-fg: #5e3d08;
401
+ --kb-viz-error: var(--kb-color-danger);
402
+ --kb-viz-error-bg: #f6dfe0;
403
+ --kb-viz-error-fg: #7d2433;
404
+ --kb-viz-discarded: var(--kb-color-muted);
405
+ --kb-viz-discarded-bg: var(--kb-color-surface);
406
+ --kb-viz-discarded-fg: var(--kb-color-muted);
407
+ --kb-viz-frontier: var(--kb-viz-current);
408
+ --kb-viz-frontier-bg: var(--kb-viz-current-bg);
409
+ --kb-viz-frontier-fg: var(--kb-viz-current-fg);
410
+ --kb-viz-path: var(--kb-color-accent-ink);
411
+ --kb-viz-path-bg: #f6e0d6;
412
+ --kb-viz-path-fg: #7f2f1c;
413
+ --kb-card-background: var(--kb-material-surface-bg);
414
+ --kb-card-color: var(--kb-color-fg);
415
+ --kb-card-border: var(--kb-material-control-border);
416
+ --kb-card-shadow: var(--kb-material-raised-shadow), 0 4px 0 -1px color-mix(in srgb, var(--kb-material-control-border) 50%, var(--kb-color-bg)), 0 12px 24px -16px rgb(36 40 49 / 0.22);
417
+ --kb-numberfield-background: var(--kb-color-bg);
418
+ --kb-numberfield-color: var(--kb-color-fg);
419
+ --kb-numberfield-border: var(--kb-color-border);
420
+ --kb-dialog-background: var(--kb-material-surface-bg);
421
+ --kb-dialog-color: var(--kb-color-fg);
422
+ --kb-dialog-border: var(--kb-color-border);
423
+ --kb-dialog-shadow: var(--kb-material-float-shadow);
424
+ --kb-dialog-description-color: var(--kb-color-muted);
425
+ --kb-dialog-overlay-background: var(--kb-color-overlay);
426
+ --kb-panel-background: var(--kb-material-surface-bg);
427
+ --kb-panel-background-active: var(--kb-material-surface-bg);
428
+ --kb-panel-background-sunken: var(--kb-material-field-bg);
429
+ --kb-panel-border: var(--kb-color-border);
430
+ --kb-panel-border-active: var(--kb-color-accent);
431
+ --kb-panel-border-critical: var(--kb-color-danger);
432
+ --kb-panel-rim-top: var(--kb-material-raised-top);
433
+ --kb-panel-rim-bottom: var(--kb-color-border);
434
+ --kb-panel-divider: var(--kb-material-soft-border);
435
+ --kb-panel-shadow: var(--kb-material-panel-shadow);
436
+ --kb-panel-shadow-active: var(--kb-material-raised-shadow);
437
+ --kb-panel-well: var(--kb-material-field-bg);
438
+ --kb-panel-well-shadow: var(--kb-material-field-shadow);
439
+ --kb-panel-rail: var(--kb-color-border);
440
+ --kb-panel-rail-active: var(--kb-color-accent);
441
+ --kb-panel-handle-line: var(--kb-color-border);
442
+ --kb-panel-handle-line-active: var(--kb-color-accent);
443
+ --kb-popup-background: var(--kb-material-surface-bg);
444
+ --kb-popup-border: var(--kb-color-border);
445
+ --kb-popup-shadow: var(--kb-material-float-shadow);
446
+ --kb-progress-track: var(--kb-material-recessed-face);
447
+ --kb-progress-fill: var(--kb-color-accent);
448
+ --kb-progress-fill-complete: var(--kb-color-success);
449
+ --kb-status-neutral: var(--kb-color-muted);
450
+ --kb-status-info: var(--kb-color-info);
451
+ --kb-status-running: var(--kb-color-accent-ink);
452
+ --kb-status-success: var(--kb-color-success);
453
+ --kb-status-warning: var(--kb-color-warning);
454
+ --kb-status-blocked: var(--kb-color-danger);
455
+ --kb-material-chrome-bg: #242831;
456
+ --kb-material-chrome-fg: #f5f6f8;
457
+ --kb-material-chrome-muted: #c7cdd7;
458
+ --kb-material-field-bg: #f8f9fb;
459
+ --kb-material-control-border: #858e9d;
460
+ --kb-material-soft-border: #e0e4eb;
461
+ --kb-material-raised-top: #ffffff;
462
+ --kb-material-raised-bottom: #e9edf3;
463
+ --kb-material-raised-border: #858e9d;
464
+ --kb-material-raised-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -1px 0 rgb(36 40 49 / 0.06), 0 1px 2px rgb(26 34 48 / 0.12), 0 3px 5px -3px rgb(26 34 48 / 0.12);
465
+ --kb-material-pressed-shadow: inset 0 1px 3px rgb(36 40 49 / 0.16), inset 0 -1px 0 rgb(255 255 255 / 0.5);
466
+ --kb-material-accent-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), inset 0 -1px 0 rgb(36 40 49 / 0.14), 0 1px 2px rgb(36 40 49 / 0.14), 0 3px 5px -2px rgb(36 40 49 / 0.18);
467
+ --kb-material-panel-shadow: inset 0 1px 0 rgb(255 255 255 / 0.9), inset 0 -1px 0 rgb(36 40 49 / 0.035), 0 1px 2px rgb(26 34 48 / 0.12), 0 8px 24px -12px rgb(26 34 48 / 0.12);
468
+ --kb-material-field-shadow: inset 0 1px 2px rgb(36 40 49 / 0.1), inset 0 -1px 0 rgb(255 255 255 / 0.9), 0 1px 0 rgb(255 255 255 / 0.75);
469
+ --kb-material-inlay-shadow: inset 0 1px 0 rgb(255 255 255 / 0.65), inset 0 -1px 0 rgb(36 40 49 / 0.04), 0 1px 1px rgb(36 40 49 / 0.035);
470
+ --kb-material-float-shadow: inset 0 1px 0 rgb(255 255 255 / 0.95), 0 2px 5px rgb(36 40 49 / 0.14), 0 24px 64px -16px rgb(36 40 49 / 0.32);
471
+ --kb-material-raised-face: linear-gradient(180deg, var(--kb-material-raised-top), var(--kb-material-raised-bottom));
472
+ --kb-material-recessed-face: linear-gradient(180deg, color-mix(in srgb, var(--kb-material-field-bg) 96%, var(--kb-color-fg)), var(--kb-material-field-bg));
473
+ --kb-material-surface-bg: #ffffff;
474
+ --kb-text-muted: var(--kb-color-muted);
475
+ --kb-radiogroup-primary-background: var(--kb-color-action);
476
+ --kb-radiogroup-primary-color: var(--kb-color-action-fg);
477
+ --kb-switch-track-background: var(--kb-material-recessed-face);
478
+ --kb-switch-track-border: var(--kb-material-raised-border);
479
+ --kb-switch-track-shadow: var(--kb-material-field-shadow);
480
+ --kb-switch-thumb-background: var(--kb-material-raised-face);
481
+ --kb-switch-thumb-border: var(--kb-material-raised-border);
482
+ --kb-switch-thumb-shadow: var(--kb-material-raised-shadow);
483
+ --kb-link-color: var(--kb-color-accent-ink);
484
+ --kb-link-hover: var(--kb-color-fg);
485
+ --kb-code-background: var(--kb-color-surface);
486
+ --kb-code-border: var(--kb-color-border);
487
+ --kb-separator-color: var(--kb-color-border);
488
+ color-scheme: light;
489
+ }
490
+
491
+ :where([data-theme="dark"]) {
492
+ --kb-color-bg: #17191d;
493
+ --kb-color-fg: #f2f4f8;
494
+ --kb-color-muted: #b9bfca;
495
+ --kb-color-surface: #1e2229;
496
+ --kb-color-border: #4b525e;
497
+ --kb-color-accent: #ff8457;
498
+ --kb-color-accent-hover: #ffa17f;
499
+ --kb-color-accent-fg: #28150e;
500
+ --kb-color-danger: #ff9f9f;
501
+ --kb-color-danger-hover: #ffc6c6;
502
+ --kb-color-danger-fg: #331c20;
503
+ --kb-color-info: #a2c7eb;
504
+ --kb-color-info-fg: var(--kb-gray-950);
505
+ --kb-color-success: #a5c9b3;
506
+ --kb-color-success-fg: var(--kb-gray-950);
507
+ --kb-color-warning: #e5c477;
508
+ --kb-color-warning-fg: var(--kb-gray-950);
509
+ --kb-color-ring: #ff8457;
510
+ --kb-color-overlay: rgb(0 0 0 / 0.7);
511
+ --kb-color-accent-ink: #ffa17f;
512
+ --kb-color-action: #b54517;
513
+ --kb-color-action-hover: #9e3915;
514
+ --kb-color-action-fg: var(--kb-white);
515
+ --kb-viz-current: #8fb4f0;
516
+ --kb-viz-current-bg: #1e2c44;
517
+ --kb-viz-current-fg: #c9dbfa;
518
+ --kb-viz-visited: #7cc9bf;
519
+ --kb-viz-visited-bg: #173431;
520
+ --kb-viz-visited-fg: #b9e6df;
521
+ --kb-viz-changed: var(--kb-color-warning);
522
+ --kb-viz-changed-bg: #3a2e14;
523
+ --kb-viz-changed-fg: #f2dca6;
524
+ --kb-viz-error: var(--kb-color-danger);
525
+ --kb-viz-error-bg: #3d1f24;
526
+ --kb-viz-error-fg: #ffc6c6;
527
+ --kb-viz-discarded: var(--kb-color-muted);
528
+ --kb-viz-discarded-bg: var(--kb-color-surface);
529
+ --kb-viz-discarded-fg: var(--kb-color-muted);
530
+ --kb-viz-frontier: var(--kb-viz-current);
531
+ --kb-viz-frontier-bg: var(--kb-viz-current-bg);
532
+ --kb-viz-frontier-fg: var(--kb-viz-current-fg);
533
+ --kb-viz-path: var(--kb-color-accent-ink);
534
+ --kb-viz-path-bg: #3a2219;
535
+ --kb-viz-path-fg: #ffc0a6;
536
+ --kb-card-background: var(--kb-material-surface-bg);
537
+ --kb-card-color: var(--kb-color-fg);
538
+ --kb-card-border: var(--kb-material-control-border);
539
+ --kb-card-shadow: var(--kb-material-raised-shadow), 0 4px 0 -1px color-mix(in srgb, var(--kb-material-control-border) 50%, var(--kb-color-bg)), 0 12px 24px -16px rgb(0 0 0 / 0.55);
540
+ --kb-numberfield-background: var(--kb-color-bg);
541
+ --kb-numberfield-color: var(--kb-color-fg);
542
+ --kb-numberfield-border: var(--kb-color-border);
543
+ --kb-dialog-background: var(--kb-material-surface-bg);
544
+ --kb-dialog-color: var(--kb-color-fg);
545
+ --kb-dialog-border: var(--kb-color-border);
546
+ --kb-dialog-shadow: var(--kb-material-float-shadow);
547
+ --kb-dialog-description-color: var(--kb-color-muted);
548
+ --kb-dialog-overlay-background: var(--kb-color-overlay);
549
+ --kb-panel-background: var(--kb-material-surface-bg);
550
+ --kb-panel-background-active: var(--kb-material-surface-bg);
551
+ --kb-panel-background-sunken: var(--kb-material-field-bg);
552
+ --kb-panel-border: var(--kb-color-border);
553
+ --kb-panel-border-active: var(--kb-color-accent);
554
+ --kb-panel-border-critical: var(--kb-color-danger);
555
+ --kb-panel-rim-top: var(--kb-material-raised-top);
556
+ --kb-panel-rim-bottom: var(--kb-color-border);
557
+ --kb-panel-divider: var(--kb-material-soft-border);
558
+ --kb-panel-shadow: var(--kb-material-panel-shadow);
559
+ --kb-panel-shadow-active: var(--kb-material-raised-shadow);
560
+ --kb-panel-well: var(--kb-material-field-bg);
561
+ --kb-panel-well-shadow: var(--kb-material-field-shadow);
562
+ --kb-panel-rail: var(--kb-color-border);
563
+ --kb-panel-rail-active: var(--kb-color-accent);
564
+ --kb-panel-handle-line: var(--kb-color-border);
565
+ --kb-panel-handle-line-active: var(--kb-color-accent);
566
+ --kb-popup-background: var(--kb-material-surface-bg);
567
+ --kb-popup-border: var(--kb-color-border);
568
+ --kb-popup-shadow: var(--kb-material-float-shadow);
569
+ --kb-progress-track: var(--kb-material-recessed-face);
570
+ --kb-progress-fill: var(--kb-color-accent);
571
+ --kb-progress-fill-complete: var(--kb-color-success);
572
+ --kb-status-neutral: var(--kb-color-muted);
573
+ --kb-status-info: var(--kb-color-info);
574
+ --kb-status-running: var(--kb-color-accent-ink);
575
+ --kb-status-success: var(--kb-color-success);
576
+ --kb-status-warning: var(--kb-color-warning);
577
+ --kb-status-blocked: var(--kb-color-danger);
578
+ --kb-material-chrome-bg: #101318;
579
+ --kb-material-chrome-fg: var(--kb-color-fg);
580
+ --kb-material-chrome-muted: var(--kb-color-muted);
581
+ --kb-material-field-bg: #14181e;
582
+ --kb-material-control-border: #8b95a6;
583
+ --kb-material-soft-border: #353d49;
584
+ --kb-material-raised-top: #3b424f;
585
+ --kb-material-raised-bottom: #2a303b;
586
+ --kb-material-raised-border: #8b95a6;
587
+ --kb-material-raised-shadow: inset 0 1px 0 rgb(232 239 255 / 0.12), inset 0 -1px 0 rgb(0 0 0 / 0.22), 0 1px 2px rgb(0 0 0 / 0.35), 0 3px 5px -3px rgb(0 0 0 / 0.35);
588
+ --kb-material-pressed-shadow: inset 0 2px 3px rgb(0 0 0 / 0.5), inset 0 -1px 0 rgb(255 255 255 / 0.1);
589
+ --kb-material-accent-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 -1px 0 rgb(0 0 0 / 0.2), 0 1px 2px rgb(0 0 0 / 0.35), 0 3px 5px -2px rgb(0 0 0 / 0.45);
590
+ --kb-material-panel-shadow: inset 0 1px 0 rgb(232 239 255 / 0.12), inset 0 -1px 0 rgb(0 0 0 / 0.22), 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px -12px rgb(0 0 0 / 0.35);
591
+ --kb-material-field-shadow: inset 0 2px 3px rgb(0 0 0 / 0.45), inset 0 -1px 0 rgb(255 255 255 / 0.1), 0 1px 0 rgb(255 255 255 / 0.07);
592
+ --kb-material-inlay-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), inset 0 -1px 0 rgb(0 0 0 / 0.15), 0 1px 1px rgb(0 0 0 / 0.18);
593
+ --kb-material-float-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 2px 5px rgb(0 0 0 / 0.4), 0 24px 64px -16px rgb(0 0 0 / 0.65);
594
+ --kb-material-raised-face: linear-gradient(180deg, var(--kb-material-raised-top), var(--kb-material-raised-bottom));
595
+ --kb-material-recessed-face: linear-gradient(180deg, color-mix(in srgb, var(--kb-material-field-bg) 65%, var(--kb-material-chrome-bg)), var(--kb-material-field-bg));
596
+ --kb-material-surface-bg: #252931;
597
+ --kb-text-muted: var(--kb-color-muted);
598
+ --kb-radiogroup-primary-background: var(--kb-color-action);
599
+ --kb-radiogroup-primary-color: var(--kb-color-action-fg);
600
+ --kb-switch-track-background: var(--kb-material-recessed-face);
601
+ --kb-switch-track-border: var(--kb-material-raised-border);
602
+ --kb-switch-track-shadow: var(--kb-material-field-shadow);
603
+ --kb-switch-thumb-background: var(--kb-material-raised-face);
604
+ --kb-switch-thumb-border: var(--kb-material-raised-border);
605
+ --kb-switch-thumb-shadow: var(--kb-material-raised-shadow);
606
+ --kb-link-color: var(--kb-color-accent-ink);
607
+ --kb-link-hover: var(--kb-color-fg);
608
+ --kb-code-background: var(--kb-color-surface);
609
+ --kb-code-border: var(--kb-color-border);
610
+ --kb-separator-color: var(--kb-color-border);
611
+ color-scheme: dark;
612
+ }
613
+
614
+ @media (prefers-color-scheme: dark) {
615
+ :where(:root:not([data-theme="light"])) {
616
+ --kb-color-bg: #17191d;
617
+ --kb-color-fg: #f2f4f8;
618
+ --kb-color-muted: #b9bfca;
619
+ --kb-color-surface: #1e2229;
620
+ --kb-color-border: #4b525e;
621
+ --kb-color-accent: #ff8457;
622
+ --kb-color-accent-hover: #ffa17f;
623
+ --kb-color-accent-fg: #28150e;
624
+ --kb-color-danger: #ff9f9f;
625
+ --kb-color-danger-hover: #ffc6c6;
626
+ --kb-color-danger-fg: #331c20;
627
+ --kb-color-info: #a2c7eb;
628
+ --kb-color-info-fg: var(--kb-gray-950);
629
+ --kb-color-success: #a5c9b3;
630
+ --kb-color-success-fg: var(--kb-gray-950);
631
+ --kb-color-warning: #e5c477;
632
+ --kb-color-warning-fg: var(--kb-gray-950);
633
+ --kb-color-ring: #ff8457;
634
+ --kb-color-overlay: rgb(0 0 0 / 0.7);
635
+ --kb-color-accent-ink: #ffa17f;
636
+ --kb-color-action: #b54517;
637
+ --kb-color-action-hover: #9e3915;
638
+ --kb-color-action-fg: var(--kb-white);
639
+ --kb-viz-current: #8fb4f0;
640
+ --kb-viz-current-bg: #1e2c44;
641
+ --kb-viz-current-fg: #c9dbfa;
642
+ --kb-viz-visited: #7cc9bf;
643
+ --kb-viz-visited-bg: #173431;
644
+ --kb-viz-visited-fg: #b9e6df;
645
+ --kb-viz-changed: var(--kb-color-warning);
646
+ --kb-viz-changed-bg: #3a2e14;
647
+ --kb-viz-changed-fg: #f2dca6;
648
+ --kb-viz-error: var(--kb-color-danger);
649
+ --kb-viz-error-bg: #3d1f24;
650
+ --kb-viz-error-fg: #ffc6c6;
651
+ --kb-viz-discarded: var(--kb-color-muted);
652
+ --kb-viz-discarded-bg: var(--kb-color-surface);
653
+ --kb-viz-discarded-fg: var(--kb-color-muted);
654
+ --kb-viz-frontier: var(--kb-viz-current);
655
+ --kb-viz-frontier-bg: var(--kb-viz-current-bg);
656
+ --kb-viz-frontier-fg: var(--kb-viz-current-fg);
657
+ --kb-viz-path: var(--kb-color-accent-ink);
658
+ --kb-viz-path-bg: #3a2219;
659
+ --kb-viz-path-fg: #ffc0a6;
660
+ --kb-card-background: var(--kb-material-surface-bg);
661
+ --kb-card-color: var(--kb-color-fg);
662
+ --kb-card-border: var(--kb-material-control-border);
663
+ --kb-card-shadow: var(--kb-material-raised-shadow), 0 4px 0 -1px color-mix(in srgb, var(--kb-material-control-border) 50%, var(--kb-color-bg)), 0 12px 24px -16px rgb(0 0 0 / 0.55);
664
+ --kb-numberfield-background: var(--kb-color-bg);
665
+ --kb-numberfield-color: var(--kb-color-fg);
666
+ --kb-numberfield-border: var(--kb-color-border);
667
+ --kb-dialog-background: var(--kb-material-surface-bg);
668
+ --kb-dialog-color: var(--kb-color-fg);
669
+ --kb-dialog-border: var(--kb-color-border);
670
+ --kb-dialog-shadow: var(--kb-material-float-shadow);
671
+ --kb-dialog-description-color: var(--kb-color-muted);
672
+ --kb-dialog-overlay-background: var(--kb-color-overlay);
673
+ --kb-panel-background: var(--kb-material-surface-bg);
674
+ --kb-panel-background-active: var(--kb-material-surface-bg);
675
+ --kb-panel-background-sunken: var(--kb-material-field-bg);
676
+ --kb-panel-border: var(--kb-color-border);
677
+ --kb-panel-border-active: var(--kb-color-accent);
678
+ --kb-panel-border-critical: var(--kb-color-danger);
679
+ --kb-panel-rim-top: var(--kb-material-raised-top);
680
+ --kb-panel-rim-bottom: var(--kb-color-border);
681
+ --kb-panel-divider: var(--kb-material-soft-border);
682
+ --kb-panel-shadow: var(--kb-material-panel-shadow);
683
+ --kb-panel-shadow-active: var(--kb-material-raised-shadow);
684
+ --kb-panel-well: var(--kb-material-field-bg);
685
+ --kb-panel-well-shadow: var(--kb-material-field-shadow);
686
+ --kb-panel-rail: var(--kb-color-border);
687
+ --kb-panel-rail-active: var(--kb-color-accent);
688
+ --kb-panel-handle-line: var(--kb-color-border);
689
+ --kb-panel-handle-line-active: var(--kb-color-accent);
690
+ --kb-popup-background: var(--kb-material-surface-bg);
691
+ --kb-popup-border: var(--kb-color-border);
692
+ --kb-popup-shadow: var(--kb-material-float-shadow);
693
+ --kb-progress-track: var(--kb-material-recessed-face);
694
+ --kb-progress-fill: var(--kb-color-accent);
695
+ --kb-progress-fill-complete: var(--kb-color-success);
696
+ --kb-status-neutral: var(--kb-color-muted);
697
+ --kb-status-info: var(--kb-color-info);
698
+ --kb-status-running: var(--kb-color-accent-ink);
699
+ --kb-status-success: var(--kb-color-success);
700
+ --kb-status-warning: var(--kb-color-warning);
701
+ --kb-status-blocked: var(--kb-color-danger);
702
+ --kb-material-chrome-bg: #101318;
703
+ --kb-material-chrome-fg: var(--kb-color-fg);
704
+ --kb-material-chrome-muted: var(--kb-color-muted);
705
+ --kb-material-field-bg: #14181e;
706
+ --kb-material-control-border: #8b95a6;
707
+ --kb-material-soft-border: #353d49;
708
+ --kb-material-raised-top: #3b424f;
709
+ --kb-material-raised-bottom: #2a303b;
710
+ --kb-material-raised-border: #8b95a6;
711
+ --kb-material-raised-shadow: inset 0 1px 0 rgb(232 239 255 / 0.12), inset 0 -1px 0 rgb(0 0 0 / 0.22), 0 1px 2px rgb(0 0 0 / 0.35), 0 3px 5px -3px rgb(0 0 0 / 0.35);
712
+ --kb-material-pressed-shadow: inset 0 2px 3px rgb(0 0 0 / 0.5), inset 0 -1px 0 rgb(255 255 255 / 0.1);
713
+ --kb-material-accent-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 -1px 0 rgb(0 0 0 / 0.2), 0 1px 2px rgb(0 0 0 / 0.35), 0 3px 5px -2px rgb(0 0 0 / 0.45);
714
+ --kb-material-panel-shadow: inset 0 1px 0 rgb(232 239 255 / 0.12), inset 0 -1px 0 rgb(0 0 0 / 0.22), 0 1px 2px rgb(0 0 0 / 0.35), 0 8px 24px -12px rgb(0 0 0 / 0.35);
715
+ --kb-material-field-shadow: inset 0 2px 3px rgb(0 0 0 / 0.45), inset 0 -1px 0 rgb(255 255 255 / 0.1), 0 1px 0 rgb(255 255 255 / 0.07);
716
+ --kb-material-inlay-shadow: inset 0 1px 0 rgb(255 255 255 / 0.07), inset 0 -1px 0 rgb(0 0 0 / 0.15), 0 1px 1px rgb(0 0 0 / 0.18);
717
+ --kb-material-float-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 2px 5px rgb(0 0 0 / 0.4), 0 24px 64px -16px rgb(0 0 0 / 0.65);
718
+ --kb-material-raised-face: linear-gradient(180deg, var(--kb-material-raised-top), var(--kb-material-raised-bottom));
719
+ --kb-material-recessed-face: linear-gradient(180deg, color-mix(in srgb, var(--kb-material-field-bg) 65%, var(--kb-material-chrome-bg)), var(--kb-material-field-bg));
720
+ --kb-material-surface-bg: #252931;
721
+ --kb-text-muted: var(--kb-color-muted);
722
+ --kb-radiogroup-primary-background: var(--kb-color-action);
723
+ --kb-radiogroup-primary-color: var(--kb-color-action-fg);
724
+ --kb-switch-track-background: var(--kb-material-recessed-face);
725
+ --kb-switch-track-border: var(--kb-material-raised-border);
726
+ --kb-switch-track-shadow: var(--kb-material-field-shadow);
727
+ --kb-switch-thumb-background: var(--kb-material-raised-face);
728
+ --kb-switch-thumb-border: var(--kb-material-raised-border);
729
+ --kb-switch-thumb-shadow: var(--kb-material-raised-shadow);
730
+ --kb-link-color: var(--kb-color-accent-ink);
731
+ --kb-link-hover: var(--kb-color-fg);
732
+ --kb-code-background: var(--kb-color-surface);
733
+ --kb-code-border: var(--kb-color-border);
734
+ --kb-separator-color: var(--kb-color-border);
735
+ color-scheme: dark;
736
+ }
737
+ }
738
+
739
+ @media (forced-colors: active) {
740
+ :where(:root, [data-theme]) {
741
+ --kb-viz-current: Highlight;
742
+ --kb-viz-current-bg: Highlight;
743
+ --kb-viz-current-fg: HighlightText;
744
+ --kb-viz-visited: LinkText;
745
+ --kb-viz-visited-bg: Canvas;
746
+ --kb-viz-visited-fg: LinkText;
747
+ --kb-viz-changed: CanvasText;
748
+ --kb-viz-changed-bg: Mark;
749
+ --kb-viz-changed-fg: MarkText;
750
+ --kb-viz-error: CanvasText;
751
+ --kb-viz-error-bg: Canvas;
752
+ --kb-viz-error-fg: CanvasText;
753
+ --kb-viz-discarded: GrayText;
754
+ --kb-viz-discarded-bg: Canvas;
755
+ --kb-viz-discarded-fg: GrayText;
756
+ --kb-viz-frontier: LinkText;
757
+ --kb-viz-frontier-bg: Canvas;
758
+ --kb-viz-frontier-fg: LinkText;
759
+ --kb-viz-path: CanvasText;
760
+ --kb-viz-path-bg: Canvas;
761
+ --kb-viz-path-fg: CanvasText;
762
+ }
763
+ }