feat: add appearance stylesheet behavior

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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),
 );

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),
 );

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);
+}