@nebutra/tokens 0.1.1 → 0.1.2

package/brands/vercel/brand.json

@@ -0,0 +1,207 @@
+{
+  "id": "vercel",
+  "name": "Vercel",
+  "darkDefault": false,
+  "version": "1.0.0",
+  "semantic": {
+    "background": "0 0% 98%",
+    "foreground": "0 0% 9%",
+    "card": "0 0% 100%",
+    "cardForeground": "0 0% 9%",
+    "popover": "0 0% 100%",
+    "popoverForeground": "0 0% 9%",
+    "primary": "0 0% 9%",
+    "primaryForeground": "0 0% 100%",
+    "secondary": "0 0% 92%",
+    "secondaryForeground": "0 0% 30%",
+    "muted": "0 0% 92%",
+    "mutedForeground": "0 0% 40%",
+    "accent": "0 0% 92%",
+    "accentForeground": "0 0% 30%",
+    "destructive": "0 72% 51%",
+    "destructiveForeground": "0 0% 100%",
+    "border": "0 0% 92%",
+    "input": "0 0% 100%",
+    "ring": "0 0% 9%",
+    "success": "133 50% 32%",
+    "successForeground": "0 0% 100%",
+    "info": "0 0% 30%",
+    "infoForeground": "0 0% 100%"
+  },
+  "modes": {
+    "light": {
+      "semantic": {
+        "background": "0 0% 98%",
+        "foreground": "0 0% 9%",
+        "card": "0 0% 100%",
+        "cardForeground": "0 0% 9%",
+        "popover": "0 0% 100%",
+        "popoverForeground": "0 0% 9%",
+        "primary": "0 0% 9%",
+        "primaryForeground": "0 0% 100%",
+        "secondary": "0 0% 92%",
+        "secondaryForeground": "0 0% 30%",
+        "muted": "0 0% 92%",
+        "mutedForeground": "0 0% 40%",
+        "accent": "0 0% 92%",
+        "accentForeground": "0 0% 30%",
+        "destructive": "0 72% 51%",
+        "destructiveForeground": "0 0% 100%",
+        "border": "0 0% 92%",
+        "input": "0 0% 100%",
+        "ring": "0 0% 9%",
+        "success": "133 50% 32%",
+        "successForeground": "0 0% 100%",
+        "info": "0 0% 30%",
+        "infoForeground": "0 0% 100%"
+      }
+    },
+    "dark": {
+      "semantic": {
+        "background": "0 0% 0%",
+        "foreground": "0 0% 93%",
+        "card": "0 0% 4%",
+        "cardForeground": "0 0% 93%",
+        "popover": "0 0% 4%",
+        "popoverForeground": "0 0% 93%",
+        "primary": "0 0% 100%",
+        "primaryForeground": "0 0% 0%",
+        "secondary": "0 0% 12%",
+        "secondaryForeground": "0 0% 93%",
+        "muted": "0 0% 12%",
+        "mutedForeground": "0 0% 63%",
+        "accent": "0 0% 12%",
+        "accentForeground": "0 0% 93%",
+        "destructive": "0 72% 51%",
+        "destructiveForeground": "0 0% 100%",
+        "border": "0 0% 16%",
+        "input": "0 0% 4%",
+        "ring": "0 0% 100%",
+        "success": "133 49% 40%",
+        "successForeground": "0 0% 100%",
+        "info": "0 0% 70%",
+        "infoForeground": "0 0% 0%"
+      }
+    }
+  },
+  "recipe": {
+    "buttonDefault": "solid",
+    "density": "compact",
+    "badgeDefault": "muted",
+    "radii": {
+      "button": "6px",
+      "card": "6px",
+      "badge": "6px",
+      "input": "6px",
+      "pill": "9999px"
+    },
+    "elevationTokens": {
+      "card": "rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px",
+      "control": "0 0 #0000",
+      "raised": "rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px"
+    },
+    "outlineBorder": "#ebebeb"
+  },
+  "typography": {
+    "fontSans": "'Geist Sans', 'Geist', ui-sans-serif, system-ui, sans-serif",
+    "fontMono": "'Geist Mono', ui-monospace, Menlo, monospace",
+    "fontDisplay": "'Geist Sans', 'Geist', ui-sans-serif, system-ui, sans-serif",
+    "headingWeight": 450,
+    "faces": [
+      {
+        "family": "Geist Sans",
+        "src": [
+          {
+            "url": "https://cdn.jsdelivr.net/fontsource/fonts/geist-sans:vf@latest/latin-wght-normal.woff2",
+            "format": "woff2"
+          }
+        ],
+        "weight": "100 900",
+        "display": "swap"
+      }
+    ]
+  },
+  "zones": {
+    "product": {
+      "caption": {
+        "fontSize": "13px",
+        "lineHeight": 1.54,
+        "fontWeight": 400
+      },
+      "bodySm": {
+        "fontSize": "14px",
+        "lineHeight": 1.43,
+        "fontWeight": 400
+      },
+      "body": {
+        "fontSize": "16px",
+        "lineHeight": 1.5,
+        "fontWeight": 400
+      },
+      "heading": {
+        "fontSize": "30px",
+        "lineHeight": 1.1,
+        "fontWeight": 500,
+        "letterSpacing": "-1.5px"
+      }
+    },
+    "marketing": {
+      "body": {
+        "fontSize": "16px",
+        "lineHeight": 1.5,
+        "fontWeight": 400
+      },
+      "heading": {
+        "fontSize": "30px",
+        "lineHeight": 1.1,
+        "fontWeight": 450,
+        "letterSpacing": "-1.5px"
+      },
+      "headingLg": {
+        "fontSize": "56px",
+        "lineHeight": 1,
+        "fontWeight": 450,
+        "letterSpacing": "-3.36px"
+      },
+      "display": {
+        "fontSize": "64px",
+        "lineHeight": 1,
+        "fontWeight": 450,
+        "letterSpacing": "-3.84px"
+      }
+    }
+  },
+  "extensions": {
+    "categories": {
+      "carbon": "#000000",
+      "terminal": "#297a3a"
+    },
+    "sourceUrl": "https://vercel.com",
+    "notes": [
+      "Dual-mode monochrome — light: Obsidian CTA; dark: white CTA on carbon.",
+      "Elevation is hairline double-ring, never drop-shadow.",
+      "Spectrum/solar gradients are marketing-only decorative (not product chrome)."
+    ]
+  },
+  "roles": {
+    "canvas": "0 0% 98%",
+    "canvasForeground": "0 0% 9%",
+    "surface": "0 0% 100%",
+    "surfaceForeground": "0 0% 9%",
+    "action": "0 0% 9%",
+    "actionForeground": "0 0% 100%",
+    "quiet": "0 0% 92%",
+    "quietForeground": "0 0% 30%",
+    "muted": "0 0% 92%",
+    "mutedForeground": "0 0% 40%",
+    "border": "0 0% 92%",
+    "input": "0 0% 100%",
+    "ring": "0 0% 9%",
+    "destructive": "0 72% 51%",
+    "destructiveForeground": "0 0% 100%",
+    "success": "133 50% 32%",
+    "successForeground": "0 0% 100%",
+    "info": "0 0% 30%",
+    "infoForeground": "0 0% 100%"
+  }
+}

