@microsoft/adaptive-ui - npm Package Compare versions

Comparing version 1.0.0-alpha.9 to 1.0.0-alpha.10

CHANGELOG.json

@@ -5,2 +5,29 @@ {
     {
+      "date": "Fri, 23 Sep 2022 22:53:27 GMT",
+      "tag": "@microsoft/adaptive-ui_v1.0.0-alpha.10",
+      "version": "1.0.0-alpha.10",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "[e-mail]",
+            "package": "@microsoft/adaptive-ui",
+            "commit": "e4df319f20f647ac5437e684d3be460e98308f5b",
+            "comment": "Add layer recipes and design tokens"
+          },
+          {
+            "author": "[e-mail]",
+            "package": "@microsoft/adaptive-ui",
+            "commit": "ebf424d4aee7575a4e8c20e76e92fcbe7e0af8d7",
+            "comment": "Initial support for opacity in neutral recipes"
+          },
+          {
+            "author": "beachball",
+            "package": "@microsoft/adaptive-ui",
+            "comment": "Bump @microsoft/fast-foundation to v3.0.0-alpha.10",
+            "commit": "1646b26450a08a77c8bd6302560fe12cc6989ae1"
+          }
+        ]
+      }
+    },
+    {
       "date": "Thu, 01 Sep 2022 21:53:34 GMT",
@@ -7,0 +34,0 @@ "tag": "@microsoft/adaptive-ui_v1.0.0-alpha.9",

CHANGELOG.md

 # Change Log - @microsoft/adaptive-ui
 
-This log was last generated on Thu, 01 Sep 2022 21:53:34 GMT and should not be manually modified.
+This log was last generated on Fri, 23 Sep 2022 22:53:27 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.0.0-alpha.10
+
+Fri, 23 Sep 2022 22:53:27 GMT
+
+### Changes
+
+- Add layer recipes and design tokens ([e-mail])
+- Initial support for opacity in neutral recipes ([e-mail])
+- Bump @microsoft/fast-foundation to v3.0.0-alpha.10
+
 ## 1.0.0-alpha.9
@@ -8,0 +18,0 @@

dist/adaptive-ui.d.ts

@@ -0,1 +1,2 @@
+import { ColorRGBA64 } from '@microsoft/fast-colors';
 import { CSSDesignToken } from '@microsoft/fast-foundation';
@@ -229,2 +230,3 @@ import { CSSDirective } from '@microsoft/fast-element';
  * @param minContrast - The desired minimum contrast
+ * @param direction - The direction the delta moves on the `palette`, defaults to {@link directionByIsDark} based on `reference`
  * @returns The Swatch
@@ -243,7 +245,7 @@ *
     /**
-     * Minimum contrast for normal (<= 14pt) text (AA rating).
+     * Minimum contrast for normal (&lt;= 14pt) text (AA rating).
      */
     readonly NormalText: 4.5;
     /**
-     * Minimum contrast for large (> 14pt) text (AA rating).
+     * Minimum contrast for large (&gt; 14pt) text (AA rating).
      */
@@ -338,3 +340,3 @@ readonly LargeText: 3;
 /**
- * A recipe that evaluates to an elevation treatment, commonly, but not limited to, a box .
+ * A recipe that evaluates to an elevation treatment, commonly, but not limited to, a box shadow.
  *
@@ -469,2 +471,14 @@ * @public
 /**
+ * Returns an interactive set of opaque {@link Swatch}es or {@link Swatch}es with opacity relative to the reference color.
+ *
+ * @param set - The swatch set for which to make overlay.
+ * @param reference - The reference color for a semitransparent swatch.
+ * @param asOverlay - True to return a semitransparent representation of `swatch` relative to `reference`.
+ * @returns The requested representation of a `swatch` set.
+ *
+ * @public
+ */
+export declare function interactiveSwatchSetAsOverlay(set: InteractiveSwatchSet, reference: Swatch, asOverlay: boolean): InteractiveSwatchSet;
+
+/**
  * Determines if a `color` is dark according to relative luminance. That is, from a contrast perspective,
@@ -480,2 +494,15 @@ * whether it has more contrast against white than black. In grey, dark is #757575 and darker.
 
+/**
+ * Baseline values for light and dark mode for {@link layerFillBaseLuminance}.
+ *
+ * @remarks
+ * These values represent reasonable starting points for light and dark modes, but custom values can be used instead.
+ *
+ * @public
+ */
+export declare const LayerBaseLuminance: Readonly<{
+    readonly LightMode: 0.95;
+    readonly DarkMode: 0.13;
+}>;
+
 /** @public */
@@ -485,5 +512,187 @@ export declare const layerCornerRadius: CSSDesignToken<number>;
 /**
- * Create a grey swatch for the specified `luminance`. Note this is absolute luminance not 'relative' luminance.
+ * The offset from the container for active state.
  *
- * @param luminance - A value between 0 and 1 representing the desired luminance, for example, 0.5 for middle grey
+ * @public
+ */
+export declare const layerFillActiveDelta: DesignToken<number>;
+
+/**
+ * The ideal luminance value for the "Base" layer, {@link layerFillFixedBase}.
+ *
+ * @remarks
+ * 0...1, 0 = black, 1 = white.
+ *
+ * @public
+ */
+export declare const layerFillBaseLuminance: DesignToken<number>;
+
+/**
+ * The offset between "Fixed" layers, or from the container for "Interactive" rest state.
+ *
+ * @remarks
+ * Should be a positive value so "Minus" recipes are darker and "Plus" recipes are lighter.
+ *
+ * @public
+ */
+export declare const layerFillDelta: DesignToken<number>;
+
+/**
+ * Design token for the fill of the "Base" layer.
+ *
+ * @public
+ */
+export declare const layerFillFixedBase: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of the layer 1 level beneath "Base".
+ *
+ * @public
+ */
+export declare const layerFillFixedMinus1: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of the layer 2 levels beneath "Base".
+ *
+ * @public
+ */
+export declare const layerFillFixedMinus2: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of the layer 3 levels beneath "Base".
+ *
+ * @public
+ */
+export declare const layerFillFixedMinus3: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of the layer 4 levels beneath "Base".
+ *
+ * @public
+ */
+export declare const layerFillFixedMinus4: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of the layer 1 level above "Base".
+ *
+ * @public
+ */
+export declare const layerFillFixedPlus1: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of the layer 2 levels above "Base".
+ *
+ * @public
+ */
+export declare const layerFillFixedPlus2: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of the layer 3 levels above "Base".
+ *
+ * @public
+ */
+export declare const layerFillFixedPlus3: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of the layer 4 levels above "Base".
+ *
+ * @public
+ */
+export declare const layerFillFixedPlus4: CSSDesignToken<Swatch>;
+
+/**
+ * The "Fixed" layers represent background fills commonly used to define app structure.
+ *
+ * @remarks
+ * Generally the primary section is {@link layerFillFixedBase} and underlying sections like navigation
+ * or header are logically *beneath* using {@link layerFillFixedMinus1}, etc. Layers above the "Base" like
+ * flyouts or dialogs should use {@link layerFillFixedPlus1}, etc.
+ *
+ * @public
+ */
+export declare const layerFillFixedRecipe: DesignToken<LayerRecipe>;
+
+/**
+ * The offset from the container for focus state.
+ *
+ * @public
+ */
+export declare const layerFillFocusDelta: DesignToken<number>;
+
+/**
+ * The offset from the container for hover state.
+ *
+ * @public
+ */
+export declare const layerFillHoverDelta: DesignToken<number>;
+
+/**
+ * Design token for the fill of an interactive layer while pressed.
+ *
+ * @public
+ */
+export declare const layerFillInteractiveActive: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of an interactive layer while focused.
+ *
+ * @public
+ */
+export declare const layerFillInteractiveFocus: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of an interactive layer while hovered.
+ *
+ * @public
+ */
+export declare const layerFillInteractiveHover: CSSDesignToken<Swatch>;
+
+/**
+ * The recipe for a layer relative to its context (as opposed to base luminance).
+ *
+ * @remarks
+ * Useful for a `Card` or other container that's interactive.
+ *
+ * @public
+ */
+export declare const layerFillInteractiveRecipe: DesignToken<InteractiveColorRecipe>;
+
+/**
+ * Design token for the fill of an interactive layer at rest.
+ *
+ * @public
+ */
+export declare const layerFillInteractiveRest: CSSDesignToken<Swatch>;
+
+/**
+ * The {@link Palette} to use for Layer recipes.
+ *
+ * @remarks
+ * By default this maps to the {@link neutralPalette}.
+ * Use a custom palette like `layerPalette.withDefault(PaletteRGB.from("#[HEX_COLOR]"))`.
+ *
+ * @public
+ */
+export declare const layerPalette: DesignToken<Palette<Swatch>>;
+
+/**
+ * A recipe that evaluates to a "Fixed" layer treatment.
+ *
+ * @public
+ */
+export declare interface LayerRecipe {
+    /**
+     * Evaluate a "Fixed" layer treatment.
+     *
+     * {@link layerFillFixedRecipe}
+     *
+     * @param resolve - The resolver to evaluate the recipe
+     * @param index - The index of the layer, `0` for "Base", plus or minus relative to "Base"
+     */
+    evaluate(resolve: DesignTokenResolver, index: number): Swatch;
+}
+
+/**
+ * Create a grey {@link Swatch} for the specified `luminance`. Note this is absolute luminance not 'relative' luminance.
+ *
+ * @param luminance - A value between 0 and 1 representing the desired luminance, for example, 0.5 for middle grey, 0 = black, 1 = white
  * @returns A swatch for the specified grey value
@@ -496,2 +705,5 @@ *
 /** @public */
+export declare const neutralAsOverlay: DesignToken<boolean>;
+
+/** @public */
 export declare const neutralBaseColor: CSSDesignToken<string>;
@@ -886,3 +1098,3 @@
      */
-    static from(source: SwatchRGB, options?: Partial<PaletteRGBOptions>): PaletteRGB;
+    static from(source: SwatchRGB | string, options?: Partial<PaletteRGBOptions>): PaletteRGB;
 }
