@stackoverflow/stacks 2.4.0 → 2.5.1

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 (104) hide show
  1. package/dist/css/stacks.css +24 -65
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/components/tag/tag.less +21 -68
  4. package/lib/exports/color-sets.less +4 -4
  5. package/package.json +10 -9
  6. package/lib/atomic/__snapshots__/color-new.less.test.ts.snap +0 -3015
  7. package/lib/atomic/__snapshots__/color.less.test.ts.snap +0 -3132
  8. package/lib/atomic/__snapshots__/misc.less.test.ts.snap +0 -893
  9. package/lib/atomic/__snapshots__/spacing.less.test.ts.snap +0 -1928
  10. package/lib/atomic/color.less.test.ts +0 -12
  11. package/lib/atomic/misc.less.test.ts +0 -12
  12. package/lib/atomic/spacing.less.test.ts +0 -12
  13. package/lib/components/activity-indicator/activity-indicator.a11y.test.ts +0 -13
  14. package/lib/components/activity-indicator/activity-indicator.visual.test.ts +0 -22
  15. package/lib/components/anchor/anchor.a11y.test.ts +0 -35
  16. package/lib/components/anchor/anchor.visual.test.ts +0 -47
  17. package/lib/components/avatar/avatar.a11y.test.ts +0 -35
  18. package/lib/components/avatar/avatar.visual.test.ts +0 -50
  19. package/lib/components/award-bling/award-bling.a11y.test.ts +0 -15
  20. package/lib/components/award-bling/award-bling.visual.test.ts +0 -24
  21. package/lib/components/badge/badge.a11y.test.ts +0 -143
  22. package/lib/components/badge/badge.visual.test.ts +0 -165
  23. package/lib/components/banner/banner.a11y.test.ts +0 -36
  24. package/lib/components/banner/banner.test.ts +0 -73
  25. package/lib/components/banner/banner.visual.test.ts +0 -36
  26. package/lib/components/block-link/block-link.a11y.test.ts +0 -57
  27. package/lib/components/block-link/block-link.visual.test.ts +0 -57
  28. package/lib/components/breadcrumbs/breadcrumbs.a11y.test.ts +0 -36
  29. package/lib/components/breadcrumbs/breadcrumbs.visual.test.ts +0 -36
  30. package/lib/components/button/button.a11y.test.ts +0 -21
  31. package/lib/components/button/button.test.setup.ts +0 -36
  32. package/lib/components/button/button.visual.test.ts +0 -18
  33. package/lib/components/button-group/button-group.a11y.test.ts +0 -12
  34. package/lib/components/button-group/button-group.test.setup.ts +0 -77
  35. package/lib/components/button-group/button-group.visual.test.ts +0 -7
  36. package/lib/components/card/card.a11y.test.ts +0 -12
  37. package/lib/components/card/card.visual.test.ts +0 -52
  38. package/lib/components/check-control/check-control.a11y.test.ts +0 -33
  39. package/lib/components/check-control/check-control.visual.test.ts +0 -36
  40. package/lib/components/check-group/check-group.a11y.test.ts +0 -49
  41. package/lib/components/check-group/check-group.visual.test.ts +0 -56
  42. package/lib/components/checkbox_radio/checkbox_radio.a11y.test.ts +0 -37
  43. package/lib/components/checkbox_radio/checkbox_radio.visual.test.ts +0 -33
  44. package/lib/components/code-block/code-block.a11y.test.ts +0 -27
  45. package/lib/components/code-block/code-block.visual.test.ts +0 -18
  46. package/lib/components/description/description.a11y.test.ts +0 -28
  47. package/lib/components/description/description.visual.test.ts +0 -28
  48. package/lib/components/empty-state/empty-state.a11y.test.ts +0 -16
  49. package/lib/components/empty-state/empty-state.visual.test.ts +0 -16
  50. package/lib/components/expandable/expandable.a11y.test.ts +0 -26
  51. package/lib/components/expandable/expandable.test.ts +0 -51
  52. package/lib/components/expandable/expandable.visual.test.ts +0 -26
  53. package/lib/components/input-fill/input-fill.a11y.test.ts +0 -21
  54. package/lib/components/input-fill/input-fill.visual.test.ts +0 -21
  55. package/lib/components/input-icon/input-icon.a11y.test.ts +0 -81
  56. package/lib/components/input-icon/input-icon.visual.test.ts +0 -92
  57. package/lib/components/input-message/input-message.a11y.test.ts +0 -57
  58. package/lib/components/input-message/input-message.visual.test.ts +0 -58
  59. package/lib/components/input_textarea/input_textarea.a11y.test.ts +0 -109
  60. package/lib/components/input_textarea/input_textarea.visual.test.ts +0 -95
  61. package/lib/components/label/label.a11y.test.ts +0 -47
  62. package/lib/components/label/label.visual.test.ts +0 -65
  63. package/lib/components/link/link.a11y.test.ts +0 -27
  64. package/lib/components/link/link.visual.test.ts +0 -31
  65. package/lib/components/link-preview/link-preview.a11y.test.ts +0 -47
  66. package/lib/components/link-preview/link-preview.visual.test.ts +0 -52
  67. package/lib/components/menu/menu.a11y.test.ts +0 -39
  68. package/lib/components/menu/menu.visual.test.ts +0 -39
  69. package/lib/components/modal/modal.a11y.test.ts +0 -41
  70. package/lib/components/modal/modal.test.ts +0 -155
  71. package/lib/components/modal/modal.visual.test.ts +0 -41
  72. package/lib/components/navigation/navigation.a11y.test.ts +0 -81
  73. package/lib/components/navigation/navigation.visual.test.ts +0 -98
  74. package/lib/components/notice/notice.a11y.test.ts +0 -16
  75. package/lib/components/notice/notice.visual.test.ts +0 -25
  76. package/lib/components/page-title/page-title.a11y.test.ts +0 -28
  77. package/lib/components/page-title/page-title.visual.test.ts +0 -58
  78. package/lib/components/pagination/pagination.a11y.test.ts +0 -21
  79. package/lib/components/pagination/pagination.visual.test.ts +0 -25
  80. package/lib/components/popover/tooltip.test.ts +0 -62
  81. package/lib/components/post-summary/post-summary.a11y.test.ts +0 -25
  82. package/lib/components/post-summary/post-summary.test.setup.ts +0 -435
  83. package/lib/components/post-summary/post-summary.visual.test.ts +0 -17
  84. package/lib/components/progress-bar/progress-bar.a11y.test.ts +0 -189
  85. package/lib/components/progress-bar/progress-bar.visual.test.ts +0 -188
  86. package/lib/components/select/select.a11y.test.ts +0 -72
  87. package/lib/components/select/select.visual.test.ts +0 -72
  88. package/lib/components/spinner/spinner.a11y.test.ts +0 -14
  89. package/lib/components/spinner/spinner.visual.test.ts +0 -40
  90. package/lib/components/table/table.a11y.test.ts +0 -112
  91. package/lib/components/table/table.test.ts +0 -366
  92. package/lib/components/table/table.visual.test.ts +0 -104
  93. package/lib/components/tag/tag.a11y.test.ts +0 -28
  94. package/lib/components/tag/tag.visual.test.ts +0 -43
  95. package/lib/components/toast/toast.a11y.test.ts +0 -29
  96. package/lib/components/toast/toast.test.ts +0 -64
  97. package/lib/components/toast/toast.visual.test.ts +0 -30
  98. package/lib/components/toggle-switch/toggle-switch.a11y.test.ts +0 -66
  99. package/lib/components/toggle-switch/toggle-switch.visual.test.ts +0 -70
  100. package/lib/components/topbar/topbar.visual.test.ts +0 -217
  101. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +0 -558
  102. package/lib/exports/__snapshots__/color.less.test.ts.snap +0 -819
  103. package/lib/exports/color-mixins.less.test.ts +0 -150
  104. package/lib/exports/color.less.test.ts +0 -12
