@a-type/ui 1.8.9 → 1.8.10

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 (37) hide show
  1. package/dist/cjs/colorMode.d.ts +1 -0
  2. package/dist/cjs/colorMode.js +10 -0
  3. package/dist/cjs/colorMode.js.map +1 -1
  4. package/dist/cjs/components/card/Card.d.ts +1 -1
  5. package/dist/cjs/hooks/index.d.ts +1 -0
  6. package/dist/cjs/hooks/index.js +1 -0
  7. package/dist/cjs/hooks/index.js.map +1 -1
  8. package/dist/cjs/hooks/useOverrideTheme.d.ts +2 -0
  9. package/dist/cjs/hooks/useOverrideTheme.js +17 -0
  10. package/dist/cjs/hooks/useOverrideTheme.js.map +1 -0
  11. package/dist/cjs/themes.stories.d.ts +2 -0
  12. package/dist/cjs/themes.stories.js +16 -2
  13. package/dist/cjs/themes.stories.js.map +1 -1
  14. package/dist/cjs/uno.preset.js +148 -127
  15. package/dist/cjs/uno.preset.js.map +1 -1
  16. package/dist/css/main.css +591 -126
  17. package/dist/esm/colorMode.d.ts +1 -0
  18. package/dist/esm/colorMode.js +9 -0
  19. package/dist/esm/colorMode.js.map +1 -1
  20. package/dist/esm/components/card/Card.d.ts +1 -1
  21. package/dist/esm/hooks/index.d.ts +1 -0
  22. package/dist/esm/hooks/index.js +1 -0
  23. package/dist/esm/hooks/index.js.map +1 -1
  24. package/dist/esm/hooks/useOverrideTheme.d.ts +2 -0
  25. package/dist/esm/hooks/useOverrideTheme.js +14 -0
  26. package/dist/esm/hooks/useOverrideTheme.js.map +1 -0
  27. package/dist/esm/themes.stories.d.ts +2 -0
  28. package/dist/esm/themes.stories.js +16 -2
  29. package/dist/esm/themes.stories.js.map +1 -1
  30. package/dist/esm/uno.preset.js +148 -127
  31. package/dist/esm/uno.preset.js.map +1 -1
  32. package/package.json +1 -1
  33. package/src/colorMode.ts +10 -0
  34. package/src/hooks/index.ts +1 -0
  35. package/src/hooks/useOverrideTheme.ts +14 -0
  36. package/src/themes.stories.tsx +36 -2
  37. package/src/uno.preset.ts +178 -127
package/dist/css/main.css CHANGED
@@ -12,6 +12,17 @@
12
12
  --palette-red-20: #804020;
13
13
  --palette-red-10: #702604;
14
14
  --palette-red-00:rgb(37, 28, 25);
15
+ /* TODO: define these */
16
+ --palette-magenta-90: hsl(from rgb(255, 244, 240) calc(h - 20) s l);
17
+ --palette-magenta-80: hsl(from #ffdbcf calc(h - 20) s l);
18
+ --palette-magenta-70: hsl(from #ffbea6 calc(h - 20) s l);
19
+ --palette-magenta-60: hsl(from #fdad8e calc(h - 20) s l);
20
+ --palette-magenta-50: hsl(from #ff8e61 calc(h - 20) s l);
21
+ --palette-magenta-40: hsl(from #d56f46 calc(h - 20) s l);
22
+ --palette-magenta-30: hsl(from #ae562d calc(h - 20) s l);
23
+ --palette-magenta-20: hsl(from #804020 calc(h - 20) s l);
24
+ --palette-magenta-10: hsl(from #702604 calc(h - 20) s l);
25
+ --palette-magenta-00: hsl(from rgb(37, 28, 25) calc(h - 20) s l);
15
26
  --palette-green-90:rgb(242, 251, 247);
16
27
  --palette-green-80: #c2ffe9;
17
28
  --palette-green-70: #92f2d1;
@@ -32,7 +43,7 @@
32
43
  --palette-yellow-20:rgb(111, 83, 23);
33
44
  --palette-yellow-10:rgb(84, 62, 12);
34
45
  --palette-yellow-00:rgb(37, 33, 22);
35
- --palette-blue-90: rgb(239, 249, 256);
46
+ --palette-blue-90: rgb(238, 248, 255);
36
47
  --palette-blue-80: #c4e7ff;
37
48
  --palette-blue-70: #87d3fc;
38
49
  --palette-blue-60: #5fcefe;
@@ -76,40 +87,39 @@
76
87
  --palette-true-gray-20: #4f4f4f;
77
88
  --palette-true-gray-10: #383838;
78
89
  --palette-true-gray-00: #1f1f1f;
90
+ --palette-true-white: #ffffff;
91
+ --palette-true-black: #303030;
79
92
 
80
93
  --global-saturation: 1;
81
94
  --global-corner-scale: 1;
82
95
  --global-border-scale: 1;
83
96
  --global-spacing-scale: 1;
84
97
 
85
- --palette-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--wash-saturation-tweak, 1) * var(--global-saturation, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
86
- --palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
87
- --palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--global-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
88
- --palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--global-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
89
- --color-wash: var(--color-gray-wash);
90
-
91
- --color-gray-wash: var(--palette-gray-wash);
92
- --color-gray: var(--palette-gray);
93
- --color-gray-dark: var(--palette-gray-dark);
94
- --color-gray-light: var(--palette-gray-light);
95
-
96
- --palette-gray-1: var(--color-gray-wash);
97
- --palette-gray-2: var(--color-gray-light);
98
- --palette-gray-3: var(--color-gray-light);
99
- --palette-gray-4: var(--color-gray);
100
- --palette-gray-5: var(--color-gray);
101
- --palette-gray-6: var(--color-gray);
102
- --palette-gray-7: var(--color-gray-dark);
103
- --palette-gray-8: var(--color-gray-dark);
104
- --palette-gray-9: var(--color-black);
105
- --palette-gray-0: var(--color-black);
106
- --palette-gray-ex-1: var(--color-black);
107
- --palette-gray-ex-2: var(--color-black);
108
-
109
- --palette-true-white: #ffffff;
110
- --palette-true-black: #303030;
111
- --palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--global-saturation, 1)) calc(min(100, l + 1 / var(--global-saturation, 1))));
112
- --palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--global-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--global-saturation, 1), 1.5)))));
98
+
99
+ --palette-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--wash-saturation-tweak, 1) * var(--global-saturation, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
100
+ --palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
101
+ --palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--global-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
102
+ --palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--global-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
103
+ --color-wash: var(--color-gray-wash);
104
+ --color-gray-wash: var(--palette-gray-wash);
105
+ --color-gray: var(--palette-gray);
106
+ --color-gray-dark: var(--palette-gray-dark);
107
+ --color-gray-light: var(--palette-gray-light);
108
+ --palette-gray-1: var(--color-gray-wash);
109
+ --palette-gray-2: var(--color-gray-light);
110
+ --palette-gray-3: var(--color-gray-light);
111
+ --palette-gray-4: var(--color-gray);
112
+ --palette-gray-5: var(--color-gray);
113
+ --palette-gray-6: var(--color-gray);
114
+ --palette-gray-7: var(--color-gray-dark);
115
+ --palette-gray-8: var(--color-gray-dark);
116
+ --palette-gray-9: var(--color-black);
117
+ --palette-gray-0: var(--color-black);
118
+ --palette-gray-ex-1: var(--color-black);
119
+ --palette-gray-ex-2: var(--color-black);
120
+ --palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--global-saturation, 1)) calc(min(100, l + 1 / var(--global-saturation, 1))));
121
+ --palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--global-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--global-saturation, 1), 1.5)))));
122
+
113
123
 
