@stackoverflow/stacks 2.0.0-rc.3 → 2.0.0-rc.5

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 (21) hide show
  1. package/dist/components/code-block/code-block.fixtures.d.ts +2 -0
  2. package/dist/css/stacks.css +53 -22
  3. package/dist/css/stacks.min.css +1 -1
  4. package/lib/atomic/__snapshots__/color.less.test.ts.snap +246 -0
  5. package/lib/components/anchor/anchor.visual.test.ts +1 -1
  6. package/lib/components/avatar/avatar.visual.test.ts +1 -1
  7. package/lib/components/button/button.a11y.test.ts +1 -1
  8. package/lib/components/button/button.visual.test.ts +1 -1
  9. package/lib/components/code-block/code-block.a11y.test.ts +30 -0
  10. package/lib/components/code-block/code-block.fixtures.ts +88 -0
  11. package/lib/components/code-block/code-block.visual.test.ts +20 -0
  12. package/lib/components/navigation/navigation.a11y.test.ts +80 -0
  13. package/lib/components/navigation/navigation.visual.test.ts +101 -0
  14. package/lib/components/notice/notice.a11y.test.ts +1 -1
  15. package/lib/components/pagination/pagination.a11y.test.ts +1 -1
  16. package/lib/components/toast/toast.a11y.test.ts +1 -1
  17. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +16 -10
  18. package/lib/exports/__snapshots__/color.less.test.ts.snap +215 -147
  19. package/lib/exports/color-sets.less +2 -2
  20. package/lib/exports/color.less +17 -3
  21. package/package.json +3 -3
