@stackoverflow/stacks 2.0.0-rc.11 → 2.0.0-rc.12

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 (12) hide show
  1. package/dist/css/stacks.css +133 -114
  2. package/dist/css/stacks.min.css +1 -1
  3. package/lib/components/checkbox_radio/checkbox_radio.less +14 -8
  4. package/lib/components/toggle-switch/toggle-switch.less +8 -1
  5. package/lib/components/topbar/topbar.less +5 -5
  6. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +60 -60
  7. package/lib/exports/__snapshots__/color.less.test.ts.snap +68 -68
  8. package/lib/exports/color-mixins.less +12 -12
  9. package/lib/exports/color-sets.less +16 -16
  10. package/lib/exports/mixins.less +12 -7
  11. package/lib/exports/v1/__snapshots__/constants-colors.less.test.ts.snap +28 -28
  12. package/package.json +1 -1
package/lib/components/checkbox_radio/checkbox_radio.less CHANGED
@@ -47,8 +47,20 @@
47
47
  }
48
48
 
49
49
  .s-checkbox {
50
+ // Less variables for check svg fill color
51
+ @ch-bg-image-fill: .set-white()[default];
52
+ @ch-bg-image-fill-dark: .set-white-dark()[default];
50
53
 
51
54
  // CONTEXTUAL STYLES
55
+ .dark-mode({
56
+ &:checked {
57
+ --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
58
+ }
59
+ &:indeterminate {
60
+ --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill-dark}'/%3E%3C/svg%3E");
61
+ }
62
+ });
63
+
52
64
  .highcontrast-dark-mode({
53
65
  &:checked, &:indeterminate {
54
66
  --_ch-bc: var(--blue-500) !important;
@@ -68,11 +80,11 @@
68
80
  }
69
81
 
70
82
  &:checked {
71
- --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='%23fff'/%3E%3C/svg%3E");
83
+ --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 3.41L8.59 2 4 6.59 2.41 5 1 6.41l3 3z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
72
84
  }
73
85
 
74
86
  &:indeterminate {
75
- --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='%23fff'/%3E%3C/svg%3E");
87
+ --_ch-bg-image: url("data:image/svg+xml,%3Csvg width='11' height='11' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 4.5 h7 v2 h-7 z' fill='@{ch-bg-image-fill}'/%3E%3C/svg%3E");
76
88
  }
77
89
 
78
90
  // INTERACTION
@@ -98,12 +110,6 @@
98
110
  }
99
111
  });
100
112
 
101
- .dark-mode({
102
- &:checked {
103
- --_ch-bg: var(--black);
104
- }
105
- });
106
-
107
113
  // STATES
108
114
  &:checked {
109
115
  --_ch-baw: 0.30769231em;
package/lib/components/toggle-switch/toggle-switch.less CHANGED
@@ -1,10 +1,17 @@
1
1
  .s-toggle-switch {
2
+ @ts-bg-image-fill: .set-white()[default];
3
+ @ts-bg-image-fill-dark: .set-white-dark()[default];
2
4
  --_ts-bg: var(--black-350);
5
+ --_ts-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill}'/%3e%3c/svg%3e");
3
6
  --_ts-bg-ps: left center;
4
7
  --_ts-bs-color: transparent;
5
8
  --_ts-multiple-bg: unset;
6
9
  --_ts-multiple-fc: var(--black-400);
7
10
 
11
+ .dark-mode({
12
+ --_ts-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='@{ts-bg-image-fill-dark}'/%3e%3c/svg%3e");
13
+ });
14
+
8
15
  fieldset[disabled] &,
9
16
  &[disabled] {
10
17
  &,
@@ -93,7 +100,7 @@
93
100
  box-shadow: 0 0 0 var(--su-static4) var(--_ts-bs-color);
94
101
 
95
102
  appearance: none;
96
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); // The white dot within the toggle
103
+ background-image: var(--_ts-bg-image);
97
104
  background-size: contain;
98
105
  background-repeat: no-repeat;
99
106
  border-radius: 1000px;
package/lib/components/topbar/topbar.less CHANGED
@@ -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
  }
@@ -133,7 +133,7 @@
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
  }
@@ -175,11 +175,11 @@
175
175
 
176
176
  // Search switcher
177
177
  --theme-topbar-select-color: .set-black()[500];
