@crewlethq/tokens 0.5.7 → 0.6.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 (9) hide show
  1. package/README.md +82 -68
  2. package/dist/css/themes.css +170 -170
  3. package/dist/css/tokens.css +7 -7
  4. package/dist/themes.d.ts +109 -109
  5. package/dist/themes.js +109 -109
  6. package/package.json +1 -1
  7. package/test/palette.d.mts +6 -0
  8. package/test/palette.mjs +70 -37
  9. package/test/palette.test.mjs +69 -41
package/dist/css/themes.css CHANGED
@@ -14,58 +14,58 @@
14
14
  :root {
15
15
  color-scheme: dark;
16
16
 
17
- --color-surface-frame: #09090b;
18
- --color-surface-background: #101013;
19
- --color-surface-subtle: #141418;
20
- --color-surface-elevated: #1b1b20;
17
+ --color-surface-frame: #07080d;
18
+ --color-surface-background: #0c0e16;
19
+ --color-surface-subtle: #11141d;
20
+ --color-surface-elevated: #242833;
21
21
  --color-surface-hover: rgba(255, 255, 255, 0.061);
22
- --color-surface-pressed: rgba(255, 255, 255, 0.094);
22
+ --color-surface-pressed: rgba(255, 255, 255, 0.098);
23
23
  --color-surface-inset: rgba(255, 255, 255, 0.028);
24
- --color-surface-glass: rgba(20, 20, 24, 0.90);
24
+ --color-surface-glass: rgba(17, 20, 29, 0.90);
25
25
  --color-surface-scrim: rgba(0, 0, 0, 0.6);
26
- --color-surface-veil: rgba(9, 9, 11, 0.65);
27
- --color-surface-inverse: #ffffff;
28
- --color-text-primary: #ededf0;
29
- --color-text-secondary: #b4b4bc;
30
- --color-text-tertiary: #9797a1;
31
- --color-text-muted: #5f5f68;
26
+ --color-surface-veil: rgba(7, 8, 13, 0.65);
27
+ --color-surface-inverse: #fcfcfc;
28
+ --color-text-primary: #e6e9f2;
29
+ --color-text-secondary: #a9b0c3;
30
+ --color-text-tertiary: #9fa7bc;
31
+ --color-text-muted: #5a6176;
32
32
  --color-text-on-accent: #ffffff;
33
- --color-text-inverse: #09090b;
34
- --color-brand-accent: #7c56ff;
35
- --color-brand-accent-hover: #744bf4;
36
- --color-brand-accent-active: #6c40e9;
37
- --color-brand-accent-ink: #b3a1ff;
38
- --color-brand-accent-soft: rgba(124, 86, 255, 0.16);
39
- --color-brand-accent-rgb: 124, 86, 255;
40
- --color-brand-accent-soft-strong: rgba(124, 86, 255, 0.32);
41
- --color-border-default: #232329;
42
- --color-border-hover: #303038;
43
- --color-border-strong: #303038;
44
- --color-border-strong-hover: #3e3e48;
45
- --color-border-control: #787983;
46
- --color-focus: #7e5bff;
47
- --color-feedback-success: #3ecf8f;
48
- --color-feedback-success-ink: #72dead;
49
- --color-feedback-warning: #f4b221;
50
- --color-feedback-warning-ink: #f6c86f;
51
- --color-feedback-danger: #e50055;
52
- --color-feedback-danger-hover: #d6004f;
53
- --color-feedback-danger-ink: #ff9a9a;
54
- --color-feedback-info: #4c9dff;
55
- --color-feedback-info-ink: #86beff;
56
- --color-feedback-success-soft: rgba(62, 207, 143, 0.12);
57
- --color-feedback-success-line: rgba(62, 207, 143, 0.3);
58
- --color-feedback-warning-soft: rgba(244, 178, 33, 0.12);
59
- --color-feedback-warning-line: rgba(244, 178, 33, 0.3);
60
- --color-feedback-danger-soft: rgba(229, 0, 85, 0.12);
61
- --color-feedback-danger-line: rgba(229, 0, 85, 0.3);
62
- --color-feedback-info-soft: rgba(76, 157, 255, 0.12);
63
- --color-feedback-info-line: rgba(76, 157, 255, 0.3);
64
- --color-data-1: #458adc;
65
- --color-data-2: #e4631f;
66
- --color-data-3: #009c79;
67
- --color-data-4: #c98500;
68
- --color-data-other: #6e6e78;
33
+ --color-text-inverse: #07080d;
34
+ --color-brand-accent: #725be6;
35
+ --color-brand-accent-hover: #674ee4;
36
+ --color-brand-accent-active: #5b3dc7;
37
+ --color-brand-accent-ink: #a9b0ff;
38
+ --color-brand-accent-soft: rgba(114, 91, 230, 0.16);
39
+ --color-brand-accent-rgb: 114, 91, 230;
40
+ --color-brand-accent-soft-strong: rgba(114, 91, 230, 0.32);
41
+ --color-border-default: #191b20;
42
+ --color-border-hover: #2d3448;
43
+ --color-border-strong: #2d3448;
44
+ --color-border-strong-hover: #424f74;
45
+ --color-border-control: #7f879c;
46
+ --color-focus: #8572fe;
47
+ --color-feedback-success: #34c98b;
48
+ --color-feedback-success-ink: #74dcae;
49
+ --color-feedback-warning: #f0b425;
50
+ --color-feedback-warning-ink: #f6cd72;
51
+ --color-feedback-danger: #d93855;
52
+ --color-feedback-danger-hover: #ce2c4d;
53
+ --color-feedback-danger-ink: #ff9fb0;
54
+ --color-feedback-info: #61d0ff;
55
+ --color-feedback-info-ink: #8ad6fb;
56
+ --color-feedback-success-soft: rgba(52, 201, 139, 0.12);
57
+ --color-feedback-success-line: rgba(52, 201, 139, 0.3);
58
+ --color-feedback-warning-soft: rgba(240, 180, 37, 0.12);
59
+ --color-feedback-warning-line: rgba(240, 180, 37, 0.3);
60
+ --color-feedback-danger-soft: rgba(217, 56, 85, 0.12);
61
+ --color-feedback-danger-line: rgba(217, 56, 85, 0.3);
62
+ --color-feedback-info-soft: rgba(97, 208, 255, 0.12);
63
+ --color-feedback-info-line: rgba(97, 208, 255, 0.3);
64
+ --color-data-1: #4d8ff6;
65
+ --color-data-2: #e67737;
66
+ --color-data-3: #26b583;
67
+ --color-data-4: #eab106;
68
+ --color-data-other: #6a7186;
69
69
  --color-node-purple: #8e6ed4;
70
70
  --color-node-purple-ink: #cabae0;
71
71
  --color-node-cyan: #5ca8be;
@@ -120,58 +120,58 @@
120
120
  :root:not([data-theme="dark"]) {
121
121
  color-scheme: light;
122
122
 
123
- --color-surface-frame: #ededea;
124
- --color-surface-background: #f9f9f8;
125
- --color-surface-subtle: #ffffff;
126
- --color-surface-elevated: #f3f3f1;
127
- --color-surface-hover: rgba(9, 9, 11, 0.044);
128
- --color-surface-pressed: rgba(9, 9, 11, 0.088);
129
- --color-surface-inset: rgba(9, 9, 11, 0.026);
130
- --color-surface-glass: rgba(255, 255, 255, 0.90);
123
+ --color-surface-frame: #e9ecf3;
124
+ --color-surface-background: #f6f7fb;
125
+ --color-surface-subtle: #fcfcfc;
126
+ --color-surface-elevated: #f1f2f6;
127
+ --color-surface-hover: rgba(7, 8, 13, 0.044);
128
+ --color-surface-pressed: rgba(7, 8, 13, 0.088);
129
+ --color-surface-inset: rgba(7, 8, 13, 0.026);
130
+ --color-surface-glass: rgba(252, 252, 252, 0.90);
131
131
  --color-surface-scrim: rgba(0, 0, 0, 0.6);
132
- --color-surface-veil: rgba(237, 237, 234, 0.65);
133
- --color-surface-inverse: #09090b;
134
- --color-text-primary: #17171a;
135
- --color-text-secondary: #46464e;
136
- --color-text-tertiary: #5f5e67;
137
- --color-text-muted: #8d8d94;
132
+ --color-surface-veil: rgba(233, 236, 243, 0.65);
133
+ --color-surface-inverse: #07080d;
134
+ --color-text-primary: #121625;
135
+ --color-text-secondary: #3e4459;
136
+ --color-text-tertiary: #585e73;
137
+ --color-text-muted: #878d9f;
138
138
  --color-text-on-accent: #ffffff;
139
- --color-text-inverse: #fafafa;
140
- --color-brand-accent: #6b45f0;
141
- --color-brand-accent-hover: #633ae5;
142
- --color-brand-accent-active: #5b2eda;
143
- --color-brand-accent-ink: #5a33de;
144
- --color-brand-accent-soft: rgba(107, 69, 240, 0.108);
145
- --color-brand-accent-rgb: 107, 69, 240;
146
- --color-brand-accent-soft-strong: rgba(107, 69, 240, 0.32);
147
- --color-border-default: #e4e4e0;
148
- --color-border-hover: #d3d3ce;
149
- --color-border-strong: #d3d3ce;
150
- --color-border-strong-hover: #c2c2bc;
151
- --color-border-control: #7a7a82;
152
- --color-focus: #6b45f0;
153
- --color-feedback-success: #009b74;
154
- --color-feedback-success-ink: #106d46;
155
- --color-feedback-warning: #c57600;
156
- --color-feedback-warning-ink: #8e5000;
157
- --color-feedback-danger: #c01d32;
158
- --color-feedback-danger-hover: #b5092a;
159
- --color-feedback-danger-ink: #b61426;
160
- --color-feedback-info: #3081de;
161
- --color-feedback-info-ink: #1a5eb3;
162
- --color-feedback-success-soft: rgba(0, 155, 116, 0.12);
163
- --color-feedback-success-line: rgba(0, 155, 116, 0.3);
164
- --color-feedback-warning-soft: rgba(197, 118, 0, 0.12);
165
- --color-feedback-warning-line: rgba(197, 118, 0, 0.3);
166
- --color-feedback-danger-soft: rgba(192, 29, 50, 0.12);
167
- --color-feedback-danger-line: rgba(192, 29, 50, 0.3);
168
- --color-feedback-info-soft: rgba(48, 129, 222, 0.12);
169
- --color-feedback-info-line: rgba(48, 129, 222, 0.3);
170
- --color-data-1: #3879ce;
171
- --color-data-2: #e45f28;
172
- --color-data-3: #009b74;
173
- --color-data-4: #c57600;
174
- --color-data-other: #88888f;
139
+ --color-text-inverse: #f6f7fb;
140
+ --color-brand-accent: #735af2;
141
+ --color-brand-accent-hover: #674ee4;
142
+ --color-brand-accent-active: #5b3dc7;
143
+ --color-brand-accent-ink: #4f51bd;
144
+ --color-brand-accent-soft: rgba(115, 90, 242, 0.125);
145
+ --color-brand-accent-rgb: 115, 90, 242;
146
+ --color-brand-accent-soft-strong: rgba(115, 90, 242, 0.32);
147
+ --color-border-default: #e7e8ec;
148
+ --color-border-hover: #c9cfdc;
149
+ --color-border-strong: #c9cfdc;
150
+ --color-border-strong-hover: #acb6cc;
151
+ --color-border-control: #777a83;
152
+ --color-focus: #735af2;
153
+ --color-feedback-success: #0b9a74;
154
+ --color-feedback-success-ink: #0b6a4b;
155
+ --color-feedback-warning: #c17300;
156
+ --color-feedback-warning-ink: #8c4e00;
157
+ --color-feedback-danger: #b9112c;
158
+ --color-feedback-danger-hover: #ad0023;
159
+ --color-feedback-danger-ink: #b20d23;
160
+ --color-feedback-info: #2f92b4;
161
+ --color-feedback-info-ink: #1a6588;
162
+ --color-feedback-success-soft: rgba(11, 154, 116, 0.12);
163
+ --color-feedback-success-line: rgba(11, 154, 116, 0.3);
164
+ --color-feedback-warning-soft: rgba(193, 115, 0, 0.12);
165
+ --color-feedback-warning-line: rgba(193, 115, 0, 0.3);
166
+ --color-feedback-danger-soft: rgba(185, 17, 44, 0.12);
167
+ --color-feedback-danger-line: rgba(185, 17, 44, 0.3);
168
+ --color-feedback-info-soft: rgba(47, 146, 180, 0.12);
169
+ --color-feedback-info-line: rgba(47, 146, 180, 0.3);
170
+ --color-data-1: #5c76c3;
171
+ --color-data-2: #dd5920;
172
+ --color-data-3: #00956e;
173
+ --color-data-4: #c27600;
174
+ --color-data-other: #85868d;
175
175
  --color-node-purple: #7150b3;
176
176
  --color-node-purple-ink: #573394;
177
177
  --color-node-cyan: #166b80;
@@ -202,17 +202,17 @@
202
202
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
203
203
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
204
204
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
205
- --color-scrollbar: rgba(9, 9, 11, 0.2);
206
- --color-scrollbar-hover: rgba(9, 9, 11, 0.32);
207
- --shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.06);
208
- --shadow-sm: 0 2px 8px rgba(9, 9, 11, 0.07);
209
- --shadow-md: 0 4px 12px rgba(9, 9, 11, 0.08), 0 1px 3px rgba(9, 9, 11, 0.06);
210
- --shadow-lg: 0 8px 24px rgba(9, 9, 11, 0.12);
211
- --shadow-xl: 0 16px 40px rgba(9, 9, 11, 0.16), 0 2px 8px rgba(9, 9, 11, 0.08);
212
- --shadow-sheet: -16px 0 40px rgba(9, 9, 11, 0.16), -2px 0 8px rgba(9, 9, 11, 0.08);
213
- --shadow-2xl: 0 16px 64px rgba(9, 9, 11, 0.20);
214
- --shadow-card: 0 8px 24px rgba(9, 9, 11, 0.07);
215
- --shadow-rim-lit: 0 4px 24px rgba(9, 9, 11, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
205
+ --color-scrollbar: rgba(7, 8, 13, 0.2);
206
+ --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
207
+ --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
208
+ --shadow-sm: 0 2px 8px rgba(7, 8, 13, 0.07);
209
+ --shadow-md: 0 4px 12px rgba(7, 8, 13, 0.08), 0 1px 3px rgba(7, 8, 13, 0.06);
210
+ --shadow-lg: 0 8px 24px rgba(7, 8, 13, 0.12);
211
+ --shadow-xl: 0 16px 40px rgba(7, 8, 13, 0.16), 0 2px 8px rgba(7, 8, 13, 0.08);
212
+ --shadow-sheet: -16px 0 40px rgba(7, 8, 13, 0.16), -2px 0 8px rgba(7, 8, 13, 0.08);
213
+ --shadow-2xl: 0 16px 64px rgba(7, 8, 13, 0.20);
214
+ --shadow-card: 0 8px 24px rgba(7, 8, 13, 0.07);
215
+ --shadow-rim-lit: 0 4px 24px rgba(7, 8, 13, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
216
216
  --shadow-hairline: none;
217
217
  --shadow-focus: 0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus);
218
218
  --shadow-selection: inset 0 0 0 2px var(--color-brand-accent);
@@ -224,58 +224,58 @@
224
224
  :root[data-theme="light"] {
225
225
  color-scheme: light;
226
226
 
227
- --color-surface-frame: #ededea;
228
- --color-surface-background: #f9f9f8;
229
- --color-surface-subtle: #ffffff;
230
- --color-surface-elevated: #f3f3f1;
231
- --color-surface-hover: rgba(9, 9, 11, 0.044);
232
- --color-surface-pressed: rgba(9, 9, 11, 0.088);
233
- --color-surface-inset: rgba(9, 9, 11, 0.026);
234
- --color-surface-glass: rgba(255, 255, 255, 0.90);
227
+ --color-surface-frame: #e9ecf3;
228
+ --color-surface-background: #f6f7fb;
229
+ --color-surface-subtle: #fcfcfc;
230
+ --color-surface-elevated: #f1f2f6;
231
+ --color-surface-hover: rgba(7, 8, 13, 0.044);
232
+ --color-surface-pressed: rgba(7, 8, 13, 0.088);
233
+ --color-surface-inset: rgba(7, 8, 13, 0.026);
234
+ --color-surface-glass: rgba(252, 252, 252, 0.90);
235
235
  --color-surface-scrim: rgba(0, 0, 0, 0.6);
236
- --color-surface-veil: rgba(237, 237, 234, 0.65);
237
- --color-surface-inverse: #09090b;
238
- --color-text-primary: #17171a;
239
- --color-text-secondary: #46464e;
240
- --color-text-tertiary: #5f5e67;
241
- --color-text-muted: #8d8d94;
236
+ --color-surface-veil: rgba(233, 236, 243, 0.65);
237
+ --color-surface-inverse: #07080d;
238
+ --color-text-primary: #121625;
239
+ --color-text-secondary: #3e4459;
240
+ --color-text-tertiary: #585e73;
241
+ --color-text-muted: #878d9f;
242
242
  --color-text-on-accent: #ffffff;
243
- --color-text-inverse: #fafafa;
244
- --color-brand-accent: #6b45f0;
245
- --color-brand-accent-hover: #633ae5;
246
- --color-brand-accent-active: #5b2eda;
247
- --color-brand-accent-ink: #5a33de;
248
- --color-brand-accent-soft: rgba(107, 69, 240, 0.108);
249
- --color-brand-accent-rgb: 107, 69, 240;
250
- --color-brand-accent-soft-strong: rgba(107, 69, 240, 0.32);
251
- --color-border-default: #e4e4e0;
252
- --color-border-hover: #d3d3ce;
253
- --color-border-strong: #d3d3ce;
254
- --color-border-strong-hover: #c2c2bc;
255
- --color-border-control: #7a7a82;
256
- --color-focus: #6b45f0;
257
- --color-feedback-success: #009b74;
258
- --color-feedback-success-ink: #106d46;
259
- --color-feedback-warning: #c57600;
260
- --color-feedback-warning-ink: #8e5000;
261
- --color-feedback-danger: #c01d32;
262
- --color-feedback-danger-hover: #b5092a;
263
- --color-feedback-danger-ink: #b61426;
264
- --color-feedback-info: #3081de;
265
- --color-feedback-info-ink: #1a5eb3;
266
- --color-feedback-success-soft: rgba(0, 155, 116, 0.12);
267
- --color-feedback-success-line: rgba(0, 155, 116, 0.3);
268
- --color-feedback-warning-soft: rgba(197, 118, 0, 0.12);
269
- --color-feedback-warning-line: rgba(197, 118, 0, 0.3);
270
- --color-feedback-danger-soft: rgba(192, 29, 50, 0.12);
271
- --color-feedback-danger-line: rgba(192, 29, 50, 0.3);
272
- --color-feedback-info-soft: rgba(48, 129, 222, 0.12);
273
- --color-feedback-info-line: rgba(48, 129, 222, 0.3);
274
- --color-data-1: #3879ce;
275
- --color-data-2: #e45f28;
276
- --color-data-3: #009b74;
277
- --color-data-4: #c57600;
278
- --color-data-other: #88888f;
243
+ --color-text-inverse: #f6f7fb;
244
+ --color-brand-accent: #735af2;
245
+ --color-brand-accent-hover: #674ee4;
246
+ --color-brand-accent-active: #5b3dc7;
247
+ --color-brand-accent-ink: #4f51bd;
248
+ --color-brand-accent-soft: rgba(115, 90, 242, 0.125);
249
+ --color-brand-accent-rgb: 115, 90, 242;
250
+ --color-brand-accent-soft-strong: rgba(115, 90, 242, 0.32);
251
+ --color-border-default: #e7e8ec;
252
+ --color-border-hover: #c9cfdc;
253
+ --color-border-strong: #c9cfdc;
254
+ --color-border-strong-hover: #acb6cc;
255
+ --color-border-control: #777a83;
256
+ --color-focus: #735af2;
257
+ --color-feedback-success: #0b9a74;
258
+ --color-feedback-success-ink: #0b6a4b;
259
+ --color-feedback-warning: #c17300;
260
+ --color-feedback-warning-ink: #8c4e00;
261
+ --color-feedback-danger: #b9112c;
262
+ --color-feedback-danger-hover: #ad0023;
263
+ --color-feedback-danger-ink: #b20d23;
264
+ --color-feedback-info: #2f92b4;
265
+ --color-feedback-info-ink: #1a6588;
266
+ --color-feedback-success-soft: rgba(11, 154, 116, 0.12);
267
+ --color-feedback-success-line: rgba(11, 154, 116, 0.3);
268
+ --color-feedback-warning-soft: rgba(193, 115, 0, 0.12);
269
+ --color-feedback-warning-line: rgba(193, 115, 0, 0.3);
270
+ --color-feedback-danger-soft: rgba(185, 17, 44, 0.12);
271
+ --color-feedback-danger-line: rgba(185, 17, 44, 0.3);
272
+ --color-feedback-info-soft: rgba(47, 146, 180, 0.12);
273
+ --color-feedback-info-line: rgba(47, 146, 180, 0.3);
274
+ --color-data-1: #5c76c3;
275
+ --color-data-2: #dd5920;
276
+ --color-data-3: #00956e;
277
+ --color-data-4: #c27600;
278
+ --color-data-other: #85868d;
279
279
  --color-node-purple: #7150b3;
280
280
  --color-node-purple-ink: #573394;
281
281
  --color-node-cyan: #166b80;
@@ -306,17 +306,17 @@
306
306
  --color-node-blue-fill: rgba(64, 98, 167, 0.12);
307
307
  --color-node-blue-line: rgba(64, 98, 167, 0.38);
308
308
  --color-node-blue-halo: rgba(64, 98, 167, 0.16);
309
- --color-scrollbar: rgba(9, 9, 11, 0.2);
310
- --color-scrollbar-hover: rgba(9, 9, 11, 0.32);
311
- --shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.06);
312
- --shadow-sm: 0 2px 8px rgba(9, 9, 11, 0.07);
313
- --shadow-md: 0 4px 12px rgba(9, 9, 11, 0.08), 0 1px 3px rgba(9, 9, 11, 0.06);
314
- --shadow-lg: 0 8px 24px rgba(9, 9, 11, 0.12);
315
- --shadow-xl: 0 16px 40px rgba(9, 9, 11, 0.16), 0 2px 8px rgba(9, 9, 11, 0.08);
316
- --shadow-sheet: -16px 0 40px rgba(9, 9, 11, 0.16), -2px 0 8px rgba(9, 9, 11, 0.08);
317
- --shadow-2xl: 0 16px 64px rgba(9, 9, 11, 0.20);
318
- --shadow-card: 0 8px 24px rgba(9, 9, 11, 0.07);
319
- --shadow-rim-lit: 0 4px 24px rgba(9, 9, 11, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
309
+ --color-scrollbar: rgba(7, 8, 13, 0.2);
310
+ --color-scrollbar-hover: rgba(7, 8, 13, 0.32);
311
+ --shadow-xs: 0 1px 2px rgba(7, 8, 13, 0.06);
312
+ --shadow-sm: 0 2px 8px rgba(7, 8, 13, 0.07);
313
+ --shadow-md: 0 4px 12px rgba(7, 8, 13, 0.08), 0 1px 3px rgba(7, 8, 13, 0.06);
314
+ --shadow-lg: 0 8px 24px rgba(7, 8, 13, 0.12);
315
+ --shadow-xl: 0 16px 40px rgba(7, 8, 13, 0.16), 0 2px 8px rgba(7, 8, 13, 0.08);
316
+ --shadow-sheet: -16px 0 40px rgba(7, 8, 13, 0.16), -2px 0 8px rgba(7, 8, 13, 0.08);
317
+ --shadow-2xl: 0 16px 64px rgba(7, 8, 13, 0.20);
318
+ --shadow-card: 0 8px 24px rgba(7, 8, 13, 0.07);
319
+ --shadow-rim-lit: 0 4px 24px rgba(7, 8, 13, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.6);
320
320
  --shadow-hairline: none;
321
321
  --shadow-focus: 0 0 0 2px var(--color-surface-background), 0 0 0 4px var(--color-focus);
322
322
  --shadow-selection: inset 0 0 0 2px var(--color-brand-accent);
package/dist/css/tokens.css CHANGED
@@ -16,11 +16,11 @@
16
16
  --breakpoint-lg: 1024px; /** Small laptops. */
17
17
  --breakpoint-xl: 1200px; /** Standard desktop. */
18
18
  --breakpoint-2xl: 1600px; /** Large desktop, such as wide marketing hero containers. */
19
- --color-brand-accent: #7c56ff; /** The one colour that means HERE, and the one that means ACT: the fill of the primary action, the selected row, the filter that is on, the count of what waits on the reader, and the hue the focus ring is drawn in. A fill and a mark, never text. Per palette: this marketing root and the dark palette take the approved #7c56ff, and light repaints it #6b45f0. On this one white clears 4.53:1, so it is as light as the accent can be while the label of a primary button still clears the text floor. */
20
- --color-brand-accent-hover: #744bf4; /** A step DARKER, never brighter: the least move along lightness, keeping hue and chroma, that a reader can see (dE 3.08), and a move away from the white label, which it takes from 4.53:1 to 5.18:1. The approved hover brightened the fill instead (brightness(1.08), #865dff) and measured 4.18:1, under the text floor at the moment the button is about to be pressed. */
19
+ --color-brand-accent: #7c56ff; /** The one colour that means HERE, and the one that means ACT: the fill of the primary action, the selected row, the filter that is on, the count of what waits on the reader, and the hue the focus ring is drawn in. A fill and a mark, never text. Per palette: this marketing root keeps the brand's #7c56ff, and each theme repaints it (#725be6 in dark, #735af2 in light). On this one white clears 4.53:1, so it is as light as the accent can be while the label of a primary button still clears the text floor. */
20
+ --color-brand-accent-hover: #744bf4; /** A step DARKER, never brighter: the least move along lightness, keeping hue and chroma, that a reader can see (dE 3.08), and a move away from the white label, which it takes from 4.53:1 to 5.18:1. A brightened fill (brightness(1.08), #865dff) measures 4.18:1 here, under the text floor at the moment the button is about to be pressed. */
21
21
  --color-brand-accent-active: #6c40e9; /** One step further on the same line, dE 3.05 past the hover. White clears 5.92:1. */
22
- --color-brand-accent-ink: #b3a1ff; /** The accent as TEXT, the approved step, and 5.90:1 at its tightest, on a pressed row inside a raised surface. The fill step is never text and this step is never a background; the split is what the palette suite measures. Light repaints it to a dark violet. */
23
- --color-brand-accent-soft: rgba(124, 86, 255, 0.16); /** Translucent accent fill behind a selected row: this palette's accent at the approved 0.16. The alpha is per palette, because a selected row has to separate from its ground by at least as much as a plain hover overlay does, and by dE 3 from the overlay itself, and one alpha cannot do both on a dark ground and a light one. Its companions are derived from the accent by the build: accentRgb, the accent as an r, g, b triple for a translucent tint of a stylesheet's own (rgba(var(--color-brand-accent-rgb), 0.12)), and accentSoftStrong, the accent at 0.32, the border paired with this fill. */
22
+ --color-brand-accent-ink: #b3a1ff; /** The accent as TEXT, 5.90:1 at its tightest, on a pressed row inside a raised surface. The fill step is never text and this step is never a background; the split is what the palette suite measures. Light repaints it to a dark violet. */
23
+ --color-brand-accent-soft: rgba(124, 86, 255, 0.16); /** Translucent accent fill behind a selected row: this palette's accent at 0.16. The alpha is per palette, because a selected row has to separate from its ground by at least as much as a plain hover overlay does, and by dE 3 from the overlay itself, and one alpha cannot do both on a dark ground and a light one. Its companions are derived from the accent by the build: accentRgb, the accent as an r, g, b triple for a translucent tint of a stylesheet's own (rgba(var(--color-brand-accent-rgb), 0.12)), and accentSoftStrong, the accent at 0.32, the border paired with this fill. */
24
24
  --color-brand-accent-deep: #5c24ff; /** Deep purple. Distinct from the accent; used as a gradient stop and rarely on its own. */
25
25
  --color-brand-highlight: #ff3bff; /** Hot pink highlight. The first stop of the brand gradient; use sparingly on its own. */
26
26
  --color-brand-slate: #3c4052; /** Muted blue-grey for low-emphasis informational fills (toast progress drains, hover halos, info notification tints). */
@@ -50,8 +50,8 @@
50
50
  --color-border-strong: #4a4d52; /** The heavier resting border, at the plain border's hover weight. It used to hold the same value as --color-border-default in both palettes, so the pair was a copy of the plain pair rather than a third step. */
51
51
  --color-border-strong-hover: #5a5e65; /** One step past strong, so the strong pair is a real pair. */
52
52
  --color-border-control: #7f848e; /** The boundary of an input, a checkbox or a switch. It clears 3:1 on every surface a control can sit on, the overlay composites included: a checkbox inside a hovered row in a dialog body is the case the opaque surfaces alone do not catch. */
53
- --color-focus: #7e5bff; /** The focus indicator, drawn as an OUTLINE at 2px and offset 2px. Forced-colors mode drops every box-shadow and keeps outlines, so a ring drawn as a shadow alone disappears for exactly the readers who need one. It is the ACCENT, lightened dE 1.06 along lightness, the dark palette's value, which clears this root too (3.01:1): #7c56ff itself measured 2.89:1 on a pressed row inside a raised surface, under the 3:1 a ring has to clear, and the accent cannot make that move for it, because any lighter takes the white label of a primary button under the text floor. */
54
- --color-feedback-success: #3ecf8f; /** DONE: work that finished. The four states are what a piece of work is doing, and their meanings never move: info is working, warning needs a person, danger is stopped, success is done. The names stay generic because a badge, a callout and a toast mean the same four things. Every value here is the dark palette's, the approved design's moved the least the floors allow; tokens/themes/dark.json says what moved each. */
53
+ --color-focus: #7e5bff; /** The focus indicator, drawn as an OUTLINE at 2px and offset 2px. Forced-colors mode drops every box-shadow and keeps outlines, so a ring drawn as a shadow alone disappears for exactly the readers who need one. It is the ACCENT, lightened dE 1.06 along lightness, which clears this root at 3.01:1: #7c56ff itself measured 2.89:1 on a pressed row inside a raised surface, under the 3:1 a ring has to clear, and the accent cannot make that move for it, because any lighter takes the white label of a primary button under the text floor. */
54
+ --color-feedback-success: #3ecf8f; /** DONE: work that finished. The four states are what a piece of work is doing, and their meanings never move: info is working, warning needs a person, danger is stopped, success is done. The names stay generic because a badge, a callout and a toast mean the same four things. The values here are this root's own; each theme draws its four in tokens/themes, whose comments say what moved each from the approved palette. */
55
55
  --color-feedback-success-ink: #72dead;
56
56
  --color-feedback-warning: #f4b221; /** NEEDS A PERSON: work that is waiting on somebody. */
57
57
  --color-feedback-warning-ink: #f6c86f;
@@ -68,7 +68,7 @@
68
68
  --color-feedback-danger-line: rgba(229, 0, 85, 0.3);
69
69
  --color-feedback-info-soft: rgba(76, 157, 255, 0.12);
70
70
  --color-feedback-info-line: rgba(76, 157, 255, 0.3);
71
- --color-data-1: #458adc; /** Four series in a fixed order, blue, orange, aqua and yellow, plus a neutral residual, and legal ONLY inside a figure that names them: a legend for two series or more, the label for one. Neighbours are what a legend reader distinguishes, so that is what is measured: dE 9 apart under every vision and 15 under normal vision. Series 1 is deliberately NOT the accent: a series painted in the selection colour claims to be the selection. The values are the dark palette's. */
71
+ --color-data-1: #458adc; /** Four series in a fixed order, blue, orange, aqua and yellow, plus a neutral residual, and legal ONLY inside a figure that names them: a legend for two series or more, the label for one. Neighbours are what a legend reader distinguishes, so that is what is measured: dE 9 apart under every vision and 15 under normal vision. Series 1 is deliberately NOT the accent: a series painted in the selection colour claims to be the selection. The values here are this root's own; each theme draws its own series. */
72
72
  --color-data-2: #e4631f;
73
73
  --color-data-3: #009c79;
74
74
  --color-data-4: #c98500;