@stackoverflow/stacks 2.0.0-rc.9 → 2.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/css/stacks.css +268 -233
  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-fill/input-fill.a11y.test.ts +22 -0
  9. package/lib/components/input-fill/input-fill.visual.test.ts +22 -0
  10. package/lib/components/input-message/input-message.a11y.test.ts +58 -0
  11. package/lib/components/input-message/input-message.visual.test.ts +59 -0
  12. package/lib/components/input_textarea/input_textarea.a11y.test.ts +112 -0
  13. package/lib/components/input_textarea/input_textarea.visual.test.ts +98 -0
  14. package/lib/components/label/label.less +1 -1
  15. package/lib/components/link-preview/link-preview.less +2 -2
  16. package/lib/components/modal/modal.less +1 -0
  17. package/lib/components/navigation/navigation.a11y.test.ts +0 -2
  18. package/lib/components/page-title/page-title.a11y.test.ts +29 -0
  19. package/lib/components/page-title/page-title.visual.test.ts +59 -0
  20. package/lib/components/post-summary/post-summary.less +5 -5
  21. package/lib/components/tag/tag.a11y.test.ts +29 -0
  22. package/lib/components/tag/tag.less +31 -17
  23. package/lib/components/tag/tag.visual.test.ts +46 -0
  24. package/lib/components/toggle-switch/toggle-switch.less +8 -1
  25. package/lib/components/topbar/topbar.less +30 -14
  26. package/lib/components/uploader/uploader.less +1 -1
  27. package/lib/components/user-card/user-card.less +2 -2
  28. package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +62 -62
  29. package/lib/exports/__snapshots__/color.less.test.ts.snap +137 -137
  30. package/lib/exports/color-mixins.less +15 -12
  31. package/lib/exports/color-sets.less +56 -56
  32. package/lib/exports/mixins.less +3 -14
  33. package/lib/exports/v1/__snapshots__/constants-colors.less.test.ts.snap +28 -28
  34. package/lib/test/test-utils.ts +1 -3
  35. package/package.json +9 -9
