Skip to content

Commit 7233e20

Browse files
dancormierdancormier
authored
chore(tag): Simplify styling; refine examples (#2048)
* chore(tag): Simplify styling; refine examples * add changeset * bump ignored tag HC font color * sizing tweaks * regenerate visual regression test images
1 parent 35fe29b commit 7233e20

File tree

339 files changed

+781
-788
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

339 files changed

+781
-788
lines changed

‎.changeset/fuzzy-dots-notice.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@stackoverflow/stacks": patch
3+
---
4+
5+
Simplify tag styles, tweak docs

‎packages/stacks-classic/lib/components/tag/tag.less‎

Lines changed: 63 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,97 @@
11
.s-tag {
22
// Base
3-
--_ta-bc: var(--theme-tag-border-color, var(--black-300));
3+
--_ta-bc: var(--theme-tag-border-color, var(--_ta-bg));
44
--_ta-bg: var(--theme-tag-background-color, var(--black-150));
55
--_ta-fc: var(--theme-tag-color, var(--black-600));
66
// Hover
7-
--_ta-bc-hover: var(--theme-tag-hover-border-color, var(--black-300));
7+
--_ta-bc-hover: var(--theme-tag-hover-border-color, var(--_ta-bg-hover));
88
--_ta-bg-hover: var(--theme-tag-hover-background-color, var(--black-200));
99
--_ta-fc-hover: var(--theme-tag-hover-color, var(--black-600));
1010
// Other
11-
--_ta-fs: var(--fs-caption); //13px
12-
--_ta-lh: 126%;
11+
--_ta-fs: var(--fs-caption);
12+
--_ta-pb: calc(var(--_ta-pt) + var(--su1));
1313
--_ta-pl: var(--su8);
1414
--_ta-pr: var(--su8);
1515
--_ta-pt: var(--su4);
16-
--_ta-pb: var(--su4);
17-
--_ta-fc-disabled: var(--black-400);
18-
--_ta-dismiss-padding-x: var(--su2);
19-
--_ta-dismiss-padding-y: var(--su1);
20-
--_ta-br: var(--su2);
21-
--_ta-before-pl: var(--su8);
22-
2316

2417
// CONTEXTUAL STYLES
2518
.highcontrast-mode({
26-
border-width: var(--su1);
27-
--_ta-fc-disabled: var(--black-500); //Fixes contrast issues
19+
&:not(&__moderator):not(&__required) {
20+
--_ta-bc: var(--theme-tag-border-color, var(--black-300));
21+
--_ta-bc-hover: var(--theme-tag-hover-border-color, var(--black-300));
22+
23+
&.s-tag__ignored {
24+
--_ta-fc: var(--black-500);
25+
}
26+
}
2827
});
2928

3029
// MODIFIERS
3130
// Sizes
3231
&&__sm {
33-
--_ta-fs: var(--fs-fine); //12px
3432
--_ta-pl: var(--su4);
3533
--_ta-pr: var(--su4);
36-
--_ta-pt: var(--su2);
37-
--_ta-pb: var(--su2);
38-
39-
// Reduce close button padding for a better fit
40-
--_ta-dismiss-padding-y: var(--su0);
41-
--_ta-before-pl: var(--su4);
34+
--_ta-pt: var(--su1);
4235
}
43-
44-
&&__sm&&__ignored,
45-
&&__sm&&__watched {
46-
--_ta-pl: calc(var(--su-static24) - var(--su-static2)); //22px
47-
}
48-
4936
&&__lg {
50-
--_ta-fs: var(--fs-body1); //14px
51-
--_ta-pt: calc(var(--su6) - var(--su1)); //5px
52-
--_ta-pb: calc(var(--su6) - var(--su1)); //5px
37+
--_ta-fs: var(--fs-body1);
38+
--_ta-pt: var(--su4);
5339
}
5440

5541
// VARIANTS
56-
// NOTE: ignored and watched variants are used in core with the .post-tag class (in place of the base tag .s-tag)
57-
&__ignored, // TODO: remove all single `&` ignored styles once core no longer requires them
5842
&&__ignored,
59-
&__watched, // TODO: remove all single `&` watched styles once core no longer requires them
6043
&&__watched {
61-
--_ta-pl: calc(var(--su-static24) + var(--su-static2)); //26px
62-
--_ta-before-size: calc(var(--su-static16) - var(--su-static2)); // 14px
63-
64-
// --_ta-before-icon defined per variant
6544
&:before {
66-
height: var(--_ta-before-size);
67-
width: var(--_ta-before-size);
45+
// --_ta-before-icon defined per variant
6846
-webkit-mask: var(--_ta-before-icon) no-repeat center;
6947
mask: var(--_ta-before-icon) no-repeat center;
7048

7149
background-color: currentColor;
7250
content: "";
7351
display: block;
74-
left: var(--_ta-before-pl);
75-
position: absolute;
52+
height: calc(var(--su-static16) - var(--su-static2));
7653
-webkit-mask-size: contain;
77-
mask-size: contain;
54+
mask-size: contain;
55+
width: calc(var(--su-static16) - var(--su-static2));
7856
}
79-
80-
position: relative;
8157
}
8258

83-
&__ignored, // TODO: remove all single `&` ignored styles once core no longer requires them
59+
&&__deleted,
8460
&&__ignored {
85-
--_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.52 7.38 1.58 9.26A12.38 12.38 0 0 1 0 7s2.63-5.14 7.05-5.14c.66 0 1.28.12 1.86.32L7.44 3.6a3.48 3.48 0 0 0-3.92 3.78ZM5.3 9.99c.5.28 1.1.44 1.71.44 1.94 0 3.5-1.53 3.5-3.43 0-.62-.17-1.21-.47-1.72L8.7 6.6a1.73 1.73 0 0 1-2.08 2.07L5.29 10Zm6.23-6.19A12.7 12.7 0 0 1 14 7s-2.63 5.14-6.95 5.14A6.1 6.1 0 0 1 4 11.3L2.27 13l-1.4-1.36L11.9 1l1.23 1.2-1.6 1.6Z'/%3E%3C/svg%3E");
86-
--_ta-fc: var(--theme-tag-color, var(--_ta-fc-disabled));
87-
&:hover {
88-
--_ta-bg-hover: var(--theme-tag-hover-background-color, var(--_ta-bg));
89-
--_ta-fc-hover: var(--theme-tag-hover-color, var(--_ta-fc-disabled));
61+
&,
62+
&.s-tag__required:not(&__moderator),
63+
&.s-tag__moderator {
64+
--_ta-bc-hover: var(--_ta-bc);
65+
--_ta-bg-hover: var(--_ta-bg);
66+
--_ta-fc-hover: var(--_ta-fc);
9067
}
9168
}
69+
70+
// TODO SHINE this is considered inaccessible. Discuss w/ design.
71+
&&__deleted {
72+
--_ta-fc: var(--black-500);
9273

93-
&&__required,
94-
&&__moderator {
95-
border-width: var(--su1);
74+
&.s-tag__required:not(&__moderator) {
75+
--_ta-bc: var(--black-300);
76+
--_ta-fc: var(--black-400);
77+
}
9678
}
9779

98-
&&__moderator:not(&&__ignored) {
99-
--_ta-bg: var(--orange-100);
80+
// TODO SHINE this is considered inaccessible. Discuss w/ design.
81+
&&__ignored {
82+
--_ta-bg-hover: var(--_ta-bg);
83+
--_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.52 7.38 1.58 9.26A12.38 12.38 0 0 1 0 7s2.63-5.14 7.05-5.14c.66 0 1.28.12 1.86.32L7.44 3.6a3.48 3.48 0 0 0-3.92 3.78ZM5.3 9.99c.5.28 1.1.44 1.71.44 1.94 0 3.5-1.53 3.5-3.43 0-.62-.17-1.21-.47-1.72L8.7 6.6a1.73 1.73 0 0 1-2.08 2.07L5.29 10Zm6.23-6.19A12.7 12.7 0 0 1 14 7s-2.63 5.14-6.95 5.14A6.1 6.1 0 0 1 4 11.3L2.27 13l-1.4-1.36L11.9 1l1.23 1.2-1.6 1.6Z'/%3E%3C/svg%3E");
84+
--_ta-fc: var(--black-400);
85+
--_ta-fc-hover: var(--black-400);
86+
}
87+
88+
// moderator overrides other required
89+
&&__moderator {
10090
--_ta-bc: var(--orange-300);
91+
--_ta-bg: var(--orange-100);
10192
--_ta-fc: var(--orange-500);
102-
--_ta-bg-hover: var(--orange-200);
10393
--_ta-bc-hover: var(--orange-300);
94+
--_ta-bg-hover: var(--orange-200);
10495
--_ta-fc-hover: var(--orange-600);
10596
}
10697

@@ -109,58 +100,49 @@
109100
--_ta-bc-hover: var(--theme-tag-required-hover-border-color, var(--theme-tag-hover-border-color, var(--black-600)));
110101
}
111102

112-
&&__required:not(&__moderator)&__ignored {
113-
--_ta-bc-hover: var(--_ta-bc);
114-
}
115-
116-
&__watched, // TODO: remove all single `&` watched styles once core no longer requires them
117103
&&__watched {
118-
--_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
104+
--_ta-before-icon: url("data:image/svg+xml;,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='12' viewBox='0 0 14 12'%3E%3Cpath d='M7.05 1C2.63 1 0 6.5 0 6.5S2.63 12 7.05 12C11.38 12 14 6.5 14 6.5S11.37 1 7.05 1ZM7 10.17A3.59 3.59 0 0 1 3.5 6.5 3.6 3.6 0 0 1 7 2.83c1.94 0 3.5 1.65 3.5 3.67A3.57 3.57 0 0 1 7 10.17Zm0-1.84c.97 0 1.75-.81 1.75-1.83S7.97 4.67 7 4.67s-1.75.81-1.75 1.83S6.03 8.33 7 8.33Z'/%3E%3C/svg%3E");
119105
}
120106

121107
// CHILD ELEMENTS
122-
& button&--dismiss:not(.s-btn) {
123-
all: unset;
108+
// Dismiss
109+
&:has(> &--dismiss) {
110+
--_ta-pr: var(--su2);
124111
}
125-
126-
& &--dismiss,
127-
& button&--dismiss:not(.s-btn) { // Style adjustment to @Svg.ClearSm
112+
& &--dismiss {
128113
&:focus-visible {
129114
.focus-styles();
130115
}
131116

132117
&:hover {
133-
.highcontrast-mode({
134-
color: var(--white);
135-
});
136-
137118
background-color: var(--_ta-fc);
138119
color: var(--_ta-bg);
139120
}
140121

122+
all: unset;
141123
align-items: center;
142-
align-self: stretch;
143124
background-color: transparent;
144-
border-radius: var(--_ta-br);
145125
color: inherit;
146126
cursor: pointer;
147127
display: flex;
148128
justify-content: center;
149-
margin: var(--_ta-dismiss-padding-y) calc(var(--_ta-dismiss-padding-x) * -1) var(--_ta-dismiss-padding-y) calc(var(--_ta-dismiss-padding-x) * 2);
129+
margin: calc(var(--_ta-pt) * -1) 0 calc(var(--_ta-pb) * -1);
130+
padding: var(--su2);
150131
}
151132

133+
// Sponsor
134+
&:has(> &--sponsor) {
135+
--_ta-pl: var(--su2);
136+
}
152137
& &--sponsor { // The small sponsor favicon displayed within a tag
153138
img,
154139
.svg-icon {
155140
width: 100%;
156141
height: 100%;
157142
}
158143

159-
align-self: center;
160-
border-radius: var(--_ta-br);
161-
display: inline-flex;
162-
margin: calc(var(--su1) * -1) var(--su4) calc(var(--su2) * -1) var(--su0);
163144
max-width: calc(var(--su-static16) + var(--su-static2));
145+
margin: calc(var(--_ta-pt) * -1) 0 calc(var(--_ta-pb) * -1) 0;
164146
}
165147

166148
// INTERACTION
@@ -178,21 +160,16 @@
178160
}
179161

180162
background-color: var(--_ta-bg);
181-
border: var(--su0) solid var(--_ta-bc);
163+
border: var(--su-static1) solid var(--_ta-bc);
182164
color: var(--_ta-fc);
183165
font-size: var(--_ta-fs);
184-
line-height: var(--_ta-lh);
185-
padding-left: var(--_ta-pl);
186-
padding-right: var(--_ta-pr);
187-
padding-top: var(--_ta-pt);
188-
padding-bottom: var(--_ta-pb);
166+
padding: var(--_ta-pt) var(--_ta-pr) var(--_ta-pb) var(--_ta-pl);
189167

190168
align-items: center;
191169
display: inline-flex;
192-
font-weight: 400;
170+
gap: var(--su4);
193171
justify-content: center;
194-
min-width: 0;
172+
line-height: var(--lh-xs);
195173
text-decoration: none;
196-
vertical-align: middle;
197174
white-space: nowrap;
198175
}

‎packages/stacks-classic/screenshots/Chromium/baseline/s-post-summary-dark-deleted-minimal-w100-sparce.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:3b275c4c253c6242b15d364ef25b43b970f0fbdb65c3d6ef898b5e28500db4c5
3-
size 11524
2+
oid sha256:d13463a009334b71b850abdc97c1f3688e1eb1c2531d9aaea0d14d0686a529a7
3+
size 11515

‎packages/stacks-classic/screenshots/Chromium/baseline/s-post-summary-dark-deleted-minimal-w100.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:d71807a13f3d208827632f7ae0b074a8590f01e1e9dcf96e6e63e9316ddf0af6
3-
size 28543
2+
oid sha256:20bfeae526b0f0f01791326e5808041dc936c815c0024f72921885474ff90e57
3+
size 28502

‎packages/stacks-classic/screenshots/Chromium/baseline/s-post-summary-dark-ignored-minimal-w100-sparce.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:33fcee41492d061f0daf228e5eb8f6e7bdd344e0803bdce029b9fc110553a585
3-
size 11231
2+
oid sha256:a2d1d3ac91d37ec8f4672ceeb1e5c3e37d651a0a1b273e3e9d2c1f31e9db998a
3+
size 11221

‎packages/stacks-classic/screenshots/Chromium/baseline/s-post-summary-dark-ignored-minimal-w100.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:dc1f191349baef3c2bd9b3b1a1fc66acadc297f47901ebaa802fe19653c649d5
3-
size 27715
2+
oid sha256:88e1135e7315cdfa5943a988155312fe75154b503f39e5e365d09ddbb7331ce6
3+
size 27676

‎packages/stacks-classic/screenshots/Chromium/baseline/s-post-summary-dark-w100-description-lg.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:4109674406db097a510721a8c36ccc3321e16473e9a28af8a540d73c2b559b2a
3-
size 38450
2+
oid sha256:14c167e33a2de3489ac9c87330bcc8cdb9881935e43a5d00dc3dccf833262789
3+
size 38424

‎packages/stacks-classic/screenshots/Chromium/baseline/s-post-summary-dark-w100-description-md.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:eee85abd2f666c2c238dbcbfb713fddc0a536245ff6e51baca54265b193fb303
3-
size 33211
2+
oid sha256:22b7d822ea76ee5bd5de39cdeb43375f113ce128daec491eb6eef4a52c51f611
3+
size 33179

‎packages/stacks-classic/screenshots/Chromium/baseline/s-post-summary-dark-w100-description-sm.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:7ea2e5435ad013b6b02f40a427c74e6054f22dccd4f2ac5e6bc2775fdb5493d6
3-
size 22092
2+
oid sha256:c910e36163adc58fb809bbd8ff944b1cdfe38f4bf6bd4da03e6a5f26a7c45b16
3+
size 22063

‎packages/stacks-classic/screenshots/Chromium/baseline/s-post-summary-dark-watched-minimal-w100-sparce.ico‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
version https://git-lfs.github.com/spec/v1
2-
oid sha256:d216d0070690dedc66e9aea4d0dd414a8796b2a9a34d2f91ae21a89aff484e55
3-
size 11841
2+
oid sha256:331b1d49d1dd370ab98f550af9f8e7d0b8f9a53b0b1e5f7ddc6456478d63a08d
3+
size 11811

0 commit comments

Comments
 (0)