package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap CHANGED
@@ -290,23 +290,23 @@ body .themed {
290
290
  --black-200: hsl(210, 8%, 90%);
291
291
  --black-225: hsl(210, 8%, 85%);
292
292
  --black-250: hsl(210, 8%, 80%);
293
- --black-300: hsl(213, 9%, 75%);
294
- --black-350: hsl(212, 8%, 68%);
295
- --black-400: hsl(210, 8%, 45%);
293
+ --black-300: hsl(210, 9%, 75%);
294
+ --black-350: hsl(210, 8%, 68%);
295
+ --black-400: hsl(210, 8%, 42%);
296
296
  --black-500: hsl(210, 8%, 25%);
297
297
  --black-600: hsl(210, 8%, 5%);
298
- --black: hsl(0, 8%, 5%);
298
+ --black: hsl(0, 0%, 0%);
299
299
  --orange-100: hsl(23, 85%, 97%);
300
300
  --orange-200: hsl(27, 85%, 87%);
301
301
  --orange-300: hsl(27, 85%, 72%);
302
- --orange-400: hsl(27, 90%, 55%);
303
- --orange-500: hsl(27, 88%, 43%);
302
+ --orange-400: hsl(27, 80%, 52%);
303
+ --orange-500: hsl(27, 80%, 43%);
304
304
  --orange-600: hsl(27, 80%, 29%);
305
305
  --blue-100: hsl(210, 80%, 96%);
306
306
  --blue-200: hsl(210, 80%, 91%);
307
307
  --blue-300: hsl(210, 78%, 76%);
308
- --blue-400: hsl(210, 70%, 48%);
309
- --blue-500: hsl(210, 75%, 36%);
308
+ --blue-400: hsl(210, 77%, 46%);
309
+ --blue-500: hsl(210, 77%, 36%);
310
310
  --blue-600: hsl(210, 80%, 23%);
311
311
  --green-100: hsl(148, 35%, 95%);
312
312
  --green-200: hsl(148, 35%, 88%);
@@ -314,7 +314,7 @@ body .themed {
314
314
  --green-400: hsl(148, 70%, 31%);
315
315
  --green-500: hsl(148, 75%, 22%);
316
316
  --green-600: hsl(148, 75%, 15%);
317
- --red-100: hsl(0, 78%, 96%);
317
+ --red-100: hsl(0, 72%, 96%);
318
318
  --red-200: hsl(0, 70%, 93%);
319
319
  --red-300: hsl(0, 65%, 76%);
320
320
  --red-400: hsl(0, 60%, 49%);
@@ -326,6 +326,12 @@ body .themed {
326
326
  --yellow-400: hsl(43, 85%, 50%);
327
327
  --yellow-500: hsl(43, 85%, 33%);
328
328
  --yellow-600: hsl(43, 84%, 18%);
329
+ --purple-100: hsl(237, 80%, 96%);
330
+ --purple-200: hsl(237, 77%, 92%);
331
+ --purple-300: hsl(237, 60%, 83%);
332
+ --purple-400: hsl(237, 55%, 57%);
333
+ --purple-500: hsl(237, 50%, 45%);
334
+ --purple-600: hsl(237, 50%, 32%);
329
335
  --gold-100: hsl(46, 100%, 91%);
330
336
  --gold-200: hsl(46, 100%, 74%);
331
337
  --gold-300: hsl(45, 100%, 42%);
@@ -355,7 +361,7 @@ body .themed {
355
361
  --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
356
362
  --highlight-addition: var(--green-500);
357
363
  --highlight-attribute: hsl(206, 98.5%, 29%);
358
- --highlight-bg: var(--black-100);
364
+ --highlight-bg: hsl(0, 0%, 96.5%);
359
365
  --highlight-color: var(--black-600);
360
366
  --highlight-comment: hsl(210, 8%, 43.5%);
361
367
  --highlight-deletion: var(--red-500);
package/lib/exports/__snapshots__/color.less.test.ts.snap CHANGED
@@ -4,23 +4,46 @@ exports[`colors > should output all the css generated by the v2 colors/theming g
4
4
  "body {
5
5
  --_o-disabled: 0.5;
6
6
  --_o-disabled-static: 0.5;
7
- --_black-static: hsl(0, 8%, 5%);
7
+ --_black-static: hsl(0, 0%, 0%);
8
8
  --_white-static: hsl(0, 0%, 100%);
9
- --bg-error: var(--red-400);
10
- --bg-danger: var(--red-400);
11
- --bg-success: var(--green-400);
12
- --bg-warning: var(--yellow-500);
13
- --bc-error: var(--red-400);
14
- --bc-danger: var(--red-400);
15
- --bc-success: var(--green-400);
16
- --bc-warning: var(--yellow-500);
17
- --fc-light: var(--black-400);
18
- --fc-medium: var(--black-500);
19
- --fc-dark: var(--black-600);
20
- --fc-error: var(--red-400);
21
- --fc-danger: var(--red-400);
22
- --fc-success: var(--green-500);
23
- --fc-warning: var(--yellow-500);
9
+ }
10
+
11
+ body,
12
+ body.themed,
13
+ body .themed {
14
+ color: var(--theme-body-font-color, var(--black-600));
15
+ }
16
+
17
+ body:not(.theme-highcontrast):not(.theme-dark),
18
+ body.theme-highcontrast:not(.theme-dark),
19
+ body:not(.theme-highcontrast).theme-dark .theme-light__forced,
20
+ body.theme-highcontrast.theme-dark .theme-light__forced,
21
+ body:not(.theme-highcontrast).theme-system .theme-light__forced,
22
+ body.theme-highcontrast.theme-system .theme-light__forced,
23
+ body:not(.theme-highcontrast).theme-dark,
24
+ body.theme-highcontrast.theme-dark,
25
+ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced,
26
+ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced,
27
+ body:not(.theme-highcontrast):not(.theme-dark).themed,
28
+ body.theme-highcontrast:not(.theme-dark).themed,
29
+ body:not(.theme-highcontrast).theme-dark .theme-light__forced.themed,
30
+ body.theme-highcontrast.theme-dark .theme-light__forced.themed,
31
+ body:not(.theme-highcontrast).theme-system .theme-light__forced.themed,
32
+ body.theme-highcontrast.theme-system .theme-light__forced.themed,
33
+ body:not(.theme-highcontrast).theme-dark.themed,
34
+ body.theme-highcontrast.theme-dark.themed,
35
+ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced.themed,
36
+ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced.themed,
37
+ body:not(.theme-highcontrast):not(.theme-dark) .themed,
38
+ body.theme-highcontrast:not(.theme-dark) .themed,
39
+ body:not(.theme-highcontrast).theme-dark .theme-light__forced .themed,
40
+ body.theme-highcontrast.theme-dark .theme-light__forced .themed,
41
+ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed,
42
+ body.theme-highcontrast.theme-system .theme-light__forced .themed,
43
+ body:not(.theme-highcontrast).theme-dark .themed,
44
+ body.theme-highcontrast.theme-dark .themed,
45
+ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed,
46
+ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced .themed {
24
47
  --theme-body-font-color: var(--black-600);
25
48
  --theme-background-color: var(--white);
26
49
  --theme-link-color: var(--theme-secondary-400);
@@ -28,7 +51,7 @@ exports[`colors > should output all the css generated by the v2 colors/theming g
28
51
  --theme-link-color-visited: var(--theme-secondary-500);
29
52
  --theme-button-color: var(--theme-secondary-400);
30
53
  --theme-button-background-color: transparent;
31
- --theme-button-hover-color: var(--theme-secondary-400);
54
+ --theme-button-hover-color: var(--theme-secondary-500);
32
55
  --theme-button-hover-background-color: var(--theme-secondary-200);
33
56
  --theme-button-active-background-color: var(--theme-secondary-300);
34
57
  --theme-button-selected-color: var(--theme-secondary-600);
@@ -36,8 +59,8 @@ exports[`colors > should output all the css generated by the v2 colors/theming g
36
59
  --theme-button-primary-color: var(--white);
37
60
  --theme-button-primary-background-color: var(--theme-secondary-400);
38
61
  --theme-button-primary-hover-color: var(--white);
39
- --theme-button-primary-hover-background-color: var(--theme-secondary-400);
40
- --theme-button-primary-active-background-color: var(--theme-secondary-500);
62
+ --theme-button-primary-hover-background-color: var(--theme-secondary-500);
63
+ --theme-button-primary-active-background-color: var(--theme-secondary-600);
41
64
  --theme-button-primary-selected-color: var(--white);
42
65
  --theme-button-primary-selected-background-color: var(--theme-secondary-500);
43
66
  --theme-button-primary-number-color: var(--theme-secondary-600);
@@ -53,11 +76,11 @@ exports[`colors > should output all the css generated by the v2 colors/theming g
53
76
  --theme-button-filled-selected-border-color: var(--theme-secondary-400);
54
77
  --theme-button-outlined-border-color: var(--theme-secondary-400);
55
78
  --theme-button-outlined-selected-border-color: var(--theme-secondary-400);
56
- --theme-tag-color: var(--theme-secondary-600);
57
- --theme-tag-background-color: var(--theme-secondary-200);
79
+ --theme-tag-color: var(--theme-secondary-500);
80
+ --theme-tag-background-color: var(--theme-secondary-100);
58
81
  --theme-tag-border-color: transparent;
59
82
  --theme-tag-hover-color: var(--theme-secondary-600);
60
- --theme-tag-hover-background-color: var(--theme-secondary-300);
83
+ --theme-tag-hover-background-color: var(--theme-secondary-200);
61
84
  --theme-tag-hover-border-color: transparent;
62
85
  --theme-topbar-height: calc(var(--su-static48) + var(--su-static8));
63
86
  --theme-topbar-background-color: var(--white);
@@ -81,12 +104,21 @@ exports[`colors > should output all the css generated by the v2 colors/theming g
81
104
  --theme-post-title-color-visited: var(--theme-link-color-visited);
82
105
  --theme-post-title-font-family: var(--theme-body-font-family);
83
106
  --theme-post-body-font-family: var(--theme-body-font-family);
84
- }
85
-
86
- body,
87
- body.themed,
88
- body .themed {
89
- color: var(--theme-body-font-color, var(--black-600));
107
+ --bg-error: var(--red-400);
108
+ --bg-danger: var(--red-400);
109
+ --bg-success: var(--green-400);
110
+ --bg-warning: var(--yellow-500);
111
+ --bc-error: var(--red-400);
112
+ --bc-danger: var(--red-400);
113
+ --bc-success: var(--green-400);
114
+ --bc-warning: var(--yellow-500);
115
+ --fc-light: var(--black-400);
116
+ --fc-medium: var(--black-500);
117
+ --fc-dark: var(--black-600);
118
+ --fc-error: var(--red-400);
119
+ --fc-danger: var(--red-400);
120
+ --fc-success: var(--green-500);
121
+ --fc-warning: var(--yellow-500);
90
122
  }
91
123
 
92
124
  body:not(.theme-highcontrast):not(.theme-dark),
@@ -105,23 +137,23 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
105
137
  --black-200: hsl(210, 8%, 90%);
106
138
  --black-225: hsl(210, 8%, 85%);
107
139
  --black-250: hsl(210, 8%, 80%);
108
- --black-300: hsl(213, 9%, 75%);
109
- --black-350: hsl(212, 8%, 68%);
110
- --black-400: hsl(210, 8%, 45%);
140
+ --black-300: hsl(210, 9%, 75%);
141
+ --black-350: hsl(210, 8%, 68%);
142
+ --black-400: hsl(210, 8%, 42%);
111
143
  --black-500: hsl(210, 8%, 25%);
112
144
  --black-600: hsl(210, 8%, 5%);
113
- --black: hsl(0, 8%, 5%);
145
+ --black: hsl(0, 0%, 0%);
114
146
  --orange-100: hsl(23, 85%, 97%);
115
147
  --orange-200: hsl(27, 85%, 87%);
116
148
  --orange-300: hsl(27, 85%, 72%);
117
- --orange-400: hsl(27, 90%, 55%);
118
- --orange-500: hsl(27, 88%, 43%);
149
+ --orange-400: hsl(27, 80%, 52%);
150
+ --orange-500: hsl(27, 80%, 43%);
119
151
  --orange-600: hsl(27, 80%, 29%);
120
152
  --blue-100: hsl(210, 80%, 96%);
121
153
  --blue-200: hsl(210, 80%, 91%);
122
154
  --blue-300: hsl(210, 78%, 76%);
123
- --blue-400: hsl(210, 70%, 48%);
124
- --blue-500: hsl(210, 75%, 36%);
155
+ --blue-400: hsl(210, 77%, 46%);
156
+ --blue-500: hsl(210, 77%, 36%);
125
157
  --blue-600: hsl(210, 80%, 23%);
126
158
  --green-100: hsl(148, 35%, 95%);
127
159
  --green-200: hsl(148, 35%, 88%);
@@ -129,7 +161,7 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
129
161
  --green-400: hsl(148, 70%, 31%);
130
162
  --green-500: hsl(148, 75%, 22%);
131
163
  --green-600: hsl(148, 75%, 15%);
132
- --red-100: hsl(0, 78%, 96%);
164
+ --red-100: hsl(0, 72%, 96%);
133
165
  --red-200: hsl(0, 70%, 93%);
134
166
  --red-300: hsl(0, 65%, 76%);
135
167
  --red-400: hsl(0, 60%, 49%);
@@ -141,6 +173,12 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
141
173
  --yellow-400: hsl(43, 85%, 50%);
142
174
  --yellow-500: hsl(43, 85%, 33%);
143
175
  --yellow-600: hsl(43, 84%, 18%);
176
+ --purple-100: hsl(237, 80%, 96%);
177
+ --purple-200: hsl(237, 77%, 92%);
178
+ --purple-300: hsl(237, 60%, 83%);
179
+ --purple-400: hsl(237, 55%, 57%);
180
+ --purple-500: hsl(237, 50%, 45%);
181
+ --purple-600: hsl(237, 50%, 32%);
144
182
  --gold-100: hsl(46, 100%, 91%);
145
183
  --gold-200: hsl(46, 100%, 74%);
146
184
  --gold-300: hsl(45, 100%, 42%);
@@ -170,7 +208,7 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
170
208
  --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
171
209
  --highlight-addition: var(--green-500);
172
210
  --highlight-attribute: hsl(206, 98.5%, 29%);
173
- --highlight-bg: var(--black-100);
211
+ --highlight-bg: hsl(0, 0%, 96.5%);
174
212
  --highlight-color: var(--black-600);
175
213
  --highlight-comment: hsl(210, 8%, 43.5%);
176
214
  --highlight-deletion: var(--red-500);
@@ -218,49 +256,55 @@ body:not(.theme-highcontrast).theme-dark.themed,
218
256
  body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced.themed,
219
257
  body:not(.theme-highcontrast).theme-dark .themed,
220
258
  body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
221
- --white: hsl(220, 3%, 15%);
222
- --black-050: hsl(220, 3%, 15%);
223
- --black-100: hsl(220, 3%, 18%);
224
- --black-150: hsl(230, 4%, 21%);
225
- --black-200: hsl(233, 4%, 27%);
226
- --black-225: hsl(233, 4%, 30%);
227
- --black-250: hsl(235, 5%, 36%);
228
- --black-300: hsl(233, 4%, 47%);
229
- --black-350: hsl(219, 10%, 60%);
230
- --black-400: hsl(220, 10%, 74%);
231
- --black-500: hsl(220, 10%, 83%);
232
- --black-600: hsl(180, 11%, 98%);
259
+ --white: hsl(210, 3%, 15%);
260
+ --black-050: hsl(210, 3%, 15%);
261
+ --black-100: hsl(210, 3%, 18%);
262
+ --black-150: hsl(210, 4%, 21%);
263
+ --black-200: hsl(210, 4%, 27%);
264
+ --black-225: hsl(210, 4%, 30%);
265
+ --black-250: hsl(210, 5%, 36%);
266
+ --black-300: hsl(210, 4%, 47%);
267
+ --black-350: hsl(210, 8%, 70%);
268
+ --black-400: hsl(210, 8%, 80%);
269
+ --black-500: hsl(210, 8%, 90%);
270
+ --black-600: hsl(210, 11%, 98%);
233
271
  --black: hsl(0, 0%, 100%);
234
272
  --orange-100: hsl(27, 29%, 19%);
235
273
  --orange-200: hsl(27, 43%, 31%);
236
274
  --orange-300: hsl(27, 43%, 47%);
237
- --orange-400: hsl(27, 80%, 64%);
238
- --orange-500: hsl(27, 80%, 78%);
239
- --orange-600: hsl(27, 80%, 89%);
275
+ --orange-400: hsl(27, 80%, 80%);
276
+ --orange-500: hsl(27, 80%, 88%);
277
+ --orange-600: hsl(27, 80%, 93%);
240
278
  --blue-100: hsl(209, 29%, 19%);
241
279
  --blue-200: hsl(210, 29%, 35%);
242
280
  --blue-300: hsl(210, 29%, 50%);
243
- --blue-400: hsl(210, 81%, 72%);
244
- --blue-500: hsl(210, 80%, 82%);
245
- --blue-600: hsl(210, 80%, 90%);
281
+ --blue-400: hsl(210, 80%, 80%);
282
+ --blue-500: hsl(210, 80%, 88%);
283
+ --blue-600: hsl(210, 80%, 93%);
246
284
  --green-100: hsl(148, 29%, 19%);
247
285
  --green-200: hsl(148, 29%, 27%);
248
286
  --green-300: hsl(148, 25%, 40%);
249
- --green-400: hsl(148, 40%, 62%);
250
- --green-500: hsl(148, 40%, 75%);
251
- --green-600: hsl(148, 40%, 87%);
287
+ --green-400: hsl(148, 40%, 75%);
288
+ --green-500: hsl(148, 40%, 85%);
289
+ --green-600: hsl(148, 40%, 93%);
252
290
  --red-100: hsl(358, 29%, 19%);
253
291
  --red-200: hsl(0, 29%, 37%);
254
292
  --red-300: hsl(0, 34%, 54%);
255
- --red-400: hsl(0, 75%, 77%);
256
- --red-500: hsl(0, 69%, 85%);
257
- --red-600: hsl(0, 69%, 93%);
293
+ --red-400: hsl(0, 73%, 85%);
294
+ --red-500: hsl(0, 73%, 91%);
295
+ --red-600: hsl(0, 73%, 95%);
258
296
  --yellow-100: hsl(43, 29%, 17%);
259
297
  --yellow-200: hsl(43, 29%, 25%);
260
298
  --yellow-300: hsl(43, 29%, 40%);
261
- --yellow-400: hsl(43, 59%, 64%);
262
- --yellow-500: hsl(43, 65%, 70%);
263
- --yellow-600: hsl(43, 65%, 85%);
299
+ --yellow-400: hsl(43, 75%, 75%);
300
+ --yellow-500: hsl(43, 75%, 85%);
301
+ --yellow-600: hsl(43, 75%, 91%);
302
+ --purple-100: hsl(237, 25%, 24%);
303
+ --purple-200: hsl(237, 27%, 38%);
304
+ --purple-300: hsl(237, 32%, 56%);
305
+ --purple-400: hsl(237, 58%, 86%);
306
+ --purple-500: hsl(237, 60%, 91%);
307
+ --purple-600: hsl(237, 65%, 96%);
264
308
  --gold-100: hsl(45, 29%, 24%);
265
309
  --gold-200: hsl(45, 47%, 37%);
266
310
  --gold-300: hsl(45, 92%, 62%);
@@ -289,12 +333,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
289
333
  --focus-ring-error: hsla(358, 62%, 47%, 0.15);
290
334
  --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
291
335
  --highlight-addition: var(--green-500);
292
- --highlight-attribute: hsl(207, 41.5%, 67%);
336
+ --highlight-attribute: var(--blue-400);
293
337
  --highlight-bg: hsl(0, 2%, 11%);
294
338
  --highlight-color: var(--black);
295
339
  --highlight-comment: hsl(0, 0%, 60%);
296
340
  --highlight-deletion: var(--red-500);
297
- --highlight-keyword: hsl(208, 41.5%, 67%);
341
+ --highlight-keyword: var(--blue-400);
298
342
  --highlight-literal: hsl(27, 85%, 61.5%);
299
343
  --highlight-namespace: hsl(27, 85%, 61.5%);
300
344
  --highlight-punctuation: hsl(0, 0%, 80%);
@@ -336,49 +380,55 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
336
380
  body:not(.theme-highcontrast).theme-system,
337
381
  body:not(.theme-highcontrast).theme-system.themed,
338
382
  body:not(.theme-highcontrast).theme-system .themed {
339
- --white: hsl(220, 3%, 15%);
340
- --black-050: hsl(220, 3%, 15%);
341
- --black-100: hsl(220, 3%, 18%);
342
- --black-150: hsl(230, 4%, 21%);
343
- --black-200: hsl(233, 4%, 27%);
344
- --black-225: hsl(233, 4%, 30%);
345
- --black-250: hsl(235, 5%, 36%);
346
- --black-300: hsl(233, 4%, 47%);
347
- --black-350: hsl(219, 10%, 60%);
348
- --black-400: hsl(220, 10%, 74%);
349
- --black-500: hsl(220, 10%, 83%);
350
- --black-600: hsl(180, 11%, 98%);
383
+ --white: hsl(210, 3%, 15%);
384
+ --black-050: hsl(210, 3%, 15%);
385
+ --black-100: hsl(210, 3%, 18%);
386
+ --black-150: hsl(210, 4%, 21%);
387
+ --black-200: hsl(210, 4%, 27%);
388
+ --black-225: hsl(210, 4%, 30%);
389
+ --black-250: hsl(210, 5%, 36%);
390
+ --black-300: hsl(210, 4%, 47%);
391
+ --black-350: hsl(210, 8%, 70%);
392
+ --black-400: hsl(210, 8%, 80%);
393
+ --black-500: hsl(210, 8%, 90%);
394
+ --black-600: hsl(210, 11%, 98%);
351
395
  --black: hsl(0, 0%, 100%);
352
396
  --orange-100: hsl(27, 29%, 19%);
353
397
  --orange-200: hsl(27, 43%, 31%);
354
398
  --orange-300: hsl(27, 43%, 47%);
355
- --orange-400: hsl(27, 80%, 64%);
356
- --orange-500: hsl(27, 80%, 78%);
357
- --orange-600: hsl(27, 80%, 89%);
399
+ --orange-400: hsl(27, 80%, 80%);
400
+ --orange-500: hsl(27, 80%, 88%);
401
+ --orange-600: hsl(27, 80%, 93%);
358
402
  --blue-100: hsl(209, 29%, 19%);
359
403
  --blue-200: hsl(210, 29%, 35%);
360
404
  --blue-300: hsl(210, 29%, 50%);
361
- --blue-400: hsl(210, 81%, 72%);
362
- --blue-500: hsl(210, 80%, 82%);
363
- --blue-600: hsl(210, 80%, 90%);
405
+ --blue-400: hsl(210, 80%, 80%);
406
+ --blue-500: hsl(210, 80%, 88%);
407
+ --blue-600: hsl(210, 80%, 93%);
364
408
  --green-100: hsl(148, 29%, 19%);
365
409
  --green-200: hsl(148, 29%, 27%);
366
410
  --green-300: hsl(148, 25%, 40%);
367
- --green-400: hsl(148, 40%, 62%);
368
- --green-500: hsl(148, 40%, 75%);
369
- --green-600: hsl(148, 40%, 87%);
411
+ --green-400: hsl(148, 40%, 75%);
412
+ --green-500: hsl(148, 40%, 85%);
413
+ --green-600: hsl(148, 40%, 93%);
370
414
  --red-100: hsl(358, 29%, 19%);
371
415
  --red-200: hsl(0, 29%, 37%);
372
416
  --red-300: hsl(0, 34%, 54%);
373
- --red-400: hsl(0, 75%, 77%);
374
- --red-500: hsl(0, 69%, 85%);
375
- --red-600: hsl(0, 69%, 93%);
417
+ --red-400: hsl(0, 73%, 85%);
418
+ --red-500: hsl(0, 73%, 91%);
419
+ --red-600: hsl(0, 73%, 95%);
376
420
  --yellow-100: hsl(43, 29%, 17%);
377
421
  --yellow-200: hsl(43, 29%, 25%);
378
422
  --yellow-300: hsl(43, 29%, 40%);
379
- --yellow-400: hsl(43, 59%, 64%);
380
- --yellow-500: hsl(43, 65%, 70%);
381
- --yellow-600: hsl(43, 65%, 85%);
423
+ --yellow-400: hsl(43, 75%, 75%);
424
+ --yellow-500: hsl(43, 75%, 85%);
425
+ --yellow-600: hsl(43, 75%, 91%);
426
+ --purple-100: hsl(237, 25%, 24%);
427
+ --purple-200: hsl(237, 27%, 38%);
428
+ --purple-300: hsl(237, 32%, 56%);
429
+ --purple-400: hsl(237, 58%, 86%);
430
+ --purple-500: hsl(237, 60%, 91%);
431
+ --purple-600: hsl(237, 65%, 96%);
382
432
  --gold-100: hsl(45, 29%, 24%);
383
433
  --gold-200: hsl(45, 47%, 37%);
384
434
  --gold-300: hsl(45, 92%, 62%);
@@ -407,12 +457,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
407
457
  --focus-ring-error: hsla(358, 62%, 47%, 0.15);
408
458
  --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
409
459
  --highlight-addition: var(--green-500);
410
- --highlight-attribute: hsl(207, 41.5%, 67%);
460
+ --highlight-attribute: var(--blue-400);
411
461
  --highlight-bg: hsl(0, 2%, 11%);
412
462
  --highlight-color: var(--black);
413
463
  --highlight-comment: hsl(0, 0%, 60%);
414
464
  --highlight-deletion: var(--red-500);
415
- --highlight-keyword: hsl(208, 41.5%, 67%);
465
+ --highlight-keyword: var(--blue-400);
416
466
  --highlight-literal: hsl(27, 85%, 61.5%);
417
467
  --highlight-namespace: hsl(27, 85%, 61.5%);
418
468
  --highlight-punctuation: hsl(0, 0%, 80%);
@@ -461,34 +511,34 @@ body.theme-highcontrast.theme-system .theme-light__forced {
461
511
  --black-200: hsl(210, 8%, 90%);
462
512
  --black-225: hsl(210, 8%, 85%);
463
513
  --black-250: hsl(210, 8%, 80%);
464
- --black-300: hsl(213, 9%, 75%);
514
+ --black-300: hsl(210, 9%, 75%);
465
515
  --black-350: hsl(210, 8%, 45%);
466
- --black-400: hsl(210, 8%, 45%);
516
+ --black-400: hsl(212, 8%, 35%);
467
517
  --black-500: hsl(210, 8%, 25%);
468
518
  --black-600: hsl(210, 8%, 5%);
469
- --black: hsl(0, 8%, 5%);
519
+ --black: hsl(0, 0%, 0%);
470
520
  --orange-100: hsl(22, 85%, 97%);
471
521
  --orange-200: hsl(22, 85%, 97%);
472
522
  --orange-300: hsl(27, 90%, 55%);
473
523
  --orange-400: hsl(27, 90%, 55%);
474
- --orange-500: hsl(27, 80%, 29%);
475
- --orange-600: hsl(27, 80%, 29%);
524
+ --orange-500: hsl(27, 80%, 28%);
525
+ --orange-600: hsl(27, 80%, 28%);
476
526
  --blue-100: hsl(210, 80%, 96%);
477
527
  --blue-200: hsl(210, 80%, 96%);
478
528
  --blue-300: hsl(210, 70%, 48%);
479
- --blue-400: hsl(210, 70%, 48%);
529
+ --blue-400: hsl(210, 77%, 34%);
480
530
  --blue-500: hsl(210, 80%, 23%);
481
531
  --blue-600: hsl(210, 80%, 23%);
482
532
  --green-100: hsl(147, 36%, 95%);
483
533
  --green-200: hsl(147, 36%, 95%);
484
534
  --green-300: hsl(148, 70%, 31%);
485
- --green-400: hsl(148, 70%, 31%);
535
+ --green-400: hsl(148, 75%, 22%);
486
536
  --green-500: hsl(147, 74%, 15%);
487
537
  --green-600: hsl(147, 74%, 15%);
488
538
  --red-100: hsl(0, 79%, 96%);
489
539
  --red-200: hsl(0, 79%, 96%);
490
540
  --red-300: hsl(0, 60%, 49%);
491
- --red-400: hsl(0, 60%, 49%);
541
+ --red-400: hsl(0, 65%, 37%);
492
542
  --red-500: hsl(0, 66%, 24%);
493
543
  --red-600: hsl(0, 66%, 24%);
494
544
  --yellow-100: hsl(41, 80%, 96%);
@@ -497,12 +547,18 @@ body.theme-highcontrast.theme-system .theme-light__forced {
497
547
  --yellow-400: hsl(43, 85%, 50%);
498
548
  --yellow-500: hsl(48, 85%, 18%);
499
549
  --yellow-600: hsl(48, 85%, 18%);
550
+ --purple-100: hsl(237, 80%, 96%);
551
+ --purple-200: hsl(237, 80%, 96%);
552
+ --purple-300: hsl(237, 55%, 57%);
553
+ --purple-400: hsl(237, 55%, 57%);
554
+ --purple-500: hsl(237, 50%, 32%);
555
+ --purple-600: hsl(237, 50%, 32%);
500
556
  --gold-100: hsl(46, 100%, 91%);
501
557
  --gold-200: hsl(46, 100%, 91%);
502
558
  --gold-300: hsl(45, 100%, 42%);
503
559
  --gold-400: hsl(46, 92%, 26%);
504
560
  --silver-100: hsl(0, 0%, 95%);
505
- --silver-200: hsl(0, 0%, 84%);
561
+ --silver-200: hsl(0, 0%, 95%);
506
562
  --silver-300: hsl(210, 5%, 68%);
507
563
  --silver-400: hsl(216, 2%, 40%);
508
564
  --bronze-100: hsl(28, 40%, 92%);
@@ -557,48 +613,54 @@ body.theme-highcontrast.theme-system .theme-light__forced {
557
613
  body.theme-highcontrast.theme-dark,
558
614
  body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
559
615
  --white: hsl(0, 0%, 0%);
560
- --black-050: hsl(220, 3%, 15%);
561
- --black-100: hsl(220, 3%, 18%);
562
- --black-150: hsl(230, 4%, 21%);
563
- --black-200: hsl(233, 4%, 27%);
564
- --black-225: hsl(233, 4%, 30%);
565
- --black-250: hsl(235, 5%, 36%);
566
- --black-300: hsl(233, 4%, 47%);
567
- --black-350: hsl(220, 10%, 74%);
568
- --black-400: hsl(220, 10%, 74%);
569
- --black-500: hsl(220, 10%, 83%);
570
- --black-600: hsl(180, 11%, 98%);
616
+ --black-050: hsl(210, 3%, 15%);
617
+ --black-100: hsl(210, 3%, 18%);
618
+ --black-150: hsl(210, 4%, 21%);
619
+ --black-200: hsl(210, 4%, 27%);
620
+ --black-225: hsl(210, 4%, 30%);
621
+ --black-250: hsl(210, 5%, 36%);
622
+ --black-300: hsl(210, 4%, 47%);
623
+ --black-350: hsl(210, 10%, 74%);
624
+ --black-400: hsl(210, 8%, 80%);
625
+ --black-500: hsl(210, 8%, 90%);
626
+ --black-600: hsl(210, 11%, 98%);
571
627
  --black: hsl(0, 0%, 100%);
572
628
  --orange-100: hsl(27, 29%, 19%);
573
629
  --orange-200: hsl(27, 29%, 19%);
574
630
  --orange-300: hsl(27, 80%, 64%);
575
- --orange-400: hsl(27, 80%, 64%);
631
+ --orange-400: hsl(27, 80%, 80%);
576
632
  --orange-500: hsl(27, 79%, 89%);
577
- --orange-600: hsl(27, 79%, 89%);
633
+ --orange-600: hsl(27, 80%, 93%);
578
634
  --blue-100: hsl(209, 29%, 19%);
579
635
  --blue-200: hsl(209, 29%, 19%);
580
636
  --blue-300: hsl(210, 80%, 72%);
581
- --blue-400: hsl(210, 80%, 72%);
637
+ --blue-400: hsl(210, 80%, 80%);
582
638
  --blue-500: hsl(209, 79%, 87%);
583
- --blue-600: hsl(209, 79%, 87%);
639
+ --blue-600: hsl(210, 80%, 93%);
584
640
  --green-100: hsl(147, 29%, 19%);
585
641
  --green-200: hsl(147, 29%, 19%);
586
642
  --green-300: hsl(148, 40%, 62%);
587
- --green-400: hsl(148, 40%, 62%);
643
+ --green-400: hsl(148, 40%, 75%);
588
644
  --green-500: hsl(148, 39%, 87%);
589
- --green-600: hsl(148, 39%, 87%);
645
+ --green-600: hsl(148, 40%, 93%);
590
646
  --red-100: hsl(358, 29%, 19%);
591
647
  --red-200: hsl(358, 29%, 19%);
592
648
  --red-300: hsl(0, 75%, 77%);
593
- --red-400: hsl(0, 75%, 77%);
649
+ --red-400: hsl(0, 73%, 85%);
594
650
  --red-500: hsl(0, 70%, 92%);
595
- --red-600: hsl(0, 70%, 92%);
651
+ --red-600: hsl(0, 73%, 95%);
596
652
  --yellow-100: hsl(43, 29%, 17%);
597
653
  --yellow-200: hsl(43, 29%, 17%);
598
654
  --yellow-300: hsl(43, 59%, 64%);
599
- --yellow-400: hsl(43, 59%, 64%);
655
+ --yellow-400: hsl(43, 75%, 75%);
600
656
  --yellow-500: hsl(48, 74%, 91%);
601
- --yellow-600: hsl(48, 74%, 91%);
657
+ --yellow-600: hsl(43, 75%, 91%);
658
+ --purple-100: hsl(237, 25%, 24%);
659
+ --purple-200: hsl(237, 25%, 24%);
660
+ --purple-300: hsl(237, 58%, 86%);
661
+ --purple-400: hsl(237, 58%, 86%);
662
+ --purple-500: hsl(237, 65%, 96%);
663
+ --purple-600: hsl(237, 65%, 96%);
602
664
  --gold-100: hsl(45, 22%, 25%);
603
665
  --gold-200: hsl(45, 22%, 25%);
604
666
  --gold-300: hsl(45, 92%, 62%);
@@ -659,48 +721,54 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
659
721
  @media (prefers-color-scheme: dark) {
660
722
  body.theme-highcontrast.theme-system {
661
723
  --white: hsl(0, 0%, 0%);
662
- --black-050: hsl(220, 3%, 15%);
663
- --black-100: hsl(220, 3%, 18%);
664
- --black-150: hsl(230, 4%, 21%);
665
- --black-200: hsl(233, 4%, 27%);
666
- --black-225: hsl(233, 4%, 30%);
667
- --black-250: hsl(235, 5%, 36%);
668
- --black-300: hsl(233, 4%, 47%);
669
- --black-350: hsl(220, 10%, 74%);
670
- --black-400: hsl(220, 10%, 74%);
671
- --black-500: hsl(220, 10%, 83%);
672
- --black-600: hsl(180, 11%, 98%);
724
+ --black-050: hsl(210, 3%, 15%);
725
+ --black-100: hsl(210, 3%, 18%);
726
+ --black-150: hsl(210, 4%, 21%);
727
+ --black-200: hsl(210, 4%, 27%);
728
+ --black-225: hsl(210, 4%, 30%);
729
+ --black-250: hsl(210, 5%, 36%);
730
+ --black-300: hsl(210, 4%, 47%);
731
+ --black-350: hsl(210, 10%, 74%);
732
+ --black-400: hsl(210, 8%, 80%);
733
+ --black-500: hsl(210, 8%, 90%);
734
+ --black-600: hsl(210, 11%, 98%);
673
735
  --black: hsl(0, 0%, 100%);
674
736
  --orange-100: hsl(27, 29%, 19%);
675
737
  --orange-200: hsl(27, 29%, 19%);
676
738
  --orange-300: hsl(27, 80%, 64%);
677
- --orange-400: hsl(27, 80%, 64%);
739
+ --orange-400: hsl(27, 80%, 80%);
678
740
  --orange-500: hsl(27, 79%, 89%);
679
- --orange-600: hsl(27, 79%, 89%);
741
+ --orange-600: hsl(27, 80%, 93%);
680
742
  --blue-100: hsl(209, 29%, 19%);
681
743
  --blue-200: hsl(209, 29%, 19%);
682
744
  --blue-300: hsl(210, 80%, 72%);
683
- --blue-400: hsl(210, 80%, 72%);
745
+ --blue-400: hsl(210, 80%, 80%);
684
746
  --blue-500: hsl(209, 79%, 87%);
685
- --blue-600: hsl(209, 79%, 87%);
747
+ --blue-600: hsl(210, 80%, 93%);
686
748
  --green-100: hsl(147, 29%, 19%);
687
749
  --green-200: hsl(147, 29%, 19%);
688
750
  --green-300: hsl(148, 40%, 62%);
689
- --green-400: hsl(148, 40%, 62%);
751
+ --green-400: hsl(148, 40%, 75%);
690
752
  --green-500: hsl(148, 39%, 87%);
691
- --green-600: hsl(148, 39%, 87%);
753
+ --green-600: hsl(148, 40%, 93%);
692
754
  --red-100: hsl(358, 29%, 19%);
693
755
  --red-200: hsl(358, 29%, 19%);
694
756
  --red-300: hsl(0, 75%, 77%);
695
- --red-400: hsl(0, 75%, 77%);
757
+ --red-400: hsl(0, 73%, 85%);
696
758
  --red-500: hsl(0, 70%, 92%);
697
- --red-600: hsl(0, 70%, 92%);
759
+ --red-600: hsl(0, 73%, 95%);
698
760
  --yellow-100: hsl(43, 29%, 17%);
699
761
  --yellow-200: hsl(43, 29%, 17%);
700
762
  --yellow-300: hsl(43, 59%, 64%);
701
- --yellow-400: hsl(43, 59%, 64%);
763
+ --yellow-400: hsl(43, 75%, 75%);
702
764
  --yellow-500: hsl(48, 74%, 91%);
703
- --yellow-600: hsl(48, 74%, 91%);
765
+ --yellow-600: hsl(43, 75%, 91%);
766
+ --purple-100: hsl(237, 25%, 24%);
767
+ --purple-200: hsl(237, 25%, 24%);
768
+ --purple-300: hsl(237, 58%, 86%);
769
+ --purple-400: hsl(237, 58%, 86%);
770
+ --purple-500: hsl(237, 65%, 96%);
771
+ --purple-600: hsl(237, 65%, 96%);
704
772
  --gold-100: hsl(45, 22%, 25%);
705
773
  --gold-200: hsl(45, 22%, 25%);
706
774
  --gold-300: hsl(45, 92%, 62%);