114
124
  --z-nowPlaying: 40;
115
125
  --z-nav: 50;
@@ -131,6 +141,10 @@
131
141
  --color-red-light: var(--palette-red-70);
132
142
  --color-red: var(--palette-red-60);
133
143
  --color-red-dark: var(--palette-red-40);
144
+ --color-magenta-wash: var(--palette-magenta-90);
145
+ --color-magenta-light: var(--palette-magenta-70);
146
+ --color-magenta: var(--palette-magenta-60);
147
+ --color-magenta-dark: var(--palette-magenta-40);
134
148
  --color-green-wash: var(--palette-green-90);
135
149
  --color-green-light: var(--palette-green-70);
136
150
  --color-green: var(--palette-green-60);
@@ -176,19 +190,23 @@
176
190
 
177
191
 
178
192
  /* DEFAULT THEME (LEMON) */
179
- --color-attention-light: var(--color-red-light);
180
- --color-attention: var(--color-red);
181
- --color-attention-dark: var(--color-red-dark);
182
- --color-attention-wash: var(--color-red-wash);
183
- --color-accent: var(--color-green);
184
- --color-accent-wash: var(--color-green-wash);
185
- --color-accent-light: var(--color-green-light);
186
- --color-accent-dark: var(--color-green-dark);
187
- --color-primary: var(--color-yellow);
188
- --color-primary-light: var(--color-yellow-light);
189
- --color-primary-dark: var(--color-yellow-dark);
190
- --color-primary-wash: var(--color-yellow-wash);
191
- --gray-hue-tweak: -30;
193
+
194
+ --color-attention: var(--color-red);
195
+ --color-attention-wash: var(--color-red-wash);
196
+ --color-attention-light: var(--color-red-light);
197
+ --color-attention-dark: var(--color-red-dark);
198
+ --color-accent: var(--color-green);
199
+ --color-accent-wash: var(--color-green-wash);
200
+ --color-accent-light: var(--color-green-light);
201
+ --color-accent-dark: var(--color-green-dark);
202
+ --color-primary: var(--color-yellow);
203
+ --color-primary-wash: var(--color-yellow-wash);
204
+ --color-primary-light: var(--color-yellow-light);
205
+ --color-primary-dark: var(--color-yellow-dark);
206
+
207
+ --gray-hue-tweak: -20;
208
+
209
+
192
210
  }
193
211
 
194
212
  /* INTRINSIC DARK THEME */
@@ -201,6 +219,10 @@
201
219
  --color-red-light: var(--palette-red-20);
202
220
  --color-red: var(--palette-red-40);
203
221
  --color-red-dark: var(--palette-red-60);
222
+ --color-magenta-wash: var(--palette-magenta-00);
223
+ --color-magenta-light: var(--palette-magenta-20);
224
+ --color-magenta: var(--palette-magenta-40);
225
+ --color-magenta-dark: var(--palette-magenta-60);
204
226
  --color-green-wash: var(--palette-green-00);
205
227
  --color-green-light: var(--palette-green-20);
206
228
  --color-green: var(--palette-green-40);
@@ -248,20 +270,48 @@
248
270
  }
249
271
 
