@fluentui-react-native/win32-theme 0.39.8 → 0.39.11

package/src/createOfficeTheme.ts

@@ -1,6 +1,17 @@
 import { createDefaultTheme } from '@fluentui-react-native/default-theme';
-import { ThemeReference } from '@fluentui-react-native/design/theming';
-import type { OfficePalette, Theme, ThemeOptions } from '@fluentui-react-native/design/theming';
+import {
+  appearanceOptionFromResolved,
+  appearanceOptionsFromLegacy,
+  createThemeAppearanceSource,
+  ThemeReference,
+} from '@fluentui-react-native/design/theming';
+import type {
+  OfficePalette,
+  Theme,
+  ThemeAppearanceSource,
+  ThemeAppearanceSourceSnapshot,
+  ThemeOptions,
+} from '@fluentui-react-native/design/theming';
 
 import { createAliasesFromPalette } from './createAliasesFromPalette';
 import { createBrandedThemeWithAlias } from './createBrandedThemeWithAlias';
@@ -8,7 +19,7 @@ import { createOfficeColorAliasTokens, createOfficeShadowAliasTokens } from './c
 import { createPartialOfficeTheme } from './createPartialOfficeTheme';
 import { win32Typography } from './getThemeTypography';
 import { getThemingModule } from './NativeModule/getThemingModule';