package/lib/components/tag/tag.a11y.test.ts ADDED
@@ -0,0 +1,29 @@
1
+ import { IconClearSm } from "@stackoverflow/stacks-icons";
2
+ import { runComponentTests } from "../../test/test-utils";
3
+ import "../../index";
4
+
5
+ const children = {
6
+ default: `default`,
7
+ dismiss: `dismiss <span class="s-tag--dismiss">${IconClearSm}</span>`,
8
+ sponsor: `<img class="s-tag--sponsor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII" width="16" height="16" alt="sponsor">sponsor`,
9
+ };
10
+
11
+ describe("tag", () => {
12
+ runComponentTests({
13
+ type: "a11y",
14
+ baseClass: "s-tag",
15
+ variants: ["ignored", "watched", "moderator", "muted", "required"],
16
+ modifiers: {
17
+ global: ["is-selected"],
18
+ },
19
+ children,
20
+ // TODO: revisit this after minor tag changes are made
21
+ skippedTestids: [
22
+ /s-tag-highcontrast-light-muted/, // 6.33
23
+ /s-tag-light-is-selected/, // 58.28Lc
24
+ /s-tag-light-ignored-is-selected/, // 58.28Lc
25
+ /s-tag-light-moderator-is-selected/, // 49.14Lc
26
+ /s-tag-light-watched-is-selected/, // 58.28Lc
27
+ ],
28
+ });
29
+ });
package/lib/components/tag/tag.less CHANGED
@@ -1,14 +1,18 @@
1
1
  .s-tag {
2
+ // Border color
2
3
  --_ta-bc: var(--theme-tag-border-color, transparent);
3
4
  --_ta-bc-hover: var(--theme-tag-hover-border-color, transparent);
4
- --_ta-bc-selected: transparent;
5
+ --_ta-bc-selected: var(--theme-tag-selected-border-color, transparent);
6
+ // Background color
5
7
  --_ta-bg: var(--theme-tag-background-color, var(--theme-secondary-100));
6
8
  --_ta-bg-hover: var(--theme-tag-hover-background-color, var(--theme-secondary-200));
7
- --_ta-bg-selected: var(--theme-secondary-300);
8
- --_ta-br: var(--br-sm);
9
+ --_ta-bg-selected: var(--theme-tag-selected-background-color, var(--theme-secondary-300));
10
+ // Color
9
11
  --_ta-fc: var(--theme-tag-color, var(--theme-secondary-500));
10
12
  --_ta-fc-hover: var(--theme-tag-hover-color, var(--theme-secondary-600));
11
- --_ta-fc-selected: var(--theme-secondary-600);
13
+ --_ta-fc-selected: var(--theme-tag-selected-color, var(--theme-secondary-600));
14
+ // Other
15
+ --_ta-br: var(--br-sm);
12
16
  --_ta-fs: var(--fs-caption);
13
17
  --_ta-lh: 1.846153846;
14
18
  --_ta-pl: var(--_ta-px);
@@ -18,6 +22,7 @@
18
22
  // CONTEXTUAL STYLES
19
23
  .highcontrast-mode({
20
24
  --_ta-bc: currentColor;
25
+ --_ta-bg-selected: var(--theme-secondary-400);
21
26
 
22
27
  text-decoration: none;
23
28
  });
@@ -30,7 +35,8 @@
30
35
  a&:hover,
31
36
  a&:focus {
32
37
  .highcontrast-mode({
33
- border-color: currentColor;
38
+ --_ta-bc-selected: transparent;
39
+ --_ta-fc-selected: var(--white);
34
40
  });
35
41
 
36
42
  background-color: var(--_ta-bg-selected);
@@ -99,13 +105,17 @@
99
105
 
100
106
  // moderator overrides other muted and required, required overrides muted
101
107
  &&__moderator {
102
- --_ta-bc: transparent;
108
+ .highcontrast-mode({
109
+ --_ta-bg-selected: var(--orange-500);
110
+ });
111
+
112
+ --_ta-bc: var(--orange-200);
103
113
  --_ta-bg: var(--orange-100);
104
114
  --_ta-fc: var(--orange-500);
105
- --_ta-bc-hover: transparent;
115
+ --_ta-bc-hover: var(--orange-300);
106
116
  --_ta-bg-hover: var(--orange-200);
107
117
  --_ta-fc-hover: var(--orange-600);
108
- --_ta-bc-selected: transparent;
118
+ --_ta-bc-selected: var(--orange-400);
109
119
  --_ta-bg-selected: var(--orange-300);
110
120
  --_ta-fc-selected: var(--orange-600); // Currently APCA Lc 49 😔
111
121
  }
@@ -125,15 +135,19 @@
125
135
  }
126
136
 
127
137
  &&__required:not(&__moderator) {
128
- --_ta-bc: transparent;
129
- --_ta-bg: var(--theme-secondary-500);
130
- --_ta-fc: var(--white);
131
- --_ta-bc-hover: transparent;
132
- --_ta-bg-hover: var(--theme-secondary-400);
133
- --_ta-fc-hover: var(--white);
134
- --_ta-bc-selected: transparent;
135
- --_ta-bg-selected: var(--theme-secondary-600);
136
- --_ta-fc-selected: var(--white);
138
+ // TODO *eventually* remove the custom theme overrides once we can reconcile Meta theming needs
139
+ // Border color
140
+ --_ta-bc: var(--theme-tag-required-border-color, transparent);
141
+ --_ta-bc-hover: var(--theme-tag-required-hover-border-color, transparent);
142
+ --_ta-bc-selected: var(--theme-tag-required-selected-border-color, transparent);
143
+ // Background color
144
+ --_ta-bg: var(--theme-tag-required-background-color, var(--theme-secondary-500));
145
+ --_ta-bg-hover: var(--theme-tag-required-hover-background-color var(--theme-secondary-400));
146
+ --_ta-bg-selected: var(--theme-tag-required-selected-background-color, var(--theme-secondary-600));
147
+ // Color
148
+ --_ta-fc: var(--theme-tag-required-color, var(--white));
149
+ --_ta-fc-hover: var(--theme-tag-required-hover-color, var(--white));
150
+ --_ta-fc-selected: var(--theme-tag-required-selected-color, var(--white));
137
151
  }
138
152
  &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
139
153
  &&__watched {
package/lib/components/tag/tag.visual.test.ts ADDED
@@ -0,0 +1,46 @@
1
+ import { html } from "@open-wc/testing";
2
+ import { IconClearSm } from "@stackoverflow/stacks-icons";
3
+ import { defaultOptions, runComponentTests } from "../../test/test-utils";
4
+ import "../../index";
5
+
6
+ const children = {
7
+ default: `default`,
8
+ dismiss: `dismiss <span class="s-tag--dismiss">${IconClearSm}</span>`,
9
+ sponsor: `<img class="s-tag--sponsor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII" width="16" height="16" alt="sponsor">sponsor`,
10
+ };
11
+
12
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
13
+ const template = ({ component, testid }: any) => html`
14
+ <div data-testid="${testid}" class="d-inline-block p4">${component}</div>
15
+ `;
16
+
17
+ describe("tag", () => {
18
+ runComponentTests({
19
+ type: "visual",
20
+ baseClass: "s-tag",
21
+ variants: ["ignored", "watched", "moderator", "muted", "required"],
22
+ modifiers: {
23
+ global: ["is-selected"],
24
+ },
25
+ children,
26
+ template,
27
+ });
28
+
29
+ // Size modifiers
30
+ runComponentTests({
31
+ type: "visual",
32
+ baseClass: "s-tag",
33
+ modifiers: {
34
+ primary: ["xs", "sm", "md", "lg"],
35
+ global: ["is-selected"],
36
+ },
37
+ children: {
38
+ default: `default`,
39
+ },
40
+ template,
41
+ options: {
42
+ ...defaultOptions,
43
+ includeNullModifier: false,
44
+ },
45
+ });
46
+ });
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
@@ -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
  }