react-popover: Replacing use of functions in makeStyles with direct u…

…se of tokens (#21049) * react-theme: Exporting token to css variable mapping. * Change files * react-popover: Replacing use of functions in makeStyles with direct use of tokens. * Change files * Moving tokens.ts into src/ and out of src/global. * Update change/@fluentui-react-popover-06bae6cd-27f5-4e6b-90fa-9f12830ea985.json Co-authored-by: Oleksandr Fediashov <[email protected]> Co-authored-by: Oleksandr Fediashov <[email protected]>
microsoft · Jan 6, 2022 · 38e8f42 · 38e8f42
1 parent 9f5e897
commit 38e8f42
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/change/@fluentui-react-popover-06bae6cd-27f5-4e6b-90fa-9f12830ea985.json b/change/@fluentui-react-popover-06bae6cd-27f5-4e6b-90fa-9f12830ea985.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Replacing use of functions in makeStyles with direct use of tokens",
+  "packageName": "@fluentui/react-popover",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts b/packages/react-popover/src/components/PopoverSurface/usePopoverSurfaceStyles.ts
@@ -1,5 +1,6 @@
 import { shorthands, makeStyles, mergeClasses } from '@fluentui/react-make-styles';
 import { createArrowStyles } from '@fluentui/react-positioning';
+import { tokens } from '@fluentui/react-theme';
 import type { PopoverSize } from '../Popover/Popover.types';
 import type { PopoverSurfaceState } from './PopoverSurface.types';
 
@@ -15,24 +16,24 @@ export const arrowHeights: Record<PopoverSize, number> = {
  * Styles for the root slot
  */
 const useStyles = makeStyles({
-  root: theme => ({
-    backgroundColor: theme.colorNeutralBackground1,
-    boxShadow: theme.shadow16,
+  root: {
+    backgroundColor: tokens.colorNeutralBackground1,
+    boxShadow: tokens.shadow16,
     ...shorthands.borderRadius('4px'),
-    ...shorthands.border('1px', 'solid', theme.colorTransparentStroke),
-  }),
+    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),
+  },
 
-  inverted: theme => ({
+  inverted: {
     // TODO: neutral background inverted missing from superset and theme
-    backgroundColor: theme.colorNeutralForeground1,
-    color: theme.colorNeutralForegroundInverted,
-  }),
+    backgroundColor: tokens.colorNeutralForeground1,
+    color: tokens.colorNeutralForegroundInverted,
+  },
 
-  brand: theme => ({
-    backgroundColor: theme.colorBrandBackground,
+  brand: {
+    backgroundColor: tokens.colorBrandBackground,
     // TODO: clarify with designers what foreground color should be with brand background,
-    color: theme.colorNeutralForegroundInverted,
-  }),
+    color: tokens.colorNeutralForegroundInverted,
+  },
 
   smallPadding: () => ({
     ...shorthands.padding('12px'),