From 7869256e78988d4fb9e499d1c615e796581fa8e1 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Wed, 17 Nov 2021 11:34:53 -0500 Subject: [PATCH 1/4] [Navigation] Fix icon filter colors --- src/components/Navigation/Navigation.scss | 15 +++++++-------- src/components/Navigation/README.md | 12 ++++++++++-- src/components/Navigation/_variables.scss | 11 +++++++---- 3 files changed, 24 insertions(+), 14 deletions(-) diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index 11e76767180..235fb4e3efb 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), transparent, - $filter-color: var(--p-action-primary) + $filter-color: var(--p-filter-icon-action) ); background: var(--p-background-hovered); @media (-ms-high-contrast: active) { @include recolor-icon( - $fill-color: var(--p-icon-on-interactive), - $filter-color: var(--p-icon-on-interactive) + $fill-color: var(--p-icon-interactive), + $filter-color: var(--p-filter-icon-on-interactive) ); } } @@ -380,13 +380,13 @@ $secondary-item-font-size: rem(15px); @media (-ms-high-contrast: active) { @include recolor-icon( $fill-color: var(--p-icon-on-interactive), - $filter-color: var(--p-icon-on-interactive) + $filter-color: var(--p-filter-icon-on-interactive) ); } } &:hover { - @include recolor-icon($filter-color: var(--p-icon-on-interactive)); + @include recolor-icon($filter-color: var(--p-filter-icon)); } &:focus { @@ -419,9 +419,8 @@ $secondary-item-font-size: rem(15px); &:hover { @include recolor-icon( - var(--p-action-primary), - null, - $filter-color: var(--p-icon-on-interactive) + $fill-color: var(--p-action-primary), + $filter-color: var(--p-filter-icon-action) ); color: var(--p-text-primary); } diff --git a/src/components/Navigation/README.md b/src/components/Navigation/README.md index dd9c831ce7e..0df13155673 100644 --- a/src/components/Navigation/README.md +++ b/src/components/Navigation/README.md @@ -493,12 +493,20 @@ This example showcases the many elements that can compose a navigation, especial { url: '/path/to/place', label: 'Icon as img', - icon: '', + icon: + '', + }, + { + url: '/', + label: 'Icon as img – Active', + icon: + '', }, { url: '/path/to/place', label: 'Other secondary action', - icon: '', + icon: + '', secondaryAction: { url: '/path/to/place/view', accessibilityLabel: 'View your online store', diff --git a/src/components/Navigation/_variables.scss b/src/components/Navigation/_variables.scss index 64aee2a0374..f1f981fd0c6 100644 --- a/src/components/Navigation/_variables.scss +++ b/src/components/Navigation/_variables.scss @@ -80,10 +80,13 @@ $nav-animation-variables: ( // 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%) + --p-filter-icon: brightness(0) saturate(100%) invert(36%) sepia(13%) saturate(137%) hue-rotate(169deg) brightness(95%) contrast(87%); + --p-filter-icon-action: brightness(0) saturate(100%) invert(20%) sepia(59%) + saturate(5557%) hue-rotate(162deg) brightness(95%) contrast(101%); + --p-filter-icon-on-interactive: brightness(0) saturate(100%) invert(100%); - @include recolor-icon(var(--p-icon), transparent, var(--p-icon-filter)); + @include recolor-icon(var(--p-icon), transparent, var(--p-filter-icon)); flex-shrink: 0; align-self: flex-start; width: nav(icon-size); @@ -99,7 +102,7 @@ $nav-animation-variables: ( .Item:hover &, .Item.keyFocused & { - @include recolor-icon(var(--p-icon), transparent, var(--p-icon)); + @include recolor-icon(var(--p-icon), transparent, var(--p-filter-icon)); } .Item-selected &, @@ -110,7 +113,7 @@ $nav-animation-variables: ( @include recolor-icon( var(--p-action-primary), transparent, - var(--p-icon-on-interactive) + var(--p-filter-icon-action) ); } From efdf4bbf963731179561e9396b1205efc7bbf02d Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Wed, 17 Nov 2021 11:45:20 -0500 Subject: [PATCH 2/4] Use named vars in recolor-icon --- src/components/Navigation/Navigation.scss | 17 ++++++++--------- src/components/Navigation/README.md | 4 ++-- src/components/Navigation/_variables.scss | 19 ++++++++++++------- 3 files changed, 22 insertions(+), 18 deletions(-) diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index 235fb4e3efb..425cad0ecef 100644 --- a/src/components/Navigation/Navigation.scss +++ b/src/components/Navigation/Navigation.scss @@ -190,7 +190,7 @@ $disabled-fade: 0.6; } .SecondaryAction { - @include recolor-icon(var(--p-icon)); + @include recolor-icon($fill-color: var(--p-icon)); display: flex; align-items: center; height: nav(mobile-height); @@ -206,9 +206,8 @@ $disabled-fade: 0.6; &:focus, &:active { @include recolor-icon( - var(--p-icon-hovered), - transparent, - $filter-color: var(--p-filter-icon-action) + $fill-color: var(--p-icon-hovered), + $filter-color: var(--p-filter-icon-action-primary) ); background: var(--p-background-hovered); @@ -228,7 +227,7 @@ $disabled-fade: 0.6; &:active { @include no-focus-ring; - @include recolor-icon(var(--p-icon-pressed)); + @include recolor-icon($fill-color: var(--p-icon-pressed)); background: var(--p-background-pressed); } @@ -358,7 +357,7 @@ $secondary-item-font-size: rem(15px); .Action { @include unstyled-button; - @include recolor-icon(var(--p-icon)); + @include recolor-icon($fill-color: var(--p-icon)); display: flex; align-items: center; height: nav(mobile-nav-height); @@ -375,7 +374,7 @@ $secondary-item-font-size: rem(15px); &:hover, &:focus { background: var(--p-background-hovered); - @include recolor-icon(var(--p-icon-hovered), transparent); + @include recolor-icon($fill-color: var(--p-icon-hovered)); @media (-ms-high-contrast: active) { @include recolor-icon( @@ -401,7 +400,7 @@ $secondary-item-font-size: rem(15px); // stylelint-disable-next-line selector-max-specificity &:active, &:active:hover { - @include recolor-icon(var(--p-icon-pressed)); + @include recolor-icon($fill-color: var(--p-icon-pressed)); background: var(--p-background-pressed); @include no-focus-ring; } @@ -420,7 +419,7 @@ $secondary-item-font-size: rem(15px); &:hover { @include recolor-icon( $fill-color: var(--p-action-primary), - $filter-color: var(--p-filter-icon-action) + $filter-color: var(--p-filter-icon-action-primary) ); color: var(--p-text-primary); } diff --git a/src/components/Navigation/README.md b/src/components/Navigation/README.md index 0df13155673..8f43d2923d0 100644 --- a/src/components/Navigation/README.md +++ b/src/components/Navigation/README.md @@ -173,7 +173,7 @@ Use to present a navigation menu in the [frame](https://polaris.shopify.com/comp Date: Wed, 17 Nov 2021 11:52:42 -0500 Subject: [PATCH 3/4] format md --- src/components/Navigation/README.md | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/components/Navigation/README.md b/src/components/Navigation/README.md index 8f43d2923d0..5a5bad386ef 100644 --- a/src/components/Navigation/README.md +++ b/src/components/Navigation/README.md @@ -493,20 +493,17 @@ This example showcases the many elements that can compose a navigation, especial { url: '/path/to/place', label: 'Icon as img', - icon: - '', + icon: '', }, { url: '/', label: 'Icon as img – Active', - icon: - '', + icon: '', }, { url: '/path/to/place', label: 'Other secondary action', - icon: - '', + icon: '', secondaryAction: { url: '/path/to/place/view', accessibilityLabel: 'View your online store', From 37480889201b93abcbb4ef9d92eea63608219300 Mon Sep 17 00:00:00 2001 From: Kyle Durand Date: Wed, 17 Nov 2021 12:14:20 -0500 Subject: [PATCH 4/4] Fix a whoopsies --- src/components/Navigation/Navigation.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index 425cad0ecef..6c8f21029dd 100644 --- a/src/components/Navigation/Navigation.scss +++ b/src/components/Navigation/Navigation.scss @@ -213,7 +213,7 @@ $disabled-fade: 0.6; @media (-ms-high-contrast: active) { @include recolor-icon( - $fill-color: var(--p-icon-interactive), + $fill-color: var(--p-icon-on-interactive), $filter-color: var(--p-filter-icon-on-interactive) ); }