@stackoverflow/stacks 2.0.0-rc.11 → 2.0.0-rc.13

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 (16) hide show
  1. package/dist/css/stacks.css +138 -119
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/atomic/typography.less +2 -2
  4. package/lib/components/activity-indicator/activity-indicator.less +1 -1
  5. package/lib/components/checkbox_radio/checkbox_radio.less +14 -8
  6. package/lib/components/label/label.less +1 -1
  7. package/lib/components/toggle-switch/toggle-switch.less +8 -1
  8. package/lib/components/topbar/topbar.less +5 -5
  9. package/lib/components/uploader/uploader.less +1 -1
  10. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +60 -60
  11. package/lib/exports/__snapshots__/color.less.test.ts.snap +68 -68
  12. package/lib/exports/color-mixins.less +15 -12
  13. package/lib/exports/color-sets.less +16 -16
  14. package/lib/exports/mixins.less +36 -9
  15. package/lib/exports/v1/__snapshots__/constants-colors.less.test.ts.snap +28 -28
  16. package/package.json +1 -1
package/lib/exports/__snapshots__/color.less.test.ts.snap CHANGED
@@ -174,19 +174,19 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
174
174
  --theme-secondary-400: var(--theme-secondary-custom-400, var(--blue-400));
175
175
  --theme-secondary-500: var(--theme-secondary-custom-500, var(--blue-500));
176
176
  --theme-secondary-600: var(--theme-secondary-custom-600, var(--blue-600));
177
- --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-base-primary-color-l) + 50 * 1%), 95%));
178
- --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-base-primary-color-l) + 35 * 1%), 90%));
179
- --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(35%, calc(var(--theme-base-primary-color-l) + 15 * 1%), 75%));
180
- --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(20%, calc(var(--theme-base-primary-color-l) + 0 * 1%), 60%));
181
- --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(13%, calc(var(--theme-base-primary-color-l) + -14 * 1%), 50%));
182
- --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(5%, calc(var(--theme-base-primary-color-l) + -26 * 1%), 40%));
177
+ --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * 0.9)) );
178
+ --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * 0.75)) );
179
+ --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * 0.5)) );
180
+ --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), var(--theme-base-primary-color-l));
181
+ --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + (var(--theme-base-primary-color-l) * -0.3)) );
182
+ --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + (var(--theme-base-primary-color-l) * -0.6)) );
183
183
  --theme-primary-custom: var(--theme-primary-custom-400);
184
- --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-base-secondary-color-l) + 50 * 1%), 95%));
185
- --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-base-secondary-color-l) + 35 * 1%), 90%));
186
- --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(35%, calc(var(--theme-base-secondary-color-l) + 15 * 1%), 75%));
187
- --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(20%, calc(var(--theme-base-secondary-color-l) + 0 * 1%), 60%));
188
- --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(13%, calc(var(--theme-base-secondary-color-l) + -14 * 1%), 50%));
189
- --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(5%, calc(var(--theme-base-secondary-color-l) + -26 * 1%), 40%));
184
+ --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.9)) );
185
+ --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.75)) );
186
+ --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + ((100% - var(--theme-base-secondary-color-l)) * 0.5)) );
187
+ --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l));
188
+ --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -0.3)) );
189
+ --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), calc(var(--theme-base-secondary-color-l) + (var(--theme-base-secondary-color-l) * -0.6)) );
190
190
  --theme-secondary-custom: var(--theme-secondary-custom-400);
191
191
  --theme-secondary-custom-focus-ring: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
192
192
  color: var(--theme-body-font-color, var(--black-600));
@@ -214,38 +214,38 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
214
214
  --orange-100: hsl(27, 29%, 19%);
215
215
  --orange-200: hsl(27, 43%, 31%);
216
216
  --orange-300: hsl(27, 43%, 47%);
217
- --orange-400: hsl(27, 80%, 80%);
218
- --orange-500: hsl(27, 80%, 88%);
217
+ --orange-400: hsl(27, 80%, 72%);
218
+ --orange-500: hsl(27, 80%, 83%);
219
219
  --orange-600: hsl(27, 80%, 93%);
220
220
  --blue-100: hsl(209, 29%, 19%);
221
221
  --blue-200: hsl(210, 29%, 35%);
222
222
  --blue-300: hsl(210, 29%, 50%);
223
- --blue-400: hsl(210, 80%, 80%);
224
- --blue-500: hsl(210, 80%, 88%);
223
+ --blue-400: hsl(210, 80%, 75%);
224
+ --blue-500: hsl(210, 80%, 83%);
225
225
  --blue-600: hsl(210, 80%, 93%);
226
226
  --green-100: hsl(148, 29%, 19%);
227
227
  --green-200: hsl(148, 29%, 27%);
228
228
  --green-300: hsl(148, 25%, 40%);
229
- --green-400: hsl(148, 40%, 75%);
230
- --green-500: hsl(148, 40%, 85%);
229
+ --green-400: hsl(148, 40%, 68%);
230
+ --green-500: hsl(148, 40%, 80%);
231
231
  --green-600: hsl(148, 40%, 93%);
232
232
  --red-100: hsl(358, 29%, 19%);
233
233
  --red-200: hsl(0, 29%, 37%);
234
234
  --red-300: hsl(0, 34%, 54%);
235
- --red-400: hsl(0, 73%, 85%);
236
- --red-500: hsl(0, 73%, 91%);
235
+ --red-400: hsl(0, 73%, 80%);
236
+ --red-500: hsl(0, 73%, 88%);
237
237
  --red-600: hsl(0, 73%, 95%);
238
238
  --yellow-100: hsl(43, 29%, 17%);
239
239
  --yellow-200: hsl(43, 29%, 25%);
240
240
  --yellow-300: hsl(43, 29%, 40%);
241
241
  --yellow-400: hsl(43, 75%, 75%);
242
- --yellow-500: hsl(43, 75%, 85%);
242
+ --yellow-500: hsl(43, 75%, 82%);
243
243
  --yellow-600: hsl(43, 75%, 91%);
244
244
  --purple-100: hsl(237, 25%, 24%);
245
245
  --purple-200: hsl(237, 27%, 38%);
246
246
  --purple-300: hsl(237, 32%, 56%);
247
- --purple-400: hsl(237, 58%, 86%);
248
- --purple-500: hsl(237, 60%, 91%);
247
+ --purple-400: hsl(237, 60%, 82%);
248
+ --purple-500: hsl(237, 60%, 88%);
249
249
  --purple-600: hsl(237, 65%, 96%);
250
250
  --gold-100: hsl(45, 29%, 24%);
251
251
  --gold-200: hsl(45, 47%, 37%);
@@ -301,19 +301,19 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
301
301
  --theme-secondary-400: var(--theme-dark-secondary-custom-400, var(--blue-400));
