@crewlethq/tokens 0.2.0 → 0.4.0

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 (17) hide show
  1. package/README.md +153 -20
  2. package/dist/css/base.css +194 -0
  3. package/dist/css/breakpoint.css +18 -0
  4. package/dist/css/density.css +23 -0
  5. package/dist/css/legacy.css +4 -6
  6. package/dist/css/material-symbols.css +5 -3
  7. package/dist/css/themes.css +338 -38
  8. package/dist/css/tokens.css +152 -38
  9. package/dist/index.d.ts +152 -12
  10. package/dist/index.js +152 -13
  11. package/dist/themes.d.ts +274 -0
  12. package/dist/themes.js +274 -0
  13. package/package.json +17 -5
  14. package/test/color.mjs +262 -0
  15. package/test/palette.d.mts +77 -0
  16. package/test/palette.mjs +867 -0
  17. package/test/palette.test.mjs +55 -0
package/dist/css/themes.css CHANGED
@@ -1,15 +1,250 @@
1
- /* Generated by style-dictionary. Dark and light theme overrides for the
2
- canonical --color-* tokens. The base tokens.css already emits the dark
3
- palette at :root; this file repaints the slots that change between
4
- themes (the brand accent family is the same in both and is not
5
- repainted). Import this in addition to tokens.css when an app needs
6
- runtime theme switching:
1
+ /* Generated by style-dictionary. The light and dark palettes, as a
2
+ three-state contract on the root element. Import it after tokens.css:
7
3
  import '@crewlethq/tokens/css';
8
4
  import '@crewlethq/tokens/css/themes';
9
- Apply by toggling body.theme-light or body.theme-dark. */
10
5
 
