diff --git a/packages/adaptive-ui-designer-figma-plugin/src/figma/node.ts b/packages/adaptive-ui-designer-figma-plugin/src/figma/node.ts index 3c032b05..8fc368af 100644 --- 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 index f121ea95..5493440b 100644 --- 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)} > `