build-tokens.js

#!/usr/bin/env node

/**
 * Generate CSS custom properties from UnlockOpen design tokens
 * Uses the same utilities as the main website for consistency
 */

import {
  colors,
  spacing,
  textSizes,
  fonts,
  textWeights,
  textLeading,
  themes,
  tokensToTailwind,
  clampGenerator
} from 'unlockopen-design-tokens';
import fs from 'fs';

function generateTokenCSS() {
  let css = `/**
 * Generated CSS Custom Properties from UnlockOpen Design Tokens
 * Do not edit this file directly - regenerate with: npm run build:tokens
 */

:root {
`;

  // Colors
  css += '  /* Colors */\n';
  Object.entries(tokensToTailwind(colors.items)).forEach(([key, value]) => {
    css += `  --color-${key}: ${value};\n`;
  });

  // Spacing
  css += '\n  /* Spacing */\n';
  Object.entries(tokensToTailwind(clampGenerator(spacing.items))).forEach(([key, value]) => {
    css += `  --space-${key}: ${value};\n`;
  });

  // Text sizes
  css += '\n  /* Text Sizes */\n';
  Object.entries(tokensToTailwind(clampGenerator(textSizes.items))).forEach(([key, value]) => {
    // Remove 'step-' prefix if it exists since we're adding '--size-step-'
    const cleanKey = key.startsWith('step-') ? key.slice(5) : key;
    css += `  --size-step-${cleanKey}: ${value};\n`;
  });

  // Typography
  css += '\n  /* Typography */\n';
  Object.entries(tokensToTailwind(fonts.items)).forEach(([key, value]) => {
    css += `  --font-${key}: ${value};\n`;
  });

  Object.entries(tokensToTailwind(textWeights.items)).forEach(([key, value]) => {
    css += `  --font-${key}: ${value};\n`;
  });

  Object.entries(tokensToTailwind(textLeading.items)).forEach(([key, value]) => {
    css += `  --leading-${key}: ${value};\n`;
  });

  css += '}\n\n';

  // Generate theme classes
  css += '/* Theme Classes */\n';
  themes.items.forEach(theme => {
    css += `.theme-${theme.name} {\n`;
    css += `  --theme-color-light: var(--color-${theme.name}-light);\n`;
    css += `  --theme-color-dark: var(--color-${theme.name});\n`;
    css += '}\n';
  });

  return css;
}

function main() {
  try {
    console.log('🚀 Generating CSS from design tokens...');

    const css = generateTokenCSS();

    fs.writeFileSync('./tokens-generated.css', css);

    console.log('✅ Generated CSS custom properties at tokens-generated.css');
    console.log('📋 Build system will copy this to the final location');

  } catch (error) {
    console.error('❌ Error generating tokens:', error);
    process.exit(1);
  }
}

main();