1#!/usr/bin/env node
2/**
3 * sync-brand-to-tokens.cjs
4 *
5 * Syncs brand-guidelines.md colors → design-tokens.json → design-tokens.css
6 *
7 * Usage:
8 *   node sync-brand-to-tokens.cjs
9 *   node sync-brand-to-tokens.cjs --dry-run
10 */
11 
12const fs = require('fs');
13const path = require('path');
14const { execSync } = require('child_process');
15 
16// Paths
17const BRAND_GUIDELINES = 'docs/brand-guidelines.md';
18const DESIGN_TOKENS_JSON = 'assets/design-tokens.json';
19const DESIGN_TOKENS_CSS = 'assets/design-tokens.css';
20const GENERATE_TOKENS_SCRIPT = '.claude/skills/design-system/scripts/generate-tokens.cjs';
21 
22/**
23 * Extract color info from brand guidelines markdown
24 */
25function extractColorsFromMarkdown(content) {
26  const colors = {
27    primary: { name: 'primary', shades: {} },
28    secondary: { name: 'secondary', shades: {} },
29    accent: { name: 'accent', shades: {} }
30  };
31 
32  // Extract primary color name and hex from Quick Reference table
33  const quickRefMatch = content.match(/Primary Color\s*\|\s*#([A-Fa-f0-9]{6})\s*\(([^)]+)\)/);
34  if (quickRefMatch) {
35    colors.primary.name = quickRefMatch[2].toLowerCase().replace(/\s+/g, '-');
36    colors.primary.base = `#${quickRefMatch[1]}`;
37  }
38 
39  const secondaryMatch = content.match(/Secondary Color\s*\|\s*#([A-Fa-f0-9]{6})\s*\(([^)]+)\)/);
40  if (secondaryMatch) {
41    colors.secondary.name = secondaryMatch[2].toLowerCase().replace(/\s+/g, '-');
42    colors.secondary.base = `#${secondaryMatch[1]}`;
43  }
44 
45  const accentMatch = content.match(/Accent Color\s*\|\s*#([A-Fa-f0-9]{6})\s*\(([^)]+)\)/);
46  if (accentMatch) {
47    colors.accent.name = accentMatch[2].toLowerCase().replace(/\s+/g, '-');
48    colors.accent.base = `#${accentMatch[1]}`;
49  }
50 
51  // Extract all shades from Primary Colors table
52  const primarySection = content.match(/### Primary Colors[\s\S]*?\|[\s\S]*?(?=###|$)/i);
53  if (primarySection) {
54    const hexMatches = primarySection[0].matchAll(/\*\*([^*]+)\*\*\s*\|\s*#([A-Fa-f0-9]{6})/g);
55    for (const match of hexMatches) {
56      const name = match[1].trim().toLowerCase();
57      const hex = `#${match[2]}`;
58      if (name.includes('dark')) colors.primary.dark = hex;
59      else if (name.includes('light')) colors.primary.light = hex;
60      else colors.primary.base = hex;
61    }
62  }
63 
64  // Extract secondary shades
65  const secondarySection = content.match(/### Secondary Colors[\s\S]*?\|[\s\S]*?(?=###|$)/i);
66  if (secondarySection) {
67    const hexMatches = secondarySection[0].matchAll(/\*\*([^*]+)\*\*\s*\|\s*#([A-Fa-f0-9]{6})/g);
68    for (const match of hexMatches) {
69      const name = match[1].trim().toLowerCase();
70      const hex = `#${match[2]}`;
71      if (name.includes('dark')) colors.secondary.dark = hex;
72      else if (name.includes('light')) colors.secondary.light = hex;
73      else colors.secondary.base = hex;
74    }
75  }
76 
77  // Extract accent shades
78  const accentSection = content.match(/### Accent Colors[\s\S]*?\|[\s\S]*?(?=###|$)/i);
79  if (accentSection) {
80    const hexMatches = accentSection[0].matchAll(/\*\*([^*]+)\*\*\s*\|\s*#([A-Fa-f0-9]{6})/g);
81    for (const match of hexMatches) {
82      const name = match[1].trim().toLowerCase();
83      const hex = `#${match[2]}`;
84      if (name.includes('dark')) colors.accent.dark = hex;
85      else if (name.includes('light')) colors.accent.light = hex;
86      else colors.accent.base = hex;
87    }
88  }
89 
90  return colors;
91}
92 
93/**
94 * Generate color scale from base color (simple approach)
95 */
96function generateColorScale(baseHex, darkHex, lightHex) {
97  // Use provided shades or generate approximations
98  return {
99    "50": { "$value": lightHex || adjustBrightness(baseHex, 0.9), "$type": "color" },
100    "100": { "$value": lightHex || adjustBrightness(baseHex, 0.8), "$type": "color" },
101    "200": { "$value": adjustBrightness(baseHex, 0.6), "$type": "color" },
102    "300": { "$value": adjustBrightness(baseHex, 0.4), "$type": "color" },
103    "400": { "$value": adjustBrightness(baseHex, 0.2), "$type": "color" },
104    "500": { "$value": baseHex, "$type": "color" },
105    "600": { "$value": darkHex || adjustBrightness(baseHex, -0.15), "$type": "color" },
106    "700": { "$value": adjustBrightness(baseHex, -0.3), "$type": "color" },
107    "800": { "$value": adjustBrightness(baseHex, -0.45), "$type": "color" },
108    "900": { "$value": adjustBrightness(baseHex, -0.6), "$type": "color" }
109  };
110}
111 
112/**
113 * Adjust hex color brightness
114 */
115function adjustBrightness(hex, percent) {
116  const num = parseInt(hex.replace('#', ''), 16);
117  const r = Math.min(255, Math.max(0, (num >> 16) + Math.round(255 * percent)));
118  const g = Math.min(255, Math.max(0, ((num >> 8) & 0x00FF) + Math.round(255 * percent)));
119  const b = Math.min(255, Math.max(0, (num & 0x0000FF) + Math.round(255 * percent)));
120  return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0').toUpperCase()}`;
121}
122 
123/**
124 * Update design tokens JSON
125 */
126function updateDesignTokens(tokens, colors) {
127  // Update brand name
128  const brandName = `ClaudeKit Marketing - ${colors.primary.name.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ')}`;
129  tokens.brand = brandName;
130 
131  // Update primitive colors with new names
132  const primitiveColors = tokens.primitive?.color || {};
133 
134  // Remove old color keys, add new ones
135  delete primitiveColors.coral;
136  delete primitiveColors.purple;
137  delete primitiveColors.mint;
138 
139  // Add new named colors
140  primitiveColors[colors.primary.name] = generateColorScale(
141    colors.primary.base,
142    colors.primary.dark,
143    colors.primary.light
144  );
145  primitiveColors[colors.secondary.name] = generateColorScale(
146    colors.secondary.base,
147    colors.secondary.dark,
148    colors.secondary.light
149  );
150  primitiveColors[colors.accent.name] = generateColorScale(
151    colors.accent.base,
152    colors.accent.dark,
153    colors.accent.light
154  );
155 
156  tokens.primitive.color = primitiveColors;
157 
158  // Update ALL semantic color references
159  if (tokens.semantic?.color) {
160    const sem = tokens.semantic.color;
161    const p = colors.primary.name;
162    const s = colors.secondary.name;
163    const a = colors.accent.name;
164 
165    // Primary variants
166    sem.primary = { "$value": `{primitive.color.${p}.500}`, "$type": "color" };
167    sem['primary-hover'] = { "$value": `{primitive.color.${p}.600}`, "$type": "color" };
168    sem['primary-active'] = { "$value": `{primitive.color.${p}.700}`, "$type": "color" };
169    sem['primary-light'] = { "$value": `{primitive.color.${p}.400}`, "$type": "color" };
170    sem['primary-lighter'] = { "$value": `{primitive.color.${p}.100}`, "$type": "color" };
171    sem['primary-dark'] = { "$value": `{primitive.color.${p}.600}`, "$type": "color" };
172 
173    // Secondary variants
174    sem.secondary = { "$value": `{primitive.color.${s}.500}`, "$type": "color" };
175    sem['secondary-hover'] = { "$value": `{primitive.color.${s}.600}`, "$type": "color" };
176    sem['secondary-light'] = { "$value": `{primitive.color.${s}.300}`, "$type": "color" };
177    sem['secondary-dark'] = { "$value": `{primitive.color.${s}.600}`, "$type": "color" };
178 
179    // Accent variants
180    sem.accent = { "$value": `{primitive.color.${a}.500}`, "$type": "color" };
181    sem['accent-hover'] = { "$value": `{primitive.color.${a}.600}`, "$type": "color" };
182    sem['accent-light'] = { "$value": `{primitive.color.${a}.300}`, "$type": "color" };
183 
184    // Status colors (use accent for success, primary for error/info)
185    sem.success = { "$value": `{primitive.color.${a}.500}`, "$type": "color" };
186    sem['success-light'] = { "$value": `{primitive.color.${a}.300}`, "$type": "color" };
187    sem.error = { "$value": `{primitive.color.${p}.500}`, "$type": "color" };
188    sem['error-light'] = { "$value": `{primitive.color.${p}.300}`, "$type": "color" };
189    sem.info = { "$value": `{primitive.color.${s}.500}`, "$type": "color" };
190    sem['info-light'] = { "$value": `{primitive.color.${s}.300}`, "$type": "color" };
191  }
192 
193  // Update component references (button uses primary color with opacity)
194  if (tokens.component?.button?.secondary) {
195    const primaryBase = colors.primary.base;
196    tokens.component.button.secondary['bg-hover'] = {
197      "$value": `${primaryBase}1A`,
198      "$type": "color"
199    };
200  }
201 
202  return tokens;
203}
204 
205/**
206 * Main
207 */
208function main() {
209  const dryRun = process.argv.includes('--dry-run');
210 
211  console.log('🔄 Syncing brand guidelines → design tokens\n');
212 
213  // Read brand guidelines
214  const guidelinesPath = path.resolve(process.cwd(), BRAND_GUIDELINES);
215  if (!fs.existsSync(guidelinesPath)) {
216    console.error(`❌ Brand guidelines not found: ${guidelinesPath}`);
217    process.exit(1);
218  }
219  const guidelinesContent = fs.readFileSync(guidelinesPath, 'utf-8');
220 
221  // Extract colors
222  const colors = extractColorsFromMarkdown(guidelinesContent);
223  console.log('📊 Extracted colors:');
224  console.log(`   Primary: ${colors.primary.name} (${colors.primary.base})`);
225  console.log(`   Secondary: ${colors.secondary.name} (${colors.secondary.base})`);
226  console.log(`   Accent: ${colors.accent.name} (${colors.accent.base})\n`);
227 
228  // Read existing tokens
229  const tokensPath = path.resolve(process.cwd(), DESIGN_TOKENS_JSON);
230  let tokens = {};
231  if (fs.existsSync(tokensPath)) {
232    tokens = JSON.parse(fs.readFileSync(tokensPath, 'utf-8'));
233  }
234 
235  // Update tokens
236  tokens = updateDesignTokens(tokens, colors);
237 
238  if (dryRun) {
239    console.log('📋 Would update design-tokens.json:');
240    console.log(JSON.stringify(tokens.primitive.color, null, 2).slice(0, 500) + '...');
241    console.log('\n⏭️  Dry run - no files changed');
242    return;
243  }
244 
245  // Write updated tokens
246  fs.writeFileSync(tokensPath, JSON.stringify(tokens, null, 2));
247  console.log(`✅ Updated: ${DESIGN_TOKENS_JSON}`);
248 
249  // Regenerate CSS
250  const generateScript = path.resolve(process.cwd(), GENERATE_TOKENS_SCRIPT);
251  if (fs.existsSync(generateScript)) {
252    try {
253      execSync(`node ${generateScript} --config ${DESIGN_TOKENS_JSON} -o ${DESIGN_TOKENS_CSS}`, {
254        cwd: process.cwd(),
255        stdio: 'inherit'
256      });
257      console.log(`✅ Regenerated: ${DESIGN_TOKENS_CSS}`);
258    } catch (e) {
259      console.error('⚠️  Failed to regenerate CSS:', e.message);
260    }
261  }
262 
263  console.log('\n✨ Brand sync complete!');
264}
265 
266main();
267