Designer: Added support for applying interactive groups (#247)

Author: bheston

change/@adaptive-web-adaptive-ui-a3f2c827-911c-4906-a735-78bd8f38bd99.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Updated style properties to readonly, adjusted token group types",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@adaptive-web-adaptive-ui-designer-core-2547a09a-053d-486e-a3bf-3e015478db71.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Added support for registering interactive token groups",
+  "packageName": "@adaptive-web/adaptive-ui-designer-core",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/adaptive-ui-designer-core/src/index.ts

@@ -15,5 +15,5 @@ export {
 } from "./model.js";
 export { mapReplacer, mapReviver, deserializeMap, serializeMap } from "./serialization.js";
 export { State, StatesState, PluginNode, focusIndicatorNodeName, } from "./node.js";
-export { AdaptiveDesignToken, DesignTokenRegistry } from "./registry/design-token-registry.js";
+export { AdaptiveDesignToken, AdaptiveDesignTokenOrGroup, DesignTokenRegistry } from "./registry/design-token-registry.js";
 export { registerAppliableTokens, registerTokens } from "./registry/recipes.js";

packages/adaptive-ui-designer-core/src/registry/design-token-registry.ts

@@ -1,16 +1,18 @@
 import { CSSDesignToken, DesignToken } from "@microsoft/fast-foundation";
-import { DesignTokenMetadata, StyleProperty } from "@adaptive-web/adaptive-ui";
+import { DesignTokenMetadata, InteractiveTokenGroup, StyleProperty } from "@adaptive-web/adaptive-ui";
 
 export type AdaptiveDesignToken = (DesignToken<any> | CSSDesignToken<any>) & DesignTokenMetadata;
 
-export class DesignTokenRegistry {
-    private _entries: { [id: string]: AdaptiveDesignToken } = {};
+export type AdaptiveDesignTokenOrGroup = (DesignToken<any> | CSSDesignToken<any> | InteractiveTokenGroup<any>) & DesignTokenMetadata;
+
+export class DesignTokenRegistry<T extends { name: string } & DesignTokenMetadata> {
+    private _entries: { [id: string]: T } = {};
 
     /**
      * Registers a new design token definition.
      * @param designToken The design token definition to register.
      */
-    public register(designToken: AdaptiveDesignToken): void {
+    public register(designToken: T): void {
         const { name } = designToken;
 
         if (this.isRegistered(name)) {
@@ -34,7 +36,7 @@ export class DesignTokenRegistry {
      * Gets a design token definition by ID.
      * @param name The ID of the design token definition.
      */
-    public get(name: string): AdaptiveDesignToken | null {
+    public get(name: string): T | null {
         if (this.isRegistered(name)) {
             return this._entries[name];
         }
@@ -45,7 +47,7 @@ export class DesignTokenRegistry {
     /**
      * Gets all entries in this registry.
      */
-    public get entries(): AdaptiveDesignToken[] {
+    public get entries(): T[] {
         return Object.values(this._entries);
     }
 
@@ -61,7 +63,7 @@ export class DesignTokenRegistry {
      * Returns all entries that apply to a given style property type
      * @param target the style property type to return entries of
      */
-    public find(target: StyleProperty): AdaptiveDesignToken[] {
+    public find(target: StyleProperty): T[] {
         return Object.values(this._entries).filter(value => value.intendedFor?.includes(target));
     }
 }

packages/adaptive-ui-designer-core/src/registry/recipes.ts

@@ -1,4 +1,4 @@
-import { densityAdjustmentUnits } from "@adaptive-web/adaptive-ui"
+import { densityAdjustmentUnits, DesignTokenMetadata } from "@adaptive-web/adaptive-ui"
 import {
     accentBaseColor,
     accentFillDiscernible,
@@ -148,12 +148,16 @@ import {
     warningStrokeSubtle,
     wcagContrastLevel,
 } from "@adaptive-web/adaptive-ui/reference";
-import { AdaptiveDesignToken, DesignTokenRegistry } from "./design-token-registry.js";
+import { AdaptiveDesignToken, AdaptiveDesignTokenOrGroup, DesignTokenRegistry } from "./design-token-registry.js";
 
 /**
  * A collection of DesignTokens for adding to a {@link DesignTokenRegistry}.
  */
-type DesignTokenStore = Array<AdaptiveDesignToken>;
+type Store<T extends { name: string } & DesignTokenMetadata> = Array<T>;
+
+type DesignTokenStore = Store<AdaptiveDesignToken>;
+
+type DesignTokenOrGroupStore = Store<AdaptiveDesignTokenOrGroup>;
 
 const designTokens: DesignTokenStore = [
     accentBaseColor,
@@ -203,7 +207,7 @@ const designTokens: DesignTokenStore = [
     strokeStrongRestDelta,
 ];
 
-const colorTokens: DesignTokenStore = [
+const colorTokens: DesignTokenOrGroupStore = [
     // Layer
     layerFillFixedMinus4,
     layerFillFixedMinus3,
@@ -214,89 +218,89 @@ const colorTokens: DesignTokenStore = [
     layerFillFixedPlus2,
     layerFillFixedPlus3,
     layerFillFixedPlus4,
-    layerFillInteractive.rest,
+    layerFillInteractive,
     // Fill
     accentBaseColor,
-    accentFillStealth.rest,
-    accentFillSubtle.rest,
-    accentFillIdeal.rest,
-    accentFillDiscernible.rest,
-    accentFillReadable.rest,
+    accentFillStealth,
+    accentFillSubtle,
+    accentFillIdeal,
+    accentFillDiscernible,
+    accentFillReadable,
     highlightBaseColor,
-    highlightFillStealth.rest,
-    highlightFillSubtle.rest,
-    highlightFillIdeal.rest,
-    highlightFillDiscernible.rest,
-    highlightFillReadable.rest,
+    highlightFillStealth,
+    highlightFillSubtle,
+    highlightFillIdeal,
+    highlightFillDiscernible,
+    highlightFillReadable,
     criticalBaseColor,
-    criticalFillStealth.rest,
-    criticalFillSubtle.rest,
-    criticalFillIdeal.rest,
-    criticalFillDiscernible.rest,
-    criticalFillReadable.rest,
+    criticalFillStealth,
+    criticalFillSubtle,
+    criticalFillIdeal,
+    criticalFillDiscernible,
+    criticalFillReadable,
     warningBaseColor,
-    warningFillStealth.rest,
-    warningFillSubtle.rest,
-    warningFillIdeal.rest,
-    warningFillDiscernible.rest,
-    warningFillReadable.rest,
+    warningFillStealth,
+    warningFillSubtle,
+    warningFillIdeal,
+    warningFillDiscernible,
+    warningFillReadable,
     successBaseColor,
-    successFillStealth.rest,
-    successFillSubtle.rest,
-    successFillIdeal.rest,
-    successFillDiscernible.rest,
-    successFillReadable.rest,
+    successFillStealth,
+    successFillSubtle,
+    successFillIdeal,
+    successFillDiscernible,
+    successFillReadable,
     infoBaseColor,
-    infoFillStealth.rest,
-    infoFillSubtle.rest,
-    infoFillIdeal.rest,
-    infoFillDiscernible.rest,
-    infoFillReadable.rest,
+    infoFillStealth,
+    infoFillSubtle,
+    infoFillIdeal,
+    infoFillDiscernible,
+    infoFillReadable,
     neutralBaseColor,
-    neutralFillStealth.rest,
-    neutralFillSubtle.rest,
-    neutralFillIdeal.rest,
-    neutralFillDiscernible.rest,
-    neutralFillReadable.rest,
+    neutralFillStealth,
+    neutralFillSubtle,
+    neutralFillIdeal,
+    neutralFillDiscernible,
+    neutralFillReadable,
     // Stroke
     focusStroke,
     focusStrokeOuter,
     focusStrokeInner,
-    accentStrokeSafety.rest,
-    accentStrokeSubtle.rest,
-    accentStrokeDiscernible.rest,
-    accentStrokeReadable.rest,
-    accentStrokeStrong.rest,
-    highlightStrokeSafety.rest,
-    highlightStrokeSubtle.rest,
-    highlightStrokeDiscernible.rest,
-    highlightStrokeReadable.rest,
-    highlightStrokeStrong.rest,
-    criticalStrokeSafety.rest,
-    criticalStrokeSubtle.rest,
-    criticalStrokeDiscernible.rest,
-    criticalStrokeReadable.rest,
-    criticalStrokeStrong.rest,
-    warningStrokeSafety.rest,
-    warningStrokeSubtle.rest,
-    warningStrokeDiscernible.rest,
-    warningStrokeReadable.rest,
-    warningStrokeStrong.rest,
-    successStrokeSafety.rest,
-    successStrokeSubtle.rest,
-    successStrokeDiscernible.rest,
-    successStrokeReadable.rest,
-    successStrokeStrong.rest,
-    infoStrokeSafety.rest,
-    infoStrokeSubtle.rest,
-    infoStrokeDiscernible.rest,
-    infoStrokeReadable.rest,
-    infoStrokeStrong.rest,
-    neutralStrokeSafety.rest,
-    neutralStrokeSubtle.rest,
-    neutralStrokeDiscernible.rest,
-    neutralStrokeReadable.rest,
-    neutralStrokeStrong.rest,
+    accentStrokeSafety,
+    accentStrokeSubtle,
+    accentStrokeDiscernible,
+    accentStrokeReadable,
+    accentStrokeStrong,
+    highlightStrokeSafety,
+    highlightStrokeSubtle,
+    highlightStrokeDiscernible,
+    highlightStrokeReadable,
+    highlightStrokeStrong,
+    criticalStrokeSafety,
+    criticalStrokeSubtle,
+    criticalStrokeDiscernible,
+    criticalStrokeReadable,
+    criticalStrokeStrong,
+    warningStrokeSafety,
+    warningStrokeSubtle,
+    warningStrokeDiscernible,
+    warningStrokeReadable,
+    warningStrokeStrong,
+    successStrokeSafety,
+    successStrokeSubtle,
+    successStrokeDiscernible,
+    successStrokeReadable,
+    successStrokeStrong,
+    infoStrokeSafety,
+    infoStrokeSubtle,
+    infoStrokeDiscernible,
+    infoStrokeReadable,
+    infoStrokeStrong,
+    neutralStrokeSafety,
+    neutralStrokeSubtle,
+    neutralStrokeDiscernible,
+    neutralStrokeReadable,
+    neutralStrokeStrong,
 ];
 
 const strokeWidthTokens: DesignTokenStore = [
@@ -369,9 +373,9 @@ const effectsTokens: DesignTokenStore = [
     elevationDialog,
 ];
 
-function registerStore(
-    store: DesignTokenStore,
-    registry: DesignTokenRegistry
+function registerStore<T extends { name: string } & DesignTokenMetadata>(
+    store: Store<T>,
+    registry: DesignTokenRegistry<T>
 ): void {
     store.forEach((token) => {
         // console.log("registerStore", token);
@@ -384,7 +388,7 @@ function registerStore(
 // interface for mapping tokens to other recipes or fixed values as well.
 // For now we've grouped the color tokens since by default those are all recipes/derived.
 
-export const registerTokens = (registry: DesignTokenRegistry) => {
+export const registerTokens = (registry: DesignTokenRegistry<AdaptiveDesignToken>) => {
     registerStore(designTokens, registry);
     // This could be optimized, but some tokens are intended to be modified as well as applied as style properties.
     registerStore(strokeWidthTokens, registry);
@@ -393,7 +397,7 @@ export const registerTokens = (registry: DesignTokenRegistry) => {
     registerStore(effectsTokens, registry);
 };
 
-export const registerAppliableTokens = (registry: DesignTokenRegistry) => {
+export const registerAppliableTokens = (registry: DesignTokenRegistry<AdaptiveDesignTokenOrGroup>) => {
     registerStore(colorTokens, registry);
     registerStore(strokeWidthTokens, registry);
     registerStore(densityTokens, registry);