From 51defb07a934cf4fb166d34570d1f344227d9d72 Mon Sep 17 00:00:00 2001 From: Brian Heston <47367562+bheston@users.noreply.github.com> Date: Thu, 14 Nov 2024 10:35:21 -0800 Subject: [PATCH] Designer: Finished migration away from Token Definition wrapper (#239) --- ...-55045cdb-f0f6-450d-8561-587c3468fd74.json | 7 ++ .../adaptive-ui-designer-core/src/index.ts | 4 +- .../src/registry/custom-recipes.ts | 89 ------------------- .../src/registry/design-token-registry.ts | 84 +++++------------ .../src/registry/recipes.ts | 74 ++++----------- .../src/ui/app.ts | 15 ++-- .../src/ui/tsconfig.json | 2 +- .../src/ui/ui-controller-elements.ts | 16 ++-- .../src/ui/ui-controller-styles.ts | 34 ++++--- .../src/ui/ui-controller-tokens.ts | 14 +-- .../src/ui/ui-controller.ts | 2 +- 11 files changed, 97 insertions(+), 244 deletions(-) create mode 100644 change/@adaptive-web-adaptive-ui-designer-core-55045cdb-f0f6-450d-8561-587c3468fd74.json delete mode 100644 packages/adaptive-ui-designer-core/src/registry/custom-recipes.ts diff --git a/change/@adaptive-web-adaptive-ui-designer-core-55045cdb-f0f6-450d-8561-587c3468fd74.json b/change/@adaptive-web-adaptive-ui-designer-core-55045cdb-f0f6-450d-8561-587c3468fd74.json new file mode 100644 index 00000000..c7f5eb7f --- /dev/null +++ b/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" +} diff --git a/packages/adaptive-ui-designer-core/src/index.ts b/packages/adaptive-ui-designer-core/src/index.ts index 08073e84..e38b7129 100644 --- a/packages/adaptive-ui-designer-core/src/index.ts +++ b/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"; diff --git a/packages/adaptive-ui-designer-core/src/registry/custom-recipes.ts b/packages/adaptive-ui-designer-core/src/registry/custom-recipes.ts deleted file mode 100644 index a4e83add..00000000 --- a/packages/adaptive-ui-designer-core/src/registry/custom-recipes.ts +++ /dev/null @@ -1,89 +0,0 @@ -import { - ColorRecipeParams, - contrastSwatch, - createNonCss, - createTokenColorRecipe, - createTokenColorRecipeValue, - createTokenSwatch, - InteractiveSwatchSet, - Palette, - PaletteRGB, - StyleProperty, - StylePropertyShorthand, - Swatch, -} from "@adaptive-web/adaptive-ui"; -import { - blackOrWhiteDiscernibleRecipe, - blackOrWhiteReadableRecipe, - fillColor -} from "@adaptive-web/adaptive-ui/reference"; -import { DesignTokenResolver } from "@microsoft/fast-foundation"; - -/********************************************************************************************************** - * Note that these tokens are not renamed due to complications in the temporary name resolution mechanism * - **********************************************************************************************************/ - -// Local recipes for use in documentation files. - -export const docBaseColor = createTokenSwatch("doc-base-color").withDefault(Swatch.parse("#E1477E")!); - -export const docPalette = createNonCss("doc-palette").withDefault( - (resolve: DesignTokenResolver) => - PaletteRGB.from(resolve(docBaseColor)) -); - -export const docForegroundRecipe = createTokenColorRecipe( - "doc-foreground", - [...StylePropertyShorthand.borderFill, StyleProperty.foregroundFill], - (resolve: DesignTokenResolver, params?: ColorRecipeParams) => - contrastSwatch( - resolve(docPalette), - params?.reference || resolve(fillColor), - 4.5, - ), -); - -export const docForeground = createTokenColorRecipeValue(docForegroundRecipe); - -export const docFillRecipe = createTokenColorRecipe( - "doc-fill-recipe", - StyleProperty.backgroundFill, - (resolve: DesignTokenResolver, params?: ColorRecipeParams) => - contrastSwatch( - resolve(docPalette), - params?.reference || resolve(fillColor), - 5, - ), -); - -export const docFill = createTokenColorRecipeValue(docFillRecipe); - -// Placeholder tokens for `blackOrWhite` recipes, which have special handling in style modules. - -export const blackOrWhiteDiscernibleRest = createTokenSwatch("black-or-white-discernible-rest", StyleProperty.foregroundFill).withDefault( - (resolve: DesignTokenResolver) => { - const fill = resolve(fillColor); - const set: InteractiveSwatchSet = { - rest: fill, - hover: fill, - active: fill, - focus: fill, - disabled: fill, - } - return resolve(blackOrWhiteDiscernibleRecipe).evaluate(resolve, set).rest! - } -); - -export const blackOrWhiteReadableRest = createTokenSwatch("black-or-white-readable-rest", StyleProperty.foregroundFill).withDefault( - (resolve: DesignTokenResolver) => { - const fill = resolve(fillColor); - const set: InteractiveSwatchSet = { - rest: fill, - hover: fill, - active: fill, - focus: fill, - disabled: fill, - } - return resolve(blackOrWhiteReadableRecipe).evaluate(resolve, set).rest! - } -); diff --git a/packages/adaptive-ui-designer-core/src/registry/design-token-registry.ts b/packages/adaptive-ui-designer-core/src/registry/design-token-registry.ts index 6d267f89..0da0897e 100644 --- a/packages/adaptive-ui-designer-core/src/registry/design-token-registry.ts +++ b/packages/adaptive-ui-designer-core/src/registry/design-token-registry.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; - -/** - * 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; -} +export type AdaptiveDesignToken = (DesignToken | CSSDesignToken) & 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)); } -} \ No newline at end of file +} diff --git a/packages/adaptive-ui-designer-core/src/registry/recipes.ts b/packages/adaptive-ui-designer-core/src/registry/recipes.ts index 1e003080..5d2c733c 100644 --- a/packages/adaptive-ui-designer-core/src/registry/recipes.ts +++ b/packages/adaptive-ui-designer-core/src/registry/recipes.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 = Array & DesignTokenMetadata>; +type DesignTokenStore = Array; 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 = [ +const colorTokens: DesignTokenStore = [ // Layer layerFillFixedMinus4, layerFillFixedMinus3, @@ -297,11 +287,6 @@ const colorTokens: DesignTokenStore = [ neutralStrokeDiscernible.rest, neutralStrokeReadable.rest, neutralStrokeStrong.rest, - // Custom - blackOrWhiteDiscernibleRest, - blackOrWhiteReadableRest, - docForeground, - docFill, ]; const strokeWidthTokens: DesignTokenStore = [ @@ -309,7 +294,7 @@ const strokeWidthTokens: DesignTokenStore = [ focusStrokeThickness, ]; -const densityTokens: DesignTokenStore = [ +const densityTokens: DesignTokenStore = [ densityControl.horizontalPadding, densityControl.verticalPadding, densityControl.horizontalGap, @@ -324,7 +309,7 @@ const densityTokens: DesignTokenStore = [ densityLayer.verticalGap, ]; -const cornerRadiusTokens: DesignTokenStore = [ +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( - store: DesignTokenStore, - 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).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( // 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); }; diff --git a/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts b/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts index 764547ee..90d21f9b 100644 --- a/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts +++ b/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts @@ -10,14 +10,14 @@ import { neutralStrokeReadableRest, neutralStrokeStrongRest } from "@adaptive-web/adaptive-ui/reference"; -import type { PluginUINodeData } from "@adaptive-web/adaptive-ui-designer-core"; +import type { AdaptiveDesignToken, PluginUINodeData } from "@adaptive-web/adaptive-ui-designer-core"; import { StatesState } from "@adaptive-web/adaptive-ui-designer-core"; -import { DesignTokenDefinition } from "@adaptive-web/adaptive-ui-designer-core"; import type { PluginMessage} from "../core/messages.js"; import SubtractIcon from "./assets/subtract.svg"; import { UIController } from "./ui-controller.js"; import { AppliedDesignTokenItem, StyleModuleDisplay, StyleModuleDisplayList } from "./ui-controller-styles.js"; import { AddEventDetail, DesignTokenAdd, DesignTokensForm, DetachEventDetail, Drawer, StyleTokenItem, TokenChangeEventDetail, TokenGlyph, TokenGlyphType } from "./components/index.js"; +import { designTokenTitle } from "./util.js"; StyleTokenItem; TokenGlyph; @@ -108,7 +108,10 @@ const appliedTokensTemplate = ( (_) => tokens!, html` c.parent.controller.styles.getAppliableDesignTokenDefinition(x.tokenID)?.title} + title=${(x, c) => { + const token = c.parent.controller.styles.getAppliableDesignToken(x.tokenID); + return token ? designTokenTitle(token) : x.tokenID; + }} value=${(x) => x.value} glyphType=${(_) => glyphType} > @@ -144,10 +147,10 @@ const availableTokensTemplate = (
${repeat( (x) => x.controller.styles.getAppliableDesignTokenOptions(tokenTypes), - html` + html` x.title} - value=${(x, c) => c.parent.controller.designTokens.getDefaultDesignTokenValueAsString(x.token)} + title=${(x) => designTokenTitle(x)} + value=${(x, c) => c.parent.controller.designTokens.getDefaultDesignTokenValueAsString(x)} glyphType=${(_) => glyphType} content-button @click=${(x, c) => c.parent.controller.styles.applyDesignToken(x.intendedFor || [], x)} diff --git a/packages/adaptive-ui-designer-figma-plugin/src/ui/tsconfig.json b/packages/adaptive-ui-designer-figma-plugin/src/ui/tsconfig.json index 5041c6e3..f0904429 100644 --- a/packages/adaptive-ui-designer-figma-plugin/src/ui/tsconfig.json +++ b/packages/adaptive-ui-designer-figma-plugin/src/ui/tsconfig.json @@ -5,7 +5,7 @@ "resolveJsonModule": true, "moduleResolution": "Node16", "target": "ES2020", - "module": "ES2020", + "module": "Node16", "useDefineForClassFields": false, "lib": ["DOM", "DOM.Iterable", "ESNext"], "skipLibCheck": true diff --git a/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-elements.ts b/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-elements.ts index dcc3f418..5cf8f95d 100644 --- a/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-elements.ts +++ b/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-elements.ts @@ -128,12 +128,12 @@ export class ElementsController { element: FASTElement ): (value: DesignTokenValue, key: string) => void { return (value: DesignTokenValue, key: string): void => { - const def = this.controller.designTokenRegistry.get(key); - // console.log(" setting token", key, def, value.value); - if (def) { + const token = this.controller.designTokenRegistry.get(key); + // console.log(" setting token", key, token, value.value); + if (token) { this.setDesignTokenForElement( element, - def.token, + token, value.value ); } @@ -170,10 +170,10 @@ export class ElementsController { // Handle any additional data. Any keys that are for a design token will be set. // console.log(" setting additional data"); node.additionalData.forEach((value, key) => { - const def = this.controller.designTokenRegistry.get(key); - if (def) { - // console.log(" setting token value on element", def, "value", value); - this.setDesignTokenForElement(nodeElement, def.token, value); + const token = this.controller.designTokenRegistry.get(key); + if (token) { + // console.log(" setting token value on element", token, "value", value); + this.setDesignTokenForElement(nodeElement, token, value); } }, this); diff --git a/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-styles.ts b/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-styles.ts index 8117d418..a953f362 100644 --- a/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-styles.ts +++ b/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-styles.ts @@ -1,6 +1,9 @@ +import { sentenceCase } from "change-case"; +import { DesignToken } from "@microsoft/fast-foundation"; import { StyleProperty, Styles } from "@adaptive-web/adaptive-ui"; -import { AppliedDesignToken, DesignTokenDefinition, nameToTitle, STYLE_REMOVE } from "@adaptive-web/adaptive-ui-designer-core"; +import { AdaptiveDesignToken, AppliedDesignToken, STYLE_REMOVE } from "@adaptive-web/adaptive-ui-designer-core"; import { UIController } from "./ui-controller.js"; +import { designTokenTitle } from "./util.js"; /** * A display definition for a single style module. @@ -25,6 +28,11 @@ export interface AppliedDesignTokenItem { value: string; } +function nameToTitle(name: string): string { + const base = name.replace(/-/g, ' ').replace(/density_/, ''); + return sentenceCase(base); +} + /** * A sub-controller responsible for managing applied styles. * @@ -174,8 +182,8 @@ export class StylesController { * @param targets - Style property types * @returns List of available appliable design tokens */ - public getAppliableDesignTokenOptions(targets: StyleProperty[]): DesignTokenDefinition[] { - const tokens: DesignTokenDefinition[] = []; + public getAppliableDesignTokenOptions(targets: StyleProperty[]): AdaptiveDesignToken[] { + const tokens: AdaptiveDesignToken[] = []; // Collect the individual tokens available for the requested targets // TODO: Handle multiple values better @@ -187,9 +195,9 @@ export class StylesController { }); // Group by token name - return tokens.reduce((accumulated: DesignTokenDefinition[], current: DesignTokenDefinition): DesignTokenDefinition[] => { - const found = accumulated.find((item) => { - return item.token.name === current.token.name + return tokens.reduce((accumulated: AdaptiveDesignToken[], current: AdaptiveDesignToken): AdaptiveDesignToken[] => { + const found = accumulated.find((token) => { + return token.name === current.name }); if (!found) { @@ -197,16 +205,16 @@ export class StylesController { } return accumulated; - }, []).sort((a, b): number => a.title.localeCompare(b.title)); + }, []).sort((a, b): number => designTokenTitle(a).localeCompare(designTokenTitle(b))); } /** - * Gets the full design token definition for a token by ID. + * Gets the design token by ID. * * @param id - The design token ID - * @returns The full design token definition + * @returns The design token */ - public getAppliableDesignTokenDefinition(id: string): DesignTokenDefinition | null { + public getAppliableDesignToken(id: string): DesignToken | null { return this.controller.appliableDesignTokenRegistry.get(id); } @@ -227,15 +235,15 @@ export class StylesController { * Applies a design token to the selected nodes. * * @param targets - The target style property types - * @param token - The design token definition + * @param token - The design token */ - public applyDesignToken(targets: StyleProperty[], token: DesignTokenDefinition): void { + public applyDesignToken(targets: StyleProperty[], token: DesignToken): void { this.controller.selectedNodes.forEach(node => { // console.log("--------------------------------"); // console.log("StylesController.applyDesignToken - targets", targets, token); targets.forEach(target => - node.appliedDesignTokens.set(target, new AppliedDesignToken(token.id, null)) + node.appliedDesignTokens.set(target, new AppliedDesignToken(token.name, null)) ); // console.log(" added applied design token to node", node); diff --git a/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-tokens.ts b/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-tokens.ts index b04ce4b5..2255dbe3 100644 --- a/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-tokens.ts +++ b/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-tokens.ts @@ -66,9 +66,9 @@ export class DesignTokenController { this.designTokenValues = this.getDesignTokenValues(); // Get all design tokens that can be added, which is the full list except any already applied. - this.availableDesignTokens = this.controller.designTokenRegistry.entries.filter((definition) => - this.designTokenValues?.find((appliedToken) => appliedToken.token.name === definition.id) === undefined - ).map(def => def.token); + this.availableDesignTokens = this.controller.designTokenRegistry.entries.filter((token) => + this.designTokenValues?.find((appliedToken) => appliedToken.token.name === token.name) === undefined + ); } /** @@ -92,11 +92,11 @@ export class DesignTokenController { const allDesignTokens = this.controller.designTokenRegistry.entries; - allDesignTokens.forEach(def => { - if (tokenValues.has(def.id)) { - const set = tokenValues.get(def.id); + allDesignTokens.forEach(token => { + if (tokenValues.has(token.name)) { + const set = tokenValues.get(token.name); designTokens.push({ - token: def.token, + token: token, value: set.size === 1 ? set.values().next().value : undefined, multipleValues: set.size > 1 ? [...set].join(", ") : undefined, }); diff --git a/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller.ts b/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller.ts index f9e92ee8..ec02bd94 100644 --- a/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller.ts +++ b/packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller.ts @@ -222,7 +222,7 @@ export class UIController { const token = registry.get(applied.tokenID); if (token) { allApplied.set(target, { - value: token.token as CSSDesignToken, + value: token as CSSDesignToken, source, }); } else {