diff --git a/.changeset/healthy-emus-pump.md b/.changeset/healthy-emus-pump.md new file mode 100644 index 00000000000..f81b9bd6390 --- /dev/null +++ b/.changeset/healthy-emus-pump.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Update tokens for border of `Tabs` on hover and pressed state to create better quality interaction. diff --git a/polaris-react/src/components/Tabs/Tabs.scss b/polaris-react/src/components/Tabs/Tabs.scss index b140358606e..4791bffadc7 100644 --- a/polaris-react/src/components/Tabs/Tabs.scss +++ b/polaris-react/src/components/Tabs/Tabs.scss @@ -63,7 +63,7 @@ $item-vertical-padding: $item-min-height * 0.5; background-color: transparent; // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY &::before { - background-color: var(--p-color-border-hover); + background-color: var(--p-color-bg-strong-hover); } } } @@ -73,7 +73,7 @@ $item-vertical-padding: $item-min-height * 0.5; background-color: transparent; // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY &::before { - background: var(--p-color-bg-primary-subdued-active); + background-color: var(--p-color-bg-strong-active); } } } diff --git a/polaris-react/src/components/Tag/Tag.scss b/polaris-react/src/components/Tag/Tag.scss index 1c5cb47eec9..58cf1ccea05 100644 --- a/polaris-react/src/components/Tag/Tag.scss +++ b/polaris-react/src/components/Tag/Tag.scss @@ -48,7 +48,7 @@ $button-size: 20px; } &:active { - background: var(--p-color-bg-strong-active); + background: var(--p-color-bg-strong-hover); } &:disabled {