250
272
  .theme-lemon {
251
- --color-attention-light: var(--color-red-light);
252
- --color-attention: var(--color-red);
253
- --color-attention-dark: var(--color-red-dark);
254
- --color-attention-wash: var(--color-red-wash);
255
- --color-accent: var(--color-green);
256
- --color-accent-wash: var(--color-green-wash);
257
- --color-accent-light: var(--color-green-light);
258
- --color-accent-dark: var(--color-green-dark);
259
- --color-primary: var(--color-yellow);
260
- --color-primary-light: var(--color-yellow-light);
261
- --color-primary-dark: var(--color-yellow-dark);
262
- --color-primary-wash: var(--color-yellow-wash);
263
-
264
- --gray-hue-tweak: -20;
273
+
274
+ --color-attention: var(--color-red);
275
+ --color-attention-wash: var(--color-red-wash);
276
+ --color-attention-light: var(--color-red-light);
277
+ --color-attention-dark: var(--color-red-dark);
278
+ --color-accent: var(--color-green);
279
+ --color-accent-wash: var(--color-green-wash);
280
+ --color-accent-light: var(--color-green-light);
281
+ --color-accent-dark: var(--color-green-dark);
282
+ --color-primary: var(--color-yellow);
283
+ --color-primary-wash: var(--color-yellow-wash);
284
+ --color-primary-light: var(--color-yellow-light);
285
+ --color-primary-dark: var(--color-yellow-dark);
286
+
287
+ --gray-hue-tweak: -20;
288
+
289
+
290
+
291
+ --palette-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--wash-saturation-tweak, 1) * var(--global-saturation, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
292
+ --palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
293
+ --palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--global-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
294
+ --palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--global-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
295
+ --color-wash: var(--color-gray-wash);
296
+ --color-gray-wash: var(--palette-gray-wash);
297
+ --color-gray: var(--palette-gray);
298
+ --color-gray-dark: var(--palette-gray-dark);
299
+ --color-gray-light: var(--palette-gray-light);
300
+ --palette-gray-1: var(--color-gray-wash);
301
+ --palette-gray-2: var(--color-gray-light);
302
+ --palette-gray-3: var(--color-gray-light);
303
+ --palette-gray-4: var(--color-gray);
304
+ --palette-gray-5: var(--color-gray);
305
+ --palette-gray-6: var(--color-gray);
306
+ --palette-gray-7: var(--color-gray-dark);
307
+ --palette-gray-8: var(--color-gray-dark);
308
+ --palette-gray-9: var(--color-black);
309
+ --palette-gray-0: var(--color-black);
310
+ --palette-gray-ex-1: var(--color-black);
311
+ --palette-gray-ex-2: var(--color-black);
312
+ --palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--global-saturation, 1)) calc(min(100, l + 1 / var(--global-saturation, 1))));
313
+ --palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--global-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--global-saturation, 1), 1.5)))));
314
+
265
315
  }
266
316
 
267
317
  /* fix yellow hue in dark mode */
@@ -280,88 +330,228 @@
280
330
  }
281
331
 
282
332
  .theme-blueberry {
283
- --color-attention-light: var(--color-red-light);
284
- --color-attention: var(--color-red);
285
- --color-attention-dark: var(--color-red-dark);
286
- --color-attention-wash: var(--color-red-wash);
287
- --color-accent: var(--color-green);
288
- --color-accent-wash: var(--color-green-wash);
289
- --color-accent-light: var(--color-green-light);
290
- --color-accent-dark: var(--color-green-dark);
291
- --color-primary: var(--color-blue);
292
- --color-primary-light: var(--color-blue-light);
293
- --color-primary-dark: var(--color-blue-dark);
294
- --color-primary-wash: var(--color-blue-wash);
295
-
296
- --gray-hue-tweak: 20;
333
+
334
+ --color-attention: var(--color-red);
335
+ --color-attention-wash: var(--color-red-wash);
336
+ --color-attention-light: var(--color-red-light);
337
+ --color-attention-dark: var(--color-red-dark);
338
+ --color-accent: var(--color-green);
339
+ --color-accent-wash: var(--color-green-wash);
340
+ --color-accent-light: var(--color-green-light);
341
+ --color-accent-dark: var(--color-green-dark);
342
+ --color-primary: var(--color-blue);
343
+ --color-primary-wash: var(--color-blue-wash);
344
+ --color-primary-light: var(--color-blue-light);
345
+ --color-primary-dark: var(--color-blue-dark);
346
+
347
+ --gray-hue-tweak: 20;
348
+
349
+
350
+
351
+ --palette-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--wash-saturation-tweak, 1) * var(--global-saturation, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
352
+ --palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
353
+ --palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--global-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
354
+ --palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--global-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
355
+ --color-wash: var(--color-gray-wash);
356
+ --color-gray-wash: var(--palette-gray-wash);
357
+ --color-gray: var(--palette-gray);
358
+ --color-gray-dark: var(--palette-gray-dark);
359
+ --color-gray-light: var(--palette-gray-light);
360
+ --palette-gray-1: var(--color-gray-wash);
361
+ --palette-gray-2: var(--color-gray-light);
362
+ --palette-gray-3: var(--color-gray-light);
363
+ --palette-gray-4: var(--color-gray);
364
+ --palette-gray-5: var(--color-gray);
365
+ --palette-gray-6: var(--color-gray);
366
+ --palette-gray-7: var(--color-gray-dark);
367
+ --palette-gray-8: var(--color-gray-dark);
368
+ --palette-gray-9: var(--color-black);
369
+ --palette-gray-0: var(--color-black);
370
+ --palette-gray-ex-1: var(--color-black);
371
+ --palette-gray-ex-2: var(--color-black);
372
+ --palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--global-saturation, 1)) calc(min(100, l + 1 / var(--global-saturation, 1))));
373
+ --palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--global-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--global-saturation, 1), 1.5)))));
374
+
297
375
  }