302
302
  --theme-secondary-500: var(--theme-dark-secondary-custom-500, var(--blue-500));
303
303
  --theme-secondary-600: var(--theme-dark-secondary-custom-600, var(--blue-600));
304
- --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -12 * 1%), clamp(15%, calc(var(--theme-dark-primary-color-l) + -60 * 1%), 30%));
305
- --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -10 * 1%), clamp(25%, calc(var(--theme-dark-primary-color-l) + -45 * 1%), 45%));
306
- --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -7 * 1%), clamp(35%, calc(var(--theme-dark-primary-color-l) + -33 * 1%), 70%));
307
- --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-dark-primary-color-l) + 0 * 1%), 85%));
308
- --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-dark-primary-color-l) + 10 * 1%), 90%));
309
- --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(85%, calc(var(--theme-dark-primary-color-l) + 20 * 1%), 95%));
304
+ --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.6)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.7)) );
305
+ --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.4)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.5)) );
306
+ --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.3)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.2)) );
307
+ --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), var(--theme-dark-primary-color-l));
308
+ --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), calc(var(--theme-dark-primary-color-l) + ((100% - var(--theme-dark-primary-color-l)) * 0.5)) );
309
+ --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), calc(var(--theme-dark-primary-color-l) + ((100% - var(--theme-dark-primary-color-l)) * 0.8)) );
310
310
  --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
311
- --theme-dark-secondary-custom-100: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -12 * 1%), clamp(15%, calc(var(--theme-dark-secondary-color-l) + -60 * 1%), 30%));
312
- --theme-dark-secondary-custom-200: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -10 * 1%), clamp(25%, calc(var(--theme-dark-secondary-color-l) + -45 * 1%), 45%));
313
- --theme-dark-secondary-custom-300: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -7 * 1%), clamp(35%, calc(var(--theme-dark-secondary-color-l) + -33 * 1%), 70%));
314
- --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-dark-secondary-color-l) + 0 * 1%), 85%));
315
- --theme-dark-secondary-custom-500: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-dark-secondary-color-l) + 10 * 1%), 90%));
316
- --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), clamp(85%, calc(var(--theme-dark-secondary-color-l) + 20 * 1%), 95%));
311
+ --theme-dark-secondary-custom-100: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -0.6)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.7)) );
312
+ --theme-dark-secondary-custom-200: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -0.4)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.5)) );
313
+ --theme-dark-secondary-custom-300: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -0.3)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.2)) );
314
+ --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l));
315
+ --theme-dark-secondary-custom-500: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * 0.5)) );
316
+ --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * 0.8)) );
317
317
  --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
318
318
  --theme-dark-secondary-custom-focus-ring: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
319
319
  color: var(--theme-body-font-color, var(--black-600));
@@ -339,38 +339,38 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
339
339
  --orange-100: hsl(27, 29%, 19%);
340
340
  --orange-200: hsl(27, 43%, 31%);
341
341
  --orange-300: hsl(27, 43%, 47%);
342
- --orange-400: hsl(27, 80%, 80%);
343
- --orange-500: hsl(27, 80%, 88%);
342
+ --orange-400: hsl(27, 80%, 72%);
343
+ --orange-500: hsl(27, 80%, 83%);
344
344
  --orange-600: hsl(27, 80%, 93%);
345
345
  --blue-100: hsl(209, 29%, 19%);
346
346
  --blue-200: hsl(210, 29%, 35%);
347
347
  --blue-300: hsl(210, 29%, 50%);
348
- --blue-400: hsl(210, 80%, 80%);
349
- --blue-500: hsl(210, 80%, 88%);
348
+ --blue-400: hsl(210, 80%, 75%);
349
+ --blue-500: hsl(210, 80%, 83%);
350
350
  --blue-600: hsl(210, 80%, 93%);
351
351
  --green-100: hsl(148, 29%, 19%);
352
352
  --green-200: hsl(148, 29%, 27%);
353
353
  --green-300: hsl(148, 25%, 40%);
354
- --green-400: hsl(148, 40%, 75%);
355
- --green-500: hsl(148, 40%, 85%);
354
+ --green-400: hsl(148, 40%, 68%);
355
+ --green-500: hsl(148, 40%, 80%);
356
356
  --green-600: hsl(148, 40%, 93%);
357
357
  --red-100: hsl(358, 29%, 19%);
358
358
  --red-200: hsl(0, 29%, 37%);
359
359
  --red-300: hsl(0, 34%, 54%);
360
- --red-400: hsl(0, 73%, 85%);
361
- --red-500: hsl(0, 73%, 91%);
360
+ --red-400: hsl(0, 73%, 80%);
361
+ --red-500: hsl(0, 73%, 88%);
362
362
  --red-600: hsl(0, 73%, 95%);
363
363
  --yellow-100: hsl(43, 29%, 17%);
364
364
  --yellow-200: hsl(43, 29%, 25%);
365
365
  --yellow-300: hsl(43, 29%, 40%);
366
366
  --yellow-400: hsl(43, 75%, 75%);
367
- --yellow-500: hsl(43, 75%, 85%);
367
+ --yellow-500: hsl(43, 75%, 82%);
368
368
  --yellow-600: hsl(43, 75%, 91%);
369
369
  --purple-100: hsl(237, 25%, 24%);
370
370
  --purple-200: hsl(237, 27%, 38%);
371
371
  --purple-300: hsl(237, 32%, 56%);
372
- --purple-400: hsl(237, 58%, 86%);
373
- --purple-500: hsl(237, 60%, 91%);
372
+ --purple-400: hsl(237, 60%, 82%);
373
+ --purple-500: hsl(237, 60%, 88%);
374
374
  --purple-600: hsl(237, 65%, 96%);
375
375
  --gold-100: hsl(45, 29%, 24%);
376
376
  --gold-200: hsl(45, 47%, 37%);
@@ -426,19 +426,19 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
426
426
  --theme-secondary-400: var(--theme-dark-secondary-custom-400, var(--blue-400));
427
427
  --theme-secondary-500: var(--theme-dark-secondary-custom-500, var(--blue-500));
428
428
  --theme-secondary-600: var(--theme-dark-secondary-custom-600, var(--blue-600));
