Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updating status bar values #28440

Merged
merged 8 commits into from
Jul 18, 2023
Merged

Updating status bar values #28440

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
4013601
Updating status bar values
Jacqueline-ms Jul 5, 2023
a8d5e00
Create @fluentui-azure-themes-ebf457c8-3a67-4f54-8eb2-86c27a79810f.json
Jacqueline-ms Jul 6, 2023
b8ad42c
Renaming okay to success for green icon
Jacqueline-ms Jul 6, 2023
ec3dd48
background values for default vs information clean up
Jacqueline-ms Jul 6, 2023
bb433f8
Merge branch 'master' into jackieg/azuretheme-messagebarstatus
Jacqueline-ms Jul 10, 2023
f259de6
Added dataColors
Jacqueline-ms Jul 18, 2023
4330159
Merge branch 'jackieg/azuretheme-messagebarstatus' of https://github.…
Jacqueline-ms Jul 18, 2023
c6d66a9
Merge branch 'master' into jackieg/azuretheme-messagebarstatus
Jacqueline-ms Jul 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/@fluentui-azure-themes-ebf457c8-3a67-4f54-8eb2-86c27a79810f.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Cleaning up message bar semantic names for messagebar background and icon values per ICM team",
"packageName": "@fluentui/azure-themes",
"email": "30805892+Jacqueline-ms@users.noreply.github.com",
"dependentChangeType": "patch"
}
131 changes: 100 additions & 31 deletions packages/azure-themes/src/azure/AzureColors.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { IAzureSemanticColors } from './IAzureSemanticColors';
export namespace BaseColors {
export const BLUE_F0F6FF = '#F0F6FF';
export const BLUE_B3D7F2 = '#b3d7f2';
export const BLUE_BEDFFF = '#BEDFFF';
export const BLUE_CCE1FF = '#cce1ff';
export const BLUE_CCE4F6 = '#cce4f6';
export const BLUE_C7E0F4 = '#C7E0F4';
Expand All @@ -12,6 +13,8 @@ export namespace BaseColors {
export const BLUE_00245B = '#00245B';
export const BLUE_00E8E8 = '#00e8e8';
export const BLUE_00FFFF = '#00ffff';
export const BLUE_00188F = '#00188F';
export const BLUE_001D3F = '#001D3F';
export const BLUE_004578 = '#004578';
export const BLUE_004C87 = '#004C87';
export const BLUE_005A9E = '#005A9E';
Expand All @@ -33,16 +36,21 @@ export namespace BaseColors {
export const BLUE_3AA0F3 = '#3aa0f3';
export const BLUE_55B3FF = '#55b3ff';
export const BLUE_7BB2FE = '#7bb2fe';
export const GREEN_00FF00 = '#00FF00';
export const BROWN_502006 = '#502006';
export const GREEN_A4E1D2 = '#A4E1D2';
export const GREEN_E6FFCC = '#e6ffcc';
export const GREEN_F8FFF0 = '#F8FFF0';
export const GREEN_92C353 = '#92C353';
export const GREEN_00A2AD = '#00A2AD';
export const GREEN_00FF00 = '#00FF00';
export const GREEN_0AFF00 = '#0AFF00';
export const GREEN_038387 = '#038387';
export const GREEN_022F22 = '#022F22';
export const GREEN_1A3300 = '#1a3300';
export const GREEN_393D1B = '#393D1B';
export const GREEN_428000 = '#428000';
export const GREEN_5DB300 = '#5db300';
export const GREEN_57A300 = '#57A300';
export const GREEN_428000 = '#428000';
export const GREEN_393D1B = '#393D1B';
export const GREEN_1A3300 = '#1a3300';
export const GREEN_0AFF00 = '#0AFF00';
export const GREEN_92C353 = '#92C353';
export const RED_A52121 = '#A52121';
export const RED_C32727 = '#C32727';
export const RED_FEF0F1 = '#FEF0F1';
Expand All @@ -55,7 +63,10 @@ export namespace BaseColors {
export const RED_61050C = '#61050c';
export const RED_791818 = '#791818';
export const RED_800000 = '#800002';
export const ORANGE_CB4936 = '#CB4936';
export const ORANGE_DB7500 = '#DB7500';
export const ORANGE_EF6950 = '#EF6950';
export const ORANGE_FFCA8A = '#FFCA8A';
export const ORANGE_FFDFB8 = '#ffdfb8';
export const ORANGE_FFF8F0 = '#FFF8F0';
export const ORANGE_FF8C00 = '#ff8c00';
Expand All @@ -65,11 +76,17 @@ export namespace BaseColors {
export const PURPLE_F9F3FC = '#F9F3FC';
export const PURPLE_EFDBF5 = '#efdbf5';
export const PURPLE_C87FDC = '#c87fdc';
export const PURPLE_C7D3FF = '#C7D3FF';
export const PURPLE_917EDB = '#917EDB';
export const PURPLE_8A2DA5 = '#8a2da5';
export const PURPLE_660166 = '#660166';
export const PURPLE_6E5DB7 = '#6E5DB7';
export const PURPLE_471754 = '#471754';
export const PURPLE_4B003F = '#4B003F';
export const PURPLE_38134A = '#38134A';
export const PINK_E3008C = '#E3008C';
export const PINK_D90086 = '#D90086';
export const PINK_F6C0FF = '#F6C0FF';
export const YELLOW_FEFF00 = '#FEFF00';
export const YELLOW_FCE100 = '#FCE100';
export const GRAY_CCCCCC = '#CCCCCC';
Expand Down Expand Up @@ -182,8 +199,7 @@ export const DarkSemanticColors: IAzureSemanticColors = {
hover: BaseColors.BLUE_82C7FF,
},
background: {
default: BaseColors.BLUE_00245B,
okay: BaseColors.GREEN_393D1B,
success: BaseColors.GREEN_393D1B,
error: BaseColors.RED_442726,
warning: BaseColors.ORANGE_4F2A0F,
information: BaseColors.BLUE_00245B,
Expand All @@ -198,12 +214,12 @@ export const DarkSemanticColors: IAzureSemanticColors = {
upsell: BaseColors.PURPLE_38134A,
},
icon: {
default: BaseColors.BLUE_2899F5,
okay: BaseColors.GREEN_92C353,
error: BaseColors.RED_F1707B,
warning: BaseColors.YELLOW_FCE100,
information: BaseColors.BLUE_2899F5,
upsell: BaseColors.PURPLE_917EDB,
success: BaseColors.GREEN_57A300,
error: BaseColors.RED_E00B1C,
warning: BaseColors.ORANGE_DB7500,
information: BaseColors.BLUE_015CDA,
upsell: BaseColors.PURPLE_8A2DA5,
disabled: BaseColors.GRAY_8A8886,
},
},
primaryButton: {
Expand Down Expand Up @@ -373,6 +389,20 @@ export const DarkSemanticColors: IAzureSemanticColors = {
},
},
},
dataColor: {
dataColor1: BaseColors.BLUE_0078D4,
dataColor2: BaseColors.ORANGE_CB4936,
dataColor3: BaseColors.BLUE_BEDFFF,
dataColor4: BaseColors.GREEN_038387,
dataColor5: BaseColors.PINK_F6C0FF,
dataColor6: BaseColors.PINK_D90086,
dataColor7: BaseColors.GREEN_A4E1D2,
dataColor8: BaseColors.PURPLE_6E5DB7,
dataColor9: BaseColors.PURPLE_C7D3FF,
dataColor10: BaseColors.ORANGE_FFCA8A,
noData1: BaseColors.GRAY_808080_070,
noData2: BaseColors.GRAY_747474,
},
datePicker: {
rest: {
selected: BaseColors.BLUE_0078D4,
Expand Down Expand Up @@ -465,8 +495,7 @@ export const HighContrastDarkSemanticColors: IAzureSemanticColors = {
hover: BaseColors.YELLOW_FEFF00,
},
background: {
default: BaseColors.TRANSPARENT,
okay: BaseColors.TRANSPARENT,
success: BaseColors.TRANSPARENT,
error: BaseColors.TRANSPARENT,
warning: BaseColors.TRANSPARENT,
information: BaseColors.TRANSPARENT,
Expand All @@ -481,12 +510,12 @@ export const HighContrastDarkSemanticColors: IAzureSemanticColors = {
upsell: BaseColors.PURPLE_38134A,
},
icon: {
default: BaseColors.BLUE_2899F5,
okay: BaseColors.GREEN_92C353,
error: BaseColors.RED_F1707B,
warning: BaseColors.YELLOW_FCE100,
information: BaseColors.BLUE_2899F5,
upsell: BaseColors.PURPLE_917EDB,
success: BaseColors.GREEN_57A300,
error: BaseColors.RED_E00B1C,
warning: BaseColors.ORANGE_DB7500,
information: BaseColors.BLUE_015CDA,
upsell: BaseColors.PURPLE_8A2DA5,
disabled: BaseColors.GRAY_8A8886,
},
},
primaryButton: {
Expand Down Expand Up @@ -656,6 +685,20 @@ export const HighContrastDarkSemanticColors: IAzureSemanticColors = {
},
},
},
dataColor: {
dataColor1: BaseColors.BLUE_0078D4,
dataColor2: BaseColors.ORANGE_CB4936,
dataColor3: BaseColors.BLUE_BEDFFF,
dataColor4: BaseColors.GREEN_038387,
dataColor5: BaseColors.PINK_F6C0FF,
dataColor6: BaseColors.PINK_D90086,
dataColor7: BaseColors.GREEN_A4E1D2,
dataColor8: BaseColors.PURPLE_6E5DB7,
dataColor9: BaseColors.PURPLE_C7D3FF,
dataColor10: BaseColors.ORANGE_FFCA8A,
noData1: BaseColors.GRAY_808080_070,
noData2: BaseColors.GRAY_747474,
},
datePicker: {
rest: {
selected: BaseColors.BLUE_02FEFF,
Expand Down Expand Up @@ -748,8 +791,7 @@ export const LightSemanticColors: IAzureSemanticColors = {
hover: BaseColors.BLUE_004578,
},
background: {
default: BaseColors.BLUE_F0F6FF,
okay: BaseColors.GREEN_F8FFF0,
success: BaseColors.GREEN_F8FFF0,
error: BaseColors.RED_FEF0F1,
warning: BaseColors.ORANGE_FFF8F0,
information: BaseColors.BLUE_F0F6FF,
Expand All @@ -764,12 +806,12 @@ export const LightSemanticColors: IAzureSemanticColors = {
upsell: BaseColors.PURPLE_F9F3FC,
},
icon: {
default: BaseColors.BLUE_015CDA,
okay: BaseColors.GREEN_57A300,
error: BaseColors.RED_E00B1C,
success: BaseColors.GREEN_57A300,
error: BaseColors.RED_A4262C,
warning: BaseColors.ORANGE_DB7500,
information: BaseColors.BLUE_015CDA,
upsell: BaseColors.PURPLE_8A2DA5,
disabled: BaseColors.GRAY_8A8886,
},
},
primaryButton: {
Expand Down Expand Up @@ -939,6 +981,20 @@ export const LightSemanticColors: IAzureSemanticColors = {
},
},
},
dataColor: {
dataColor1: BaseColors.BLUE_0078D4,
dataColor2: BaseColors.ORANGE_EF6950,
dataColor3: BaseColors.BLUE_00188F,
dataColor4: BaseColors.GREEN_00A2AD,
dataColor5: BaseColors.PURPLE_4B003F,
dataColor6: BaseColors.PINK_E3008C,
dataColor7: BaseColors.GREEN_022F22,
dataColor8: BaseColors.PURPLE_917EDB,
dataColor9: BaseColors.BLUE_001D3F,
dataColor10: BaseColors.BROWN_502006,
noData1: BaseColors.GRAY_808080_070,
noData2: BaseColors.GRAY_747474,
},
datePicker: {
rest: {
selected: BaseColors.BLUE_0078D4,
Expand Down Expand Up @@ -1031,8 +1087,7 @@ export const HighContrastLightSemanticColors: IAzureSemanticColors = {
hover: BaseColors.BLUE_0000CD,
},
background: {
default: BaseColors.TRANSPARENT,
okay: BaseColors.TRANSPARENT,
success: BaseColors.TRANSPARENT,
error: BaseColors.TRANSPARENT,
warning: BaseColors.TRANSPARENT,
information: BaseColors.TRANSPARENT,
Expand All @@ -1047,12 +1102,12 @@ export const HighContrastLightSemanticColors: IAzureSemanticColors = {
upsell: BaseColors.PURPLE_F9F3FC,
},
icon: {
default: BaseColors.BLUE_015CDA,
okay: BaseColors.GREEN_57A300,
success: BaseColors.GREEN_57A300,
error: BaseColors.RED_E00B1C,
warning: BaseColors.ORANGE_DB7500,
information: BaseColors.BLUE_015CDA,
upsell: BaseColors.PURPLE_8A2DA5,
disabled: BaseColors.GRAY_8A8886,
},
},
primaryButton: {
Expand Down Expand Up @@ -1222,6 +1277,20 @@ export const HighContrastLightSemanticColors: IAzureSemanticColors = {
},
},
},
dataColor: {
dataColor1: BaseColors.BLUE_0078D4,
dataColor2: BaseColors.ORANGE_EF6950,
dataColor3: BaseColors.BLUE_00188F,
dataColor4: BaseColors.GREEN_00A2AD,
dataColor5: BaseColors.PURPLE_4B003F,
dataColor6: BaseColors.PINK_E3008C,
dataColor7: BaseColors.GREEN_022F22,
dataColor8: BaseColors.PURPLE_917EDB,
dataColor9: BaseColors.BLUE_001D3F,
dataColor10: BaseColors.BROWN_502006,
noData1: BaseColors.GRAY_808080_070,
noData2: BaseColors.GRAY_747474,
},
datePicker: {
rest: {
selected: BaseColors.BLUE_0078D4,
Expand Down
23 changes: 19 additions & 4 deletions packages/azure-themes/src/azure/AzureThemeDark.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,16 @@ const darkExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
choiceGroupUncheckedDotHover: DarkSemanticColors.choiceGroup.circle.hover,
choiceGroupFocusBorder: DarkSemanticColors.choiceGroup.focus,
commandBarBorder: DarkSemanticColors.commandBar.border,
dataColor1: DarkSemanticColors.dataColor.dataColor1,
dataColor2: DarkSemanticColors.dataColor.dataColor2,
dataColor3: DarkSemanticColors.dataColor.dataColor3,
dataColor4: DarkSemanticColors.dataColor.dataColor4,
dataColor5: DarkSemanticColors.dataColor.dataColor5,
dataColor6: DarkSemanticColors.dataColor.dataColor6,
dataColor7: DarkSemanticColors.dataColor.dataColor7,
dataColor8: DarkSemanticColors.dataColor.dataColor8,
dataColor9: DarkSemanticColors.dataColor.dataColor9,
dataColor10: DarkSemanticColors.dataColor.dataColor10,
datePickerDisabledBorder: DarkSemanticColors.datePicker.disabled.border,
datePickerSelectionBackground: DarkSemanticColors.datePicker.rest.selected,
datePickerSelectionText: DarkSemanticColors.datePicker.rest.text,
Expand Down Expand Up @@ -88,6 +98,8 @@ const darkExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
listText: DarkSemanticColors.text.body,
menuItemBackgroundHovered: DarkSemanticColors.item.hover,
menuItemBackgroundPressed: DarkSemanticColors.item.select,
noDataColor1: DarkSemanticColors.dataColor.noData1,
noData2Color: DarkSemanticColors.dataColor.noData2,
primaryButtonBackground: DarkSemanticColors.primaryButton.rest.background,
primaryButtonBackgroundDisabled: DarkSemanticColors.disabledButton.background,
primaryButtonBackgroundHovered: DarkSemanticColors.primaryButton.hover.background,
Expand Down Expand Up @@ -138,20 +150,23 @@ const darkExtendedSemanticColors: Partial<IExtendedSemanticColors> = {
sliderActivePressed: DarkSemanticColors.slider.activeBackgroundPressed,
sliderDisabledActiveBackground: DarkSemanticColors.slider.activeDisabledBackground,
sliderDisabledInActiveBackground: DarkSemanticColors.slider.inactiveDisabledBackground,
statusDefaultBackground: DarkSemanticColors.statusBar.background.default,
statusDefaultBackground: DarkSemanticColors.statusBar.background.information,
statusDefaultBorder: DarkSemanticColors.statusBar.border.default,
statusDisabledIcon: DarkSemanticColors.statusBar.icon.disabled,
statusErrorBackground: DarkSemanticColors.statusBar.background.error,
statusErrorBorder: DarkSemanticColors.statusBar.border.error,
statusErrorIcon: DarkSemanticColors.statusBar.icon.error,
statusInformationBackground: DarkSemanticColors.statusBar.background.information,
statusInformationText: DarkSemanticColors.text.body,
statusInformationIcon: DarkSemanticColors.statusBar.icon.default,
statusSuccessBackground: DarkSemanticColors.statusBar.background.okay,
statusInformationIcon: DarkSemanticColors.statusBar.icon.information,
statusSuccessBackground: DarkSemanticColors.statusBar.background.success,
statusSuccessBorder: DarkSemanticColors.statusBar.border.okay,
statusLink: DarkSemanticColors.statusBar.link.rest,
statusLinkHover: DarkSemanticColors.statusBar.link.hover,
statusUpsellBackground: DarkSemanticColors.statusBar.background.upsell,
statusUpsellIcon: DarkSemanticColors.statusBar.icon.upsell,
statusSuccessText: DarkSemanticColors.text.body,
statusSuccessIcon: DarkSemanticColors.statusBar.icon.okay,
statusSuccessIcon: DarkSemanticColors.statusBar.icon.success,
statusWarningBackground: DarkSemanticColors.statusBar.background.warning,
statusWarningBorder: DarkSemanticColors.statusBar.border.warning,
statusWarningText: DarkSemanticColors.text.body,
Expand Down
23 changes: 19 additions & 4 deletions packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,16 @@ const highContrastDarkExtendedSemanticColors: Partial<IExtendedSemanticColors> =
choiceGroupUncheckedDotHover: HighContrastDarkSemanticColors.choiceGroup.circle.hover,
choiceGroupFocusBorder: HighContrastDarkSemanticColors.choiceGroup.focus,
commandBarBorder: HighContrastDarkSemanticColors.commandBar.border,
dataColor1: HighContrastDarkSemanticColors.dataColor.dataColor1,
dataColor2: HighContrastDarkSemanticColors.dataColor.dataColor2,
dataColor3: HighContrastDarkSemanticColors.dataColor.dataColor3,
dataColor4: HighContrastDarkSemanticColors.dataColor.dataColor4,
dataColor5: HighContrastDarkSemanticColors.dataColor.dataColor5,
dataColor6: HighContrastDarkSemanticColors.dataColor.dataColor6,
dataColor7: HighContrastDarkSemanticColors.dataColor.dataColor7,
dataColor8: HighContrastDarkSemanticColors.dataColor.dataColor8,
dataColor9: HighContrastDarkSemanticColors.dataColor.dataColor9,
dataColor10: HighContrastDarkSemanticColors.dataColor.dataColor10,
datePickerDisabledBorder: HighContrastDarkSemanticColors.datePicker.disabled.border,
datePickerSelectionBackground: HighContrastDarkSemanticColors.datePicker.rest.selected,
datePickerSelectionText: HighContrastDarkSemanticColors.datePicker.rest.text,
Expand Down Expand Up @@ -89,6 +99,8 @@ const highContrastDarkExtendedSemanticColors: Partial<IExtendedSemanticColors> =
listText: HighContrastDarkSemanticColors.text.list,
menuItemBackgroundHovered: HighContrastDarkSemanticColors.primaryButton.hover.background,
menuItemBackgroundPressed: HighContrastDarkSemanticColors.primaryButton.hover.background,
noDataColor1: HighContrastDarkSemanticColors.dataColor.noData1,
noData2Color: HighContrastDarkSemanticColors.dataColor.noData2,
primaryButtonBackground: HighContrastDarkSemanticColors.primaryButton.rest.background,
primaryButtonBackgroundDisabled: HighContrastDarkSemanticColors.primaryButton.disabled.background,
primaryButtonBackgroundHovered: HighContrastDarkSemanticColors.primaryButton.hover.background,
Expand Down Expand Up @@ -137,21 +149,24 @@ const highContrastDarkExtendedSemanticColors: Partial<IExtendedSemanticColors> =
sliderActivePressed: HighContrastDarkSemanticColors.slider.activeBackgroundPressed,
sliderDisabledActiveBackground: HighContrastDarkSemanticColors.slider.activeDisabledBackground,
sliderDisabledInActiveBackground: HighContrastDarkSemanticColors.slider.inactiveDisabledBackground,
statusDefaultBackground: HighContrastDarkSemanticColors.statusBar.background.default,
statusDefaultBackground: HighContrastDarkSemanticColors.statusBar.background.information,
statusDefaultBorder: HighContrastDarkSemanticColors.statusBar.border.default,
statusDisabledIcon: HighContrastDarkSemanticColors.statusBar.icon.disabled,
statusErrorBackground: HighContrastDarkSemanticColors.statusBar.background.error,
statusErrorBorder: HighContrastDarkSemanticColors.statusBar.border.error,
statusErrorText: HighContrastDarkSemanticColors.text.body,
statusErrorIcon: HighContrastDarkSemanticColors.statusBar.icon.error,
statusInformationBackground: HighContrastDarkSemanticColors.statusBar.background.information,
statusInformationText: HighContrastDarkSemanticColors.text.body,
statusInformationIcon: HighContrastDarkSemanticColors.statusBar.icon.default,
statusInformationIcon: HighContrastDarkSemanticColors.statusBar.icon.information,
statusLink: HighContrastDarkSemanticColors.statusBar.link.rest,
statusLinkHover: HighContrastDarkSemanticColors.statusBar.link.hover,
statusSuccessBackground: HighContrastDarkSemanticColors.statusBar.background.okay,
statusUpsellBackground: HighContrastDarkSemanticColors.statusBar.background.upsell,
statusUpsellIcon: HighContrastDarkSemanticColors.statusBar.icon.upsell,
statusSuccessBackground: HighContrastDarkSemanticColors.statusBar.background.success,
statusSuccessBorder: HighContrastDarkSemanticColors.statusBar.border.okay,
statusSuccessText: HighContrastDarkSemanticColors.text.body,
statusSuccessIcon: HighContrastDarkSemanticColors.statusBar.icon.okay,
statusSuccessIcon: HighContrastDarkSemanticColors.statusBar.icon.success,
statusWarningBackground: HighContrastDarkSemanticColors.statusBar.background.warning,
statusWarningBorder: HighContrastDarkSemanticColors.statusBar.border.warning,
statusWarningText: HighContrastDarkSemanticColors.text.body,
Expand Down
Loading