@stackoverflow/stacks 2.0.0-rc.9 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/css/stacks.css +194 -159
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/atomic/typography.less +2 -2
  4. package/lib/components/activity-indicator/activity-indicator.less +1 -1
  5. package/lib/components/badge/badge.less +10 -10
  6. package/lib/components/checkbox_radio/checkbox_radio.less +14 -8
  7. package/lib/components/code-block/code-block.a11y.test.ts +1 -1
  8. package/lib/components/input_textarea/input_textarea.a11y.test.ts +112 -0
  9. package/lib/components/input_textarea/input_textarea.visual.test.ts +98 -0
  10. package/lib/components/label/label.less +1 -1
  11. package/lib/components/link-preview/link-preview.less +2 -2
  12. package/lib/components/modal/modal.less +1 -0
  13. package/lib/components/navigation/navigation.a11y.test.ts +0 -2
  14. package/lib/components/page-title/page-title.a11y.test.ts +29 -0
  15. package/lib/components/page-title/page-title.visual.test.ts +59 -0
  16. package/lib/components/post-summary/post-summary.less +5 -5
  17. package/lib/components/tag/tag.a11y.test.ts +29 -0
  18. package/lib/components/tag/tag.less +7 -1
  19. package/lib/components/tag/tag.visual.test.ts +46 -0
  20. package/lib/components/toggle-switch/toggle-switch.less +8 -1
  21. package/lib/components/topbar/topbar.less +30 -14
  22. package/lib/components/uploader/uploader.less +1 -1
  23. package/lib/components/user-card/user-card.less +2 -2
  24. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +62 -62
  25. package/lib/exports/__snapshots__/color.less.test.ts.snap +79 -79
  26. package/lib/exports/color-mixins.less +15 -12
  27. package/lib/exports/color-sets.less +23 -23
  28. package/lib/exports/mixins.less +3 -14
  29. package/lib/exports/v1/__snapshots__/constants-colors.less.test.ts.snap +28 -28
  30. package/lib/test/test-utils.ts +1 -3
  31. package/package.json +7 -7
package/lib/components/topbar/topbar.less CHANGED
@@ -19,14 +19,14 @@
19
19
  // Redefine the variables for extra contrast in high-contrast mode
20
20
  .highcontrast-mode({
21
21
  // Search input
22
- --theme-topbar-search-color: var(--theme-topbar-item-color, var(--black-500));
22
+ --theme-topbar-search-color: var(--theme-topbar-item-color, var(--black-400));
23
23
  --theme-topbar-search-background: var(--theme-topbar-background-color, var(--white));
24
- --theme-topbar-search-placeholder: var(--theme-topbar-item-color, var(--black-500));
25
- --theme-topbar-search-border: var(--theme-topbar-item-color, var(--black-500));
26
- --theme-topbar-search-border-focus: var(--theme-topbar-item-color, var(--black-500));
24
+ --theme-topbar-search-placeholder: var(--theme-topbar-item-color, var(--black-400));
25
+ --theme-topbar-search-border: var(--theme-topbar-item-color, var(--black-400));
26
+ --theme-topbar-search-border-focus: var(--theme-topbar-item-color, var(--black-400));
27
27
 
28
28
  // Search switcher
29
- --theme-topbar-select-color: var(--theme-topbar-item-color, var(--black-500));
29
+ --theme-topbar-select-color: var(--theme-topbar-item-color, var(--black-400));
30
30
  --theme-topbar-select-background: var(--theme-topbar-background-color, var(--white));
31
31
 
32
32
  // Topbar items
@@ -80,7 +80,7 @@
80
80
  &:after {
81
81
  width: var(--su-static16);
82
82
  height: var(--su-static2);
83
- background-color: var(--theme-topbar-item-color, var(--black-500));
83
+ background-color: var(--theme-topbar-item-color, var(--black-400));
84
84
  position: relative;
85
85
  }
86
86
 
@@ -119,7 +119,7 @@
119
119
  }
120
120
 
121
121
  &:hover {
122
- color: var(--theme-topbar-item-color-hover, var(--black-600));
122
+ color: var(--theme-topbar-item-color-hover, var(--black-400));
123
123
  background-color: var(--theme-topbar-item-background-hover, var(--black-200));
124
124
  }
125
125
  }
@@ -129,14 +129,30 @@
129
129
  box-shadow: var(--theme-topbar-search-shadow-focus, 0 0 0 var(--su-static4) var(--focus-ring));
130
130
  }
131
131
  .s-navigation--item:not(.is-selected) {
132
- color: var(--theme-topbar-item-color, var(--black-500));
132
+ color: var(--theme-topbar-item-color, var(--black-400));
133
133
  }
134
134
 
