initial commit

Signed-off-by: NotAShelf <raf@notashelf.dev> Change-Id: Iaade5d67478a437673f2bc2a18e9fb676a6a6964
2026-05-02 19:43:06 +03:00 · 2026-05-02 19:43:06 +03:00 · eb03499933
commit eb03499933
7 changed files with 1553 additions and 0 deletions
--- a/scripts/preview.mjs
+++ b/scripts/preview.mjs
@ -0,0 +1,201 @@
+#!/usr/bin/env node
+
+import fs from "node:fs/promises";
+import path from "node:path";
+
+const input = process.argv[2] ?? "tokens";
+const output = process.argv[3] ?? "color-preview.html";
+
+function isColor(value) {
+  return (
+    typeof value === "string" &&
+    (
+      /^#([0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(value) ||
+      /^rgb\(/i.test(value) ||
+      /^rgba\(/i.test(value) ||
+      /^hsl\(/i.test(value) ||
+      /^hsla\(/i.test(value) ||
+      /^oklch\(/i.test(value) ||
+      /^color\(/i.test(value)
+    )
+  );
+}
+
+function unwrapToken(node) {
+  if (!node || typeof node !== "object") return node;
+  if ("$value" in node) return node.$value;
+  if ("value" in node) return node.value;
+  return node;
+}
+
+async function walkFiles(dir) {
+  const out = [];
+  const entries = await fs.readdir(dir, { withFileTypes: true });
+
+  for (const entry of entries) {
+    const full = path.join(dir, entry.name);
+
+    if (entry.isDirectory()) {
+      out.push(...await walkFiles(full));
+    } else if (/\.(json|tokens\.json)$/i.test(entry.name)) {
+      out.push(full);
+    }
+  }
+
+  return out;
+}
+
+function collectColors(obj, prefix = [], source = "unknown") {
+  const colors = [];
+
+  if (!obj || typeof obj !== "object") return colors;
+
+  for (const [key, raw] of Object.entries(obj)) {
+    const value = unwrapToken(raw);
+    const name = [...prefix, key];
+
+    if (isColor(value)) {
+      colors.push({
+        name: name.join("."),
+        value,
+        source
+      });
+    } else if (value && typeof value === "object") {
+      colors.push(...collectColors(value, name, source));
+    }
+  }
+
+  return colors;
+}
+
+function htmlEscape(s) {
+  return String(s)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;");
+}
+
+function makeHtml(colors) {
+  const cards = colors.map(c => `
+    <section class="card">
+      <div class="swatch" style="background: ${htmlEscape(c.value)}"></div>
+      <div class="meta">
+        <code>${htmlEscape(c.name)}</code>
+        <button data-copy="${htmlEscape(c.value)}">${htmlEscape(c.value)}</button>
+        <small>${htmlEscape(c.source)}</small>
+      </div>
+    </section>
+  `).join("\n");
+
+  return `<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Color Preview</title>
+  <style>
+    :root {
+      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      color: #111;
+      background: #f5f5f5;
+    }
+
+    body {
+      margin: 0;
+      padding: 32px;
+    }
+
+    h1 {
+      margin: 0 0 24px;
+      font-size: 28px;
+    }
+
+    .grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+      gap: 16px;
+    }
+
+    .card {
+      overflow: hidden;
+      border-radius: 14px;
+      background: white;
+      box-shadow: 0 1px 4px rgb(0 0 0 / 0.12);
+    }
+
+    .swatch {
+      height: 120px;
+      border-bottom: 1px solid rgb(0 0 0 / 0.08);
+    }
+
+    .meta {
+      display: grid;
+      gap: 8px;
+      padding: 14px;
+    }
+
+    code {
+      font-size: 13px;
+      word-break: break-word;
+    }
+
+    button {
+      width: fit-content;
+      border: 1px solid #ccc;
+      border-radius: 999px;
+      background: #fafafa;
+      padding: 6px 10px;
+      font: inherit;
+      cursor: pointer;
+    }
+
+    small {
+      color: #666;
+      word-break: break-word;
+    }
+  </style>
+</head>
+<body>
+  <h1>Color Preview</h1>
+  <div class="grid">
+    ${cards || "<p>No colors found.</p>"}
+  </div>
+
+  <script>
+    document.addEventListener("click", async event => {
+      const button = event.target.closest("button[data-copy]");
+      if (!button) return;
+
+      await navigator.clipboard.writeText(button.dataset.copy);
+      const old = button.textContent;
+      button.textContent = "Copied";
+      setTimeout(() => button.textContent = old, 900);
+    });
+  </script>
+</body>
+</html>`;
+}
+
+const stat = await fs.stat(input).catch(() => null);
+
+if (!stat) {
+  console.error(`Input not found: ${input}`);
+  process.exit(1);
+}
+
+const files = stat.isDirectory() ? await walkFiles(input) : [input];
+
+const colors = [];
+
+for (const file of files) {
+  const json = JSON.parse(await fs.readFile(file, "utf8"));
+  colors.push(...collectColors(json, [], file));
+}
+
+colors.sort((a, b) => a.name.localeCompare(b.name));
+
+await fs.mkdir(path.dirname(output), { recursive: true });
+await fs.writeFile(output, makeHtml(colors), "utf8");
+
+console.log(`Wrote ${output}`);
+console.log(`Found ${colors.length} colors.`);