Initial support for style module media query variations

Author: bheston

package-lock.json

@@ -36,6 +36,7 @@
   "dependencies": {
     "@microsoft/fast-element": "2.0.0-beta.26",
     "@microsoft/fast-foundation": "3.0.0-alpha.31",
+    "@microsoft/fast-web-utilities": "^6.0.0",
     "culori": "^3.2.0"
   },
   "devDependencies": {

packages/adaptive-ui/package.json

@@ -4,5 +4,6 @@ export * from "./density.js";
 export * from "./elevation.js";
 export * from "./layer.js";
 export * from "./modules.js";
+export * from "./modules.forced-colors.js";
 export * from "./palette.js";
 export * from "./type.js";

packages/adaptive-ui/src/design-tokens/index.ts

@@ -0,0 +1,60 @@
+import { SystemColors } from "@microsoft/fast-web-utilities";
+import { InteractiveSet } from "../types.js";
+import { Styles } from "../modules/styles.js";
+
+/**
+ * Convenience function for styles that share rest/focus and hover/active states.
+ *
+ * @param restAndFocus - The value to use for rest and focus states.
+ * @param hoverAndActive - The value to use for hover and active states.
+ * @returns A full interactive color set.
+ */
+function set(
+    restAndFocus: string,
+    hoverAndActive: string,
+): InteractiveSet<string> {
+    return {
+        rest: restAndFocus,
+        hover: hoverAndActive,
+        active: hoverAndActive,
+        focus: restAndFocus,
+        disabled: SystemColors.GrayText,
+    };
+}
+
+/**
+ * @public
+ */
+export const forcedColorsButtonStyles: Styles = Styles.fromProperties({
+    backgroundFill: {
+        ...set(SystemColors.ButtonFace, SystemColors.HighlightText),
+    },
+    foregroundFill: {
+        ...set(SystemColors.ButtonText, SystemColors.Highlight),
+    },
+    borderFill: {
+        ...set(SystemColors.ButtonText, SystemColors.Highlight),
+    },
+});
+
+/**
+ * @public
+ */
+export const forcedColorsHighlightStyles: Styles = Styles.fromProperties({
+    backgroundFill: {
+        ...set(SystemColors.Highlight, SystemColors.ButtonFace),
+    },
+    foregroundFill: {
+        ...set(SystemColors.HighlightText, SystemColors.ButtonText),
+    },
+    borderFill: {
+        ...set(SystemColors.Highlight, SystemColors.ButtonText),
+    },
+});
+
+/**
+ * @public
+ */
+export const forcedColorsTextStyles: Styles = Styles.fromProperties({
+    foregroundFill: SystemColors.CanvasText,
+});

packages/adaptive-ui/src/design-tokens/modules.forced-colors.ts

@@ -1,3 +1,4 @@
+import { MediaQuery } from "../modules/css.js";
 import { BorderFill, BorderStyle, BorderThickness, CornerRadius, Fill, Padding, Styles, StyleValue } from "../modules/styles.js";
 import { cornerRadiusControl, cornerRadiusLayer, focusStrokeThickness, strokeThickness } from "./appearance.js";
 import {
@@ -101,6 +102,7 @@ import {
     typeRampPlus6FontVariations,
     typeRampPlus6LineHeight,
 } from "./type.js";
+import { forcedColorsButtonStyles, forcedColorsHighlightStyles, forcedColorsTextStyles } from "./modules.forced-colors.js";
 
 /**
  * Style module for the shape of a control.
@@ -1330,6 +1332,9 @@ export const selectableSelectedStyles: Styles = Styles.compose(
     ],
     undefined,
     "styles.selectable-control-selected",
+).withMediaQuery(
+    MediaQuery.ForcedColors,
+    forcedColorsHighlightStyles,
 );
 
 /**
@@ -1343,6 +1348,9 @@ export const selectableUnselectedStyles: Styles = Styles.compose(
     ],
     undefined,
     "styles.selectable-control-unselected",
+).withMediaQuery(
+    MediaQuery.ForcedColors,
+    forcedColorsButtonStyles,
 );
 
 /**
@@ -1369,6 +1377,9 @@ export const plainTextStyles: Styles = Styles.compose(
     ],
     undefined,
     "styles.text-plain",
+).withMediaQuery(
+    MediaQuery.ForcedColors,
+    forcedColorsTextStyles,
 );
 
 /**

packages/adaptive-ui/src/design-tokens/modules.ts

@@ -1,5 +1,14 @@
 import { StyleProperty } from "./types.js";
 
+/**
+ * Convenience media queries for {@link Styles} variations.
+ */
+export const MediaQuery = {
+    ForcedColors: "(forced-colors)",
+    ColorsDark: "(prefers-color-scheme: dark)",
+    ColorsLight: "(prefers-color-scheme: light)",
+} as const;
+
 /**
  * Converts a {@link StyleProperty} to a css property name.
  *

packages/adaptive-ui/src/modules/css.ts

@@ -1,6 +1,6 @@
 import { ComposableStyles, css, HostBehavior } from "@microsoft/fast-element";
 import { type CSSDirective, ElementStyles } from "@microsoft/fast-element";
-import { CSSDesignToken } from "@microsoft/fast-foundation";
+import { CSSDesignToken, MatchMediaStyleSheetBehavior } from "@microsoft/fast-foundation";
 import { Interactivity, type InteractivityDefinition, type StyleModuleTarget, StyleProperty } from "../modules/types.js";
 import type { InteractiveSet } from "../types.js";
 import { makeSelector } from "./selector.js";
@@ -184,8 +184,17 @@ export class ElementStylesRenderer {
      */
     public static renderStyleRules(baseStyles: ComposableStyles[] = [], styleRules: StyleRules, anatomy?: ComponentAnatomy<any, any>) {
         for (const rule of styleRules) {
+            const target = rule.target || {};
             const styles = Styles.fromDeclaration(rule);
-            const renderedStyles = new ElementStylesRenderer(styles).render(rule.target || {}, anatomy?.interactivity);
+            const renderedStyles = new ElementStylesRenderer(styles).render(target, anatomy?.interactivity);
+
+            styles.getMediaQueryStyles()?.forEach((queryStyles, query) => {
+                const queryRenderedStyles = new ElementStylesRenderer(queryStyles).render(target, anatomy?.interactivity);
+                renderedStyles.withBehaviors(
+                    MatchMediaStyleSheetBehavior.with(
+                        window.matchMedia(query))(queryRenderedStyles))
+            });
+
             baseStyles.push(renderedStyles);
         }
 

packages/adaptive-ui/src/modules/element-styles-renderer.ts

@@ -203,6 +203,8 @@ export class Styles {
     private _properties?: StylePropertiesMap;
     // Effective properties from composed styles and additional properties
     private _composedProperties?: StylePropertiesMap;
+    // Style overrides for a media query
+    private _mediaQueryVariations: Map<string, Styles>;
 
     private constructor(
         /**
@@ -266,6 +268,30 @@ export class Styles {
         this.createEffectiveProperties();
     }
 
+    /**
+     * Adds a style variation for a media query like `forced-colors`.
+     *
+     * @param query - The media query, see {@link MediaQuery}.
+     * @param styles - The styles to apply for the provided media query
+     * @returns The `Styles` definition with media query variation.
+     */
+    public withMediaQuery(query: string, styles: Styles): this {
+        if (!this._mediaQueryVariations) {
+            this._mediaQueryVariations = new Map();
+        }
+        this._mediaQueryVariations.set(query, styles);
+        return this;
+    }
+
+    /**
+     * Gets the media query variations for this style.
+     *
+     * @returns The defined media query variations.
+     */
+    public getMediaQueryStyles(): ReadonlyMap<string, Styles> | undefined {
+        return this._mediaQueryVariations;
+    }
+
     /**
      * Gets the full effective set of properties, from composed styles and local properties as applicable.
      */