@nexub/tokens 2.8.0 → 3.0.0

package/bin/README.md

@@ -12,10 +12,11 @@ npx nexub-migrate --rules logical-classes --ignore 'src/legacy/**'
 
 | Rule | Does |
 | --- | --- |
-| `legacy-tokens` | `var(--color-text-primary)` → `var(--color-on-surface)`, `--color-{leap,bookub,payub,founderub}-500` → `--color-{brand}`, `--color-brand-primary-500` → `--color-primary`. Map is built from the installed `@nexub/themes` (`base.css` + `light.css`), else an embedded snapshot. Color-mix aliases (`--color-*-border`) are reported, not rewritten. `--color-text-disabled` is a role and is never touched; declarations (`--color-x: …`) are left alone. |
+| `legacy-tokens` | `var(--color-text-primary)` → `var(--color-on-surface)`, `--color-{leap,bookub,payub,founderub}-500` → `--color-{brand}`, `--color-brand-primary-500` → `--color-primary`. Also Tailwind colour utilities on legacy names: `bg-bg-default` → `bg-surface`, `text-text-primary/80` → `text-on-surface/80`. The map is a frozen table of the 2.9 aliases (3.0 removed them from `@nexub/themes`, `@nexub/tokens` and the Tailwind preset). Color-mix aliases (`--color-*-border`) are reported, not rewritten. Never touched: `--color-text-disabled` (a role) and `--color-ring-default`, `--color-ring-offset`, `--color-accent-500` (brand themes override them); declarations (`--color-x: …`) are left alone. |
 | `logical-classes` | `ml/mr` `pl/pr` `border-l/r` `rounded-l/r/tl/tr/bl/br` `text-left/right` → `ms/me` `ps/pe` `border-s/e` `rounded-s/e/ss/se/es/ee` `text-start/end`, keeping variants, `!` and `-`. `left-*`/`right-*` positions are reported only. |
 | `tw-animate` | Reports tailwindcss-animate classes (`animate-in`, `fade-in-0`, `zoom-in-95`, `slide-in-from-*` …). Use `nx-motion` / `nx-pop` / `nx-dialog` from `@nexub/themes/base`. |
 | `opacity-modifier` | Reports `bg-[var(--x)]/10` (Tailwind 3 emits nothing). `--fix` rewrites to `bg-[color-mix(in_srgb,var(--x)_10%,transparent)]`. |
+| `deprecated-components` | `@nexub/react` components removed in 3.0, in files that import from `@nexub/react`: `Banner`/`Callout` → `Alert`; `Tag` → `<Badge variant="soft">`; `StatusPill label="x"` → `<Badge variant="soft">x</Badge>`; `*Props` types renamed; imports deduped; aliases (`Tag as T`) keep their local name. Reported only: `StatusPill dot`, `*Variants`, and uses outside JSX (`typeof Banner`, `styled(Tag)`). |
 
 **Where classes are looked for.** `.html`/`.mdx`: `class=`/`className=` attributes. `.css`/`.scss`: `@apply`.
 JS/TS: string and template literals (static parts only) that are either in an explicit class context —

package/bin/nexub-migrate.mjs

@@ -2,18 +2,19 @@
 // nexub-migrate — move app code onto current Nexub DS conventions.
 // Dependency-free (node: built-ins only), Node >= 20. See ./README.md.
 import { readFileSync, readdirSync, realpathSync, statSync, writeFileSync } from 'node:fs';
-import { createRequire } from 'node:module';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { parseArgs } from 'node:util';
 
-export const RULES = ['legacy-tokens', 'logical-classes', 'tw-animate', 'opacity-modifier'];
+export const RULES = ['legacy-tokens', 'logical-classes', 'tw-animate', 'opacity-modifier', 'deprecated-components'];
 const EXTS = new Set(['.ts', '.tsx', '.js', '.jsx', '.css', '.scss', '.html', '.mdx']);
 const SKIP_DIRS = new Set(['node_modules', 'dist', 'build', '.next', 'out', 'coverage']);
 const MAX_BYTES = 1024 * 1024;
 
 // ─── legacy-tokens: alias map ────────────────────────────────────────────────
