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

package/lib/getOfficeTokens.d.ts

@@ -1,4 +1,407 @@
-export declare function getOfficeAliasTokens(officeTheme: string): any;
+export declare function getOfficeAliasTokens(officeTheme: string): {
+    body1: {
+        fontFamily: string;
+        fontLineHeight: number;
+        fontSize: number;
+        fontWeight: string;
+    };
+    body1Strong: {
+        fontFamily: string;
+        fontLineHeight: number;
+        fontSize: number;
+        fontWeight: string;
+    };
+    body2: {
+        fontFamily: string;
+        fontLineHeight: number;
+        fontSize: number;
+        fontWeight: string;
+    };
+    body2Strong: {
+        fontFamily: string;
+        fontLineHeight: number;
+        fontSize: number;
+        fontWeight: string;
+    };
+    brandBackground: {
+        rest: string;
+        hover: string;
+        pressed: string;
+        selected: string;
+    };
+    brandBackground2: {
+        rest: string;
+    };
+    brandBackgroundStatic: {
+        rest: string;
+    };
+    brandForeground1: {
+        rest: string;
+    };
+    brandForeground2: {
+        rest: string;
+    };
+    brandForegroundLink: {
+        rest: string;
+        hover: string;
+        pressed: string;
+        selected: string;
+    };
+    brandStroke1: {
+        rest: string;
+    };
+    brandStroke2: {
+        rest: string;
+    };
+    caption1: {
+        fontFamily: string;
+        fontLineHeight: number;
+        fontSize: number;
+        fontWeight: string;
+    };
+    compoundBrandBackground1: {
+        rest: string;
+        hover: string;
+        pressed: string;
+    };
+    compoundBrandForeground1: {
+        rest: string;
+        hover: string;
+        pressed: string;
+    };
+    compoundBrandStroke1: {
+        rest: string;
+        hover: string;
+        pressed: string;
+    };
+    dangerBackground1: {
+        rest: string;
+    };
+    dangerBackground2: {
+        rest: string;
+    };
+    dangerBackground3: {
+        rest: string;
+    };
+    dangerBorder1: {
+        rest: string;
+    };
+    dangerBorder2: {
+        rest: string;
+    };
+    dangerBorderActive: {
+        rest: string;
+    };
+    dangerForeground1: {
+        rest: string;
+    };
+    dangerForeground2: {
+        rest: string;
+    };
+    dangerForeground3: {
+        rest: string;
+    };
+    dangerForegroundInverted: {
+        rest: string;
+    };
+    display: {
+        fontFamily: string;
+        fontLineHeight: number;
+        fontSize: number;
+        fontWeight: string;
+    };
+    largeTitle: {
+        fontFamily: string;
+        fontLineHeight: number;
+        fontSize: number;
+        fontWeight: string;
+    };
+    neutralBackground1: {
+        rest: string;
+        hover: string;
+        pressed: string;
+        selected: string;
+    };
+    neutralBackground2: {
+        rest: string;
+        hover: string;
+        pressed: string;
+        selected: string;
+    };
+    neutralBackground3: {
+        rest: string;
+        hover: string;
+        pressed: string;
+        selected: string;
+    };
+    neutralBackground4: {
+        rest: string;
+        hover: string;
+        pressed: string;
+        selected: string;
+    };
+    neutralBackground5: {
+        rest: string;
+        hover: string;
+        pressed: string;
+        selected: string;
+    };
+    neutralBackground6: {
+        rest: string;
+    };
+    neutralBackgroundDisabled: {
+        rest: string;
+    };
+    neutralBackgroundInverted: {
+        rest: string;
+    };
+    neutralForeground1: {
+        rest: string;
+        hover: string;
+        pressed: string;
+        selected: string;
+    };
+    neutralForeground2: {
+        rest: string;
+        hover: string;
+        pressed: string;
+        brandHover: string;
+        brandPressed: string;
+        brandSelected: string;
+        selected: string;
+    };
+    neutralForeground3: {
+        rest: string;
+        hover: string;
+        pressed: string;
+        brandHover: string;
+        brandPressed: string;
+        brandSelected: string;
+        selected: string;
+    };
+    neutralForeground4: {
+        rest: string;
+    };
+    neutralForegroundDisabled: {
+        rest: string;
+    };
+    neutralForegroundInverted: {
+        rest: string;
+    };
+    neutralForegroundInvertedLink: {
+        rest: string;
+        hover: string;
+        pressed: string;
+        selected: string;
+    };
+    neutralForegroundOnBrand: {
+        rest: string;
+        hover: string;
+        pressed: string;
+        selected: string;
+    };
+    neutralStencil1: {
+        rest: string;
+    };
+    neutralStencil2: {
+        rest: string;
+    };
+    neutralStroke1: {
+        rest: string;
+        hover: string;
+        pressed: string;
+        selected: string;
+    };
+    neutralStroke2: {
+        rest: string;
+    };
+    neutralStroke3: {
+        rest: string;
+    };
+    neutralStrokeAccessible: {
+        rest: string;
+        hover: string;
+        pressed: string;
+        selected: string;
+    };
+    neutralStrokeDisabled: {
+        rest: string;
+    };
+    outofofficeBackground1: {
+        rest: string;
+    };
+    outofofficeBackground2: {
+        rest: string;
+    };
+    outofofficeBackground3: {
+        rest: string;
+    };
+    outofofficeBorder1: {
+        rest: string;
+    };
+    outofofficeBorder2: {
+        rest: string;
+    };
+    outofofficeBorderActive: {
+        rest: string;
+    };
+    outofofficeForeground1: {
+        rest: string;
+    };
+    outofofficeForeground2: {
+        rest: string;
+    };
+    outofofficeForeground3: {
+        rest: string;
+    };
+    severeBackground1: {
+        rest: string;
+    };
+    severeBackground2: {
+        rest: string;
+    };
+    severeBackground3: {
+        rest: string;
+    };
+    severeBorder1: {
+        rest: string;
+    };
+    severeBorder2: {
+        rest: string;
+    };
+    severeBorderActive: {
+        rest: string;
+    };
+    severeForeground1: {
+        rest: string;
+    };
+    severeForeground2: {
+        rest: string;
+    };
+    severeForeground3: {
+        rest: string;
+    };
+    strokeFocus1: {
+        rest: string;
+    };
+    strokeFocus2: {
+        rest: string;
+    };
+    subtitle1: {
+        fontFamily: string;
+        fontLineHeight: number;
+        fontSize: number;
+        fontWeight: string;
+    };
+    subtitle1Strong: {
+        fontFamily: string;
+        fontLineHeight: number;
+        fontSize: number;
+        fontWeight: string;
+    };
+    subtitle2: {
+        fontFamily: string;
+        fontLineHeight: number;
+        fontSize: number;
+        fontWeight: string;
+    };
+    subtitle2Strong: {
+        fontFamily: string;
+        fontLineHeight: number;
+        fontSize: number;
+        fontWeight: string;
+    };
+    subtleBackground: {
+        rest: string;
+        hover: string;
+        pressed: string;
+        selected: string;
+    };
+    successBackground1: {
+        rest: string;
+    };
+    successBackground2: {
+        rest: string;
+    };
+    successBackground3: {
+        rest: string;
+    };
+    successBorder1: {
+        rest: string;
+    };
+    successBorder2: {
+        rest: string;
+    };
+    successBorderActive: {
+        rest: string;
+    };
+    successForeground1: {
+        rest: string;
+    };
+    successForeground2: {
+        rest: string;
+    };
+    successForeground3: {
+        rest: string;
+    };
+    successForegroundInverted: {
+        rest: string;
+    };
+    title1: {
+        fontFamily: string;
+        fontLineHeight: number;
+        fontSize: number;
+        fontWeight: string;
+    };
+    title1Strong: {
+        fontFamily: string;
+        fontLineHeight: number;
+        fontSize: number;
+        fontWeight: string;
+    };
+    transparentBackground: {
+        rest: string;
+        hover: string;
+        pressed: string;
+        selected: string;
+    };
+    transparentStroke: {
+        rest: string;
+        hover: string;
+        pressed: string;
+        disabled: string;
+    };
+    warningBackground1: {
+        rest: string;
+    };
+    warningBackground2: {
+        rest: string;
+    };
+    warningBackground3: {
+        rest: string;
+    };
+    warningBorder1: {
+        rest: string;
+    };
+    warningBorder2: {
+        rest: string;
+    };
+    warningBorderActive: {
+        rest: string;
+    };
+    warningForeground1: {
+        rest: string;
+    };
+    warningForeground2: {
+        rest: string;
+    };
+    warningForeground3: {
+        rest: string;
+    };
+    warningForegroundInverted: {
+        rest: string;
+    };
+};
 export declare function getOfficeShadowTokens(officeTheme: string): {
     shadow16: {
         color: string;

package/lib/getOfficeTokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getOfficeTokens.d.ts","sourceRoot":"","sources":["../src/getOfficeTokens.ts"],"names":[],"mappings":"AAUA,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,MAAM,OAYvD;AAED,wBAAgB,qBAAqB,CAAC,WAAW,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYxD"}
+{"version":3,"file":"getOfficeTokens.d.ts","sourceRoot":"","sources":["../src/getOfficeTokens.ts"],"names":[],"mappings":"AASA,wBAAgB,oBAAoB,CAAC,WAAW,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYvD;AAED,wBAAgB,qBAAqB,CAAC,WAAW,EAAE,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAYxD"}

package/lib/getOfficeTokens.js

@@ -5,7 +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) {
     if (officeTheme === 'White' || officeTheme === 'Colorful') {
         return colorfulAliasTokens;

package/lib/getOfficeTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"getOfficeTokens.js","sourceRoot":"","sources":["../src/getOfficeTokens.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,sEAAsE,CAAC;AACpG,OAAO,iBAAiB,MAAM,qEAAqE,CAAC;AACpG,OAAO,mBAAmB,MAAM,yEAAyE,CAAC;AAC1G,OAAO,oBAAoB,MAAM,wEAAwE,CAAC;AAC1G,OAAO,mBAAmB,MAAM,yEAAyE,CAAC;AAC1G,OAAO,oBAAoB,MAAM,wEAAwE,CAAC;AAC1G,OAAO,cAAc,MAAM,kEAAkE,CAAC;AAE9F,OAAO,EAAE,aAAa,EAAE,MAAM,6BAA6B,CAAC;AAE5D,MAAM,UAAU,oBAAoB,CAAC,WAAmB;IACtD,IAAI,WAAW,KAAK,OAAO,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;QAC1D,OAAO,mBAAmB,CAAC;IAC7B,CAAC;SAAM,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;QACtC,OAAO,mBAAmB,CAAC;IAC7B,CAAC;SAAM,IAAI,WAAW,KAAK,OAAO,EAAE,CAAC;QACnC,OAAO,gBAAgB,CAAC;IAC1B,CAAC;SAAM,IAAI,WAAW,KAAK,cAAc,EAAE,CAAC;QAC1C,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,OAAO,mBAAmB,CAAC;AAC7B,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,WAAmB;IACvD,IAAI,WAAW,KAAK,OAAO,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;QAC1D,OAAO,oBAAoB,CAAC;IAC9B,CAAC;SAAM,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;QACtC,OAAO,oBAAoB,CAAC;IAC9B,CAAC;SAAM,IAAI,WAAW,KAAK,OAAO,EAAE,CAAC;QACnC,OAAO,iBAAiB,CAAC;IAC3B,CAAC;SAAM,IAAI,WAAW,KAAK,cAAc,EAAE,CAAC;QAC1C,OAAO,cAAc,CAAC;IACxB,CAAC;IAED,OAAO,mBAAmB,CAAC;AAC7B,CAAC"}
+{"version":3,"file":"getOfficeTokens.js","sourceRoot":"","sources":["../src/getOfficeTokens.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,sEAAsE,CAAC;AACpG,OAAO,iBAAiB,MAAM,qEAAqE,CAAC;AACpG,OAAO,mBAAmB,MAAM,yEAAyE,CAAC;AAC1G,OAAO,oBAAoB,MAAM,wEAAwE,CAAC;AAC1G,OAAO,mBAAmB,MAAM,yEAAyE,CAAC;AAC1G,OAAO,oBAAoB,MAAM,wEAAwE,CAAC;AAC1G,OAAO,cAAc,MAAM,kEAAkE,CAAC;AAC9F,OAAO,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAC;AAE5E,MAAM,UAAU,oBAAoB,CAAC,WAAmB;IACtD,IAAI,WAAW,KAAK,OAAO,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;QAC1D,OAAO,mBAAmB,CAAC;IAC7B,CAAC;SAAM,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;QACtC,OAAO,mBAAmB,CAAC;IAC7B,CAAC;SAAM,IAAI,WAAW,KAAK,OAAO,EAAE,CAAC;QACnC,OAAO,gBAAgB,CAAC;IAC1B,CAAC;SAAM,IAAI,WAAW,KAAK,cAAc,EAAE,CAAC;QAC1C,OAAO,aAAa,CAAC;IACvB,CAAC;IAED,OAAO,mBAAmB,CAAC;AAC7B,CAAC;AAED,MAAM,UAAU,qBAAqB,CAAC,WAAmB;IACvD,IAAI,WAAW,KAAK,OAAO,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;QAC1D,OAAO,oBAAoB,CAAC;IAC9B,CAAC;SAAM,IAAI,WAAW,KAAK,UAAU,EAAE,CAAC;QACtC,OAAO,oBAAoB,CAAC;IAC9B,CAAC;SAAM,IAAI,WAAW,KAAK,OAAO,EAAE,CAAC;QACnC,OAAO,iBAAiB,CAAC;IAC3B,CAAC;SAAM,IAAI,WAAW,KAAK,cAAc,EAAE,CAAC;QAC1C,OAAO,cAAc,CAAC;IACxB,CAAC;IAED,OAAO,mBAAmB,CAAC;AAC7B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/win32-theme",
-  "version": "0.39.8",
+  "version": "0.39.11",
   "description": "Win32 office theme that works with the theming native module",
   "keywords": [],
   "license": "MIT",
@@ -33,12 +33,10 @@
     "update-snapshots": "fluentui-scripts jest -u"
   },
   "dependencies": {
-    "@fluentui-react-native/default-theme": "0.27.8",
-    "@fluentui-react-native/design": "0.3.1",
+    "@fluentui-react-native/default-theme": "0.27.11",
+    "@fluentui-react-native/design": "0.4.0",
     "@fluentui-react-native/design-tokens-win32": "^0.53.0",
-    "@fluentui-react-native/framework-base": "0.6.1",
-    "@fluentui-react-native/theme-tokens": "0.29.2",
-    "@fluentui-react-native/theming-utils": "0.27.8"
+    "@fluentui-react-native/framework-base": "0.7.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

package/src/NativeModule/getThemingModule.native.ts

@@ -1,7 +1,7 @@
 import { NativeEventEmitter, TurboModuleRegistry } from 'react-native';
 
 import { fallbackGetPalette, fallbackOfficeModule } from './fallbackOfficeModule';
-import { setCurrentHostThemeSetting } from './hostThemeSetting';
+import { setCurrentHostThemeState } from './hostThemeSetting';
 import type { OfficeThemingModule } from './officeThemingModule';
 
 /**
@@ -22,6 +22,7 @@ function themeGetConstants(): ReturnType<OfficeThemingModule['getConstants']> {
 let themingModule: OfficeThemingModule = undefined;
 let themingModuleConstants: ReturnType<OfficeThemingModule['getConstants']> = undefined;
 let themingModuleEmitter: NativeEventEmitter = undefined;
+
 export function getThemingModule(): [OfficeThemingModule, NativeEventEmitter | undefined] {
   if (!themingModule) {
     const module = TurboModuleRegistry.get<OfficeThemingModule>('Theming');
@@ -30,7 +31,12 @@ export function getThemingModule(): [OfficeThemingModule, NativeEventEmitter | u
       if (!isInstantiated) {
         // We need to store the host theme so that when themes are created
         // they can use this information.
-        setCurrentHostThemeSetting(module.getConstants().initialHostThemeSetting);
+        const initialConstants = module.getConstants();
+        setCurrentHostThemeState({
+          hostThemeSetting: initialConstants.initialHostThemeSetting ?? '',
+          colorScheme: initialConstants.initialColorScheme,
+          isHighContrast: initialConstants.initialIsHighContrast,
+        });
         isInstantiated = true;
       }
 

package/src/NativeModule/hostThemeSetting.ts

@@ -7,12 +7,22 @@
 // Unfortunately, native changes take a long time to roundtrip,
 // so as a workaround we store a copy of that information instead to last the
 // entire lifetime of the instance.
-let currentHostThemeSetting: string = '';
+export interface CurrentHostThemeState {
+  hostThemeSetting: string;
+  colorScheme?: 'light' | 'dark';
+  isHighContrast?: boolean;
+}
 
-export const getCurrentHostThemeSetting = () => {
-  return currentHostThemeSetting;
+let currentHostThemeState: CurrentHostThemeState = { hostThemeSetting: '' };
+
+export const getCurrentHostThemeSetting = () => currentHostThemeState.hostThemeSetting;
+
+export const getCurrentHostThemeState = () => currentHostThemeState;
+
+export const setCurrentHostThemeSetting = (hostThemeSetting: string) => {
+  currentHostThemeState = { hostThemeSetting };
 };
 
-export const setCurrentHostThemeSetting = (newHostThemeSetting: string) => {
-  currentHostThemeSetting = newHostThemeSetting;
+export const setCurrentHostThemeState = (state: CurrentHostThemeState) => {
+  currentHostThemeState = state;
 };

package/src/NativeModule/index.ts

@@ -6,6 +6,7 @@ export type {
   CxxException,
   NativeColorRamps,
   NativeColorNames,
+  OfficeThemingConstants,
   OfficeThemingModule,
   IEventEmitter,
 } from './officeThemingModule';

package/src/NativeModule/officeThemingModule.ts

@@ -1,11 +1,15 @@
 import type { NativeModule, ColorValue } from 'react-native';
 
-import type { OfficePalette, Typography } from '@fluentui-react-native/design/theming';
+import type { OfficePalette, ThemeColorScheme, Typography } from '@fluentui-react-native/design/theming';
 
 // eslint-disable-next-line @typescript-eslint/no-empty-object-type
 type ObjectBase = {};
 
-export type PlatformDefaultsChangedArgs = { hostThemeSetting: string };
+export type PlatformDefaultsChangedArgs = {
+  hostThemeSetting: string;
+  colorScheme?: ThemeColorScheme;
+  isHighContrast?: boolean;
+};
 export type PlatformDefaultsChangedCallback = (args?: PlatformDefaultsChangedArgs) => void;
 
 export interface CxxException {
@@ -27,15 +31,19 @@ export interface NativeColorNames {
   Sepias: string[];
 }
 
+export interface OfficeThemingConstants {
+  typography: ObjectBase;
+  fluentTypography: Typography;
+  ramps: NativeColorRamps;
+  rampNames: NativeColorNames;
+  initialHostThemeSetting?: string;
+  initialColorScheme?: ThemeColorScheme;
+  initialIsHighContrast?: boolean;
+}
+
 export interface OfficeThemingModule extends NativeModule {
   getPalette(palette?: string): OfficePalette | CxxException;
-  getConstants(): {
-    typography: ObjectBase; // TODO: figure out why this is not a real type
-    fluentTypography: Typography;
-    ramps: NativeColorRamps;
-    rampNames: NativeColorNames;
-    initialHostThemeSetting?: string;
-  };
+  getConstants(): OfficeThemingConstants;
 }
 
 export interface IEventEmitter {

package/src/__tests__/win32-theme.test.ts

@@ -41,6 +41,10 @@ it('createOfficeTheme test', () => {
   expect(officeTheme).toMatchSnapshot();
 });
 
+it('preserves high contrast identity on the direct legacy theme path', () => {
+  expect(createOfficeTheme({ paletteName: 'TaskPane', appearance: 'highContrast' }).theme.host.appearance).toBe('highContrast');
+});
+
 it.concurrent.each(officeThemes)('createBrandedThemeWithAlias test themeName: %s', async (themeName: string) => {
   setCurrentHostThemeSetting('Colorful');
   const officeTheme = createOfficeTheme({ paletteName: 'TaskPane', appearance: 'light' }).theme;

package/src/createBrandedThemeWithAlias.ts

@@ -1,6 +1,6 @@
 import type { ColorValue } from 'react-native';
 
-import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import { globalTokens } from '@fluentui-react-native/design/tokens/legacy';
 import type { Theme, PartialTheme, AliasColorTokens } from '@fluentui-react-native/design/theming';
 
 export function createBrandedThemeWithAlias(themeName: string, theme: Theme): PartialTheme {

package/src/createFontAliasTokens.ts

@@ -1,6 +1,6 @@
 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';
 
 import { getOfficeAliasTokens } from './getOfficeTokens';
 

package/src/createOfficeAliasTokens.ts

@@ -1,6 +1,6 @@
 import { memoize } from '@fluentui-react-native/framework-base';
 import type { AliasColorTokens, ThemeShadowDefinition } from '@fluentui-react-native/design/theming';
-import { mapPipelineToShadow, mapPipelineToTheme } from '@fluentui-react-native/theming-utils';
+import { mapPipelineToShadow, mapPipelineToTheme } from '@fluentui-react-native/design/theming';
 
 import { getOfficeAliasTokens, getOfficeShadowTokens } from './getOfficeTokens';