Designer: Finished migration away from Token Definition wrapper (#239)

Author: bheston

change/@adaptive-web-adaptive-ui-designer-core-55045cdb-f0f6-450d-8561-587c3468fd74.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Designer: Finished migration away from Token Definition wrapper",
+  "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 { DesignTokenDefinition, DesignTokenRegistry, FormControlId } from "./registry/design-token-registry.js";
-export { nameToTitle, registerAppliableTokens, registerTokens } from "./registry/recipes.js";
+export { AdaptiveDesignToken, DesignTokenRegistry } from "./registry/design-token-registry.js";
+export { registerAppliableTokens, registerTokens } from "./registry/recipes.js";

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

@@ -1,82 +1,42 @@
-import { DesignToken, ValuesOf } from "@microsoft/fast-foundation";
-import { StyleProperty } from "@adaptive-web/adaptive-ui";
+import { CSSDesignToken, DesignToken } from "@microsoft/fast-foundation";
+import { DesignTokenMetadata, StyleProperty } from "@adaptive-web/adaptive-ui";
 
-export const FormControlId = {
-    text: "text",
-    color: "color",
-} as const;
-
-export type FormControlId = ValuesOf<typeof FormControlId>;
-
-/**
- * Defines a generic design token.
- */
-export interface DesignTokenDefinition {
-    /**
-     * Display title for organizing design token sets.
-     */
-    groupTitle?: string;
-
-    /**
-     * Display title of the design token.
-     */
-    title: string;
-
-    /**
-     * Unique ID for the design token.
-     */
-    id: string;
-
-    /**
-     * Target style properties for the design token.
-     */
-    intendedFor?: StyleProperty[];
-
-    /**
-     * Type of form control to edit this value. Following convention from fast-tooling.
-     */
-    formControlId?: FormControlId;
-
-    /**
-     * Underlying {@link DesignToken} for the plugin definition.
-     */
-    token: DesignToken<any>;
-}
+export type AdaptiveDesignToken = (DesignToken<any> | CSSDesignToken<any>) & DesignTokenMetadata;
 
 export class DesignTokenRegistry {
-    private _entries: { [id: string]: DesignTokenDefinition } = {};
+    private _entries: { [id: string]: AdaptiveDesignToken } = {};
 
     /**
      * Registers a new design token definition.
      * @param designToken The design token definition to register.
      */
-    public register(designToken: DesignTokenDefinition): void {
-        const { id } = designToken;
+    public register(designToken: AdaptiveDesignToken): void {
+        const { name } = designToken;
 
-        if (this.isRegistered(id)) {
+        if (this.isRegistered(name)) {
             throw new Error(
-                `Design token ${id} has already been registered. You must unregister the design token before registering with that ID.`
+                `Design token ${name} has already been registered. You must unregister the design token before registering with that ID.`
             );
         } else {
-            this._entries[id] = designToken;
+            this._entries[name] = designToken;
         }
     }
 
     /**
      * Unregisters a design token definition.
-     * @param id The ID of the design token definition to unregister.
+     * @param name The ID of the design token definition to unregister.
      */
-    public unregister(id: string): void {
-        delete this._entries[id];
+    public unregister(name: string): void {
+        delete this._entries[name];
     }
 
     /**
      * Gets a design token definition by ID.
-     * @param id The ID of the design token definition.
+     * @param name The ID of the design token definition.
      */
-    public get(id: string): DesignTokenDefinition | null {
-        if (this.isRegistered(id)) {
-            return this._entries[id];
+    public get(name: string): AdaptiveDesignToken | null {
+        if (this.isRegistered(name)) {
+            return this._entries[name];
         }
 
         return null;
@@ -85,23 +45,23 @@ export class DesignTokenRegistry {
     /**
      * Gets all entries in this registry.
      */
-    public get entries(): DesignTokenDefinition[] {
+    public get entries(): AdaptiveDesignToken[] {
         return Object.values(this._entries);
     }
 
     /**
      * Determines if the design token definition has been registered.
-     * @param id The ID of the design token definition.
+     * @param name The ID of the design token definition.
      */
-    public isRegistered(id: string): boolean {
-        return this._entries.hasOwnProperty(id);
+    public isRegistered(name: string): boolean {
+        return this._entries.hasOwnProperty(name);
     }
 
     /**
      * 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): DesignTokenDefinition[] {
+    public find(target: StyleProperty): AdaptiveDesignToken[] {
         return Object.values(this._entries).filter(value => value.intendedFor?.includes(target));
     }
-}
+}

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

@@ -1,12 +1,4 @@
-import { sentenceCase } from "change-case";
-import type { DesignToken } from "@microsoft/fast-foundation";
-import {
-    Color,
-    densityAdjustmentUnits,
-    DesignTokenMetadata,
-    DesignTokenType,
-    TypedCSSDesignToken
-} from "@adaptive-web/adaptive-ui"
+import { densityAdjustmentUnits } from "@adaptive-web/adaptive-ui"
 import {
     accentBaseColor,
     accentFillDiscernible,
@@ -154,13 +146,12 @@ import {
     warningStrokeSubtle,
     wcagContrastLevel,
 } from "@adaptive-web/adaptive-ui/reference";
-import { DesignTokenDefinition, DesignTokenRegistry, FormControlId } from "./design-token-registry.js";
-import { blackOrWhiteDiscernibleRest, blackOrWhiteReadableRest, docBaseColor, docFill, docForeground } from "./custom-recipes.js";
+import { AdaptiveDesignToken, DesignTokenRegistry } from "./design-token-registry.js";
 
 /**
  * A collection of DesignTokens for adding to a {@link DesignTokenRegistry}.
  */
-type DesignTokenStore<T = any> = Array<DesignToken<T> & DesignTokenMetadata>;
+type DesignTokenStore = Array<AdaptiveDesignToken>;
 
 const designTokens: DesignTokenStore = [
     accentBaseColor,
@@ -175,7 +166,6 @@ const designTokens: DesignTokenStore = [
     layerFillHoverDelta,
     layerFillActiveDelta,
     layerFillFocusDelta,
-    docBaseColor,
     wcagContrastLevel,
     densityAdjustmentUnits,
     densityControl.horizontalPaddingUnits,
@@ -203,7 +193,7 @@ const designTokens: DesignTokenStore = [
     strokeStrongRestDelta,
 ];
 
-const colorTokens: DesignTokenStore<Color> = [
+const colorTokens: DesignTokenStore = [
     // Layer
     layerFillFixedMinus4,
     layerFillFixedMinus3,
@@ -297,19 +287,14 @@ const colorTokens: DesignTokenStore<Color> = [
     neutralStrokeDiscernible.rest,
     neutralStrokeReadable.rest,
     neutralStrokeStrong.rest,
-    // Custom
-    blackOrWhiteDiscernibleRest,
-    blackOrWhiteReadableRest,
-    docForeground,
-    docFill,
 ];
 
 const strokeWidthTokens: DesignTokenStore = [
     strokeThickness,
     focusStrokeThickness,
 ];
 
-const densityTokens: DesignTokenStore<string> = [
+const densityTokens: DesignTokenStore = [
     densityControl.horizontalPadding,
     densityControl.verticalPadding,
     densityControl.horizontalGap,
@@ -324,7 +309,7 @@ const densityTokens: DesignTokenStore<string> = [
     densityLayer.verticalGap,
 ];
 
-const cornerRadiusTokens: DesignTokenStore<string> = [
+const cornerRadiusTokens: DesignTokenStore = [
     cornerRadiusControl,
     cornerRadiusLayer,
 ];
@@ -366,34 +351,13 @@ const effectsTokens: DesignTokenStore = [
     elevationDialog,
 ];
 
-export function nameToTitle(name: string): string {
-    const base = name.replace(/-/g, ' ').replace(/density_/, '');
-    return sentenceCase(base);
-}
-
-function registerStore<T>(
-    store: DesignTokenStore<T>,
-    groupTitle: string | undefined, // Phasing this out. Currently only used on the "Design Tokens" tab.
+function registerStore(
+    store: DesignTokenStore,
     registry: DesignTokenRegistry
 ): void {
     store.forEach((token) => {
         // console.log("registerStore", token);
-
-        // Handle legacy non-hierarchical format for `custom-recipes.ts`.
-        const title = nameToTitle(token.name.indexOf(".") > -1 ? token.name.split(".").slice(1).join("-") : token.name);
-        const intendedFor = (token instanceof TypedCSSDesignToken ? (token as TypedCSSDesignToken<any>).intendedFor : undefined);
-        const formControlId = token.type === DesignTokenType.color ? FormControlId.color : FormControlId.text;
-
-        const definition: DesignTokenDefinition = {
-            id: token.name,
-            title,
-            groupTitle,
-            intendedFor,
-            formControlId,
-            token,
-        };
-
-        registry.register(definition);
+        registry.register(token);
     });
 }
 
@@ -403,18 +367,18 @@ function registerStore<T>(
 // For now we've grouped the color tokens since by default those are all recipes/derived.
 
 export const registerTokens = (registry: DesignTokenRegistry) => {
-    registerStore(designTokens, "Global tokens", registry);
+    registerStore(designTokens, registry);
     // This could be optimized, but some tokens are intended to be modified as well as applied as style properties.
-    registerStore(strokeWidthTokens, "Stroke width", registry);
-    registerStore(cornerRadiusTokens, "Corner radius", registry);
-    registerStore(textTokens, "Text", registry);
-    registerStore(effectsTokens, "Effects", registry);
+    registerStore(strokeWidthTokens, registry);
+    registerStore(cornerRadiusTokens, registry);
+    registerStore(textTokens, registry);
+    registerStore(effectsTokens, registry);
 };
 
 export const registerAppliableTokens = (registry: DesignTokenRegistry) => {
-    registerStore(colorTokens, undefined, registry);
-    registerStore(strokeWidthTokens, undefined, registry);
-    registerStore(densityTokens, undefined, registry);
-    registerStore(cornerRadiusTokens, undefined, registry);
-    registerStore(textTokens, undefined, registry);
+    registerStore(colorTokens, registry);
+    registerStore(strokeWidthTokens, registry);
+    registerStore(densityTokens, registry);
+    registerStore(cornerRadiusTokens, registry);
+    registerStore(textTokens, registry);
 };