Merge remote-tracking branch 'origin/master'

change/@fluentui-azure-themes-948f0da6-df81-438a-95d1-a1cee9359edc.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "cherry pick from #18527",
+  "packageName": "@fluentui/azure-themes",
+  "email": "30805892+Jacqueline-ms@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/azure-themes/README.md

@@ -7,26 +7,13 @@ The Azure themes require the following import statements:
 
 ```js
 import {
-  AzureThemeDark,
   AzureThemeLight,
-  AzureCustomizationsLight,
-  AzureCustomizationsDark,
+  AzureThemeDark,
+  AzureThemeHighContrastLight,
+  AzureThemeHighContrastDark,
 } from '@fluentui/azure-themes';
 ```
 
-The theme may subsequently be set to either the Azure or Azure-Dark themes.
-
-In case of applying theme using `Customizer`:
-
-```jsx
-  import { Customizer } from '@fluentui/react';
-  const customizations = AzureCustomizationsDark; // or alternatively AzureCustomizationsLight
-
-  <Customizer {...customizations}>
-    <div>{child component}</div>
-  </Customizer>
-```
-
 In case of applying theme using `ThemeProvider`:
 
 ```jsx

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

@@ -15,6 +15,7 @@ export namespace BaseColors {
   export const BLUE_015CDA = '#015cda';
   export const BLUE_014DB7 = '#014db7';
   export const BLUE_012B65 = '#012b65';
+  export const BLUE_0F64AE = '#0f64ae';
   export const BLUE_106EBE = '#106EBE';
   export const BLUE_02FEFF = '#02FEFF';
   export const BLUE_043862 = '#043862';
@@ -26,6 +27,7 @@ export namespace BaseColors {
   export const BLUE_2899F5 = '#2899f5';
   export const BLUE_3AA0F3 = '#3aa0f3';
   export const BLUE_55B3FF = '#55b3ff';
+  export const BLUE_7BB2FE = '#7bb2fe';
   export const GREEN_00FF00 = '#00FF00';
   export const GREEN_E6FFCC = '#e6ffcc';
   export const GREEN_F8FFF0 = '#F8FFF0';
@@ -101,6 +103,8 @@ export namespace BaseColors {
   export const GRAY_808080_010 = 'rgba(128, 128, 128, .10)';
   export const GRAY_808080_015 = 'rgba(128, 128, 128, .15)';
   export const GRAY_808080_025 = 'rgba(128, 128, 128, .25)';
+  export const GRAY_808080_030 = 'rgba(128, 128, 128, .30)';
+  export const GRAY_808080_050 = 'rgba(128, 128, 128, .50)';
   export const GRAY_808080_070 = 'rgba(128, 128, 128, .70)';
   export const BLUE_55B3FF_010 = 'rgba(85, 179, 255, .10)';
   export const BLUE_55B3FF_020 = 'rgba(85, 179, 255, .20)';
@@ -145,19 +149,18 @@ export namespace CommonSemanticColors {
 }
 
 export const DarkSemanticColors: IAzureSemanticColors = {
-  background: BaseColors.GRAY_111111,
+  background: BaseColors.GRAY_1B1A19,
   text: {
-    list: BaseColors.WHITE,
-    heading: BaseColors.WHITE,
+    list: BaseColors.GRAY_F3F2F1,
+    heading: BaseColors.GRAY_F3F2F1,
     body: BaseColors.GRAY_F3F2F1,
     bodyHovered: BaseColors.GRAY_FAF9F8,
     value: BaseColors.GRAY_F3F2F1,
     icon: BaseColors.WHITE,
     label: BaseColors.WHITE,
     disabled: BaseColors.GRAY_A19F9D,
-    hyperlink: BaseColors.BLUE_4894FE,
+    hyperlink: BaseColors.BLUE_2899F5,
     hyperlinkHovered: BaseColors.BLUE_82C7FF,
-    hyperlinkBackgroundHovered: BaseColors.TRANSPARENT,
     success: BaseColors.GREEN_5DB300,
     error: BaseColors.RED_F1707B,
     placeholder: BaseColors.GRAY_A19F9D,
@@ -325,6 +328,11 @@ export const DarkSemanticColors: IAzureSemanticColors = {
   detailsRow: {
     border: BaseColors.GRAY_414141,
     focus: BaseColors.GRAY_111111,
+    hoveredLink: BaseColors.BLUE_82C7FF,
+    hoveredRowLink: BaseColors.BLUE_82C7FF,
+    hoveredBackground: BaseColors.GRAY_323130,
+    selectedLink: BaseColors.BLUE_82C7FF,
+    selectedHoveredLink: BaseColors.BLUE_82C7FF,
   },
   radioButton: {
     circle: {
@@ -356,9 +364,9 @@ export const DarkSemanticColors: IAzureSemanticColors = {
 };
 
 export const HighContrastDarkSemanticColors: IAzureSemanticColors = {
-  background: BaseColors.GRAY_111111,
+  background: BaseColors.BLACK,
   text: {
-    list: BaseColors.YELLOW_FEFF00,
+    list: BaseColors.WHITE,
     heading: BaseColors.WHITE,
     body: BaseColors.WHITE,
     bodyHovered: BaseColors.WHITE,
@@ -368,7 +376,6 @@ export const HighContrastDarkSemanticColors: IAzureSemanticColors = {
     disabled: BaseColors.GREEN_0AFF00,
     hyperlink: BaseColors.YELLOW_FEFF00,
     hyperlinkHovered: BaseColors.BLACK,
-    hyperlinkBackgroundHovered: BaseColors.BLUE_00FFFF,
     success: BaseColors.GREEN_5DB300,
     error: BaseColors.RED_F63747,
     placeholder: BaseColors.GREEN_0AFF00,
@@ -486,8 +493,8 @@ export const HighContrastDarkSemanticColors: IAzureSemanticColors = {
   },
   item: {
     hover: BaseColors.BLUE_00FFFF,
-    select: BaseColors.GRAY_808080_025,
-    selectHovered: BaseColors.BLUE_00FFFF,
+    select: BaseColors.GRAY_808080_050,
+    selectHovered: BaseColors.GRAY_808080_050,
   },
   shimmer: {
     primary: BaseColors.GRAY_808080,
@@ -536,6 +543,11 @@ export const HighContrastDarkSemanticColors: IAzureSemanticColors = {
   detailsRow: {
     border: BaseColors.WHITE,
     focus: BaseColors.BLUE_00FFFF,
+    hoveredRowLink: BaseColors.BLUE_7BB2FE,
+    hoveredLink: BaseColors.BLACK,
+    hoveredBackground: BaseColors.GRAY_808080_030,
+    selectedLink: BaseColors.YELLOW_FEFF00,
+    selectedHoveredLink: BaseColors.BLUE_7BB2FE,
   },
   radioButton: {
     circle: {
@@ -579,7 +591,6 @@ export const LightSemanticColors: IAzureSemanticColors = {
     disabled: BaseColors.GRAY_A19F9D,
     hyperlink: BaseColors.BLUE_0078D4,
     hyperlinkHovered: BaseColors.BLUE_004578,
-    hyperlinkBackgroundHovered: BaseColors.TRANSPARENT,
     success: BaseColors.GREEN_428000,
     error: BaseColors.RED_A4262C,
     placeholder: BaseColors.GRAY_8A8886,
@@ -747,6 +758,11 @@ export const LightSemanticColors: IAzureSemanticColors = {
   detailsRow: {
     border: BaseColors.GRAY_F3F2F1,
     focus: BaseColors.WHITE,
+    hoveredRowLink: BaseColors.BLUE_106EBE,
+    hoveredLink: BaseColors.BLUE_106EBE,
+    hoveredBackground: BaseColors.GRAY_F3F2F1,
+    selectedLink: BaseColors.BLUE_106EBE,
+    selectedHoveredLink: BaseColors.BLUE_005A9E,
   },
   radioButton: {
     circle: {
@@ -780,7 +796,7 @@ export const LightSemanticColors: IAzureSemanticColors = {
 export const HighContrastLightSemanticColors: IAzureSemanticColors = {
   background: BaseColors.WHITE,
   text: {
-    list: BaseColors.BLUE_0000CD,
+    list: BaseColors.BLACK,
     heading: BaseColors.BLACK,
     body: BaseColors.BLACK,
     bodyHovered: BaseColors.BLACK,
@@ -789,8 +805,7 @@ export const HighContrastLightSemanticColors: IAzureSemanticColors = {
     label: BaseColors.BLACK,
     disabled: BaseColors.RED_800000,
     hyperlink: BaseColors.BLUE_0000CD,
-    hyperlinkHovered: BaseColors.WHITE,
-    hyperlinkBackgroundHovered: BaseColors.PURPLE_800080,
+    hyperlinkHovered: BaseColors.BLUE_0000CD,
     success: BaseColors.GREEN_428000,
     error: BaseColors.RED_E00B1C,
     placeholder: BaseColors.RED_800000,
@@ -873,21 +888,21 @@ export const HighContrastLightSemanticColors: IAzureSemanticColors = {
     rest: {
       border: BaseColors.GRAY_323130,
       background: BaseColors.BLUE_0078D4,
-      hover: BaseColors.GRAY_323130,
-      hoverText: BaseColors.BLACK,
-      focus: BaseColors.BLACK,
-      check: BaseColors.BLACK,
+      hover: BaseColors.GRAY_605E5C,
+      hoverText: BaseColors.GRAY_201F1E,
+      focus: BaseColors.GRAY_605E5C,
+      check: BaseColors.WHITE,
     },
     checked: {
       border: BaseColors.BLUE_0078D4,
-      background: BaseColors.WHITE,
+      background: BaseColors.BLUE_0078D4,
       default: BaseColors.BLUE_106EBE,
-      hoverBackground: BaseColors.WHITE,
+      hoverBackground: BaseColors.BLUE_005A9E,
       hoverBorder: BaseColors.BLUE_005A9E,
     },
     disabled: {
       border: BaseColors.GRAY_C8C6C4,
-      background: BaseColors.TRANSPARENT,
+      background: BaseColors.GRAY_C8C6C4,
     },
   },
   controlOutlines: {
@@ -909,7 +924,7 @@ export const HighContrastLightSemanticColors: IAzureSemanticColors = {
   item: {
     hover: BaseColors.PURPLE_800080,
     select: BaseColors.GRAY_EDEBE9,
-    selectHovered: BaseColors.PURPLE_800080,
+    selectHovered: BaseColors.GRAY_E1DFDD,
   },
   shimmer: {
     primary: BaseColors.GRAY_F7F7F7,
@@ -958,6 +973,11 @@ export const HighContrastLightSemanticColors: IAzureSemanticColors = {
   detailsRow: {
     border: BaseColors.BLACK,
     focus: BaseColors.PURPLE_800080,
+    hoveredRowLink: BaseColors.BLUE_0F64AE,
+    hoveredLink: BaseColors.WHITE,
+    hoveredBackground: BaseColors.GRAY_F3F2F1,
+    selectedLink: BaseColors.BLUE_0000CD,
+    selectedHoveredLink: BaseColors.BLUE_0F64AE,
   },
   radioButton: {
     circle: {

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

@@ -54,15 +54,18 @@ const darkExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
   inputPlaceholderText: DarkSemanticColors.text.placeholder,
   inputText: DarkSemanticColors.text.value,
   link: DarkSemanticColors.text.hyperlink,
-  linkBackgroundHovered: DarkSemanticColors.text.hyperlinkBackgroundHovered,
   linkHovered: DarkSemanticColors.text.hyperlinkHovered,
   listBackground: DarkSemanticColors.background,
   listHeaderBackgroundPressed: DarkSemanticColors.item.hover,
   listItemBackgroundChecked: DarkSemanticColors.item.select,
   listItemBackgroundCheckedHovered: DarkSemanticColors.item.select,
-  listItemBackgroundHovered: DarkSemanticColors.item.hover,
+  listItemBackgroundHovered: DarkSemanticColors.detailsRow.hoveredBackground,
   listItemBackgroundSelected: DarkSemanticColors.item.select,
   listItemBackgroundSelectedHovered: DarkSemanticColors.item.selectHovered,
+  listLinkHovered: DarkSemanticColors.detailsRow.hoveredLink,
+  listLinkRowHovered: DarkSemanticColors.detailsRow.hoveredRowLink,
+  listLinkRowSelected: DarkSemanticColors.detailsRow.selectedLink,
+  listLinkRowSelectedHovered: DarkSemanticColors.detailsRow.selectedHoveredLink,
   listText: DarkSemanticColors.text.body,
   menuItemBackgroundHovered: DarkSemanticColors.item.hover,
   menuItemBackgroundPressed: DarkSemanticColors.item.select,

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

@@ -55,15 +55,18 @@ const highContrastDarkExtendedSemanticColors: Partial<IExtendedSemanticColors> =
   inputPlaceholderText: HighContrastDarkSemanticColors.text.placeholder,
   inputText: HighContrastDarkSemanticColors.text.value,
   link: HighContrastDarkSemanticColors.text.hyperlink,
-  linkBackgroundHovered: HighContrastDarkSemanticColors.text.hyperlinkBackgroundHovered,
   linkHovered: HighContrastDarkSemanticColors.text.hyperlinkHovered,
   listBackground: HighContrastDarkSemanticColors.background,
   listHeaderBackgroundPressed: HighContrastDarkSemanticColors.item.hover,
   listItemBackgroundChecked: HighContrastDarkSemanticColors.item.select,
   listItemBackgroundCheckedHovered: HighContrastDarkSemanticColors.item.select,
-  listItemBackgroundHovered: HighContrastDarkSemanticColors.item.hover,
-  listItemBackgroundSelected: StyleConstants.transparent,
+  listItemBackgroundHovered: HighContrastDarkSemanticColors.detailsRow.hoveredBackground,
+  listItemBackgroundSelected: HighContrastDarkSemanticColors.item.select,
   listItemBackgroundSelectedHovered: HighContrastDarkSemanticColors.item.selectHovered,
+  listLinkHovered: HighContrastDarkSemanticColors.detailsRow.hoveredLink,
+  listLinkRowHovered: HighContrastDarkSemanticColors.detailsRow.hoveredRowLink,
+  listLinkRowSelected: HighContrastDarkSemanticColors.detailsRow.selectedLink,
+  listLinkRowSelectedHovered: HighContrastDarkSemanticColors.detailsRow.selectedHoveredLink,
   listText: HighContrastDarkSemanticColors.text.list,
   menuItemBackgroundHovered: HighContrastDarkSemanticColors.primaryButton.hover.background,
   menuItemBackgroundPressed: HighContrastDarkSemanticColors.primaryButton.hover.background,

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

@@ -55,15 +55,18 @@ const highContrastLightExtendedSemanticColors: Partial<IExtendedSemanticColors>
   inputPlaceholderText: HighContrastLightSemanticColors.text.placeholder,
   inputText: HighContrastLightSemanticColors.text.value,
   link: HighContrastLightSemanticColors.text.hyperlink,
-  linkBackgroundHovered: HighContrastLightSemanticColors.text.hyperlinkBackgroundHovered,
   linkHovered: HighContrastLightSemanticColors.text.hyperlinkHovered,
   listBackground: HighContrastLightSemanticColors.background,
   listHeaderBackgroundPressed: HighContrastLightSemanticColors.item.hover,
   listItemBackgroundChecked: HighContrastLightSemanticColors.item.select,
   listItemBackgroundCheckedHovered: HighContrastLightSemanticColors.item.select,
-  listItemBackgroundHovered: HighContrastLightSemanticColors.item.hover,
-  listItemBackgroundSelected: StyleConstants.transparent,
+  listItemBackgroundHovered: HighContrastLightSemanticColors.detailsRow.hoveredBackground,
+  listItemBackgroundSelected: HighContrastLightSemanticColors.item.select,
   listItemBackgroundSelectedHovered: HighContrastLightSemanticColors.item.selectHovered,
+  listLinkHovered: HighContrastLightSemanticColors.detailsRow.hoveredLink,
+  listLinkRowHovered: HighContrastLightSemanticColors.detailsRow.hoveredRowLink,
+  listLinkRowSelected: HighContrastLightSemanticColors.detailsRow.selectedLink,
+  listLinkRowSelectedHovered: HighContrastLightSemanticColors.detailsRow.selectedHoveredLink,
   listText: HighContrastLightSemanticColors.text.list,
   menuItemBackgroundHovered: HighContrastLightSemanticColors.primaryButton.hover.background,
   menuItemBackgroundPressed: HighContrastLightSemanticColors.primaryButton.hover.background,

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

@@ -55,15 +55,18 @@ const lightExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
   inputPlaceholderText: LightSemanticColors.text.placeholder,
   inputText: LightSemanticColors.text.value,
   link: LightSemanticColors.text.hyperlink,
-  linkBackgroundHovered: LightSemanticColors.text.hyperlinkBackgroundHovered,
   linkHovered: LightSemanticColors.text.hyperlinkHovered,
   listBackground: LightSemanticColors.background,
   listHeaderBackgroundPressed: LightSemanticColors.item.hover,
   listItemBackgroundChecked: LightSemanticColors.item.select,
   listItemBackgroundCheckedHovered: LightSemanticColors.item.select,
-  listItemBackgroundHovered: LightSemanticColors.item.hover,
-  listItemBackgroundSelected: LightSemanticColors.item.hover,
+  listItemBackgroundHovered: LightSemanticColors.detailsRow.hoveredBackground,
+  listItemBackgroundSelected: LightSemanticColors.item.select,
   listItemBackgroundSelectedHovered: LightSemanticColors.item.selectHovered,
+  listLinkHovered: LightSemanticColors.detailsRow.hoveredLink,
+  listLinkRowHovered: LightSemanticColors.detailsRow.hoveredRowLink,
+  listLinkRowSelected: LightSemanticColors.detailsRow.selectedLink,
+  listLinkRowSelectedHovered: LightSemanticColors.detailsRow.selectedHoveredLink,
   listText: LightSemanticColors.text.body,
   menuItemBackgroundHovered: LightSemanticColors.item.hover,
   menuItemBackgroundPressed: LightSemanticColors.item.select,

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

@@ -14,6 +14,7 @@ export const dropDownItemHeight = '32px';
 export const fontFamily =
   // eslint-disable-next-line @fluentui/max-len
   'Segoe UI, "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue",sans-serif';
+export const fontWeightRegular = '400';
 export const fontWeightBold = '700';
 export const inputControlHeight = '24px';
 export const inputControlHeightInner = '20px';

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

@@ -38,7 +38,6 @@ export interface IAzureSemanticColors {
     disabled: string;
     hyperlink: string;
     hyperlinkHovered: string;
-    hyperlinkBackgroundHovered: string;
     success: string;
     error: string;
     placeholder: string;
@@ -179,6 +178,11 @@ export interface IAzureSemanticColors {
   detailsRow: {
     border: string;
     focus: string;
+    hoveredLink: string;
+    hoveredRowLink: string;
+    hoveredBackground: string;
+    selectedLink: string;
+    selectedHoveredLink: string;
   };
   radioButton: {
     circle: {

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

@@ -80,6 +80,10 @@ export interface IExtendedSemanticColors extends ISemanticColors {
   listItemBackgroundHovered: string;
   listItemBackgroundSelected: string;
   listItemBackgroundSelectedHovered: string;
+  listLinkHovered: string;
+  listLinkRowHovered: string;
+  listLinkRowSelected: string;
+  listLinkRowSelectedHovered: string;
   linkBorderStyle: string;
   listText: string;
   listUnderline: string;