298
376
 
299
377
  .theme-eggplant {
300
- --color-attention-light: var(--color-red-light);
301
- --color-attention: var(--color-red);
302
- --color-attention-dark: var(--color-red-dark);
303
- --color-attention-wash: var(--color-red-wash);
304
- --color-accent: var(--color-green);
305
- --color-accent-wash: var(--color-green-wash);
306
- --color-accent-light: var(--color-green-light);
307
- --color-accent-dark: var(--color-green-dark);
308
- --color-primary: var(--color-purple);
309
- --color-primary-light: var(--color-purple-light);
310
- --color-primary-dark: var(--color-purple-dark);
311
- --color-primary-wash: var(--color-purple-wash);
312
-
313
- --gray-hue-tweak: -20;
378
+
379
+ --color-attention: var(--color-red);
380
+ --color-attention-wash: var(--color-red-wash);
381
+ --color-attention-light: var(--color-red-light);
382
+ --color-attention-dark: var(--color-red-dark);
383
+ --color-accent: var(--color-green);
384
+ --color-accent-wash: var(--color-green-wash);
385
+ --color-accent-light: var(--color-green-light);
386
+ --color-accent-dark: var(--color-green-dark);
387
+ --color-primary: var(--color-purple);
388
+ --color-primary-wash: var(--color-purple-wash);
389
+ --color-primary-light: var(--color-purple-light);
390
+ --color-primary-dark: var(--color-purple-dark);
391
+
392
+ --gray-hue-tweak: -20;
393
+
394
+
395
+
396
+ --palette-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--wash-saturation-tweak, 1) * var(--global-saturation, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
397
+ --palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
398
+ --palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--global-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
399
+ --palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--global-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
400
+ --color-wash: var(--color-gray-wash);
401
+ --color-gray-wash: var(--palette-gray-wash);
402
+ --color-gray: var(--palette-gray);
403
+ --color-gray-dark: var(--palette-gray-dark);
404
+ --color-gray-light: var(--palette-gray-light);
405
+ --palette-gray-1: var(--color-gray-wash);
406
+ --palette-gray-2: var(--color-gray-light);
407
+ --palette-gray-3: var(--color-gray-light);
408
+ --palette-gray-4: var(--color-gray);
409
+ --palette-gray-5: var(--color-gray);
410
+ --palette-gray-6: var(--color-gray);
411
+ --palette-gray-7: var(--color-gray-dark);
412
+ --palette-gray-8: var(--color-gray-dark);
413
+ --palette-gray-9: var(--color-black);
414
+ --palette-gray-0: var(--color-black);
415
+ --palette-gray-ex-1: var(--color-black);
416
+ --palette-gray-ex-2: var(--color-black);
417
+ --palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--global-saturation, 1)) calc(min(100, l + 1 / var(--global-saturation, 1))));
418
+ --palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--global-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--global-saturation, 1), 1.5)))));
419
+
314
420
  }
315
421
 
316
422
  .theme-leek {
317
- --color-attention-light: var(--color-red-light);
318
- --color-attention: var(--color-red);
319
- --color-attention-dark: var(--color-red-dark);
320
- --color-attention-wash: var(--color-red-wash);
321
- --color-accent: var(--color-blue);
322
- --color-accent-wash: var(--color-blue-wash);
323
- --color-accent-light: var(--color-blue-light);
324
- --color-accent-dark: var(--color-blue-dark);
325
- --color-primary: var(--color-green);
326
- --color-primary-light: var(--color-green-light);
327
- --color-primary-dark: var(--color-green-dark);
328
- --color-primary-wash: var(--color-green-wash);
329
-
330
- --gray-hue-tweak: 20;
423
+
424
+ --color-attention: var(--color-red);
425
+ --color-attention-wash: var(--color-red-wash);
426
+ --color-attention-light: var(--color-red-light);
427
+ --color-attention-dark: var(--color-red-dark);
428
+ --color-accent: var(--color-blue);
429
+ --color-accent-wash: var(--color-blue-wash);
430
+ --color-accent-light: var(--color-blue-light);
431
+ --color-accent-dark: var(--color-blue-dark);
432
+ --color-primary: var(--color-green);
433
+ --color-primary-wash: var(--color-green-wash);
434
+ --color-primary-light: var(--color-green-light);
435
+ --color-primary-dark: var(--color-green-dark);
436
+
437
+ --gray-hue-tweak: 20;
438
+
439
+
440
+
441
+ --palette-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--wash-saturation-tweak, 1) * var(--global-saturation, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
442
+ --palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
443
+ --palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--global-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
444
+ --palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--global-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
445
+ --color-wash: var(--color-gray-wash);
446
+ --color-gray-wash: var(--palette-gray-wash);
447
+ --color-gray: var(--palette-gray);
448
+ --color-gray-dark: var(--palette-gray-dark);
449
+ --color-gray-light: var(--palette-gray-light);
450
+ --palette-gray-1: var(--color-gray-wash);
451
+ --palette-gray-2: var(--color-gray-light);
452
+ --palette-gray-3: var(--color-gray-light);
453
+ --palette-gray-4: var(--color-gray);
454
+ --palette-gray-5: var(--color-gray);
455
+ --palette-gray-6: var(--color-gray);
456
+ --palette-gray-7: var(--color-gray-dark);
457
+ --palette-gray-8: var(--color-gray-dark);
458
+ --palette-gray-9: var(--color-black);
459
+ --palette-gray-0: var(--color-black);
460
+ --palette-gray-ex-1: var(--color-black);
461
+ --palette-gray-ex-2: var(--color-black);
462
+ --palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--global-saturation, 1)) calc(min(100, l + 1 / var(--global-saturation, 1))));
463
+ --palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--global-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--global-saturation, 1), 1.5)))));
464
+
331
465
  }
