fix(chrome): improve custom Nav color contrast (#1642)

Author: jzempel

packages/chrome/.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "index.esm.js": {
-    "bundled": 55538,
-    "minified": 42377,
-    "gzipped": 9070,
+    "bundled": 55534,
+    "minified": 42373,
+    "gzipped": 9077,
     "treeshaked": {
       "rollup": {
-        "code": 31977,
+        "code": 31973,
         "import_statements": 762
       },
       "webpack": {
-        "code": 35113
+        "code": 35109
       }
     }
   },
   "index.cjs.js": {
-    "bundled": 60683,
-    "minified": 47256,
-    "gzipped": 9438
+    "bundled": 60679,
+    "minified": 47252,
+    "gzipped": 9445
   }
 }

packages/chrome/src/elements/nav/NavItem.spec.tsx

@@ -143,7 +143,7 @@ describe('NavItem', () => {
 
       expect(container.firstChild!.firstChild).toHaveStyleRule(
         'background-color',
-        'rgba(255,255,255,0.3)'
+        'rgba(255,255,255,0.4)'
       );
     });
 
@@ -156,7 +156,7 @@ describe('NavItem', () => {
 
       expect(container.firstChild!.firstChild).toHaveStyleRule(
         'background-color',
-        'rgba(0,0,0,0.3)'
+        'rgba(0,0,0,0.4)'
       );
     });
   });

packages/chrome/src/styled/nav/StyledNav.ts

@@ -13,7 +13,7 @@ const COMPONENT_ID = 'chrome.nav';
 const colorStyles = (props: IStyledNavProps) => {
   const shade = props.isDark || props.isLight ? 600 : 700;
   const backgroundColor = getColor(props.hue, shade, props.theme);
-  const foregroundColor = props.isLight ? props.theme.palette.grey[800] : props.theme.palette.white;
+  const foregroundColor = props.isLight ? props.theme.palette.black : props.theme.palette.white;
 
   return css`
     background-color: ${backgroundColor};

packages/chrome/src/styled/nav/StyledNavItem.ts

@@ -33,9 +33,9 @@ const colorStyles = (props: IStyledNavItemProps) => {
 
   if (isCurrent) {
     if (isLight) {
-      currentColor = rgba(DARK, 0.3);
+      currentColor = rgba(DARK, 0.4);
     } else if (isDark) {
-      currentColor = rgba(LIGHT, 0.3);
+      currentColor = rgba(LIGHT, 0.4);
     } else {
       currentColor = getColor(hue, 500, theme);
     }