codemods: Replacing use of functions in makeStyles with direct use of tokens

change/@fluentui-codemods-9986d460-b596-4bbe-b4ff-70db558a7cc7.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "codemods: Replacing use of functions in makeStyles with direct use of tokens.",
+  "packageName": "@fluentui/codemods",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-theme-29a85799-2552-40b5-bf1b-9c0c4372f1a4.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "react-theme: Exporting token to css variable mapping.",
+  "packageName": "@fluentui/react-theme",
+  "email": "Humberto.Morimoto@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/codemods/src/codeMods/mods/v9ThemeFlattening/v9ThemeFlattening.mod.ts

@@ -107,7 +107,7 @@ const v9ThemeFlattening: CodeMod = {
           const nodeText = node.getText();
 
           if (
-            (nodeText.startsWith('theme.global') || nodeText.startsWith('theme.alias')) &&
+            (nodeText.startsWith('tokens.global') || nodeText.startsWith('tokens.alias')) &&
             nodeText.indexOf('.', 6) !== -1
           ) {
             const newToken = renameToken(nodeText);

packages/codemods/src/codeMods/tests/mock/v9/mMakeStylesDeep.ts

@@ -1,28 +1,30 @@
 // @ts-nocheck
+import { tokens } from '@fluentui/react-theme';
+
 const makeStyles = () => null;
 
 export const useStylesA = makeStyles({
-  neutral: theme => ({
-    border: `5px solid ${theme.alias.color.neutral.neutralStroke1}`,
-    color: theme.alias.color.neutral.neutralForeground1,
-  }),
-  colors: theme => ({
-    border: `5px solid ${theme.alias.color.blue.border2}`,
-    color: theme.alias.color.marigold.foreground2,
-  }),
-  shadow: theme => ({
-    boxShadow: theme.alias.shadow.shadow8,
-  }),
-  border: theme => ({
-    borderRadius: theme.global.borderRadius.circular,
-  }),
-  stroke: theme => ({
-    borderBottomWidth: theme.global.strokeWidth.thin,
-  }),
-  type: theme => ({
-    fontFamily: theme.global.type.fontFamilies.base,
-    fontSize: theme.global.type.fontSizes.base[300],
-    lineHeight: theme.global.type.lineHeights.base[300],
-    fontWeight: theme.global.type.fontWeights.regular,
-  }),
+  neutral: {
+    border: `5px solid ${tokens.colorNeutralStroke1}`,
+    color: tokens.colorNeutralForeground1,
+  },
+  colors: {
+    border: `5px solid ${tokens.colorPaletteBlueBorder2}`,
+    color: tokens.colorPaletteMarigoldForeground2,
+  },
+  shadow: {
+    boxShadow: tokens.shadow8,
+  },
+  border: {
+    borderRadius: tokens.borderRadiusCircular,
+  },
+  stroke: {
+    borderBottomWidth: tokens.strokeWidthThin,
+  },
+  type: {
+    fontFamily: tokens.fontFamilyBase,
+    fontSize: tokens.fontSizeBase300,
+    lineHeight: tokens.lineHeightBase300,
+    fontWeight: tokens.fontWeightRegular,
+  },
 });

packages/codemods/src/codeMods/tests/v9ThemeFlattening/v9ThemeFlattening.test.ts

@@ -14,32 +14,34 @@ describe('v9: Theme flattening', () => {
     v9ThemeFlattening.run(file);
 
     expect(file.getText()).toMatchInlineSnapshot(`
-      "const makeStyles = () => null;
+      "import { tokens } from '@fluentui/react-theme';
+
+      const makeStyles = () => null;
 
       export const useStylesA = makeStyles({
-        neutral: theme => ({
-          border: \`5px solid \${theme.colorNeutralStroke1}\`,
-          color: theme.colorNeutralForeground1,
-        }),
-        colors: theme => ({
-          border: \`5px solid \${theme.colorPaletteBlueBorder2}\`,
-          color: theme.colorPaletteMarigoldForeground2,
-        }),
-        shadow: theme => ({
-          boxShadow: theme.shadow8,
-        }),
-        border: theme => ({
-          borderRadius: theme.borderRadiusCircular,
-        }),
-        stroke: theme => ({
-          borderBottomWidth: theme.strokeWidthThin,
-        }),
-        type: theme => ({
-          fontFamily: theme.fontFamilyBase,
-          fontSize: theme.fontSizeBase300,
-          lineHeight: theme.lineHeightBase300,
-          fontWeight: theme.fontWeightRegular,
-        }),
+        neutral: {
+          border: \`5px solid \${tokens.colorNeutralStroke1}\`,
+          color: tokens.colorNeutralForeground1,
+        },
+        colors: {
+          border: \`5px solid \${tokens.colorPaletteBlueBorder2}\`,
+          color: tokens.colorPaletteMarigoldForeground2,
+        },
+        shadow: {
+          boxShadow: tokens.shadow8,
+        },
+        border: {
+          borderRadius: tokens.borderRadiusCircular,
+        },
+        stroke: {
+          borderBottomWidth: tokens.strokeWidthThin,
+        },
+        type: {
+          fontFamily: tokens.fontFamilyBase,
+          fontSize: tokens.fontSizeBase300,
+          lineHeight: tokens.lineHeightBase300,
+          fontWeight: tokens.fontWeightRegular,
+        },
       });
       "
     `);

packages/react-theme/etc/react-theme.api.md

@@ -409,6 +409,9 @@ export const teamsLightTheme: Theme;
 // @public (undocumented)
 export type Theme = FontSizeTokens & LineHeightTokens & BorderRadiusTokens & StrokeWidthTokens & ShadowTokens & ShadowBrandTokens & FontFamilyTokens & FontWeightTokens & ColorPaletteTokens & ColorTokens;
 
+// @public (undocumented)
+export const tokens: Record<keyof Theme, string>;
+
 // @public (undocumented)
 export const webDarkTheme: Theme;
 

packages/react-theme/src/global/index.ts

@@ -2,3 +2,4 @@ export * from './colors';
 export * from './fonts';
 export * from './strokeWidths';
 export * from './borderRadius';
+export * from './tokens';