11
- /* Dark theme. Opaque surface ramp with a white primary action. */
12
- body.theme-dark {
6
+ A document with no data-theme attribute is light, or dark if its system
7
+ asks for dark. Setting data-theme="light" or data-theme="dark" on
8
+ <html> pins one, and wins in both directions. Remove the attribute to
9
+ follow the system again. Both dark blocks are generated from one source. */
10
+
11
+ /* Light. The default, on the bare root, so a document that sets nothing gets
12
+ a complete palette. */
13
+ :root {
14
+ color-scheme: light;
15
+
16
+ --color-surface-background: #ffffff;
17
+ --color-surface-subtle: #f4f4f5;
18
+ --color-surface-muted: #f4f4f5;
19
+ --color-surface-elevated: #ebebee;
20
+ --color-surface-topbar: #ffffff;
21
+ --color-surface-topbar-lift: #f4f4f5;
22
+ --color-surface-topbar-active: #ebebee;
23
+ --color-surface-hover: rgba(9, 9, 11, 0.04);
24
+ --color-surface-pressed: rgba(9, 9, 11, 0.07);
25
+ --color-surface-inset: rgba(9, 9, 11, 0.05);
26
+ --color-surface-glass: rgba(244, 244, 245, 0.90);
27
+ --color-surface-scrim: rgba(0, 0, 0, 0.6);
28
+ --color-surface-veil: rgba(255, 255, 255, 0.72);
29
+ --color-surface-inverse: #09090b;
30
+ --color-text-primary: #09090b;
31
+ --color-text-secondary: #52525b;
32
+ --color-text-tertiary: #5b5b64;
33
+ --color-text-muted: #8f8f95;
34
+ --color-text-on-brand: #ffffff;
35
+ --color-text-on-accent: #ffffff;
36
+ --color-text-inverse: #fafafa;
37
+ --color-brand-primary: #000000;
38
+ --color-brand-primary-hover: rgba(0, 0, 0, 0.85);
39
+ --color-brand-primary-active: rgba(0, 0, 0, 0.7);
40
+ --color-brand-accent-ink: #3e50b8;
41
+ --color-brand-accent-soft: rgba(84, 105, 212, 0.14);
42
+ --color-border-default: #e4e4e7;
43
+ --color-border-hover: #d4d4d8;
44
+ --color-border-strong: #d4d4d8;
45
+ --color-border-strong-hover: #a1a1aa;
46
+ --color-border-control: #71717a;
47
+ --color-focus: #5469d4;
48
+ --color-feedback-success: #0f766e;
49
+ --color-feedback-success-ink: #115e59;
50
+ --color-feedback-warning: #b45309;
51
+ --color-feedback-warning-ink: #92400e;
52
+ --color-feedback-danger: #991b1b;
53
+ --color-feedback-danger-hover: #7f1d1d;
54
+ --color-feedback-danger-ink: #991b1b;
55
+ --color-feedback-info: #075985;
56
+ --color-feedback-info-ink: #075985;
57
+ --color-feedback-success-soft: rgba(15, 118, 110, 0.12);
58
+ --color-feedback-success-line: rgba(15, 118, 110, 0.3);
59
+ --color-feedback-warning-soft: rgba(180, 83, 9, 0.12);
60
+ --color-feedback-warning-line: rgba(180, 83, 9, 0.3);
61
+ --color-feedback-danger-soft: rgba(153, 27, 27, 0.12);
62
+ --color-feedback-danger-line: rgba(153, 27, 27, 0.3);
63
+ --color-feedback-info-soft: rgba(7, 89, 133, 0.12);
64
+ --color-feedback-info-line: rgba(7, 89, 133, 0.3);
65
+ --color-phase-onboarding: #980099;
66
+ --color-phase-onboarding-ink: #8e0090;
67
+ --color-phase-execute: #5b37da;
68
+ --color-phase-execute-ink: #552dd1;
69
+ --color-phase-review: #078543;
70
+ --color-phase-review-ink: #006121;
71
+ --color-phase-onboarding-soft: rgba(152, 0, 153, 0.12);
72
+ --color-phase-execute-soft: rgba(91, 55, 218, 0.12);
73
+ --color-phase-review-soft: rgba(7, 133, 67, 0.12);
74
+ --color-data-1: #3730a3;
75
+ --color-data-2: #a16207;
76
+ --color-data-3: #075985;
77
+ --color-data-4: #1c9002;
78
+ --color-data-5: #db2777;
79
+ --color-data-other: #71717a;
80
+ --color-node-purple: #7150b3;
81
+ --color-node-purple-ink: #573394;
82
+ --color-node-cyan: #166b80;
83
+ --color-node-cyan-ink: #004f62;
84
+ --color-node-green: #2c7046;
85
+ --color-node-green-ink: #05532b;
86
+ --color-node-amber: #865a28;
87
+ --color-node-amber-ink: #683e03;
88
+ --color-node-rose: #984a55;
89
+ --color-node-rose-ink: #7a2f3c;
90
+ --color-node-blue: #4062a7;
91
+ --color-node-blue-ink: #264588;
92
+ --color-node-purple-fill: rgba(113, 80, 179, 0.12);
93
+ --color-node-purple-line: rgba(113, 80, 179, 0.38);
94
+ --color-node-purple-halo: rgba(113, 80, 179, 0.16);
95
+ --color-node-cyan-fill: rgba(22, 107, 128, 0.12);
96
+ --color-node-cyan-line: rgba(22, 107, 128, 0.38);
97
+ --color-node-cyan-halo: rgba(22, 107, 128, 0.16);
98
+ --color-node-green-fill: rgba(44, 112, 70, 0.12);
99
+ --color-node-green-line: rgba(44, 112, 70, 0.38);
100
+ --color-node-green-halo: rgba(44, 112, 70, 0.16);
101
+ --color-node-amber-fill: rgba(134, 90, 40, 0.12);
102
+ --color-node-amber-line: rgba(134, 90, 40, 0.38);
103
+ --color-node-amber-halo: rgba(134, 90, 40, 0.16);
104
+ --color-node-rose-fill: rgba(152, 74, 85, 0.12);
105
+ --color-node-rose-line: rgba(152, 74, 85, 0.38);
106
+ --color-node-rose-halo: rgba(152, 74, 85, 0.16);
107
+ --color-node-blue-fill: rgba(64, 98, 167, 0.12);
108
+ --color-node-blue-line: rgba(64, 98, 167, 0.38);
109
+ --color-node-blue-halo: rgba(64, 98, 167, 0.16);
110
+ --color-scrollbar: rgba(9, 9, 11, 0.2);
111
+ --color-scrollbar-hover: rgba(9, 9, 11, 0.32);
112
+ --shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.06);
113
+ --shadow-sm: 0 2px 8px rgba(9, 9, 11, 0.07);
114
+ --shadow-md: 0 4px 12px rgba(9, 9, 11, 0.08), 0 1px 3px rgba(9, 9, 11, 0.06);
115
+ --shadow-lg: 0 8px 24px rgba(9, 9, 11, 0.12);
116
+ --shadow-xl: 0 16px 40px rgba(9, 9, 11, 0.16), 0 2px 8px rgba(9, 9, 11, 0.08);
117
+ --shadow-sheet: -16px 0 40px rgba(9, 9, 11, 0.16), -2px 0 8px rgba(9, 9, 11, 0.08);
118
+ --shadow-2xl: 0 16px 64px rgba(9, 9, 11, 0.20);
119
+ --shadow-card: 0 8px 24px rgba(9, 9, 11, 0.07);
120
+ --shadow-rim-lit: 0 4px 24px rgba(9, 9, 11, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
121
+ --shadow-hairline: none;
122
+ --shadow-focus: 0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus);
123
+ --shadow-selection: inset 0 0 0 2px var(--color-brand-accent);
124
+ --shadow-glow: 0 4px 24px rgba(84, 105, 212, 0.22);
125
+ }
126
+
127
+ /* Dark, for a reader whose system asks for it and who has not pinned light. */
128
+ @media (prefers-color-scheme: dark) {
129
+ :root:not([data-theme="light"]) {
130
+ color-scheme: dark;
131
+
132
+ --color-surface-background: #15171c;
133
+ --color-surface-subtle: #1c1e24;
134
+ --color-surface-muted: #1c1e24;
135
+ --color-surface-elevated: #22252b;
136
+ --color-surface-topbar: #15171c;
137
+ --color-surface-topbar-lift: #1c1e24;
138
+ --color-surface-topbar-active: #22252b;
139
+ --color-surface-hover: rgba(255, 255, 255, 0.05);
140
+ --color-surface-pressed: rgba(255, 255, 255, 0.08);
141
+ --color-surface-inset: rgba(255, 255, 255, 0.05);
142
+ --color-surface-glass: rgba(28, 30, 36, 0.90);
143
+ --color-surface-scrim: rgba(0, 0, 0, 0.6);
144
+ --color-surface-veil: rgba(21, 23, 28, 0.72);
145
+ --color-surface-inverse: #ffffff;
146
+ --color-text-primary: #fafafa;
147
+ --color-text-secondary: #c9ced8;
148
+ --color-text-tertiary: #95a2b6;
149
+ --color-text-muted: #686b70;
150
+ --color-text-on-brand: #000000;
151
+ --color-text-on-accent: #ffffff;
152
+ --color-text-inverse: #09090b;
153
+ --color-brand-primary: #ffffff;
154
+ --color-brand-primary-hover: rgba(255, 255, 255, 0.9);
155
+ --color-brand-primary-active: rgba(255, 255, 255, 0.82);
156
+ --color-brand-accent-ink: #8b9ff5;
157
+ --color-brand-accent-soft: rgba(84, 105, 212, 0.18);
158
+ --color-border-default: #3f4145;
159
+ --color-border-hover: #4a4d52;
160
+ --color-border-strong: #4a4d52;
161
+ --color-border-strong-hover: #5a5e65;
162
+ --color-border-control: #7f848e;
163
+ --color-focus: #8b9ff5;
164
+ --color-feedback-success: #14b8a6;
165
+ --color-feedback-success-ink: #5eead4;
166
+ --color-feedback-warning: #f59e0b;
167
+ --color-feedback-warning-ink: #fde68a;
168
+ --color-feedback-danger: #dc2626;
169
+ --color-feedback-danger-hover: #b91c1c;
170
+ --color-feedback-danger-ink: #fca5a5;
171
+ --color-feedback-info: #38bdf8;
172
+ --color-feedback-info-ink: #7dd3fc;
173
+ --color-feedback-success-soft: rgba(20, 184, 166, 0.12);
174
+ --color-feedback-success-line: rgba(20, 184, 166, 0.3);
175
+ --color-feedback-warning-soft: rgba(245, 158, 11, 0.12);
176
+ --color-feedback-warning-line: rgba(245, 158, 11, 0.3);
177
+ --color-feedback-danger-soft: rgba(220, 38, 38, 0.12);
178
+ --color-feedback-danger-line: rgba(220, 38, 38, 0.3);
179
+ --color-feedback-info-soft: rgba(56, 189, 248, 0.12);
180
+ --color-feedback-info-line: rgba(56, 189, 248, 0.3);
181
+ --color-phase-onboarding: #f77ae9;
182
+ --color-phase-onboarding-ink: #ff82f1;
183
+ --color-phase-execute: #ac6bff;
184
+ --color-phase-execute-ink: #d697ff;
185
+ --color-phase-review: #00a24f;
186
+ --color-phase-review-ink: #46c872;
187
+ --color-phase-onboarding-soft: rgba(247, 122, 233, 0.12);
188
+ --color-phase-execute-soft: rgba(172, 107, 255, 0.12);
189
+ --color-phase-review-soft: rgba(0, 162, 79, 0.12);
190
+ --color-data-1: #a5b4fc;
191
+ --color-data-2: #facc15;
192
+ --color-data-3: #38bdf8;
193
+ --color-data-4: #86efac;
194
+ --color-data-5: #ec4899;
195
+ --color-data-other: #71717a;
196
+ --color-node-purple: #8e6ed4;
197
+ --color-node-purple-ink: #cabae0;
198
+ --color-node-cyan: #5ca8be;
199
+ --color-node-cyan-ink: #b3d7e0;
200
+ --color-node-green: #62a578;
201
+ --color-node-green-ink: #b8d8c0;
202
+ --color-node-amber: #c89866;
203
+ --color-node-amber-ink: #e0c89e;
204
+ --color-node-rose: #c8757f;
205
+ --color-node-rose-ink: #e0bfc4;
206
+ --color-node-blue: #5b7fc7;
207
+ --color-node-blue-ink: #b9c5e0;
208
+ --color-node-purple-fill: rgba(142, 110, 212, 0.12);
209
+ --color-node-purple-line: rgba(142, 110, 212, 0.38);
210
+ --color-node-purple-halo: rgba(142, 110, 212, 0.16);
211
+ --color-node-cyan-fill: rgba(92, 168, 190, 0.12);
212
+ --color-node-cyan-line: rgba(92, 168, 190, 0.38);
213
+ --color-node-cyan-halo: rgba(92, 168, 190, 0.16);
214
+ --color-node-green-fill: rgba(98, 165, 120, 0.12);
215
+ --color-node-green-line: rgba(98, 165, 120, 0.38);
216
+ --color-node-green-halo: rgba(98, 165, 120, 0.16);
217
+ --color-node-amber-fill: rgba(200, 152, 102, 0.12);
218
+ --color-node-amber-line: rgba(200, 152, 102, 0.38);
219
+ --color-node-amber-halo: rgba(200, 152, 102, 0.16);
220
+ --color-node-rose-fill: rgba(200, 117, 127, 0.12);
221
+ --color-node-rose-line: rgba(200, 117, 127, 0.38);
222
+ --color-node-rose-halo: rgba(200, 117, 127, 0.16);
223
+ --color-node-blue-fill: rgba(91, 127, 199, 0.12);
224
+ --color-node-blue-line: rgba(91, 127, 199, 0.38);
225
+ --color-node-blue-halo: rgba(91, 127, 199, 0.16);
226
+ --color-scrollbar: rgba(255, 255, 255, 0.16);
227
+ --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
228
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
229
+ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
230
+ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
231
+ --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
232
+ --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.4);
233
+ --shadow-sheet: -8px 0 32px rgba(0, 0, 0, 0.4);
234
+ --shadow-2xl: 0 16px 64px rgba(0, 0, 0, 0.6);
235
+ --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.1);
236
+ --shadow-rim-lit: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
237
+ --shadow-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.04);
238
+ --shadow-focus: 0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus);
239
+ --shadow-selection: inset 0 0 0 2px var(--color-brand-accent);
240
+ --shadow-glow: 0 4px 24px rgba(84, 105, 212, 0.3);
241
+ }
242
+ }
243
+
244
+ /* An explicit choice, which wins whichever way the system is set. */
245
+ :root[data-theme="dark"] {
246
+ color-scheme: dark;
247
+
13
248
  --color-surface-background: #15171c;
14
249
  --color-surface-subtle: #1c1e24;
15
250
  --color-surface-muted: #1c1e24;
@@ -17,41 +252,106 @@ body.theme-dark {
17
252
  --color-surface-topbar: #15171c;
18
253
  --color-surface-topbar-lift: #1c1e24;
19
254
  --color-surface-topbar-active: #22252b;
255
+ --color-surface-hover: rgba(255, 255, 255, 0.05);
256
+ --color-surface-pressed: rgba(255, 255, 255, 0.08);
257
+ --color-surface-inset: rgba(255, 255, 255, 0.05);
258
+ --color-surface-glass: rgba(28, 30, 36, 0.90);
259
+ --color-surface-scrim: rgba(0, 0, 0, 0.6);
260
+ --color-surface-veil: rgba(21, 23, 28, 0.72);
261
+ --color-surface-inverse: #ffffff;
20
262
  --color-text-primary: #fafafa;
21
263
  --color-text-secondary: #c9ced8;
22
- --color-text-tertiary: #8c99ad;
23
- --color-text-muted: rgba(255, 255, 255, 0.3);
264
+ --color-text-tertiary: #95a2b6;
265
+ --color-text-muted: #686b70;
266
+ --color-text-on-brand: #000000;
267
+ --color-text-on-accent: #ffffff;
24
268
  --color-text-inverse: #09090b;
25
269
  --color-brand-primary: #ffffff;
26
270
  --color-brand-primary-hover: rgba(255, 255, 255, 0.9);
27
271
  --color-brand-primary-active: rgba(255, 255, 255, 0.82);
28
- --color-text-on-brand: #000000;
272
+ --color-brand-accent-ink: #8b9ff5;
273
+ --color-brand-accent-soft: rgba(84, 105, 212, 0.18);
29
274
  --color-border-default: #3f4145;
30
275
  --color-border-hover: #4a4d52;
31
- --color-border-strong: #3f4145;
32
- --color-border-strong-hover: #4a4d52;
33
- }
34
-
35
- /* Light theme. White surfaces, near-black text and a black primary action. */
36
- body.theme-light {
37
- --color-surface-background: #ffffff;
38
- --color-surface-subtle: #f4f4f5;
39
- --color-surface-muted: #f4f4f5;
40
- --color-surface-elevated: #e3e3e6;
41
- --color-surface-topbar: #ffffff;
42
- --color-surface-topbar-lift: #f4f4f5;
43
- --color-surface-topbar-active: #e3e3e6;
44
- --color-text-primary: #09090b;
45
- --color-text-secondary: #71717a;
46
- --color-text-tertiary: rgba(25, 25, 28, 0.5);
47
- --color-text-muted: rgba(0, 0, 0, 0.4);
48
- --color-text-inverse: #fafafa;
49
- --color-brand-primary: #000000;
50
- --color-brand-primary-hover: rgba(0, 0, 0, 0.85);
51
- --color-brand-primary-active: rgba(0, 0, 0, 0.7);
52
- --color-text-on-brand: #ffffff;
53
- --color-border-default: #e4e4e7;
54
- --color-border-hover: #d4d4d8;
55
- --color-border-strong: #e4e4e7;
56
- --color-border-strong-hover: #d4d4d8;
276
+ --color-border-strong: #4a4d52;
277
+ --color-border-strong-hover: #5a5e65;
278
+ --color-border-control: #7f848e;
279
+ --color-focus: #8b9ff5;
280
+ --color-feedback-success: #14b8a6;
281
+ --color-feedback-success-ink: #5eead4;
282
+ --color-feedback-warning: #f59e0b;
283
+ --color-feedback-warning-ink: #fde68a;
284
+ --color-feedback-danger: #dc2626;
285
+ --color-feedback-danger-hover: #b91c1c;
286
+ --color-feedback-danger-ink: #fca5a5;
287
+ --color-feedback-info: #38bdf8;
288
+ --color-feedback-info-ink: #7dd3fc;
289
+ --color-feedback-success-soft: rgba(20, 184, 166, 0.12);
290
+ --color-feedback-success-line: rgba(20, 184, 166, 0.3);
291
+ --color-feedback-warning-soft: rgba(245, 158, 11, 0.12);
292
+ --color-feedback-warning-line: rgba(245, 158, 11, 0.3);
293
+ --color-feedback-danger-soft: rgba(220, 38, 38, 0.12);
294
+ --color-feedback-danger-line: rgba(220, 38, 38, 0.3);
295
+ --color-feedback-info-soft: rgba(56, 189, 248, 0.12);
296
+ --color-feedback-info-line: rgba(56, 189, 248, 0.3);
297
+ --color-phase-onboarding: #f77ae9;
298
+ --color-phase-onboarding-ink: #ff82f1;
299
+ --color-phase-execute: #ac6bff;
300
+ --color-phase-execute-ink: #d697ff;
301
+ --color-phase-review: #00a24f;
302
+ --color-phase-review-ink: #46c872;
303
+ --color-phase-onboarding-soft: rgba(247, 122, 233, 0.12);
304
+ --color-phase-execute-soft: rgba(172, 107, 255, 0.12);
305
+ --color-phase-review-soft: rgba(0, 162, 79, 0.12);
306
+ --color-data-1: #a5b4fc;
307
+ --color-data-2: #facc15;
308
+ --color-data-3: #38bdf8;
309
+ --color-data-4: #86efac;
310
+ --color-data-5: #ec4899;
311
+ --color-data-other: #71717a;
312
+ --color-node-purple: #8e6ed4;
313
+ --color-node-purple-ink: #cabae0;
314
+ --color-node-cyan: #5ca8be;
315
+ --color-node-cyan-ink: #b3d7e0;
316
+ --color-node-green: #62a578;
317
+ --color-node-green-ink: #b8d8c0;
318
+ --color-node-amber: #c89866;
319
+ --color-node-amber-ink: #e0c89e;
320
+ --color-node-rose: #c8757f;
321
+ --color-node-rose-ink: #e0bfc4;
322
+ --color-node-blue: #5b7fc7;
323
+ --color-node-blue-ink: #b9c5e0;
324
+ --color-node-purple-fill: rgba(142, 110, 212, 0.12);
325
+ --color-node-purple-line: rgba(142, 110, 212, 0.38);
326
+ --color-node-purple-halo: rgba(142, 110, 212, 0.16);
327
+ --color-node-cyan-fill: rgba(92, 168, 190, 0.12);
328
+ --color-node-cyan-line: rgba(92, 168, 190, 0.38);
329
+ --color-node-cyan-halo: rgba(92, 168, 190, 0.16);
330
+ --color-node-green-fill: rgba(98, 165, 120, 0.12);
331
+ --color-node-green-line: rgba(98, 165, 120, 0.38);
332
+ --color-node-green-halo: rgba(98, 165, 120, 0.16);
333
+ --color-node-amber-fill: rgba(200, 152, 102, 0.12);
334
+ --color-node-amber-line: rgba(200, 152, 102, 0.38);
335
+ --color-node-amber-halo: rgba(200, 152, 102, 0.16);
336
+ --color-node-rose-fill: rgba(200, 117, 127, 0.12);
337
+ --color-node-rose-line: rgba(200, 117, 127, 0.38);
338
+ --color-node-rose-halo: rgba(200, 117, 127, 0.16);
339
+ --color-node-blue-fill: rgba(91, 127, 199, 0.12);
340
+ --color-node-blue-line: rgba(91, 127, 199, 0.38);
341
+ --color-node-blue-halo: rgba(91, 127, 199, 0.16);
342
+ --color-scrollbar: rgba(255, 255, 255, 0.16);
343
+ --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
344
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
345
+ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
346
+ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
347
+ --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
348
+ --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.4);
349
+ --shadow-sheet: -8px 0 32px rgba(0, 0, 0, 0.4);
350
+ --shadow-2xl: 0 16px 64px rgba(0, 0, 0, 0.6);
351
+ --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.1);
352
+ --shadow-rim-lit: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
353
+ --shadow-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.04);
354
+ --shadow-focus: 0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus);
355
+ --shadow-selection: inset 0 0 0 2px var(--color-brand-accent);
356
+ --shadow-glow: 0 4px 24px rgba(84, 105, 212, 0.3);
57
357
  }