fix(tag): implement tag fixes (font-weight, required) (#1727)

* fix(tag): implement tag fixes (font-weight, required)

This change fixes two issues:

1. tags should now have a bold font weight
2. consumers should be able to custom theme the required variant

It also includes updates to the docs outlining available theme variables

* regenerate visual tests; test custom theming

* Remove excess whitespace

* formatting

* update (post-summary) test images

they have tags in them

docs/product/foundation/theming.html

@@ -213,18 +213,12 @@ <h3>{{ set.name | capitalize }}</h3>
 --theme-tag-hover-background-color
 --theme-tag-hover-border-color
 --theme-tag-hover-color
---theme-tag-selected-background-color
---theme-tag-selected-border-color
---theme-tag-selected-color
 --theme-tag-required-background-color
 --theme-tag-required-border-color
 --theme-tag-required-color
 --theme-tag-required-hover-background-color
 --theme-tag-required-hover-border-color
 --theme-tag-required-hover-color
---theme-tag-required-selected-background-color
---theme-tag-required-selected-border-color
---theme-tag-required-selected-color
 --theme-topbar-accent-border
 --theme-topbar-background-color
 --theme-topbar-bottom-border

lib/components/tag/tag.less

@@ -93,8 +93,12 @@
  }
 
  &&__required:not(&__moderator) {
- --_ta-bc: var(--black-400);
- --_ta-bc-hover: var(--black-600);
+ --_ta-bc: var(--theme-tag-required-border-color, var(--theme-tag-border-color, var(--black-400)));
+ --_ta-bg: var(--theme-tag-required-background-color, var(--theme-tag-background-color, var(--black-150)));
+ --_ta-fc: var(--theme-tag-required-color, var(--theme-tag-color, var(--black-500)));
+ --_ta-bc-hover: var(--theme-tag-required-hover-border-color, var(--theme-tag-hover-border-color, var(--black-600)));
+ --_ta-bg-hover: var(--theme-tag-required-hover-background-color, var(--theme-tag-hover-background-color, var(--black-200)));
+ --_ta-fc-hover: var(--theme-tag-required-hover-color, var(--theme-tag-hover-color, var(--black-600)));
  }
 
  &__watched, // TODO: remove all single `&` watched styles once core no longer requires them
@@ -173,6 +177,7 @@
 
  align-items: center;
  display: inline-flex;
+ font-weight: 700;
  justify-content: center;
  min-width: 0;
  text-decoration: none;

lib/components/tag/tag.visual.test.ts

@@ -9,9 +9,20 @@ const children = {
  sponsor: `<img class="s-tag--sponsor" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAIAQMAAAD+wSzIAAAABlBMVEX///+/v7+jQ3Y5AAAADklEQVQI12P4AIX8EAgALgAD/aNpbtEAAAAASUVORK5CYII" width="16" height="16" alt="sponsor">sponsor`,
 };
 
+const themeStyles = `
+ --theme-tag-background-color: var(--purple-100);
+ --theme-tag-border-color: var(--purple-100);
+ --theme-tag-color: var(--purple-500);
+ --theme-tag-required-background-color: var(--green-100);
+ --theme-tag-required-border-color: var(--green-400);
+ --theme-tag-required-color: var(--green-500);
+`;
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const template = ({ component, testid }: any) => html`
- <div data-testid="${testid}" class="d-inline-block p4">${component}</div>
+const template = ({ component, testid, style = "" }: any) => html`
+ <div data-testid="${testid}" class="d-inline-block p4" style="${style}">
+ ${component}
+ </div>
 `;
 
 describe("tag", () => {
@@ -36,4 +47,25 @@ describe("tag", () => {
  includeNullModifier: false,
  },
  });
+
+ // Custom theme variables
+ runVisualTests({
+ baseClass: "s-tag",
+ variants: ["required"],
+ modifiers: {
+ global: ["custom-theme"], // added for test id purposes
+ },
+ children: {
+ default: children.default,
+ },
+ template: ({ component, testid }) =>
+ template({
+ component,
+ testid,
+ style: themeStyles,
+ }),
+ options: {
+ includeNullModifier: false,
+ },
+ });
 });