@scattered-light/loomiere 0.4.1 → 0.5.0

package/exporters/figma.mjs

@@ -7,7 +7,8 @@
  * a hidden collection, and the published collection's modes point at the right group.
  *
  * Collections, in the order they alias each other:
- *   Brand        hidden, one mode. Fonts, and a complete group of the brand's colors per theme:
+ *   Brand        hidden, one mode (published with one mode per look when the brand has looks,
+ *                so library users can switch it; no scopes either way). Fonts, and a complete group of the brand's colors per theme:
  *                default/color/…, then deuteranopia/color/… and the other color vision themes,
  *                where a color the theme doesn't change points at default's. The data colors are
  *                here by name (color/data/violet…).
@@ -171,531 +172,597 @@ export default {
   file: "figma.json",
   for: "Figma variables, text styles and effect styles (elevation and focus shadows): hidden Brand and Scale collections, and Size, Theme, Status and Emphasis, with modes for desktop, tablet and mobile, light and dark, high contrast, color vision, statuses and emphasis. Ask Claude to sync, run loomiere figma push, or import it with the Loomiere Figma plugin.",
   build(theme) {
-    const byPath = new Map(theme.tokens.map((t) => [t.path, t]));
+    const out = theme.looks?.length > 1 ? withLooks(theme) : single(theme);
+    return `${JSON.stringify(out)}\n`;
+  },
+};
 