429
- --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -12 * 1%), clamp(15%, calc(var(--theme-dark-primary-color-l) + -60 * 1%), 30%));
430
- --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -10 * 1%), clamp(25%, calc(var(--theme-dark-primary-color-l) + -45 * 1%), 45%));
431
- --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -7 * 1%), clamp(35%, calc(var(--theme-dark-primary-color-l) + -33 * 1%), 70%));
432
- --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-dark-primary-color-l) + 0 * 1%), 85%));
433
- --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-dark-primary-color-l) + 10 * 1%), 90%));
434
- --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(85%, calc(var(--theme-dark-primary-color-l) + 20 * 1%), 95%));
429
+ --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.6)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.7)) );
430
+ --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.4)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.5)) );
431
+ --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + (var(--theme-dark-primary-color-s) * -0.3)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.2)) );
432
+ --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), var(--theme-dark-primary-color-l));
433
+ --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), calc(var(--theme-dark-primary-color-l) + ((100% - var(--theme-dark-primary-color-l)) * 0.5)) );
434
+ --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), calc(var(--theme-dark-primary-color-l) + ((100% - var(--theme-dark-primary-color-l)) * 0.8)) );
435
435
  --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
436
- --theme-dark-secondary-custom-100: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -12 * 1%), clamp(15%, calc(var(--theme-dark-secondary-color-l) + -60 * 1%), 30%));
437
- --theme-dark-secondary-custom-200: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -10 * 1%), clamp(25%, calc(var(--theme-dark-secondary-color-l) + -45 * 1%), 45%));
438
- --theme-dark-secondary-custom-300: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -7 * 1%), clamp(35%, calc(var(--theme-dark-secondary-color-l) + -33 * 1%), 70%));
439
- --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-dark-secondary-color-l) + 0 * 1%), 85%));
440
- --theme-dark-secondary-custom-500: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-dark-secondary-color-l) + 10 * 1%), 90%));
441
- --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), clamp(85%, calc(var(--theme-dark-secondary-color-l) + 20 * 1%), 95%));
436
+ --theme-dark-secondary-custom-100: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -0.6)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.7)) );
437
+ --theme-dark-secondary-custom-200: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -0.4)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.5)) );
438
+ --theme-dark-secondary-custom-300: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + (var(--theme-dark-secondary-color-s) * -0.3)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.2)) );
439
+ --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l));
440
+ --theme-dark-secondary-custom-500: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * 0.5)) );
441
+ --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), calc(var(--theme-dark-secondary-color-l) + ((100% - var(--theme-dark-secondary-color-l)) * 0.8)) );
442
442
  --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
443
443
  --theme-dark-secondary-custom-focus-ring: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
444
444
  color: var(--theme-body-font-color, var(--black-600));
@@ -572,25 +572,25 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
572
572
  --orange-100: hsl(27, 29%, 19%);
573
573
  --orange-200: hsl(27, 29%, 19%);
574
574
  --orange-300: hsl(27, 80%, 64%);
575
- --orange-400: hsl(27, 80%, 80%);
575
+ --orange-400: hsl(27, 80%, 72%);
576
576
  --orange-500: hsl(27, 79%, 89%);
577
577
  --orange-600: hsl(27, 80%, 93%);
578
578
  --blue-100: hsl(209, 29%, 19%);
579
579
  --blue-200: hsl(209, 29%, 19%);
580
580
  --blue-300: hsl(210, 80%, 72%);
581
- --blue-400: hsl(210, 80%, 80%);
581
+ --blue-400: hsl(210, 80%, 75%);
582
582
  --blue-500: hsl(209, 79%, 87%);
583
583
  --blue-600: hsl(210, 80%, 93%);
584
584
  --green-100: hsl(147, 29%, 19%);
585
585
  --green-200: hsl(147, 29%, 19%);
586
586
  --green-300: hsl(148, 40%, 62%);
587
- --green-400: hsl(148, 40%, 75%);
587
+ --green-400: hsl(148, 40%, 68%);
588
588
  --green-500: hsl(148, 39%, 87%);
589
589
  --green-600: hsl(148, 40%, 93%);
590
590
  --red-100: hsl(358, 29%, 19%);
591
591
  --red-200: hsl(358, 29%, 19%);
592
592
  --red-300: hsl(0, 75%, 77%);
593
- --red-400: hsl(0, 73%, 85%);
593
+ --red-400: hsl(0, 73%, 80%);
594
594
  --red-500: hsl(0, 70%, 92%);
595
595
  --red-600: hsl(0, 73%, 95%);
596
596
  --yellow-100: hsl(43, 29%, 17%);
@@ -602,7 +602,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
602
602
  --purple-100: hsl(237, 25%, 24%);
603
603
  --purple-200: hsl(237, 25%, 24%);
604
604
  --purple-300: hsl(237, 58%, 86%);
605
- --purple-400: hsl(237, 58%, 86%);
605
+ --purple-400: hsl(237, 60%, 82%);
606
606
  --purple-500: hsl(237, 65%, 96%);
607
607
  --purple-600: hsl(237, 65%, 96%);
608
608
  --gold-100: hsl(45, 22%, 25%);
@@ -680,25 +680,25 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
680
680
  --orange-100: hsl(27, 29%, 19%);
681
681
  --orange-200: hsl(27, 29%, 19%);
682
682
  --orange-300: hsl(27, 80%, 64%);
683
- --orange-400: hsl(27, 80%, 80%);
683
+ --orange-400: hsl(27, 80%, 72%);
684
684
  --orange-500: hsl(27, 79%, 89%);
685
685
  --orange-600: hsl(27, 80%, 93%);
686
686
  --blue-100: hsl(209, 29%, 19%);
687
687
  --blue-200: hsl(209, 29%, 19%);
688
688
  --blue-300: hsl(210, 80%, 72%);
689
- --blue-400: hsl(210, 80%, 80%);
689
+ --blue-400: hsl(210, 80%, 75%);
690
690
  --blue-500: hsl(209, 79%, 87%);
691
691
  --blue-600: hsl(210, 80%, 93%);
692
692
  --green-100: hsl(147, 29%, 19%);
693
693
  --green-200: hsl(147, 29%, 19%);
694
694
  --green-300: hsl(148, 40%, 62%);
695
- --green-400: hsl(148, 40%, 75%);
695
+ --green-400: hsl(148, 40%, 68%);
696
696
  --green-500: hsl(148, 39%, 87%);
697
697
  --green-600: hsl(148, 40%, 93%);
698
698
  --red-100: hsl(358, 29%, 19%);
699
699
  --red-200: hsl(358, 29%, 19%);
700
700
  --red-300: hsl(0, 75%, 77%);
701
- --red-400: hsl(0, 73%, 85%);
701
+ --red-400: hsl(0, 73%, 80%);
702
702
  --red-500: hsl(0, 70%, 92%);
703
703
  --red-600: hsl(0, 73%, 95%);
704
704
  --yellow-100: hsl(43, 29%, 17%);
@@ -710,7 +710,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
710
710
  --purple-100: hsl(237, 25%, 24%);
711
711
  --purple-200: hsl(237, 25%, 24%);
712
712
  --purple-300: hsl(237, 58%, 86%);