@@ -982,2 +1194,14 @@
 /**
+ * Returns an opaque {@link Swatch} or a {@link Swatch} with opacity relative to the reference color.
+ *
+ * @param swatch - The opaque intended swatch color.
+ * @param reference - The reference color for a semitransparent swatch.
+ * @param asOverlay - True to return a semitransparent representation of `swatch` relative to `reference`.
+ * @returns The requested representation of `swatch`.
+ *
+ * @public
+ */
+export declare function swatchAsOverlay(swatch: Swatch, reference: Swatch, asOverlay: boolean): Swatch;
+
+/**
  * Represents a color in a {@link Palette} using RGB.
@@ -1001,7 +1225,14 @@ *
     /**
+     * The opaque color this Swatch represents if opacity is used.
+     */
+    readonly intendedColor?: SwatchRGB;
+    /**
      * {@inheritdoc RelativeLuminance.relativeLuminance}
      */
     readonly relativeLuminance: number;
-    private readonly color;
     /**
+     * Internal representation of the Swatch in the format used by fast-colors.
+     */
+    readonly color: ColorRGBA64;
+    /**
      * Creates a new SwatchRGB.
@@ -1012,4 +1243,6 @@ *
      * @param blue - Blue channel expressed as a number between 0 and 1
+     * @param alpha - Alpha channel expressed as a number between 0 and 1, default 1
+     * @param intendedColor - If `alpha` &lt; 1 this tracks the intended opaque color value for dependent calculations
      */
-    constructor(red: number, green: number, blue: number);
+    constructor(red: number, green: number, blue: number, alpha?: number, intendedColor?: SwatchRGB);
     /**
@@ -1044,2 +1277,14 @@ * Gets this color value as a string.
     }): SwatchRGB;
+    /**
+     * Creates a new SwatchRGB as an overlay representation of the `intendedColor` over `reference`.
+     *
+     * Currently the overlay will only be black or white, so this works best with a plain grey neutral palette.
+     * Otherwise it will attempt to match the luminance value of the Swatch, so it will likely be close, but not an
+     * exact match to the color from another palette.
+     *
+     * @param intendedColor - The color the overlay should look like over the `reference` color
+     * @param reference - The color under the overlay color
+     * @returns A semitransparent color that implies the `intendedColor` over the `reference` color.
+     */
+    static asOverlay(intendedColor: SwatchRGB, reference: SwatchRGB): SwatchRGB;
 }
@@ -1046,0 +1291,0 @@

dist/adaptive-ui.untrimmed.d.ts

@@ -0,1 +1,2 @@
+import { ColorRGBA64 } from '@microsoft/fast-colors';
 import { CSSDesignToken } from '@microsoft/fast-foundation';
