tokka 0.4.1 → 0.4.2

package/compiler/index.d.ts

@@ -433,6 +433,10 @@ interface CSSOutput {
 }
 declare function generateCSSOutput(tokens: ResolvedToken[], system: System, options?: CSSGeneratorOptions): CSSOutput;
 
+/**
+ * Generate Tailwind v4 CSS theme configuration
+ */
+declare function generateTailwindV4CSS(tokens: ResolvedToken[], system: System): string;
 /**
  * Generate Tailwind config mapping semantic tokens to CSS vars
  */
@@ -474,4 +478,4 @@ declare function generateFigmaTokenOutput(tokens: ResolvedToken[], system: Syste
  */
 declare function compile(options: LoadOptions): Promise<CompilationResult>;
 
-export { type CSSGeneratorOptions, type CSSOutput, type CompilationContext, type CompilationError, type CompilationResult, type CompilationWarning, type FigmaTokenOutput, type LoadOptions, type LoadedTokens, type ResolvedToken, type System, type Token, type TokenFile, type TokenSource, type TokenType, type TypeScriptOutput, 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 };
+export { type CSSGeneratorOptions, type CSSOutput, type CompilationContext, type CompilationError, type CompilationResult, type CompilationWarning, type FigmaTokenOutput, type LoadOptions, type LoadedTokens, type ResolvedToken, type System, type Token, type TokenFile, type TokenSource, type TokenType, type TypeScriptOutput, buildDependencyGraph, compile, detectCycles, generateCSS, generateCSSForMode, generateCSSOutput, generateFigmaTokenOutput, generateFigmaTokens, generateTailwindConfig, generateTailwindOutput, generateTailwindV4CSS, generateTypeScript, generateTypeScriptOutput, hasSystem, hasTokens, loadSystem, loadTokens, parseColorToHSLTriplet, resolveTokens, systemSchema, tokenFileSchema, tokenIdToCSSVar, tokenSchema, tokenSourceSchema, tokenTypeSchema, topologicalSort, validateModeCoverage, validateTokenLayering, validateTokenNaming, validateTokenReferences, validateTokenUniqueness, validateTokens };

package/compiler/index.js

@@ -469,6 +469,40 @@ var SEMANTIC_TO_TAILWIND_MAPPING = {
   "border.input": "input",
   "focus.ring": "ring"
 };
+function generateTailwindV4CSS(tokens, system) {
+  const themeVars = [];
+  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) {
+        themeVars.push(`  --color-${tailwindName}: hsl(var(${cssVar}));`);
+      }
+    }
+    if (token.type === "dimension" && token.id.startsWith("space.")) {
+      const name = token.id.replace("space.", "");
+      themeVars.push(`  --spacing-${name}: var(${cssVar});`);
+    }
+    if (token.type === "radius" && token.id.startsWith("radius.")) {
+      const name = token.id.replace("radius.", "");
+      themeVars.push(`  --radius-${name}: var(${cssVar});`);
+    }
+  }
+  return `/**
+ * Tailwind CSS v4 configuration for ${system.name}
+ * Generated by tokka - do not edit directly
+ */
+@import "tailwindcss";
+
+/* Import tokka design tokens */
+@import "../dist/css/tokens.css";
+
+@theme {
+${themeVars.join("\n")}
+}
+`;
+}
 function generateTailwindConfig(tokens, _system) {
   const colors = {};
   const spacing = {};
@@ -514,11 +548,11 @@ function generateTailwindOutput(tokens, system) {
   const config = generateTailwindConfig(tokens, system);
   return `/**
  * Tailwind config for ${system.name}
- * Generated by figma-base - do not edit directly
+ * Generated by tokka - do not edit directly
  * 
  * Compatible with Tailwind CSS v3.x
  */
-export default ${JSON.stringify(config, null, 2)}
+module.exports = ${JSON.stringify(config, null, 2)}
 `;
 }
 
@@ -727,6 +761,7 @@ export {
   generateFigmaTokens,
   generateTailwindConfig,
   generateTailwindOutput,
+  generateTailwindV4CSS,
   generateTypeScript,
   generateTypeScriptOutput,
   hasSystem,

package/components/badge.tsx

@@ -13,7 +13,7 @@ const badgeVariants = cva(
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
           "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "text-foreground",
+        outline: "text-foreground border-border",
       },
     },
     defaultVariants: {

package/components/checkbox.tsx

@@ -10,7 +10,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer size-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer size-4 shrink-0 rounded-sm border border-input ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className
     )}
     {...props}

