@mp3wizard/figma-console-mcp 1.25.1 → 1.28.2

package/dist/cloudflare/core/tokens/formatters/scss.js

@@ -0,0 +1,252 @@
+/**
+ * SCSS variables formatter.
+ *
+ * Output shape:
+ *
+ *   // tokens.scss
+ *   $ds-color-primary: #4085F2;
+ *   $ds-spacing-md: 16px;
+ *
+ *   // map for runtime mode access
+ *   $ds-colors: (
+ *     "primary": $ds-color-primary,
+ *     ...
+ *   );
+ *
+ * Modes: SCSS doesn't have CSS's runtime cascading, so multi-mode output
+ * either emits one file per mode (splitByMode: true) or generates SCSS
+ * maps keyed by mode name that consumers can `map-get` from.
+ *
+ * Composite tokens (typography, shadow) expand into multiple primitive
+ * variables since SCSS variables hold a single value.
+ */
+export function formatScss(doc, opts) {
+    const warnings = [];
+    const files = [];
+    const splitByMode = opts.target.splitByMode ?? false;
+    const splitByCollection = opts.target.splitByCollection ?? false;
+    const prefix = opts.target.prefix ?? "";
+    if (splitByMode && splitByCollection) {
+        for (const set of doc.sets) {
+            for (const mode of set.modes) {
+                files.push({
+                    path: filenameFor(opts, set, mode),
+                    content: renderSingleMode([set], mode, prefix, warnings),
+                });
+            }
+        }
+    }
+    else if (splitByMode) {
+        const allModes = new Set();
+        for (const set of doc.sets)
+            for (const m of set.modes)
+                allModes.add(m);
+        for (const mode of allModes) {
+            const sets = doc.sets.filter((s) => s.modes.includes(mode));
+            files.push({
+                path: filenameFor(opts, undefined, mode),
+                content: renderSingleMode(sets, mode, prefix, warnings),
+            });
+        }
+    }
+    else if (splitByCollection) {
+        for (const set of doc.sets) {
+            files.push({
+                path: filenameFor(opts, set),
+                content: renderAllModes([set], prefix, warnings),
+            });
+        }
+    }
+    else {
+        files.push({
+            path: filenameFor(opts),
+            content: renderAllModes(doc.sets, prefix, warnings),
+        });
+    }
+    return { files, warnings };
+}
+function filenameFor(opts, set, mode) {
+    if (opts.target.filename)
+        return opts.target.filename;
+    const parts = [];
+    if (set)
+        parts.push(slugify(set.name));
+    if (mode)
+        parts.push(slugify(mode));
+    if (parts.length === 0)
+        parts.push("tokens");
+    return `_${parts.join(".")}.scss`;
+}
+function slugify(s) {
+    return s
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+}
+function varName(path, prefix) {
+    return `$${prefix}${path.map(slugify).join("-")}`;
+}
+function renderSingleMode(sets, mode, prefix, warnings) {
+    const lines = [];
+    lines.push("// Generated by figma-console-mcp — do not edit by hand");
+    lines.push(`// Mode: ${mode}`);
+    lines.push("");
+    for (const set of sets) {
+        if (!set.modes.includes(mode))
+            continue;
+        lines.push(`// — ${set.name} —`);
+        for (const token of set.tokens) {
+            const value = token.values[mode];
+            if (!value)
+                continue;
+            emitSassLines(token, value, prefix, lines, warnings);
+        }
+        lines.push("");
+    }
+    return lines.join("\n");
+}
+function renderAllModes(sets, prefix, warnings) {
+    const lines = [];
+    lines.push("// Generated by figma-console-mcp — do not edit by hand");
+    lines.push("");
+    // For multi-mode sets, emit a primary variable + a mode-keyed map.
+    // Single-mode sets emit straight variables.
+    for (const set of sets) {
+        lines.push(`// — ${set.name} —`);
+        const isMultiMode = set.modes.length > 1;
+        const primaryMode = pickPrimaryMode(set.modes);
+        for (const token of set.tokens) {
+            // Primary value as the bare variable.
+            const primary = token.values[primaryMode];
+            if (primary)
+                emitSassLines(token, primary, prefix, lines, warnings);
+            // Other modes as a map: $ds-color-primary--modes: ("Dark": #..., "Vibrant": #...)
+            if (isMultiMode) {
+                const otherModes = set.modes.filter((m) => m !== primaryMode);
+                const entries = [];
+                for (const mode of otherModes) {
+                    const v = token.values[mode];
+                    if (!v)
+                        continue;
+                    const formatted = scssValueFor(v, token, prefix, warnings);
+                    if (formatted !== null) {
+                        entries.push(`  "${mode}": ${formatted}`);
+                    }
+                }
+                if (entries.length > 0) {
+                    const mapName = `${varName(token.path, prefix)}--modes`;
+                    lines.push(`${mapName}: (`);
+                    lines.push(entries.join(",\n"));
+                    lines.push(`);`);
+                }
+            }
+        }
+        lines.push("");
+    }
+    return lines.join("\n");
+}
+function pickPrimaryMode(modes) {
+    return modes.find((m) => /^(default|light|value)$/i.test(m)) ?? modes[0];
+}
+function emitSassLines(token, value, prefix, out, warnings) {
+    const sassName = varName(token.path, prefix);
+    if (value.reference) {
+        const bareRef = value.reference.replace(/^\{|\}$/g, "");
+        const libMatch = bareRef.match(/^__library:(.+)$/);
+        if (libMatch || bareRef === "unknown") {
+            const originalId = libMatch ? libMatch[1] : "unknown";
+            warnings.push(`Skipped ${token.path.join(".")} in SCSS — cross-library variable ${originalId}.`);
+            out.push(`// ${sassName}: skipped — cross-library alias to ${originalId}`);
+            return;
+        }
+        const refPath = bareRef.split(".");
+        out.push(`${sassName}: ${varName(refPath, prefix)};`);
+        return;
+    }
+    if (value.literal === undefined || value.literal === null) {
+        warnings.push(`Token ${token.path.join(".")} has no value.`);
+        return;
+    }
+    if (token.type === "typography" && typeof value.literal === "object") {
+        const t = value.literal;
+        for (const sub of ["fontFamily", "fontSize", "fontWeight", "lineHeight", "letterSpacing"]) {
+            if (t[sub] !== undefined) {
+                out.push(`${sassName}-${kebab(sub)}: ${formatScssLiteral(t[sub], token.type)};`);
+            }
+        }
+        return;
+    }
+    if (token.type === "shadow" && typeof value.literal === "object") {
+        const css = renderShadow(value.literal);
+        if (css)
+            out.push(`${sassName}: ${css};`);
+        return;
+    }
+    out.push(`${sassName}: ${formatScssLiteral(value.literal, token.type)};`);
+}
+function scssValueFor(value, token, prefix, _warnings) {
+    if (value.reference) {
+        const bareRef = value.reference.replace(/^\{|\}$/g, "");
+        if (bareRef.startsWith("__library:") || bareRef === "unknown")
+            return null;
+        return varName(bareRef.split("."), prefix);
+    }
+    if (value.literal === undefined || value.literal === null)
+        return null;
+    return formatScssLiteral(value.literal, token.type);
+}
+function kebab(s) {
+    return s.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function formatScssLiteral(value, type) {
+    if (typeof value === "number") {
+        if (type === "dimension")
+            return `${value}px`;
+        return String(value);
+    }
+    if (typeof value === "string") {
+        if (type === "color")
+            return value;
+        if (type === "fontFamily" || type === "string") {
+            return needsQuoting(value) ? JSON.stringify(value) : value;
+        }
+        return value;
+    }
+    if (typeof value === "boolean")
+        return String(value);
+    return JSON.stringify(value);
+}
+function needsQuoting(s) {
+    if (/^["']/.test(s))
+        return false;
+    if (/^[\d.]+([a-z%]+)?$/.test(s))
+        return false;
+    if (/^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(s))
+        return false;
+    return true;
+}
+function renderShadow(shadow) {
+    if (Array.isArray(shadow)) {
+        return shadow.map(renderShadow).filter(Boolean).join(", ");
+    }
+    if (!shadow || typeof shadow !== "object")
+        return null;
+    const s = shadow;
+    const inset = s.inset ? "inset " : "";
+    const x = withPx(s.offsetX);
+    const y = withPx(s.offsetY);
+    const blur = withPx(s.blur);
+    const spread = s.spread !== undefined ? ` ${withPx(s.spread)}` : "";
+    const color = s.color;
+    if (!x || !y || !blur || typeof color !== "string")
+        return null;
+    return `${inset}${x} ${y} ${blur}${spread} ${color}`;
+}
+function withPx(v) {
+    if (typeof v === "number")
+        return `${v}px`;
+    if (typeof v === "string")
+        return v;
+    return "";
+}

package/dist/cloudflare/core/tokens/formatters/stubs.js

@@ -0,0 +1,13 @@
+/**
+ * Shared NotImplementedError used by formatter stubs. Most formatters are
+ * implemented end-to-end as of v1.28.0; this stub remains for niche targets
+ * (e.g. Less) that haven't drawn enough demand to warrant implementation.
+ */
+export class FormatterNotImplementedError extends Error {
+    constructor(formatName) {
+        super(`[figma-console-mcp] The ${formatName} formatter is not implemented. ` +
+            `Currently supported formatters: dtcg, css-vars, tailwind-v4, tailwind-v3, scss, ts-module, json-flat, json-nested, style-dictionary-v3, tokens-studio. ` +
+            `If you need ${formatName} support, open an issue with your use case so we can prioritize it.`);
+        this.name = "FormatterNotImplementedError";
+    }
+}

package/dist/cloudflare/core/tokens/formatters/style-dictionary-v3.js

@@ -0,0 +1,207 @@
+/**
+ * Style Dictionary v3 source-format JSON formatter.
+ *
+ * SD v3 uses bare `value` / `type` fields (no `$` prefix, that's the DTCG
+ * convention SD v4 adopted). Output is structurally similar to DTCG but
+ * without the dollar signs, and groups have no special meta — just
+ * nested objects.
+ *
+ * Output shape:
+ *
+ *   {
+ *     "color": {
+ *       "primary": {
+ *         "value": "#4085F2",
+ *         "type": "color",
+ *         "comment": "Primary brand color"
+ *       },
+ *       "brand": {
+ *         "blue": { "value": "#0066FF", "type": "color" }
+ *       }
+ *     },
+ *     "spacing": {
+ *       "md": { "value": "16px", "type": "size" }
+ *     }
+ *   }
+ *
+ * SD v3 type names differ slightly from DTCG:
+ *
+ *   DTCG type    →  SD v3 type
+ *   ----------------------------
+ *   dimension    →  size (or spacing for spacing tokens)
+ *   color        →  color
+ *   fontFamily   →  string
+ *   fontWeight   →  number
+ *
+ * Aliases use SD v3's `{path.to.token}` syntax (same as DTCG, which copied
+ * it from SD).
+ *
+ * For back-compat with cbds-components / blocks / czi-edu / eddie-design-system
+ * which still use SD v3's bare-key source format.
+ */
+export function formatStyleDictionaryV3(doc, opts) {
+    const warnings = [];
+    const files = [];
+    const splitByMode = opts.target.splitByMode ?? false;
+    const splitByCollection = opts.target.splitByCollection ?? false;
+    if (splitByMode && splitByCollection) {
+        for (const set of doc.sets) {
+            for (const mode of set.modes) {
+                files.push({
+                    path: filenameFor(opts, set, mode),
+                    content: renderSdJson([set], [mode], warnings),
+                });
+            }
+        }
+    }
+    else if (splitByMode) {
+        const allModes = new Set();
+        for (const set of doc.sets)
+            for (const m of set.modes)
+                allModes.add(m);
+        for (const mode of allModes) {
+            const sets = doc.sets.filter((s) => s.modes.includes(mode));
+            files.push({
+                path: filenameFor(opts, undefined, mode),
+                content: renderSdJson(sets, [mode], warnings),
+            });
+        }
+    }
+    else if (splitByCollection) {
+        for (const set of doc.sets) {
+            files.push({
+                path: filenameFor(opts, set),
+                content: renderSdJson([set], set.modes, warnings),
+            });
+        }
+    }
+    else {
+        const allModes = new Set();
+        for (const set of doc.sets)
+            for (const m of set.modes)
+                allModes.add(m);
+        files.push({
+            path: filenameFor(opts),
+            content: renderSdJson(doc.sets, [...allModes], warnings),
+        });
+    }
+    return { files, warnings };
+}
+function filenameFor(opts, set, mode) {
+    if (opts.target.filename)
+        return opts.target.filename;
+    const parts = [];
+    if (set)
+        parts.push(slugify(set.name));
+    if (mode)
+        parts.push(slugify(mode));
+    if (parts.length === 0)
+        parts.push("tokens");
+    return `${parts.join(".")}.sd.json`;
+}
+function slugify(s) {
+    return s
+        .trim()
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+}
+/**
+ * Map DTCG type names to SD v3 conventions.
+ */
+function sdTypeFor(token) {
+    const lower = token.path[0]?.toLowerCase() ?? "";
+    if (token.type === "dimension") {
+        if (lower.startsWith("spacing") || lower === "space")
+            return "spacing";
+        return "size";
+    }
+    if (token.type === "color")
+        return "color";
+    if (token.type === "fontFamily")
+        return "string";
+    if (token.type === "fontWeight")
+        return "number";
+    if (token.type === "duration")
+        return "time";
+    if (token.type === "number")
+        return "number";
+    if (token.type === "string")
+        return "string";
+    if (token.type === "boolean")
+        return "boolean";
+    // Composites / less-common types: pass through.
+    return token.type;
+}
+function renderSdJson(sets, modes, warnings) {
+    const tree = {};
+    const primaryMode = pickPrimaryMode(modes);
+    for (const set of sets) {
+        for (const token of set.tokens) {
+            // Filter to modes the file is supposed to cover.
+            const usableModes = modes.filter((m) => token.values[m]);
+            if (usableModes.length === 0)
+                continue;
+            // SD v3 has no native multi-mode encoding, so we pick the primary
+            // mode's value. If splitByMode is being used (single mode in this
+            // file), that primary will match the file's mode. Otherwise, the
+            // chosen primary is the first available.
+            const valueMode = usableModes.includes(primaryMode)
+                ? primaryMode
+                : usableModes[0];
+            const tokenValue = token.values[valueMode];
+            const sdValue = sdValueFor(tokenValue, token, warnings);
+            if (sdValue === undefined)
+                continue;
+            // Walk the path, creating nested groups.
+            let cursor = tree;
+            for (let i = 0; i < token.path.length - 1; i++) {
+                const segment = token.path[i];
+                if (!cursor[segment] || typeof cursor[segment] !== "object") {
+                    cursor[segment] = {};
+                }
+                cursor = cursor[segment];
+            }
+            const leafKey = token.path[token.path.length - 1];
+            const leaf = {
+                value: sdValue,
+                type: sdTypeFor(token),
+            };
+            if (token.description)
+                leaf.comment = token.description;
+            cursor[leafKey] = leaf;
+        }
+    }
+    return JSON.stringify(sortKeys(tree), null, 2) + "\n";
+}
+function pickPrimaryMode(modes) {
+    return modes.find((m) => /^(default|light|value)$/i.test(m)) ?? modes[0];
+}
+function sdValueFor(value, token, warnings) {
+    if (value.reference) {
+        const bare = value.reference.replace(/^\{|\}$/g, "");
+        if (bare.startsWith("__library:") || bare === "unknown") {
+            warnings.push(`Skipped ${token.path.join(".")} in Style Dictionary v3 — cross-library alias unresolved.`);
+            return undefined;
+        }
+        // SD v3 uses the same `{path.to.token}` alias syntax as DTCG.
+        return `{${bare}}`;
+    }
+    if (value.literal === undefined || value.literal === null)
+        return undefined;
+    if (typeof value.literal === "number" && token.type === "dimension") {
+        return `${value.literal}px`;
+    }
+    return value.literal;
+}
+function sortKeys(node) {
+    if (node === null || typeof node !== "object" || Array.isArray(node)) {
+        return node;
+    }
+    const obj = node;
+    const sorted = {};
+    const keys = Object.keys(obj).sort();
+    for (const k of keys)
+        sorted[k] = sortKeys(obj[k]);
+    return sorted;
+}