135
135
  .s-navigation--item:not(.is-selected):hover {
136
- color: var(--theme-topbar-item-color-hover, var(--black-600));
136
+ color: var(--theme-topbar-item-color-hover, var(--black-400));
137
137
  background-color: var(--theme-topbar-item-background-hover, var(--black-200));
138
138
  }
139
139
  }
140
+ .s-popover .s-navigation {
141
+ .s-navigation--item {
142
+ &:focus-visible {
143
+ box-shadow: var(0 0 0 var(--su-static4) var(--focus-ring));
144
+ }
145
+
146
+ &:not(.is-selected) {
147
+ &:hover {
148
+ color: var(--black-600);
149
+ background-color: var(--black-200);
150
+ }
151
+
152
+ color: var(--black-500);
153
+ }
154
+ }
155
+ }
140
156
  }
141
157
 
142
158
  // ===========================================================================
@@ -159,11 +175,11 @@
159
175
 
160
176
  // Search switcher
161
177
  --theme-topbar-select-color: .set-black()[500];
162
- --theme-topbar-select-background: .set-black()[150];
178
+ --theme-topbar-select-background: .set-black()[200];
163
179
 
164
180
  // Items
165
- --theme-topbar-item-color: .set-black()[500];
166
- --theme-topbar-item-color-hover: .set-black()[600];
181
+ --theme-topbar-item-color: .set-black()[400];
182
+ --theme-topbar-item-color-hover: .set-black()[500];
167
183
  --theme-topbar-item-background-hover: .set-black()[200];
168
184
  --theme-topbar-item-color-current: var(--_black-static);
169
185
  // --theme-topbar-item-border-current: var(--theme-primary); // As of Stacks v2, this is unused
@@ -267,7 +283,7 @@
267
283
  margin-left: auto; // Push this section as far to the right as possible
268
284
 
269
285
  .s-topbar--item:not(.s-topbar--item__unset) {
270
- color: var(--theme-topbar-item-color, var(--black-500));
286
+ color: var(--theme-topbar-item-color, var(--black-400));
271
287
  display: inline-flex;
272
288
  align-items: center;
273
289
  padding: 0 calc(var(--su12) - var(--su2));
@@ -325,7 +341,7 @@
325
341
  margin-right: var(--su8);
326
342
  flex-shrink: 0;
327
343
 
328
- .topbar-notice-styles(transparent, transparent, var(--theme-topbar-item-color, var(--black-500)));
344
+ .topbar-notice-styles(transparent, transparent, var(--theme-topbar-item-color, var(--black-400)));
329
345
 
330
346
  &:hover,
331
347
  &:focus {
package/lib/components/uploader/uploader.less CHANGED
@@ -180,7 +180,7 @@
180
180
  & &--previews-heading {
181
181
  color: var(--black-600);
182
182
  font-size: var(--fs-body2);
183
- font-weight: 600;
183
+ font-weight: 700;
184
184
  padding-bottom: var(--su8);
185
185
  }
186
186
 
package/lib/components/user-card/user-card.less CHANGED
@@ -106,8 +106,8 @@
106
106
  }
107
107
 
108
108
  & &--type {
109
- a {
110
- color: inherit;
109
+ a:not(.s-link) {
110
+ color: inherit !important;
111
111
  }
112
112
 
113
113
  color: var(--_uc-type-fc);
package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap CHANGED
@@ -326,8 +326,8 @@ body .themed {
326
326
  --yellow-400: hsl(43, 85%, 50%);
327
327
  --yellow-500: hsl(43, 85%, 33%);
328
328
  --yellow-600: hsl(43, 84%, 18%);
329
- --purple-100: hsl(237, 80%, 96%);
330
- --purple-200: hsl(237, 77%, 92%);
329
+ --purple-100: hsl(237, 83%, 98%);
330
+ --purple-200: hsl(237, 78%, 93%);
331
331
  --purple-300: hsl(237, 60%, 83%);
332
332
  --purple-400: hsl(237, 55%, 57%);
333
333
  --purple-500: hsl(237, 50%, 45%);
@@ -386,19 +386,19 @@ body .themed {
386
386
  --theme-secondary-400: var(--theme-secondary-custom-400, var(--blue-400));
387
387
  --theme-secondary-500: var(--theme-secondary-custom-500, var(--blue-500));
388
388
  --theme-secondary-600: var(--theme-secondary-custom-600, var(--blue-600));
389
- --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-base-primary-color-l) + 50 * 1%), 95%));
390
- --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-base-primary-color-l) + 35 * 1%), 90%));
391
- --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(35%, calc(var(--theme-base-primary-color-l) + 15 * 1%), 75%));
392
- --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(20%, calc(var(--theme-base-primary-color-l) + 0 * 1%), 60%));
393
- --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(13%, calc(var(--theme-base-primary-color-l) + -14 * 1%), 50%));
394
- --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(5%, calc(var(--theme-base-primary-color-l) + -26 * 1%), 40%));
389
+ --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)));
390
+ --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)));
391
+ --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)));
392
+ --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), var(--theme-base-primary-color-l));
393
+ --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)));
394
+ --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)));
395
395
  --theme-primary-custom: var(--theme-primary-custom-400);
