fix(tag): make PR fixes

- add list of changed/added mods in the docs
- add background color to WHCM (dark) for Invalid Default
- add Thumbnail to Tag as peer dependency
- remove unneeded size values from size configuration object for
Storybook Chromatic view

components/tag/index.css

@@ -351,7 +351,7 @@ governing permissions and limitations under the License.
 
 .spectrum-Tag.is-invalid {
   border-color: var(--highcontrast-tag-border-color-invalid, var(--mod-tag-border-color-invalid, var(--spectrum-tag-border-color-invalid)));
-  background-color: var(--mod-tag-background-color-invalid, var(--spectrum-tag-background-color-invalid));
+  background-color: var(--highcontrast-tag-background-color-invalid, var(--mod-tag-background-color-invalid, var(--spectrum-tag-background-color-invalid)));
   color: var(--highcontrast-tag-content-color-invalid, var(--mod-tag-content-color-invalid, var(--spectrum-tag-content-color-invalid)));
 
   &:hover {
@@ -465,6 +465,8 @@ governing permissions and limitations under the License.
     &.is-invalid {
       --highcontrast-tag-border-color-invalid: Highlight;
 
+      --highcontrast-tag-background-color-invalid: ButtonFace;
+
       --highcontrast-tag-content-color-invalid: CanvasText;
       --highcontrast-tag-content-color-invalid-hover: CanvasText;
       --highcontrast-tag-content-color-invalid-active: CanvasText;

components/tag/metadata/tag.yml

@@ -11,11 +11,40 @@ sections:
       ### Version 9.0.0
       #### Spectrum 2 release
       Tag now uses Spectrum 2 tokens and specifications. Notable changes include:
-      - Borders have been made transparent for almost all variants, and therefore many mod custom properties related to borders have been removed.
       - Small background and content color changes to match design spec.
       - Thumbnails can now be used in tags.
       - New corner rounding, min/max width, and spacing tokens are used.
       - Medium size is now the default, and the class `.spectrum-Tag--sizeM` has been removed.
+      - Borders have been made transparent for almost all variants, and therefore many mod custom properties related to borders have been removed.
+      - New and removed mods include:
+        - New mods:
+          - `--mod-tag-avatar-size`
+          - `--mod-tag-background-color-invalid`
+          - `--mod-tag-edge-to-clear-icon`
+          - `--mod-tag-label-line-height-cjk`
+          - `--mod-tag-label-to-clear-icon`
+          - `--mod-tag-maximum-width`
+          - `--mod-tag-minimum-width`
+          - `--mod-tag-thumbnail-size`
+          - `--mod-tag-thumbnail-spacing-inline-end`
+        - Removed mods:
+          - `--mod-tag-border-color-active`
+          - `--mod-tag-border-color-emphasized-active`
+          - `--mod-tag-border-color-emphasized-focus`
+          - `--mod-tag-border-color-emphasized-hover`
+          - `--mod-tag-border-color-hover`
+          - `--mod-tag-border-color-invalid-active`
+          - `--mod-tag-border-color-invalid-focus`
+          - `--mod-tag-border-color-invalid-hover`
+          - `--mod-tag-border-color-invalid-selected`
+          - `--mod-tag-border-color-invalid-selected-active`
+          - `--mod-tag-border-color-invalid-selected-focus`
+          - `--mod-tag-border-color-invalid-selected-hover`
+          - `--mod-tag-border-color-selected-active`
+          - `--mod-tag-border-color-selected-focus`
+          - `--mod-tag-border-color-selected-hover`
+          - `--mod-tag-clear-button-spacing-inline-end`
+          - `--mod-tag-clear-button-spacing-inline-start`
 
       ### Versions prior to 9.0.0
       #### Pluralized classes changed to singular

components/tag/package.json

@@ -18,6 +18,7 @@
     "@spectrum-css/avatar": ">=6",
     "@spectrum-css/clearbutton": ">=5",
     "@spectrum-css/icon": ">=6",
+    "@spectrum-css/thumbnail": ">=5",
     "@spectrum-css/tokens": "^14.0.0-next.4"
   },
   "peerDependenciesMeta": {

components/tag/stories/tag.stories.js

@@ -241,13 +241,9 @@ const Sizes = (args) =>
 				size: "s",
 				content: [
 					{
-						xxs: "Extra-extra-small",
-						xs: "Extra-small",
 						s: "Small",
 						m: "Medium",
 						l: "Large",
-						xl: "Extra-large",
-						xxl: "Extra-extra-large",
 					}[size],
 				]
 			})}