@stackoverflow/stacks 2.0.0-rc.1 → 2.0.0-rc.10

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 (78) hide show
  1. package/README.md +5 -0
  2. package/dist/components/code-block/code-block.fixtures.d.ts +2 -0
  3. package/dist/css/stacks.css +792 -765
  4. package/dist/css/stacks.min.css +1 -1
  5. package/dist/js/stacks.js +265 -110
  6. package/dist/js/stacks.min.js +1 -1
  7. package/lib/atomic/__snapshots__/color.less.test.ts.snap +246 -0
  8. package/lib/atomic/typography.less +4 -0
  9. package/lib/base/body.less +2 -2
  10. package/lib/components/activity-indicator/activity-indicator.a11y.test.ts +1 -1
  11. package/lib/components/activity-indicator/activity-indicator.less +17 -4
  12. package/lib/components/anchor/anchor.less +10 -6
  13. package/lib/components/anchor/anchor.visual.test.ts +0 -4
  14. package/lib/components/avatar/avatar.visual.test.ts +0 -3
  15. package/lib/components/badge/badge.a11y.test.ts +2 -2
  16. package/lib/components/badge/badge.less +21 -29
  17. package/lib/components/banner/banner.less +2 -2
  18. package/lib/components/block-link/block-link.less +5 -4
  19. package/lib/components/button/button.a11y.test.ts +1 -4
  20. package/lib/components/button/button.less +48 -78
  21. package/lib/components/button/button.visual.test.ts +1 -4
  22. package/lib/components/card/card.less +8 -0
  23. package/lib/components/code-block/code-block.a11y.test.ts +30 -0
  24. package/lib/components/code-block/code-block.fixtures.ts +88 -0
  25. package/lib/components/code-block/code-block.visual.test.ts +20 -0
  26. package/lib/components/description/description.a11y.test.ts +1 -0
  27. package/lib/components/description/description.less +1 -1
  28. package/lib/components/expandable/expandable.a11y.test.ts +27 -0
  29. package/lib/components/expandable/expandable.visual.test.ts +27 -0
  30. package/lib/components/input-icon/input-icon.less +1 -1
  31. package/lib/components/input-message/input-message.less +4 -3
  32. package/lib/components/input_textarea/input_textarea.less +1 -1
  33. package/lib/components/label/label.less +4 -14
  34. package/lib/components/link/link.less +12 -12
  35. package/lib/components/link-preview/link-preview.a11y.test.ts +48 -0
  36. package/lib/components/link-preview/link-preview.less +16 -7
  37. package/lib/components/link-preview/link-preview.visual.test.ts +52 -0
  38. package/lib/components/navigation/navigation.a11y.test.ts +80 -0
  39. package/lib/components/navigation/navigation.visual.test.ts +101 -0
  40. package/lib/components/notice/notice.a11y.test.ts +17 -0
  41. package/lib/components/notice/notice.less +45 -82
  42. package/lib/components/notice/notice.visual.test.ts +26 -0
  43. package/lib/components/page-title/page-title.a11y.test.ts +29 -0
  44. package/lib/components/page-title/page-title.less +1 -1
  45. package/lib/components/page-title/page-title.visual.test.ts +59 -0
  46. package/lib/components/pagination/pagination.a11y.test.ts +20 -0
  47. package/lib/components/pagination/pagination.less +2 -2
  48. package/lib/components/pagination/pagination.visual.test.ts +26 -0
  49. package/lib/components/post-summary/post-summary.less +15 -15
  50. package/lib/components/progress-bar/progress-bar.less +2 -2
  51. package/lib/components/prose/prose.less +2 -2
  52. package/lib/components/select/select.less +1 -1
  53. package/lib/components/sidebar-widget/sidebar-widget.less +3 -3
  54. package/lib/components/spinner/spinner.a11y.test.ts +15 -0
  55. package/lib/components/spinner/spinner.visual.test.ts +43 -0
  56. package/lib/components/tag/tag.a11y.test.ts +23 -0
  57. package/lib/components/tag/tag.less +29 -29
  58. package/lib/components/tag/tag.visual.test.ts +46 -0
  59. package/lib/components/toast/toast.a11y.test.ts +30 -0
  60. package/lib/components/toast/toast.visual.test.ts +10 -6
  61. package/lib/components/toggle-switch/toggle-switch.less +2 -5
  62. package/lib/components/topbar/topbar.less +44 -44
  63. package/lib/components/uploader/uploader.less +19 -13
  64. package/lib/components/user-card/user-card.less +1 -1
  65. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +17 -10
  66. package/lib/exports/__snapshots__/color.less.test.ts.snap +197 -185
  67. package/lib/exports/color-mixins.less +1 -1
  68. package/lib/exports/color-sets.less +130 -81
  69. package/lib/exports/color.less +14 -6
  70. package/lib/exports/v1/__snapshots__/constants-colors.less.test.ts.snap +3 -3
  71. package/lib/exports/v1/constants-colors.less +2 -2
  72. package/lib/input-utils.less +1 -1
  73. package/lib/test/axe-apca/README.md +19 -0
  74. package/lib/test/axe-apca/src/axe-apca.test.ts +77 -1
  75. package/lib/test/axe-apca/src/axe-apca.ts +16 -8
  76. package/lib/test/test-utils.ts +7 -3
  77. package/package.json +14 -14
  78. package/lib/exports/theme.less +0 -85
