swatchkit 1.1.0 → 2.0.0

package/src/tokens.js

@@ -0,0 +1,428 @@
+const fs = require('fs');
+const path = require('path');
+const clampGenerator = require('./utils/clamp-generator');
+
+function slugify(text) {
+  return text
+    .toString()
+    .toLowerCase()
+    .trim()
+    .replace(/\s+/g, '-');     // Replace spaces with -
+}
+
+function processTokens(tokensDir, cssDir) {
+  const outputFile = path.join(cssDir, 'tokens.css');
+  let cssContent = '/* AUTO-GENERATED by SwatchKit — do not edit manually. */\n';
+  cssContent += '/* Edit the JSON files in your tokens directory and rebuild. */\n\n';
+  cssContent += ':root {\n';
+  let hasTokens = false;
+  
+  // Store structured data for utility generation
+  const tokensContext = {
+    colors: [],
+    textWeights: [],
+    textLeading: [],
+    textSizes: [],
+    spacing: [],
+    fonts: [],
+    viewports: {}
+  };
+
+  // Helper to process a generic token file
+  function processFile(filename, contextKey) {
+    const filePath = path.join(tokensDir, filename);
+    if (!fs.existsSync(filePath)) return;
+
+    try {
+      const fileContent = fs.readFileSync(filePath, 'utf-8');
+      const data = JSON.parse(fileContent);
+
+      if (data.items && Array.isArray(data.items)) {
+        hasTokens = true;
+        cssContent += `  /* ${data.title || filename} */\n`;
+        data.items.forEach(item => {
+          if (item.name && item.value) {
+            const slug = slugify(item.name);
+            cssContent += `  --${slug}: ${item.value};\n`;
+            
+            // Store for utilities if a key is provided
+            if (contextKey && tokensContext[contextKey]) {
+              tokensContext[contextKey].push({ name: slug, value: item.value });
+            }
+          }
+        });
+        cssContent += '\n';
+      }
+    } catch (error) {
+      console.error(`[SwatchKit] Error processing ${filename}:`, error.message);
+    }
+  }
+
+  // 1. Process Viewports (First, so they are available for fluid calculations)
+  const viewportsFile = path.join(tokensDir, 'viewports.json');
+  if (fs.existsSync(viewportsFile)) {
+    try {
+      const fileContent = fs.readFileSync(viewportsFile, 'utf-8');
+      const data = JSON.parse(fileContent);
+
+      if (data.items && Array.isArray(data.items)) {
+        // Build a lookup object for clamp-generator (keyed by name)
+        const viewportsLookup = {};
+        data.items.forEach(item => {
+          viewportsLookup[item.name] = item.value;
+        });
+        tokensContext.viewports = viewportsLookup;
+
+        hasTokens = true;
+        cssContent += `  /* ${data.title || 'Viewports'} */\n`;
+        
+        data.items.forEach(item => {
+          if (item.name && item.value !== undefined) {
+            const slug = slugify(item.name);
+            // Append 'px' if it's a number
+            const cssValue = typeof item.value === 'number' ? `${item.value}px` : item.value;
+            cssContent += `  --${slug}: ${cssValue};\n`;
+          }
+        });
+        cssContent += '\n';
+      }
+
+    } catch (error) {
+      console.error(`[SwatchKit] Error processing viewports.json:`, error.message);
+    }
+  }
+
+  // 2. Process Colors
+  processFile('colors.json', 'colors');
+
+  // 3. Process Text Weights
+  processFile('text-weights.json', 'textWeights');
+
+  // 4. Process Text Leading
+  const leadingFile = path.join(tokensDir, 'text-leading.json');
+  if (fs.existsSync(leadingFile)) {
+    try {
+      const fileContent = fs.readFileSync(leadingFile, 'utf-8');
+      const data = JSON.parse(fileContent);
+
+      if (data.base && data.ratio && data.items) {
+        hasTokens = true;
+        cssContent += `  /* ${data.title || 'Text Leading'} */\n`;
+        cssContent += `  --leading-scale-base: ${data.base};\n`;
+        cssContent += `  --leading-scale-ratio: ${data.ratio};\n`;
+
+        data.items.forEach(item => {
+          const slug = slugify(item.name);
+          let value;
+          
+          if (item.value !== undefined) {
+             // Manual value (e.g. 1.5)
+             value = item.value;
+             cssContent += `  --${slug}: ${value};\n`;
+          } else if (item.step !== undefined) {
+             // Modular scale step (e.g. 1)
+             // We can't resolve calc() here for context easily, but utilities use the var anyway
+             value = `calc(var(--leading-scale-base) * pow(var(--leading-scale-ratio), ${item.step}))`;
+             cssContent += `  --${slug}: ${value};\n`;
+          }
+          
+          // Store for utilities
+          if (tokensContext.textLeading) {
+            tokensContext.textLeading.push({ name: slug, value });
+          }
+        });
+        cssContent += '\n';
+      }
+    } catch (error) {
+      console.error(`[SwatchKit] Error processing text-leading.json:`, error.message);
+    }
+  }
+
+  // 5. Process Text Sizes
+  const textSizesFile = path.join(tokensDir, 'text-sizes.json');
+  if (fs.existsSync(textSizesFile)) {
+    try {
+      const fileContent = fs.readFileSync(textSizesFile, 'utf-8');
+      const data = JSON.parse(fileContent);
+
+      if (data.items && Array.isArray(data.items)) {
+        hasTokens = true;
+        cssContent += `  /* ${data.title || 'Text Sizes'} */\n`;
+
+        // Check if we have viewports for fluid generation
+        const hasFluidData = tokensContext.viewports && 
+                             tokensContext.viewports['viewport-min'] && 
+                             tokensContext.viewports['viewport-max'];
+        
+        const fileRatio = data.fluidRatio || 1.125;
+        const fluidItems = [];
+        const staticItems = [];
+
+        data.items.forEach(item => {
+          // If "value" is present, it's static (user explicit override)
+          if (item.value !== undefined) {
+            staticItems.push(item);
+            return;
+          }
+
+          // If min or max is present, it's fluid (calculate missing side)
+          if (item.min !== undefined || item.max !== undefined) {
+            const ratio = item.fluidRatio || fileRatio;
+            let min = item.min;
+            let max = item.max;
+
+            if (min === undefined) min = parseFloat((max / ratio).toFixed(2));
+            if (max === undefined) max = parseFloat((min * ratio).toFixed(2));
+
+            fluidItems.push({ ...item, min, max });
+          }
+        });
+
+        // Process Fluid Items
+        if (hasFluidData && fluidItems.length > 0) {
+           const fluidTokens = clampGenerator(fluidItems, tokensContext.viewports);
+           fluidTokens.forEach(item => {
+             const slug = slugify(item.name);
+             cssContent += `  --${slug}: ${item.value};\n`;
+             tokensContext.textSizes.push({ name: slug, value: item.value });
+           });
+        } else if (fluidItems.length > 0) {
+            console.warn('[SwatchKit] Fluid text sizes detected but viewports missing. Skipping fluid generation.');
+        }
+
+        // Process Static Items (fallback or simple values)
+        staticItems.forEach(item => {
+          if (item.name && item.value) {
+            const slug = slugify(item.name);
+            cssContent += `  --${slug}: ${item.value};\n`;
+            tokensContext.textSizes.push({ name: slug, value: item.value });
+          }
+        });
+        
+        cssContent += '\n';
+      }
+
+    } catch (error) {
+      console.error(`[SwatchKit] Error processing text-sizes.json:`, error.message);
+    }
+  }
+
+  // 6. Process Spacing
+  const spacingFile = path.join(tokensDir, 'spacing.json');
+  if (fs.existsSync(spacingFile)) {
+    try {
+      const fileContent = fs.readFileSync(spacingFile, 'utf-8');
+      const data = JSON.parse(fileContent);
+
+      if (data.items && Array.isArray(data.items)) {
+        hasTokens = true;
+        cssContent += `  /* ${data.title || 'Spacing'} */\n`;
+
+        // Check if we have viewports for fluid generation
+        const hasFluidData = tokensContext.viewports && 
+                             tokensContext.viewports['viewport-min'] && 
+                             tokensContext.viewports['viewport-max'];
+        
+        const fileRatio = data.fluidRatio || 1.125;
+        const fluidItems = [];
+        const staticItems = [];
+
+        data.items.forEach(item => {
+          // If "value" is present, it's static (user explicit override)
+          if (item.value !== undefined) {
+            staticItems.push(item);
+            return;
+          }
+
+          // If min or max is present, it's fluid (calculate missing side)
+          if (item.min !== undefined || item.max !== undefined) {
+            const ratio = item.fluidRatio || fileRatio;
+            let min = item.min;
+            let max = item.max;
+
+            if (min === undefined) min = parseFloat((max / ratio).toFixed(2));
+            if (max === undefined) max = parseFloat((min * ratio).toFixed(2));
+
+            fluidItems.push({ ...item, min, max });
+          }
+        });
+
+        // Process Fluid Items
+        if (hasFluidData && fluidItems.length > 0) {
+           const fluidTokens = clampGenerator(fluidItems, tokensContext.viewports);
+           fluidTokens.forEach(item => {
+             const slug = slugify(item.name);
+             cssContent += `  --${slug}: ${item.value};\n`;
+             tokensContext.spacing.push({ name: slug, value: item.value });
+           });
+        } else if (fluidItems.length > 0) {
+            console.warn('[SwatchKit] Fluid spacing detected but viewports missing. Skipping fluid generation.');
+        }
+
+        // Process Static Items (fallback or simple values)
+        staticItems.forEach(item => {
+          if (item.name && item.value) {
+            const slug = slugify(item.name);
+            cssContent += `  --${slug}: ${item.value};\n`;
+            tokensContext.spacing.push({ name: slug, value: item.value });
+          }
+        });
+        
+        cssContent += '\n';
+      }
+
+    } catch (error) {
+      console.error(`[SwatchKit] Error processing spacing.json:`, error.message);
+    }
+  }
+
+  // 7. Process Fonts
+  const fontsFile = path.join(tokensDir, 'fonts.json');
+  if (fs.existsSync(fontsFile)) {
+    try {
+      const fileContent = fs.readFileSync(fontsFile, 'utf-8');
+      const data = JSON.parse(fileContent);
+
+      if (data.items && Array.isArray(data.items)) {
+        hasTokens = true;
+        cssContent += `  /* ${data.title || 'Fonts'} */\n`;
+        data.items.forEach(item => {
+          if (item.name && item.value && Array.isArray(item.value)) {
+            const slug = slugify(item.name);
+            // Join font names with commas, quoting if necessary (though mostly optional in modern CSS if no special chars)
+            // But let's just join them as requested.
+            const fontStack = item.value.join(', '); 
+            cssContent += `  --${slug}: ${fontStack};\n`;
+          }
+        });
+        cssContent += '\n';
+      }
+    } catch (error) {
+      console.error(`[SwatchKit] Error processing fonts.json:`, error.message);
+    }
+  }
+
+  cssContent += '}\n';
+
+  // If no tokens found, exit early
+  if (!hasTokens) {
+    return tokensContext;
+  }
+
+  // Ensure cssDir exists
+  if (!fs.existsSync(cssDir)) {
+    fs.mkdirSync(cssDir, { recursive: true });
+  }
+
+  const existing = fs.existsSync(outputFile) ? fs.readFileSync(outputFile, 'utf-8') : null;
+  if (existing !== cssContent) {
+    fs.writeFileSync(outputFile, cssContent);
+    console.log(`+ Generated CSS: ${outputFile} (Do not edit manually)`);
+  }
+  
+  return tokensContext;
+}
+
+function generateTokenUtilities(tokensContext, cssDir) {
+  const outputFile = path.join(cssDir, 'tokens.css');
+  let cssContent = '/* AUTO-GENERATED Token Utilities */\n';
+  cssContent += '/* Classes that map directly to your tokens */\n\n';
+
+  // 1. Colors (.color\:name, .background-color\:name)
+  if (tokensContext.colors && tokensContext.colors.length > 0) {
+    cssContent += '/* Colors */\n';
+    tokensContext.colors.forEach(item => {
+      // Escape the colon for CSS selector but use normal name for variable
+      // Using !important to ensure utility classes always win specificity wars (CUBE/Every Layout methodology)
+      cssContent += `.color\\:${item.name} { color: var(--${item.name}) !important; }\n`;
+      cssContent += `.background-color\\:${item.name} { background-color: var(--${item.name}) !important; }\n`;
+    });
+    cssContent += '\n';
+  }
+
+  // 2. Text Sizes (.font-size\:name)
+  if (tokensContext.textSizes && tokensContext.textSizes.length > 0) {
+    cssContent += '/* Text Sizes */\n';
+    tokensContext.textSizes.forEach(item => {
+      cssContent += `.font-size\\:${item.name} { font-size: var(--${item.name}) !important; }\n`;
+    });
+    cssContent += '\n';
+  }
+
+  // 3. Text Weights (.font-weight\:name)
+  if (tokensContext.textWeights && tokensContext.textWeights.length > 0) {
+    cssContent += '/* Text Weights */\n';
+    tokensContext.textWeights.forEach(item => {
+      cssContent += `.font-weight\\:${item.name} { font-weight: var(--${item.name}) !important; }\n`;
+    });
+    cssContent += '\n';
+  }
+
+  // 4. Leading (.line-height\:name)
+  if (tokensContext.textLeading && tokensContext.textLeading.length > 0) {
+    cssContent += '/* Line Heights */\n';
+    tokensContext.textLeading.forEach(item => {
+      cssContent += `.line-height\\:${item.name} { line-height: var(--${item.name}) !important; }\n`;
+    });
+    cssContent += '\n';
+  }
+
+  // 5. Spacing logical properties (12 per token)
+  if (tokensContext.spacing && tokensContext.spacing.length > 0) {
+    const spacingProperties = [
+      'margin-block',
+      'margin-block-start',
+      'margin-block-end',
+      'margin-inline',
+      'margin-inline-start',
+      'margin-inline-end',
+      'padding-block',
+      'padding-block-start',
+      'padding-block-end',
+      'padding-inline',
+      'padding-inline-start',
+      'padding-inline-end',
+    ];
+    cssContent += '/* Spacing */\n';
+    tokensContext.spacing.forEach(item => {
+      spacingProperties.forEach(prop => {
+        cssContent += `.${prop}\\:${item.name} { ${prop}: var(--${item.name}) !important; }\n`;
+      });
+    });
+    cssContent += '\n';
+
+    // 6. Region space (sets --region-space custom property)
+    cssContent += '/* Region Space */\n';
+    tokensContext.spacing.forEach(item => {
+      cssContent += `.region-space\\:${item.name} { --region-space: var(--${item.name}); }\n`;
+    });
+    cssContent += '\n';
+
+    // 7. Flow space (sets --flow-space custom property)
+    cssContent += '/* Flow Space */\n';
+    tokensContext.spacing.forEach(item => {
+      cssContent += `.flow-space\\:${item.name} { --flow-space: var(--${item.name}); }\n`;
+    });
+    cssContent += '\n';
+
+    // 8. Gutter (sets --gutter custom property)
+    cssContent += '/* Gutter */\n';
+    tokensContext.spacing.forEach(item => {
+      cssContent += `.gutter\\:${item.name} { --gutter: var(--${item.name}); }\n`;
+    });
+    cssContent += '\n';
+  }
+
+  // Ensure cssDir exists
+  if (!fs.existsSync(cssDir)) {
+    fs.mkdirSync(cssDir, { recursive: true });
+  }
+
+  const existing = fs.existsSync(outputFile) ? fs.readFileSync(outputFile, 'utf-8') : null;
+  if (existing !== cssContent) {
+    fs.writeFileSync(outputFile, cssContent);
+    console.log(`+ Generated Utilities: ${outputFile} (Do not edit manually)`);
+  }
+}
+
+module.exports = { processTokens, generateTokenUtilities };

