diff --git a/.changeset/tiny-crabs-rhyme.md b/.changeset/tiny-crabs-rhyme.md new file mode 100644 index 00000000000..d0b13b04269 --- /dev/null +++ b/.changeset/tiny-crabs-rhyme.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Fixed `Tag` icon and disabled state colors diff --git a/polaris-react/src/components/Tag/Tag.scss b/polaris-react/src/components/Tag/Tag.scss index f2a862377d4..bc799b26fe9 100644 --- a/polaris-react/src/components/Tag/Tag.scss +++ b/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); } } } diff --git a/polaris-react/src/components/Tag/Tag.stories.tsx b/polaris-react/src/components/Tag/Tag.stories.tsx index 9abfd4634a9..37140b214e5 100644 --- a/polaris-react/src/components/Tag/Tag.stories.tsx +++ b/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 ( - - + + + + Wholesale - + ); }