@fluentui-react-native/apple-theme 0.29.8 → 0.29.11

package/src/appleTheme.ios.ts

@@ -130,10 +130,11 @@ const appleComponents = {
 };
 
 function getBaseAppleThemeIOSWorker(isLightMode: boolean, isElevated: boolean): Theme {
+  const mode = isLightMode ? 'light' : isElevated ? 'darkElevated' : 'dark';
   return {
-    colors: paletteFromAppleColors(isLightMode, isElevated),
+    colors: paletteFromAppleColors(isLightMode, mode),
     typography: appleTypography(),
-    shadows: iOSShadows(),
+    shadows: iOSShadows(mode),
     spacing: appleSpacing(),
     components: appleComponents,
     host: { appearance: isLightMode ? 'light' : 'dark' },

package/src/appleTheme.macos.ts

@@ -73,11 +73,11 @@ export const appleComponents = {
   },
 };
 
-function getBaseAppleThemeMacOSWorker(mode: AppearanceOptions): Theme {
+function getBaseAppleThemeMacOSWorker(mode: AppearanceOptions, highContrast: boolean): Theme {
   return {
-    colors: fallbackApplePalette(mode),
+    colors: fallbackApplePalette(mode, highContrast),
     typography: fallbackAppleTypography(),
-    shadows: fallbackAppleShadows(mode),
+    shadows: fallbackAppleShadows(mode, highContrast),
     spacing: appleSpacing(),
     components: appleComponents,
     host: { appearance: 'dynamic' },

package/src/createAppleTheme.ios.ts

@@ -1,26 +1,43 @@
 import { Appearance, NativeEventEmitter } from 'react-native';
 
 import { NativeAppearanceAdditions } from '@fluentui-react-native/experimental-appearance-additions';
-import { ThemeReference } from '@fluentui-react-native/design/theming';
+import { createThemeAppearanceSource, ThemeReference } from '@fluentui-react-native/design/theming';
 import type { Theme } from '@fluentui-react-native/design/theming';
 
 import { getBaseAppleThemeIOS } from './appleTheme.ios';
 
 export function createAppleTheme(): ThemeReference {
-  const appleThemeReference = new ThemeReference({} as Theme, () => {
-    const isLightMode = Appearance.getColorScheme() === 'light';
-    const isElevated = NativeAppearanceAdditions.userInterfaceLevel() === 'elevated';
-    return getBaseAppleThemeIOS(isLightMode, isElevated);
+  const appearanceSource = createThemeAppearanceSource(
+    () => ({
+      colorScheme: Appearance.getColorScheme(),
+      interfaceLevel: NativeAppearanceAdditions.userInterfaceLevel() === 'elevated' ? 'elevated' : 'base',
+    }),
+    (listener) => {
+      const appearanceSubscription = Appearance.addChangeListener(listener);
+      const eventEmitter = new NativeEventEmitter(NativeAppearanceAdditions);
+      const interfaceLevelSubscription = eventEmitter.addListener('appearanceChanged', listener);
+      return () => {
+        appearanceSubscription.remove();
+        interfaceLevelSubscription.remove();
+      };
+    },
+  );
+  return new ThemeReference({
+    base: {} as Theme,
+    appearance: {
+      colorScheme: 'system',
+      contrast: 'system',
+      interfaceLevel: 'system',
+    },
+    appearanceSource,
+    recipes: [
+      (_theme, appearance) => {
+        const isLightMode = appearance ? appearance.colorScheme === 'light' : Appearance.getColorScheme() === 'light';
+        const isElevated = appearance
+          ? appearance.interfaceLevel === 'elevated'
+          : NativeAppearanceAdditions.userInterfaceLevel() === 'elevated';
+        return getBaseAppleThemeIOS(isLightMode, isElevated);
+      },
+    ],
   });
-
-  Appearance.addChangeListener(() => {
-    appleThemeReference.invalidate();
-  });
-
-  const eventEmitter = new NativeEventEmitter(NativeAppearanceAdditions);
-  eventEmitter.addListener('appearanceChanged', (_newTraits) => {
-    appleThemeReference.invalidate();
-  });
-
-  return appleThemeReference;
 }

package/src/createAppleTheme.macos.ts

@@ -1,35 +1,24 @@
 import { Appearance } from 'react-native';
 
-import { getCurrentAppearance, setIsHighContrast, ThemeReference } from '@fluentui-react-native/design/theming';
+import { getCurrentAppearance, isHighContrast, ThemeReference } from '@fluentui-react-native/design/theming';
 import type { Theme } from '@fluentui-react-native/design/theming';
-import { AccessibilityInfo } from 'react-native-macos';
 
 import { getBaseAppleThemeMacOS } from './appleTheme.macos';
 
-let appleThemeReference: ThemeReference;
-
 export function createAppleTheme(): ThemeReference {
-  appleThemeReference = new ThemeReference({} as Theme, () => {
-    const appearance = Appearance.getColorScheme();
-    const mode = getCurrentAppearance(appearance, 'light');
-    return getBaseAppleThemeMacOS(mode);
-  });
-  // Fetch initial system settings for high contrast mode
-  highContrastHandler();
-  // Invalidate theme and set prop when high contrast setting changes
-  AccessibilityInfo.addEventListener('highContrastChanged', () => {
-    highContrastHandler();
-  });
-
-  Appearance.addChangeListener(() => {
-    appleThemeReference.invalidate();
-  });
-  return appleThemeReference;
-}
-
-function highContrastHandler() {
-  AccessibilityInfo.isHighContrastEnabled().then((isEnabled) => {
-    setIsHighContrast(isEnabled);
-    appleThemeReference.invalidate();
+  return new ThemeReference({
+    base: {} as Theme,
+    appearance: {
+      colorScheme: 'system',
+      contrast: 'system',
+      interfaceLevel: 'base',
+    },
+    recipes: [
+      (_theme, appearance) => {
+        const mode = appearance?.colorScheme ?? getCurrentAppearance(Appearance.getColorScheme(), 'light');
+        const highContrast = appearance ? appearance.contrast === 'highContrast' : isHighContrast();
+        return getBaseAppleThemeMacOS(mode, highContrast);
+      },
+    ],
   });
 }

package/src/createFontAliasTokens.ios.ts

@@ -1,7 +1,7 @@
 import aliasTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-aliases.json'; // Font alias tokens should be the same for all color styles
 import { memoize } from '@fluentui-react-native/framework-base';
 import type { Variants } from '@fluentui-react-native/design/theming';
-import { mapFontPipelineToTheme } from '@fluentui-react-native/theming-utils';
+import { mapFontPipelineToTheme } from '@fluentui-react-native/design/theming';
 
 function createFontAliasTokensWorker(): Partial<Variants> {
   return mapFontPipelineToTheme(aliasTokens);

package/src/createMacOSAliasTokens.ts

@@ -1,7 +1,7 @@
 import { memoize } from '@fluentui-react-native/framework-base';
 import type { AliasColorTokens, AppearanceOptions } from '@fluentui-react-native/design/theming';
 import type { ThemeShadowDefinition } from '@fluentui-react-native/design/theming';
-import { mapPipelineToTheme, mapPipelineToShadow } from '@fluentui-react-native/theming-utils';
+import { mapPipelineToTheme, mapPipelineToShadow } from '@fluentui-react-native/design/theming';
 
 import { getMacOSAliasTokens, getMacOSShadowTokens } from './getMacOSTokens';
 

package/src/createiOSAliasTokens.ts

@@ -1,8 +1,8 @@
 import { memoize } from '@fluentui-react-native/framework-base';
-import { getAliasTokens, getShadowTokens } from '@fluentui-react-native/theme-tokens';
+import { getAliasTokens, getShadowTokens } from '@fluentui-react-native/design/tokens/legacy';
 import type { AliasColorTokens, AppearanceOptions } from '@fluentui-react-native/design/theming';
 import type { ThemeShadowDefinition } from '@fluentui-react-native/design/theming';
-import { mapPipelineToTheme, mapPipelineToShadow } from '@fluentui-react-native/theming-utils';
+import { mapPipelineToTheme, mapPipelineToShadow } from '@fluentui-react-native/design/theming';
 
 function createiOSColorAliasTokensWorker(mode: AppearanceOptions): AliasColorTokens {
   const aliasTokens = getAliasTokens(mode);