178
- --theme-topbar-select-background: .set-black()[150];
178
+ --theme-topbar-select-background: .set-black()[200];
179
179
 
180
180
  // Items
181
- --theme-topbar-item-color: .set-black()[500];
182
- --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];
183
183
  --theme-topbar-item-background-hover: .set-black()[200];
184
184
  --theme-topbar-item-color-current: var(--_black-static);
185
185
  // --theme-topbar-item-border-current: var(--theme-primary); // As of Stacks v2, this is unused
package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap CHANGED
@@ -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), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 45 * 1%));
390
+ --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 35 * 1%));
391
+ --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 15 * 1%));
392
+ --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 0 * 1%));
393
+ --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + -14 * 1%));
394
+ --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + -22 * 1%));
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), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 45 * 1%));
397
+ --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 35 * 1%));
398
+ --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 15 * 1%));
399
+ --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 0 * 1%));
400
+ --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -14 * 1%));
401
+ --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -22 * 1%));
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), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 45 * 1%));
415
+ --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 35 * 1%));
416
+ --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 15 * 1%));
417
+ --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 0 * 1%));
418
+ --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + -14 * 1%));
419
+ --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + -22 * 1%));
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), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 45 * 1%));
428
+ --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 35 * 1%));
429
+ --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 15 * 1%));
430
+ --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 0 * 1%));
431
+ --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -14 * 1%));
432
+ --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -22 * 1%));
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) + -15 * 1%), calc(var(--theme-dark-primary-color-l) + -36 * 1%));
442
+ --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -9 * 1%), calc(var(--theme-dark-primary-color-l) + -26 * 1%));
443
+ --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -5 * 1%), calc(var(--theme-dark-primary-color-l) + -10 * 1%));
444
+ --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 0 * 1%));
445
+ --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 15 * 1%));
446
+ --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 23 * 1%));
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) + -15 * 1%), calc(var(--theme-dark-secondary-color-l) + -36 * 1%));
455
+ --theme-dark-secondary-custom-200: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -9 * 1%), calc(var(--theme-dark-secondary-color-l) + -26 * 1%));
456
+ --theme-dark-secondary-custom-300: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -5 * 1%), calc(var(--theme-dark-secondary-color-l) + -10 * 1%));
457
+ --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 0 * 1%));
458
+ --theme-dark-secondary-custom-500: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 15 * 1%));
459
+ --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 23 * 1%));
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), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 45 * 1%));
469
+ --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 35 * 1%));
470
+ --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 15 * 1%));
471
+ --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 0 * 1%));
472
+ --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + -14 * 1%));
473
+ --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + -22 * 1%));
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) + -15 * 1%), calc(var(--theme-dark-primary-color-l) + -36 * 1%));
479
+ --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -9 * 1%), calc(var(--theme-dark-primary-color-l) + -26 * 1%));
480
+ --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -5 * 1%), calc(var(--theme-dark-primary-color-l) + -10 * 1%));
481
+ --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 0 * 1%));
482
+ --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 15 * 1%));
483
+ --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 23 * 1%));
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), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 45 * 1%));
489
+ --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 35 * 1%));
490
+ --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 15 * 1%));
491
+ --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 0 * 1%));
492
+ --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -14 * 1%));
493
+ --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -22 * 1%));
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), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 45 * 1%));
500
+ --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 35 * 1%));
501
+ --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 15 * 1%));
502
+ --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 0 * 1%));
503
+ --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -14 * 1%));
504
+ --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -22 * 1%));
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
  }
package/lib/exports/__snapshots__/color.less.test.ts.snap CHANGED
@@ -174,19 +174,19 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
174
174
  --theme-secondary-400: var(--theme-secondary-custom-400, var(--blue-400));
175
175
  --theme-secondary-500: var(--theme-secondary-custom-500, var(--blue-500));
176
176
  --theme-secondary-600: var(--theme-secondary-custom-600, var(--blue-600));
177
- --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%));
178
- --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%));
179
- --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%));
180
- --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%));
181
- --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%));
182
- --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%));
177
+ --theme-primary-custom-100: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 45 * 1%));
178
+ --theme-primary-custom-200: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 35 * 1%));
179
+ --theme-primary-custom-300: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 15 * 1%));
180
+ --theme-primary-custom-400: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + 0 * 1%));
181
+ --theme-primary-custom-500: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + -14 * 1%));
182
+ --theme-primary-custom-600: hsl(var(--theme-base-primary-color-h), calc(var(--theme-base-primary-color-s) + 0 * 1%), calc(var(--theme-base-primary-color-l) + -22 * 1%));
183
183
  --theme-primary-custom: var(--theme-primary-custom-400);
