AUI: Update CLI from tokens to align with existing properties (#216)

Author: bheston

change/@adaptive-web-adaptive-ui-9a1613c3-c2e2-44c5-9a42-4cb2b5216378.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "AUI: Update CLI from `tokens` to align with existing `properties`",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@adaptive-web-adaptive-ui-designer-figma-44d25ed7-78a9-46a7-8518-788cb1ac9ca3.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "AUI: Update CLI from `tokens` to align with existing `properties`",
+  "packageName": "@adaptive-web/adaptive-ui-designer-figma",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/adaptive-ui-designer-figma-plugin/src/core/code-gen.ts

@@ -85,10 +85,10 @@ export class CodeGen {
                 const varName = StyleNameMapping[style as keyof typeof StyleNameMapping];
                 accumulated.push(varName);
             });
-            current.tokens.forEach(token => {
-                const varName = this.tokenIDMap(token.tokenID);
+            for (const token of current.properties.entries()) {
+                const varName = CodeGen.tokenIDMap(token[1]);
                 accumulated.push(varName);
-            });
+            }
             return accumulated;
         }, new Array<string>());
         const importBase = `import { StyleRules } from "@adaptive-web/adaptive-ui";\n`;
@@ -117,16 +117,16 @@ export class CodeGen {
         }
 
         let propertiesOut = "";
-        if (styleRule.tokens.size > 0) {
+        if (styleRule.properties.size > 0) {
             // TODO Need to map tokens better
-            const tokens = new Array(...styleRule.tokens).map(token => `${token.target}: ${this.tokenIDMap(token.tokenID)}`);
+            const tokens = new Array(...styleRule.properties).map(token => `${token[0]}: ${CodeGen.tokenIDMap(token[1])}`);
             propertiesOut = `        properties: {\n            ${tokens.join(",\n            ")},\n        },\n`;
         }
 
         return `    {\n${targetOut}${stylesOut}${propertiesOut}    },`;
     }
 
-    private tokenIDMap(tokenID: string): string {
+    private static tokenIDMap(tokenID: string): string {
         let adjustedID = tokenID;
 
         // TODO: Clean up naming and grouping

packages/adaptive-ui-designer-figma/src/lib/anatomy.ts

@@ -8,7 +8,6 @@ import {
     SerializableBooleanCondition,
     SerializableStringCondition,
     SerializableStyleRule,
-    SerializableToken,
 } from "@adaptive-web/adaptive-ui";
 import { AdditionalDataKeys, type PluginUINodeData } from "@adaptive-web/adaptive-ui-designer-core";
 
@@ -55,32 +54,23 @@ export class StringCondition extends Condition {
     }
 }
 
-export class Token {
-    constructor(
-        public target: string,
-        public tokenID: string,
-    ) { }
-
-    toJSON(): SerializableToken {
-        return {
-            target: this.target,
-            tokenID: this.tokenID,
-        };
-    }
-}
-
 export class StyleRule {
     contextCondition?: Record<string, string | boolean>;
     part?: string;
     styles: Set<string> = new Set();
-    tokens: Set<Token> = new Set();
+    properties: Map<string, string> = new Map();
 
     toJSON(): SerializableStyleRule {
+        const properties = this.properties.size === 0 ? undefined : Array.from(this.properties.entries()).reduce((prev, next) => {
+            prev[next[0]] = next[1];
+            return prev;
+        }, {} as Record<string, string>);
+
         return {
             contextCondition: this.contextCondition,
             part: this.part,
             styles: this.styles.size === 0 ? undefined : Array.from(this.styles),
-            tokens: this.tokens.size === 0 ? undefined : Array.from(this.tokens).map(token => token.toJSON()),
+            properties,
         };
     }
 }
@@ -96,14 +86,14 @@ export class Anatomy {
 
     toJSON(): SerializableAnatomy {
         const conditions = Array.from(this.conditions.entries()).reduce((prev, next) => {
-            prev[next[0]] = next[1].toJSON()
-            return prev
-        }, {} as SerializableAnatomy["conditions"])
+            prev[next[0]] = next[1].toJSON();
+            return prev;
+        }, {} as SerializableAnatomy["conditions"]);
 
         const parts = Array.from(this.parts.entries()).reduce((prev, current) => {
             prev[current[0]] = makeClassName(current[1]);
             return prev;
-        }, {} as SerializableAnatomy["parts"])
+        }, {} as SerializableAnatomy["parts"]);
 
         return {
             name: this.name,
@@ -278,7 +268,7 @@ function walkNode(node: PluginUINodeData, componentName: string, condition: Reco
 
             node.appliedDesignTokens.forEach((token, target) => {
                 const tokenRef = token.tokenID;
-                styleRule.tokens.add(new Token(target, tokenRef));
+                styleRule.properties.set(target, tokenRef);
             });
 
             if (isNotContextNode(nodeName, componentName)) {

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

@@ -510,17 +510,9 @@ export interface SerializableStyleRule {
     // (undocumented)
     part?: string;
     // (undocumented)
-    styles?: string[];
+    properties?: Record<string, string>;
     // (undocumented)
-    tokens?: SerializableToken[];
-}
-
-// @beta (undocumented)
-export interface SerializableToken {
-    // (undocumented)
-    target: string;
-    // (undocumented)
-    tokenID: string;
+    styles?: string[];
 }
 
 // @public

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

@@ -5,6 +5,7 @@ import fsp from "fs/promises";
 import { matcher } from "matcher"
 import * as prettier from "prettier";
 import { ComposableStyles, ElementStyles } from '@microsoft/fast-element';
+import { CSSDesignToken } from "@microsoft/fast-foundation";
 import { Command } from 'commander';
 import { glob } from "glob";
 import postcss, { type Processor} from "postcss";
@@ -28,7 +29,6 @@ import {
     StyleProperties,
     StyleRule,
     Styles,
-    TypedCSSDesignToken
 } from "../core/index.js";
 import { disabledStyles, focusIndicatorStyles, focusResetStyles } from "../reference/index.js";
 
@@ -253,10 +253,15 @@ function jsonToAUIStyleSheet(obj: SerializableAnatomy): AUIStyleSheet {
                 return Styles.Shared.get(name)!;
             });
 
-            const properties = style.tokens?.reduce((prev, current) => {
-                prev[current.target] = DesignTokenRegistry.Shared.get(current.tokenID) as TypedCSSDesignToken<any>
-                return prev;
-            }, {} as StyleProperties);
+            const properties: StyleProperties = {};
+            if (style.properties) {
+                Object.entries(style.properties).map(entry => {
+                    const target = entry[0];
+                    const value = entry[1];
+                    const token = DesignTokenRegistry.Shared.get(value);
+                    properties[target] = token ? token as CSSDesignToken<any> : value;
+                });
+            }
 
             const target: StyleModuleTarget = {
                 context: obj.context,

packages/adaptive-ui/src/core/modules/types.ts

@@ -442,22 +442,14 @@ export type SerializableStringCondition = Record<string, string>;
  */
 export type SerializableCondition = SerializableBooleanCondition | SerializableStringCondition;
 
-/**
- * @beta
- */
-export interface SerializableToken {
-    target: string,
-    tokenID: string
-}
-
 /**
  * @beta
  */
 export interface SerializableStyleRule {
     contextCondition?: Record<string, string | boolean>;
     part?: string,
     styles?: string[],
-    tokens?: SerializableToken[];
+    properties?: Record<string, string>,
 }
 
 /**