@fluentui-react-native/apple-theme 0.9.6 → 0.9.10

package/src/appleColors.types.macos.ts

@@ -210,17 +210,22 @@ interface FluentAppleButtonTokens {
   brandBackgroundHovered: ColorValue;
   brandBackgroundPressed: ColorValue;
   brandForegroundDisabled: ColorValue;
-  brandBackgroundDisabled: ColorValue;
+  brandForegroundPressed: ColorValue;
   neutralStrokeDisabled: ColorValue;
   neutralBackgroundInverted: ColorValue;
   neutralForegroundInverted: ColorValue;
   neutralForeground2: ColorValue;
   neutralBackground1: ColorValue;
   neutralBackground2: ColorValue;
+  neutralBackgroundDisabled: ColorValue;
+  neutralBackground2Pressed: ColorValue;
   neutralStroke2: ColorValue;
   neutralForeground3: ColorValue;
+  neutralForegroundDisabled: ColorValue;
+  neutralForeground2Pressed: ColorValue;
   neutralBackground3: ColorValue;
   transparentBackground: ColorValue;
+  transparentStroke: ColorValue;
 }
 
 export type FluentUIApplePalette = FluentUIAppleBasePalette & FluentAppleButtonTokens;

package/src/appleHighContrast.macos.ts

@@ -0,0 +1,9 @@
+let isHighContrastEnabled = false;
+
+export function setIsHighContrast(isHighContrast: boolean) {
+  isHighContrastEnabled = isHighContrast;
+}
+
+export function getIsHighContrast() {
+  return isHighContrastEnabled;
+}

package/src/createAppleTheme.macos.ts

@@ -2,15 +2,31 @@ import { ThemeReference } from '@fluentui-react-native/theme';
 import { Theme } from '@fluentui-react-native/theme-types';
 import { Appearance } from 'react-native';
 import { getBaseAppleThemeMacOS } from './appleTheme.macos';
+import { AccessibilityInfo } from 'react-native-macos';
+import { setIsHighContrast } from './appleHighContrast.macos';
+
+let appleThemeReference: ThemeReference;
 
 export function createAppleTheme(): ThemeReference {
-  const appleThemeReference = new ThemeReference({} as Theme, () => {
+  appleThemeReference = new ThemeReference({} as Theme, () => {
     return getBaseAppleThemeMacOS();
   });
+  // 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();
+  });
+}

package/src/createMacOSAliasTokens.ts

@@ -1,10 +1,10 @@
-import { getAliasTokens } from '@fluentui-react-native/theme-tokens';
+import { getMacOSAliasTokens } from '@fluentui-react-native/theme-tokens';
 import { AliasColorTokens, AppearanceOptions } from '@fluentui-react-native/theme-types';
-import { memoize } from '@fluentui-react-native/memo-cache';
 import { mapPipelineToTheme } from '@fluentui-react-native/theming-utils';
+import { memoize } from '@fluentui-react-native/memo-cache';
 
-function createMacOSAliasTokensWorker(mode: AppearanceOptions): AliasColorTokens {
-  const aliasTokens = getAliasTokens(mode);
+function createMacOSAliasTokensWorker(mode: AppearanceOptions, isHighContrast: boolean): AliasColorTokens {
+  const aliasTokens = getMacOSAliasTokens(mode, isHighContrast);
   return mapPipelineToTheme(aliasTokens);
 }
 

package/src/index.ts

@@ -1,2 +1,3 @@
 export * from './createAppleTheme';
 export * from './createMacOSAliasTokens';
+export * from './appleHighContrast.macos';