@stackoverflow/stacks 2.0.0 → 2.0.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 +83 -83
- package/dist/css/stacks.min.css +1 -1
- package/lib/components/empty-state/empty-state.a11y.test.ts +17 -0
- package/lib/components/empty-state/empty-state.visual.test.ts +17 -0
- 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/progress-bar/progress-bar.a11y.test.ts +200 -0
- package/lib/components/progress-bar/progress-bar.visual.test.ts +199 -0
- package/lib/components/table/table.a11y.test.ts +113 -0
- package/lib/components/table/table.visual.test.ts +105 -0
- package/lib/components/tag/tag.less +24 -16
- package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +2 -2
- package/lib/exports/__snapshots__/color.less.test.ts.snap +66 -66
- package/lib/exports/color-sets.less +39 -39
- package/lib/test/test-utils.ts +1 -1
- package/package.json +10 -10
- package/lib/test/axe-apca/README.md +0 -53
- package/lib/test/axe-apca/index.ts +0 -3
- package/lib/test/axe-apca/package.wip.json +0 -30
- package/lib/test/axe-apca/src/apca-w3.d.ts +0 -3
- package/lib/test/axe-apca/src/axe-apca.test.ts +0 -231
- package/lib/test/axe-apca/src/axe-apca.ts +0 -220
|
@@ -0,0 +1,113 @@
|
|
|
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 class="s-table-container p8" data-testid="${testid}">${component}</div>
|
|
8
|
+
`;
|
|
9
|
+
|
|
10
|
+
const rows = [
|
|
11
|
+
{
|
|
12
|
+
displayName: "Sponge",
|
|
13
|
+
fullName: "Bobby Geometrislacks",
|
|
14
|
+
progress: 10,
|
|
15
|
+
active: true,
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
displayName: "Patty",
|
|
19
|
+
fullName: "Pat Supernova",
|
|
20
|
+
progress: 50,
|
|
21
|
+
active: true,
|
|
22
|
+
// }, {
|
|
23
|
+
// displayName: "Crustoph",
|
|
24
|
+
// fullName: "Eugene Harold K",
|
|
25
|
+
// progress: 75,
|
|
26
|
+
// active: false, // TODO reintroduce once disabled rows pass contrast requirements
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
displayName: "SCheeks",
|
|
30
|
+
fullName: "Sandra C.",
|
|
31
|
+
progress: 100,
|
|
32
|
+
active: true,
|
|
33
|
+
},
|
|
34
|
+
];
|
|
35
|
+
|
|
36
|
+
const children = {
|
|
37
|
+
default: `
|
|
38
|
+
<thead>
|
|
39
|
+
<tr>
|
|
40
|
+
<th scope="col" class="s-table--bulk">
|
|
41
|
+
<label class="v-visible-sr" for="check">bulk action</label>
|
|
42
|
+
<input type="checkbox" class="s-checkbox" id="check">
|
|
43
|
+
</th>
|
|
44
|
+
<th scope="col">Display Name</th>
|
|
45
|
+
<th scope="col">Full name</th>
|
|
46
|
+
<th scope="col" colspan="2">Progress</th>
|
|
47
|
+
<th scope="col"><span>class="v-visible-sr">Bar</span></th>
|
|
48
|
+
</tr>
|
|
49
|
+
</thead>
|
|
50
|
+
<tbody>
|
|
51
|
+
${rows
|
|
52
|
+
.map(
|
|
53
|
+
(row, i) => `
|
|
54
|
+
<tr class="${row.active ? "" : "is-disabled"}">
|
|
55
|
+
<th scope="row">
|
|
56
|
+
<label class="v-visible-sr" for="check-${i}">bulk</label>
|
|
57
|
+
<input type="checkbox" class="s-checkbox" id="check-${i}">
|
|
58
|
+
</th>
|
|
59
|
+
<td>${row.displayName}</td>
|
|
60
|
+
<td>${row.fullName}</td>
|
|
61
|
+
<td class="s-table--progress">${row.progress}</td>
|
|
62
|
+
<td class="s-table--progress-bar">
|
|
63
|
+
<div class="s-progress bg-white">
|
|
64
|
+
<div class="s-progress--bar bg-blue-400" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${
|
|
65
|
+
row.progress
|
|
66
|
+
}" aria-label="progressbar" style="width: ${
|
|
67
|
+
row.progress
|
|
68
|
+
}%"></div>
|
|
69
|
+
</div>
|
|
70
|
+
</td>
|
|
71
|
+
<td><a class="s-link" href="#">Add</a></td>
|
|
72
|
+
</tr>
|
|
73
|
+
`
|
|
74
|
+
)
|
|
75
|
+
.join("")}
|
|
76
|
+
</tbody>
|
|
77
|
+
<tfoot class="s-table--totals">
|
|
78
|
+
<tr>
|
|
79
|
+
<td scope="row"><span class="v-visible-sr">Empty</span></td>
|
|
80
|
+
<th scope="row" class="ta-left">Totals</th>
|
|
81
|
+
<td><span class="v-visible-sr">Empty</span></td>
|
|
82
|
+
<td colspan="2">160</td>
|
|
83
|
+
<td><span class="v-visible-sr">Empty</span></td>
|
|
84
|
+
</tr>
|
|
85
|
+
</tfoot>
|
|
86
|
+
`,
|
|
87
|
+
};
|
|
88
|
+
|
|
89
|
+
describe("table", () => {
|
|
90
|
+
// default, sizes
|
|
91
|
+
runComponentTests({
|
|
92
|
+
type: "a11y",
|
|
93
|
+
baseClass: "s-table",
|
|
94
|
+
variants: ["stripes"],
|
|
95
|
+
modifiers: {
|
|
96
|
+
primary: ["sm", "lg"],
|
|
97
|
+
secondary: ["b0", "bx", "bx-simple", "sortable"],
|
|
98
|
+
// global: ["ta-center", "ta-left", "ta-justify", "ta-right", "va-bottom", "va-middle", "va-top"], // Removing these modifiers *for now* since they create so many test images and would slow testing
|
|
99
|
+
},
|
|
100
|
+
tag: "table",
|
|
101
|
+
children,
|
|
102
|
+
template,
|
|
103
|
+
// TODO resolve HC contrast issues with `.s-table.s-table__sortable thead th` sortable
|
|
104
|
+
skippedTestids: [
|
|
105
|
+
"s-table-highcontrast-light-lg-sortable",
|
|
106
|
+
"s-table-highcontrast-light-sm-sortable",
|
|
107
|
+
"s-table-highcontrast-light-sortable",
|
|
108
|
+
"s-table-highcontrast-light-stripes-lg-sortable",
|
|
109
|
+
"s-table-highcontrast-light-stripes-sm-sortable",
|
|
110
|
+
"s-table-highcontrast-light-stripes-sortable",
|
|
111
|
+
],
|
|
112
|
+
});
|
|
113
|
+
});
|
|
@@ -0,0 +1,105 @@
|
|
|
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 class="s-table-container p8" data-testid="${testid}">${component}</div>
|
|
8
|
+
`;
|
|
9
|
+
|
|
10
|
+
const rows = [
|
|
11
|
+
{
|
|
12
|
+
displayName: "Sponge",
|
|
13
|
+
fullName: "Bobby Geometrislacks",
|
|
14
|
+
progress: 10,
|
|
15
|
+
active: true,
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
displayName: "Patty",
|
|
19
|
+
fullName: "Pat Supernova",
|
|
20
|
+
progress: 50,
|
|
21
|
+
active: true,
|
|
22
|
+
},
|
|
23
|
+
{
|
|
24
|
+
displayName: "Crustoph",
|
|
25
|
+
fullName: "Eugene Harold K",
|
|
26
|
+
progress: 75,
|
|
27
|
+
active: false,
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
displayName: "SCheeks",
|
|
31
|
+
fullName: "Sandra C.",
|
|
32
|
+
progress: 100,
|
|
33
|
+
active: true,
|
|
34
|
+
},
|
|
35
|
+
];
|
|
36
|
+
|
|
37
|
+
const children = {
|
|
38
|
+
default: `
|
|
39
|
+
<thead>
|
|
40
|
+
<tr>
|
|
41
|
+
<th scope="col" class="s-table--bulk">
|
|
42
|
+
<label class="v-visible-sr" for="check">bulk action</label>
|
|
43
|
+
<input type="checkbox" class="s-checkbox" id="check">
|
|
44
|
+
</th>
|
|
45
|
+
<th scope="col">Display Name</th>
|
|
46
|
+
<th scope="col">Full name</th>
|
|
47
|
+
<th scope="col" colspan="2">Progress</th>
|
|
48
|
+
<th scope="col"><span>class="v-visible-sr">Bar</span></th>
|
|
49
|
+
</tr>
|
|
50
|
+
</thead>
|
|
51
|
+
<tbody>
|
|
52
|
+
${rows
|
|
53
|
+
.map(
|
|
54
|
+
(row, i) => `
|
|
55
|
+
<tr class="${row.active ? "" : "is-disabled"}">
|
|
56
|
+
<th scope="row">
|
|
57
|
+
<label class="v-visible-sr" for="check-${i}">bulk</label>
|
|
58
|
+
<input type="checkbox" class="s-checkbox" id="check-${i}">
|
|
59
|
+
</th>
|
|
60
|
+
<td>${row.displayName}</td>
|
|
61
|
+
<td>${row.fullName}</td>
|
|
62
|
+
<td class="s-table--progress">${row.progress}</td>
|
|
63
|
+
<td class="s-table--progress-bar">
|
|
64
|
+
<div class="s-progress bg-white">
|
|
65
|
+
<div class="s-progress--bar bg-blue-400" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${
|
|
66
|
+
row.progress
|
|
67
|
+
}" aria-label="progressbar" style="width: ${
|
|
68
|
+
row.progress
|
|
69
|
+
}%"></div>
|
|
70
|
+
</div>
|
|
71
|
+
</td>
|
|
72
|
+
<td><a class="s-link" href="#">Add</a></td>
|
|
73
|
+
</tr>
|
|
74
|
+
`
|
|
75
|
+
)
|
|
76
|
+
.join("")}
|
|
77
|
+
</tbody>
|
|
78
|
+
<tfoot class="s-table--totals">
|
|
79
|
+
<tr>
|
|
80
|
+
<td scope="row"><span class="v-visible-sr">Empty</span></td>
|
|
81
|
+
<th scope="row" class="ta-left">Totals</th>
|
|
82
|
+
<td><span class="v-visible-sr">Empty</span></td>
|
|
83
|
+
<td colspan="2">160</td>
|
|
84
|
+
<td><span class="v-visible-sr">Empty</span></td>
|
|
85
|
+
</tr>
|
|
86
|
+
</tfoot>
|
|
87
|
+
`,
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
describe("table", () => {
|
|
91
|
+
// default, sizes
|
|
92
|
+
runComponentTests({
|
|
93
|
+
type: "visual",
|
|
94
|
+
baseClass: "s-table",
|
|
95
|
+
variants: ["stripes"],
|
|
96
|
+
modifiers: {
|
|
97
|
+
primary: ["sm", "lg"],
|
|
98
|
+
secondary: ["b0", "bx", "bx-simple", "sortable"],
|
|
99
|
+
// global: ["ta-center", "ta-left", "ta-justify", "ta-right", "va-bottom", "va-middle", "va-top"], // Removing these modifiers *for now* since they create so many test images and would slow testing
|
|
100
|
+
},
|
|
101
|
+
tag: "table",
|
|
102
|
+
children,
|
|
103
|
+
template,
|
|
104
|
+
});
|
|
105
|
+
});
|
|
@@ -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 {
|
|
@@ -316,10 +316,10 @@ body .themed {
|
|
|
316
316
|
--green-600: hsl(148, 75%, 15%);
|
|
317
317
|
--red-100: hsl(0, 72%, 96%);
|
|
318
318
|
--red-200: hsl(0, 70%, 93%);
|
|
319
|
-
--red-300: hsl(0,
|
|
319
|
+
--red-300: hsl(0, 66%, 80%);
|
|
320
320
|
--red-400: hsl(0, 60%, 49%);
|
|
321
321
|
--red-500: hsl(0, 65%, 37%);
|
|
322
|
-
--red-600: hsl(0, 65%,
|
|
322
|
+
--red-600: hsl(0, 65%, 22%);
|
|
323
323
|
--yellow-100: hsl(43, 80%, 96%);
|
|
324
324
|
--yellow-200: hsl(43, 80%, 88%);
|
|
325
325
|
--yellow-300: hsl(43, 85%, 72%);
|
|
@@ -104,10 +104,10 @@ body:not(.theme-highcontrast).theme-system .theme-light__forced .themed {
|
|
|
104
104
|
--green-600: hsl(148, 75%, 15%);
|
|
105
105
|
--red-100: hsl(0, 72%, 96%);
|
|
106
106
|
--red-200: hsl(0, 70%, 93%);
|
|
107
|
-
--red-300: hsl(0,
|
|
107
|
+
--red-300: hsl(0, 66%, 80%);
|
|
108
108
|
--red-400: hsl(0, 60%, 49%);
|
|
109
109
|
--red-500: hsl(0, 65%, 37%);
|
|
110
|
-
--red-600: hsl(0, 65%,
|
|
110
|
+
--red-600: hsl(0, 65%, 22%);
|
|
111
111
|
--yellow-100: hsl(43, 80%, 96%);
|
|
112
112
|
--yellow-200: hsl(43, 80%, 88%);
|
|
113
113
|
--yellow-300: hsl(43, 85%, 72%);
|
|
@@ -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,14 +477,14 @@ 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
|
-
--red-500: hsl(0,
|
|
487
|
-
--red-600: hsl(0,
|
|
486
|
+
--red-500: hsl(0, 65%, 22%);
|
|
487
|
+
--red-600: hsl(0, 65%, 22%);
|
|
488
488
|
--yellow-100: hsl(41, 80%, 96%);
|
|
489
489
|
--yellow-200: hsl(41, 80%, 96%);
|
|
490
490
|
--yellow-300: hsl(43, 85%, 50%);
|
|
@@ -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);
|