swatchkit 0.0.4 → 0.0.6

package/README.md

@@ -1,6 +1,6 @@
 # SwatchKit
 
-**SwatchKit** is a lightweight tool for generating HTML pattern libraries. It acts as a **Pattern Discovery Engine**: it scans your folders for HTML components and stitches them into a documentation site using a layout you control.
+**SwatchKit** is a lightweight tool for generating HTML pattern libraries and Design Systems. It acts as a **Pattern Discovery Engine**: it scans your folders for HTML components and stitches them into a documentation site using a layout you control.
 
 It follows the "Magic Folder" principle: drop files in, and a library comes out.
 
@@ -16,7 +16,10 @@ npx swatchkit init
 npx swatchkit
 ```
 
-This will create a `swatches/` folder, generate a `src/tokens/colors.json` file, and build your site to `public/swatchkit/`.
+This will:
+1.  Create a `swatches/` folder.
+2.  Scaffold a complete **Design System** in `src/tokens/` (Colors, Fluid Type, Spacing).
+3.  Build your site to `public/swatchkit/`.
 
 ---
 
@@ -43,13 +46,17 @@ By default, SwatchKit looks for a `swatches/` folder in your project root.
 *   **Single File:** Drop `card.html` into `swatches/`. It appears in the library.
 *   **Component Folder:** Drop a folder like `swatches/carousel/` containing `index.html`. It works the same way.
 
-### 2. Design Tokens (Colors)
-SwatchKit includes a basic **Token Engine**.
-*   **Source:** Edit `src/tokens/colors.json`.
-*   **Output:** SwatchKit auto-generates `src/css/tokens.css` with CSS variables.
-*   **Docs:** It creates `swatches/colors.html` to visualize your palette.
+### 2. Design Token Engine
+SwatchKit scaffolds a powerful, CUBE CSS-friendly design system for you. Edit the JSON files in `src/tokens/`, and SwatchKit auto-generates `src/css/tokens.css`.
 
-*(More token types like Typography and Spacing coming soon!)*
+**Supported Tokens:**
+*   **Colors** (`colors.json`): Generates palettes.
+*   **Fluid Typography** (`text-sizes.json`): Generates `clamp()` based type scales using Utopia methodology.
+*   **Fluid Spacing** (`spacing.json`): Generates `clamp()` based spacing.
+*   **Modular Leading** (`text-leading.json`): Generates line-heights using `pow()` modular scales.
+*   **Fonts & Weights**: Manages font families and weights.
+
+Docs for these are automatically created in `swatches/tokens/*.html`.
 
 ### 3. Custom Layouts
 When you run `swatchkit init`, we create `swatches/_layout.html`.
@@ -96,6 +103,14 @@ module.exports = {
   input: './src/patterns',
 
   // Override default output directory
-  outDir: './dist/docs'
+  outDir: './dist/docs',
+  
+  // Override Token Defaults
+  tokens: {
+    leading: {
+      ratio: 1.25, // Change modular scale ratio
+      base: 1
+    }
+  }
 };
 ```

package/build.js

@@ -77,7 +77,7 @@ function resolveSettings(cliOptions, fileConfig) {
     if (fileConfig.input) return path.resolve(cwd, fileConfig.input);
 
     // 2. Search candidates
-    const candidates = ["swatches", "src/swatches", "src/patterns"];
+    const candidates = ["swatches", "src/swatches"];
     for (const cand of candidates) {
       const absPath = path.join(cwd, cand);
       if (fs.existsSync(absPath)) return absPath;
@@ -97,13 +97,13 @@ function resolveSettings(cliOptions, fileConfig) {
       ? path.resolve(cwd, fileConfig.outDir)
       : path.join(cwd, "public/swatchkit");
 
-  // CSS Dir (Legacy support: src/css)
   const cssDir = path.join(cwd, "src/css");
 
   return {
     patternsDir,
     outDir,
     cssDir,
+    fileConfig, // Expose config to init
     // Internal layout template (relative to this script)
     internalLayout: path.join(__dirname, "src/layout.html"),
     // Project specific layout override
@@ -129,6 +129,13 @@ function runInit(settings, options) {
     fs.mkdirSync(settings.patternsDir, { recursive: true });
   }
 
+  // Create patterns/tokens directory
+  const patternsTokensDir = path.join(settings.patternsDir, "tokens");
+  if (!fs.existsSync(patternsTokensDir)) {
+    console.log(`Creating patterns/tokens directory: ${patternsTokensDir}`);
+    fs.mkdirSync(patternsTokensDir, { recursive: true });
+  }
+
   // Create src/tokens directory and sample colors.json
   const tokensDir = path.join(process.cwd(), "src/tokens");
   if (!fs.existsSync(tokensDir)) {
@@ -136,92 +143,75 @@ function runInit(settings, options) {
     fs.mkdirSync(tokensDir, { recursive: true });
   }
 
-  const colorsFile = path.join(tokensDir, "colors.json");
-  if (!fs.existsSync(colorsFile)) {
-    const sampleColors = {
-      title: "Colors",
-      description:
-        "Hex color codes that can be shared, cross-platform. They can be converted at point of usage, such as HSL for web or CMYK for print.",
-      items: [
-        { name: "Dark", value: "#171406" },
-        { name: "Dark Glare", value: "#2d2816" },
-        { name: "Mid", value: "#ABA9A2" },
-        { name: "Light", value: "#ffffff" },
-        { name: "Primary", value: "#fcad26" },
-      ],
-    };
-    fs.writeFileSync(colorsFile, JSON.stringify(sampleColors, null, 2));
-    console.log(`Created sample tokens file at ${colorsFile}`);
-  }
+  const copyDefault = (srcFilename, destFilename) => {
+    const destPath = path.join(tokensDir, destFilename);
+    if (!fs.existsSync(destPath)) {
+      const srcPath = path.join(__dirname, 'src/blueprints', srcFilename);
+      const content = fs.readFileSync(srcPath, 'utf-8');
+      fs.writeFileSync(destPath, content);
+      console.log(`Created sample tokens file at ${destPath}`);
+    }
+  };
 
-  // Create sample colors.html pattern
-  const colorsPatternFile = path.join(settings.patternsDir, "colors.html");
-  if (!fs.existsSync(colorsPatternFile)) {
-    const colorsHtml = `
-<style>
-  .swatch-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-    gap: 1rem;
-    padding: 1rem;
-  }
-  .swatch {
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    overflow: hidden;
-  }
-  .swatch-color {
-    height: 100px;
-    width: 100%;
-  }
-  .swatch-info {
-    padding: 0.5rem;
-    font-family: monospace;
-    font-size: 0.9rem;
-    background: #f9f9f9;
+  // 1. Create Colors Token
+  copyDefault('colors.json', 'colors.json');
+
+  // 2. Create Text Weights Token
+  copyDefault('text-weights.json', 'text-weights.json');
+
+  // 3. Create Text Leading Token
+  const leadingFile = path.join(tokensDir, "text-leading.json");
+  if (!fs.existsSync(leadingFile)) {
+    const srcPath = path.join(__dirname, 'src/blueprints/text-leading.json');
+    let sampleLeading = JSON.parse(fs.readFileSync(srcPath, 'utf-8'));
+
+    // Get settings from config or defaults
+    const leadingConfig = settings.fileConfig?.tokens?.leading || {};
+    if (leadingConfig.base) sampleLeading.base = leadingConfig.base;
+    if (leadingConfig.ratio) sampleLeading.ratio = leadingConfig.ratio;
+    if (leadingConfig.items) sampleLeading.items = leadingConfig.items;
+
+    fs.writeFileSync(leadingFile, JSON.stringify(sampleLeading, null, 2));
+    console.log(`Created sample tokens file at ${leadingFile}`);
   }
-</style>
-
-<div class="swatch-grid">
-  <div class="swatch">
-    <div class="swatch-color" style="background-color: var(--color-dark);"></div>
-    <div class="swatch-info">
-      <strong>Dark</strong><br>
-      var(--color-dark)
-    </div>
-  </div>
-  <div class="swatch">
-    <div class="swatch-color" style="background-color: var(--color-dark-glare);"></div>
-    <div class="swatch-info">
-      <strong>Dark Glare</strong><br>
-      var(--color-dark-glare)
-    </div>
-  </div>
-  <div class="swatch">
-    <div class="swatch-color" style="background-color: var(--color-mid);"></div>
-    <div class="swatch-info">
-      <strong>Mid</strong><br>
-      var(--color-mid)
-    </div>
-  </div>
-  <div class="swatch">
-    <div class="swatch-color" style="background-color: var(--color-light);"></div>
-    <div class="swatch-info">
-      <strong>Light</strong><br>
-      var(--color-light)
-    </div>
-  </div>
-  <div class="swatch">
-    <div class="swatch-color" style="background-color: var(--color-primary);"></div>
-    <div class="swatch-info">
-      <strong>Primary</strong><br>
-      var(--color-primary)
-    </div>
-  </div>
-</div>
-`;
-    fs.writeFileSync(colorsPatternFile, colorsHtml.trim());
-    console.log(`Created sample pattern at ${colorsPatternFile}`);
+
+  // 4. Create Viewports Token
+  copyDefault('viewports.json', 'viewports.json');
+
+  // 5. Create Text Sizes Token (Fluid)
+  copyDefault('text-sizes.json', 'text-sizes.json');
+
+  // 6. Create Spacing Token
+  copyDefault('spacing.json', 'spacing.json');
+
+  // 7. Create Fonts Token
+  copyDefault('fonts.json', 'fonts.json');
+
+  const copyTemplate = (srcFilename, destFilename) => {
+    const destPath = path.join(patternsTokensDir, destFilename);
+    if (!fs.existsSync(destPath)) {
+      const srcPath = path.join(__dirname, 'src/templates', srcFilename);
+      const content = fs.readFileSync(srcPath, 'utf-8');
+      fs.writeFileSync(destPath, content.trim());
+      console.log(`Created sample pattern at ${destPath}`);
+    }
+  };
+
+  // Create sample patterns
+  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');
+
+  // Create shared script for tokens
+  const tokensScriptFile = path.join(patternsTokensDir, "script.js");
+  if (!fs.existsSync(tokensScriptFile)) {
+    const srcPath = path.join(__dirname, 'src/templates/script.js');
+    const content = fs.readFileSync(srcPath, 'utf-8');
+    fs.writeFileSync(tokensScriptFile, content.trim());
+    console.log(`Created tokens script at ${tokensScriptFile}`);
   }
 
   // Generate initial CSS
@@ -248,54 +238,18 @@ function runInit(settings, options) {
 }
 
 // --- 5. Build Logic ---
-function build(settings) {
-  console.log(`[SwatchKit] Starting build...`);
-  console.log(`  Patterns: ${settings.patternsDir}`);
-  console.log(`  Output:   ${settings.outDir}`);
-
-  // 1. Check if patterns directory exists
-  if (!fs.existsSync(settings.patternsDir)) {
-    console.error(
-      `Error: Patterns directory not found at ${settings.patternsDir}`,
-    );
-    console.error('Run "swatchkit init" to get started.');
-    process.exit(1);
-  }
-
-  // 2. Ensure dist directories exist
-  [settings.outDir, settings.distCssDir, settings.distJsDir].forEach((dir) => {
-    if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
-  });
-
-  // 2.5 Process Tokens
-  processTokens(process.cwd(), settings.cssDir);
-
-  // 3. Copy CSS files
-  if (fs.existsSync(settings.cssDir)) {
-    console.log("Copying CSS...");
-    const cssFiles = fs
-      .readdirSync(settings.cssDir)
-      .filter((file) => file.endsWith(".css"));
-    cssFiles.forEach((file) => {
-      fs.copyFileSync(
-        path.join(settings.cssDir, file),
-        path.join(settings.distCssDir, file),
-      );
-    });
-  }
-
-  // 4. Read patterns & JS
-  console.log("Processing patterns...");
+function scanDirectory(dir, scriptsCollector, exclude = []) {
   const patterns = [];
-  const scripts = [];
+  if (!fs.existsSync(dir)) return patterns;
 
-  const items = fs.readdirSync(settings.patternsDir);
+  const items = fs.readdirSync(dir);
 
   items.forEach((item) => {
-    // Skip _layout.html or hidden files
+    // Skip excluded items, _layout.html, or hidden files
+    if (exclude.includes(item)) return;
     if (item.startsWith("_") || item.startsWith(".")) return;
 
-    const itemPath = path.join(settings.patternsDir, item);
+    const itemPath = path.join(dir, item);
     const stat = fs.statSync(itemPath);
 
     let name, content, id;
@@ -319,7 +273,7 @@ function build(settings) {
             path.join(itemPath, jsFile),
             "utf-8",
           );
-          scripts.push(`
+          scriptsCollector.push(`
 /* --- Pattern: ${name} / File: ${jsFile} --- */
 (function() {
 ${scriptContent}
@@ -334,18 +288,98 @@ ${scriptContent}
       id = name;
       content = fs.readFileSync(itemPath, "utf-8");
     }
+    // Handle Loose JS Files (e.g. script.js in tokens/)
+    else if (item.endsWith(".js")) {
+      const scriptContent = fs.readFileSync(itemPath, "utf-8");
+      scriptsCollector.push(`
+/* --- File: ${item} --- */
+(function() {
+${scriptContent}
+})();
+`);
+      // Don't add to patterns list, just scripts
+      return;
+    }
 
     if (name && content) {
       patterns.push({ name, id, content });
     }
   });
 
