@stackoverflow/stacks 2.0.0-rc.8 → 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 (35) hide show
  1. package/dist/css/stacks.css +258 -182
  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/anchor/anchor.less +9 -5
  6. package/lib/components/badge/badge.less +10 -10
  7. package/lib/components/checkbox_radio/checkbox_radio.less +14 -8
  8. package/lib/components/code-block/code-block.a11y.test.ts +1 -1
  9. package/lib/components/input_textarea/input_textarea.a11y.test.ts +112 -0
  10. package/lib/components/input_textarea/input_textarea.visual.test.ts +98 -0
  11. package/lib/components/label/label.less +1 -1
  12. package/lib/components/link/link.less +8 -8
  13. package/lib/components/link-preview/link-preview.less +2 -2
  14. package/lib/components/modal/modal.less +1 -0
  15. package/lib/components/navigation/navigation.a11y.test.ts +0 -2
  16. package/lib/components/page-title/page-title.a11y.test.ts +29 -0
  17. package/lib/components/page-title/page-title.visual.test.ts +59 -0
  18. package/lib/components/post-summary/post-summary.less +5 -5
  19. package/lib/components/select/select.less +1 -1
  20. package/lib/components/tag/tag.a11y.test.ts +29 -0
  21. package/lib/components/tag/tag.less +7 -1
  22. package/lib/components/tag/tag.visual.test.ts +46 -0
  23. package/lib/components/toggle-switch/toggle-switch.less +8 -1
  24. package/lib/components/topbar/topbar.less +30 -14
  25. package/lib/components/uploader/uploader.less +1 -1
  26. package/lib/components/user-card/user-card.less +2 -2
  27. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +62 -62
  28. package/lib/exports/__snapshots__/color.less.test.ts.snap +119 -80
  29. package/lib/exports/color-mixins.less +15 -12
  30. package/lib/exports/color-sets.less +24 -24
  31. package/lib/exports/color.less +17 -1
  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 +7 -7
package/lib/exports/__snapshots__/color.less.test.ts.snap CHANGED
@@ -6,6 +6,23 @@ exports[`colors > should output all the css generated by the v2 colors/theming g
6
6
  --_o-disabled-static: 0.5;
7
7
  --_black-static: hsl(0, 0%, 0%);
8
8
  --_white-static: hsl(0, 0%, 100%);
9
+ }
10
+
11
+ body:not(.theme-dark),
12
+ body.theme-highcontrast:not(.theme-dark),
13
+ body:not(.theme-highcontrast):not(.theme-dark),
14
+ body.theme-dark .theme-light__forced,
15
+ body.theme-highcontrast.theme-dark .theme-light__forced,
16
+ body:not(.theme-highcontrast).theme-dark .theme-light__forced,
17
+ body.theme-system .theme-light__forced,
18
+ body.theme-highcontrast.theme-system .theme-light__forced,
19
+ body:not(.theme-highcontrast).theme-system .theme-light__forced,
20
+ body.theme-dark,
21
+ body.theme-highcontrast.theme-dark,
22
+ body:not(.theme-highcontrast).theme-dark,
23
+ body:not(.theme-dark) .theme-dark__forced,
24
+ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced,
25
+ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced {
9
26
  --bg-error: var(--red-400);
10
27
  --bg-danger: var(--red-400);
11
28
  --bg-success: var(--green-400);
@@ -19,10 +36,32 @@ exports[`colors > should output all the css generated by the v2 colors/theming g
19
36
  --fc-dark: var(--black-600);
20
37
  --fc-error: var(--red-400);
21
38
  --fc-danger: var(--red-400);
22
- --fc-success: var(--green-500);
39
+ --fc-success: var(--green-400);
23
40
  --fc-warning: var(--yellow-500);
24
41
  }
25
42
 
43
+ @media (prefers-color-scheme: dark) {
44
+ body.theme-system,
45
+ body.theme-highcontrast.theme-system,
46
+ body:not(.theme-highcontrast).theme-system {
47
+ --bg-error: var(--red-400);
48
+ --bg-danger: var(--red-400);
49
+ --bg-success: var(--green-400);
50
+ --bg-warning: var(--yellow-500);
51
+ --bc-error: var(--red-400);
52
+ --bc-danger: var(--red-400);
53
+ --bc-success: var(--green-400);
54
+ --bc-warning: var(--yellow-500);
55
+ --fc-light: var(--black-400);
56
+ --fc-medium: var(--black-500);
57
+ --fc-dark: var(--black-600);
58
+ --fc-error: var(--red-400);
59
+ --fc-danger: var(--red-400);
60
+ --fc-success: var(--green-400);
61
+ --fc-warning: var(--yellow-500);
62
+ }
63
+ }
64
+
26
65
  body:not(.theme-highcontrast):not(.theme-dark),
