@stackoverflow/stacks 2.0.0-rc.10 → 2.0.0-rc.12
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 +166 -136
- package/dist/css/stacks.min.css +1 -1
- package/lib/components/badge/badge.less +10 -10
- package/lib/components/checkbox_radio/checkbox_radio.less +14 -8
- package/lib/components/code-block/code-block.a11y.test.ts +1 -1
- package/lib/components/input_textarea/input_textarea.a11y.test.ts +112 -0
- package/lib/components/input_textarea/input_textarea.visual.test.ts +98 -0
- package/lib/components/modal/modal.less +1 -0
- package/lib/components/navigation/navigation.a11y.test.ts +0 -2
- package/lib/components/post-summary/post-summary.less +1 -1
- package/lib/components/tag/tag.a11y.test.ts +7 -1
- package/lib/components/toggle-switch/toggle-switch.less +8 -1
- package/lib/components/topbar/topbar.less +30 -14
- package/lib/components/user-card/user-card.less +2 -2
- package/lib/exports/__snapshots__/color-mixins.less.test.ts.snap +60 -60
- package/lib/exports/__snapshots__/color.less.test.ts.snap +68 -68
- package/lib/exports/color-mixins.less +12 -12
- package/lib/exports/color-sets.less +16 -16
- package/lib/exports/mixins.less +12 -7
- package/lib/exports/v1/__snapshots__/constants-colors.less.test.ts.snap +28 -28
- package/lib/test/test-utils.ts +1 -3
- package/package.json +1 -1
|
@@ -13,17 +13,17 @@
|
|
|
13
13
|
// CONTEXTUAL STYLES
|
|
14
14
|
.highcontrast-mode({
|
|
15
15
|
// Badge counts
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
&__gold,
|
|
17
|
+
&__silver,
|
|
18
|
+
&__bronze,
|
|
19
19
|
// Number counts
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
20
|
+
&__rep,
|
|
21
|
+
&__rep-down,
|
|
22
|
+
&__votes:not(.s-badge__answered),
|
|
23
23
|
// Users
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
&__admin,
|
|
25
|
+
&__moderator,
|
|
26
|
+
&__staff {
|
|
27
27
|
--_ba-bc: currentColor;
|
|
28
28
|
}
|
|
29
29
|
});
|
|
@@ -113,7 +113,7 @@
|
|
|
113
113
|
|
|
114
114
|
// Users
|
|
115
115
|
&&__admin {
|
|
116
|
-
--_ba-bc: var(--theme-primary-
|
|
116
|
+
--_ba-bc: var(--theme-primary-200);
|
|
117
117
|
--_ba-bg: var(--theme-primary-100);
|
|
118
118
|
--_ba-fc: var(--theme-primary-500);
|
|
119
119
|
}
|
|
@@ -47,8 +47,20 @@
|
|
|
47
47
|
}
|
|
48
48
|
|
|
49
49
|
.s-checkbox {
|
|
50
|
+
// Less variables for check svg fill color
|
|
51
|
+
@ch-bg-image-fill: .set-white()[default];
|
|
52
|
+
@ch-bg-image-fill-dark: .set-white-dark()[default];
|
|
50
53
|
|
|
51
54
|
// CONTEXTUAL STYLES
|
|
55
|
+
.dark-mode({
|
|
56
|
+
&:checked {
|
|
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}'/%3E%3C/svg%3E");
|
|
58
|
+
}
|
|
59
|
+
&:indeterminate {
|
|
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}'/%3E%3C/svg%3E");
|
|
61
|
+
}
|
|
62
|
+
});
|
|
63
|
+
|
|
52
64
|
.highcontrast-dark-mode({
|
|
53
65
|
&:checked, &:indeterminate {
|
|
54
66
|
--_ch-bc: var(--blue-500) !important;
|
|
@@ -68,11 +80,11 @@
|
|
|
68
80
|
}
|
|
69
81
|
|
|
70
82
|
&:checked {
|
|
71
|
-
--_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='
|
|
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");
|
|
72
84
|
}
|
|
73
85
|
|
|
74
86
|
&:indeterminate {
|
|
75
|
-
--_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='
|
|
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");
|
|
76
88
|
}
|
|
77
89
|
|
|
78
90
|
// INTERACTION
|
|
@@ -98,12 +110,6 @@
|
|
|
98
110
|
}
|
|
99
111
|
});
|
|
100
112
|
|
|
101
|
-
.dark-mode({
|
|
102
|
-
&:checked {
|
|
103
|
-
--_ch-bg: var(--black);
|
|
104
|
-
}
|
|
105
|
-
});
|
|
106
|
-
|
|
107
113
|
// STATES
|
|
108
114
|
&:checked {
|
|
109
115
|
--_ch-baw: 0.30769231em;
|
|
@@ -15,7 +15,7 @@ describe("code block", () => {
|
|
|
15
15
|
...defaultOptions,
|
|
16
16
|
includeNullModifier: false,
|
|
17
17
|
},
|
|
18
|
-
// TODO
|
|
18
|
+
// TODO revisit these skipped test ids
|
|
19
19
|
skippedTestids: [
|
|
20
20
|
"s-code-block-language-html-light",
|
|
21
21
|
"s-code-block-language-html-highcontrast-light",
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { html } from "@open-wc/testing";
|
|
2
|
+
import { runComponentTests } from "../../test/test-utils";
|
|
3
|
+
import "../../index";
|
|
4
|
+
|
|
5
|
+
// TODO note: all accessibility tests here are skipped currently. Revisit in Stacks v2
|
|
6
|
+
|
|
7
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
8
|
+
const template = ({ component, testid, classes = "", icon }: any) => html`
|
|
9
|
+
<div data-testid="${testid}" class="p8 ws4 ${classes}">
|
|
10
|
+
<label for="default-id">Label</label>
|
|
11
|
+
${component}${icon}
|
|
12
|
+
</div>
|
|
13
|
+
`;
|
|
14
|
+
|
|
15
|
+
const customAttributes = [
|
|
16
|
+
{
|
|
17
|
+
placeholder: "Enter your text here",
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
readonly: "",
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
disabled: "",
|
|
24
|
+
},
|
|
25
|
+
];
|
|
26
|
+
|
|
27
|
+
const states = ["has-error", "has-warning", "has-success"];
|
|
28
|
+
const sizes = ["sm", "md", "lg", "xl"];
|
|
29
|
+
const otherModifiers = ["creditcard", "search"];
|
|
30
|
+
|
|
31
|
+
["input", "textarea"].map((type) => {
|
|
32
|
+
const children =
|
|
33
|
+
type === "textarea" ? { default: "Enter your text here" } : undefined;
|
|
34
|
+
|
|
35
|
+
describe(type, () => {
|
|
36
|
+
// Base styles w/ value, modifiers
|
|
37
|
+
runComponentTests({
|
|
38
|
+
type: "a11y",
|
|
39
|
+
baseClass: `s-${type}`,
|
|
40
|
+
modifiers: {
|
|
41
|
+
primary: [...sizes, ...otherModifiers],
|
|
42
|
+
},
|
|
43
|
+
tag: type,
|
|
44
|
+
attributes:
|
|
45
|
+
type === "input"
|
|
46
|
+
? {
|
|
47
|
+
type: "text",
|
|
48
|
+
value: "Text input value",
|
|
49
|
+
id: `default-id`,
|
|
50
|
+
}
|
|
51
|
+
: {
|
|
52
|
+
id: `default-id`,
|
|
53
|
+
},
|
|
54
|
+
children,
|
|
55
|
+
template,
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
// Base styles w/o value; w/ readonly attr; w/ disabled attr
|
|
59
|
+
customAttributes.forEach((attributes) => {
|
|
60
|
+
const attrString = Object.keys(attributes).sort().join("-");
|
|
61
|
+
|
|
62
|
+
runComponentTests({
|
|
63
|
+
type: "a11y",
|
|
64
|
+
baseClass: `s-${type} ${attrString}`,
|
|
65
|
+
tag: type,
|
|
66
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
67
|
+
// @ts-ignore
|
|
68
|
+
attributes:
|
|
69
|
+
type === "input"
|
|
70
|
+
? {
|
|
71
|
+
type: "text",
|
|
72
|
+
value: attributes.placeholder
|
|
73
|
+
? null
|
|
74
|
+
: "Text input value",
|
|
75
|
+
id: `default-id`,
|
|
76
|
+
...attributes,
|
|
77
|
+
}
|
|
78
|
+
: {
|
|
79
|
+
id: `default-id`,
|
|
80
|
+
...attributes,
|
|
81
|
+
},
|
|
82
|
+
children,
|
|
83
|
+
template,
|
|
84
|
+
// TODO revisit these skipped test ids
|
|
85
|
+
skippedTestids: [/readonly/],
|
|
86
|
+
});
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
// w/ state classes
|
|
90
|
+
states.forEach((state) => {
|
|
91
|
+
runComponentTests({
|
|
92
|
+
type: "a11y",
|
|
93
|
+
baseClass: `s-${type} state-${state}`,
|
|
94
|
+
tag: type,
|
|
95
|
+
attributes:
|
|
96
|
+
type === "input"
|
|
97
|
+
? {
|
|
98
|
+
type: "text",
|
|
99
|
+
value: "Text input value",
|
|
100
|
+
id: `default-id`,
|
|
101
|
+
}
|
|
102
|
+
: {
|
|
103
|
+
id: "default-id",
|
|
104
|
+
},
|
|
105
|
+
children,
|
|
106
|
+
template: ({ component, testid }) =>
|
|
107
|
+
template({ component, testid, classes: state }),
|
|
108
|
+
});
|
|
109
|
+
});
|
|
110
|
+
// TODO interaction (focus) states?
|
|
111
|
+
});
|
|
112
|
+
});
|
|
@@ -0,0 +1,98 @@
|
|
|
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, classes = "", icon }: any) => html`
|
|
7
|
+
<div data-testid="${testid}" class="p8 ws4 ${classes}">
|
|
8
|
+
${component}${icon}
|
|
9
|
+
</div>
|
|
10
|
+
`;
|
|
11
|
+
|
|
12
|
+
const customAttributes = [
|
|
13
|
+
{
|
|
14
|
+
placeholder: "Enter your text here",
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
readonly: "",
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
disabled: "",
|
|
21
|
+
},
|
|
22
|
+
] as Record<string, string>[];
|
|
23
|
+
|
|
24
|
+
const states = ["has-error", "has-warning", "has-success", "is-readonly"];
|
|
25
|
+
const sizes = ["sm", "md", "lg", "xl"];
|
|
26
|
+
const otherModifiers = ["creditcard", "search"];
|
|
27
|
+
|
|
28
|
+
["input", "textarea"].map((type) => {
|
|
29
|
+
const children =
|
|
30
|
+
type === "textarea" ? { default: "Enter your text here" } : undefined;
|
|
31
|
+
|
|
32
|
+
describe(type, () => {
|
|
33
|
+
// Base styles w/ value, modifiers
|
|
34
|
+
runComponentTests({
|
|
35
|
+
type: "visual",
|
|
36
|
+
baseClass: `s-${type}`,
|
|
37
|
+
modifiers: {
|
|
38
|
+
primary: [...sizes, ...otherModifiers],
|
|
39
|
+
},
|
|
40
|
+
tag: type,
|
|
41
|
+
attributes:
|
|
42
|
+
type === "input"
|
|
43
|
+
? {
|
|
44
|
+
type: "text",
|
|
45
|
+
value: "Text input value",
|
|
46
|
+
}
|
|
47
|
+
: {},
|
|
48
|
+
children,
|
|
49
|
+
template,
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
// Base styles w/o value; w/ readonly attr; w/ disabled attr
|
|
53
|
+
customAttributes.forEach((attributes) => {
|
|
54
|
+
const attrString = Object.keys(attributes).sort().join("-");
|
|
55
|
+
let attr = attributes;
|
|
56
|
+
if (type === "input") {
|
|
57
|
+
attr = {
|
|
58
|
+
type: "text",
|
|
59
|
+
...attributes,
|
|
60
|
+
};
|
|
61
|
+
if (!attributes.placeholder) {
|
|
62
|
+
attr = {
|
|
63
|
+
value: "Text input value",
|
|
64
|
+
...attr,
|
|
65
|
+
};
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
runComponentTests({
|
|
69
|
+
type: "visual",
|
|
70
|
+
baseClass: `s-${type} ${attrString}`,
|
|
71
|
+
tag: type,
|
|
72
|
+
attributes: attr,
|
|
73
|
+
children,
|
|
74
|
+
template,
|
|
75
|
+
});
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
// w/ state classes; .is-readonly
|
|
79
|
+
states.forEach((state) => {
|
|
80
|
+
runComponentTests({
|
|
81
|
+
type: "visual",
|
|
82
|
+
baseClass: `s-${type} state-${state}`,
|
|
83
|
+
tag: type,
|
|
84
|
+
attributes:
|
|
85
|
+
type === "input"
|
|
86
|
+
? {
|
|
87
|
+
type: "text",
|
|
88
|
+
value: "Text input value",
|
|
89
|
+
}
|
|
90
|
+
: {},
|
|
91
|
+
children,
|
|
92
|
+
template: ({ component, testid }) =>
|
|
93
|
+
template({ component, testid, classes: state }),
|
|
94
|
+
});
|
|
95
|
+
});
|
|
96
|
+
// TODO interaction (focus) states?
|
|
97
|
+
});
|
|
98
|
+
});
|
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
|
|
116
116
|
&&__watched {
|
|
117
117
|
&:not(.s-post-summary__deleted):not(.s-post-summary__ignored) {
|
|
118
|
-
--_ps-bg: var(--yellow-
|
|
118
|
+
--_ps-bg: var(--yellow-100);
|
|
119
119
|
--_ps-stats-fc: var(--black-400);
|
|
120
120
|
--_ps-content-title-a-fc: var(--theme-post-title-color, var(--theme-link-color, var(--theme-secondary-400)));
|
|
121
121
|
--_ps-content-title-a-fc-hover: var(--theme-post-title-color-hover, var(--theme-link-color-hover, var(--theme-secondary-500)));
|
|
@@ -18,6 +18,12 @@ describe("tag", () => {
|
|
|
18
18
|
},
|
|
19
19
|
children,
|
|
20
20
|
// TODO: revisit this after minor tag changes are made
|
|
21
|
-
skippedTestids: [
|
|
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
|
+
],
|
|
22
28
|
});
|
|
23
29
|
});
|
|
@@ -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:
|
|
103
|
+
background-image: var(--_ts-bg-image);
|
|
97
104
|
background-size: contain;
|
|
98
105
|
background-repeat: no-repeat;
|
|
99
106
|
border-radius: 1000px;
|
|
@@ -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-
|
|
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-
|
|
25
|
-
--theme-topbar-search-border: var(--theme-topbar-item-color, var(--black-
|
|
26
|
-
--theme-topbar-search-border-focus: var(--theme-topbar-item-color, var(--black-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
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()[
|
|
178
|
+
--theme-topbar-select-background: .set-black()[200];
|
|
163
179
|
|
|
164
180
|
// Items
|
|
165
|
-
--theme-topbar-item-color: .set-black()[
|
|
166
|
-
--theme-topbar-item-color-hover: .set-black()[
|
|
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-
|
|
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-
|
|
344
|
+
.topbar-notice-styles(transparent, transparent, var(--theme-topbar-item-color, var(--black-400)));
|
|
329
345
|
|
|
330
346
|
&:hover,
|
|
331
347
|
&:focus {
|