tokka 0.2.4 → 0.2.5

package/compiler/index.js

@@ -0,0 +1,732 @@
+// src/types.ts
+import { z } from "zod";
+var tokenTypeSchema = z.enum([
+  "color",
+  "number",
+  "dimension",
+  "radius",
+  "shadow",
+  "typography",
+  "motion",
+  "opacity",
+  "zIndex"
+]);
+var tokenSourceSchema = z.enum(["primitive", "semantic", "component"]);
+var tokenSchema = z.object({
+  id: z.string().regex(
+    /^[a-z][a-z0-9-]*(?:\.[a-z0-9][a-z0-9-]*)*$/,
+    "Token ID must be lowercase, dot-separated"
+  ),
+  type: tokenTypeSchema,
+  description: z.string(),
+  source: tokenSourceSchema,
+  value: z.any().optional(),
+  modes: z.record(z.string(), z.any()).optional(),
+  references: z.array(z.string()).optional(),
+  tags: z.array(z.string()).optional(),
+  deprecated: z.boolean().optional(),
+  replacedBy: z.string().optional(),
+  figma: z.object({
+    collection: z.string().optional(),
+    scopes: z.array(z.string()).optional(),
+    variableName: z.string().optional()
+  }).optional()
+}).refine((data) => data.value !== void 0 || data.modes !== void 0, {
+  message: "Token must have either value or modes"
+});
+var tokenFileSchema = z.object({
+  tokens: z.array(tokenSchema)
+});
+var systemSchema = z.object({
+  id: z.string().regex(/^[a-z][a-z0-9-]*$/, "System ID must be lowercase kebab-case"),
+  name: z.string(),
+  description: z.string(),
+  tags: z.array(z.string()).optional(),
+  modes: z.array(z.string()).min(1),
+  policies: z.object({
+    radius: z.enum(["sharp", "rounded", "pill"]).optional(),
+    density: z.enum(["compact", "comfortable", "spacious"]).optional(),
+    contrast: z.enum(["low", "medium", "high"]).optional(),
+    motion: z.enum(["none", "subtle", "expressive"]).optional()
+  }).optional(),
+  defaults: z.object({
+    font: z.string().optional(),
+    iconStyle: z.string().optional()
+  }).optional(),
+  figma: z.object({
+    collections: z.array(z.string()).optional()
+  }).optional()
+});
+
+// src/loader.ts
+import fs from "fs/promises";
+import path from "path";
+async function loadTokens(options) {
+  const tokensDir = options.tokensDir || path.join(options.cwd, "tokens");
+  const primitivesPath = path.join(tokensDir, "primitives.json");
+  const primitivesContent = await fs.readFile(primitivesPath, "utf-8");
+  const primitivesData = tokenFileSchema.parse(JSON.parse(primitivesContent));
+  const primitives = primitivesData.tokens;
+  const semanticsPath = path.join(tokensDir, "semantics.json");
+  const semanticsContent = await fs.readFile(semanticsPath, "utf-8");
+  const semanticsData = tokenFileSchema.parse(JSON.parse(semanticsContent));
+  const semantics = semanticsData.tokens;
+  const components = [];
+  const componentsDir = path.join(tokensDir, "components");
+  try {
+    const componentFiles = await fs.readdir(componentsDir);
+    for (const file of componentFiles) {
+      if (file.endsWith(".json")) {
+        const componentPath = path.join(componentsDir, file);
+        const componentContent = await fs.readFile(componentPath, "utf-8");
+        const componentData = tokenFileSchema.parse(JSON.parse(componentContent));
+        components.push(...componentData.tokens);
+      }
+    }
+  } catch (error) {
+  }
+  return {
+    primitives,
+    semantics,
+    components,
+    all: [...primitives, ...semantics, ...components]
+  };
+}
+async function loadSystem(options) {
+  const systemPath = path.join(options.cwd, "system.json");
+  const systemContent = await fs.readFile(systemPath, "utf-8");
+  const system = systemSchema.parse(JSON.parse(systemContent));
+  return system;
+}
+async function hasTokens(cwd) {
+  try {
+    await fs.access(path.join(cwd, "tokens"));
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function hasSystem(cwd) {
+  try {
+    await fs.access(path.join(cwd, "system.json"));
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/validator.ts
+var SEMANTIC_PREFIXES = [
+  "surface.",
+  "text.",
+  "border.",
+  "icon.",
+  "shadow.",
+  "focus.",
+  "overlay.",
+  "motion.",
+  "space.",
+  "radius.",
+  "typography."
+];
+function validateTokenNaming(tokens) {
+  const errors = [];
+  for (const token of tokens) {
+    if (token.source === "semantic") {
+      const hasValidPrefix = SEMANTIC_PREFIXES.some(
+        (prefix) => token.id.startsWith(prefix)
+      );
+      if (!hasValidPrefix) {
+        errors.push({
+          type: "naming",
+          message: `Semantic token "${token.id}" must start with one of: ${SEMANTIC_PREFIXES.join(", ")}`,
+          tokenId: token.id
+        });
+      }
+    }
+    if (token.source === "component") {
+      const parts = token.id.split(".");
+      if (parts.length < 2) {
+        errors.push({
+          type: "naming",
+          message: `Component token "${token.id}" must follow format: <component>.<property>`,
+          tokenId: token.id
+        });
+      }
+    }
+  }
+  return errors;
+}
+function validateTokenUniqueness(tokens) {
+  const errors = [];
+  const seen = /* @__PURE__ */ new Map();
+  for (const token of tokens) {
+    if (seen.has(token.id)) {
+      errors.push({
+        type: "schema",
+        message: `Duplicate token ID: "${token.id}"`,
+        tokenId: token.id
+      });
+    }
+    seen.set(token.id, token);
+  }
+  return errors;
+}
+function validateTokenReferences(tokens) {
+  const errors = [];
+  const tokenIds = new Set(tokens.map((t) => t.id));
+  for (const token of tokens) {
+    if (token.references) {
+      for (const ref of token.references) {
+        if (!tokenIds.has(ref)) {
+          errors.push({
+            type: "reference",
+            message: `Token "${token.id}" references non-existent token "${ref}"`,
+            tokenId: token.id
+          });
+        }
+      }
+    }
+  }
+  return errors;
+}
+function validateTokenLayering(tokens, strict = false) {
+  if (!strict) return [];
+  const errors = [];
+  const tokenMap = new Map(tokens.map((t) => [t.id, t]));
+  for (const token of tokens) {
+    if (!token.references || token.references.length === 0) continue;
+    if (token.source === "primitive") {
+      errors.push({
+        type: "layering",
+        message: `Primitive token "${token.id}" may not reference other tokens`,
+        tokenId: token.id
+      });
+    }
+    if (token.source === "semantic") {
+      for (const ref of token.references) {
+        const refToken = tokenMap.get(ref);
+        if (refToken && refToken.source === "component") {
+          errors.push({
+            type: "layering",
+            message: `Semantic token "${token.id}" may not reference component token "${ref}"`,
+            tokenId: token.id
+          });
+        }
+      }
+    }
+    if (token.source === "component") {
+      for (const ref of token.references) {
+        const refToken = tokenMap.get(ref);
+        if (refToken && refToken.source === "component") {
+        }
+      }
+    }
+  }
+  return errors;
+}
+function validateModeCoverage(tokens, requiredModes) {
+  const errors = [];
+  for (const token of tokens) {
+    if (token.modes) {
+      const tokenModes = Object.keys(token.modes);
+      const missingModes = requiredModes.filter((m) => !tokenModes.includes(m));
+      if (missingModes.length > 0) {
+        errors.push({
+          type: "schema",
+          message: `Token "${token.id}" missing required modes: ${missingModes.join(", ")}`,
+          tokenId: token.id
+        });
+      }
+    }
+  }
+  return errors;
+}
+function validateTokens(tokens, requiredModes, options = {}) {
+  return [
+    ...validateTokenUniqueness(tokens),
+    ...validateTokenNaming(tokens),
+    ...validateTokenReferences(tokens),
+    ...validateModeCoverage(tokens, requiredModes),
+    ...validateTokenLayering(tokens, options.strict)
+  ];
+}
+
+// src/resolver.ts
+function buildDependencyGraph(tokens) {
+  const graph = /* @__PURE__ */ new Map();
+  for (const token of tokens) {
+    graph.set(token.id, /* @__PURE__ */ new Set());
+  }
+  for (const token of tokens) {
+    if (token.references) {
+      const deps = graph.get(token.id);
+      for (const ref of token.references) {
+        deps.add(ref);
+      }
+    }
+  }
+  return graph;
+}
+function detectCycles(graph) {
+  const cycles = [];
+  const visited = /* @__PURE__ */ new Set();
+  const recursionStack = /* @__PURE__ */ new Set();
+  function dfs(node, path2) {
+    visited.add(node);
+    recursionStack.add(node);
+    path2.push(node);
+    const neighbors = graph.get(node) || /* @__PURE__ */ new Set();
+    for (const neighbor of neighbors) {
+      if (!visited.has(neighbor)) {
+        if (dfs(neighbor, path2)) {
+          return true;
+        }
+      } else if (recursionStack.has(neighbor)) {
+        const cycleStart = path2.indexOf(neighbor);
+        cycles.push([...path2.slice(cycleStart), neighbor]);
+        return true;
+      }
+    }
+    recursionStack.delete(node);
+    path2.pop();
+    return false;
+  }
+  for (const node of graph.keys()) {
+    if (!visited.has(node)) {
+      dfs(node, []);
+    }
+  }
+  return cycles;
+}
+function topologicalSort(tokens, graph) {
+  const sorted = [];
+  const visited = /* @__PURE__ */ new Set();
+  const tokenMap = new Map(tokens.map((t) => [t.id, t]));
+  function visit(tokenId) {
+    if (visited.has(tokenId)) return;
+    visited.add(tokenId);
+    const deps = graph.get(tokenId) || /* @__PURE__ */ new Set();
+    for (const dep of deps) {
+      visit(dep);
+    }
+    const token = tokenMap.get(tokenId);
+    if (token) {
+      sorted.push(token);
+    }
+  }
+  for (const token of tokens) {
+    visit(token.id);
+  }
+  return sorted;
+}
+function resolveTokens(tokens, graph) {
+  const errors = [];
+  const cycles = detectCycles(graph);
+  if (cycles.length > 0) {
+    for (const cycle of cycles) {
+      errors.push({
+        type: "cycle",
+        message: `Circular reference detected: ${cycle.join(" \u2192 ")}`,
+        tokenId: cycle[0]
+      });
+    }
+    return { resolved: [], errors };
+  }
+  const sorted = topologicalSort(tokens, graph);
+  const resolvedMap = /* @__PURE__ */ new Map();
+  for (const token of sorted) {
+    const resolved = { ...token };
+    if (token.value !== void 0) {
+      resolved.resolvedValue = resolveValue(token.value, resolvedMap);
+    }
+    if (token.modes) {
+      resolved.resolvedModes = {};
+      for (const [mode, value] of Object.entries(token.modes)) {
+        resolved.resolvedModes[mode] = resolveValue(value, resolvedMap);
+      }
+    }
+    resolvedMap.set(token.id, resolved);
+  }
+  return { resolved: Array.from(resolvedMap.values()), errors };
+}
+function resolveValue(value, resolvedMap) {
+  if (typeof value !== "string") {
+    return String(value);
+  }
+  if (value.startsWith("var(--")) {
+    const match = value.match(/var\(--([a-z][a-z0-9-]*)\)/);
+    if (match) {
+      const tokenId = match[1].replace(/-/g, ".");
+      const refToken = resolvedMap.get(tokenId);
+      if (refToken?.resolvedValue) {
+        return refToken.resolvedValue;
+      }
+    }
+  }
+  return value;
+}
+
+// src/generators/css.ts
+function tokenIdToCSSVar(id) {
+  return `--${id.replace(/\./g, "-")}`;
+}
+function parseColorToHSLTriplet(value) {
+  if (/^\d+\s+\d+%\s+\d+%$/.test(value.trim())) {
+    return value.trim();
+  }
+  const hslMatch = value.match(/hsl\(([^)]+)\)/);
+  if (hslMatch) {
+    return hslMatch[1].trim();
+  }
+  const oklchMatch = value.match(/oklch\(([^)]+)\)/);
+  if (oklchMatch) {
+    return value;
+  }
+  return value;
+}
+function generateCSSForMode(tokens, mode, options = {}) {
+  const lines = [];
+  const selector = mode === "default" ? ":root" : options.modeSelector?.strategy === "data-attribute" ? options.modeSelector.selectors?.[mode] || `[data-theme="${mode}"]` : options.modeSelector?.selectors?.[mode] || `.${mode}`;
+  lines.push(`${selector} {`);
+  for (const token of tokens) {
+    const cssVar = tokenIdToCSSVar(token.id);
+    let value;
+    if (mode === "default") {
+      value = token.resolvedValue || token.value;
+    } else if (token.resolvedModes?.[mode]) {
+      value = token.resolvedModes[mode];
+    } else if (token.modes?.[mode]) {
+      value = token.modes[mode];
+    }
+    if (value === void 0) continue;
+    if (token.type === "color") {
+      const triplet = parseColorToHSLTriplet(String(value));
+      lines.push(`  ${cssVar}: ${triplet};`);
+    } else {
+      lines.push(`  ${cssVar}: ${value};`);
+    }
+  }
+  lines.push("}");
+  return lines.join("\n");
+}
+function generateCSS(tokens, system, options = {}) {
+  const output = [];
+  output.push("/**");
+  output.push(` * Design tokens for ${system.name}`);
+  output.push(" * Generated by figma-base - do not edit directly");
+  output.push(" */");
+  output.push("");
+  const lightMode = system.modes.includes("light") ? "light" : system.modes[0];
+  output.push(generateCSSForMode(tokens, "default", options));
+  for (const mode of system.modes) {
+    if (mode !== lightMode) {
+      output.push("");
+      output.push(generateCSSForMode(tokens, mode, options));
+    }
+  }
+  return output.join("\n");
+}
+function generateCSSOutput(tokens, system, options = {}) {
+  return {
+    "tokens.css": generateCSS(tokens, system, options)
+  };
+}
+
+// src/generators/tailwind.ts
+var SEMANTIC_TO_TAILWIND_MAPPING = {
+  "surface.brand": "primary",
+  "text.on-brand": "primary-foreground",
+  "surface.secondary": "secondary",
+  "text.on-secondary": "secondary-foreground",
+  "surface.destructive": "destructive",
+  "text.on-destructive": "destructive-foreground",
+  "surface.default": "background",
+  "text.default": "foreground",
+  "surface.card": "card",
+  "text.on-card": "card-foreground",
+  "surface.popover": "popover",
+  "text.on-popover": "popover-foreground",
+  "surface.muted": "muted",
+  "text.muted": "muted-foreground",
+  "surface.accent": "accent",
+  "text.on-accent": "accent-foreground",
+  "border.default": "border",
+  "border.input": "input",
+  "focus.ring": "ring"
+};
+function generateTailwindConfig(tokens, _system) {
+  const colors = {};
+  const spacing = {};
+  const borderRadius = {};
+  const boxShadow = {};
+  for (const token of tokens) {
+    if (token.source !== "semantic") continue;
+    const cssVar = tokenIdToCSSVar(token.id);
+    if (token.type === "color") {
+      const tailwindName = SEMANTIC_TO_TAILWIND_MAPPING[token.id];
+      if (tailwindName) {
+        colors[tailwindName] = `hsl(var(${cssVar}))`;
+      } else {
+        const name = token.id.replace(/\./g, "-");
+        colors[name] = `hsl(var(${cssVar}))`;
+      }
+    }
+    if (token.type === "dimension" && token.id.startsWith("space.")) {
+      const name = token.id.replace("space.", "");
+      spacing[name] = `var(${cssVar})`;
+    }
+    if (token.type === "radius" && token.id.startsWith("radius.")) {
+      const name = token.id.replace("radius.", "");
+      borderRadius[name] = `var(${cssVar})`;
+    }
+    if (token.type === "shadow" && token.id.startsWith("shadow.")) {
+      const name = token.id.replace("shadow.", "");
+      boxShadow[name] = `var(${cssVar})`;
+    }
+  }
+  return {
+    theme: {
+      extend: {
+        colors,
+        spacing,
+        borderRadius,
+        boxShadow
+      }
+    }
+  };
+}
+function generateTailwindOutput(tokens, system) {
+  const config = generateTailwindConfig(tokens, system);
+  return `/**
+ * Tailwind config for ${system.name}
+ * Generated by figma-base - do not edit directly
+ */
+export default ${JSON.stringify(config, null, 2)}
+`;
+}
+
+// src/generators/typescript.ts
+function generateTypeScript(tokens, system) {
+  const lines = [];
+  lines.push("/**");
+  lines.push(` * Token type definitions for ${system.name}`);
+  lines.push(" * Generated by figma-base - do not edit directly");
+  lines.push(" */");
+  lines.push("");
+  lines.push("export type TokenType =");
+  lines.push('  | "color"');
+  lines.push('  | "number"');
+  lines.push('  | "dimension"');
+  lines.push('  | "radius"');
+  lines.push('  | "shadow"');
+  lines.push('  | "typography"');
+  lines.push('  | "motion"');
+  lines.push('  | "opacity"');
+  lines.push('  | "zIndex"');
+  lines.push("");
+  lines.push('export type TokenSource = "primitive" | "semantic" | "component"');
+  lines.push("");
+  lines.push("export interface Token {");
+  lines.push("  id: string");
+  lines.push("  type: TokenType");
+  lines.push("  source: TokenSource");
+  lines.push("  description: string");
+  lines.push("  value?: string");
+  lines.push("  modes?: Record<string, string>");
+  lines.push("}");
+  lines.push("");
+  lines.push("export type TokenId =");
+  tokens.forEach((token, index) => {
+    const isLast = index === tokens.length - 1;
+    lines.push(`  | "${token.id}"${isLast ? "" : ""}`);
+  });
+  lines.push("");
+  lines.push("export const tokens: Record<TokenId, Token> = {");
+  for (const token of tokens) {
+    lines.push(`  "${token.id}": {`);
+    lines.push(`    id: "${token.id}",`);
+    lines.push(`    type: "${token.type}",`);
+    lines.push(`    source: "${token.source}",`);
+    lines.push(`    description: ${JSON.stringify(token.description)},`);
+    if (token.resolvedValue) {
+      lines.push(`    value: ${JSON.stringify(token.resolvedValue)},`);
+    }
+    if (token.resolvedModes && Object.keys(token.resolvedModes).length > 0) {
+      lines.push(`    modes: {`);
+      for (const [mode, value] of Object.entries(token.resolvedModes)) {
+        lines.push(`      "${mode}": ${JSON.stringify(value)},`);
+      }
+      lines.push(`    },`);
+    }
+    lines.push(`  },`);
+  }
+  lines.push("} as const");
+  lines.push("");
+  lines.push("export function getToken(id: TokenId): Token | undefined {");
+  lines.push("  return tokens[id]");
+  lines.push("}");
+  lines.push("");
+  lines.push("export function getTokensByType(type: TokenType): Token[] {");
+  lines.push("  return Object.values(tokens).filter(t => t.type === type)");
+  lines.push("}");
+  lines.push("");
+  lines.push("export function getTokensBySource(source: TokenSource): Token[] {");
+  lines.push("  return Object.values(tokens).filter(t => t.source === source)");
+  lines.push("}");
+  return lines.join("\n");
+}
+function generateTypeScriptOutput(tokens, system) {
+  return {
+    "tokens.ts": generateTypeScript(tokens, system)
+  };
+}
+
+// src/generators/figma.ts
+function formatColorValue(value) {
+  if (/^\d+\s+\d+%\s+\d+%$/.test(value.trim())) {
+    return `hsl(${value})`;
+  }
+  return value;
+}
+function formatTokenValue(token, value) {
+  if (value.startsWith("{") && value.endsWith("}")) {
+    return value;
+  }
+  if (token.type === "color") {
+    return formatColorValue(value);
+  }
+  return value;
+}
+function generateFigmaTokens(tokens, _system) {
+  const output = {};
+  const primitiveTokens = tokens.filter((t) => t.source === "primitive");
+  const semanticTokens = tokens.filter((t) => t.source === "semantic");
+  const componentTokens = tokens.filter((t) => t.source === "component");
+  const primitiveTree = {};
+  for (const token of primitiveTokens) {
+    const parts = token.id.split(".");
+    let current = primitiveTree;
+    for (let i = 0; i < parts.length - 1; i++) {
+      if (!current[parts[i]]) {
+        current[parts[i]] = {};
+      }
+      current = current[parts[i]];
+    }
+    const lastPart = parts[parts.length - 1];
+    const rawValue = token.resolvedValue || token.value;
+    const formattedValue = formatTokenValue(token, rawValue);
+    current[lastPart] = {
+      value: formattedValue,
+      type: token.type,
+      description: token.description
+    };
+  }
+  output.global = primitiveTree;
+  const semanticTree = {};
+  for (const token of semanticTokens) {
+    const parts = token.id.split(".");
+    let current = semanticTree;
+    for (let i = 0; i < parts.length - 1; i++) {
+      if (!current[parts[i]]) {
+        current[parts[i]] = {};
+      }
+      current = current[parts[i]];
+    }
+    const lastPart = parts[parts.length - 1];
+    const rawValue = token.references && token.references.length > 0 ? `{${token.references[0]}}` : token.resolvedValue || token.value;
+    const formattedValue = formatTokenValue(token, rawValue);
+    current[lastPart] = {
+      value: formattedValue,
+      type: token.type,
+      description: token.description
+    };
+  }
+  output.semantic = semanticTree;
+  if (componentTokens.length > 0) {
+    const componentTree = {};
+    for (const token of componentTokens) {
+      const parts = token.id.split(".");
+      let current = componentTree;
+      for (let i = 0; i < parts.length - 1; i++) {
+        if (!current[parts[i]]) {
+          current[parts[i]] = {};
+        }
+        current = current[parts[i]];
+      }
+      const lastPart = parts[parts.length - 1];
+      const rawValue = token.references && token.references.length > 0 ? `{${token.references[0]}}` : token.resolvedValue || token.value;
+      const formattedValue = formatTokenValue(token, rawValue);
+      current[lastPart] = {
+        value: formattedValue,
+        type: token.type,
+        description: token.description
+      };
+    }
+    output.component = componentTree;
+  }
+  return output;
+}
+function generateFigmaTokenOutput(tokens, system) {
+  const tokensObject = generateFigmaTokens(tokens, system);
+  return {
+    "tokka.tokens.json": JSON.stringify(tokensObject, null, 2)
+  };
+}
+
+// src/index.ts
+async function compile(options) {
+  const loadedTokens = await loadTokens(options);
+  const system = await loadSystem(options);
+  const validationErrors = validateTokens(loadedTokens.all, system.modes, {
+    strict: false
+    // Tier 0 default
+  });
+  if (validationErrors.length > 0) {
+    return {
+      tokens: [],
+      errors: validationErrors,
+      warnings: []
+    };
+  }
+  const graph = buildDependencyGraph(loadedTokens.all);
+  const { resolved, errors } = resolveTokens(loadedTokens.all, graph);
+  return {
+    tokens: resolved,
+    errors,
+    warnings: []
+  };
+}
+export {
+  buildDependencyGraph,
+  compile,
+  detectCycles,
+  generateCSS,
+  generateCSSForMode,
+  generateCSSOutput,
+  generateFigmaTokenOutput,
+  generateFigmaTokens,
+  generateTailwindConfig,
+  generateTailwindOutput,
+  generateTypeScript,
+  generateTypeScriptOutput,
+  hasSystem,
+  hasTokens,
+  loadSystem,
+  loadTokens,
+  parseColorToHSLTriplet,
+  resolveTokens,
+  systemSchema,
+  tokenFileSchema,
+  tokenIdToCSSVar,
+  tokenSchema,
+  tokenSourceSchema,
+  tokenTypeSchema,
+  topologicalSort,
+  validateModeCoverage,
+  validateTokenLayering,
+  validateTokenNaming,
+  validateTokenReferences,
+  validateTokenUniqueness,
+  validateTokens
+};