package/lib/exports/__snapshots__/color.less.test.ts.snap CHANGED
@@ -4,8 +4,25 @@ 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
+ }
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,74 +36,30 @@ 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
- --theme-body-font-color: var(--black-600);
25
- --theme-background-color: var(--white);
26
- --theme-link-color: var(--theme-secondary-400);
27
- --theme-link-color-hover: var(--theme-secondary-400);
28
- --theme-link-color-visited: var(--theme-secondary-500);
29
- --theme-button-color: var(--theme-secondary-400);
30
- --theme-button-background-color: transparent;
31
- --theme-button-hover-color: var(--theme-secondary-400);
32
- --theme-button-hover-background-color: var(--theme-secondary-200);
33
- --theme-button-active-background-color: var(--theme-secondary-300);
34
- --theme-button-selected-color: var(--theme-secondary-600);
35
- --theme-button-selected-background-color: var(--theme-secondary-300);
36
- --theme-button-primary-color: var(--white);
37
- --theme-button-primary-background-color: var(--theme-secondary-400);
38
- --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);
41
- --theme-button-primary-selected-color: var(--white);
42
- --theme-button-primary-selected-background-color: var(--theme-secondary-500);
43
- --theme-button-primary-number-color: var(--theme-secondary-600);
44
- --theme-button-filled-color: var(--theme-secondary-500);
45
- --theme-button-filled-background-color: var(--theme-secondary-200);
46
- --theme-button-filled-border-color: var(--theme-secondary-400);
47
- --theme-button-filled-hover-color: var(--theme-secondary-600);
48
- --theme-button-filled-hover-background-color: var(--theme-secondary-300);
49
- --theme-button-filled-active-background-color: var(--theme-secondary-300);
50
- --theme-button-filled-active-border-color: var(--theme-secondary-400);
51
- --theme-button-filled-selected-color: var(--theme-secondary-600);
52
- --theme-button-filled-selected-background-color: var(--theme-secondary-400);
53
- --theme-button-filled-selected-border-color: var(--theme-secondary-400);
54
- --theme-button-outlined-border-color: var(--theme-secondary-400);
55
- --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);
58
- --theme-tag-border-color: transparent;
59
- --theme-tag-hover-color: var(--theme-secondary-600);
60
- --theme-tag-hover-background-color: var(--theme-secondary-300);
61
- --theme-tag-hover-border-color: transparent;
62
- --theme-topbar-height: calc(var(--su-static48) + var(--su-static8));
63
- --theme-topbar-background-color: var(--white);
64
- --theme-topbar-search-color: var(--black-500);
65
- --theme-topbar-search-background: var(--white);
66
- --theme-topbar-search-placeholder: var(--black-400);
67
- --theme-topbar-search-border: var(--black-300);
68
- --theme-topbar-search-border-focus: var(--blue-400);
69
- --theme-topbar-search-shadow-focus: 0 0 0 var(--su-static4) var(--focus-ring);
70
- --theme-topbar-select-color: var(--black-500);
71
- --theme-topbar-select-background: var(--black-200);
72
- --theme-topbar-item-color: var(--black-500);
73
- --theme-topbar-item-color-hover: var(--black-600);
74
- --theme-topbar-item-background-hover: var(--black-200);
75
- --theme-topbar-item-color-current: var(--black);
76
- --theme-topbar-item-border-current: var(--theme-primary);
77
- --theme-topbar-accent-border: 3px solid var(--theme-primary);
78
- --theme-topbar-bottom-border: 1px solid var(--black-225);
79
- --theme-post-title-color: var(--theme-link-color);
80
- --theme-post-title-color-hover: var(--theme-link-color-hover);
81
- --theme-post-title-color-visited: var(--theme-link-color-visited);
82
- --theme-post-title-font-family: var(--theme-body-font-family);
83
- --theme-post-body-font-family: var(--theme-body-font-family);
84
41
  }