@@ -234,2 +235,3 @@ import { CSSDirective } from '@microsoft/fast-element';
  * @param minContrast - The desired minimum contrast
+ * @param direction - The direction the delta moves on the `palette`, defaults to {@link directionByIsDark} based on `reference`
  * @returns The Swatch
@@ -248,7 +250,7 @@ *
     /**
-     * Minimum contrast for normal (<= 14pt) text (AA rating).
+     * Minimum contrast for normal (&lt;= 14pt) text (AA rating).
      */
     readonly NormalText: 4.5;
     /**
-     * Minimum contrast for large (> 14pt) text (AA rating).
+     * Minimum contrast for large (&gt; 14pt) text (AA rating).
      */
@@ -343,3 +345,3 @@ readonly LargeText: 3;
 /**
- * A recipe that evaluates to an elevation treatment, commonly, but not limited to, a box .
+ * A recipe that evaluates to an elevation treatment, commonly, but not limited to, a box shadow.
  *
@@ -474,2 +476,14 @@ * @public
 /**
+ * Returns an interactive set of opaque {@link Swatch}es or {@link Swatch}es with opacity relative to the reference color.
+ *
+ * @param set - The swatch set for which to make overlay.
+ * @param reference - The reference color for a semitransparent swatch.
+ * @param asOverlay - True to return a semitransparent representation of `swatch` relative to `reference`.
+ * @returns The requested representation of a `swatch` set.
+ *
+ * @public
+ */
+export declare function interactiveSwatchSetAsOverlay(set: InteractiveSwatchSet, reference: Swatch, asOverlay: boolean): InteractiveSwatchSet;
+
+/**
  * Determines if a `color` is dark according to relative luminance. That is, from a contrast perspective,
@@ -485,2 +499,15 @@ * whether it has more contrast against white than black. In grey, dark is #757575 and darker.
 
+/**
+ * Baseline values for light and dark mode for {@link layerFillBaseLuminance}.
+ *
+ * @remarks
+ * These values represent reasonable starting points for light and dark modes, but custom values can be used instead.
+ *
+ * @public
+ */
+export declare const LayerBaseLuminance: Readonly<{
+    readonly LightMode: 0.95;
+    readonly DarkMode: 0.13;
+}>;
+
 /** @public */
@@ -490,5 +517,187 @@ export declare const layerCornerRadius: CSSDesignToken<number>;
 /**
- * Create a grey swatch for the specified `luminance`. Note this is absolute luminance not 'relative' luminance.
+ * The offset from the container for active state.
  *
- * @param luminance - A value between 0 and 1 representing the desired luminance, for example, 0.5 for middle grey
+ * @public
+ */
+export declare const layerFillActiveDelta: DesignToken<number>;
+
+/**
+ * The ideal luminance value for the "Base" layer, {@link layerFillFixedBase}.
+ *
+ * @remarks
+ * 0...1, 0 = black, 1 = white.
+ *
+ * @public
+ */
+export declare const layerFillBaseLuminance: DesignToken<number>;
+
+/**
+ * The offset between "Fixed" layers, or from the container for "Interactive" rest state.
+ *
+ * @remarks
+ * Should be a positive value so "Minus" recipes are darker and "Plus" recipes are lighter.
+ *
+ * @public
+ */
+export declare const layerFillDelta: DesignToken<number>;
+
+/**
+ * Design token for the fill of the "Base" layer.
+ *
+ * @public
+ */
+export declare const layerFillFixedBase: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of the layer 1 level beneath "Base".
+ *
+ * @public
+ */
+export declare const layerFillFixedMinus1: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of the layer 2 levels beneath "Base".
+ *
+ * @public
+ */
+export declare const layerFillFixedMinus2: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of the layer 3 levels beneath "Base".
+ *
+ * @public
+ */
+export declare const layerFillFixedMinus3: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of the layer 4 levels beneath "Base".
+ *
+ * @public
+ */
+export declare const layerFillFixedMinus4: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of the layer 1 level above "Base".
+ *
+ * @public
+ */
+export declare const layerFillFixedPlus1: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of the layer 2 levels above "Base".
+ *
+ * @public
+ */
+export declare const layerFillFixedPlus2: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of the layer 3 levels above "Base".
+ *
+ * @public
+ */
+export declare const layerFillFixedPlus3: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of the layer 4 levels above "Base".
+ *
+ * @public
+ */
+export declare const layerFillFixedPlus4: CSSDesignToken<Swatch>;
+
+/**
+ * The "Fixed" layers represent background fills commonly used to define app structure.
+ *
+ * @remarks
+ * Generally the primary section is {@link layerFillFixedBase} and underlying sections like navigation
+ * or header are logically *beneath* using {@link layerFillFixedMinus1}, etc. Layers above the "Base" like
+ * flyouts or dialogs should use {@link layerFillFixedPlus1}, etc.
+ *
+ * @public
+ */
+export declare const layerFillFixedRecipe: DesignToken<LayerRecipe>;
+
+/**
+ * The offset from the container for focus state.
+ *
+ * @public
+ */
+export declare const layerFillFocusDelta: DesignToken<number>;
+
+/**
+ * The offset from the container for hover state.
+ *
+ * @public
+ */
+export declare const layerFillHoverDelta: DesignToken<number>;
+
+/**
+ * Design token for the fill of an interactive layer while pressed.
+ *
+ * @public
+ */
+export declare const layerFillInteractiveActive: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of an interactive layer while focused.
+ *
+ * @public
+ */
+export declare const layerFillInteractiveFocus: CSSDesignToken<Swatch>;
+
+/**
+ * Design token for the fill of an interactive layer while hovered.
+ *
+ * @public
+ */
+export declare const layerFillInteractiveHover: CSSDesignToken<Swatch>;
+
+/**
+ * The recipe for a layer relative to its context (as opposed to base luminance).
+ *
+ * @remarks
+ * Useful for a `Card` or other container that's interactive.
+ *
+ * @public
+ */
+export declare const layerFillInteractiveRecipe: DesignToken<InteractiveColorRecipe>;
+
+/**
+ * Design token for the fill of an interactive layer at rest.
+ *
+ * @public
+ */
+export declare const layerFillInteractiveRest: CSSDesignToken<Swatch>;
+
+/**
+ * The {@link Palette} to use for Layer recipes.
+ *
+ * @remarks
+ * By default this maps to the {@link neutralPalette}.
+ * Use a custom palette like `layerPalette.withDefault(PaletteRGB.from("#[HEX_COLOR]"))`.
+ *
+ * @public
+ */
+export declare const layerPalette: DesignToken<Palette<Swatch>>;
+
+/**
+ * A recipe that evaluates to a "Fixed" layer treatment.
+ *
+ * @public
+ */
+export declare interface LayerRecipe {
+    /**
+     * Evaluate a "Fixed" layer treatment.
+     *
+     * {@link layerFillFixedRecipe}
+     *
+     * @param resolve - The resolver to evaluate the recipe
+     * @param index - The index of the layer, `0` for "Base", plus or minus relative to "Base"
+     */
+    evaluate(resolve: DesignTokenResolver, index: number): Swatch;
+}
+
+/**
+ * Create a grey {@link Swatch} for the specified `luminance`. Note this is absolute luminance not 'relative' luminance.
+ *
+ * @param luminance - A value between 0 and 1 representing the desired luminance, for example, 0.5 for middle grey, 0 = black, 1 = white
  * @returns A swatch for the specified grey value
@@ -501,2 +710,5 @@ *
 /** @public */
