diff --git a/UNRELEASED.md b/UNRELEASED.md index 05ebbf379d3..dcc53508a41 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -16,6 +16,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### Bug fixes +- Removed `Navigation.Item` color change when focused ([#3562](https://github.com/Shopify/polaris-react/pull/3562)) + ### Documentation ### Development workflow diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss index 06554fce0b7..c1aac7df03f 100644 --- a/src/components/Navigation/Navigation.scss +++ b/src/components/Navigation/Navigation.scss @@ -132,7 +132,7 @@ $disabled-fade: 0.6; &:active, &:active:hover { - color: var(--p-text, color('indigo', 'dark')); + color: var(--p-action-primary, color('indigo', 'dark')); @include no-focus-ring; // stylelint-disable-next-line selector-max-specificity @@ -300,8 +300,7 @@ $secondary-item-font-size: rem(15px); } } - &:hover, - &:focus { + &:hover { color: var(--p-text-subdued, color('indigo', 'dark')); } @@ -317,7 +316,7 @@ $secondary-item-font-size: rem(15px); } &:active { - color: var(--p-text, color('indigo', 'dark')); + color: var(--p-action-primary, color('indigo', 'dark')); } @include breakpoint-after(nav-min-window-corrected()) { @@ -354,7 +353,7 @@ $secondary-item-font-size: rem(15px); color: var(--p-action-primary, color('indigo', 'dark')); } &:active { - color: var(--p-action-primary-pressed, color('indigo', 'dark')); + color: var(--p-action-primary, color('indigo', 'dark')); @include no-focus-ring; } }