+  return patterns;
+}
+
+function build(settings) {
+  console.log(`[SwatchKit] Starting build...`);
+  console.log(`  Patterns: ${settings.patternsDir}`);
+  console.log(`  Output:   ${settings.outDir}`);
+
+  // 1. Check if patterns directory exists
+  if (!fs.existsSync(settings.patternsDir)) {
+    console.error(
+      `Error: Patterns directory not found at ${settings.patternsDir}`,
+    );
+    console.error('Run "swatchkit init" to get started.');
+    process.exit(1);
+  }
+
+  // 2. Ensure dist directories exist
+  [settings.outDir, settings.distCssDir, settings.distJsDir].forEach((dir) => {
+    if (!fs.existsSync(dir)) fs.mkdirSync(dir, { recursive: true });
+  });
+
+  // 2.5 Process Tokens
+  processTokens(process.cwd(), settings.cssDir);
+
+  // 3. Copy CSS files
+  if (fs.existsSync(settings.cssDir)) {
+    console.log("Copying CSS...");
+    const cssFiles = fs
+      .readdirSync(settings.cssDir)
+      .filter((file) => file.endsWith(".css"));
+    cssFiles.forEach((file) => {
+      fs.copyFileSync(
+        path.join(settings.cssDir, file),
+        path.join(settings.distCssDir, file),
+      );
+    });
+  }
+
+  // 4. Read patterns & JS
+  console.log("Processing patterns...");
+  const scripts = [];
+
+  // Pass 1: Tokens (in [patternsDir]/tokens/)
+  const tokensDir = path.join(settings.patternsDir, "tokens");
+  const tokenPages = scanDirectory(tokensDir, scripts);
+
+  // Pass 2: Patterns (in [patternsDir], excluding 'tokens')
+  const patternPages = scanDirectory(settings.patternsDir, scripts, ["tokens"]);
+
+  // Combine for content generation (Tokens first, then Patterns)
+  const allPatterns = [...tokenPages, ...patternPages];
+
   // 5. Generate HTML fragments
-  const sidebarLinks = patterns
-    .map((p) => `<a href="#${p.id}">${p.name}</a>`)
-    .join("\n");
 
-  const patternBlocks = patterns
+  // Sidebar generation with grouping
+  let sidebarLinks = "";
+
+  if (tokenPages.length > 0) {
+    sidebarLinks += `<h3>Design Tokens</h3>\n`;
+    sidebarLinks += tokenPages
+      .map((p) => `<a href="#${p.id}">${p.name}</a>`)
+      .join("\n");
+    sidebarLinks += `\n`;
+  }
+
+  if (patternPages.length > 0) {
+    sidebarLinks += `<h3>Patterns</h3>\n`;
+    sidebarLinks += patternPages
+      .map((p) => `<a href="#${p.id}">${p.name}</a>`)
+      .join("\n");
+  }
+
+  const patternBlocks = allPatterns
     .map((p) => {
       const escapedContent = p.content
         .replace(/&/g, "&amp;")
@@ -419,4 +453,3 @@ try {
   console.error("[SwatchKit] Error:", error.message);
   process.exit(1);
 }
-

package/package.json

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