396
- --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-base-secondary-color-l) + 50 * 1%), 95%));
397
- --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-base-secondary-color-l) + 35 * 1%), 90%));
398
- --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(35%, calc(var(--theme-base-secondary-color-l) + 15 * 1%), 75%));
399
- --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(20%, calc(var(--theme-base-secondary-color-l) + 0 * 1%), 60%));
400
- --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(13%, calc(var(--theme-base-secondary-color-l) + -14 * 1%), 50%));
401
- --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%));
396
+ --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)));
397
+ --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)));
398
+ --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)));
399
+ --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l));
400
+ --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)));
401
+ --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)));
402
402
  --theme-secondary-custom: var(--theme-secondary-custom-400);
403
403
  --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);
404
404
  color: var(--theme-body-font-color, var(--black-600));
@@ -411,12 +411,12 @@ exports[`color-mixins > theming > create-custom-theme-hsl-rgb-variables 1`] = `
411
411
  --theme-base-primary-color-h: 4;
412
412
  --theme-base-primary-color-s: 100%;
413
413
  --theme-base-primary-color-l: 50%;
414
- --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-base-primary-color-l) + 50 * 1%), 95%));
415
- --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-base-primary-color-l) + 35 * 1%), 90%));
416
- --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(35%, calc(var(--theme-base-primary-color-l) + 15 * 1%), 75%));
417
- --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(20%, calc(var(--theme-base-primary-color-l) + 0 * 1%), 60%));
418
- --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(13%, calc(var(--theme-base-primary-color-l) + -14 * 1%), 50%));
419
- --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(5%, calc(var(--theme-base-primary-color-l) + -26 * 1%), 40%));
414
+ --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)));
415
+ --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)));
416
+ --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)));
417
+ --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), var(--theme-base-primary-color-l));
418
+ --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)));
419
+ --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)));
420
420
  --theme-primary-custom: var(--theme-primary-custom-400);
421
421
  }
422
422
 
@@ -424,12 +424,12 @@ create-custom-theme-hsl-rgb-variables(#29ff53, secondary, base) {
424
424
  --theme-base-secondary-color-h: 131.77570093;
425
425
  --theme-base-secondary-color-s: 100%;
426
426
  --theme-base-secondary-color-l: 58.03921569%;
427
- --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-base-secondary-color-l) + 50 * 1%), 95%));
428
- --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-base-secondary-color-l) + 35 * 1%), 90%));
429
- --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(35%, calc(var(--theme-base-secondary-color-l) + 15 * 1%), 75%));
430
- --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(20%, calc(var(--theme-base-secondary-color-l) + 0 * 1%), 60%));
431
- --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(13%, calc(var(--theme-base-secondary-color-l) + -14 * 1%), 50%));
432
- --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%));
427
+ --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)));
428
+ --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)));
429
+ --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)));
430
+ --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l));
431
+ --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)));
432
+ --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)));
433
433
  --theme-secondary-custom: var(--theme-secondary-custom-400);
434
434
  --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);
435
435
  }
@@ -438,12 +438,12 @@ create-custom-theme-hsl-rgb-variables(#1c091d, primary, dark) {
438
438
  --theme-dark-primary-color-h: 297;
439
439
  --theme-dark-primary-color-s: 52.63157895%;
440
440
  --theme-dark-primary-color-l: 7.45098039%;
441
- --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -12 * 1%), clamp(15%, calc(var(--theme-dark-primary-color-l) + -60 * 1%), 30%));
442
- --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -10 * 1%), clamp(25%, calc(var(--theme-dark-primary-color-l) + -45 * 1%), 45%));
443
- --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -7 * 1%), clamp(35%, calc(var(--theme-dark-primary-color-l) + -33 * 1%), 70%));
444
- --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-dark-primary-color-l) + 0 * 1%), 85%));
445
- --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-dark-primary-color-l) + 10 * 1%), 90%));
446
- --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(85%, calc(var(--theme-dark-primary-color-l) + 20 * 1%), 95%));
441
+ --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)));
442
+ --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)));
443
+ --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)));
444
+ --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), var(--theme-dark-primary-color-l));
445
+ --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)));
446
+ --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)));
447
447
  --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
448
448
  }
449
449
 
@@ -451,12 +451,12 @@ create-custom-theme-hsl-rgb-variables(#49281f, secondary, dark) {
451
451
  --theme-dark-secondary-color-h: 12.85714286;
452
452
  --theme-dark-secondary-color-s: 40.38461538%;
453
453
  --theme-dark-secondary-color-l: 20.39215686%;
454
- --theme-dark-secondary-custom-100: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -12 * 1%), clamp(15%, calc(var(--theme-dark-secondary-color-l) + -60 * 1%), 30%));
455
- --theme-dark-secondary-custom-200: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -10 * 1%), clamp(25%, calc(var(--theme-dark-secondary-color-l) + -45 * 1%), 45%));
456
- --theme-dark-secondary-custom-300: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -7 * 1%), clamp(35%, calc(var(--theme-dark-secondary-color-l) + -33 * 1%), 70%));
457
- --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-dark-secondary-color-l) + 0 * 1%), 85%));
458
- --theme-dark-secondary-custom-500: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-dark-secondary-color-l) + 10 * 1%), 90%));
459
- --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%));
454
+ --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)));
455
+ --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)));
456
+ --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)));
457
+ --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l));
458
+ --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)));
459
+ --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)));
460
460
  --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
461
461
  --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);
462
462
  }
@@ -465,43 +465,43 @@ create-custom-theme-hsl-rgb-variables(#49281f, secondary, dark) {
465
465
 
466
466
  exports[`color-mixins > theming > create-custom-theme-variables 1`] = `
