diff --git a/change/@fluentui-azure-themes-d76d2c27-2e5d-4c90-bb94-2d9e9ebb0ede.json b/change/@fluentui-azure-themes-d76d2c27-2e5d-4c90-bb94-2d9e9ebb0ede.json new file mode 100644 index 0000000000000..f25b33359ab19 --- /dev/null +++ b/change/@fluentui-azure-themes-d76d2c27-2e5d-4c90-bb94-2d9e9ebb0ede.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: Adding Azure Theme Tag Button variant for primary and default buttons", + "packageName": "@fluentui/azure-themes", + "email": "30805892+Jacqueline-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/azure-themes/src/azure/AzureColors.ts b/packages/azure-themes/src/azure/AzureColors.ts index 367e93f08d858..0c9b4a99aa44c 100644 --- a/packages/azure-themes/src/azure/AzureColors.ts +++ b/packages/azure-themes/src/azure/AzureColors.ts @@ -2,9 +2,12 @@ import { IAzureSemanticColors } from './IAzureSemanticColors'; export namespace BaseColors { export const BLUE_F0F6FF = '#F0F6FF'; + export const BLUE_B3D7F2 = '#b3d7f2'; export const BLUE_CCE1FF = '#cce1ff'; + export const BLUE_CCE4F6 = '#cce4f6'; export const BLUE_C7E0F4 = '#C7E0F4'; export const BLUE_DEECF9 = '#deecf9'; + export const BLUE_E6F2FB = '#e6f2fb'; export const BLUE_0000CD = '#0000cd'; export const BLUE_00245B = '#00245B'; export const BLUE_00E8E8 = '#00e8e8'; @@ -115,6 +118,7 @@ export namespace BaseColors { 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)'; + export const BLUE_55B3FF_040 = 'rgba(85, 179, 255, .4)'; // Extended Palette Colors (not in Azure spec) export const GRAY_FFFFFF_050 = 'rgba(255,255,255,.5)'; // overlay light @@ -318,6 +322,23 @@ export const DarkSemanticColors: IAzureSemanticColors = { primary: BaseColors.GRAY_808080, secondary: BaseColors.GRAY_404040, }, + tagButton: { + rest: { + text: BaseColors.WHITE, + background: BaseColors.BLUE_55B3FF_040, + border: BaseColors.TRANSPARENT, + }, + hover: { + text: BaseColors.WHITE, + background: BaseColors.BLUE_55B3FF_040, + border: BaseColors.GRAY_808080_070, + }, + pressed: { + text: BaseColors.WHITE, + background: BaseColors.BLUE_55B3FF_040, + border: BaseColors.BLUE_4894FE, + }, + }, toggle: { disabled: { backrgound: BaseColors.GRAY_484644, @@ -581,6 +602,23 @@ export const HighContrastDarkSemanticColors: IAzureSemanticColors = { primary: BaseColors.GRAY_808080, secondary: BaseColors.GRAY_404040, }, + tagButton: { + rest: { + text: BaseColors.WHITE, + background: BaseColors.BLUE_55B3FF_040, + border: BaseColors.TRANSPARENT, + }, + hover: { + text: BaseColors.WHITE, + background: BaseColors.BLUE_55B3FF_040, + border: BaseColors.WHITE, + }, + pressed: { + text: BaseColors.WHITE, + background: BaseColors.BLUE_55B3FF_040, + border: BaseColors.BLUE_4894FE, + }, + }, toggle: { disabled: { backrgound: BaseColors.GRAY_484644, @@ -844,6 +882,23 @@ export const LightSemanticColors: IAzureSemanticColors = { primary: BaseColors.GRAY_F7F7F7, secondary: BaseColors.GRAY_DFDFDF, }, + tagButton: { + rest: { + text: BaseColors.BLACK, + background: BaseColors.BLUE_E6F2FB, + border: BaseColors.BLUE_E6F2FB, + }, + hover: { + text: BaseColors.BLACK, + background: BaseColors.BLUE_CCE4F6, + border: BaseColors.BLUE_CCE4F6, + }, + pressed: { + text: BaseColors.BLACK, + background: BaseColors.BLUE_B3D7F2, + border: BaseColors.BLUE_015CDA, + }, + }, toggle: { disabled: { backrgound: BaseColors.WHITE, @@ -1107,6 +1162,23 @@ export const HighContrastLightSemanticColors: IAzureSemanticColors = { primary: BaseColors.GRAY_F7F7F7, secondary: BaseColors.GRAY_DFDFDF, }, + tagButton: { + rest: { + text: BaseColors.BLACK, + background: BaseColors.BLUE_E6F2FB, + border: BaseColors.BLUE_E6F2FB, + }, + hover: { + text: BaseColors.BLACK, + background: BaseColors.BLUE_CCE4F6, + border: BaseColors.BLUE_CCE4F6, + }, + pressed: { + text: BaseColors.BLACK, + background: BaseColors.BLUE_B3D7F2, + border: BaseColors.BLUE_015CDA, + }, + }, toggle: { disabled: { backrgound: BaseColors.WHITE, diff --git a/packages/azure-themes/src/azure/AzureThemeDark.ts b/packages/azure-themes/src/azure/AzureThemeDark.ts index f484a0dab27a5..77fc6c33d099d 100644 --- a/packages/azure-themes/src/azure/AzureThemeDark.ts +++ b/packages/azure-themes/src/azure/AzureThemeDark.ts @@ -21,11 +21,19 @@ const darkExtendedSemanticColors: Partial = { buttonBackgroundDisabled: DarkSemanticColors.disabledButton.background, buttonBackgroundHovered: DarkSemanticColors.secondaryButton.hover.background, buttonBackgroundPressed: DarkSemanticColors.secondaryButton.pressed.background, + ButtonBackgroundTag: DarkSemanticColors.tagButton.rest.background, + ButtonBackgroundTagHovered: DarkSemanticColors.tagButton.hover.background, + ButtonBackgroundTagPressed: DarkSemanticColors.tagButton.pressed.background, + ButtonBackgroundTagText: DarkSemanticColors.tagButton.rest.text, + ButtonBackgroundTagTextHovered: DarkSemanticColors.tagButton.hover.text, ButtonBorderDanger: DarkSemanticColors.dangerButton.rest.border, ButtonBorderDangerHovered: DarkSemanticColors.dangerButton.hover.border, ButtonBorderDangerPressed: DarkSemanticColors.dangerButton.pressed.border, ButtonBorderDisabled: DarkSemanticColors.disabledButton.background, ButtonBorderFocus: DarkSemanticColors.secondaryButton.focus.border, + ButtonBorderTag: DarkSemanticColors.tagButton.rest.border, + ButtonBorderTagHovered: DarkSemanticColors.tagButton.hover.border, + ButtonBorderTagPressed: DarkSemanticColors.tagButton.pressed.border, buttonText: DarkSemanticColors.secondaryButton.rest.text, buttonTextChecked: DarkSemanticColors.secondaryButton.pressed.text, buttonTextCheckedHovered: DarkSemanticColors.secondaryButton.hover.border, diff --git a/packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts b/packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts index 62e300da9ddfc..41e04fdddeadd 100644 --- a/packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts +++ b/packages/azure-themes/src/azure/AzureThemeHighContrastDark.ts @@ -21,11 +21,19 @@ const highContrastDarkExtendedSemanticColors: Partial = buttonBackgroundDisabled: HighContrastDarkSemanticColors.primaryButton.disabled.background, buttonBackgroundHovered: HighContrastDarkSemanticColors.secondaryButton.hover.background, buttonBackgroundPressed: HighContrastDarkSemanticColors.secondaryButton.pressed.background, + ButtonBackgroundTag: HighContrastDarkSemanticColors.tagButton.rest.background, + ButtonBackgroundTagHovered: HighContrastDarkSemanticColors.tagButton.hover.background, + ButtonBackgroundTagPressed: HighContrastDarkSemanticColors.tagButton.pressed.background, + ButtonBackgroundTagText: HighContrastDarkSemanticColors.tagButton.rest.text, + ButtonBackgroundTagTextHovered: HighContrastDarkSemanticColors.tagButton.hover.text, ButtonBorderDanger: HighContrastDarkSemanticColors.dangerButton.rest.border, ButtonBorderDangerHovered: HighContrastDarkSemanticColors.dangerButton.hover.border, ButtonBorderDangerPressed: HighContrastDarkSemanticColors.dangerButton.pressed.border, ButtonBorderDisabled: HighContrastDarkSemanticColors.disabledButton.background, ButtonBorderFocus: HighContrastDarkSemanticColors.secondaryButton.focus.border, + ButtonBorderTag: HighContrastDarkSemanticColors.tagButton.rest.border, + ButtonBorderTagHovered: HighContrastDarkSemanticColors.tagButton.hover.border, + ButtonBorderTagPressed: HighContrastDarkSemanticColors.tagButton.pressed.border, buttonText: HighContrastDarkSemanticColors.secondaryButton.rest.text, buttonTextChecked: HighContrastDarkSemanticColors.secondaryButton.pressed.text, buttonTextCheckedHovered: HighContrastDarkSemanticColors.secondaryButton.hover.border, diff --git a/packages/azure-themes/src/azure/AzureThemeHighContrastLight.ts b/packages/azure-themes/src/azure/AzureThemeHighContrastLight.ts index 6b66431c7fa37..d42fa5f029a13 100644 --- a/packages/azure-themes/src/azure/AzureThemeHighContrastLight.ts +++ b/packages/azure-themes/src/azure/AzureThemeHighContrastLight.ts @@ -21,11 +21,19 @@ const highContrastLightExtendedSemanticColors: Partial buttonBackgroundDisabled: HighContrastLightSemanticColors.disabledButton.background, buttonBackgroundHovered: HighContrastLightSemanticColors.secondaryButton.hover.background, buttonBackgroundPressed: HighContrastLightSemanticColors.secondaryButton.pressed.background, + ButtonBackgroundTag: HighContrastLightSemanticColors.tagButton.rest.background, + ButtonBackgroundTagHovered: HighContrastLightSemanticColors.tagButton.hover.background, + ButtonBackgroundTagPressed: HighContrastLightSemanticColors.tagButton.pressed.background, + ButtonBackgroundTagText: HighContrastLightSemanticColors.tagButton.rest.text, + ButtonBackgroundTagTextHovered: HighContrastLightSemanticColors.tagButton.hover.text, ButtonBorderDanger: HighContrastLightSemanticColors.dangerButton.rest.border, ButtonBorderDangerHovered: HighContrastLightSemanticColors.dangerButton.hover.border, ButtonBorderDangerPressed: HighContrastLightSemanticColors.dangerButton.pressed.border, ButtonBorderDisabled: HighContrastLightSemanticColors.disabledButton.text, ButtonBorderFocus: HighContrastLightSemanticColors.secondaryButton.focus.border, + ButtonBorderTag: HighContrastLightSemanticColors.tagButton.rest.border, + ButtonBorderTagHovered: HighContrastLightSemanticColors.tagButton.hover.border, + ButtonBorderTagPressed: HighContrastLightSemanticColors.tagButton.pressed.border, buttonText: HighContrastLightSemanticColors.secondaryButton.rest.text, buttonTextChecked: HighContrastLightSemanticColors.secondaryButton.pressed.text, buttonTextCheckedHovered: HighContrastLightSemanticColors.secondaryButton.hover.border, diff --git a/packages/azure-themes/src/azure/AzureThemeLight.ts b/packages/azure-themes/src/azure/AzureThemeLight.ts index 735ecdf2506cd..83cb672241e46 100644 --- a/packages/azure-themes/src/azure/AzureThemeLight.ts +++ b/packages/azure-themes/src/azure/AzureThemeLight.ts @@ -21,11 +21,19 @@ const lightExtendedSemanticColors: Partial = { buttonBackgroundDisabled: LightSemanticColors.disabledButton.background, buttonBackgroundHovered: LightSemanticColors.secondaryButton.hover.background, buttonBackgroundPressed: LightSemanticColors.secondaryButton.pressed.background, + ButtonBackgroundTag: LightSemanticColors.tagButton.rest.background, + ButtonBackgroundTagHovered: LightSemanticColors.tagButton.hover.background, + ButtonBackgroundTagPressed: LightSemanticColors.tagButton.pressed.background, + ButtonBackgroundTagText: LightSemanticColors.tagButton.rest.text, + ButtonBackgroundTagTextHovered: LightSemanticColors.tagButton.hover.text, ButtonBorderDanger: LightSemanticColors.dangerButton.rest.border, ButtonBorderDangerHovered: LightSemanticColors.dangerButton.hover.border, ButtonBorderDangerPressed: LightSemanticColors.dangerButton.pressed.border, ButtonBorderDisabled: LightSemanticColors.disabledButton.background, ButtonBorderFocus: LightSemanticColors.secondaryButton.focus.border, + ButtonBorderTag: LightSemanticColors.tagButton.rest.border, + ButtonBorderTagHovered: LightSemanticColors.tagButton.hover.border, + ButtonBorderTagPressed: LightSemanticColors.tagButton.pressed.border, buttonText: LightSemanticColors.secondaryButton.rest.text, buttonTextChecked: LightSemanticColors.secondaryButton.pressed.text, buttonTextCheckedHovered: LightSemanticColors.secondaryButton.hover.border, diff --git a/packages/azure-themes/src/azure/IAzureSemanticColors.ts b/packages/azure-themes/src/azure/IAzureSemanticColors.ts index 5ddf7b40d5e8f..f9ccaedf55681 100644 --- a/packages/azure-themes/src/azure/IAzureSemanticColors.ts +++ b/packages/azure-themes/src/azure/IAzureSemanticColors.ts @@ -161,6 +161,23 @@ export interface IAzureSemanticColors { primary: string; secondary: string; }; + tagButton: { + rest: { + text: string; + background: string; + border: string; + }; + hover: { + text: string; + background: string; + border: string; + }; + pressed: { + text: string; + background: string; + border: string; + }; + }; toggle: { disabled: { backrgound: string; diff --git a/packages/azure-themes/src/azure/IExtendedSemanticColors.ts b/packages/azure-themes/src/azure/IExtendedSemanticColors.ts index a781ef70ab6f5..75c15b3919119 100644 --- a/packages/azure-themes/src/azure/IExtendedSemanticColors.ts +++ b/packages/azure-themes/src/azure/IExtendedSemanticColors.ts @@ -19,6 +19,9 @@ export interface IExtendedSemanticColors extends ISemanticColors { buttonBackgroundPressed: string; ButtonBorderDisabled: string; ButtonBorderFocus: string; + ButtonBorderTag: string; + ButtonBorderTagHovered: string; + ButtonBorderTagPressed: string; buttonText: string; buttonTextChecked: string; buttonTextCheckedHovered: string; @@ -109,6 +112,11 @@ export interface IExtendedSemanticColors extends ISemanticColors { primaryButtonBackgroundDisabled: string; primaryButtonBackgroundHovered: string; primaryButtonBackgroundPressed: string; + ButtonBackgroundTag: string; + ButtonBackgroundTagHovered: string; + ButtonBackgroundTagPressed: string; + ButtonBackgroundTagText: string; + ButtonBackgroundTagTextHovered: string; ButtonBorderDanger: string; ButtonBorderDangerHovered: string; ButtonBorderDangerPressed: string; diff --git a/packages/azure-themes/src/azure/styles/DefaultButton.styles.ts b/packages/azure-themes/src/azure/styles/DefaultButton.styles.ts index 7ab43979640d6..2a265c6915ea9 100644 --- a/packages/azure-themes/src/azure/styles/DefaultButton.styles.ts +++ b/packages/azure-themes/src/azure/styles/DefaultButton.styles.ts @@ -13,8 +13,8 @@ export const DefaultButtonStyles = (theme: ITheme): Partial => { height: StyleConstants.inputControlHeight, padding: '0px 16px', border: `${StyleConstants.borderWidth} solid ${semanticColors.inputBorder}`, - // danger button selectors: { + // danger button '&.danger': { outlineColor: extendedSemanticColors.ButtonBackgroundDanger, borderColor: extendedSemanticColors.ButtonBorderDanger, @@ -41,6 +41,33 @@ export const DefaultButtonStyles = (theme: ITheme): Partial => { }, }, }, + // tag button + '&.tag': { + outlineColor: extendedSemanticColors.ButtonBackgroundTag, + borderColor: `${extendedSemanticColors.ButtonBorderTag} !important`, + backgroundColor: extendedSemanticColors.ButtonBackgroundTag, + color: extendedSemanticColors.ButtonBackgroundTagText, + selectors: { + ':hover': { + outlineColor: extendedSemanticColors.ButtonBackgroundTagHovered, + borderColor: `${extendedSemanticColors.ButtonBorderTagHovered} !important`, + backgroundColor: extendedSemanticColors.ButtonBackgroundTagHovered, + color: extendedSemanticColors.ButtonBackgroundTagTextHovered, + }, + ':active': { + outlineColor: extendedSemanticColors.ButtonBackgroundTagPressed, + borderColor: extendedSemanticColors.ButtonBorderTagPressed, + backgroundColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`, + color: extendedSemanticColors.ButtonBackgroundTagTextHovered, + }, + ':focus': { + outlineColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`, + borderColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`, + backgroundColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`, + color: `${extendedSemanticColors.ButtonBackgroundTagTextHovered} !important`, + }, + }, + }, // standard button '&.is-expanded': { color: semanticColors.buttonTextHovered, diff --git a/packages/azure-themes/src/azure/styles/PrimaryButton.styles.ts b/packages/azure-themes/src/azure/styles/PrimaryButton.styles.ts index 833ae52469a0e..b74fae905c1c8 100644 --- a/packages/azure-themes/src/azure/styles/PrimaryButton.styles.ts +++ b/packages/azure-themes/src/azure/styles/PrimaryButton.styles.ts @@ -13,6 +13,7 @@ export const PrimaryButtonStyles = (theme: ITheme): Partial => { padding: StyleConstants.buttonPadding, border: `${StyleConstants.borderWidth} solid ${semanticColors.primaryButtonBorder}`, selectors: { + // danger button '&.danger': { outlineColor: extendedSemanticColors.ButtonBackgroundDanger, borderColor: `${extendedSemanticColors.ButtonBorderDanger} !important`, @@ -39,6 +40,33 @@ export const PrimaryButtonStyles = (theme: ITheme): Partial => { }, }, }, + // tag button + '&.tag': { + outlineColor: extendedSemanticColors.ButtonBackgroundTag, + borderColor: `${extendedSemanticColors.ButtonBorderTag} !important`, + backgroundColor: extendedSemanticColors.ButtonBackgroundTag, + color: extendedSemanticColors.ButtonBackgroundTagText, + selectors: { + ':hover': { + outlineColor: extendedSemanticColors.ButtonBackgroundTagHovered, + borderColor: `${extendedSemanticColors.ButtonBorderTagHovered} !important`, + backgroundColor: extendedSemanticColors.ButtonBackgroundTagHovered, + color: extendedSemanticColors.ButtonBackgroundTagTextHovered, + }, + ':active': { + outlineColor: extendedSemanticColors.ButtonBackgroundTagPressed, + borderColor: extendedSemanticColors.ButtonBorderTagPressed, + backgroundColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`, + color: extendedSemanticColors.ButtonBackgroundTagTextHovered, + }, + ':focus': { + outlineColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`, + borderColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`, + backgroundColor: `${extendedSemanticColors.ButtonBackgroundTagPressed} !important`, + color: `${extendedSemanticColors.ButtonBackgroundTagTextHovered} !important`, + }, + }, + }, }, }, rootFocused: { diff --git a/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx b/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx index 9cdd3f6940f31..63d1555da151b 100644 --- a/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx +++ b/packages/react-examples/src/azure-themes/stories/Themes/Themes.stories.tsx @@ -56,6 +56,10 @@ const Example = () => ( + + + +