Azure Theme 8.0 dropdown fix for high contrast themes

change/@fluentui-azure-themes-59716b97-073a-4402-8be1-397b61d914af.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "dropdown style bug fix for high contrast themes",
+  "packageName": "@fluentui/azure-themes",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/azure-themes/src/azure/AzureColors.ts

@@ -300,6 +300,15 @@ export const DarkSemanticColors: IAzureSemanticColors = {
     },
     focus: BaseColors.GRAY_A19F9D,
   },
+  dropDown: {
+    background: {
+      rest: BaseColors.GRAY_252423,
+      hover: BaseColors.GRAY_323130,
+    },
+    text: {
+      hovered: BaseColors.WHITE,
+    },
+  },
   item: {
     hover: BaseColors.GRAY_323130,
     select: BaseColors.GRAY_3B3A39,
@@ -554,6 +563,15 @@ export const HighContrastDarkSemanticColors: IAzureSemanticColors = {
     },
     focus: BaseColors.GRAY_A19F9D,
   },
+  dropDown: {
+    background: {
+      rest: BaseColors.GRAY_1B1A19,
+      hover: BaseColors.TRANSPARENT,
+    },
+    text: {
+      hovered: BaseColors.WHITE,
+    },
+  },
   item: {
     hover: BaseColors.BLUE_00FFFF,
     select: BaseColors.GRAY_808080_050,
@@ -808,6 +826,15 @@ export const LightSemanticColors: IAzureSemanticColors = {
     },
     focus: BaseColors.GRAY_605E5C,
   },
+  dropDown: {
+    background: {
+      rest: BaseColors.WHITE,
+      hover: BaseColors.GRAY_F3F2F1,
+    },
+    text: {
+      hovered: BaseColors.GRAY_302928,
+    },
+  },
   item: {
     hover: BaseColors.GRAY_F3F2F1,
     select: BaseColors.GRAY_EDEBE9,
@@ -1062,6 +1089,15 @@ export const HighContrastLightSemanticColors: IAzureSemanticColors = {
     },
     focus: BaseColors.GRAY_323130,
   },
+  dropDown: {
+    background: {
+      rest: BaseColors.WHITE,
+      hover: BaseColors.TRANSPARENT,
+    },
+    text: {
+      hovered: BaseColors.BLACK,
+    },
+  },
   item: {
     hover: BaseColors.PURPLE_800080,
     select: BaseColors.GRAY_EDEBE9,

packages/azure-themes/src/azure/AzureThemeDark.ts

@@ -52,6 +52,9 @@ const darkExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
   datePickerSelectionText: DarkSemanticColors.datePicker.rest.text,
   disabledBackground: CommonSemanticColors.backgrounds.disabled,
   disabledBodyText: DarkSemanticColors.text.disabled,
+  dropdownBackground: DarkSemanticColors.dropDown.background.rest,
+  dropdownItemHover: DarkSemanticColors.dropDown.text.hovered,
+  dropdownTextHovered: DarkSemanticColors.dropDown.text.hovered,
   errorBackground: DarkSemanticColors.controlOutlines.error,
   errorText: DarkSemanticColors.text.error,
   focusBorder: DarkSemanticColors.controlOutlines.accent,

packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts

@@ -53,6 +53,9 @@ const highContrastDarkExtendedSemanticColors: Partial<IExtendedSemanticColors> =
   datePickerSelectionText: HighContrastDarkSemanticColors.datePicker.rest.text,
   disabledBackground: CommonSemanticColors.backgrounds.disabled,
   disabledBodyText: HighContrastDarkSemanticColors.text.disabled,
+  dropdownBackground: HighContrastDarkSemanticColors.dropDown.background.rest,
+  dropdownItemHover: HighContrastDarkSemanticColors.dropDown.background.hover,
+  dropdownTextHovered: HighContrastDarkSemanticColors.dropDown.text.hovered,
   errorBackground: HighContrastDarkSemanticColors.controlOutlines.error,
   errorText: HighContrastDarkSemanticColors.text.error,
   focusBorder: HighContrastDarkSemanticColors.controlOutlines.accent,

packages/azure-themes/src/azure/AzureThemeHighContrastLight.ts

@@ -53,6 +53,9 @@ const highContrastLightExtendedSemanticColors: Partial<IExtendedSemanticColors>
   datePickerSelectionText: HighContrastLightSemanticColors.datePicker.rest.text,
   disabledBackground: CommonSemanticColors.backgrounds.disabled,
   disabledBodyText: HighContrastLightSemanticColors.text.disabled,
+  dropdownBackground: HighContrastLightSemanticColors.dropDown.background.rest,
+  dropdownItemHover: HighContrastLightSemanticColors.dropDown.background.hover,
+  dropdownTextHovered: HighContrastLightSemanticColors.dropDown.text.hovered,
   errorBackground: HighContrastLightSemanticColors.controlOutlines.error,
   errorText: HighContrastLightSemanticColors.text.error,
   focusBorder: HighContrastLightSemanticColors.controlOutlines.accent,

packages/azure-themes/src/azure/AzureThemeLight.ts

@@ -53,6 +53,9 @@ const lightExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
   datePickerSelectionText: LightSemanticColors.datePicker.rest.text,
   disabledBackground: CommonSemanticColors.backgrounds.disabled,
   disabledBodyText: LightSemanticColors.text.disabled,
+  dropdownBackground: LightSemanticColors.dropDown.background.rest,
+  dropdownItemHover: LightSemanticColors.dropDown.background.hover,
+  dropdownTextHovered: LightSemanticColors.dropDown.text.hovered,
   errorBackground: LightSemanticColors.controlOutlines.error,
   errorText: LightSemanticColors.text.error,
   focusBorder: LightSemanticColors.controlOutlines.accent,

packages/azure-themes/src/azure/IAzureSemanticColors.ts

@@ -143,6 +143,15 @@ export interface IAzureSemanticColors {
     };
     focus: string;
   };
