Designer: Fix parent fill color handling

Author: bheston

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

@@ -210,6 +210,11 @@ export abstract class PluginNode {
      */
     public abstract get parent(): PluginNode | null;
 
+    /**
+     * Gets the effective fill color of this node, either locally applied or from an ancestor.
+     */
+    public abstract get effectiveFillColor(): Color | null;
+
     /**
      * Gets the style properties this node supports.
      */
@@ -332,9 +337,9 @@ export abstract class PluginNode {
             this._additionalData.set(AdditionalDataKeys.codeGenName, this.codeGenName);
         }
 
-        if (!this._additionalData.has(AdditionalDataKeys.toolParentFillColor) && this.parent?.fillColor) {
-            // console.log("PluginNode.get_additionalData - adding:", AdditionalDataKeys.toolParentFillColor, this.debugInfo, formatHex8(this.parent?.fillColor));
-            this._additionalData.set(AdditionalDataKeys.toolParentFillColor, formatHex8(this.parent.fillColor));
+        if (!this._additionalData.has(AdditionalDataKeys.toolParentFillColor) && this.parent?.effectiveFillColor) {
+            // console.log("PluginNode.get_additionalData - adding:", AdditionalDataKeys.toolParentFillColor, this.debugInfo, formatHex8(this.parent?.effectiveFillColor));
+            this._additionalData.set(AdditionalDataKeys.toolParentFillColor, formatHex8(this.parent.effectiveFillColor));
         }
 
         return this._additionalData;

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

@@ -749,7 +749,7 @@ export class FigmaPluginNode extends PluginNode {
             return null;
         }
 
-        // console.log("    get parent");
+        // console.log("    get parent", this.debugInfo);
         return FigmaPluginNode.get(parent, false);
     }
 
@@ -776,14 +776,24 @@ export class FigmaPluginNode extends PluginNode {
         return null;
     }
 
+    public get effectiveFillColor(): Color | null {
+        if (this.fillColor) {
+            return this.fillColor;
+        }
+        if (this.parent) {
+            return this.parent.fillColor;
+        }
+        return null;
+    }
+
     private darkTarget: number = (-0.1 + Math.sqrt(0.21)) / 2;
 
     public handleManualDarkMode(): boolean {
         if (isInstanceNode(this._node)) {
             if (this._node.variantProperties) {
                 const currentDarkMode = this._node.variantProperties["Dark mode"];
                 if (currentDarkMode) {
-                    const color = this.parent?.fillColor;
+                    const color = this.parent?.effectiveFillColor;
                     if (color) {
                         const containerIsDark = wcagLuminance(color) <= this.darkTarget;
                         // eslint-disable-next-line max-len

packages/adaptive-ui-designer-figma-plugin/src/ui/ui-controller-elements.ts

@@ -39,7 +39,7 @@ export class ElementsController {
             this.rootElement.removeChild(child)
         );
 
-        this.resetFillColor(this.rootElement);
+        this.resetFillColor();
 
         this.controller.selectedNodes.forEach(node => this.setupDesignTokenElement(this.rootElement, node));
     }
@@ -182,13 +182,15 @@ export class ElementsController {
 
     /**
      * Resets the `fill-color` token value on the full element tree.
-     *
-     * @param element - The top element, recursive
      */
-    public resetFillColor(element: FASTElement) {
+    public resetFillColor() {
+        this.resetFillColorForElement(this.rootElement);
+    }
+
+    private resetFillColorForElement(element: FASTElement) {
         this.setDesignTokenForElement(element, fillColor, null);
         element.childNodes.forEach(child =>
-            this.resetFillColor(child as unknown as FASTElement)
+            this.resetFillColorForElement(child as unknown as FASTElement)
         );
     }
 }

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

@@ -168,6 +168,8 @@ export class UIController {
      */
     public refreshSelectedNodes(reason: string = "refreshSelectedNodes"): void {
         // console.log("  Evaluating all design tokens for all selected nodes");
+        this._elements.resetFillColor();
+
         this.evaluateEffectiveAppliedStyleValues(this._selectedNodes);
 
         const message: PluginMessage = {
@@ -358,15 +360,15 @@ export class UIController {
         if (valueOriginal instanceof Color) {
             const swatch = valueOriginal;
             value = formatHex8(swatch.color);
-            // valueDebug = swatch;
+            // valueDebug = swatch.toColorString();
         } else if (typeof valueOriginal === "string") {
             if (valueOriginal.startsWith("calc")) {
                 const ret = calc(valueOriginal as string);
                 // console.log(`    calc ${value} returns ${ret}`);
                 value = ret;
             }
         }
-        // const fillColorValue = this._elements.getDesignTokenValue(node, fillColor);
+        // const fillColorValue = (this._elements.getDesignTokenValue(node, fillColor) as Swatch).toColorString();
         // console.log("    evaluateEffectiveAppliedDesignToken", target, " : ", token.name, " -> ", value, valueDebug, `(from ${source})`, "fillColor", fillColorValue);
 
         const applied = new AppliedStyleValue(value);