package/package.json

@@ -1,22 +1,28 @@
 {
   "name": "@nebutra/tokens",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "Unified theme tokens and theme-provider entry for Nebutra apps",
   "private": false,
   "license": "MIT",
   "type": "module",
   "sideEffects": [
-    "./styles.css"
+    "./styles.css",
+    "./recipe.css",
+    "./skins/*.css"
   ],
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "exports": {
     ".": "./src/index.ts",
-    "./styles.css": "./styles.css"
+    "./styles.css": "./styles.css",
+    "./recipe.css": "./recipe.css",
+    "./skins/*": "./skins/*",
+    "./brands/*": "./brands/*",
+    "./brand-package": "./src/brand-package/index.ts",
+    "./use-brand": "./src/brand-package/use-brand.ts"
   },
   "dependencies": {
-    "next-themes": "^0.4.6",
-    "@nebutra/design-tokens": "0.1.1"
+    "@nebutra/design-tokens": "0.1.2"
   },
   "peerDependencies": {
     "react": "^19"
@@ -38,8 +44,11 @@
     "access": "public"
   },
   "scripts": {
-    "build": "node -e \"const fs=require('node:fs'),src='../design-tokens/build/css/styles.generated.css';if(fs.existsSync(src)){fs.copyFileSync(src,'./styles.css');console.log('styles.css refreshed from @nebutra/design-tokens')}else{console.log('styles.css kept (committed copy used; design-tokens build/ absent — likely Turbo cache restore without files)')}\"",
-    "sync": "corepack pnpm --filter @nebutra/design-tokens build && node -e \"require('node:fs').copyFileSync('../design-tokens/build/css/styles.generated.css', './styles.css')\"",
-    "typecheck": "tsc --noEmit"
+    "build": "node scripts/sync-styles.mjs && node scripts/emit-skins.mjs",
+    "sync": "node scripts/sync-styles.mjs",
+    "emit-skins": "node scripts/emit-skins.mjs",
+    "compile-brand": "node scripts/compile-brand.mjs",
+    "typecheck": "tsc --noEmit",
+    "test": "node --experimental-strip-types --test src/brand-package/__tests__/*.test.ts"
   }
 }

