@stackoverflow/stacks 2.0.0 → 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.
- package/dist/css/stacks.css +78 -78
- package/dist/css/stacks.min.css +1 -1
- package/lib/components/input-fill/input-fill.a11y.test.ts +22 -0
- package/lib/components/input-fill/input-fill.visual.test.ts +22 -0
- package/lib/components/input-message/input-message.a11y.test.ts +58 -0
- package/lib/components/input-message/input-message.visual.test.ts +59 -0
- package/lib/components/tag/tag.less +24 -16
- package/lib/exports/__snapshots__/color.less.test.ts.snap +62 -62
- package/lib/exports/color-sets.less +35 -35
- package/package.json +5 -5
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { html } from "@open-wc/testing";
|
|
2
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
3
|
+
import "../../index";
|
|
4
|
+
|
|
5
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
6
|
+
const template = ({ component, testid }: any) => html`
|
|
7
|
+
<div data-testid="${testid}" class="p8 ws1">${component}</div>
|
|
8
|
+
`;
|
|
9
|
+
|
|
10
|
+
describe("input-fill", () => {
|
|
11
|
+
runComponentTests({
|
|
12
|
+
type: "a11y",
|
|
13
|
+
baseClass: `s-input-fill`,
|
|
14
|
+
modifiers: {
|
|
15
|
+
global: ["order-first", "order-last"],
|
|
16
|
+
},
|
|
17
|
+
children: {
|
|
18
|
+
default: "input fill",
|
|
19
|
+
},
|
|
20
|
+
template,
|
|
21
|
+
});
|
|
22
|
+
});
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { html } from "@open-wc/testing";
|
|
2
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
3
|
+
import "../../index";
|
|
4
|
+
|
|
5
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
6
|
+
const template = ({ component, testid }: any) => html`
|
|
7
|
+
<div data-testid="${testid}" class="p8 ws1">${component}</div>
|
|
8
|
+
`;
|
|
9
|
+
|
|
10
|
+
describe("input-fill", () => {
|
|
11
|
+
runComponentTests({
|
|
12
|
+
type: "visual",
|
|
13
|
+
baseClass: `s-input-fill`,
|
|
14
|
+
modifiers: {
|
|
15
|
+
global: ["order-first", "order-last"],
|
|
16
|
+
},
|
|
17
|
+
children: {
|
|
18
|
+
default: "input fill",
|
|
19
|
+
},
|
|
20
|
+
template,
|
|
21
|
+
});
|
|
22
|
+
});
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { html } from "@open-wc/testing";
|
|
2
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
3
|
+
import "../../index";
|
|
4
|
+
|
|
5
|
+
const states = [
|
|
6
|
+
{
|
|
7
|
+
class: "",
|
|
8
|
+
children:
|
|
9
|
+
'This is a stateless input message. <a href="">Learn more</a>.',
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
class: "has-error",
|
|
13
|
+
children: 'This is an error input message. <a href="">Learn more</a>.',
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
class: "has-success",
|
|
17
|
+
children: 'This is a success input message. <a href="">Learn more</a>.',
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
class: "has-warning",
|
|
21
|
+
children: 'This is a warning input message. <a href="">Learn more</a>.',
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
class: "disabled",
|
|
25
|
+
children: "This is a disabled input message.",
|
|
26
|
+
},
|
|
27
|
+
];
|
|
28
|
+
|
|
29
|
+
describe("input-message", () => {
|
|
30
|
+
states.forEach((state) => {
|
|
31
|
+
runComponentTests({
|
|
32
|
+
type: "a11y",
|
|
33
|
+
baseClass: `s-input-message ${
|
|
34
|
+
state.class ? `state-${state.class}` : ""
|
|
35
|
+
}`,
|
|
36
|
+
children: {
|
|
37
|
+
default: state.children,
|
|
38
|
+
},
|
|
39
|
+
template: ({ component, testid }) => {
|
|
40
|
+
const isDisabled = state.class === "disabled";
|
|
41
|
+
const stateClass =
|
|
42
|
+
state.class && state.class !== "disabled"
|
|
43
|
+
? state.class
|
|
44
|
+
: "";
|
|
45
|
+
|
|
46
|
+
return html`
|
|
47
|
+
<fieldset
|
|
48
|
+
data-testid="${testid}"
|
|
49
|
+
class="${stateClass}"
|
|
50
|
+
?disabled="${isDisabled}"
|
|
51
|
+
>
|
|
52
|
+
${component}
|
|
53
|
+
</fieldset>
|
|
54
|
+
`;
|
|
55
|
+
},
|
|
56
|
+
});
|
|
57
|
+
});
|
|
58
|
+
});
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { html } from "@open-wc/testing";
|
|
2
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
3
|
+
import "../../index";
|
|
4
|
+
|
|
5
|
+
const states = [
|
|
6
|
+
{
|
|
7
|
+
class: "",
|
|
8
|
+
children:
|
|
9
|
+
'This is a stateless input message. <a href="">Learn more</a>.',
|
|
10
|
+
},
|
|
11
|
+
{
|
|
12
|
+
class: "has-error",
|
|
13
|
+
children: 'This is an error input message. <a href="">Learn more</a>.',
|
|
14
|
+
},
|
|
15
|
+
{
|
|
16
|
+
class: "has-success",
|
|
17
|
+
children: 'This is a success input message. <a href="">Learn more</a>.',
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
class: "has-warning",
|
|
21
|
+
children: 'This is a warning input message. <a href="">Learn more</a>.',
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
class: "disabled",
|
|
25
|
+
children:
|
|
26
|
+
'This is a disabled input message. <a href="">Learn more</a>.',
|
|
27
|
+
},
|
|
28
|
+
];
|
|
29
|
+
|
|
30
|
+
describe("input-message", () => {
|
|
31
|
+
states.forEach((state) => {
|
|
32
|
+
runComponentTests({
|
|
33
|
+
type: "visual",
|
|
34
|
+
baseClass: `s-input-message ${
|
|
35
|
+
state.class ? `state-${state.class}` : ""
|
|
36
|
+
}`,
|
|
37
|
+
children: {
|
|
38
|
+
default: state.children,
|
|
39
|
+
},
|
|
40
|
+
template: ({ component, testid }) => {
|
|
41
|
+
const isDisabled = state.class === "disabled";
|
|
42
|
+
const stateClass =
|
|
43
|
+
state.class && state.class !== "disabled"
|
|
44
|
+
? state.class
|
|
45
|
+
: "";
|
|
46
|
+
|
|
47
|
+
return html`
|
|
48
|
+
<fieldset
|
|
49
|
+
data-testid="${testid}"
|
|
50
|
+
class="p8 ws3 ${stateClass}"
|
|
51
|
+
?disabled="${isDisabled}"
|
|
52
|
+
>
|
|
53
|
+
${component}
|
|
54
|
+
</fieldset>
|
|
55
|
+
`;
|
|
56
|
+
},
|
|
57
|
+
});
|
|
58
|
+
});
|
|
59
|
+
});
|
|
@@ -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
|
-
|
|
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);
|
|
@@ -105,13 +109,13 @@
|
|
|
105
109
|
--_ta-bg-selected: var(--orange-500);
|
|
106
110
|
});
|
|
107
111
|
|
|
108
|
-
--_ta-bc:
|
|
112
|
+
--_ta-bc: var(--orange-200);
|
|
109
113
|
--_ta-bg: var(--orange-100);
|
|
110
114
|
--_ta-fc: var(--orange-500);
|
|
111
|
-
--_ta-bc-hover:
|
|
115
|
+
--_ta-bc-hover: var(--orange-300);
|
|
112
116
|
--_ta-bg-hover: var(--orange-200);
|
|
113
117
|
--_ta-fc-hover: var(--orange-600);
|
|
114
|
-
--_ta-bc-selected:
|
|
118
|
+
--_ta-bc-selected: var(--orange-400);
|
|
115
119
|
--_ta-bg-selected: var(--orange-300);
|
|
116
120
|
--_ta-fc-selected: var(--orange-600); // Currently APCA Lc 49 😔
|
|
117
121
|
}
|
|
@@ -131,15 +135,19 @@
|
|
|
131
135
|
}
|
|
132
136
|
|
|
133
137
|
&&__required:not(&__moderator) {
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
--_ta-
|
|
137
|
-
--_ta-bc-hover: transparent;
|
|
138
|
-
--_ta-
|
|
139
|
-
|
|
140
|
-
--_ta-
|
|
141
|
-
--_ta-bg-
|
|
142
|
-
--_ta-
|
|
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));
|
|
143
151
|
}
|
|
144
152
|
&__watched, // TODO: remove all single `&` watched styles once core no longer requires them
|
|
145
153
|
&&__watched {
|
|
@@ -241,8 +241,8 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
|
|
|
241
241
|
--yellow-400: hsl(43, 75%, 75%);
|
|
242
242
|
--yellow-500: hsl(43, 75%, 82%);
|
|
243
243
|
--yellow-600: hsl(43, 75%, 91%);
|
|
244
|
-
--purple-100: hsl(
|
|
245
|
-
--purple-200: hsl(
|
|
244
|
+
--purple-100: hsl(237, 24%, 23%);
|
|
245
|
+
--purple-200: hsl(237, 27%, 34%);
|
|
246
246
|
--purple-300: hsl(237, 32%, 56%);
|
|
247
247
|
--purple-400: hsl(237, 60%, 82%);
|
|
248
248
|
--purple-500: hsl(237, 60%, 88%);
|
|
@@ -366,8 +366,8 @@ body:not(.theme-highcontrast):not(.theme-dark) .theme-dark__forced .themed {
|
|
|
366
366
|
--yellow-400: hsl(43, 75%, 75%);
|
|
367
367
|
--yellow-500: hsl(43, 75%, 82%);
|
|
368
368
|
--yellow-600: hsl(43, 75%, 91%);
|
|
369
|
-
--purple-100: hsl(
|
|
370
|
-
--purple-200: hsl(
|
|
369
|
+
--purple-100: hsl(237, 24%, 23%);
|
|
370
|
+
--purple-200: hsl(237, 27%, 34%);
|
|
371
371
|
--purple-300: hsl(237, 32%, 56%);
|
|
372
372
|
--purple-400: hsl(237, 60%, 82%);
|
|
373
373
|
--purple-500: hsl(237, 60%, 88%);
|
|
@@ -461,8 +461,8 @@ body.theme-highcontrast.theme-system .theme-light__forced {
|
|
|
461
461
|
--black-500: hsl(210, 8%, 25%);
|
|
462
462
|
--black-600: hsl(210, 8%, 5%);
|
|
463
463
|
--black: hsl(0, 0%, 0%);
|
|
464
|
-
--orange-100: hsl(
|
|
465
|
-
--orange-200: hsl(
|
|
464
|
+
--orange-100: hsl(23, 87%, 97%);
|
|
465
|
+
--orange-200: hsl(23, 87%, 97%);
|
|
466
466
|
--orange-300: hsl(27, 90%, 55%);
|
|
467
467
|
--orange-400: hsl(27, 90%, 55%);
|
|
468
468
|
--orange-500: hsl(27, 80%, 28%);
|
|
@@ -477,10 +477,10 @@ body.theme-highcontrast.theme-system .theme-light__forced {
|
|
|
477
477
|
--green-200: hsl(147, 36%, 95%);
|
|
478
478
|
--green-300: hsl(148, 70%, 31%);
|
|
479
479
|
--green-400: hsl(148, 75%, 22%);
|
|
480
|
-
--green-500: hsl(
|
|
481
|
-
--green-600: hsl(
|
|
482
|
-
--red-100: hsl(0,
|
|
483
|
-
--red-200: hsl(0,
|
|
480
|
+
--green-500: hsl(146, 74%, 15%);
|
|
481
|
+
--green-600: hsl(146, 74%, 15%);
|
|
482
|
+
--red-100: hsl(0, 80%, 96%);
|
|
483
|
+
--red-200: hsl(0, 80%, 96%);
|
|
484
484
|
--red-300: hsl(0, 60%, 49%);
|
|
485
485
|
--red-400: hsl(0, 65%, 37%);
|
|
486
486
|
--red-500: hsl(0, 66%, 24%);
|
|
@@ -492,7 +492,7 @@ body.theme-highcontrast.theme-system .theme-light__forced {
|
|
|
492
492
|
--yellow-500: hsl(48, 85%, 18%);
|
|
493
493
|
--yellow-600: hsl(48, 85%, 18%);
|
|
494
494
|
--purple-100: hsl(237, 83%, 98%);
|
|
495
|
-
--purple-200: hsl(237,
|
|
495
|
+
--purple-200: hsl(237, 83%, 98%);
|
|
496
496
|
--purple-300: hsl(237, 55%, 57%);
|
|
497
497
|
--purple-400: hsl(237, 55%, 57%);
|
|
498
498
|
--purple-500: hsl(237, 50%, 32%);
|
|
@@ -504,7 +504,7 @@ body.theme-highcontrast.theme-system .theme-light__forced {
|
|
|
504
504
|
--silver-100: hsl(0, 0%, 95%);
|
|
505
505
|
--silver-200: hsl(0, 0%, 95%);
|
|
506
506
|
--silver-300: hsl(210, 5%, 68%);
|
|
507
|
-
--silver-400: hsl(
|
|
507
|
+
--silver-400: hsl(210, 2%, 40%);
|
|
508
508
|
--bronze-100: hsl(28, 40%, 92%);
|
|
509
509
|
--bronze-200: hsl(28, 40%, 92%);
|
|
510
510
|
--bronze-300: hsl(28, 43%, 65%);
|
|
@@ -569,52 +569,52 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
|
|
|
569
569
|
--black-500: hsl(210, 8%, 90%);
|
|
570
570
|
--black-600: hsl(210, 11%, 98%);
|
|
571
571
|
--black: hsl(0, 0%, 100%);
|
|
572
|
-
--orange-100: hsl(27,
|
|
573
|
-
--orange-200: hsl(27,
|
|
574
|
-
--orange-300: hsl(27, 80%,
|
|
572
|
+
--orange-100: hsl(27, 30%, 19%);
|
|
573
|
+
--orange-200: hsl(27, 30%, 19%);
|
|
574
|
+
--orange-300: hsl(27, 80%, 72%);
|
|
575
575
|
--orange-400: hsl(27, 80%, 72%);
|
|
576
|
-
--orange-500: hsl(
|
|
577
|
-
--orange-600: hsl(
|
|
578
|
-
--blue-100: hsl(209,
|
|
579
|
-
--blue-200: hsl(209,
|
|
576
|
+
--orange-500: hsl(28, 78%, 93%);
|
|
577
|
+
--orange-600: hsl(28, 78%, 93%);
|
|
578
|
+
--blue-100: hsl(209, 30%, 19%);
|
|
579
|
+
--blue-200: hsl(209, 30%, 19%);
|
|
580
580
|
--blue-300: hsl(210, 80%, 72%);
|
|
581
581
|
--blue-400: hsl(210, 80%, 75%);
|
|
582
|
-
--blue-500: hsl(
|
|
583
|
-
--blue-600: hsl(210,
|
|
584
|
-
--green-100: hsl(147,
|
|
585
|
-
--green-200: hsl(147,
|
|
582
|
+
--blue-500: hsl(210, 78%, 93%);
|
|
583
|
+
--blue-600: hsl(210, 78%, 93%);
|
|
584
|
+
--green-100: hsl(147, 30%, 19%);
|
|
585
|
+
--green-200: hsl(147, 30%, 19%);
|
|
586
586
|
--green-300: hsl(148, 40%, 62%);
|
|
587
587
|
--green-400: hsl(148, 40%, 68%);
|
|
588
|
-
--green-500: hsl(
|
|
589
|
-
--green-600: hsl(
|
|
590
|
-
--red-100: hsl(358,
|
|
591
|
-
--red-200: hsl(358,
|
|
588
|
+
--green-500: hsl(150, 39%, 93%);
|
|
589
|
+
--green-600: hsl(150, 39%, 93%);
|
|
590
|
+
--red-100: hsl(358, 30%, 19%);
|
|
591
|
+
--red-200: hsl(358, 30%, 19%);
|
|
592
592
|
--red-300: hsl(0, 75%, 77%);
|
|
593
593
|
--red-400: hsl(0, 73%, 80%);
|
|
594
|
-
--red-500: hsl(0,
|
|
595
|
-
--red-600: hsl(0,
|
|
594
|
+
--red-500: hsl(0, 76%, 95%);
|
|
595
|
+
--red-600: hsl(0, 76%, 95%);
|
|
596
596
|
--yellow-100: hsl(43, 29%, 17%);
|
|
597
597
|
--yellow-200: hsl(43, 29%, 17%);
|
|
598
|
-
--yellow-300: hsl(43,
|
|
598
|
+
--yellow-300: hsl(43, 75%, 75%);
|
|
599
599
|
--yellow-400: hsl(43, 75%, 75%);
|
|
600
600
|
--yellow-500: hsl(48, 74%, 91%);
|
|
601
|
-
--yellow-600: hsl(
|
|
601
|
+
--yellow-600: hsl(44, 74%, 91%);
|
|
602
602
|
--purple-100: hsl(237, 24%, 23%);
|
|
603
603
|
--purple-200: hsl(237, 24%, 23%);
|
|
604
|
-
--purple-300: hsl(237,
|
|
604
|
+
--purple-300: hsl(237, 60%, 82%);
|
|
605
605
|
--purple-400: hsl(237, 60%, 82%);
|
|
606
|
-
--purple-500: hsl(237,
|
|
607
|
-
--purple-600: hsl(237,
|
|
606
|
+
--purple-500: hsl(237, 62%, 96%);
|
|
607
|
+
--purple-600: hsl(237, 62%, 96%);
|
|
608
608
|
--gold-100: hsl(45, 22%, 25%);
|
|
609
609
|
--gold-200: hsl(45, 22%, 25%);
|
|
610
610
|
--gold-300: hsl(45, 92%, 62%);
|
|
611
611
|
--gold-400: hsl(46, 93%, 78%);
|
|
612
612
|
--silver-100: hsl(220, 2%, 26%);
|
|
613
613
|
--silver-200: hsl(220, 2%, 26%);
|
|
614
|
-
--silver-300: hsl(
|
|
614
|
+
--silver-300: hsl(220, 4%, 69%);
|
|
615
615
|
--silver-400: hsl(214, 8%, 83%);
|
|
616
|
-
--bronze-100: hsl(
|
|
617
|
-
--bronze-200: hsl(
|
|
616
|
+
--bronze-100: hsl(27, 13%, 27%);
|
|
617
|
+
--bronze-200: hsl(27, 13%, 27%);
|
|
618
618
|
--bronze-300: hsl(28, 58%, 67%);
|
|
619
619
|
--bronze-400: hsl(28, 59%, 83%);
|
|
620
620
|
--bc-lightest: var(--black-400);
|
|
@@ -677,52 +677,52 @@ body.theme-highcontrast:not(.theme-dark) .theme-dark__forced {
|
|
|
677
677
|
--black-500: hsl(210, 8%, 90%);
|
|
678
678
|
--black-600: hsl(210, 11%, 98%);
|
|
679
679
|
--black: hsl(0, 0%, 100%);
|
|
680
|
-
--orange-100: hsl(27,
|
|
681
|
-
--orange-200: hsl(27,
|
|
682
|
-
--orange-300: hsl(27, 80%,
|
|
680
|
+
--orange-100: hsl(27, 30%, 19%);
|
|
681
|
+
--orange-200: hsl(27, 30%, 19%);
|
|
682
|
+
--orange-300: hsl(27, 80%, 72%);
|
|
683
683
|
--orange-400: hsl(27, 80%, 72%);
|
|
684
|
-
--orange-500: hsl(
|
|
685
|
-
--orange-600: hsl(
|
|
686
|
-
--blue-100: hsl(209,
|
|
687
|
-
--blue-200: hsl(209,
|
|
684
|
+
--orange-500: hsl(28, 78%, 93%);
|
|
685
|
+
--orange-600: hsl(28, 78%, 93%);
|
|
686
|
+
--blue-100: hsl(209, 30%, 19%);
|
|
687
|
+
--blue-200: hsl(209, 30%, 19%);
|
|
688
688
|
--blue-300: hsl(210, 80%, 72%);
|
|
689
689
|
--blue-400: hsl(210, 80%, 75%);
|
|
690
|
-
--blue-500: hsl(
|
|
691
|
-
--blue-600: hsl(210,
|
|
692
|
-
--green-100: hsl(147,
|
|
693
|
-
--green-200: hsl(147,
|
|
690
|
+
--blue-500: hsl(210, 78%, 93%);
|
|
691
|
+
--blue-600: hsl(210, 78%, 93%);
|
|
692
|
+
--green-100: hsl(147, 30%, 19%);
|
|
693
|
+
--green-200: hsl(147, 30%, 19%);
|
|
694
694
|
--green-300: hsl(148, 40%, 62%);
|
|
695
695
|
--green-400: hsl(148, 40%, 68%);
|
|
696
|
-
--green-500: hsl(
|
|
697
|
-
--green-600: hsl(
|
|
698
|
-
--red-100: hsl(358,
|
|
699
|
-
--red-200: hsl(358,
|
|
696
|
+
--green-500: hsl(150, 39%, 93%);
|
|
697
|
+
--green-600: hsl(150, 39%, 93%);
|
|
698
|
+
--red-100: hsl(358, 30%, 19%);
|
|
699
|
+
--red-200: hsl(358, 30%, 19%);
|
|
700
700
|
--red-300: hsl(0, 75%, 77%);
|
|
701
701
|
--red-400: hsl(0, 73%, 80%);
|
|
702
|
-
--red-500: hsl(0,
|
|
703
|
-
--red-600: hsl(0,
|
|
702
|
+
--red-500: hsl(0, 76%, 95%);
|
|
703
|
+
--red-600: hsl(0, 76%, 95%);
|
|
704
704
|
--yellow-100: hsl(43, 29%, 17%);
|
|
705
705
|
--yellow-200: hsl(43, 29%, 17%);
|
|
706
|
-
--yellow-300: hsl(43,
|
|
706
|
+
--yellow-300: hsl(43, 75%, 75%);
|
|
707
707
|
--yellow-400: hsl(43, 75%, 75%);
|
|
708
708
|
--yellow-500: hsl(48, 74%, 91%);
|
|
709
|
-
--yellow-600: hsl(
|
|
709
|
+
--yellow-600: hsl(44, 74%, 91%);
|
|
710
710
|
--purple-100: hsl(237, 24%, 23%);
|
|
711
711
|
--purple-200: hsl(237, 24%, 23%);
|
|
712
|
-
--purple-300: hsl(237,
|
|
712
|
+
--purple-300: hsl(237, 60%, 82%);
|
|
713
713
|
--purple-400: hsl(237, 60%, 82%);
|
|
714
|
-
--purple-500: hsl(237,
|
|
715
|
-
--purple-600: hsl(237,
|
|
714
|
+
--purple-500: hsl(237, 62%, 96%);
|
|
715
|
+
--purple-600: hsl(237, 62%, 96%);
|
|
716
716
|
--gold-100: hsl(45, 22%, 25%);
|
|
717
717
|
--gold-200: hsl(45, 22%, 25%);
|
|
718
718
|
--gold-300: hsl(45, 92%, 62%);
|
|
719
719
|
--gold-400: hsl(46, 93%, 78%);
|
|
720
720
|
--silver-100: hsl(220, 2%, 26%);
|
|
721
721
|
--silver-200: hsl(220, 2%, 26%);
|
|
722
|
-
--silver-300: hsl(
|
|
722
|
+
--silver-300: hsl(220, 4%, 69%);
|
|
723
723
|
--silver-400: hsl(214, 8%, 83%);
|
|
724
|
-
--bronze-100: hsl(
|
|
725
|
-
--bronze-200: hsl(
|
|
724
|
+
--bronze-100: hsl(27, 13%, 27%);
|
|
725
|
+
--bronze-200: hsl(27, 13%, 27%);
|
|
726
726
|
--bronze-300: hsl(28, 58%, 67%);
|
|
727
727
|
--bronze-400: hsl(28, 59%, 83%);
|
|
728
728
|
--bc-lightest: var(--black-400);
|
|
@@ -102,20 +102,20 @@
|
|
|
102
102
|
600: hsl(27, 80%, 93%);
|
|
103
103
|
}
|
|
104
104
|
.set-orange-hc() {
|
|
105
|
-
100: hsl(
|
|
106
|
-
200: hsl(
|
|
105
|
+
100: hsl(23, 87%, 97%);
|
|
106
|
+
200: hsl(23, 87%, 97%);
|
|
107
107
|
300: hsl(27, 90%, 55%);
|
|
108
108
|
400: hsl(27, 90%, 55%);
|
|
109
109
|
500: hsl(27, 80%, 28%);
|
|
110
110
|
600: hsl(27, 80%, 28%);
|
|
111
111
|
}
|
|
112
112
|
.set-orange-hc-dark() {
|
|
113
|
-
100: hsl(27,
|
|
114
|
-
200: hsl(27,
|
|
115
|
-
300: hsl(27, 80%,
|
|
113
|
+
100: hsl(27, 30%, 19%);
|
|
114
|
+
200: hsl(27, 30%, 19%);
|
|
115
|
+
300: hsl(27, 80%, 72%);
|
|
116
116
|
400: hsl(27, 80%, 72%);
|
|
117
|
-
500: hsl(
|
|
118
|
-
600: hsl(
|
|
117
|
+
500: hsl(28, 78%, 93%);
|
|
118
|
+
600: hsl(28, 78%, 93%);
|
|
119
119
|
}
|
|
120
120
|
|
|
121
121
|
// Blue
|
|
@@ -144,12 +144,12 @@
|
|
|
144
144
|
600: hsl(210, 80%, 23%);
|
|
145
145
|
}
|
|
146
146
|
.set-blue-hc-dark() {
|
|
147
|
-
100: hsl(209,
|
|
148
|
-
200: hsl(209,
|
|
147
|
+
100: hsl(209, 30%, 19%);
|
|
148
|
+
200: hsl(209, 30%, 19%);
|
|
149
149
|
300: hsl(210, 80%, 72%);
|
|
150
150
|
400: hsl(210, 80%, 75%);
|
|
151
|
-
500: hsl(
|
|
152
|
-
600: hsl(210,
|
|
151
|
+
500: hsl(210, 78%, 93%);
|
|
152
|
+
600: hsl(210, 78%, 93%);
|
|
153
153
|
}
|
|
154
154
|
|
|
155
155
|
// Green
|
|
@@ -174,16 +174,16 @@
|
|
|
174
174
|
200: hsl(147, 36%, 95%);
|
|
175
175
|
300: hsl(148, 70%, 31%);
|
|
176
176
|
400: hsl(148, 75%, 22%);
|
|
177
|
-
500: hsl(
|
|
178
|
-
600: hsl(
|
|
177
|
+
500: hsl(146, 74%, 15%);
|
|
178
|
+
600: hsl(146, 74%, 15%);
|
|
179
179
|
}
|
|
180
180
|
.set-green-hc-dark() {
|
|
181
|
-
100: hsl(147,
|
|
182
|
-
200: hsl(147,
|
|
181
|
+
100: hsl(147, 30%, 19%);
|
|
182
|
+
200: hsl(147, 30%, 19%);
|
|
183
183
|
300: hsl(148, 40%, 62%);
|
|
184
184
|
400: hsl(148, 40%, 68%);
|
|
185
|
-
500: hsl(
|
|
186
|
-
600: hsl(
|
|
185
|
+
500: hsl(150, 39%, 93%);
|
|
186
|
+
600: hsl(150, 39%, 93%);
|
|
187
187
|
}
|
|
188
188
|
|
|
189
189
|
// Red
|
|
@@ -204,20 +204,20 @@
|
|
|
204
204
|
600: hsl(0, 73%, 95%);
|
|
205
205
|
}
|
|
206
206
|
.set-red-hc() {
|
|
207
|
-
100: hsl(0,
|
|
208
|
-
200: hsl(0,
|
|
207
|
+
100: hsl(0, 80%, 96%);
|
|
208
|
+
200: hsl(0, 80%, 96%);
|
|
209
209
|
300: hsl(0, 60%, 49%);
|
|
210
210
|
400: hsl(0, 65%, 37%);
|
|
211
211
|
500: hsl(0, 66%, 24%);
|
|
212
212
|
600: hsl(0, 66%, 24%);
|
|
213
213
|
}
|
|
214
214
|
.set-red-hc-dark() {
|
|
215
|
-
100: hsl(358,
|
|
216
|
-
200: hsl(358,
|
|
215
|
+
100: hsl(358, 30%, 19%);
|
|
216
|
+
200: hsl(358, 30%, 19%);
|
|
217
217
|
300: hsl(0, 75%, 77%);
|
|
218
218
|
400: hsl(0, 73%, 80%);
|
|
219
|
-
500: hsl(0,
|
|
220
|
-
600: hsl(0,
|
|
219
|
+
500: hsl(0, 76%, 95%);
|
|
220
|
+
600: hsl(0, 76%, 95%);
|
|
221
221
|
}
|
|
222
222
|
|
|
223
223
|
// Yellow
|
|
@@ -248,10 +248,10 @@
|
|
|
248
248
|
.set-yellow-hc-dark() {
|
|
249
249
|
100: hsl(43, 29%, 17%);
|
|
250
250
|
200: hsl(43, 29%, 17%);
|
|
251
|
-
300: hsl(43,
|
|
251
|
+
300: hsl(43, 75%, 75%);
|
|
252
252
|
400: hsl(43, 75%, 75%);
|
|
253
253
|
500: hsl(48, 74%, 91%);
|
|
254
|
-
600: hsl(
|
|
254
|
+
600: hsl(44, 74%, 91%);
|
|
255
255
|
}
|
|
256
256
|
|
|
257
257
|
// Purple
|
|
@@ -264,8 +264,8 @@
|
|
|
264
264
|
600: hsl(237, 50%, 32%);
|
|
265
265
|
}
|
|
266
266
|
.set-purple-dark() {
|
|
267
|
-
100: hsl(
|
|
268
|
-
200: hsl(
|
|
267
|
+
100: hsl(237, 24%, 23%);
|
|
268
|
+
200: hsl(237, 27%, 34%);
|
|
269
269
|
300: hsl(237, 32%, 56%);
|
|
270
270
|
400: hsl(237, 60%, 82%);
|
|
271
271
|
500: hsl(237, 60%, 88%);
|
|
@@ -273,7 +273,7 @@
|
|
|
273
273
|
}
|
|
274
274
|
.set-purple-hc() {
|
|
275
275
|
100: hsl(237, 83%, 98%);
|
|
276
|
-
200: hsl(237,
|
|
276
|
+
200: hsl(237, 83%, 98%);
|
|
277
277
|
300: hsl(237, 55%, 57%);
|
|
278
278
|
400: hsl(237, 55%, 57%);
|
|
279
279
|
500: hsl(237, 50%, 32%);
|
|
@@ -282,10 +282,10 @@
|
|
|
282
282
|
.set-purple-hc-dark() {
|
|
283
283
|
100: hsl(237, 24%, 23%);
|
|
284
284
|
200: hsl(237, 24%, 23%);
|
|
285
|
-
300: hsl(237,
|
|
285
|
+
300: hsl(237, 60%, 82%);
|
|
286
286
|
400: hsl(237, 60%, 82%);
|
|
287
|
-
500: hsl(237,
|
|
288
|
-
600: hsl(237,
|
|
287
|
+
500: hsl(237, 62%, 96%);
|
|
288
|
+
600: hsl(237, 62%, 96%);
|
|
289
289
|
}
|
|
290
290
|
|
|
291
291
|
// gold
|
|
@@ -331,12 +331,12 @@
|
|
|
331
331
|
100: hsl(0, 0%, 95%);
|
|
332
332
|
200: hsl(0, 0%, 95%);
|
|
333
333
|
300: hsl(210, 5%, 68%);
|
|
334
|
-
400: hsl(
|
|
334
|
+
400: hsl(210, 2%, 40%);
|
|
335
335
|
}
|
|
336
336
|
.set-silver-hc-dark() {
|
|
337
337
|
100: hsl(220, 2%, 26%);
|
|
338
338
|
200: hsl(220, 2%, 26%);
|
|
339
|
-
300: hsl(
|
|
339
|
+
300: hsl(220, 4%, 69%);
|
|
340
340
|
400: hsl(214, 8%, 83%);
|
|
341
341
|
}
|
|
342
342
|
|
|
@@ -360,8 +360,8 @@
|
|
|
360
360
|
400: hsl(28, 43%, 39%);
|
|
361
361
|
}
|
|
362
362
|
.set-bronze-hc-dark() {
|
|
363
|
-
100: hsl(
|
|
364
|
-
200: hsl(
|
|
363
|
+
100: hsl(27, 13%, 27%);
|
|
364
|
+
200: hsl(27, 13%, 27%);
|
|
365
365
|
300: hsl(28, 58%, 67%);
|
|
366
366
|
400: hsl(28, 59%, 83%);
|
|
367
367
|
}
|
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.0.
|
|
8
|
+
"version": "2.0.1",
|
|
9
9
|
"files": [
|
|
10
10
|
"dist",
|
|
11
11
|
"lib"
|
|
@@ -49,13 +49,13 @@
|
|
|
49
49
|
"@rollup/plugin-commonjs": "^25.0.4",
|
|
50
50
|
"@rollup/plugin-replace": "^5.0.2",
|
|
51
51
|
"@stackoverflow/stacks-editor": "^0.8.9",
|
|
52
|
-
"@stackoverflow/stacks-icons": "^
|
|
52
|
+
"@stackoverflow/stacks-icons": "^6.0.0",
|
|
53
53
|
"@testing-library/dom": "^9.3.3",
|
|
54
54
|
"@testing-library/user-event": "^14.5.1",
|
|
55
55
|
"@types/cssbeautify": "^0.3.2",
|
|
56
56
|
"@types/less": "^3.0.3",
|
|
57
|
-
"@typescript-eslint/eslint-plugin": "^6.7.
|
|
58
|
-
"@typescript-eslint/parser": "^6.7.
|
|
57
|
+
"@typescript-eslint/eslint-plugin": "^6.7.4",
|
|
58
|
+
"@typescript-eslint/parser": "^6.7.4",
|
|
59
59
|
"@web/dev-server-esbuild": "^0.4.1",
|
|
60
60
|
"@web/dev-server-rollup": "^0.5.2",
|
|
61
61
|
"@web/test-runner": "^0.17.1",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
"jquery": "^3.7.1",
|
|
76
76
|
"less-loader": "^11.1.3",
|
|
77
77
|
"list.js": "^2.3.1",
|
|
78
|
-
"markdown-it": "^13.0.
|
|
78
|
+
"markdown-it": "^13.0.2",
|
|
79
79
|
"mini-css-extract-plugin": "^2.7.6",
|
|
80
80
|
"postcss-less": "^6.0.0",
|
|
81
81
|
"postcss-loader": "^7.3.3",
|