[Tag] Color fixes

.changeset/tiny-crabs-rhyme.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed `Tag` icon and disabled state colors

polaris-react/src/components/Tag/Tag.scss

@@ -56,7 +56,6 @@ $button-size: 20px;
       cursor: default;
       pointer-events: none;
       color: var(--p-color-text-disabled);
-      border: var(--p-border-width-025) solid var(--p-color-border-tertiary);
     }
 
     @media #{$p-breakpoints-sm-up} {
@@ -121,7 +120,7 @@ $button-size: 20px;
 
   &:hover {
     background: var(--p-color-bg-fill-tertiary-hover);
-    color: var(--p-color-icon-active);
+    color: var(--p-color-icon-hover);
     outline: var(--p-border-width-025) solid transparent;
   }
 
@@ -130,7 +129,7 @@ $button-size: 20px;
 
   &:focus-visible {
     background: var(--p-color-bg-fill-tertiary-hover);
-    color: var(--p-color-icon-active);
+    color: var(--p-color-icon-hover);
   }
 
   &:focus-visible:not(:active) {
@@ -147,7 +146,7 @@ $button-size: 20px;
     pointer-events: none;
 
     svg {
-      fill: currentColor;
+      fill: var(--p-color-icon-disabled);
     }
   }
 }

polaris-react/src/components/Tag/Tag.stories.tsx

@@ -1,7 +1,7 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {InlineStack, Icon, LegacyStack, Tag} from '@shopify/polaris';
-import {Wand} from '@shopify/polaris-icons';
+import {InlineStack, Icon, LegacyStack, Tag, Bleed} from '@shopify/polaris';
+import {Magic} from '@shopify/polaris-icons';
 
 export default {
   component: Tag,
@@ -66,10 +66,12 @@ export function WithLink() {
 export function WithCustomContent() {
   return (
     <Tag url="#">
-      <LegacyStack spacing="extraTight">
-        <Icon source={Wand} />
+      <InlineStack gap="050">
+        <Bleed marginInlineStart="100">
+          <Icon tone="base" source={Magic} />
+        </Bleed>
         <span>Wholesale</span>
-      </LegacyStack>
+      </InlineStack>
     </Tag>
   );
 }