@stackoverflow/stacks 2.1.1 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/stacks.css +64 -25
- package/dist/css/stacks.min.css +1 -1
- package/lib/atomic/__snapshots__/misc.less.test.ts.snap +893 -0
- package/lib/atomic/misc.less +30 -0
- package/lib/atomic/misc.less.test.ts +12 -0
- package/lib/components/badge/badge.a11y.test.ts +59 -18
- package/lib/components/badge/badge.less +16 -1
- package/lib/components/badge/badge.visual.test.ts +44 -16
- package/lib/exports/__snapshots__/color.less.test.ts.snap +24 -24
- package/lib/exports/color-sets.less +12 -12
- package/package.json +3 -3
package/lib/atomic/misc.less
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
@import (reference) "../base/internal.less";
|
|
2
|
+
@import (reference) "../exports/color-mixins.less";
|
|
3
|
+
@import (reference) "../exports/constants-helpers.less";
|
|
4
|
+
@import (reference) "../exports/mixins.less";
|
|
5
|
+
|
|
1
6
|
//
|
|
2
7
|
// STACK OVERFLOW
|
|
3
8
|
// UTILITIES
|
|
@@ -78,6 +83,31 @@
|
|
|
78
83
|
background-image: url("data:image/svg+xml;,%3Csvg width='574' height='60' viewBox='0 0 574 60' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect opacity='0.8' x='27.1224' y='20.0458' width='5' height='13' transform='rotate(-139 27.1224 20.0458)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='118.478' y='7.00201' width='5' height='13' transform='rotate(-38.8114 118.478 7.00201)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='504.616' y='25.4479' width='5' height='13' transform='rotate(-60.2734 504.616 25.4479)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='538.983' y='45.555' width='5' height='13' transform='rotate(16.7826 538.983 45.555)' fill='%232A2F6A'/%3E%3Crect opacity='0.3' x='470.322' y='2.63625' width='5' height='13' transform='rotate(11.295 470.322 2.63625)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='190.295' y='4.58138' width='5' height='13' transform='rotate(27.5954 190.295 4.58138)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='234.303' y='16.3233' width='5' height='13' transform='rotate(-41.8233 234.303 16.3233)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='369.702' y='40.9875' width='5' height='13' transform='rotate(-56.419 369.702 40.9875)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='402.121' y='31.0848' width='5' height='13' transform='rotate(-17.9234 402.121 31.0848)' fill='%23F23B14'/%3E%3Crect opacity='0.6' x='200.316' y='31.9328' width='5' height='13' transform='rotate(-15.8896 200.316 31.9328)' fill='%232A2F6A'/%3E%3Crect opacity='0.6' x='69.6745' y='23.4725' width='6' height='10' transform='rotate(70.0266 69.6745 23.4725)' fill='%2365BB5C'/%3E%3Crect opacity='0.6' x='291.945' y='7.16931' width='6' height='10' transform='rotate(30.4258 291.945 7.16931)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='33.7754' y='38.2208' width='6' height='10' transform='rotate(38.6056 33.7754 38.2208)' fill='%23FBBA23'/%3E%3Crect opacity='0.8' x='109.752' y='31.1743' width='6' height='10' transform='rotate(28.5296 109.752 31.1743)' fill='%2333AAFF'/%3E%3Crect opacity='0.3' x='278.081' y='37.8695' width='6' height='10' transform='rotate(-26.5651 278.081 37.8695)' fill='%23F23B14'/%3E%3Crect opacity='0.8' x='416.294' y='11.5573' width='6' height='10' transform='rotate(-22.8498 416.294 11.5573)' fill='%23FBBA23'/%3E%3Crect opacity='0.3' x='354.667' y='9.32341' width='6' height='10' transform='rotate(17.7506 354.667 9.32341)' fill='%232A2F6A'/%3E%3Crect opacity='0.8' x='532.404' y='16.6372' width='6' height='10' transform='rotate(-75.3432 532.404 16.6372)' fill='%23FBBA23'/%3E%3Crect opacity='0.6' x='460.463' y='39.3557' width='6' height='10' transform='rotate(45.4982 460.463 39.3557)' fill='%2365BB5C'/%3E%3C/svg%3E");
|
|
79
84
|
}
|
|
80
85
|
|
|
86
|
+
// Focus styles
|
|
87
|
+
.focus,
|
|
88
|
+
.f\:focus:focus,
|
|
89
|
+
.f\:focus:focus-within {
|
|
90
|
+
.focus-styles();
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.focus-inset,
|
|
94
|
+
.f\:focus-inset:focus,
|
|
95
|
+
.f\:focus-inset:focus-within {
|
|
96
|
+
.focus-styles(true);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.focus-bordered,
|
|
100
|
+
.f\:focus-bordered:focus,
|
|
101
|
+
.f\:focus-bordered:focus-within {
|
|
102
|
+
.focus-styles(false, true);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.focus-inset-bordered,
|
|
106
|
+
.f\:focus-inset-bordered:focus,
|
|
107
|
+
.f\:focus-inset-bordered:focus-within {
|
|
108
|
+
.focus-styles(true, true);
|
|
109
|
+
}
|
|
110
|
+
|
|
81
111
|
// ============================================================================
|
|
82
112
|
// $ OBJECT-FIT / OBJECT-POSITION
|
|
83
113
|
// ----------------------------------------------------------------------------
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { describe, it, expect } from "vitest";
|
|
2
|
+
import { renderLess } from "../test/less-test-utils";
|
|
3
|
+
|
|
4
|
+
describe("atomic: misc", () => {
|
|
5
|
+
it("should output all atomic css classes", async () => {
|
|
6
|
+
const css = await renderLess(`
|
|
7
|
+
@import "./lib/atomic/misc.less";
|
|
8
|
+
`);
|
|
9
|
+
|
|
10
|
+
expect(css).toMatchSnapshot();
|
|
11
|
+
});
|
|
12
|
+
});
|
|
@@ -1,28 +1,38 @@
|
|
|
1
1
|
import { runA11yTests } from "../../test/a11y-test-utils";
|
|
2
|
-
|
|
2
|
+
import { IconEyeSm } from "@stackoverflow/stacks-icons/icons";
|
|
3
3
|
import "../../index";
|
|
4
4
|
|
|
5
5
|
const variants = {
|
|
6
6
|
blings: ["gold", "silver", "bronze"],
|
|
7
7
|
numbers: ["answered", "bounty", "important", "rep", "rep-down", "votes"],
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
other: ["info", "warning"],
|
|
11
|
-
},
|
|
8
|
+
filled: ["danger", "muted"],
|
|
9
|
+
states: ["danger", "muted", "info", "new", "warning"],
|
|
12
10
|
users: ["admin", "moderator", "staff"],
|
|
13
11
|
};
|
|
14
12
|
|
|
15
13
|
describe("badge", () => {
|
|
16
|
-
//
|
|
14
|
+
// Base badge
|
|
15
|
+
runA11yTests({
|
|
16
|
+
baseClass: "s-badge",
|
|
17
|
+
children: {
|
|
18
|
+
default: `base badge`,
|
|
19
|
+
},
|
|
20
|
+
tag: "span",
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
// Award badges
|
|
17
24
|
variants.blings.map((bling) => {
|
|
18
25
|
runA11yTests({
|
|
19
26
|
baseClass: "s-badge",
|
|
20
27
|
variants: [bling],
|
|
21
28
|
children: {
|
|
22
29
|
default: `<span class="s-award-bling s-award-bling__${bling}">
|
|
23
|
-
|
|
30
|
+
with bling
|
|
24
31
|
</span>`,
|
|
25
32
|
},
|
|
33
|
+
options: {
|
|
34
|
+
includeNullVariant: false,
|
|
35
|
+
},
|
|
26
36
|
tag: "span",
|
|
27
37
|
});
|
|
28
38
|
});
|
|
@@ -34,22 +44,49 @@ describe("badge", () => {
|
|
|
34
44
|
children: {
|
|
35
45
|
default: "123",
|
|
36
46
|
},
|
|
47
|
+
options: {
|
|
48
|
+
includeNullVariant: false,
|
|
49
|
+
},
|
|
50
|
+
tag: "span",
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
// State badges
|
|
54
|
+
runA11yTests({
|
|
55
|
+
baseClass: "s-badge",
|
|
56
|
+
variants: variants.states,
|
|
57
|
+
children: {
|
|
58
|
+
default: `badge`,
|
|
59
|
+
},
|
|
60
|
+
tag: "span",
|
|
61
|
+
skippedTestids: ["s-badge-dark-new"],
|
|
62
|
+
});
|
|
63
|
+
|
|
64
|
+
// State badges w/ filled modifier
|
|
65
|
+
runA11yTests({
|
|
66
|
+
baseClass: "s-badge",
|
|
67
|
+
variants: variants.filled,
|
|
68
|
+
modifiers: {
|
|
69
|
+
primary: ["filled"],
|
|
70
|
+
},
|
|
71
|
+
children: {
|
|
72
|
+
default: `filled badge`,
|
|
73
|
+
},
|
|
37
74
|
options: {
|
|
38
75
|
includeNullModifier: false,
|
|
39
76
|
},
|
|
40
77
|
tag: "span",
|
|
41
78
|
});
|
|
42
79
|
|
|
43
|
-
//
|
|
80
|
+
// State badges w/ filled modifier and icon
|
|
44
81
|
runA11yTests({
|
|
45
82
|
baseClass: "s-badge",
|
|
46
|
-
variants:
|
|
83
|
+
variants: variants.filled,
|
|
47
84
|
modifiers: {
|
|
48
|
-
primary: ["
|
|
85
|
+
primary: ["filled"],
|
|
86
|
+
secondary: ["icon"],
|
|
49
87
|
},
|
|
50
88
|
children: {
|
|
51
|
-
default:
|
|
52
|
-
// icon: Icons.IconEyeSm, // TODO fix the icon imports
|
|
89
|
+
default: `${IconEyeSm} icon badge`,
|
|
53
90
|
},
|
|
54
91
|
options: {
|
|
55
92
|
includeNullModifier: false,
|
|
@@ -57,20 +94,18 @@ describe("badge", () => {
|
|
|
57
94
|
tag: "span",
|
|
58
95
|
});
|
|
59
96
|
|
|
60
|
-
//
|
|
97
|
+
// State badges w/ icon
|
|
61
98
|
runA11yTests({
|
|
62
99
|
baseClass: "s-badge",
|
|
63
|
-
variants: variants.states.
|
|
100
|
+
variants: variants.states.filter((state) => state !== "new"),
|
|
64
101
|
modifiers: {
|
|
65
102
|
primary: ["icon"],
|
|
66
103
|
},
|
|
67
104
|
children: {
|
|
68
|
-
default:
|
|
69
|
-
// icon: Icons.IconEyeOffSm, // TODO fix the icon imports
|
|
105
|
+
default: `${IconEyeSm} icon badge`,
|
|
70
106
|
},
|
|
71
107
|
options: {
|
|
72
108
|
includeNullModifier: false,
|
|
73
|
-
includeNullVariant: false,
|
|
74
109
|
},
|
|
75
110
|
tag: "span",
|
|
76
111
|
});
|
|
@@ -83,7 +118,10 @@ describe("badge", () => {
|
|
|
83
118
|
primary: ["xs", "sm"],
|
|
84
119
|
},
|
|
85
120
|
children: {
|
|
86
|
-
default: "user",
|
|
121
|
+
default: "user badge",
|
|
122
|
+
},
|
|
123
|
+
options: {
|
|
124
|
+
includeNullVariant: false,
|
|
87
125
|
},
|
|
88
126
|
tag: "span",
|
|
89
127
|
});
|
|
@@ -97,6 +135,9 @@ describe("badge", () => {
|
|
|
97
135
|
children: {
|
|
98
136
|
default: "size badge",
|
|
99
137
|
},
|
|
138
|
+
options: {
|
|
139
|
+
includeNullModifier: false,
|
|
140
|
+
},
|
|
100
141
|
tag: "span",
|
|
101
142
|
});
|
|
102
143
|
});
|
|
@@ -4,10 +4,12 @@
|
|
|
4
4
|
--_ba-bg: var(--black-150);
|
|
5
5
|
--_ba-fc: var(--black-500);
|
|
6
6
|
--_ba-fs: var(--fs-caption);
|
|
7
|
+
--_ba-fw: normal;
|
|
7
8
|
--_ba-g: 0.3em;
|
|
8
9
|
--_ba-lh: 2;
|
|
9
10
|
--_ba-px: var(--su6);
|
|
10
11
|
--_ba-py: 0;
|
|
12
|
+
--_ba-tt: unset;
|
|
11
13
|
--_ba-wmn: 0;
|
|
12
14
|
|
|
13
15
|
// CONTEXTUAL STYLES
|
|
@@ -26,6 +28,10 @@
|
|
|
26
28
|
&__staff {
|
|
27
29
|
--_ba-bc: currentColor;
|
|
28
30
|
}
|
|
31
|
+
|
|
32
|
+
&__new {
|
|
33
|
+
--_ba-fc: var(--purple-600);
|
|
34
|
+
}
|
|
29
35
|
});
|
|
30
36
|
|
|
31
37
|
// MODIFIERS
|
|
@@ -208,6 +214,14 @@
|
|
|
208
214
|
}
|
|
209
215
|
}
|
|
210
216
|
|
|
217
|
+
&&__new {
|
|
218
|
+
--_ba-bc: var(--_ba-bg);
|
|
219
|
+
--_ba-bg: var(--purple-100);
|
|
220
|
+
--_ba-fc: var(--purple-400);
|
|
221
|
+
--_ba-fw: bold;
|
|
222
|
+
--_ba-tt: uppercase;
|
|
223
|
+
}
|
|
224
|
+
|
|
211
225
|
// CHILD ELEMENTS
|
|
212
226
|
&--image, // Included with no base class to account for usage in .s-progress__badge
|
|
213
227
|
& &--image {
|
|
@@ -228,14 +242,15 @@
|
|
|
228
242
|
color: var(--_ba-fc);
|
|
229
243
|
font-size: var(--_ba-fs);
|
|
230
244
|
gap: var(--_ba-g);
|
|
245
|
+
font-weight: var(--_ba-fw);
|
|
231
246
|
line-height: var(--_ba-lh);
|
|
232
247
|
min-width: var(--_ba-wmn);
|
|
233
248
|
padding: var(--_ba-py) var(--_ba-px);
|
|
249
|
+
text-transform: var(--_ba-tt);
|
|
234
250
|
|
|
235
251
|
align-items: center;
|
|
236
252
|
border-radius: var(--br-sm);
|
|
237
253
|
display: inline-flex;
|
|
238
|
-
font-weight: normal;
|
|
239
254
|
justify-content: center;
|
|
240
255
|
text-decoration: none;
|
|
241
256
|
vertical-align: middle;
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
import { runVisualTests } from "../../test/visual-test-utils";
|
|
2
|
-
|
|
2
|
+
import { IconEyeSm } from "@stackoverflow/stacks-icons/icons";
|
|
3
3
|
import "../../index";
|
|
4
4
|
import { html } from "@open-wc/testing";
|
|
5
5
|
|
|
6
6
|
const variants = {
|
|
7
7
|
blings: ["gold", "silver", "bronze"],
|
|
8
8
|
numbers: ["answered", "bounty", "important", "rep", "rep-down", "votes"],
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
other: ["info", "warning"],
|
|
12
|
-
},
|
|
9
|
+
filled: ["danger", "muted"],
|
|
10
|
+
states: ["danger", "muted", "info", "new", "warning"],
|
|
13
11
|
users: ["admin", "moderator", "staff"],
|
|
14
12
|
};
|
|
15
13
|
|
|
@@ -46,7 +44,6 @@ describe("badge", () => {
|
|
|
46
44
|
},
|
|
47
45
|
options: {
|
|
48
46
|
includeNullVariant: false,
|
|
49
|
-
includeNullModifier: false,
|
|
50
47
|
},
|
|
51
48
|
tag: "span",
|
|
52
49
|
template,
|
|
@@ -62,22 +59,52 @@ describe("badge", () => {
|
|
|
62
59
|
},
|
|
63
60
|
options: {
|
|
64
61
|
includeNullVariant: false,
|
|
62
|
+
},
|
|
63
|
+
tag: "span",
|
|
64
|
+
template,
|
|
65
|
+
});
|
|
66
|
+
|
|
67
|
+
// State badges
|
|
68
|
+
runVisualTests({
|
|
69
|
+
baseClass: "s-badge",
|
|
70
|
+
variants: variants.states,
|
|
71
|
+
children: {
|
|
72
|
+
default: `state badge`,
|
|
73
|
+
},
|
|
74
|
+
tag: "span",
|
|
75
|
+
options: {
|
|
76
|
+
includeNullVariant: false,
|
|
77
|
+
},
|
|
78
|
+
template,
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
// State badges w/ filled modifier
|
|
82
|
+
runVisualTests({
|
|
83
|
+
baseClass: "s-badge",
|
|
84
|
+
variants: variants.filled,
|
|
85
|
+
modifiers: {
|
|
86
|
+
primary: ["filled"],
|
|
87
|
+
},
|
|
88
|
+
children: {
|
|
89
|
+
default: `filled badge`,
|
|
90
|
+
},
|
|
91
|
+
options: {
|
|
65
92
|
includeNullModifier: false,
|
|
66
93
|
},
|
|
67
94
|
tag: "span",
|
|
68
95
|
template,
|
|
69
96
|
});
|
|
70
97
|
|
|
71
|
-
//
|
|
98
|
+
// State badges w/ filled modifier and icon
|
|
72
99
|
runVisualTests({
|
|
73
100
|
baseClass: "s-badge",
|
|
74
|
-
variants:
|
|
101
|
+
variants: variants.filled,
|
|
75
102
|
modifiers: {
|
|
76
|
-
primary: ["
|
|
103
|
+
primary: ["filled"],
|
|
104
|
+
secondary: ["icon"],
|
|
77
105
|
},
|
|
78
106
|
children: {
|
|
79
|
-
default:
|
|
80
|
-
// icon: Icons.IconEyeSm, // TODO fix the icon imports
|
|
107
|
+
default: `${IconEyeSm} icon badge`,
|
|
81
108
|
},
|
|
82
109
|
options: {
|
|
83
110
|
includeNullModifier: false,
|
|
@@ -86,17 +113,18 @@ describe("badge", () => {
|
|
|
86
113
|
template,
|
|
87
114
|
});
|
|
88
115
|
|
|
89
|
-
//
|
|
116
|
+
// State badges w/ icon
|
|
90
117
|
runVisualTests({
|
|
91
118
|
baseClass: "s-badge",
|
|
92
|
-
variants: variants.states.
|
|
119
|
+
variants: variants.states.filter((state) => state !== "new"),
|
|
120
|
+
modifiers: {
|
|
121
|
+
primary: ["icon"],
|
|
122
|
+
},
|
|
93
123
|
children: {
|
|
94
|
-
default:
|
|
95
|
-
// icon: Icons.IconEyeOffSm, // TODO fix the icon imports
|
|
124
|
+
default: `${IconEyeSm} icon badge`,
|
|
96
125
|
},
|
|
97
126
|
options: {
|
|
98
127
|
includeNullModifier: false,
|
|
99
|
-
includeNullVariant: false,
|
|
100
128
|
},
|
|
101
129
|
tag: "span",
|
|
102
130
|
template,
|
|
@@ -249,12 +249,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
|
|
|
249
249
|
--yellow-400: hsl(43, 90%, 75%);
|
|
250
250
|
--yellow-500: hsl(43, 90%, 82%);
|
|
251
251
|
--yellow-600: hsl(43, 90%, 91%);
|
|
252
|
-
--purple-100: hsl(237,
|
|
253
|
-
--purple-200: hsl(237,
|
|
254
|
-
--purple-300: hsl(237,
|
|
255
|
-
--purple-400: hsl(237,
|
|
256
|
-
--purple-500: hsl(237,
|
|
257
|
-
--purple-600: hsl(237,
|
|
252
|
+
--purple-100: hsl(237, 26%, 23%);
|
|
253
|
+
--purple-200: hsl(237, 26%, 44%);
|
|
254
|
+
--purple-300: hsl(237, 26%, 56%);
|
|
255
|
+
--purple-400: hsl(237, 98%, 87%);
|
|
256
|
+
--purple-500: hsl(237, 98%, 92%);
|
|
257
|
+
--purple-600: hsl(237, 98%, 96%);
|
|
258
258
|
--gold-100: hsl(45, 29%, 24%);
|
|
259
259
|
--gold-200: hsl(45, 47%, 37%);
|
|
260
260
|
--gold-300: hsl(45, 92%, 62%);
|
|
@@ -382,12 +382,12 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
|
|
|
382
382
|
--yellow-400: hsl(43, 90%, 75%);
|
|
383
383
|
--yellow-500: hsl(43, 90%, 82%);
|
|
384
384
|
--yellow-600: hsl(43, 90%, 91%);
|
|
385
|
-
--purple-100: hsl(237,
|
|
386
|
-
--purple-200: hsl(237,
|
|
387
|
-
--purple-300: hsl(237,
|
|
388
|
-
--purple-400: hsl(237,
|
|
389
|
-
--purple-500: hsl(237,
|
|
390
|
-
--purple-600: hsl(237,
|
|
385
|
+
--purple-100: hsl(237, 26%, 23%);
|
|
386
|
+
--purple-200: hsl(237, 26%, 44%);
|
|
387
|
+
--purple-300: hsl(237, 26%, 56%);
|
|
388
|
+
--purple-400: hsl(237, 98%, 87%);
|
|
389
|
+
--purple-500: hsl(237, 98%, 92%);
|
|
390
|
+
--purple-600: hsl(237, 98%, 96%);
|
|
391
391
|
--gold-100: hsl(45, 29%, 24%);
|
|
392
392
|
--gold-200: hsl(45, 47%, 37%);
|
|
393
393
|
--gold-300: hsl(45, 92%, 62%);
|
|
@@ -630,12 +630,12 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
|
|
|
630
630
|
--yellow-400: hsl(43, 75%, 75%);
|
|
631
631
|
--yellow-500: hsl(48, 74%, 91%);
|
|
632
632
|
--yellow-600: hsl(44, 74%, 91%);
|
|
633
|
-
--purple-100: hsl(237,
|
|
634
|
-
--purple-200: hsl(237,
|
|
635
|
-
--purple-300: hsl(237,
|
|
636
|
-
--purple-400: hsl(237,
|
|
637
|
-
--purple-500: hsl(237,
|
|
638
|
-
--purple-600: hsl(237,
|
|
633
|
+
--purple-100: hsl(237, 26%, 23%);
|
|
634
|
+
--purple-200: hsl(237, 26%, 23%);
|
|
635
|
+
--purple-300: hsl(237, 98%, 87%);
|
|
636
|
+
--purple-400: hsl(237, 98%, 87%);
|
|
637
|
+
--purple-500: hsl(237, 98%, 96%);
|
|
638
|
+
--purple-600: hsl(237, 98%, 96%);
|
|
639
639
|
--gold-100: hsl(45, 22%, 25%);
|
|
640
640
|
--gold-200: hsl(45, 22%, 25%);
|
|
641
641
|
--gold-300: hsl(45, 92%, 62%);
|
|
@@ -745,12 +745,12 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
|
|
|
745
745
|
--yellow-400: hsl(43, 75%, 75%);
|
|
746
746
|
--yellow-500: hsl(48, 74%, 91%);
|
|
747
747
|
--yellow-600: hsl(44, 74%, 91%);
|
|
748
|
-
--purple-100: hsl(237,
|
|
749
|
-
--purple-200: hsl(237,
|
|
750
|
-
--purple-300: hsl(237,
|
|
751
|
-
--purple-400: hsl(237,
|
|
752
|
-
--purple-500: hsl(237,
|
|
753
|
-
--purple-600: hsl(237,
|
|
748
|
+
--purple-100: hsl(237, 26%, 23%);
|
|
749
|
+
--purple-200: hsl(237, 26%, 23%);
|
|
750
|
+
--purple-300: hsl(237, 98%, 87%);
|
|
751
|
+
--purple-400: hsl(237, 98%, 87%);
|
|
752
|
+
--purple-500: hsl(237, 98%, 96%);
|
|
753
|
+
--purple-600: hsl(237, 98%, 96%);
|
|
754
754
|
--gold-100: hsl(45, 22%, 25%);
|
|
755
755
|
--gold-200: hsl(45, 22%, 25%);
|
|
756
756
|
--gold-300: hsl(45, 92%, 62%);
|
|
@@ -264,12 +264,12 @@
|
|
|
264
264
|
600: hsl(237, 50%, 32%);
|
|
265
265
|
}
|
|
266
266
|
.set-purple-dark() {
|
|
267
|
-
100: hsl(237,
|
|
268
|
-
200: hsl(237,
|
|
269
|
-
300: hsl(237,
|
|
270
|
-
400: hsl(237,
|
|
271
|
-
500: hsl(237,
|
|
272
|
-
600: hsl(237,
|
|
267
|
+
100: hsl(237, 26%, 23%);
|
|
268
|
+
200: hsl(237, 26%, 44%);
|
|
269
|
+
300: hsl(237, 26%, 56%);
|
|
270
|
+
400: hsl(237, 98%, 87%);
|
|
271
|
+
500: hsl(237, 98%, 92%);
|
|
272
|
+
600: hsl(237, 98%, 96%);
|
|
273
273
|
}
|
|
274
274
|
.set-purple-hc() {
|
|
275
275
|
100: hsl(237, 83%, 98%);
|
|
@@ -280,12 +280,12 @@
|
|
|
280
280
|
600: hsl(237, 50%, 32%);
|
|
281
281
|
}
|
|
282
282
|
.set-purple-hc-dark() {
|
|
283
|
-
100: hsl(237,
|
|
284
|
-
200: hsl(237,
|
|
285
|
-
300: hsl(237,
|
|
286
|
-
400: hsl(237,
|
|
287
|
-
500: hsl(237,
|
|
288
|
-
600: hsl(237,
|
|
283
|
+
100: hsl(237, 26%, 23%);
|
|
284
|
+
200: hsl(237, 26%, 23%);
|
|
285
|
+
300: hsl(237, 98%, 87%);
|
|
286
|
+
400: hsl(237, 98%, 87%);
|
|
287
|
+
500: hsl(237, 98%, 96%);
|
|
288
|
+
600: hsl(237, 98%, 96%);
|
|
289
289
|
}
|
|
290
290
|
|
|
291
291
|
// gold
|
package/package.json
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/StackExchange/Stacks.git"
|
|
7
7
|
},
|
|
8
|
-
"version": "2.
|
|
8
|
+
"version": "2.2.0",
|
|
9
9
|
"files": [
|
|
10
10
|
"dist",
|
|
11
11
|
"lib"
|
|
@@ -47,8 +47,8 @@
|
|
|
47
47
|
"@open-wc/testing": "^4.0.0",
|
|
48
48
|
"@rollup/plugin-commonjs": "^25.0.7",
|
|
49
49
|
"@rollup/plugin-replace": "^5.0.5",
|
|
50
|
-
"@stackoverflow/stacks-editor": "^0.10.
|
|
51
|
-
"@stackoverflow/stacks-icons": "^6.0.
|
|
50
|
+
"@stackoverflow/stacks-editor": "^0.10.1",
|
|
51
|
+
"@stackoverflow/stacks-icons": "^6.0.1",
|
|
52
52
|
"@testing-library/dom": "^9.3.4",
|
|
53
53
|
"@testing-library/user-event": "^14.5.2",
|
|
54
54
|
"@types/cssbeautify": "^0.3.5",
|