@stackoverflow/stacks 3.0.0-beta.1 → 3.0.0-beta.2
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.
- package/dist/css/stacks.css +720 -492
- package/dist/css/stacks.min.css +1 -1
- package/lib/atomic/misc.less +1 -1
- package/lib/atomic/typography.less +13 -26
- package/lib/base/body.less +2 -7
- package/lib/components/activity-indicator/activity-indicator.less +1 -2
- package/lib/components/anchor/anchor.less +1 -1
- package/lib/components/award-bling/award-bling.less +4 -3
- package/lib/components/badge/badge.less +6 -6
- package/lib/components/checkbox_radio/checkbox_radio.less +12 -10
- package/lib/components/link/link.less +1 -1
- package/lib/components/link-preview/link-preview.less +1 -1
- package/lib/components/post-summary/post-summary.less +2 -2
- package/lib/components/progress-bar/progress-bar.less +11 -10
- package/lib/components/toggle-switch/toggle-switch.less +4 -2
- package/lib/exports/color-mixins.less +13 -3
- package/lib/exports/color-sets.less +255 -216
- package/lib/exports/constants-helpers.less +4 -1
- package/lib/exports/constants-type.less +25 -25
- package/package.json +1 -1
package/lib/atomic/misc.less
CHANGED
|
@@ -297,7 +297,7 @@
|
|
|
297
297
|
// $ OUTLINE
|
|
298
298
|
// ----------------------------------------------------------------------------
|
|
299
299
|
.outline-none { outline: 0 !important; }
|
|
300
|
-
.outline-ring { outline: solid var(--su-static4) var(--translucent-secondary); }
|
|
300
|
+
.outline-ring { outline: solid var(--su-static4) var(--translucent-secondary); } // TODO SHINE revisit this value once theme colors are finalized
|
|
301
301
|
|
|
302
302
|
.f\:outline-ring {
|
|
303
303
|
&:focus,
|
|
@@ -37,36 +37,22 @@ p {
|
|
|
37
37
|
.fs-body3 { font-size: var(--fs-body3) !important; }
|
|
38
38
|
.fs-body2 { font-size: var(--fs-body2) !important; }
|
|
39
39
|
.fs-body1 { font-size: var(--fs-body1) !important; }
|
|
40
|
-
|
|
41
|
-
.fs-caption,
|
|
42
|
-
.fs-category { font-size: var(--fs-caption) !important; }
|
|
40
|
+
.fs-caption { font-size: var(--fs-caption) !important; }
|
|
43
41
|
.fs-fine { font-size: var(--fs-fine) !important; }
|
|
44
42
|
|
|
45
43
|
#stacks-internals #screen-sm({
|
|
46
|
-
.fs-display4 { font-size:
|
|
47
|
-
.fs-display3 { font-size:
|
|
48
|
-
.fs-display2 { font-size:
|
|
49
|
-
.fs-display1 { font-size:
|
|
50
|
-
.fs-headline2 { font-size:
|
|
51
|
-
.fs-headline1 { font-size:
|
|
52
|
-
.fs-title { font-size:
|
|
53
|
-
.fs-subheading { font-size:
|
|
54
|
-
.fs-body3 { font-size:
|
|
55
|
-
.fs-body2 { font-size:
|
|
44
|
+
.fs-display4 { font-size: calc(var(--fs-display4) * .43) !important; } // 43px
|
|
45
|
+
.fs-display3 { font-size: calc(var(--fs-display3) * .5139) !important; } // ~37px
|
|
46
|
+
.fs-display2 { font-size: calc(var(--fs-display2) * .5862) !important; } // ~34px
|
|
47
|
+
.fs-display1 { font-size: calc(var(--fs-display1) * .6304) !important; } // ~29px
|
|
48
|
+
.fs-headline2 { font-size: calc(var(--fs-headline2) * .7224) !important; } // ~26px
|
|
49
|
+
.fs-headline1 { font-size: calc(var(--fs-headline1) * .8215) !important; } // ~23px
|
|
50
|
+
.fs-title { font-size: calc(var(--fs-title) * .9094) !important; } // ~20px
|
|
51
|
+
.fs-subheading { font-size: calc(var(--fs-subheading) * .8998) !important; } // ~18px
|
|
52
|
+
.fs-body3 { font-size: calc(var(--fs-body3) * .8888) !important; } // ~16px
|
|
53
|
+
.fs-body2 { font-size: calc(var(--fs-body2) * .9374) !important; } // ~15px
|
|
56
54
|
}, @force-selector: true);
|
|
57
55
|
|
|
58
|
-
.fs-category {
|
|
59
|
-
font-weight: 700;
|
|
60
|
-
text-transform: uppercase;
|
|
61
|
-
|
|
62
|
-
// If a top border is desired
|
|
63
|
-
&.has-border {
|
|
64
|
-
width: 100%;
|
|
65
|
-
padding: var(--su4) 0;
|
|
66
|
-
border-top: var(--su-static1) solid var(--bc-medium);
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
|
|
70
56
|
// ============================================================================
|
|
71
57
|
// $ LINE HEIGHTS
|
|
72
58
|
// ----------------------------------------------------------------------------
|
|
@@ -89,7 +75,8 @@ p {
|
|
|
89
75
|
|
|
90
76
|
// -- Font Weight
|
|
91
77
|
.fw-normal { font-weight: 400 !important; }
|
|
92
|
-
.fw-
|
|
78
|
+
.fw-medium { font-weight: 500 !important; }
|
|
79
|
+
.fw-bold { font-weight: 600 !important; }
|
|
93
80
|
|
|
94
81
|
// -- Font Styles
|
|
95
82
|
.fs-normal { font-style: normal !important; }
|
package/lib/base/body.less
CHANGED
|
@@ -24,13 +24,6 @@ body {
|
|
|
24
24
|
line-height: var(--lh-base);
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
#stacks-internals #screen-sm({
|
|
28
|
-
&,
|
|
29
|
-
body {
|
|
30
|
-
font-size: 11px;
|
|
31
|
-
}
|
|
32
|
-
}, @force-selector: true);
|
|
33
|
-
|
|
34
27
|
body {
|
|
35
28
|
box-sizing: border-box;
|
|
36
29
|
min-height: 100%;
|
|
@@ -41,4 +34,6 @@ body {
|
|
|
41
34
|
*:after {
|
|
42
35
|
box-sizing: inherit;
|
|
43
36
|
}
|
|
37
|
+
|
|
38
|
+
// TODO SHINE set max width here
|
|
44
39
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
.s-activity-indicator {
|
|
2
|
-
--_ai-bg: var(--
|
|
2
|
+
--_ai-bg: var(--pink-400);
|
|
3
3
|
--_ai-fc: var(--white);
|
|
4
4
|
--_ai-min-size: var(--su-static16);
|
|
5
5
|
--_ai-p: 0 calc(var(--su-static4) - var(--su-static1));
|
|
@@ -27,7 +27,6 @@
|
|
|
27
27
|
|
|
28
28
|
&&__warning {
|
|
29
29
|
--_ai-bg: var(--yellow-400);
|
|
30
|
-
--_ai-fc: var(--_black-static);
|
|
31
30
|
|
|
32
31
|
.highcontrast-mode({
|
|
33
32
|
--_ai-bg: var(--yellow-500); // needs to be here to override default high contrast
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
&&__default {
|
|
31
|
-
--_an-a-fc: var(--theme-link-color, var(--theme-secondary
|
|
31
|
+
--_an-a-fc: var(--theme-link-color, var(--theme-secondary));
|
|
32
32
|
--_an-a-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
|
|
33
33
|
--_an-a-fc-visited: var(--theme-link-color-visited, var(--purple-500));
|
|
34
34
|
--_an-a-fc-hover-visited: var(--theme-link-color-hover, var(--purple-600));
|
|
@@ -2,16 +2,17 @@
|
|
|
2
2
|
--_ab-before-bg: unset;
|
|
3
3
|
|
|
4
4
|
// VARIANTS
|
|
5
|
+
// TODO SHINE expect a conflict with the award-bling updates. Prefer the changes in https://github.com/StackExchange/Stacks/pull/2013.
|
|
5
6
|
&&__gold {
|
|
6
|
-
--_ab-before-bg: var(--
|
|
7
|
+
--_ab-before-bg: var(--yellow-300);
|
|
7
8
|
}
|
|
8
9
|
|
|
9
10
|
&&__silver {
|
|
10
|
-
--_ab-before-bg: var(--
|
|
11
|
+
--_ab-before-bg: var(--blue-300);
|
|
11
12
|
}
|
|
12
13
|
|
|
13
14
|
&&__bronze {
|
|
14
|
-
--_ab-before-bg: var(--
|
|
15
|
+
--_ab-before-bg: var(--orange-300);
|
|
15
16
|
}
|
|
16
17
|
|
|
17
18
|
// CHILD ELEMENTS
|
|
@@ -62,18 +62,18 @@
|
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
&&__gold {
|
|
65
|
-
--_ba-bc: var(--
|
|
66
|
-
--_ba-bg: var(--
|
|
65
|
+
--_ba-bc: var(--yellow-300);
|
|
66
|
+
--_ba-bg: var(--yellow-100);
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
&&__silver {
|
|
70
|
-
--_ba-bc: var(--
|
|
71
|
-
--_ba-bg: var(--
|
|
70
|
+
--_ba-bc: var(--blue-300);
|
|
71
|
+
--_ba-bg: var(--blue-100);
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
&&__bronze {
|
|
75
|
-
--_ba-bc: var(--
|
|
76
|
-
--_ba-bg: var(--
|
|
75
|
+
--_ba-bc: var(--orange-300);
|
|
76
|
+
--_ba-bg: var(--orange-100);
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
// Number counts
|
|
@@ -48,21 +48,23 @@
|
|
|
48
48
|
// Less variables for check svg fill color
|
|
49
49
|
@ch-bg-image-fill: .set-white()[default];
|
|
50
50
|
@ch-bg-image-fill-dark: .set-white-dark()[default];
|
|
51
|
+
@ch-bg-image-fill-esc: escape("@{ch-bg-image-fill}"); // color escaped for URL usage
|
|
52
|
+
@ch-bg-image-fill-dark-esc: escape("@{ch-bg-image-fill-dark}"); // color escaped for URL usage
|
|
51
53
|
|
|
52
54
|
// CONTEXTUAL STYLES
|
|
53
55
|
.dark-mode({
|
|
54
56
|
&:checked {
|
|
55
|
-
--_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");
|
|
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-esc}'/%3E%3C/svg%3E");
|
|
56
58
|
}
|
|
57
59
|
&:indeterminate {
|
|
58
|
-
--_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");
|
|
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-esc}'/%3E%3C/svg%3E");
|
|
59
61
|
}
|
|
60
62
|
});
|
|
61
63
|
|
|
62
64
|
.highcontrast-dark-mode({
|
|
63
65
|
&:checked, &:indeterminate {
|
|
64
|
-
--_ch-bc: var(--
|
|
65
|
-
--_ch-bg: var(--
|
|
66
|
+
--_ch-bc: var(--black) !important;
|
|
67
|
+
--_ch-bg: var(--black);
|
|
66
68
|
}
|
|
67
69
|
});
|
|
68
70
|
|
|
@@ -75,16 +77,16 @@
|
|
|
75
77
|
|
|
76
78
|
// STATES
|
|
77
79
|
&:checked, &:indeterminate {
|
|
78
|
-
--_ch-bc: var(--theme-secondary
|
|
79
|
-
--_ch-bg: var(--theme-secondary
|
|
80
|
+
--_ch-bc: var(--theme-secondary) !important;
|
|
81
|
+
--_ch-bg: var(--theme-secondary);
|
|
80
82
|
}
|
|
81
83
|
|
|
82
84
|
&:checked {
|
|
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");
|
|
85
|
+
--_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-esc}'/%3E%3C/svg%3E");
|
|
84
86
|
}
|
|
85
87
|
|
|
86
88
|
&:indeterminate {
|
|
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");
|
|
89
|
+
--_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-esc}'/%3E%3C/svg%3E");
|
|
88
90
|
}
|
|
89
91
|
|
|
90
92
|
background-image: var(--_ch-bg-image);
|
|
@@ -100,7 +102,7 @@
|
|
|
100
102
|
// CONTEXTUAL STYLES
|
|
101
103
|
.highcontrast-dark-mode({
|
|
102
104
|
&:checked {
|
|
103
|
-
--_ch-bc: var(--
|
|
105
|
+
--_ch-bc: var(--black);
|
|
104
106
|
outline: var(--su-static1) solid var(--black);
|
|
105
107
|
}
|
|
106
108
|
});
|
|
@@ -108,7 +110,7 @@
|
|
|
108
110
|
// STATES
|
|
109
111
|
&:checked {
|
|
110
112
|
--_ch-baw: 0.30769231em;
|
|
111
|
-
--_ch-bc: var(--theme-secondary
|
|
113
|
+
--_ch-bc: var(--theme-secondary);
|
|
112
114
|
--_ch-bg: var(--white);
|
|
113
115
|
}
|
|
114
116
|
|
|
@@ -26,7 +26,7 @@ a {
|
|
|
26
26
|
|
|
27
27
|
a,
|
|
28
28
|
.s-link {
|
|
29
|
-
--_li-fc: var(--theme-link-color, var(--theme-secondary
|
|
29
|
+
--_li-fc: var(--theme-link-color, var(--theme-secondary));
|
|
30
30
|
--_li-fc-hover: var(--theme-link-color-hover, var(--theme-secondary-500));
|
|
31
31
|
--_li-fc-visited: var(--theme-link-color-visited, var(--purple-500));
|
|
32
32
|
--_li-fc-hover-visited: var(--theme-link-color-visited, var(--purple-600));
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
--_ps-o: unset;
|
|
6
6
|
// Child components
|
|
7
7
|
--_ps-content-excerpt-fc: var(--_ps-state-fc, var(--fc-medium));
|
|
8
|
-
--_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary
|
|
8
|
+
--_ps-content-title-a-fc: var(--_ps-state-fc, var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary))));
|
|
9
9
|
--_ps-content-title-a-fc-hover: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500))));
|
|
10
10
|
--_ps-content-title-a-fc-visited: var(--_ps-state-fc, var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--purple-500))));
|
|
11
11
|
--_ps-content-title-a-fc-hover-visited: var(--_ps-state-fc, var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--purple-600))));
|
|
@@ -119,7 +119,7 @@
|
|
|
119
119
|
&:not(.s-post-summary__deleted):not(.s-post-summary__ignored) {
|
|
120
120
|
--_ps-bg: var(--yellow-100);
|
|
121
121
|
--_ps-stats-fc: var(--black-400);
|
|
122
|
-
--_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary
|
|
122
|
+
--_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary)));
|
|
123
123
|
--_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500)));
|
|
124
124
|
--_ps-content-title-a-fc-visited: var(--theme-post-title-color-visited, var(--theme-link-color-visited, var(--purple-500)));
|
|
125
125
|
--_ps-content-title-a-fc-hover-visited: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--purple-600)));
|
|
@@ -23,14 +23,15 @@
|
|
|
23
23
|
--_pr-bar-bg: var(--orange-400);
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
+
// TODO SPARK I've changed metallic colors here to use their new non-metallic equivalents
|
|
26
27
|
&&__bronze {
|
|
27
|
-
--_pr-bar-bg: var(--
|
|
28
|
-
--_pr-label-bc: var(--
|
|
28
|
+
--_pr-bar-bg: var(--orange-100);
|
|
29
|
+
--_pr-label-bc: var(--orange-400);
|
|
29
30
|
}
|
|
30
31
|
|
|
31
32
|
&&__gold {
|
|
32
|
-
--_pr-bar-bg: var(--
|
|
33
|
-
--_pr-label-bc: var(--
|
|
33
|
+
--_pr-bar-bg: var(--yellow-100);
|
|
34
|
+
--_pr-label-bc: var(--yellow-400);
|
|
34
35
|
}
|
|
35
36
|
|
|
36
37
|
&&__info {
|
|
@@ -38,8 +39,8 @@
|
|
|
38
39
|
}
|
|
39
40
|
|
|
40
41
|
&&__silver {
|
|
41
|
-
--_pr-bar-bg: var(--
|
|
42
|
-
--_pr-label-bc: var(--
|
|
42
|
+
--_pr-bar-bg: var(--blue-100);
|
|
43
|
+
--_pr-label-bc: var(--blue-400);
|
|
43
44
|
}
|
|
44
45
|
|
|
45
46
|
// VARIANTS
|
|
@@ -161,7 +162,7 @@
|
|
|
161
162
|
&.is-active {
|
|
162
163
|
.s-progress {
|
|
163
164
|
&--bar.s-progress--bar__left {
|
|
164
|
-
background: var(--theme-secondary
|
|
165
|
+
background: var(--theme-secondary);
|
|
165
166
|
}
|
|
166
167
|
|
|
167
168
|
&--label {
|
|
@@ -169,8 +170,8 @@
|
|
|
169
170
|
}
|
|
170
171
|
|
|
171
172
|
&--stop {
|
|
172
|
-
background: var(--theme-secondary
|
|
173
|
-
box-shadow: 0 0 0 var(--su-static6) var(--translucent-secondary)
|
|
173
|
+
background: var(--theme-secondary);
|
|
174
|
+
box-shadow: 0 0 0 var(--su-static6) var(--translucent-secondary);// TODO SHINE revisit this value once theme colors are finalized
|
|
174
175
|
}
|
|
175
176
|
}
|
|
176
177
|
}
|
|
@@ -179,7 +180,7 @@
|
|
|
179
180
|
.s-progress {
|
|
180
181
|
&--bar,
|
|
181
182
|
&--stop {
|
|
182
|
-
background: var(--theme-secondary
|
|
183
|
+
background: var(--theme-secondary);
|
|
183
184
|
}
|
|
184
185
|
|
|
185
186
|
&--label {
|
|
@@ -1,14 +1,16 @@
|
|
|
1
1
|
.s-toggle-switch {
|
|
2
2
|
@ts-bg-image-fill: .set-white()[default];
|
|
3
3
|
@ts-bg-image-fill-dark: .set-white-dark()[default];
|
|
4
|
+
@ts-bg-image-fill-esc: escape("@{ts-bg-image-fill}"); // color escaped for URL usage
|
|
5
|
+
@ts-bg-image-fill-dark-esc: escape("@{ts-bg-image-fill-dark}"); // color escaped for URL usage
|
|
4
6
|
--_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");
|
|
7
|
+
--_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-esc}'/%3e%3c/svg%3e");
|
|
6
8
|
--_ts-bg-ps: left center;
|
|
7
9
|
--_ts-multiple-bg: unset;
|
|
8
10
|
--_ts-multiple-fc: var(--black-400);
|
|
9
11
|
|
|
10
12
|
.dark-mode({
|
|
11
|
-
--_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
|
+
--_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-esc}'/%3e%3c/svg%3e");
|
|
12
14
|
});
|
|
13
15
|
|
|
14
16
|
fieldset[disabled] &,
|
|
@@ -261,19 +261,29 @@
|
|
|
261
261
|
|
|
262
262
|
each(@tiers, .(@tier, @k, @i) {
|
|
263
263
|
@stops: 100, 200, 300, 400, 500, 600;
|
|
264
|
-
@fallbackColor: if(@tier = primary, orange,
|
|
264
|
+
@fallbackColor: if(@tier = primary, orange, black);
|
|
265
265
|
@baseThemeVar: ~"--theme-@{tier}";
|
|
266
266
|
@customThemeVar: if(@mode = light, ~"@{baseThemeVar}-custom", ~"--theme-dark-@{tier}-custom");
|
|
267
267
|
|
|
268
268
|
& when (@mode = light), (@mode = dark) {
|
|
269
|
-
|
|
269
|
+
& when (@tier = primary) {
|
|
270
|
+
@{baseThemeVar}: ~"var(@{customThemeVar}, var(--@{fallbackColor}-400))";
|
|
271
|
+
}
|
|
272
|
+
& when (@tier = secondary) {
|
|
273
|
+
@{baseThemeVar}: ~"var(@{customThemeVar}, var(--@{fallbackColor}))";
|
|
274
|
+
}
|
|
270
275
|
each(@stops, .(@stop, @kStop, @iStop) {
|
|
271
276
|
@{baseThemeVar}-@{stop}: ~"var(@{customThemeVar}-@{stop}, var(--@{fallbackColor}-@{stop}))";
|
|
272
277
|
});
|
|
273
278
|
}
|
|
274
279
|
|
|
275
280
|
& when (@mode = light-highcontrast), (@mode = dark-highcontrast) {
|
|
276
|
-
@
|
|
281
|
+
& when (@tier = primary) {
|
|
282
|
+
@{baseThemeVar}: ~"var(--@{fallbackColor}-400)";
|
|
283
|
+
}
|
|
284
|
+
& when (@tier = secondary) {
|
|
285
|
+
@{baseThemeVar}: ~"var(--@{fallbackColor})";
|
|
286
|
+
}
|
|
277
287
|
|
|
278
288
|
each(@stops, .(@stop, @kStop, @iStop) {
|
|
279
289
|
@{baseThemeVar}-@{stop}: ~"var(--@{fallbackColor}-@{stop})";
|