27
66
  body:not(.theme-highcontrast).theme-dark .theme-light__forced,
28
67
  body:not(.theme-highcontrast).theme-system .theme-light__forced,
@@ -75,8 +114,8 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
75
114
  --yellow-400: hsl(43, 85%, 50%);
76
115
  --yellow-500: hsl(43, 85%, 33%);
77
116
  --yellow-600: hsl(43, 84%, 18%);
78
- --purple-100: hsl(237, 80%, 96%);
79
- --purple-200: hsl(237, 77%, 92%);
117
+ --purple-100: hsl(237, 83%, 98%);
118
+ --purple-200: hsl(237, 78%, 93%);
80
119
  --purple-300: hsl(237, 60%, 83%);
81
120
  --purple-400: hsl(237, 55%, 57%);
82
121
  --purple-500: hsl(237, 50%, 45%);
@@ -135,19 +174,19 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
135
174
  --theme-secondary-400: var(--theme-secondary-custom-400, var(--blue-400));
136
175
  --theme-secondary-500: var(--theme-secondary-custom-500, var(--blue-500));
137
176
  --theme-secondary-600: var(--theme-secondary-custom-600, var(--blue-600));
138
- --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%));
139
- --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%));
140
- --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%));
141
- --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%));
142
- --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%));
143
- --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)));
144
183
  --theme-primary-custom: var(--theme-primary-custom-400);
145
- --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%));
146
- --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%));
147
- --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%));
148
- --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%));
149
- --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%));
150
- --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)));
151
190
  --theme-secondary-custom: var(--theme-secondary-custom-400);
152
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);
153
192
  color: var(--theme-body-font-color, var(--black-600));
@@ -175,38 +214,38 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
175
214
  --orange-100: hsl(27, 29%, 19%);
176
215
  --orange-200: hsl(27, 43%, 31%);
177
216
  --orange-300: hsl(27, 43%, 47%);
178
- --orange-400: hsl(27, 80%, 80%);
179
- --orange-500: hsl(27, 80%, 88%);
217
+ --orange-400: hsl(27, 80%, 72%);
218
+ --orange-500: hsl(27, 80%, 83%);
180
219
  --orange-600: hsl(27, 80%, 93%);
181
220
  --blue-100: hsl(209, 29%, 19%);
182
221
  --blue-200: hsl(210, 29%, 35%);
183
222
  --blue-300: hsl(210, 29%, 50%);
184
- --blue-400: hsl(210, 80%, 80%);
185
- --blue-500: hsl(210, 80%, 88%);
223
+ --blue-400: hsl(210, 80%, 75%);
224
+ --blue-500: hsl(210, 80%, 83%);
186
225
  --blue-600: hsl(210, 80%, 93%);
187
226
  --green-100: hsl(148, 29%, 19%);
188
227
  --green-200: hsl(148, 29%, 27%);
189
228
  --green-300: hsl(148, 25%, 40%);
190
- --green-400: hsl(148, 40%, 75%);
191
- --green-500: hsl(148, 40%, 85%);
229
+ --green-400: hsl(148, 40%, 68%);
230
+ --green-500: hsl(148, 40%, 80%);
192
231
  --green-600: hsl(148, 40%, 93%);
193
232
  --red-100: hsl(358, 29%, 19%);
194
233
  --red-200: hsl(0, 29%, 37%);
195
234
  --red-300: hsl(0, 34%, 54%);
196
- --red-400: hsl(0, 73%, 85%);
197
- --red-500: hsl(0, 73%, 91%);
235
+ --red-400: hsl(0, 73%, 80%);
236
+ --red-500: hsl(0, 73%, 88%);
198
237
  --red-600: hsl(0, 73%, 95%);
199
238
  --yellow-100: hsl(43, 29%, 17%);
200
239
  --yellow-200: hsl(43, 29%, 25%);
201
240
  --yellow-300: hsl(43, 29%, 40%);