+export declare const neutralAsOverlay: DesignToken<boolean>;
+
+/** @public */
 export declare const neutralBaseColor: CSSDesignToken<string>;
@@ -891,3 +1103,3 @@
      */
-    static from(source: SwatchRGB, options?: Partial<PaletteRGBOptions>): PaletteRGB;
+    static from(source: SwatchRGB | string, options?: Partial<PaletteRGBOptions>): PaletteRGB;
 }
@@ -987,2 +1199,14 @@
 /**
+ * Returns an opaque {@link Swatch} or a {@link Swatch} with opacity relative to the reference color.
+ *
+ * @param swatch - The opaque intended swatch color.
+ * @param reference - The reference color for a semitransparent swatch.
+ * @param asOverlay - True to return a semitransparent representation of `swatch` relative to `reference`.
+ * @returns The requested representation of `swatch`.
+ *
+ * @public
+ */
+export declare function swatchAsOverlay(swatch: Swatch, reference: Swatch, asOverlay: boolean): Swatch;
+
+/**
  * Represents a color in a {@link Palette} using RGB.
@@ -1006,7 +1230,14 @@ *
     /**
+     * The opaque color this Swatch represents if opacity is used.
+     */
+    readonly intendedColor?: SwatchRGB;
+    /**
      * {@inheritdoc RelativeLuminance.relativeLuminance}
      */
     readonly relativeLuminance: number;
-    private readonly color;
     /**
+     * Internal representation of the Swatch in the format used by fast-colors.
+     */
+    readonly color: ColorRGBA64;
+    /**
      * Creates a new SwatchRGB.
@@ -1017,4 +1248,6 @@ *
      * @param blue - Blue channel expressed as a number between 0 and 1
+     * @param alpha - Alpha channel expressed as a number between 0 and 1, default 1
+     * @param intendedColor - If `alpha` &lt; 1 this tracks the intended opaque color value for dependent calculations
      */
-    constructor(red: number, green: number, blue: number);
+    constructor(red: number, green: number, blue: number, alpha?: number, intendedColor?: SwatchRGB);
     /**
@@ -1049,2 +1282,14 @@ * Gets this color value as a string.
     }): SwatchRGB;
+    /**
+     * Creates a new SwatchRGB as an overlay representation of the `intendedColor` over `reference`.
+     *
+     * Currently the overlay will only be black or white, so this works best with a plain grey neutral palette.
+     * Otherwise it will attempt to match the luminance value of the Swatch, so it will likely be close, but not an
+     * exact match to the color from another palette.
+     *
+     * @param intendedColor - The color the overlay should look like over the `reference` color
+     * @param reference - The color under the overlay color
+     * @returns A semitransparent color that implies the `intendedColor` over the `reference` color.
+     */
+    static asOverlay(intendedColor: SwatchRGB, reference: SwatchRGB): SwatchRGB;
 }
@@ -1051,0 +1296,0 @@

dist/dts/color/palette-rgb.d.ts

@@ -67,3 +67,3 @@ import { BasePalette } from "./palette.js";
      */
-    static from(source: SwatchRGB, options?: Partial<PaletteRGBOptions>): PaletteRGB;
+    static from(source: SwatchRGB | string, options?: Partial<PaletteRGBOptions>): PaletteRGB;
 }

dist/dts/color/recipes/contrast-swatch.d.ts

@@ -9,2 +9,3 @@ import { Palette, PaletteDirection } from "../palette.js";
  * @param minContrast - The desired minimum contrast
+ * @param direction - The direction the delta moves on the `palette`, defaults to {@link directionByIsDark} based on `reference`
  * @returns The Swatch
@@ -11,0 +12,0 @@ *

dist/dts/color/swatch.d.ts

@@ -0,1 +1,2 @@
+import { ColorRGBA64 } from "@microsoft/fast-colors";
 import { RelativeLuminance } from "./utilities/relative-luminance.js";
@@ -37,7 +38,14 @@ /**
     /**
+     * The opaque color this Swatch represents if opacity is used.
+     */
+    readonly intendedColor?: SwatchRGB;
+    /**
      * {@inheritdoc RelativeLuminance.relativeLuminance}
      */
     readonly relativeLuminance: number;
-    private readonly color;
     /**
+     * Internal representation of the Swatch in the format used by fast-colors.
+     */
+    readonly color: ColorRGBA64;
+    /**
      * Creates a new SwatchRGB.
@@ -48,4 +56,6 @@ *
      * @param blue - Blue channel expressed as a number between 0 and 1
+     * @param alpha - Alpha channel expressed as a number between 0 and 1, default 1
+     * @param intendedColor - If `alpha` < 1 this tracks the intended opaque color value for dependent calculations
      */
-    constructor(red: number, green: number, blue: number);
+    constructor(red: number, green: number, blue: number, alpha?: number, intendedColor?: SwatchRGB);
     /**
@@ -80,2 +90,14 @@ * Gets this color value as a string.
     }): SwatchRGB;
+    /**
+     * Creates a new SwatchRGB as an overlay representation of the `intendedColor` over `reference`.
+     *
+     * Currently the overlay will only be black or white, so this works best with a plain grey neutral palette.
+     * Otherwise it will attempt to match the luminance value of the Swatch, so it will likely be close, but not an
+     * exact match to the color from another palette.
+     *
+     * @param intendedColor - The color the overlay should look like over the `reference` color
+     * @param reference - The color under the overlay color
+     * @returns A semitransparent color that implies the `intendedColor` over the `reference` color.
+     */
+    static asOverlay(intendedColor: SwatchRGB, reference: SwatchRGB): SwatchRGB;
 }