85
42
 
86
- body,
87
- body.themed,
88
- body .themed {
89
- color: var(--theme-body-font-color, var(--black-600));
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
+ }
90
63
  }
91
64
 
92
65
  body:not(.theme-highcontrast):not(.theme-dark),
@@ -105,23 +78,23 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
105
78
  --black-200: hsl(210, 8%, 90%);
106
79
  --black-225: hsl(210, 8%, 85%);
107
80
  --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%);
81
+ --black-300: hsl(210, 9%, 75%);
82
+ --black-350: hsl(210, 8%, 68%);
83
+ --black-400: hsl(210, 8%, 42%);
111
84
  --black-500: hsl(210, 8%, 25%);
112
85
  --black-600: hsl(210, 8%, 5%);
113
- --black: hsl(0, 8%, 5%);
86
+ --black: hsl(0, 0%, 0%);
114
87
  --orange-100: hsl(23, 85%, 97%);
115
88
  --orange-200: hsl(27, 85%, 87%);
116
89
  --orange-300: hsl(27, 85%, 72%);
117
- --orange-400: hsl(27, 90%, 55%);
118
- --orange-500: hsl(27, 88%, 43%);
90
+ --orange-400: hsl(27, 80%, 52%);
91
+ --orange-500: hsl(27, 80%, 43%);
119
92
  --orange-600: hsl(27, 80%, 29%);
120
93
  --blue-100: hsl(210, 80%, 96%);
121
94
  --blue-200: hsl(210, 80%, 91%);
122
95
  --blue-300: hsl(210, 78%, 76%);
123
- --blue-400: hsl(210, 70%, 48%);
124
- --blue-500: hsl(210, 75%, 36%);
96
+ --blue-400: hsl(210, 77%, 46%);
97
+ --blue-500: hsl(210, 77%, 36%);
125
98
  --blue-600: hsl(210, 80%, 23%);
126
99
  --green-100: hsl(148, 35%, 95%);
127
100
  --green-200: hsl(148, 35%, 88%);
@@ -129,7 +102,7 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
129
102
  --green-400: hsl(148, 70%, 31%);
130
103
  --green-500: hsl(148, 75%, 22%);
131
104
  --green-600: hsl(148, 75%, 15%);
132
- --red-100: hsl(0, 78%, 96%);
105
+ --red-100: hsl(0, 72%, 96%);
133
106
  --red-200: hsl(0, 70%, 93%);
134
107
  --red-300: hsl(0, 65%, 76%);
135
108
  --red-400: hsl(0, 60%, 49%);
@@ -141,6 +114,12 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
141
114
  --yellow-400: hsl(43, 85%, 50%);
142
115
  --yellow-500: hsl(43, 85%, 33%);
143
116
  --yellow-600: hsl(43, 84%, 18%);
117
+ --purple-100: hsl(237, 80%, 96%);
118
+ --purple-200: hsl(237, 77%, 92%);
119
+ --purple-300: hsl(237, 60%, 83%);
120
+ --purple-400: hsl(237, 55%, 57%);
121
+ --purple-500: hsl(237, 50%, 45%);
122
+ --purple-600: hsl(237, 50%, 32%);
144
123
  --gold-100: hsl(46, 100%, 91%);
145
124
  --gold-200: hsl(46, 100%, 74%);
146
125
  --gold-300: hsl(45, 100%, 42%);
@@ -170,7 +149,7 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
170
149
  --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
