@stackoverflow/stacks 2.4.0 → 2.5.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 (103) hide show
  1. package/dist/css/stacks.css +12 -58
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/components/tag/tag.less +16 -68
  4. package/package.json +10 -9
  5. package/lib/atomic/__snapshots__/color-new.less.test.ts.snap +0 -3015
  6. package/lib/atomic/__snapshots__/color.less.test.ts.snap +0 -3132
  7. package/lib/atomic/__snapshots__/misc.less.test.ts.snap +0 -893
  8. package/lib/atomic/__snapshots__/spacing.less.test.ts.snap +0 -1928
  9. package/lib/atomic/color.less.test.ts +0 -12
  10. package/lib/atomic/misc.less.test.ts +0 -12
  11. package/lib/atomic/spacing.less.test.ts +0 -12
  12. package/lib/components/activity-indicator/activity-indicator.a11y.test.ts +0 -13
  13. package/lib/components/activity-indicator/activity-indicator.visual.test.ts +0 -22
  14. package/lib/components/anchor/anchor.a11y.test.ts +0 -35
  15. package/lib/components/anchor/anchor.visual.test.ts +0 -47
  16. package/lib/components/avatar/avatar.a11y.test.ts +0 -35
  17. package/lib/components/avatar/avatar.visual.test.ts +0 -50
  18. package/lib/components/award-bling/award-bling.a11y.test.ts +0 -15
  19. package/lib/components/award-bling/award-bling.visual.test.ts +0 -24
  20. package/lib/components/badge/badge.a11y.test.ts +0 -143
  21. package/lib/components/badge/badge.visual.test.ts +0 -165
  22. package/lib/components/banner/banner.a11y.test.ts +0 -36
  23. package/lib/components/banner/banner.test.ts +0 -73
  24. package/lib/components/banner/banner.visual.test.ts +0 -36
  25. package/lib/components/block-link/block-link.a11y.test.ts +0 -57
  26. package/lib/components/block-link/block-link.visual.test.ts +0 -57
  27. package/lib/components/breadcrumbs/breadcrumbs.a11y.test.ts +0 -36
  28. package/lib/components/breadcrumbs/breadcrumbs.visual.test.ts +0 -36
  29. package/lib/components/button/button.a11y.test.ts +0 -21
  30. package/lib/components/button/button.test.setup.ts +0 -36
  31. package/lib/components/button/button.visual.test.ts +0 -18
  32. package/lib/components/button-group/button-group.a11y.test.ts +0 -12
  33. package/lib/components/button-group/button-group.test.setup.ts +0 -77
  34. package/lib/components/button-group/button-group.visual.test.ts +0 -7
  35. package/lib/components/card/card.a11y.test.ts +0 -12
  36. package/lib/components/card/card.visual.test.ts +0 -52
  37. package/lib/components/check-control/check-control.a11y.test.ts +0 -33
  38. package/lib/components/check-control/check-control.visual.test.ts +0 -36
  39. package/lib/components/check-group/check-group.a11y.test.ts +0 -49
  40. package/lib/components/check-group/check-group.visual.test.ts +0 -56
  41. package/lib/components/checkbox_radio/checkbox_radio.a11y.test.ts +0 -37
  42. package/lib/components/checkbox_radio/checkbox_radio.visual.test.ts +0 -33
  43. package/lib/components/code-block/code-block.a11y.test.ts +0 -27
  44. package/lib/components/code-block/code-block.visual.test.ts +0 -18
  45. package/lib/components/description/description.a11y.test.ts +0 -28
  46. package/lib/components/description/description.visual.test.ts +0 -28
  47. package/lib/components/empty-state/empty-state.a11y.test.ts +0 -16
  48. package/lib/components/empty-state/empty-state.visual.test.ts +0 -16
  49. package/lib/components/expandable/expandable.a11y.test.ts +0 -26
  50. package/lib/components/expandable/expandable.test.ts +0 -51
  51. package/lib/components/expandable/expandable.visual.test.ts +0 -26
  52. package/lib/components/input-fill/input-fill.a11y.test.ts +0 -21
  53. package/lib/components/input-fill/input-fill.visual.test.ts +0 -21
  54. package/lib/components/input-icon/input-icon.a11y.test.ts +0 -81
  55. package/lib/components/input-icon/input-icon.visual.test.ts +0 -92
  56. package/lib/components/input-message/input-message.a11y.test.ts +0 -57
  57. package/lib/components/input-message/input-message.visual.test.ts +0 -58
  58. package/lib/components/input_textarea/input_textarea.a11y.test.ts +0 -109
  59. package/lib/components/input_textarea/input_textarea.visual.test.ts +0 -95
  60. package/lib/components/label/label.a11y.test.ts +0 -47
  61. package/lib/components/label/label.visual.test.ts +0 -65
  62. package/lib/components/link/link.a11y.test.ts +0 -27
  63. package/lib/components/link/link.visual.test.ts +0 -31
  64. package/lib/components/link-preview/link-preview.a11y.test.ts +0 -47
  65. package/lib/components/link-preview/link-preview.visual.test.ts +0 -52
  66. package/lib/components/menu/menu.a11y.test.ts +0 -39
  67. package/lib/components/menu/menu.visual.test.ts +0 -39
  68. package/lib/components/modal/modal.a11y.test.ts +0 -41
  69. package/lib/components/modal/modal.test.ts +0 -155
  70. package/lib/components/modal/modal.visual.test.ts +0 -41
  71. package/lib/components/navigation/navigation.a11y.test.ts +0 -81
  72. package/lib/components/navigation/navigation.visual.test.ts +0 -98
  73. package/lib/components/notice/notice.a11y.test.ts +0 -16
  74. package/lib/components/notice/notice.visual.test.ts +0 -25
  75. package/lib/components/page-title/page-title.a11y.test.ts +0 -28
  76. package/lib/components/page-title/page-title.visual.test.ts +0 -58
  77. package/lib/components/pagination/pagination.a11y.test.ts +0 -21
  78. package/lib/components/pagination/pagination.visual.test.ts +0 -25
  79. package/lib/components/popover/tooltip.test.ts +0 -62
  80. package/lib/components/post-summary/post-summary.a11y.test.ts +0 -25
  81. package/lib/components/post-summary/post-summary.test.setup.ts +0 -435
  82. package/lib/components/post-summary/post-summary.visual.test.ts +0 -17
  83. package/lib/components/progress-bar/progress-bar.a11y.test.ts +0 -189
  84. package/lib/components/progress-bar/progress-bar.visual.test.ts +0 -188
  85. package/lib/components/select/select.a11y.test.ts +0 -72
  86. package/lib/components/select/select.visual.test.ts +0 -72
  87. package/lib/components/spinner/spinner.a11y.test.ts +0 -14
  88. package/lib/components/spinner/spinner.visual.test.ts +0 -40
  89. package/lib/components/table/table.a11y.test.ts +0 -112
  90. package/lib/components/table/table.test.ts +0 -366
  91. package/lib/components/table/table.visual.test.ts +0 -104
  92. package/lib/components/tag/tag.a11y.test.ts +0 -28
  93. package/lib/components/tag/tag.visual.test.ts +0 -43
  94. package/lib/components/toast/toast.a11y.test.ts +0 -29
  95. package/lib/components/toast/toast.test.ts +0 -64
  96. package/lib/components/toast/toast.visual.test.ts +0 -30
  97. package/lib/components/toggle-switch/toggle-switch.a11y.test.ts +0 -66
  98. package/lib/components/toggle-switch/toggle-switch.visual.test.ts +0 -70
  99. package/lib/components/topbar/topbar.visual.test.ts +0 -217
  100. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +0 -558
  101. package/lib/exports/__snapshots__/color.less.test.ts.snap +0 -819
  102. package/lib/exports/color-mixins.less.test.ts +0 -150
  103. package/lib/exports/color.less.test.ts +0 -12
