Fix contrast issues in V8 Fluent2 Dark Theme (microsoft#28486)

* Fix up fluent-2 v8 theme contrast colors in dark mode * Add change log * Add all color types * Make sure theme aligns
miroslavstastny · Jul 12, 2023 · 915acd6 · 915acd6
1 parent 4f56d46
commit 915acd6
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 0 deletions.
diff --git a/change/@fluentui-fluent2-theme-ef95a929-6b64-477a-a5b8-9a5b59e53221.json 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": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git 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<IButtonStyles> {
     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
@@ -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<IExtendedSemanticColors> = {
+  // 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,
 });