171
150
  --highlight-addition: var(--green-500);
172
151
  --highlight-attribute: hsl(206, 98.5%, 29%);
173
- --highlight-bg: var(--black-100);
152
+ --highlight-bg: hsl(0, 0%, 96.5%);
174
153
  --highlight-color: var(--black-600);
175
154
  --highlight-comment: hsl(210, 8%, 43.5%);
176
155
  --highlight-deletion: var(--red-500);
@@ -210,6 +189,7 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
210
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%));
211
190
  --theme-secondary-custom: var(--theme-secondary-custom-400);
212
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
+ color: var(--theme-body-font-color, var(--black-600));
213
193
  }
214
194
 
215
195
  body:not(.theme-highcontrast).theme-dark,
@@ -218,49 +198,55 @@ body:not(.theme-highcontrast).theme-dark.themed,
218
198
  body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced.themed,
219
199
  body:not(.theme-highcontrast).theme-dark .themed,
220
200
  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%);
201
+ --white: hsl(210, 3%, 15%);
202
+ --black-050: hsl(210, 3%, 15%);
203
+ --black-100: hsl(210, 3%, 18%);
204
+ --black-150: hsl(210, 4%, 21%);
205
+ --black-200: hsl(210, 4%, 27%);
206
+ --black-225: hsl(210, 4%, 30%);
207
+ --black-250: hsl(210, 5%, 36%);
208
+ --black-300: hsl(210, 4%, 47%);
209
+ --black-350: hsl(210, 8%, 70%);
210
+ --black-400: hsl(210, 8%, 80%);
211
+ --black-500: hsl(210, 8%, 90%);
212
+ --black-600: hsl(210, 11%, 98%);
233
213
  --black: hsl(0, 0%, 100%);
234
214
  --orange-100: hsl(27, 29%, 19%);
235
215
  --orange-200: hsl(27, 43%, 31%);
236
216
  --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%);
217
+ --orange-400: hsl(27, 80%, 80%);
218
+ --orange-500: hsl(27, 80%, 88%);
219
+ --orange-600: hsl(27, 80%, 93%);
240
220
  --blue-100: hsl(209, 29%, 19%);
241
221
  --blue-200: hsl(210, 29%, 35%);
242
222
  --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%);
223
+ --blue-400: hsl(210, 80%, 80%);
224
+ --blue-500: hsl(210, 80%, 88%);
225
+ --blue-600: hsl(210, 80%, 93%);
246
226
  --green-100: hsl(148, 29%, 19%);
247
227
  --green-200: hsl(148, 29%, 27%);
248
228
  --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%);
229
+ --green-400: hsl(148, 40%, 75%);
230
+ --green-500: hsl(148, 40%, 85%);
231
+ --green-600: hsl(148, 40%, 93%);
252
232
  --red-100: hsl(358, 29%, 19%);
253
233
  --red-200: hsl(0, 29%, 37%);
254
234
  --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%);
235
+ --red-400: hsl(0, 73%, 85%);
236
+ --red-500: hsl(0, 73%, 91%);
237
+ --red-600: hsl(0, 73%, 95%);
258
238
  --yellow-100: hsl(43, 29%, 17%);
259
239
  --yellow-200: hsl(43, 29%, 25%);
260
240
  --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%);
241
+ --yellow-400: hsl(43, 75%, 75%);
242
+ --yellow-500: hsl(43, 75%, 85%);
243
+ --yellow-600: hsl(43, 75%, 91%);
244
+ --purple-100: hsl(237, 25%, 24%);
245
+ --purple-200: hsl(237, 27%, 38%);
246
+ --purple-300: hsl(237, 32%, 56%);
247
+ --purple-400: hsl(237, 58%, 86%);
248
+ --purple-500: hsl(237, 60%, 91%);
249
+ --purple-600: hsl(237, 65%, 96%);
264
250
  --gold-100: hsl(45, 29%, 24%);
265
251
  --gold-200: hsl(45, 47%, 37%);
266
252
  --gold-300: hsl(45, 92%, 62%);
@@ -289,12 +275,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
289
275
  --focus-ring-error: hsla(358, 62%, 47%, 0.15);
290
276
  --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
291
277
  --highlight-addition: var(--green-500);
