@clovis500c/figma-bridge 1.5.0 → 1.8.0

package/plugin/code.js

@@ -255,6 +255,67 @@
       p = p.parent;
     return p;
   }
+  function toLab(c) {
+    const lin = function(v) {
+      return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    };
+    const r = lin(c.r);
+    const g = lin(c.g);
+    const b = lin(c.b);
+    const x = (0.4124564 * r + 0.3575761 * g + 0.1804375 * b) / 0.95047;
+    const y = 0.2126729 * r + 0.7151522 * g + 0.072175 * b;
+    const z = (0.0193339 * r + 0.119192 * g + 0.9503041 * b) / 1.08883;
+    const f = function(t) {
+      return t > 216 / 24389 ? Math.cbrt(t) : (24389 / 27 * t + 16) / 116;
+    };
+    return [116 * f(y) - 16, 500 * (f(x) - f(y)), 200 * (f(y) - f(z))];
+  }
+  function deltaE(a, b) {
+    const l1 = toLab(a);
+    const l2 = toLab(b);
+    const rad = Math.PI / 180;
+    const c1 = Math.sqrt(l1[1] * l1[1] + l1[2] * l1[2]);
+    const c2 = Math.sqrt(l2[1] * l2[1] + l2[2] * l2[2]);
+    const cm = (c1 + c2) / 2;
+    const g = 0.5 * (1 - Math.sqrt(Math.pow(cm, 7) / (Math.pow(cm, 7) + Math.pow(25, 7))));
+    const a1 = l1[1] * (1 + g);
+    const a2 = l2[1] * (1 + g);
+    const cp1 = Math.sqrt(a1 * a1 + l1[2] * l1[2]);
+    const cp2 = Math.sqrt(a2 * a2 + l2[2] * l2[2]);
+    const hue = function(x, y) {
+      if (x === 0 && y === 0)
+        return 0;
+      const h = Math.atan2(y, x) / rad;
+      return h < 0 ? h + 360 : h;
+    };
+    const h1 = hue(a1, l1[2]);
+    const h2 = hue(a2, l2[2]);
+    const dl = l2[0] - l1[0];
+    const dc = cp2 - cp1;
+    let dh = 0;
+    if (cp1 * cp2 !== 0) {
+      dh = h2 - h1;
+      if (dh > 180)
+        dh -= 360;
+      else if (dh < -180)
+        dh += 360;
+    }
+    const dH = 2 * Math.sqrt(cp1 * cp2) * Math.sin(dh / 2 * rad);
+    const lm = (l1[0] + l2[0]) / 2;
+    const cpm = (cp1 + cp2) / 2;
+    let hm = h1 + h2;
+    if (cp1 * cp2 !== 0) {
+      if (Math.abs(h1 - h2) > 180)
+        hm += h1 + h2 < 360 ? 360 : -360;
+      hm /= 2;
+    }
+    const t = 1 - 0.17 * Math.cos((hm - 30) * rad) + 0.24 * Math.cos(2 * hm * rad) + 0.32 * Math.cos((3 * hm + 6) * rad) - 0.2 * Math.cos((4 * hm - 63) * rad);
+    const sl = 1 + 0.015 * Math.pow(lm - 50, 2) / Math.sqrt(20 + Math.pow(lm - 50, 2));
+    const sc = 1 + 0.045 * cpm;
+    const sh = 1 + 0.015 * cpm * t;
+    const rt = -2 * Math.sqrt(Math.pow(cpm, 7) / (Math.pow(cpm, 7) + Math.pow(25, 7))) * Math.sin(60 * Math.exp(-Math.pow((hm - 275) / 25, 2)) * rad);
+    return Math.sqrt(Math.pow(dl / sl, 2) + Math.pow(dc / sc, 2) + Math.pow(dH / sh, 2) + rt * (dc / sc) * (dH / sh));
+  }
 
   // plugin/lib/annotate.ts
   var COLORS = ["yellow", "orange", "red", "pink", "violet", "blue", "teal", "green"];
@@ -357,11 +418,596 @@
     return { count: out.length, nodes: out };
   }
 
