From 1c59e0b26b21a6235264e22695a6918278abe3af Mon Sep 17 00:00:00 2001 From: Joe Thomas Date: Mon, 17 Apr 2023 14:29:15 -0500 Subject: [PATCH 1/3] Update Tabs interactive states Updated hover and active state of tabs to both use bg tokens for background css style as well as update active state color to remain gray vs turn to bright green. --- polaris-react/src/components/Tabs/Tabs.scss | 4 ++-- polaris-react/src/components/Tag/Tag.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) 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 { From 203185d104380b2f96339bf4ad5d5f3af031c281 Mon Sep 17 00:00:00 2001 From: Joe Thomas Date: Mon, 17 Apr 2023 14:30:45 -0500 Subject: [PATCH 2/3] Create healthy-emus-pump.md --- .changeset/healthy-emus-pump.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/healthy-emus-pump.md diff --git a/.changeset/healthy-emus-pump.md b/.changeset/healthy-emus-pump.md new file mode 100644 index 00000000000..9d3eb71026e --- /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. From 6fe4e6302e9b599cd3991a8c817f918d24e6a76f Mon Sep 17 00:00:00 2001 From: Alex Page Date: Tue, 18 Apr 2023 08:39:11 +1000 Subject: [PATCH 3/3] Update .changeset/healthy-emus-pump.md Co-authored-by: Aaron Casanova <32409546+aaronccasanova@users.noreply.github.com> --- .changeset/healthy-emus-pump.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/healthy-emus-pump.md b/.changeset/healthy-emus-pump.md index 9d3eb71026e..f81b9bd6390 100644 --- a/.changeset/healthy-emus-pump.md +++ b/.changeset/healthy-emus-pump.md @@ -2,4 +2,4 @@ '@shopify/polaris': patch --- -Update tokens for border of tabs on hover and pressed state to create better quality interaction. +Update tokens for border of `Tabs` on hover and pressed state to create better quality interaction.