1#!/usr/bin/env node
2/**
3 * embed-tokens.cjs
4 * Reads design-tokens.css and outputs embeddable inline CSS.
5 * Use when generating standalone HTML files (infographics, slides, etc.)
6 *
7 * Usage:
8 *   node embed-tokens.cjs           # Output full CSS
9 *   node embed-tokens.cjs --minimal # Output only commonly used tokens
10 *   node embed-tokens.cjs --style   # Wrap in <style> tags
11 */
12 
13const fs = require('fs');
14const path = require('path');
15 
16// Find project root (look for assets/design-tokens.css)
17function findProjectRoot(startDir) {
18  let dir = startDir;
19  while (dir !== '/') {
20    if (fs.existsSync(path.join(dir, 'assets', 'design-tokens.css'))) {
21      return dir;
22    }
23    dir = path.dirname(dir);
24  }
25  return null;
26}
27 
28const projectRoot = findProjectRoot(process.cwd());
29if (!projectRoot) {
30  console.error('Error: Could not find assets/design-tokens.css');
31  process.exit(1);
32}
33 
34const tokensPath = path.join(projectRoot, 'assets', 'design-tokens.css');
35 
36// Minimal tokens commonly used in infographics/slides
37const MINIMAL_TOKENS = [
38  '--primitive-spacing-',
39  '--primitive-fontSize-',
40  '--primitive-fontWeight-',
41  '--primitive-lineHeight-',
42  '--primitive-radius-',
43  '--primitive-shadow-glow-',
44  '--primitive-gradient-',
45  '--primitive-duration-',
46  '--color-primary',
47  '--color-secondary',
48  '--color-accent',
49  '--color-background',
50  '--color-surface',
51  '--color-foreground',
52  '--color-border',
53  '--typography-font-',
54  '--card-',
55];
56 
57function extractTokens(css, minimal = false) {
58  // Extract :root block
59  const rootMatch = css.match(/:root\s*\{([^}]+)\}/g);
60  if (!rootMatch) return '';
61 
62  let allVars = [];
63  for (const block of rootMatch) {
64    const vars = block.match(/--[\w-]+:\s*[^;]+;/g) || [];
65    allVars = allVars.concat(vars);
66  }
67 
68  if (minimal) {
69    allVars = allVars.filter(v =>
70      MINIMAL_TOKENS.some(token => v.includes(token))
71    );
72  }
73 
74  // Dedupe
75  allVars = [...new Set(allVars)];
76 
77  return `:root {\n  ${allVars.join('\n  ')}\n}`;
78}
79 
80// Parse args
81const args = process.argv.slice(2);
82const minimal = args.includes('--minimal');
83const wrapStyle = args.includes('--style');
84 
85try {
86  const css = fs.readFileSync(tokensPath, 'utf-8');
87  let output = extractTokens(css, minimal);
88 
89  if (wrapStyle) {
90    output = `<style>\n/* Design Tokens (embedded for standalone HTML) */\n${output}\n</style>`;
91  } else {
92    output = `/* Design Tokens (embedded for standalone HTML) */\n${output}`;
93  }
94 
95  console.log(output);
96} catch (err) {
97  console.error(`Error reading tokens: ${err.message}`);
98  process.exit(1);
99}
100