@@ -1,558 +0,0 @@
1
- // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2
-
3
- exports[`color-mixins > colors > .create-aliased-utility-classes 1`] = `
4
- "/* .create-aliased-utility-classes() */
5
- /* .create-aliased-utility-classes(dark) */
6
- body .fc-light,
7
- body .h\\:fc-light:hover,
8
- body .f\\:fc-light:focus,
9
- body .f\\:fc-light:focus-within {
10
- color: var(--fc-light) !important;
11
- }
12
-
13
- body .fc-medium,
14
- body .h\\:fc-medium:hover,
15
- body .f\\:fc-medium:focus,
16
- body .f\\:fc-medium:focus-within {
17
- color: var(--fc-medium) !important;
18
- }
19
-
20
- body .fc-dark,
21
- body .h\\:fc-dark:hover,
22
- body .f\\:fc-dark:focus,
23
- body .f\\:fc-dark:focus-within {
24
- color: var(--fc-dark) !important;
25
- }
26
-
27
- body .fc-error,
28
- body .h\\:fc-error:hover,
29
- body .f\\:fc-error:focus,
30
- body .f\\:fc-error:focus-within {
31
- color: var(--fc-error) !important;
32
- }
33
-
34
- body .fc-danger,
35
- body .h\\:fc-danger:hover,
36
- body .f\\:fc-danger:focus,
37
- body .f\\:fc-danger:focus-within {
38
- color: var(--fc-danger) !important;
39
- }
40
-
41
- body .fc-success,
42
- body .h\\:fc-success:hover,
43
- body .f\\:fc-success:focus,
44
- body .f\\:fc-success:focus-within {
45
- color: var(--fc-success) !important;
46
- }
47
-
48
- body .fc-warning,
49
- body .h\\:fc-warning:hover,
50
- body .f\\:fc-warning:focus,
51
- body .f\\:fc-warning:focus-within {
52
- color: var(--fc-warning) !important;
53
- }
54
-
55
- body .bg-error,
56
- body .h\\:bg-error:hover,
57
- body .f\\:bg-error:focus,
58
- body .f\\:bg-error:focus-within {
59
- background-color: var(--bg-error) !important;
60
- }
61
-
62
- body .bg-danger,
63
- body .h\\:bg-danger:hover,
64
- body .f\\:bg-danger:focus,
65
- body .f\\:bg-danger:focus-within {
66
- background-color: var(--bg-danger) !important;
67
- }
68
-
69
- body .bg-success,
70
- body .h\\:bg-success:hover,
71
- body .f\\:bg-success:focus,
72
- body .f\\:bg-success:focus-within {
73
- background-color: var(--bg-success) !important;
74
- }
75
-
76
- body .bg-warning,
77
- body .h\\:bg-warning:hover,
78
- body .f\\:bg-warning:focus,
79
- body .f\\:bg-warning:focus-within {
80
- background-color: var(--bg-warning) !important;
81
- }
82
-
83
- body .bc-error,
84
- body .h\\:bc-error:hover,
85
- body .f\\:bc-error:focus,
86
- body .f\\:bc-error:focus-within {
87
- border-color: var(--bc-error) !important;
88
- }
89
-
90
- body .bc-danger,
91
- body .h\\:bc-danger:hover,
92
- body .f\\:bc-danger:focus,
93
- body .f\\:bc-danger:focus-within {
94
- border-color: var(--bc-danger) !important;
95
- }
96
-
97
- body .bc-success,
98
- body .h\\:bc-success:hover,
99
- body .f\\:bc-success:focus,
100
- body .f\\:bc-success:focus-within {
101
- border-color: var(--bc-success) !important;
102
- }
103
-
104
- body .bc-warning,
105
- body .h\\:bc-warning:hover,
106
- body .f\\:bc-warning:focus,
107
- body .f\\:bc-warning:focus-within {
108
- border-color: var(--bc-warning) !important;
109
- }
110
-
111
- body.theme-dark .d\\:fc-light {
112
- color: var(--fc-light) !important;
113
- }
114
-
115
- body.theme-dark .d\\:fc-medium {
116
- color: var(--fc-medium) !important;
117
- }
118
-
119
- body.theme-dark .d\\:fc-dark {
120
- color: var(--fc-dark) !important;
121
- }
122
-
123
- body.theme-dark .d\\:fc-error {
124
- color: var(--fc-error) !important;
125
- }
126
-
127
- body.theme-dark .d\\:fc-danger {
128
- color: var(--fc-danger) !important;
129
- }
130
-
131
- body.theme-dark .d\\:fc-success {
132
- color: var(--fc-success) !important;
133
- }
134
-
135
- body.theme-dark .d\\:fc-warning {
136
- color: var(--fc-warning) !important;
137
- }
138
-
139
- body.theme-dark .d\\:bg-error {
140
- background-color: var(--bg-error) !important;
141
- }
142
-
143
- body.theme-dark .d\\:bg-danger {
144
- background-color: var(--bg-danger) !important;
145
- }
146
-
147
- body.theme-dark .d\\:bg-success {
148
- background-color: var(--bg-success) !important;
149
- }
150
-
151
- body.theme-dark .d\\:bg-warning {
152
- background-color: var(--bg-warning) !important;
153
- }
154
- "
155
- `;
156
-
157
- exports[`color-mixins > colors > create-color-classes 1`] = `
158
- "/* .create-color-classes(red-500, var(--red-500)) */
159
- /* .create-color-classes(blue-400, var(--blue-400), dark, color) */
160
- /* .create-color-classes(green-300, var(--green-300), light, background-color) */
161
- body .bg-red-500,
162
- body .h\\:bg-red-500:hover,
163
- body .f\\:bg-red-500:focus,
164
- body .f\\:bg-red-500:focus-within {
165
- background-color: var(--red-500);
166
- }
167
-
168
- body .bc-red-500,
169
- body .h\\:bc-red-500:hover,
170
- body .f\\:bc-red-500:focus,
171
- body .f\\:bc-red-500:focus-within {
172
- border-color: var(--red-500);
173
- }
174
-
175
- body .fc-red-500,
176
- body .h\\:fc-red-500:hover,
177
- body .f\\:fc-red-500:focus,
178
- body .f\\:fc-red-500:focus-within {
179
- color: var(--red-500);
180
- }
181
-
182
- body .d\\:fc-blue-500 {
183
- color: var(--blue-500);
184
- }
185
-
186
- body .bg-green-300,
187
- body .h\\:bg-green-300:hover,
188
- body .f\\:bg-green-300:focus,
189
- body .f\\:bg-green-300:focus-within {
190
- background-color: var(--green-300);
191
- }
192
- "
193
- `;
194
-
195
- exports[`color-mixins > colors > create-colors 1`] = `
196
- "/*
197
- .set-test-emerald() {
198
- default: hsl(150, 60%, 55%);
199
- }
200
- .set-test-ruby() {
201
- 100: hsl(350, 70%, 97%);
202
- 600: hsl(350, 70%, 29%);
203
- }
204
- .sets-test() {
205
- emerald: .set-test-emerald();
206
- ruby: .set-test-ruby();
207
- }
208
- */
209
- /* .create-colors(.sets-test(), variables) */
210
- body {
211
- --emerald: hsl(150, 60%, 55%);
212
- --ruby-100: hsl(350, 70%, 97%);
213
- --ruby-600: hsl(350, 70%, 29%);
214
- }
215
- /* .create-colors(.sets-test(), classes) */
216
- body .bg-emerald,
217
- body .h\\:bg-emerald:hover,
218
- body .f\\:bg-emerald:focus,
219
- body .f\\:bg-emerald:focus-within {
220
- background-color: var(--emerald) !important;
221
- }
222
-
223
- body .bc-emerald,
224
- body .h\\:bc-emerald:hover,
225
- body .f\\:bc-emerald:focus,
226
- body .f\\:bc-emerald:focus-within {
227
- border-color: var(--emerald) !important;
228
- }
229
-
230
- body .fc-emerald,
231
- body .h\\:fc-emerald:hover,
232
- body .f\\:fc-emerald:focus,
233
- body .f\\:fc-emerald:focus-within {
234
- color: var(--emerald) !important;
235
- }
236
-
237
- body .bg-ruby-100,
238
- body .h\\:bg-ruby-100:hover,
239
- body .f\\:bg-ruby-100:focus,
240
- body .f\\:bg-ruby-100:focus-within {
241
- background-color: var(--ruby-100) !important;
242
- }
243
-
244
- body .bc-ruby-100,
245
- body .h\\:bc-ruby-100:hover,
246
- body .f\\:bc-ruby-100:focus,
247
- body .f\\:bc-ruby-100:focus-within {
248
- border-color: var(--ruby-100) !important;
249
- }
250
-
251
- body .fc-ruby-100,
252
- body .h\\:fc-ruby-100:hover,
253
- body .f\\:fc-ruby-100:focus,
254
- body .f\\:fc-ruby-100:focus-within {
255
- color: var(--ruby-100) !important;
256
- }
257
-
258
- body .bg-ruby-600,
259
- body .h\\:bg-ruby-600:hover,
260
- body .f\\:bg-ruby-600:focus,
261
- body .f\\:bg-ruby-600:focus-within {
262
- background-color: var(--ruby-600) !important;
263
- }
264
-
265
- body .bc-ruby-600,
266
- body .h\\:bc-ruby-600:hover,
267
- body .f\\:bc-ruby-600:focus,
268
- body .f\\:bc-ruby-600:focus-within {
269
- border-color: var(--ruby-600) !important;
270
- }
271
-
272
- body .fc-ruby-600,
273
- body .h\\:fc-ruby-600:hover,
274
- body .f\\:fc-ruby-600:focus,
275
- body .f\\:fc-ruby-600:focus-within {
276
- color: var(--ruby-600) !important;
277
- }
278
- "
279
- `;
280
-
281
- exports[`color-mixins > colors > generate-colors > light 1`] = `
282
- "/* .generate-colors(light) */
283
- body,
284
- body.themed,
285
- body .themed {
286
- --white: hsl(0, 0%, 100%);
287
- --black-050: hsl(0, 0%, 100%);
288
- --black-100: hsl(210, 8%, 98%);
289
- --black-150: hsl(210, 8%, 95%);
290
- --black-200: hsl(210, 8%, 90%);
291
- --black-225: hsl(210, 8%, 85%);
292
- --black-250: hsl(210, 8%, 80%);
293
- --black-300: hsl(210, 9%, 75%);
294
- --black-350: hsl(210, 8%, 68%);
295
- --black-400: hsl(210, 8%, 42%);
296
- --black-500: hsl(210, 8%, 25%);
297
- --black-600: hsl(210, 8%, 5%);
298
- --black: hsl(0, 0%, 0%);
299
- --orange-100: hsl(23, 87%, 97%);
300
- --orange-200: hsl(27, 87%, 87%);
301
- --orange-300: hsl(27, 87%, 72%);
302
- --orange-400: hsl(27, 89%, 48%);
303
- --orange-500: hsl(27, 87%, 41%);
304
- --orange-600: hsl(27, 87%, 27%);
305
- --blue-100: hsl(210, 80%, 96%);
306
- --blue-200: hsl(210, 80%, 91%);
307
- --blue-300: hsl(210, 78%, 76%);
308
- --blue-400: hsl(210, 77%, 46%);
309
- --blue-500: hsl(210, 77%, 36%);
310
- --blue-600: hsl(210, 80%, 23%);
311
- --green-100: hsl(148, 35%, 95%);
312
- --green-200: hsl(148, 35%, 88%);
313
- --green-300: hsl(148, 35%, 69%);
314
- --green-400: hsl(148, 70%, 31%);
315
- --green-500: hsl(148, 75%, 22%);
316
- --green-600: hsl(148, 75%, 15%);
317
- --red-100: hsl(0, 72%, 96%);
318
- --red-200: hsl(0, 70%, 93%);
319
- --red-300: hsl(0, 66%, 80%);
320
- --red-400: hsl(0, 60%, 49%);
321
- --red-500: hsl(0, 65%, 37%);
322
- --red-600: hsl(0, 65%, 22%);
323
- --yellow-100: hsl(43, 85%, 95%);
324
- --yellow-200: hsl(43, 85%, 88%);
325
- --yellow-300: hsl(43, 85%, 72%);
326
- --yellow-400: hsl(43, 85%, 50%);
327
- --yellow-500: hsl(43, 85%, 33%);
328
- --yellow-600: hsl(43, 85%, 18%);
329
- --purple-100: hsl(237, 83%, 98%);
330
- --purple-200: hsl(237, 78%, 93%);
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%);
335
- --gold-100: hsl(46, 100%, 91%);
336
- --gold-200: hsl(46, 100%, 74%);
337
- --gold-300: hsl(45, 100%, 42%);
338
- --gold-400: hsl(46, 92%, 26%);
339
- --silver-100: hsl(0, 0%, 95%);
340
- --silver-200: hsl(0, 0%, 84%);
341
- --silver-300: hsl(210, 5%, 68%);
342
- --silver-400: hsl(210, 2%, 40%);
343
- --bronze-100: hsl(28, 40%, 92%);
344
- --bronze-200: hsl(30, 47%, 83%);
345
- --bronze-300: hsl(28, 43%, 65%);
346
- --bronze-400: hsl(28, 43%, 39%);
347
- --bc-lightest: var(--black-100);
348
- --bc-lighter: var(--black-150);
349
- --bc-light: var(--black-200);
350
- --bc-medium: var(--black-225);
351
- --bc-dark: var(--black-250);
352
- --bc-darker: var(--black-300);
353
- --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);
354
- --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);
355
- --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);
356
- --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);
357
- --translucent-secondary: var(--theme-secondary-custom-translucent, hsla(206, 100%, 40%, 0.15));
358
- --translucent-success: hsla(140, 40%, 75%, 0.4);
359
- --translucent-warning: hsla(47, 79%, 58%, 0.4);
360
- --translucent-error: hsla(358, 62%, 47%, 0.15);
361
- --translucent-muted: hsla(210, 8%, 15%, 0.1);
362
- --focus-neutral: var(--white);
363
- --focus-theme: var(--theme-secondary-400);
364
- --focus-ring: var(--theme-secondary-custom-focus-ring, hsla(206, 100%, 40%, 0.15));
365
- --focus-ring-success: hsla(140, 40%, 75%, 0.4);
366
- --focus-ring-warning: hsla(47, 79%, 58%, 0.4);
367
- --focus-ring-error: hsla(358, 62%, 47%, 0.15);
368
- --focus-ring-muted: hsla(210, 8%, 15%, 0.1);
369
- --highlight-addition: var(--green-500);
370
- --highlight-attribute: hsl(206, 98.5%, 29%);
371
- --highlight-bg: hsl(0, 0%, 96.5%);
372
- --highlight-color: var(--black-600);
373
- --highlight-comment: hsl(210, 8%, 43.5%);
374
- --highlight-deletion: var(--red-500);
375
- --highlight-keyword: hsl(206, 98.5%, 29%);
376
- --highlight-literal: hsl(27, 99%, 36%);
377
- --highlight-namespace: hsl(27, 99%, 36%);
378
- --highlight-punctuation: var(--black-500);
379
- --highlight-symbol: hsl(306, 43%, 35%);
380
- --highlight-variable: hsl(80, 80.5%, 26.5%);
381
- --scrollbar: hsla(0, 0%, 0%, 0.2);
382
- --theme-primary: var(--theme-primary-custom, var(--orange-400));
383
- --theme-primary-100: var(--theme-primary-custom-100, var(--orange-100));
384
- --theme-primary-200: var(--theme-primary-custom-200, var(--orange-200));
385
- --theme-primary-300: var(--theme-primary-custom-300, var(--orange-300));
386
- --theme-primary-400: var(--theme-primary-custom-400, var(--orange-400));
387
- --theme-primary-500: var(--theme-primary-custom-500, var(--orange-500));
388
- --theme-primary-600: var(--theme-primary-custom-600, var(--orange-600));
389
- --theme-secondary: var(--theme-secondary-custom, var(--blue-400));
390
- --theme-secondary-100: var(--theme-secondary-custom-100, var(--blue-100));
391
- --theme-secondary-200: var(--theme-secondary-custom-200, var(--blue-200));
392
- --theme-secondary-300: var(--theme-secondary-custom-300, var(--blue-300));
393
- --theme-secondary-400: var(--theme-secondary-custom-400, var(--blue-400));
394
- --theme-secondary-500: var(--theme-secondary-custom-500, var(--blue-500));
395
- --theme-secondary-600: var(--theme-secondary-custom-600, var(--blue-600));
396
- --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)));
397
- --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)));
398
- --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)));
399
- --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), var(--theme-base-primary-color-l));
400
- --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)));
401
- --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)));
402
- --theme-primary-custom: var(--theme-primary-custom-400);
403
- --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)));
404
- --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)));
405
- --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)));
406
- --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l));
407
- --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)));
408
- --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)));
409
- --theme-secondary-custom: var(--theme-secondary-custom-400);
410
- --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);
411
- --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);
412
- color: var(--theme-body-font-color, var(--black-600));
413
- }
414
- "
415
- `;
416
-
417
- exports[`color-mixins > theming > create-custom-theme-hsl-rgb-variables 1`] = `
418
- "create-custom-theme-hsl-rgb-variables(#ff1100, primary, base) {
419
- --theme-base-primary-color-h: 4;
420
- --theme-base-primary-color-s: 100%;
421
- --theme-base-primary-color-l: 50%;
422
- --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)));
423
- --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)));
424
- --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)));
425
- --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), var(--theme-base-primary-color-l));
426
- --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)));
427
- --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)));
428
- --theme-primary-custom: var(--theme-primary-custom-400);
429
- }
430
-
431
- create-custom-theme-hsl-rgb-variables(#29ff53, secondary, base) {
432
- --theme-base-secondary-color-h: 131.77570093;
433
- --theme-base-secondary-color-s: 100%;
434
- --theme-base-secondary-color-l: 58.03921569%;
435
- --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)));
436
- --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)));
437
- --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)));
438
- --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l));
439
- --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)));
440
- --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)));
441
- --theme-secondary-custom: var(--theme-secondary-custom-400);
442
- --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);
443
- --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);
444
- }
445
-
446
- create-custom-theme-hsl-rgb-variables(#1c091d, primary, dark) {
447
- --theme-dark-primary-color-h: 297;
448
- --theme-dark-primary-color-s: 52.63157895%;
449
- --theme-dark-primary-color-l: 7.45098039%;
450
- --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)));
451
- --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)));
452
- --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)));
453
- --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), var(--theme-dark-primary-color-l));
454
- --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)));
455
- --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)));
456
- --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
457
- }
458
-
459
- create-custom-theme-hsl-rgb-variables(#49281f, secondary, dark) {
460
- --theme-dark-secondary-color-h: 12.85714286;
461
- --theme-dark-secondary-color-s: 40.38461538%;
462
- --theme-dark-secondary-color-l: 20.39215686%;
463
- --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)));
464
- --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)));
465
- --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)));
466
- --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l));
467
- --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)));
468
- --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)));
469
- --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
470
- --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);
471
- --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);
472
- }
473
- "
474
- `;
475
-
476
- exports[`color-mixins > theming > create-custom-theme-variables 1`] = `
477
- "create-custom-theme-variables(primary, base) {
478
- --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)));
479
- --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)));
480
- --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)));
481
- --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), var(--theme-base-primary-color-l));
482
- --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)));
483
- --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)));
484
- --theme-primary-custom: var(--theme-primary-custom-400);
485
- }
486
-
487
- create-custom-theme-variables(primary, dark) {
488
- --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)));
489
- --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)));
490
- --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)));
491
- --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), var(--theme-dark-primary-color-l));
492
- --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)));
493
- --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)));
494
- --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
495
- }
496
-
497
- create-custom-theme-variables(secondary, base) {
498
- --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)));
499
- --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)));
500
- --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)));
501
- --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l));
502
- --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)));
503
- --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)));
504
- --theme-secondary-custom: var(--theme-secondary-custom-400);
505
- --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);
506
- --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);
507
- }
508
-
509
- create-custom-theme-variables(secondary, base) {
510
- --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)));
511
- --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)));
512
- --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)));
513
- --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l));
514
- --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)));
515
- --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)));
516
- --theme-secondary-custom: var(--theme-secondary-custom-400);
517
- --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);
518
- --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);
519
- }
520
- "
521
- `;
522
-
523
- exports[`color-mixins > theming > create-theme-variables 1`] = `
524
- "body {
525
- --theme-primary: var(--theme-primary-custom, var(--orange-400));
526
- --theme-primary-100: var(--theme-primary-custom-100, var(--orange-100));
527
- --theme-primary-200: var(--theme-primary-custom-200, var(--orange-200));
528
- --theme-primary-300: var(--theme-primary-custom-300, var(--orange-300));
529
- --theme-primary-400: var(--theme-primary-custom-400, var(--orange-400));
530
- --theme-primary-500: var(--theme-primary-custom-500, var(--orange-500));
531
- --theme-primary-600: var(--theme-primary-custom-600, var(--orange-600));
532
- --theme-secondary: var(--theme-secondary-custom, var(--blue-400));
533
- --theme-secondary-100: var(--theme-secondary-custom-100, var(--blue-100));
534
- --theme-secondary-200: var(--theme-secondary-custom-200, var(--blue-200));
535
- --theme-secondary-300: var(--theme-secondary-custom-300, var(--blue-300));
536
- --theme-secondary-400: var(--theme-secondary-custom-400, var(--blue-400));
537
- --theme-secondary-500: var(--theme-secondary-custom-500, var(--blue-500));
538
- --theme-secondary-600: var(--theme-secondary-custom-600, var(--blue-600));
539
- }
540
-
541
- body.theme-highcontrast {
542
- --theme-primary: var(--orange-400);
543
- --theme-primary-100: var(--orange-100);
544
- --theme-primary-200: var(--orange-200);
545
- --theme-primary-300: var(--orange-300);
546
- --theme-primary-400: var(--orange-400);
547
- --theme-primary-500: var(--orange-500);
548
- --theme-primary-600: var(--orange-600);
549
- --theme-secondary: var(--blue-400);
550
- --theme-secondary-100: var(--blue-100);
551
- --theme-secondary-200: var(--blue-200);
552
- --theme-secondary-300: var(--blue-300);
553
- --theme-secondary-400: var(--blue-400);
554
- --theme-secondary-500: var(--blue-500);
555
- --theme-secondary-600: var(--blue-600);
556
- }
557
- "
558
- `;