fix(web-components): remove behaviors for forced-colors and match-media directives

change/@fluentui-chart-web-components-0b344c29-d1f5-4a0a-98e8-08d0cb7c3142.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: remove behaviors in favor of direct css inclusion",
+  "packageName": "@fluentui/chart-web-components",
+  "email": "13071055+chrisdholt@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-web-components-0a4eeb00-f707-486c-b57e-9db249a4db83.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: remove behaviors in favor of direct css inclusion",
+  "packageName": "@fluentui/web-components",
+  "email": "13071055+chrisdholt@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/charts/chart-web-components/src/donut-chart/donut-chart.styles.ts

@@ -9,7 +9,6 @@ import {
   colorStrokeFocus2,
   colorTransparentStroke,
   display,
-  forcedColorsStylesheetBehavior,
   spacingHorizontalL,
   spacingHorizontalNone,
   spacingHorizontalS,
@@ -139,8 +138,8 @@ export const styles = css`
   .tooltip-content-y {
     ${typographyTitle2Styles}
   }
-`.withBehaviors(
-  forcedColorsStylesheetBehavior(css`
+
+  @media (forced-colors: active) {
     .text-inside-donut {
       fill: CanvasText;
     }
@@ -155,5 +154,5 @@ export const styles = css`
       forced-color-adjust: auto;
       color: CanvasText;
     }
-  `),
-);
+  }
+`;

packages/charts/chart-web-components/src/horizontal-bar-chart/horizontal-bar-chart.styles.ts

@@ -5,7 +5,6 @@ import {
   colorNeutralForeground1,
   colorNeutralStrokeAccessible,
   display,
-  forcedColorsStylesheetBehavior,
   shadow4,
   spacingHorizontalL,
   spacingHorizontalNone,
@@ -171,8 +170,8 @@ export const styles: ElementStyles = css`
     ${typographyBody1StrongStyles}
     color: ${colorNeutralForeground1};
   }
-`.withBehaviors(
-  forcedColorsStylesheetBehavior(css`
+
+  @media (forced-colors: active) {
     .legend-rect,
     .tooltip-line,
     .triangle {
@@ -186,5 +185,5 @@ export const styles: ElementStyles = css`
     .bar-label {
       fill: CanvasText !important;
     }
-  `),
-);
+  }
+`;

packages/web-components/docs/web-components.api.md

@@ -11,8 +11,6 @@ import { ElementStyles } from '@microsoft/fast-element';
 import { ElementViewTemplate } from '@microsoft/fast-element';
 import { FASTElement } from '@microsoft/fast-element';
 import { FASTElementDefinition } from '@microsoft/fast-element';
-import type { HostBehavior } from '@microsoft/fast-element';
-import type { HostController } from '@microsoft/fast-element';
 import { HTMLDirective } from '@microsoft/fast-element';
 import { Orientation } from '@microsoft/fast-web-utilities';
 import { SyntheticViewTemplate } from '@microsoft/fast-element';
@@ -2517,9 +2515,6 @@ export const curveEasyEaseMax = "var(--curveEasyEaseMax)";
 // @public
 export const curveLinear = "var(--curveLinear)";
 
-// @public
-export const darkModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
-
 // @public
 export class Dialog extends FASTElement {
     ariaDescribedby?: string;
@@ -2980,9 +2975,6 @@ export const fontWeightRegular = "var(--fontWeightRegular)";
 // @public
 export const fontWeightSemibold = "var(--fontWeightSemibold)";
 
-// @public
-export const forcedColorsStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
-
 // @public
 export const getDirection: (rootNode: HTMLElement) => Direction;
 
@@ -3088,9 +3080,6 @@ export const LabelWeight: {
 // @public
 export type LabelWeight = ValuesOf<typeof LabelWeight>;
 
-// @public
-export const lightModeStylesheetBehavior: (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
-
 // @public
 export const lineHeightBase100 = "var(--lineHeightBase100)";
 
@@ -3201,29 +3190,6 @@ export const ListboxTemplate: ElementViewTemplate<Listbox>;
 // @public
 export function listboxTemplate<T extends Listbox>(): ElementViewTemplate<T>;
 
-// @public
-export abstract class MatchMediaBehavior implements HostBehavior {
-    constructor(query: MediaQueryList);
-    connectedCallback(controller: HostController): void;
-    protected abstract constructListener(controller: HostController): MediaQueryListListener;
-    disconnectedCallback(controller: HostController): void;
-    readonly query: MediaQueryList;
-}
-
-// @public
-export class MatchMediaStyleSheetBehavior extends MatchMediaBehavior {
-    constructor(query: MediaQueryList, styles: ElementStyles);
-    protected constructListener(controller: HostController): MediaQueryListListener;
-    readonly query: MediaQueryList;
-    // @internal
-    removedCallback(controller: HostController<any>): void;
-    readonly styles: ElementStyles;
-    static with(query: MediaQueryList): (styles: ElementStyles) => MatchMediaStyleSheetBehavior;
-}
-
-// @public
-export type MediaQueryListListener = (this: MediaQueryList, ev?: MediaQueryListEvent) => void;
-
 // @public
 export class Menu extends FASTElement {
     closeMenu: (event?: Event) => void;

packages/web-components/src/anchor-button/anchor-button.styles.ts

@@ -1,6 +1,5 @@
 import { css } from '@microsoft/fast-element';
 import { baseButtonStyles } from '../button/button.styles.js';
-import { forcedColorsStylesheetBehavior } from '../utils/index.js';
 
 // Need to support icon hover styles
 export const styles = css`
@@ -10,11 +9,11 @@ export const styles = css`
     position: absolute;
     inset: 0;
   }
-`.withBehaviors(
-  forcedColorsStylesheetBehavior(css`
+
+  @media (forced-colors: active) {
     :host {
       border-color: LinkText;
       color: LinkText;
     }
-  `),
-);
+  }
+`;

packages/web-components/src/badge/badge.styles.ts

@@ -1,5 +1,4 @@
 import { css } from '@microsoft/fast-element';
-import { forcedColorsStylesheetBehavior } from '../utils/index.js';
 import {
   badgeBaseStyles,
   badgeFilledStyles,
@@ -32,12 +31,12 @@ export const styles = css`
   ${badgeFilledStyles}
   ${badgeSizeStyles}
   ${badgeBaseStyles}
-`.withBehaviors(
-  forcedColorsStylesheetBehavior(css`
+
+  @media (forced-colors: active) {
     :host,
     :host([appearance='outline']),
     :host([appearance='tint']) {
       border-color: CanvasText;
     }
-  `),
-);
+  }
+`;

packages/web-components/src/button/button.styles.ts

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
+import { display } from '../utils/index.js';
 import {
   borderRadiusCircular,
   borderRadiusLarge,
@@ -310,8 +310,8 @@ export const styles = css`
     border-color: transparent;
     background-color: ${colorTransparentBackground};
   }
-`.withBehaviors(
-  forcedColorsStylesheetBehavior(css`
+
+  @media (forced-colors: active) {
     :host {
       background-color: ButtonFace;
       color: ButtonText;
@@ -332,5 +332,5 @@ export const styles = css`
       color: GrayText;
       border-color: ButtonText;
     }
-  `),
-);
+  }
+`;

packages/web-components/src/checkbox/checkbox.styles.ts

@@ -22,7 +22,6 @@ import {
   strokeWidthThick,
   strokeWidthThin,
 } from '../theme/design-tokens.js';
-import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
 import { display } from '../utils/display.js';
 
 /** Checkbox styles
@@ -153,8 +152,8 @@ export const styles = css`
   :host([disabled]${checkedState}) .checked-indicator {
     color: ${colorNeutralStrokeDisabled};
   }
-`.withBehaviors(
-  forcedColorsStylesheetBehavior(css`
+
+  @media (forced-colors: active) {
     :host {
       border-color: FieldText;
     }
@@ -196,5 +195,5 @@ export const styles = css`
     :host([disabled]${checkedState}) .checked-indicator {
       color: GrayText;
     }
-  `),
-);
+  }
+`;

packages/web-components/src/compound-button/compound-button.styles.ts

@@ -18,7 +18,6 @@ import {
   spacingHorizontalSNudge,
   spacingHorizontalXS,
 } from '../theme/design-tokens.js';
-import { forcedColorsStylesheetBehavior } from '../utils/index.js';
 
 // Need to support icon hover styles
 export const styles = css`
@@ -118,11 +117,11 @@ export const styles = css`
   :host([size='large']) ::slotted([slot='description']) {
     font-size: ${fontSizeBase300};
   }
-`.withBehaviors(
-  forcedColorsStylesheetBehavior(css`
+
+  @media (forced-colors: active) {
     :host([appearance='primary']:not(:hover, :focus-visible, :disabled, [disabled-focusable]))
       ::slotted([slot='description']) {
       color: HighlightText;
     }
-  `),
-);
+  }
+`;

packages/web-components/src/dialog/dialog.styles.ts

@@ -12,7 +12,6 @@ import {
   shadow64,
   strokeWidthThin,
 } from '../theme/design-tokens.js';
-import { forcedColorsStylesheetBehavior } from '../utils/behaviors/match-media-stylesheet-behavior.js';
 
 /** Dialog styles
  * @public
@@ -95,12 +94,12 @@ export const styles = css`
       }
     }
   }
-`.withBehaviors(
-  forcedColorsStylesheetBehavior(css`
+
+  @media (forced-colors: active) {
     @layer base {
       dialog {
         border: ${strokeWidthThin} solid ${colorTransparentStroke};
       }
     }
-  `),
-);
+  }
+`;

packages/web-components/src/divider/divider.styles.ts

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
+import { display } from '../utils/index.js';
 import {
   colorBrandForeground1,
   colorBrandStroke1,
@@ -123,8 +123,8 @@ export const styles = css`
   :host([appearance='subtle']) ::slotted(*) {
     color: ${colorNeutralForeground3};
   }
-`.withBehaviors(
-  forcedColorsStylesheetBehavior(css`
+
+  @media (forced-colors: active) {
     :host([appearance='strong'])::before,
     :host([appearance='strong'])::after,
     :host([appearance='brand'])::before,
@@ -136,5 +136,5 @@ export const styles = css`
       background: WindowText;
       color: WindowText;
     }
-  `),
-);
+  }
+`;

packages/web-components/src/index.ts

@@ -331,13 +331,5 @@ export {
 export { BaseTree, Tree, TreeDefinition, TreeTemplate, TreeStyles } from './tree/index.js';
 export { TreeItem, TreeItemDefinition, TreeItemTemplate, TreeItemStyles } from './tree-item/index.js';
 export type { isTreeItem, TreeItemAppearance, TreeItemSize } from './tree-item/index.js';
-export {
-  darkModeStylesheetBehavior,
-  forcedColorsStylesheetBehavior,
-  lightModeStylesheetBehavior,
-  MatchMediaBehavior,
-  MatchMediaStyleSheetBehavior,
-} from './utils/behaviors/match-media-stylesheet-behavior.js';
-export type { MediaQueryListListener } from './utils/behaviors/match-media-stylesheet-behavior.js';
 export { getDirection } from './utils/direction.js';
 export { display } from './utils/display.js';

packages/web-components/src/link/link.styles.ts

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
+import { display } from '../utils/index.js';
 import {
   colorBrandForegroundLink,
   colorBrandForegroundLinkHover,
@@ -75,10 +75,10 @@ export const styles = css`
     position: absolute;
     inset: 0;
   }
-`.withBehaviors(
-  forcedColorsStylesheetBehavior(css`
+
+  @media (forced-colors: active) {
     :host {
       color: LinkText;
     }
-  `),
-);
+  }
+`;

packages/web-components/src/menu-item/menu-item.styles.ts

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
+import { display } from '../utils/index.js';
 import {
   borderRadiusMedium,
   colorCompoundBrandForeground1Pressed,
@@ -169,12 +169,12 @@ export const styles = css`
       }
     }
   }
-`.withBehaviors(
-  forcedColorsStylesheetBehavior(css`
+
+  @media (forced-colors: active) {
     :host(${disabledState}),
     :host(${disabledState}) ::slotted([slot='start']),
     :host(${disabledState}) ::slotted([slot='end']) {
       color: GrayText;
     }
-  `),
-);
+  }
+`;

packages/web-components/src/progress-bar/progress-bar.styles.ts

@@ -1,5 +1,5 @@
 import { css } from '@microsoft/fast-element';
-import { display, forcedColorsStylesheetBehavior } from '../utils/index.js';
+import { display } from '../utils/index.js';
 import {
   borderRadiusMedium,
   borderRadiusNone,
@@ -103,14 +103,14 @@ export const styles = css`
       inset-inline-start: 100%;
     }
   }
-`.withBehaviors(
-  forcedColorsStylesheetBehavior(css`
+
+  @media (forced-colors: active) {
     :host {
       background-color: CanvasText;
     }
     .indicator,
     :host(:is([validation-state='success'], [validation-state='warning'], [validation-state='error'])) .indicator {
       background-color: Highlight;
     }
-  `),
-);
+  }
+`;