Fix navigation text contrast (#3742)

Shopify · Dec 18, 2020 · 01b9f54 · 01b9f54
1 parent 3e42326
commit 01b9f54
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 15 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -38,6 +38,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Replaced `React.Fragment` with `li` in `ResourceList` spinner for valid markup ([#3732](https://github.com/Shopify/polaris-react/pull/3732))
 - Fixed clear button in `TextField` unintentionally closing `Popover` when clicked ([#3688](https://github.com/Shopify/polaris-react/pull/3688))
 - Added focus styles to the clear button in `TextField` ([#3688](https://github.com/Shopify/polaris-react/pull/3688))
+- Increase contrast of navigation text color ([#3742](https://github.com/Shopify/polaris-react/pull/3742))
 
 ### Documentation
 

diff --git a/documentation/Color system.md b/documentation/Color system.md
@@ -125,6 +125,9 @@ A primary interactive color, for use in primary buttons as a background color. A
 | <pre>--p-action-primary-depressed</pre>         | Used as the background color for pressed primary actions, and as the fill color for icons and the text color in navigation and tabs to communicate interaction states.  | ![](https://www.gifpng.com/64x64/003d2c/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#003d2c | ![](https://www.gifpng.com/64x64/00b388/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#00b388 |
 | <pre>--p-icon-on-primary</pre>                  | For use as a fill color for icons on primary actions. Not for use in icons on navigation and tabs.                                                                      | ![](https://www.gifpng.com/64x64/ffffff/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#ffffff | ![](https://www.gifpng.com/64x64/e6fff4/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#e6fff4 |
 | <pre>--p-text-on-primary</pre>                  | For use as a text color on primary actions. Not for use in text on navigation and tabs.                                                                                 | ![](https://www.gifpng.com/64x64/ffffff/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#ffffff | ![](https://www.gifpng.com/64x64/ffffff/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#ffffff |
+| <pre>--p-text-primary</pre>                     | For use as primary text color on background. For use in text in components such as Navigation.                                                                          | ![](https://www.gifpng.com/64x64/007b5c/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#007b5c | ![](https://www.gifpng.com/64x64/008d6a/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#008d6a |
+| <pre>--p-text-primary-hovered</pre>             | For use as primary hovered text color on background. For use in text in components such as Navigation.                                                                  | ![](https://www.gifpng.com/64x64/006c50/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#006c50 | ![](https://www.gifpng.com/64x64/009e78/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#009e78 |
+| <pre>--p-text-primary-pressed</pre>             | For use as primary pressed text color on background. For use in text in components such as Navigation.                                                                  | ![](https://www.gifpng.com/64x64/005c44/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#005c44 | ![](https://www.gifpng.com/64x64/00b085/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#00b085 |
 | <pre>--p-surface-primary-selected</pre>         | Used as a surface color to indicate selected interactive states in navigation and tabs.                                                                                 | ![](https://www.gifpng.com/64x64/f1f8f5/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#f1f8f5 | ![](https://www.gifpng.com/64x64/0c1210/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#0c1210 |
 | <pre>--p-surface-primary-selected-hovered</pre> | Used as a surface color to indicate selected interactive states that are hovered in navigation and tabs.                                                                | ![](https://www.gifpng.com/64x64/b3d0c3/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#b3d0c3 | ![](https://www.gifpng.com/64x64/28302c/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#28302c |
 | <pre>--p-surface-primary-selected-pressed</pre> | Used as a surface color to indicate selected interactive states that are pressed in navigation and tabs.                                                                | ![](https://www.gifpng.com/64x64/a2bcb0/FFFFFF?border-width=16&border-type=rectangle&border-color=f6f6f7&text=%20)<br />#a2bcb0 | ![](https://www.gifpng.com/64x64/36403b/FFFFFF?border-width=16&border-type=rectangle&border-color=0b0c0d&text=%20)<br />#36403b |

diff --git a/package.json b/package.json
@@ -81,7 +81,7 @@
   },
   "dependencies": {
     "@shopify/polaris-icons": "^4.1.0",
-    "@shopify/polaris-tokens": "^2.15.0",
+    "@shopify/polaris-tokens": "^2.16.0",
     "@types/react": "^16.9.12",
     "@types/react-dom": "^16.9.4",
     "@types/react-transition-group": "^4.4.0",

diff --git a/src/components/Navigation/Navigation.scss b/src/components/Navigation/Navigation.scss
@@ -92,7 +92,7 @@ $disabled-fade: 0.6;
 
 .Item-selected {
   font-weight: 600;
-  color: var(--p-action-primary, color('indigo', 'dark'));
+  color: var(--p-text-primary, color('indigo', 'dark'));
   background-color: var(--p-background-selected, $item-selected-background);
 
   .Navigation-newDesignLanguage & {
@@ -119,7 +119,7 @@ $disabled-fade: 0.6;
   &:hover,
   &.keyFocused {
     background-color: var(--p-background-hovered, $item-selected-background);
-    color: var(--p-action-primary-hovered, color('indigo', 'dark'));
+    color: var(--p-text-primary-hovered, color('indigo', 'dark'));
   }
 
   .keyFocused {
@@ -128,7 +128,7 @@ $disabled-fade: 0.6;
 
   &:active,
   &:active:hover {
-    color: var(--p-action-primary, color('indigo', 'dark'));
+    color: var(--p-text-primary, color('indigo', 'dark'));
     @include no-focus-ring;
 
     // stylelint-disable-next-line selector-max-specificity
@@ -312,7 +312,7 @@ $secondary-item-font-size: rem(15px);
     }
 
     &:active {
-      color: var(--p-action-primary, color('indigo', 'dark'));
+      color: var(--p-text-primary, color('indigo', 'dark'));
     }
 
     @include breakpoint-after(nav-min-window-corrected()) {
@@ -338,18 +338,18 @@ $secondary-item-font-size: rem(15px);
 
   .Item-selected {
     font-weight: 600;
-    color: var(--p-action-primary, color('indigo', 'dark'));
+    color: var(--p-text-primary, color('indigo', 'dark'));
     @include focus-ring;
 
     &:hover {
-      color: var(--p-action-primary-hovered, color('indigo', 'dark'));
+      color: var(--p-text-primary-hovered, color('indigo', 'dark'));
     }
     // stylelint-disable-next-line selector-max-class
     &.keyFocused {
-      color: var(--p-action-primary, color('indigo', 'dark'));
+      color: var(--p-text-primary, color('indigo', 'dark'));
     }
     &:active {
-      color: var(--p-action-primary, color('indigo', 'dark'));
+      color: var(--p-text-primary, color('indigo', 'dark'));
       @include no-focus-ring;
     }
   }
@@ -488,11 +488,11 @@ $secondary-item-font-size: rem(15px);
 
   &:hover {
     @include recolor-icon(
-      var(--p-action-primary, color('indigo')),
+      var(--p-text-primary, color('indigo')),
       null,
       filter('indigo')
     );
-    color: var(--p-action-primary, color('indigo'));
+    color: var(--p-text-primary, color('indigo'));
 
     .Navigation-newDesignLanguage & {
       @include recolor-icon($filter-color: filter('action'));

diff --git a/yarn.lock b/yarn.lock
@@ -2182,10 +2182,10 @@
   resolved "https://registry.yarnpkg.com/@shopify/polaris-icons/-/polaris-icons-4.1.0.tgz#296ff47d22b52cb1592e2fa81a609f8f3c912eb0"
   integrity sha512-U5ODhOJtfYHJskYUknceIjpF+EhHdMQJ54HSWsjuHAapCWbmA8ROVonAnDEM+cWeEVinpPZzQd2nE/DVJUmKkw==
 
-"@shopify/polaris-tokens@^2.15.0":
-  version "2.15.0"
-  resolved "https://registry.yarnpkg.com/@shopify/polaris-tokens/-/polaris-tokens-2.15.0.tgz#89c171611379a7bd1cd33bb6fca4370c853c78b4"
-  integrity sha512-+KGwQDfHmv8fYKkGwij3ESmqY0IkOnbENkUHCf8te/p6o1IhGu31uZT5pA4BsZR5ag7rcGAx7DK8HoqeBj/izQ==
+"@shopify/polaris-tokens@^2.16.0":
+  version "2.16.0"
+  resolved "https://registry.yarnpkg.com/@shopify/polaris-tokens/-/polaris-tokens-2.16.0.tgz#217574a37e7dcc3249fd03509508538286571596"
+  integrity sha512-uhwu//NpS9OEBIVvX04TMHwsePpRb+KmvDvTUDYpqafK0PqBvldWjyrDEs+/lZCcCBNQMZhnwX27DgQkywkW0Q==
   dependencies:
     hsluv "^0.1.0"
     tslib "^1.10.0"