-const NEVER = new Set(['--color-text-disabled']); // the disabled-state role, not a legacy alias
+// Not legacy aliases: the disabled-state role, and three tokens brand themes override
+// ([data-product] sets ring-default to its tertiary and accent-500 to its scale).
+const NEVER = new Set(['--color-text-disabled', '--color-ring-default', '--color-ring-offset', '--color-accent-500']);
 const BRAND = {
   '--color-leap-500': '--color-leap',
   '--color-bookub-500': '--color-bookub',
@@ -52,8 +53,8 @@ export function buildAliasMap(cssTexts) {
   return { aliases, mix };
 }
 
-// Snapshot of buildAliasMap([@nexub/themes base.css, light.css]) at 1.8.0 — used when
-// @nexub/themes is not installed. bin/nexub-migrate.test.mjs fails if it drifts from source.
+// buildAliasMap([@nexub/themes 2.9 base.css, light.css]), frozen: 3.0 removed these
+// aliases from @nexub/themes, so this table is the only record of them.
 export const SNAPSHOT = /* SNAPSHOT:BEGIN */ {
   "aliases": {
     "--color-leap-500": "--color-leap",
@@ -82,7 +83,6 @@ export const SNAPSHOT = /* SNAPSHOT:BEGIN */ {
     "--color-text-success": "--color-on-success-container",
     "--color-text-warning": "--color-on-warning-container",
     "--color-text-danger": "--color-on-error-container",
-    "--color-accent-500": "--color-primary",
     "--color-bg-default": "--color-surface",
     "--color-bg-subtle": "--color-surface-container-low",
     "--color-bg-muted": "--color-surface-container-high",
@@ -98,8 +98,6 @@ export const SNAPSHOT = /* SNAPSHOT:BEGIN */ {
     "--color-border-subtle": "--color-surface-container-high",
     "--color-border-strong": "--color-outline",
     "--color-border-inverse": "--color-inverse-on-surface",
-    "--color-ring-default": "--color-primary",
-    "--color-ring-offset": "--color-surface",
     "--color-surface-muted": "--color-surface-container-low",
     "--color-surface-raised": "--color-surface-elevated",
     "--color-surface-sunken": "--color-surface-container-high",
@@ -130,17 +128,6 @@ export const SNAPSHOT = /* SNAPSHOT:BEGIN */ {
   }
 } /* SNAPSHOT:END */;
 
-export function loadAliasMap(cwd = process.cwd()) {
-  for (const from of [path.join(cwd, 'package.json'), import.meta.url]) {
-    try {
-      const req = createRequire(from);
-      const css = ['base', 'light'].map((f) => readFileSync(req.resolve(`@nexub/themes/${f}`), 'utf8'));
-      return { ...buildAliasMap(css), source: '@nexub/themes' };
-    } catch { /* not resolvable from here */ }
-  }
-  return { ...SNAPSHOT, source: 'snapshot' };
-}
-
 // ─── class-string contexts ───────────────────────────────────────────────────
 /**
  * Find string-literal bodies in JS/TS source. Handles '…', "…", `…${…}…` (static chunks
@@ -219,6 +206,9 @@ const LOGICAL = [
 const POSITION = /^(left|right)-/;
 const TW_ANIMATE = /^(animate-(in|out)|(fade|zoom|spin)-(in|out)(-.+)?|slide-(in-from|out-to)-.+)$/;
 const OPACITY = /^([\w-]+)-\[var\((--[\w-]+)\)\]\/(\d+)$/;
+// Tailwind colour utilities on a legacy name (bg-bg-default, text-text-primary/80):
+// the preset and tailwind.css dropped these in 3.0. Same utility, role name.
+const COLOR_UTILITY = /^(bg|text|border(?:-[xyselrtb])?|ring|ring-offset|outline|divide|fill|stroke|from|via|to|decoration|shadow|accent|caret|placeholder)-([a-z][\w-]*?)(\/\d+)?$/;
 
 /** Split `md:hover:!-ml-2` into { prefix: 'md:hover:', imp: '!', neg: '-', base: 'ml-2' }. */
 function splitToken(tok) {
@@ -236,7 +226,7 @@ function splitToken(tok) {
   return { prefix: tok.slice(0, cut), imp, neg, base: rest.slice(neg.length) };
 }
 
-function rewriteClassText(text, seg, offset, rules, fix, report) {
+function rewriteClassText(text, seg, offset, rules, fix, report, aliasMap) {
   return text.replace(/\S+/g, (tok, off) => {
     if ((seg.openLeft && off === 0) || (seg.openRight && off + tok.length === text.length)) return tok; // glued to ${…}
     const at = offset + off;
@@ -246,6 +236,12 @@ function rewriteClassText(text, seg, offset, rules, fix, report) {
       for (const [re, fn] of LOGICAL) if (re.test(next)) { next = next.replace(re, fn); break; }
       if (POSITION.test(base)) report(at, 'logical-classes', `"${tok}" is a physical position; review for start-/end- (not auto-fixed)`);
     }
+    if (rules.has('legacy-tokens')) {
+      const m = COLOR_UTILITY.exec(next);
+      const name = m && `--color-${m[2]}`;
+      if (m && aliasMap.aliases[name]) next = `${m[1]}-${aliasMap.aliases[name].slice('--color-'.length)}${m[3] ?? ''}`;
+      else if (m && aliasMap.mix[name]) report(at, 'legacy-tokens', `"${tok}" uses ${name}, a color-mix alias (${aliasMap.mix[name]}); rewrite by hand`);
+    }
     if (rules.has('tw-animate') && TW_ANIMATE.test(base)) {
       report(at, 'tw-animate', `"${tok}" is a tailwindcss-animate class; use nx-motion / nx-pop / nx-dialog from @nexub/themes/base`);
     }
@@ -261,6 +257,122 @@ function rewriteClassText(text, seg, offset, rules, fix, report) {
   });
 }
 
+// ─── deprecated-components: @nexub/react components removed in 3.0 ───────────
+const REPLACED = { Banner: 'Alert', Callout: 'Alert', Tag: 'Badge', StatusPill: 'Badge' };
+const SOFT = new Set(['Tag', 'StatusPill']); // container-coloured, so Badge variant="soft", not its solid default
+const TYPES = { BannerProps: 'AlertProps', CalloutProps: 'AlertProps', TagProps: 'BadgeProps', StatusPillProps: 'BadgeProps' };
+const VARIANTS = new Set(['bannerVariants', 'calloutVariants', 'tagVariants', 'statusPillVariants']);
+const COMPONENT_EXTS = new Set(['.ts', '.tsx', '.js', '.jsx', '.mdx']);
+
+const keepLines = (s) => s.replace(/[^\n]/g, ''); // removals keep line numbers stable
+
+/** Index just past the `{…}` or quoted value starting at i. ponytail: braces inside strings in the value count. */
+function skipValue(src, i) {
+  if (src[i] === '"' || src[i] === "'") return src.indexOf(src[i], i + 1) + 1;
+  let depth = 0;
+  for (let j = i; j < src.length; j++) {
+    if (src[j] === '{') depth++;
+    else if (src[j] === '}' && --depth === 0) return j + 1;
+  }
+  return src.length;
+}
+
+/** Parse a JSX opening tag's attributes from i (just past the name) to its `>` or `/>`. */
+function readTag(src, i) {
+  const attrs = [];
+  while (i < src.length) {
+    const ws = i;
+    while (/\s/.test(src[i])) i++;
+    if (src.startsWith('/>', i)) return { attrs, close: ws, end: i + 2, selfClosing: true };
+    if (src[i] === '>') return { attrs, close: ws, end: i + 1, selfClosing: false };
+    if (src[i] === '{') { i = skipValue(src, i); continue; } // {...spread}
+    const name = /^[\w:-]+/.exec(src.slice(i))?.[0];
+    if (!name) return null;
+    let j = i + name.length;
+    let value = null;
+    const eq = /^\s*=\s*/.exec(src.slice(j));
+    if (eq) {
+      const v = j + eq[0].length;
+      j = skipValue(src, v);
+      value = src.slice(v, j);
+    }
+    attrs.push({ name, start: ws, end: j, value });
+    i = j;
+  }
+  return null;
+}
+
+/** Rewrite deprecated @nexub/react components. Returns { output, items: [{ line, rule, message }] }. */
+function migrateComponents(src) {
+  const edits = [];
+  const items = [];
+  const lineOf = (at) => src.slice(0, at).split('\n').length;
+  const report = (at, message) => items.push({ line: lineOf(at), rule: 'deprecated-components', message });
+  const locals = new Map(); // local JSX name -> { from, to, aliased }
+  const types = new Set();
+  const seen = new Set();
+  const imports = [];
+  for (const m of src.matchAll(/\bimport\s+(?:type\s+)?\{([^}]*)\}\s*from\s*(['"])@nexub\/react\2/dg)) {
+    imports.push(m.indices[0]);
+    const base = m.indices[1][0];
+    for (const s of m[1].matchAll(/\s*(?:\btype\s+)?\b(\w+)(?:\s+as\s+(\w+))?(?:\s*,)?/dg)) {
+      const [spec, name, alias] = s;
+      const next = REPLACED[name] ?? TYPES[name] ?? name;
+      if (VARIANTS.has(name)) report(base + s.index, `${name} is removed in 3.0; use alertVariants / badgeVariants or Alert / Badge`);
+      if (REPLACED[name]) locals.set(alias ?? name, { from: name, to: REPLACED[name], aliased: !!alias });
+      if (TYPES[name] && !alias) types.add(name);
+      const out = alias ? `${next} as ${alias}` : next;
+      if (seen.has(out)) { edits.push({ start: base + s.index, end: base + s.index + spec.length, text: keepLines(spec) }); continue; }
+      seen.add(out);
+      if (next !== name) edits.push({ start: base + s.indices[1][0], end: base + s.indices[1][1], text: next });
+    }
+  }
+  for (const [local, { from, to, aliased }] of locals) {
+    const tagName = aliased ? local : to;
+    for (const m of src.matchAll(new RegExp(`<(/?)${local}(?![\\w.$-])`, 'g'))) {
+      const nameEnd = m.index + m[0].length;
+      edits.push({ start: m.index + 1 + m[1].length, end: nameEnd, text: tagName });
+      if (m[1]) continue;
+      const tag = readTag(src, nameEnd);
+      if (!tag) { report(m.index, `<${local}>: could not parse the tag; migrate it to <${to}> by hand`); continue; }
+      const attr = Object.fromEntries(tag.attrs.map((a) => [a.name, a]));
+      if (SOFT.has(from) && !attr.variant) edits.push({ start: nameEnd, end: nameEnd, text: ' variant="soft"' });
+      if (from !== 'StatusPill') continue;
+      // StatusPill label -> children; dot has no Badge equivalent.
+      const drop = (a) => edits.push({ start: a.start, end: a.end, text: keepLines(src.slice(a.start, a.end)) });
+      if (attr.dot) {
+        drop(attr.dot);
+        if (attr.dot.value !== '{false}') report(m.index, `<${local} dot>: Badge has no dot; pass leadingIcon={<StatusDot />} or similar`);
+      }
+      const label = attr.label;
+      if (!label?.value || label.value.includes('\n') || !tag.selfClosing) {
+        report(m.index, `<${local}>: move label into <${tagName}>children</${tagName}> by hand`);
+        continue;
+      }
+      const q = label.value[0];
+      const inner = label.value.slice(1, -1);
+      const children = q === '{' ? label.value : /[{}<>]/.test(inner) ? `{${label.value}}` : inner;
+      drop(label);
+      edits.push({ start: tag.close, end: tag.end, text: `${keepLines(src.slice(tag.close, tag.end))}>${children}</${tagName}>` });
+    }
+    // Non-JSX references (typeof X, styled(X), as={X}) keep the old name unless it was aliased.
+    if (!aliased || SOFT.has(from)) {
+      for (const m of src.matchAll(new RegExp(`(?:\\btypeof\\s+${local}\\b|[({]\\s*${local}\\s*[,)}])`, 'g'))) {
+        if (!imports.some(([a, b]) => a <= m.index && m.index < b)) report(m.index, `${local} is used outside JSX; it becomes ${to} in 3.0 (check props)`);
+      }
+    }
+  }
+  if (types.size) {
+    const re = new RegExp(`\\b(${[...types].join('|')})\\b`, 'g');
+    for (const m of src.matchAll(re)) {
+      if (!edits.some((e) => e.start <= m.index && m.index < e.end)) edits.push({ start: m.index, end: m.index + m[0].length, text: TYPES[m[0]] });
+    }
+  }
+  let output = src;
+  for (const e of edits.sort((a, b) => b.start - a.start || b.end - a.end)) output = output.slice(0, e.start) + e.text + output.slice(e.end);
+  return { output, items };
+}
+
 // ─── per-file migration ──────────────────────────────────────────────────────
 /**
  * Migrate one file's text. Returns { output, manual: [{ line, rule, message }] }.
@@ -269,12 +381,12 @@ function rewriteClassText(text, seg, offset, rules, fix, report) {
 export function migrateSource(src, { ext, rules = new Set(RULES), fix = false, aliasMap = SNAPSHOT }) {
   const items = [];
   let text = src;
-  if (['logical-classes', 'tw-animate', 'opacity-modifier'].some((r) => rules.has(r))) {
+  if (['logical-classes', 'tw-animate', 'opacity-modifier', 'legacy-tokens'].some((r) => rules.has(r))) {
     let out = '';
     let last = 0;
     for (const seg of classSegments(src, ext)) {
       out += src.slice(last, seg.start) + rewriteClassText(src.slice(seg.start, seg.end), seg, seg.start, rules, fix,
-        (at, rule, message) => items.push({ at, rule, message }));
+        (at, rule, message) => items.push({ at, rule, message }), aliasMap);
       last = seg.end;
     }
     text = out + src.slice(last);
@@ -287,9 +399,14 @@ export function migrateSource(src, { ext, rules = new Set(RULES), fix = false, a
       return name;
     });
   }
+  if (rules.has('deprecated-components') && COMPONENT_EXTS.has(ext) && /@nexub\/react['"]/.test(text)) {
+    const r = migrateComponents(text);
+    text = r.output;
+    items.push(...r.items);
+  }
   // Rewrites never add or remove newlines, so offsets in src and text share line numbers.
   const lineOf = (at) => src.slice(0, at).split('\n').length;
-  const manual = items.map(({ at, rule, message }) => ({ line: lineOf(at), rule, message })).sort((a, b) => a.line - b.line);
+  const manual = items.map(({ at, line, rule, message }) => ({ line: line ?? lineOf(at), rule, message })).sort((a, b) => a.line - b.line);
   return { output: text, manual };
 }
 
@@ -336,12 +453,17 @@ Options:
 
 Rules:
   legacy-tokens      var(--color-text-primary) -> var(--color-on-surface), brand -500 -> role;
-                     color-mix aliases (e.g. --color-semantic-success-border) reported
+                     Tailwind utilities too (bg-bg-default -> bg-surface, text-text-primary
+                     -> text-on-surface); color-mix aliases (--color-semantic-success-border) reported
   logical-classes    ml/mr, pl/pr, border-l/r, rounded-l/r/tl/tr/bl/br, text-left/right
                      -> ms/me, ps/pe, border-s/e, rounded-s/e/ss/se/es/ee, text-start/end;
                      left-/right- positions reported
   tw-animate         report tailwindcss-animate enter/exit classes (use nx-motion/nx-pop/nx-dialog)
   opacity-modifier   report [var(--x)]/NN (emits nothing in Tailwind 3); --fix rewrites to color-mix
+  deprecated-components
+                     @nexub/react components removed in 3.0: Banner, Callout -> Alert;
+                     Tag -> <Badge variant="soft">; StatusPill label -> Badge children
+                     (dot and non-JSX uses reported); *Props types renamed
 
 Ignored: node_modules, dist, build, .next, out, coverage, files over 1 MB.
 Exit codes: 0 ok, 1 --check found something, 2 usage error.`;
@@ -367,11 +489,10 @@ export function run(argv, { cwd = process.cwd(), stdout = (s) => process.stdout.
   const unknown = [...rules].filter((r) => !RULES.includes(r));
   if (unknown.length) { stderr(`Unknown rule(s): ${unknown.join(', ')}. Known: ${RULES.join(', ')}\n`); return 2; }
 
-  const aliasMap = rules.has('legacy-tokens') ? loadAliasMap(cwd) : SNAPSHOT;
   const results = [];
   for (const abs of collectFiles(positionals.length ? positionals : ['src'], { cwd, ignore: o.ignore ?? [] })) {
     const src = readFileSync(abs, 'utf8');
-    const { output, manual } = migrateSource(src, { ext: path.extname(abs), rules, fix: !!o.fix, aliasMap });
+    const { output, manual } = migrateSource(src, { ext: path.extname(abs), rules, fix: !!o.fix });
     const a = src.split('\n');
     const b = output.split('\n');
     const changes = a.flatMap((line, i) => (line === b[i] ? [] : [{ line: i + 1, before: line, after: b[i] }]));
@@ -386,7 +507,7 @@ export function run(argv, { cwd = process.cwd(), stdout = (s) => process.stdout.
   };
 
   if (o.json) {
-    stdout(`${JSON.stringify({ written: !!o.write, aliasSource: aliasMap.source ?? 'snapshot', results, totals }, null, 2)}\n`);
+    stdout(`${JSON.stringify({ written: !!o.write, aliasSource: 'snapshot', results, totals }, null, 2)}\n`);
   } else {
     for (const r of results) {
       stdout(`--- ${r.file}\n+++ ${r.file}\n`);

package/dist/css/rem.css

@@ -1,83 +1 @@
-/* @nexub/tokens/css/rem: import after @nexub/tokens/css (and @nexub/themes). */
-:root {
-  --spacing-1: 0.25rem;
-  --spacing-2: 0.5rem;
-  --spacing-3: 0.75rem;
-  --spacing-4: 1rem;
-  --spacing-5: 1.25rem;
-  --spacing-6: 1.5rem;
-  --spacing-7: 1.75rem;
-  --spacing-8: 2rem;
-  --spacing-9: 2.25rem;
-  --spacing-10: 2.5rem;
-  --spacing-11: 2.75rem;
-  --spacing-12: 3rem;
-  --spacing-14: 3.5rem;
-  --spacing-16: 4rem;
-  --spacing-20: 5rem;
-  --spacing-24: 6rem;
-  --spacing-28: 7rem;
-  --spacing-32: 8rem;
-  --spacing-40: 10rem;
-  --spacing-48: 12rem;
-  --spacing-56: 14rem;
-  --spacing-64: 16rem;
-  --spacing-0-5: 0.125rem;
-  --spacing-1-5: 0.375rem;
-  --spacing-2-5: 0.625rem;
-  --spacing-3-5: 0.875rem;
-  --radius-xs: 0.125rem;
-  --radius-sm: 0.25rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-  --radius-xl: 1rem;
-  --radius-2xl: 1.5rem;
-  --radius-3xl: 2rem;
-  --shape-field: 0.75rem;
-  --shape-container: 1rem;
-  --shape-overlay: 1.5rem;
-  --shape-tooltip: 0.5rem;
-  --shape-min: 0.25rem;
-  --size-control-xs: 1.5rem;
-  --size-control-sm: 2rem;
-  --size-control-md: 2.5rem;
-  --size-control-lg: 3rem;
-  --size-control-xl: 3.5rem;
-  --type-display-lg-size: 3.5rem;
-  --type-display-lg-lineHeight: 3.75rem;
-  --type-display-md-size: 2.75rem;
-  --type-display-md-lineHeight: 3rem;
-  --type-display-sm-size: 2.25rem;
-  --type-display-sm-lineHeight: 2.5rem;
-  --type-headline-lg-size: 2rem;
-  --type-headline-lg-lineHeight: 2.375rem;
-  --type-headline-md-size: 1.75rem;
-  --type-headline-md-lineHeight: 2.125rem;
-  --type-headline-sm-size: 1.5rem;
-  --type-headline-sm-lineHeight: 1.875rem;
-  --type-title-lg-size: 1.25rem;
-  --type-title-lg-lineHeight: 1.75rem;
-  --type-title-md-size: 1rem;
-  --type-title-md-lineHeight: 1.5rem;
-  --type-title-sm-size: 0.875rem;
-  --type-title-sm-lineHeight: 1.25rem;
-  --type-body-lg-size: 1.125rem;
-  --type-body-lg-lineHeight: 1.75rem;
-  --type-body-md-size: 1rem;
-  --type-body-md-lineHeight: 1.5rem;
-  --type-body-sm-size: 0.875rem;
-  --type-body-sm-lineHeight: 1.25rem;
-  --type-label-lg-size: 0.875rem;
-  --type-label-lg-lineHeight: 1.25rem;
-  --type-label-md-size: 0.8125rem;
-  --type-label-md-lineHeight: 1.125rem;
-  --type-label-sm-size: 0.75rem;
-  --type-label-sm-lineHeight: 1rem;
-}
-[data-density='compact'] {
-  --size-control-xs: 1.25rem;
-  --size-control-sm: 1.5rem;
-  --size-control-md: 2rem;
-  --size-control-lg: 2.5rem;
-  --size-control-xl: 3rem;
-}
+/* @nexub/tokens/css/rem: since 3.0 @nexub/tokens/css is in rem by default, so this file is empty. Kept so existing imports keep working. */

package/dist/css/variables.css

@@ -515,42 +515,7 @@
   --color-neutral-950: #080d19;
   --color-neutral-1000: #000000;
   --color-surface-warm: #fefce8;
-  --color-surface-muted: #f8fafc;
-  --color-surface-raised: #ffffff;
-  --color-surface-sunken: #f1f5f9;
-  --color-surface-inverse: #0f172a;
-  --color-semantic-success-default: #10b981;
-  --color-semantic-success-bg: #ecfdf5;
-  --color-semantic-success-border: #a7f3d0;
-  --color-semantic-success-strong: #047857;
-  --color-semantic-error-default: #ef4444;
-  --color-semantic-error-bg: #fef2f2;
-  --color-semantic-error-border: #fecaca;
-  --color-semantic-error-strong: #b91c1c;
-  --color-semantic-warning-default: #f59e0b;
-  --color-semantic-warning-bg: #fffbeb;
-  --color-semantic-warning-border: #fde68a;
-  --color-semantic-warning-strong: #b45309;
-  --color-semantic-info-default: #4099f1;
-  --color-semantic-info-bg: #eff6ff;
-  --color-semantic-info-border: #bfdbfe;
-  --color-semantic-info-strong: #1d4ed8;
-  --color-text-primary: #0f172a;
-  --color-text-secondary: #334155;
-  --color-text-muted: #64748b;
-  --color-text-subtle: #94a3b8;
-  --color-text-inverse: #f8fafc;
-  --color-text-link: #2563eb;
   --color-text-disabled: #94a3b8;
-  --color-bg-default: #ffffff;
-  --color-bg-subtle: #f8fafc;
-  --color-bg-muted: #f1f5f9;
-  --color-bg-raised: #ffffff;
-  --color-bg-inverse: #0f172a;
-  --color-border-default: #e2e8f0;
-  --color-border-subtle: #f1f5f9;
-  --color-border-strong: #94a3b8;
-  --color-border-inverse: #334155;
   --color-ring-default: #4099f1;
   --color-ring-offset: #ffffff;
   --color-chart-1: #4099f1;
@@ -615,13 +580,13 @@
   --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
   --radius-none: 0px;
-  --radius-xs: 2px;
-  --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-  --radius-xl: 16px;
-  --radius-2xl: 24px;
-  --radius-3xl: 32px;
+  --radius-xs: 0.125rem;
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+  --radius-2xl: 1.5rem;
+  --radius-3xl: 2rem;
   --radius-full: 9999px;
   --shadow-xs: 0 1px 2px 0 rgba(0,0,0,0.05);
   --shadow-sm: 0 1px 3px 0 rgba(0,0,0,0.10), 0 1px 2px -1px rgba(0,0,0,0.10);
@@ -637,16 +602,16 @@
   --shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px #4099f1;
   --shadow-lift: 0 4px 12px -2px rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.08);
   --shape-control: 9999px; /** Capsule: Button, IconButton, Chip, SegmentedControl, Switch, Badge */
-  --shape-field: 12px; /** Input, Select, Textarea, Combobox */
-  --shape-container: 16px; /** Card, Popover, Menu, Toast */
-  --shape-overlay: 24px; /** Dialog, Sheet, CommandPalette */
-  --shape-tooltip: 8px; /** Tooltip, Kbd */
-  --shape-min: 4px; /** Floor for concentric inner radii: max(min, outer - padding) */
-  --size-control-xs: 24px;
-  --size-control-sm: 32px;
-  --size-control-md: 40px;
-  --size-control-lg: 48px;
-  --size-control-xl: 56px;
+  --shape-field: 0.75rem; /** Input, Select, Textarea, Combobox */
+  --shape-container: 1rem; /** Card, Popover, Menu, Toast */
+  --shape-overlay: 1.5rem; /** Dialog, Sheet, CommandPalette */
+  --shape-tooltip: 0.5rem; /** Tooltip, Kbd */
+  --shape-min: 0.25rem; /** Floor for concentric inner radii: max(min, outer - padding) */
+  --size-control-xs: 1.5rem;
+  --size-control-sm: 2rem;
+  --size-control-md: 2.5rem;
+  --size-control-lg: 3rem;
+  --size-control-xl: 3.5rem;
   --size-icon-xs: 12px;
   --size-icon-sm: 16px;
   --size-icon-md: 20px;
@@ -661,33 +626,33 @@
   --size-nav-sidebar: 256px;
   --size-nav-sidebar-collapsed: 64px;
   --spacing-0: 0px;
-  --spacing-1: 4px;
-  --spacing-2: 8px;
-  --spacing-3: 12px;
-  --spacing-4: 16px;
-  --spacing-5: 20px;
-  --spacing-6: 24px;
-  --spacing-7: 28px;
-  --spacing-8: 32px;
-  --spacing-9: 36px;
-  --spacing-10: 40px;
-  --spacing-11: 44px;
-  --spacing-12: 48px;
-  --spacing-14: 56px;
-  --spacing-16: 64px;
-  --spacing-20: 80px;
-  --spacing-24: 96px;
-  --spacing-28: 112px;
-  --spacing-32: 128px;
-  --spacing-40: 160px;
-  --spacing-48: 192px;
-  --spacing-56: 224px;
-  --spacing-64: 256px;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.25rem;
+  --spacing-6: 1.5rem;
+  --spacing-7: 1.75rem;
+  --spacing-8: 2rem;
+  --spacing-9: 2.25rem;
+  --spacing-10: 2.5rem;
+  --spacing-11: 2.75rem;
+  --spacing-12: 3rem;
+  --spacing-14: 3.5rem;
+  --spacing-16: 4rem;
+  --spacing-20: 5rem;
+  --spacing-24: 6rem;
+  --spacing-28: 7rem;
+  --spacing-32: 8rem;
+  --spacing-40: 10rem;
+  --spacing-48: 12rem;
+  --spacing-56: 14rem;
+  --spacing-64: 16rem;
   --spacing-px: 1px;
-  --spacing-0-5: 2px;
-  --spacing-1-5: 6px;
-  --spacing-2-5: 10px;
-  --spacing-3-5: 14px;
+  --spacing-0-5: 0.125rem;
+  --spacing-1-5: 0.375rem;
+  --spacing-2-5: 0.625rem;
+  --spacing-3-5: 0.875rem;
   --container-sm: 640px;
   --container-md: 768px;
   --container-lg: 1024px;
@@ -757,64 +722,64 @@
   --text-code-lineHeight: 1.6;
   --text-code-letterSpacing: 0;
   --text-code-weight: 400;
-  --type-display-lg-size: 56px;
-  --type-display-lg-lineHeight: 60px;
+  --type-display-lg-size: 3.5rem;
+  --type-display-lg-lineHeight: 3.75rem;
   --type-display-lg-letterSpacing: -0.03em;
   --type-display-lg-weight: 700;
-  --type-display-md-size: 44px;
-  --type-display-md-lineHeight: 48px;
+  --type-display-md-size: 2.75rem;
+  --type-display-md-lineHeight: 3rem;
   --type-display-md-letterSpacing: -0.025em;
   --type-display-md-weight: 700;
-  --type-display-sm-size: 36px;
-  --type-display-sm-lineHeight: 40px;
+  --type-display-sm-size: 2.25rem;
+  --type-display-sm-lineHeight: 2.5rem;
   --type-display-sm-letterSpacing: -0.02em;
   --type-display-sm-weight: 700;
-  --type-headline-lg-size: 32px;
-  --type-headline-lg-lineHeight: 38px;
+  --type-headline-lg-size: 2rem;
+  --type-headline-lg-lineHeight: 2.375rem;
   --type-headline-lg-letterSpacing: -0.02em;
   --type-headline-lg-weight: 600;
-  --type-headline-md-size: 28px;
-  --type-headline-md-lineHeight: 34px;
+  --type-headline-md-size: 1.75rem;
+  --type-headline-md-lineHeight: 2.125rem;
   --type-headline-md-letterSpacing: -0.015em;
   --type-headline-md-weight: 600;
-  --type-headline-sm-size: 24px;
-  --type-headline-sm-lineHeight: 30px;
+  --type-headline-sm-size: 1.5rem;
+  --type-headline-sm-lineHeight: 1.875rem;
   --type-headline-sm-letterSpacing: -0.01em;
   --type-headline-sm-weight: 600;
-  --type-title-lg-size: 20px;
-  --type-title-lg-lineHeight: 28px;
+  --type-title-lg-size: 1.25rem;
+  --type-title-lg-lineHeight: 1.75rem;
   --type-title-lg-letterSpacing: -0.01em;
   --type-title-lg-weight: 600;
-  --type-title-md-size: 16px;
-  --type-title-md-lineHeight: 24px;
+  --type-title-md-size: 1rem;
+  --type-title-md-lineHeight: 1.5rem;
   --type-title-md-letterSpacing: -0.005em;
   --type-title-md-weight: 600;
-  --type-title-sm-size: 14px;
-  --type-title-sm-lineHeight: 20px;
+  --type-title-sm-size: 0.875rem;
+  --type-title-sm-lineHeight: 1.25rem;
   --type-title-sm-letterSpacing: 0em;
   --type-title-sm-weight: 600;
-  --type-body-lg-size: 18px;
-  --type-body-lg-lineHeight: 28px;
+  --type-body-lg-size: 1.125rem;
+  --type-body-lg-lineHeight: 1.75rem;
   --type-body-lg-letterSpacing: -0.011em;
   --type-body-lg-weight: 400;
-  --type-body-md-size: 16px;
-  --type-body-md-lineHeight: 24px;
+  --type-body-md-size: 1rem;
+  --type-body-md-lineHeight: 1.5rem;
   --type-body-md-letterSpacing: -0.011em;
   --type-body-md-weight: 400;
-  --type-body-sm-size: 14px;
-  --type-body-sm-lineHeight: 20px;
+  --type-body-sm-size: 0.875rem;
+  --type-body-sm-lineHeight: 1.25rem;
   --type-body-sm-letterSpacing: -0.006em;
   --type-body-sm-weight: 400;
-  --type-label-lg-size: 14px;
-  --type-label-lg-lineHeight: 20px;
+  --type-label-lg-size: 0.875rem;
+  --type-label-lg-lineHeight: 1.25rem;
   --type-label-lg-letterSpacing: 0em;
   --type-label-lg-weight: 500;
-  --type-label-md-size: 13px;
-  --type-label-md-lineHeight: 18px;
+  --type-label-md-size: 0.8125rem;
+  --type-label-md-lineHeight: 1.125rem;
   --type-label-md-letterSpacing: 0em;
   --type-label-md-weight: 500;
-  --type-label-sm-size: 12px;
-  --type-label-sm-lineHeight: 16px;
+  --type-label-sm-size: 0.75rem;
+  --type-label-sm-lineHeight: 1rem;
   --type-label-sm-letterSpacing: 0.01em;
   --type-label-sm-weight: 500;
   --z-hide: -1;

package/dist/js/generated/tokens.d.ts

@@ -557,59 +557,10 @@ export declare const tokens: {
         };
         readonly surface: {
             readonly warm: "#fefce8";
-            readonly muted: "#f8fafc";
-            readonly raised: "#ffffff";
-            readonly sunken: "#f1f5f9";
-            readonly inverse: "#0f172a";
-        };
-        readonly semantic: {
-            readonly success: {
-                readonly default: "#10b981";
-                readonly bg: "#ecfdf5";
-                readonly border: "#a7f3d0";
-                readonly strong: "#047857";
-            };
-            readonly error: {
-                readonly default: "#ef4444";
-                readonly bg: "#fef2f2";
-                readonly border: "#fecaca";
-                readonly strong: "#b91c1c";
-            };
-            readonly warning: {
-                readonly default: "#f59e0b";
-                readonly bg: "#fffbeb";
-                readonly border: "#fde68a";
-                readonly strong: "#b45309";
-            };
-            readonly info: {
-                readonly default: "#4099f1";
-                readonly bg: "#eff6ff";
-                readonly border: "#bfdbfe";
-                readonly strong: "#1d4ed8";
-            };
         };
         readonly text: {
-            readonly primary: "#0f172a";
-            readonly secondary: "#334155";
-            readonly muted: "#64748b";
-            readonly subtle: "#94a3b8";
-            readonly inverse: "#f8fafc";
-            readonly link: "#2563eb";
             readonly disabled: "#94a3b8";
         };
-        readonly bg: {
-            readonly default: "#ffffff";
-            readonly subtle: "#f8fafc";
-            readonly muted: "#f1f5f9";
-            readonly raised: "#ffffff";
-            readonly inverse: "#0f172a";
-        };
-        readonly border: {
-            readonly default: "#e2e8f0";
-            readonly subtle: "#f1f5f9";
-            readonly strong: "#94a3b8";
-            readonly inverse: "#334155";
-        };
         readonly ring: {
             readonly default: "#4099f1";
             readonly offset: "#ffffff";

package/dist/js/generated/tokens.js

@@ -558,60 +558,11 @@ export const tokens = {
             "1000": "#000000"
         },
         "surface": {
-            "warm": "#fefce8",
-            "muted": "#f8fafc",
-            "raised": "#ffffff",
-            "sunken": "#f1f5f9",
-            "inverse": "#0f172a"
-        },
-        "semantic": {
-            "success": {
-                "default": "#10b981",
-                "bg": "#ecfdf5",
-                "border": "#a7f3d0",
-                "strong": "#047857"
-            },
-            "error": {
-                "default": "#ef4444",
-                "bg": "#fef2f2",
-                "border": "#fecaca",
-                "strong": "#b91c1c"
-            },
-            "warning": {
-                "default": "#f59e0b",
-                "bg": "#fffbeb",
-                "border": "#fde68a",
-                "strong": "#b45309"
-            },
-            "info": {
-                "default": "#4099f1",
-                "bg": "#eff6ff",
-                "border": "#bfdbfe",
-                "strong": "#1d4ed8"
-            }
+            "warm": "#fefce8"
         },
         "text": {
-            "primary": "#0f172a",
-            "secondary": "#334155",
-            "muted": "#64748b",
-            "subtle": "#94a3b8",
-            "inverse": "#f8fafc",
-            "link": "#2563eb",
             "disabled": "#94a3b8"
         },
-        "bg": {
-            "default": "#ffffff",
-            "subtle": "#f8fafc",
-            "muted": "#f1f5f9",
-            "raised": "#ffffff",
-            "inverse": "#0f172a"
-        },
-        "border": {
-            "default": "#e2e8f0",
-            "subtle": "#f1f5f9",
-            "strong": "#94a3b8",
-            "inverse": "#334155"
-        },
         "ring": {
             "default": "#4099f1",
             "offset": "#ffffff"

package/dist/json/tokens.json

@@ -511,42 +511,7 @@
   "color-neutral-950": "#080d19",
   "color-neutral-1000": "#000000",
   "color-surface-warm": "#fefce8",
-  "color-surface-muted": "#f8fafc",
-  "color-surface-raised": "#ffffff",
-  "color-surface-sunken": "#f1f5f9",
-  "color-surface-inverse": "#0f172a",
-  "color-semantic-success-default": "#10b981",
-  "color-semantic-success-bg": "#ecfdf5",
-  "color-semantic-success-border": "#a7f3d0",
-  "color-semantic-success-strong": "#047857",
-  "color-semantic-error-default": "#ef4444",
-  "color-semantic-error-bg": "#fef2f2",
-  "color-semantic-error-border": "#fecaca",
-  "color-semantic-error-strong": "#b91c1c",
-  "color-semantic-warning-default": "#f59e0b",
-  "color-semantic-warning-bg": "#fffbeb",
-  "color-semantic-warning-border": "#fde68a",
-  "color-semantic-warning-strong": "#b45309",
-  "color-semantic-info-default": "#4099f1",
-  "color-semantic-info-bg": "#eff6ff",
-  "color-semantic-info-border": "#bfdbfe",
-  "color-semantic-info-strong": "#1d4ed8",
-  "color-text-primary": "#0f172a",
-  "color-text-secondary": "#334155",
-  "color-text-muted": "#64748b",
-  "color-text-subtle": "#94a3b8",
-  "color-text-inverse": "#f8fafc",
-  "color-text-link": "#2563eb",
   "color-text-disabled": "#94a3b8",
-  "color-bg-default": "#ffffff",
-  "color-bg-subtle": "#f8fafc",
-  "color-bg-muted": "#f1f5f9",
-  "color-bg-raised": "#ffffff",
-  "color-bg-inverse": "#0f172a",
-  "color-border-default": "#e2e8f0",
-  "color-border-subtle": "#f1f5f9",
-  "color-border-strong": "#94a3b8",
-  "color-border-inverse": "#334155",
   "color-ring-default": "#4099f1",
   "color-ring-offset": "#ffffff",
   "color-chart-1": "#4099f1",

package/dist/tailwind/preset.js

@@ -45,11 +45,7 @@ const preset = {
         "founderub-container": "var(--color-founderub-container)",
         "on-founderub-container": "var(--color-on-founderub-container)",
         "surface": {
-          "warm": "var(--color-surface-warm)",
-          "muted": "var(--color-surface-muted)",
-          "raised": "var(--color-surface-raised)",
-          "sunken": "var(--color-surface-sunken)",
-          "inverse": "var(--color-surface-inverse)"
+          "warm": "var(--color-surface-warm)"
         },
         "surface-dim": "var(--color-surface-dim)",
         "surface-bright": "var(--color-surface-bright)",
@@ -627,54 +623,9 @@ const preset = {
           "950": "var(--color-neutral-950)",
           "1000": "var(--color-neutral-1000)"
         },
-        "semantic": {
-          "success": {
-            "default": "var(--color-semantic-success-default)",
-            "bg": "var(--color-semantic-success-bg)",
-            "border": "var(--color-semantic-success-border)",
-            "strong": "var(--color-semantic-success-strong)"
-          },
-          "error": {
-            "default": "var(--color-semantic-error-default)",
-            "bg": "var(--color-semantic-error-bg)",
-            "border": "var(--color-semantic-error-border)",
-            "strong": "var(--color-semantic-error-strong)"
-          },
-          "warning": {
-            "default": "var(--color-semantic-warning-default)",
-            "bg": "var(--color-semantic-warning-bg)",
-            "border": "var(--color-semantic-warning-border)",
-            "strong": "var(--color-semantic-warning-strong)"
-          },
-          "info": {
-            "default": "var(--color-semantic-info-default)",
-            "bg": "var(--color-semantic-info-bg)",
-            "border": "var(--color-semantic-info-border)",
-            "strong": "var(--color-semantic-info-strong)"
-          }
-        },
         "text": {
-          "primary": "var(--color-text-primary)",
-          "secondary": "var(--color-text-secondary)",
-          "muted": "var(--color-text-muted)",
-          "subtle": "var(--color-text-subtle)",
-          "inverse": "var(--color-text-inverse)",
-          "link": "var(--color-text-link)",
           "disabled": "var(--color-text-disabled)"
         },
-        "bg": {
-          "default": "var(--color-bg-default)",
-          "subtle": "var(--color-bg-subtle)",
-          "muted": "var(--color-bg-muted)",
-          "raised": "var(--color-bg-raised)",
-          "inverse": "var(--color-bg-inverse)"
-        },
-        "border": {
-          "default": "var(--color-border-default)",
-          "subtle": "var(--color-border-subtle)",
-          "strong": "var(--color-border-strong)",
-          "inverse": "var(--color-border-inverse)"
-        },
         "ring": {
           "default": "var(--color-ring-default)",
           "offset": "var(--color-ring-offset)"

package/dist/tailwind/theme.css

@@ -43,10 +43,6 @@
   --color-founderub-container: var(--color-founderub-container);
   --color-on-founderub-container: var(--color-on-founderub-container);
   --color-surface-warm: var(--color-surface-warm);
-  --color-surface-muted: var(--color-surface-muted);
-  --color-surface-raised: var(--color-surface-raised);
-  --color-surface-sunken: var(--color-surface-sunken);
-  --color-surface-inverse: var(--color-surface-inverse);
   --color-surface-dim: var(--color-surface-dim);
   --color-surface-bright: var(--color-surface-bright);
   --color-surface-container-lowest: var(--color-surface-container-lowest);
@@ -579,38 +575,7 @@
   --color-neutral-900: var(--color-neutral-900);
   --color-neutral-950: var(--color-neutral-950);
   --color-neutral-1000: var(--color-neutral-1000);
-  --color-semantic-success-default: var(--color-semantic-success-default);
-  --color-semantic-success-bg: var(--color-semantic-success-bg);
-  --color-semantic-success-border: var(--color-semantic-success-border);
-  --color-semantic-success-strong: var(--color-semantic-success-strong);
-  --color-semantic-error-default: var(--color-semantic-error-default);
-  --color-semantic-error-bg: var(--color-semantic-error-bg);
-  --color-semantic-error-border: var(--color-semantic-error-border);
-  --color-semantic-error-strong: var(--color-semantic-error-strong);
-  --color-semantic-warning-default: var(--color-semantic-warning-default);
-  --color-semantic-warning-bg: var(--color-semantic-warning-bg);
-  --color-semantic-warning-border: var(--color-semantic-warning-border);
-  --color-semantic-warning-strong: var(--color-semantic-warning-strong);
-  --color-semantic-info-default: var(--color-semantic-info-default);
-  --color-semantic-info-bg: var(--color-semantic-info-bg);
-  --color-semantic-info-border: var(--color-semantic-info-border);
-  --color-semantic-info-strong: var(--color-semantic-info-strong);
-  --color-text-primary: var(--color-text-primary);
-  --color-text-secondary: var(--color-text-secondary);
-  --color-text-muted: var(--color-text-muted);
-  --color-text-subtle: var(--color-text-subtle);
-  --color-text-inverse: var(--color-text-inverse);
-  --color-text-link: var(--color-text-link);
   --color-text-disabled: var(--color-text-disabled);
-  --color-bg-default: var(--color-bg-default);
-  --color-bg-subtle: var(--color-bg-subtle);
-  --color-bg-muted: var(--color-bg-muted);
-  --color-bg-raised: var(--color-bg-raised);
-  --color-bg-inverse: var(--color-bg-inverse);
-  --color-border-default: var(--color-border-default);
-  --color-border-subtle: var(--color-border-subtle);
-  --color-border-strong: var(--color-border-strong);
-  --color-border-inverse: var(--color-border-inverse);
   --color-ring-default: var(--color-ring-default);
   --color-ring-offset: var(--color-ring-offset);
   --color-chart-1: var(--color-chart-1);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nexub/tokens",
-  "version": "2.8.0",
+  "version": "3.0.0",
   "description": "Design tokens for Nexub Design System — colours, typography, spacing, radii, shadows, and motion as CSS variables, Tailwind presets and React Native objects.",
   "type": "module",
   "license": "MIT",