+  // plugin/lib/health.ts
+  var MAX_NODES = 20000;
+  var MAX_ISSUES = 100;
+  var WEIGHTS2 = { tokens: 25, contrast: 20, typography: 15, components: 15, styles: 15, naming: 10 };
+  var NUMBER_FIELDS = ["itemSpacing", "counterAxisSpacing", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft"];
+  var RADIUS_FIELDS = ["topLeftRadius", "topRightRadius", "bottomRightRadius", "bottomLeftRadius"];
+  async function scopeNodes(p, wholeFile, requestId) {
+    let roots;
+    let label;
+    if (p.nodeId) {
+      const n = await getNode(p.nodeId);
+      roots = [n];
+      label = n.name;
+    } else if (wholeFile) {
+      await figma.loadAllPagesAsync();
+      roots = figma.root.children.slice();
+      label = "the whole file";
+    } else if (figma.currentPage.selection.length) {
+      roots = figma.currentPage.selection.slice();
+      label = "the selection";
+    } else {
+      roots = figma.currentPage.children.slice();
+      label = "page " + figma.currentPage.name;
+    }
+    const nodes = [];
+    let truncated = false;
+    const walk = function(n) {
+      if (nodes.length >= MAX_NODES) {
+        truncated = true;
+        return;
+      }
+      if (n.type !== "PAGE" && n.type !== "DOCUMENT")
+        nodes.push(n);
+      if (n.type === "INSTANCE" || !("children" in n))
+        return;
+      if (n.type === "PAGE" && n.name === "⟲ Bridge checkpoints")
+        return;
+      for (let i = 0;i < n.children.length; i++)
+        walk(n.children[i]);
+    };
+    for (let i = 0;i < roots.length; i++) {
+      checkCancelled(requestId);
+      walk(roots[i]);
+    }
+    return { nodes, truncated, label };
+  }
+  function visibleSolids(paints) {
+    if (!paints || paints === figma.mixed)
+      return [];
+    return paints.filter(function(pt) {
+      return pt.visible !== false && pt.type === "SOLID";
+    });
+  }
+  function score(good, total) {
+    return total ? Math.round(good / total * 100) : 100;
+  }
+  function convention(name) {
+    const seg = name.split("/").pop() || name;
+    if (/^[a-z0-9]+(-[a-z0-9]+)+$/.test(seg))
+      return "kebab-case";
+    if (/^[a-z0-9]+(_[a-z0-9]+)+$/.test(seg))
+      return "snake_case";
+    if (/^[a-z]+[A-Z][A-Za-z0-9]*$/.test(seg))
+      return "camelCase";
+    if (/^[A-Z][a-z0-9]*( [A-Z0-9][a-z0-9]*)*$/.test(seg))
+      return "Title Case";
+    if (/^[a-z0-9]+$/.test(seg))
+      return "lowercase";
+    return "mixed";
+  }
+  function namingConsistency(names, what, issues) {
+    const counts = {};
+    const multiWord = [];
+    for (let i = 0;i < names.length; i++) {
+      const c = convention(names[i]);
+      if (c === "lowercase")
+        continue;
+      counts[c] = (counts[c] || 0) + 1;
+      multiWord.push(names[i]);
+    }
+    const keys = Object.keys(counts).sort(function(a, b) {
+      return counts[b] - counts[a];
+    });
+    const main = keys[0] || "lowercase";
+    const off = multiWord.filter(function(n) {
+      return convention(n) !== main;
+    });
+    for (let i = 0;i < Math.min(off.length, 5); i++)
+      issues.push({ category: "naming", message: what + ' "' + off[i] + '" is not ' + main + " like most others" });
+    return { score: score(multiWord.length - off.length, multiWord.length), convention: main };
+  }
+  function paintKey(paints) {
+    return JSON.stringify(paints.map(function(pt) {
+      if (pt.type === "SOLID")
+        return toHex(pt.color, pt.opacity) + (pt.boundVariables && pt.boundVariables.color ? "@" + pt.boundVariables.color.id : "");
+      if (pt.gradientStops)
+        return pt.type + pt.gradientStops.map(function(s) {
+          return toHex(s.color) + round(s.position);
+        });
+      return pt.type + (pt.imageHash || "");
+    }));
+  }
+  async function designSystemHealth(p, requestId) {
+    const scope = await scopeNodes(p, !p.nodeId, requestId);
+    const nodes = scope.nodes;
+    const issues = [];
+    const add = function(category, message, n) {
+      if (issues.length < MAX_ISSUES * 3)
+        issues.push(n ? { category, message, nodeId: n.id, name: n.name } : { category, message });
+    };
+    const styles = await localStyles();
+    const vars = await localVariables();
+    const components = await localComponents();
+    const componentNames = {};
+    for (let i = 0;i < components.length; i++)
+      componentNames[components[i].name] = true;
+    const used = {};
+    const use = function(id) {
+      if (typeof id === "string" && id)
+        used[id] = (used[id] || 0) + 1;
+    };
+    let colorTotal = 0;
+    let colorBound = 0;
+    let numberTotal = 0;
+    let numberBound = 0;
+    let textTotal = 0;
+    let textStyled = 0;
+    let contrastTotal = 0;
+    let contrastOk = 0;
+    let layerTotal = 0;
+    let layerDefault = 0;
+    let instanceCount = 0;
+    let overridden = 0;
+    let detached = 0;
+    const pageBg = pageBackground();
+    for (let i = 0;i < nodes.length; i++) {
+      if (i % 500 === 0)
+        checkCancelled(requestId);
+      const n = nodes[i];
+      const bound = n.boundVariables || {};
+      const keys = Object.keys(bound);
+      for (let k = 0;k < keys.length; k++) {
+        const b = bound[keys[k]];
+        if (Array.isArray(b))
+          for (let j = 0;j < b.length; j++)
+            use(b[j] && b[j].id);
+        else if (b && b.id)
+          use(b.id);
+      }
+      ["fillStyleId", "strokeStyleId", "effectStyleId", "textStyleId"].forEach(function(f) {
+        if (f in n)
+          use(n[f]);
+      });
+      if (n.type === "INSTANCE") {
+        instanceCount++;
+        const fields = (n.overrides || []).reduce(function(sum, o) {
+          return sum + o.overriddenFields.length;
+        }, 0);
+        if (fields > 12) {
+          overridden++;
+          add("components", "Instance with " + fields + " overridden properties: consider a variant", n);
+        }
+        continue;
+      }
+      if ((n.type === "FRAME" || n.type === "GROUP") && (componentNames[n.name] || /^[^=,]+=[^=,]+(, [^=,]+=[^=,]+)*$/.test(n.name))) {
+        detached++;
+        add("components", 'Frame named like a component ("' + n.name + '"): probably a detached instance', n);
+      }
+      const fillStyled = typeof n.fillStyleId === "string" && n.fillStyleId !== "";
+      const solids = fillStyled ? [] : visibleSolids(n.fills);
+      for (let k = 0;k < solids.length; k++) {
+        colorTotal++;
+        if (solids[k].boundVariables && solids[k].boundVariables.color)
+          colorBound++;
+        else
+          add("tokens", "Hard-coded color " + toHex(solids[k].color, solids[k].opacity), n);
+      }
+      const strokeStyled = typeof n.strokeStyleId === "string" && n.strokeStyleId !== "";
+      const strokes = strokeStyled ? [] : visibleSolids(n.strokes);
+      for (let k = 0;k < strokes.length; k++) {
+        colorTotal++;
+        if (strokes[k].boundVariables && strokes[k].boundVariables.color)
+          colorBound++;
+      }
+      if (fillStyled) {
+        colorTotal++;
+        colorBound++;
+      }
+      if (n.layoutMode && n.layoutMode !== "NONE") {
+        for (let k = 0;k < NUMBER_FIELDS.length; k++) {
+          const f = NUMBER_FIELDS[k];
+          if (f === "counterAxisSpacing" && n.layoutWrap !== "WRAP")
+            continue;
+          if (!n[f])
+            continue;
+          numberTotal++;
+          if (bound[f])
+            numberBound++;
+        }
+      }
+      if ("topLeftRadius" in n && n.type !== "TEXT") {
+        for (let k = 0;k < RADIUS_FIELDS.length; k++) {
+          if (!n[RADIUS_FIELDS[k]])
+            continue;
+          numberTotal++;
+          if (bound[RADIUS_FIELDS[k]])
+            numberBound++;
+        }
+      }
+      if (n.type === "TEXT") {
+        textTotal++;
+        if (typeof n.textStyleId === "string" && n.textStyleId)
+          textStyled++;
+        else if (n.textStyleId === figma.mixed)
+          textStyled += 0.5;
+        else
+          add("typography", "Text without a text style (" + (n.fontName !== figma.mixed ? n.fontName.family + " " + n.fontName.style : "mixed fonts") + ", " + (n.fontSize !== figma.mixed ? round(n.fontSize) : "mixed") + " px)", n);
+        const c = n.visible ? textContrast(n, pageBg) : null;
+        if (c) {
+          contrastTotal++;
+          if (c.ratio >= c.min)
+            contrastOk++;
+          else
+            add("contrast", "Contrast " + round(c.ratio) + ":1 is below " + c.min + ":1", n);
+        }
+      } else if (n.type !== "COMPONENT" && n.type !== "COMPONENT_SET" && n.type !== "SECTION") {
+        layerTotal++;
+        if (DEFAULT_NAME.test(n.name)) {
+          layerDefault++;
+          add("naming", "Default layer name", n);
+        }
+      }
+    }
+    const styleTotal = styles.paint.length + styles.text.length + styles.effect.length;
+    let styleProblems = 0;
+    const seen = {};
+    const dup = function(key, name, kind) {
+      if (seen[key]) {
+        styleProblems++;
+        add("styles", kind + ' style "' + name + '" duplicates "' + seen[key] + '"');
+      } else
+        seen[key] = name;
+    };
+    for (let i = 0;i < styles.paint.length; i++)
+      dup("p" + paintKey(styles.paint[i].paints), styles.paint[i].name, "Color");
+    for (let i = 0;i < styles.text.length; i++) {
+      const s = styles.text[i];
+      dup("t" + JSON.stringify([s.fontName, s.fontSize, s.lineHeight, s.letterSpacing, s.textCase, s.textDecoration]), s.name, "Text");
+    }
+    for (let i = 0;i < styles.effect.length; i++)
+      dup("e" + JSON.stringify(styles.effect[i].effects), styles.effect[i].name, "Effect");
+    const wholeFile = !p.nodeId;
+    if (wholeFile) {
+      const all = styles.paint.concat(styles.text, styles.effect);
+      for (let i = 0;i < all.length; i++) {
+        if (used[all[i].id])
+          continue;
+        styleProblems++;
+        add("styles", 'Style "' + all[i].name + '" is not used in this file');
+      }
+    }
+    for (let i = 0;i < vars.vars.length; i++) {
+      const v = vars.vars[i];
+      const modes = Object.keys(v.valuesByMode);
+      for (let k = 0;k < modes.length; k++) {
+        const val = v.valuesByMode[modes[k]];
+        if (val && val.type === "VARIABLE_ALIAS")
+          use(val.id);
+      }
+    }
+    for (let i = 0;i < styles.paint.length; i++) {
+      const ps = styles.paint[i].paints;
+      for (let k = 0;k < ps.length; k++)
+        if (ps[k].boundVariables && ps[k].boundVariables.color)
+          use(ps[k].boundVariables.color.id);
+    }
+    let unusedVars = 0;
+    if (wholeFile) {
+      for (let i = 0;i < vars.vars.length; i++) {
+        if (used[vars.vars[i].id])
+          continue;
+        unusedVars++;
+        if (unusedVars <= 10)
+          add("styles", 'Variable "' + vars.vars[i].name + '" is not used in this file');
+      }
+    }
+    let unusedComponents = 0;
+    if (wholeFile) {
+      for (let i = 0;i < Math.min(components.length, 300); i++) {
+        const c = components[i];
+        const parts = c.type === "COMPONENT_SET" ? c.children : [c];
+        let count = 0;
+        for (let k = 0;k < parts.length && !count; k++)
+          count += (await parts[k].getInstancesAsync()).length;
+        if (!count) {
+          unusedComponents++;
+          add("styles", 'Component "' + c.name + '" has no instances');
+        }
+      }
+    }
+    const varNames = vars.vars.map(function(v) {
+      return v.name;
+    });
+    const styleNames = styles.paint.concat(styles.text, styles.effect).map(function(s) {
+      return s.name;
+    });
+    const naming = namingConsistency(varNames.concat(styleNames), "Token", issues);
+    const categories = {
+      tokens: { score: score(colorBound + numberBound, colorTotal + numberTotal), colors: { bound: colorBound, total: colorTotal }, numbers: { bound: numberBound, total: numberTotal } },
+      contrast: { score: score(contrastOk, contrastTotal), passing: contrastOk, total: contrastTotal },
+      typography: { score: score(textStyled, textTotal), styled: Math.floor(textStyled), total: textTotal },
+      components: {
+        score: Math.max(0, 100 - Math.round((detached + overridden * 0.5) / Math.max(1, instanceCount + detached) * 100)),
+        instances: instanceCount,
+        detachedSuspects: detached,
+        heavilyOverridden: overridden,
+        unused: wholeFile ? unusedComponents : undefined
+      },
+      styles: {
+        score: score(styleTotal + vars.vars.length + components.length - styleProblems - unusedVars - unusedComponents, styleTotal + vars.vars.length + components.length),
+        styles: styleTotal,
+        variables: vars.vars.length,
+        problems: styleProblems + unusedVars + unusedComponents
+      },
+      naming: {
+        score: Math.round((score(layerTotal - layerDefault, layerTotal) + naming.score) / 2),
+        defaultLayerNames: layerDefault,
+        layers: layerTotal,
+        tokenConvention: naming.convention
+      }
+    };
+    let total = 0;
+    let weight = 0;
+    const names = Object.keys(WEIGHTS2);
+    for (let i = 0;i < names.length; i++) {
+      total += categories[names[i]].score * WEIGHTS2[names[i]];
+      weight += WEIGHTS2[names[i]];
+    }
+    const picked = [];
+    for (let pass = 0;picked.length < MAX_ISSUES && pass < MAX_ISSUES; pass++) {
+      let added = false;
+      for (let c = 0;c < names.length && picked.length < MAX_ISSUES; c++) {
+        const list = issues.filter(function(x) {
+          return x.category === names[c];
+        });
+        if (list[pass]) {
+          picked.push(list[pass]);
+          added = true;
+        }
+      }
+      if (!added)
+        break;
+    }
+    return {
+      scope: scope.label,
+      score: Math.round(total / weight),
+      categories,
+      issues: picked,
+      totalIssues: issues.length,
+      nodesChecked: nodes.length,
+      truncated: scope.truncated,
+      hint: "audit {fix:true} binds raw colors and numbers to matching variables, applies matching text styles and renames default layer names."
+    };
+  }
+  function resolved(v, byId, collections, depth) {
+    const col = collections[v.variableCollectionId];
+    if (!col)
+      return null;
+    const raw = v.valuesByMode[col.defaultModeId];
+    if (raw && raw.type === "VARIABLE_ALIAS") {
+      const t = byId[raw.id];
+      return t && (depth || 0) < 10 ? resolved(t, byId, collections, (depth || 0) + 1) : null;
+    }
+    return raw;
+  }
+  function scoped(v, wanted) {
+    const s = v.scopes || [];
+    if (!s.length || s.indexOf("ALL_SCOPES") !== -1)
+      return true;
+    for (let i = 0;i < wanted.length; i++)
+      if (s.indexOf(wanted[i]) !== -1)
+        return true;
+    return false;
+  }
+  var FILL_SCOPES = { TEXT: ["ALL_FILLS", "TEXT_FILL"], FRAME: ["ALL_FILLS", "FRAME_FILL"], COMPONENT: ["ALL_FILLS", "FRAME_FILL"], SECTION: ["ALL_FILLS", "FRAME_FILL"] };
+  async function autoFix(p, requestId) {
+    const all = ["colors", "numbers", "textStyles", "names"];
+    const fixes = Array.isArray(p.fixes) && p.fixes.length ? p.fixes : all;
+    for (let i = 0;i < fixes.length; i++)
+      if (all.indexOf(fixes[i]) === -1)
+        throw codeError('Unknown fix "' + fixes[i] + '" (use ' + all.join(", ") + ")", "BAD_ARGS");
+    const scope = await scopeNodes(p, false, requestId);
+    const vars = await localVariables();
+    const byId = {};
+    const collections = {};
+    for (let i = 0;i < vars.vars.length; i++)
+      byId[vars.vars[i].id] = vars.vars[i];
+    for (let i = 0;i < vars.collections.length; i++)
+      collections[vars.collections[i].id] = vars.collections[i];
+    const colorVars = [];
+    const numberVars = [];
+    for (let i = 0;i < vars.vars.length; i++) {
+      const v = vars.vars[i];
+      const value = resolved(v, byId, collections);
+      if (v.resolvedType === "COLOR" && value && typeof value === "object")
+        colorVars.push({ v, rgba: value });
+      if (v.resolvedType === "FLOAT" && typeof value === "number")
+        numberVars.push({ v, num: value });
+    }
+    const changes = [];
+    const counts = { colors: 0, numbers: 0, textStyles: 0, names: 0 };
+    const record = function(n, fix, from, to) {
+      counts[fix]++;
+      if (changes.length < 200)
+        changes.push({ nodeId: n.id, name: n.name, fix, from, to });
+    };
+    const matchColor = function(n, paint, scopes) {
+      const alpha = paint.opacity === undefined ? 1 : paint.opacity;
+      const ranked = colorVars.filter(function(c) {
+        return scoped(c.v, scopes) && Math.abs((c.rgba.a === undefined ? 1 : c.rgba.a) - alpha) < 0.02;
+      }).map(function(c) {
+        return { c, d: deltaE(c.rgba, paint.color) };
+      }).filter(function(x) {
+        return x.d < 2;
+      }).sort(function(a, b) {
+        return a.d - b.d;
+      });
+      for (let i = 0;i < ranked.length; i++) {
+        try {
+          const r = ranked[i].c.v.resolveForConsumer(n).value;
+          if (r && typeof r === "object" && deltaE(r, paint.color) < 2)
+            return ranked[i].c.v;
+        } catch (e) {}
+      }
+      return null;
+    };
+    const matchNumber = function(value, scopes, hint) {
+      const hits = numberVars.filter(function(c) {
+        return Math.abs(c.num - value) < 0.01 && scoped(c.v, scopes);
+      });
+      hits.sort(function(a, b) {
+        return (hint.test(b.v.name) ? 1 : 0) - (hint.test(a.v.name) ? 1 : 0);
+      });
+      return hits.length ? hits[0].v : null;
+    };
+    const textStyles = fixes.indexOf("textStyles") !== -1 ? (await localStyles()).text : [];
+    for (let i = 0;i < scope.nodes.length; i++) {
+      if (i % 200 === 0)
+        checkCancelled(requestId);
+      const n = scope.nodes[i];
+      if (n.type === "INSTANCE" || n.locked)
+        continue;
+      const bound = n.boundVariables || {};
+      if (fixes.indexOf("colors") !== -1) {
+        const fields = ["fills", "strokes"];
+        for (let f = 0;f < fields.length; f++) {
+          const field = fields[f];
+          if (!(field in n) || n[field] === figma.mixed)
+            continue;
+          if (field === "fills" && n.fillStyleId || field === "strokes" && n.strokeStyleId)
+            continue;
+          const paints = n[field].slice();
+          let changed = false;
+          for (let k = 0;k < paints.length; k++) {
+            const pt = paints[k];
+            if (pt.type !== "SOLID" || pt.visible === false || pt.boundVariables && pt.boundVariables.color)
+              continue;
+            const v = matchColor(n, pt, field === "strokes" ? ["STROKE_COLOR"] : FILL_SCOPES[n.type] || ["ALL_FILLS", "SHAPE_FILL"]);
+            if (!v)
+              continue;
+            paints[k] = figma.variables.setBoundVariableForPaint(pt, "color", v);
+            changed = true;
+            record(n, "colors", field + " " + toHex(pt.color, pt.opacity), "var:" + v.name);
+          }
+          if (changed)
+            n[field] = paints;
+        }
+      }
+      if (fixes.indexOf("numbers") !== -1) {
+        const fields = [];
+        if (n.layoutMode && n.layoutMode !== "NONE") {
+          for (let k = 0;k < NUMBER_FIELDS.length; k++)
+            if (NUMBER_FIELDS[k] !== "counterAxisSpacing" || n.layoutWrap === "WRAP")
+              fields.push(NUMBER_FIELDS[k]);
+        }
+        if ("topLeftRadius" in n && n.type !== "TEXT")
+          for (let k = 0;k < RADIUS_FIELDS.length; k++)
+            fields.push(RADIUS_FIELDS[k]);
+        for (let k = 0;k < fields.length; k++) {
+          const f = fields[k];
+          const value = n[f];
+          if (typeof value !== "number" || !value || bound[f])
+            continue;
+          const radius = f.indexOf("Radius") !== -1;
+          const v = matchNumber(value, radius ? ["CORNER_RADIUS"] : ["GAP"], radius ? /radius|corner|round/i : /spac|gap|pad/i);
+          if (!v)
+            continue;
+          try {
+            n.setBoundVariable(f, v);
+            record(n, "numbers", f + " " + round(value), "var:" + v.name);
+          } catch (e) {}
+        }
+      }
+      if (n.type === "TEXT" && textStyles.length && !n.textStyleId && n.fontName !== figma.mixed && n.fontSize !== figma.mixed && n.lineHeight !== figma.mixed && n.letterSpacing !== figma.mixed) {
+        for (let k = 0;k < textStyles.length; k++) {
+          const s = textStyles[k];
+          if (s.fontName.family === n.fontName.family && s.fontName.style === n.fontName.style && Math.abs(s.fontSize - n.fontSize) < 0.01 && JSON.stringify(s.lineHeight) === JSON.stringify(n.lineHeight) && s.letterSpacing.unit === n.letterSpacing.unit && Math.abs(s.letterSpacing.value - n.letterSpacing.value) < 0.01) {
+            try {
+              await loadFont(s.fontName);
+              await n.setTextStyleIdAsync(s.id);
+              record(n, "textStyles", n.fontName.family + " " + n.fontName.style + " " + round(n.fontSize), "style:" + s.name);
+            } catch (e) {}
+            break;
+          }
+        }
+      }
+      if (fixes.indexOf("names") !== -1 && n.type !== "TEXT" && DEFAULT_NAME.test(n.name)) {
+        const name = nameFromContent(n);
+        if (name && name !== n.name) {
+          const from = n.name;
+          n.name = name;
+          record(n, "names", from, name);
+        }
+      }
+    }
+    return { scope: scope.label, fixed: counts, changes, truncated: scope.truncated || changes.length >= 200 };
+  }
+  function firstText(n, depth) {
+    if (n.type === "TEXT")
+      return n.characters;
+    if (depth > 3 || !("children" in n))
+      return "";
+    for (let i = 0;i < n.children.length; i++) {
+      if (n.children[i].visible === false)
+        continue;
+      const t = firstText(n.children[i], depth + 1);
+      if (t.trim())
+        return t;
+    }
+    return "";
+  }
+  function hasImage(n) {
+    return "fills" in n && n.fills !== figma.mixed && n.fills.some(function(f) {
+      return f.type === "IMAGE" && f.visible !== false;
+    });
+  }
+  function vectorOnly(n) {
+    if (n.type === "VECTOR" || n.type === "BOOLEAN_OPERATION" || n.type === "STAR" || n.type === "POLYGON")
+      return true;
+    if (!("children" in n) || !n.children.length || n.type === "TEXT")
+      return false;
+    for (let i = 0;i < n.children.length; i++)
+      if (!vectorOnly(n.children[i]))
+        return false;
+    return true;
+  }
+  function nameFromContent(n) {
+    if (hasImage(n))
+      return "Image";
+    if (n.type === "VECTOR" || (n.type === "GROUP" || n.type === "FRAME") && vectorOnly(n))
+      return "Icon";
+    const text = firstText(n, 0).split(`
+`)[0].trim();
+    if (text)
+      return text.length > 32 ? text.slice(0, 31) + "…" : text;
+    if (n.layoutMode === "HORIZONTAL")
+      return "Row";
+    if (n.layoutMode === "VERTICAL")
+      return "Column";
+    if (n.layoutMode === "GRID")
+      return "Grid";
+    return null;
+  }
+
   // plugin/lib/audit.ts
-  var MAX_NODES = 5000;
-  var MAX_ISSUES = 120;
+  var MAX_NODES2 = 5000;
+  var MAX_ISSUES2 = 120;
   var DEFAULT_NAME = /^(Frame|Rectangle|Ellipse|Group|Vector|Text|Line|Polygon|Star|Component|Instance|Section|Image)( \d+)?$/;
-  async function audit(p) {
+  async function audit(p, _timeoutMs, requestId) {
+    if (p.fix === true || Array.isArray(p.fixes) && p.fixes.length) {
+      const fixed = await autoFix(p, requestId);
+      invalidateCaches();
+      const after = p.scope === "design-system" ? await designSystemHealth(p, requestId) : await lint(p);
+      return Object.assign({ fixed: fixed.fixed, changes: fixed.changes, fixScope: fixed.scope }, after);
+    }
+    if (p.scope === "design-system")
+      return designSystemHealth(p, requestId);
+    return lint(p);
+  }
+  async function lint(p) {
     let roots;
     if (p.nodeId)
       roots = [await getNode(p.nodeId)];
@@ -380,11 +1026,11 @@
       if (only && only.indexOf(rule) === -1)
         return;
       counts[rule] = (counts[rule] || 0) + 1;
-      if (issues.length < MAX_ISSUES)
+      if (issues.length < MAX_ISSUES2)
         issues.push({ rule, severity, nodeId: n.id, name: n.name, message });
     };
     const visit = function(n, clipBox) {
-      if (visited >= MAX_NODES)
+      if (visited >= MAX_NODES2)
         return;
       visited++;
       if (n.visible === false)
@@ -455,7 +1101,7 @@
       fonts: familyList,
       fontSizes: sizeList,
       issues,
-      truncated: visited >= MAX_NODES || issues.length >= MAX_ISSUES
+      truncated: visited >= MAX_NODES2 || issues.length >= MAX_ISSUES2
     };
   }
   function checkText(n, report, families, sizes, pageBg) {
@@ -480,19 +1126,21 @@
       if (tb.x + tb.width > pb.x + pb.width + 1 || tb.x < pb.x - 1)
         report("text-overflow", "warning", n, "Text extends outside its container");
     }
+    const c = textContrast(n, pageBg);
+    if (c && c.ratio < c.min) {
+      report("contrast", c.ratio < c.min - 1.5 ? "error" : "warning", n, "Contrast " + round(c.ratio) + ":1 is below " + c.min + ":1 (WCAG AA" + (c.large ? ", large text" : "") + ")");
+    }
+  }
+  function textContrast(n, pageBg) {
     const fg = solidOf(n.fills);
     if (!fg || n.fontSize === figma.mixed)
-      return;
+      return null;
     const bg = backgroundOf(n, pageBg);
     if (!bg)
-      return;
-    const ratio = contrastRatio(fg, bg);
+      return null;
     const bold = n.fontName !== figma.mixed && /bold|black|heavy|semi/i.test(n.fontName.style);
     const large = n.fontSize >= 24 || bold && n.fontSize >= 18.66;
-    const min = large ? 3 : 4.5;
-    if (ratio < min) {
-      report("contrast", ratio < min - 1.5 ? "error" : "warning", n, "Contrast " + round(ratio) + ":1 is below " + min + ":1 (WCAG AA" + (large ? ", large text" : "") + ")");
-    }
+    return { ratio: contrastRatio(fg, bg), min: large ? 3 : 4.5, large };
   }
   function solidOf(paints) {
     if (!paints || paints === figma.mixed)
@@ -1109,7 +1757,7 @@
   }
 
   // plugin/lib/build.ts
