@crewlethq/tokens 0.12.0 → 0.13.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.
@@ -0,0 +1,323 @@
1
+ /* Generated by style-dictionary. The Iris theme: Cool violet grounds with a periwinkle accent that carries a dark label at night.
2
+ Import it after the default palettes, and set data-palette="iris" on <html>:
3
+ import '@crewlethq/tokens/css';
4
+ import '@crewlethq/tokens/css/themes';
5
+ import '@crewlethq/tokens/css/themes/iris';
6
+ data-theme keeps choosing light or dark exactly as it does for the default. */
7
+
8
+ :root[data-palette="iris"] {
9
+ color-scheme: dark;
10
+
11
+ --color-surface-frame: #09011a;
12
+ --color-surface-background: #110b1e;
13
+ --color-surface-subtle: #141021;
14
+ --color-surface-elevated: #1c0f34;
15
+ --color-surface-hover: rgba(255, 255, 255, 0.061);
16
+ --color-surface-pressed: rgba(255, 255, 255, 0.094);
17
+ --color-surface-inset: rgba(255, 255, 255, 0.028);
18
+ --color-surface-glass: rgba(20, 16, 33, 0.90);
19
+ --color-surface-scrim: rgba(0, 0, 0, 0.6);
20
+ --color-surface-veil: rgba(9, 1, 26, 0.65);
21
+ --color-surface-inverse: #ffffff;
22
+ --color-text-primary: #eae7f7;
23
+ --color-text-secondary: #bab5ca;
24
+ --color-text-link-quiet: #aaa4eb;
25
+ --color-text-tertiary: #a398b3;
26
+ --color-text-muted: #645d76;
27
+ --color-text-on-accent: #09011a;
28
+ --color-text-on-danger: #ffffff;
29
+ --color-text-on-scrim: #ffffff;
30
+ --color-text-inverse: #09011a;
31
+ --color-brand-accent: #9584ff;
32
+ --color-brand-accent-hover: #9f92ff;
33
+ --color-brand-accent-active: #a9a0ff;
34
+ --color-brand-accent-ink: #a39afc;
35
+ --color-brand-accent-soft: rgba(149, 132, 255, 0.16);
36
+ --color-brand-accent-rgb: 149, 132, 255;
37
+ --color-brand-accent-soft-strong: rgba(149, 132, 255, 0.32);
38
+ --color-border-default: #292339;
39
+ --color-border-hover: #39334b;
40
+ --color-border-strong: #39334b;
41
+ --color-border-strong-hover: #48415d;
42
+ --color-border-control: #767285;
43
+ --color-focus: #9584ff;
44
+ --color-feedback-success: #27cf9b;
45
+ --color-feedback-success-ink: #65e8c7;
46
+ --color-feedback-warning: #f9ad26;
47
+ --color-feedback-warning-ink: #fbd26c;
48
+ --color-feedback-danger: #db3845;
49
+ --color-feedback-danger-hover: #d02c3d;
50
+ --color-feedback-danger-ink: #fda1a0;
51
+ --color-feedback-info: #0279a9;
52
+ --color-feedback-info-ink: #71c9ff;
53
+ --color-feedback-success-soft: rgba(39, 207, 155, 0.12);
54
+ --color-feedback-success-line: rgba(39, 207, 155, 0.3);
55
+ --color-feedback-warning-soft: rgba(249, 173, 38, 0.12);
56
+ --color-feedback-warning-line: rgba(249, 173, 38, 0.3);
57
+ --color-feedback-danger-soft: rgba(219, 56, 69, 0.12);
58
+ --color-feedback-danger-line: rgba(219, 56, 69, 0.3);
59
+ --color-feedback-info-soft: rgba(2, 121, 169, 0.12);
60
+ --color-feedback-info-line: rgba(2, 121, 169, 0.3);
61
+ --color-data-1: #4a7bc8;
62
+ --color-data-2: #ee8a54;
63
+ --color-data-3: #1cc8cc;
64
+ --color-data-4: #b876a2;
65
+ --color-data-other: #686477;
66
+ --color-node-purple: #8e6ed4;
67
+ --color-node-purple-ink: #cabae0;
68
+ --color-node-cyan: #5ca8be;
69
+ --color-node-cyan-ink: #b3d7e0;
70
+ --color-node-green: #62a578;
71
+ --color-node-green-ink: #b8d8c0;
72
+ --color-node-amber: #c89866;
73
+ --color-node-amber-ink: #e0c89e;
74
+ --color-node-rose: #c8757f;
75
+ --color-node-rose-ink: #e0bfc4;
76
+ --color-node-blue: #5b7fc7;
77
+ --color-node-blue-ink: #b9c5e0;
78
+ --color-node-purple-fill: rgba(142, 110, 212, 0.12);
79
+ --color-node-purple-line: rgba(142, 110, 212, 0.38);
80
+ --color-node-purple-halo: rgba(142, 110, 212, 0.16);
81
+ --color-node-cyan-fill: rgba(92, 168, 190, 0.12);
82
+ --color-node-cyan-line: rgba(92, 168, 190, 0.38);
83
+ --color-node-cyan-halo: rgba(92, 168, 190, 0.16);
84
+ --color-node-green-fill: rgba(98, 165, 120, 0.12);
85
+ --color-node-green-line: rgba(98, 165, 120, 0.38);
86
+ --color-node-green-halo: rgba(98, 165, 120, 0.16);
87
+ --color-node-amber-fill: rgba(200, 152, 102, 0.12);
88
+ --color-node-amber-line: rgba(200, 152, 102, 0.38);
89
+ --color-node-amber-halo: rgba(200, 152, 102, 0.16);
90
+ --color-node-rose-fill: rgba(200, 117, 127, 0.12);
91
+ --color-node-rose-line: rgba(200, 117, 127, 0.38);
92
+ --color-node-rose-halo: rgba(200, 117, 127, 0.16);
93
+ --color-node-blue-fill: rgba(91, 127, 199, 0.12);
94
+ --color-node-blue-line: rgba(91, 127, 199, 0.38);
95
+ --color-node-blue-halo: rgba(91, 127, 199, 0.16);
96
+ --color-scrollbar: rgba(255, 255, 255, 0.16);
97
+ --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
98
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
99
+ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
100
+ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
101
+ --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
102
+ --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.4);
103
+ --shadow-sheet: -8px 0 32px rgba(0, 0, 0, 0.4);
104
+ --shadow-2xl: 0 16px 64px rgba(0, 0, 0, 0.6);
105
+ --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.1);
106
+ --shadow-rim-lit: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
107
+ --shadow-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.04);
108
+ --shadow-focus: 0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus);
109
+ --shadow-selection: inset 0 0 0 2px var(--color-brand-accent);
110
+ --shadow-glow: 0 4px 24px rgba(var(--color-brand-accent-rgb), 0.3);
111
+ }
112
+
113
+ @media (prefers-color-scheme: light) {
114
+ :root[data-palette="iris"]:not([data-theme="dark"]) {
115
+ color-scheme: light;
116
+
117
+ --color-surface-frame: #e8e4f6;
118
+ --color-surface-background: #f8f6fd;
119
+ --color-surface-subtle: #ffffff;
120
+ --color-surface-elevated: #efecf9;
121
+ --color-surface-hover: rgba(9, 1, 26, 0.044);
122
+ --color-surface-pressed: rgba(9, 1, 26, 0.088);
123
+ --color-surface-inset: rgba(9, 1, 26, 0.026);
124
+ --color-surface-glass: rgba(255, 255, 255, 0.90);
125
+ --color-surface-scrim: rgba(0, 0, 0, 0.6);
126
+ --color-surface-veil: rgba(232, 228, 246, 0.65);
127
+ --color-surface-inverse: #09011a;
128
+ --color-text-primary: #181128;
129
+ --color-text-secondary: #47405d;
130
+ --color-text-link-quiet: #47389b;
131
+ --color-text-tertiary: #5c5771;
132
+ --color-text-muted: #8b859d;
133
+ --color-text-on-accent: #ffffff;
134
+ --color-text-on-danger: #ffffff;
135
+ --color-text-on-scrim: #ffffff;
136
+ --color-text-inverse: #f8f6fd;
137
+ --color-brand-accent: #4a2abd;
138
+ --color-brand-accent-hover: #4123aa;
139
+ --color-brand-accent-active: #391a9a;
140
+ --color-brand-accent-ink: #4a2abd;
141
+ --color-brand-accent-soft: rgba(74, 42, 189, 0.125);
142
+ --color-brand-accent-rgb: 74, 42, 189;
143
+ --color-brand-accent-soft-strong: rgba(74, 42, 189, 0.32);
144
+ --color-border-default: #dddaea;
145
+ --color-border-hover: #c8c4d8;
146
+ --color-border-strong: #c8c4d8;
147
+ --color-border-strong-hover: #b6b2c8;
148
+ --color-border-control: #4c495b;
149
+ --color-focus: #4a2abd;
150
+ --color-feedback-success: #039571;
151
+ --color-feedback-success-ink: #055e47;
152
+ --color-feedback-warning: #be6e02;
153
+ --color-feedback-warning-ink: #884206;
154
+ --color-feedback-danger: #9a0b35;
155
+ --color-feedback-danger-hover: #8e002e;
156
+ --color-feedback-danger-ink: #79021b;
157
+ --color-feedback-info: #0585b9;
158
+ --color-feedback-info-ink: #045c93;
159
+ --color-feedback-success-soft: rgba(3, 149, 113, 0.12);
160
+ --color-feedback-success-line: rgba(3, 149, 113, 0.3);
161
+ --color-feedback-warning-soft: rgba(190, 110, 2, 0.12);
162
+ --color-feedback-warning-line: rgba(190, 110, 2, 0.3);
163
+ --color-feedback-danger-soft: rgba(154, 11, 53, 0.12);
164
+ --color-feedback-danger-line: rgba(154, 11, 53, 0.3);
165
+ --color-feedback-info-soft: rgba(5, 133, 185, 0.12);
166
+ --color-feedback-info-line: rgba(5, 133, 185, 0.3);
167
+ --color-data-1: #5482d5;
168
+ --color-data-2: #b74c02;
169
+ --color-data-3: #037267;
170
+ --color-data-4: #b86b9b;
171
+ --color-data-other: #4c495b;
172
+ --color-node-purple: #7150b3;
173
+ --color-node-purple-ink: #573394;
174
+ --color-node-cyan: #166b80;
175
+ --color-node-cyan-ink: #004f62;
176
+ --color-node-green: #2c7046;
177
+ --color-node-green-ink: #05532b;
178
+ --color-node-amber: #865a28;
179
+ --color-node-amber-ink: #683e03;
180
+ --color-node-rose: #984a55;
181
+ --color-node-rose-ink: #7a2f3c;
182
+ --color-node-blue: #4062a7;
183
+ --color-node-blue-ink: #264588;
184
+ --color-node-purple-fill: rgba(113, 80, 179, 0.12);
185
+ --color-node-purple-line: rgba(113, 80, 179, 0.38);
186
+ --color-node-purple-halo: rgba(113, 80, 179, 0.16);
187
+ --color-node-cyan-fill: rgba(22, 107, 128, 0.12);
188
+ --color-node-cyan-line: rgba(22, 107, 128, 0.38);
189
+ --color-node-cyan-halo: rgba(22, 107, 128, 0.16);
190
+ --color-node-green-fill: rgba(44, 112, 70, 0.12);
191
+ --color-node-green-line: rgba(44, 112, 70, 0.38);
192
+ --color-node-green-halo: rgba(44, 112, 70, 0.16);
193
+ --color-node-amber-fill: rgba(134, 90, 40, 0.12);
194
+ --color-node-amber-line: rgba(134, 90, 40, 0.38);
195
+ --color-node-amber-halo: rgba(134, 90, 40, 0.16);
196
+ --color-node-rose-fill: rgba(152, 74, 85, 0.12);
197
+ --color-node-rose-line: rgba(152, 74, 85, 0.38);
198
+ --color-node-rose-halo: rgba(152, 74, 85, 0.16);
199
+ --color-node-blue-fill: rgba(64, 98, 167, 0.12);
200
+ --color-node-blue-line: rgba(64, 98, 167, 0.38);
201
+ --color-node-blue-halo: rgba(64, 98, 167, 0.16);
202
+ --color-scrollbar: rgba(7, 8, 13, 0.2);
203
+ --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
204
+ --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
205
+ --shadow-sm: 0 2px 8px rgba(7, 8, 13, 0.07);
206
+ --shadow-md: 0 4px 12px rgba(7, 8, 13, 0.08), 0 1px 3px rgba(7, 8, 13, 0.06);
207
+ --shadow-lg: 0 8px 24px rgba(7, 8, 13, 0.12);
208
+ --shadow-xl: 0 16px 40px rgba(7, 8, 13, 0.16), 0 2px 8px rgba(7, 8, 13, 0.08);
209
+ --shadow-sheet: -16px 0 40px rgba(7, 8, 13, 0.16), -2px 0 8px rgba(7, 8, 13, 0.08);
210
+ --shadow-2xl: 0 16px 64px rgba(7, 8, 13, 0.20);
211
+ --shadow-card: 0 8px 24px rgba(7, 8, 13, 0.07);
212
+ --shadow-rim-lit: 0 4px 24px rgba(7, 8, 13, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
213
+ --shadow-hairline: none;
214
+ --shadow-focus: 0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus);
215
+ --shadow-selection: inset 0 0 0 2px var(--color-brand-accent);
216
+ --shadow-glow: 0 4px 24px rgba(var(--color-brand-accent-rgb), 0.22);
217
+ }
218
+ }
219
+
220
+ :root[data-palette="iris"][data-theme="light"] {
221
+ color-scheme: light;
222
+
223
+ --color-surface-frame: #e8e4f6;
224
+ --color-surface-background: #f8f6fd;
225
+ --color-surface-subtle: #ffffff;
226
+ --color-surface-elevated: #efecf9;
227
+ --color-surface-hover: rgba(9, 1, 26, 0.044);
228
+ --color-surface-pressed: rgba(9, 1, 26, 0.088);
229
+ --color-surface-inset: rgba(9, 1, 26, 0.026);
230
+ --color-surface-glass: rgba(255, 255, 255, 0.90);
231
+ --color-surface-scrim: rgba(0, 0, 0, 0.6);
232
+ --color-surface-veil: rgba(232, 228, 246, 0.65);
233
+ --color-surface-inverse: #09011a;
234
+ --color-text-primary: #181128;
235
+ --color-text-secondary: #47405d;
236
+ --color-text-link-quiet: #47389b;
237
+ --color-text-tertiary: #5c5771;
238
+ --color-text-muted: #8b859d;
239
+ --color-text-on-accent: #ffffff;
240
+ --color-text-on-danger: #ffffff;
241
+ --color-text-on-scrim: #ffffff;
242
+ --color-text-inverse: #f8f6fd;
243
+ --color-brand-accent: #4a2abd;
244
+ --color-brand-accent-hover: #4123aa;
245
+ --color-brand-accent-active: #391a9a;
246
+ --color-brand-accent-ink: #4a2abd;
247
+ --color-brand-accent-soft: rgba(74, 42, 189, 0.125);
248
+ --color-brand-accent-rgb: 74, 42, 189;
249
+ --color-brand-accent-soft-strong: rgba(74, 42, 189, 0.32);
250
+ --color-border-default: #dddaea;
251
+ --color-border-hover: #c8c4d8;
252
+ --color-border-strong: #c8c4d8;
253
+ --color-border-strong-hover: #b6b2c8;
254
+ --color-border-control: #4c495b;
255
+ --color-focus: #4a2abd;
256
+ --color-feedback-success: #039571;
257
+ --color-feedback-success-ink: #055e47;
258
+ --color-feedback-warning: #be6e02;
259
+ --color-feedback-warning-ink: #884206;
260
+ --color-feedback-danger: #9a0b35;
261
+ --color-feedback-danger-hover: #8e002e;
262
+ --color-feedback-danger-ink: #79021b;
263
+ --color-feedback-info: #0585b9;
264
+ --color-feedback-info-ink: #045c93;
265
+ --color-feedback-success-soft: rgba(3, 149, 113, 0.12);
266
+ --color-feedback-success-line: rgba(3, 149, 113, 0.3);
267
+ --color-feedback-warning-soft: rgba(190, 110, 2, 0.12);
268
+ --color-feedback-warning-line: rgba(190, 110, 2, 0.3);
269
+ --color-feedback-danger-soft: rgba(154, 11, 53, 0.12);
270
+ --color-feedback-danger-line: rgba(154, 11, 53, 0.3);
271
+ --color-feedback-info-soft: rgba(5, 133, 185, 0.12);
272
+ --color-feedback-info-line: rgba(5, 133, 185, 0.3);
273
+ --color-data-1: #5482d5;
274
+ --color-data-2: #b74c02;
275
+ --color-data-3: #037267;
276
+ --color-data-4: #b86b9b;
277
+ --color-data-other: #4c495b;
278
+ --color-node-purple: #7150b3;
279
+ --color-node-purple-ink: #573394;
280
+ --color-node-cyan: #166b80;
281
+ --color-node-cyan-ink: #004f62;
282
+ --color-node-green: #2c7046;
283
+ --color-node-green-ink: #05532b;
284
+ --color-node-amber: #865a28;
285
+ --color-node-amber-ink: #683e03;
286
+ --color-node-rose: #984a55;
287
+ --color-node-rose-ink: #7a2f3c;
288
+ --color-node-blue: #4062a7;
289
+ --color-node-blue-ink: #264588;
290
+ --color-node-purple-fill: rgba(113, 80, 179, 0.12);
291
+ --color-node-purple-line: rgba(113, 80, 179, 0.38);
292
+ --color-node-purple-halo: rgba(113, 80, 179, 0.16);
293
+ --color-node-cyan-fill: rgba(22, 107, 128, 0.12);
294
+ --color-node-cyan-line: rgba(22, 107, 128, 0.38);
295
+ --color-node-cyan-halo: rgba(22, 107, 128, 0.16);
296
+ --color-node-green-fill: rgba(44, 112, 70, 0.12);
297
+ --color-node-green-line: rgba(44, 112, 70, 0.38);
298
+ --color-node-green-halo: rgba(44, 112, 70, 0.16);
299
+ --color-node-amber-fill: rgba(134, 90, 40, 0.12);
300
+ --color-node-amber-line: rgba(134, 90, 40, 0.38);
301
+ --color-node-amber-halo: rgba(134, 90, 40, 0.16);
302
+ --color-node-rose-fill: rgba(152, 74, 85, 0.12);
303
+ --color-node-rose-line: rgba(152, 74, 85, 0.38);
304
+ --color-node-rose-halo: rgba(152, 74, 85, 0.16);
305
+ --color-node-blue-fill: rgba(64, 98, 167, 0.12);
306
+ --color-node-blue-line: rgba(64, 98, 167, 0.38);
307
+ --color-node-blue-halo: rgba(64, 98, 167, 0.16);
308
+ --color-scrollbar: rgba(7, 8, 13, 0.2);
309
+ --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
310
+ --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
311
+ --shadow-sm: 0 2px 8px rgba(7, 8, 13, 0.07);
312
+ --shadow-md: 0 4px 12px rgba(7, 8, 13, 0.08), 0 1px 3px rgba(7, 8, 13, 0.06);
313
+ --shadow-lg: 0 8px 24px rgba(7, 8, 13, 0.12);
314
+ --shadow-xl: 0 16px 40px rgba(7, 8, 13, 0.16), 0 2px 8px rgba(7, 8, 13, 0.08);
315
+ --shadow-sheet: -16px 0 40px rgba(7, 8, 13, 0.16), -2px 0 8px rgba(7, 8, 13, 0.08);
316
+ --shadow-2xl: 0 16px 64px rgba(7, 8, 13, 0.20);
317
+ --shadow-card: 0 8px 24px rgba(7, 8, 13, 0.07);
318
+ --shadow-rim-lit: 0 4px 24px rgba(7, 8, 13, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
319
+ --shadow-hairline: none;
320
+ --shadow-focus: 0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus);
321
+ --shadow-selection: inset 0 0 0 2px var(--color-brand-accent);
322
+ --shadow-glow: 0 4px 24px rgba(var(--color-brand-accent-rgb), 0.22);
323
+ }
@@ -0,0 +1,323 @@
1
+ /* Generated by style-dictionary. The Ledger theme: Warm stone grounds with a cobalt accent. Reads like printed paper in light.
2
+ Import it after the default palettes, and set data-palette="ledger" on <html>:
3
+ import '@crewlethq/tokens/css';
4
+ import '@crewlethq/tokens/css/themes';
5
+ import '@crewlethq/tokens/css/themes/ledger';
6
+ data-theme keeps choosing light or dark exactly as it does for the default. */
7
+
8
+ :root[data-palette="ledger"] {
9
+ color-scheme: dark;
10
+
11
+ --color-surface-frame: #0d0c0a;
12
+ --color-surface-background: #141310;
13
+ --color-surface-subtle: #191814;
14
+ --color-surface-elevated: #211f1b;
15
+ --color-surface-hover: rgba(255, 255, 255, 0.061);
16
+ --color-surface-pressed: rgba(255, 255, 255, 0.095);
17
+ --color-surface-inset: rgba(255, 255, 255, 0.028);
18
+ --color-surface-glass: rgba(25, 24, 20, 0.90);
19
+ --color-surface-scrim: rgba(0, 0, 0, 0.6);
20
+ --color-surface-veil: rgba(13, 12, 10, 0.65);
21
+ --color-surface-inverse: #fffefb;
22
+ --color-text-primary: #ece8df;
23
+ --color-text-secondary: #b9b3a6;
24
+ --color-text-link-quiet: #abb5e1;
25
+ --color-text-tertiary: #a29c8e;
26
+ --color-text-muted: #67625a;
27
+ --color-text-on-accent: #ffffff;
28
+ --color-text-on-danger: #ffffff;
29
+ --color-text-on-scrim: #ffffff;
30
+ --color-text-inverse: #0d0c0a;
31
+ --color-brand-accent: #4d6bef;
32
+ --color-brand-accent-hover: #4361e4;
33
+ --color-brand-accent-active: #3956d8;
34
+ --color-brand-accent-ink: #a3b5ff;
35
+ --color-brand-accent-soft: rgba(77, 107, 239, 0.161);
36
+ --color-brand-accent-rgb: 77, 107, 239;
37
+ --color-brand-accent-soft-strong: rgba(77, 107, 239, 0.32);
38
+ --color-border-default: #2a2823;
39
+ --color-border-hover: #3a3730;
40
+ --color-border-strong: #3a3730;
41
+ --color-border-strong-hover: #4b473e;
42
+ --color-border-control: #827d74;
43
+ --color-focus: #5272f6;
44
+ --color-feedback-success: #53cc8f;
45
+ --color-feedback-success-ink: #95d6a3;
46
+ --color-feedback-warning: #e2a132;
47
+ --color-feedback-warning-ink: #efc27c;
48
+ --color-feedback-danger: #d6403d;
49
+ --color-feedback-danger-hover: #cb3534;
50
+ --color-feedback-danger-ink: #f59b95;
51
+ --color-feedback-info: #2fb3b0;
52
+ --color-feedback-info-ink: #7fd6d3;
53
+ --color-feedback-success-soft: rgba(83, 204, 143, 0.12);
54
+ --color-feedback-success-line: rgba(83, 204, 143, 0.3);
55
+ --color-feedback-warning-soft: rgba(226, 161, 50, 0.12);
56
+ --color-feedback-warning-line: rgba(226, 161, 50, 0.3);
57
+ --color-feedback-danger-soft: rgba(214, 64, 61, 0.12);
58
+ --color-feedback-danger-line: rgba(214, 64, 61, 0.3);
59
+ --color-feedback-info-soft: rgba(47, 179, 176, 0.12);
60
+ --color-feedback-info-line: rgba(47, 179, 176, 0.3);
61
+ --color-data-1: #5b8fd6;
62
+ --color-data-2: #dc8028;
63
+ --color-data-3: #4aa784;
64
+ --color-data-4: #c49a2e;
65
+ --color-data-other: #77726a;
66
+ --color-node-purple: #8e6ed4;
67
+ --color-node-purple-ink: #cabae0;
68
+ --color-node-cyan: #5ca8be;
69
+ --color-node-cyan-ink: #b3d7e0;
70
+ --color-node-green: #62a578;
71
+ --color-node-green-ink: #b8d8c0;
72
+ --color-node-amber: #c89866;
73
+ --color-node-amber-ink: #e0c89e;
74
+ --color-node-rose: #c8757f;
75
+ --color-node-rose-ink: #e0bfc4;
76
+ --color-node-blue: #5b7fc7;
77
+ --color-node-blue-ink: #b9c5e0;
78
+ --color-node-purple-fill: rgba(142, 110, 212, 0.12);
79
+ --color-node-purple-line: rgba(142, 110, 212, 0.38);
80
+ --color-node-purple-halo: rgba(142, 110, 212, 0.16);
81
+ --color-node-cyan-fill: rgba(92, 168, 190, 0.12);
82
+ --color-node-cyan-line: rgba(92, 168, 190, 0.38);
83
+ --color-node-cyan-halo: rgba(92, 168, 190, 0.16);
84
+ --color-node-green-fill: rgba(98, 165, 120, 0.12);
85
+ --color-node-green-line: rgba(98, 165, 120, 0.38);
86
+ --color-node-green-halo: rgba(98, 165, 120, 0.16);
87
+ --color-node-amber-fill: rgba(200, 152, 102, 0.12);
88
+ --color-node-amber-line: rgba(200, 152, 102, 0.38);
89
+ --color-node-amber-halo: rgba(200, 152, 102, 0.16);
90
+ --color-node-rose-fill: rgba(200, 117, 127, 0.12);
91
+ --color-node-rose-line: rgba(200, 117, 127, 0.38);
92
+ --color-node-rose-halo: rgba(200, 117, 127, 0.16);
93
+ --color-node-blue-fill: rgba(91, 127, 199, 0.12);
94
+ --color-node-blue-line: rgba(91, 127, 199, 0.38);
95
+ --color-node-blue-halo: rgba(91, 127, 199, 0.16);
96
+ --color-scrollbar: rgba(255, 255, 255, 0.16);
97
+ --color-scrollbar-hover: rgba(255, 255, 255, 0.26);
98
+ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
99
+ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
100
+ --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
101
+ --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
102
+ --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.4);
103
+ --shadow-sheet: -8px 0 32px rgba(0, 0, 0, 0.4);
104
+ --shadow-2xl: 0 16px 64px rgba(0, 0, 0, 0.6);
105
+ --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.1);
106
+ --shadow-rim-lit: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04);
107
+ --shadow-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.04);
108
+ --shadow-focus: 0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus);
109
+ --shadow-selection: inset 0 0 0 2px var(--color-brand-accent);
110
+ --shadow-glow: 0 4px 24px rgba(var(--color-brand-accent-rgb), 0.3);
111
+ }
112
+
113
+ @media (prefers-color-scheme: light) {
114
+ :root[data-palette="ledger"]:not([data-theme="dark"]) {
115
+ color-scheme: light;
116
+
117
+ --color-surface-frame: #ebe8e1;
118
+ --color-surface-background: #f6f5f1;
119
+ --color-surface-subtle: #fffefb;
120
+ --color-surface-elevated: #f0ede6;
121
+ --color-surface-hover: rgba(13, 12, 10, 0.045);
122
+ --color-surface-pressed: rgba(13, 12, 10, 0.09);
123
+ --color-surface-inset: rgba(13, 12, 10, 0.026);
124
+ --color-surface-glass: rgba(255, 254, 251, 0.90);
125
+ --color-surface-scrim: rgba(0, 0, 0, 0.6);
126
+ --color-surface-veil: rgba(235, 232, 225, 0.65);
127
+ --color-surface-inverse: #0d0c0a;
128
+ --color-text-primary: #1c1a16;
129
+ --color-text-secondary: #4a463e;
130
+ --color-text-link-quiet: #32498e;
131
+ --color-text-tertiary: #605c53;
132
+ --color-text-muted: #908a7e;
133
+ --color-text-on-accent: #ffffff;
134
+ --color-text-on-danger: #ffffff;
135
+ --color-text-on-scrim: #ffffff;
136
+ --color-text-inverse: #f6f5f1;
137
+ --color-brand-accent: #2f50d8;
138
+ --color-brand-accent-hover: #2845c7;
139
+ --color-brand-accent-active: #213ab6;
140
+ --color-brand-accent-ink: #2643b8;
141
+ --color-brand-accent-soft: rgba(47, 80, 216, 0.125);
142
+ --color-brand-accent-rgb: 47, 80, 216;
143
+ --color-brand-accent-soft-strong: rgba(47, 80, 216, 0.32);
144
+ --color-border-default: #e0dbd0;
145
+ --color-border-hover: #cdc6b8;
146
+ --color-border-strong: #cdc6b8;
147
+ --color-border-strong-hover: #bab1a0;
148
+ --color-border-control: #7e776b;
149
+ --color-focus: #2f50d8;
150
+ --color-feedback-success: #1a9368;
151
+ --color-feedback-success-ink: #246937;
152
+ --color-feedback-warning: #a86900;
153
+ --color-feedback-warning-ink: #7f4f00;
154
+ --color-feedback-danger: #9c332b;
155
+ --color-feedback-danger-hover: #922923;
156
+ --color-feedback-danger-ink: #a02d21;
157
+ --color-feedback-info: #007883;
158
+ --color-feedback-info-ink: #0d6461;
159
+ --color-feedback-success-soft: rgba(26, 147, 104, 0.12);
160
+ --color-feedback-success-line: rgba(26, 147, 104, 0.3);
161
+ --color-feedback-warning-soft: rgba(168, 105, 0, 0.12);
162
+ --color-feedback-warning-line: rgba(168, 105, 0, 0.3);
163
+ --color-feedback-danger-soft: rgba(156, 51, 43, 0.12);
164
+ --color-feedback-danger-line: rgba(156, 51, 43, 0.3);
165
+ --color-feedback-info-soft: rgba(0, 120, 131, 0.12);
166
+ --color-feedback-info-line: rgba(0, 120, 131, 0.3);
167
+ --color-data-1: #3d6fb7;
168
+ --color-data-2: #c8612a;
169
+ --color-data-3: #1b4200;
170
+ --color-data-4: #a87e10;
171
+ --color-data-other: #8b8479;
172
+ --color-node-purple: #7150b3;
173
+ --color-node-purple-ink: #573394;
174
+ --color-node-cyan: #166b80;
175
+ --color-node-cyan-ink: #004f62;
176
+ --color-node-green: #2c7046;
177
+ --color-node-green-ink: #05532b;
178
+ --color-node-amber: #865a28;
179
+ --color-node-amber-ink: #683e03;
180
+ --color-node-rose: #984a55;
181
+ --color-node-rose-ink: #7a2f3c;
182
+ --color-node-blue: #4062a7;
183
+ --color-node-blue-ink: #264588;
184
+ --color-node-purple-fill: rgba(113, 80, 179, 0.12);
185
+ --color-node-purple-line: rgba(113, 80, 179, 0.38);
186
+ --color-node-purple-halo: rgba(113, 80, 179, 0.16);
187
+ --color-node-cyan-fill: rgba(22, 107, 128, 0.12);
188
+ --color-node-cyan-line: rgba(22, 107, 128, 0.38);
189
+ --color-node-cyan-halo: rgba(22, 107, 128, 0.16);
190
+ --color-node-green-fill: rgba(44, 112, 70, 0.12);
191
+ --color-node-green-line: rgba(44, 112, 70, 0.38);
192
+ --color-node-green-halo: rgba(44, 112, 70, 0.16);
193
+ --color-node-amber-fill: rgba(134, 90, 40, 0.12);
194
+ --color-node-amber-line: rgba(134, 90, 40, 0.38);
195
+ --color-node-amber-halo: rgba(134, 90, 40, 0.16);
196
+ --color-node-rose-fill: rgba(152, 74, 85, 0.12);
197
+ --color-node-rose-line: rgba(152, 74, 85, 0.38);
198
+ --color-node-rose-halo: rgba(152, 74, 85, 0.16);
199
+ --color-node-blue-fill: rgba(64, 98, 167, 0.12);
200
+ --color-node-blue-line: rgba(64, 98, 167, 0.38);
201
+ --color-node-blue-halo: rgba(64, 98, 167, 0.16);
202
+ --color-scrollbar: rgba(7, 8, 13, 0.2);
203
+ --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
204
+ --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
205
+ --shadow-sm: 0 2px 8px rgba(7, 8, 13, 0.07);
206
+ --shadow-md: 0 4px 12px rgba(7, 8, 13, 0.08), 0 1px 3px rgba(7, 8, 13, 0.06);
207
+ --shadow-lg: 0 8px 24px rgba(7, 8, 13, 0.12);
208
+ --shadow-xl: 0 16px 40px rgba(7, 8, 13, 0.16), 0 2px 8px rgba(7, 8, 13, 0.08);
209
+ --shadow-sheet: -16px 0 40px rgba(7, 8, 13, 0.16), -2px 0 8px rgba(7, 8, 13, 0.08);
210
+ --shadow-2xl: 0 16px 64px rgba(7, 8, 13, 0.20);
211
+ --shadow-card: 0 8px 24px rgba(7, 8, 13, 0.07);
212
+ --shadow-rim-lit: 0 4px 24px rgba(7, 8, 13, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
213
+ --shadow-hairline: none;
214
+ --shadow-focus: 0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus);
215
+ --shadow-selection: inset 0 0 0 2px var(--color-brand-accent);
216
+ --shadow-glow: 0 4px 24px rgba(var(--color-brand-accent-rgb), 0.22);
217
+ }
218
+ }
219
+
220
+ :root[data-palette="ledger"][data-theme="light"] {
221
+ color-scheme: light;
222
+
223
+ --color-surface-frame: #ebe8e1;
224
+ --color-surface-background: #f6f5f1;
225
+ --color-surface-subtle: #fffefb;
226
+ --color-surface-elevated: #f0ede6;
227
+ --color-surface-hover: rgba(13, 12, 10, 0.045);
228
+ --color-surface-pressed: rgba(13, 12, 10, 0.09);
229
+ --color-surface-inset: rgba(13, 12, 10, 0.026);
230
+ --color-surface-glass: rgba(255, 254, 251, 0.90);
231
+ --color-surface-scrim: rgba(0, 0, 0, 0.6);
232
+ --color-surface-veil: rgba(235, 232, 225, 0.65);
233
+ --color-surface-inverse: #0d0c0a;
234
+ --color-text-primary: #1c1a16;
235
+ --color-text-secondary: #4a463e;
236
+ --color-text-link-quiet: #32498e;
237
+ --color-text-tertiary: #605c53;
238
+ --color-text-muted: #908a7e;
239
+ --color-text-on-accent: #ffffff;
240
+ --color-text-on-danger: #ffffff;
241
+ --color-text-on-scrim: #ffffff;
242
+ --color-text-inverse: #f6f5f1;
243
+ --color-brand-accent: #2f50d8;
244
+ --color-brand-accent-hover: #2845c7;
245
+ --color-brand-accent-active: #213ab6;
246
+ --color-brand-accent-ink: #2643b8;
247
+ --color-brand-accent-soft: rgba(47, 80, 216, 0.125);
248
+ --color-brand-accent-rgb: 47, 80, 216;
249
+ --color-brand-accent-soft-strong: rgba(47, 80, 216, 0.32);
250
+ --color-border-default: #e0dbd0;
251
+ --color-border-hover: #cdc6b8;
252
+ --color-border-strong: #cdc6b8;
253
+ --color-border-strong-hover: #bab1a0;
254
+ --color-border-control: #7e776b;
255
+ --color-focus: #2f50d8;
256
+ --color-feedback-success: #1a9368;
257
+ --color-feedback-success-ink: #246937;
258
+ --color-feedback-warning: #a86900;
259
+ --color-feedback-warning-ink: #7f4f00;
260
+ --color-feedback-danger: #9c332b;
261
+ --color-feedback-danger-hover: #922923;
262
+ --color-feedback-danger-ink: #a02d21;
263
+ --color-feedback-info: #007883;
264
+ --color-feedback-info-ink: #0d6461;
265
+ --color-feedback-success-soft: rgba(26, 147, 104, 0.12);
266
+ --color-feedback-success-line: rgba(26, 147, 104, 0.3);
267
+ --color-feedback-warning-soft: rgba(168, 105, 0, 0.12);
268
+ --color-feedback-warning-line: rgba(168, 105, 0, 0.3);
269
+ --color-feedback-danger-soft: rgba(156, 51, 43, 0.12);
270
+ --color-feedback-danger-line: rgba(156, 51, 43, 0.3);
271
+ --color-feedback-info-soft: rgba(0, 120, 131, 0.12);
272
+ --color-feedback-info-line: rgba(0, 120, 131, 0.3);
273
+ --color-data-1: #3d6fb7;
274
+ --color-data-2: #c8612a;
275
+ --color-data-3: #1b4200;
276
+ --color-data-4: #a87e10;
277
+ --color-data-other: #8b8479;
278
+ --color-node-purple: #7150b3;
279
+ --color-node-purple-ink: #573394;
280
+ --color-node-cyan: #166b80;
281
+ --color-node-cyan-ink: #004f62;
282
+ --color-node-green: #2c7046;
283
+ --color-node-green-ink: #05532b;
284
+ --color-node-amber: #865a28;
285
+ --color-node-amber-ink: #683e03;
286
+ --color-node-rose: #984a55;
287
+ --color-node-rose-ink: #7a2f3c;
288
+ --color-node-blue: #4062a7;
289
+ --color-node-blue-ink: #264588;
290
+ --color-node-purple-fill: rgba(113, 80, 179, 0.12);
291
+ --color-node-purple-line: rgba(113, 80, 179, 0.38);
292
+ --color-node-purple-halo: rgba(113, 80, 179, 0.16);
293
+ --color-node-cyan-fill: rgba(22, 107, 128, 0.12);
294
+ --color-node-cyan-line: rgba(22, 107, 128, 0.38);
295
+ --color-node-cyan-halo: rgba(22, 107, 128, 0.16);
296
+ --color-node-green-fill: rgba(44, 112, 70, 0.12);
297
+ --color-node-green-line: rgba(44, 112, 70, 0.38);
298
+ --color-node-green-halo: rgba(44, 112, 70, 0.16);
299
+ --color-node-amber-fill: rgba(134, 90, 40, 0.12);
300
+ --color-node-amber-line: rgba(134, 90, 40, 0.38);
301
+ --color-node-amber-halo: rgba(134, 90, 40, 0.16);
302
+ --color-node-rose-fill: rgba(152, 74, 85, 0.12);
303
+ --color-node-rose-line: rgba(152, 74, 85, 0.38);
304
+ --color-node-rose-halo: rgba(152, 74, 85, 0.16);
305
+ --color-node-blue-fill: rgba(64, 98, 167, 0.12);
306
+ --color-node-blue-line: rgba(64, 98, 167, 0.38);
307
+ --color-node-blue-halo: rgba(64, 98, 167, 0.16);
308
+ --color-scrollbar: rgba(7, 8, 13, 0.2);
309
+ --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
310
+ --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
311
+ --shadow-sm: 0 2px 8px rgba(7, 8, 13, 0.07);
312
+ --shadow-md: 0 4px 12px rgba(7, 8, 13, 0.08), 0 1px 3px rgba(7, 8, 13, 0.06);
313
+ --shadow-lg: 0 8px 24px rgba(7, 8, 13, 0.12);
314
+ --shadow-xl: 0 16px 40px rgba(7, 8, 13, 0.16), 0 2px 8px rgba(7, 8, 13, 0.08);
315
+ --shadow-sheet: -16px 0 40px rgba(7, 8, 13, 0.16), -2px 0 8px rgba(7, 8, 13, 0.08);
316
+ --shadow-2xl: 0 16px 64px rgba(7, 8, 13, 0.20);
317
+ --shadow-card: 0 8px 24px rgba(7, 8, 13, 0.07);
318
+ --shadow-rim-lit: 0 4px 24px rgba(7, 8, 13, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
319
+ --shadow-hairline: none;
320
+ --shadow-focus: 0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus);
321
+ --shadow-selection: inset 0 0 0 2px var(--color-brand-accent);
322
+ --shadow-glow: 0 4px 24px rgba(var(--color-brand-accent-rgb), 0.22);
323
+ }