292
- --highlight-attribute: hsl(207, 41.5%, 67%);
278
+ --highlight-attribute: var(--blue-400);
293
279
  --highlight-bg: hsl(0, 2%, 11%);
294
280
  --highlight-color: var(--black);
295
281
  --highlight-comment: hsl(0, 0%, 60%);
296
282
  --highlight-deletion: var(--red-500);
297
- --highlight-keyword: hsl(208, 41.5%, 67%);
283
+ --highlight-keyword: var(--blue-400);
298
284
  --highlight-literal: hsl(27, 85%, 61.5%);
299
285
  --highlight-namespace: hsl(27, 85%, 61.5%);
300
286
  --highlight-punctuation: hsl(0, 0%, 80%);
@@ -330,55 +316,62 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
330
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%));
331
317
  --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
332
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
+ color: var(--theme-body-font-color, var(--black-600));
333
320
  }
334
321
 
335
322
  @media (prefers-color-scheme: dark) {
336
323
  body:not(.theme-highcontrast).theme-system,
337
324
  body:not(.theme-highcontrast).theme-system.themed,
338
325
  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%);
326
+ --white: hsl(210, 3%, 15%);
327
+ --black-050: hsl(210, 3%, 15%);
328
+ --black-100: hsl(210, 3%, 18%);
329
+ --black-150: hsl(210, 4%, 21%);
330
+ --black-200: hsl(210, 4%, 27%);
331
+ --black-225: hsl(210, 4%, 30%);
332
+ --black-250: hsl(210, 5%, 36%);
333
+ --black-300: hsl(210, 4%, 47%);
334
+ --black-350: hsl(210, 8%, 70%);
335
+ --black-400: hsl(210, 8%, 80%);
336
+ --black-500: hsl(210, 8%, 90%);
337
+ --black-600: hsl(210, 11%, 98%);
351
338
  --black: hsl(0, 0%, 100%);
352
339
  --orange-100: hsl(27, 29%, 19%);
353
340
  --orange-200: hsl(27, 43%, 31%);
354
341
  --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%);
342
+ --orange-400: hsl(27, 80%, 80%);
343
+ --orange-500: hsl(27, 80%, 88%);
344
+ --orange-600: hsl(27, 80%, 93%);
358
345
  --blue-100: hsl(209, 29%, 19%);
359
346
  --blue-200: hsl(210, 29%, 35%);
360
347
  --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%);
348
+ --blue-400: hsl(210, 80%, 80%);
349
+ --blue-500: hsl(210, 80%, 88%);
350
+ --blue-600: hsl(210, 80%, 93%);
364
351
  --green-100: hsl(148, 29%, 19%);
365
352
  --green-200: hsl(148, 29%, 27%);
366
353
  --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%);
354
+ --green-400: hsl(148, 40%, 75%);
355
+ --green-500: hsl(148, 40%, 85%);
356
+ --green-600: hsl(148, 40%, 93%);
370
357
  --red-100: hsl(358, 29%, 19%);
371
358
  --red-200: hsl(0, 29%, 37%);
372
359
  --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%);
360
+ --red-400: hsl(0, 73%, 85%);
361
+ --red-500: hsl(0, 73%, 91%);
362
+ --red-600: hsl(0, 73%, 95%);
376
363
  --yellow-100: hsl(43, 29%, 17%);
377
364
  --yellow-200: hsl(43, 29%, 25%);
378
365
  --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%);
366
+ --yellow-400: hsl(43, 75%, 75%);
367
+ --yellow-500: hsl(43, 75%, 85%);
368
+ --yellow-600: hsl(43, 75%, 91%);
369
+ --purple-100: hsl(237, 25%, 24%);
370
+ --purple-200: hsl(237, 27%, 38%);
371
+ --purple-300: hsl(237, 32%, 56%);
372
+ --purple-400: hsl(237, 58%, 86%);
373
+ --purple-500: hsl(237, 60%, 91%);
374
+ --purple-600: hsl(237, 65%, 96%);
382
375
  --gold-100: hsl(45, 29%, 24%);
383
376
  --gold-200: hsl(45, 47%, 37%);
384
377
  --gold-300: hsl(45, 92%, 62%);
