@webdesignhot/design-md 0.1.0 → 0.2.0

package/README.md

@@ -12,7 +12,8 @@ $ npx @webdesignhot/design-md list
   arc            Arc               light warm sans
 …
 
-$ npx @webdesignhot/design-md export DESIGN.md --to tailwind > tailwind.theme.js
+$ npx @webdesignhot/design-md export DESIGN.md --to tailwind > theme.css         # Tailwind v4 default
+$ npx @webdesignhot/design-md export DESIGN.md --to tailwind --tailwind-version v3 > tailwind.config.js
 ```
 
 ## Why
@@ -57,9 +58,11 @@ lint <file> [--format=text|json]
 diff <a> <b> [--format=text|json]
   Token-level diff between two DESIGN.md files.
 
-export <file> --to <tailwind|css|dtcg|figma>
+export <file> --to <tailwind|css|dtcg|figma> [--tailwind-version <v3|v4>]
   Convert tokens to one of:
-    tailwind   — theme.extend block for tailwind.config.js
+    tailwind   — @theme {} CSS block (Tailwind v4 default).
+                 Pass --tailwind-version v3 for the legacy
+                 module.exports = { theme: { extend: { ... } } } shape.
     css        — :root { --color-bg, --radius-card, … }
     dtcg       — W3C Design Tokens Community Group JSON
     figma      — Figma Variables import format
@@ -68,6 +71,10 @@ extract <url> [-o <path>] [--token-only]
   Extract a draft DESIGN.md from any production URL.
   (Requires a webdesignhot session — opens the browser flow.)
 
+import <url>
+  Alias of `extract`. Naming aligned with Google Labs DESIGN.md tooling
+  so the same verb works whichever CLI you've internalised.
+
 theme <slug> [--dark|--light]
   Compute a dark/light variant of any design.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webdesignhot/design-md",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Drop any DESIGN.md into your repo in one command. Browse, install, lint, diff, and export design systems extracted from real production sites.",
   "keywords": ["design.md", "design-system", "design-tokens", "ai-agents", "cli", "tailwind", "figma", "dtcg"],
   "author": "webdesignhot",

package/src/commands/export.mjs

@@ -2,14 +2,17 @@ import { resolve } from 'node:path'
 import { readDesignMd } from '../lib/parse.mjs'
 
 const FORMATS = new Set(['tailwind', 'css', 'dtcg', 'figma'])
+const TAILWIND_VERSIONS = new Set(['v3', 'v4'])
 
 function parseFlags(args) {
-  const flags = { to: null }
+  const flags = { to: null, tailwindVersion: 'v4' }
   const positional = []
   for (let i = 0; i < args.length; i++) {
     const a = args[i]
     if (a.startsWith('--to=')) flags.to = a.slice(5)
     else if (a === '--to') flags.to = args[++i]
+    else if (a.startsWith('--tailwind-version=')) flags.tailwindVersion = a.slice(19)
+    else if (a === '--tailwind-version') flags.tailwindVersion = args[++i]
     else positional.push(a)
   }
   return { flags, positional }
@@ -25,13 +28,44 @@ function toCss(data) {
   return lines.join('\n')
 }
 
-function toTailwind(data) {
-  const c = data.colors ?? {}
+function flattenColors(c) {
+  // Multi-theme: pick the default theme (or first one) for export.
+  const values = Object.values(c)
+  if (values.length > 0 && values.every((v) => v && typeof v === 'object')) {
+    return values[0]
+  }
+  return c
+}
+
+function toTailwindV4(data) {
+  const c = flattenColors(data.colors ?? {})
+  const r = data.radius ?? {}
+  const s = data.spacing?.scale
+  const lines = ['@theme {']
+  for (const [k, v] of Object.entries(c)) {
+    if (typeof v === 'string') lines.push(`  --color-${k}: ${v};`)
+  }
+  for (const [k, v] of Object.entries(r)) {
+    lines.push(`  --radius-${k}: ${typeof v === 'number' ? `${v}px` : v};`)
+  }
+  if (Array.isArray(s)) {
+    s.forEach((unit, i) => lines.push(`  --spacing-${i}: ${typeof unit === 'number' ? `${unit}px` : unit};`))
+  }
+  lines.push('}')
+  return lines.join('\n')
+}
+
+function toTailwindV3(data) {
+  const c = flattenColors(data.colors ?? {})
   const r = data.radius ?? {}
   const out = {
     theme: {
       extend: {
-        colors: Object.fromEntries(Object.entries(c).map(([k, v]) => [k, String(v)])),
+        colors: Object.fromEntries(
+          Object.entries(c)
+            .filter(([, v]) => typeof v === 'string')
+            .map(([k, v]) => [k, String(v)]),
+        ),
         borderRadius: Object.fromEntries(
           Object.entries(r).map(([k, v]) => [k, typeof v === 'number' ? `${v}px` : v]),
         ),
@@ -41,6 +75,10 @@ function toTailwind(data) {
   return `module.exports = ${JSON.stringify(out, null, 2)}`
 }
 
+function toTailwind(data, version = 'v4') {
+  return version === 'v3' ? toTailwindV3(data) : toTailwindV4(data)
+}
+
 function toDtcg(data) {
   const c = data.colors ?? {}
   const r = data.radius ?? {}
@@ -73,7 +111,7 @@ function toFigma(data) {
 const RENDERERS = { tailwind: toTailwind, css: toCss, dtcg: toDtcg, figma: toFigma }
 
 export const exportTokens = {
-  usage: 'export <file> --to <tailwind|css|dtcg|figma>',
+  usage: 'export <file> --to <tailwind|css|dtcg|figma> [--tailwind-version v3|v4]',
   async run(args) {
     const { flags, positional } = parseFlags(args)
     const file = positional[0]
@@ -85,7 +123,14 @@ export const exportTokens = {
       console.error(`Unknown format "${flags.to}". Choose: ${[...FORMATS].join(', ')}`)
       process.exit(2)
     }
+    if (!TAILWIND_VERSIONS.has(flags.tailwindVersion)) {
+      console.error(`Unknown --tailwind-version "${flags.tailwindVersion}". Choose: v3, v4`)
+      process.exit(2)
+    }
     const { data } = await readDesignMd(resolve(process.cwd(), file))
-    process.stdout.write(RENDERERS[flags.to](data) + '\n')
+    const out = flags.to === 'tailwind'
+      ? toTailwind(data, flags.tailwindVersion)
+      : RENDERERS[flags.to](data)
+    process.stdout.write(out + '\n')
   },
 }

package/src/commands/extract.mjs

@@ -29,6 +29,6 @@ export const extract = {
     console.log(`  ${kleur.cyan(target)}`)
     console.log()
     console.log(kleur.yellow('Tip: extract requires a webdesignhot session — visit the URL above to authorize.'))
-    console.log(kleur.dim('     The CLI will gain a direct extraction endpoint in v0.2.'))
+    console.log(kleur.dim('     A direct extraction endpoint is on the roadmap — for now this opens the web flow.'))
   },
 }

package/src/commands/help.mjs

@@ -7,26 +7,30 @@ ${kleur.dim('USAGE')}
   design-md <command> [args]
 
 ${kleur.dim('COMMANDS')}
-  add <slug>             Write the design's DESIGN.md to your CWD
-  list                   Print the full catalog (slug · name · tags)
-  category [name]        Browse categories — without a name lists all
-  init                   Interactive picker (default if no command)
-  lint <file>            Validate a DESIGN.md for spec compliance
-  diff <a> <b>           Token-level diff between two DESIGN.md files
-  export <file> --to <f> Convert tokens to tailwind|css|dtcg|figma
-  extract <url>          Extract a draft DESIGN.md from any production URL
-  theme <slug> --dark    Compute a dark-mode counterpart of a light design
-  preview <slug>         Open the directory detail page in your browser
-  help                   This screen
+  add <slug>                Write the design's DESIGN.md to your CWD
+  list                      Print the full catalog (slug · name · tags)
+  category [name]           Browse categories — without a name lists all
+  init                      Interactive picker (default if no command)
+  lint <file>               Validate a DESIGN.md for spec compliance
+  diff <a> <b>              Token-level diff between two DESIGN.md files
+  export <file> --to <f>    Convert tokens to tailwind|css|dtcg|figma
+                            tailwind defaults to v4 (--tailwind-version v3 for legacy)
+  extract <url>             Extract a draft DESIGN.md from a production URL
+  import <url>              Alias of extract — name aligned with Google Labs
+  theme <slug> --dark       Compute a dark-mode counterpart of a light design
+  preview <slug>            Open the directory detail page in your browser
+  help                      This screen
 
 ${kleur.dim('EXAMPLES')}
   $ design-md add linear              ${kleur.dim('# writes DESIGN.md to CWD')}
   $ design-md list | grep editorial
-  $ design-md export DESIGN.md --to tailwind > tailwind.theme.js
+  $ design-md export DESIGN.md --to tailwind > theme.css
+  $ design-md export DESIGN.md --to tailwind --tailwind-version v3 > tailwind.config.js
+  $ design-md import https://stripe.com
   $ design-md diff DESIGN.md old.md
 
-${kleur.dim('Spec:')}    https://github.com/google-labs-code/design.md
-${kleur.dim('Catalog:')} https://www.webdesignhot.com/design-md
+${kleur.dim('Spec:')}    https://www.webdesignhot.com/design.md/spec ${kleur.dim('(webdesignhot/0.1)')}
+${kleur.dim('Catalog:')} https://www.webdesignhot.com/design.md/
 `
 
 export const help = {

package/src/index.mjs

@@ -25,6 +25,7 @@ const COMMANDS = {
   diff,
   export: exportTokens,
   extract,
+  import: extract, // alias — name aligned with Google Labs PR #40
   theme,
   preview,
   help,