fix(chrome): consistent focus style for sub nav items (#1558)

Author: Francois-Esquire

packages/chrome/.size-snapshot.json

@@ -1,21 +1,21 @@
 {
   "index.esm.js": {
-    "bundled": 56030,
-    "minified": 42856,
-    "gzipped": 9010,
+    "bundled": 56150,
+    "minified": 42928,
+    "gzipped": 9026,
     "treeshaked": {
       "rollup": {
-        "code": 32461,
+        "code": 32509,
         "import_statements": 676
       },
       "webpack": {
-        "code": 35560
+        "code": 35608
       }
     }
   },
   "index.cjs.js": {
-    "bundled": 61121,
-    "minified": 47691,
-    "gzipped": 9359
+    "bundled": 61241,
+    "minified": 47763,
+    "gzipped": 9376
   }
 }

packages/chrome/src/elements/subnav/CollapsibleSubNavItem.tsx

@@ -16,12 +16,14 @@ import {
   StyledSubNavItemIconWrapper,
   StyledSubNavItemIcon
 } from '../../styled';
+import { useChromeContext } from '../../utils/useChromeContext';
 
 /**
  * @extends ButtonHTMLAttributes<HTMLButtonElement>
  */
 export const CollapsibleSubNavItem = React.forwardRef<HTMLDivElement, ICollapsibleSubNavItemProps>(
   ({ header, children, isExpanded: controlledExpanded, onChange, ...other }, ref) => {
+    const { isDark, isLight } = useChromeContext();
     const panelRef = useRef<HTMLDivElement>();
     const [internalExpanded, setInternalExpanded] = useState(controlledExpanded);
     const expanded = getControlledValue(controlledExpanded, internalExpanded);
@@ -50,6 +52,8 @@ export const CollapsibleSubNavItem = React.forwardRef<HTMLDivElement, ICollapsib
       <div ref={ref}>
         <div {...getHeaderProps({ ariaLevel: 2 })}>
           <StyledSubNavItemHeader
+            isDark={isDark}
+            isLight={isLight}
             {...getTriggerProps({
               isExpanded: expanded,
               index: 0,