@stacklist-app/brandkit 1.1.1

package/integrations/astro.js

@@ -0,0 +1,26 @@
+var brandkitVite = require('./vite');
+
+/**
+ * Astro integration for @stacklist-app/brandkit.
+ * Wraps the Vite plugin to serve brand guide at /brand.
+ *
+ * Usage in astro.config.mjs:
+ *   import brandkit from '@stacklist-app/brandkit/integrations/astro'
+ *   export default defineConfig({ integrations: [brandkit()] })
+ */
+module.exports = function brandkitAstro(options) {
+  var vitePlugin = brandkitVite(options);
+
+  return {
+    name: '@stacklist-app/brandkit',
+    hooks: {
+      'astro:config:setup': function (params) {
+        params.updateConfig({
+          vite: {
+            plugins: [vitePlugin]
+          }
+        });
+      }
+    }
+  };
+};

package/integrations/vite.js

@@ -0,0 +1,81 @@
+var fs = require('fs');
+var path = require('path');
+
+/**
+ * Vite plugin for @stacklist-app/brandkit.
+ * Serves brand guide files at /brand during dev.
+ * Copies built files to output on build.
+ *
+ * Usage in vite.config.js:
+ *   import brandkit from '@stacklist-app/brandkit/integrations/vite'
+ *   export default defineConfig({ plugins: [brandkit()] })
+ */
+module.exports = function brandkitVite(options) {
+  var brandDir = (options && options.dir) || 'brand';
+  var route = (options && options.route) || '/brand';
+
+  return {
+    name: '@stacklist-app/brandkit',
+
+    configureServer: function (server) {
+      var dir = path.resolve(brandDir);
+      if (!fs.existsSync(dir)) return;
+
+      server.middlewares.use(route, function (req, res, next) {
+        var filePath = path.join(dir, req.url === '/' ? '/index.html' : req.url);
+
+        if (!filePath.startsWith(dir)) {
+          res.statusCode = 403;
+          res.end('Forbidden');
+          return;
+        }
+
+        if (!fs.existsSync(filePath)) {
+          next();
+          return;
+        }
+
+        var ext = path.extname(filePath).toLowerCase();
+        var mimeTypes = {
+          '.html': 'text/html',
+          '.css': 'text/css',
+          '.js': 'application/javascript',
+          '.json': 'application/json',
+          '.svg': 'image/svg+xml',
+          '.png': 'image/png',
+          '.jpg': 'image/jpeg'
+        };
+
+        res.setHeader('Content-Type', mimeTypes[ext] || 'application/octet-stream');
+        fs.createReadStream(filePath).pipe(res);
+      });
+    },
+
+    closeBundle: function () {
+      // Copy brand directory to build output
+      var srcDir = path.resolve(brandDir);
+      if (!fs.existsSync(srcDir)) return;
+
+      var outDir = path.resolve('dist', route.replace(/^\//, ''));
+      if (!fs.existsSync(outDir)) {
+        fs.mkdirSync(outDir, { recursive: true });
+      }
+
+      copyDir(srcDir, outDir);
+    }
+  };
+};
+
+function copyDir(src, dest) {
+  var entries = fs.readdirSync(src, { withFileTypes: true });
+  for (var i = 0; i < entries.length; i++) {
+    var srcPath = path.join(src, entries[i].name);
+    var destPath = path.join(dest, entries[i].name);
+    if (entries[i].isDirectory()) {
+      if (!fs.existsSync(destPath)) fs.mkdirSync(destPath, { recursive: true });
+      copyDir(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}

package/lib/config-schema.js

@@ -0,0 +1,219 @@
+/**
+ * Starter config template with __TODO markers for AI agents.
+ * Every section includes example entries with the correct field names
+ * so AI agents can see the exact schema contract.
+ * Extractable fields (colors, fonts, spacing, logos) are populated by generate.
+ */
+function starterConfig() {
+  return {
+    brand: {
+      name: '__TODO',
+      displayName: '__TODO',
+      tagline: '__TODO',
+      description: '__TODO: A brief description of the brand and its visual language.',
+      url: '__TODO',
+      byline: '__TODO',
+      version: '1.0',
+      date: new Date().toLocaleDateString('en-US', { month: 'long', year: 'numeric' })
+    },
+    fonts: {
+      display: {
+        family: 'Inter',
+        googleImport: 'Inter:wght@300;400;500;600;700',
+        description: '__TODO: Describe the display font character and usage.'
+      },
+      body: {
+        family: 'Inter',
+        googleImport: 'Inter:wght@300;400;500;600;700',
+        description: '__TODO: Describe the body font character and usage.'
+      }
+    },
+    theme: {
+      '--purple': '#6366F1',
+      '--violet': '#4338CA',
+      '--lavender': '#A5B4FC',
+      '--coral': '#F87171',
+      '--coral-dark': '#DC2626',
+      '--coral-light': '#FCA5A5',
+      '--magenta': '#EC4899',
+      '--ink': '#111827',
+      '--graphite': '#374151',
+      '--slate': '#6B7280',
+      '--haze': '#D1D5DB',
+      '--mist': '#F3F4F6',
+      '--cloud': '#F9FAFB',
+      '--white': '#FFFFFF',
+      '--success': '#10B981',
+      '--warning': '#F59E0B',
+      '--error': '#EF4444',
+      '--info': '#3B82F6',
+      '--gradient-brand': 'linear-gradient(135deg, #4338CA 0%, #6366F1 50%, #EC4899 100%)',
+      '--gradient-brand-subtle': 'linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(236, 72, 153, 0.06) 100%)',
+      '--purple-rgb': '99, 102, 241',
+      '--ink-rgb': '17, 24, 39',
+      '--error-rgb': '239, 68, 68',
+      '--success-rgb': '16, 185, 129'
+    },
+    nav: [
+      { group: 'Colors', items: [
+        { label: 'Palette', id: 'palette' },
+        { label: 'Gradients', id: 'gradients' }
+      ]},
+      { group: 'Logos', items: [
+        { label: 'Downloads', id: 'logos' }
+      ]},
+      { group: 'Content', items: [
+        { label: 'Typography', id: 'typography' },
+        { label: 'Text Hierarchy', id: 'hierarchy' },
+        { label: 'Voice & Tone', id: 'voice' },
+        { label: 'Spacing', id: 'spacing' }
+      ]},
+      { group: 'Components', items: [
+        { label: 'Buttons & Cards', id: 'components' },
+        { label: 'Accessibility', id: 'accessibility' },
+        { label: 'CSS Variables', id: 'variables' }
+      ]}
+    ],
+    colors: {
+      brand: { label: 'Brand', items: [
+        { name: '__TODO: Primary', hex: '#6366F1', oklch: 'oklch(0.55 0.22 264)', cssVar: '--color-primary', role: '__TODO: Primary accent', light: false },
+        { name: '__TODO: Secondary', hex: '#EC4899', oklch: 'oklch(0.59 0.22 346)', cssVar: '--color-secondary', role: '__TODO: Secondary accent', light: false }
+      ]},
+      neutrals: { label: 'Neutrals', items: [
+        { name: 'Ink', hex: '#111827', oklch: 'oklch(0.17 0.02 265)', cssVar: '--foreground', role: 'Primary text, headings', light: false },
+        { name: 'Slate', hex: '#6B7280', oklch: 'oklch(0.55 0.02 265)', cssVar: '--muted-foreground', role: 'Tertiary text, captions', light: false },
+        { name: 'Mist', hex: '#F3F4F6', oklch: 'oklch(0.96 0.01 265)', cssVar: '--secondary', role: 'Section backgrounds', light: true },
+        { name: 'Cloud', hex: '#F9FAFB', oklch: 'oklch(0.98 0.00 265)', cssVar: '--background', role: 'Page background', light: true }
+      ]},
+      semantic: { label: 'Semantic', items: [
+        { name: 'Success', hex: '#10B981', oklch: 'oklch(0.70 0.17 163)', cssVar: '--success', role: 'Confirmations, positive states', light: false },
+        { name: 'Warning', hex: '#F59E0B', oklch: 'oklch(0.78 0.16 80)', cssVar: '--warning', role: 'Attention, caution states', light: false },
+        { name: 'Error', hex: '#EF4444', oklch: 'oklch(0.59 0.22 27)', cssVar: '--destructive', role: 'Errors, destructive actions', light: false }
+      ]}
+    },
+    gradients: [
+      {
+        name: 'Brand',
+        css: 'linear-gradient(135deg, #4338CA 0%, #6366F1 50%, #EC4899 100%)',
+        description: '__TODO: Primary gradient usage',
+        stops: [
+          { color: '#4338CA', position: '0%', name: 'Violet' },
+          { color: '#6366F1', position: '50%', name: 'Indigo' },
+          { color: '#EC4899', position: '100%', name: 'Pink' }
+        ]
+      },
+      {
+        name: 'Subtle',
+        css: 'linear-gradient(135deg, rgba(99, 102, 241, 0.06) 0%, rgba(236, 72, 153, 0.06) 100%)',
+        description: 'Card tints, section backgrounds, hover states'
+      }
+    ],
+    gradientUsage: {
+      do: ['__TODO: When to use the gradient'],
+      dont: ['__TODO: When not to use the gradient']
+    },
+    sections: {
+      gradients: '__TODO: Describe the gradient system.',
+      gradientTextDemo: '__TODO: A headline to demo gradient text.',
+      logos: 'Download logo files for use across web, social, and print materials. Select format and size, then download.',
+      components: '__TODO: Describe the component patterns.',
+      spacing: '__TODO: Describe the spacing scale.',
+      variables: '__TODO: Describe the CSS variable system.'
+    },
+    hierarchy: [
+      { class: 'h-primary', label: 'Primary', colorVar: '--ink', colorName: 'Ink', hex: '#111827', description: 'Primary text — body copy, headings, and content where readability is critical.' },
+      { class: 'h-secondary', label: 'Secondary', colorVar: '--graphite', colorName: 'Graphite', hex: '#374151', description: 'Secondary text — descriptions, supporting information, and labels.' },
+      { class: 'h-tertiary', label: 'Tertiary', colorVar: '--slate', colorName: 'Slate', hex: '#6B7280', description: 'Tertiary text — captions, timestamps, footnotes, and metadata.' },
+      { class: 'h-accent', label: 'Accent', colorVar: '--purple', colorName: 'Primary', hex: '#6366F1', description: 'Accent text — links, interactive labels, and calls to action.' }
+    ],
+    logos: [],
+    logoSizes: [
+      { label: 'Original', width: null },
+      { label: '800px', width: 800 },
+      { label: '400px', width: 400 },
+      { label: '200px', width: 200 }
+    ],
+    typography: [
+      { name: 'Display XL', font: 'display', size: '72px', weight: 700, tracking: '-0.03em', leading: '1.05', sample: '__TODO: Hero headline' },
+      { name: 'Display', font: 'display', size: '56px', weight: 700, tracking: '-0.025em', leading: '1.1', sample: '__TODO: Section headline' },
+      { name: 'H1', font: 'display', size: '44px', weight: 700, tracking: '-0.02em', leading: '1.15', sample: '__TODO: Page heading' },
+      { name: 'H2', font: 'display', size: '36px', weight: 700, tracking: '-0.015em', leading: '1.2', sample: '__TODO: Section heading' },
+      { name: 'H3', font: 'display', size: '28px', weight: 600, tracking: '-0.01em', leading: '1.3', sample: '__TODO: Subsection heading' },
+      { name: 'H4', font: 'display', size: '22px', weight: 600, tracking: '-0.005em', leading: '1.35', sample: '__TODO: Card heading' },
+      { name: 'Body LG', font: 'body', size: '18px', weight: 400, tracking: '0', leading: '1.7', sample: '__TODO: Intro paragraph' },
+      { name: 'Body', font: 'body', size: '16px', weight: 400, tracking: '0', leading: '1.7', sample: '__TODO: Body copy' },
+      { name: 'Body SM', font: 'body', size: '14px', weight: 400, tracking: '0', leading: '1.6', sample: '__TODO: Small text' },
+      { name: 'Caption', font: 'body', size: '12px', weight: 500, tracking: '0.02em', leading: '1.5', sample: '__TODO: Caption text' },
+      { name: 'Overline', font: 'body', size: '11px', weight: 700, tracking: '0.1em', leading: '1.4', sample: '__TODO: Overline text', uppercase: true }
+    ],
+    voice: {
+      description: '__TODO: Describe the brand voice.',
+      do: ['__TODO: Example of good copy'],
+      dont: ['__TODO: Example of bad copy']
+    },
+    accessibility: [
+      { fg: '#6366F1', bg: '#FFFFFF', fgName: 'Primary', bgName: 'White', ratio: '__TODO', rating: '__TODO', border: true, largeText: false },
+      { fg: '#FFFFFF', bg: '#111827', fgName: 'White', bgName: 'Ink', ratio: '__TODO', rating: '__TODO', border: false, largeText: false }
+    ],
+    cssVariables: [
+      { section: 'Colors', vars: [
+        { prop: '--color-primary', value: '#6366F1', comment: 'Primary brand color' },
+        { prop: '--foreground', value: '#111827', comment: 'Primary text' }
+      ]},
+      { section: 'Typography', vars: [
+        { prop: '--font-display', value: "'Inter', sans-serif", comment: 'Display font' },
+        { prop: '--font-body', value: "'Inter', sans-serif", comment: 'Body font' }
+      ]}
+    ],
+    spacing: [
+      { px: 4, token: 'space-1' }, { px: 8, token: 'space-2' },
+      { px: 12, token: 'space-3' }, { px: 16, token: 'space-4' },
+      { px: 24, token: 'space-6' }, { px: 32, token: 'space-8' },
+      { px: 48, token: 'space-12' }, { px: 64, token: 'space-16' },
+      { px: 96, token: 'space-24' }
+    ],
+    components: {
+      buttons: [
+        { variant: 'Primary', items: [
+          { class: 'btn-primary', sizes: ['sm', 'md', 'lg'], labels: ['Small', '__TODO: Medium CTA', '__TODO: Large CTA'] }
+        ]}
+      ],
+      cards: [
+        { title: '__TODO: Card Title', description: '__TODO: Card description text', tag: '__TODO' }
+      ],
+      stats: [
+        { value: '__TODO', label: '__TODO: Stat description' }
+      ]
+    }
+  };
+}
+
+/**
+ * Deep merge: target values win over source for manually-curated fields.
+ * Source (extracted) overwrites target for extractable fields.
+ */
+function mergeConfigs(existing, extracted) {
+  var result = JSON.parse(JSON.stringify(existing));
+
+  // Extractable fields: overwrite from extracted data
+  // Only fields that come from external sources (Tailwind, CSS, file system)
+  // Derived fields (gradients, hierarchy, accessibility, cssVariables, typography)
+  // are NOT in this list — they only overwrite if existing is empty/scaffold
+  var extractable = ['colors', 'fonts', 'theme', 'spacing', 'logos', 'logoSizes'];
+  for (var i = 0; i < extractable.length; i++) {
+    var key = extractable[i];
+    if (extracted[key] !== undefined && extracted[key] !== null) {
+      // For arrays, only overwrite if extracted has actual content
+      if (Array.isArray(extracted[key]) && extracted[key].length === 0) continue;
+      result[key] = extracted[key];
+    }
+  }
+
+  // Everything else: keep existing (manual/curated fields)
+  return result;
+}
+
+module.exports = {
+  starterConfig: starterConfig,
+  mergeConfigs: mergeConfigs
+};

package/lib/extract-css.js

@@ -0,0 +1,117 @@
+var fs = require('fs');
+var path = require('path');
+
+/**
+ * Extract CSS custom properties from CSS files in a project.
+ * Looks for :root blocks and @theme blocks.
+ */
+function extract(projectDir) {
+  var cssFiles = findCSSFiles(projectDir);
+  var allVars = {};
+
+  for (var i = 0; i < cssFiles.length; i++) {
+    var content = fs.readFileSync(cssFiles[i], 'utf8');
+    var vars = extractFromContent(content);
+    var keys = Object.keys(vars);
+    for (var j = 0; j < keys.length; j++) {
+      allVars[keys[j]] = vars[keys[j]];
+    }
+  }
+
+  return Object.keys(allVars).length ? allVars : null;
+}
+
+function findCSSFiles(dir) {
+  var results = [];
+  var searchDirs = [
+    path.join(dir, 'src'),
+    path.join(dir, 'app'),
+    path.join(dir, 'styles'),
+    dir
+  ];
+
+  for (var i = 0; i < searchDirs.length; i++) {
+    if (!fs.existsSync(searchDirs[i])) continue;
+    scanDir(searchDirs[i], results, 0);
+  }
+  return results;
+}
+
+function scanDir(dir, results, depth) {
+  if (depth > 3) return; // Don't go too deep
+  var entries;
+  try {
+    entries = fs.readdirSync(dir, { withFileTypes: true });
+  } catch (_) {
+    return;
+  }
+
+  for (var i = 0; i < entries.length; i++) {
+    var entry = entries[i];
+    var fullPath = path.join(dir, entry.name);
+    if (entry.isDirectory() && entry.name !== 'node_modules' && entry.name !== '.git') {
+      scanDir(fullPath, results, depth + 1);
+    } else if (entry.isFile() && entry.name.endsWith('.css')) {
+      results.push(fullPath);
+    }
+  }
+}
+
+function extractFromContent(content) {
+  var vars = {};
+
+  // Match :root { ... } blocks
+  var rootRegex = /:root\s*\{([^}]+)\}/g;
+  var match;
+  while ((match = rootRegex.exec(content)) !== null) {
+    parseVarBlock(match[1], vars);
+  }
+
+  // Match @theme { ... } blocks (Tailwind v4)
+  var themeRegex = /@theme\s*\{([^}]+)\}/g;
+  while ((match = themeRegex.exec(content)) !== null) {
+    parseVarBlock(match[1], vars);
+  }
+
+  return vars;
+}
+
+function parseVarBlock(block, vars) {
+  var lineRegex = /(--[\w-]+)\s*:\s*([^;]+);/g;
+  var match;
+  while ((match = lineRegex.exec(block)) !== null) {
+    vars[match[1].trim()] = match[2].trim();
+  }
+}
+
+/**
+ * Map extracted CSS variables to brandkit theme format.
+ * Recognizes common shadcn/ui and Tailwind variable names.
+ */
+function mapToTheme(cssVars) {
+  if (!cssVars) return null;
+
+  var mapping = {
+    '--background': '--cloud',
+    '--foreground': '--ink',
+    '--primary': '--purple',
+    '--secondary': '--mist',
+    '--muted': '--mist',
+    '--muted-foreground': '--slate',
+    '--accent': '--coral',
+    '--destructive': '--error',
+    '--border': '--mist'
+  };
+
+  var theme = {};
+  var keys = Object.keys(cssVars);
+  for (var i = 0; i < keys.length; i++) {
+    var key = keys[i];
+    var mappedKey = mapping[key] || key;
+    theme[mappedKey] = cssVars[key];
+  }
+
+  return theme;
+}
+
+module.exports = { extract: extract, mapToTheme: mapToTheme };

package/lib/extract-logos.js

@@ -0,0 +1,98 @@
+var fs = require('fs');
+var path = require('path');
+
+/**
+ * Find logo/brand asset files in a project.
+ * Looks in common asset directories for files matching brand-related patterns.
+ */
+function extract(projectDir) {
+  var searchDirs = [
+    path.join(projectDir, 'public'),
+    path.join(projectDir, 'static'),
+    path.join(projectDir, 'src', 'assets'),
+    path.join(projectDir, 'assets'),
+    path.join(projectDir, 'images'),
+    path.join(projectDir, 'img')
+  ];
+
+  var patterns = [/logo/i, /brand/i, /mark/i, /icon/i, /wordmark/i, /lockup/i];
+  var extensions = ['.svg', '.png', '.jpg', '.jpeg', '.webp'];
+
+  var found = [];
+
+  for (var i = 0; i < searchDirs.length; i++) {
+    if (!fs.existsSync(searchDirs[i])) continue;
+    scanForLogos(searchDirs[i], patterns, extensions, found, projectDir, 0);
+  }
+
+  if (!found.length) return null;
+
+  // Convert to brandkit logo format
+  return found.map(function (file) {
+    var ext = path.extname(file.path).toLowerCase();
+    var basename = path.basename(file.path, ext);
+    var relativePath = file.relativePath;
+
+    // Determine background hint from filename
+    var background = 'light';
+    if (/white|light|reversed/i.test(basename)) background = 'dark';
+    else if (/dark|black/i.test(basename)) background = 'light';
+
+    var variants = {};
+    var format = ext === '.svg' ? 'svg' : (ext === '.png' ? 'png' : 'jpg');
+    variants[format] = relativePath;
+
+    return {
+      name: prettifyName(basename),
+      description: '',
+      variants: variants,
+      background: background
+    };
+  });
+}
+
+function scanForLogos(dir, patterns, extensions, results, projectDir, depth) {
+  if (depth > 3) return;
+  var entries;
+  try {
+    entries = fs.readdirSync(dir, { withFileTypes: true });
+  } catch (_) {
+    return;
+  }
+
+  for (var i = 0; i < entries.length; i++) {
+    var entry = entries[i];
+    var fullPath = path.join(dir, entry.name);
+
+    if (entry.isDirectory() && entry.name !== 'node_modules') {
+      scanForLogos(fullPath, patterns, extensions, results, projectDir, depth + 1);
+    } else if (entry.isFile()) {
+      var ext = path.extname(entry.name).toLowerCase();
+      if (extensions.indexOf(ext) === -1) continue;
+
+      var matchesPattern = false;
+      for (var j = 0; j < patterns.length; j++) {
+        if (patterns[j].test(entry.name)) {
+          matchesPattern = true;
+          break;
+        }
+      }
+
+      if (matchesPattern) {
+        results.push({
+          path: fullPath,
+          relativePath: path.relative(projectDir, fullPath)
+        });
+      }
+    }
+  }
+}
+
+function prettifyName(basename) {
+  return basename
+    .replace(/[-_]+/g, ' ')
+    .replace(/\b\w/g, function (c) { return c.toUpperCase(); })
+    .trim();
+}
+
+module.exports = { extract: extract };

package/lib/extract-tailwind.js

@@ -0,0 +1,146 @@
+var fs = require('fs');
+var path = require('path');
+
+/**
+ * Extract colors, fonts, and spacing from a Tailwind config file.
+ * Supports tailwind.config.js and tailwind.config.ts (via regex parsing).
+ */
+function extract(projectDir) {
+  var result = { colors: null, fonts: null, spacing: null };
+
+  // Find tailwind config
+  var jsPath = path.join(projectDir, 'tailwind.config.js');
+  var tsPath = path.join(projectDir, 'tailwind.config.ts');
+  var mjsPath = path.join(projectDir, 'tailwind.config.mjs');
+
+  var configPath = null;
+  if (fs.existsSync(jsPath)) configPath = jsPath;
+  else if (fs.existsSync(mjsPath)) configPath = mjsPath;
+  else if (fs.existsSync(tsPath)) configPath = tsPath;
+
+  if (!configPath) return result;
+
+  var content = fs.readFileSync(configPath, 'utf8');
+
+  // Try to require JS config directly
+  if (configPath.endsWith('.js')) {
+    try {
+      var config = require(configPath);
+      if (config.theme) {
+        result.colors = extractColorsFromTheme(config.theme);
+        result.fonts = extractFontsFromTheme(config.theme);
+        result.spacing = extractSpacingFromTheme(config.theme);
+      }
+      return result;
+    } catch (_) {
+      // Fall through to regex parsing
+    }
+  }
+
+  // Regex parsing for TS or failed JS require
+  result.colors = extractColorsFromText(content);
+  result.fonts = extractFontsFromText(content);
+
+  return result;
+}
+
+function extractColorsFromTheme(theme) {
+  var colors = theme.extend && theme.extend.colors ? theme.extend.colors : theme.colors;
+  if (!colors || typeof colors !== 'object') return null;
+
+  var result = [];
+  flattenColors(colors, '', result);
+  return result.length ? result : null;
+}
+
+function flattenColors(obj, prefix, result) {
+  var keys = Object.keys(obj);
+  for (var i = 0; i < keys.length; i++) {
+    var key = keys[i];
+    var value = obj[key];
+    var name = prefix ? prefix + '-' + key : key;
+
+    if (typeof value === 'string' && value.match(/^#|^rgb|^hsl|^oklch/)) {
+      result.push({ name: name, hex: value, role: '' });
+    } else if (typeof value === 'object' && value !== null) {
+      if (value.DEFAULT) {
+        result.push({ name: name, hex: value.DEFAULT, role: '' });
+      }
+      flattenColors(value, name, result);
+    }
+  }
+}
+
+function extractFontsFromTheme(theme) {
+  var fontFamily = theme.extend && theme.extend.fontFamily ? theme.extend.fontFamily : theme.fontFamily;
+  if (!fontFamily || typeof fontFamily !== 'object') return null;
+
+  var result = {};
+  var keys = Object.keys(fontFamily);
+  for (var i = 0; i < keys.length; i++) {
+    var key = keys[i];
+    var value = fontFamily[key];
+    var family = Array.isArray(value) ? value[0] : value;
+    if (typeof family === 'string') {
+      // Map common keys to display/body
+      if (key === 'sans' || key === 'body' || key === 'text') {
+        result.body = { family: family.replace(/['"]/g, '') };
+      } else if (key === 'display' || key === 'heading' || key === 'serif') {
+        result.display = { family: family.replace(/['"]/g, '') };
+      }
+    }
+  }
+  return Object.keys(result).length ? result : null;
+}
+
+function extractSpacingFromTheme(theme) {
+  var spacing = theme.extend && theme.extend.spacing ? theme.extend.spacing : theme.spacing;
+  if (!spacing || typeof spacing !== 'object') return null;
+
+  var result = [];
+  var keys = Object.keys(spacing);
+  for (var i = 0; i < keys.length; i++) {
+    var key = keys[i];
+    var value = spacing[key];
+    if (typeof value === 'string' && value.match(/^\d/)) {
+      var px = parseFloat(value);
+      if (value.endsWith('rem')) px = px * 16;
+      if (!isNaN(px)) {
+        result.push({ px: Math.round(px), token: 'space-' + key });
+      }
+    }
+  }
+  return result.length ? result.sort(function (a, b) { return a.px - b.px; }) : null;
+}
+
+function extractColorsFromText(content) {
+  var colorMatches = [];
+  var regex = /['"]?([\w-]+)['"]?\s*:\s*['"]?(#[0-9a-fA-F]{3,8})['"]?/g;
+  var match;
+  while ((match = regex.exec(content)) !== null) {
+    colorMatches.push({ name: match[1], hex: match[2], role: '' });
+  }
+  return colorMatches.length ? colorMatches : null;
+}
+
+function extractFontsFromText(content) {
+  var fontRegex = /fontFamily\s*:\s*\{([^}]+)\}/;
+  var fontMatch = content.match(fontRegex);
+  if (!fontMatch) return null;
+
+  var result = {};
+  var entryRegex = /['"]?(sans|body|display|heading|serif)['"]?\s*:\s*\[?\s*['"]([^'"]+)['"]/g;
+  var match;
+  while ((match = entryRegex.exec(fontMatch[1])) !== null) {
+    var key = match[1];
+    var family = match[2];
+    if (key === 'sans' || key === 'body') {
+      result.body = { family: family };
+    } else {
+      result.display = { family: family };
+    }
+  }
+  return Object.keys(result).length ? result : null;
+}
+
+module.exports = { extract: extract };