dist/dts/color/utilities/index.d.ts

@@ -5,2 +5,3 @@ export * from "./color-constants.js";
 export * from "./luminance-swatch.js";
+export * from "./opacity.js";
 export * from "./relative-luminance.js";

dist/dts/color/utilities/luminance-swatch.d.ts

 import { Swatch } from "../swatch.js";
 /**
- * Create a grey swatch for the specified `luminance`. Note this is absolute luminance not 'relative' luminance.
+ * Create a grey {@link Swatch} for the specified `luminance`. Note this is absolute luminance not 'relative' luminance.
  *
- * @param luminance - A value between 0 and 1 representing the desired luminance, for example, 0.5 for middle grey
+ * @param luminance - A value between 0 and 1 representing the desired luminance, for example, 0.5 for middle grey, 0 = black, 1 = white
  * @returns A swatch for the specified grey value
@@ -7,0 +7,0 @@ *

dist/dts/design-tokens/color.d.ts

@@ -10,7 +10,7 @@ import { ColorRecipe, InteractiveColorRecipe } from "../color/recipe.js";
     /**
-     * Minimum contrast for normal (<= 14pt) text (AA rating).
+     * Minimum contrast for normal (&lt;= 14pt) text (AA rating).
      */
     readonly NormalText: 4.5;
     /**
-     * Minimum contrast for large (> 14pt) text (AA rating).
+     * Minimum contrast for large (&gt; 14pt) text (AA rating).
      */
@@ -22,2 +22,4 @@ readonly LargeText: 3;
 /** @public */
+export declare const neutralAsOverlay: import("@microsoft/fast-foundation").DesignToken<boolean>;
+/** @public */
 export declare const accentFillMinContrast: import("@microsoft/fast-foundation").DesignToken<number>;
@@ -24,0 +26,0 @@ /** @public */

dist/dts/design-tokens/index.d.ts

@@ -5,3 +5,4 @@ export * from "./appearance.js";
 export * from "./general.js";
+export * from "./layer.js";
 export * from "./palette.js";
 export * from "./type.js";

dist/dts/elevation/recipe.d.ts

 import { DesignTokenResolver } from "@microsoft/fast-foundation";
 /**
- * A recipe that evaluates to an elevation treatment, commonly, but not limited to, a box .
+ * A recipe that evaluates to an elevation treatment, commonly, but not limited to, a box shadow.
  *
@@ -5,0 +5,0 @@ * @public

dist/esm/color/palette-rgb.js

@@ -1,2 +0,2 @@
-import { ColorHSL, ColorLAB, ColorRGBA64, hslToRGB, interpolateRGB, labToRGB, rgbToHSL, rgbToLAB, roundToPrecisionSmall, } from "@microsoft/fast-colors";
+import { ColorHSL, ColorLAB, ColorRGBA64, hslToRGB, interpolateRGB, labToRGB, parseColorHexRGB, rgbToHSL, rgbToLAB, roundToPrecisionSmall, } from "@microsoft/fast-colors";
 import { BasePalette } from "./palette.js";
@@ -200,7 +200,10 @@ import { SwatchRGB } from "./swatch.js";
     static from(source, options) {
+        const swatch = source instanceof SwatchRGB
+            ? source
+            : SwatchRGB.from(parseColorHexRGB(source));
         const opts = options === void 0 || null
             ? defaultPaletteRGBOptions
             : Object.assign(Object.assign({}, defaultPaletteRGBOptions), options);
-        return new PaletteRGB(source, Object.freeze(PaletteRGB.createColorPaletteByContrast(source, opts)));
+        return new PaletteRGB(swatch, Object.freeze(PaletteRGB.createColorPaletteByContrast(swatch, opts)));
     }
 }

dist/esm/color/recipes/contrast-swatch.js

@@ -8,2 +8,3 @@ import { directionByIsDark } from "../utilities/direction-by-is-dark.js";
  * @param minContrast - The desired minimum contrast
+ * @param direction - The direction the delta moves on the `palette`, defaults to {@link directionByIsDark} based on `reference`
  * @returns The Swatch
@@ -10,0 +11,0 @@ *

dist/esm/color/swatch.js

@@ -1,2 +0,2 @@
-import { ColorRGBA64, rgbToRelativeLuminance } from "@microsoft/fast-colors";
+import { calculateOverlayColor, ColorRGBA64, rgbToRelativeLuminance, } from "@microsoft/fast-colors";
 import { contrast } from "./utilities/relative-luminance.js";
@@ -15,4 +15,6 @@ /**
      * @param blue - Blue channel expressed as a number between 0 and 1
+     * @param alpha - Alpha channel expressed as a number between 0 and 1, default 1
+     * @param intendedColor - If `alpha` < 1 this tracks the intended opaque color value for dependent calculations
      */
