From b12dbfb684528d7feccbeb057ba54c6880765d00 Mon Sep 17 00:00:00 2001 From: Yuraima Estevez Date: Mon, 15 Nov 2021 17:14:10 -0600 Subject: [PATCH 1/3] swapping for css custom props --- src/components/Navigation/Navigation.scss | 10 +++++----- src/components/Navigation/_variables.scss | 6 +++--- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index dcd3f19f48c..0774889bd85 100644 --- a/src/components/Navigation/Navigation.scss +++ b/src/components/Navigation/Navigation.scss @@ -208,14 +208,14 @@ $disabled-fade: 0.6; @include recolor-icon( var(--p-icon-hovered), var(--p-override-transparent), - $filter-color: filter('action') + $filter-color: var(--p-action-primary) ); background: var(--p-background-hovered); @media (-ms-high-contrast: active) { @include recolor-icon( $fill-color: color('white'), - $filter-color: filter('white') + $filter-color: var(--p-icon-on-interactive) ); } } @@ -383,13 +383,13 @@ $secondary-item-font-size: rem(15px); @media (-ms-high-contrast: active) { @include recolor-icon( $fill-color: color('white'), - $filter-color: filter('white') + $filter-color: var(--p-icon-on-interactive) ); } } &:hover { - @include recolor-icon($filter-color: filter('action')); + @include recolor-icon($filter-color: var(--p-icon-on-interactive)); } &:focus { @@ -424,7 +424,7 @@ $secondary-item-font-size: rem(15px); @include recolor-icon( var(--p-action-primary), null, - $filter-color: filter('action') + $filter-color: var(--p-icon-on-interactive) ); color: var(--p-text-primary); } diff --git a/src/components/Navigation/_variables.scss b/src/components/Navigation/_variables.scss index 6dc137caf5c..2f1884ea9d8 100644 --- a/src/components/Navigation/_variables.scss +++ b/src/components/Navigation/_variables.scss @@ -77,7 +77,7 @@ $nav-animation-variables: ( } @mixin nav-item-icon-attributes { - @include recolor-icon(var(--p-icon), transparent, filter('icon')); + @include recolor-icon(var(--p-icon), transparent, var(--p-icon)); flex-shrink: 0; align-self: flex-start; width: nav(icon-size); @@ -93,7 +93,7 @@ $nav-animation-variables: ( .Item:hover &, .Item.keyFocused & { - @include recolor-icon(var(--p-icon), transparent, filter('icon')); + @include recolor-icon(var(--p-icon), transparent, var(--p-icon)); } .Item-selected &, @@ -104,7 +104,7 @@ $nav-animation-variables: ( @include recolor-icon( var(--p-action-primary), transparent, - filter('action') + var(--p-icon-on-interactive) ); } From f433b5f1230b7a4a4515e5aac09be1d33e9e8e5d Mon Sep 17 00:00:00 2001 From: Yuraima Estevez Date: Tue, 16 Nov 2021 12:14:58 -0600 Subject: [PATCH 2/3] hardcoded icon img filter value --- src/components/Navigation/_variables.scss | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/components/Navigation/_variables.scss b/src/components/Navigation/_variables.scss index 2f1884ea9d8..2f1fe0ceddb 100644 --- a/src/components/Navigation/_variables.scss +++ b/src/components/Navigation/_variables.scss @@ -77,7 +77,13 @@ $nav-animation-variables: ( } @mixin nav-item-icon-attributes { - @include recolor-icon(var(--p-icon), transparent, var(--p-icon)); + // hardcoding this variable for now because we need to rip out all instances + // of filter() eventually but can't for this one right now. The value is the + // equivalent value for filter('icon'). + --p-icon-filter: brightness(0) saturate(100%) invert(36%) sepia(13%) + saturate(137%) hue-rotate(169deg) brightness(95%) contrast(87%); + + @include recolor-icon(var(--p-icon), transparent, var(--p-icon-filter)); flex-shrink: 0; align-self: flex-start; width: nav(icon-size); From c3f70a28b7adb435374ae06c2ab06ab319feb924 Mon Sep 17 00:00:00 2001 From: Yuraima Estevez Date: Tue, 16 Nov 2021 12:28:14 -0600 Subject: [PATCH 3/3] update UNRELEASED --- UNRELEASED.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/UNRELEASED.md b/UNRELEASED.md index bfe3649665e..00279d52b85 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -22,6 +22,7 @@ Use [the changelog guidelines](/documentation/Versioning%20and%20changelog.md) t ### Code quality -Clean up Button styling and $button-filled mixin([#4635](https://github.com/Shopify/polaris-react/pull/4635)) +- Clean up Button styling and $button-filled mixin([#4635](https://github.com/Shopify/polaris-react/pull/4635)) +- Remove filter functions ([#4650](https://github.com/Shopify/polaris-react/pull/4650)) ### Deprecations