package/components/switch.tsx

@@ -8,7 +8,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted",
       className
     )}
     {...props}

package/dist/index.js

@@ -2,6 +2,7 @@
 
 // src/index.ts
 import { Command } from "commander";
+import { createRequire } from "module";
 
 // src/commands/init.ts
 import fs from "fs-extra";
@@ -87,10 +88,10 @@ Setting up ${selectedSystem.name}...
   try {
     const compilerPath = path.join(__dirname, "../compiler/index.js");
     const { compile, generateCSSOutput, generateTailwindOutput, generateTypeScriptOutput } = await import(compilerPath);
-    const result = await compile({ cwd });
-    if (result.errors.length > 0) {
+    const result2 = await compile({ cwd });
+    if (result2.errors.length > 0) {
       spinner.fail("Build failed");
-      for (const error of result.errors) {
+      for (const error of result2.errors) {
         console.error(kleur.red(`  \u2716 ${error.message}`));
       }
       process.exit(1);
@@ -98,10 +99,10 @@ Setting up ${selectedSystem.name}...
     await fs.ensureDir(path.join(cwd, "dist/css"));
     await fs.ensureDir(path.join(cwd, "dist/tailwind"));
     await fs.ensureDir(path.join(cwd, "dist/ts"));
-    const systemData = await fs.readJSON(path.join(cwd, "system.json"));
-    const cssOutput = generateCSSOutput(result.tokens, systemData);
-    const tailwindOutput = generateTailwindOutput(result.tokens, systemData);
-    const tsOutput = generateTypeScriptOutput(result.tokens, systemData);
+    const systemData2 = await fs.readJSON(path.join(cwd, "system.json"));
+    const cssOutput = generateCSSOutput(result2.tokens, systemData2);
+    const tailwindOutput = generateTailwindOutput(result2.tokens, systemData2);
+    const tsOutput = generateTypeScriptOutput(result2.tokens, systemData2);
     await fs.writeFile(path.join(cwd, "dist/css/tokens.css"), cssOutput["tokens.css"]);
     await fs.writeFile(
       path.join(cwd, "dist/tailwind/tokens.tailwind.js"),
@@ -114,9 +115,39 @@ Setting up ${selectedSystem.name}...
     console.error(kleur.red(error.message));
     process.exit(1);
   }
-  spinner.start("Creating Tailwind config...");
-  try {
-    const tailwindConfig = `/** @type {import('tailwindcss').Config} */
+  spinner.start("Detecting Tailwind CSS version...");
+  const tailwindVersion = await detectTailwindVersion(cwd);
+  const isV4 = tailwindVersion && tailwindVersion.startsWith("4");
+  const configProtected = await shouldProtectConfigs(cwd);
+  if (configProtected) {
+    spinner.warn("Config files detected - preserving your customizations");
+    console.log(kleur.dim("  Run 'tokka build' to regenerate tokens only"));
+  } else {
+    spinner.text = isV4 ? "Creating Tailwind v4 config..." : "Creating Tailwind v3 config...";
+    try {
+      if (isV4) {
+        const compilerPath = path.join(__dirname, "../compiler/index.js");
+        const { generateTailwindV4CSS } = await import(compilerPath);
+        const cssConfig = generateTailwindV4CSS(result.tokens, systemData);
+        const cssPath = await findMainCSSFile(cwd);
+        if (cssPath) {
+          await fs.writeFile(cssPath, cssConfig);
+          spinner.succeed(`Tailwind v4 config created at ${path.relative(cwd, cssPath)}`);
+        } else {
+          await fs.ensureDir(path.join(cwd, "src"));
+          await fs.writeFile(path.join(cwd, "src/index.css"), cssConfig);
+          spinner.succeed("Tailwind v4 config created at src/index.css");
+        }
+        const postcssConfig = `export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+}
+`;
+        await fs.writeFile(path.join(cwd, "postcss.config.js"), postcssConfig);
+        console.log(kleur.dim("  Using Tailwind CSS v4 (CSS-first configuration)"));
+      } else {
+        const tailwindConfig = `/** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],
   content: [
@@ -125,24 +156,27 @@ module.exports = {
     "./app/**/*.{ts,tsx}",
   ],
   theme: {
-    extend: require("./dist/tailwind/tokens.tailwind.js"),
+    extend: require("./dist/tailwind/tokens.tailwind.js").theme.extend,
   },
   plugins: [],
 }
 `;
-    await fs.writeFile(path.join(cwd, "tailwind.config.js"), tailwindConfig);
-    const postcssConfig = `module.exports = {
+        await fs.writeFile(path.join(cwd, "tailwind.config.js"), tailwindConfig);
+        const postcssConfig = `module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
   },
 }
 `;
-    await fs.writeFile(path.join(cwd, "postcss.config.js"), postcssConfig);
-    spinner.succeed("Tailwind config created (v3 format)");
-    console.log(kleur.dim("  Note: Tailwind v4 support coming soon"));
-  } catch (error) {
-    spinner.warn("Failed to create Tailwind config - please create manually");
+        await fs.writeFile(path.join(cwd, "postcss.config.js"), postcssConfig);
+        spinner.succeed("Tailwind v3 config created");
+        console.log(kleur.dim("  Note: Tailwind v4 also supported - upgrade anytime"));
+      }
+    } catch (error) {
+      spinner.warn("Failed to create Tailwind config - please create manually");
+      console.log(kleur.dim("  See docs for manual setup instructions"));
+    }
   }
   const lockFile = {
     version: "1",
@@ -192,6 +226,62 @@ async function loadSystems(systemsDir) {
   }
   return systems;
 }