-    // Which collection a token's variable lives in, if any.
-    const isPaletteAlias = (p) => /^color\.(accent|chrome)\./.test(p);
-    // The numbered data series are slots in Theme; the named data colors are Brand's.
-    const isDataSlot = (p) => /^color\.data\.\d+$/.test(p);
-    const home = (t) => {
-      if (!t) return null;
-      if (isDataSlot(t.path)) return null;
-      if (/^(status-level|emphasis)\./.test(t.path)) return null;
-      if (
-        t.layer === "primitive" &&
-        t.type === "color" &&
-        !t.path.startsWith("vision.") &&
-        !isPaletteAlias(t.path)
-      )
-        return "Brand";
-      if (t.path.startsWith("font-family.")) return "Brand";
-      if (t.layer === "semantic" && t.type === "color") return "Theme";
-      if (
-        t.type === "color" ||
-        t.type === "shadow" ||
-        NOT_SIZES.has(t.path.split(".")[0])
-      )
-        return null;
-      if (t.layer === "primitive")
-        return SIZE_TOPS.has(t.path.split(".")[0]) && sizes(t.value)
-          ? "Scale"
-          : null;
-      return sizes(t.value) ? "Size" : null;
-    };
-    // color.accent.* and color.chrome.* aren't variables; follow them to the palette step.
-    const follow = (p) => {
-      let t = byPath.get(p);
-      while (t && isPaletteAlias(t.path)) t = byPath.get(refOf(t.references));
-      return t;
-    };
+/** figma.json for one look: every collection with a single Brand mode, Default. */
+function single(theme) {
+  const byPath = new Map(theme.tokens.map((t) => [t.path, t]));
 
-    // Color vision themes are Light with the brand's colors swapped for the theme's own.
-    const visions = [
-      ...new Set(
-        theme.tokens
-          .filter((t) => t.path.startsWith("vision."))
-          .map((t) => t.path.split(".")[1]),
-      ),
-    ];
-    const visionMode = (v) => v[0].toUpperCase() + v.slice(1);
-    const themeModes = [...Object.keys(THEMES), ...visions.map(visionMode)];
-    const visionOf = (mode) => visions.find((v) => visionMode(v) === mode);
-    // The theme's own version of a brand color, when it differs from the brand's.
-    const visionAlt = (t, mode) => {
-      const v = visionOf(mode);
-      const alt =
-        v && home(t) === "Brand"
-          ? byPath.get(`vision.${v}.${t.path}`)
-          : undefined;
-      return alt && solve(alt.value) !== solve(t.value) ? alt : undefined;
-    };
+  // Which collection a token's variable lives in, if any.
+  const isPaletteAlias = (p) => /^color\.(accent|chrome)\./.test(p);
+  // The numbered data series are slots in Theme; the named data colors are Brand's.
+  const isDataSlot = (p) => /^color\.data\.\d+$/.test(p);
+  const home = (t) => {
+    if (!t) return null;
+    if (isDataSlot(t.path)) return null;
+    if (/^(status-level|emphasis)\./.test(t.path)) return null;
+    if (
+      t.layer === "primitive" &&
+      t.type === "color" &&
+      !t.path.startsWith("vision.") &&
+      !isPaletteAlias(t.path)
+    )
+      return "Brand";
+    if (t.path.startsWith("font-family.")) return "Brand";
+    if (t.layer === "semantic" && t.type === "color") return "Theme";
+    if (
+      t.type === "color" ||
+      t.type === "shadow" ||
+      NOT_SIZES.has(t.path.split(".")[0])
+    )
+      return null;
+    if (t.layer === "primitive")
+      return SIZE_TOPS.has(t.path.split(".")[0]) && sizes(t.value)
+        ? "Scale"
+        : null;
+    return sizes(t.value) ? "Size" : null;
+  };
+  // color.accent.* and color.chrome.* aren't variables; follow them to the palette step.
+  const follow = (p) => {
+    let t = byPath.get(p);
+    while (t && isPaletteAlias(t.path)) t = byPath.get(refOf(t.references));
+    return t;
+  };
 
-    /**
-     * The variable a reference points at in a mode: a theme mode picks the Brand group, a size
-     * mode picks the font size group.
-     */
-    const target = (p, mode = "Light") => {
-      const t = follow(p);
-      const c = home(t);
-      if (!c) return null;
-      const name = figmaName(t.path);
-      if (c === "Brand" && t.type === "color")
-        return `Brand:${visionOf(mode) ?? "default"}/${name}`;
-      if (c === "Scale" && t.path.startsWith("font-size."))
-        return `Scale:${SIZES.includes(mode) ? mode.toLowerCase() : "desktop"}/${name}`;
-      return `${c}:${name}`;
-    };
+  // Color vision themes are Light with the brand's colors swapped for the theme's own.
+  const visions = [
+    ...new Set(
+      theme.tokens
+        .filter((t) => t.path.startsWith("vision."))
+        .map((t) => t.path.split(".")[1]),
+    ),
+  ];
+  const visionMode = (v) => v[0].toUpperCase() + v.slice(1);
+  const themeModes = [...Object.keys(THEMES), ...visions.map(visionMode)];
+  const visionOf = (mode) => visions.find((v) => visionMode(v) === mode);
+  // The theme's own version of a brand color, when it differs from the brand's.
+  const visionAlt = (t, mode) => {
+    const v = visionOf(mode);
+    const alt =
+      v && home(t) === "Brand"
+        ? byPath.get(`vision.${v}.${t.path}`)
+        : undefined;
+    return alt && solve(alt.value) !== solve(t.value) ? alt : undefined;
+  };
 
-    /**
-     * A color token in a theme mode: { alias, hex } when it is one other variable, { hex } when
-     * it is math or a literal.
-     */
-    const colorIn = (p, mode) => {
-      const t = follow(p);
-      if (!t) throw new Error(`Figma export: no token ${p}`);
-      const alt = visionAlt(t, mode);
-      if (alt) return { hex: solve(alt.value) };
-      const expr =
-        home(t) === "Brand" ? (t.references ?? t.value) : expressionIn(t, mode);
-      const ref = refOf(expr);
-      if (ref) {
-        const inner = colorIn(ref, mode);
-        const alias = target(ref, mode);
-        return alias ? { alias, hex: inner.hex } : inner;
-      }
-      if (typeof expr === "string" && expr.includes("{"))
-        return {
-          hex: solve(
-            expr.replace(/\{([^}]+)\}/g, (_, r) => colorIn(r, mode).hex),
-          ),
-        };
-      return { hex: solve(expr) };
-    };
-    const value = (v) => (v.alias ? { alias: v.alias } : v.hex);
-    const variable = (name, type, values, t, extra = {}) => ({
-      name,
-      type,
-      values,
-      scopes:
-        extra.scopes ?? scopesOf(t?.path ?? name.replace(/\//g, "."), type),
-      ...(extra.code !== null && t && { code: `var(${extra.code ?? t.name})` }),
-      ...((extra.description ?? t?.description) && {
-        description: extra.description ?? t.description,
-      }),
-    });
+  /**
+   * The variable a reference points at in a mode: a theme mode picks the Brand group, a size
+   * mode picks the font size group.
+   */
+  const target = (p, mode = "Light") => {
+    const t = follow(p);
+    const c = home(t);
+    if (!c) return null;
+    const name = figmaName(t.path);
+    if (c === "Brand" && t.type === "color")
+      return `Brand:${visionOf(mode) ?? "default"}/${name}`;
+    if (c === "Scale" && t.path.startsWith("font-size."))
+      return `Scale:${SIZES.includes(mode) ? mode.toLowerCase() : "desktop"}/${name}`;
+    return `${c}:${name}`;
+  };
 
-    // Brand: fonts, then the brand's colors once per theme. Hidden, so nothing here is picked.
-    const brandColors = theme.tokens.filter(
-      (t) => home(t) === "Brand" && t.type === "color",
-    );
-    const brandVars = [];
-    for (const t of theme.tokens) {
-      if (home(t) !== "Brand" || t.type === "color") continue;
-      const family = String(t.value).split(",")[0].replace(/['"]/g, "").trim();
-      const ref = refOf(t.references);
-      brandVars.push(
-        variable(
-          figmaName(t.path),
-          "STRING",
-          { Default: ref && target(ref) ? { alias: target(ref) } : family },
-          t,
-          { scopes: [] },
-        ),
-      );
+  /**
+   * A color token in a theme mode: { alias, hex } when it is one other variable, { hex } when
+   * it is math or a literal.
+   */
+  const colorIn = (p, mode) => {
+    const t = follow(p);
+    if (!t) throw new Error(`Figma export: no token ${p}`);
+    const alt = visionAlt(t, mode);
+    if (alt) return { hex: solve(alt.value) };
+    const expr =
+      home(t) === "Brand" ? (t.references ?? t.value) : expressionIn(t, mode);
+    const ref = refOf(expr);
+    if (ref) {
+      const inner = colorIn(ref, mode);
+      const alias = target(ref, mode);
+      return alias ? { alias, hex: inner.hex } : inner;
     }
-    for (const t of brandColors)
-      brandVars.push(
-        variable(
-          `default/${figmaName(t.path)}`,
-          "COLOR",
-          { Default: value(colorIn(t.path, "Light")) },
-          t,
-          { scopes: [] },
+    if (typeof expr === "string" && expr.includes("{"))
+      return {
+        hex: solve(
+          expr.replace(/\{([^}]+)\}/g, (_, r) => colorIn(r, mode).hex),
         ),
+      };
+    return { hex: solve(expr) };
+  };
+  const value = (v) => (v.alias ? { alias: v.alias } : v.hex);
+  const variable = (name, type, values, t, extra = {}) => ({
+    name,
+    type,
+    values,
+    scopes:
+      extra.scopes ?? scopesOf(t?.path ?? name.replace(/\//g, "."), type),
+    ...(extra.code !== null && t && { code: `var(${extra.code ?? t.name})` }),
+    ...((extra.description ?? t?.description) && {
+      description: extra.description ?? t.description,
+    }),
+  });
+
+  // Brand: fonts, then the brand's colors once per theme. Hidden, so nothing here is picked.
+  const brandColors = theme.tokens.filter(
+    (t) => home(t) === "Brand" && t.type === "color",
+  );
+  const brandVars = [];
+  for (const t of theme.tokens) {
+    if (home(t) !== "Brand" || t.type === "color") continue;
+    const family = String(t.value).split(",")[0].replace(/['"]/g, "").trim();
+    const ref = refOf(t.references);
+    brandVars.push(
+      variable(
+        figmaName(t.path),
+        "STRING",
+        { Default: ref && target(ref) ? { alias: target(ref) } : family },
+        t,
+        { scopes: [] },
+      ),
+    );
+  }
+  for (const t of brandColors)
+    brandVars.push(
+      variable(
+        `default/${figmaName(t.path)}`,
+        "COLOR",
+        { Default: value(colorIn(t.path, "Light")) },
+        t,
+        { scopes: [] },
+      ),
+    );
+  for (const v of visions) {
+    for (const t of brandColors) {
+      const alt = visionAlt(t, visionMode(v));
+      const description = alt
+        ? `${t.path} in the ${visionMode(v)} theme.`
+        : `${t.path} in the ${visionMode(v)} theme: the same as default.`;
+      const values = {
+        Default: alt
+          ? solve(alt.value)
+          : { alias: `Brand:default/${figmaName(t.path)}` },
+      };
+      brandVars.push(
+        variable(`${v}/${figmaName(t.path)}`, "COLOR", values, t, {
+          scopes: [],
+          description,
+        }),
       );
-    for (const v of visions) {
-      for (const t of brandColors) {
-        const alt = visionAlt(t, visionMode(v));
-        const description = alt
-          ? `${t.path} in the ${visionMode(v)} theme.`
-          : `${t.path} in the ${visionMode(v)} theme: the same as default.`;
-        const values = {
-          Default: alt
-            ? solve(alt.value)
-            : { alias: `Brand:default/${figmaName(t.path)}` },
-        };
-        brandVars.push(
-          variable(`${v}/${figmaName(t.path)}`, "COLOR", values, t, {
-            scopes: [],
-            description,
-          }),
-        );
-      }
     }
+  }
 
-    // Scale: the raw steps. Hidden; font sizes once per size mode, so Size can switch them.
-    const scaleVars = [];
-    const fontSizes = [];
-    for (const t of theme.tokens) {
-      if (home(t) !== "Scale") continue;
-      const ref = refOf(t.references);
-      const s = sizes(t.value);
-      if (t.path.startsWith("font-size.")) {
-        fontSizes.push(t);
-        for (const m of SIZES) {
-          const alias =
-            ref && target(ref, m)?.startsWith("Scale:")
-              ? { alias: target(ref, m) }
-              : null;
-          scaleVars.push(
-            variable(
-              `${m.toLowerCase()}/${figmaName(t.path)}`,
-              "FLOAT",
-              { Default: alias ?? s[m] },
-              t,
-              {
-                scopes: [],
-                description: `${t.description ?? t.path} (${m.toLowerCase()})`,
-              },
-            ),
-          );
-        }
-      } else {
+  // Scale: the raw steps. Hidden; font sizes once per size mode, so Size can switch them.
+  const scaleVars = [];
+  const fontSizes = [];
+  for (const t of theme.tokens) {
+    if (home(t) !== "Scale") continue;
+    const ref = refOf(t.references);
+    const s = sizes(t.value);
+    if (t.path.startsWith("font-size.")) {
+      fontSizes.push(t);
+      for (const m of SIZES) {
         const alias =
-          ref && target(ref)?.startsWith("Scale:")
-            ? { alias: target(ref) }
+          ref && target(ref, m)?.startsWith("Scale:")
+            ? { alias: target(ref, m) }
             : null;
         scaleVars.push(
           variable(
-            figmaName(t.path),
+            `${m.toLowerCase()}/${figmaName(t.path)}`,
             "FLOAT",
-            { Default: alias ?? s.Desktop },
+            { Default: alias ?? s[m] },
             t,
-            { scopes: [] },
+            {
+              scopes: [],
+              description: `${t.description ?? t.path} (${m.toLowerCase()})`,
+            },
           ),
         );
       }
-    }
-
-    // Size: the font sizes, then the semantic and component sizes, fluid ones at both ends.
-    const sizeVars = fontSizes.map((t) =>
-      variable(
-        figmaName(t.path),
-        "FLOAT",
-        Object.fromEntries(SIZES.map((m) => [m, { alias: target(t.path, m) }])),
-        t,
-      ),
-    );
-    for (const t of theme.tokens) {
-      if (home(t) !== "Size") continue;
-      const ref = refOf(t.references);
-      // Figma reads a bound opacity as a percent, CSS as a fraction: 0.5 is 50 in Figma.
-      const opacity = /opacity/.test(t.path);
-      const s = opacity
-        ? Object.fromEntries(
-            Object.entries(sizes(t.value)).map(([m, n]) => [
-              m,
-              Math.round(n * 1000) / 10,
-            ]),
-          )
-        : sizes(t.value);
-      sizeVars.push(
+    } else {
+      const alias =
+        ref && target(ref)?.startsWith("Scale:")
+          ? { alias: target(ref) }
+          : null;
+      scaleVars.push(
         variable(
           figmaName(t.path),
           "FLOAT",
-          Object.fromEntries(
-            SIZES.map((m) => [
-              m,
-              ref && /^(Scale|Size):/.test(target(ref, m) ?? "")
-                ? { alias: target(ref, m) }
-                : s[m],
-            ]),
-          ),
+          { Default: alias ?? s.Desktop },
           t,
+          { scopes: [] },
         ),
       );
     }
+  }
 
-    // Theme: every semantic color in each theme mode. Scopes and pair parts are what Status points
-    // at, not what designers pick, so they get no scopes.
-    const themeTokens = theme.tokens.filter((t) => home(t) === "Theme");
-    const themeVars = themeTokens.map((t) =>
+  // Size: the font sizes, then the semantic and component sizes, fluid ones at both ends.
+  const sizeVars = fontSizes.map((t) =>
+    variable(
+      figmaName(t.path),
+      "FLOAT",
+      Object.fromEntries(SIZES.map((m) => [m, { alias: target(t.path, m) }])),
+      t,
+    ),
+  );
+  for (const t of theme.tokens) {
+    if (home(t) !== "Size") continue;
+    const ref = refOf(t.references);
+    // Figma reads a bound opacity as a percent, CSS as a fraction: 0.5 is 50 in Figma.
+    const opacity = /opacity/.test(t.path);
+    const s = opacity
+      ? Object.fromEntries(
+          Object.entries(sizes(t.value)).map(([m, n]) => [
+            m,
+            Math.round(n * 1000) / 10,
+          ]),
+        )
+      : sizes(t.value);
+    sizeVars.push(
       variable(
         figmaName(t.path),
-        "COLOR",
+        "FLOAT",
         Object.fromEntries(
-          themeModes.map((m) => [m, value(colorIn(t.path, m))]),
+          SIZES.map((m) => [
+            m,
+            ref && /^(Scale|Size):/.test(target(ref, m) ?? "")
+              ? { alias: target(ref, m) }
+              : s[m],
+          ]),
         ),
         t,
-        /^(scope|pair)\./.test(t.path) ? { scopes: [] } : {},
       ),
     );
+  }
 
-    // Data series: data/<n> points at the named data color each theme puts in that place, as
-    // --sl-color-data-<n> does in CSS.
-    const slots = theme.tokens.filter((t) => isDataSlot(t.path));
-    for (const t of slots) {
-      const n = t.path.split(".")[2];
-      const values = {};
-      for (const m of themeModes) {
-        const v = visionOf(m);
-        const slot = (v && byPath.get(`vision.${v}.color.data.${n}`)) || t;
-        const name = refOf(slot.references)?.split(".").at(-1);
-        values[m] = { alias: `Brand:${v ?? "default"}/color/data/${name}` };
-      }
-      themeVars.push(
-        variable(`data/${n}`, "COLOR", values, t, {
-          scopes: ["ALL_FILLS", "STROKE_COLOR"],
-        }),
-      );
-    }
+  // Theme: every semantic color in each theme mode. Scopes and pair parts are what Status points
+  // at, not what designers pick, so they get no scopes.
+  const themeTokens = theme.tokens.filter((t) => home(t) === "Theme");
+  const themeVars = themeTokens.map((t) =>
+    variable(
+      figmaName(t.path),
+      "COLOR",
+      Object.fromEntries(
+        themeModes.map((m) => [m, value(colorIn(t.path, m))]),
+      ),
+      t,
+      /^(scope|pair)\./.test(t.path) ? { scopes: [] } : {},
+    ),
+  );
 
-    // Status: each level's parts per status, pointing at a scope slot or a pair part in Theme.
-    const statusTokens = theme.tokens.filter((t) =>
-      t.path.startsWith("status-level."),
+  // Data series: data/<n> points at the named data color each theme puts in that place, as
+  // --sl-color-data-<n> does in CSS.
+  const slots = theme.tokens.filter((t) => isDataSlot(t.path));
+  for (const t of slots) {
+    const n = t.path.split(".")[2];
+    const values = {};
+    for (const m of themeModes) {
+      const v = visionOf(m);
+      const slot = (v && byPath.get(`vision.${v}.color.data.${n}`)) || t;
+      const name = refOf(slot.references)?.split(".").at(-1);
+      values[m] = { alias: `Brand:${v ?? "default"}/color/data/${name}` };
+    }
+    themeVars.push(
+      variable(`data/${n}`, "COLOR", values, t, {
+        scopes: ["ALL_FILLS", "STROKE_COLOR"],
+      }),
     );
-    const statuses = [
-      ...new Set(statusTokens.map((t) => t.path.split(".")[1])),
-    ];
-    const modeName = (n) => n[0].toUpperCase() + n.slice(1);
-    const roles = withDefaults(theme.brand?.roles);
-    const statusVars = [
-      ...new Set(statusTokens.map((t) => t.path.split(".").slice(2).join("."))),
-    ].map((levelPart) => {
-      const [level, part] = levelPart.split(".");
-      const values = {};
-      for (const status of statuses) {
-        const t = byPath.get(`status-level.${status}.${levelPart}`);
-        const ref = refOf(t.references);
-        values[modeName(status)] = ref
-          ? { alias: `Theme:${figmaName(ref)}` }
-          : solve(t.value);
-      }
-      // Neutral: the level's style in the chrome palette, as data-color="neutral" (palette="neutral") does in CSS.
-      const slot = STYLES[roles.emphasis[level].style][part];
-      values.Neutral =
-        slot === "transparent"
-          ? solve("transparent")
-          : { alias: `Theme:scope/chrome/${slot}` };
-      return {
-        name: `${level}/${part}`,
-        type: "COLOR",
-        values,
-        scopes: [],
-        description: `The ${part} of ${level} emphasis in each status (data-status; Neutral is data-color="neutral").`,
-      };
-    });
+  }
 
-    // Emphasis: data-emphasis. Each level is its row in Status, so it follows the status in effect.
-    const levels = [
-      ...new Set(
-        theme.tokens
-          .filter((t) => t.path.startsWith("emphasis."))
-          .map((t) => t.path.split(".")[1]),
-      ),
-    ];
-    const parts = [
-      ...new Set(
-        theme.tokens
-          .filter((t) => t.path.startsWith("emphasis."))
-          .map((t) => t.path.split(".")[2]),
-      ),
-    ];
-    const emphasisVars = parts.map((part) => ({
-      name: `emphasis/${part}`,
+  // Status: each level's parts per status, pointing at a scope slot or a pair part in Theme.
+  const statusTokens = theme.tokens.filter((t) =>
+    t.path.startsWith("status-level."),
+  );
+  const statuses = [
+    ...new Set(statusTokens.map((t) => t.path.split(".")[1])),
+  ];
+  const modeName = (n) => n[0].toUpperCase() + n.slice(1);
+  const roles = withDefaults(theme.brand?.roles);
+  const statusVars = [
+    ...new Set(statusTokens.map((t) => t.path.split(".").slice(2).join("."))),
+  ].map((levelPart) => {
+    const [level, part] = levelPart.split(".");
+    const values = {};
+    for (const status of statuses) {
+      const t = byPath.get(`status-level.${status}.${levelPart}`);
+      const ref = refOf(t.references);
+      values[modeName(status)] = ref
+        ? { alias: `Theme:${figmaName(ref)}` }
+        : solve(t.value);
+    }
+    // Neutral: the level's style in the chrome palette, as data-color="neutral" (palette="neutral") does in CSS.
+    const slot = STYLES[roles.emphasis[level].style][part];
+    values.Neutral =
+      slot === "transparent"
+        ? solve("transparent")
+        : { alias: `Theme:scope/chrome/${slot}` };
+    return {
+      name: `${level}/${part}`,
       type: "COLOR",
-      values: Object.fromEntries(
-        levels.map((level) => [
-          modeName(level),
-          { alias: `Status:${level}/${part}` },
-        ]),
-      ),
-      scopes: /border/.test(part)
-        ? ["STROKE_COLOR"]
-        : /fg/.test(part)
-          ? ["TEXT_FILL", "STROKE_COLOR"]
-          : ["FRAME_FILL", "SHAPE_FILL"],
-      code: `var(--${theme.prefix}-e-${part})`,
-      description: `The ${part} of the emphasis level (data-emphasis), in the status in effect (data-status).`,
-    }));
+      values,
+      scopes: [],
+      description: `The ${part} of ${level} emphasis in each status (data-status; Neutral is data-color="neutral").`,
+    };
+  });
 
-    // Text styles: one per text style token, following the font family and the Size font size.
-    const sizeVariable = (ref) => {
-      const t = follow(ref);
-      return ["Scale", "Size"].includes(home(t))
-        ? `Size:${figmaName(t.path)}`
-        : null;
+  // Emphasis: data-emphasis. Each level is its row in Status, so it follows the status in effect.
+  const levels = [
+    ...new Set(
+      theme.tokens
+        .filter((t) => t.path.startsWith("emphasis."))
+        .map((t) => t.path.split(".")[1]),
+    ),
+  ];
+  const parts = [
+    ...new Set(
+      theme.tokens
+        .filter((t) => t.path.startsWith("emphasis."))
+        .map((t) => t.path.split(".")[2]),
+    ),
+  ];
+  const emphasisVars = parts.map((part) => ({
+    name: `emphasis/${part}`,
+    type: "COLOR",
+    values: Object.fromEntries(
+      levels.map((level) => [
+        modeName(level),
+        { alias: `Status:${level}/${part}` },
+      ]),
+    ),
+    scopes: /border/.test(part)
+      ? ["STROKE_COLOR"]
+      : /fg/.test(part)
+        ? ["TEXT_FILL", "STROKE_COLOR"]
+        : ["FRAME_FILL", "SHAPE_FILL"],
+    code: `var(--${theme.prefix}-e-${part})`,
+    description: `The ${part} of the emphasis level (data-emphasis), in the status in effect (data-status).`,
+  }));
+
+  // Text styles: one per text style token, following the font family and the Size font size.
+  const sizeVariable = (ref) => {
+    const t = follow(ref);
+    return ["Scale", "Size"].includes(home(t))
+      ? `Size:${figmaName(t.path)}`
+      : null;
+  };
+  const styleNames = [
+    ...new Set(
+      theme.tokens
+        .filter((t) => /^font\.[^.]+\.font-size$/.test(t.path))
+        .map((t) => t.path.split(".")[1]),
+    ),
+  ];
+  const textStyles = styleNames.map((name) => {
+    const part = (p) => byPath.get(`font.${name}.${p}`);
+    const family = part("font-family");
+    const size = part("font-size");
+    const weight = Number(part("font-weight").value);
+    const lineHeight = String(part("line-height").value);
+    const letterSpacing = String(part("letter-spacing").value);
+    const transform = part("text-transform")?.value;
+    const em = letterSpacing.match(/^(-?[\d.]+)em$/);
+    const familyRef = refOf(family.references);
+    const sizeRef = refOf(size.references);
+    const font = byPath.get(`font.${name}.font`);
+    return {
+      name,
+      family: String(family.value).split(",")[0].replace(/['"]/g, "").trim(),
+      ...(familyRef &&
+        target(familyRef) && { familyVariable: target(familyRef) }),
+      weight,
+      style: WEIGHT_STYLES[weight] ?? "Regular",
+      size: sizes(size.value),
+      ...(sizeRef &&
+        sizeVariable(sizeRef) && { sizeVariable: sizeVariable(sizeRef) }),
+      lineHeight: /^[\d.]+$/.test(lineHeight)
+        ? {
+            unit: "PERCENT",
+            value: Math.round(Number(lineHeight) * 1000) / 10,
+          }
+        : { unit: "PIXELS", value: px(lineHeight) },
+      letterSpacing: em
+        ? { unit: "PERCENT", value: Math.round(Number(em[1]) * 1000) / 10 }
+        : { unit: "PIXELS", value: px(letterSpacing) ?? 0 },
+      ...(transform && {
+        textCase:
+          { uppercase: "UPPER", lowercase: "LOWER", capitalize: "TITLE" }[
+            transform
+          ] ?? "ORIGINAL",
+      }),
+      description: `${(font?.description ?? name).replace(/ As a font shorthand;.*$/, "")}\nCSS: .text-style-${name} or @sl-pattern text-${name};`,
     };
-    const styleNames = [
-      ...new Set(
-        theme.tokens
-          .filter((t) => /^font\.[^.]+\.font-size$/.test(t.path))
-          .map((t) => t.path.split(".")[1]),
-      ),
-    ];
-    const textStyles = styleNames.map((name) => {
-      const part = (p) => byPath.get(`font.${name}.${p}`);
-      const family = part("font-family");
-      const size = part("font-size");
-      const weight = Number(part("font-weight").value);
-      const lineHeight = String(part("line-height").value);
-      const letterSpacing = String(part("letter-spacing").value);
-      const transform = part("text-transform")?.value;
-      const em = letterSpacing.match(/^(-?[\d.]+)em$/);
-      const familyRef = refOf(family.references);
-      const sizeRef = refOf(size.references);
-      const font = byPath.get(`font.${name}.font`);
+  });
+
+  // Effect styles: a shadow is several values at once, so it can't be a variable. Each
+  // elevation step and focus look is an effect style; colors that are Theme tokens stay bound.
+  const colorOf = (css) => {
+    const ref = css.match(/^\{([^}]+)\}$/)?.[1];
+    if (!ref) return { hex: solve(css) };
+    return { hex: colorIn(ref, "Light").hex, variable: target(ref) };
+  };
+  const layersOf = (value, references) => {
+    const split = (v) =>
+      String(v)
+        .split(/,(?![^(]*\))/)
+        .map((x) => x.trim());
+    const refs = references ? split(references) : [];
+    return split(value).map((layer, i) => {
+      const m = layer.match(
+        /^(inset\s+)?(-?[\d.]+)(?:px)?\s+(-?[\d.]+)(?:px)?\s+(-?[\d.]+)(?:px)?(?:\s+(-?[\d.]+)(?:px)?)?\s+(.+)$/,
+      );
+      if (!m) throw new Error(`Figma export: can't read the shadow ${layer}`);
+      const colorRef = refs[i]?.match(/(\{[^}]+\})\s*$/)?.[1];
+      const color = colorOf(colorRef ?? m[6]);
       return {
-        name,
-        family: String(family.value).split(",")[0].replace(/['"]/g, "").trim(),
-        ...(familyRef &&
-          target(familyRef) && { familyVariable: target(familyRef) }),
-        weight,
-        style: WEIGHT_STYLES[weight] ?? "Regular",
-        size: sizes(size.value),
-        ...(sizeRef &&
-          sizeVariable(sizeRef) && { sizeVariable: sizeVariable(sizeRef) }),
-        lineHeight: /^[\d.]+$/.test(lineHeight)
-          ? {
-              unit: "PERCENT",
-              value: Math.round(Number(lineHeight) * 1000) / 10,
-            }
-          : { unit: "PIXELS", value: px(lineHeight) },
-        letterSpacing: em
-          ? { unit: "PERCENT", value: Math.round(Number(em[1]) * 1000) / 10 }
-          : { unit: "PIXELS", value: px(letterSpacing) ?? 0 },
-        ...(transform && {
-          textCase:
-            { uppercase: "UPPER", lowercase: "LOWER", capitalize: "TITLE" }[
-              transform
-            ] ?? "ORIGINAL",
-        }),
-        description: `${(font?.description ?? name).replace(/ As a font shorthand;.*$/, "")}\nCSS: .text-style-${name} or @sl-pattern text-${name};`,
+        type: m[1] ? "INNER_SHADOW" : "DROP_SHADOW",
+        x: Number(m[2]),
+        y: Number(m[3]),
+        blur: Number(m[4]),
+        spread: Number(m[5] ?? 0),
+        color: color.hex,
+        ...(color.variable && { colorVariable: color.variable }),
       };
     });
+  };
+  const ring = (spread, ref) => ({
+    type: "DROP_SHADOW",
+    x: 0,
+    y: 0,
+    blur: 0,
+    spread,
+    color: colorIn(ref, "Light").hex,
+    ...(target(ref) && { colorVariable: target(ref) }),
+  });
+  const pxOf = (p) =>
+    String(byPath.get(p).value)
+      .match(/-?[\d.]+/g)
+      .reduce((a, n) => a + Number(n), 0);
+  const gap = pxOf("a11y.focus-outline-offset");
+  const ringEdge = gap + pxOf("a11y.focus-outline-width");
+  const STEPS = ["xs", "sm", "base", "md", "lg", "xl", "2xl"];
+  const css = (path) =>
+    `\nCSS: var(--${theme.prefix}-${path.replace(/\./g, "-")})`;
+  const effectStyles = [
+    ...theme.tokens
+      .filter((t) => /^elevation\.[^.]+$/.test(t.path))
+      .sort(
+        (a, b) =>
+          STEPS.indexOf(a.path.split(".")[1]) -
+          STEPS.indexOf(b.path.split(".")[1]),
+      )
+      .map((t) => ({
+        name: figmaName(t.path),
+        effects: layersOf(t.value),
+        description: `${t.description ?? `Elevation ${t.path.split(".")[1]}`}.${css(t.path)}`,
+      })),
+    {
+      name: "focus/ring",
+      effects: [
+        ring(gap, "surface.canvas"),
+        ring(ringEdge, "focus.ring"),
+        ring(
+          pxOf("focus.halo-spread"),
+          refOf(byPath.get("focus.halo-color").references),
+        ),
+      ],
+      description: `Keyboard focus: a ${gap}px gap, a ${ringEdge - gap}px ring, then a soft halo. In CSS the ring is an outline, so it follows the element's corners.\nCSS: @sl-pattern focus-ring;`,
+    },
+    ...[
+      ["focus/field", "focus.shadow-3px-primary"],
+      ["focus/field-error", "focus.shadow-3px-error"],
+    ].map(([name, path]) => ({
+      name,
+      effects: layersOf(byPath.get(path).value, byPath.get(path).references),
+      description: `${byPath.get(path).description}${css(path)}`,
+    })),
+  ];
 
-    // Effect styles: a shadow is several values at once, so it can't be a variable. Each
-    // elevation step and focus look is an effect style; colors that are Theme tokens stay bound.
-    const colorOf = (css) => {
-      const ref = css.match(/^\{([^}]+)\}$/)?.[1];
-      if (!ref) return { hex: solve(css) };
-      return { hex: colorIn(ref, "Light").hex, variable: target(ref) };
-    };
-    const layersOf = (value, references) => {
-      const split = (v) =>
-        String(v)
-          .split(/,(?![^(]*\))/)
-          .map((x) => x.trim());
-      const refs = references ? split(references) : [];
-      return split(value).map((layer, i) => {
-        const m = layer.match(
-          /^(inset\s+)?(-?[\d.]+)(?:px)?\s+(-?[\d.]+)(?:px)?\s+(-?[\d.]+)(?:px)?(?:\s+(-?[\d.]+)(?:px)?)?\s+(.+)$/,
-        );
-        if (!m) throw new Error(`Figma export: can't read the shadow ${layer}`);
-        const colorRef = refs[i]?.match(/(\{[^}]+\})\s*$/)?.[1];
-        const color = colorOf(colorRef ?? m[6]);
-        return {
-          type: m[1] ? "INNER_SHADOW" : "DROP_SHADOW",
-          x: Number(m[2]),
-          y: Number(m[3]),
-          blur: Number(m[4]),
-          spread: Number(m[5] ?? 0),
-          color: color.hex,
-          ...(color.variable && { colorVariable: color.variable }),
-        };
-      });
-    };
-    const ring = (spread, ref) => ({
-      type: "DROP_SHADOW",
-      x: 0,
-      y: 0,
-      blur: 0,
-      spread,
-      color: colorIn(ref, "Light").hex,
-      ...(target(ref) && { colorVariable: target(ref) }),
-    });
-    const pxOf = (p) =>
-      String(byPath.get(p).value)
-        .match(/-?[\d.]+/g)
-        .reduce((a, n) => a + Number(n), 0);
-    const gap = pxOf("a11y.focus-outline-offset");
-    const ringEdge = gap + pxOf("a11y.focus-outline-width");
-    const STEPS = ["xs", "sm", "base", "md", "lg", "xl", "2xl"];
-    const css = (path) =>
-      `\nCSS: var(--${theme.prefix}-${path.replace(/\./g, "-")})`;
-    const effectStyles = [
-      ...theme.tokens
-        .filter((t) => /^elevation\.[^.]+$/.test(t.path))
-        .sort(
-          (a, b) =>
-            STEPS.indexOf(a.path.split(".")[1]) -
-            STEPS.indexOf(b.path.split(".")[1]),
-        )
-        .map((t) => ({
-          name: figmaName(t.path),
-          effects: layersOf(t.value),
-          description: `${t.description ?? `Elevation ${t.path.split(".")[1]}`}.${css(t.path)}`,
-        })),
+  const out = {
+    format: FORMAT,
+    version: VERSION,
+    brand: theme.brand,
+    prefix: theme.prefix,
+    collections: [
       {
-        name: "focus/ring",
-        effects: [
-          ring(gap, "surface.canvas"),
-          ring(ringEdge, "focus.ring"),
-          ring(
-            pxOf("focus.halo-spread"),
-            refOf(byPath.get("focus.halo-color").references),
-          ),
-        ],
-        description: `Keyboard focus: a ${gap}px gap, a ${ringEdge - gap}px ring, then a soft halo. In CSS the ring is an outline, so it follows the element's corners.\nCSS: @sl-pattern focus-ring;`,
+        name: "Brand",
+        modes: ["Default"],
+        hidden: true,
+        variables: brandVars,
       },
-      ...[
-        ["focus/field", "focus.shadow-3px-primary"],
-        ["focus/field-error", "focus.shadow-3px-error"],
-      ].map(([name, path]) => ({
-        name,
-        effects: layersOf(byPath.get(path).value, byPath.get(path).references),
-        description: `${byPath.get(path).description}${css(path)}`,
-      })),
-    ];
+      {
+        name: "Scale",
+        modes: ["Default"],
+        hidden: true,
+        variables: scaleVars,
+      },
+      { name: "Size", modes: SIZES, variables: sizeVars },
+      { name: "Theme", modes: themeModes, variables: themeVars },
+      {
+        name: "Status",
+        modes: [...statuses.map(modeName), "Neutral"],
+        variables: statusVars,
+      },
+      {
+        name: "Emphasis",
+        modes: levels.map(modeName),
+        variables: emphasisVars,
+      },
+    ],
+    textStyles,
+    effectStyles,
+    flat: flat(theme, byPath),
+  };
+  return out;
+}
 
-    const out = {
-      format: FORMAT,
-      version: VERSION,
-      brand: theme.brand,
-      prefix: theme.prefix,
-      collections: [
-        {
-          name: "Brand",
-          modes: ["Default"],
-          hidden: true,
-          variables: brandVars,
-        },
-        {
-          name: "Scale",
-          modes: ["Default"],
-          hidden: true,
-          variables: scaleVars,
-        },
-        { name: "Size", modes: SIZES, variables: sizeVars },
-        { name: "Theme", modes: themeModes, variables: themeVars },
-        {
-          name: "Status",
-          modes: [...statuses.map(modeName), "Neutral"],
-          variables: statusVars,
-        },
-        {
-          name: "Emphasis",
-          modes: levels.map(modeName),
-          variables: emphasisVars,
-        },
-      ],
-      textStyles,
-      effectStyles,
-      flat: flat(theme, byPath),
-    };
-    return `${JSON.stringify(out)}\n`;
-  },
-};
+/**
+ * figma.json for a brand with several looks (generator/looks.mjs). Brand has one mode per look,
+ * so one switch changes the look: its colors, data colors and fonts are Brand's, per mode. A
+ * value elsewhere that differs between looks (a Scale step, a Size pick, a Theme concept, a data
+ * series slot) can't switch with Brand's mode from its own collection, so it points at a Brand
+ * variable named look/<collection>/<mode>/<variable>, which holds each look's value. Text styles
+ * and effect styles are the brand's own look's; their fonts, sizes and Theme colors follow the
+ * look through the variables they are bound to.
+ */
+function withLooks(theme) {
+  const built = theme.looks.map((look) => ({ ...look, out: single(look.base ? theme : look.theme) }));
+  const own = built.find((l) => l.base) ?? built[0];
+  const modes = built.map((l) => l.label);
+  const index = (out) => new Map(out.collections.map((c) => [c.name, new Map(c.variables.map((v) => [v.name, v]))]));
+  const indexes = new Map(built.map((l) => [l, index(l.out)]));
+  const union = (name) => {
+    const all = new Map();
+    for (const l of built) for (const [key, v] of indexes.get(l).get(name)) if (!all.has(key)) all.set(key, v);
+    return all;
+  };
+  const same = (values) => values.every((v) => JSON.stringify(v) === JSON.stringify(values[0]));
+  const slug = (n) => n.toLowerCase().replace(/\s+/g, "-");
+
+  const brandVars = [...union("Brand")].map(([name, v]) => ({
+    ...v,
+    values: Object.fromEntries(built.map((l) => [l.label, (indexes.get(l).get("Brand").get(name) ?? v).values.Default])),
+  }));
+  const collections = own.out.collections.map((c) => {
+    // Published so files using the library can set the look; its variables keep no scopes, so
+    // they stay out of the pickers.
+    if (c.name === "Brand") return { ...c, modes, hidden: false, variables: brandVars };
+    const variables = [...union(c.name)].map(([name, v]) => {
+      const values = {};
+      for (const m of c.modes) {
+        const each = built.map((l) => (indexes.get(l).get(c.name).get(name) ?? v).values[m]);
+        if (same(each)) {
+          values[m] = each[0];
+          continue;
+        }
+        const key = `look/${slug(c.name)}/${slug(m)}/${name}`;
+        brandVars.push({
+          name: key,
+          type: v.type,
+          values: Object.fromEntries(built.map((l, i) => [l.label, each[i]])),
+          scopes: [],
+          description: `${c.name} ${name} in ${m}, in each look.`,
+        });
+        values[m] = { alias: `Brand:${key}` };
+      }
+      return { ...v, values };
+    });
+    return { ...c, variables };
+  });
+  return {
+    ...own.out,
+    looks: built.map(({ name, label, base }) => ({ name, label, ...(base && { base: true }) })),
+    collections,
+  };
+}
 
 /**
  * One mode per collection, for Figma Starter: Brand (no vision themes), Color Pair, Theme and