rizzo-css 0.0.3 → 0.0.4

package/README.md

@@ -1,6 +1,6 @@
 # rizzo-css
 
-A modern CSS design system with semantic theming, 14 built-in themes, and accessible components (BEM). Framework-agnostic: use with Astro, Svelte, React, Vue, or plain HTML.
+A modern CSS design system with semantic theming, 14 built-in themes, and accessible components (BEM). **The same CSS and component styles** ship for every option: **Vanilla JS**, Astro, and Svelte. Framework-agnostic: use with any stack or plain HTML.
 
 ## Install
 
@@ -12,7 +12,14 @@ pnpm add rizzo-css
 yarn add rizzo-css
 ```
 
-**Quick start (no install):** `npx rizzo-css init` scaffolds a project (prompts for framework and optional Astro/Svelte components). `npx rizzo-css add` copies the CSS into the current project. `npx rizzo-css theme` lists themes.
+**Quick start (no install):** `npx rizzo-css init` scaffolds a project. Choose **Vanilla JS** (yellow in the CLI), **Astro** (orange), or **Svelte** (orange-red). All options get the **same CSS and component styles**. Vanilla JS gets an example page with theme switcher and sample components; Astro/Svelte can optionally add component files. To use the **official Svelte or Astro scaffold** plus Rizzo CSS, create the app with their CLI first, then add our CSS:
+
+```bash
+npm create svelte@latest my-app && cd my-app && npx rizzo-css add
+npm create astro@latest my-app   && cd my-app && npx rizzo-css add
+```
+
+`add` auto-detects Svelte/Astro and copies CSS to the right place (`static/css` or `public/css`). `npx rizzo-css theme` lists themes.
 
 ## Use
 
@@ -34,7 +41,7 @@ import 'rizzo-css';
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rizzo-css@latest" />
 ```
 