332
466
 
333
467
  .theme-tomato {
334
- --color-attention-light: var(--color-red-light);
335
- --color-attention: var(--color-red);
336
- --color-attention-dark: var(--color-red-dark);
337
- --color-attention-wash: var(--color-red-wash);
338
- --color-accent: var(--color-green);
339
- --color-accent-wash: var(--color-green-wash);
340
- --color-accent-light: var(--color-green-light);
341
- --color-accent-dark: var(--color-green-dark);
342
- --color-primary: hsl(from var(--color-red) calc(h - 20) s l);
343
- --color-primary-light: hsl(from var(--color-red-light) calc(h - 20) s l);
344
- --color-primary-dark: hsl(from var(--color-red-dark) calc(h - 20) s l);
345
- --color-primary-wash: hsl(from var(--color-red-wash) calc(h - 20) s l);
346
-
347
- --gray-hue-tweak: -20;
468
+
469
+ --color-attention: var(--color-red);
470
+ --color-attention-wash: var(--color-red-wash);
471
+ --color-attention-light: var(--color-red-light);
472
+ --color-attention-dark: var(--color-red-dark);
473
+ --color-accent: var(--color-green);
474
+ --color-accent-wash: var(--color-green-wash);
475
+ --color-accent-light: var(--color-green-light);
476
+ --color-accent-dark: var(--color-green-dark);
477
+ --color-primary: var(--color-magenta);
478
+ --color-primary-wash: var(--color-magenta-wash);
479
+ --color-primary-light: var(--color-magenta-light);
480
+ --color-primary-dark: var(--color-magenta-dark);
481
+
482
+ --gray-hue-tweak: -20;
483
+
484
+
485
+
486
+ --palette-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--wash-saturation-tweak, 1) * var(--global-saturation, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
487
+ --palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
488
+ --palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--global-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
489
+ --palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--global-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
490
+ --color-wash: var(--color-gray-wash);
491
+ --color-gray-wash: var(--palette-gray-wash);
492
+ --color-gray: var(--palette-gray);
493
+ --color-gray-dark: var(--palette-gray-dark);
494
+ --color-gray-light: var(--palette-gray-light);
495
+ --palette-gray-1: var(--color-gray-wash);
496
+ --palette-gray-2: var(--color-gray-light);
497
+ --palette-gray-3: var(--color-gray-light);
498
+ --palette-gray-4: var(--color-gray);
499
+ --palette-gray-5: var(--color-gray);
500
+ --palette-gray-6: var(--color-gray);
501
+ --palette-gray-7: var(--color-gray-dark);
502
+ --palette-gray-8: var(--color-gray-dark);
503
+ --palette-gray-9: var(--color-black);
504
+ --palette-gray-0: var(--color-black);
505
+ --palette-gray-ex-1: var(--color-black);
506
+ --palette-gray-ex-2: var(--color-black);
507
+ --palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--global-saturation, 1)) calc(min(100, l + 1 / var(--global-saturation, 1))));
508
+ --palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--global-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--global-saturation, 1), 1.5)))));
509
+
348
510
  }
349
511
 
350
512
  .theme-salt {
351
- --color-attention-light: var(--color-red-light);
352
- --color-attention: var(--color-red);
353
- --color-attention-dark: var(--color-red-dark);
354
- --color-attention-wash: var(--color-red-wash);
355
- --color-primary: var(--color-true-gray);
356
- --color-primary-wash: var(--color-true-gray-wash);
357
- --color-primary-light: var(--color-true-gray-light);
358
- --color-primary-dark: var(--color-true-gray-dark);
359
- --color-accent: var(--color-true-gray-light);
360
- --color-accent-light: var(--color-true-gray-wash);
361
- --color-accent-dark: var(--color-true-gray);
362
- --color-accent-wash: var(--color-white);
363
-
364
- --global-saturation: 0;
513
+
514
+ --color-attention: var(--color-red);
515
+ --color-attention-wash: var(--color-red-wash);
516
+ --color-attention-light: var(--color-red-light);
517
+ --color-attention-dark: var(--color-red-dark);
518
+ --color-accent: var(--color-true-gray-light);
519
+ --color-accent-wash: var(--color-white);
520
+ --color-accent-light: var(--color-true-gray-wash);
521
+ --color-accent-dark: var(--color-true-gray);
522
+ --color-primary: var(--color-true-gray);
523
+ --color-primary-wash: var(--color-true-gray-wash);
524
+ --color-primary-light: var(--color-true-gray-light);
525
+ --color-primary-dark: var(--color-true-gray-dark);
526
+
527
+ --gray-hue-tweak: 0;
528
+ --global-saturation: 0;
529
+
530
+
531
+ --palette-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--wash-saturation-tweak, 1) * var(--global-saturation, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
532
+ --palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
533
+ --palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--global-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
534
+ --palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--global-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
535
+ --color-wash: var(--color-gray-wash);
536
+ --color-gray-wash: var(--palette-gray-wash);
537
+ --color-gray: var(--palette-gray);
538
+ --color-gray-dark: var(--palette-gray-dark);
539
+ --color-gray-light: var(--palette-gray-light);
540
+ --palette-gray-1: var(--color-gray-wash);
541
+ --palette-gray-2: var(--color-gray-light);
542
+ --palette-gray-3: var(--color-gray-light);
543
+ --palette-gray-4: var(--color-gray);
544
+ --palette-gray-5: var(--color-gray);
545
+ --palette-gray-6: var(--color-gray);
546
+ --palette-gray-7: var(--color-gray-dark);
547
+ --palette-gray-8: var(--color-gray-dark);
548
+ --palette-gray-9: var(--color-black);
549
+ --palette-gray-0: var(--color-black);
550
+ --palette-gray-ex-1: var(--color-black);
551
+ --palette-gray-ex-2: var(--color-black);
552
+ --palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--global-saturation, 1)) calc(min(100, l + 1 / var(--global-saturation, 1))));
553
+ --palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--global-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--global-saturation, 1), 1.5)))));
554
+
365
555
  }