+  dropDown: {
+    background: {
+      rest: string;
+      hover: string;
+    };
+    text: {
+      hovered: string;
+    };
+  };
   item: {
     hover: string;
     select: string;

packages/azure-themes/src/azure/IExtendedSemanticColors.ts

@@ -71,6 +71,9 @@ export interface IExtendedSemanticColors extends ISemanticColors {
   datePickerSelectionText: string;
   disabledBackground: string;
   disabledBodyText: string;
+  dropdownBackground: string;
+  dropdownItemHover: string;
+  dropdownTextHovered: string;
   errorBackground: string;
   errorText: string;
   focusBorder: string;

packages/azure-themes/src/azure/styles/DropDown.styles.ts

@@ -76,14 +76,14 @@ export const DropdownStyles = (props: IDropdownStyleProps): Partial<IDropdownSty
             color: semanticColors.inputPlaceholderText,
           },
           ['&:hover .ms-Dropdown-title']: {
-            color: extendedSemanticColors.commandBarButtonTextHover,
+            color: extendedSemanticColors.bodyText,
             borderColor: semanticColors.inputText,
           },
           ['&:focus .ms-Dropdown-title']: {
             borderColor: semanticColors.focusBorder,
           },
           ['&:active .ms-Dropdown-title']: {
-            color: extendedSemanticColors.commandBarButtonTextHover,
+            color: semanticColors.bodyText,
             borderColor: semanticColors.focusBorder,
           },
           // CaretDown states are the same for focus, hover, active.
@@ -129,43 +129,72 @@ export const DropdownStyles = (props: IDropdownStyleProps): Partial<IDropdownSty
       },
     ],
     dropdownItemsWrapper: {
-      backgroundColor: semanticColors.bodyBackground,
+      backgroundColor: extendedSemanticColors.dropdownBackground,
       borderColor: semanticColors.inputBorder,
       border: 0,
     },
     dropdownItem: {
       color: semanticColors.bodyText,
       fontSize: theme.fonts.medium.fontSize,
-      backgroundColor: extendedSemanticColors.controlBackground,
+      backgroundColor: extendedSemanticColors.dropdownBackground,
       selectors: {
         // active: Mouse down on the item, then drag outside.
         '&:hover, &:active, &:hover:focus': {
           backgroundColor: semanticColors.listItemBackgroundHovered,
           borderColor: 'transparent',
-          color: extendedSemanticColors.commandBarButtonTextHover,
+          color: extendedSemanticColors.dropdownTextHovered,
+        },
+        // unselected  multi-choice item
+        '&.ms-Checkbox': {
+          color: extendedSemanticColors.bodyText,
+          backgroundColor: extendedSemanticColors.dropdownBackground,
+        },
+        // unselected  multi-choice hovered item
+        '&.ms-Checkbox:hover': {
+          color: extendedSemanticColors.dropdownTextHovered,
+          backgroundColor: extendedSemanticColors.listItemBackgroundHovered,
         },
       },
     },
     dropdownItemDisabled: {
       color: semanticColors.primaryButtonTextDisabled,
       fontSize: theme.fonts.medium.fontSize,
-      backgroundColor: extendedSemanticColors.controlBackground,
+      backgroundColor: extendedSemanticColors.dropdownBackground,
+      selectors: {
+        // multi select drop down disabled items
+        '&.ms-Checkbox': {
+          backgroundColor: extendedSemanticColors.dropdownBackground,
+        },
+        // multi select drop down disabled items hovered
+        '&.ms-Checkbox:hover': {
+          backgroundColor: extendedSemanticColors.dropdownBackground,
+        },
+      },
     },
     dropdownItemSelected: {
       fontSize: theme.fonts.medium.fontSize,
       backgroundColor: semanticColors.listItemBackgroundChecked,
-      color: extendedSemanticColors.commandBarButtonTextHover,
+      color: extendedSemanticColors.bodyText,
       selectors: {
         '&:hover, &:focus, &:active, &:hover:focus': {
           backgroundColor: semanticColors.listItemBackgroundChecked,
           borderColor: 'transparent',
         },
+        // multi select drop down items
+        '&.ms-Checkbox': {
+          backgroundColor: extendedSemanticColors.dropdownBackground,
+        },
+        // multi select drop down items hovered
+        '&.ms-Checkbox:hover': {
+          backgroundColor: extendedSemanticColors.listItemBackgroundHovered,
+          color: extendedSemanticColors.dropdownTextHovered,
+        },
       },
     },
     dropdownItemHeader: {
       color: semanticColors.inputText,
       fontWeight: '600',
-      backgroundColor: extendedSemanticColors.controlBackground,
+      backgroundColor: extendedSemanticColors.dropdownBackground,
     },
     subComponentStyles: {
       panel: {},