202
241
  --yellow-400: hsl(43, 75%, 75%);
203
- --yellow-500: hsl(43, 75%, 85%);
242
+ --yellow-500: hsl(43, 75%, 82%);
204
243
  --yellow-600: hsl(43, 75%, 91%);
205
- --purple-100: hsl(237, 25%, 24%);
206
- --purple-200: hsl(237, 27%, 38%);
244
+ --purple-100: hsl(238, 24%, 23%);
245
+ --purple-200: hsl(238, 27%, 34%);
207
246
  --purple-300: hsl(237, 32%, 56%);
208
- --purple-400: hsl(237, 58%, 86%);
209
- --purple-500: hsl(237, 60%, 91%);
247
+ --purple-400: hsl(237, 60%, 82%);
248
+ --purple-500: hsl(237, 60%, 88%);
210
249
  --purple-600: hsl(237, 65%, 96%);
211
250
  --gold-100: hsl(45, 29%, 24%);
212
251
  --gold-200: hsl(45, 47%, 37%);
@@ -262,19 +301,19 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
262
301
  --theme-secondary-400: var(--theme-dark-secondary-custom-400, var(--blue-400));
263
302
  --theme-secondary-500: var(--theme-dark-secondary-custom-500, var(--blue-500));
264
303
  --theme-secondary-600: var(--theme-dark-secondary-custom-600, var(--blue-600));
265
- --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%));
266
- --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%));
267
- --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%));
268
- --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%));
269
- --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%));
270
- --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)));
271
310
  --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
272
- --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%));
273
- --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%));
274
- --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%));
275
- --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%));
276
- --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%));
277
- --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)));
278
317
  --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
279
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);
280
319
  color: var(--theme-body-font-color, var(--black-600));
@@ -300,38 +339,38 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
300
339
  --orange-100: hsl(27, 29%, 19%);
301
340
  --orange-200: hsl(27, 43%, 31%);
302
341
  --orange-300: hsl(27, 43%, 47%);
303
- --orange-400: hsl(27, 80%, 80%);
304
- --orange-500: hsl(27, 80%, 88%);
342
+ --orange-400: hsl(27, 80%, 72%);
343
+ --orange-500: hsl(27, 80%, 83%);
305
344
  --orange-600: hsl(27, 80%, 93%);
306
345
  --blue-100: hsl(209, 29%, 19%);
307
346
  --blue-200: hsl(210, 29%, 35%);
308
347
  --blue-300: hsl(210, 29%, 50%);
309
- --blue-400: hsl(210, 80%, 80%);
310
- --blue-500: hsl(210, 80%, 88%);
348
+ --blue-400: hsl(210, 80%, 75%);
349
+ --blue-500: hsl(210, 80%, 83%);
311
350
  --blue-600: hsl(210, 80%, 93%);
312
351
  --green-100: hsl(148, 29%, 19%);
313
352
  --green-200: hsl(148, 29%, 27%);
314
353
  --green-300: hsl(148, 25%, 40%);
315
- --green-400: hsl(148, 40%, 75%);
316
- --green-500: hsl(148, 40%, 85%);
354
+ --green-400: hsl(148, 40%, 68%);
355
+ --green-500: hsl(148, 40%, 80%);
317
356
  --green-600: hsl(148, 40%, 93%);
318
357
  --red-100: hsl(358, 29%, 19%);
319
358
  --red-200: hsl(0, 29%, 37%);
320
359
  --red-300: hsl(0, 34%, 54%);
321
- --red-400: hsl(0, 73%, 85%);
322
- --red-500: hsl(0, 73%, 91%);
360
+ --red-400: hsl(0, 73%, 80%);
361
+ --red-500: hsl(0, 73%, 88%);
323
362
  --red-600: hsl(0, 73%, 95%);
324
363
  --yellow-100: hsl(43, 29%, 17%);
325
364
  --yellow-200: hsl(43, 29%, 25%);
326
365
  --yellow-300: hsl(43, 29%, 40%);
327
366
  --yellow-400: hsl(43, 75%, 75%);
328
- --yellow-500: hsl(43, 75%, 85%);
367
+ --yellow-500: hsl(43, 75%, 82%);
329
368
  --yellow-600: hsl(43, 75%, 91%);