-  var MAX_NODES2 = 3000;
+  var MAX_NODES3 = 3000;
   var SHADOW_DEFAULT = { x: 0, y: 4, blur: 16, spread: 0, color: "#0000001F" };
   async function build(p, _timeoutMs, requestId) {
     const spec = p.spec;
@@ -1264,8 +1912,8 @@
       ctx.warnings.push(path + ": not an object, skipped");
       return null;
     }
-    if (ctx.count >= MAX_NODES2)
-      throw codeError("Spec is too large (max " + MAX_NODES2 + " nodes). Split it into several build calls.", "TOO_LARGE");
+    if (ctx.count >= MAX_NODES3)
+      throw codeError("Spec is too large (max " + MAX_NODES3 + " nodes). Split it into several build calls.", "TOO_LARGE");
     checkCancelled(ctx.requestId);
     const type = nodeType(s);
     let node;
@@ -1586,7 +2234,7 @@
         if (typeof color === "string" && color.indexOf("style:") === 0) {
           await t.setRangeFillStyleIdAsync(at, end, (await findStyle("paint", stripPrefix(color))).id);
         } else if (color !== undefined) {
-          t.setRangeFills(at, end, [await toPaint(color)]);
+          t.setRangeFills(at, end, [await toPaint(color, ctx.images)]);
         }
         const deco = { underline: "UNDERLINE", strike: "STRIKETHROUGH", strikethrough: "STRIKETHROUGH", none: "NONE" };
         if (sp.link) {
@@ -1596,7 +2244,7 @@
         }
         if (sp.decoration && deco[sp.decoration])
           t.setRangeTextDecoration(at, end, deco[sp.decoration]);
