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

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 (16) hide show
  1. package/dist/css/stacks.css +138 -119
  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/checkbox_radio/checkbox_radio.less +14 -8
  6. package/lib/components/label/label.less +1 -1
  7. package/lib/components/toggle-switch/toggle-switch.less +8 -1
  8. package/lib/components/topbar/topbar.less +5 -5
  9. package/lib/components/uploader/uploader.less +1 -1
  10. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +60 -60
  11. package/lib/exports/__snapshots__/color.less.test.ts.snap +68 -68
  12. package/lib/exports/color-mixins.less +15 -12
  13. package/lib/exports/color-sets.less +16 -16
  14. package/lib/exports/mixins.less +36 -9
  15. package/lib/exports/v1/__snapshots__/constants-colors.less.test.ts.snap +28 -28
  16. package/package.json +1 -1
package/lib/atomic/typography.less CHANGED
@@ -56,7 +56,7 @@ p {
56
56
  }, @force-selector: true);
57
57
 
58
58
  .fs-category {
59
- font-weight: 600;
59
+ font-weight: 700;
60
60
  text-transform: uppercase;
61
61
 
62
62
  // If a top border is desired
@@ -89,7 +89,7 @@ p {
89
89
 
90
90
  // -- Font Weight
91
91
  .fw-normal { font-weight: 400 !important; }
92
- .fw-bold { font-weight: 600 !important; }
92
+ .fw-bold { font-weight: 700 !important; }
93
93
 
94
94
  // -- Font Styles
95
95
  .fs-normal { font-style: normal !important; }
package/lib/components/activity-indicator/activity-indicator.less CHANGED
@@ -44,7 +44,7 @@
44
44
  border-radius: 1000px;
45
45
  display: inline-block;
46
46
  font-size: var(--fs-fine);
47
- font-weight: 600;
47
+ font-weight: 700;
48
48
  line-height: 1.1; // Custom line-height to satisfy 1x screens
49
49
  min-width: var(--su-static12);
50
50
  min-height: var(--su-static12);
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/label/label.less CHANGED
@@ -91,7 +91,7 @@
91
91
 
92
92
  color: var(--fc-medium);
93
93
  font-family: inherit;
94
- font-weight: 600;
94
+ font-weight: 700;
95
95
  padding: 0 var(--su2); // Helps the label visually line up with inputs
96
96
  }
97
97
 
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/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/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), var(--theme-base-primary-color-s), calc(var(--theme-base-primary-color-l) + ((100% - var(--theme-base-primary-color-l)) * 0.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)) * 0.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)) * 0.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) * -0.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) * -0.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)) * 0.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)) * 0.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)) * 0.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) * -0.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) * -0.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)) * 0.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)) * 0.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)) * 0.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) * -0.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) * -0.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)) * 0.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)) * 0.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)) * 0.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) * -0.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) * -0.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) * -0.6)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.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) * -0.4)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.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) * -0.3)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.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)) * 0.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)) * 0.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) * -0.6)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.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) * -0.4)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.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) * -0.3)), calc(var(--theme-dark-secondary-color-l) + (var(--theme-dark-secondary-color-l) * -0.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)) * 0.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)) * 0.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)) * 0.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)) * 0.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)) * 0.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) * -0.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) * -0.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) * -0.6)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.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) * -0.4)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.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) * -0.3)), calc(var(--theme-dark-primary-color-l) + (var(--theme-dark-primary-color-l) * -0.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)) * 0.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)) * 0.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)) * 0.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)) * 0.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)) * 0.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) * -0.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) * -0.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)) * 0.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)) * 0.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)) * 0.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) * -0.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) * -0.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
  }