@ponti-studios/ui 0.4.0 → 0.4.2

package/src/styles/tokens/scripts/check-foundations.mjs

@@ -0,0 +1,126 @@
+import { readFileSync } from "node:fs";
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+const tailwindTheme = require.resolve("tailwindcss/theme.css");
+const tailwind = readFileSync(tailwindTheme, "utf8");
+const sourceTokens = JSON.parse(
+  readFileSync(new URL("../source/foundations.tokens.json", import.meta.url), "utf8"),
+);
+const generated = readFileSync(new URL("../generated/foundations.css", import.meta.url), "utf8");
+
+const declarations = (css) =>
+  [...css.matchAll(/(--[\w-]+):\s*([^;]+);/g)].map(([, name, value]) => [name, value.trim()]);
+const expected = declarations(tailwind);
+const actual = declarations(generated);
+const failures = [];
+const normalize = (value) =>
+  value
+    .replaceAll(/\b0px\b/g, "0")
+    .replaceAll(/ 0 0 (rgb\()/g, " $1")
+    .replaceAll(/\s+/g, " ")
+    .trim();
+const expectedValues = new Map(expected);
+const generatedNames = new Set();
+
+const requiredNames = [
+  "--spacing",
+  "--font-sans",
+  "--font-serif",
+  "--font-mono",
+  ...[
+    "xs",
+    "sm",
+    "base",
+    "lg",
+    "xl",
+    "2xl",
+    "3xl",
+    "4xl",
+    "5xl",
+    "6xl",
+    "7xl",
+    "8xl",
+    "9xl",
+  ].flatMap((name) => [`--text-${name}`, `--text-line-height-${name}`]),
+  ...[
+    "thin",
+    "extralight",
+    "light",
+    "normal",
+    "medium",
+    "semibold",
+    "bold",
+    "extrabold",
+    "black",
+  ].map((name) => `--font-weight-${name}`),
+  ...["tighter", "tight", "normal", "wide", "wider", "widest"].map((name) => `--tracking-${name}`),
+  ...["tight", "snug", "normal", "relaxed", "loose"].map((name) => `--leading-${name}`),
+  ...["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "full"].map((name) => `--radius-${name}`),
+  ...["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "none"].map((name) => `--shadow-${name}`),
+  ...["sm", "md", "lg", "xl", "2xl"].map((name) => `--breakpoint-${name}`),
+  ...["3xs", "2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl"].map(
+    (name) => `--container-${name}`,
+  ),
+  ...["auto", "0", "10", "20", "30", "40", "50"].map((name) => `--z-index-${name}`),
+  ...["in", "out", "in-out"].map((name) => `--ease-${name}`),
+  ...["75", "100", "150", "200", "300", "500", "700", "1000"].map((name) => `--duration-${name}`),
+  ...["spin", "ping", "pulse", "bounce"].map((name) => `--animate-${name}`),
+];
+
+const sourceNames = new Set();
+const collectSourceNames = (node, path = []) => {
+  if (!node || typeof node !== "object") return;
+  if (Object.hasOwn(node, "$value")) {
+    sourceNames.add(`--${path.join("-")}`);
+    return;
+  }
+  for (const [key, value] of Object.entries(node)) {
+    if (!key.startsWith("$")) collectSourceNames(value, [...path, key]);
+  }
+};
+collectSourceNames(sourceTokens);
+
+// Font families use our own system-ui stack ordering rather than Tailwind's
+// exact default wording — every other foundation name is meant to stay
+// aligned with Tailwind's own scale, but font-* is exempt from that check.
+const brandOverrideNames = new Set(["--font-sans", "--font-serif", "--font-mono"]);
+
+for (const [name, value] of actual) {
+  if (generatedNames.has(name)) failures.push(`duplicate generated foundation variable: ${name}`);
+  generatedNames.add(name);
+
+  if (brandOverrideNames.has(name)) continue;
+
+  const tailwindValue = expectedValues.get(name);
+  if (tailwindValue !== undefined && normalize(value) !== normalize(tailwindValue)) {
+    failures.push(`${name}: generated ${value}; Tailwind ${tailwindValue}`);
+  }
+}
+
+for (const name of requiredNames) {
+  if (!generatedNames.has(name))
+    failures.push(`required Tailwind foundation variable is missing: ${name}`);
+}
+
+for (const name of sourceNames) {
+  if (!generatedNames.has(name)) failures.push(`missing generated foundation variable: ${name}`);
+}
+for (const name of generatedNames) {
+  if (!sourceNames.has(name))
+    failures.push(`generated foundation variable has no source token: ${name}`);
+}
+
+if (/--[\w-]+:\s*var\(--[\w-]+\)/.test(generated))
+  failures.push("generated foundations contain a custom-property alias");
+if (/--tracking-[\w-]+:\s*-?\d+(?:\.\d+)?\s*;/.test(generated))
+  failures.push("tracking values must carry a CSS unit");
+
+if (failures.length) {
+  console.error(failures.join("\n"));
+  process.exit(1);
+}
+
+console.log(
+  `Foundation conformance passed (${actual.length} generated variables; ${expectedValues.size} Tailwind variables available for comparison).`,
+);

package/src/styles/tokens/scripts/check-source.mjs

@@ -0,0 +1,43 @@
+import { fileURLToPath } from "node:url";
+import { readdirSync, readFileSync, statSync } from "node:fs";
+import { join, relative } from "node:path";
+
+const sourceDirectory = fileURLToPath(new URL("../../../", import.meta.url));
+const sourceFiles = [];
+
+function collectFiles(directory) {
+  for (const entry of readdirSync(directory)) {
+    const path = join(directory, entry);
+    if (entry === "generated" && statSync(path).isDirectory()) continue;
+    if (statSync(path).isDirectory()) collectFiles(path);
+    else if (/\.(css|ts|tsx)$/.test(entry)) sourceFiles.push(path);
+  }
+}
+
+collectFiles(sourceDirectory);
+
+const checks = [
+  { name: "Radix imports", pattern: /@radix-ui\// },
+  { name: "legacy semantic utility classes", pattern: /(?:\bbg-canvas\b|\bborder-default\b)/ },
+  {
+    name: "invalid shadcn semantic classes",
+    pattern: /(?:text|bg|border)-foreground-foreground\b/,
+  },
+];
+const failures = [];
+
+for (const file of sourceFiles) {
+  const source = readFileSync(file, "utf8");
+  for (const check of checks) {
+    if (check.name === "legacy semantic utility classes" && file.endsWith(".css")) continue;
+    if (check.pattern.test(source))
+      failures.push(`${check.name}: ${relative(sourceDirectory, file)}`);
+  }
+}
+
+if (failures.length > 0) {
+  console.error(failures.join("\n"));
+  process.exit(1);
+}
+
+console.log(`Source contract passed (${sourceFiles.length} source files checked).`);

package/src/styles/tokens/source/dark.tokens.json

@@ -0,0 +1,105 @@
+{
+  "$extensions": {
+    "org.ponti.license": "MIT"
+  },
+  "background": {
+    "$type": "color",
+    "$value": "rgb(17, 17, 19)"
+  },
+  "card": {
+    "$type": "color",
+    "$value": "rgb(24, 25, 27)"
+  },
+  "popover": {
+    "$type": "color",
+    "$value": "rgb(33, 34, 37)"
+  },
+  "muted": {
+    "$type": "color",
+    "$value": "rgb(24, 25, 27)"
+  },
+  "text-primary": {
+    "$type": "color",
+    "$value": "rgb(237, 238, 240)"
+  },
+  "text-secondary": {
+    "$type": "color",
+    "$value": "rgb(176, 180, 186)"
+  },
+  "tertiary": {
+    "$type": "color",
+    "$value": "rgb(119, 123, 132)"
+  },
+  "primary": {
+    "$type": "color",
+    "$value": "rgb(62, 99, 221)"
+  },
+  "destructive": {
+    "$type": "color",
+    "$value": "rgb(206, 44, 49)"
+  },
+  "success": {
+    "$type": "color",
+    "$value": "rgb(48, 164, 108)"
+  },
+  "warning": {
+    "$type": "color",
+    "$value": "rgb(255, 197, 61)"
+  },
+  "primary-foreground": {
+    "$type": "color",
+    "$value": "rgb(255, 255, 255)"
+  },
+  "destructive-foreground": {
+    "$type": "color",
+    "$value": "rgb(255, 255, 255)"
+  },
+  "text-destructive": {
+    "$type": "color",
+    "$value": "rgb(255, 149, 146)"
+  },
+  "border-default": {
+    "$type": "color",
+    "$value": "rgb(67, 72, 78)"
+  },
+  "focus-ring": {
+    "$type": "color",
+    "$value": "rgb(62, 99, 221)"
+  },
+  "chart-1": {
+    "$type": "color",
+    "$value": "rgb(62, 99, 221)"
+  },
+  "chart-2": {
+    "$type": "color",
+    "$value": "rgb(110, 86, 207)"
+  },
+  "chart-3": {
+    "$type": "color",
+    "$value": "rgb(18, 165, 148)"
+  },
+  "chart-4": {
+    "$type": "color",
+    "$value": "rgb(247, 107, 21)"
+  },
+  "chart-5": {
+    "$type": "color",
+    "$value": "rgb(105, 110, 119)"
+  },
+  "chart-positive": {
+    "$type": "color",
+    "$value": "rgb(48, 164, 108)"
+  },
+  "chart-negative": {
+    "$type": "color",
+    "$value": "rgb(229, 72, 77)"
+  },
+  "chart-neutral": {
+    "$type": "color",
+    "$value": "rgb(90, 97, 105)"
+  },
+  "overlay-scrim": {
+    "$type": "color",
+    "$value": "rgb(0, 0, 0)"
+  }
+}

package/src/styles/tokens/source/foundations.tokens.json

@@ -0,0 +1,341 @@
+{
+  "$description": "Non-color foundations copied from tailwindcss@4.3.3/theme.css. Keep this file value-for-value aligned with Tailwind.",
+  "spacing": { "$type": "dimension", "$value": { "value": 0.25, "unit": "rem" } },
+  "spacing-scale": {
+    "$type": "dimension",
+    "0": { "$value": { "value": 0, "unit": "rem" } },
+    "px": { "$value": { "value": 1, "unit": "px" } },
+    "0-5": { "$value": { "value": 0.125, "unit": "rem" } },
+    "1": { "$value": { "value": 0.25, "unit": "rem" } },
+    "1-5": { "$value": { "value": 0.375, "unit": "rem" } },
+    "2": { "$value": { "value": 0.5, "unit": "rem" } },
+    "2-5": { "$value": { "value": 0.625, "unit": "rem" } },
+    "3": { "$value": { "value": 0.75, "unit": "rem" } },
+    "3-5": { "$value": { "value": 0.875, "unit": "rem" } },
+    "4": { "$value": { "value": 1, "unit": "rem" } },
+    "5": { "$value": { "value": 1.25, "unit": "rem" } },
+    "6": { "$value": { "value": 1.5, "unit": "rem" } },
+    "7": { "$value": { "value": 1.75, "unit": "rem" } },
+    "8": { "$value": { "value": 2, "unit": "rem" } },
+    "9": { "$value": { "value": 2.25, "unit": "rem" } },
+    "10": { "$value": { "value": 2.5, "unit": "rem" } },
+    "11": { "$value": { "value": 2.75, "unit": "rem" } },
+    "12": { "$value": { "value": 3, "unit": "rem" } },
+    "14": { "$value": { "value": 3.5, "unit": "rem" } },
+    "16": { "$value": { "value": 4, "unit": "rem" } },
+    "20": { "$value": { "value": 5, "unit": "rem" } },
+    "24": { "$value": { "value": 6, "unit": "rem" } },
+    "28": { "$value": { "value": 7, "unit": "rem" } },
+    "32": { "$value": { "value": 8, "unit": "rem" } },
+    "36": { "$value": { "value": 9, "unit": "rem" } },
+    "40": { "$value": { "value": 10, "unit": "rem" } },
+    "44": { "$value": { "value": 11, "unit": "rem" } },
+    "48": { "$value": { "value": 12, "unit": "rem" } },
+    "52": { "$value": { "value": 13, "unit": "rem" } },
+    "56": { "$value": { "value": 14, "unit": "rem" } },
+    "60": { "$value": { "value": 15, "unit": "rem" } },
+    "64": { "$value": { "value": 16, "unit": "rem" } },
+    "72": { "$value": { "value": 18, "unit": "rem" } },
+    "80": { "$value": { "value": 20, "unit": "rem" } },
+    "96": { "$value": { "value": 24, "unit": "rem" } }
+  },
+  "font": {
+    "$type": "fontFamily",
+    "sans": {
+      "$value": [
+        "system-ui",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        "Segoe UI",
+        "Roboto",
+        "Helvetica Neue",
+        "Noto Sans",
+        "Arial",
+        "sans-serif",
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+        "Noto Color Emoji"
+      ]
+    },
+    "serif": {
+      "$value": [
+        "system-ui",
+        "-apple-system",
+        "BlinkMacSystemFont",
+        "Segoe UI",
+        "Roboto",
+        "Helvetica Neue",
+        "Noto Sans",
+        "Arial",
+        "sans-serif",
+        "Apple Color Emoji",
+        "Segoe UI Emoji",
+        "Segoe UI Symbol",
+        "Noto Color Emoji"
+      ]
+    },
+    "mono": {
+      "$value": [
+        "ui-monospace",
+        "SFMono-Regular",
+        "Menlo",
+        "Monaco",
+        "Consolas",
+        "Liberation Mono",
+        "Courier New",
+        "monospace"
+      ]
+    }
+  },
+  "text": {
+    "$type": "dimension",
+    "xs": { "$value": { "value": 0.75, "unit": "rem" } },
+    "sm": { "$value": { "value": 0.875, "unit": "rem" } },
+    "base": { "$value": { "value": 1, "unit": "rem" } },
+    "lg": { "$value": { "value": 1.125, "unit": "rem" } },
+    "xl": { "$value": { "value": 1.25, "unit": "rem" } },
+    "2xl": { "$value": { "value": 1.5, "unit": "rem" } },
+    "3xl": { "$value": { "value": 1.875, "unit": "rem" } },
+    "4xl": { "$value": { "value": 2.25, "unit": "rem" } },
+    "5xl": { "$value": { "value": 3, "unit": "rem" } },
+    "6xl": { "$value": { "value": 3.75, "unit": "rem" } },
+    "7xl": { "$value": { "value": 4.5, "unit": "rem" } },
+    "8xl": { "$value": { "value": 6, "unit": "rem" } },
+    "9xl": { "$value": { "value": 8, "unit": "rem" } }
+  },
+  "text-line-height": {
+    "$type": "number",
+    "xs": { "$value": 1.3333333333 },
+    "sm": { "$value": 1.4285714286 },
+    "base": { "$value": 1.5 },
+    "lg": { "$value": 1.5555555556 },
+    "xl": { "$value": 1.4 },
+    "2xl": { "$value": 1.3333333333 },
+    "3xl": { "$value": 1.2 },
+    "4xl": { "$value": 1.1111111111 },
+    "5xl": { "$value": 1 },
+    "6xl": { "$value": 1 },
+    "7xl": { "$value": 1 },
+    "8xl": { "$value": 1 },
+    "9xl": { "$value": 1 }
+  },
+  "font-weight": {
+    "$type": "fontWeight",
+    "thin": { "$value": 100 },
+    "extralight": { "$value": 200 },
+    "light": { "$value": 300 },
+    "normal": { "$value": 400 },
+    "medium": { "$value": 500 },
+    "semibold": { "$value": 600 },
+    "bold": { "$value": 700 },
+    "extrabold": { "$value": 800 },
+    "black": { "$value": 900 }
+  },
+  "tracking": {
+    "$type": "dimension",
+    "tighter": { "$value": { "value": -0.05, "unit": "em" } },
+    "tight": { "$value": { "value": -0.025, "unit": "em" } },
+    "normal": { "$value": { "value": 0, "unit": "em" } },
+    "wide": { "$value": { "value": 0.025, "unit": "em" } },
+    "wider": { "$value": { "value": 0.05, "unit": "em" } },
+    "widest": { "$value": { "value": 0.1, "unit": "em" } }
+  },
+  "leading": {
+    "$type": "number",
+    "tight": { "$value": 1.25 },
+    "snug": { "$value": 1.375 },
+    "normal": { "$value": 1.5 },
+    "relaxed": { "$value": 1.625 },
+    "loose": { "$value": 2 }
+  },
+  "radius": {
+    "$type": "dimension",
+    "xs": { "$value": { "value": 0.125, "unit": "rem" } },
+    "sm": { "$value": { "value": 0.25, "unit": "rem" } },
+    "md": { "$value": { "value": 0.375, "unit": "rem" } },
+    "lg": { "$value": { "value": 0.5, "unit": "rem" } },
+    "xl": { "$value": { "value": 0.75, "unit": "rem" } },
+    "2xl": { "$value": { "value": 1, "unit": "rem" } },
+    "3xl": { "$value": { "value": 1.5, "unit": "rem" } },
+    "4xl": { "$value": { "value": 2, "unit": "rem" } },
+    "full": { "$value": { "value": 9999, "unit": "px" } }
+  },
+  "shadow": {
+    "$type": "shadow",
+    "2xs": {
+      "$value": [
+        {
+          "color": "rgb(0 0 0 / 0.05)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 1, "unit": "px" },
+          "blur": { "value": 0, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" }
+        }
+      ]
+    },
+    "xs": {
+      "$value": [
+        {
+          "color": "rgb(0 0 0 / 0.05)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 1, "unit": "px" },
+          "blur": { "value": 2, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" }
+        }
+      ]
+    },
+    "sm": {
+      "$value": [
+        {
+          "color": "rgb(0 0 0 / 0.1)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 1, "unit": "px" },
+          "blur": { "value": 3, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" }
+        },
+        {
+          "color": "rgb(0 0 0 / 0.1)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 1, "unit": "px" },
+          "blur": { "value": 2, "unit": "px" },
+          "spread": { "value": -1, "unit": "px" }
+        }
+      ]
+    },
+    "md": {
+      "$value": [
+        {
+          "color": "rgb(0 0 0 / 0.1)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 4, "unit": "px" },
+          "blur": { "value": 6, "unit": "px" },
+          "spread": { "value": -1, "unit": "px" }
+        },
+        {
+          "color": "rgb(0 0 0 / 0.1)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 2, "unit": "px" },
+          "blur": { "value": 4, "unit": "px" },
+          "spread": { "value": -2, "unit": "px" }
+        }
+      ]
+    },
+    "lg": {
+      "$value": [
+        {
+          "color": "rgb(0 0 0 / 0.1)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 10, "unit": "px" },
+          "blur": { "value": 15, "unit": "px" },
+          "spread": { "value": -3, "unit": "px" }
+        },
+        {
+          "color": "rgb(0 0 0 / 0.1)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 4, "unit": "px" },
+          "blur": { "value": 6, "unit": "px" },
+          "spread": { "value": -4, "unit": "px" }
+        }
+      ]
+    },
+    "xl": {
+      "$value": [
+        {
+          "color": "rgb(0 0 0 / 0.1)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 20, "unit": "px" },
+          "blur": { "value": 25, "unit": "px" },
+          "spread": { "value": -5, "unit": "px" }
+        },
+        {
+          "color": "rgb(0 0 0 / 0.1)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 8, "unit": "px" },
+          "blur": { "value": 10, "unit": "px" },
+          "spread": { "value": -6, "unit": "px" }
+        }
+      ]
+    },
+    "2xl": {
+      "$value": [
+        {
+          "color": "rgb(0 0 0 / 0.25)",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 25, "unit": "px" },
+          "blur": { "value": 50, "unit": "px" },
+          "spread": { "value": -12, "unit": "px" }
+        }
+      ]
+    },
+    "none": {
+      "$value": [
+        {
+          "color": "transparent",
+          "offsetX": { "value": 0, "unit": "px" },
+          "offsetY": { "value": 0, "unit": "px" },
+          "blur": { "value": 0, "unit": "px" },
+          "spread": { "value": 0, "unit": "px" }
+        }
+      ]
+    }
+  },
+  "breakpoint": {
+    "$type": "dimension",
+    "sm": { "$value": { "value": 40, "unit": "rem" } },
+    "md": { "$value": { "value": 48, "unit": "rem" } },
+    "lg": { "$value": { "value": 64, "unit": "rem" } },
+    "xl": { "$value": { "value": 80, "unit": "rem" } },
+    "2xl": { "$value": { "value": 96, "unit": "rem" } }
+  },
+  "container": {
+    "$type": "dimension",
+    "3xs": { "$value": { "value": 16, "unit": "rem" } },
+    "2xs": { "$value": { "value": 18, "unit": "rem" } },
+    "xs": { "$value": { "value": 20, "unit": "rem" } },
+    "sm": { "$value": { "value": 24, "unit": "rem" } },
+    "md": { "$value": { "value": 28, "unit": "rem" } },
+    "lg": { "$value": { "value": 32, "unit": "rem" } },
+    "xl": { "$value": { "value": 36, "unit": "rem" } },
+    "2xl": { "$value": { "value": 42, "unit": "rem" } },
+    "3xl": { "$value": { "value": 48, "unit": "rem" } },
+    "4xl": { "$value": { "value": 56, "unit": "rem" } },
+    "5xl": { "$value": { "value": 64, "unit": "rem" } },
+    "6xl": { "$value": { "value": 72, "unit": "rem" } },
+    "7xl": { "$value": { "value": 80, "unit": "rem" } }
+  },
+  "z-index": {
+    "$type": "number",
+    "auto": { "$value": "auto" },
+    "0": { "$value": 0 },
+    "10": { "$value": 10 },
+    "20": { "$value": 20 },
+    "30": { "$value": 30 },
+    "40": { "$value": 40 },
+    "50": { "$value": 50 }
+  },
+  "ease": {
+    "$type": "cubicBezier",
+    "in": { "$value": [0.4, 0, 1, 1] },
+    "out": { "$value": [0, 0, 0.2, 1] },
+    "in-out": { "$value": [0.4, 0, 0.2, 1] }
+  },
+  "duration": {
+    "$type": "duration",
+    "75": { "$value": "75ms" },
+    "100": { "$value": "100ms" },
+    "150": { "$value": "150ms" },
+    "200": { "$value": "200ms" },
+    "300": { "$value": "300ms" },
+    "500": { "$value": "500ms" },
+    "700": { "$value": "700ms" },
+    "1000": { "$value": "1000ms" }
+  },
+  "animate": {
+    "$type": "string",
+    "spin": { "$value": "spin 1s linear infinite" },
+    "ping": { "$value": "ping 1s cubic-bezier(0, 0, 0.2, 1) infinite" },
+    "pulse": { "$value": "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite" },
+    "bounce": { "$value": "bounce 1s infinite" }
+  }
+}