package/recipe.css

@@ -0,0 +1,114 @@
+/**
+ * Product chrome recipe surface — carrier defaults for Nebutra factory brand.
+ *
+ * Contract:
+ *   --primary              = roles.action (CTA only)
+ *   --brand-mark           = roles.brand (logo / AI badge; never default CTA)
+ *   --elevation-card|…     = free CSS box-shadow from brand package
+ *   --radius-button|card|… = shape slots
+ *
+ * VI logo lock (--brand-primary hex) remains separate from product action.
+ * Tailwind utilities: bg-brand-mark / text-brand-mark (see @theme below).
+ */
+
+:root {
+  /* ── Color roles (overridden by brand skins) ──────────────────── */
+  --role-action: var(--primary);
+  --role-action-fg: var(--primary-foreground);
+  --brand-mark: var(--primary);
+  --brand-mark-foreground: var(--primary-foreground);
+
+  /* ── Button default (solid | outline | gradient-stroke) ───────── */
+  --btn-default-bg: hsl(var(--primary));
+  --btn-default-fg: hsl(var(--primary-foreground));
+  --btn-default-border: transparent;
+  --btn-default-border-width: 0px;
+  --btn-default-stroke-gradient: transparent;
+  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
+  --btn-default-radius: var(--radius-button, var(--radius-md, 0.375rem));
+  --btn-default-shadow: 0 0 #0000;
+  --btn-default-padding-y: 0.5rem;
+  --btn-default-padding-x: 1rem;
+
+  /* ── Shape slots ──────────────────────────────────────────────── */
+  --radius-button: var(--radius-md, 0.375rem);
+  --radius-card: var(--radius-lg, 0.75rem);
+  --radius-badge: 9999px;
+  --radius-inputs: var(--radius-md, 0.375rem);
+  --radius-pill: 9999px;
+
+  /* ── Control density (factory = Geist ladder; brands may override) ─ */
+  --control-height-tiny: 1.5rem; /* 24 */
+  --control-height-sm: 2rem; /* 32 */
+  --control-height-md: 2.5rem; /* 40 */
+  --control-height-lg: 3rem; /* 48 */
+  --control-font-size-tiny: 0.6875rem; /* 11 */
+  --control-font-size-sm: 0.75rem; /* 12 */
+  --control-font-size-md: 0.875rem; /* 14 */
+  --control-font-size-lg: 1rem; /* 16 */
+  --font-weight-medium: 500;
+  --font-weight-heading: 600;
+
+  /* ── Elevation (free CSS; brand package replaces these) ───────── */
+  --elevation-card: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+  --elevation-control: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.04));
+  --elevation-raised: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
+
+  /* ── Badge default = brand mark (AI / identity chips; not CTA) ─── */
+  --badge-default-bg: hsl(var(--brand-mark));
+  --badge-default-fg: hsl(var(--brand-mark-foreground));
+  --badge-default-border: transparent;
+  --badge-default-radius: var(--radius-badge, 9999px);
+  --badge-default-hover-bg: color-mix(in srgb, hsl(var(--brand-mark)) 80%, transparent);
+}
+
+/* Tailwind v4: brand-mark as first-class color (Logo / BrandMark / badge) */
+@theme inline {
+  --color-brand-mark: hsl(var(--brand-mark));
+  --color-brand-mark-foreground: hsl(var(--brand-mark-foreground));
+}
+
+/* ── Button default ─────────────────────────────────────────────── */
+.btn-brand-default {
+  border-width: var(--btn-default-border-width, 0px);
+  border-style: solid;
+  border-color: transparent;
+  border-radius: var(--btn-default-radius, var(--radius-md, 0.375rem));
+  background-color: transparent;
+  background-image:
+    linear-gradient(
+      var(--btn-default-bg, hsl(var(--primary))),
+      var(--btn-default-bg, hsl(var(--primary)))
+    ),
+    var(--btn-default-stroke-gradient, linear-gradient(transparent, transparent));
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  color: var(--btn-default-fg, hsl(var(--primary-foreground)));
+  box-shadow: var(--btn-default-shadow, 0 0 #0000);
+  font-weight: var(--font-weight-medium, 500);
+}
+
+.btn-brand-default:hover:not(:disabled):not([aria-disabled="true"]) {
+  background-image:
+    linear-gradient(
+      var(--btn-default-hover-bg, color-mix(in srgb, hsl(var(--primary)) 90%, transparent)),
+      var(--btn-default-hover-bg, color-mix(in srgb, hsl(var(--primary)) 90%, transparent))
+    ),
+    var(--btn-default-stroke-gradient, linear-gradient(transparent, transparent));
+}
+
+/* ── Badge default (brand-mark; skins may set match-action → primary) ─ */
+.badge-brand-default {
+  border-color: var(--badge-default-border, transparent);
+  border-radius: var(--badge-default-radius, 9999px);
+  background-color: var(--badge-default-bg, hsl(var(--brand-mark)));
+  color: var(--badge-default-fg, hsl(var(--brand-mark-foreground)));
+  font-weight: var(--font-weight-medium, 500);
+}
+
+.badge-brand-default:hover {
+  background-color: var(
+    --badge-default-hover-bg,
+    color-mix(in srgb, hsl(var(--brand-mark)) 80%, transparent)
+  );
+}

package/scripts/compile-brand-run.ts

@@ -0,0 +1,79 @@
+import { mkdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
+import { basename, join, resolve } from "node:path";
+import { compileReferoTokens } from "../src/brand-package/index";
+
+function parseArgs(argv: string[]) {
+  let input: string | null = null;
+  let id: string | undefined;
+  let name: string | undefined;
+  let out: string | undefined;
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if (a === "--id") id = argv[++i];
+    else if (a === "--name") name = argv[++i];
+    else if (a === "--out") out = argv[++i];
+    else if (!a.startsWith("-")) input = resolve(a);
+  }
+  return { input, id, name, out };
+}
+
+const args = parseArgs(process.argv.slice(2));
+if (!args.input) {
+  process.stderr.write(
+    "Usage: compile-brand.mjs <dir|tokens.json> [--id id] [--name name] [--out dir]\n",
+  );
+  process.exit(1);
+}
+
+const st = statSync(args.input);
+let tokens: Record<string, unknown>;
+let designMd = "";
+let hintId = "custom";
+
+if (st.isDirectory()) {
+  const tokensPath = join(args.input, "tokens.json");
+  try {
+    tokens = JSON.parse(readFileSync(tokensPath, "utf8"));
+  } catch {
+    throw new Error(`No tokens.json in ${args.input}`);
+  }
+  const designPath = join(args.input, "DESIGN.md");
+  try {
+    designMd = readFileSync(designPath, "utf8");
+  } catch {
+    designMd = "";
+  }
+  hintId = basename(args.input).toLowerCase();
+} else {
+  tokens = JSON.parse(readFileSync(args.input, "utf8"));
+  hintId = basename(args.input, ".json").toLowerCase();
+}
+
+const result = compileReferoTokens({
+  tokens,
+  designMd,
+  id: args.id ?? hintId,
+  name: args.name,
+});
+
+const packageRoot = resolve(import.meta.dirname, "..");
+const outDir = args.out ? resolve(args.out) : join(packageRoot, "brands", result.brand.id);
+mkdirSync(outDir, { recursive: true });
+// brand.json is SSOT — skin CSS only under skins/<id>.css (via emit-skins)
+writeFileSync(join(outDir, "brand.json"), `${JSON.stringify(result.brand, null, 2)}\n`);
+mkdirSync(join(packageRoot, "skins"), { recursive: true });
+writeFileSync(join(packageRoot, "skins", `${result.brand.id}.css`), result.css);
+
+process.stdout.write(
+  `${JSON.stringify(
+    {
+      out: outDir,
+      id: result.brand.id,
+      recipe: result.brand.recipe.buttonDefault,
+      warnings: result.warnings,
+      note: "brand.json is SSOT; re-run emit-skins after hand-edits to brand.json",
+    },
+    null,
+    2,
+  )}\n`,
+);

package/scripts/compile-brand.mjs

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+/**
+ * Compile Refero export → Brand Package + skin CSS
+ *
+ *   node packages/design/tokens/scripts/compile-brand.mjs ~/Desktop/GSAP --id gsap
+ */
+import { spawnSync } from "node:child_process";
+import { existsSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const repoRoot = resolve(packageRoot, "../../..");
+const tsx = join(repoRoot, "node_modules/.bin/tsx");
+const runner = join(packageRoot, "scripts/compile-brand-run.ts");
+
+const r = spawnSync(
+  existsSync(tsx) ? tsx : "npx",
+  existsSync(tsx) ? [runner, ...process.argv.slice(2)] : ["tsx", runner, ...process.argv.slice(2)],
+  {
+    stdio: "inherit",
+    cwd: packageRoot,
+  },
+);
+process.exit(r.status ?? 1);

package/scripts/emit-skins-run.ts

@@ -0,0 +1,62 @@
+/**
+ * Re-emit all skin CSS files from brands/<id>/brand.json (SSOT).
+ */
+import { spawnSync } from "node:child_process";
+import { existsSync, mkdirSync, readdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { emitBrandCss, normalizeBrandPackage } from "../src/brand-package/index.ts";
+
+const packageRoot = resolve(import.meta.dirname, "..");
+const repoRoot = resolve(packageRoot, "../../..");
+const brandsDir = join(packageRoot, "brands");
+const skinsDir = join(packageRoot, "skins");
+const biomeBin = join(repoRoot, "node_modules/.bin/biome");
+
+if (!existsSync(brandsDir)) {
+  throw new Error(`Missing brands dir: ${brandsDir}`);
+}
+
+mkdirSync(skinsDir, { recursive: true });
+
+const ids = readdirSync(brandsDir, { withFileTypes: true })
+  .filter((d) => d.isDirectory())
+  .map((d) => d.name)
+  .sort();
+
+const written: string[] = [];
+const cssPaths: string[] = [];
+
+for (const id of ids) {
+  const brandPath = join(brandsDir, id, "brand.json");
+  if (!existsSync(brandPath)) {
+    process.stderr.write(`skip ${id}: no brand.json\n`);
+    continue;
+  }
+  const raw = JSON.parse(readFileSync(brandPath, "utf8"));
+  const brand = normalizeBrandPackage({ ...raw, id: raw.id || id });
+  const css = emitBrandCss(brand, { mode: "global" });
+
+  // Single publish path: skins/<id>.css (no brands/<id>/skin.css mirror)
+  const outPath = join(skinsDir, `${brand.id}.css`);
+  writeFileSync(outPath, css);
+  cssPaths.push(outPath);
+  written.push(brand.id);
+}
+
+// Post-format so CI "governance lint guards" (biome check) stays green after
+// typecheck/build re-emits skins in the same workspace.
+if (cssPaths.length > 0 && existsSync(biomeBin)) {
+  const fmt = spawnSync(biomeBin, ["format", "--write", ...cssPaths], {
+    cwd: repoRoot,
+    encoding: "utf8",
+  });
+  if (fmt.status !== 0) {
+    process.stderr.write(fmt.stderr || fmt.stdout || "biome format failed on skins\n");
+    process.exit(fmt.status ?? 1);
+  }
+}
+
+process.stdout.write(
+  `emit-skins: ${written.length} skins from brand.json → skins/*.css\n` +
+    `  ${written.join(", ")}\n`,
+);

package/scripts/emit-skins.mjs

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+/**
+ * Skin CSS SSOT pipeline.
+ *
+ * Source of truth: brands/<id>/brand.json
+ * Generated (do not hand-edit):
+ *   - skins/<id>.css   (single publish path for @import / cssImport)
+ *
+ * Catalog: packages/design/theme/skins.css via theme scripts/sync-skins.mjs
+ *
+ * Usage: node scripts/emit-skins.mjs
+ */
+import { spawnSync } from "node:child_process";
+import { existsSync } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const repoRoot = resolve(packageRoot, "../../..");
+const tsx = join(repoRoot, "node_modules/.bin/tsx");
+const runner = join(packageRoot, "scripts/emit-skins-run.ts");
+
+const r = spawnSync(
+  existsSync(tsx) ? tsx : "npx",
+  existsSync(tsx) ? [runner, ...process.argv.slice(2)] : ["tsx", runner, ...process.argv.slice(2)],
+  {
+    stdio: "inherit",
+    cwd: packageRoot,
+  },
+);
+process.exit(r.status ?? 1);

package/scripts/sync-styles.mjs

@@ -0,0 +1,29 @@
+import { execFileSync } from "node:child_process";
+import { copyFileSync, existsSync } from "node:fs";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..");
+const repoRoot = resolve(packageRoot, "..", "..", "..");
+const designTokensRoot = resolve(packageRoot, "..", "design-tokens");
+const generatedStylesPath = resolve(designTokensRoot, "build", "css", "styles.generated.css");
+const runtimeStylesPath = resolve(packageRoot, "styles.css");
+const biomeBin = resolve(
+  repoRoot,
+  "node_modules",
+  ".bin",
+  process.platform === "win32" ? "biome.cmd" : "biome",
+);
+
+if (!existsSync(generatedStylesPath)) {
+  throw new Error(
+    `Missing generated runtime token CSS at ${generatedStylesPath}. Run \`pnpm --filter @nebutra/design-tokens build\` before syncing @nebutra/tokens.`,
+  );
+}
+
+copyFileSync(generatedStylesPath, runtimeStylesPath);
+execFileSync(biomeBin, ["format", "--write", runtimeStylesPath], {
+  cwd: repoRoot,
+  stdio: "inherit",
+});
+process.stdout.write("styles.css refreshed from @nebutra/design-tokens\n");