Change default theme from a const object to a function that returns t…

…he object (#2483)

### Platforms Impacted
- [x] iOS
- [x] macOS
- [x] win32 (Office)
- [x] windows
- [x] android

### Description of changes

Update the default theme fluent object to be a method that returns an object. 

This issue is blocking #2481:
- the updated designs for iOS tokens include some new tokens that aren't in the default theme
- mapPipelineToTheme.ios.ts was updated to reflect these designs
- however, the default theme is still getting created and is trying to running the iOS code for mapPipelineToTheme, which causes failures because the iOS alias token set now includes tokens that aren't in the default theme (win32) token set
- changing the default theme from a const object to a method prevents the default theme from getting created automatically

### Verification

No visual changes
Check if CI passes

### Pull request checklist

This PR has considered (when applicable):
- [ ] Automated Tests
- [ ] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts

change/@fluentui-react-native-default-theme-602cc57a-63a1-4a26-9644-9e635e7a0716.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Change default theme const to a method",
+  "packageName": "@fluentui-react-native/default-theme",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-framework-061f0724-c25c-474d-8ad1-73387d605b64.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Change default theme const to a method",
+  "packageName": "@fluentui-react-native/framework",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-theme-4eedba7d-11e6-49e4-a9d8-e190a26d2a71.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Change default theme const to a method",
+  "packageName": "@fluentui-react-native/theme",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-win32-theme-73953f3f-ad20-4e9b-b4ba-1dc054dcd6f9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Change default theme const to a method",
+  "packageName": "@fluentui-react-native/win32-theme",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@uifabricshared-foundation-compose-7cf40fbe-c55c-4135-b024-42471e6ab672.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Change default theme const to a method",
+  "packageName": "@uifabricshared/foundation-compose",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@uifabricshared-theming-react-native-857b81df-52b2-412a-9dee-5b68a5488823.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Change default theme const to a method",
+  "packageName": "@uifabricshared/theming-react-native",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/deprecated/foundation-compose/src/useStyling.ts

@@ -42,7 +42,7 @@ function useStylingCore<TProps, TSlotProps extends ISlotProps, TTokens extends o
   lookupOverride?: IOverrideLookup,
 ): IWithTokens<TSlotProps, TTokens> {
   // get the theme value from the context (or the default theme if it is not set)
-  const theme = useTheme() || defaultFluentTheme;
+  const theme = useTheme() || defaultFluentTheme();
 
   // resolve the array of settings for these options
   lookupOverride = lookupOverride || props;

packages/deprecated/theming-react-native/src/BaselinePlatformDefaults.ts

@@ -5,5 +5,5 @@ import { defaultFluentTheme } from '@fluentui-react-native/default-theme';
  * @deprecated
  */
 export function getBaselinePlatformTheme(): ITheme {
-  return defaultFluentTheme;
+  return defaultFluentTheme();
 }

packages/framework/framework/src/useFluentTheme.ts

@@ -7,5 +7,5 @@ import { Theme, useTheme } from '@fluentui-react-native/theme-types';
  * @returns - a valid Theme object
  */
 export function useFluentTheme(): Theme {
-  return useTheme() || defaultFluentTheme;
+  return useTheme() || defaultFluentTheme();
 }

packages/framework/theme/README.md

@@ -32,7 +32,7 @@ export const createMyCustomTheme = () => {
   // create the reference
   const themeRef = new ThemeReference(
     // base it on the default fluent theme
-    defaultFluentTheme,
+    defaultFluentTheme(),
     // mix in some constant values to override
     {
       colors: {

packages/theming/default-theme/src/__tests__/default-theme.test.ts

@@ -21,11 +21,11 @@ beforeAll(() => {
 });
 
 it('defaultFluentTheme test', () => {
-  expect(defaultFluentTheme).toMatchSnapshot();
+  expect(defaultFluentTheme()).toMatchSnapshot();
 });
 
 it('defaultFluentDarkTheme test', () => {
-  expect(defaultFluentDarkTheme).toMatchSnapshot();
+  expect(defaultFluentDarkTheme()).toMatchSnapshot();
 });
 
 describe('createDefaultTheme test', () => {

packages/theming/default-theme/src/createDefaultTheme.ts

@@ -10,11 +10,11 @@ export function createDefaultTheme(options: ThemeOptions = {}): ThemeReference {
     const current = getCurrentAppearance(options.appearance, options.defaultAppearance || 'light');
     switch (current) {
       case 'light':
-        return defaultFluentTheme;
+        return defaultFluentTheme();
       case 'dark':
-        return defaultFluentDarkTheme;
+        return defaultFluentDarkTheme();
       case 'highContrast':
-        return defaultFluentHighConstrastTheme;
+        return defaultFluentHighConstrastTheme();
       default:
         assertNever(current);
     }

packages/theming/default-theme/src/defaultTheme.ts

@@ -3,6 +3,7 @@ import { Platform } from 'react-native';
 import { getStockWebPalette, getStockWebDarkPalette, getStockWebHCPalette } from './defaultColors';
 import { globalTokens } from '@fluentui-react-native/theme-tokens';
 import { createShadowAliasTokens } from './createAliasTokens';
+import { memoize } from '@fluentui-react-native/memo-cache';
 
 function _defaultTypography(): Typography {
   const defaultsDict = {
@@ -77,29 +78,43 @@ export function defaultSpacing(): Spacing {
   return { s2: '4px', s1: '8px', m: '16px', l1: '20px', l2: '32px' };
 }
 
-export const defaultFluentTheme: Theme = {
-  colors: getStockWebPalette(),
-  typography: _defaultTypography(),
-  spacing: defaultSpacing(),
-  shadows: createShadowAliasTokens('light'),
-  components: {},
-  host: { appearance: 'light' },
-};
+function defaultFluentThemeWorker(): Theme {
+  return {
+    colors: getStockWebPalette(),
+    typography: _defaultTypography(),
+    spacing: defaultSpacing(),
+    shadows: createShadowAliasTokens('light'),
+    components: {},
+    host: { appearance: 'light' },
+  };
+}
+
+export const defaultFluentTheme = memoize(defaultFluentThemeWorker);
 
-export const defaultFluentDarkTheme: Theme = {
-  colors: getStockWebDarkPalette(),
-  typography: defaultFluentTheme.typography,
-  shadows: createShadowAliasTokens('dark'),
-  spacing: defaultFluentTheme.spacing,
-  components: {},
-  host: { appearance: 'dark' },
-};
+function defaultFluentDarkThemeWorker(): Theme {
+  const defaultTheme = defaultFluentTheme();
+  return {
+    colors: getStockWebDarkPalette(),
+    typography: defaultTheme.typography,
+    shadows: createShadowAliasTokens('dark'),
+    spacing: defaultTheme.spacing,
+    components: {},
+    host: { appearance: 'dark' },
+  };
+}
+
+export const defaultFluentDarkTheme = memoize(defaultFluentDarkThemeWorker);
+
+function defaultFluentHighConstrastThemeWorker(): Theme {
+  const defaultTheme = defaultFluentTheme();
+  return {
+    colors: getStockWebHCPalette(),
+    typography: defaultTheme.typography,
+    shadows: createShadowAliasTokens('highContrast'),
+    spacing: defaultTheme.spacing,
+    components: {},
+    host: { appearance: 'highContrast' },
+  };
+}
 
-export const defaultFluentHighConstrastTheme: Theme = {
-  colors: getStockWebHCPalette(),
-  typography: defaultFluentTheme.typography,
-  shadows: createShadowAliasTokens('highContrast'),
-  spacing: defaultFluentTheme.spacing,
-  components: {},
-  host: { appearance: 'highContrast' },
-};
+export const defaultFluentHighConstrastTheme = memoize(defaultFluentHighConstrastThemeWorker);

packages/theming/win32-theme/src/getThemeTypography.ts

@@ -4,8 +4,8 @@ import { createFontAliasTokens } from './createFontAliasTokens';
 
 export function win32Typography(): Typography {
   const win32Dict = {
-    sizes: defaultFluentTheme.typography.sizes,
-    weights: defaultFluentTheme.typography.weights,
+    sizes: defaultFluentTheme().typography.sizes,
+    weights: defaultFluentTheme().typography.weights,
     // hard coded until we support new fontFamily format
     families: {
       primary: 'Segoe UI',