fix(react-migration-v8-v9): use webDarkTheme as createV9Theme base for inverted v8 themes

change/@fluentui-react-migration-v8-v9-create-v9-theme-dark-base.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: createV9Theme uses webDarkTheme as the base theme for inverted v8 themes",
+  "packageName": "@fluentui/react-migration-v8-v9",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-migration-v8-v9/library/src/components/Theme/v9ThemeShim.test.ts

@@ -0,0 +1,27 @@
+import { createTheme } from '@fluentui/react';
+import { teamsHighContrastTheme, webDarkTheme, webLightTheme } from '@fluentui/react-components';
+import { createV9Theme } from './v9ThemeShim';
+
+describe('createV9Theme', () => {
+  // Status tokens have no v8 equivalent, so their values always come from the base v9 theme.
+  it('uses webLightTheme as the base for a non-inverted v8 theme', () => {
+    const theme = createV9Theme(createTheme({ isInverted: false }));
+
+    expect(theme.colorStatusDangerForeground1).toBe(webLightTheme.colorStatusDangerForeground1);
+    expect(theme.colorStatusSuccessBackground1).toBe(webLightTheme.colorStatusSuccessBackground1);
+  });
+
+  // Regression: https://github.com/microsoft/fluentui/issues/31728
+  it('uses webDarkTheme as the base for an inverted v8 theme', () => {
+    const theme = createV9Theme(createTheme({ isInverted: true }));
+
+    expect(theme.colorStatusDangerForeground1).toBe(webDarkTheme.colorStatusDangerForeground1);
+    expect(theme.colorStatusSuccessBackground1).toBe(webDarkTheme.colorStatusSuccessBackground1);
+  });
+
+  it('prefers an explicitly passed base theme over the inferred one', () => {
+    const theme = createV9Theme(createTheme({ isInverted: true }), teamsHighContrastTheme);
+
+    expect(theme.colorStatusDangerForeground1).toBe(teamsHighContrastTheme.colorStatusDangerForeground1);
+  });
+});

packages/react-components/react-migration-v8-v9/library/src/components/Theme/v9ThemeShim.ts

@@ -1,6 +1,6 @@
 import type { Theme as ThemeV8 } from '@fluentui/react';
 import type { IEffects, IPalette } from '@fluentui/react';
-import { webLightTheme } from '@fluentui/react-components';
+import { webDarkTheme, webLightTheme } from '@fluentui/react-components';
 import type { BorderRadiusTokens, ColorTokens, ShadowTokens, Theme as ThemeV9 } from '@fluentui/react-components';
 import { blackAlpha, whiteAlpha, grey, grey10Alpha, grey12Alpha } from './themeDuplicates';
 
@@ -221,10 +221,11 @@ const mapBorderRadiusTokens = (effects: IEffects): Partial<BorderRadiusTokens> =
 
 /**
  * Creates a v9 theme from a v8 theme.
- * You can optional pass a base v9 theme; otherwise webLightTheme is used.
+ * You can optionally pass a base v9 theme; otherwise webDarkTheme is used for inverted (dark) v8 themes
+ * and webLightTheme for the rest.
  */
 export const createV9Theme = (themeV8: ThemeV8, baseThemeV9?: ThemeV9): ThemeV9 => {
-  const baseTheme = baseThemeV9 ?? webLightTheme;
+  const baseTheme = baseThemeV9 ?? (themeV8.isInverted ? webDarkTheme : webLightTheme);
 
   return {
     ...baseTheme,