-Use the same class names and HTML structure as in the [component docs](https://rizzo-css.vercel.app/docs/components). For Astro or Svelte, reference components and examples are in the [documentation](https://rizzo-css.vercel.app/docs/getting-started).
+Use the same class names and HTML structure as in the [component docs](https://rizzo-css.vercel.app/docs/components). **Vanilla JS**, Astro, and Svelte all use the same CSS and BEM markup; Astro/Svelte add framework component files for convenience.
 
 ## Themes
 

package/bin/rizzo-css.js

@@ -36,6 +36,19 @@ const ASTRO_COMPONENTS = [
   'Modal', 'Toast', 'Table',
 ];
 
+// ANSI colors for CLI (framework logo colors)
+const C = {
+  reset: '\u001b[0m',
+  dim: '\u001b[90m',
+  cyan: '\u001b[36m',
+  vanilla: '\u001b[38;5;226m', // Vanilla JS yellow
+  astro: '\u001b[38;5;208m',   // Astro orange #ff5d01
+  svelte: '\u001b[38;5;202m',  // Svelte orange #ff3e00
+};
+
+const CIRCLE_EMPTY = '\u25CB ';  // ○
+const CIRCLE_FILLED = '\u25CF '; // ●
+
 // Resolve path to this package (works when run via npx or from repo)
 function getPackageRoot() {
   return dirname(require.resolve('../package.json'));
@@ -55,6 +68,189 @@ function question(prompt) {
   });
 }
 
+/** Format label with optional ANSI color (item.color). */
+function formatLabel(item) {
+  const text = item.label || item.value;
+  return item.color ? item.color + text + C.reset : text;
+}
+
+/** Single-select menu with circles. options: array of { value, label, color? }. Returns selected value. */
+function selectMenu(options, title) {
+  const items = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
+  const isTty = process.stdin.isTTY && process.stdout.isTTY;
+
+  if (!isTty) {
+    console.log('\n' + (title || 'Choose one') + ':');
+    items.forEach((item, i) => console.log('  ' + (i + 1) + '. ' + (item.label || item.value)));
+    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+    return new Promise((resolve) => {
+      rl.question('\nEnter number [1]: ', (answer) => {
+        rl.close();
+        const n = parseInt((answer || '1').trim(), 10);
+        const idx = n >= 1 && n <= items.length ? n - 1 : 0;
+        resolve(items[idx].value);
+      });
+    });
+  }
+
+  return new Promise((resolve) => {
+    let index = 0;
+    const lineCount = (title ? 1 : 0) + items.length + 1;
+
+    const render = (first) => {
+      const lines = (title ? [title] : []).concat(
+        items.map((item, i) => {
+          const circle = i === index ? CIRCLE_FILLED : CIRCLE_EMPTY;
+          const prefix = i === index ? C.cyan + '>' + C.reset + ' ' : '  ';
+          return prefix + circle + formatLabel(item);
+        })
+      );
+      if (!first) {
+        process.stdout.write('\u001b[' + lineCount + 'A');
+      }
+      process.stdout.write('\u001b[?25l');
+      process.stdout.write(lines.join('\n') + '\n\n');
+      process.stdout.write('\u001b[?25h');
+    };
+
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.setEncoding('utf8');
+
+    render(true);
+
+    let buf = '';
+    const onData = (ch) => {
+      if (ch === '\u0003') {
+        process.stdin.setRawMode(false);
+        process.stdin.removeListener('data', onData);
+        process.stdout.write('\n');
+        process.exit(130);
+      }
+      if (ch === '\r' || ch === '\n') {
+        process.stdin.setRawMode(false);
+        process.stdin.removeListener('data', onData);
+        process.stdin.pause();
+        process.stdout.write('\n');
+        resolve(items[index].value);
+        return;
+      }
+      buf += ch;
+      const isUp = buf === '\u001b[A' || buf === '\u001bOA' || (buf.length >= 2 && buf.endsWith('A') && buf.startsWith('\u001b'));
+      const isDown = buf === '\u001b[B' || buf === '\u001bOB' || (buf.length >= 2 && buf.endsWith('B') && buf.startsWith('\u001b'));
+      if (isUp) {
+        buf = '';
+        index = index <= 0 ? items.length - 1 : index - 1;
+        render(false);
+      } else if (isDown) {
+        buf = '';
+        index = index >= items.length - 1 ? 0 : index + 1;
+        render(false);
+      } else if (buf.length > 12 || (buf.length === 1 && ch !== '\u001b')) {
+        buf = '';
+      }
+    };
+    process.stdin.on('data', onData);
+  });
+}
+
+/** Multi-select menu: circles ○/●, Space toggles, Enter confirms. Returns array of selected values. */
+function multiSelectMenu(options, title) {
+  const items = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
+  const isTty = process.stdin.isTTY && process.stdout.isTTY;
+
+  if (!isTty) {
+    console.log('\n' + (title || 'Choose (space to toggle, enter when done') + ':');
+    items.forEach((item, i) => console.log('  ' + (i + 1) + '. ' + (item.label || item.value)));
+    const rl = readline.createInterface({ input: process.stdin, output: process.stdout });
+    return new Promise((resolve) => {
+      rl.question('\nEnter numbers to include (e.g. 1 3 5 or all): ', (answer) => {
+        rl.close();
+        const s = (answer || '').trim().toLowerCase();
+        if (s === 'all' || s === 'a') {
+          resolve(items.map((i) => i.value));
+          return;
+        }
+        const parts = s.split(/[\s,]+/).filter(Boolean);
+        const indices = new Set();
+        for (const p of parts) {
+          const n = parseInt(p, 10);
+          if (n >= 1 && n <= items.length) indices.add(n - 1);
+        }
+        resolve(Array.from(indices).sort((a, b) => a - b).map((i) => items[i].value));
+      });
+    });
+  }
+
+  return new Promise((resolve) => {
+    let index = 0;
+    const selected = new Set();
+    const lineCount = (title ? 1 : 0) + items.length + 1;
+
+    const render = (first) => {
+      const lines = (title ? [title] : []).concat(
+        items.map((item, i) => {
+          const circle = selected.has(i) ? CIRCLE_FILLED : CIRCLE_EMPTY;
+          const prefix = i === index ? C.cyan + '>' + C.reset + ' ' : '  ';
+          return prefix + circle + formatLabel(item);
+        })
+      );
+      if (!first) {
+        process.stdout.write('\u001b[' + lineCount + 'A');
+      }
+      process.stdout.write('\u001b[?25l');
+      process.stdout.write(lines.join('\n') + '\n\n');
+      process.stdout.write('\u001b[?25h');
+    };
+
+    process.stdin.setRawMode(true);
+    process.stdin.resume();
+    process.stdin.setEncoding('utf8');
+
+    render(true);
+
+    let buf = '';
+    const onData = (ch) => {
+      if (ch === '\u0003') {
+        process.stdin.setRawMode(false);
+        process.stdin.removeListener('data', onData);
+        process.stdout.write('\n');
+        process.exit(130);
+      }
+      if (ch === '\r' || ch === '\n') {
+        process.stdin.setRawMode(false);
+        process.stdin.removeListener('data', onData);
+        process.stdin.pause();
+        process.stdout.write('\n');
+        resolve(Array.from(selected).sort((a, b) => a - b).map((i) => items[i].value));
+        return;
+      }
+      if (ch === ' ') {
+        buf = '';
+        if (selected.has(index)) selected.delete(index);
+        else selected.add(index);
+        render(false);
+        return;
+      }
+      buf += ch;
+      const isUp = buf === '\u001b[A' || buf === '\u001bOA' || (buf.length >= 2 && buf.endsWith('A') && buf.startsWith('\u001b'));
+      const isDown = buf === '\u001b[B' || buf === '\u001bOB' || (buf.length >= 2 && buf.endsWith('B') && buf.startsWith('\u001b'));
+      if (isUp) {
+        buf = '';
+        index = index <= 0 ? items.length - 1 : index - 1;
+        render(false);
+      } else if (isDown) {
+        buf = '';
+        index = index >= items.length - 1 ? 0 : index + 1;
+        render(false);
+      } else if (buf.length > 12 || (buf.length === 1 && ch !== '\u001b')) {
+        buf = '';
+      }
+    };
+    process.stdin.on('data', onData);
+  });
+}
+
 function printHelp() {
   console.log(`
 rizzo-css CLI — Add Rizzo CSS to your project
@@ -63,15 +259,23 @@ Usage:
   npx rizzo-css <command> [options]
 
 Commands:
-  init    Scaffold a new project (prompts: name, framework, theme; Astro/Svelte: optional component picker)
-  add     Copy Rizzo CSS into the current project
-  theme   List available themes
+  init    Scaffold a minimal project (menus: location, framework, themes, components)
+  add     Copy Rizzo CSS into the current project (auto-detects Svelte/Astro)
+  theme   List all available themes (use in init or set data-theme on <html>)
   help    Show this help
 
+Use framework CLI first, then add Rizzo CSS:
+  npm create svelte@latest my-app
+  cd my-app && npx rizzo-css add
+
+  npm create astro@latest my-app
+  cd my-app && npx rizzo-css add
+
 Examples:
   npx rizzo-css init
   npx rizzo-css add
   npx rizzo-css add --path public/css
+  npx rizzo-css add --framework svelte
   npx rizzo-css theme
 
 Docs: https://rizzo-css.vercel.app
@@ -79,16 +283,44 @@ Docs: https://rizzo-css.vercel.app
 }
 
 function cmdTheme() {
-  console.log('\nAvailable themes (set data-theme on <html>):\n');
-  THEMES.forEach((t) => console.log('  ' + t));
-  console.log('\nExample: <html lang="en" data-theme="github-dark-classic">\n');
+  process.stdout.write('\nAvailable themes (set data-theme on <html>):\n\n');
+  THEMES.forEach((t) => process.stdout.write('  ' + t + '\n'));
+  process.stdout.write('\nExample: <html lang="en" data-theme="github-dark-classic">\n\n');
+}
+
+/** Detect framework from cwd: "svelte" | "astro" | null. */
+function detectFramework(cwd) {
+  if (existsSync(join(cwd, 'svelte.config.js')) || existsSync(join(cwd, 'svelte.config.ts'))) return 'svelte';
+  if (existsSync(join(cwd, 'astro.config.mjs')) || existsSync(join(cwd, 'astro.config.mts')) || existsSync(join(cwd, 'astro.config.js'))) return 'astro';
+  try {
+    const pkg = readFileSync(join(cwd, 'package.json'), 'utf8');
+    const json = JSON.parse(pkg);
+    const deps = { ...json.dependencies, ...(json.devDependencies || {}) };
+    if (deps['@sveltejs/kit'] || deps['svelte']) return 'svelte';
+    if (deps['astro']) return 'astro';
+  } catch (_) { /* ignore */ }
+  return null;
+}
+
+/** Default CSS directory and link href for a framework (for add command). */
+function getFrameworkCssPaths(framework) {
+  if (framework === 'svelte') return { targetDir: 'static/css', linkHref: '/css/rizzo.min.css' };
+  if (framework === 'astro') return { targetDir: 'public/css', linkHref: '/css/rizzo.min.css' };
+  return { targetDir: 'css', linkHref: 'css/rizzo.min.css' };
 }
 
 function cmdAdd(argv) {
   const pathIdx = argv.indexOf('--path');
   const customPath = pathIdx !== -1 && argv[pathIdx + 1] ? argv[pathIdx + 1] : null;
-  const targetDir = customPath || 'css';
-  const targetFile = join(process.cwd(), targetDir, 'rizzo.min.css');
+  const frameworkIdx = argv.indexOf('--framework');
+  const explicitFramework = frameworkIdx !== -1 && argv[frameworkIdx + 1] ? argv[frameworkIdx + 1].toLowerCase() : null;
+  const cwd = process.cwd();
+  const framework = explicitFramework && FRAMEWORKS.includes(explicitFramework)
+    ? explicitFramework
+    : (explicitFramework === null ? detectFramework(cwd) : null);
+  const paths = getFrameworkCssPaths(framework);
+  const targetDir = customPath || paths.targetDir;
+  const targetFile = join(cwd, targetDir, 'rizzo.min.css');
   const cssSource = getCssPath();
 
   if (!existsSync(cssSource)) {
@@ -96,26 +328,27 @@ function cmdAdd(argv) {
     process.exit(1);
   }
 
-  mkdirSync(join(process.cwd(), targetDir), { recursive: true });
+  mkdirSync(join(cwd, targetDir), { recursive: true });
   copyFileSync(cssSource, targetFile);
-  const linkPath = targetDir + '/rizzo.min.css';
+  const linkHref = customPath ? customPath + '/rizzo.min.css' : paths.linkHref;
   console.log('\n✓ Rizzo CSS copied to ' + targetFile);
-  console.log('\nAdd to your HTML or layout:\n');
-  console.log('  <link rel="stylesheet" href="' + linkPath + '" />');
-  console.log('\nSet a theme on <html>: data-theme="github-dark-classic" (see: npx rizzo-css theme)\n');
-}
-
-function parseComponentSelection(input, componentList, maxNum) {
-  const s = (input || '').trim().toLowerCase();
-  if (s === 'none' || s === 'n') return [];
-  if (s === 'all' || s === 'a') return componentList.slice();
-  const parts = s.split(/[\s,]+/).filter(Boolean);
-  const indices = new Set();
-  for (const p of parts) {
-    const n = parseInt(p, 10);
-    if (n >= 1 && n <= maxNum) indices.add(n - 1);
+  if (framework === 'svelte') {
+    console.log('\nDetected Svelte/SvelteKit. Add to your root layout (e.g. src/app.html):\n');
+    console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
+    console.log('\nSet a theme on <html>: data-theme="github-dark-classic" (see: npx rizzo-css theme)');
+    console.log('\nTo add Rizzo Svelte components later: copy from this package\'s scaffold or run npx rizzo-css init and pick Svelte + components in an empty folder, then copy the generated files.\n');
+  } else if (framework === 'astro') {
+    console.log('\nDetected Astro. Add to your layout (e.g. src/layouts/Layout.astro):\n');
+    console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
+    console.log('\nSet a theme on <html>: data-theme="github-dark-classic" (see: npx rizzo-css theme)\n');
+  } else {
+    console.log('\nAdd to your HTML or layout:\n');
+    console.log('  <link rel="stylesheet" href="' + linkHref + '" />');
+    if (framework === 'vanilla') {
+      console.log('\nVanilla JS: same CSS and component classes as Astro/Svelte. Use the same BEM markup from the docs.');
+    }
+    console.log('\nSet a theme on <html>: data-theme="github-dark-classic" (see: npx rizzo-css theme)\n');
   }
-  return indices.size === 0 ? [] : Array.from(indices).sort((a, b) => a - b).map((i) => componentList[i]);
 }
 
 function getScaffoldSvelteDir() {
@@ -126,6 +359,10 @@ function getScaffoldAstroDir() {
   return join(getPackageRoot(), 'scaffold', 'astro');
 }
 
+function getScaffoldVanillaIndex() {
+  return join(getPackageRoot(), 'scaffold', 'vanilla', 'index.html');
+}
+
 function copyDirRecursive(src, dest) {
   mkdirSync(dest, { recursive: true });
   const entries = readdirSync(src, { withFileTypes: true });
@@ -205,23 +442,47 @@ function copyAstroComponents(projectDir, selectedNames) {
 }
 
 async function cmdInit() {
-  const name = await question('Project name (folder name, or leave blank for current directory): ');
-  let framework = await question('Framework: vanilla, astro, svelte (default: vanilla): ') || 'vanilla';
-  framework = framework.toLowerCase();
-  if (!FRAMEWORKS.includes(framework)) framework = 'vanilla';
-
-  const theme = await question('Theme (default: github-dark-classic, or run "npx rizzo-css theme" for list): ') || 'github-dark-classic';
+  const projectChoice = await selectMenu(
+    [
+      { value: 'cwd', label: 'Current directory' },
+      { value: 'name', label: 'Enter project name (new folder)' },
+    ],
+    '? Project location'
+  );
+  const name = projectChoice === 'name' ? await question('Project name (folder name): ') : '';
+
+  const framework = await selectMenu(
+    [
+      { value: 'vanilla', label: 'Vanilla JS (HTML + CSS + same styles & components)', color: C.vanilla },
+      { value: 'astro', label: 'Astro', color: C.astro },
+      { value: 'svelte', label: 'Svelte', color: C.svelte },
+    ],
+    '? Framework (arrows, Enter to select) — all get the same CSS and component styles'
+  );
+
+  const selectedThemes = await multiSelectMenu(
+    THEMES.map((t) => ({ value: t, label: t })),
+    '? Themes (Space to toggle, Enter to confirm)'
+  );
+  const themeList = selectedThemes.length > 0 ? selectedThemes : [THEMES[0]];
+  const theme = THEMES.includes(themeList[0]) ? themeList[0] : THEMES[0];
 
   let selectedComponents = [];
   const componentList = framework === 'svelte' ? SVELTE_COMPONENTS : framework === 'astro' ? ASTRO_COMPONENTS : [];
   if (componentList.length > 0) {
-    const label = framework === 'svelte' ? 'Svelte' : 'Astro';
-    const include = await question('Include ' + label + ' components? (y/n, default: n): ') || 'n';
-    if (include.toLowerCase() === 'y' || include.toLowerCase() === 'yes') {
-      console.log('\nComponents (enter numbers to include, e.g. 1 3 5, or "all" / "none"):');
-      componentList.forEach((c, i) => console.log('  ' + (i + 1) + '. ' + c));
-      const choice = await question('\nSelection (e.g. 1 2 3 or all): ');
-      selectedComponents = parseComponentSelection(choice, componentList, componentList.length);
+    const includeLabel = framework === 'svelte' ? 'Svelte' : 'Astro';
+    const includeChoice = await selectMenu(
+      [
+        { value: 'none', label: 'None' },
+        { value: 'pick', label: 'Yes, pick ' + includeLabel + ' components' },
+      ],
+      '? Include ' + includeLabel + ' components?'
+    );
+    if (includeChoice === 'pick') {
+      selectedComponents = await multiSelectMenu(
+        componentList.map((c) => ({ value: c, label: c })),
+        '? Components (Space to toggle, Enter to confirm)'
+      );
     }
   }
 
@@ -239,8 +500,22 @@ async function cmdInit() {
   copyFileSync(cssSource, cssTarget);
 
   const linkHref = framework === 'astro' ? '/css/rizzo.min.css' : 'css/rizzo.min.css';
-  const indexHtml = `<!DOCTYPE html>
-<html lang="en" data-theme="${theme}">
+  const themeComment = themeList.length > 0
+    ? '\n  <!-- Selected themes: ' + themeList.join(', ') + ' -->'
+    : '';
+  const indexPath = join(projectDir, 'index.html');
+  const vanillaScaffoldPath = getScaffoldVanillaIndex();
+  if (framework === 'vanilla' && existsSync(vanillaScaffoldPath)) {
+    let indexHtml = readFileSync(vanillaScaffoldPath, 'utf8');
+    indexHtml = indexHtml
+      .replace(/\{\{DATA_THEME\}\}/g, theme)
+      .replace(/\{\{THEME_LIST_COMMENT\}\}/g, themeComment)
+      .replace(/\{\{TITLE\}\}/g, name || 'App')
+      .replace(/\{\{LINK_HREF\}\}/g, linkHref);
+    writeFileSync(indexPath, indexHtml, 'utf8');
+  } else {
+    const indexHtml = `<!DOCTYPE html>
+<html lang="en" data-theme="${theme}">${themeComment}
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -253,9 +528,8 @@ async function cmdInit() {
 </body>
 </html>
 `;
-
-  const indexPath = join(projectDir, 'index.html');
-  writeFileSync(indexPath, indexHtml, 'utf8');
+    writeFileSync(indexPath, indexHtml, 'utf8');
+  }
 
   if (framework === 'svelte' && selectedComponents.length > 0) {
     copySvelteComponents(projectDir, selectedComponents);
@@ -266,6 +540,13 @@ async function cmdInit() {
   console.log('\n✓ Project ready at ' + projectDir);
   console.log('  - ' + cssTarget);
   console.log('  - ' + indexPath);
+  if (framework === 'vanilla') {
+    console.log('  - Vanilla JS: same CSS and component styles as Astro/Svelte; index includes theme switcher and sample components.');
+  }
+  if (framework === 'svelte' || framework === 'astro') {
+    const fw = framework === 'svelte' ? 'Svelte' : 'Astro';
+    console.log('\nTip: To use the official ' + fw + ' scaffold instead, create a project with their CLI (e.g. npm create ' + framework + '@latest my-app), then run npx rizzo-css add in that folder.');
+  }
   console.log('\nRun a local server (e.g. npx serve .) or open index.html. Docs: https://rizzo-css.vercel.app\n');
 }
 

package/dist/rizzo.min.css

@@ -1,6 +1,4 @@
-:root{--primary-color:oklch(45.2% 0.198 250.1deg);--secondary-color:oklch(25.1% 0 0deg);--font-family-sans:system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif;--font-family-serif:georgia,"Times New Roman",times,serif;--font-family-mono:"SF Mono",monaco,"Cascadia Code","Roboto Mono",consolas,"Courier New",monospace;--font-family:var(--font-family-sans);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-size-scale:1;--font-size-xs:calc(0.75rem*var(--font-size-scale));--font-size-sm:calc(0.875rem*var(--font-size-scale));--font-size-base:calc(1rem*var(--font-size-scale));--font-size-lg:calc(1.125rem*var(--font-size-scale));--font-size-xl:calc(1.25rem*var(--font-size-scale));--font-size-2xl:calc(1.5rem*var(--font-size-scale));--font-size-3xl:calc(1.875rem*var(--font-size-scale));--font-size-4xl:calc(2.25rem*var(--font-size-scale));--font-size-5xl:calc(3rem*var(--font-size-scale));--font-size-6xl:calc(3.75rem*var(--font-size-scale));--line-height-tight:1.25;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--letter-spacing-tighter:-0.05em;--letter-spacing-tight:-0.025em;--letter-spacing-normal:0;--letter-spacing-wide:0.025em;--letter-spacing-wider:0.05em;--letter-spacing-widest:0.1em;--spacing-0:0;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--spacing-0-125:0.125rem;--spacing-0-375:0.375rem;--spacing-0-625:0.625rem;--spacing-0-875:0.875rem;--spacing-28:7rem;--spacing-32:8rem;--spacing-36:9rem;--spacing-40:10rem;--spacing-48:12rem;--spacing-56:14rem;--spacing-64:16rem;--spacing-72:18rem;--spacing-80:20rem;--spacing-96:24rem;--spacing-50:12.5rem;--spacing-100:25rem;--spacing-150:37.5rem;--spacing-14:3.5rem;--spacing-15:3.75rem;--spacing-75:18.75rem;--spacing-175:43.75rem;--spacing-70:17.5rem;--spacing-105:26.25rem;--spacing-2500:2500rem;--radius-none:0;--radius-sm:0.125rem;--radius:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;--radius-circle:50%;--z-base:0;--z-1:1;--z-2:2;--z-3:3;--z-10:10;--z-dropdown:10;--z-dropdown-submenu:11;--z-sticky:50;--z-fixed:100;--z-search-overlay:98;--z-search-panel:99;--z-modal-backdrop:1999;--z-modal:2000;--z-tooltip:3000;--z-toast:4000;--z-settings:10000;--z-navbar:5000;--z-navbar-mobile-menu-open:5100;--z-skip-link:10001;--z-navbar-mobile-menu:101;--z-navbar-search-overlay:98;--z-navbar-search-panel:99;--z-navbar-mobile-search-overlay:101;--z-navbar-mobile-search-panel:102;--transition-fast:150ms;--transition-base:200ms;--transition-slow:300ms;--transition-slower:350ms;--transition-slowest:400ms;--transition-ease-out:300ms ease-out;--transition-ease-in:300ms ease-in;--theme-transition-duration:0.2s;--blur-sm:4px;--blur:8px;--blur-md:12px;--blur-lg:16px;--outline-width:2px;--outline-offset:2px;--container-sm:640px;--container-md:768px;--container-lg:1024px;--container-xl:1280px;--container-2xl:1536px;--container-default:1200px;--vh-70:70vh;--vh-80:80vh;--vh-90:90vh;--touch-target-min:3rem;--max-height-dropdown:600px;--max-height-modal:32rem;--max-height-navbar-submenu:2000px;--ease-in-out-cubic:cubic-bezier(0.4,0,0.2,1);--scale-80:0.8;--scale-95:0.95;--scale-100:1;--scale-110:1.1;--border-width:1px;--border-width-2:2px;--border-width-3:3px;--border-width-4:4px;--border-width-arrow:6px;--border-width-accent:3px;--opacity-0:0;--opacity-50:0.5;--opacity-60:0.6;--opacity-70:0.7;--opacity-80:0.8;--opacity-90:0.9;--opacity-100:1;--background:oklch(100% 0 0deg);--background-alt:oklch(96.9% 0 0deg);--text:oklch(25.1% 0 0deg);--text-dim:oklch(50.2% 0 0deg);--icon:var(--text);--icon-dim:var(--text-dim);--border:oklch(90.2% 0 0deg);--accent:oklch(45.2% 0.198 250.1deg);--accent-hover:oklch(40.2% 0.198 250.1deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:var(--accent-text);--success:oklch(60.2% 0.182 145.1deg);--success-hover:oklch(70% 0.16 145deg);--success-text:oklch(20% 0 0deg);--success-text-on-solid:var(--success-text);--warning:oklch(80.2% 0.152 90.1deg);--warning-hover:oklch(88% 0.12 90deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 90deg);--text-on-solid-hover:oklch(22% 0.02 0deg);--error:oklch(55.2% 0.218 25.1deg);--error-hover:oklch(65% 0.18 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:var(--error-text);--info:oklch(60.2% 0.118 210.1deg);--info-hover:oklch(70% 0.1 210deg);--info-text:oklch(20% 0 0deg);--info-text-on-solid:var(--info-text);--selection:oklch(70% 0.15 250deg);--shadow-color:oklch(0% 0 0deg);--shadow-sm:0 1px 2px 0 oklch(from var(--shadow-color) l c h/5%);--shadow:0 1px 3px 0 oklch(from var(--shadow-color) l c h/10%),0 1px 2px -1px oklch(from var(--shadow-color) l c h/10%);--shadow-md:0 4px 6px -1px oklch(from var(--shadow-color) l c h/10%),0 2px 4px -2px oklch(from var(--shadow-color) l c h/6%);--shadow-lg:0 10px 15px -3px oklch(from var(--shadow-color) l c h/10%),0 4px 6px -4px oklch(from var(--shadow-color) l c h/5%);--shadow-xl:0 20px 25px -5px oklch(from var(--shadow-color) l c h/10%),0 8px 10px -6px oklch(from var(--shadow-color) l c h/4%);--overlay:oklch(from var(--shadow-color) l c h/50%);--shadow-inset-sm:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);--shadow-inset:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%)}*,
-*::after,
-*::before{box-sizing:border-box}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;margin:0;padding:0} blockquote,body, dd, dl,
+:root{--primary-color:oklch(45.2% 0.198 250.1deg);--secondary-color:oklch(25.1% 0 0deg);--font-family-sans:system-ui,-apple-system,blinkmacsystemfont,"Segoe UI",roboto,"Helvetica Neue",arial,sans-serif;--font-family-serif:georgia,"Times New Roman",times,serif;--font-family-mono:"SF Mono",monaco,"Cascadia Code","Roboto Mono",consolas,"Courier New",monospace;--font-family:var(--font-family-sans);--font-weight-light:300;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-size-scale:1;--font-size-xs:calc(0.75rem*var(--font-size-scale));--font-size-sm:calc(0.875rem*var(--font-size-scale));--font-size-base:calc(1rem*var(--font-size-scale));--font-size-lg:calc(1.125rem*var(--font-size-scale));--font-size-xl:calc(1.25rem*var(--font-size-scale));--font-size-2xl:calc(1.5rem*var(--font-size-scale));--font-size-3xl:calc(1.875rem*var(--font-size-scale));--font-size-4xl:calc(2.25rem*var(--font-size-scale));--font-size-5xl:calc(3rem*var(--font-size-scale));--font-size-6xl:calc(3.75rem*var(--font-size-scale));--line-height-tight:1.25;--line-height-snug:1.375;--line-height-normal:1.5;--line-height-relaxed:1.625;--line-height-loose:2;--letter-spacing-tighter:-0.05em;--letter-spacing-tight:-0.025em;--letter-spacing-normal:0;--letter-spacing-wide:0.025em;--letter-spacing-wider:0.05em;--letter-spacing-widest:0.1em;--spacing-0:0;--spacing-1:0.25rem;--spacing-2:0.5rem;--spacing-3:0.75rem;--spacing-4:1rem;--spacing-5:1.25rem;--spacing-6:1.5rem;--spacing-8:2rem;--spacing-10:2.5rem;--spacing-12:3rem;--spacing-16:4rem;--spacing-20:5rem;--spacing-24:6rem;--spacing-0-125:0.125rem;--spacing-0-375:0.375rem;--spacing-0-625:0.625rem;--spacing-0-875:0.875rem;--spacing-28:7rem;--spacing-32:8rem;--spacing-36:9rem;--spacing-40:10rem;--spacing-48:12rem;--spacing-56:14rem;--spacing-64:16rem;--spacing-72:18rem;--spacing-80:20rem;--spacing-96:24rem;--spacing-50:12.5rem;--spacing-100:25rem;--spacing-150:37.5rem;--spacing-14:3.5rem;--spacing-15:3.75rem;--spacing-75:18.75rem;--spacing-175:43.75rem;--spacing-70:17.5rem;--spacing-105:26.25rem;--spacing-2500:2500rem;--radius-none:0;--radius-sm:0.125rem;--radius:0.25rem;--radius-md:0.375rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--radius-full:9999px;--radius-circle:50%;--z-base:0;--z-1:1;--z-2:2;--z-3:3;--z-10:10;--z-dropdown:10;--z-dropdown-submenu:11;--z-sticky:50;--z-fixed:100;--z-search-overlay:98;--z-search-panel:99;--z-modal-backdrop:1999;--z-modal:2000;--z-tooltip:3000;--z-toast:4000;--z-settings:10000;--z-navbar:5000;--z-navbar-mobile-menu-open:5100;--z-skip-link:10001;--z-navbar-mobile-menu:101;--z-navbar-search-overlay:98;--z-navbar-search-panel:99;--z-navbar-mobile-search-overlay:101;--z-navbar-mobile-search-panel:102;--transition-fast:150ms;--transition-base:200ms;--transition-slow:300ms;--transition-slower:350ms;--transition-slowest:400ms;--transition-ease-out:300ms ease-out;--transition-ease-in:300ms ease-in;--theme-transition-duration:0.2s;--blur-sm:4px;--blur:8px;--blur-md:12px;--blur-lg:16px;--outline-width:2px;--outline-offset:2px;--container-sm:640px;--container-md:768px;--container-lg:1024px;--container-xl:1280px;--container-2xl:1536px;--container-default:1200px;--vh-70:70vh;--vh-80:80vh;--vh-90:90vh;--touch-target-min:3rem;--max-height-dropdown:600px;--max-height-modal:32rem;--max-height-navbar-submenu:2000px;--ease-in-out-cubic:cubic-bezier(0.4,0,0.2,1);--scale-80:0.8;--scale-95:0.95;--scale-100:1;--scale-110:1.1;--border-width:1px;--border-width-2:2px;--border-width-3:3px;--border-width-4:4px;--border-width-arrow:6px;--border-width-accent:3px;--opacity-0:0;--opacity-50:0.5;--opacity-60:0.6;--opacity-70:0.7;--opacity-80:0.8;--opacity-90:0.9;--opacity-100:1;--background:oklch(100% 0 0deg);--background-alt:oklch(96.9% 0 0deg);--text:oklch(25.1% 0 0deg);--text-dim:oklch(50.2% 0 0deg);--icon:var(--text);--icon-dim:var(--text-dim);--border:oklch(90.2% 0 0deg);--accent:oklch(45.2% 0.198 250.1deg);--accent-hover:oklch(40.2% 0.198 250.1deg);--accent-text:oklch(100% 0 0deg);--accent-text-on-hover:var(--accent-text);--success:oklch(60.2% 0.182 145.1deg);--success-hover:oklch(70% 0.16 145deg);--success-text:oklch(20% 0 0deg);--success-text-on-solid:var(--success-text);--warning:oklch(80.2% 0.152 90.1deg);--warning-hover:oklch(88% 0.12 90deg);--warning-text:oklch(100% 0 0deg);--warning-text-on-solid:oklch(22% 0.02 90deg);--text-on-solid-hover:oklch(22% 0.02 0deg);--error:oklch(55.2% 0.218 25.1deg);--error-hover:oklch(65% 0.18 25deg);--error-text:oklch(100% 0 0deg);--error-text-on-solid:var(--error-text);--info:oklch(60.2% 0.118 210.1deg);--info-hover:oklch(70% 0.1 210deg);--info-text:oklch(20% 0 0deg);--info-text-on-solid:var(--info-text);--selection:oklch(70% 0.15 250deg);--shadow-color:oklch(0% 0 0deg);--shadow-sm:0 1px 2px 0 oklch(from var(--shadow-color) l c h/5%);--shadow:0 1px 3px 0 oklch(from var(--shadow-color) l c h/10%),0 1px 2px -1px oklch(from var(--shadow-color) l c h/10%);--shadow-md:0 4px 6px -1px oklch(from var(--shadow-color) l c h/10%),0 2px 4px -2px oklch(from var(--shadow-color) l c h/6%);--shadow-lg:0 10px 15px -3px oklch(from var(--shadow-color) l c h/10%),0 4px 6px -4px oklch(from var(--shadow-color) l c h/5%);--shadow-xl:0 20px 25px -5px oklch(from var(--shadow-color) l c h/10%),0 8px 10px -6px oklch(from var(--shadow-color) l c h/4%);--overlay:oklch(from var(--shadow-color) l c h/50%);--shadow-inset-sm:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%);--shadow-inset:inset 0 var(--spacing-0-125) var(--spacing-0-125) oklch(from var(--shadow-color) l c h/10%)}*, *::after, *::before{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:none;-moz-text-size-adjust:none;text-size-adjust:none;margin:0;padding:0} blockquote,body, dd, dl,
 figure, h1, h2, h3, h4, h5, h6, p{margin-block-end:0}
 ol[role="list"],ul[role="list"]{list-style:none}body{line-height:1.5;margin:0;min-height:100vh;padding:0}
 button,h1, h2, h3, h4, h5, h6, input, label{line-height:1.1}h1, h2, h3, h4, h5, h6{text-wrap:balance}a:not([class]){-webkit-text-decoration-skip:ink;color:currentcolor;text-decoration-skip-ink:auto}img,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rizzo-css",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "scripts": {
     "prepublishOnly": "cd ../.. && pnpm build:css && node scripts/copy-scaffold.js"
   },

package/scaffold/vanilla/index.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en" data-theme="{{DATA_THEME}}">{{THEME_LIST_COMMENT}}
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>{{TITLE}}</title>
+  <link rel="stylesheet" href="{{LINK_HREF}}" />
+</head>
+<body>
+  <header style="margin-bottom: var(--spacing-6);">
+    <h1>Hello, Rizzo CSS</h1>
+    <p>Vanilla JS — same styles and components as Astro/Svelte. Use the same BEM classes; see <a href="https://rizzo-css.vercel.app/docs/components">docs</a>.</p>
+    <div style="display: flex; align-items: center; gap: var(--spacing-3); flex-wrap: wrap; margin-top: var(--spacing-3);">
+      <label for="theme-select">Theme:</label>
+      <select id="theme-select" style="width: auto; min-width: 12rem;">
+        <option value="github-dark-classic">github-dark-classic</option>
+        <option value="github-light">github-light</option>
+        <option value="shades-of-purple">shades-of-purple</option>
+        <option value="sandstorm-classic">sandstorm-classic</option>
+        <option value="rocky-blood-orange">rocky-blood-orange</option>
+        <option value="minimal-dark-neon-yellow">minimal-dark-neon-yellow</option>
+        <option value="hack-the-box">hack-the-box</option>
+        <option value="pink-cat-boo">pink-cat-boo</option>
+        <option value="red-velvet-cupcake">red-velvet-cupcake</option>
+        <option value="orangy-one-light">orangy-one-light</option>
+        <option value="sunflower">sunflower</option>
+        <option value="green-breeze-light">green-breeze-light</option>
+        <option value="cute-pink">cute-pink</option>
+        <option value="semi-light-purple">semi-light-purple</option>
+      </select>
+    </div>
+  </header>
+
+  <section style="margin-bottom: var(--spacing-6);">
+    <h2>Buttons</h2>
+    <div style="display: flex; flex-wrap: wrap; gap: var(--spacing-3);">
+      <button type="button" class="btn">Default</button>
+      <button type="button" class="btn btn-primary">Primary</button>
+      <button type="button" class="btn btn-success">Success</button>
+      <button type="button" class="btn btn-warning">Warning</button>
+      <button type="button" class="btn btn-error">Error</button>
+      <button type="button" class="btn btn-outline">Outline</button>
+    </div>
+  </section>
+
+  <section style="margin-bottom: var(--spacing-6);">
+    <h2>Card &amp; Badge</h2>
+    <div class="card" style="max-width: 20rem;">
+      <div class="card__body">
+        <h3 class="card__title">Card title</h3>
+        <p>Same component styles as Astro and Svelte. Use class names from the <a href="https://rizzo-css.vercel.app/docs/components">component docs</a>.</p>
+        <span class="badge badge--primary">Badge</span>
+      </div>
+    </div>
+  </section>
+
+  <p><small>All themes and component styles are included. Run <code>npx rizzo-css theme</code> to list themes.</small></p>
+
+  <script>
+    (function () {
+      var select = document.getElementById('theme-select');
+      var html = document.documentElement;
+      var key = 'rizzo-theme';
+      function applyTheme(value) {
+        html.setAttribute('data-theme', value);
+        try { localStorage.setItem(key, value); } catch (e) {}
+        select.value = value;
+      }
+      var stored = null;
+      try { stored = localStorage.getItem(key); } catch (e) {}
+      var initial = stored || html.getAttribute('data-theme') || 'github-dark-classic';
+      applyTheme(initial);
+      select.addEventListener('change', function () { applyTheme(select.value); });
+    })();
+  </script>
+</body>
+</html>