713
- --purple-400: hsl(237, 58%, 86%);
713
+ --purple-400: hsl(237, 60%, 82%);
714
714
  --purple-500: hsl(237, 65%, 96%);
715
715
  --purple-600: hsl(237, 65%, 96%);
716
716
  --gold-100: hsl(45, 22%, 25%);
package/lib/exports/color-mixins.less CHANGED
@@ -210,17 +210,20 @@
210
210
  .create-custom-theme-variables(@tier: primary, @modeCustom: base) {
211
211
  @valueVar: ~"theme-@{modeCustom}-@{tier}-color";
212
212
  @focusRingHSLVars: ~"var(--@{valueVar}-h), var(--@{valueVar}-s), var(--@{valueVar}-l)";
213
+ @varH: var(~"--@{valueVar}-h");
214
+ @varS: var(~"--@{valueVar}-s");
215
+ @varL: var(~"--@{valueVar}-l");
213
216
 
214
217
  // TODO verify color stops with design
215
218
  & when (@modeCustom = base) {
216
219
  @varBase: ~"--theme-@{tier}-custom";
217
220
 
218
- @{varBase}-100: .native-lightness(@valueVar, 50, 70, 95)[];
219
- @{varBase}-200: .native-lightness(@valueVar, 35, 55, 90)[];
220
- @{varBase}-300: .native-lightness(@valueVar, 15, 35, 75)[];
221
- @{varBase}-400: .native-lightness(@valueVar, 0, 20, 60)[];
222
- @{varBase}-500: .native-lightness(@valueVar, -14, 13, 50)[];
223
- @{varBase}-600: .native-lightness(@valueVar, -26, 5, 40)[];
221
+ @{varBase}-100: ~"hsl(@{varH}, @{varS}, " .alter-hsl-var(@varL, .9) ~")";
222
+ @{varBase}-200: ~"hsl(@{varH}, @{varS}, " .alter-hsl-var(@varL, .75) ~")";
223
+ @{varBase}-300: ~"hsl(@{varH}, @{varS}, " .alter-hsl-var(@varL, .5) ~")";
224
+ @{varBase}-400: ~"hsl(@{varH}, @{varS}, @{varL})";
225
+ @{varBase}-500: ~"hsl(@{varH}, @{varS}, " .alter-hsl-var(@varL, -.3) ~")";
226
+ @{varBase}-600: ~"hsl(@{varH}, @{varS}, " .alter-hsl-var(@varL, -.6) ~")";
224
227
  @{varBase}: ~"var(@{varBase}-400)";
225
228
 
226
229
  & when (@tier = secondary) {
@@ -231,12 +234,12 @@
231
234
  & when (@modeCustom = dark) {
232
235
  @varBaseDark: ~"--theme-@{modeCustom}-@{tier}-custom";
233
236
 
234
- @{varBaseDark}-100: .native-saturation-lightness(@valueVar, -12, -60, 15, 30)[];
235
- @{varBaseDark}-200: .native-saturation-lightness(@valueVar, -10, -45, 25, 45)[];
236
- @{varBaseDark}-300: .native-saturation-lightness(@valueVar, -7, -33, 35, 70)[];
237
- @{varBaseDark}-400: .native-lightness(@valueVar, 0, 55, 85)[];
238
- @{varBaseDark}-500: .native-lightness(@valueVar, 10, 70, 90)[];
239
- @{varBaseDark}-600: .native-lightness(@valueVar, 20, 85, 95)[];
237
+ @{varBaseDark}-100: ~"hsl(@{varH}, " .alter-hsl-var(@varS, -.6), .alter-hsl-var(@varL, -.7) ~")";
238
+ @{varBaseDark}-200: ~"hsl(@{varH}, " .alter-hsl-var(@varS, -.4), .alter-hsl-var(@varL, -.5) ~")";
239
+ @{varBaseDark}-300: ~"hsl(@{varH}, " .alter-hsl-var(@varS, -.3), .alter-hsl-var(@varL, -.2) ~")";
240
+ @{varBaseDark}-400: ~"hsl(@{varH}, @{varS}, @{varL})";
241
+ @{varBaseDark}-500: ~"hsl(@{varH}, @{varS}, " .alter-hsl-var(@varL, .5) ~")";
242
+ @{varBaseDark}-600: ~"hsl(@{varH}, @{varS}, " .alter-hsl-var(@varL, .8) ~")";
240
243
  @{varBaseDark}: ~"var(@{varBaseDark}-400)";
241
244
 
242
245
  & when (@tier = secondary) {
package/lib/exports/color-sets.less CHANGED
@@ -97,8 +97,8 @@
97
97
  100: hsl(27, 29%, 19%);
98
98
  200: hsl(27, 43%, 31%);
99
99
  300: hsl(27, 43%, 47%);
100
- 400: hsl(27, 80%, 80%);
101
- 500: hsl(27, 80%, 88%);
100
+ 400: hsl(27, 80%, 72%);
101
+ 500: hsl(27, 80%, 83%);
102
102
  600: hsl(27, 80%, 93%);
103
103
  }
104
104
  .set-orange-hc() {
@@ -113,7 +113,7 @@
113
113
  100: hsl(27, 29%, 19%);
114
114
  200: hsl(27, 29%, 19%);
115
115
  300: hsl(27, 80%, 64%);
116
- 400: hsl(27, 80%, 80%);
116
+ 400: hsl(27, 80%, 72%);
117
117
  500: hsl(27, 79%, 89%);
118
118
  600: hsl(27, 80%, 93%);
119
119
  }
@@ -131,8 +131,8 @@
131
131
  100: hsl(209, 29%, 19%);
132
132
  200: hsl(210, 29%, 35%);
133
133
  300: hsl(210, 29%, 50%);
134
- 400: hsl(210, 80%, 80%);
135
- 500: hsl(210, 80%, 88%);
134
+ 400: hsl(210, 80%, 75%);
135
+ 500: hsl(210, 80%, 83%);
136
136
  600: hsl(210, 80%, 93%);
137
137
  }
138
138
  .set-blue-hc() {
@@ -147,7 +147,7 @@
147
147
  100: hsl(209, 29%, 19%);
148
148
  200: hsl(209, 29%, 19%);
149
149
  300: hsl(210, 80%, 72%);
150
- 400: hsl(210, 80%, 80%);
150
+ 400: hsl(210, 80%, 75%);
151
151
  500: hsl(209, 79%, 87%);
152
152
  600: hsl(210, 80%, 93%);
153
153
  }
@@ -165,8 +165,8 @@
165
165
  100: hsl(148, 29%, 19%);
166
166
  200: hsl(148, 29%, 27%);
167
167
  300: hsl(148, 25%, 40%);
168
- 400: hsl(148, 40%, 75%);
169
- 500: hsl(148, 40%, 85%);
168
+ 400: hsl(148, 40%, 68%);
169
+ 500: hsl(148, 40%, 80%);
170
170
  600: hsl(148, 40%, 93%);
171
171
  }
172
172
  .set-green-hc() {
@@ -181,7 +181,7 @@
181
181
  100: hsl(147, 29%, 19%);
182
182
  200: hsl(147, 29%, 19%);
183
183
  300: hsl(148, 40%, 62%);
184
- 400: hsl(148, 40%, 75%);
184
+ 400: hsl(148, 40%, 68%);
185
185
  500: hsl(148, 39%, 87%);
186
186
  600: hsl(148, 40%, 93%);
187
187
  }
@@ -199,8 +199,8 @@
199
199
  100: hsl(358, 29%, 19%);
200
200
  200: hsl(0, 29%, 37%);
201
201
  300: hsl(0, 34%, 54%);
202
- 400: hsl(0, 73%, 85%);
203
- 500: hsl(0, 73%, 91%);
202
+ 400: hsl(0, 73%, 80%);
203
+ 500: hsl(0, 73%, 88%);
204
204
  600: hsl(0, 73%, 95%);
205
205
  }
206
206
  .set-red-hc() {
@@ -215,7 +215,7 @@
215
215
  100: hsl(358, 29%, 19%);
216
216
  200: hsl(358, 29%, 19%);
217
217
  300: hsl(0, 75%, 77%);
218
- 400: hsl(0, 73%, 85%);
218
+ 400: hsl(0, 73%, 80%);
219
219
  500: hsl(0, 70%, 92%);
220
220
  600: hsl(0, 73%, 95%);
221
221
  }
@@ -234,7 +234,7 @@
234
234
  200: hsl(43, 29%, 25%);
235
235
  300: hsl(43, 29%, 40%);
236
236
  400: hsl(43, 75%, 75%);
237
- 500: hsl(43, 75%, 85%);
237
+ 500: hsl(43, 75%, 82%);
238
238
  600: hsl(43, 75%, 91%);
239
239
  }
