[Navigation] Adjust :active color for selected items (#3562)

Author: Alex Page

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

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;
     }
   }