@stackoverflow/stacks 2.0.0-rc.9 → 2.0.1

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 (35) hide show
  1. package/dist/css/stacks.css +268 -233
  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/badge/badge.less +10 -10
  6. package/lib/components/checkbox_radio/checkbox_radio.less +14 -8
  7. package/lib/components/code-block/code-block.a11y.test.ts +1 -1
  8. package/lib/components/input-fill/input-fill.a11y.test.ts +22 -0
  9. package/lib/components/input-fill/input-fill.visual.test.ts +22 -0
  10. package/lib/components/input-message/input-message.a11y.test.ts +58 -0
  11. package/lib/components/input-message/input-message.visual.test.ts +59 -0
  12. package/lib/components/input_textarea/input_textarea.a11y.test.ts +112 -0
  13. package/lib/components/input_textarea/input_textarea.visual.test.ts +98 -0
  14. package/lib/components/label/label.less +1 -1
  15. package/lib/components/link-preview/link-preview.less +2 -2
  16. package/lib/components/modal/modal.less +1 -0
  17. package/lib/components/navigation/navigation.a11y.test.ts +0 -2
  18. package/lib/components/page-title/page-title.a11y.test.ts +29 -0
  19. package/lib/components/page-title/page-title.visual.test.ts +59 -0
  20. package/lib/components/post-summary/post-summary.less +5 -5
  21. package/lib/components/tag/tag.a11y.test.ts +29 -0
  22. package/lib/components/tag/tag.less +31 -17
  23. package/lib/components/tag/tag.visual.test.ts +46 -0
  24. package/lib/components/toggle-switch/toggle-switch.less +8 -1
  25. package/lib/components/topbar/topbar.less +30 -14
  26. package/lib/components/uploader/uploader.less +1 -1
  27. package/lib/components/user-card/user-card.less +2 -2
  28. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +62 -62
  29. package/lib/exports/__snapshots__/color.less.test.ts.snap +137 -137
  30. package/lib/exports/color-mixins.less +15 -12
  31. package/lib/exports/color-sets.less +56 -56
  32. package/lib/exports/mixins.less +3 -14
  33. package/lib/exports/v1/__snapshots__/constants-colors.less.test.ts.snap +28 -28
  34. package/lib/test/test-utils.ts +1 -3
  35. package/package.json +9 -9
package/lib/exports/__snapshots__/color.less.test.ts.snap CHANGED
@@ -114,8 +114,8 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
114
114
  --yellow-400: hsl(43, 85%, 50%);
115
115
  --yellow-500: hsl(43, 85%, 33%);
116
116
  --yellow-600: hsl(43, 84%, 18%);
117
- --purple-100: hsl(237, 80%, 96%);
118
- --purple-200: hsl(237, 77%, 92%);
117
+ --purple-100: hsl(237, 83%, 98%);
118
+ --purple-200: hsl(237, 78%, 93%);
119
119
  --purple-300: hsl(237, 60%, 83%);
120
120
  --purple-400: hsl(237, 55%, 57%);
121
121
  --purple-500: hsl(237, 50%, 45%);