@@ -407,12 +400,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
407
400
  --focus-ring-error: hsla(358, 62%, 47%, 0.15);
408
401
  --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
409
402
  --highlight-addition: var(--green-500);
410
- --highlight-attribute: hsl(207, 41.5%, 67%);
403
+ --highlight-attribute: var(--blue-400);
411
404
  --highlight-bg: hsl(0, 2%, 11%);
412
405
  --highlight-color: var(--black);
413
406
  --highlight-comment: hsl(0, 0%, 60%);
414
407
  --highlight-deletion: var(--red-500);
415
- --highlight-keyword: hsl(208, 41.5%, 67%);
408
+ --highlight-keyword: var(--blue-400);
416
409
  --highlight-literal: hsl(27, 85%, 61.5%);
417
410
  --highlight-namespace: hsl(27, 85%, 61.5%);
418
411
  --highlight-punctuation: hsl(0, 0%, 80%);
@@ -448,6 +441,7 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
448
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%));
449
442
  --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
450
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
+ color: var(--theme-body-font-color, var(--black-600));
451
445
  }
452
446
  }
453
447
 
@@ -461,34 +455,34 @@ body.theme-highcontrast.theme-system .theme-light__forced {
461
455
  --black-200: hsl(210, 8%, 90%);
462
456
  --black-225: hsl(210, 8%, 85%);
463
457
  --black-250: hsl(210, 8%, 80%);
464
- --black-300: hsl(213, 9%, 75%);
458
+ --black-300: hsl(210, 9%, 75%);
465
459
  --black-350: hsl(210, 8%, 45%);
466
- --black-400: hsl(210, 8%, 45%);
460
+ --black-400: hsl(212, 8%, 35%);
467
461
  --black-500: hsl(210, 8%, 25%);
468
462
  --black-600: hsl(210, 8%, 5%);
469
- --black: hsl(0, 8%, 5%);
463
+ --black: hsl(0, 0%, 0%);
470
464
  --orange-100: hsl(22, 85%, 97%);
471
465
  --orange-200: hsl(22, 85%, 97%);
472
466
  --orange-300: hsl(27, 90%, 55%);
473
467
  --orange-400: hsl(27, 90%, 55%);
474
- --orange-500: hsl(27, 80%, 29%);
475
- --orange-600: hsl(27, 80%, 29%);
468
+ --orange-500: hsl(27, 80%, 28%);
469
+ --orange-600: hsl(27, 80%, 28%);
476
470
  --blue-100: hsl(210, 80%, 96%);
477
471
  --blue-200: hsl(210, 80%, 96%);
478
472
  --blue-300: hsl(210, 70%, 48%);
479
- --blue-400: hsl(210, 70%, 48%);
473
+ --blue-400: hsl(210, 77%, 34%);
480
474
  --blue-500: hsl(210, 80%, 23%);
481
475
  --blue-600: hsl(210, 80%, 23%);
482
476
  --green-100: hsl(147, 36%, 95%);
483
477
  --green-200: hsl(147, 36%, 95%);
484
478
  --green-300: hsl(148, 70%, 31%);
485
- --green-400: hsl(148, 70%, 31%);
479
+ --green-400: hsl(148, 75%, 22%);
486
480
  --green-500: hsl(147, 74%, 15%);
487
481
  --green-600: hsl(147, 74%, 15%);
488
482
  --red-100: hsl(0, 79%, 96%);
489
483
  --red-200: hsl(0, 79%, 96%);
490
484
  --red-300: hsl(0, 60%, 49%);
491
- --red-400: hsl(0, 60%, 49%);
485
+ --red-400: hsl(0, 65%, 37%);
492
486
  --red-500: hsl(0, 66%, 24%);
493
487
  --red-600: hsl(0, 66%, 24%);
494
488
  --yellow-100: hsl(41, 80%, 96%);
@@ -497,12 +491,18 @@ body.theme-highcontrast.theme-system .theme-light__forced {
497
491
  --yellow-400: hsl(43, 85%, 50%);
498
492
  --yellow-500: hsl(48, 85%, 18%);
499
493
  --yellow-600: hsl(48, 85%, 18%);
494
+ --purple-100: hsl(237, 80%, 96%);
495
+ --purple-200: hsl(237, 80%, 96%);
496
+ --purple-300: hsl(237, 55%, 57%);
497
+ --purple-400: hsl(237, 55%, 57%);
498
+ --purple-500: hsl(237, 50%, 32%);
499
+ --purple-600: hsl(237, 50%, 32%);
500
500
  --gold-100: hsl(46, 100%, 91%);
501
501
  --gold-200: hsl(46, 100%, 91%);
502
502
  --gold-300: hsl(45, 100%, 42%);
503
503
  --gold-400: hsl(46, 92%, 26%);
504
504
  --silver-100: hsl(0, 0%, 95%);
505
- --silver-200: hsl(0, 0%, 84%);
505
+ --silver-200: hsl(0, 0%, 95%);
506
506
  --silver-300: hsl(210, 5%, 68%);
507
507
  --silver-400: hsl(216, 2%, 40%);
508
508
  --bronze-100: hsl(28, 40%, 92%);
@@ -557,48 +557,54 @@ body.theme-highcontrast.theme-system .theme-light__forced {
557
557
  body.theme-highcontrast.theme-dark,
558
558
  body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
559
559
  --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%);
560
+ --black-050: hsl(210, 3%, 15%);
561
+ --black-100: hsl(210, 3%, 18%);
562
+ --black-150: hsl(210, 4%, 21%);
563
+ --black-200: hsl(210, 4%, 27%);
564
+ --black-225: hsl(210, 4%, 30%);
565
+ --black-250: hsl(210, 5%, 36%);
566
+ --black-300: hsl(210, 4%, 47%);
567
+ --black-350: hsl(210, 10%, 74%);
568
+ --black-400: hsl(210, 8%, 80%);
569
+ --black-500: hsl(210, 8%, 90%);
570
+ --black-600: hsl(210, 11%, 98%);
571
571
  --black: hsl(0, 0%, 100%);
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%, 64%);
575
+ --orange-400: hsl(27, 80%, 80%);
576
576
  --orange-500: hsl(27, 79%, 89%);
577
- --orange-600: hsl(27, 79%, 89%);
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%, 72%);
581
+ --blue-400: hsl(210, 80%, 80%);
582
582
  --blue-500: hsl(209, 79%, 87%);
