From 5250d7cca5ae2ddb001926d2b2540c86afcbfa20 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Mon, 17 Jun 2024 16:27:36 -0700 Subject: [PATCH 1/2] Fix: Ensure createV9Theme uses appropriate base theme for dark theme tokens --- .../src/components/Theme/v9ThemeShim.ts | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts b/packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts index 380bda9911612..5a8b7e86da02c 100644 --- a/packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts +++ b/packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts @@ -1,6 +1,6 @@ import { Theme as ThemeV8 } from '@fluentui/react'; import type { IEffects, IPalette } from '@fluentui/react'; -import { Theme as ThemeV9, webLightTheme } from '@fluentui/react-components'; +import { Theme as ThemeV9, webLightTheme, webDarkTheme } from '@fluentui/react-components'; import type { BorderRadiusTokens, ColorTokens, ShadowTokens } from '@fluentui/react-components'; import { blackAlpha, whiteAlpha, grey, grey10Alpha, grey12Alpha } from './themeDuplicates'; @@ -206,8 +206,7 @@ const mapBorderRadiusTokens = (effects: IEffects): Partial = * You can optional pass a base v9 theme; otherwise webLightTheme is used. */ export const createV9Theme = (themeV8: ThemeV8, baseThemeV9?: ThemeV9): ThemeV9 => { - const baseTheme = baseThemeV9 ?? webLightTheme; - + const baseTheme = baseThemeV9 ?? (themeV8.isInverted ? webDarkTheme : webLightTheme); return { ...baseTheme, ...mapAliasColors(themeV8.palette, themeV8.isInverted), From ca015fd2a716a1e02e4c161a0b7922e24dbe1dd3 Mon Sep 17 00:00:00 2001 From: Miroslav Stastny Date: Mon, 7 Oct 2024 06:55:55 -0700 Subject: [PATCH 2/2] Update packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts Co-authored-by: Mark Wiemer <7833360+mark-wiemer@users.noreply.github.com> --- .../react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts b/packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts index 5a8b7e86da02c..0f729315294b7 100644 --- a/packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts +++ b/packages/react-components/react-migration-v8-v9/src/components/Theme/v9ThemeShim.ts @@ -203,7 +203,7 @@ const mapBorderRadiusTokens = (effects: IEffects): Partial = /** * Creates a v9 theme from a v8 theme. - * You can optional pass a base v9 theme; otherwise webLightTheme is used. + * You can optional pass a base v9 theme; otherwise webLightTheme or webDarkTheme is used, depending on whether the v8 theme is inverted */ export const createV9Theme = (themeV8: ThemeV8, baseThemeV9?: ThemeV9): ThemeV9 => { const baseTheme = baseThemeV9 ?? (themeV8.isInverted ? webDarkTheme : webLightTheme);