Skip to content

Commit 0a15490

Browse files
aaronshekeyaaronshekey
authored
Tag theming refinements (#717)
1 parent 91c63b4 commit 0a15490

File tree

4 files changed

+16
-53
lines changed

4 files changed

+16
-53
lines changed

‎docs/product/components/tags.html‎

Lines changed: 0 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -108,26 +108,6 @@
108108
</div>
109109
</div>
110110
</div>
111-
112-
{% header "h3", "Themed" %}
113-
<div class="stacks-preview">
114-
{% highlight html %}
115-
<div class="d-flex gs4">
116-
<a class="flex--item s-tag s-tag__themed" href="#">asp-net</a>
117-
<a class="flex--item s-tag s-tag__themed" href="#">netscape <span class="s-tag--dismiss">@Svg.ClearSm</span></a>
118-
<a class="flex--item s-tag s-tag__themed" href="#"><img class="s-tag--sponsor" src="https://i.stack.imgur.com/gfrSH.png" width="18" height="16" alt="SQL Server"> sql-server</a>
119-
<a class="flex--item s-tag s-tag__themed is-selected" href="#">razor <span class="s-tag--dismiss">@Svg.ClearSm</span></a>
120-
</div>
121-
{% endhighlight %}
122-
<div class="stacks-preview--example">
123-
<div class="d-flex gs4 fw-wrap">
124-
<a class="flex--item s-tag s-tag__themed" href="#">asp-net</a>
125-
<a class="flex--item s-tag s-tag__themed" href="#">netscape <span class="s-tag--dismiss">{% icon "ClearSm" %}</span></a>
126-
<a class="flex--item s-tag s-tag__themed" href="#"><img class="s-tag--sponsor" src="https://i.stack.imgur.com/gfrSH.png" width="18" height="16" alt="SQL Server"> sql-server</a>
127-
<a class="flex--item s-tag s-tag__themed is-selected" href="#">razor <span class="s-tag--dismiss">{% icon "ClearSm" %}</span></a>
128-
</div>
129-
</div>
130-
</div>
131111
</section>
132112

133113
<section class="stacks-section">

‎lib/css/base/_stacks-configuration-dynamic.less‎

Lines changed: 4 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -74,22 +74,12 @@
7474

7575
// DEPRECATED will be removed in a future release
7676
// Tags
77-
@tags-border: transparent;
78-
@tags-background: var(--powder-100);
79-
@tags-color: var(--powder-700);
80-
@tags-hover-border: transparent;
81-
@tags-hover-background: var(--powder-200);
82-
@tags-hover-color: var(--powder-800);
83-
@tags-selected-border: transparent;
84-
@tags-selected-background: var(--powder-300);
85-
@tags-selected-color: var(--powder-900);
86-
87-
@tags-moderator-border: var(--red-100);
77+
@tags-moderator-border: var(--red-200);
8878
@tags-moderator-background: var(--red-050);
89-
@tags-moderator-color: var(--red-600);
90-
@tags-moderator-hover-border: var(--red-200);
79+
@tags-moderator-color: var(--red-800);
80+
@tags-moderator-hover-border: var(--red-300);
9181
@tags-moderator-hover-background: var(--red-100);
92-
@tags-moderator-hover-color: var(--red-700);
82+
@tags-moderator-hover-color: var(--red-900);
9383
@tags-moderator-selected-border: var(--red-400);
9484
@tags-moderator-selected-background: var(--red-200);
9585
@tags-moderator-selected-color: var(--red-800);

‎lib/css/components/_stacks-tags.less‎

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
background-color: transparent;
2727

2828
&:hover {
29-
color: @white; // We want this color to remain fixed regardless of dark mode
29+
color: @background;
3030
background-color: @color;
3131

3232
.highcontrast-mode({
@@ -82,12 +82,12 @@
8282
vertical-align: middle;
8383
white-space: nowrap;
8484

85-
.s-tag-styles(@tags-border, @tags-background, @tags-color);
85+
.s-tag-styles(var(--theme-tag-border-color), var(--theme-tag-background-color), var(--theme-tag-color));
8686

8787
.highcontrast-mode({ text-decoration: none; });
8888

8989
&.is-selected {
90-
.s-tag-selected-styles(@tags-selected-border, @tags-selected-background, @tags-selected-color);
90+
.s-tag-selected-styles(transparent, var(--theme-secondary-200), var(--theme-secondary-900));
9191
}
9292

9393
// -- SIZES
@@ -118,7 +118,7 @@
118118

119119
a.s-tag:not(.is-selected) {
120120
#stacks-internals #load-config();
121-
.s-tag-hover-styles(@tags-hover-border, @tags-hover-background, @tags-hover-color);
121+
.s-tag-hover-styles(var(--theme-tag-hover-border-color), var(--theme-tag-hover-background-color), var(--theme-tag-hover-color));
122122
}
123123

124124
// $$ DISMISS ICON
@@ -207,18 +207,3 @@ a.s-tag__muted:not(.is-selected) {
207207
#stacks-internals #load-config();
208208
.s-tag-hover-styles(@tags-muted-hover-border, @tags-muted-hover-background, @tags-muted-hover-color);
209209
}
210-
211-
// $$ Themed Tag
212-
// ---------------------------------------------------------------------------
213-
.s-tag__themed {
214-
#stacks-internals #load-config();
215-
.s-tag-styles(var(--theme-primary-300), var(--theme-primary-050), var(--theme-primary-700));
216-
217-
&.is-selected {
218-
.s-tag-selected-styles(transparent, var(--theme-primary-200), var(--theme-primary-900));
219-
}
220-
}
221-
a.s-tag__themed:not(.is-selected) {
222-
#stacks-internals #load-config();
223-
.s-tag-hover-styles(var(--theme-primary-400), var(--theme-primary-100), var(--theme-primary-900));
224-
}

‎lib/css/exports/_stacks-constants-colors.less‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,14 @@
236236
--theme-button-outlined-border-color: var(--theme-secondary-300);
237237
--theme-button-outlined-selected-border-color: var(--theme-secondary-400);
238238

239+
// Tags
240+
--theme-tag-color: var(--theme-secondary-800);
241+
--theme-tag-background-color: var(--theme-secondary-075);
242+
--theme-tag-border-color: transparent;
243+
--theme-tag-hover-color: var(--theme-secondary-900);
244+
--theme-tag-hover-background-color: var(--theme-secondary-100);
245+
--theme-tag-hover-border-color: transparent;
246+
239247
// Topbar
240248
--theme-topbar-height: @su48;
241249
--theme-topbar-background-color: var(--black-025);

0 commit comments

Comments
 (0)