330
- --purple-100: hsl(237, 25%, 24%);
331
- --purple-200: hsl(237, 27%, 38%);
369
+ --purple-100: hsl(238, 24%, 23%);
370
+ --purple-200: hsl(238, 27%, 34%);
332
371
  --purple-300: hsl(237, 32%, 56%);
333
- --purple-400: hsl(237, 58%, 86%);
334
- --purple-500: hsl(237, 60%, 91%);
372
+ --purple-400: hsl(237, 60%, 82%);
373
+ --purple-500: hsl(237, 60%, 88%);
335
374
  --purple-600: hsl(237, 65%, 96%);
336
375
  --gold-100: hsl(45, 29%, 24%);
337
376
  --gold-200: hsl(45, 47%, 37%);
@@ -387,19 +426,19 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
387
426
  --theme-secondary-400: var(--theme-dark-secondary-custom-400, var(--blue-400));
388
427
  --theme-secondary-500: var(--theme-dark-secondary-custom-500, var(--blue-500));
389
428
  --theme-secondary-600: var(--theme-dark-secondary-custom-600, var(--blue-600));
390
- --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%));
391
- --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%));
392
- --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%));
393
- --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%));
394
- --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%));
395
- --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)));
396
435
  --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
397
- --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%));
398
- --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%));
399
- --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%));
400
- --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%));
401
- --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%));
402
- --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)));
403
442
  --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
404
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);
405
444
  color: var(--theme-body-font-color, var(--black-600));