+async function detectTailwindVersion(cwd) {
+  try {
+    const packageJsonPath = path.join(cwd, "package.json");
+    if (await fs.pathExists(packageJsonPath)) {
+      const packageJson = await fs.readJSON(packageJsonPath);
+      const tailwindVersion = packageJson.dependencies?.tailwindcss || packageJson.devDependencies?.tailwindcss;
+      if (tailwindVersion) {
+        const match = tailwindVersion.match(/\d+/);
+        return match ? match[0] : null;
+      }
+    }
+  } catch (error) {
+  }
+  return null;
+}
+async function shouldProtectConfigs(cwd) {
+  const tailwindConfigPath = path.join(cwd, "tailwind.config.js");
+  const postcssConfigPath = path.join(cwd, "postcss.config.js");
+  const lockPath = path.join(cwd, "tokka.lock");
+  if (!await fs.pathExists(lockPath)) {
+    return false;
+  }
+  try {
+    const lockFile = await fs.readJSON(lockPath);
+    const lockDate = new Date(lockFile.generatedAt);
+    if (await fs.pathExists(tailwindConfigPath)) {
+      const tailwindStats = await fs.stat(tailwindConfigPath);
+      if (tailwindStats.mtime > lockDate) {
+        return true;
+      }
+    }
+    if (await fs.pathExists(postcssConfigPath)) {
+      const postcssStats = await fs.stat(postcssConfigPath);
+      if (postcssStats.mtime > lockDate) {
+        return true;
+      }
+    }
+  } catch (error) {
+    return true;
+  }
+  return false;
+}
+async function findMainCSSFile(cwd) {
+  const candidates = [
+    path.join(cwd, "src/index.css"),
+    path.join(cwd, "src/main.css"),
+    path.join(cwd, "app/globals.css"),
+    path.join(cwd, "src/styles/globals.css")
+  ];
+  for (const candidate of candidates) {
+    if (await fs.pathExists(candidate)) {
+      return candidate;
+    }
+  }
+  return null;
+}
 async function createDemoApp(cwd, systemName) {
   const demoHtml = `<!DOCTYPE html>
 <html lang="en" class="light">
@@ -413,10 +503,10 @@ async function buildCommand(options) {
   try {
     const compilerPath = path3.join(__dirname3, "../compiler/index.js");
     const { compile, generateCSSOutput, generateTailwindOutput, generateTypeScriptOutput } = await import(compilerPath);
-    const result = await compile({ cwd });
-    if (result.errors.length > 0) {
+    const result2 = await compile({ cwd });
+    if (result2.errors.length > 0) {
       spinner.fail("Build failed");
-      for (const error of result.errors) {
+      for (const error of result2.errors) {
         console.error(kleur3.red(`  \u2716 ${error.message}`));
       }
       process.exit(1);
@@ -426,16 +516,16 @@ async function buildCommand(options) {
     await fs3.ensureDir(path3.join(cwd, "dist/ts"));
     const systemPath = path3.join(cwd, "system.json");
     const system = await fs3.readJSON(systemPath);
-    const cssOutput = generateCSSOutput(result.tokens, system);
-    const tailwindOutput = generateTailwindOutput(result.tokens, system);
-    const tsOutput = generateTypeScriptOutput(result.tokens, system);
+    const cssOutput = generateCSSOutput(result2.tokens, system);
+    const tailwindOutput = generateTailwindOutput(result2.tokens, system);
+    const tsOutput = generateTypeScriptOutput(result2.tokens, system);
     await fs3.writeFile(path3.join(cwd, "dist/css/tokens.css"), cssOutput["tokens.css"]);
     await fs3.writeFile(path3.join(cwd, "dist/tailwind/tokens.tailwind.js"), tailwindOutput);
     await fs3.writeFile(path3.join(cwd, "dist/ts/tokens.ts"), tsOutput["tokens.ts"]);
-    spinner.succeed(`Built ${result.tokens.length} tokens`);
-    if (result.warnings.length > 0) {
+    spinner.succeed(`Built ${result2.tokens.length} tokens`);
+    if (result2.warnings.length > 0) {
       console.log(kleur3.yellow("\nWarnings:"));
-      for (const warning of result.warnings) {
+      for (const warning of result2.warnings) {
         console.log(kleur3.yellow(`  \u26A0 ${warning.message}`));
       }
     }
@@ -515,16 +605,16 @@ async function exportCommand(target, options) {
   try {
     const compilerPath = path5.join(__dirname5, "../compiler/index.js");
     const { compile, generateFigmaTokenOutput } = await import(compilerPath);
-    const result = await compile({ cwd });
-    if (result.errors.length > 0) {
+    const result2 = await compile({ cwd });
+    if (result2.errors.length > 0) {
       spinner.fail("Export failed");
-      for (const error of result.errors) {
+      for (const error of result2.errors) {
         console.error(kleur5.red(`  \u2716 ${error.message}`));
       }
       process.exit(1);
     }
     const system = await fs5.readJSON(path5.join(cwd, "system.json"));
-    const figmaOutput = generateFigmaTokenOutput(result.tokens, system);
+    const figmaOutput = generateFigmaTokenOutput(result2.tokens, system);
     const outputDir = options.output || path5.join(cwd, "dist/figma");
     await fs5.ensureDir(outputDir);
     await fs5.writeFile(
@@ -629,14 +719,15 @@ async function enableCommand(feature) {
   console.log(kleur7.green("\u2713 Advanced mode enabled\n"));
   console.log("Advanced features now available:");
   console.log(kleur7.cyan("  \u2022 ") + "tokka validate - Strict validation");
-  console.log(kleur7.cyan("  \u2022 ") + "tokka gen types - Generate TypeScript types");
   console.log(kleur7.cyan("  \u2022 ") + "Component token catalogs (tokens/components/)");
   console.log("");
 }
 
 // src/index.ts
+var require2 = createRequire(import.meta.url);
+var pkg = require2("../package.json");
 var program = new Command();
-program.name("tokka").description("A shadcn-compatible UI foundation with a real token system").version("0.0.1");
+program.name("tokka").description("A shadcn-compatible UI foundation with a real token system").version(pkg.version);
 program.command("init").description("Initialize a new tokka project").option("-s, --system <id>", "System to use (soft-saas, corporate, dark-mode, accessible, brutalist)").option("-p, --package-manager <pm>", "Package manager to use", "pnpm").option("--no-demo", "Skip demo app creation").action(initCommand);
 program.command("add").description("Add components to your project").argument("<components...>", "Component names (button, input, card, etc.)").action(addCommand);
 program.command("build").description("Build design tokens and outputs").option("-f, --force", "Force rebuild").action(buildCommand);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tokka",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "type": "module",
   "description": "A shadcn-compatible UI foundation with a real token system and optional Figma exports",
   "bin": "./dist/index.js",