@multiplatform.one/theme 7.83.1 → 7.84.0

package/dist/cjs/figma/figmaTokens.cjs

@@ -0,0 +1,350 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var figmaTokens_exports = {};
+__export(figmaTokens_exports, {
+  FIGMA_CORNER_SMOOTHING: () => FIGMA_CORNER_SMOOTHING,
+  FIGMA_THEME_MODES: () => FIGMA_THEME_MODES,
+  buildFigmaTokens: () => buildFigmaTokens,
+  figmaTokenName: () => figmaTokenName
+});
+module.exports = __toCommonJS(figmaTokens_exports);
+var import_web = require("@tamagui/web");
+var import_createThemes = require("../theme/createThemes.cjs");
+var import_accent = require("../theme/defaults/accent.cjs");
+var import_base = require("../theme/defaults/base.cjs");
+var import_builderOptions = require("../theme/defaults/builderOptions.cjs");
+var import_fonts = require("../theme/defaults/fonts.cjs");
+var import_knobs = require("../theme/knobs.cjs");
+var import_resolveKnobs = require("../theme/resolveKnobs.cjs");
+var import_generateScale = require("../theme/scale/generateScale.cjs");
+var import_scaleInputs = require("../theme/scale/scaleInputs.cjs");
+const tokens = (0, import_web.createTokens)((0, import_generateScale.generateScale)(import_scaleInputs.defaultScaleInputs).tokens);
+const FIGMA_THEME_MODES = ["base", "accent", "error", "success", "warning", "orange", "blue", "purple", "pink"];
+const FIGMA_CORNER_SMOOTHING = {
+  round: 0,
+  smooth: 0.6
+};
+function figmaTokenName(prefix, key) {
+  return `${prefix}-${String(key).replace(/\./g, "-")}`;
+}
+function unwrapTokenGroup(group) {
+  const out = {};
+  if (!group) return out;
+  for (const [key, wrapper] of Object.entries(group)) {
+    const val = wrapper && typeof wrapper === "object" && "val" in wrapper ? wrapper.val : wrapper;
+    if (typeof val === "number") out[key] = val;
+  }
+  return out;
+}
+function ramp(themes, themeName, scheme) {
+  const key = themeName === "base" ? scheme : `${scheme}_${themeName}`;
+  const theme = themes[key];
+  if (!theme) throw new Error(`figmaTokens: built themes are missing "${key}"`);
+  const steps = [];
+  for (let i = 1; i <= 12; i++) {
+    const value = theme[`color${i}`];
+    if (typeof value !== "string") {
+      throw new Error(`figmaTokens: theme "${key}" is missing color${i}`);
+    }
+    steps.push(value);
+  }
+  return steps;
+}
+function shadowsOf(themes, scheme) {
+  const theme = themes[scheme];
+  const out = {};
+  for (let i = 1; i <= 6; i++) {
+    const value = theme?.[`shadow${i}`];
+    if (typeof value !== "string") {
+      throw new Error(`figmaTokens: base "${scheme}" theme is missing shadow${i}`);
+    }
+    out[`shadow${i}`] = value;
+  }
+  return out;
+}
+const RAMP_STEP_RE = /^color([1-9]|1[0-2])$/;
+const SHADOW_RE = /^shadow[1-6]$/;
+const HUE_STEP_RE = new RegExp(`^(${[...import_createThemes.tintHueNames].join("|")})A?\\d+$`);
+function stepAliasFor(theme, value) {
+  for (let i = 1; i <= 12; i++) {
+    if (theme[`color${i}`] === value) return `color${i}`;
+  }
+  return null;
+}
+function deriveSemantic(themes) {
+  const light = themes.light;
+  const dark = themes.dark;
+  if (!light || !dark) throw new Error("figmaTokens: base light/dark themes missing");
+  const out = {};
+  const keys = Object.keys(light).filter(key => !RAMP_STEP_RE.test(key) && !SHADOW_RE.test(key) && !HUE_STEP_RE.test(key)).filter(key => typeof light[key] === "string" && typeof dark[key] === "string").sort();
+  for (const key of keys) {
+    const lightValue = light[key];
+    const darkValue = dark[key];
+    const lightAlias = stepAliasFor(light, lightValue);
+    const darkAlias = stepAliasFor(dark, darkValue);
+    const alias = lightAlias !== null && lightAlias === darkAlias ? lightAlias : null;
+    out[key] = {
+      alias,
+      light: lightValue,
+      dark: darkValue
+    };
+  }
+  return out;
+}
+function textTierEntries(themes) {
+  const light = themes.light;
+  const dark = themes.dark;
+  const out = {};
+  for (const tier of ["low", "medium", "high"]) {
+    const resolved = (0, import_resolveKnobs.resolveKnobs)({
+      ...import_knobs.defaultKnobs,
+      textAccent: tier
+    });
+    const token = String(resolved.knobProps.textAccentColor).replace(/^\$/, "");
+    const lightValue = light[token];
+    const darkValue = dark[token];
+    if (typeof lightValue !== "string" || typeof darkValue !== "string") {
+      throw new Error(`figmaTokens: textAccent "${tier}" resolved to unknown token $${token}`);
+    }
+    const lightAlias = stepAliasFor(light, lightValue);
+    const darkAlias = stepAliasFor(dark, darkValue);
+    const alias = lightAlias !== null && lightAlias === darkAlias ? lightAlias : null;
+    out[`text-${tier}`] = {
+      alias,
+      light: lightValue,
+      dark: darkValue
+    };
+  }
+  return out;
+}
+function buildSizing(borderWidthModes) {
+  const sizing = {};
+  const groups = [["size", unwrapTokenGroup(tokens.size)], ["space", unwrapTokenGroup(tokens.space)], ["radius", unwrapTokenGroup(tokens.radius)], ["zIndex", unwrapTokenGroup(tokens.zIndex)]];
+  for (const [prefix, group] of groups) {
+    if (prefix !== "zIndex" && Object.keys(group).length === 0) {
+      throw new Error(`figmaTokens: generated tokens.${prefix} is empty`);
+    }
+    for (const [key, val] of Object.entries(group)) {
+      sizing[figmaTokenName(prefix, key)] = val;
+    }
+  }
+  for (const [mode, px] of Object.entries(borderWidthModes)) {
+    sizing[`borderWidth-${mode}`] = px;
+  }
+  return sizing;
+}
+const RADIUS_KNOB_MODES = ["none", "small", "medium", "large", "full"];
+const BORDER_WIDTH_KNOB_MODES = ["none", "small", "medium", "large"];
+const ELEVATION_KNOB_MODES = ["none", "small", "medium", "large"];
+const FONT_WEIGHT_KNOB_MODES = ["regular", "bold"];
+function radiusPx(token) {
+  const radius = unwrapTokenGroup(tokens.radius);
+  const key = token.replace(/^\$/, "");
+  const px = radius[key];
+  if (typeof px !== "number") throw new Error(`figmaTokens: unknown radius token ${token}`);
+  return px;
+}
+function tokenToFigma(token, prefix) {
+  return figmaTokenName(prefix, token.replace(/^\$/, ""));
+}
+function normalizeElevation(value) {
+  if (value === void 0) return {
+    sizeToken: null,
+    px: null
+  };
+  const size = unwrapTokenGroup(tokens.size);
+  if (typeof value === "string") {
+    const key = value.replace(/^\$/, "");
+    const px = size[key];
+    if (typeof px !== "number") throw new Error(`figmaTokens: unknown size token ${value}`);
+    return {
+      sizeToken: value,
+      px
+    };
+  }
+  const entry = Object.entries(size).find(([key, px]) => px === value && key !== "true");
+  return {
+    sizeToken: entry ? `$${entry[0]}` : null,
+    px: value
+  };
+}
+function buildKnobs() {
+  const borderRadius = {};
+  for (const mode of RADIUS_KNOB_MODES) {
+    const {
+      knobProps
+    } = (0, import_resolveKnobs.resolveKnobs)({
+      ...import_knobs.defaultKnobs,
+      borderRadius: mode
+    });
+    const token = String(knobProps.borderRadius.borderRadius);
+    const outerToken = String(knobProps.borderRadiusNested.borderRadius);
+    borderRadius[mode] = {
+      token,
+      figmaName: tokenToFigma(token, "radius"),
+      px: radiusPx(token),
+      outerToken,
+      outerFigmaName: tokenToFigma(outerToken, "radius"),
+      outerPx: radiusPx(outerToken)
+    };
+  }
+  const borderWidth = {};
+  for (const mode of BORDER_WIDTH_KNOB_MODES) {
+    const {
+      knobProps
+    } = (0, import_resolveKnobs.resolveKnobs)({
+      ...import_knobs.defaultKnobs,
+      borderWidth: mode
+    });
+    borderWidth[mode] = Number(knobProps.borderRadius.borderWidth);
+  }
+  const elevation = {};
+  for (const mode of ELEVATION_KNOB_MODES) {
+    const {
+      knobProps
+    } = (0, import_resolveKnobs.resolveKnobs)({
+      ...import_knobs.defaultKnobs,
+      elevation: mode
+    });
+    elevation[mode] = normalizeElevation(knobProps.elevation);
+  }
+  const fontWeight = {};
+  for (const mode of FONT_WEIGHT_KNOB_MODES) {
+    const {
+      knobProps
+    } = (0, import_resolveKnobs.resolveKnobs)({
+      ...import_knobs.defaultKnobs,
+      fontWeight: mode
+    });
+    fontWeight[mode] = String(knobProps.textWeight.fontWeight);
+  }
+  const spacing = {};
+  for (const [role, token] of Object.entries(import_resolveKnobs.spacingRoles)) {
+    spacing[role] = {
+      token,
+      figmaName: tokenToFigma(token, "space")
+    };
+  }
+  const sizeToken = String((0, import_resolveKnobs.resolveKnobs)(import_knobs.defaultKnobs).knobProps.sizeToken);
+  return {
+    borderRadius: {
+      default: import_knobs.defaultKnobs.borderRadius,
+      modes: borderRadius
+    },
+    borderWidth: {
+      default: import_knobs.defaultKnobs.borderWidth,
+      modes: borderWidth
+    },
+    elevation: {
+      default: import_knobs.defaultKnobs.elevation,
+      modes: elevation
+    },
+    fontWeight: {
+      default: import_knobs.defaultKnobs.fontWeight,
+      modes: fontWeight
+    },
+    cornerSmoothing: {
+      default: import_knobs.defaultKnobs.cornerSmoothing ?? "round",
+      modes: {
+        ...FIGMA_CORNER_SMOOTHING
+      }
+    },
+    spacing,
+    sizeToken: {
+      token: sizeToken,
+      figmaName: tokenToFigma(sizeToken, "size")
+    }
+  };
+}
+function numberTable(table, label) {
+  const out = {};
+  if (!table) throw new Error(`figmaTokens: font is missing ${label} table`);
+  for (const [key, value] of Object.entries(table)) {
+    const num = typeof value === "number" ? value : Number(value);
+    if (Number.isFinite(num)) out[key] = num;
+  }
+  if (Object.keys(out).length === 0) throw new Error(`figmaTokens: ${label} table is empty`);
+  return out;
+}
+function exportFont(font, label) {
+  const weight = {};
+  for (const [key, value] of Object.entries(font.weight ?? {})) {
+    weight[key] = String(value);
+  }
+  return {
+    family: String(font.family ?? ""),
+    size: numberTable(font.size, `${label}.size`),
+    lineHeight: numberTable(font.lineHeight, `${label}.lineHeight`),
+    letterSpacing: numberTable(font.letterSpacing, `${label}.letterSpacing`),
+    weight
+  };
+}
+function firstFamily(stack) {
+  const first = stack.split(",")[0] ?? stack;
+  return first.trim().replace(/^['"]|['"]$/g, "");
+}
+function buildFigmaTokens(options = {}) {
+  const themes = (0, import_createThemes.createThemesBuilder)(import_base.defaultBaseTheme, import_accent.defaultAccentTheme, import_builderOptions.defaultBuilderOptions).themes();
+  const paletteThemes = {};
+  for (const mode of FIGMA_THEME_MODES) {
+    paletteThemes[mode] = {
+      light: ramp(themes, mode, "light"),
+      dark: ramp(themes, mode, "dark")
+    };
+  }
+  const semantic = {
+    ...deriveSemantic(themes),
+    ...textTierEntries(themes)
+  };
+  const knobs = buildKnobs();
+  const sizing = buildSizing(knobs.borderWidth.modes);
+  const categories = {};
+  for (const [category, stack] of Object.entries(options.fontFamilies ?? {})) {
+    categories[category] = {
+      stack,
+      figmaFamily: firstFamily(stack)
+    };
+  }
+  return {
+    $meta: {
+      generator: "public/theme/src/figma/figmaTokens.ts (buildFigmaTokens)",
+      spec: "agent-os/specs/2026-05-08-figma-v2-token-migration",
+      note: "Generated projection of the canonical theme/knob system. Do not edit by hand \u2014 rerun `pnpm exec tsx scripts/export-figma-tokens.mts`."
+    },
+    palette: {
+      themes: paletteThemes,
+      shadows: {
+        light: shadowsOf(themes, "light"),
+        dark: shadowsOf(themes, "dark")
+      }
+    },
+    semantic,
+    sizing,
+    knobs,
+    typography: {
+      heading: exportFont(import_fonts.defaultHeadingFont, "heading"),
+      body: exportFont(import_fonts.defaultBodyFont, "body"),
+      categories
+    }
+  };
+}