feat(react-nav-preview): Set Nav drawer background color (microsoft#3…

…1221)
radium-v · Apr 29, 2024 · 41f064d · 41f064d
1 parent 37bf5ae
commit 41f064d
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/.../react-components/react-nav-preview/src/components/NavDrawer/useNavDrawerStyles.styles.ts b/.../react-components/react-nav-preview/src/components/NavDrawer/useNavDrawerStyles.styles.ts
@@ -2,6 +2,7 @@ import { makeStyles, mergeClasses } from '@griffel/react';
 import type { InlineDrawerSlots } from '@fluentui/react-drawer';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import type { NavDrawerState } from './NavDrawer.types';
+import { navItemTokens } from '../sharedNavStyles.styles';
 
 export const navDrawerClassNames: SlotClassNames<InlineDrawerSlots> = {
   root: 'fui-NavDrawer',
@@ -13,6 +14,7 @@ export const navDrawerClassNames: SlotClassNames<InlineDrawerSlots> = {
 const useStyles = makeStyles({
   root: {
     width: '260px', // per spec
+    backgroundColor: navItemTokens.backgroundColor,
   },
 });
 

diff --git a/packages/react-components/react-nav-preview/src/components/sharedNavStyles.styles.ts b/packages/react-components/react-nav-preview/src/components/sharedNavStyles.styles.ts
@@ -8,6 +8,9 @@ export const navItemTokens = {
   indicatorOffset: 18,
   indicatorWidth: 4,
   indicatorHeight: 20,
+  backgroundColor: tokens.colorNeutralBackground4,
+  backgroundColorHover: tokens.colorNeutralBackground4Hover,
+  backgroundColorPressed: tokens.colorNeutralBackground4Pressed,
 };
 
 /**
@@ -21,17 +24,17 @@ export const useRootDefaultClassName = makeResetStyles({
   justifyContent: 'start',
   gap: tokens.spacingVerticalL,
   padding: tokens.spacingVerticalMNudge,
-  backgroundColor: tokens.colorNeutralBackground4,
+  backgroundColor: navItemTokens.backgroundColor,
   borderRadius: tokens.borderRadiusMedium,
   color: tokens.colorNeutralForeground2,
   textDecorationLine: 'none',
   border: 'none',
   ...typographyStyles.body1,
   ':hover': {
-    backgroundColor: tokens.colorNeutralBackground4Hover,
+    backgroundColor: navItemTokens.backgroundColorHover,
   },
   ':active': {
-    backgroundColor: tokens.colorNeutralBackground4Pressed,
+    backgroundColor: navItemTokens.backgroundColorPressed,
   },
 });