-    constructor(red, green, blue) {
+    constructor(red, green, blue, alpha = 1, intendedColor) {
         /**
@@ -33,4 +35,7 @@ * Gets the contrast between this Swatch and another.
         this.b = blue;
-        this.color = new ColorRGBA64(red, green, blue);
-        this.relativeLuminance = rgbToRelativeLuminance(this.color);
+        this.color = new ColorRGBA64(red, green, blue, alpha);
+        this.intendedColor = intendedColor;
+        this.relativeLuminance = intendedColor
+            ? rgbToRelativeLuminance(intendedColor.color)
+            : rgbToRelativeLuminance(this.color);
     }
@@ -43,3 +48,5 @@ /**
     toColorString() {
-        return this.color.toStringHexRGB();
+        return this.color.a < 1
+            ? this.color.toStringWebRGBA()
+            : this.color.toStringHexRGB();
     }
@@ -55,2 +62,19 @@ /**
     }
+    /**
+     * Creates a new SwatchRGB as an overlay representation of the `intendedColor` over `reference`.
+     *
+     * Currently the overlay will only be black or white, so this works best with a plain grey neutral palette.
+     * Otherwise it will attempt to match the luminance value of the Swatch, so it will likely be close, but not an
+     * exact match to the color from another palette.
+     *
+     * @param intendedColor - The color the overlay should look like over the `reference` color
+     * @param reference - The color under the overlay color
+     * @returns A semitransparent color that implies the `intendedColor` over the `reference` color.
+     */
+    static asOverlay(intendedColor, reference) {
+        var _a;
+        const refColor = (_a = reference.intendedColor) !== null && _a !== void 0 ? _a : reference;
+        const colorWithAlpha = calculateOverlayColor(intendedColor.color, refColor.color);
+        return new SwatchRGB(colorWithAlpha.r, colorWithAlpha.g, colorWithAlpha.b, colorWithAlpha.a, intendedColor);
+    }
 }

dist/esm/color/utilities/index.js

@@ -5,2 +5,3 @@ export * from "./color-constants.js";
 export * from "./luminance-swatch.js";
+export * from "./opacity.js";
 export * from "./relative-luminance.js";

dist/esm/color/utilities/luminance-swatch.js

 import { SwatchRGB } from "../swatch.js";
 /**
- * Create a grey swatch for the specified `luminance`. Note this is absolute luminance not 'relative' luminance.
+ * Create a grey {@link Swatch} for the specified `luminance`. Note this is absolute luminance not 'relative' luminance.
  *
- * @param luminance - A value between 0 and 1 representing the desired luminance, for example, 0.5 for middle grey
+ * @param luminance - A value between 0 and 1 representing the desired luminance, for example, 0.5 for middle grey, 0 = black, 1 = white
  * @returns A swatch for the specified grey value
@@ -7,0 +7,0 @@ *

dist/esm/design-tokens/color.js

 import { parseColorHexRGB } from "@microsoft/fast-colors";
-import { blackOrWhiteByContrast } from "../color/index.js";
+import { blackOrWhiteByContrast, interactiveSwatchSetAsOverlay, swatchAsOverlay, } from "../color/index.js";
 import { blackOrWhiteByContrastSet } from "../color/recipes/black-or-white-by-contrast-set.js";
@@ -18,7 +18,7 @@ import { contrastAndDeltaSwatchSet } from "../color/recipes/contrast-and-delta-swatch-set.js";
     /**
-     * Minimum contrast for normal (<= 14pt) text (AA rating).
+     * Minimum contrast for normal (&lt;= 14pt) text (AA rating).
      */
     NormalText: 4.5,
     /**
-     * Minimum contrast for large (> 14pt) text (AA rating).
+     * Minimum contrast for large (&gt; 14pt) text (AA rating).
      */
@@ -29,2 +29,4 @@ LargeText: 3,
 export const fillColor = create("fill-color").withDefault(SwatchRGB.from(parseColorHexRGB("#FFFFFF")));
+/** @public */
+export const neutralAsOverlay = createNonCss("neutral-as-overlay").withDefault(true);
 // Accent Fill
@@ -110,3 +112,3 @@ /** @public */
 export const neutralForegroundRecipe = createNonCss("neutral-foreground-recipe").withDefault({
-    evaluate: (resolve, reference) => contrastAndDeltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralForegroundMinContrast), resolve(neutralForegroundRestDelta), resolve(neutralForegroundHoverDelta), resolve(neutralForegroundActiveDelta), resolve(neutralForegroundFocusDelta)),
+    evaluate: (resolve, reference) => interactiveSwatchSetAsOverlay(contrastAndDeltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralForegroundMinContrast), resolve(neutralForegroundRestDelta), resolve(neutralForegroundHoverDelta), resolve(neutralForegroundActiveDelta), resolve(neutralForegroundFocusDelta)), reference || resolve(fillColor), resolve(neutralAsOverlay)),
 });
@@ -124,3 +126,3 @@ /** @public */
 export const neutralForegroundHintRecipe = createNonCss("neutral-foreground-hint-recipe").withDefault({
-    evaluate: (resolve, reference) => contrastSwatch(resolve(neutralPalette), reference || resolve(fillColor), ContrastTarget.NormalText),
+    evaluate: (resolve, reference) => swatchAsOverlay(contrastSwatch(resolve(neutralPalette), reference || resolve(fillColor), ContrastTarget.NormalText), reference || resolve(fillColor), resolve(neutralAsOverlay)),
 });
@@ -140,3 +142,3 @@ /** @public */
 export const neutralFillRecipe = createNonCss("neutral-fill-recipe").withDefault({
-    evaluate: (resolve, reference) => deltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralFillRestDelta), resolve(neutralFillHoverDelta), resolve(neutralFillActiveDelta), resolve(neutralFillFocusDelta)),
+    evaluate: (resolve, reference) => interactiveSwatchSetAsOverlay(deltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralFillRestDelta), resolve(neutralFillHoverDelta), resolve(neutralFillActiveDelta), resolve(neutralFillFocusDelta)), reference || resolve(fillColor), resolve(neutralAsOverlay)),
 });
@@ -157,3 +159,3 @@ /** @public */
 /** @public */
-export const neutralFillInputActiveDelta = createNonCss("neutral-fill-input-active-delta").withDefault(0);
+export const neutralFillInputActiveDelta = createNonCss("neutral-fill-input-active-delta").withDefault(-2);
 /** @public */
@@ -163,3 +165,3 @@ export const neutralFillInputFocusDelta = createNonCss("neutral-fill-input-focus-delta").withDefault(-2);
 export const neutralFillInputRecipe = createNonCss("neutral-fill-input-recipe").withDefault({
-    evaluate: (resolve, reference) => deltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralFillInputRestDelta), resolve(neutralFillInputHoverDelta), resolve(neutralFillInputActiveDelta), resolve(neutralFillInputFocusDelta)),
+    evaluate: (resolve, reference) => interactiveSwatchSetAsOverlay(deltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralFillInputRestDelta), resolve(neutralFillInputHoverDelta), resolve(neutralFillInputActiveDelta), resolve(neutralFillInputFocusDelta)), reference || resolve(fillColor), resolve(neutralAsOverlay)),
 });
@@ -185,3 +187,3 @@ /** @public */
 export const neutralFillSecondaryRecipe = createNonCss("neutral-fill-secondary-recipe").withDefault({
-    evaluate: (resolve, reference) => deltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralFillSecondaryRestDelta), resolve(neutralFillSecondaryHoverDelta), resolve(neutralFillSecondaryActiveDelta), resolve(neutralFillSecondaryFocusDelta)),
+    evaluate: (resolve, reference) => interactiveSwatchSetAsOverlay(deltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralFillSecondaryRestDelta), resolve(neutralFillSecondaryHoverDelta), resolve(neutralFillSecondaryActiveDelta), resolve(neutralFillSecondaryFocusDelta)), reference || resolve(fillColor), resolve(neutralAsOverlay)),
 });
