tokka 0.3.1 → 0.4.1

package/compiler/index.d.ts

@@ -403,11 +403,7 @@ declare function resolveTokens(tokens: Token[], graph: Map<string, Set<string>>)
 interface CSSGeneratorOptions {
     modeSelector?: {
         strategy: "class" | "data-attribute";
-        selectors?: {
-            light: string;
-            dark: string;
-            [key: string]: string;
-        };
+        selectors?: Record<string, string>;
     };
 }
 /**
@@ -443,6 +439,9 @@ declare function generateCSSOutput(tokens: ResolvedToken[], system: System, opti
 declare function generateTailwindConfig(tokens: ResolvedToken[], _system: System): Record<string, any>;
 /**
  * Generate Tailwind config file content
+ *
+ * Note: This generates a Tailwind CSS v3-compatible config.
+ * Tailwind v4 support (CSS-first configuration) is planned for a future update.
  */
 declare function generateTailwindOutput(tokens: ResolvedToken[], system: System): string;
 

package/compiler/index.js

@@ -419,24 +419,25 @@ function generateCSS(tokens, system, options = {}) {
   output.push(" * Generated by figma-base - do not edit directly");
   output.push(" */");
   output.push("");
-  const lightMode = system.modes.includes("light") ? "light" : system.modes[0];
+  const defaultMode = system.modes[0];
+  const nonDefaultModes = system.modes.slice(1);
   const rootOptions = {
     ...options,
     modeSelector: {
       strategy: "class",
       selectors: {
-        light: ":root",
-        dark: `.dark`,
+        ...system.modes.reduce((acc, mode) => {
+          acc[mode] = mode === defaultMode ? ":root" : `.${mode}`;
+          return acc;
+        }, {}),
         ...options.modeSelector?.selectors || {}
       }
     }
   };
-  output.push(generateCSSForMode(tokens, lightMode, rootOptions));
-  for (const mode of system.modes) {
-    if (mode !== lightMode) {
-      output.push("");
-      output.push(generateCSSForMode(tokens, mode, options));
-    }
+  output.push(generateCSSForMode(tokens, defaultMode, rootOptions));
+  for (const mode of nonDefaultModes) {
+    output.push("");
+    output.push(generateCSSForMode(tokens, mode, options));
   }
   return output.join("\n");
 }
@@ -514,6 +515,8 @@ function generateTailwindOutput(tokens, system) {
   return `/**
  * Tailwind config for ${system.name}
  * Generated by figma-base - do not edit directly
+ * 
+ * Compatible with Tailwind CSS v3.x
  */
 export default ${JSON.stringify(config, null, 2)}
 `;
@@ -603,6 +606,9 @@ function formatColorValue(value) {
   return value;
 }
 function formatTokenValue(token, value) {
+  if (!value) {
+    return "";
+  }
   if (value.startsWith("{") && value.endsWith("}")) {
     return value;
   }
@@ -627,7 +633,7 @@ function generateFigmaTokens(tokens, _system) {
       current = current[parts[i]];
     }
     const lastPart = parts[parts.length - 1];
-    const rawValue = token.resolvedValue || token.value;
+    const rawValue = token.resolvedValue || token.value || "";
     const formattedValue = formatTokenValue(token, rawValue);
     current[lastPart] = {
       value: formattedValue,
@@ -647,7 +653,7 @@ function generateFigmaTokens(tokens, _system) {
       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 rawValue = token.references && token.references.length > 0 ? `{${token.references[0]}}` : token.resolvedValue || token.value || "";
     const formattedValue = formatTokenValue(token, rawValue);
     current[lastPart] = {
       value: formattedValue,
@@ -668,7 +674,7 @@ function generateFigmaTokens(tokens, _system) {
         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 rawValue = token.references && token.references.length > 0 ? `{${token.references[0]}}` : token.resolvedValue || token.value || "";
       const formattedValue = formatTokenValue(token, rawValue);
       current[lastPart] = {
         value: formattedValue,

package/components/calendar.tsx

@@ -22,37 +22,43 @@ function Calendar({
         caption: "flex justify-center pt-1 relative items-center",
         caption_label: "text-sm font-medium",
         nav: "space-x-1 flex items-center",
-        nav_button: cn(
+        button_previous: cn(
           buttonVariants({ variant: "outline" }),
-          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1"
         ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
+        button_next: cn(
+          buttonVariants({ variant: "outline" }),
+          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1"
+        ),
+        month_grid: "w-full border-collapse space-y-1",
+        weekdays: "flex",
+        weekday:
           "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: "size-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
-        day: cn(
+        week: "flex w-full mt-2",
+        day: "size-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20",
+        day_button: cn(
           buttonVariants({ variant: "ghost" }),
           "size-9 p-0 font-normal aria-selected:opacity-100"
         ),
-        day_range_end: "day-range-end",
-        day_selected:
+        range_end: "day-range-end",
+        selected:
           "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
+        today: "bg-accent text-accent-foreground",
+        outside:
           "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
+        disabled: "text-muted-foreground opacity-50",
+        range_middle:
           "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
+        hidden: "invisible",
         ...classNames,
       }}
       components={{
-        IconLeft: () => <ChevronLeft className="size-4" />,
-        IconRight: () => <ChevronRight className="size-4" />,
+        Chevron: (props) => {
+          if (props.orientation === "left") {
+            return <ChevronLeft className="size-4" />
+          }
+          return <ChevronRight className="size-4" />
+        },
       }}
       {...props}
     />

package/dist/index.js

@@ -7,6 +7,7 @@ import { Command } from "commander";
 import fs from "fs-extra";
 import path from "path";
 import { fileURLToPath } from "url";
+import { execSync } from "child_process";
 import prompts from "prompts";
 import ora from "ora";
 import kleur from "kleur";
@@ -53,7 +54,34 @@ Setting up ${selectedSystem.name}...
   await fs.ensureDir(path.join(cwd, "dist"));
   if (options.packageManager !== "skip") {
     spinner.start("Installing dependencies...");
-    spinner.succeed("Dependencies installed");
+    try {
+      const REQUIRED_DEPS = [
+        "@radix-ui/react-slot",
+        "class-variance-authority",
+        "clsx",
+        "tailwind-merge"
+      ];
+      const DEV_DEPS = ["tailwindcss", "postcss", "autoprefixer"];
+      let installCmd;
+      let devInstallCmd;
+      if (options.packageManager === "npm") {
+        installCmd = `npm install ${REQUIRED_DEPS.join(" ")}`;
+        devInstallCmd = `npm install -D ${DEV_DEPS.join(" ")}`;
+      } else if (options.packageManager === "yarn") {
+        installCmd = `yarn add ${REQUIRED_DEPS.join(" ")}`;
+        devInstallCmd = `yarn add -D ${DEV_DEPS.join(" ")}`;
+      } else {
+        installCmd = `pnpm add ${REQUIRED_DEPS.join(" ")}`;
+        devInstallCmd = `pnpm add -D ${DEV_DEPS.join(" ")}`;
+      }
+      execSync(installCmd, { cwd, stdio: "pipe" });
+      execSync(devInstallCmd, { cwd, stdio: "pipe" });
+      spinner.succeed("Dependencies installed");
+    } catch (error) {
+      spinner.warn("Failed to install dependencies - please install manually");
+      console.log(kleur.dim("  npm install @radix-ui/react-slot class-variance-authority clsx tailwind-merge"));
+      console.log(kleur.dim("  npm install -D tailwindcss postcss autoprefixer"));
+    }
   }
   spinner.start("Building tokens...");
   try {
@@ -86,6 +114,36 @@ 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} */
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./src/**/*.{ts,tsx}",
+    "./components/**/*.{ts,tsx}",
+    "./app/**/*.{ts,tsx}",
+  ],
+  theme: {
+    extend: require("./dist/tailwind/tokens.tailwind.js"),
+  },
+  plugins: [],
+}
+`;
+    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");
+  }
   const lockFile = {
     version: "1",
     generatedAt: (/* @__PURE__ */ new Date()).toISOString(),
@@ -98,6 +156,15 @@ Setting up ${selectedSystem.name}...
     }
   };
   await fs.writeJSON(path.join(cwd, "tokka.lock"), lockFile, { spaces: 2 });
+  if (options.demo) {
+    spinner.start("Creating demo page...");
+    try {
+      await createDemoApp(cwd, selectedSystem.name);
+      spinner.succeed("Demo page created");
+    } catch (error) {
+      spinner.warn("Failed to create demo page - you can create it manually");
+    }
+  }
   console.log(kleur.green().bold("\n\u2713 All done!\n"));
   console.log("Next steps:");
   console.log(kleur.cyan("  1. ") + "Import tokens in your CSS:");
@@ -105,6 +172,10 @@ Setting up ${selectedSystem.name}...
   console.log(kleur.cyan("  2. ") + "Add components:");
   console.log(kleur.dim("     tokka add button input card"));
   console.log(kleur.cyan("  3. ") + "Start building!");
+  if (options.demo) {
+    console.log(kleur.cyan("  4. ") + "Check out the demo page:");
+    console.log(kleur.dim("     Open demo.html in your browser"));
+  }
   console.log("");
 }
 async function loadSystems(systemsDir) {
@@ -121,6 +192,111 @@ async function loadSystems(systemsDir) {
   }
   return systems;
 }
+async function createDemoApp(cwd, systemName) {
+  const demoHtml = `<!DOCTYPE html>
+<html lang="en" class="light">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>tokka Demo - ${systemName}</title>
+  <link rel="stylesheet" href="./dist/css/tokens.css">
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = ${JSON.stringify(
+    {
+      darkMode: ["class"],
+      theme: {
+        extend: {}
+        // Token classes will work via CSS custom properties
+      }
+    },
+    null,
+    2
+  )}
+  </script>
+  <style>
+    body { 
+      font-family: system-ui, -apple-system, sans-serif;
+    }
+  </style>
+</head>
+<body class="bg-background text-foreground">
+  <main class="min-h-screen p-8">
+    <div class="max-w-4xl mx-auto space-y-8">
+      <div class="space-y-2">
+        <h1 class="text-4xl font-bold">tokka Demo</h1>
+        <p class="text-lg text-muted-foreground">
+          ${systemName} design system
+        </p>
+      </div>
+
+      <div class="bg-card text-card-foreground border border-border rounded-lg p-6 space-y-4">
+        <div>
+          <h2 class="text-xl font-semibold">Buttons</h2>
+          <p class="text-sm text-muted-foreground">Different button variants using semantic tokens</p>
+        </div>
+        <div class="flex flex-wrap gap-4">
+          <button class="bg-primary text-primary-foreground px-4 py-2 rounded-md hover:bg-primary/90">
+            Default
+          </button>
+          <button class="bg-secondary text-secondary-foreground px-4 py-2 rounded-md hover:bg-secondary/80">
+            Secondary
+          </button>
+          <button class="bg-destructive text-destructive-foreground px-4 py-2 rounded-md hover:bg-destructive/90">
+            Destructive
+          </button>
+          <button class="border border-input bg-background px-4 py-2 rounded-md hover:bg-accent hover:text-accent-foreground">
+            Outline
+          </button>
+        </div>
+      </div>
+
+      <div class="bg-card text-card-foreground border border-border rounded-lg p-6 space-y-4">
+        <div>
+          <h2 class="text-xl font-semibold">Inputs</h2>
+          <p class="text-sm text-muted-foreground">Input fields using semantic tokens</p>
+        </div>
+        <div class="space-y-4">
+          <input 
+            type="text" 
+            placeholder="Default input" 
+            class="w-full px-3 py-2 border border-input rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring"
+          />
+          <input 
+            type="email" 
+            placeholder="Email input" 
+            class="w-full px-3 py-2 border border-input rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-ring"
+          />
+        </div>
+      </div>
+
+      <div class="bg-card text-card-foreground border border-border rounded-lg p-6 space-y-4">
+        <div>
+          <h2 class="text-xl font-semibold">Theme Toggle</h2>
+          <p class="text-sm text-muted-foreground">Switch between light and dark mode</p>
+        </div>
+        <button 
+          onclick="document.documentElement.classList.toggle('dark'); document.documentElement.classList.toggle('light');"
+          class="bg-secondary text-secondary-foreground px-4 py-2 rounded-md hover:bg-secondary/80"
+        >
+          Toggle Dark Mode
+        </button>
+      </div>
+
+      <div class="bg-muted text-muted-foreground border border-border rounded-lg p-6">
+        <div class="space-y-2">
+          <h3 class="font-semibold text-foreground">Next Steps</h3>
+          <p class="text-sm">Add React components with: <code class="bg-background px-2 py-1 rounded">tokka add button input card</code></p>
+          <p class="text-sm">View all components: <code class="bg-background px-2 py-1 rounded">tokka list components</code></p>
+        </div>
+      </div>
+    </div>
+  </main>
+</body>
+</html>
+`;
+  await fs.writeFile(path.join(cwd, "demo.html"), demoHtml);
+}
 
 // src/commands/add.ts
 import fs2 from "fs-extra";
@@ -188,6 +364,13 @@ async function addCommand(components) {
   const spinner = ora2();
   const componentsDir = path2.join(cwd, "components");
   await fs2.ensureDir(componentsDir);
+  const libDir = path2.join(componentsDir, "lib");
+  await fs2.ensureDir(libDir);
+  const utilsSource = path2.join(__dirname2, "../components/lib/utils.ts");
+  const utilsTarget = path2.join(libDir, "utils.ts");
+  if (!await fs2.pathExists(utilsTarget)) {
+    await fs2.copy(utilsSource, utilsTarget);
+  }
   for (const component of components) {
     if (!COMPONENT_REGISTRY[component]) {
       console.error(kleur2.red(`\u2716 Component "${component}" not found`));
@@ -393,13 +576,10 @@ async function listSystems(json) {
   }
 }
 async function listComponents(json) {
-  const components = [
-    { name: "button", status: "available" },
-    { name: "input", status: "available" },
-    { name: "card", status: "available" },
-    { name: "dialog", status: "coming-soon" },
-    { name: "select", status: "coming-soon" }
-  ];
+  const components = Object.keys(COMPONENT_REGISTRY).map((name) => ({
+    name,
+    status: "available"
+  }));
   if (json) {
     console.log(JSON.stringify(components, null, 2));
     return;
@@ -426,56 +606,31 @@ async function loadSystemsMetadata(systemsDir) {
   return systems;
 }
 
-// src/commands/gen.ts
+// src/commands/enable.ts
 import fs7 from "fs-extra";
 import path7 from "path";
 import kleur7 from "kleur";
-async function genCommand(target) {
-  if (target !== "types") {
-    console.error(kleur7.red(`\u2716 Unknown generation target: ${target}`));
+async function enableCommand(feature) {
+  if (feature !== "advanced") {
+    console.error(kleur7.red(`\u2716 Unknown feature: ${feature}`));
     process.exit(1);
   }
   const cwd = process.cwd();
   const configPath = path7.join(cwd, ".figmabase");
+  console.log(kleur7.cyan("\n\u{1F680} Enabling advanced mode...\n"));
   let config = {};
   if (await fs7.pathExists(configPath)) {
     config = await fs7.readJSON(configPath);
   }
-  if (!config.advanced) {
-    console.error(kleur7.red("\n\u2716 Type generation requires advanced mode"));
-    console.error(kleur7.dim("  Run: tokka enable advanced"));
-    process.exit(1);
-  }
-  console.log(kleur7.cyan("\n\u{1F527} Generating TypeScript types from manifests...\n"));
-  console.log(kleur7.yellow("\u26A0 Type generation not yet implemented"));
-  console.log(kleur7.dim("  Coming in a future update"));
-}
-
-// src/commands/enable.ts
-import fs8 from "fs-extra";
-import path8 from "path";
-import kleur8 from "kleur";
-async function enableCommand(feature) {
-  if (feature !== "advanced") {
-    console.error(kleur8.red(`\u2716 Unknown feature: ${feature}`));
-    process.exit(1);
-  }
-  const cwd = process.cwd();
-  const configPath = path8.join(cwd, ".figmabase");
-  console.log(kleur8.cyan("\n\u{1F680} Enabling advanced mode...\n"));
-  let config = {};
-  if (await fs8.pathExists(configPath)) {
-    config = await fs8.readJSON(configPath);
-  }
   config.advanced = true;
-  await fs8.writeJSON(configPath, config, { spaces: 2 });
-  const componentsDir = path8.join(cwd, "tokens/components");
-  await fs8.ensureDir(componentsDir);
-  console.log(kleur8.green("\u2713 Advanced mode enabled\n"));
+  await fs7.writeJSON(configPath, config, { spaces: 2 });
+  const componentsDir = path7.join(cwd, "tokens/components");
+  await fs7.ensureDir(componentsDir);
+  console.log(kleur7.green("\u2713 Advanced mode enabled\n"));
   console.log("Advanced features now available:");
-  console.log(kleur8.cyan("  \u2022 ") + "tokka validate - Strict validation");
-  console.log(kleur8.cyan("  \u2022 ") + "tokka gen types - Generate TypeScript types");
-  console.log(kleur8.cyan("  \u2022 ") + "Component token catalogs (tokens/components/)");
+  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("");
 }
 
@@ -489,5 +644,4 @@ program.command("list").description("List available systems or components").argu
 program.command("export").description("Export Figma artifacts").argument("<target>", "Export target (figma)").option("-o, --output <dir>", "Output directory").action(exportCommand);
 program.command("enable").description("Enable advanced features").argument("<feature>", "Feature to enable (advanced)").action(enableCommand);
 program.command("validate").description("Validate tokens and manifests (requires advanced mode)").action(validateCommand);
-program.command("gen").description("Generate code from manifests").argument("<target>", "What to generate (types)").action(genCommand);
 program.parse();

package/package.json

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

package/systems/corporate/tokens/primitives.json

@@ -28,6 +28,20 @@
       "source": "primitive",
       "value": "0 0% 100%"
     },
+    {
+      "id": "color.blue.600",
+      "type": "color",
+      "description": "Dark brand blue",
+      "source": "primitive",
+      "value": "220 90% 48%"
+    },
+    {
+      "id": "color.red.600",
+      "type": "color",
+      "description": "Dark error red",
+      "source": "primitive",
+      "value": "0 72% 45%"
+    },
     {
       "id": "space.1",
       "type": "dimension",
@@ -42,12 +56,19 @@
       "source": "primitive",
       "value": "0.5rem"
     },
+    {
+      "id": "space.3",
+      "type": "dimension",
+      "description": "Medium spacing",
+      "source": "primitive",
+      "value": "0.75rem"
+    },
     {
       "id": "space.4",
       "type": "dimension",
       "description": "Base spacing",
       "source": "primitive",
-      "value": "0.75rem"
+      "value": "1rem"
     },
     {
       "id": "radius.none",
@@ -55,6 +76,13 @@
       "description": "No radius",
       "source": "primitive",
       "value": "0"
+    },
+    {
+      "id": "radius.sm",
+      "type": "radius",
+      "description": "Small radius",
+      "source": "primitive",
+      "value": "0.125rem"
     }
   ]
 }