diff --git a/change/@fluentui-fluent2-theme-ef95a929-6b64-477a-a5b8-9a5b59e53221.json b/change/@fluentui-fluent2-theme-ef95a929-6b64-477a-a5b8-9a5b59e53221.json new file mode 100644 index 0000000000000..9b2442f2a4f33 --- /dev/null +++ b/change/@fluentui-fluent2-theme-ef95a929-6b64-477a-a5b8-9a5b59e53221.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: Ensure fluent2 dark theme isInverted:true, set primary fluent2darktheme button color to match light theme", + "packageName": "@fluentui/fluent2-theme", + "email": "mifraser@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/fluent2-theme/src/componentStyles/Button.styles.ts b/packages/fluent2-theme/src/componentStyles/Button.styles.ts index eafb8f7c76e1f..45cfbe86c41c9 100644 --- a/packages/fluent2-theme/src/componentStyles/Button.styles.ts +++ b/packages/fluent2-theme/src/componentStyles/Button.styles.ts @@ -88,6 +88,9 @@ export function getPrimaryButtonStyles(theme: ITheme): Partial { description: { color: semanticColors.primaryButtonText, }, + descriptionHovered: { + color: semanticColors.primaryButtonText, + }, }; return styles; diff --git a/packages/fluent2-theme/src/fluent2WebDarkTheme.ts b/packages/fluent2-theme/src/fluent2WebDarkTheme.ts index e8035709761ca..8ac93863d717c 100644 --- a/packages/fluent2-theme/src/fluent2WebDarkTheme.ts +++ b/packages/fluent2-theme/src/fluent2WebDarkTheme.ts @@ -3,6 +3,7 @@ import { createTheme } from '@fluentui/react'; import { IExtendedEffects, IExtendedSemanticColors } from './types'; import { fluent2ComponentStyles } from './fluent2ComponentStyles'; import { fluent2SharedColors } from './fluent2SharedColors'; +import { Fluent2WebLightTheme } from './fluent2WebLightTheme'; const fluent2ForV8DarkEffects: IExtendedEffects = { elevation4: '0px 2px 4px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12)', @@ -56,6 +57,11 @@ const p = fluent2ForV8DarkPalette; const grey36 = '#5C5C5C'; const semanticColorMappingOverridesForDark: Partial = { + // Primary button is unique, it's background color is shared across themes + primaryButtonBackgroundHovered: Fluent2WebLightTheme.palette.themePrimary, + primaryButtonBackgroundPressed: Fluent2WebLightTheme.palette.themeDarker, + primaryButtonBackground: Fluent2WebLightTheme.palette.themeDarkAlt, + // This hex matches the v9 theme. link: p.themeDark, @@ -104,4 +110,5 @@ export const Fluent2WebDarkTheme: ITheme = createTheme({ semanticColors: semanticColorMappingOverridesForDark, components: fluent2ComponentStyles, effects: fluent2ForV8DarkEffects, + isInverted: true, });