@@ -207,3 +209,3 @@ /** @public */
 export const neutralFillStealthRecipe = createNonCss("neutral-fill-stealth-recipe").withDefault({
-    evaluate: (resolve, reference) => deltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralFillStealthRestDelta), resolve(neutralFillStealthHoverDelta), resolve(neutralFillStealthActiveDelta), resolve(neutralFillStealthFocusDelta)),
+    evaluate: (resolve, reference) => interactiveSwatchSetAsOverlay(deltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralFillStealthRestDelta), resolve(neutralFillStealthHoverDelta), resolve(neutralFillStealthActiveDelta), resolve(neutralFillStealthFocusDelta)), reference || resolve(fillColor), resolve(neutralAsOverlay)),
 });
@@ -231,3 +233,3 @@ /** @public */
 export const neutralFillStrongRecipe = createNonCss("neutral-fill-strong-recipe").withDefault({
-    evaluate: (resolve, reference) => contrastAndDeltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralFillStrongMinContrast), resolve(neutralFillStrongRestDelta), resolve(neutralFillStrongHoverDelta), resolve(neutralFillStrongActiveDelta), resolve(neutralFillStrongFocusDelta)),
+    evaluate: (resolve, reference) => interactiveSwatchSetAsOverlay(contrastAndDeltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralFillStrongMinContrast), resolve(neutralFillStrongRestDelta), resolve(neutralFillStrongHoverDelta), resolve(neutralFillStrongActiveDelta), resolve(neutralFillStrongFocusDelta)), reference || resolve(fillColor), resolve(neutralAsOverlay)),
 });
@@ -253,5 +255,3 @@ /** @public */
 export const neutralStrokeRecipe = createNonCss("neutral-stroke-recipe").withDefault({
-    evaluate: (resolve, reference) => {
-        return deltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralStrokeRestDelta), resolve(neutralStrokeHoverDelta), resolve(neutralStrokeActiveDelta), resolve(neutralStrokeFocusDelta));
-    },
+    evaluate: (resolve, reference) => interactiveSwatchSetAsOverlay(deltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralStrokeRestDelta), resolve(neutralStrokeHoverDelta), resolve(neutralStrokeActiveDelta), resolve(neutralStrokeFocusDelta)), reference || resolve(fillColor), resolve(neutralAsOverlay)),
 });
@@ -271,3 +271,3 @@ /** @public */
 export const neutralStrokeDividerRecipe = createNonCss("neutral-stroke-divider-recipe").withDefault({
-    evaluate: (resolve, reference) => deltaSwatch(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralStrokeDividerRestDelta)),
+    evaluate: (resolve, reference) => swatchAsOverlay(deltaSwatch(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralStrokeDividerRestDelta)), reference || resolve(fillColor), resolve(neutralAsOverlay)),
 });
@@ -287,5 +287,3 @@ /** @public */
 export const neutralStrokeInputRecipe = createNonCss("neutral-stroke-input-recipe").withDefault({
-    evaluate: (resolve, reference) => {
-        return deltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralStrokeInputRestDelta), resolve(neutralStrokeInputHoverDelta), resolve(neutralStrokeInputActiveDelta), resolve(neutralStrokeInputFocusDelta));
-    },
+    evaluate: (resolve, reference) => interactiveSwatchSetAsOverlay(deltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralStrokeInputRestDelta), resolve(neutralStrokeInputHoverDelta), resolve(neutralStrokeInputActiveDelta), resolve(neutralStrokeInputFocusDelta)), reference || resolve(fillColor), resolve(neutralAsOverlay)),
 });
@@ -313,3 +311,3 @@ /** @public */
 export const neutralStrokeStrongRecipe = createNonCss("neutral-stroke-strong-recipe").withDefault({
-    evaluate: (resolve, reference) => contrastAndDeltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralStrokeStrongMinContrast), resolve(neutralStrokeStrongRestDelta), resolve(neutralStrokeStrongHoverDelta), resolve(neutralStrokeStrongActiveDelta), resolve(neutralStrokeStrongFocusDelta)),
+    evaluate: (resolve, reference) => interactiveSwatchSetAsOverlay(contrastAndDeltaSwatchSet(resolve(neutralPalette), reference || resolve(fillColor), resolve(neutralStrokeStrongMinContrast), resolve(neutralStrokeStrongRestDelta), resolve(neutralStrokeStrongHoverDelta), resolve(neutralStrokeStrongActiveDelta), resolve(neutralStrokeStrongFocusDelta)), reference || resolve(fillColor), resolve(neutralAsOverlay)),
 });
@@ -316,0 +314,0 @@ /** @public */

dist/esm/design-tokens/index.js

@@ -5,3 +5,4 @@ export * from "./appearance.js";
 export * from "./general.js";
+export * from "./layer.js";
 export * from "./palette.js";
 export * from "./type.js";

docs/api-report.md

@@ -7,2 +7,3 @@ ## API Report File for "@microsoft/adaptive-ui"
 
+import { ColorRGBA64 } from '@microsoft/fast-colors';
 import { CSSDesignToken } from '@microsoft/fast-foundation';
@@ -255,4 +256,13 @@ import { CSSDirective } from '@microsoft/fast-element';
 // @public
+export function interactiveSwatchSetAsOverlay(set: InteractiveSwatchSet, reference: Swatch, asOverlay: boolean): InteractiveSwatchSet;
+
+// @public
 export function isDark(color: RelativeLuminance): boolean;
 
+// @public
+export const LayerBaseLuminance: Readonly<{
+    readonly LightMode: 0.95;
+    readonly DarkMode: 0.13;
+}>;
+
 // @public (undocumented)
@@ -262,5 +272,76 @@ export const layerCornerRadius: CSSDesignToken<number>;
 // @public
