Designer: Added support for applying individual density tokens (#176)

Author: bheston

change/@adaptive-web-adaptive-ui-cce85a67-4756-4a97-8313-d2c810defe53.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Updated density token settings",
+  "packageName": "@adaptive-web/adaptive-ui",
+  "email": "47367562+bheston@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -250,10 +250,16 @@ const strokeWidthTokens: DesignTokenStore = [
 ];
 
 const densityTokens: DesignTokenStore<string> = [
+    densityControl.horizontalPadding,
+    densityControl.verticalPadding,
     densityControl.horizontalGap,
     densityControl.verticalGap,
+    densityItemContainer.horizontalPadding,
+    densityItemContainer.verticalPadding,
     densityItemContainer.horizontalGap,
     densityItemContainer.verticalGap,
+    densityLayer.horizontalPadding,
+    densityLayer.verticalPadding,
     densityLayer.horizontalGap,
     densityLayer.verticalGap,
 ];

packages/adaptive-ui-figma-designer/src/figma/node.ts

@@ -24,6 +24,18 @@ const SOLID_BLACK: SolidPaint = {
     },
 };
 
+const SOLID_TRANSPARENT: SolidPaint = {
+    type: "SOLID",
+    visible: true,
+    opacity: 0,
+    blendMode: "NORMAL",
+    color: {
+        r: 1,
+        g: 1,
+        b: 1,
+    },
+};
+
 function isNodeType<T extends BaseNode>(type: NodeType): (node: BaseNode) => node is T {
     return (node: BaseNode): node is T => node.type === type;
 }