184
- --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%));
185
- --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%));
186
- --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%));
187
- --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%));
188
- --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%));
189
- --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), clamp(5%, calc(var(--theme-base-secondary-color-l) + -26 * 1%), 40%));
184
+ --theme-secondary-custom-100: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 45 * 1%));
185
+ --theme-secondary-custom-200: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 35 * 1%));
186
+ --theme-secondary-custom-300: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 15 * 1%));
187
+ --theme-secondary-custom-400: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + 0 * 1%));
188
+ --theme-secondary-custom-500: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -14 * 1%));
189
+ --theme-secondary-custom-600: hsl(var(--theme-base-secondary-color-h), calc(var(--theme-base-secondary-color-s) + 0 * 1%), calc(var(--theme-base-secondary-color-l) + -22 * 1%));
190
190
  --theme-secondary-custom: var(--theme-secondary-custom-400);
191
191
  --theme-secondary-custom-focus-ring: hsla(var(--theme-base-secondary-color-h), var(--theme-base-secondary-color-s), var(--theme-base-secondary-color-l), 0.15);
192
192
  color: var(--theme-body-font-color, var(--black-600));
@@ -214,38 +214,38 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
214
214
  --orange-100: hsl(27, 29%, 19%);
215
215
  --orange-200: hsl(27, 43%, 31%);
216
216
  --orange-300: hsl(27, 43%, 47%);
217
- --orange-400: hsl(27, 80%, 80%);
218
- --orange-500: hsl(27, 80%, 88%);
217
+ --orange-400: hsl(27, 80%, 72%);
218
+ --orange-500: hsl(27, 80%, 83%);
219
219
  --orange-600: hsl(27, 80%, 93%);
220
220
  --blue-100: hsl(209, 29%, 19%);
221
221
  --blue-200: hsl(210, 29%, 35%);
222
222
  --blue-300: hsl(210, 29%, 50%);
223
- --blue-400: hsl(210, 80%, 80%);
224
- --blue-500: hsl(210, 80%, 88%);
223
+ --blue-400: hsl(210, 80%, 75%);
224
+ --blue-500: hsl(210, 80%, 83%);
225
225
  --blue-600: hsl(210, 80%, 93%);
226
226
  --green-100: hsl(148, 29%, 19%);
227
227
  --green-200: hsl(148, 29%, 27%);
228
228
  --green-300: hsl(148, 25%, 40%);
229
- --green-400: hsl(148, 40%, 75%);
230
- --green-500: hsl(148, 40%, 85%);
229
+ --green-400: hsl(148, 40%, 68%);
230
+ --green-500: hsl(148, 40%, 80%);
231
231
  --green-600: hsl(148, 40%, 93%);
232
232
  --red-100: hsl(358, 29%, 19%);
233
233
  --red-200: hsl(0, 29%, 37%);
234
234
  --red-300: hsl(0, 34%, 54%);
235
- --red-400: hsl(0, 73%, 85%);
236
- --red-500: hsl(0, 73%, 91%);
235
+ --red-400: hsl(0, 73%, 80%);
236
+ --red-500: hsl(0, 73%, 88%);
237
237
  --red-600: hsl(0, 73%, 95%);
238
238
  --yellow-100: hsl(43, 29%, 17%);
239
239
  --yellow-200: hsl(43, 29%, 25%);
240
240
  --yellow-300: hsl(43, 29%, 40%);
241
241
  --yellow-400: hsl(43, 75%, 75%);
242
- --yellow-500: hsl(43, 75%, 85%);
242
+ --yellow-500: hsl(43, 75%, 82%);
243
243
  --yellow-600: hsl(43, 75%, 91%);
244
244
  --purple-100: hsl(237, 25%, 24%);
245
245
  --purple-200: hsl(237, 27%, 38%);
246
246
  --purple-300: hsl(237, 32%, 56%);
247
- --purple-400: hsl(237, 58%, 86%);
248
- --purple-500: hsl(237, 60%, 91%);
247
+ --purple-400: hsl(237, 60%, 82%);
248
+ --purple-500: hsl(237, 60%, 88%);
249
249
  --purple-600: hsl(237, 65%, 96%);
