Set up iOS alias color tokens

change/@fluentui-react-native-apple-theme-973260f3-3320-4d3c-b409-1650f9205921.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Set up iOS color alias tokens",
+  "packageName": "@fluentui-react-native/apple-theme",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-theme-tokens-07d59fd7-346d-4840-af85-4aea5c6ddc32.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Bump iOS token packages to include iOS color alias tokens",
+  "packageName": "@fluentui-react-native/theme-tokens",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-theme-types-ca2fbd5f-b4cd-4f37-8d77-6a3912348246.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Set up iOS color alias tokens",
+  "packageName": "@fluentui-react-native/theme-types",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-native-theming-utils-6d24d91b-4ecf-4d20-9965-c7e9e8d4e8f0.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Set up iOS color alias tokens",
+  "packageName": "@fluentui-react-native/theming-utils",
+  "email": "78454019+lyzhan7@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/theming/apple-theme/package.json

@@ -32,10 +32,11 @@
   },
   "dependencies": {
     "@fluentui-react-native/default-theme": ">=0.16.22 <1.0.0",
-    "@fluentui-react-native/design-tokens-ios": "^0.36.0",
+    "@fluentui-react-native/design-tokens-ios": "^0.38.0",
     "@fluentui-react-native/design-tokens-macos": "^0.36.0",
     "@fluentui-react-native/memo-cache": "^1.1.7",
     "@fluentui-react-native/theme": ">=0.7.15 <1.0.0",
+    "@fluentui-react-native/theme-tokens": "^0.22.5",
     "@fluentui-react-native/theme-types": ">=0.28.0 <1.0.0",
     "@fluentui-react-native/theming-utils": "^0.21.0",
     "assert-never": "^1.2.1"

packages/theming/apple-theme/src/appleColors.ios.ts

@@ -1,5 +1,8 @@
 import { ThemeColorDefinition } from '@fluentui-react-native/theme-types';
+import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
+import { Appearance } from 'react-native';
 import { ApplePalette } from './appleColors.types.ios';
+import { createiOSColorAliasTokens } from './createiOSAliasTokens';
 
 function getFluentUIAppleLightPalette(): ApplePalette {
   return {
@@ -215,7 +218,14 @@ function getFluentUIAppleDarkPalette(): ApplePalette {
 export function paletteFromAppleColors(isLightMode: boolean): ThemeColorDefinition {
   const fluentApple = isLightMode ? getFluentUIAppleLightPalette() : getFluentUIAppleDarkPalette();
 
+  const appearance = Appearance.getColorScheme();
+  const mode = getCurrentAppearance(appearance, 'light');
+
   return {
+    /* Color Alias Tokens */
+
+    ...createiOSColorAliasTokens(mode),
+
     /* PaletteBackgroundColors & PaletteTextColors */
 
     background: fluentApple.surfacePrimary,

packages/theming/apple-theme/src/createiOSAliasTokens.ts

@@ -1,11 +1,18 @@
-import { getiOSShadowTokens } from './getiOSTokens';
-import { AppearanceOptions } from '@fluentui-react-native/theme-types';
-import { mapPipelineToShadow } from '@fluentui-react-native/theming-utils';
+import { getAliasTokens, getShadowTokens } from '@fluentui-react-native/theme-tokens';
+import { AliasColorTokens, AppearanceOptions } from '@fluentui-react-native/theme-types';
+import { mapPipelineToTheme, mapPipelineToShadow } from '@fluentui-react-native/theming-utils';
 import { memoize } from '@fluentui-react-native/memo-cache';
 import { ThemeShadowDefinition } from '@fluentui-react-native/theme-types/lib/Shadow.types';
 
+function createiOSColorAliasTokensWorker(mode: AppearanceOptions): AliasColorTokens {
+  const aliasTokens = getAliasTokens(mode);
+  return mapPipelineToTheme(aliasTokens);
+}
+
+export const createiOSColorAliasTokens = memoize(createiOSColorAliasTokensWorker);
+
 function createiOSShadowAliasTokensWorker(mode: AppearanceOptions): ThemeShadowDefinition {
-  const aliasTokens = getiOSShadowTokens(mode);
+  const aliasTokens = getShadowTokens(mode);
   return mapPipelineToShadow(aliasTokens);
 }
 

packages/theming/theme-tokens/package.json

@@ -32,7 +32,7 @@
   "license": "MIT",
   "dependencies": {
     "@fluentui-react-native/design-tokens-android": "^0.37.0",
-    "@fluentui-react-native/design-tokens-ios": "^0.36.0",
+    "@fluentui-react-native/design-tokens-ios": "^0.38.0",
     "@fluentui-react-native/design-tokens-win32": "^0.36.0",
     "@fluentui-react-native/design-tokens-windows": "^0.36.0",
     "@fluentui-react-native/theme-types": ">=0.28.0 <1.0.0",

packages/theming/theme-tokens/src/getTokens.android.ts

@@ -1,5 +1,8 @@
 import lightAliasTokens from '@fluentui-react-native/design-tokens-android/light/tokens-aliases.json';
 import darkAliasTokens from '@fluentui-react-native/design-tokens-android/dark/tokens-aliases.json';
+import lightShadowTokens from '@fluentui-react-native/design-tokens-android/light/tokens-shadow.json';
+import darkShadowTokens from '@fluentui-react-native/design-tokens-android/dark/tokens-shadow.json';
+
 import { AppearanceOptions } from '@fluentui-react-native/theme-types';
 
 export function getAliasTokens(mode: AppearanceOptions) {
@@ -8,5 +11,20 @@ export function getAliasTokens(mode: AppearanceOptions) {
   } else if (mode === 'dark') {
     return darkAliasTokens;
   }
+
+  // TODO #2492 we should be throwing an error if highContrast mode is set in Android, but currently
+  // the default theme tries to create a highContrast mode so as a workaround we return the light mode tokens.
   return lightAliasTokens;
 }
+
+export function getShadowTokens(mode: AppearanceOptions) {
+  if (mode === 'light') {
+    return lightShadowTokens;
+  } else if (mode === 'dark') {
+    return darkShadowTokens;
+  }
+
+  // TODO #2492 we should be throwing an error if highContrast mode is set in Android, but currently
+  // the default theme tries to create a highContrast mode so as a workaround we return the light mode tokens.
+  return lightShadowTokens;
+}

packages/theming/theme-tokens/src/getTokens.ios.ts

@@ -0,0 +1,35 @@
+import iOSLightAliasTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-aliases.json';
+import iOSDarkAliasTokens from '@fluentui-react-native/design-tokens-ios/dark/tokens-aliases.json';
+import iOSLightShadowTokens from '@fluentui-react-native/design-tokens-ios/light/tokens-shadow.json';
+import iOSDarkShadowTokens from '@fluentui-react-native/design-tokens-ios/dark/tokens-shadow.json';
+
+import { AppearanceOptions } from '@fluentui-react-native/theme-types';
+import { assertNever } from 'assert-never';
+
+export function getAliasTokens(mode: AppearanceOptions) {
+  if (mode === 'light') {
+    return iOSLightAliasTokens;
+  } else if (mode === 'dark') {
+    return iOSDarkAliasTokens;
+  } else if (mode === 'highContrast') {
+    // TODO #2492 we should be throwing an error if highContrast mode is set in iOS, but currently
+    // the default theme tries to create a highContrast mode so as a workaround we return the light mode tokens.
+    return iOSLightAliasTokens;
+  } else {
+    assertNever(mode);
+  }
+}
+
+export function getShadowTokens(mode: AppearanceOptions) {
+  if (mode === 'light') {
+    return iOSLightShadowTokens;
+  } else if (mode === 'dark') {
+    return iOSDarkShadowTokens;
+  } else if (mode === 'highContrast') {
+    // TODO #2492 we should be throwing an error if highContrast mode is set in iOS, but currently
+    // the default theme tries to create a highContrast mode so as a workaround we return the light mode tokens.
+    return iOSLightShadowTokens;
+  } else {
+    assertNever(mode);
+  }
+}

packages/theming/theme-tokens/src/getTokens.ts

@@ -1,5 +1,9 @@
 import lightAliasTokens from '@fluentui-react-native/design-tokens-windows/light/tokens-aliases.json';
 import darkAliasTokens from '@fluentui-react-native/design-tokens-windows/dark/tokens-aliases.json';
+import lightShadowTokens from '@fluentui-react-native/design-tokens-windows/light/tokens-shadow.json';
+import darkShadowTokens from '@fluentui-react-native/design-tokens-windows/dark/tokens-shadow.json';
+import hcShadowTokens from '@fluentui-react-native/design-tokens-win32/hc/tokens-shadow.json';
+
 import { hcAliasTokens } from './highContrast/tokens-alias';
 import { AppearanceOptions } from '@fluentui-react-native/theme-types';
 import { assertNever } from 'assert-never';
@@ -17,3 +21,14 @@ export function getAliasTokens(mode: AppearanceOptions) {
 
   return lightAliasTokens;
 }
+
+export function getShadowTokens(mode: AppearanceOptions) {
+  if (mode === 'light') {
+    return lightShadowTokens;
+  } else if (mode === 'dark') {
+    return darkShadowTokens;
+  }
+
+  // HC mode.
+  return hcShadowTokens;
+}

packages/theming/theme-tokens/src/index.ts

@@ -1,3 +1,2 @@
 export { default as globalTokens } from './tokens-global';
-export { getAliasTokens } from './getTokens';
-export { getShadowTokens } from './getShadowTokens';
+export { getAliasTokens, getShadowTokens } from './getTokens';

packages/theming/theme-types/src/Color.types.ts

@@ -522,6 +522,14 @@ export interface AliasColorTokens {
   /** @platform android, iOS */
   neutralForegroundOnColor?: ColorValue;
 
+  // TODO #2440: Add to android
+  /** @platform iOS */
+  neutralForegroundDarkStatic?: ColorValue;
+
+  // TODO #2440: Add to android
+  /** @platform iOS */
+  neutralForegroundLightStatic?: ColorValue;
+
   /** @platform macOS, win32, windows */
   neutralForegroundOnBrand?: ColorValue;
 
@@ -661,6 +669,14 @@ export interface AliasColorTokens {
   /** @platform android, iOS, macOS, win32, windows */
   neutralBackground6?: ColorValue;
 
+  // TODO #2440: Add to android
+  /** @platform iOS */
+  neutralBackgroundCanvas?: ColorValue;
+
+  // TODO #2440: Add to android
+  /** @platform iOS */
+  neutralBackgroundDarkStatic?: ColorValue;
+
   /** @platform android, iOS, macOS, win32, windows */
   neutralBackgroundInverted?: ColorValue;
 
@@ -788,6 +804,14 @@ export interface AliasColorTokens {
   /** @platform android, iOS, macOS, win32, windows */
   neutralStrokeDisabled?: ColorValue;
 
+  // TODO #2440: Add to android
+  /** @platform iOS */
+  neutralStrokeFocus1?: ColorValue;
+
+  // TODO #2440: Add to android
+  /** @platform iOS */
+  neutralStrokeFocus2?: ColorValue;
+
   /** @platform macOS, win32, windows */
   strokeFocus1?: ColorValue;
 

packages/theming/theming-utils/src/mapPipelineToTheme.android.ts

@@ -1,8 +1,6 @@
 import { AliasColorTokens, Variants, VariantValue } from '@fluentui-react-native/theme-types';
 
-// API that translates tokens coming for android to Theme color values.
-// This is implemented in a per-plaform fashion, for each endpoint that maps to similar token sets in design - i.e. map to similar
-// pipeline output.
+// API that maps tokens coming from the android token pipeline to Theme color values.
 export function mapPipelineToTheme(pipelineOutput: any): AliasColorTokens {
   return {
     neutralForeground1: pipelineOutput.neutralForeground1.fillColorRest,