@@ -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)) * .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)) * .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)) * .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) * -.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) * -.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)) * .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)) * .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)) * .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) * -.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) * -.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
- --purple-100: hsl(237, 25%, 24%);
245
- --purple-200: hsl(237, 27%, 38%);
244
+ --purple-100: hsl(237, 24%, 23%);
245
+ --purple-200: hsl(237, 27%, 34%);
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) * -.6)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.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) * -.4)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.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) * -.3)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.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)) * .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)) * .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) * -.6)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -.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) * -.4)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -.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) * -.3)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -.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)) * .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)) * .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
- --purple-100: hsl(237, 25%, 24%);
370
- --purple-200: hsl(237, 27%, 38%);
369
+ --purple-100: hsl(237, 24%, 23%);
370
+ --purple-200: hsl(237, 27%, 34%);
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) * -.6)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.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) * -.4)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.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) * -.3)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -.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)) * .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)) * .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) * -.6)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -.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) * -.4)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -.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) * -.3)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -.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)) * .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)) * .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));
@@ -461,8 +461,8 @@ body.theme-highcontrast.theme-system .theme-light__forced {
461
461
  --black-500: hsl(210, 8%, 25%);
462
462
  --black-600: hsl(210, 8%, 5%);
463
463
  --black: hsl(0, 0%, 0%);
464
- --orange-100: hsl(22, 85%, 97%);
465
- --orange-200: hsl(22, 85%, 97%);
464
+ --orange-100: hsl(23, 87%, 97%);
465
+ --orange-200: hsl(23, 87%, 97%);
466
466
  --orange-300: hsl(27, 90%, 55%);
467
467
  --orange-400: hsl(27, 90%, 55%);
468
468
  --orange-500: hsl(27, 80%, 28%);
@@ -477,10 +477,10 @@ body.theme-highcontrast.theme-system .theme-light__forced {
477
477
  --green-200: hsl(147, 36%, 95%);
478
478
  --green-300: hsl(148, 70%, 31%);
479
479
  --green-400: hsl(148, 75%, 22%);
480
- --green-500: hsl(147, 74%, 15%);
481
- --green-600: hsl(147, 74%, 15%);
482
- --red-100: hsl(0, 79%, 96%);
483
- --red-200: hsl(0, 79%, 96%);
480
+ --green-500: hsl(146, 74%, 15%);
481
+ --green-600: hsl(146, 74%, 15%);
482
+ --red-100: hsl(0, 80%, 96%);
483
+ --red-200: hsl(0, 80%, 96%);
484
484
  --red-300: hsl(0, 60%, 49%);
485
485
  --red-400: hsl(0, 65%, 37%);
486
486
  --red-500: hsl(0, 66%, 24%);
@@ -491,8 +491,8 @@ body.theme-highcontrast.theme-system .theme-light__forced {
491
491
  --yellow-400: hsl(43, 85%, 50%);
492
492
  --yellow-500: hsl(48, 85%, 18%);
493
493
  --yellow-600: hsl(48, 85%, 18%);
494
- --purple-100: hsl(237, 80%, 96%);
495
- --purple-200: hsl(237, 80%, 96%);
494
+ --purple-100: hsl(237, 83%, 98%);
495
+ --purple-200: hsl(237, 83%, 98%);
496
496
  --purple-300: hsl(237, 55%, 57%);
497
497
  --purple-400: hsl(237, 55%, 57%);
498
498
  --purple-500: hsl(237, 50%, 32%);
@@ -504,7 +504,7 @@ body.theme-highcontrast.theme-system .theme-light__forced {
504
504
  --silver-100: hsl(0, 0%, 95%);
505
505
  --silver-200: hsl(0, 0%, 95%);
506
506
  --silver-300: hsl(210, 5%, 68%);
507
- --silver-400: hsl(216, 2%, 40%);
507
+ --silver-400: hsl(210, 2%, 40%);
508
508
  --bronze-100: hsl(28, 40%, 92%);
509
509
  --bronze-200: hsl(28, 40%, 92%);
510
510
  --bronze-300: hsl(28, 43%, 65%);
@@ -569,52 +569,52 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
569
569
  --black-500: hsl(210, 8%, 90%);
570
570
  --black-600: hsl(210, 11%, 98%);
571
571
  --black: hsl(0, 0%, 100%);
572
- --orange-100: hsl(27, 29%, 19%);
573
- --orange-200: hsl(27, 29%, 19%);
574
- --orange-300: hsl(27, 80%, 64%);
575
- --orange-400: hsl(27, 80%, 80%);
576
- --orange-500: hsl(27, 79%, 89%);
577
- --orange-600: hsl(27, 80%, 93%);
578
- --blue-100: hsl(209, 29%, 19%);
579
- --blue-200: hsl(209, 29%, 19%);
572
+ --orange-100: hsl(27, 30%, 19%);
573
+ --orange-200: hsl(27, 30%, 19%);
574
+ --orange-300: hsl(27, 80%, 72%);
575
+ --orange-400: hsl(27, 80%, 72%);
576
+ --orange-500: hsl(28, 78%, 93%);
577
+ --orange-600: hsl(28, 78%, 93%);
578
+ --blue-100: hsl(209, 30%, 19%);
579
+ --blue-200: hsl(209, 30%, 19%);
580
580
  --blue-300: hsl(210, 80%, 72%);
581
- --blue-400: hsl(210, 80%, 80%);
582
- --blue-500: hsl(209, 79%, 87%);
583
- --blue-600: hsl(210, 80%, 93%);
584
- --green-100: hsl(147, 29%, 19%);
585
- --green-200: hsl(147, 29%, 19%);
581
+ --blue-400: hsl(210, 80%, 75%);
582
+ --blue-500: hsl(210, 78%, 93%);
583
+ --blue-600: hsl(210, 78%, 93%);
584
+ --green-100: hsl(147, 30%, 19%);
585
+ --green-200: hsl(147, 30%, 19%);
586
586
  --green-300: hsl(148, 40%, 62%);
587
- --green-400: hsl(148, 40%, 75%);
588
- --green-500: hsl(148, 39%, 87%);
589
- --green-600: hsl(148, 40%, 93%);
590
- --red-100: hsl(358, 29%, 19%);
591
- --red-200: hsl(358, 29%, 19%);
587
+ --green-400: hsl(148, 40%, 68%);
588
+ --green-500: hsl(150, 39%, 93%);
589
+ --green-600: hsl(150, 39%, 93%);
590
+ --red-100: hsl(358, 30%, 19%);
591
+ --red-200: hsl(358, 30%, 19%);
592
592
  --red-300: hsl(0, 75%, 77%);
593
- --red-400: hsl(0, 73%, 85%);
594
- --red-500: hsl(0, 70%, 92%);
595
- --red-600: hsl(0, 73%, 95%);
593
+ --red-400: hsl(0, 73%, 80%);
594
+ --red-500: hsl(0, 76%, 95%);
595
+ --red-600: hsl(0, 76%, 95%);
596
596
  --yellow-100: hsl(43, 29%, 17%);
597
597
  --yellow-200: hsl(43, 29%, 17%);
598
- --yellow-300: hsl(43, 59%, 64%);
598
+ --yellow-300: hsl(43, 75%, 75%);
599
599
  --yellow-400: hsl(43, 75%, 75%);
600
600
  --yellow-500: hsl(48, 74%, 91%);
601
- --yellow-600: hsl(43, 75%, 91%);
602
- --purple-100: hsl(237, 25%, 24%);
603
- --purple-200: hsl(237, 25%, 24%);
604
- --purple-300: hsl(237, 58%, 86%);
605
- --purple-400: hsl(237, 58%, 86%);
606
- --purple-500: hsl(237, 65%, 96%);
607
- --purple-600: hsl(237, 65%, 96%);
601
+ --yellow-600: hsl(44, 74%, 91%);
602
+ --purple-100: hsl(237, 24%, 23%);
603
+ --purple-200: hsl(237, 24%, 23%);
604
+ --purple-300: hsl(237, 60%, 82%);
605
+ --purple-400: hsl(237, 60%, 82%);
606
+ --purple-500: hsl(237, 62%, 96%);
607
+ --purple-600: hsl(237, 62%, 96%);
608
608
  --gold-100: hsl(45, 22%, 25%);
609
609
  --gold-200: hsl(45, 22%, 25%);
610
610
  --gold-300: hsl(45, 92%, 62%);
611
611
  --gold-400: hsl(46, 93%, 78%);
612
612
  --silver-100: hsl(220, 2%, 26%);
613
613
  --silver-200: hsl(220, 2%, 26%);
614
- --silver-300: hsl(216, 4%, 69%);
614
+ --silver-300: hsl(220, 4%, 69%);
615
615
  --silver-400: hsl(214, 8%, 83%);
616
- --bronze-100: hsl(28, 13%, 27%);
617
- --bronze-200: hsl(28, 13%, 27%);
616
+ --bronze-100: hsl(27, 13%, 27%);
617
+ --bronze-200: hsl(27, 13%, 27%);
618
618
  --bronze-300: hsl(28, 58%, 67%);
619
619
  --bronze-400: hsl(28, 59%, 83%);
620
620
  --bc-lightest: var(--black-400);
@@ -677,52 +677,52 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
677
677
  --black-500: hsl(210, 8%, 90%);
678
678
  --black-600: hsl(210, 11%, 98%);
679
679
  --black: hsl(0, 0%, 100%);
680
- --orange-100: hsl(27, 29%, 19%);
681
- --orange-200: hsl(27, 29%, 19%);
682
- --orange-300: hsl(27, 80%, 64%);
683
- --orange-400: hsl(27, 80%, 80%);
684
- --orange-500: hsl(27, 79%, 89%);
685
- --orange-600: hsl(27, 80%, 93%);
686
- --blue-100: hsl(209, 29%, 19%);
687
- --blue-200: hsl(209, 29%, 19%);
680
+ --orange-100: hsl(27, 30%, 19%);
681
+ --orange-200: hsl(27, 30%, 19%);
682
+ --orange-300: hsl(27, 80%, 72%);
683
+ --orange-400: hsl(27, 80%, 72%);
684
+ --orange-500: hsl(28, 78%, 93%);
685
+ --orange-600: hsl(28, 78%, 93%);
686
+ --blue-100: hsl(209, 30%, 19%);
687
+ --blue-200: hsl(209, 30%, 19%);
688
688
  --blue-300: hsl(210, 80%, 72%);
689
- --blue-400: hsl(210, 80%, 80%);
690
- --blue-500: hsl(209, 79%, 87%);
691
- --blue-600: hsl(210, 80%, 93%);
692
- --green-100: hsl(147, 29%, 19%);
693
- --green-200: hsl(147, 29%, 19%);
689
+ --blue-400: hsl(210, 80%, 75%);
690
+ --blue-500: hsl(210, 78%, 93%);
691
+ --blue-600: hsl(210, 78%, 93%);
692
+ --green-100: hsl(147, 30%, 19%);
693
+ --green-200: hsl(147, 30%, 19%);
694
694
  --green-300: hsl(148, 40%, 62%);
695
- --green-400: hsl(148, 40%, 75%);
696
- --green-500: hsl(148, 39%, 87%);
697
- --green-600: hsl(148, 40%, 93%);
698
- --red-100: hsl(358, 29%, 19%);
699
- --red-200: hsl(358, 29%, 19%);
695
+ --green-400: hsl(148, 40%, 68%);
696
+ --green-500: hsl(150, 39%, 93%);
697
+ --green-600: hsl(150, 39%, 93%);
698
+ --red-100: hsl(358, 30%, 19%);
699
+ --red-200: hsl(358, 30%, 19%);
700
700
  --red-300: hsl(0, 75%, 77%);
701
- --red-400: hsl(0, 73%, 85%);
702
- --red-500: hsl(0, 70%, 92%);
703
- --red-600: hsl(0, 73%, 95%);
701
+ --red-400: hsl(0, 73%, 80%);
702
+ --red-500: hsl(0, 76%, 95%);
703
+ --red-600: hsl(0, 76%, 95%);
704
704
  --yellow-100: hsl(43, 29%, 17%);
705
705
  --yellow-200: hsl(43, 29%, 17%);
706
- --yellow-300: hsl(43, 59%, 64%);
706
+ --yellow-300: hsl(43, 75%, 75%);
707
707
  --yellow-400: hsl(43, 75%, 75%);
708
708
  --yellow-500: hsl(48, 74%, 91%);
709
- --yellow-600: hsl(43, 75%, 91%);
710
- --purple-100: hsl(237, 25%, 24%);
711
- --purple-200: hsl(237, 25%, 24%);
712
- --purple-300: hsl(237, 58%, 86%);
713
- --purple-400: hsl(237, 58%, 86%);
714
- --purple-500: hsl(237, 65%, 96%);
715
- --purple-600: hsl(237, 65%, 96%);
709
+ --yellow-600: hsl(44, 74%, 91%);
710
+ --purple-100: hsl(237, 24%, 23%);
711
+ --purple-200: hsl(237, 24%, 23%);
712
+ --purple-300: hsl(237, 60%, 82%);
713
+ --purple-400: hsl(237, 60%, 82%);
714
+ --purple-500: hsl(237, 62%, 96%);
715
+ --purple-600: hsl(237, 62%, 96%);
716
716
  --gold-100: hsl(45, 22%, 25%);
717
717
  --gold-200: hsl(45, 22%, 25%);
718
718
  --gold-300: hsl(45, 92%, 62%);
719
719
  --gold-400: hsl(46, 93%, 78%);
720
720
  --silver-100: hsl(220, 2%, 26%);
721
721
  --silver-200: hsl(220, 2%, 26%);
722
- --silver-300: hsl(216, 4%, 69%);
722
+ --silver-300: hsl(220, 4%, 69%);
723
723
  --silver-400: hsl(214, 8%, 83%);
724
- --bronze-100: hsl(28, 13%, 27%);
725
- --bronze-200: hsl(28, 13%, 27%);
724
+ --bronze-100: hsl(27, 13%, 27%);
725
+ --bronze-200: hsl(27, 13%, 27%);
726
726
  --bronze-300: hsl(28, 58%, 67%);
727
727
  --bronze-400: hsl(28, 59%, 83%);
728
728
  --bc-lightest: var(--black-400);
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
+ @h: var(~"--@{valueVar}-h");
214
+ @s: var(~"--@{valueVar}-s");
215
+ @l: 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(@{h}, @{s}, calc(@{l} + ((100% - @{l}) * .9)))";
222
+ @{varBase}-200: ~"hsl(@{h}, @{s}, calc(@{l} + ((100% - @{l}) * .75)))";
223
+ @{varBase}-300: ~"hsl(@{h}, @{s}, calc(@{l} + ((100% - @{l}) * .5)))";
224
+ @{varBase}-400: ~"hsl(@{h}, @{s}, @{l})";
225
+ @{varBase}-500: ~"hsl(@{h}, @{s}, calc(@{l} + (@{l} * -.3)))";
226
+ @{varBase}-600: ~"hsl(@{h}, @{s}, calc(@{l} + (@{l} * -.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(@{h}, calc(@{s} + (@{s} * -.6)), calc(@{l} + (@{l} * -.7)))";
238
+ @{varBaseDark}-200: ~"hsl(@{h}, calc(@{s} + (@{s} * -.4)), calc(@{l} + (@{l} * -.5)))";
239
+ @{varBaseDark}-300: ~"hsl(@{h}, calc(@{s} + (@{s} * -.3)), calc(@{l} + (@{l} * -.2)))";
240
+ @{varBaseDark}-400: ~"hsl(@{h}, @{s}, @{l})";
241
+ @{varBaseDark}-500: ~"hsl(@{h}, @{s}, calc(@{l} + ((100% - @{l}) * .5)))";
242
+ @{varBaseDark}-600: ~"hsl(@{h}, @{s}, calc(@{l} + ((100% - @{l}) * .8)))";
240
243
  @{varBaseDark}: ~"var(@{varBaseDark}-400)";
241
244
 
242
245
  & when (@tier = secondary) {