diff --git a/change/@fluentui-web-components-c5450e83-2cfb-4d5f-ada1-28d5a0fd584e.json b/change/@fluentui-web-components-c5450e83-2cfb-4d5f-ada1-28d5a0fd584e.json new file mode 100644 index 0000000000000..0718456abd24b --- /dev/null +++ b/change/@fluentui-web-components-c5450e83-2cfb-4d5f-ada1-28d5a0fd584e.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "add appearance style sheet behavior", + "packageName": "@fluentui/web-components", + "email": "jes@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/src/anchor/anchor.styles.ts b/packages/web-components/src/anchor/anchor.styles.ts index 24e119a64c2f4..691aec61182d7 100644 --- a/packages/web-components/src/anchor/anchor.styles.ts +++ b/packages/web-components/src/anchor/anchor.styles.ts @@ -1,59 +1,20 @@ import { css } from '@microsoft/fast-element'; import { AccentButtonStyles, - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillRestBehavior, - accentForegroundActiveBehavior, - accentForegroundCutRestBehavior, - accentForegroundHoverBehavior, - accentForegroundRestBehavior, BaseButtonStyles, HypertextStyles, LightweightButtonStyles, - neutralFillActiveBehavior, - neutralFillFocusBehavior, - neutralFillHoverBehavior, - neutralFillRestBehavior, - neutralFillStealthActiveBehavior, - neutralFillStealthHoverBehavior, - neutralFillStealthRestBehavior, - neutralFocusBehavior, - neutralFocusInnerAccentBehavior, - neutralForegroundRestBehavior, - neutralOutlineActiveBehavior, - neutralOutlineHoverBehavior, - neutralOutlineRestBehavior, OutlineButtonStyles, StealthButtonStyles, } from '../styles/'; +import { appearanceBehavior } from '../utilities/behaviors'; export const AnchorStyles = css` - ${BaseButtonStyles} - ${AccentButtonStyles} - ${HypertextStyles} - ${LightweightButtonStyles} - ${OutlineButtonStyles} - ${StealthButtonStyles} + ${BaseButtonStyles} `.withBehaviors( - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillRestBehavior, - accentForegroundActiveBehavior, - accentForegroundCutRestBehavior, - accentForegroundHoverBehavior, - accentForegroundRestBehavior, - neutralFillActiveBehavior, - neutralFillFocusBehavior, - neutralFillHoverBehavior, - neutralFillRestBehavior, - neutralFillStealthActiveBehavior, - neutralFillStealthHoverBehavior, - neutralFillStealthRestBehavior, - neutralFocusBehavior, - neutralFocusInnerAccentBehavior, - neutralForegroundRestBehavior, - neutralOutlineActiveBehavior, - neutralOutlineHoverBehavior, - neutralOutlineRestBehavior, + appearanceBehavior('accent', AccentButtonStyles), + appearanceBehavior('hypertext', HypertextStyles), + appearanceBehavior('lightweight', LightweightButtonStyles), + appearanceBehavior('outline', OutlineButtonStyles), + appearanceBehavior('stealth', StealthButtonStyles), ); diff --git a/packages/web-components/src/button/button.styles.ts b/packages/web-components/src/button/button.styles.ts index a42381426fc1f..f4f8288ba6d32 100644 --- a/packages/web-components/src/button/button.styles.ts +++ b/packages/web-components/src/button/button.styles.ts @@ -1,57 +1,18 @@ import { css } from '@microsoft/fast-element'; import { AccentButtonStyles, - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillRestBehavior, - accentForegroundActiveBehavior, - accentForegroundCutRestBehavior, - accentForegroundHoverBehavior, - accentForegroundRestBehavior, BaseButtonStyles, LightweightButtonStyles, - neutralFillActiveBehavior, - neutralFillFocusBehavior, - neutralFillHoverBehavior, - neutralFillRestBehavior, - neutralFillStealthActiveBehavior, - neutralFillStealthHoverBehavior, - neutralFillStealthRestBehavior, - neutralFocusBehavior, - neutralFocusInnerAccentBehavior, - neutralForegroundRestBehavior, - neutralOutlineActiveBehavior, - neutralOutlineHoverBehavior, - neutralOutlineRestBehavior, OutlineButtonStyles, StealthButtonStyles, } from '../styles/'; +import { appearanceBehavior } from '../utilities/behaviors'; export const ButtonStyles = css` - ${BaseButtonStyles} - ${AccentButtonStyles} - ${LightweightButtonStyles} - ${OutlineButtonStyles} - ${StealthButtonStyles} + ${BaseButtonStyles} `.withBehaviors( - accentFillActiveBehavior, - accentFillHoverBehavior, - accentFillRestBehavior, - accentForegroundActiveBehavior, - accentForegroundCutRestBehavior, - accentForegroundHoverBehavior, - accentForegroundRestBehavior, - neutralFillActiveBehavior, - neutralFillFocusBehavior, - neutralFillHoverBehavior, - neutralFillRestBehavior, - neutralFillStealthActiveBehavior, - neutralFillStealthHoverBehavior, - neutralFillStealthRestBehavior, - neutralFocusBehavior, - neutralFocusInnerAccentBehavior, - neutralForegroundRestBehavior, - neutralOutlineActiveBehavior, - neutralOutlineHoverBehavior, - neutralOutlineRestBehavior, + appearanceBehavior('accent', AccentButtonStyles), + appearanceBehavior('lightweight', LightweightButtonStyles), + appearanceBehavior('outline', OutlineButtonStyles), + appearanceBehavior('stealth', StealthButtonStyles), ); diff --git a/packages/web-components/src/utilities/behaviors.ts b/packages/web-components/src/utilities/behaviors.ts new file mode 100644 index 0000000000000..9b6d088008a20 --- /dev/null +++ b/packages/web-components/src/utilities/behaviors.ts @@ -0,0 +1,15 @@ +import { ElementStyles } from '@microsoft/fast-element'; +import { PropertyStyleSheetBehavior } from '@microsoft/fast-foundation'; + +/** + * Behavior that will conditionally apply a stylesheet based on the elements + * appearance property + * + * @param value - The value of the appearance property + * @param styles - The styles to be applied when condition matches + * + * @public + */ +export function appearanceBehavior(value: string, styles: ElementStyles) { + return new PropertyStyleSheetBehavior('appearance', value, styles); +}