package/src/utils/clamp-generator.js

@@ -0,0 +1,38 @@
+/**
+ * Takes an array of tokens and sends back and array of name
+ * and clamp pairs for CSS fluid values.
+ *
+ * @param {array} tokens array of {name: string, min: number, max: number}
+ * @param {object} viewports {min: number, max: number}
+ * @returns {array} {name: string, value: string}
+ */
+const clampGenerator = (tokens, viewports) => {
+  const rootSize = 16;
+
+  return tokens.map(({ name, min, max }) => {
+    if (min === max) {
+      return `${min / rootSize}rem`;
+    }
+
+    // Convert the min and max sizes to rems
+    const minSize = min / rootSize;
+    const maxSize = max / rootSize;
+
+    // Convert the pixel viewport sizes into rems
+    const minViewport = viewports['viewport-min'] / rootSize;
+    const maxViewport = viewports['viewport-max'] / rootSize;
+
+    // Slope and intersection allow us to have a fluid value but also keep that sensible
+    const slope = (maxSize - minSize) / (maxViewport - minViewport);
+    const intersection = -1 * minViewport * slope + minSize;
+
+    return {
+      name,
+      value: `clamp(${minSize}rem, ${intersection.toFixed(2)}rem + ${(
+        slope * 100
+      ).toFixed(2)}vw, ${maxSize}rem)`,
+    };
+  });
+};
+
+module.exports = clampGenerator;