@@ -850,6 +862,9 @@ export class FigmaPluginNode extends PluginNode {
 
     private paintStrokeWidth(value: string): void {
         (this._node as MinimalStrokesMixin).strokeWeight = this.safeNumber(value);
+        if ((this._node as MinimalStrokesMixin).strokes.length === 0) {
+            (this._node as MinimalStrokesMixin).strokes = [SOLID_TRANSPARENT];
+        }
     }
 
     private paintCornerRadius(target: StyleProperty, value: string): void {

packages/adaptive-ui-figma-designer/src/ui/app.ts

@@ -4,7 +4,8 @@ import {
     StyleProperty,
     stylePropertyBorderFillAll,
     stylePropertyBorderThicknessAll,
-    stylePropertyCornerRadiusAll
+    stylePropertyCornerRadiusAll,
+    stylePropertyPaddingAll
 } from "@adaptive-web/adaptive-ui";
 import {
     cornerRadiusControl,
@@ -130,28 +131,28 @@ const appliedTokensTemplate = (
 `;
 
 const availableTokensTemplate = (
-    tokenType: StyleProperty[], // Changed to array for _applying_ individual values like top/bottom, but only _checking_ the first one.
+    tokenTypes: StyleProperty[],
     title: string | null,
     tokenLayout: "stack" | "grid" = "stack",
     glyphType?: TokenGlyphType
 ) => html<App>`
     ${when(
-        (x) => x.selectedNodes?.some((node) => node.supports.includes(tokenType[0])),
+        (x) => x.selectedNodes?.some((node) => tokenTypes.some((prop) => node.supports.includes(prop))),
         html<App>`
             ${when(
                 (_) => title,
                 html`<p class="title">${(_) => title}</p>`
             )}
             <div class="swatch-${tokenLayout}">
                 ${repeat(
-                    (x) => x.controller.styles.getAppliableDesignTokenOptionsByType(tokenType[0]),
+                    (x) => x.controller.styles.getAppliableDesignTokenOptions(tokenTypes),
                     html<DesignTokenDefinition, App>`
                         <designer-style-token-item
                             title=${(x) => x.title}
                             value=${(x, c) => c.parent.controller.designTokens.getDefaultDesignTokenValueAsString(x.token)}
                             glyphType=${(_) => glyphType}
                             content-button
-                            @click=${(x, c) => c.parent.controller.styles.applyDesignToken(tokenType, x)}
+                            @click=${(x, c) => c.parent.controller.styles.applyDesignToken(x.intendedFor, x)}
                         >
                         </designer-style-token-item>
                     `
@@ -307,7 +308,7 @@ const template = html<App>`
                                 ${(x) => availableStylesTemplate("Density")}
                                 ${(x) =>
                                     availableTokensTemplate(
-                                        [StyleProperty.gap],
+                                        [...stylePropertyPaddingAll, StyleProperty.gap],
                                         "Density",
                                     )}
                             </div>
@@ -617,7 +618,7 @@ export class App extends FASTElement {
         this.foregroundTokens = this.controller.styles.getAppliedDesignTokens([StyleProperty.foregroundFill]);
         this.borderFillTokens = this.controller.styles.getAppliedDesignTokens(stylePropertyBorderFillAll);
         this.borderThicknessTokens = this.controller.styles.getAppliedDesignTokens(stylePropertyBorderThicknessAll);
-        this.densityTokens = this.controller.styles.getAppliedDesignTokens([StyleProperty.gap]);
+        this.densityTokens = this.controller.styles.getAppliedDesignTokens([...stylePropertyPaddingAll, StyleProperty.gap]);
         this.cornerRadiusTokens = this.controller.styles.getAppliedDesignTokens(stylePropertyCornerRadiusAll);
         this.textTokens = this.controller.styles.getAppliedDesignTokens([
             StyleProperty.fontFamily,

packages/adaptive-ui-figma-designer/src/ui/ui-controller-styles.ts

@@ -132,7 +132,7 @@ export class StylesController {
     }
 
     /**
-     * Gets a display representation of applied design tokens for the selected nodes.
+     * Gets a display representation of applied design tokens for the style property types.
      *
      * @param targets - Style property types
      * @returns Applied design tokens
@@ -172,14 +172,35 @@ export class StylesController {
     }
 
     /**
-     * Gets a list of appliable design tokens for the style property type.
+     * Gets a list of appliable design tokens for the style property types.
      *
-     * @param target - Style property type
+     * @param targets - Style property types
      * @returns List of available appliable design tokens
      */
-    public getAppliableDesignTokenOptionsByType(target: StyleProperty): DesignTokenDefinition[] {
-        const val = this.controller.appliableDesignTokenRegistry.find(target);
-        return val;
+    public getAppliableDesignTokenOptions(targets: StyleProperty[]): DesignTokenDefinition[] {
+        const tokens: DesignTokenDefinition[] = [];
+
+        // Collect the individual tokens available for the requested targets
+        // TODO: Handle multiple values better
+        targets.forEach(target => {
+            const appliable = this.controller.appliableDesignTokenRegistry.find(target);
+            if (appliable) {
+                tokens.push(...appliable);
+            }
+        });
+
+        // Group by token name
+        return tokens.reduce((accumulated: DesignTokenDefinition[], current: DesignTokenDefinition): DesignTokenDefinition[] => {
+            const found = accumulated.find((item) => {
+                return item.token.name === current.token.name
+            });
+
+            if (!found) {
+                accumulated.push(current);
+            }
+
+            return accumulated;
+        }, []).sort((a, b): number => a.title.localeCompare(b.title));
     }
 
     /**

packages/adaptive-ui/src/density/index.ts

@@ -137,7 +137,7 @@ export class DensityPaddingAndGapTokenGroup implements TokenGroup {
 
         this.horizontalPadding = createTokenDimension(
             `${name}-horizontal-padding`,
-            [StyleProperty.paddingTop, StyleProperty.paddingRight, StyleProperty.paddingBottom, StyleProperty.paddingLeft],
+            [StyleProperty.paddingRight, StyleProperty.paddingLeft],
         ).withDefault(
             (resolve: DesignTokenResolver) =>
                 `calc((${resolve(this.horizontalPaddingUnits) + resolve(densityAdjustmentUnits)} * ${resolve(designUnit)}) - ${resolve(strokeThickness)})`
@@ -163,7 +163,7 @@ export class DensityPaddingAndGapTokenGroup implements TokenGroup {
 
         this.verticalPadding = createTokenDimension(
             `${name}-vertical-padding`,
-            [StyleProperty.paddingTop, StyleProperty.paddingRight, StyleProperty.paddingBottom, StyleProperty.paddingLeft],
+            [StyleProperty.paddingTop, StyleProperty.paddingBottom],
         ).withDefault(
             (resolve: DesignTokenResolver) =>
                 `calc((${resolve(this.verticalPaddingUnits) + resolve(densityAdjustmentUnits)} * ${resolve(designUnit)}) - ${resolve(strokeThickness)})`