366
556
 
367
557
  html, body {
@@ -401,6 +591,10 @@
401
591
  --color-red-light: var(--palette-red-70);
402
592
  --color-red: var(--palette-red-60);
403
593
  --color-red-dark: var(--palette-red-40);
594
+ --color-magenta-wash: var(--palette-magenta-90);
595
+ --color-magenta-light: var(--palette-magenta-70);
596
+ --color-magenta: var(--palette-magenta-60);
597
+ --color-magenta-dark: var(--palette-magenta-40);
404
598
  --color-green-wash: var(--palette-green-90);
405
599
  --color-green-light: var(--palette-green-70);
406
600
  --color-green: var(--palette-green-60);
@@ -444,6 +638,7 @@
444
638
  --color-shadow-2: var(--palette-shadow-1);
445
639
  --color-overlay: var(--palette-white-overlay);
446
640
 
641
+ color: var(--color-black);
447
642
  }
448
643
 
449
644
  .override-dark {
@@ -454,6 +649,10 @@
454
649
  --color-red-light: var(--palette-red-20);
455
650
  --color-red: var(--palette-red-40);
456
651
  --color-red-dark: var(--palette-red-60);
652
+ --color-magenta-wash: var(--palette-magenta-00);
653
+ --color-magenta-light: var(--palette-magenta-20);
654
+ --color-magenta: var(--palette-magenta-40);
655
+ --color-magenta-dark: var(--palette-magenta-60);
457
656
  --color-green-wash: var(--palette-green-00);
458
657
  --color-green-light: var(--palette-green-20);
459
658
  --color-green: var(--palette-green-40);
@@ -497,6 +696,272 @@
497
696
  --color-shadow-2: var(--palette-shadow-3);
498
697
  --color-overlay: var(--palette-black-overlay);
499
698
 
699
+ color: var(--color-black);
700
+ }
701
+
702
+ .theme-override-lemon {
703
+
704
+ --color-attention: var(--color-red);
705
+ --color-attention-wash: var(--color-red-wash);
706
+ --color-attention-light: var(--color-red-light);
707
+ --color-attention-dark: var(--color-red-dark);
708
+ --color-accent: var(--color-green);
709
+ --color-accent-wash: var(--color-green-wash);
710
+ --color-accent-light: var(--color-green-light);
711
+ --color-accent-dark: var(--color-green-dark);
712
+ --color-primary: var(--color-yellow);
713
+ --color-primary-wash: var(--color-yellow-wash);
714
+ --color-primary-light: var(--color-yellow-light);
715
+ --color-primary-dark: var(--color-yellow-dark);
716
+
717
+ --gray-hue-tweak: -20;
718
+
719
+
720
+
721
+ --palette-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--wash-saturation-tweak, 1) * var(--global-saturation, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
722
+ --palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
723
+ --palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--global-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
724
+ --palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--global-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
725
+ --color-wash: var(--color-gray-wash);
726
+ --color-gray-wash: var(--palette-gray-wash);
727
+ --color-gray: var(--palette-gray);
728
+ --color-gray-dark: var(--palette-gray-dark);
729
+ --color-gray-light: var(--palette-gray-light);
730
+ --palette-gray-1: var(--color-gray-wash);
731
+ --palette-gray-2: var(--color-gray-light);
732
+ --palette-gray-3: var(--color-gray-light);
733
+ --palette-gray-4: var(--color-gray);
734
+ --palette-gray-5: var(--color-gray);
735
+ --palette-gray-6: var(--color-gray);
736
+ --palette-gray-7: var(--color-gray-dark);
737
+ --palette-gray-8: var(--color-gray-dark);
738
+ --palette-gray-9: var(--color-black);
739
+ --palette-gray-0: var(--color-black);
740
+ --palette-gray-ex-1: var(--color-black);
741
+ --palette-gray-ex-2: var(--color-black);
742
+ --palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--global-saturation, 1)) calc(min(100, l + 1 / var(--global-saturation, 1))));
743
+ --palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--global-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--global-saturation, 1), 1.5)))));
744
+
745
+ }
746
+ .theme-override-blueberry {
747
+
748
+ --color-attention: var(--color-red);
749
+ --color-attention-wash: var(--color-red-wash);
750
+ --color-attention-light: var(--color-red-light);
751
+ --color-attention-dark: var(--color-red-dark);
752
+ --color-accent: var(--color-green);
753
+ --color-accent-wash: var(--color-green-wash);
754
+ --color-accent-light: var(--color-green-light);
755
+ --color-accent-dark: var(--color-green-dark);
756
+ --color-primary: var(--color-blue);
757
+ --color-primary-wash: var(--color-blue-wash);
758
+ --color-primary-light: var(--color-blue-light);
759
+ --color-primary-dark: var(--color-blue-dark);
760
+
761
+ --gray-hue-tweak: 20;
762
+
763
+
764
+
765
+ --palette-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--wash-saturation-tweak, 1) * var(--global-saturation, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
766
+ --palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
767
+ --palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--global-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
768
+ --palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--global-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
769
+ --color-wash: var(--color-gray-wash);
770
+ --color-gray-wash: var(--palette-gray-wash);
771
+ --color-gray: var(--palette-gray);
772
+ --color-gray-dark: var(--palette-gray-dark);
773
+ --color-gray-light: var(--palette-gray-light);
774
+ --palette-gray-1: var(--color-gray-wash);
775
+ --palette-gray-2: var(--color-gray-light);
776
+ --palette-gray-3: var(--color-gray-light);
777
+ --palette-gray-4: var(--color-gray);
778
+ --palette-gray-5: var(--color-gray);
779
+ --palette-gray-6: var(--color-gray);
780
+ --palette-gray-7: var(--color-gray-dark);
781
+ --palette-gray-8: var(--color-gray-dark);
782
+ --palette-gray-9: var(--color-black);
783
+ --palette-gray-0: var(--color-black);
784
+ --palette-gray-ex-1: var(--color-black);
785
+ --palette-gray-ex-2: var(--color-black);
786
+ --palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--global-saturation, 1)) calc(min(100, l + 1 / var(--global-saturation, 1))));
787
+ --palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--global-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--global-saturation, 1), 1.5)))));
788
+
789
+ }
790
+ .theme-override-eggplant {
791
+
792
+ --color-attention: var(--color-red);
793
+ --color-attention-wash: var(--color-red-wash);
794
+ --color-attention-light: var(--color-red-light);
795
+ --color-attention-dark: var(--color-red-dark);
796
+ --color-accent: var(--color-green);
797
+ --color-accent-wash: var(--color-green-wash);
798
+ --color-accent-light: var(--color-green-light);
799
+ --color-accent-dark: var(--color-green-dark);
800
+ --color-primary: var(--color-purple);
801
+ --color-primary-wash: var(--color-purple-wash);
802
+ --color-primary-light: var(--color-purple-light);
803
+ --color-primary-dark: var(--color-purple-dark);
804
+
805
+ --gray-hue-tweak: -20;
806
+
807
+
808
+
809
+ --palette-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--wash-saturation-tweak, 1) * var(--global-saturation, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
810
+ --palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
811
+ --palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--global-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
812
+ --palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--global-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
813
+ --color-wash: var(--color-gray-wash);
814
+ --color-gray-wash: var(--palette-gray-wash);
815
+ --color-gray: var(--palette-gray);
816
+ --color-gray-dark: var(--palette-gray-dark);
817
+ --color-gray-light: var(--palette-gray-light);
818
+ --palette-gray-1: var(--color-gray-wash);
819
+ --palette-gray-2: var(--color-gray-light);
820
+ --palette-gray-3: var(--color-gray-light);
821
+ --palette-gray-4: var(--color-gray);
822
+ --palette-gray-5: var(--color-gray);
823
+ --palette-gray-6: var(--color-gray);
824
+ --palette-gray-7: var(--color-gray-dark);
825
+ --palette-gray-8: var(--color-gray-dark);
826
+ --palette-gray-9: var(--color-black);
827
+ --palette-gray-0: var(--color-black);
828
+ --palette-gray-ex-1: var(--color-black);
829
+ --palette-gray-ex-2: var(--color-black);
830
+ --palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--global-saturation, 1)) calc(min(100, l + 1 / var(--global-saturation, 1))));
831
+ --palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--global-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--global-saturation, 1), 1.5)))));
832
+
833
+ }
834
+ .theme-override-leek {
835
+
836
+ --color-attention: var(--color-red);
837
+ --color-attention-wash: var(--color-red-wash);
838
+ --color-attention-light: var(--color-red-light);
839
+ --color-attention-dark: var(--color-red-dark);
840
+ --color-accent: var(--color-blue);
841
+ --color-accent-wash: var(--color-blue-wash);
842
+ --color-accent-light: var(--color-blue-light);
843
+ --color-accent-dark: var(--color-blue-dark);
844
+ --color-primary: var(--color-green);
845
+ --color-primary-wash: var(--color-green-wash);
846
+ --color-primary-light: var(--color-green-light);
847
+ --color-primary-dark: var(--color-green-dark);
848
+
849
+ --gray-hue-tweak: 20;
850
+
851
+
852
+
853
+ --palette-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--wash-saturation-tweak, 1) * var(--global-saturation, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
854
+ --palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
855
+ --palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--global-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
856
+ --palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--global-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
857
+ --color-wash: var(--color-gray-wash);
858
+ --color-gray-wash: var(--palette-gray-wash);
859
+ --color-gray: var(--palette-gray);
860
+ --color-gray-dark: var(--palette-gray-dark);
861
+ --color-gray-light: var(--palette-gray-light);
862
+ --palette-gray-1: var(--color-gray-wash);
863
+ --palette-gray-2: var(--color-gray-light);
864
+ --palette-gray-3: var(--color-gray-light);
865
+ --palette-gray-4: var(--color-gray);
866
+ --palette-gray-5: var(--color-gray);
867
+ --palette-gray-6: var(--color-gray);
868
+ --palette-gray-7: var(--color-gray-dark);
869
+ --palette-gray-8: var(--color-gray-dark);
870
+ --palette-gray-9: var(--color-black);
871
+ --palette-gray-0: var(--color-black);
872
+ --palette-gray-ex-1: var(--color-black);
873
+ --palette-gray-ex-2: var(--color-black);
874
+ --palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--global-saturation, 1)) calc(min(100, l + 1 / var(--global-saturation, 1))));
875
+ --palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--global-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--global-saturation, 1), 1.5)))));
876
+
877
+ }
878
+ .theme-override-tomato {
879
+
880
+ --color-attention: var(--color-red);
881
+ --color-attention-wash: var(--color-red-wash);
882
+ --color-attention-light: var(--color-red-light);
883
+ --color-attention-dark: var(--color-red-dark);
884
+ --color-accent: var(--color-green);
885
+ --color-accent-wash: var(--color-green-wash);
886
+ --color-accent-light: var(--color-green-light);
887
+ --color-accent-dark: var(--color-green-dark);
888
+ --color-primary: var(--color-magenta);
889
+ --color-primary-wash: var(--color-magenta-wash);
890
+ --color-primary-light: var(--color-magenta-light);
891
+ --color-primary-dark: var(--color-magenta-dark);
892
+
893
+ --gray-hue-tweak: -20;
894
+
895
+
896
+
897
+ --palette-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--wash-saturation-tweak, 1) * var(--global-saturation, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
898
+ --palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
899
+ --palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--global-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
900
+ --palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--global-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
901
+ --color-wash: var(--color-gray-wash);
902
+ --color-gray-wash: var(--palette-gray-wash);
903
+ --color-gray: var(--palette-gray);
904
+ --color-gray-dark: var(--palette-gray-dark);
905
+ --color-gray-light: var(--palette-gray-light);
906
+ --palette-gray-1: var(--color-gray-wash);
907
+ --palette-gray-2: var(--color-gray-light);
908
+ --palette-gray-3: var(--color-gray-light);
909
+ --palette-gray-4: var(--color-gray);
910
+ --palette-gray-5: var(--color-gray);
911
+ --palette-gray-6: var(--color-gray);
912
+ --palette-gray-7: var(--color-gray-dark);
913
+ --palette-gray-8: var(--color-gray-dark);
914
+ --palette-gray-9: var(--color-black);
915
+ --palette-gray-0: var(--color-black);
916
+ --palette-gray-ex-1: var(--color-black);
917
+ --palette-gray-ex-2: var(--color-black);
918
+ --palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--global-saturation, 1)) calc(min(100, l + 1 / var(--global-saturation, 1))));
919
+ --palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--global-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--global-saturation, 1), 1.5)))));
920
+
921
+ }
922
+ .theme-override-salt {
923
+
924
+ --color-attention: var(--color-red);
925
+ --color-attention-wash: var(--color-red-wash);
926
+ --color-attention-light: var(--color-red-light);
927
+ --color-attention-dark: var(--color-red-dark);
928
+ --color-accent: var(--color-true-gray-light);
929
+ --color-accent-wash: var(--color-white);
930
+ --color-accent-light: var(--color-true-gray-wash);
931
+ --color-accent-dark: var(--color-true-gray);
932
+ --color-primary: var(--color-true-gray);
933
+ --color-primary-wash: var(--color-true-gray-wash);
934
+ --color-primary-light: var(--color-true-gray-light);
935
+ --color-primary-dark: var(--color-true-gray-dark);
936
+
937
+ --gray-hue-tweak: 0;
938
+ --global-saturation: 0;
939
+
940
+
941
+ --palette-gray-wash: hsl(from var(--color-primary-wash) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--wash-saturation-tweak, 1) * var(--global-saturation, 1)) calc(l * pow(1.025, var(--mode-mult,1))));
942
+ --palette-gray: hsl(from var(--color-primary) calc(h + var(--gray-hue-tweak, 0)) calc(s * var(--global-saturation, 1)) calc(l * 1.125));
943
+ --palette-gray-dark: hsl(from var(--color-primary-dark) calc(h + var(--gray-hue-tweak, 0)) calc(s * 0.75 * var(--global-saturation, 1)) calc(l * pow(1.125, var(--mode-mult,1))));
944
+ --palette-gray-light: hsl(from var(--color-primary-light) calc(h + var(--gray-hue-tweak, 0) * pow(2, var(--mode-mult, 1))) calc(s * 0.5 * var(--global-saturation, 1)) calc(l * pow(1.25, var(--mode-mult,1))));
945
+ --color-wash: var(--color-gray-wash);
946
+ --color-gray-wash: var(--palette-gray-wash);
947
+ --color-gray: var(--palette-gray);
948
+ --color-gray-dark: var(--palette-gray-dark);
949
+ --color-gray-light: var(--palette-gray-light);
950
+ --palette-gray-1: var(--color-gray-wash);
951
+ --palette-gray-2: var(--color-gray-light);
952
+ --palette-gray-3: var(--color-gray-light);
953
+ --palette-gray-4: var(--color-gray);
954
+ --palette-gray-5: var(--color-gray);
955
+ --palette-gray-6: var(--color-gray);
956
+ --palette-gray-7: var(--color-gray-dark);
957
+ --palette-gray-8: var(--color-gray-dark);
958
+ --palette-gray-9: var(--color-black);
959
+ --palette-gray-0: var(--color-black);
960
+ --palette-gray-ex-1: var(--color-black);
961
+ --palette-gray-ex-2: var(--color-black);
962
+ --palette-white: hsl(from var(--color-wash) calc(h + 0) calc(s * 0.3 * var(--global-saturation, 1)) calc(min(100, l + 1 / var(--global-saturation, 1))));
963
+ --palette-black: hsl(from var(--color-gray-dark) calc(h + 0) calc(s * 0.1 * var(--global-saturation, 1)) calc(min(100, l / (var(--mode-mult,1) * -5 + pow(1 + var(--global-saturation, 1), 1.5)))));
964
+
500
965
  }
501
966
  }
502
967