From 4c53bfc66684ba0a5f4ca132a7e2941e9c73b343 Mon Sep 17 00:00:00 2001 From: Yuraima Estevez Date: Tue, 16 Nov 2021 17:14:50 -0600 Subject: [PATCH 1/7] remove straglers --- src/components/Button/Button.scss | 8 ++++---- src/components/Navigation/_variables.scss | 2 +- src/styles/shared/_buttons.scss | 3 --- 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 023cb215218..94a23be0835 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -150,15 +150,15 @@ $stacking-order: ( } .outline { - @include button-outline(color('ink', 'lighter')); + @include button-outline(var(--p-border)); &.disabled { - @include button-outline-disabled(color('ink', 'lighter')); + @include button-outline-disabled(var(--p-border-disabled)); } } .destructive.outline { - @include button-outline(color('red')); + @include button-outline(var(--p-border-critical)); } .disabled { @@ -487,7 +487,7 @@ $stacking-order: ( // Because the outline border color has a 40% opacity, the left border appears darker than the rest of the borders because they are layered over one another. Reducing the opacity to zero for the connected disclosure when not focused gives us the expected border color. &.outline:not(:focus) { - border-left-color: rgba(color('ink', 'lighter'), 0); + border-left-color: rgba(var(--p-border-disabled), 0); } &:focus, diff --git a/src/components/Navigation/_variables.scss b/src/components/Navigation/_variables.scss index 64aee2a0374..3ec58a31fb5 100644 --- a/src/components/Navigation/_variables.scss +++ b/src/components/Navigation/_variables.scss @@ -4,7 +4,7 @@ $item-line-height-small: rem(32px); $item-line-height-large: rem(36px); // This is the only place this color is used. // stylelint-disable-next-line color-no-hex -$item-selected-background: rgba(color('indigo'), 0.12); +$item-selected-background: rgba(var(--p-background-selected), 0.12); $text-line-height: rem(20px); $nav-variables: ( mobile-spacing: rem(10px), diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss index ed424193870..c3877c40d59 100644 --- a/src/styles/shared/_buttons.scss +++ b/src/styles/shared/_buttons.scss @@ -199,9 +199,6 @@ background: transparent; // border-color: rgba($outline-color, 0.25); box-shadow: none; - // color: color('ink', 'lightest'); - - // @include recolor-icon(color('ink', 'lightest')); } @mixin button-full-width { From befbc78f52f78d9ee47ab1aa0ac6e3ae69531f39 Mon Sep 17 00:00:00 2001 From: Yuraima Estevez Date: Mon, 22 Nov 2021 11:46:08 -0600 Subject: [PATCH 2/7] removing commented out code and usused vars --- src/components/Navigation/_variables.scss | 3 --- src/styles/shared/_buttons.scss | 1 - 2 files changed, 4 deletions(-) diff --git a/src/components/Navigation/_variables.scss b/src/components/Navigation/_variables.scss index 3ec58a31fb5..89d06fac9a8 100644 --- a/src/components/Navigation/_variables.scss +++ b/src/components/Navigation/_variables.scss @@ -2,9 +2,6 @@ $item-font-size: rem(16px); $item-font-size-small: rem(14px); $item-line-height-small: rem(32px); $item-line-height-large: rem(36px); -// This is the only place this color is used. -// stylelint-disable-next-line color-no-hex -$item-selected-background: rgba(var(--p-background-selected), 0.12); $text-line-height: rem(20px); $nav-variables: ( mobile-spacing: rem(10px), diff --git a/src/styles/shared/_buttons.scss b/src/styles/shared/_buttons.scss index c3877c40d59..b6d14c1d95f 100644 --- a/src/styles/shared/_buttons.scss +++ b/src/styles/shared/_buttons.scss @@ -197,7 +197,6 @@ @mixin button-outline-disabled($outline-color) { background: transparent; - // border-color: rgba($outline-color, 0.25); box-shadow: none; } From 66a7d96feb7a4bd67c5e3076d0563f671af931eb Mon Sep 17 00:00:00 2001 From: Yuraima Estevez Date: Mon, 22 Nov 2021 13:08:02 -0600 Subject: [PATCH 3/7] hardcoding button border color --- src/components/Button/Button.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 94a23be0835..6832108df5f 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -485,9 +485,11 @@ $stacking-order: ( border-bottom-left-radius: 0; height: 100%; - // Because the outline border color has a 40% opacity, the left border appears darker than the rest of the borders because they are layered over one another. Reducing the opacity to zero for the connected disclosure when not focused gives us the expected border color. + // Note 1: Because the outline border color has a 40% opacity, the left border appears darker than the rest of the borders because they are layered over one another. Reducing the opacity to zero for the connected disclosure when not focused gives us the expected border color. + // Note 2: hardcoding this value because we can't use custom css properties in sass functions. Will clean up in a follow-up + // https://github.com/Shopify/polaris-react/pull/4655#discussion_r750793847 &.outline:not(:focus) { - border-left-color: rgba(var(--p-border-disabled), 0); + border-left-color: rgba(#d2d5d8, 0); } &:focus, From 9af3dc6019f5ed58f6bf26e7a8f52a9dcc922551 Mon Sep 17 00:00:00 2001 From: Yuraima Estevez Date: Mon, 22 Nov 2021 13:22:32 -0600 Subject: [PATCH 4/7] added unreleased line item --- UNRELEASED.md | 1 + 1 file changed, 1 insertion(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index f8bf8ff6593..21fd4fd789a 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -37,6 +37,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Remove all color() invocations ([#4636](https://github.com/Shopify/polaris-react/pull/4636)) - Cleaned up Button styling and $button-filled mixin([#4635](https://github.com/Shopify/polaris-react/pull/4635)) - Removed miscellaneous css custom properties ([#4620](https://github.com/Shopify/polaris-react/pull/4620)) +- Removed remaining color sass function uses ([#4655](https://github.com/Shopify/polaris-react/pull/4655)) ### Deprecations From abe67fdc27235a7e7357796690e4ab559ad44279 Mon Sep 17 00:00:00 2001 From: Yuraima Estevez Date: Mon, 22 Nov 2021 15:24:13 -0600 Subject: [PATCH 5/7] removing button-outline-disabled use from button --- src/components/Button/Button.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 6832108df5f..4effb3fb5f2 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -153,7 +153,8 @@ $stacking-order: ( @include button-outline(var(--p-border)); &.disabled { - @include button-outline-disabled(var(--p-border-disabled)); + background: transparent; + box-shadow: none; } } From 1ab4105ccf9d10da04b1d97f76905d7d3381d8b9 Mon Sep 17 00:00:00 2001 From: Yuraima Estevez Date: Mon, 22 Nov 2021 15:35:47 -0600 Subject: [PATCH 6/7] disable lint error --- src/components/Button/Button.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss index 4effb3fb5f2..68cd3d217a9 100644 --- a/src/components/Button/Button.scss +++ b/src/components/Button/Button.scss @@ -490,6 +490,7 @@ $stacking-order: ( // Note 2: hardcoding this value because we can't use custom css properties in sass functions. Will clean up in a follow-up // https://github.com/Shopify/polaris-react/pull/4655#discussion_r750793847 &.outline:not(:focus) { + /* stylelint-disable color-no-hex */ border-left-color: rgba(#d2d5d8, 0); } From d25be20ec3d21f2bb4d09825ebb7279177557f7a Mon Sep 17 00:00:00 2001 From: Yuraima Estevez Date: Mon, 22 Nov 2021 16:29:59 -0600 Subject: [PATCH 7/7] Update UNRELEASED.md Co-authored-by: Alex Page --- UNRELEASED.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index d7f2e2b7200..b7a80e0a9c3 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -37,8 +37,6 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t - Remove filter functions ([#4650](https://github.com/Shopify/polaris-react/pull/4650)) - Remove all color() invocations ([#4636](https://github.com/Shopify/polaris-react/pull/4636)) - Cleaned up Button styling and $button-filled mixin([#4635](https://github.com/Shopify/polaris-react/pull/4635)) -- Removed miscellaneous css custom properties ([#4620](https://github.com/Shopify/polaris-react/pull/4620)) -- Removed remaining color sass function uses ([#4655](https://github.com/Shopify/polaris-react/pull/4655)) ### Deprecations