240
240
  .set-yellow-hc() {
@@ -267,8 +267,8 @@
267
267
  100: hsl(237, 25%, 24%);
268
268
  200: hsl(237, 27%, 38%);
269
269
  300: hsl(237, 32%, 56%);
270
- 400: hsl(237, 58%, 86%);
271
- 500: hsl(237, 60%, 91%);
270
+ 400: hsl(237, 60%, 82%);
271
+ 500: hsl(237, 60%, 88%);
272
272
  600: hsl(237, 65%, 96%);
273
273
  }
274
274
  .set-purple-hc() {
@@ -283,7 +283,7 @@
283
283
  100: hsl(237, 25%, 24%);
284
284
  200: hsl(237, 25%, 24%);
285
285
  300: hsl(237, 58%, 86%);
286
- 400: hsl(237, 58%, 86%);
286
+ 400: hsl(237, 60%, 82%);
287
287
  500: hsl(237, 65%, 96%);
288
288
  600: hsl(237, 65%, 96%);
289
289
  }
package/lib/exports/mixins.less CHANGED
@@ -139,15 +139,41 @@
139
139
  }
140
140
 
141
141
 
142
- .native-lightness(@color-prefix, @lMod: 0, @min: 0, @max: 100) {
143
- .native-saturation-lightness(@color-prefix, 0, @lMod, @min, @max);
142
+ .alter-hsl-var(@baseAmount, @change: 0%, @max: 100%) {
143
+ & when (@change > 0) {
144
+ calc(@baseAmount + ((@max - @baseAmount) * @change));
145
+ }
146
+ & when(@change < 0) {
147
+ calc(@baseAmount + (@baseAmount * @change));
148
+ }
144
149
  }
145
150
 
146
- // Increase the lightness of a color in the HSL color space by an absolute amount and include custom clamp values.
147
- .native-saturation-lightness(@color-prefix, @sMod: 0, @lMod: 0, @min: 0, @max: 100) {
148
- @result: hsl(var(~"--@{color-prefix}-h"),
149
- calc(var(~"--@{color-prefix}-s") + @sMod * 1%),
150
- clamp(@min * 1%, calc(var(~"--@{color-prefix}-l") + @lMod * 1%), @max * 1%));
151
+
152
+ // Alter the lightness of a color in the HSL color space
153
+ .native-lightness(@color-prefix, @lMod: 0) {
154
+ @result: hsl(
155
+ var(~"--@{color-prefix}-h"),
156
+ var(~"--@{color-prefix}-s"),
157
+ calc(
158
+ var(~"--@{color-prefix}-l") +
159
+ ((100% - var(~"--@{color-prefix}-l")) * @lMod)
160
+ )
161
+ );
162
+ }
163
+
164
+ // Alter the saturation and lightness of a color in the HSL color space
165
+ .native-saturation-lightness(@color-prefix, @sMod: 0, @lMod: 0) {
166
+ @result: hsl(
167
+ var(~"--@{color-prefix}-h"),
168
+ calc(
169
+ var(~"--@{color-prefix}-s") +
170
+ ((100% - var(~"--@{color-prefix}-s")) * @sMod)
171
+ ),
172
+ calc(
173
+ var(~"--@{color-prefix}-l") +
174
+ ((100% - var(~"--@{color-prefix}-l")) * @lMod)
175
+ )
176
+ );
151
177
  }
152
178
 
153
179
  // Decrease the lightness and saturation of a color in the HSL color space by absolute amounts.
@@ -155,10 +181,11 @@
155
181
  @darkenAmountPercentage: .load-color-variables(@darken-amount)[@amountPercentage];
156
182
  @desaturateAmountPercentage: .load-color-variables(@desaturate-amount)[@amountPercentage];
157
183
  @result: hsl(var(~"--@{color-prefix}-h"),
158
- clamp(10%, calc(var(~"--@{color-prefix}-s") - @desaturateAmountPercentage), 90%),
159
- clamp(20%, calc(var(~"--@{color-prefix}-l") - @darkenAmountPercentage), 100%));
184
+ calc(var(~"--@{color-prefix}-s") - @desaturateAmountPercentage),
185
+ calc(var(~"--@{color-prefix}-l") - @darkenAmountPercentage));
160
186
  }
161
187
 
188
+
162
189
  // Decrease the lightness of a color in the HSL color space by an absolute amount.
