designlang 5.0.0 → 6.0.0

package/src/extractors/shadows.js

@@ -1,27 +1,70 @@
 export function extractShadows(computedStyles) {
   const shadowSet = new Set();
+  const textShadowSet = new Set();
 
   for (const el of computedStyles) {
     if (el.boxShadow && el.boxShadow !== 'none') {
       shadowSet.add(el.boxShadow);
     }
+    if (el.textShadow && el.textShadow !== 'none') {
+      textShadowSet.add(el.textShadow);
+    }
+  }
+
+  const values = [...shadowSet].map(raw => parseShadow(raw));
+  values.sort((a, b) => a.visualWeight - b.visualWeight);
+
+  const textShadows = [...textShadowSet].map(raw => parseShadow(raw));
+  textShadows.sort((a, b) => a.visualWeight - b.visualWeight);
+
+  return { values, textShadows };
+}
+
+function parseShadow(raw) {
+  const inset = raw.includes('inset');
+  const cleaned = raw.replace(/\binset\b/g, '').trim();
+
+  // Extract color (rgb/rgba/hsl/hsla or named/hex) — find the non-numeric portion
+  let color = '';
+  let numericPart = cleaned;
+  // Match color functions first (they may contain commas/numbers)
+  const colorFnMatch = cleaned.match(/(rgba?\([^)]+\)|hsla?\([^)]+\))/);
+  if (colorFnMatch) {
+    color = colorFnMatch[1];
+    numericPart = cleaned.replace(color, '').trim();
+  } else {
+    // Try hex or named color at start or end
+    const hexMatch = cleaned.match(/(#[0-9a-fA-F]{3,8})/);
+    if (hexMatch) {
+      color = hexMatch[1];
+      numericPart = cleaned.replace(color, '').trim();
+    } else {
+      // Named color — typically last or first token that isn't a length
+      const tokens = cleaned.split(/\s+/);
+      const colorToken = tokens.find(t => !/^-?[\d.]+px$/.test(t) && !/^[\d.]+$/.test(t));
+      if (colorToken) {
+        color = colorToken;
+        numericPart = cleaned.replace(colorToken, '').trim();
+      }
+    }
   }
 
-  const values = [...shadowSet].map(raw => {
-    // Parse: offset-x offset-y blur spread color [inset]
-    const inset = raw.includes('inset');
-    // Approximate blur from the string for classification
-    const nums = raw.match(/([\d.]+)px/g)?.map(n => parseFloat(n)) || [];
-    const blur = nums[2] || 0;
-    let label = 'md';
-    if (blur <= 2) label = 'xs';
-    else if (blur <= 6) label = 'sm';
-    else if (blur <= 15) label = 'md';
-    else if (blur <= 30) label = 'lg';
-    else label = 'xl';
-    return { raw, blur, inset, label };
-  });
-
-  values.sort((a, b) => a.blur - b.blur);
-  return { values };
+  // Parse numeric values (offset-x, offset-y, blur, spread)
+  const nums = numericPart.match(/-?[\d.]+px/g)?.map(n => parseFloat(n)) || [];
+  const offsetX = nums[0] || 0;
+  const offsetY = nums[1] || 0;
+  const blur = nums[2] || 0;
+  const spread = nums[3] || 0;
+
+  // Visual weight = distance + blur
+  const visualWeight = Math.sqrt(offsetX * offsetX + offsetY * offsetY) + blur;
+
+  let label = 'none';
+  if (visualWeight > 0 && visualWeight <= 3) label = 'xs';
+  else if (visualWeight <= 8) label = 'sm';
+  else if (visualWeight <= 16) label = 'md';
+  else if (visualWeight <= 32) label = 'lg';
+  else if (visualWeight > 32) label = 'xl';
+
+  return { raw, offsetX, offsetY, blur, spread, color, inset, visualWeight: Math.round(visualWeight * 100) / 100, label };
 }

package/src/extractors/spacing.js

@@ -1,4 +1,33 @@
-import { parseCSSValue, clusterValues, detectScale } from '../utils.js';
+import { parseCSSValue, detectScale } from '../utils.js';
+
+function naturalBreakCluster(values) {
+  if (values.length <= 1) return values;
+  const sorted = [...values].sort((a, b) => a - b);
+  if (sorted.length <= 2) return sorted;
+
+  // Compute gaps between consecutive values
+  const gaps = [];
+  for (let i = 1; i < sorted.length; i++) {
+    gaps.push(sorted[i] - sorted[i - 1]);
+  }
+
+  // Find median gap
+  const sortedGaps = [...gaps].sort((a, b) => a - b);
+  const medianGap = sortedGaps[Math.floor(sortedGaps.length / 2)];
+
+  // Split into clusters at gaps larger than the median
+  const clusters = [[sorted[0]]];
+  for (let i = 1; i < sorted.length; i++) {
+    if (gaps[i - 1] > medianGap) {
+      clusters.push([sorted[i]]);
+    } else {
+      clusters[clusters.length - 1].push(sorted[i]);
+    }
+  }
+
+  // Use the first (smallest) value in each cluster as representative
+  return clusters.map(c => c[0]);
+}
 
 export function extractSpacing(computedStyles) {
   const allValues = new Set();
@@ -13,7 +42,7 @@ export function extractSpacing(computedStyles) {
   }
 
   const sorted = [...allValues].sort((a, b) => a - b);
-  const clustered = clusterValues(sorted, 2);
+  const clustered = naturalBreakCluster(sorted);
   const { base, scale } = detectScale(clustered);
 
   // Build named tokens

package/src/extractors/variables.js

@@ -18,5 +18,24 @@ export function extractVariables(cssVariables) {
     }
   }
 
-  return categories;
+  // Build dependency map: which variables reference other variables
+  const dependencies = {};
+  for (const [name, value] of Object.entries(cssVariables)) {
+    const refs = [...value.matchAll(/var\((--[\w-]+)/g)].map(m => m[1]);
+    if (refs.length > 0) {
+      dependencies[name] = refs;
+    }
+  }
+
+  // Semantic grouping by name patterns
+  const semantic = { success: {}, warning: {}, error: {}, info: {} };
+  for (const [name, value] of Object.entries(cssVariables)) {
+    const lower = name.toLowerCase();
+    if (/success|green|valid|positive/.test(lower)) semantic.success[name] = value;
+    else if (/warning|warn|yellow|caution|amber/.test(lower)) semantic.warning[name] = value;
+    else if (/error|danger|destructive|red|invalid|negative/.test(lower)) semantic.error[name] = value;
+    else if (/info|informati|blue|notice/.test(lower)) semantic.info[name] = value;
+  }
+
+  return { ...categories, dependencies, semantic };
 }

package/src/formatters/figma.js

@@ -1,76 +1,95 @@
 // Figma Variables JSON format (compatible with Figma Variables import)
 export function formatFigma(design) {
-  const variables = [];
+  const collections = [];
 
-  // Colors
+  // --- Brand collection (colors with light/dark modes) ---
+  const brandVars = [];
+  const hasDarkMode = !!design.darkMode;
+  const brandModes = hasDarkMode ? ['light', 'dark'] : ['light'];
+
+  // Brand colors
   if (design.colors.primary) {
-    variables.push(colorVar('color/primary', design.colors.primary.hex));
+    const v = { name: 'color/primary', type: 'COLOR', values: { light: colorVal(design.colors.primary.hex) } };
+    if (hasDarkMode && design.darkMode.colors.primary) v.values.dark = colorVal(design.darkMode.colors.primary.hex);
+    else if (hasDarkMode) v.values.dark = v.values.light;
+    brandVars.push(v);
   }
   if (design.colors.secondary) {
-    variables.push(colorVar('color/secondary', design.colors.secondary.hex));
+    const v = { name: 'color/secondary', type: 'COLOR', values: { light: colorVal(design.colors.secondary.hex) } };
+    if (hasDarkMode && design.darkMode.colors.secondary) v.values.dark = colorVal(design.darkMode.colors.secondary.hex);
+    else if (hasDarkMode) v.values.dark = v.values.light;
+    brandVars.push(v);
   }
   if (design.colors.accent) {
-    variables.push(colorVar('color/accent', design.colors.accent.hex));
+    const v = { name: 'color/accent', type: 'COLOR', values: { light: colorVal(design.colors.accent.hex) } };
+    if (hasDarkMode && design.darkMode.colors.accent) v.values.dark = v.values.light;
+    brandVars.push(v);
   }
+
+  // Neutrals
   for (let i = 0; i < design.colors.neutrals.length && i < 10; i++) {
-    variables.push(colorVar(`color/neutral/${i * 100 || 50}`, design.colors.neutrals[i].hex));
+    const label = i * 100 || 50;
+    const v = { name: `color/neutral/${label}`, type: 'COLOR', values: { light: colorVal(design.colors.neutrals[i].hex) } };
+    if (hasDarkMode && design.darkMode.colors.neutrals[i]) v.values.dark = colorVal(design.darkMode.colors.neutrals[i].hex);
+    else if (hasDarkMode) v.values.dark = v.values.light;
+    brandVars.push(v);
   }
+
+  // Semantic colors (backgrounds, text)
   for (let i = 0; i < design.colors.backgrounds.length; i++) {
-    variables.push(colorVar(`color/background/${i === 0 ? 'default' : i}`, design.colors.backgrounds[i]));
+    const label = i === 0 ? 'default' : `${i}`;
+    const v = { name: `color/background/${label}`, type: 'COLOR', values: { light: colorVal(design.colors.backgrounds[i]) } };
+    if (hasDarkMode && design.darkMode.colors.backgrounds[i]) v.values.dark = colorVal(design.darkMode.colors.backgrounds[i]);
+    else if (hasDarkMode) v.values.dark = v.values.light;
+    brandVars.push(v);
   }
   for (let i = 0; i < design.colors.text.length && i < 5; i++) {
-    variables.push(colorVar(`color/text/${i === 0 ? 'default' : i}`, design.colors.text[i]));
+    const label = i === 0 ? 'default' : `${i}`;
+    const v = { name: `color/text/${label}`, type: 'COLOR', values: { light: colorVal(design.colors.text[i]) } };
+    if (hasDarkMode && design.darkMode.colors.text[i]) v.values.dark = colorVal(design.darkMode.colors.text[i]);
+    else if (hasDarkMode) v.values.dark = v.values.light;
+    brandVars.push(v);
   }
 
-  // Spacing
-  for (const v of design.spacing.scale.slice(0, 20)) {
-    variables.push({ name: `spacing/${v}`, type: 'FLOAT', value: v, scopes: ['GAP', 'ALL_SCOPES'] });
+  collections.push({ name: 'Brand', modes: brandModes, variables: brandVars });
+
+  // --- Typography collection ---
+  const typoVars = [];
+  for (const s of design.typography.scale.slice(0, 12)) {
+    typoVars.push({ name: `font/size/${s.size}`, type: 'FLOAT', values: { default: s.size } });
+    if (s.weight) {
+      typoVars.push({ name: `font/weight/${s.size}`, type: 'FLOAT', values: { default: parseInt(s.weight) || 400 } });
+    }
+    if (s.lineHeight && s.lineHeight !== 'normal') {
+      const lh = parseFloat(s.lineHeight);
+      if (!isNaN(lh)) {
+        typoVars.push({ name: `font/lineHeight/${s.size}`, type: 'FLOAT', values: { default: lh } });
+      }
+    }
+  }
+  if (typoVars.length > 0) {
+    collections.push({ name: 'Typography', modes: ['default'], variables: typoVars });
   }
 
+  // --- Spacing collection ---
+  const spacingVars = [];
+  for (const v of design.spacing.scale.slice(0, 20)) {
+    spacingVars.push({ name: `spacing/${v}`, type: 'FLOAT', values: { default: v } });
+  }
   // Border radius
   for (const r of design.borders.radii) {
-    variables.push({ name: `radius/${r.label}`, type: 'FLOAT', value: r.value, scopes: ['CORNER_RADIUS'] });
+    spacingVars.push({ name: `radius/${r.label}`, type: 'FLOAT', values: { default: r.value } });
   }
-
-  // Font sizes
-  for (const s of design.typography.scale.slice(0, 12)) {
-    variables.push({ name: `fontSize/${s.size}`, type: 'FLOAT', value: s.size, scopes: ['FONT_SIZE'] });
+  if (spacingVars.length > 0) {
+    collections.push({ name: 'Spacing', modes: ['default'], variables: spacingVars });
   }
 
-  const collection = {
-    name: `Design Language — ${design.meta.title || 'Extracted'}`,
-    modes: [{ name: 'Default', variables }],
-  };
-
-  // Add dark mode if available
-  if (design.darkMode) {
-    const darkVars = [];
-    const dc = design.darkMode.colors;
-    if (dc.primary) darkVars.push(colorVar('color/primary', dc.primary.hex));
-    if (dc.secondary) darkVars.push(colorVar('color/secondary', dc.secondary.hex));
-    for (let i = 0; i < dc.neutrals.length && i < 10; i++) {
-      darkVars.push(colorVar(`color/neutral/${i * 100 || 50}`, dc.neutrals[i].hex));
-    }
-    for (let i = 0; i < dc.backgrounds.length; i++) {
-      darkVars.push(colorVar(`color/background/${i === 0 ? 'default' : i}`, dc.backgrounds[i]));
-    }
-    for (let i = 0; i < dc.text.length && i < 5; i++) {
-      darkVars.push(colorVar(`color/text/${i === 0 ? 'default' : i}`, dc.text[i]));
-    }
-    collection.modes.push({ name: 'Dark', variables: darkVars });
-  }
-
-  return JSON.stringify(collection, null, 2);
+  return JSON.stringify({ collections }, null, 2);
 }
 
-function colorVar(name, hex) {
+function colorVal(hex) {
   const rgb = hexToRgb(hex);
-  return {
-    name,
-    type: 'COLOR',
-    value: { r: rgb.r / 255, g: rgb.g / 255, b: rgb.b / 255, a: 1 },
-    scopes: ['ALL_SCOPES'],
-  };
+  return { r: rgb.r / 255, g: rgb.g / 255, b: rgb.b / 255, a: 1 };
 }
 
 function hexToRgb(hex) {

package/src/formatters/preview.js

@@ -9,39 +9,59 @@ export function formatPreview(design) {
 <title>Design Language: ${esc(meta.title)}</title>
 <style>
   * { margin: 0; padding: 0; box-sizing: border-box; }
-  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #0a0a0a; color: #e5e5e5; line-height: 1.6; }
+  :root {
+    --bg: #0a0a0a; --bg-card: #141414; --border: #222; --text: #e5e5e5; --text-heading: #fff;
+    --text-muted: #666; --text-sub: #a0a0a0; --text-dim: #444; --text-faint: #555; --row-border: #1a1a1a;
+  }
+  [data-theme="light"] {
+    --bg: #f5f5f5; --bg-card: #fff; --border: #ddd; --text: #333; --text-heading: #111;
+    --text-muted: #888; --text-sub: #666; --text-dim: #999; --text-faint: #aaa; --row-border: #e5e5e5;
+  }
+  body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
   .container { max-width: 1200px; margin: 0 auto; padding: 40px 24px; }
-  h1 { font-size: 36px; font-weight: 700; margin-bottom: 8px; color: #fff; }
-  h2 { font-size: 24px; font-weight: 600; margin: 48px 0 20px; color: #fff; border-bottom: 1px solid #222; padding-bottom: 12px; }
-  h3 { font-size: 16px; font-weight: 600; margin: 24px 0 12px; color: #a0a0a0; text-transform: uppercase; letter-spacing: 0.05em; }
-  .meta { color: #666; font-size: 14px; margin-bottom: 32px; }
+  .header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+  .theme-toggle { background: var(--bg-card); border: 1px solid var(--border); color: var(--text); padding: 6px 14px; border-radius: 8px; cursor: pointer; font-size: 13px; white-space: nowrap; }
+  h1 { font-size: 36px; font-weight: 700; margin-bottom: 8px; color: var(--text-heading); }
+  h2 { font-size: 24px; font-weight: 600; margin: 48px 0 20px; color: var(--text-heading); border-bottom: 1px solid var(--border); padding-bottom: 12px; }
+  h3 { font-size: 16px; font-weight: 600; margin: 24px 0 12px; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.05em; }
+  .meta { color: var(--text-muted); font-size: 14px; margin-bottom: 32px; }
   .meta span { margin-right: 16px; }
   .grid { display: grid; gap: 12px; }
   .grid-2 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
   .grid-3 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
   .grid-4 { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
+  @media (max-width: 600px) {
+    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
+    h1 { font-size: 24px; }
+    .container { padding: 20px 12px; }
+  }
+  @media (max-width: 380px) {
+    .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
+  }
 
   /* Color swatches */
-  .swatch { border-radius: 12px; overflow: hidden; background: #141414; border: 1px solid #222; }
+  .swatch { border-radius: 12px; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border); cursor: pointer; position: relative; }
   .swatch-color { height: 80px; position: relative; }
   .swatch-info { padding: 10px 12px; font-size: 13px; }
-  .swatch-hex { font-weight: 600; font-family: monospace; color: #fff; }
-  .swatch-label { font-size: 11px; color: #666; margin-top: 2px; }
-  .swatch-role { display: inline-block; font-size: 10px; background: #222; color: #aaa; padding: 2px 8px; border-radius: 4px; margin-top: 4px; }
+  .swatch-hex { font-weight: 600; font-family: monospace; color: var(--text-heading); }
+  .swatch-label { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
+  .swatch-role { display: inline-block; font-size: 10px; background: var(--border); color: var(--text-sub); padding: 2px 8px; border-radius: 4px; margin-top: 4px; }
+  .copied-tip { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0,0,0,0.8); color: #fff; padding: 4px 12px; border-radius: 6px; font-size: 12px; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
+  .copied-tip.show { opacity: 1; }
 
   /* Type scale */
-  .type-row { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid #1a1a1a; }
-  .type-size { font-family: monospace; color: #666; min-width: 60px; font-size: 13px; }
-  .type-meta { font-size: 12px; color: #444; margin-left: auto; font-family: monospace; }
+  .type-row { display: flex; align-items: baseline; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--row-border); }
+  .type-size { font-family: monospace; color: var(--text-muted); min-width: 60px; font-size: 13px; }
+  .type-meta { font-size: 12px; color: var(--text-dim); margin-left: auto; font-family: monospace; }
 
   /* Spacing */
   .spacing-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
   .spacing-bar { background: linear-gradient(90deg, #3b82f6, #8b5cf6); border-radius: 4px; height: 24px; min-width: 4px; transition: width 0.3s; }
-  .spacing-label { font-family: monospace; font-size: 13px; color: #888; min-width: 60px; }
+  .spacing-label { font-family: monospace; font-size: 13px; color: var(--text-sub); min-width: 60px; }
 
   /* Shadows */
-  .shadow-card { background: #fff; border-radius: 12px; padding: 24px; text-align: center; min-height: 80px; display: flex; align-items: center; justify-content: center; }
-  .shadow-label { font-size: 12px; color: #333; font-family: monospace; }
+  .shadow-card { background: var(--bg-card); border-radius: 12px; padding: 24px; text-align: center; min-height: 80px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); }
+  .shadow-label { font-size: 12px; color: var(--text); font-family: monospace; }
 
   /* Radii */
   .radius-item { width: 60px; height: 60px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); display: flex; align-items: center; justify-content: center; font-size: 11px; color: #fff; font-weight: 600; }
@@ -51,7 +71,7 @@ export function formatPreview(design) {
   .a11y-score.good { color: #22c55e; }
   .a11y-score.warn { color: #eab308; }
   .a11y-score.bad { color: #ef4444; }
-  .a11y-pair { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #141414; border-radius: 8px; margin-bottom: 6px; border: 1px solid #222; }
+  .a11y-pair { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--bg-card); border-radius: 8px; margin-bottom: 6px; border: 1px solid var(--border); flex-wrap: wrap; }
   .a11y-sample { width: 120px; padding: 6px 12px; border-radius: 6px; text-align: center; font-size: 14px; font-weight: 500; }
   .a11y-ratio { font-family: monospace; font-size: 14px; min-width: 50px; }
   .a11y-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 4px; }
@@ -59,21 +79,25 @@ export function formatPreview(design) {
   .a11y-badge.fail { background: #ef444420; color: #ef4444; }
 
   /* Components */
-  .comp-screenshot { border-radius: 8px; border: 1px solid #222; max-width: 100%; }
+  .comp-screenshot { border-radius: 8px; border: 1px solid var(--border); max-width: 100%; }
 
   /* Stat cards */
   .stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 24px 0; }
-  .stat { background: #141414; border: 1px solid #222; border-radius: 12px; padding: 16px; }
-  .stat-value { font-size: 28px; font-weight: 700; color: #fff; }
-  .stat-label { font-size: 12px; color: #666; margin-top: 4px; }
+  .stat { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
+  .stat-value { font-size: 28px; font-weight: 700; color: var(--text-heading); }
+  .stat-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
 
   .font-tag { display: inline-block; background: #1e1e2e; color: #a78bfa; padding: 4px 10px; border-radius: 6px; font-size: 13px; margin: 4px 4px 4px 0; }
+  [data-theme="light"] .font-tag { background: #ede9fe; color: #6d28d9; }
 </style>
 </head>
 <body>
 <div class="container">
 
-<h1>${esc(meta.title)}</h1>
+<div class="header-row">
+  <h1>${esc(meta.title)}</h1>
+  <button class="theme-toggle" onclick="toggleTheme()">Toggle Light/Dark</button>
+</div>
 <div class="meta">
   <span>${esc(meta.url)}</span>
   <span>${meta.elementCount} elements</span>
@@ -135,7 +159,7 @@ ${typography.scale.length > 0 ? `
   ${typography.scale.slice(0, 12).map(s => `
   <div class="type-row">
     <span class="type-size">${s.size}px</span>
-    <span style="font-size:${Math.min(s.size, 48)}px;font-weight:${s.weight};color:#fff">The quick brown fox</span>
+    <span style="font-size:${Math.min(s.size, 48)}px;font-weight:${s.weight};color:var(--text-heading)">The quick brown fox</span>
     <span class="type-meta">${s.weight} / ${s.lineHeight}</span>
   </div>`).join('')}
 </div>` : ''}
@@ -206,6 +230,25 @@ ${componentScreenshots && Object.keys(componentScreenshots).length > 0 ? `
 </div>` : ''}
 
 </div>
+<script>
+function toggleTheme() {
+  const html = document.documentElement;
+  const current = html.getAttribute('data-theme');
+  html.setAttribute('data-theme', current === 'light' ? 'dark' : 'light');
+}
+document.querySelectorAll('.swatch').forEach(el => {
+  el.addEventListener('click', () => {
+    const hex = el.querySelector('.swatch-hex');
+    if (!hex) return;
+    navigator.clipboard.writeText(hex.textContent).then(() => {
+      let tip = el.querySelector('.copied-tip');
+      if (!tip) { tip = document.createElement('div'); tip.className = 'copied-tip'; tip.textContent = 'Copied!'; el.appendChild(tip); }
+      tip.classList.add('show');
+      setTimeout(() => tip.classList.remove('show'), 1200);
+    });
+  });
+});
+</script>
 </body>
 </html>`;
 }

package/src/formatters/svelte-theme.js

@@ -0,0 +1,40 @@
+export function formatSvelteTheme(design) {
+  const { colors, typography, spacing, borders } = design;
+  const lines = [];
+
+  lines.push('/* Svelte theme — generated by designlang */');
+  lines.push('/* Import in +layout.svelte or app.css */');
+  lines.push('');
+  lines.push(':root {');
+  lines.push('  /* Colors */');
+  if (colors.primary) lines.push(`  --color-primary: ${colors.primary.hex};`);
+  if (colors.secondary) lines.push(`  --color-secondary: ${colors.secondary.hex};`);
+  if (colors.accent) lines.push(`  --color-accent: ${colors.accent.hex};`);
+  for (const [i, n] of colors.neutrals.slice(0, 10).entries()) {
+    lines.push(`  --color-neutral-${(i + 1) * 100}: ${n.hex};`);
+  }
+  if (colors.backgrounds.length > 0) lines.push(`  --color-background: ${colors.backgrounds[0]};`);
+  if (colors.text.length > 0) lines.push(`  --color-text: ${colors.text[0]};`);
+  lines.push('');
+  lines.push('  /* Typography */');
+  if (typography.families.length > 0) lines.push(`  --font-primary: '${typography.families[0].name}', sans-serif;`);
+  if (typography.families.length > 1) lines.push(`  --font-secondary: '${typography.families[1].name}', sans-serif;`);
+  if (typography.body) lines.push(`  --font-size-base: ${typography.body.size}px;`);
+  for (const s of typography.scale.slice(0, 8)) {
+    lines.push(`  --font-size-${s.size}: ${s.size}px;`);
+  }
+  lines.push('');
+  lines.push('  /* Spacing */');
+  if (spacing.base) lines.push(`  --spacing-base: ${spacing.base}px;`);
+  for (const [i, val] of spacing.scale.slice(0, 12).entries()) {
+    lines.push(`  --spacing-${i + 1}: ${val}px;`);
+  }
+  lines.push('');
+  lines.push('  /* Border Radii */');
+  for (const r of borders.radii) {
+    lines.push(`  --radius-${r.label}: ${r.value}px;`);
+  }
+  lines.push('}');
+
+  return lines.join('\n');
+}

package/src/formatters/tailwind.js

@@ -1,3 +1,20 @@
+import { rgbToHex, rgbToHsl } from '../utils.js';
+
+function generateColorScale(hex, parsed) {
+  const { h, s } = rgbToHsl(parsed);
+  const scale = {};
+  const levels = [
+    { name: '50', l: 97 }, { name: '100', l: 94 }, { name: '200', l: 86 },
+    { name: '300', l: 76 }, { name: '400', l: 64 }, { name: '500', l: 50 },
+    { name: '600', l: 40 }, { name: '700', l: 32 }, { name: '800', l: 24 },
+    { name: '900', l: 16 }, { name: '950', l: 10 },
+  ];
+  for (const { name, l } of levels) {
+    scale[name] = `hsl(${h}, ${s}%, ${l}%)`;
+  }
+  return scale;
+}
+
 export function formatTailwind(design) {
   const config = {
     colors: {},
@@ -12,10 +29,19 @@ export function formatTailwind(design) {
     transitionTimingFunction: {},
   };
 
-  // Colors
-  if (design.colors.primary) config.colors.primary = design.colors.primary.hex;
-  if (design.colors.secondary) config.colors.secondary = design.colors.secondary.hex;
-  if (design.colors.accent) config.colors.accent = design.colors.accent.hex;
+  // Colors — generate full scales from brand colors
+  if (design.colors.primary) {
+    config.colors.primary = generateColorScale(design.colors.primary.hex, design.colors.primary);
+    config.colors.primary.DEFAULT = design.colors.primary.hex;
+  }
+  if (design.colors.secondary) {
+    config.colors.secondary = generateColorScale(design.colors.secondary.hex, design.colors.secondary);
+    config.colors.secondary.DEFAULT = design.colors.secondary.hex;
+  }
+  if (design.colors.accent) {
+    config.colors.accent = generateColorScale(design.colors.accent.hex, design.colors.accent);
+    config.colors.accent.DEFAULT = design.colors.accent.hex;
+  }
   for (let i = 0; i < design.colors.neutrals.length && i < 10; i++) {
     config.colors[`neutral-${i * 100 || 50}`] = design.colors.neutrals[i].hex;
   }
@@ -60,6 +86,33 @@ export function formatTailwind(design) {
     }
   }
 
+  // Animations
+  if (design.animations) {
+    if (design.animations.durations.length > 0) {
+      config.transitionDuration = {};
+      for (const d of design.animations.durations) {
+        const ms = d.endsWith('ms') ? parseInt(d) : parseFloat(d) * 1000;
+        config.transitionDuration[`${ms}`] = d;
+      }
+    }
+    if (design.animations.easings.length > 0) {
+      config.transitionTimingFunction = {};
+      for (const e of design.animations.easings) {
+        const val = typeof e === 'object' ? e.value : e;
+        const name = val.startsWith('cubic-bezier') ? 'custom' : val.replace(/ease-?/g, '').replace(/-/g, '') || 'default';
+        config.transitionTimingFunction[name] = val;
+      }
+    }
+  }
+
+  // Container
+  if (design.layout && design.layout.containerWidths.length > 0) {
+    const maxW = design.layout.containerWidths[0].maxWidth;
+    const padding = design.layout.containerWidths[0].padding;
+    config.container = { center: true, padding: padding || '1rem' };
+    if (maxW) config.maxWidth = { container: maxW };
+  }
+
   // Clean empty objects
   for (const [key, val] of Object.entries(config)) {
     if (typeof val === 'object' && Object.keys(val).length === 0) delete config[key];