250
250
  --gold-100: hsl(45, 29%, 24%);
251
251
  --gold-200: hsl(45, 47%, 37%);
@@ -301,19 +301,19 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
301
301
  --theme-secondary-400: var(--theme-dark-secondary-custom-400, var(--blue-400));
302
302
  --theme-secondary-500: var(--theme-dark-secondary-custom-500, var(--blue-500));
303
303
  --theme-secondary-600: var(--theme-dark-secondary-custom-600, var(--blue-600));
304
- --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%));
305
- --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%));
306
- --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%));
307
- --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%));
308
- --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%));
309
- --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%));
304
+ --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -15 * 1%), calc(var(--theme-dark-primary-color-l) + -36 * 1%));
305
+ --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -9 * 1%), calc(var(--theme-dark-primary-color-l) + -26 * 1%));
306
+ --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -5 * 1%), calc(var(--theme-dark-primary-color-l) + -10 * 1%));
307
+ --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 0 * 1%));
308
+ --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 15 * 1%));
309
+ --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 23 * 1%));
310
310
  --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
311
- --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%));
312
- --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%));
313
- --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%));
314
- --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%));
315
- --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%));
316
- --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), clamp(85%, calc(var(--theme-dark-secondary-color-l) + 20 * 1%), 95%));
311
+ --theme-dark-secondary-custom-100: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -15 * 1%), calc(var(--theme-dark-secondary-color-l) + -36 * 1%));
312
+ --theme-dark-secondary-custom-200: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -9 * 1%), calc(var(--theme-dark-secondary-color-l) + -26 * 1%));
313
+ --theme-dark-secondary-custom-300: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -5 * 1%), calc(var(--theme-dark-secondary-color-l) + -10 * 1%));
314
+ --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 0 * 1%));
315
+ --theme-dark-secondary-custom-500: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 15 * 1%));
316
+ --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 23 * 1%));
317
317
  --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
318
318
  --theme-dark-secondary-custom-focus-ring: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
319
319
  color: var(--theme-body-font-color, var(--black-600));
@@ -339,38 +339,38 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
339
339
  --orange-100: hsl(27, 29%, 19%);
340
340
  --orange-200: hsl(27, 43%, 31%);
341
341
  --orange-300: hsl(27, 43%, 47%);
342
- --orange-400: hsl(27, 80%, 80%);
343
- --orange-500: hsl(27, 80%, 88%);
342
+ --orange-400: hsl(27, 80%, 72%);
343
+ --orange-500: hsl(27, 80%, 83%);
344
344
  --orange-600: hsl(27, 80%, 93%);
345
345
  --blue-100: hsl(209, 29%, 19%);
346
346
  --blue-200: hsl(210, 29%, 35%);
347
347
  --blue-300: hsl(210, 29%, 50%);
348
- --blue-400: hsl(210, 80%, 80%);
349
- --blue-500: hsl(210, 80%, 88%);
348
+ --blue-400: hsl(210, 80%, 75%);
349
+ --blue-500: hsl(210, 80%, 83%);
350
350
  --blue-600: hsl(210, 80%, 93%);
351
351
  --green-100: hsl(148, 29%, 19%);
352
352
  --green-200: hsl(148, 29%, 27%);
353
353
  --green-300: hsl(148, 25%, 40%);
354
- --green-400: hsl(148, 40%, 75%);
355
- --green-500: hsl(148, 40%, 85%);
354
+ --green-400: hsl(148, 40%, 68%);
355
+ --green-500: hsl(148, 40%, 80%);
356
356
  --green-600: hsl(148, 40%, 93%);
357
357
  --red-100: hsl(358, 29%, 19%);
358
358
  --red-200: hsl(0, 29%, 37%);
359
359
  --red-300: hsl(0, 34%, 54%);
360
- --red-400: hsl(0, 73%, 85%);
361
- --red-500: hsl(0, 73%, 91%);
360
+ --red-400: hsl(0, 73%, 80%);
361
+ --red-500: hsl(0, 73%, 88%);
362
362
  --red-600: hsl(0, 73%, 95%);
363
363
  --yellow-100: hsl(43, 29%, 17%);
364
364
  --yellow-200: hsl(43, 29%, 25%);