163
190
  .native-darken(@color-prefix, @amount) {
164
191
  .load-color-variables(@amount);
package/lib/exports/v1/__snapshots__/constants-colors.less.test.ts.snap CHANGED
@@ -304,13 +304,13 @@ body:not(.theme-dark) .theme-dark__forced .themed {
304
304
  --theme-secondary-color-legacy-b: var(--theme-dark-secondary-color-legacy-b, var(--theme-base-secondary-color-legacy-b));
305
305
  --theme-primary-color-legacy: hsl(var(--theme-primary-color-legacy-h), var(--theme-primary-color-legacy-s), var(--theme-primary-color-legacy-l));
306
306
  --theme-secondary-color-legacy: hsl(var(--theme-secondary-color-legacy-h), var(--theme-secondary-color-legacy-s), var(--theme-secondary-color-legacy-l));
307
- --theme-primary-legacy-025: hsl(var(--theme-primary-color-legacy-h), clamp(10%, calc(var(--theme-primary-color-legacy-s) - 73.3%), 90%), clamp(20%, calc(var(--theme-primary-color-legacy-l) - 31%), 100%));
308
- --theme-primary-legacy-050: hsl(var(--theme-primary-color-legacy-h), clamp(10%, calc(var(--theme-primary-color-legacy-s) - 47%), 90%), clamp(20%, calc(var(--theme-primary-color-legacy-l) - 15%), 100%));
309
- --theme-primary-legacy-075: hsl(var(--theme-primary-color-legacy-h), clamp(10%, calc(var(--theme-primary-color-legacy-s) - 39%), 90%), clamp(20%, calc(var(--theme-primary-color-legacy-l) - 13%), 100%));
310
- --theme-primary-legacy-100: hsl(var(--theme-primary-color-legacy-h), clamp(10%, calc(var(--theme-primary-color-legacy-s) - 32%), 90%), clamp(20%, calc(var(--theme-primary-color-legacy-l) - 11%), 100%));
311
- --theme-primary-legacy-150: hsl(var(--theme-primary-color-legacy-h), clamp(10%, calc(var(--theme-primary-color-legacy-s) - 23%), 90%), clamp(20%, calc(var(--theme-primary-color-legacy-l) - 9%), 100%));
312
- --theme-primary-legacy-200: hsl(var(--theme-primary-color-legacy-h), clamp(10%, calc(var(--theme-primary-color-legacy-s) - 15%), 90%), clamp(20%, calc(var(--theme-primary-color-legacy-l) - 7%), 100%));
313
- --theme-primary-legacy-300: hsl(var(--theme-primary-color-legacy-h), clamp(10%, calc(var(--theme-primary-color-legacy-s) - 7%), 90%), clamp(20%, calc(var(--theme-primary-color-legacy-l) - 5%), 100%));
307
+ --theme-primary-legacy-025: hsl(var(--theme-primary-color-legacy-h), calc(var(--theme-primary-color-legacy-s) - 73.3%), calc(var(--theme-primary-color-legacy-l) - 31%));
308
+ --theme-primary-legacy-050: hsl(var(--theme-primary-color-legacy-h), calc(var(--theme-primary-color-legacy-s) - 47%), calc(var(--theme-primary-color-legacy-l) - 15%));
309
+ --theme-primary-legacy-075: hsl(var(--theme-primary-color-legacy-h), calc(var(--theme-primary-color-legacy-s) - 39%), calc(var(--theme-primary-color-legacy-l) - 13%));
310
+ --theme-primary-legacy-100: hsl(var(--theme-primary-color-legacy-h), calc(var(--theme-primary-color-legacy-s) - 32%), calc(var(--theme-primary-color-legacy-l) - 11%));
311
+ --theme-primary-legacy-150: hsl(var(--theme-primary-color-legacy-h), calc(var(--theme-primary-color-legacy-s) - 23%), calc(var(--theme-primary-color-legacy-l) - 9%));
312
+ --theme-primary-legacy-200: hsl(var(--theme-primary-color-legacy-h), calc(var(--theme-primary-color-legacy-s) - 15%), calc(var(--theme-primary-color-legacy-l) - 7%));
313
+ --theme-primary-legacy-300: hsl(var(--theme-primary-color-legacy-h), calc(var(--theme-primary-color-legacy-s) - 7%), calc(var(--theme-primary-color-legacy-l) - 5%));
314
314
  --theme-primary-legacy-350: var(--theme-primary-color-legacy);
315
315
  --theme-primary-legacy-400: rgb(calc(53.55 + var(--theme-primary-color-legacy-r) * 0.79), calc(53.55 + var(--theme-primary-color-legacy-g) * 0.79), calc(53.55 + var(--theme-primary-color-legacy-b) * 0.79));
316
316
  --theme-primary-legacy-500: rgb(calc(91.8 + var(--theme-primary-color-legacy-r) * 0.64), calc(91.8 + var(--theme-primary-color-legacy-g) * 0.64), calc(91.8 + var(--theme-primary-color-legacy-b) * 0.64));
@@ -318,13 +318,13 @@ body:not(.theme-dark) .theme-dark__forced .themed {
318
318
  --theme-primary-legacy-700: rgb(calc(168.3 + var(--theme-primary-color-legacy-r) * 0.34), calc(168.3 + var(--theme-primary-color-legacy-g) * 0.34), calc(168.3 + var(--theme-primary-color-legacy-b) * 0.34));
319
319
  --theme-primary-legacy-800: rgb(calc(206.55 + var(--theme-primary-color-legacy-r) * 0.19), calc(206.55 + var(--theme-primary-color-legacy-g) * 0.19), calc(206.55 + var(--theme-primary-color-legacy-b) * 0.19));
320
320
  --theme-primary-legacy-900: rgb(calc(244.8 + var(--theme-primary-color-legacy-r) * 0.04), calc(244.8 + var(--theme-primary-color-legacy-g) * 0.04), calc(244.8 + var(--theme-primary-color-legacy-b) * 0.04));
321
- --theme-secondary-legacy-025: hsl(var(--theme-secondary-color-legacy-h), clamp(10%, calc(var(--theme-secondary-color-legacy-s) - 73.3%), 90%), clamp(20%, calc(var(--theme-secondary-color-legacy-l) - 31%), 100%));
322
- --theme-secondary-legacy-050: hsl(var(--theme-secondary-color-legacy-h), clamp(10%, calc(var(--theme-secondary-color-legacy-s) - 47%), 90%), clamp(20%, calc(var(--theme-secondary-color-legacy-l) - 15%), 100%));
323
- --theme-secondary-legacy-075: hsl(var(--theme-secondary-color-legacy-h), clamp(10%, calc(var(--theme-secondary-color-legacy-s) - 39%), 90%), clamp(20%, calc(var(--theme-secondary-color-legacy-l) - 13%), 100%));
324
- --theme-secondary-legacy-100: hsl(var(--theme-secondary-color-legacy-h), clamp(10%, calc(var(--theme-secondary-color-legacy-s) - 32%), 90%), clamp(20%, calc(var(--theme-secondary-color-legacy-l) - 11%), 100%));
325
- --theme-secondary-legacy-150: hsl(var(--theme-secondary-color-legacy-h), clamp(10%, calc(var(--theme-secondary-color-legacy-s) - 23%), 90%), clamp(20%, calc(var(--theme-secondary-color-legacy-l) - 9%), 100%));
326
- --theme-secondary-legacy-200: hsl(var(--theme-secondary-color-legacy-h), clamp(10%, calc(var(--theme-secondary-color-legacy-s) - 15%), 90%), clamp(20%, calc(var(--theme-secondary-color-legacy-l) - 7%), 100%));
327
- --theme-secondary-legacy-300: hsl(var(--theme-secondary-color-legacy-h), clamp(10%, calc(var(--theme-secondary-color-legacy-s) - 7%), 90%), clamp(20%, calc(var(--theme-secondary-color-legacy-l) - 5%), 100%));
321
+ --theme-secondary-legacy-025: hsl(var(--theme-secondary-color-legacy-h), calc(var(--theme-secondary-color-legacy-s) - 73.3%), calc(var(--theme-secondary-color-legacy-l) - 31%));
322
+ --theme-secondary-legacy-050: hsl(var(--theme-secondary-color-legacy-h), calc(var(--theme-secondary-color-legacy-s) - 47%), calc(var(--theme-secondary-color-legacy-l) - 15%));
323
+ --theme-secondary-legacy-075: hsl(var(--theme-secondary-color-legacy-h), calc(var(--theme-secondary-color-legacy-s) - 39%), calc(var(--theme-secondary-color-legacy-l) - 13%));
324
+ --theme-secondary-legacy-100: hsl(var(--theme-secondary-color-legacy-h), calc(var(--theme-secondary-color-legacy-s) - 32%), calc(var(--theme-secondary-color-legacy-l) - 11%));
325
+ --theme-secondary-legacy-150: hsl(var(--theme-secondary-color-legacy-h), calc(var(--theme-secondary-color-legacy-s) - 23%), calc(var(--theme-secondary-color-legacy-l) - 9%));
326
+ --theme-secondary-legacy-200: hsl(var(--theme-secondary-color-legacy-h), calc(var(--theme-secondary-color-legacy-s) - 15%), calc(var(--theme-secondary-color-legacy-l) - 7%));
327
+ --theme-secondary-legacy-300: hsl(var(--theme-secondary-color-legacy-h), calc(var(--theme-secondary-color-legacy-s) - 7%), calc(var(--theme-secondary-color-legacy-l) - 5%));
328
328
  --theme-secondary-legacy-350: var(--theme-secondary-color-legacy);
329
329
  --theme-secondary-legacy-400: rgb(calc(53.55 + var(--theme-secondary-color-legacy-r) * 0.79), calc(53.55 + var(--theme-secondary-color-legacy-g) * 0.79), calc(53.55 + var(--theme-secondary-color-legacy-b) * 0.79));
330
330
  --theme-secondary-legacy-500: rgb(calc(91.8 + var(--theme-secondary-color-legacy-r) * 0.64), calc(91.8 + var(--theme-secondary-color-legacy-g) * 0.64), calc(91.8 + var(--theme-secondary-color-legacy-b) * 0.64));
@@ -457,13 +457,13 @@ body:not(.theme-dark) .theme-dark__forced .themed {
457
457
  --theme-secondary-color-legacy-b: var(--theme-dark-secondary-color-legacy-b, var(--theme-base-secondary-color-legacy-b));
458
458
  --theme-primary-color-legacy: hsl(var(--theme-primary-color-legacy-h), var(--theme-primary-color-legacy-s), var(--theme-primary-color-legacy-l));
459
459
  --theme-secondary-color-legacy: hsl(var(--theme-secondary-color-legacy-h), var(--theme-secondary-color-legacy-s), var(--theme-secondary-color-legacy-l));
460
- --theme-primary-legacy-025: hsl(var(--theme-primary-color-legacy-h), clamp(10%, calc(var(--theme-primary-color-legacy-s) - 73.3%), 90%), clamp(20%, calc(var(--theme-primary-color-legacy-l) - 31%), 100%));
461
- --theme-primary-legacy-050: hsl(var(--theme-primary-color-legacy-h), clamp(10%, calc(var(--theme-primary-color-legacy-s) - 47%), 90%), clamp(20%, calc(var(--theme-primary-color-legacy-l) - 15%), 100%));
462
- --theme-primary-legacy-075: hsl(var(--theme-primary-color-legacy-h), clamp(10%, calc(var(--theme-primary-color-legacy-s) - 39%), 90%), clamp(20%, calc(var(--theme-primary-color-legacy-l) - 13%), 100%));
463
- --theme-primary-legacy-100: hsl(var(--theme-primary-color-legacy-h), clamp(10%, calc(var(--theme-primary-color-legacy-s) - 32%), 90%), clamp(20%, calc(var(--theme-primary-color-legacy-l) - 11%), 100%));
464
- --theme-primary-legacy-150: hsl(var(--theme-primary-color-legacy-h), clamp(10%, calc(var(--theme-primary-color-legacy-s) - 23%), 90%), clamp(20%, calc(var(--theme-primary-color-legacy-l) - 9%), 100%));
465
- --theme-primary-legacy-200: hsl(var(--theme-primary-color-legacy-h), clamp(10%, calc(var(--theme-primary-color-legacy-s) - 15%), 90%), clamp(20%, calc(var(--theme-primary-color-legacy-l) - 7%), 100%));
466
- --theme-primary-legacy-300: hsl(var(--theme-primary-color-legacy-h), clamp(10%, calc(var(--theme-primary-color-legacy-s) - 7%), 90%), clamp(20%, calc(var(--theme-primary-color-legacy-l) - 5%), 100%));
460
+ --theme-primary-legacy-025: hsl(var(--theme-primary-color-legacy-h), calc(var(--theme-primary-color-legacy-s) - 73.3%), calc(var(--theme-primary-color-legacy-l) - 31%));
461
+ --theme-primary-legacy-050: hsl(var(--theme-primary-color-legacy-h), calc(var(--theme-primary-color-legacy-s) - 47%), calc(var(--theme-primary-color-legacy-l) - 15%));
462
+ --theme-primary-legacy-075: hsl(var(--theme-primary-color-legacy-h), calc(var(--theme-primary-color-legacy-s) - 39%), calc(var(--theme-primary-color-legacy-l) - 13%));
463
+ --theme-primary-legacy-100: hsl(var(--theme-primary-color-legacy-h), calc(var(--theme-primary-color-legacy-s) - 32%), calc(var(--theme-primary-color-legacy-l) - 11%));
464
+ --theme-primary-legacy-150: hsl(var(--theme-primary-color-legacy-h), calc(var(--theme-primary-color-legacy-s) - 23%), calc(var(--theme-primary-color-legacy-l) - 9%));
465
+ --theme-primary-legacy-200: hsl(var(--theme-primary-color-legacy-h), calc(var(--theme-primary-color-legacy-s) - 15%), calc(var(--theme-primary-color-legacy-l) - 7%));
466
+ --theme-primary-legacy-300: hsl(var(--theme-primary-color-legacy-h), calc(var(--theme-primary-color-legacy-s) - 7%), calc(var(--theme-primary-color-legacy-l) - 5%));
467
467
  --theme-primary-legacy-350: var(--theme-primary-color-legacy);
468
468
  --theme-primary-legacy-400: rgb(calc(53.55 + var(--theme-primary-color-legacy-r) * 0.79), calc(53.55 + var(--theme-primary-color-legacy-g) * 0.79), calc(53.55 + var(--theme-primary-color-legacy-b) * 0.79));
469
469
  --theme-primary-legacy-500: rgb(calc(91.8 + var(--theme-primary-color-legacy-r) * 0.64), calc(91.8 + var(--theme-primary-color-legacy-g) * 0.64), calc(91.8 + var(--theme-primary-color-legacy-b) * 0.64));
@@ -471,13 +471,13 @@ body:not(.theme-dark) .theme-dark__forced .themed {
471
471
  --theme-primary-legacy-700: rgb(calc(168.3 + var(--theme-primary-color-legacy-r) * 0.34), calc(168.3 + var(--theme-primary-color-legacy-g) * 0.34), calc(168.3 + var(--theme-primary-color-legacy-b) * 0.34));
472
472
  --theme-primary-legacy-800: rgb(calc(206.55 + var(--theme-primary-color-legacy-r) * 0.19), calc(206.55 + var(--theme-primary-color-legacy-g) * 0.19), calc(206.55 + var(--theme-primary-color-legacy-b) * 0.19));
473
473
  --theme-primary-legacy-900: rgb(calc(244.8 + var(--theme-primary-color-legacy-r) * 0.04), calc(244.8 + var(--theme-primary-color-legacy-g) * 0.04), calc(244.8 + var(--theme-primary-color-legacy-b) * 0.04));
474
- --theme-secondary-legacy-025: hsl(var(--theme-secondary-color-legacy-h), clamp(10%, calc(var(--theme-secondary-color-legacy-s) - 73.3%), 90%), clamp(20%, calc(var(--theme-secondary-color-legacy-l) - 31%), 100%));
475
- --theme-secondary-legacy-050: hsl(var(--theme-secondary-color-legacy-h), clamp(10%, calc(var(--theme-secondary-color-legacy-s) - 47%), 90%), clamp(20%, calc(var(--theme-secondary-color-legacy-l) - 15%), 100%));
476
- --theme-secondary-legacy-075: hsl(var(--theme-secondary-color-legacy-h), clamp(10%, calc(var(--theme-secondary-color-legacy-s) - 39%), 90%), clamp(20%, calc(var(--theme-secondary-color-legacy-l) - 13%), 100%));
477
- --theme-secondary-legacy-100: hsl(var(--theme-secondary-color-legacy-h), clamp(10%, calc(var(--theme-secondary-color-legacy-s) - 32%), 90%), clamp(20%, calc(var(--theme-secondary-color-legacy-l) - 11%), 100%));
478
- --theme-secondary-legacy-150: hsl(var(--theme-secondary-color-legacy-h), clamp(10%, calc(var(--theme-secondary-color-legacy-s) - 23%), 90%), clamp(20%, calc(var(--theme-secondary-color-legacy-l) - 9%), 100%));
479
- --theme-secondary-legacy-200: hsl(var(--theme-secondary-color-legacy-h), clamp(10%, calc(var(--theme-secondary-color-legacy-s) - 15%), 90%), clamp(20%, calc(var(--theme-secondary-color-legacy-l) - 7%), 100%));
480
- --theme-secondary-legacy-300: hsl(var(--theme-secondary-color-legacy-h), clamp(10%, calc(var(--theme-secondary-color-legacy-s) - 7%), 90%), clamp(20%, calc(var(--theme-secondary-color-legacy-l) - 5%), 100%));
474
+ --theme-secondary-legacy-025: hsl(var(--theme-secondary-color-legacy-h), calc(var(--theme-secondary-color-legacy-s) - 73.3%), calc(var(--theme-secondary-color-legacy-l) - 31%));
475
+ --theme-secondary-legacy-050: hsl(var(--theme-secondary-color-legacy-h), calc(var(--theme-secondary-color-legacy-s) - 47%), calc(var(--theme-secondary-color-legacy-l) - 15%));
476
+ --theme-secondary-legacy-075: hsl(var(--theme-secondary-color-legacy-h), calc(var(--theme-secondary-color-legacy-s) - 39%), calc(var(--theme-secondary-color-legacy-l) - 13%));
477
+ --theme-secondary-legacy-100: hsl(var(--theme-secondary-color-legacy-h), calc(var(--theme-secondary-color-legacy-s) - 32%), calc(var(--theme-secondary-color-legacy-l) - 11%));
478
+ --theme-secondary-legacy-150: hsl(var(--theme-secondary-color-legacy-h), calc(var(--theme-secondary-color-legacy-s) - 23%), calc(var(--theme-secondary-color-legacy-l) - 9%));
479
+ --theme-secondary-legacy-200: hsl(var(--theme-secondary-color-legacy-h), calc(var(--theme-secondary-color-legacy-s) - 15%), calc(var(--theme-secondary-color-legacy-l) - 7%));
480
+ --theme-secondary-legacy-300: hsl(var(--theme-secondary-color-legacy-h), calc(var(--theme-secondary-color-legacy-s) - 7%), calc(var(--theme-secondary-color-legacy-l) - 5%));
481
481
  --theme-secondary-legacy-350: var(--theme-secondary-color-legacy);
482
482
  --theme-secondary-legacy-400: rgb(calc(53.55 + var(--theme-secondary-color-legacy-r) * 0.79), calc(53.55 + var(--theme-secondary-color-legacy-g) * 0.79), calc(53.55 + var(--theme-secondary-color-legacy-b) * 0.79));
483
483
  --theme-secondary-legacy-500: rgb(calc(91.8 + var(--theme-secondary-color-legacy-r) * 0.64), calc(91.8 + var(--theme-secondary-color-legacy-g) * 0.64), calc(91.8 + var(--theme-secondary-color-legacy-b) * 0.64));
package/package.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "type": "git",
6
6
  "url": "https://github.com/StackExchange/Stacks.git"
7
7
  },
8
- "version": "2.0.0-rc.11",
8
+ "version": "2.0.0-rc.13",
9
9
  "files": [
10
10
  "dist",
11
11
  "lib"