583
- --blue-600: hsl(209, 79%, 87%);
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%, 62%);
587
+ --green-400: hsl(148, 40%, 75%);
588
588
  --green-500: hsl(148, 39%, 87%);
589
- --green-600: hsl(148, 39%, 87%);
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, 75%, 77%);
593
+ --red-400: hsl(0, 73%, 85%);
594
594
  --red-500: hsl(0, 70%, 92%);
595
- --red-600: hsl(0, 70%, 92%);
595
+ --red-600: hsl(0, 73%, 95%);
596
596
  --yellow-100: hsl(43, 29%, 17%);
597
597
  --yellow-200: hsl(43, 29%, 17%);
598
598
  --yellow-300: hsl(43, 59%, 64%);
599
- --yellow-400: hsl(43, 59%, 64%);
599
+ --yellow-400: hsl(43, 75%, 75%);
600
600
  --yellow-500: hsl(48, 74%, 91%);
601
- --yellow-600: hsl(48, 74%, 91%);
601
+ --yellow-600: hsl(43, 75%, 91%);
602
+ --purple-100: hsl(237, 25%, 24%);
603
+ --purple-200: hsl(237, 25%, 24%);
604
+ --purple-300: hsl(237, 58%, 86%);
605
+ --purple-400: hsl(237, 58%, 86%);
606
+ --purple-500: hsl(237, 65%, 96%);
607
+ --purple-600: hsl(237, 65%, 96%);
602
608
  --gold-100: hsl(45, 22%, 25%);
603
609
  --gold-200: hsl(45, 22%, 25%);
604
610
  --gold-300: hsl(45, 92%, 62%);