365
365
  --yellow-300: hsl(43, 29%, 40%);
366
366
  --yellow-400: hsl(43, 75%, 75%);
367
- --yellow-500: hsl(43, 75%, 85%);
367
+ --yellow-500: hsl(43, 75%, 82%);
368
368
  --yellow-600: hsl(43, 75%, 91%);
369
369
  --purple-100: hsl(237, 25%, 24%);
370
370
  --purple-200: hsl(237, 27%, 38%);
371
371
  --purple-300: hsl(237, 32%, 56%);
372
- --purple-400: hsl(237, 58%, 86%);
373
- --purple-500: hsl(237, 60%, 91%);
372
+ --purple-400: hsl(237, 60%, 82%);
373
+ --purple-500: hsl(237, 60%, 88%);
374
374
  --purple-600: hsl(237, 65%, 96%);
375
375
  --gold-100: hsl(45, 29%, 24%);
376
376
  --gold-200: hsl(45, 47%, 37%);
@@ -426,19 +426,19 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
426
426
  --theme-secondary-400: var(--theme-dark-secondary-custom-400, var(--blue-400));
427
427
  --theme-secondary-500: var(--theme-dark-secondary-custom-500, var(--blue-500));
428
428
  --theme-secondary-600: var(--theme-dark-secondary-custom-600, var(--blue-600));
429
- --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%));
430
- --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%));
431
- --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%));
432
- --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%));
433
- --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%));
434
- --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%));
429
+ --theme-dark-primary-custom-100: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -15 * 1%), calc(var(--theme-dark-primary-color-l) + -36 * 1%));
430
+ --theme-dark-primary-custom-200: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -9 * 1%), calc(var(--theme-dark-primary-color-l) + -26 * 1%));
431
+ --theme-dark-primary-custom-300: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + -5 * 1%), calc(var(--theme-dark-primary-color-l) + -10 * 1%));
432
+ --theme-dark-primary-custom-400: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 0 * 1%));
433
+ --theme-dark-primary-custom-500: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 15 * 1%));
434
+ --theme-dark-primary-custom-600: hsl(var(--theme-dark-primary-color-h), calc(var(--theme-dark-primary-color-s) + 0 * 1%), calc(var(--theme-dark-primary-color-l) + 23 * 1%));
435
435
  --theme-dark-primary-custom: var(--theme-dark-primary-custom-400);
436
- --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%));
437
- --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%));
438
- --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%));
439
- --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%));
440
- --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%));
441
- --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), clamp(85%, calc(var(--theme-dark-secondary-color-l) + 20 * 1%), 95%));
436
+ --theme-dark-secondary-custom-100: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -15 * 1%), calc(var(--theme-dark-secondary-color-l) + -36 * 1%));
437
+ --theme-dark-secondary-custom-200: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -9 * 1%), calc(var(--theme-dark-secondary-color-l) + -26 * 1%));
438
+ --theme-dark-secondary-custom-300: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + -5 * 1%), calc(var(--theme-dark-secondary-color-l) + -10 * 1%));
439
+ --theme-dark-secondary-custom-400: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 0 * 1%));
440
+ --theme-dark-secondary-custom-500: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 15 * 1%));
441
+ --theme-dark-secondary-custom-600: hsl(var(--theme-dark-secondary-color-h), calc(var(--theme-dark-secondary-color-s) + 0 * 1%), calc(var(--theme-dark-secondary-color-l) + 23 * 1%));
442
442
  --theme-dark-secondary-custom: var(--theme-dark-secondary-custom-400);
443
443
  --theme-dark-secondary-custom-focus-ring: hsla(var(--theme-dark-secondary-color-h), var(--theme-dark-secondary-color-s), var(--theme-dark-secondary-color-l), 0.25);
444
444
  color: var(--theme-body-font-color, var(--black-600));
@@ -572,25 +572,25 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
572
572
  --orange-100: hsl(27, 29%, 19%);
573
573
  --orange-200: hsl(27, 29%, 19%);
574
574
  --orange-300: hsl(27, 80%, 64%);
575
- --orange-400: hsl(27, 80%, 80%);
575
+ --orange-400: hsl(27, 80%, 72%);
576
576
  --orange-500: hsl(27, 79%, 89%);
577
577
  --orange-600: hsl(27, 80%, 93%);