467
467
  "create-custom-theme-variables(primary, base) {
468
- --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-base-primary-color-l) + 50 * 1%), 95%));
469
- --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-base-primary-color-l) + 35 * 1%), 90%));
470
- --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(35%, calc(var(--theme-base-primary-color-l) + 15 * 1%), 75%));
471
- --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(20%, calc(var(--theme-base-primary-color-l) + 0 * 1%), 60%));
472
- --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(13%, calc(var(--theme-base-primary-color-l) + -14 * 1%), 50%));
473
- --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), clamp(5%, calc(var(--theme-base-primary-color-l) + -26 * 1%), 40%));
468
+ --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)));
469
+ --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)));
470
+ --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)));
471
+ --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), var(--theme-base-primary-color-s), var(--theme-base-primary-color-l));
472
+ --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)));
473
+ --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)));
474
474
  --theme-primary-custom: var(--theme-primary-custom-400);
475
475
  }
476
476
 
477
477
  create-custom-theme-variables(primary, dark) {
478
- --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -12 * 1%), clamp(15%, calc(var(--theme-dark-primary-color-l) + -60 * 1%), 30%));
479
- --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -10 * 1%), clamp(25%, calc(var(--theme-dark-primary-color-l) + -45 * 1%), 45%));
480
- --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -7 * 1%), clamp(35%, calc(var(--theme-dark-primary-color-l) + -33 * 1%), 70%));
481
- --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-dark-primary-color-l) + 0 * 1%), 85%));
482
- --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-dark-primary-color-l) + 10 * 1%), 90%));
483
- --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), clamp(85%, calc(var(--theme-dark-primary-color-l) + 20 * 1%), 95%));
478
+ --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)));
479
+ --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)));
480
+ --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)));
481
+ --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), var(--theme-dark-primary-color-s), var(--theme-dark-primary-color-l));
482
+ --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)));
483
+ --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)));
484
484
  --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
485
485
  }
486
486
 
487
487
  create-custom-theme-variables(secondary, base) {
488
- --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-base-secondary-color-l) + 50 * 1%), 95%));
489
- --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-base-secondary-color-l) + 35 * 1%), 90%));
490
- --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(35%, calc(var(--theme-base-secondary-color-l) + 15 * 1%), 75%));
491
- --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(20%, calc(var(--theme-base-secondary-color-l) + 0 * 1%), 60%));
492
- --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(13%, calc(var(--theme-base-secondary-color-l) + -14 * 1%), 50%));
493
- --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%));
488
+ --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)));
489
+ --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)));
490
+ --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)));
491
+ --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l));
492
+ --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)));
493
+ --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)));
494
494
  --theme-secondary-custom: var(--theme-secondary-custom-400);
495
495
  --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);
496
496
  }
497
497
 
498
498
  create-custom-theme-variables(secondary, base) {
499
- --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(70%, calc(var(--theme-base-secondary-color-l) + 50 * 1%), 95%));
500
- --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(55%, calc(var(--theme-base-secondary-color-l) + 35 * 1%), 90%));
501
- --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(35%, calc(var(--theme-base-secondary-color-l) + 15 * 1%), 75%));
502
- --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(20%, calc(var(--theme-base-secondary-color-l) + 0 * 1%), 60%));
503
- --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(13%, calc(var(--theme-base-secondary-color-l) + -14 * 1%), 50%));
504
- --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%));
499
+ --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)));
500
+ --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)));
501
+ --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)));
502
+ --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l));
503
+ --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)));
504
+ --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)));
505
505
  --theme-secondary-custom: var(--theme-secondary-custom-400);
506
506
  --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);
507
507
  }