-import { getCurrentHostThemeSetting, setCurrentHostThemeSetting } from './NativeModule/hostThemeSetting';
+import { getCurrentHostThemeState, setCurrentHostThemeState } from './NativeModule/hostThemeSetting';
 import type { CxxException, PlatformDefaultsChangedArgs } from './NativeModule/officeThemingModule';
 
 function handlePaletteCall(palette: OfficePalette | CxxException): OfficePalette | undefined {
@@ -27,59 +38,133 @@ function handlePaletteCall(palette: OfficePalette | CxxException): OfficePalette
  */
 export function createOfficeTheme(options: ThemeOptions = {}): ThemeReference {
   const [module, emitter] = getThemingModule();
-  const ref = { module, emitter, themeName: getCurrentHostThemeSetting() || '' };
+  const currentHostState = getCurrentHostThemeState();
+  const ref = { module, emitter, themeName: currentHostState.hostThemeSetting || '' };
   const { paletteName } = options;
+  const constants = module.getConstants();
+  let colorScheme = currentHostState.hostThemeSetting ? currentHostState.colorScheme : constants.initialColorScheme;
+  let isHighContrast = currentHostState.hostThemeSetting ? currentHostState.isHighContrast : constants.initialIsHighContrast;
+  const themeRefHolder: { current?: ThemeReference } = {};
+  const updateOfficeState = (
+    themeName: string | undefined,
+    nextColorScheme: ThemeAppearanceSourceSnapshot['colorScheme'],
+    nextIsHighContrast: boolean | undefined,
+  ) => {
+    const nextThemeName = themeName || ref.themeName;
+    const changed = nextThemeName !== ref.themeName || nextColorScheme !== colorScheme || nextIsHighContrast !== isHighContrast;
+    ref.themeName = nextThemeName;
+    colorScheme = nextColorScheme;
+    isHighContrast = nextIsHighContrast;
+    setCurrentHostThemeState({
+      hostThemeSetting: ref.themeName,
+      colorScheme,
+      isHighContrast,
+    });
+    return changed;
+  };
+  const appearanceSource: ThemeAppearanceSource = createThemeAppearanceSource(
+    () => getOfficeAppearance(ref.themeName, colorScheme, isHighContrast),
+    emitter
+      ? (listener) => {
+          const subscription = emitter.addListener('onPlatformDefaultsChanged', (args: PlatformDefaultsChangedArgs) => {
+            updateOfficeState(args?.hostThemeSetting, args?.colorScheme, args?.isHighContrast);
+            themeRefHolder.current?.invalidate();
+            listener();
+          });
+          const currentState = getCurrentHostThemeState();
+          if (updateOfficeState(currentState.hostThemeSetting, currentState.colorScheme, currentState.isHighContrast)) {
+            themeRefHolder.current?.invalidate();
+          }
+          listener();
+          return () => subscription.remove();
+        }
+      : undefined,
+  );
 
-  const themeRef = new ThemeReference(
-    createDefaultTheme(options),
-    () => {
-      const name = paletteName || 'WhiteColors';
-      const palette = handlePaletteCall(ref.module.getPalette(name));
-      return createPartialOfficeTheme(module, ref.themeName, palette);
-    },
-    () => {
-      if (!ref.themeName || ref.themeName === '') {
-        return {};
-      }
-
-      return {
-        shadows: { ...createOfficeShadowAliasTokens(ref.themeName) },
-        typography: win32Typography(),
-      };
-    },
-    () => {
-      if (!ref.themeName || ref.themeName === '') {
-        return {};
-      }
+  const themeRef = new ThemeReference({
+    base: createDefaultTheme(options),
+    getAppearance: () =>
+      options.appearance
+        ? appearanceOptionsFromLegacy(options.appearance)
+        : { colorScheme: 'system', contrast: 'system', interfaceLevel: 'base' },
+    appearanceSource,
+    alwaysSubscribeToAppearanceSource: true,
+    recipes: [
+      () => {
+        const name = paletteName || 'WhiteColors';
+        const palette = handlePaletteCall(ref.module.getPalette(name));
+        return createPartialOfficeTheme(module, ref.themeName, palette);
+      },
+      () => {
+        if (!ref.themeName || ref.themeName === '') {
+          return {};
+        }
 
-      return {
-        colors: { ...createOfficeColorAliasTokens(ref.themeName) },
-        typography: win32Typography(),
-      };
-    },
-    (theme: Theme) => {
-      return createBrandedThemeWithAlias(ref.themeName, theme);
-    },
-    (theme: Theme) => {
-      if (!theme.host.palette) {
-        return {};
-      }
+        return {
+          shadows: { ...createOfficeShadowAliasTokens(ref.themeName) },
+          typography: win32Typography(),
+        };
+      },
+      () => {
+        if (!ref.themeName || ref.themeName === '') {
+          return {};
+        }
 
-      return {
-        ...(paletteName !== undefined && { colors: createAliasesFromPalette(theme.host.palette, ref.themeName === 'HighContrast') }),
-        typography: win32Typography(),
-      };
-    },
-  );
+        return {
+          colors: { ...createOfficeColorAliasTokens(ref.themeName) },
+          typography: win32Typography(),
+        };
+      },
+      (theme: Theme) => {
+        return createBrandedThemeWithAlias(ref.themeName, theme);
+      },
+      (theme: Theme) => {
+        if (!theme.host.palette) {
+          return {};
+        }
 
-  // set up the callback for theme changes on the native side
-  const onPlatformDefaultsChanged = (args: PlatformDefaultsChangedArgs) => {
-    ref.themeName = (args && args.hostThemeSetting) || ref.themeName;
-    setCurrentHostThemeSetting(ref.themeName);
-    themeRef.invalidate();
-  };
-  emitter && emitter.addListener('onPlatformDefaultsChanged', onPlatformDefaultsChanged);
+        return {
+          ...(paletteName !== undefined && { colors: createAliasesFromPalette(theme.host.palette, ref.themeName === 'HighContrast') }),
+          typography: win32Typography(),
+        };
+      },
+      (_theme, appearance) => ({
+        host: {
+          appearance: appearance ? appearanceOptionFromResolved(appearance) : undefined,
+        },
+      }),
+    ],
+  });
+  themeRefHolder.current = themeRef;
 
-  // now return the theme reference
   return themeRef;
 }
+
+function getOfficeAppearance(
+  themeName: string,
+  colorScheme?: ThemeAppearanceSourceSnapshot['colorScheme'],
+  isHighContrast?: boolean,
+): ThemeAppearanceSourceSnapshot {
+  if (colorScheme || isHighContrast !== undefined) {
+    return {
+      colorScheme,
+      contrast: isHighContrast ? 'highContrast' : 'standard',
+      interfaceLevel: 'base',
+    };
+  }
+
+  switch (themeName) {
+    case 'Black':
+    case 'DarkGray':
+      return { colorScheme: 'dark', contrast: 'standard', interfaceLevel: 'base' };
+    case 'HighContrast':
+      // Transitional until the native contract exposes scheme and contrast as
+      // separate fields rather than one host-theme name.
+      return { contrast: 'highContrast', interfaceLevel: 'base' };
+    case 'Colorful':
+    case 'White':
+      return { colorScheme: 'light', contrast: 'standard', interfaceLevel: 'base' };
+    default:
+      return { interfaceLevel: 'base' };
+  }
+}

package/src/getOfficeTokens.ts

@@ -5,8 +5,7 @@ import colorfulShadowTokens from '@fluentui-react-native/design-tokens-win32/col
 import darkGrayAliasTokens from '@fluentui-react-native/design-tokens-win32/darkgray/tokens-aliases.json';
 import darkGrayShadowTokens from '@fluentui-react-native/design-tokens-win32/darkgray/tokens-shadow.json';
 import hcShadowTokens from '@fluentui-react-native/design-tokens-win32/hc/tokens-shadow.json';
-
-import { hcAliasTokens } from './highContrast/tokens-alias';
+import { hcAliasTokens } from '@fluentui-react-native/design/tokens/legacy';
 
 export function getOfficeAliasTokens(officeTheme: string) {
   if (officeTheme === 'White' || officeTheme === 'Colorful') {

package/lib/highContrast/tokens-alias.d.ts

@@ -1,2 +0,0 @@
-export declare const hcAliasTokens: any;
-//# sourceMappingURL=tokens-alias.d.ts.map

package/lib/highContrast/tokens-alias.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens-alias.d.ts","sourceRoot":"","sources":["../../src/highContrast/tokens-alias.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,aAAa,KAAkC,CAAC"}

package/lib/highContrast/tokens-alias.js

@@ -1,17 +0,0 @@
-import { PlatformColor } from 'react-native';
-import aliasTokens from '@fluentui-react-native/design-tokens-win32/hc/tokens-aliases.json';
-export const hcAliasTokens = processAliasTokens(aliasTokens);
-function processAliasTokens(aliasTokens) {
-    for (const key in aliasTokens) {
-        for (const innerKey in aliasTokens[key]) {
-            const entry = aliasTokens[key][innerKey];
-            if (typeof entry === 'string' && entry.includes('PlatformColor')) {
-                const color = entry.substring(14, entry.length - 1);
-                // eslint-disable-next-line @react-native/platform-colors
-                aliasTokens[key][innerKey] = PlatformColor(color);
-            }
-        }
-    }
-    return aliasTokens;
-}
-//# sourceMappingURL=tokens-alias.js.map

package/lib/highContrast/tokens-alias.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"tokens-alias.js","sourceRoot":"","sources":["../../src/highContrast/tokens-alias.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,OAAO,WAAW,MAAM,mEAAmE,CAAC;AAE5F,MAAM,CAAC,MAAM,aAAa,GAAG,kBAAkB,CAAC,WAAW,CAAC,CAAC;AAE7D,SAAS,kBAAkB,CAAC,WAAgB;IAC1C,KAAK,MAAM,GAAG,IAAI,WAAW,EAAE,CAAC;QAC9B,KAAK,MAAM,QAAQ,IAAI,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC;YACxC,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC;YACzC,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,eAAe,CAAC,EAAE,CAAC;gBACjE,MAAM,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,EAAE,EAAE,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;gBACpD,yDAAyD;gBACzD,WAAW,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAC,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC;YACpD,CAAC;QACH,CAAC;IACH,CAAC;IAED,OAAO,WAAW,CAAC;AACrB,CAAC"}

package/src/highContrast/tokens-alias.ts

@@ -1,20 +0,0 @@
-import { PlatformColor } from 'react-native';
-
-import aliasTokens from '@fluentui-react-native/design-tokens-win32/hc/tokens-aliases.json';
-
-export const hcAliasTokens = processAliasTokens(aliasTokens);
-
-function processAliasTokens(aliasTokens: any) {
-  for (const key in aliasTokens) {
-    for (const innerKey in aliasTokens[key]) {
-      const entry = aliasTokens[key][innerKey];
-      if (typeof entry === 'string' && entry.includes('PlatformColor')) {
-        const color = entry.substring(14, entry.length - 1);
-        // eslint-disable-next-line @react-native/platform-colors
-        aliasTokens[key][innerKey] = PlatformColor(color);
-      }
-    }
-  }
-
-  return aliasTokens;
-}