@fluentui-react-native/apple-theme 0.8.0 → 0.9.1

package/src/appleColors.macos.ts

@@ -3,6 +3,7 @@ import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
 import { AppleSemanticPalette, FluentUIApplePalette } from './appleColors.types.macos';
 import { PlatformColor, DynamicColorMacOS, ColorWithSystemEffectMacOS } from 'react-native-macos';
 import { Appearance } from 'react-native';
+import { createMacOSAliasTokens } from './createMacOSAliasTokens';
 
 /** Creates a Palette of PlatformColors defined for macOS */
 export function getAppleSemanticPalette(): AppleSemanticPalette {
@@ -46,7 +47,7 @@ export function getAppleSemanticPalette(): AppleSemanticPalette {
 
     windowBackgroundColor: PlatformColor('windowBackgroundColor'),
     windowFrameTextColor: PlatformColor('windowFrameTextColor'),
-    underPageBackgroundColor: PlatformColor(' underPageBackgroundColor'),
+    underPageBackgroundColor: PlatformColor('underPageBackgroundColor'),
 
     findHighlightColor: PlatformColor('findHighlightColor'),
     highlightColor: PlatformColor('highlightColor'),
@@ -55,6 +56,10 @@ export function getAppleSemanticPalette(): AppleSemanticPalette {
 }
 
 function getFluentUIApplePalette(): FluentUIApplePalette {
+  const appearance = Appearance.getColorScheme();
+  const mode = getCurrentAppearance(appearance, 'light');
+  const macOSAliasColorTokens = createMacOSAliasTokens(mode);
+
   return {
     blue10: '#4F6BED',
     blueMagenta20: '#8764B8',
@@ -259,35 +264,28 @@ function getFluentUIApplePalette(): FluentUIApplePalette {
       light: '#2525253F',
       dark: '#5656567F',
     }),
-    neutralInverted: '#FFFFFF',
-    neutralForeground2: '#000000D8',
-    neutralBackground2: DynamicColorMacOS({
-      light: '#FFFFFF',
-      dark: '#555555',
-    }),
-    neutralStroke2: '#00000026',
-    neutralForeground3: DynamicColorMacOS({
-      light: '#272727',
-      dark: '#FFFFFF',
-    }),
-    neutralBackground3: DynamicColorMacOS({
-      light: '#0000000C',
-      dark: '#555555',
-    }),
+
+    brandedBackground: macOSAliasColorTokens.brandBackground,
+    brandBackgroundPressed: macOSAliasColorTokens.brandBackgroundPressed,
+    brandBackgroundHovered: macOSAliasColorTokens.brandBackgroundHover,
+    neutralBackgroundInverted: macOSAliasColorTokens.neutralBackgroundInverted,
+    neutralForegroundInverted: macOSAliasColorTokens.neutralForegroundInverted,
+    neutralForeground2: macOSAliasColorTokens.neutralForeground2,
+    neutralBackground2: macOSAliasColorTokens.neutralBackground2,
+    neutralStroke2: macOSAliasColorTokens.neutralStroke2,
+    neutralForeground3: macOSAliasColorTokens.neutralForeground3,
+    neutralBackground3: macOSAliasColorTokens.neutralBackground3,
+    neutralStrokeDisabled: macOSAliasColorTokens.neutralStrokeDisabled,
+    transparentBackground: macOSAliasColorTokens.transparentBackground,
   };
 }
 
 /** Creates a palette of colors for the apple theme, given the FluentUI Apple Palette and Apple Semantic Palette
- * The fallback palette is loaded while we wait for the native theming module to load, or if the module is not found
+ * The fallback palette is loaded while we wait for  the native theming module to load, or if the module is not found
  */
 export function fallbackApplePalette(): ThemeColorDefinition {
   const fluentUIApple = getFluentUIApplePalette();
   const applePlatform = getAppleSemanticPalette();
-
-  // GH:728 Until RN-SVG Supports PlatformColor, we need this workaround
-  const appearance = Appearance.getColorScheme();
-  const neutralForeground3 = getCurrentAppearance(appearance, 'light') === 'light' ? '#272727' : '#FFFFFF';
-
   return {
     /* PaletteBackgroundColors & PaletteTextColors */
 
@@ -338,7 +336,7 @@ export function fallbackApplePalette(): ThemeColorDefinition {
     buttonBackgroundCheckedHovered: fluentUIApple.neutralBackground3,
     buttonBackgroundPressed: ColorWithSystemEffectMacOS(fluentUIApple.neutralBackground3, 'pressed'),
     buttonBackgroundDisabled: ColorWithSystemEffectMacOS(fluentUIApple.neutralBackground3, 'disabled'),
-    buttonBorder: 'transparent',
+    buttonBorder: fluentUIApple.transparentBackground,
     buttonText: fluentUIApple.neutralForeground3,
     buttonTextHovered: fluentUIApple.neutralForeground3,
     buttonTextChecked: fluentUIApple.neutralForeground3,
@@ -346,8 +344,8 @@ export function fallbackApplePalette(): ThemeColorDefinition {
     buttonTextPressed: ColorWithSystemEffectMacOS(fluentUIApple.neutralForeground3, 'pressed'),
     buttonTextDisabled: ColorWithSystemEffectMacOS(fluentUIApple.neutralForeground3, 'disabled'),
 
-    buttonBorderDisabled: 'transparent',
-    buttonBorderFocused: 'transparent',
+    buttonBorderDisabled: fluentUIApple.transparentBackground,
+    buttonBorderFocused: fluentUIApple.transparentBackground,
 
     primaryButtonBackground: fluentUIApple.communicationBlue,
     primaryButtonBackgroundHovered: fluentUIApple.communicationBlue,
@@ -355,22 +353,22 @@ export function fallbackApplePalette(): ThemeColorDefinition {
     primaryButtonBackgroundDisabled: fluentUIApple.brandBackgroundDisabled,
     primaryButtonBorder: 'transparent',
     primaryButtonBorderFocused: 'transparent',
-    primaryButtonText: fluentUIApple.neutralInverted,
-    primaryButtonTextHovered: fluentUIApple.neutralInverted,
-    primaryButtonTextPressed: ColorWithSystemEffectMacOS(fluentUIApple.neutralInverted, 'pressed'),
+    primaryButtonText: fluentUIApple.neutralForegroundInverted,
+    primaryButtonTextHovered: fluentUIApple.neutralForegroundInverted,
+    primaryButtonTextPressed: ColorWithSystemEffectMacOS(fluentUIApple.neutralForegroundInverted, 'pressed'),
     primaryButtonTextDisabled: fluentUIApple.brandForegroundDisabled,
 
     accentButtonBackground: fluentUIApple.communicationBlue,
-    accentButtonText: fluentUIApple.neutralInverted,
+    accentButtonText: fluentUIApple.neutralForegroundInverted,
 
     menuBackground: 'transparent',
     menuDivider: applePlatform.separatorColor,
-    menuIcon: neutralForeground3, //GH:728 Icon doesn't support PlatformColor
+    menuIcon: fluentUIApple.neutralForeground3, //GH:728 Icon doesn't support PlatformColor
     menuHeader: applePlatform.headerTextColor,
-    menuItemBackgroundHovered: 'transparent',
-    menuItemBackgroundPressed: applePlatform.selectedContentBackgroundColor,
+    menuItemBackgroundHovered: applePlatform.controlAccentColor,
+    menuItemBackgroundPressed: ColorWithSystemEffectMacOS(applePlatform.controlAccentColor, 'pressed'),
     menuItemText: applePlatform.labelColor,
-    menuItemTextHovered: applePlatform.labelColor,
+    menuItemTextHovered: 'white',
 
     listBackground: 'transparent',
     listText: applePlatform.labelColor,
@@ -393,27 +391,27 @@ export function fallbackApplePalette(): ThemeColorDefinition {
     defaultBackground: fluentUIApple.neutralBackground3,
     defaultBorder: 'transparent',
     defaultContent: fluentUIApple.neutralForeground3,
-    defaultIcon: neutralForeground3, //GH:728 Icon doesn't support PlatformColor
+    defaultIcon: fluentUIApple.neutralForeground3, //GH:728 Icon doesn't support PlatformColor
 
     defaultHoveredBackground: fluentUIApple.neutralBackground3,
     defaultHoveredBorder: 'transparent',
     defaultHoveredContent: fluentUIApple.neutralForeground3,
-    defaultHoveredIcon: neutralForeground3, //GH:728 Icon doesn't support PlatformColor
+    defaultHoveredIcon: fluentUIApple.neutralForeground3, //GH:728 Icon doesn't support PlatformColor
 
     defaultFocusedBackground: fluentUIApple.neutralBackground3,
     defaultFocusedBorder: 'transparent',
     defaultFocusedContent: fluentUIApple.neutralForeground3,
-    defaultFocusedIcon: neutralForeground3, //GH:728 Icon doesn't support PlatformColor
+    defaultFocusedIcon: fluentUIApple.neutralForeground3, //GH:728 Icon doesn't support PlatformColor
 
     defaultPressedBackground: ColorWithSystemEffectMacOS(fluentUIApple.neutralBackground3, 'pressed'),
     defaultPressedBorder: 'transparent',
     defaultPressedContent: ColorWithSystemEffectMacOS(fluentUIApple.neutralForeground3, 'pressed'),
-    defaultPressedIcon: neutralForeground3, //GH:728 Icon doesn't support PlatformColor
+    defaultPressedIcon: fluentUIApple.neutralForeground3, //GH:728 Icon doesn't support PlatformColor
 
-    defaultDisabledBackground: ColorWithSystemEffectMacOS(fluentUIApple.neutralBackground3, 'disabled'),
+    defaultDisabledBackground: fluentUIApple.neutralStrokeDisabled,
     defaultDisabledBorder: 'transparent',
     defaultDisabledContent: ColorWithSystemEffectMacOS(fluentUIApple.neutralForeground3, 'pressed'),
-    defaultDisabledIcon: neutralForeground3, //GH:728 Icon doesn't support PlatformColor
+    defaultDisabledIcon: fluentUIApple.neutralForeground3, //GH:728 Icon doesn't support PlatformColor
 
     ghostBackground: 'transparent',
     ghostBorder: 'transparent',
@@ -433,47 +431,47 @@ export function fallbackApplePalette(): ThemeColorDefinition {
     ghostPressedBackground: 'transparent',
     ghostPressedBorder: 'transparent',
     ghostPressedContent: ColorWithSystemEffectMacOS(fluentUIApple.communicationBlue, 'deepPressed'),
-    ghostPressedIcon: neutralForeground3, //GH:728 Icon doesn't support PlatformColor
+    ghostPressedIcon: fluentUIApple.neutralForeground3, //GH:728 Icon doesn't support PlatformColor
 
     ghostDisabledBackground: 'transparent',
     ghostDisabledBorder: 'transparent',
     ghostDisabledContent: fluentUIApple.brandForegroundDisabled,
     ghostDisabledIcon: fluentUIApple.brandForegroundDisabled,
 
-    brandedBackground: fluentUIApple.communicationBlue,
+    brandedBackground: fluentUIApple.brandedBackground,
     brandedBorder: 'transparent',
-    brandedContent: fluentUIApple.neutralInverted,
-    brandedIcon: fluentUIApple.neutralInverted,
+    brandedContent: fluentUIApple.neutralForegroundInverted,
+    brandedIcon: fluentUIApple.neutralForegroundInverted,
 
-    brandedHoveredBackground: fluentUIApple.communicationBlue,
+    brandedHoveredBackground: fluentUIApple.brandBackgroundHovered,
     brandedHoveredBorder: 'transparent',
-    brandedHoveredContent: fluentUIApple.neutralInverted,
-    brandedHoveredIcon: fluentUIApple.neutralInverted,
+    brandedHoveredContent: fluentUIApple.neutralForegroundInverted,
+    brandedHoveredIcon: fluentUIApple.neutralForegroundInverted,
 
     brandedFocusedBackground: fluentUIApple.communicationBlue,
     brandedFocusedBorder: 'transparent',
-    brandedFocusedContent: fluentUIApple.neutralInverted,
-    brandedFocusedIcon: fluentUIApple.neutralInverted,
+    brandedFocusedContent: fluentUIApple.neutralForegroundInverted,
+    brandedFocusedIcon: fluentUIApple.neutralForegroundInverted,
 
-    brandedPressedBackground: ColorWithSystemEffectMacOS(fluentUIApple.communicationBlue, 'pressed'),
+    brandedPressedBackground: fluentUIApple.brandBackgroundPressed, //ColorWithSystemEffectMacOS(fluentUIApple.communicationBlue, 'pressed'),
     brandedPressedBorder: 'transparent',
-    brandedPressedContent: fluentUIApple.neutralInverted,
-    brandedPressedIcon: fluentUIApple.neutralInverted,
+    brandedPressedContent: fluentUIApple.neutralForegroundInverted,
+    brandedPressedIcon: fluentUIApple.neutralForegroundInverted,
 
     brandedDisabledBackground: fluentUIApple.brandBackgroundDisabled,
     brandedDisabledBorder: 'transparent',
     brandedDisabledContent: fluentUIApple.brandForegroundDisabled,
-    brandedDisabledIcon: neutralForeground3, //GH:728 Icon doesn't support PlatformColor
+    brandedDisabledIcon: fluentUIApple.neutralForeground3, //GH:728 Icon doesn't support PlatformColor
 
     defaultCheckedBackground: fluentUIApple.communicationBlue,
-    defaultCheckedContent: fluentUIApple.neutralInverted,
+    defaultCheckedContent: fluentUIApple.neutralForegroundInverted,
     defaultCheckedHoveredBackground: fluentUIApple.communicationBlue,
-    defaultCheckedHoveredContent: fluentUIApple.neutralInverted,
+    defaultCheckedHoveredContent: fluentUIApple.neutralForegroundInverted,
 
     brandedCheckedBackground: fluentUIApple.communicationBlue,
-    brandedCheckedContent: fluentUIApple.neutralInverted,
+    brandedCheckedContent: fluentUIApple.neutralForegroundInverted,
     brandedCheckedHoveredBackground: fluentUIApple.communicationBlue,
-    brandedCheckedHoveredContent: fluentUIApple.neutralInverted,
+    brandedCheckedHoveredContent: fluentUIApple.neutralForegroundInverted,
 
     ghostCheckedBackground: 'transparent',
     ghostCheckedContent: fluentUIApple.communicationBlue,
@@ -486,21 +484,21 @@ export function fallbackApplePalette(): ThemeColorDefinition {
     ghostHoveredSecondaryContent: fluentUIApple.communicationBlue,
     ghostPressedSecondaryContent: ColorWithSystemEffectMacOS(fluentUIApple.communicationBlue, 'deepPressed'),
 
-    brandedSecondaryContent: fluentUIApple.neutralInverted,
-    brandedFocusedSecondaryContent: fluentUIApple.neutralInverted,
-    brandedHoveredSecondaryContent: fluentUIApple.neutralInverted,
-    brandedPressedSecondaryContent: ColorWithSystemEffectMacOS(fluentUIApple.neutralInverted, 'pressed'),
+    brandedSecondaryContent: fluentUIApple.neutralForegroundInverted,
+    brandedFocusedSecondaryContent: fluentUIApple.neutralForegroundInverted,
+    brandedHoveredSecondaryContent: fluentUIApple.neutralForegroundInverted,
+    brandedPressedSecondaryContent: ColorWithSystemEffectMacOS(fluentUIApple.neutralForegroundInverted, 'pressed'),
 
     defaultDisabledSecondaryContent: fluentUIApple.brandForegroundDisabled,
-    defaultHoveredSecondaryContent: fluentUIApple.neutralInverted,
-    defaultPressedSecondaryContent: fluentUIApple.neutralInverted,
+    defaultHoveredSecondaryContent: fluentUIApple.neutralForegroundInverted,
+    defaultPressedSecondaryContent: fluentUIApple.neutralForegroundInverted,
 
     checkboxBackground: fluentUIApple.communicationBlue,
     checkboxBackgroundDisabled: fluentUIApple.brandBackgroundDisabled,
     checkboxBorderColor: fluentUIApple.gray600,
-    checkmarkColor: fluentUIApple.neutralInverted,
+    checkmarkColor: fluentUIApple.neutralForegroundInverted,
 
-    personaActivityRing: fluentUIApple.neutralInverted,
+    personaActivityRing: fluentUIApple.neutralForegroundInverted,
     personaActivityGlow: fluentUIApple.red10,
   };
 }

package/src/appleColors.types.macos.ts

@@ -206,14 +206,20 @@ interface FluentUIAppleBasePalette {
 
 /** A set of control tokens used on the FluentUI Apple macOS button */
 interface FluentAppleButtonTokens {
+  brandedBackground: ColorValue;
+  brandBackgroundHovered: ColorValue;
+  brandBackgroundPressed: ColorValue;
   brandForegroundDisabled: ColorValue;
   brandBackgroundDisabled: ColorValue;
-  neutralInverted: ColorValue;
+  neutralStrokeDisabled: ColorValue;
+  neutralBackgroundInverted: ColorValue;
+  neutralForegroundInverted: ColorValue;
   neutralForeground2: ColorValue;
   neutralBackground2: ColorValue;
   neutralStroke2: ColorValue;
   neutralForeground3: ColorValue;
   neutralBackground3: ColorValue;
+  transparentBackground: ColorValue;
 }
 
 export type FluentUIApplePalette = FluentUIAppleBasePalette & FluentAppleButtonTokens;

package/src/createMacOSAliasTokens.ts

@@ -0,0 +1,11 @@
+import { getAliasTokens } 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';
+
+function createMacOSAliasTokensWorker(mode: AppearanceOptions): AliasColorTokens {
+  const aliasTokens = getAliasTokens(mode);
+  return mapPipelineToTheme(aliasTokens);
+}
+
+export const createMacOSAliasTokens = memoize(createMacOSAliasTokensWorker);

package/src/index.ts

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