From ea633263413758c3d5f95201d151bfd9c1793e00 Mon Sep 17 00:00:00 2001 From: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com> Date: Mon, 13 Mar 2023 13:26:53 -0700 Subject: [PATCH 1/3] tag button for default and primary button --- .../azure-themes/src/azure/AzureColors.ts | 72 +++++++++++++++++++ .../azure-themes/src/azure/AzureThemeDark.ts | 8 +++ .../src/azure/AzureThemeHighContrastDark.ts | 8 +++ .../src/azure/AzureThemeHighContrastLight.ts | 8 +++ .../azure-themes/src/azure/AzureThemeLight.ts | 8 +++ .../src/azure/IAzureSemanticColors.ts | 17 +++++ .../src/azure/IExtendedSemanticColors.ts | 8 +++ .../src/azure/styles/DefaultButton.styles.ts | 29 +++++++- .../src/azure/styles/PrimaryButton.styles.ts | 28 ++++++++ .../stories/Themes/Themes.stories.tsx | 4 ++ 10 files changed, 189 insertions(+), 1 deletion(-) diff --git a/packages/azure-themes/src/azure/AzureColors.ts b/packages/azure-themes/src/azure/AzureColors.ts index 9dc26a97aeb7f1..a0f38a3614e88c 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 @@ -309,6 +313,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, @@ -563,6 +584,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, @@ -817,6 +855,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, @@ -1071,6 +1126,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 825af8db2be660..7f210b7305a90c 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 3c89908c1a79b4..e30697d7f55e1c 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 00a4fe76cc23be..18829f9d351f93 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 66e742b3501668..32d73bf1672b1d 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 7de8c77bd19d7c..ae57c2c4c3ee3b 100644 --- a/packages/azure-themes/src/azure/IAzureSemanticColors.ts +++ b/packages/azure-themes/src/azure/IAzureSemanticColors.ts @@ -152,6 +152,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 597272b5aa2b22..d94c38c161f909 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; @@ -106,6 +109,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 7ab43979640d6a..2a265c6915ea91 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 833ae52469a0e7..b74fae905c1c85 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 9cdd3f6940f317..63d1555da151b7 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 = () => ( + + + + From e273f4e66dc27892758ce47c63f87297663ca255 Mon Sep 17 00:00:00 2001 From: Jacqueline Gaherity <30805892+Jacqueline-ms@users.noreply.github.com> Date: Mon, 27 Mar 2023 13:57:11 -0700 Subject: [PATCH 2/3] Create @fluentui-azure-themes-d76d2c27-2e5d-4c90-bb94-2d9e9ebb0ede.json --- ...-azure-themes-d76d2c27-2e5d-4c90-bb94-2d9e9ebb0ede.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-azure-themes-d76d2c27-2e5d-4c90-bb94-2d9e9ebb0ede.json 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 00000000000000..d474988ef08465 --- /dev/null +++ b/change/@fluentui-azure-themes-d76d2c27-2e5d-4c90-bb94-2d9e9ebb0ede.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Azure Theme Tag Button variant for primary and default buttons", + "packageName": "@fluentui/azure-themes", + "email": "30805892+Jacqueline-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} From f42a3dd15d25f5f49180de939a35116c8d5ed779 Mon Sep 17 00:00:00 2001 From: KHMakoto Date: Thu, 27 Apr 2023 13:50:52 -0700 Subject: [PATCH 3/3] Updating change files. --- ...entui-azure-themes-d76d2c27-2e5d-4c90-bb94-2d9e9ebb0ede.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/change/@fluentui-azure-themes-d76d2c27-2e5d-4c90-bb94-2d9e9ebb0ede.json b/change/@fluentui-azure-themes-d76d2c27-2e5d-4c90-bb94-2d9e9ebb0ede.json index d474988ef08465..f25b33359ab192 100644 --- a/change/@fluentui-azure-themes-d76d2c27-2e5d-4c90-bb94-2d9e9ebb0ede.json +++ b/change/@fluentui-azure-themes-d76d2c27-2e5d-4c90-bb94-2d9e9ebb0ede.json @@ -1,6 +1,6 @@ { "type": "minor", - "comment": "Azure Theme Tag Button variant for primary and default buttons", + "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"