fix(Tag): update filter tags to match updated spec (#7664)

* fix(tag): increase close button size and make flush with tag edges

* fix(tag): reduce close button outline width

* fix(tag): reduce small tag padding

* fix(tag): reduce small tag close button size

* fix(tag): reduce close button spacing to text

* fix(tag): reduce high contrast tag outline

* fix(tag): add transition

Author: emyarod

packages/components/src/components/tag/_tag.scss

@@ -147,7 +147,9 @@
 
   // tags used for filtering
   .#{$prefix}--tag--filter {
-    padding-right: rem(2px);
+    padding-top: 0;
+    padding-right: 0;
+    padding-bottom: 0;
     cursor: pointer;
 
     &:hover {
@@ -156,17 +158,21 @@
   }
 
   .#{$prefix}--tag__close-icon {
+    display: flex;
     flex-shrink: 0;
-    width: rem(16px);
-    height: rem(16px);
-    margin: 0 0 0 rem(4px);
+    align-items: center;
+    justify-content: center;
+    width: rem(24px);
+    height: rem(24px);
+    margin: 0 0 0 rem(2px);
     padding: 0;
     color: currentColor;
     background-color: transparent;
     border: 0;
     border-radius: 50%;
     cursor: pointer;
-
+    transition: background-color $duration--fast-01 motion(standard, productive),
+      box-shadow $duration--fast-01 motion(standard, productive);
     svg {
       fill: currentColor;
     }
@@ -195,7 +201,7 @@
   .#{$prefix}--tag__close-icon:focus {
     border-radius: 50%;
     outline: none;
-    box-shadow: inset 0 0 0 2px $focus;
+    box-shadow: inset 0 0 0 1px $focus;
 
     // Windows, Firefox HCM Fix
     @media screen and (-ms-high-contrast: active),
@@ -206,7 +212,7 @@
   }
 
   .#{$prefix}--tag--high-contrast .#{$prefix}--tag__close-icon:focus {
-    box-shadow: inset 0 0 0 2px $inverse-focus-ui;
+    box-shadow: inset 0 0 0 1px $inverse-focus-ui;
   }
 
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled
@@ -225,7 +231,13 @@
   }
 
   .#{$prefix}--tag--sm.#{$prefix}--tag--filter {
-    padding-right: rem(2px);
+    padding-right: 0;
+  }
+
+  .#{$prefix}--tag--sm .#{$prefix}--tag__close-icon {
+    width: rem(18px);
+    height: rem(18px);
+    margin-left: rem(5px);
   }
 
   // Skeleton state