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,
+        },
+    });
 });