From bc0e855136356b36b57722a15994a6a9919ec0a0 Mon Sep 17 00:00:00 2001
From: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com>
Date: Mon, 27 Mar 2023 11:56:58 -0700
Subject: [PATCH 1/3] Azure Theme 7.0 dropdown fix for high contrast themes

---
 .../azure-themes/src/azure/AzureColors.ts     | 36 +++++++++++++++
 .../azure-themes/src/azure/AzureThemeDark.ts  |  3 ++
 .../src/azure/AzureThemeHighContrastDark.ts   |  3 ++
 .../src/azure/AzureThemeHighContrastLight.ts  |  3 ++
 .../azure-themes/src/azure/AzureThemeLight.ts |  3 ++
 .../src/azure/IAzureSemanticColors.ts         |  9 ++++
 .../src/azure/IExtendedSemanticColors.ts      |  3 ++
 .../src/azure/styles/DropDown.styles.ts       | 45 +++++++++++++++----
 8 files changed, 97 insertions(+), 8 deletions(-)

diff --git a/packages/azure-themes/src/azure/AzureColors.ts b/packages/azure-themes/src/azure/AzureColors.ts
index e73202c8323dec..3f1b532a3927e9 100644
--- a/packages/azure-themes/src/azure/AzureColors.ts
+++ b/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,
diff --git a/packages/azure-themes/src/azure/AzureThemeDark.ts b/packages/azure-themes/src/azure/AzureThemeDark.ts
index 193bae97cc9a92..682908fa597445 100644
--- a/packages/azure-themes/src/azure/AzureThemeDark.ts
+++ b/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,
diff --git a/packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts b/packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts
index 3aac1bfe3a442c..7f40fd2c480dff 100644
--- a/packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts
+++ b/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,
diff --git a/packages/azure-themes/src/azure/AzureThemeHighContrastLight.ts b/packages/azure-themes/src/azure/AzureThemeHighContrastLight.ts
index 940bd2a15fd16d..77b647752cb214 100644
--- a/packages/azure-themes/src/azure/AzureThemeHighContrastLight.ts
+++ b/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,
diff --git a/packages/azure-themes/src/azure/AzureThemeLight.ts b/packages/azure-themes/src/azure/AzureThemeLight.ts
index 505c39c92b34dc..c35dca40222a14 100644
--- a/packages/azure-themes/src/azure/AzureThemeLight.ts
+++ b/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,
diff --git a/packages/azure-themes/src/azure/IAzureSemanticColors.ts b/packages/azure-themes/src/azure/IAzureSemanticColors.ts
index bcbf5d910f4111..4c28a3aba28fbf 100644
--- a/packages/azure-themes/src/azure/IAzureSemanticColors.ts
+++ b/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;
diff --git a/packages/azure-themes/src/azure/IExtendedSemanticColors.ts b/packages/azure-themes/src/azure/IExtendedSemanticColors.ts
index f1ced76c00edba..38900c815fad65 100644
--- a/packages/azure-themes/src/azure/IExtendedSemanticColors.ts
+++ b/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;
diff --git a/packages/azure-themes/src/azure/styles/DropDown.styles.ts b/packages/azure-themes/src/azure/styles/DropDown.styles.ts
index 3f9418e603d806..cba488988d6cec 100644
--- a/packages/azure-themes/src/azure/styles/DropDown.styles.ts
+++ b/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: semanticColors.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: {},

From c19674430c751eaf00f64c8c58b7f004bac2156f Mon Sep 17 00:00:00 2001
From: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com>
Date: Mon, 27 Mar 2023 12:05:30 -0700
Subject: [PATCH 2/3] Change files

---
 ...-azure-themes-e46d8702-0750-495a-85d2-77326b074c49.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@uifabric-azure-themes-e46d8702-0750-495a-85d2-77326b074c49.json

diff --git a/change/@uifabric-azure-themes-e46d8702-0750-495a-85d2-77326b074c49.json b/change/@uifabric-azure-themes-e46d8702-0750-495a-85d2-77326b074c49.json
new file mode 100644
index 00000000000000..6fc22a2b8af24f
--- /dev/null
+++ b/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": "30805892+Jacqueline-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

From 9c840ff6588c5cc4a94efcb1f04ae7fa7fddea9a Mon Sep 17 00:00:00 2001
From: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com>
Date: Mon, 27 Mar 2023 19:12:34 -0700
Subject: [PATCH 3/3] Build error fix

---
 packages/azure-themes/src/azure/styles/DropDown.styles.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/azure-themes/src/azure/styles/DropDown.styles.ts b/packages/azure-themes/src/azure/styles/DropDown.styles.ts
index cba488988d6cec..9b71f25ee1cb87 100644
--- a/packages/azure-themes/src/azure/styles/DropDown.styles.ts
+++ b/packages/azure-themes/src/azure/styles/DropDown.styles.ts
@@ -132,7 +132,7 @@ export const DropdownStyles = (props: IDropdownStyleProps): Partial<IDropdownSty
       },
     ],
     dropdownItemsWrapper: {
-      backgroundColor: semanticColors.dropdownBackground,
+      backgroundColor: extendedSemanticColors.dropdownBackground,
       borderColor: semanticColors.inputBorder,
       border: 0,
     },