@fluentui-react-native/default-theme 0.16.20 → 0.16.22

package/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', () => {

package/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);
     }

package/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);