@@ -659,48 +665,54 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
659
665
  @media (prefers-color-scheme: dark) {
660
666
  body.theme-highcontrast.theme-system {
661
667
  --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%);
668
+ --black-050: hsl(210, 3%, 15%);
669
+ --black-100: hsl(210, 3%, 18%);
670
+ --black-150: hsl(210, 4%, 21%);
671
+ --black-200: hsl(210, 4%, 27%);
672
+ --black-225: hsl(210, 4%, 30%);
673
+ --black-250: hsl(210, 5%, 36%);
674
+ --black-300: hsl(210, 4%, 47%);
675
+ --black-350: hsl(210, 10%, 74%);
676
+ --black-400: hsl(210, 8%, 80%);
677
+ --black-500: hsl(210, 8%, 90%);
678
+ --black-600: hsl(210, 11%, 98%);
673
679
  --black: hsl(0, 0%, 100%);
674
680
  --orange-100: hsl(27, 29%, 19%);
675
681
  --orange-200: hsl(27, 29%, 19%);
676
682
  --orange-300: hsl(27, 80%, 64%);
677
- --orange-400: hsl(27, 80%, 64%);
683
+ --orange-400: hsl(27, 80%, 80%);
678
684
  --orange-500: hsl(27, 79%, 89%);
679
- --orange-600: hsl(27, 79%, 89%);
685
+ --orange-600: hsl(27, 80%, 93%);
680
686
  --blue-100: hsl(209, 29%, 19%);
681
687
  --blue-200: hsl(209, 29%, 19%);
682
688
  --blue-300: hsl(210, 80%, 72%);
683
- --blue-400: hsl(210, 80%, 72%);
689
+ --blue-400: hsl(210, 80%, 80%);
684
690
  --blue-500: hsl(209, 79%, 87%);
685
- --blue-600: hsl(209, 79%, 87%);
691
+ --blue-600: hsl(210, 80%, 93%);
686
692
  --green-100: hsl(147, 29%, 19%);
687
693
  --green-200: hsl(147, 29%, 19%);
688
694
  --green-300: hsl(148, 40%, 62%);
689
- --green-400: hsl(148, 40%, 62%);
695
+ --green-400: hsl(148, 40%, 75%);
690
696
  --green-500: hsl(148, 39%, 87%);
691
- --green-600: hsl(148, 39%, 87%);
697
+ --green-600: hsl(148, 40%, 93%);
692
698
  --red-100: hsl(358, 29%, 19%);
693
699
  --red-200: hsl(358, 29%, 19%);
694
700
  --red-300: hsl(0, 75%, 77%);
695
- --red-400: hsl(0, 75%, 77%);
701
+ --red-400: hsl(0, 73%, 85%);
696
702
  --red-500: hsl(0, 70%, 92%);
697
- --red-600: hsl(0, 70%, 92%);
703
+ --red-600: hsl(0, 73%, 95%);
698
704
  --yellow-100: hsl(43, 29%, 17%);
699
705
  --yellow-200: hsl(43, 29%, 17%);
700
706
  --yellow-300: hsl(43, 59%, 64%);
701
- --yellow-400: hsl(43, 59%, 64%);
707
+ --yellow-400: hsl(43, 75%, 75%);
702
708
  --yellow-500: hsl(48, 74%, 91%);
703
- --yellow-600: hsl(48, 74%, 91%);
709
+ --yellow-600: hsl(43, 75%, 91%);
710
+ --purple-100: hsl(237, 25%, 24%);
711
+ --purple-200: hsl(237, 25%, 24%);
712
+ --purple-300: hsl(237, 58%, 86%);
713
+ --purple-400: hsl(237, 58%, 86%);
714
+ --purple-500: hsl(237, 65%, 96%);
715
+ --purple-600: hsl(237, 65%, 96%);
704
716
  --gold-100: hsl(45, 22%, 25%);
705
717
  --gold-200: hsl(45, 22%, 25%);
706
718
  --gold-300: hsl(45, 92%, 62%);
package/lib/exports/color-mixins.less CHANGED
@@ -1,6 +1,5 @@
1
1
  @import (reference) "./mixins.less";
2
2
  @import (reference) "./color-sets.less";
3
- @import (reference) "./theme.less";
4
3
 
5
4
  // Type definitions
6
5
  //
@@ -37,6 +36,7 @@
37
36
  .create-theme-variables(@mode);
38
37
  .create-custom-theme-variables(primary, @modeCustom);
39
38
  .create-custom-theme-variables(secondary, @modeCustom);
39
+ color: var(--theme-body-font-color, var(--black-600));
40
40
  }
41
41
  }
42
42