Azure Theme 7.0 dropdown fix for high contrast themes

change/@uifabric-azure-themes-e46d8702-0750-495a-85d2-77326b074c49.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "azure theme dropdown style fix for high contrast themes",
+  "packageName": "@uifabric/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,
@@ -540,6 +549,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,
@@ -780,6 +798,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,
@@ -1020,6 +1047,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

@@ -63,6 +63,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

@@ -79,14 +79,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.
@@ -132,43 +132,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: {},