AUI: Add support for looking up Token Groups in anatomy

change/@adaptive-web-adaptive-ui-f8c4444f-eeae-489a-9d3d-8f84c8fc761b.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "AUI: Add support for looking up Token Groups in anatomy",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/adaptive-ui/docs/api-report.md

@@ -268,6 +268,7 @@ export class DesignTokenMultiValue<T extends CSSDirective | string> extends Arra
 
 // @public
 export abstract class DesignTokenRegistry {
+    static Groups: Map<string, InteractiveTokenGroup<any>>;
     static Shared: Map<string, DesignToken<any>>;
 }
 

packages/adaptive-ui/src/bin/aui.ts

@@ -264,7 +264,16 @@ function jsonToAUIStyleSheet(obj: SerializableAnatomy): AUIStyleSheet {
                     const target = entry[0];
                     const value = entry[1];
                     const token = DesignTokenRegistry.Shared.get(value);
-                    properties[target] = token ? token as CSSDesignToken<any> : value;
+                    if (token) {
+                        properties[target] = token as CSSDesignToken<any>;
+                    } else {
+                        const group = DesignTokenRegistry.Groups.get(value);
+                        if (group) {
+                            properties[target] = group;
+                        } else {
+                            properties[target] = value;
+                        }
+                    }
                 });
             }
 

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

@@ -2,6 +2,7 @@ import { CSSDirective, cssDirective, htmlDirective } from "@microsoft/fast-eleme
 import { CSSDesignToken, DesignToken, ValuesOf } from "@microsoft/fast-foundation";
 import { applyMixins } from './apply-mixins.js';
 import { StyleProperty } from "./modules/types.js";
+import { InteractiveTokenGroup } from "./types.js";
 
 /**
  * Standard design token types from the community group and new types defined in Adaptive UI.
@@ -95,6 +96,14 @@ export abstract class DesignTokenRegistry {
      * The shared Design Token registry.
      */
     public static Shared = new Map<string, DesignToken<any>>();
+
+    /**
+     * The Design Token Group registry.
+     *
+     * @remarks
+     * Currently only Interactive Token Groups are meaningful and supported.
+     */
+    public static Groups = new Map<string, InteractiveTokenGroup<any>>();
 }
 
 /**

packages/adaptive-ui/src/core/token-helpers-color.ts

@@ -15,7 +15,7 @@ import {
 import { Palette } from "./color/palette.js";
 import { Swatch } from "./color/swatch.js";
 import { StyleProperty } from "./modules/types.js";
-import { DesignTokenType, TypedCSSDesignToken, TypedDesignToken } from "./adaptive-design-tokens.js";
+import { DesignTokenRegistry, DesignTokenType, TypedCSSDesignToken, TypedDesignToken } from "./adaptive-design-tokens.js";
 import { Recipe, RecipeOptional } from "./recipes.js";
 import { createTokenNonCss, createTokenSwatch } from "./token-helpers.js";
 import { InteractiveState, InteractiveTokenGroup } from "./types.js";
@@ -158,7 +158,8 @@ export function createTokenColorSet(
         (resolve: DesignTokenResolver) =>
             resolve(recipeToken).evaluate(resolve)
     );
-    return {
+
+    const group = {
         name,
         type: DesignTokenType.color,
         intendedFor: valueToken.intendedFor,
@@ -168,6 +169,8 @@ export function createTokenColorSet(
         focus: createTokenColorSetState(valueToken, InteractiveState.focus),
         disabled: createTokenColorSetState(valueToken, InteractiveState.disabled),
     };
+    DesignTokenRegistry.Groups.set(name, group);
+    return group;
 }
 
 /**
@@ -214,7 +217,7 @@ export function createForegroundSet(
         );
     }
 
-    return {
+    const group = {
         name: setName,
         type: DesignTokenType.color,
         intendedFor: foregroundRecipe.intendedFor,
@@ -224,6 +227,8 @@ export function createForegroundSet(
         focus: createState(InteractiveState.rest, InteractiveState.focus),
         disabled: createState(InteractiveState.disabled, InteractiveState.disabled),
     };
+    DesignTokenRegistry.Groups.set(setName, group);
+    return group;
 }
 
 /**
@@ -264,7 +269,7 @@ export function createForegroundSetBySet(
         );
     }
 
-    return {
+    const group = {
         name: setName,
         intendedFor: foregroundRecipe.intendedFor,
         type: DesignTokenType.color,
@@ -274,4 +279,6 @@ export function createForegroundSetBySet(
         focus: createState(InteractiveState.focus),
         disabled: createState(InteractiveState.disabled),
     };
+    DesignTokenRegistry.Groups.set(setName, group);
+    return group;
 }