+export const layerFillActiveDelta: DesignToken<number>;
+
+// @public
+export const layerFillBaseLuminance: DesignToken<number>;
+
+// @public
+export const layerFillDelta: DesignToken<number>;
+
+// @public
+export const layerFillFixedBase: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedMinus1: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedMinus2: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedMinus3: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedMinus4: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedPlus1: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedPlus2: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedPlus3: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedPlus4: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedRecipe: DesignToken<LayerRecipe>;
+
+// @public
+export const layerFillFocusDelta: DesignToken<number>;
+
+// @public
+export const layerFillHoverDelta: DesignToken<number>;
+
+// @public
+export const layerFillInteractiveActive: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillInteractiveFocus: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillInteractiveHover: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillInteractiveRecipe: DesignToken<InteractiveColorRecipe>;
+
+// @public
+export const layerFillInteractiveRest: CSSDesignToken<Swatch>;
+
+// @public
+export const layerPalette: DesignToken<Palette<Swatch>>;
+
+// @public
+export interface LayerRecipe {
+    evaluate(resolve: DesignTokenResolver, index: number): Swatch;
+}
+
+// @public
 export function luminanceSwatch(luminance: number): Swatch;
 
 // @public (undocumented)
+export const neutralAsOverlay: DesignToken<boolean>;
+
+// @public (undocumented)
 export const neutralBaseColor: CSSDesignToken<string>;
@@ -565,3 +646,3 @@
 export class PaletteRGB extends BasePalette<SwatchRGB> {
-    static from(source: SwatchRGB, options?: Partial<PaletteRGBOptions>): PaletteRGB;
+    static from(source: SwatchRGB | string, options?: Partial<PaletteRGBOptions>): PaletteRGB;
 }
@@ -607,5 +688,10 @@
 // @public
+export function swatchAsOverlay(swatch: Swatch, reference: Swatch, asOverlay: boolean): Swatch;
+
+// @public
 export class SwatchRGB implements Swatch {
-    constructor(red: number, green: number, blue: number);
+    constructor(red: number, green: number, blue: number, alpha?: number, intendedColor?: SwatchRGB);
+    static asOverlay(intendedColor: SwatchRGB, reference: SwatchRGB): SwatchRGB;
     readonly b: number;
+    readonly color: ColorRGBA64;
     contrast: any;
@@ -619,2 +705,3 @@ createCSS: () => string;
     readonly g: number;
+    readonly intendedColor?: SwatchRGB;
     readonly r: number;
@@ -621,0 +708,0 @@ readonly relativeLuminance: number;

package.json

 {
   "name": "@microsoft/adaptive-ui",
-  "version": "1.0.0-alpha.9",
+  "version": "1.0.0-alpha.10",
   "description": "A collection of design utilities supporting basic styling and Adaptive UI",
@@ -47,3 +47,3 @@ "type": "module",
     "@microsoft/fast-colors": "^5.3.1",
-    "@microsoft/fast-foundation": "3.0.0-alpha.9"
+    "@microsoft/fast-foundation": "3.0.0-alpha.10"
   },
@@ -50,0 +50,0 @@ "devDependencies": {

temp/api-report.md

@@ -7,2 +7,3 @@ ## API Report File for "@microsoft/adaptive-ui"
 
+import { ColorRGBA64 } from '@microsoft/fast-colors';
 import { CSSDesignToken } from '@microsoft/fast-foundation';
@@ -255,4 +256,13 @@ import { CSSDirective } from '@microsoft/fast-element';
 // @public
+export function interactiveSwatchSetAsOverlay(set: InteractiveSwatchSet, reference: Swatch, asOverlay: boolean): InteractiveSwatchSet;
+
+// @public
 export function isDark(color: RelativeLuminance): boolean;
 
+// @public
+export const LayerBaseLuminance: Readonly<{
+    readonly LightMode: 0.95;
+    readonly DarkMode: 0.13;
+}>;
+
 // @public (undocumented)
@@ -262,5 +272,76 @@ export const layerCornerRadius: CSSDesignToken<number>;
 // @public
+export const layerFillActiveDelta: DesignToken<number>;
+
+// @public
+export const layerFillBaseLuminance: DesignToken<number>;
+
+// @public
+export const layerFillDelta: DesignToken<number>;
+
+// @public
+export const layerFillFixedBase: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedMinus1: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedMinus2: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedMinus3: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedMinus4: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedPlus1: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedPlus2: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedPlus3: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedPlus4: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillFixedRecipe: DesignToken<LayerRecipe>;
+
+// @public
+export const layerFillFocusDelta: DesignToken<number>;
+
+// @public
+export const layerFillHoverDelta: DesignToken<number>;
+
+// @public
+export const layerFillInteractiveActive: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillInteractiveFocus: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillInteractiveHover: CSSDesignToken<Swatch>;
+
+// @public
+export const layerFillInteractiveRecipe: DesignToken<InteractiveColorRecipe>;
+
+// @public
+export const layerFillInteractiveRest: CSSDesignToken<Swatch>;
+
+// @public
+export const layerPalette: DesignToken<Palette<Swatch>>;
+
+// @public
+export interface LayerRecipe {
+    evaluate(resolve: DesignTokenResolver, index: number): Swatch;
+}
+
+// @public
 export function luminanceSwatch(luminance: number): Swatch;
 
 // @public (undocumented)
+export const neutralAsOverlay: DesignToken<boolean>;
+
+// @public (undocumented)
 export const neutralBaseColor: CSSDesignToken<string>;
@@ -565,3 +646,3 @@
 export class PaletteRGB extends BasePalette<SwatchRGB> {
-    static from(source: SwatchRGB, options?: Partial<PaletteRGBOptions>): PaletteRGB;
+    static from(source: SwatchRGB | string, options?: Partial<PaletteRGBOptions>): PaletteRGB;
 }
@@ -607,5 +688,10 @@
 // @public
+export function swatchAsOverlay(swatch: Swatch, reference: Swatch, asOverlay: boolean): Swatch;
+
+// @public
 export class SwatchRGB implements Swatch {
-    constructor(red: number, green: number, blue: number);
+    constructor(red: number, green: number, blue: number, alpha?: number, intendedColor?: SwatchRGB);
+    static asOverlay(intendedColor: SwatchRGB, reference: SwatchRGB): SwatchRGB;
     readonly b: number;
+    readonly color: ColorRGBA64;
     contrast: any;
@@ -619,2 +705,3 @@ createCSS: () => string;
     readonly g: number;
+    readonly intendedColor?: SwatchRGB;
     readonly r: number;
@@ -621,0 +708,0 @@ readonly relativeLuminance: number;

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

648758

increased by14.99%

Number of package files

86

increased by4.88%

Lines of code

16227

increased by15.41%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@microsoft/fast-foundation@3.0.0-alpha.10(transitive)

• - Removed@microsoft/fast-foundation@3.0.0-alpha.9(transitive)

• Updated@microsoft/fast-foundation@3.0.0-alpha.10