@@ -452,7 +491,7 @@ body.theme-highcontrast.theme-system .theme-light__forced {
452
491
  --yellow-400: hsl(43, 85%, 50%);
453
492
  --yellow-500: hsl(48, 85%, 18%);
454
493
  --yellow-600: hsl(48, 85%, 18%);
455
- --purple-100: hsl(237, 80%, 96%);
494
+ --purple-100: hsl(237, 83%, 98%);
456
495
  --purple-200: hsl(237, 80%, 96%);
457
496
  --purple-300: hsl(237, 55%, 57%);
458
497
  --purple-400: hsl(237, 55%, 57%);
@@ -533,25 +572,25 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
533
572
  --orange-100: hsl(27, 29%, 19%);
534
573
  --orange-200: hsl(27, 29%, 19%);
535
574
  --orange-300: hsl(27, 80%, 64%);
536
- --orange-400: hsl(27, 80%, 80%);
575
+ --orange-400: hsl(27, 80%, 72%);
537
576
  --orange-500: hsl(27, 79%, 89%);
538
577
  --orange-600: hsl(27, 80%, 93%);
539
578
  --blue-100: hsl(209, 29%, 19%);
540
579
  --blue-200: hsl(209, 29%, 19%);
541
580
  --blue-300: hsl(210, 80%, 72%);
542
- --blue-400: hsl(210, 80%, 80%);
581
+ --blue-400: hsl(210, 80%, 75%);
543
582
  --blue-500: hsl(209, 79%, 87%);
544
583
  --blue-600: hsl(210, 80%, 93%);
545
584
  --green-100: hsl(147, 29%, 19%);
546
585
  --green-200: hsl(147, 29%, 19%);
547
586
  --green-300: hsl(148, 40%, 62%);
548
- --green-400: hsl(148, 40%, 75%);
587
+ --green-400: hsl(148, 40%, 68%);
549
588
  --green-500: hsl(148, 39%, 87%);
550
589
  --green-600: hsl(148, 40%, 93%);
551
590
  --red-100: hsl(358, 29%, 19%);
552
591
  --red-200: hsl(358, 29%, 19%);
553
592
  --red-300: hsl(0, 75%, 77%);
554
- --red-400: hsl(0, 73%, 85%);
593
+ --red-400: hsl(0, 73%, 80%);
555
594
  --red-500: hsl(0, 70%, 92%);
556
595
  --red-600: hsl(0, 73%, 95%);
557
596
  --yellow-100: hsl(43, 29%, 17%);
@@ -560,10 +599,10 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
560
599
  --yellow-400: hsl(43, 75%, 75%);
561
600
  --yellow-500: hsl(48, 74%, 91%);
562
601
  --yellow-600: hsl(43, 75%, 91%);
563
- --purple-100: hsl(237, 25%, 24%);
564
- --purple-200: hsl(237, 25%, 24%);
602
+ --purple-100: hsl(237, 24%, 23%);
603
+ --purple-200: hsl(237, 24%, 23%);
565
604
  --purple-300: hsl(237, 58%, 86%);
566
- --purple-400: hsl(237, 58%, 86%);
605
+ --purple-400: hsl(237, 60%, 82%);
567
606
  --purple-500: hsl(237, 65%, 96%);
568
607
  --purple-600: hsl(237, 65%, 96%);
569
608
  --gold-100: hsl(45, 22%, 25%);
@@ -641,25 +680,25 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
641
680
  --orange-100: hsl(27, 29%, 19%);
642
681
  --orange-200: hsl(27, 29%, 19%);
643
682
  --orange-300: hsl(27, 80%, 64%);
644
- --orange-400: hsl(27, 80%, 80%);
683
+ --orange-400: hsl(27, 80%, 72%);
645
684
  --orange-500: hsl(27, 79%, 89%);
646
685
  --orange-600: hsl(27, 80%, 93%);
647
686
  --blue-100: hsl(209, 29%, 19%);
648
687
  --blue-200: hsl(209, 29%, 19%);
649
688
  --blue-300: hsl(210, 80%, 72%);
650
- --blue-400: hsl(210, 80%, 80%);
689
+ --blue-400: hsl(210, 80%, 75%);
651
690
  --blue-500: hsl(209, 79%, 87%);
652
691
  --blue-600: hsl(210, 80%, 93%);
653
692
  --green-100: hsl(147, 29%, 19%);
654
693
  --green-200: hsl(147, 29%, 19%);
655
694
  --green-300: hsl(148, 40%, 62%);
656
- --green-400: hsl(148, 40%, 75%);
695
+ --green-400: hsl(148, 40%, 68%);
657
696
  --green-500: hsl(148, 39%, 87%);
658
697
  --green-600: hsl(148, 40%, 93%);
659
698
  --red-100: hsl(358, 29%, 19%);
660
699
  --red-200: hsl(358, 29%, 19%);
661
700
  --red-300: hsl(0, 75%, 77%);
662
- --red-400: hsl(0, 73%, 85%);
701
+ --red-400: hsl(0, 73%, 80%);
663
702
  --red-500: hsl(0, 70%, 92%);
664
703
  --red-600: hsl(0, 73%, 95%);
665
704
  --yellow-100: hsl(43, 29%, 17%);
@@ -668,10 +707,10 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
668
707
  --yellow-400: hsl(43, 75%, 75%);
669
708
  --yellow-500: hsl(48, 74%, 91%);
670
709
  --yellow-600: hsl(43, 75%, 91%);
671
- --purple-100: hsl(237, 25%, 24%);
672
- --purple-200: hsl(237, 25%, 24%);
710
+ --purple-100: hsl(237, 24%, 23%);
711
+ --purple-200: hsl(237, 24%, 23%);
673
712
  --purple-300: hsl(237, 58%, 86%);
674
- --purple-400: hsl(237, 58%, 86%);
713
+ --purple-400: hsl(237, 60%, 82%);
675
714
  --purple-500: hsl(237, 65%, 96%);
676
715
  --purple-600: hsl(237, 65%, 96%);
677
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
  }
@@ -426,7 +426,7 @@
426
426
  dark: var(--black-600);
427
427
  error: var(--red-400);
428
428
  danger: var(--red-400);
429
- success: var(--green-500);
429
+ success: var(--green-400);
430
430
  warning: var(--yellow-500);
431
431
  }
432
432
 
package/lib/exports/color.less CHANGED
@@ -5,7 +5,23 @@ body {
5
5
  --_o-disabled-static: 0.5;
6
6
  --_black-static: .set-black()[default];
7
7
  --_white-static: .set-white()[default];
8
- .create-colors(.sets-aliased-utility-variables());
8
+
9
+ &,
10
+ &.theme-highcontrast,
11
+ &:not(.theme-highcontrast) {
12
+ &:not(.theme-dark),
13
+ &.theme-dark .theme-light__forced,
14
+ &.theme-system .theme-light__forced,
15
+ &.theme-dark,
16
+ &:not(.theme-dark) .theme-dark__forced {
17
+ .create-colors(.sets-aliased-utility-variables());
18
+ }
19
+ &.theme-system {
20
+ @media (prefers-color-scheme: dark) {
21
+ .create-colors(.sets-aliased-utility-variables());
22
+ }
23
+ }
24
+ }
9
25
  }
10
26
 
11
27
  // Light, dark mode
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);