From 21d712cf9dbf5019d35b933a5bcdeb0c74814c81 Mon Sep 17 00:00:00 2001 From: Brian Heston <47367562+bheston@users.noreply.github.com> Date: Tue, 15 Oct 2024 13:59:41 -0700 Subject: [PATCH 1/2] AUI: Add support for looking up Token Groups in anatomy --- packages/adaptive-ui/docs/api-report.md | 1 + packages/adaptive-ui/src/bin/aui.ts | 11 ++++++++++- .../src/core/adaptive-design-tokens.ts | 9 +++++++++ .../adaptive-ui/src/core/token-helpers-color.ts | 15 +++++++++++---- 4 files changed, 31 insertions(+), 5 deletions(-) diff --git a/packages/adaptive-ui/docs/api-report.md b/packages/adaptive-ui/docs/api-report.md index 02469eb3..bc4114ce 100644 --- a/packages/adaptive-ui/docs/api-report.md +++ b/packages/adaptive-ui/docs/api-report.md @@ -268,6 +268,7 @@ export class DesignTokenMultiValue extends Arra // @public export abstract class DesignTokenRegistry { + static Groups: Map>; static Shared: Map>; } diff --git a/packages/adaptive-ui/src/bin/aui.ts b/packages/adaptive-ui/src/bin/aui.ts index cd7d6226..9f285718 100644 --- a/packages/adaptive-ui/src/bin/aui.ts +++ b/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 : value; + if (token) { + properties[target] = token as CSSDesignToken; + } else { + const group = DesignTokenRegistry.Groups.get(value); + if (group) { + properties[target] = group; + } else { + properties[target] = value; + } + } }); } diff --git a/packages/adaptive-ui/src/core/adaptive-design-tokens.ts b/packages/adaptive-ui/src/core/adaptive-design-tokens.ts index fe7b9810..ea11f94e 100644 --- a/packages/adaptive-ui/src/core/adaptive-design-tokens.ts +++ b/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>(); + + /** + * The Design Token Group registry. + * + * @remarks + * Currently only Interactive Token Groups are meaningful and supported. + */ + public static Groups = new Map>(); } /** diff --git a/packages/adaptive-ui/src/core/token-helpers-color.ts b/packages/adaptive-ui/src/core/token-helpers-color.ts index 2ef747b2..6aa620a0 100644 --- a/packages/adaptive-ui/src/core/token-helpers-color.ts +++ b/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; } From 996b4f689160ea0df90fc2a85f4a894ca874f196 Mon Sep 17 00:00:00 2001 From: Brian Heston <47367562+bheston@users.noreply.github.com> Date: Wed, 16 Oct 2024 20:46:16 -0700 Subject: [PATCH 2/2] Change files --- ...b-adaptive-ui-f8c4444f-eeae-489a-9d3d-8f84c8fc761b.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@adaptive-web-adaptive-ui-f8c4444f-eeae-489a-9d3d-8f84c8fc761b.json diff --git a/change/@adaptive-web-adaptive-ui-f8c4444f-eeae-489a-9d3d-8f84c8fc761b.json b/change/@adaptive-web-adaptive-ui-f8c4444f-eeae-489a-9d3d-8f84c8fc761b.json new file mode 100644 index 00000000..693ec57b --- /dev/null +++ b/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": "47367562+bheston@users.noreply.github.com", + "dependentChangeType": "patch" +}