swatchkit 0.0.21 → 0.0.23

package/README.md

@@ -28,7 +28,7 @@ my-project/
 ├── css/
 │   ├── compositions/       # Layout primitives (flow, sidebar, etc.)
 │   ├── tokens.css          # Generated from tokens/*.json
-│   ├── styles.css          # Starter stylesheet (imports tokens + compositions)
+│   ├── main.css            # Main stylesheet (imports tokens + compositions)
 │   └── swatchkit-ui.css    # UI styles for the documentation sidebar
 ├── swatchkit/
 │   ├── _layout.html        # Layout template (you own this)
@@ -158,7 +158,7 @@ You can mix modular scales with manual overrides.
 
 ### 5. CSS Workflow
 
-SwatchKit generates `css/tokens.css` with your design tokens. The starter `css/styles.css` imports this file along with layout primitives:
+SwatchKit generates `css/tokens.css` with your design tokens. Your `css/main.css` imports this file along with layout primitives:
 
 ```css
 @import 'tokens.css';
@@ -170,7 +170,7 @@ body {
 }
 ```
 
-The pattern library uses **your stylesheet** (`styles.css`), so components render exactly as they will in your app.
+The pattern library uses **your stylesheet** (`main.css`), so components render exactly as they will in your app.
 
 **Documentation Styling:**
 The sidebar and documentation layout are styled by `css/swatchkit-ui.css`. This file is separate from your app styles so you can customize the docs UI without affecting your production CSS.

package/build.js

@@ -3,6 +3,7 @@ const fs = require("fs");
 const path = require("path");
 const chokidar = require("chokidar");
 const { processTokens } = require("./src/tokens");
+const { generateTokenSwatches } = require("./src/generators");
 
 /**
  * SwatchKit Build Script
@@ -116,7 +117,7 @@ function resolveSettings(cliOptions, fileConfig) {
       ? path.resolve(cwd, fileConfig.outDir)
       : path.join(cwd, "public/swatchkit");
 
-  // CSS directory - where tokens.css and user's styles.css live
+  // CSS directory - where tokens.css and user's main.css live
   // Default: css/ at project root
   const cssDir = fileConfig.cssDir
     ? path.resolve(cwd, fileConfig.cssDir)
@@ -153,7 +154,7 @@ function resolveSettings(cliOptions, fileConfig) {
     outputFile: path.join(outDir, "index.html"),
     outputJsFile: path.join(outDir, "js/swatches.js"),
     tokensCssFile: path.join(cssDir, "tokens.css"),
-    stylesCssFile: path.join(cssDir, "styles.css"),
+    mainCssFile: path.join(cssDir, "main.css"),
   };
 }
 
@@ -207,6 +208,8 @@ function runInit(settings, options) {
   copyDefault("fonts.json", "fonts.json");
 
   // Copy HTML/JS template patterns to swatchkit/tokens/ (UI documentation)
+  // Note: Token display templates (colors, typography, spacing, etc.) are
+  // generated dynamically at build time from the JSON token files.
   const copyTemplate = (srcFilename, destFilename) => {
     const destPath = path.join(tokensUiDir, destFilename);
     if (!fs.existsSync(destPath)) {
@@ -217,12 +220,7 @@ function runInit(settings, options) {
     }
   };
 
-  copyTemplate("colors.html", "colors.html");
-  copyTemplate("text-weights.html", "text-weights.html");
-  copyTemplate("text-leading.html", "text-leading.html");
-  copyTemplate("typography.html", "typography.html");
-  copyTemplate("spacing.html", "spacing.html");
-  copyTemplate("fonts.html", "fonts.html");
+  // Only copy non-token templates (prose is a kitchen sink, not a token display)
   copyTemplate("prose.html", "prose.html");
 
   // Create shared script for tokens UI
@@ -234,12 +232,12 @@ function runInit(settings, options) {
     console.log(`Created tokens script at ${tokensScriptFile}`);
   }
 
-  // Create starter styles.css
-  if (!fs.existsSync(settings.stylesCssFile)) {
-    const srcPath = path.join(__dirname, "src/blueprints/styles.css");
+  // Create main.css entry point
+  if (!fs.existsSync(settings.mainCssFile)) {
+    const srcPath = path.join(__dirname, "src/blueprints/main.css");
     const content = fs.readFileSync(srcPath, "utf-8");
-    fs.writeFileSync(settings.stylesCssFile, content);
-    console.log(`Created starter stylesheet at ${settings.stylesCssFile}`);
+    fs.writeFileSync(settings.mainCssFile, content);
+    console.log(`Created main stylesheet at ${settings.mainCssFile}`);
   }
 
   // Copy CSS Reset
@@ -416,6 +414,15 @@ function build(settings) {
   // 2.5 Process Tokens
   processTokens(settings.tokensDir, settings.cssDir);
 
+  // 2.6 Generate token display HTML from JSON
+  const tokensUiDir = path.join(settings.swatchkitDir, "tokens");
+  if (fs.existsSync(tokensUiDir)) {
+    const generated = generateTokenSwatches(settings.tokensDir, tokensUiDir);
+    if (generated > 0) {
+      console.log(`Generated ${generated} token display files`);
+    }
+  }
+
   // 3. Copy CSS files (recursively)
   if (fs.existsSync(settings.cssDir)) {
     console.log("Copying CSS...");
@@ -537,7 +544,7 @@ function build(settings) {
           : `preview/${p.id}.html`;
 
         return `
-      <section id="${p.id}">
+      <section id="${p.id}" class="flow">
         <h2>${p.name} <small style="font-weight: normal; opacity: 0.6; font-size: 0.7em">(${section})</small></h2>
         <div class="preview">${p.content}</div>
         <div class="swatchkit-preview-link"><a href="${previewPath}">View full screen</a></div>
@@ -637,7 +644,7 @@ function watch(settings) {
     settings.swatchkitDir,
     settings.tokensDir,
     settings.projectLayout,
-    settings.stylesCssFile,
+    settings.mainCssFile,
   ].filter((p) => fs.existsSync(p)); // Only watch files that exist
 
   console.log("[SwatchKit] Watch mode enabled.");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "swatchkit",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "description": "A lightweight tool for creating HTML pattern libraries.",
   "main": "build.js",
   "bin": {

package/src/layout.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SwatchKit</title>
-    <link rel="stylesheet" href="css/styles.css" />
+    <link rel="stylesheet" href="css/main.css" />
     <link rel="stylesheet" href="css/swatchkit-ui.css" />
     <!-- HEAD_EXTRAS -->
   </head>
@@ -16,7 +16,7 @@
         </header>
         <!-- SIDEBAR_LINKS -->
       </nav>
-      <main class="wrapper flow">
+      <main class="wrapper">
         <!-- SWATCHES -->
       </main>
     </div>