-        const cases = { upper: "UPPER", lower: "LOWER", title: "TITLE" };
+        const cases = { upper: "UPPER", lower: "LOWER", title: "TITLE", none: "ORIGINAL" };
         if (sp.case && cases[sp.case])
           t.setRangeTextCase(at, end, cases[sp.case]);
       } catch (e) {
@@ -1782,10 +2430,20 @@
   async function applyVisuals(node, s, ctx, type) {
     const fill = s.fill !== undefined ? s.fill : type === "text" ? s.color : undefined;
     if (fill !== undefined && "fills" in node && type !== "image")
-      await setPaints(node, "fills", fill);
+      await setPaints(node, "fills", fill, ctx.images);
     if (s.stroke !== undefined && "strokes" in node) {
-      await setPaints(node, "strokes", s.stroke);
-      node.strokeWeight = typeof s.strokeWidth === "number" ? s.strokeWidth : 1;
+      await setPaints(node, "strokes", s.stroke, ctx.images);
+      if (Array.isArray(s.strokeWidth) && "strokeTopWeight" in node) {
+        const w = s.strokeWidth.map(Number);
+        node.strokeTopWeight = w[0] || 0;
+        node.strokeRightWeight = w[1] === undefined ? w[0] || 0 : w[1] || 0;
+        node.strokeBottomWeight = w[2] === undefined ? w[0] || 0 : w[2] || 0;
+        node.strokeLeftWeight = w[3] === undefined ? w[1] === undefined ? w[0] || 0 : w[1] || 0 : w[3] || 0;
+      } else {
+        node.strokeWeight = typeof s.strokeWidth === "number" ? s.strokeWidth : 1;
+      }
+      if (Array.isArray(s.strokeDash) && "dashPattern" in node)
+        node.dashPattern = s.strokeDash.map(Number);
       if ("strokeAlign" in node && type !== "line" && type !== "text") {
         node.strokeAlign = String(s.strokeAlign || "inside").toUpperCase();
       }
@@ -1843,7 +2501,7 @@
     const c = parseHex(hex);
     return { type: "SOLID", color: { r: c.r, g: c.g, b: c.b }, opacity: c.a };
   }
-  async function setPaints(node, field, value) {
+  async function setPaints(node, field, value, images) {
     if (typeof value === "string" && value.indexOf("style:") === 0) {
       const style = await findStyle("paint", stripPrefix(value));
       if (field === "fills")
@@ -1855,10 +2513,11 @@
     const list = value === null || value === "none" ? [] : Array.isArray(value) ? value : [value];
     const paints = [];
     for (let i = 0;i < list.length; i++)
-      paints.push(await toPaint(list[i]));
+      paints.push(await toPaint(list[i], images));
     node[field] = paints;
   }
-  async function toPaint(v) {
+  var FITS = { fill: "FILL", cover: "FILL", fit: "FIT", contain: "FIT", crop: "CROP", tile: "TILE" };
+  async function toPaint(v, images) {
     if (typeof v === "string") {
       if (v.indexOf("var:") === 0) {
         const variable = await findVariable(stripPrefix(v));
@@ -1886,6 +2545,15 @@
       ];
       return { type: radial ? "GRADIENT_RADIAL" : "GRADIENT_LINEAR", gradientTransform: transform, gradientStops: stops };
     }
+    if (v && v.imageKey !== undefined) {
+      const bytes = images && images[v.imageKey];
+      if (!bytes)
+        throw codeError("Image fill data missing (use {image: src} with the build tool)", "BAD_ARGS");
+      const paint = { type: "IMAGE", imageHash: figma.createImage(bytes).hash, scaleMode: FITS[String(v.fit || "fill").toLowerCase()] || "FILL" };
+      if (typeof v.opacity === "number")
+        return Object.assign({}, paint, { opacity: v.opacity });
+      return paint;
+    }
     if (v && typeof v.type === "string")
       return v;
     throw codeError("Invalid paint: " + JSON.stringify(v), "BAD_ARGS");
@@ -2313,7 +2981,7 @@
   }
 
   // plugin/lib/export.ts
-  var MAX_NODES3 = 1500;
+  var MAX_NODES4 = 1500;
   var MAX_ASSET_BYTES = 40 << 20;
   var VECTOR_TYPES = ["VECTOR", "BOOLEAN_OPERATION", "STAR", "POLYGON", "ELLIPSE", "LINE"];
   var VISUAL_CSS = [
@@ -2423,6 +3091,11 @@
     }
     if (n.rotation && Math.abs(n.rotation) > 0.01 && n.type !== "TEXT")
       out.rotation = round(n.rotation);
+    if (n.type === "INSTANCE") {
+      const info = await instanceInfo(n);
+      if (info)
+        out.component = info;
+    }
     let css = {};
     try {
       css = await n.getCSSAsync();
@@ -2487,7 +3160,7 @@
         const c = n.children[i];
         if (!c.visible)
           continue;
-        if (ctx.count >= MAX_NODES3) {
+        if (ctx.count >= MAX_NODES4) {
           ctx.truncated = true;
           break;
         }
@@ -2530,6 +3203,33 @@
       })
     };
   }
+  async function instanceInfo(n) {
+    let main = null;
+    try {
+      main = await n.getMainComponentAsync();
+    } catch (e) {}
+    if (!main)
+      return null;
+    const set = main.parent && main.parent.type === "COMPONENT_SET" ? main.parent.name : null;
+    const props = {};
+    const defs = n.componentProperties;
+    const keys = Object.keys(defs);
+    for (let i = 0;i < keys.length; i++) {
+      const d = defs[keys[i]];
+      if (d.type === "INSTANCE_SWAP")
+        continue;
+      props[keys[i].split("#")[0]] = d.value;
+    }
+    const info = { name: set || main.name, props };
+    if (set)
+      info.variant = main.name;
+    const text = n.findOne(function(t) {
+      return t.type === "TEXT" && t.visible;
+    });
+    if (text && text.characters.trim())
+      info.text = text.characters.trim().slice(0, 200);
+    return info;
+  }
 
   // plugin/lib/design-system.ts
   var ALL = ["colors", "text", "effects", "variables", "components"];
@@ -2650,6 +3350,183 @@
     return v;
   }
 
+  // plugin/lib/tokens-export.ts
+  var TYPES2 = { COLOR: "color", FLOAT: "number", STRING: "string", BOOLEAN: "boolean" };
+  async function exportTokens(p) {
+    const only = Array.isArray(p.collections) && p.collections.length ? p.collections : null;
+    const collections = await figma.variables.getLocalVariableCollectionsAsync();
+    const vars = await figma.variables.getLocalVariablesAsync();
+    const byId = {};
+    for (let i = 0;i < vars.length; i++)
+      byId[vars[i].id] = vars[i];
+    const collName = {};
+    for (let i = 0;i < collections.length; i++)
+      collName[collections[i].id] = collections[i].name;
+    const warnings = [];
+    const aliasOf = async function(id) {
+      let v = byId[id] || null;
+      if (!v) {
+        try {
+          v = await figma.variables.getVariableByIdAsync(id);
+        } catch (e) {}
+        if (v)
+          byId[id] = v;
+      }
+      if (!v)
+        return { alias: { collection: "", name: id, missing: true } };
+      let collection = collName[v.variableCollectionId];
+      if (collection === undefined) {
+        try {
+          const c = await figma.variables.getVariableCollectionByIdAsync(v.variableCollectionId);
+          collection = c ? c.name : "";
+        } catch (e) {
+          collection = "";
+        }
+        collName[v.variableCollectionId] = collection;
+      }
+      const out = { alias: { collection, name: v.name } };
+      if (v.remote)
+        out.alias.remote = true;
+      return out;
+    };
+    const value = async function(raw, type) {
+      if (raw && typeof raw === "object" && raw.type === "VARIABLE_ALIAS")
+        return aliasOf(raw.id);
+      if (type === "COLOR" && raw && typeof raw === "object")
+        return toHex(raw);
+      if (type === "FLOAT")
+        return round(Number(raw));
+      return raw;
+    };
+    const outCollections = [];
+    for (let c = 0;c < collections.length; c++) {
+      const col = collections[c];
+      if (only && only.indexOf(col.name) === -1)
+        continue;
+      const modes = col.modes.slice().sort(function(a, b) {
+        return (a.modeId === col.defaultModeId ? 0 : 1) - (b.modeId === col.defaultModeId ? 0 : 1);
+      });
+      const list = [];
+      for (let i = 0;i < vars.length; i++) {
+        const v = vars[i];
+        if (v.variableCollectionId !== col.id)
+          continue;
+        const values = {};
+        for (let m = 0;m < modes.length; m++)
+          values[modes[m].name] = await value(v.valuesByMode[modes[m].modeId], v.resolvedType);
+        const item = { name: v.name, type: TYPES2[v.resolvedType] || "string", values };
+        if (v.description)
+          item.description = v.description;
+        if (v.scopes && v.scopes.length && !(v.scopes.length === 1 && v.scopes[0] === "ALL_SCOPES"))
+          item.scopes = v.scopes.slice();
+        if (v.hiddenFromPublishing)
+          item.hidden = true;
+        list.push(item);
+      }
+      outCollections.push({
+        name: col.name,
+        modes: modes.map(function(m) {
+          return m.name;
+        }),
+        variables: list
+      });
+    }
+    const styles = await localStyles();
+    const paint = [];
+    for (let i = 0;i < styles.paint.length; i++) {
+      const s = styles.paint[i];
+      const paints = [];
+      for (let k = 0;k < s.paints.length; k++) {
+        const pt = s.paints[k];
+        if (pt.visible === false)
+          continue;
+        if (pt.type === "SOLID") {
+          const bound = pt.boundVariables && pt.boundVariables.color;
+          paints.push(bound ? await aliasOf(bound.id) : toHex(pt.color, pt.opacity));
+        } else if (pt.type.indexOf("GRADIENT") === 0) {
+          const t = pt.gradientTransform;
+          const g = {
+            gradient: pt.gradientStops.map(function(st) {
+              return { color: toHex(st.color), at: round(st.position) };
+            })
+          };
+          if (pt.type === "GRADIENT_LINEAR")
+            g.angle = round(Math.atan2(t[0][1], t[0][0]) * 180 / Math.PI);
+          else
+            g.type = pt.type.replace("GRADIENT_", "").toLowerCase();
+          paints.push(g);
+        } else {
+          warnings.push('Paint style "' + s.name + '": ' + pt.type.toLowerCase() + " paints are not exported");
+        }
+      }
+      if (!paints.length)
+        continue;
+      const item = { name: s.name, value: paints.length === 1 ? paints[0] : paints };
+      if (s.description)
+        item.description = s.description;
+      paint.push(item);
+    }
+    const text = [];
+    for (let i = 0;i < styles.text.length; i++) {
+      const s = styles.text[i];
+      const item = { name: s.name, font: s.fontName.family, style: s.fontName.style, size: round(s.fontSize) };
+      const lh = s.lineHeight;
+      if (lh.unit === "PIXELS")
+        item.lineHeight = round(lh.value);
+      else if (lh.unit === "PERCENT")
+        item.lineHeight = round(lh.value) + "%";
+      if (s.letterSpacing.value)
+        item.letterSpacing = s.letterSpacing.unit === "PERCENT" ? round(s.letterSpacing.value) + "%" : round(s.letterSpacing.value);
+      if (s.textCase && s.textCase !== "ORIGINAL")
+        item.case = s.textCase === "UPPER" ? "upper" : s.textCase === "LOWER" ? "lower" : "title";
+      if (s.textDecoration && s.textDecoration !== "NONE")
+        item.decoration = s.textDecoration === "UNDERLINE" ? "underline" : "strike";
+      if (s.paragraphSpacing)
+        item.paragraphSpacing = round(s.paragraphSpacing);
+      const bound = s.boundVariables || {};
+      const keys = Object.keys(bound);
+      if (keys.length) {
+        item.variables = {};
+        for (let k = 0;k < keys.length; k++)
+          if (bound[keys[k]] && bound[keys[k]].id)
+            item.variables[keys[k]] = (await aliasOf(bound[keys[k]].id)).alias;
+      }
+      if (s.description)
+        item.description = s.description;
+      text.push(item);
+    }
+    const effect = [];
+    for (let i = 0;i < styles.effect.length; i++) {
+      const s = styles.effect[i];
+      const list = [];
+      for (let k = 0;k < s.effects.length; k++) {
+        const e = s.effects[k];
+        if (e.visible === false)
+          continue;
+        if (e.type === "DROP_SHADOW" || e.type === "INNER_SHADOW") {
+          const sh = { x: round(e.offset.x), y: round(e.offset.y), blur: round(e.radius), spread: round(e.spread || 0), color: toHex(e.color) };
+          if (e.type === "INNER_SHADOW")
+            sh.inner = true;
+          if (e.boundVariables && e.boundVariables.color)
+            sh.colorVariable = (await aliasOf(e.boundVariables.color.id)).alias;
+          list.push(sh);
+        } else {
+          list.push({ type: e.type === "LAYER_BLUR" ? "layer" : "background", blur: round(e.radius) });
+        }
+      }
+      if (!list.length)
+        continue;
+      const item = { name: s.name, value: list };
+      if (s.description)
+        item.description = s.description;
+      effect.push(item);
+    }
+    const out = { fileName: figma.root.name, collections: outCollections, styles: { colors: paint, text, effects: effect } };
+    if (warnings.length)
+      out.warnings = warnings.slice(0, 40);
+    return out;
+  }
+
   // plugin/lib/find.ts
   var MAX_LIMIT = 500;
   function matcher(q) {
@@ -2831,7 +3708,7 @@
     finish(id, codeError("The user cancelled the selection request", "CANCELLED"));
   }
   // package.json
-  var version = "1.5.0";
+  var version = "1.8.0";
 
   // plugin/code.ts
   var DEFAULT_SIZE = { width: 340, height: 540 };
@@ -2942,6 +3819,7 @@
     find: find2,
     get_design_system: getDesignSystem,
     design_tokens: designTokens,
+    export_tokens: exportTokens,
     audit,
     get_css: getCss,
     checkpoint,
@@ -2962,6 +3840,7 @@
     describe: true,
     find: true,
     get_design_system: true,
+    export_tokens: true,
     audit: true,
     get_css: true,
     screenshot: true,
@@ -2973,7 +3852,7 @@
   };
   async function handleRequest(msg) {
     const started = Date.now();
-    const mutates = !READ_ONLY[msg.method];
+    const mutates = !READ_ONLY[msg.method] || !!(msg.params && (msg.params.fix === true || msg.params.fixes && msg.params.fixes.length));
     let reply;
     if (mutates)
       commitUndo();