578
578
  --blue-100: hsl(209, 29%, 19%);
579
579
  --blue-200: hsl(209, 29%, 19%);
580
580
  --blue-300: hsl(210, 80%, 72%);
581
- --blue-400: hsl(210, 80%, 80%);
581
+ --blue-400: hsl(210, 80%, 75%);
582
582
  --blue-500: hsl(209, 79%, 87%);
583
583
  --blue-600: hsl(210, 80%, 93%);
584
584
  --green-100: hsl(147, 29%, 19%);
585
585
  --green-200: hsl(147, 29%, 19%);
586
586
  --green-300: hsl(148, 40%, 62%);
587
- --green-400: hsl(148, 40%, 75%);
587
+ --green-400: hsl(148, 40%, 68%);
588
588
  --green-500: hsl(148, 39%, 87%);
589
589
  --green-600: hsl(148, 40%, 93%);
590
590
  --red-100: hsl(358, 29%, 19%);
591
591
  --red-200: hsl(358, 29%, 19%);
592
592
  --red-300: hsl(0, 75%, 77%);
593
- --red-400: hsl(0, 73%, 85%);
593
+ --red-400: hsl(0, 73%, 80%);
594
594
  --red-500: hsl(0, 70%, 92%);
595
595
  --red-600: hsl(0, 73%, 95%);
596
596
  --yellow-100: hsl(43, 29%, 17%);
@@ -602,7 +602,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
602
602
  --purple-100: hsl(237, 25%, 24%);
603
603
  --purple-200: hsl(237, 25%, 24%);
604
604
  --purple-300: hsl(237, 58%, 86%);
605
- --purple-400: hsl(237, 58%, 86%);
605
+ --purple-400: hsl(237, 60%, 82%);
606
606
  --purple-500: hsl(237, 65%, 96%);
607
607
  --purple-600: hsl(237, 65%, 96%);
608
608
  --gold-100: hsl(45, 22%, 25%);
@@ -680,25 +680,25 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
680
680
  --orange-100: hsl(27, 29%, 19%);
681
681
  --orange-200: hsl(27, 29%, 19%);
682
682
  --orange-300: hsl(27, 80%, 64%);
683
- --orange-400: hsl(27, 80%, 80%);
683
+ --orange-400: hsl(27, 80%, 72%);
684
684
  --orange-500: hsl(27, 79%, 89%);
685
685
  --orange-600: hsl(27, 80%, 93%);
686
686
  --blue-100: hsl(209, 29%, 19%);
687
687
  --blue-200: hsl(209, 29%, 19%);
688
688
  --blue-300: hsl(210, 80%, 72%);
689
- --blue-400: hsl(210, 80%, 80%);
689
+ --blue-400: hsl(210, 80%, 75%);
690
690
  --blue-500: hsl(209, 79%, 87%);
691
691
  --blue-600: hsl(210, 80%, 93%);
692
692
  --green-100: hsl(147, 29%, 19%);
693
693
  --green-200: hsl(147, 29%, 19%);
694
694
  --green-300: hsl(148, 40%, 62%);
695
- --green-400: hsl(148, 40%, 75%);
695
+ --green-400: hsl(148, 40%, 68%);
696
696
  --green-500: hsl(148, 39%, 87%);
697
697
  --green-600: hsl(148, 40%, 93%);
698
698
  --red-100: hsl(358, 29%, 19%);
699
699
  --red-200: hsl(358, 29%, 19%);
700
700
  --red-300: hsl(0, 75%, 77%);
701
- --red-400: hsl(0, 73%, 85%);
701
+ --red-400: hsl(0, 73%, 80%);
702
702
  --red-500: hsl(0, 70%, 92%);
703
703
  --red-600: hsl(0, 73%, 95%);
704
704
  --yellow-100: hsl(43, 29%, 17%);
@@ -710,7 +710,7 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
710
710
  --purple-100: hsl(237, 25%, 24%);
711
711
  --purple-200: hsl(237, 25%, 24%);
712
712
  --purple-300: hsl(237, 58%, 86%);
713
- --purple-400: hsl(237, 58%, 86%);
713
+ --purple-400: hsl(237, 60%, 82%);
714
714
  --purple-500: hsl(237, 65%, 96%);
715
715
  --purple-600: hsl(237, 65%, 96%);
716
716
  --gold-100: hsl(45, 22%, 25%);