@vettvangur/design-system 0.0.1

package/LICENSE

@@ -0,0 +1,11 @@
+Portions of this package rely on third-party open source libraries, which are licensed under their respective open source licenses (such as MIT). Use of those libraries is governed solely by their respective license terms.
+
+All original code in this repository is licensed under the terms below:
+
+---
+
+Copyright (c) 2025 Vettvangur
+
+This software is provided for personal or internal non-commercial use only. You may not modify, distribute, sublicense, or use this software in commercial products or services without explicit written permission from Vettvangur.
+
+All rights reserved.

package/README.md

@@ -0,0 +1,18 @@
+# vettvangur-styleguide
+
+Auto-generate styleguide based on project CSS variables and utilities.
+
+* Colors
+* Typography
+* Buttons
+* Inputs
+
+### `Commands`
+
+Astro:
+
+`vettvangur-styleguide astro`
+
+Umbraco:
+
+`vettvangur-styleguide razor -n=UmbracoStarter`

package/dist/generate-astro-AcegHzWG.js

@@ -0,0 +1,476 @@
+#!/usr/bin/env node
+import { promises } from 'node:fs';
+import path from 'node:path';
+import 'node:url';
+import process from 'node:process';
+import { p as parseColors, a as parseTypography, b as parseButtons, i as inputsSpec } from './inputs-CQVgm9Do.js';
+
+// core/astro/generate-astro.mjs
+const CWD = process.cwd();
+
+// Generated components
+const OUT_DIR = path.resolve(CWD, 'src/astrobook/components');
+const OUT_PREVIEW = path.join(OUT_DIR, 'Preview.astro'); // <-- new
+const OUT_COLORS = path.join(OUT_DIR, 'Colors.astro');
+const OUT_BODIES = path.join(OUT_DIR, 'Bodies.astro');
+const OUT_HEADLINES = path.join(OUT_DIR, 'Headlines.astro');
+const OUT_BUTTONS = path.join(OUT_DIR, 'Buttons.astro');
+const OUT_INPUTS = path.join(OUT_DIR, 'Inputs.astro');
+const OUT_RICHTEXT = path.join(OUT_DIR, 'Richtext.astro');
+
+// Story folders
+const ASTROBOOK_DIR = path.resolve(CWD, 'src/astrobook');
+const OUT_DIR_TYPOGRAPHY = path.join(ASTROBOOK_DIR, 'Typography');
+const OUT_DIR_UI = path.join(ASTROBOOK_DIR, 'UI');
+const OUT_DIR_COLORS = path.join(ASTROBOOK_DIR, 'Colors');
+async function generateAstro() {
+  // ensure dirs
+  await promises.mkdir(OUT_DIR, {
+    recursive: true
+  });
+  await promises.mkdir(ASTROBOOK_DIR, {
+    recursive: true
+  });
+  await promises.mkdir(OUT_DIR_TYPOGRAPHY, {
+    recursive: true
+  });
+  await promises.mkdir(OUT_DIR_UI, {
+    recursive: true
+  });
+  await promises.mkdir(OUT_DIR_COLORS, {
+    recursive: true
+  });
+
+  // write Preview.astro (to a FILE, not the folder)
+  await promises.writeFile(OUT_PREVIEW, generatePreview(), 'utf8');
+  console.log(`✓ Wrote ${rel(OUT_PREVIEW)} (Preview)`);
+
+  // write story files
+  await renderStoriesAstro();
+  const [colors, typography, buttons] = await Promise.all([parseColors(),
+  // -> [{ title, color, class }]
+  parseTypography(),
+  // -> { bodies: [...], headlines: [...] }
+  parseButtons() // -> [{ title, class, text }]
+  ]);
+
+  // Colors -> Colors.astro
+  if (colors?.length) {
+    await promises.writeFile(OUT_COLORS, renderColorsAstro(colors), 'utf8');
+    console.log(`✓ Wrote ${rel(OUT_COLORS)} (${colors.length} swatches)`);
+  } else {
+    console.warn('• No colors parsed — Colors.astro not written');
+  }
+
+  // Bodies -> Bodies.astro
+  if (typography?.bodies?.length) {
+    await promises.writeFile(OUT_BODIES, renderBodiesAstro(typography.bodies), 'utf8');
+    console.log(`✓ Wrote ${rel(OUT_BODIES)} (${typography.bodies.length} bodies)`);
+  } else {
+    console.warn('• No bodies parsed — Bodies.astro not written');
+  }
+
+  // Headlines -> Headlines.astro
+  if (typography?.headlines?.length) {
+    await promises.writeFile(OUT_HEADLINES, renderHeadlinesAstro(typography.headlines), 'utf8');
+    console.log(`✓ Wrote ${rel(OUT_HEADLINES)} (${typography.headlines.length} headlines)`);
+  } else {
+    console.warn('• No headlines parsed — Headlines.astro not written');
+  }
+
+  // Buttons -> Buttons.astro
+  if (buttons?.length) {
+    await promises.writeFile(OUT_BUTTONS, renderButtonsAstro(buttons), 'utf8');
+    console.log(`✓ Wrote ${rel(OUT_BUTTONS)} (${buttons.length} buttons)`);
+  } else {
+    console.warn('• No buttons parsed — Buttons.astro not written');
+  }
+
+  // Inputs -> Inputs.astro
+  const hasAnyInputs = Object.values(inputsSpec).some(arr => Array.isArray(arr) && arr.length);
+  if (hasAnyInputs) {
+    await promises.writeFile(OUT_INPUTS, renderInputsAstro(inputsSpec), 'utf8');
+    console.log(`✓ Wrote ${rel(OUT_INPUTS)} (inputs:${inputsSpec.inputs?.length ?? 0} selects:${inputsSpec.selects?.length ?? 0} ` + `checkboxes:${inputsSpec.checkboxes?.length ?? 0} radios:${inputsSpec.radios?.length ?? 0} textareas:${inputsSpec.textareas?.length ?? 0})`);
+  } else {
+    console.warn('• No input spec items — Inputs.astro not written');
+  }
+
+  // Richtext -> Richtext.astro  (static specimen)
+  await promises.writeFile(OUT_RICHTEXT, renderRichtextAstro(), 'utf8');
+  console.log(`✓ Wrote ${rel(OUT_RICHTEXT)} (Richtext)`);
+}
+
+/* ---------- story writers ---------- */
+
+async function renderStoriesAstro() {
+  const storyBody = generateStoryBody();
+  const storyColors = generateStoryColors();
+  const storyHeadline = generateStoryHeadline();
+  const storyButton = generateStoryButtons();
+  const storyInputs = generateStoryInputs();
+  const storyRichtext = generateStoryRichtext(); // fixed: TS story
+
+  const FILE_BODY = path.join(OUT_DIR_TYPOGRAPHY, 'Body.stories.ts');
+  const FILE_HEADLINES = path.join(OUT_DIR_TYPOGRAPHY, 'Headlines.stories.ts');
+  const FILE_RICHTEXT = path.join(OUT_DIR_TYPOGRAPHY, 'Richtext.stories.ts');
+  const FILE_BUTTONS = path.join(OUT_DIR_UI, 'Buttons.stories.ts');
+  const FILE_INPUTS = path.join(OUT_DIR_UI, 'Inputs.stories.ts');
+  const FILE_COLORS = path.join(OUT_DIR_COLORS, 'Colors.stories.ts');
+  await promises.writeFile(FILE_BODY, storyBody, 'utf8');
+  await promises.writeFile(FILE_HEADLINES, storyHeadline, 'utf8');
+  await promises.writeFile(FILE_RICHTEXT, storyRichtext, 'utf8');
+  await promises.writeFile(FILE_BUTTONS, storyButton, 'utf8');
+  await promises.writeFile(FILE_INPUTS, storyInputs, 'utf8');
+  await promises.writeFile(FILE_COLORS, storyColors, 'utf8');
+  console.log('✓ Wrote story files:');
+  console.log(`  - ${rel(FILE_BODY)}`);
+  console.log(`  - ${rel(FILE_HEADLINES)}`);
+  console.log(`  - ${rel(FILE_RICHTEXT)}`);
+  console.log(`  - ${rel(FILE_BUTTONS)}`);
+  console.log(`  - ${rel(FILE_INPUTS)}`);
+  console.log(`  - ${rel(FILE_COLORS)}`);
+}
+
+/* ---------- code gens ---------- */
+
+function generatePreview() {
+  return `
+---
+/** Auto-generated - do not edit by hand */
+import '@/styles/main.css'
+import Fonts from '@/components/core/utility/Fonts.astro'
+---
+<Fonts />
+<div class="astrobook-preview bg-background">
+  <slot />
+</div>
+`.trimStart();
+}
+function generateStoryBody() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Bodies from '@/astrobook/components/Bodies.astro'
+
+export default {
+  title: 'Typography/Body',
+  component: Bodies,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Bodies({}) } }),
+}
+`.trimStart();
+}
+function generateStoryColors() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Colors from '@/astrobook/components/Colors.astro'
+
+export default {
+  title: 'Colors',
+  component: Colors,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Colors({}) } }),
+}
+`.trimStart();
+}
+function generateStoryHeadline() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Headlines from '@/astrobook/components/Headlines.astro'
+
+export default {
+  title: 'Typography/Headlines',
+  component: Headlines,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Headlines({}) } }),
+}
+`.trimStart();
+}
+function generateStoryButtons() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Buttons from '@/astrobook/components/Buttons.astro'
+
+export default {
+  title: 'UI/Buttons',
+  component: Buttons,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Buttons({}) } }),
+}
+`.trimStart();
+}
+function generateStoryInputs() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Inputs from '@/astrobook/components/Inputs.astro'
+
+export default {
+  title: 'UI/Inputs',
+  component: Inputs,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Inputs({}) } }),
+}
+`.trimStart();
+}
+function generateStoryRichtext() {
+  return `
+// Auto-generated — do not edit by hand
+import Preview from '@/astrobook/components/Preview.astro'
+import Richtext from '@/astrobook/components/Richtext.astro'
+
+export default {
+  title: 'Typography/Richtext',
+  component: Richtext,
+}
+
+export const Overview = {
+  render: () => Preview({ slots: { default: Richtext({}) } }),
+}
+`.trimStart();
+}
+
+/* ---------- renderers ---------- */
+
+function renderColorsAstro(colors) {
+  const items = colors.map(({
+    title,
+    color,
+    class: klass
+  }) => {
+    const style = `background:${color};`;
+    return `
+    <div class="flex items-center gap-4 p-3 rounded border border-black/10 bg-white/5">
+      <div class="size-10 rounded shadow-inner ring-1 ring-black/10" style="${style}"></div>
+      <div class="flex flex-col text-sm">
+        <span class="font-medium">${e(title)}</span>
+        <span class="opacity-70">token: <code>--color-${e(klass.replace(/^x-/, ''))}</code></span>
+        <span class="opacity-70">class: <code>${e(klass)}</code></span>
+        <span class="opacity-70">value: <code>${e(color)}</code></span>
+      </div>
+    </div>`.trim();
+  });
+  return `---
+/* Auto-generated — do not edit by hand */
+---
+<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+${items.join('\n')}
+</div>
+`;
+}
+function renderBodiesAstro(bodies) {
+  const items = bodies.map(b => {
+    const meta = metaText(b.size, b.lineheight, b.config);
+    return `  <p class="${a(b.class)}">${e(b.title)} ${meta}</p>`;
+  });
+  return `---
+/* Auto-generated — do not edit by hand */
+---
+<div class="space-y-4">
+${items.join('\n')}
+</div>
+`;
+}
+function renderHeadlinesAstro(headlines) {
+  const lines = headlines.map(h => {
+    const meta = metaText(h.size, h.lineheight, h.config);
+    return `  <div class="flex items-baseline gap-2">
+    <Headline size="2" text="${a(h.title)}" class="${a(h.class)}" />
+    ${meta}
+  </div>`;
+  });
+  return `---
+/* Auto-generated — do not edit by hand */
+import Headline from '@/components/core/Headline.astro'
+---
+<div class="space-y-4">
+${lines.join('\n')}
+</div>
+`;
+}
+function renderButtonsAstro(buttons) {
+  const lines = buttons.map(b => {
+    const klass = b.class.trim(); // variants already @apply button; don't prepend "button"
+    return `  <div class="flex items-center gap-3">
+    <Button text="${a(b.text)}" modifier="${a(klass)}" />
+    <span class="text-sm opacity-70">${e(b.title)} — <code>${e(klass)}</code></span>
+  </div>`;
+  });
+  return `---
+/* Auto-generated — do not edit by hand */
+import Button from '@/components/core/button/Button.astro'  /* adjust if path differs */
+---
+<div class="space-y-3">
+${lines.join('\n')}
+</div>
+`;
+}
+function renderInputsAstro(spec) {
+  const {
+    inputs = [],
+    selects = [],
+    checkboxes = [],
+    radios = [],
+    textareas = []
+  } = spec;
+  const renderGroup = (title, componentTag, items) => {
+    if (!items?.length) {
+      return '';
+    }
+    const rows = items.map(obj => `    <${componentTag} ${attrs(obj)} />`).join('\n');
+    return `
+  <section>
+    <h3 class="text-sm opacity-70 mb-2">${e(title)}</h3>
+${rows}
+  </section>`;
+  };
+  return `---
+/* Auto-generated — do not edit by hand */
+import Input from '@/components/core/inputs/Input.astro'
+import Select from '@/components/core/inputs/Select.astro'
+import Selection from '@/components/core/inputs/Selection.astro'
+---
+<div class="space-y-8">
+${renderGroup('Inputs', 'Input', inputs)}
+${renderGroup('Selects', 'Select', selects)}
+${renderGroup('Checkboxes', 'Selection', checkboxes)}
+${renderGroup('Radios', 'Selection', radios)}
+${renderGroup('Textareas', 'Select', textareas)}
+</div>
+`;
+}
+function renderRichtextAstro() {
+  return `---
+/* Auto-generated — do not edit by hand */
+import Headline from '@/components/core/Headline.astro'
+---
+<section class="w-full">
+  <Headline
+    text="Richtext"
+    size="1"
+    class="headline-1 mb-[60px]"
+  />
+
+  <div class="richtext">
+    <h1>h1</h1>
+    <h2>h2</h2>
+    <h3>h3</h3>
+    <h4>h4</h4>
+    <h5>h5</h5>
+    <p>
+      Ófróðlegt þorviðar <a href="https://www.vettvangur.is/" target="_blank">látist kærðu</a>, allfeginn því að kaupmanni, <strong>hraðasta</strong> ættleri <em>farminum</em> þuríði brústeinunum konungsþræll grænar. Hólmganga hrísflekkur, lifum skalla-grímur tíkr. Meiðinn hatast oddleifsdóttir, dólglegast dyflini, torfafóstri torfunni rak jarðarmenið stirðir. Býsn hvé ölseljunni gerði, jafnvitur lög vaskligr, sám hvortveggja ófrelsi trúfasti hallkelsdóttur sneri mund guðmundarsonum. Sekum meginmerkurinnar, arfsali allmikilli sjaldgæf. Uggasyni sættu konungsþræll gæs, alþýðuskap orðtækið stokkar, orkar mund ormláðs skrumaði hriflusonar virðak. Biðjum meiðinn keppa, taliðr uggasyni, skerðan manngjarnlega hofgyðja vilk allmikilli. Ógott hirðum samdóma, heimamaðr endilangt, erlingur kaldur gjósa seimþollr hallkell landkaupi. Torfunni tungu-oddur þorviðar gufárós, ævifús sekur tröllskessa, umbanda rétttrúaður bráðan svörfuði nýt íþrótt dalalönd halli. Flyðruness haldnar aðsóknar skerðan, auðhnykkjanda mannvandur smálöndum sauðarhöfðinu ferjunni.
+    </p>
+    <ul>
+      <li>List item</li>
+      <li>List item</li>
+      <li>
+        List item
+        <ul>
+          <li>Nested item</li>
+          <li>Nested item</li>
+          <li>
+            Nested item
+            <ul>
+              <li>Nested even more item</li>
+              <li>Nested even more item</li>
+              <li>Nested even more item</li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+      <li>List item</li>
+    </ul>
+    <ol>
+      <li>List item</li>
+      <li>
+        List item
+        <ol>
+          <li>Nested item</li>
+          <li>Nested item</li>
+          <li>Nested item</li>
+        </ol>
+      </li>
+      <li>List item</li>
+      <li>List item</li>
+    </ol>
+    <p>
+      Ófróðlegt þorviðar <a href="https://www.vettvangur.is/" target="_blank">látist kærðu</a>, allfeginn því að kaupmanni, hraðasta ættleri farminum þuríði brústeinunum konungsþræll grænar. Hólmganga hrísflekkur, lifum skalla-grímur tíkr. Meiðinn hatast oddleifsdóttir, dólglegast dyflini, torfafóstri torfunni rak jarðarmenið stirðir. Býsn hvé ölseljunni gerði, jafnvitur lög vaskligr, sám hvortveggja ófrelsi trúfasti hallkelsdóttur sneri mund guðmundarsonum. Sekum meginmerkurinnar, arfsali allmikilli sjaldgæf. Uggasyni sættu konungsþræll gæs, alþýðuskap orðtækið stokkar, orkar mund ormláðs skrumaði hriflusonar virðak. Biðjum meiðinn keppa, taliðr uggasyni, skerðan manngjarnlega hofgyðja vilk allmikilli. Ógott hirðum samdóma, heimamaðr endilangt, erlingur kaldur gjósa seimþollr hallkell landkaupi. Torfunni tungu-oddur þorviðar gufárós, ævifús sekur tröllskessa, umbanda rétttrúaður bráðan svörfuði nýt íþrótt dalalönd halli. Flyðruness haldnar aðsóknar skerðan, auðhnykkjanda mannvandur smálöndum sauðarhöfðinu ferjunni.
+    </p>
+  </div>
+</section>
+`.trimStart();
+}
+
+/* ---------- helpers ---------- */
+
+function attrs(obj = {}) {
+  const parts = [];
+  for (const [key, val] of Object.entries(obj)) {
+    if (val === '' || val === null || val === undefined || val === false) {
+      continue;
+    }
+    if (typeof val === 'string') {
+      parts.push(`${key}="${a(val)}"`);
+    } else if (typeof val === 'number') {
+      parts.push(`${key}={${val}}`);
+    } else if (typeof val === 'boolean') {
+      parts.push(`${key}={true}`);
+    } else {
+      parts.push(`${key}={${JSON.stringify(val)}}`);
+    }
+  }
+  return parts.join(' ');
+}
+function metaText(size, lineheight, config) {
+  const basePair = pair({
+    size,
+    lineHeight: lineheight
+  });
+  const parts = [];
+  if (config?.desktop && (config.desktop.size || config.desktop.lineHeight)) {
+    parts.push(`D: ${pair(config.desktop)}`);
+  }
+  if (config?.mobile && (config.mobile.size || config.mobile.lineHeight)) {
+    parts.push(`M: ${pair(config.mobile)}`);
+  }
+  const label = parts.length ? parts.join(' • ') : basePair;
+  if (!label) {
+    return '';
+  }
+  return `<span class="opacity-60 text-sm">${e(label)}</span>`;
+}
+function pair({
+  size,
+  lineHeight
+} = {}) {
+  const s = size ?? null;
+  const l = lineHeight ?? null;
+  if (!s && !l) {
+    return '';
+  }
+  return `${s ?? '-'} / ${l ?? '-'}`;
+}
+function e(s = '') {
+  return String(s).replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+}
+function a(s = '') {
+  return String(s).replaceAll('"', '&quot;');
+}
+function rel(p) {
+  return path.relative(process.cwd(), p);
+}
+
+export { generateAstro as default };