@stackoverflow/stacks 2.0.0-rc.9 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/css/stacks.css +194 -159
  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_textarea/input_textarea.a11y.test.ts +112 -0
  9. package/lib/components/input_textarea/input_textarea.visual.test.ts +98 -0
  10. package/lib/components/label/label.less +1 -1
  11. package/lib/components/link-preview/link-preview.less +2 -2
  12. package/lib/components/modal/modal.less +1 -0
  13. package/lib/components/navigation/navigation.a11y.test.ts +0 -2
  14. package/lib/components/page-title/page-title.a11y.test.ts +29 -0
  15. package/lib/components/page-title/page-title.visual.test.ts +59 -0
  16. package/lib/components/post-summary/post-summary.less +5 -5
  17. package/lib/components/tag/tag.a11y.test.ts +29 -0
  18. package/lib/components/tag/tag.less +7 -1
  19. package/lib/components/tag/tag.visual.test.ts +46 -0
  20. package/lib/components/toggle-switch/toggle-switch.less +8 -1
  21. package/lib/components/topbar/topbar.less +30 -14
  22. package/lib/components/uploader/uploader.less +1 -1
  23. package/lib/components/user-card/user-card.less +2 -2
  24. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +62 -62
  25. package/lib/exports/__snapshots__/color.less.test.ts.snap +79 -79
  26. package/lib/exports/color-mixins.less +15 -12
  27. package/lib/exports/color-sets.less +23 -23
  28. package/lib/exports/mixins.less +3 -14
  29. package/lib/exports/v1/__snapshots__/constants-colors.less.test.ts.snap +28 -28
  30. package/lib/test/test-utils.ts +1 -3
  31. package/package.json +7 -7
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(238, 24%, 23%);
245
+ --purple-200: hsl(238, 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(238, 24%, 23%);
370
+ --purple-200: hsl(238, 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));
@@ -491,7 +491,7 @@ 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%);
494
+ --purple-100: hsl(237, 83%, 98%);
495
495
  --purple-200: hsl(237, 80%, 96%);
496
496
  --purple-300: hsl(237, 55%, 57%);
497
497
  --purple-400: hsl(237, 55%, 57%);
@@ -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%);
@@ -599,10 +599,10 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
599
599
  --yellow-400: hsl(43, 75%, 75%);
600
600
  --yellow-500: hsl(48, 74%, 91%);
601
601
  --yellow-600: hsl(43, 75%, 91%);
602
- --purple-100: hsl(237, 25%, 24%);
603
- --purple-200: hsl(237, 25%, 24%);
602
+ --purple-100: hsl(237, 24%, 23%);
603
+ --purple-200: hsl(237, 24%, 23%);
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%);
@@ -707,10 +707,10 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
707
707
  --yellow-400: hsl(43, 75%, 75%);
708
708
  --yellow-500: hsl(48, 74%, 91%);
709
709
  --yellow-600: hsl(43, 75%, 91%);
710
- --purple-100: hsl(237, 25%, 24%);
711
- --purple-200: hsl(237, 25%, 24%);
710
+ --purple-100: hsl(237, 24%, 23%);
711
+ --purple-200: hsl(237, 24%, 23%);
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
+ @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) {
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() {
@@ -256,23 +256,23 @@
256
256
 
257
257
  // Purple
258
258
  .set-purple() {
259
- 100: hsl(237, 80%, 96%);
260
- 200: hsl(237, 77%, 92%);
259
+ 100: hsl(237, 83%, 98%);
260
+ 200: hsl(237, 78%, 93%);
261
261
  300: hsl(237, 60%, 83%);
262
262
  400: hsl(237, 55%, 57%);
263
263
  500: hsl(237, 50%, 45%);
264
264
  600: hsl(237, 50%, 32%);
265
265
  }
266
266
  .set-purple-dark() {
267
- 100: hsl(237, 25%, 24%);
268
- 200: hsl(237, 27%, 38%);
267
+ 100: hsl(238, 24%, 23%);
268
+ 200: hsl(238, 27%, 34%);
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() {
275
- 100: hsl(237, 80%, 96%);
275
+ 100: hsl(237, 83%, 98%);
276
276
  200: hsl(237, 80%, 96%);
277
277
  300: hsl(237, 55%, 57%);
278
278
  400: hsl(237, 55%, 57%);
@@ -280,10 +280,10 @@
280
280
  600: hsl(237, 50%, 32%);
281
281
  }
282
282
  .set-purple-hc-dark() {
283
- 100: hsl(237, 25%, 24%);
284
- 200: hsl(237, 25%, 24%);
283
+ 100: hsl(237, 24%, 23%);
284
+ 200: hsl(237, 24%, 23%);
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
@@ -138,27 +138,16 @@
138
138
  calc(var(~"--@{color-prefix}-l") + @amountPercentage));
139
139
  }
140
140
 
141
-
142
- .native-lightness(@color-prefix, @lMod: 0, @min: 0, @max: 100) {
143
- .native-saturation-lightness(@color-prefix, 0, @lMod, @min, @max);
144
- }
145
-
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
-
153
141
  // Decrease the lightness and saturation of a color in the HSL color space by absolute amounts.
154
142
  .native-darken-desaturate(@color-prefix, @darken-amount, @desaturate-amount) {
155
143
  @darkenAmountPercentage: .load-color-variables(@darken-amount)[@amountPercentage];
156
144
  @desaturateAmountPercentage: .load-color-variables(@desaturate-amount)[@amountPercentage];
157
145
  @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%));
146
+ calc(var(~"--@{color-prefix}-s") - @desaturateAmountPercentage),
147
+ calc(var(~"--@{color-prefix}-l") - @darkenAmountPercentage));
160
148
  }
161
149
 
150
+
162
151
  // Decrease the lightness of a color in the HSL color space by an absolute amount.
163
152
  .native-darken(@color-prefix, @amount) {
164
153
  .load-color-variables(@amount);