@@ -1,819 +0,0 @@
1
- // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
-
3
- exports[`colors > should output all the css generated by the v2 colors/theming generation mixins 1`] = `
4
- "body {
5
- --_o-disabled: 0.5;
6
- --_o-disabled-static: 0.5;
7
- --_black-static: hsl(0, 0%, 0%);
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 {
26
- --bg-error: var(--red-400);
27
- --bg-danger: var(--red-400);
28
- --bg-success: var(--green-400);
29
- --bg-warning: var(--yellow-500);
30
- --bc-error: var(--red-400);
31
- --bc-danger: var(--red-400);
32
- --bc-success: var(--green-400);
33
- --bc-warning: var(--yellow-500);
34
- --fc-light: var(--black-400);
35
- --fc-medium: var(--black-500);
36
- --fc-dark: var(--black-600);
37
- --fc-error: var(--red-400);
38
- --fc-danger: var(--red-400);
39
- --fc-success: var(--green-400);
40
- --fc-warning: var(--yellow-500);
41
- }
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
-
65
- body:not(.theme-highcontrast):not(.theme-dark),
66
- body:not(.theme-highcontrast).theme-dark .theme-light__forced,
67
- body:not(.theme-highcontrast).theme-system .theme-light__forced,
68
- body:not(.theme-highcontrast):not(.theme-dark).themed,
69
- body:not(.theme-highcontrast).theme-dark .theme-light__forced.themed,
70
- body:not(.theme-highcontrast).theme-system .theme-light__forced.themed,
71
- body:not(.theme-highcontrast):not(.theme-dark) .themed,
72
- body:not(.theme-highcontrast).theme-dark .theme-light__forced .themed,
73
- body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
74
- --white: hsl(0, 0%, 100%);
75
- --black-050: hsl(0, 0%, 100%);
76
- --black-100: hsl(210, 8%, 98%);
77
- --black-150: hsl(210, 8%, 95%);
78
- --black-200: hsl(210, 8%, 90%);
79
- --black-225: hsl(210, 8%, 85%);
80
- --black-250: hsl(210, 8%, 80%);
81
- --black-300: hsl(210, 9%, 75%);
82
- --black-350: hsl(210, 8%, 68%);
83
- --black-400: hsl(210, 8%, 42%);
84
- --black-500: hsl(210, 8%, 25%);
85
- --black-600: hsl(210, 8%, 5%);
86
- --black: hsl(0, 0%, 0%);
87
- --orange-100: hsl(23, 87%, 97%);
88
- --orange-200: hsl(27, 87%, 87%);
89
- --orange-300: hsl(27, 87%, 72%);
90
- --orange-400: hsl(27, 89%, 48%);
91
- --orange-500: hsl(27, 87%, 41%);
92
- --orange-600: hsl(27, 87%, 27%);
93
- --blue-100: hsl(210, 80%, 96%);
94
- --blue-200: hsl(210, 80%, 91%);
95
- --blue-300: hsl(210, 78%, 76%);
96
- --blue-400: hsl(210, 77%, 46%);
97
- --blue-500: hsl(210, 77%, 36%);
98
- --blue-600: hsl(210, 80%, 23%);
99
- --green-100: hsl(148, 35%, 95%);
100
- --green-200: hsl(148, 35%, 88%);
101
- --green-300: hsl(148, 35%, 69%);
102
- --green-400: hsl(148, 70%, 31%);
103
- --green-500: hsl(148, 75%, 22%);
104
- --green-600: hsl(148, 75%, 15%);
105
- --red-100: hsl(0, 72%, 96%);
106
- --red-200: hsl(0, 70%, 93%);
107
- --red-300: hsl(0, 66%, 80%);
108
- --red-400: hsl(0, 60%, 49%);
109
- --red-500: hsl(0, 65%, 37%);
110
- --red-600: hsl(0, 65%, 22%);
111
- --yellow-100: hsl(43, 85%, 95%);
112
- --yellow-200: hsl(43, 85%, 88%);
113
- --yellow-300: hsl(43, 85%, 72%);
114
- --yellow-400: hsl(43, 85%, 50%);
115
- --yellow-500: hsl(43, 85%, 33%);
116
- --yellow-600: hsl(43, 85%, 18%);
117
- --purple-100: hsl(237, 83%, 98%);
118
- --purple-200: hsl(237, 78%, 93%);
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%);
123
- --gold-100: hsl(46, 100%, 91%);
124
- --gold-200: hsl(46, 100%, 74%);
125
- --gold-300: hsl(45, 100%, 42%);
126
- --gold-400: hsl(46, 92%, 26%);
127
- --silver-100: hsl(0, 0%, 95%);
128
- --silver-200: hsl(0, 0%, 84%);
129
- --silver-300: hsl(210, 5%, 68%);
130
- --silver-400: hsl(210, 2%, 40%);
131
- --bronze-100: hsl(28, 40%, 92%);
132
- --bronze-200: hsl(30, 47%, 83%);
133
- --bronze-300: hsl(28, 43%, 65%);
134
- --bronze-400: hsl(28, 43%, 39%);
135
- --bc-lightest: var(--black-100);
136
- --bc-lighter: var(--black-150);
137
- --bc-light: var(--black-200);
138
- --bc-medium: var(--black-225);
139
- --bc-dark: var(--black-250);
140
- --bc-darker: var(--black-300);
141
- --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.05), 0 2px 8px hsla(0, 0%, 0%, 0.05);
142
- --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.06), 0 2px 6px hsla(0, 0%, 0%, 0.06), 0 3px 8px hsla(0, 0%, 0%, 0.09);
143
- --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.09), 0 3px 8px hsla(0, 0%, 0%, 0.09), 0 4px 13px hsla(0, 0%, 0%, 0.13);
144
- --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.05), 0 20px 48px hsla(0, 0%, 0%, 0.05), 0 1px 4px hsla(0, 0%, 0%, 0.1);
145
- --translucent-secondary: var(--theme-secondary-custom-translucent, hsla(206, 100%, 40%, 0.15));
146
- --translucent-success: hsla(140, 40%, 75%, 0.4);
147
- --translucent-warning: hsla(47, 79%, 58%, 0.4);
148
- --translucent-error: hsla(358, 62%, 47%, 0.15);
149
- --translucent-muted: hsla(210, 8%, 15%, 0.1);
150
- --focus-neutral: var(--white);
151
- --focus-theme: var(--theme-secondary-400);
152
- --focus-ring: var(--theme-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.15));
153
- --focus-ring-success: hsla(140, 40%, 75%, 0.4);
154
- --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
155
- --focus-ring-error: hsla(358, 62%, 47%, 0.15);
156
- --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
157
- --highlight-addition: var(--green-500);
158
- --highlight-attribute: hsl(206, 98.5%, 29%);
159
- --highlight-bg: hsl(0, 0%, 96.5%);
160
- --highlight-color: var(--black-600);
161
- --highlight-comment: hsl(210, 8%, 43.5%);
162
- --highlight-deletion: var(--red-500);
163
- --highlight-keyword: hsl(206, 98.5%, 29%);
164
- --highlight-literal: hsl(27, 99%, 36%);
165
- --highlight-namespace: hsl(27, 99%, 36%);
166
- --highlight-punctuation: var(--black-500);
167
- --highlight-symbol: hsl(306, 43%, 35%);
168
- --highlight-variable: hsl(80, 80.5%, 26.5%);
169
- --scrollbar: hsla(0, 0%, 0%, 0.2);
170
- --theme-primary: var(--theme-primary-custom, var(--orange-400));
171
- --theme-primary-100: var(--theme-primary-custom-100, var(--orange-100));
172
- --theme-primary-200: var(--theme-primary-custom-200, var(--orange-200));
173
- --theme-primary-300: var(--theme-primary-custom-300, var(--orange-300));
174
- --theme-primary-400: var(--theme-primary-custom-400, var(--orange-400));
175
- --theme-primary-500: var(--theme-primary-custom-500, var(--orange-500));
176
- --theme-primary-600: var(--theme-primary-custom-600, var(--orange-600));
177
- --theme-secondary: var(--theme-secondary-custom, var(--blue-400));
178
- --theme-secondary-100: var(--theme-secondary-custom-100, var(--blue-100));
179
- --theme-secondary-200: var(--theme-secondary-custom-200, var(--blue-200));
180
- --theme-secondary-300: var(--theme-secondary-custom-300, var(--blue-300));
181
- --theme-secondary-400: var(--theme-secondary-custom-400, var(--blue-400));
182
- --theme-secondary-500: var(--theme-secondary-custom-500, var(--blue-500));
183
- --theme-secondary-600: var(--theme-secondary-custom-600, var(--blue-600));
184
- --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)));
185
- --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)));
186
- --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)));
187
- --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), var(--theme-base-primary-color-l));
188
- --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)));
189
- --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)));
190
- --theme-primary-custom: var(--theme-primary-custom-400);
191
- --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)));
192
- --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)));
193
- --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)));
194
- --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l));
195
- --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)));
196
- --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)));
197
- --theme-secondary-custom: var(--theme-secondary-custom-400);
198
- --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);
199
- --theme-secondary-custom-translucent: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
200
- color: var(--theme-body-font-color, var(--black-600));
201
- }
202
-
203
- body:not(.theme-highcontrast).theme-dark,
204
- body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced,
205
- body:not(.theme-highcontrast).theme-dark.themed,
206
- body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced.themed,
207
- body:not(.theme-highcontrast).theme-dark .themed,
208
- body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
209
- --white: hsl(210, 3%, 15%);
210
- --black-050: hsl(210, 3%, 15%);
211
- --black-100: hsl(210, 3%, 18%);
212
- --black-150: hsl(210, 4%, 21%);
213
- --black-200: hsl(210, 4%, 27%);
214
- --black-225: hsl(210, 4%, 30%);
215
- --black-250: hsl(210, 5%, 36%);
216
- --black-300: hsl(210, 4%, 47%);
217
- --black-350: hsl(210, 8%, 70%);
218
- --black-400: hsl(210, 8%, 80%);
219
- --black-500: hsl(210, 8%, 90%);
220
- --black-600: hsl(210, 11%, 98%);
221
- --black: hsl(0, 0%, 100%);
222
- --orange-100: hsl(27, 55%, 20%);
223
- --orange-200: hsl(27, 50%, 33%);
224
- --orange-300: hsl(27, 50%, 43%);
225
- --orange-400: hsl(27, 90%, 68%);
226
- --orange-500: hsl(27, 90%, 80%);
227
- --orange-600: hsl(27, 90%, 90%);
228
- --blue-100: hsl(210, 50%, 22%);
229
- --blue-200: hsl(210, 50%, 36%);
230
- --blue-300: hsl(210, 50%, 48%);
231
- --blue-400: hsl(210, 89%, 77%);
232
- --blue-500: hsl(210, 89%, 84%);
233
- --blue-600: hsl(210, 89%, 92%);
234
- --green-100: hsl(149, 51%, 15%);
235
- --green-200: hsl(149, 51%, 25%);
236
- --green-300: hsl(149, 51%, 36%);
237
- --green-400: hsl(149, 50%, 62%);
238
- --green-500: hsl(149, 50%, 74%);
239
- --green-600: hsl(149, 50%, 88%);
240
- --red-100: hsl(0, 43%, 22%);
241
- --red-200: hsl(0, 43%, 41%);
242
- --red-300: hsl(0, 43%, 56%);
243
- --red-400: hsl(0, 90%, 81%);
244
- --red-500: hsl(0, 90%, 88%);
245
- --red-600: hsl(0, 90%, 94%);
246
- --yellow-100: hsl(43, 50%, 17%);
247
- --yellow-200: hsl(43, 50%, 28%);
248
- --yellow-300: hsl(43, 50%, 39%);
249
- --yellow-400: hsl(43, 90%, 75%);
250
- --yellow-500: hsl(43, 90%, 82%);
251
- --yellow-600: hsl(43, 90%, 91%);
252
- --purple-100: hsl(237, 26%, 23%);
253
- --purple-200: hsl(237, 26%, 44%);
254
- --purple-300: hsl(237, 26%, 56%);
255
- --purple-400: hsl(237, 98%, 87%);
256
- --purple-500: hsl(237, 98%, 92%);
257
- --purple-600: hsl(237, 98%, 96%);
258
- --gold-100: hsl(45, 29%, 24%);
259
- --gold-200: hsl(45, 47%, 37%);
260
- --gold-300: hsl(45, 92%, 62%);
261
- --gold-400: hsl(46, 93%, 78%);
262
- --silver-100: hsl(220, 2%, 26%);
263
- --silver-200: hsl(220, 1%, 46%);
264
- --silver-300: hsl(216, 4%, 69%);
265
- --silver-400: hsl(214, 8%, 83%);
266
- --bronze-100: hsl(28, 13%, 27%);
267
- --bronze-200: hsl(28, 27%, 45%);
268
- --bronze-300: hsl(28, 58%, 67%);
269
- --bronze-400: hsl(28, 59%, 83%);
270
- --bc-lightest: var(--black-100);
271
- --bc-lighter: var(--black-150);
272
- --bc-light: var(--black-200);
273
- --bc-medium: var(--black-225);
274
- --bc-dark: var(--black-250);
275
- --bc-darker: var(--black-300);
276
- --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.1);
277
- --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
278
- --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
279
- --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.1), 0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
280
- --translucent-secondary: var(--theme-dark-secondary-custom-translucent, hsla(206, 100%, 40%, 0.25));
281
- --translucent-success: hsla(140, 40%, 75%, 0.4);
282
- --translucent-warning: hsla(47, 79%, 58%, 0.4);
283
- --translucent-error: hsla(358, 62%, 47%, 0.15);
284
- --translucent-muted: hsla(210, 8%, 15%, 0.1);
285
- --focus-neutral: var(--white);
286
- --focus-theme: var(--theme-secondary-400);
287
- --focus-ring: var(--theme-dark-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.25));
288
- --focus-ring-success: hsla(140, 40%, 75%, 0.4);
289
- --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
290
- --focus-ring-error: hsla(358, 62%, 47%, 0.15);
291
- --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
292
- --highlight-addition: var(--green-500);
293
- --highlight-attribute: var(--blue-400);
294
- --highlight-bg: hsl(0, 2%, 11%);
295
- --highlight-color: var(--black);
296
- --highlight-comment: hsl(0, 0%, 60%);
297
- --highlight-deletion: var(--red-500);
298
- --highlight-keyword: var(--blue-400);
299
- --highlight-literal: hsl(27, 85%, 61.5%);
300
- --highlight-namespace: hsl(27, 85%, 61.5%);
301
- --highlight-punctuation: hsl(0, 0%, 80%);
302
- --highlight-symbol: hsl(306, 43%, 69%);
303
- --highlight-variable: hsl(65.5, 39%, 57.5%);
304
- --scrollbar: hsla(0, 0%, 100%, 0.2);
305
- --theme-primary: var(--theme-dark-primary-custom, var(--orange-400));
306
- --theme-primary-100: var(--theme-dark-primary-custom-100, var(--orange-100));
307
- --theme-primary-200: var(--theme-dark-primary-custom-200, var(--orange-200));
308
- --theme-primary-300: var(--theme-dark-primary-custom-300, var(--orange-300));
309
- --theme-primary-400: var(--theme-dark-primary-custom-400, var(--orange-400));
310
- --theme-primary-500: var(--theme-dark-primary-custom-500, var(--orange-500));
311
- --theme-primary-600: var(--theme-dark-primary-custom-600, var(--orange-600));
312
- --theme-secondary: var(--theme-dark-secondary-custom, var(--blue-400));
313
- --theme-secondary-100: var(--theme-dark-secondary-custom-100, var(--blue-100));
314
- --theme-secondary-200: var(--theme-dark-secondary-custom-200, var(--blue-200));
315
- --theme-secondary-300: var(--theme-dark-secondary-custom-300, var(--blue-300));
316
- --theme-secondary-400: var(--theme-dark-secondary-custom-400, var(--blue-400));
317
- --theme-secondary-500: var(--theme-dark-secondary-custom-500, var(--blue-500));
318
- --theme-secondary-600: var(--theme-dark-secondary-custom-600, var(--blue-600));
319
- --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)));
320
- --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)));
321
- --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)));
322
- --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), var(--theme-dark-primary-color-l));
323
- --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)));
324
- --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)));
325
- --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
326
- --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)));
327
- --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)));
328
- --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)));
329
- --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l));
330
- --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)));
331
- --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)));
332
- --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
333
- --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);
334
- --theme-dark-secondary-custom-translucent: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
335
- color: var(--theme-body-font-color, var(--black-600));
336
- }
337
-
338
- @media (prefers-color-scheme: dark) {
339
- body:not(.theme-highcontrast).theme-system,
340
- body:not(.theme-highcontrast).theme-system.themed,
341
- body:not(.theme-highcontrast).theme-system .themed {
342
- --white: hsl(210, 3%, 15%);
343
- --black-050: hsl(210, 3%, 15%);
344
- --black-100: hsl(210, 3%, 18%);
345
- --black-150: hsl(210, 4%, 21%);
346
- --black-200: hsl(210, 4%, 27%);
347
- --black-225: hsl(210, 4%, 30%);
348
- --black-250: hsl(210, 5%, 36%);
349
- --black-300: hsl(210, 4%, 47%);
350
- --black-350: hsl(210, 8%, 70%);
351
- --black-400: hsl(210, 8%, 80%);
352
- --black-500: hsl(210, 8%, 90%);
353
- --black-600: hsl(210, 11%, 98%);
354
- --black: hsl(0, 0%, 100%);
355
- --orange-100: hsl(27, 55%, 20%);
356
- --orange-200: hsl(27, 50%, 33%);
357
- --orange-300: hsl(27, 50%, 43%);
358
- --orange-400: hsl(27, 90%, 68%);
359
- --orange-500: hsl(27, 90%, 80%);
360
- --orange-600: hsl(27, 90%, 90%);
361
- --blue-100: hsl(210, 50%, 22%);
362
- --blue-200: hsl(210, 50%, 36%);
363
- --blue-300: hsl(210, 50%, 48%);
364
- --blue-400: hsl(210, 89%, 77%);
365
- --blue-500: hsl(210, 89%, 84%);
366
- --blue-600: hsl(210, 89%, 92%);
367
- --green-100: hsl(149, 51%, 15%);
368
- --green-200: hsl(149, 51%, 25%);
369
- --green-300: hsl(149, 51%, 36%);
370
- --green-400: hsl(149, 50%, 62%);
371
- --green-500: hsl(149, 50%, 74%);
372
- --green-600: hsl(149, 50%, 88%);
373
- --red-100: hsl(0, 43%, 22%);
374
- --red-200: hsl(0, 43%, 41%);
375
- --red-300: hsl(0, 43%, 56%);
376
- --red-400: hsl(0, 90%, 81%);
377
- --red-500: hsl(0, 90%, 88%);
378
- --red-600: hsl(0, 90%, 94%);
379
- --yellow-100: hsl(43, 50%, 17%);
380
- --yellow-200: hsl(43, 50%, 28%);
381
- --yellow-300: hsl(43, 50%, 39%);
382
- --yellow-400: hsl(43, 90%, 75%);
383
- --yellow-500: hsl(43, 90%, 82%);
384
- --yellow-600: hsl(43, 90%, 91%);
385
- --purple-100: hsl(237, 26%, 23%);
386
- --purple-200: hsl(237, 26%, 44%);
387
- --purple-300: hsl(237, 26%, 56%);
388
- --purple-400: hsl(237, 98%, 87%);
389
- --purple-500: hsl(237, 98%, 92%);
390
- --purple-600: hsl(237, 98%, 96%);
391
- --gold-100: hsl(45, 29%, 24%);
392
- --gold-200: hsl(45, 47%, 37%);
393
- --gold-300: hsl(45, 92%, 62%);
394
- --gold-400: hsl(46, 93%, 78%);
395
- --silver-100: hsl(220, 2%, 26%);
396
- --silver-200: hsl(220, 1%, 46%);
397
- --silver-300: hsl(216, 4%, 69%);
398
- --silver-400: hsl(214, 8%, 83%);
399
- --bronze-100: hsl(28, 13%, 27%);
400
- --bronze-200: hsl(28, 27%, 45%);
401
- --bronze-300: hsl(28, 58%, 67%);
402
- --bronze-400: hsl(28, 59%, 83%);
403
- --bc-lightest: var(--black-100);
404
- --bc-lighter: var(--black-150);
405
- --bc-light: var(--black-200);
406
- --bc-medium: var(--black-225);
407
- --bc-dark: var(--black-250);
408
- --bc-darker: var(--black-300);
409
- --bs-sm: 0 1px 2px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.1), 0 2px 8px hsla(0, 0%, 0%, 0.1);
410
- --bs-md: 0 1px 3px hsla(0, 0%, 0%, 0.11), 0 2px 6px hsla(0, 0%, 0%, 0.11), 0 3px 8px hsla(0, 0%, 0%, 0.14);
411
- --bs-lg: 0 1px 4px hsla(0, 0%, 0%, 0.14), 0 3px 8px hsla(0, 0%, 0%, 0.14), 0 4px 13px hsla(0, 0%, 0%, 0.18);
412
- --bs-xl: 0 10px 24px hsla(0, 0%, 0%, 0.1), 0 20px 48px hsla(0, 0%, 0%, 0.1), 0 1px 4px hsla(0, 0%, 0%, 0.15);
413
- --translucent-secondary: var(--theme-dark-secondary-custom-translucent, hsla(206, 100%, 40%, 0.25));
414
- --translucent-success: hsla(140, 40%, 75%, 0.4);
415
- --translucent-warning: hsla(47, 79%, 58%, 0.4);
416
- --translucent-error: hsla(358, 62%, 47%, 0.15);
417
- --translucent-muted: hsla(210, 8%, 15%, 0.1);
418
- --focus-neutral: var(--white);
419
- --focus-theme: var(--theme-secondary-400);
420
- --focus-ring: var(--theme-dark-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.25));
421
- --focus-ring-success: hsla(140, 40%, 75%, 0.4);
422
- --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
423
- --focus-ring-error: hsla(358, 62%, 47%, 0.15);
424
- --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
425
- --highlight-addition: var(--green-500);
426
- --highlight-attribute: var(--blue-400);
427
- --highlight-bg: hsl(0, 2%, 11%);
428
- --highlight-color: var(--black);
429
- --highlight-comment: hsl(0, 0%, 60%);
430
- --highlight-deletion: var(--red-500);
431
- --highlight-keyword: var(--blue-400);
432
- --highlight-literal: hsl(27, 85%, 61.5%);
433
- --highlight-namespace: hsl(27, 85%, 61.5%);
434
- --highlight-punctuation: hsl(0, 0%, 80%);
435
- --highlight-symbol: hsl(306, 43%, 69%);
436
- --highlight-variable: hsl(65.5, 39%, 57.5%);
437
- --scrollbar: hsla(0, 0%, 100%, 0.2);
438
- --theme-primary: var(--theme-dark-primary-custom, var(--orange-400));
439
- --theme-primary-100: var(--theme-dark-primary-custom-100, var(--orange-100));
440
- --theme-primary-200: var(--theme-dark-primary-custom-200, var(--orange-200));
441
- --theme-primary-300: var(--theme-dark-primary-custom-300, var(--orange-300));
442
- --theme-primary-400: var(--theme-dark-primary-custom-400, var(--orange-400));
443
- --theme-primary-500: var(--theme-dark-primary-custom-500, var(--orange-500));
444
- --theme-primary-600: var(--theme-dark-primary-custom-600, var(--orange-600));
445
- --theme-secondary: var(--theme-dark-secondary-custom, var(--blue-400));
446
- --theme-secondary-100: var(--theme-dark-secondary-custom-100, var(--blue-100));
447
- --theme-secondary-200: var(--theme-dark-secondary-custom-200, var(--blue-200));
448
- --theme-secondary-300: var(--theme-dark-secondary-custom-300, var(--blue-300));
449
- --theme-secondary-400: var(--theme-dark-secondary-custom-400, var(--blue-400));
450
- --theme-secondary-500: var(--theme-dark-secondary-custom-500, var(--blue-500));
451
- --theme-secondary-600: var(--theme-dark-secondary-custom-600, var(--blue-600));
452
- --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)));
453
- --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)));
454
- --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)));
455
- --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), var(--theme-dark-primary-color-l));
456
- --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)));
457
- --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)));
458
- --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
459
- --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)));
460
- --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)));
461
- --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)));
462
- --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l));
463
- --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)));
464
- --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)));
465
- --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
466
- --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);
467
- --theme-dark-secondary-custom-translucent: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
468
- color: var(--theme-body-font-color, var(--black-600));
469
- }
470
- }
471
-
472
- body.theme-highcontrast:not(.theme-dark),
473
- body.theme-highcontrast.theme-dark .theme-light__forced,
474
- body.theme-highcontrast.theme-system .theme-light__forced {
475
- --white: hsl(0, 0%, 100%);
476
- --black-050: hsl(0, 0%, 100%);
477
- --black-100: hsl(210, 8%, 98%);
478
- --black-150: hsl(210, 8%, 95%);
479
- --black-200: hsl(210, 8%, 90%);
480
- --black-225: hsl(210, 8%, 85%);
481
- --black-250: hsl(210, 8%, 80%);
482
- --black-300: hsl(210, 9%, 75%);
483
- --black-350: hsl(210, 8%, 45%);
484
- --black-400: hsl(212, 8%, 35%);
485
- --black-500: hsl(210, 8%, 25%);
486
- --black-600: hsl(210, 8%, 5%);
487
- --black: hsl(0, 0%, 0%);
488
- --orange-100: hsl(23, 87%, 97%);
489
- --orange-200: hsl(23, 87%, 97%);
490
- --orange-300: hsl(27, 89%, 48%);
491
- --orange-400: hsl(27, 87%, 29%);
492
- --orange-500: hsl(27, 87%, 21%);
493
- --orange-600: hsl(27, 87%, 21%);
494
- --blue-100: hsl(210, 80%, 96%);
495
- --blue-200: hsl(210, 80%, 96%);
496
- --blue-300: hsl(210, 70%, 48%);
497
- --blue-400: hsl(210, 77%, 34%);
498
- --blue-500: hsl(210, 80%, 23%);
499
- --blue-600: hsl(210, 80%, 23%);
500
- --green-100: hsl(147, 36%, 95%);
501
- --green-200: hsl(147, 36%, 95%);
502
- --green-300: hsl(148, 70%, 31%);
503
- --green-400: hsl(148, 75%, 22%);
504
- --green-500: hsl(146, 74%, 15%);
505
- --green-600: hsl(146, 74%, 15%);
506
- --red-100: hsl(0, 80%, 96%);
507
- --red-200: hsl(0, 80%, 96%);
508
- --red-300: hsl(0, 60%, 49%);
509
- --red-400: hsl(0, 65%, 37%);
510
- --red-500: hsl(0, 65%, 22%);
511
- --red-600: hsl(0, 65%, 22%);
512
- --yellow-100: hsl(41, 85%, 95%);
513
- --yellow-200: hsl(41, 85%, 95%);
514
- --yellow-300: hsl(43, 85%, 50%);
515
- --yellow-400: hsl(43, 85%, 50%);
516
- --yellow-500: hsl(48, 85%, 18%);
517
- --yellow-600: hsl(48, 85%, 18%);
518
- --purple-100: hsl(237, 83%, 98%);
519
- --purple-200: hsl(237, 83%, 98%);
520
- --purple-300: hsl(237, 55%, 57%);
521
- --purple-400: hsl(237, 55%, 57%);
522
- --purple-500: hsl(237, 50%, 32%);
523
- --purple-600: hsl(237, 50%, 32%);
524
- --gold-100: hsl(46, 100%, 91%);
525
- --gold-200: hsl(46, 100%, 91%);
526
- --gold-300: hsl(45, 100%, 42%);
527
- --gold-400: hsl(46, 92%, 26%);
528
- --silver-100: hsl(0, 0%, 95%);
529
- --silver-200: hsl(0, 0%, 95%);
530
- --silver-300: hsl(210, 5%, 68%);
531
- --silver-400: hsl(210, 2%, 40%);
532
- --bronze-100: hsl(28, 40%, 92%);
533
- --bronze-200: hsl(28, 40%, 92%);
534
- --bronze-300: hsl(28, 43%, 65%);
535
- --bronze-400: hsl(28, 43%, 39%);
536
- --bc-lightest: var(--black-400);
537
- --bc-lighter: var(--black-400);
538
- --bc-light: var(--black-400);
539
- --bc-medium: var(--black-400);
540
- --bc-dark: var(--black-500);
541
- --bc-darker: var(--black-600);
542
- --bs-sm: none;
543
- --bs-md: none;
544
- --bs-lg: none;
545
- --bs-xl: none;
546
- --translucent-secondary: hsla(206, 100%, 40%, 0.9);
547
- --translucent-success: hsla(140, 40%, 40%, 0.9);
548
- --translucent-warning: hsla(47, 76%, 46%, 0.9);
549
- --translucent-error: hsla(358, 62%, 47%, 0.9);
550
- --translucent-muted: hsla(210, 8%, 55%, 0.95);
551
- --focus-neutral: var(--white);
552
- --focus-theme: var(--theme-secondary-400);
553
- --focus-ring: hsla(206, 100%, 40%, 0.9);
554
- --focus-ring-success: hsla(140, 40%, 40%, 0.9);
555
- --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
556
- --focus-ring-error: hsla(358, 62%, 47%, 0.9);
557
- --focus-ring-muted: hsla(210, 8%, 55%, 0.95);
558
- --highlight-addition: var(--green-500);
559
- --highlight-attribute: hsl(215, 100%, 35%);
560
- --highlight-bg: hsl(0, 0%, 96.5%);
561
- --highlight-color: var(--black-600);
562
- --highlight-comment: hsl(213, 7%, 33%);
563
- --highlight-deletion: var(--red-400);
564
- --highlight-keyword: hsl(215, 100%, 35%);
565
- --highlight-literal: hsl(16, 94%, 31%);
566
- --highlight-namespace: hsl(16, 94%, 31%);
567
- --highlight-punctuation: var(--black-500);
568
- --highlight-symbol: hsl(309, 45%, 31%);
569
- --highlight-variable: hsl(88, 100%, 19%);
570
- --scrollbar: var(--black);
571
- --theme-primary: var(--orange-400);
572
- --theme-primary-100: var(--orange-100);
573
- --theme-primary-200: var(--orange-200);
574
- --theme-primary-300: var(--orange-300);
575
- --theme-primary-400: var(--orange-400);
576
- --theme-primary-500: var(--orange-500);
577
- --theme-primary-600: var(--orange-600);
578
- --theme-secondary: var(--blue-400);
579
- --theme-secondary-100: var(--blue-100);
580
- --theme-secondary-200: var(--blue-200);
581
- --theme-secondary-300: var(--blue-300);
582
- --theme-secondary-400: var(--blue-400);
583
- --theme-secondary-500: var(--blue-500);
584
- --theme-secondary-600: var(--blue-600);
585
- --_o-disabled: 0.8;
586
- }
587
-
588
- body.theme-highcontrast.theme-dark,
589
- body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
590
- --white: hsl(0, 0%, 0%);
591
- --black-050: hsl(210, 3%, 15%);
592
- --black-100: hsl(210, 3%, 18%);
593
- --black-150: hsl(210, 4%, 21%);
594
- --black-200: hsl(210, 4%, 27%);
595
- --black-225: hsl(210, 4%, 30%);
596
- --black-250: hsl(210, 5%, 36%);
597
- --black-300: hsl(210, 4%, 47%);
598
- --black-350: hsl(210, 10%, 74%);
599
- --black-400: hsl(210, 8%, 80%);
600
- --black-500: hsl(210, 8%, 90%);
601
- --black-600: hsl(210, 11%, 98%);
602
- --black: hsl(0, 0%, 100%);
603
- --orange-100: hsl(27, 30%, 19%);
604
- --orange-200: hsl(27, 30%, 19%);
605
- --orange-300: hsl(27, 80%, 72%);
606
- --orange-400: hsl(27, 80%, 72%);
607
- --orange-500: hsl(28, 78%, 93%);
608
- --orange-600: hsl(28, 78%, 93%);
609
- --blue-100: hsl(209, 30%, 19%);
610
- --blue-200: hsl(209, 30%, 19%);
611
- --blue-300: hsl(210, 80%, 72%);
612
- --blue-400: hsl(210, 80%, 75%);
613
- --blue-500: hsl(210, 78%, 93%);
614
- --blue-600: hsl(210, 78%, 93%);
615
- --green-100: hsl(147, 30%, 19%);
616
- --green-200: hsl(147, 30%, 19%);
617
- --green-300: hsl(148, 40%, 62%);
618
- --green-400: hsl(148, 40%, 68%);
619
- --green-500: hsl(150, 39%, 93%);
620
- --green-600: hsl(150, 39%, 93%);
621
- --red-100: hsl(358, 30%, 19%);
622
- --red-200: hsl(358, 30%, 19%);
623
- --red-300: hsl(0, 75%, 77%);
624
- --red-400: hsl(0, 73%, 80%);
625
- --red-500: hsl(0, 76%, 95%);
626
- --red-600: hsl(0, 76%, 95%);
627
- --yellow-100: hsl(43, 29%, 17%);
628
- --yellow-200: hsl(43, 29%, 17%);
629
- --yellow-300: hsl(43, 75%, 75%);
630
- --yellow-400: hsl(43, 75%, 75%);
631
- --yellow-500: hsl(48, 74%, 91%);
632
- --yellow-600: hsl(44, 74%, 91%);
633
- --purple-100: hsl(237, 26%, 23%);
634
- --purple-200: hsl(237, 26%, 23%);
635
- --purple-300: hsl(237, 98%, 87%);
636
- --purple-400: hsl(237, 98%, 87%);
637
- --purple-500: hsl(237, 98%, 96%);
638
- --purple-600: hsl(237, 98%, 96%);
639
- --gold-100: hsl(45, 22%, 25%);
640
- --gold-200: hsl(45, 22%, 25%);
641
- --gold-300: hsl(45, 92%, 62%);
642
- --gold-400: hsl(46, 93%, 78%);
643
- --silver-100: hsl(220, 2%, 26%);
644
- --silver-200: hsl(220, 2%, 26%);
645
- --silver-300: hsl(220, 4%, 69%);
646
- --silver-400: hsl(214, 8%, 83%);
647
- --bronze-100: hsl(27, 13%, 27%);
648
- --bronze-200: hsl(27, 13%, 27%);
649
- --bronze-300: hsl(28, 58%, 67%);
650
- --bronze-400: hsl(28, 59%, 83%);
651
- --bc-lightest: var(--black-400);
652
- --bc-lighter: var(--black-400);
653
- --bc-light: var(--black-400);
654
- --bc-medium: var(--black-400);
655
- --bc-dark: var(--black-500);
656
- --bc-darker: var(--black-600);
657
- --bs-sm: none;
658
- --bs-md: none;
659
- --bs-lg: none;
660
- --bs-xl: none;
661
- --translucent-secondary: hsla(206, 100%, 40%, 0.9);
662
- --translucent-success: hsla(140, 40%, 40%, 0.9);
663
- --translucent-warning: hsla(47, 76%, 46%, 0.9);
664
- --translucent-error: hsla(358, 62%, 47%, 0.9);
665
- --translucent-muted: hsla(210, 8%, 55%, 0.95);
666
- --focus-neutral: var(--white);
667
- --focus-theme: var(--theme-secondary-400);
668
- --focus-ring: hsla(206, 100%, 40%, 0.9);
669
- --focus-ring-success: hsla(140, 40%, 40%, 0.9);
670
- --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
671
- --focus-ring-error: hsla(358, 62%, 47%, 0.9);
672
- --focus-ring-muted: hsla(210, 8%, 55%, 0.95);
673
- --highlight-addition: var(--green-500);
674
- --highlight-attribute: hsl(200, 57%, 85%);
675
- --highlight-bg: hsl(0, 0%, 10%);
676
- --highlight-color: hsl(0, 0%, 100%);
677
- --highlight-comment: hsl(0, 0%, 99%);
678
- --highlight-deletion: var(--red-500);
679
- --highlight-keyword: hsl(200, 57%, 85%);
680
- --highlight-literal: hsl(36, 96%, 71%);
681
- --highlight-namespace: hsl(36, 96%, 71%);
682
- --highlight-punctuation: hsl(0, 0%, 99%);
683
- --highlight-symbol: hsl(304, 39%, 85%);
684
- --highlight-variable: hsl(62, 71%, 81%);
685
- --scrollbar: var(--black);
686
- --theme-primary: var(--orange-400);
687
- --theme-primary-100: var(--orange-100);
688
- --theme-primary-200: var(--orange-200);
689
- --theme-primary-300: var(--orange-300);
690
- --theme-primary-400: var(--orange-400);
691
- --theme-primary-500: var(--orange-500);
692
- --theme-primary-600: var(--orange-600);
693
- --theme-secondary: var(--blue-400);
694
- --theme-secondary-100: var(--blue-100);
695
- --theme-secondary-200: var(--blue-200);
696
- --theme-secondary-300: var(--blue-300);
697
- --theme-secondary-400: var(--blue-400);
698
- --theme-secondary-500: var(--blue-500);
699
- --theme-secondary-600: var(--blue-600);
700
- --_o-disabled: 0.8;
701
- }
702
-
703
- @media (prefers-color-scheme: dark) {
704
- body.theme-highcontrast.theme-system {
705
- --white: hsl(0, 0%, 0%);
706
- --black-050: hsl(210, 3%, 15%);
707
- --black-100: hsl(210, 3%, 18%);
708
- --black-150: hsl(210, 4%, 21%);
709
- --black-200: hsl(210, 4%, 27%);
710
- --black-225: hsl(210, 4%, 30%);
711
- --black-250: hsl(210, 5%, 36%);
712
- --black-300: hsl(210, 4%, 47%);
713
- --black-350: hsl(210, 10%, 74%);
714
- --black-400: hsl(210, 8%, 80%);
715
- --black-500: hsl(210, 8%, 90%);
716
- --black-600: hsl(210, 11%, 98%);
717
- --black: hsl(0, 0%, 100%);
718
- --orange-100: hsl(27, 30%, 19%);
719
- --orange-200: hsl(27, 30%, 19%);
720
- --orange-300: hsl(27, 80%, 72%);
721
- --orange-400: hsl(27, 80%, 72%);
722
- --orange-500: hsl(28, 78%, 93%);
723
- --orange-600: hsl(28, 78%, 93%);
724
- --blue-100: hsl(209, 30%, 19%);
725
- --blue-200: hsl(209, 30%, 19%);
726
- --blue-300: hsl(210, 80%, 72%);
727
- --blue-400: hsl(210, 80%, 75%);
728
- --blue-500: hsl(210, 78%, 93%);
729
- --blue-600: hsl(210, 78%, 93%);
730
- --green-100: hsl(147, 30%, 19%);
731
- --green-200: hsl(147, 30%, 19%);
732
- --green-300: hsl(148, 40%, 62%);
733
- --green-400: hsl(148, 40%, 68%);
734
- --green-500: hsl(150, 39%, 93%);
735
- --green-600: hsl(150, 39%, 93%);
736
- --red-100: hsl(358, 30%, 19%);
737
- --red-200: hsl(358, 30%, 19%);
738
- --red-300: hsl(0, 75%, 77%);
739
- --red-400: hsl(0, 73%, 80%);
740
- --red-500: hsl(0, 76%, 95%);
741
- --red-600: hsl(0, 76%, 95%);
742
- --yellow-100: hsl(43, 29%, 17%);
743
- --yellow-200: hsl(43, 29%, 17%);
744
- --yellow-300: hsl(43, 75%, 75%);
745
- --yellow-400: hsl(43, 75%, 75%);
746
- --yellow-500: hsl(48, 74%, 91%);
747
- --yellow-600: hsl(44, 74%, 91%);
748
- --purple-100: hsl(237, 26%, 23%);
749
- --purple-200: hsl(237, 26%, 23%);
750
- --purple-300: hsl(237, 98%, 87%);
751
- --purple-400: hsl(237, 98%, 87%);
752
- --purple-500: hsl(237, 98%, 96%);
753
- --purple-600: hsl(237, 98%, 96%);
754
- --gold-100: hsl(45, 22%, 25%);
755
- --gold-200: hsl(45, 22%, 25%);
756
- --gold-300: hsl(45, 92%, 62%);
757
- --gold-400: hsl(46, 93%, 78%);
758
- --silver-100: hsl(220, 2%, 26%);
759
- --silver-200: hsl(220, 2%, 26%);
760
- --silver-300: hsl(220, 4%, 69%);
761
- --silver-400: hsl(214, 8%, 83%);
762
- --bronze-100: hsl(27, 13%, 27%);
763
- --bronze-200: hsl(27, 13%, 27%);
764
- --bronze-300: hsl(28, 58%, 67%);
765
- --bronze-400: hsl(28, 59%, 83%);
766
- --bc-lightest: var(--black-400);
767
- --bc-lighter: var(--black-400);
768
- --bc-light: var(--black-400);
769
- --bc-medium: var(--black-400);
770
- --bc-dark: var(--black-500);
771
- --bc-darker: var(--black-600);
772
- --bs-sm: none;
773
- --bs-md: none;
774
- --bs-lg: none;
775
- --bs-xl: none;
776
- --translucent-secondary: hsla(206, 100%, 40%, 0.9);
777
- --translucent-success: hsla(140, 40%, 40%, 0.9);
778
- --translucent-warning: hsla(47, 76%, 46%, 0.9);
779
- --translucent-error: hsla(358, 62%, 47%, 0.9);
780
- --translucent-muted: hsla(210, 8%, 55%, 0.95);
781
- --focus-neutral: var(--white);
782
- --focus-theme: var(--theme-secondary-400);
783
- --focus-ring: hsla(206, 100%, 40%, 0.9);
784
- --focus-ring-success: hsla(140, 40%, 40%, 0.9);
785
- --focus-ring-warning: hsla(47, 76%, 46%, 0.9);
786
- --focus-ring-error: hsla(358, 62%, 47%, 0.9);
787
- --focus-ring-muted: hsla(210, 8%, 55%, 0.95);
788
- --highlight-addition: var(--green-500);
789
- --highlight-attribute: hsl(200, 57%, 85%);
790
- --highlight-bg: hsl(0, 0%, 10%);
791
- --highlight-color: hsl(0, 0%, 100%);
792
- --highlight-comment: hsl(0, 0%, 99%);
793
- --highlight-deletion: var(--red-500);
794
- --highlight-keyword: hsl(200, 57%, 85%);
795
- --highlight-literal: hsl(36, 96%, 71%);
796
- --highlight-namespace: hsl(36, 96%, 71%);
797
- --highlight-punctuation: hsl(0, 0%, 99%);
798
- --highlight-symbol: hsl(304, 39%, 85%);
799
- --highlight-variable: hsl(62, 71%, 81%);
800
- --scrollbar: var(--black);
801
- --theme-primary: var(--orange-400);
802
- --theme-primary-100: var(--orange-100);
803
- --theme-primary-200: var(--orange-200);
804
- --theme-primary-300: var(--orange-300);
805
- --theme-primary-400: var(--orange-400);
806
- --theme-primary-500: var(--orange-500);
807
- --theme-primary-600: var(--orange-600);
808
- --theme-secondary: var(--blue-400);
809
- --theme-secondary-100: var(--blue-100);
810
- --theme-secondary-200: var(--blue-200);
811
- --theme-secondary-300: var(--blue-300);
812
- --theme-secondary-400: var(--blue-400);
813
- --theme-secondary-500: var(--blue-500);
814
- --theme-secondary-600: var(--blue-600);
815
- --_o-disabled: 0.8;
816
- }
817
- }
818
- "
819
- `;