Fix a couple of bugs in the Designer plugin (#266)

bheston · web-flow · commit d8d419e28424 · 2025-10-11T12:37:43.000-07:00
diff --git a/packages/adaptive-ui-designer-figma-plugin/src/figma/node.ts b/packages/adaptive-ui-designer-figma-plugin/src/figma/node.ts
@@ -868,6 +868,8 @@ export class FigmaPluginNode extends PluginNode {
                     const gradient = value as Gradient;
                     paint = gradientToGradientPaint(gradient);
                 }
+            } else if (value && typeof value === "string" && value === "transparent") {
+                paint = SOLID_TRANSPARENT;
             } else {
                 throw `unexpected value at paintColor: ${typeof value}, ${value}, ${target}`;
             }
diff --git a/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts b/packages/adaptive-ui-designer-figma-plugin/src/ui/app.ts
@@ -85,6 +85,10 @@ function tokenOrGroupStyles(tokenOrGroup: AdaptiveDesignTokenOrGroup, tokenTypes
         null;
 }
 
+function appliedStyleProperties(tokenTypes: StyleProperty[], tokenIntendedFor: StyleProperty[]): StyleProperty[] {
+    return tokenTypes.filter(element => tokenIntendedFor.includes(element));
+}
+
 const appliedTokensTemplate = (
     tokenTypes: StyleProperty[],
     tokens: AppliedDesignTokenItem[] | null,
@@ -150,7 +154,7 @@ const availableTokensTemplate = (
                             :styles=${x => tokenOrGroupStyles(x, tokenTypes)}
                             glyphType=${(_) => glyphType}
                             content-button
-                            @itemClick=${(x, c) => c.parent.controller.styles.applyDesignToken(x.intendedFor || [], x)}
+                            @itemClick=${(x, c) => c.parent.controller.styles.applyDesignToken(appliedStyleProperties(tokenTypes, x.intendedFor), x)}
                         >
                         </designer-style-token-item>
                     `

Original file line number	Diff line number	Diff line change
`@@ -868,6 +868,8 @@ export class FigmaPluginNode extends PluginNode {`
`868`	`868`	`const gradient = value as Gradient;`
`869`	`869`	`paint = gradientToGradientPaint(gradient);`
`870`	`870`	`}`
	`871`	`+ } else if (value && typeof value === "string" && value === "transparent") {`
	`872`	`+ paint = SOLID_TRANSPARENT;`
`871`	`873`	`} else {`
`872`	`874`	throw `unexpected value at paintColor: ${typeof value}, ${value}, ${target}`;
`873`	`875`	`}`
Original file line number	Diff line number	Diff line change
`@@ -85,6 +85,10 @@ function tokenOrGroupStyles(tokenOrGroup: AdaptiveDesignTokenOrGroup, tokenTypes`
`85`	`85`	`null;`
`86`	`86`	`}`
`87`	`87`
	`88`	`+function appliedStyleProperties(tokenTypes: StyleProperty[], tokenIntendedFor: StyleProperty[]): StyleProperty[] {`
	`89`	`+ return tokenTypes.filter(element => tokenIntendedFor.includes(element));`
	`90`	`+}`
	`91`	`+`
`88`	`92`	`const appliedTokensTemplate = (`
`89`	`93`	`tokenTypes: StyleProperty[],`
`90`	`94`	`tokens: AppliedDesignTokenItem[] \| null,`
`@@ -150,7 +154,7 @@ const availableTokensTemplate = (`
`150`	`154`	`:styles=${x => tokenOrGroupStyles(x, tokenTypes)}`
`151`	`155`	`glyphType=${(_) => glyphType}`
`152`	`156`	`content-button`
`153`		`- @itemClick=${(x, c) => c.parent.controller.styles.applyDesignToken(x.intendedFor \|\| [], x)}`
	`157`	`+ @itemClick=${(x, c) => c.parent.controller.styles.applyDesignToken(appliedStyleProperties(tokenTypes, x.intendedFor), x)}`
`154`	`158`	`>`
`155`	`159`	`</designer-style-token-item>`
`156`	`160`	`