@nebutra/tokens 0.1.3 → 2.0.0

package/styles.css

@@ -90,7 +90,7 @@
   --duration-reveal: 300ms; /** Content unveil: slide-in, expand, accordion, drawer */
   --duration-cinematic: 500ms; /** Hero-grade entrance: landing reveal, large delight moments */
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   --tracking-display: -0.04em; /** Hero H1 */
@@ -101,17 +101,15 @@
   --ring-hairline: inset 0 0 0 1px rgb(255 255 255 / 0.04); /** Etched-glass hairline (light mode value, dark mode override in themes/dark.json) */
   --overlay-faint: rgb(0 0 0 / 0.06); /** Light-mode faint overlay (6% black) */
   --font-sans:
-    var(--font-geist-sans), "Geist", var(--font-vivo-sans-sc, "vivo Sans SC"), "Noto Sans SC",
-    "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+    var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC",
+    "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
   --font-cn:
-    var(--font-geist-sans), "Geist", var(--font-vivo-sans-sc, "vivo Sans SC"), "Noto Sans SC",
-    "PingFang SC", "Microsoft YaHei", sans-serif; /** CJK-locale stack — same order as sans, minus the Latin-only system faces */
+    var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC",
+    "Microsoft YaHei", sans-serif; /** CJK-locale stack — same order as sans, minus the Latin-only system faces */
   --font-display:
-    var(--font-geist-sans), "Geist", var(--font-vivo-sans-sc, "vivo Sans SC"), "Noto Sans SC",
-    sans-serif;
+    var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), sans-serif;
   --font-heading:
-    var(--font-geist-sans), "Geist", var(--font-vivo-sans-sc, "vivo Sans SC"), "Noto Sans SC",
-    sans-serif;
+    var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), sans-serif;
   --font-mono:
     var(--font-geist-mono), "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
   --brand-primary: #0033fe; /** Brand primary — 云毓蓝 */
@@ -419,7 +417,7 @@
   --duration-reveal: 300ms; /** Content unveil: slide-in, expand, accordion, drawer */
   --duration-cinematic: 500ms; /** Hero-grade entrance: landing reveal, large delight moments */
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
   --tracking-display: -0.04em; /** Hero H1 */
@@ -432,17 +430,15 @@
     255 255 255 / 0.06
   ); /** Dark-mode faint overlay (6% white) — inverted from light */
   --font-sans:
-    var(--font-geist-sans), "Geist", var(--font-vivo-sans-sc, "vivo Sans SC"), "Noto Sans SC",
-    "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+    var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC",
+    "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
   --font-cn:
-    var(--font-geist-sans), "Geist", var(--font-vivo-sans-sc, "vivo Sans SC"), "Noto Sans SC",
-    "PingFang SC", "Microsoft YaHei", sans-serif; /** CJK-locale stack — same order as sans, minus the Latin-only system faces */
+    var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC",
+    "Microsoft YaHei", sans-serif; /** CJK-locale stack — same order as sans, minus the Latin-only system faces */
   --font-display:
-    var(--font-geist-sans), "Geist", var(--font-vivo-sans-sc, "vivo Sans SC"), "Noto Sans SC",
-    sans-serif;
+    var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), sans-serif;
   --font-heading:
-    var(--font-geist-sans), "Geist", var(--font-vivo-sans-sc, "vivo Sans SC"), "Noto Sans SC",
-    sans-serif;
+    var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), sans-serif;
   --font-mono:
     var(--font-geist-mono), "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
   --brand-primary: #5c7cfa; /** Dark-mode brand primary — the identity blue lifted to nebutra-blue-400 so it stays visible on dark surfaces. This is the identity alias, not the functional fill: the dark solid fill is --blue-9 (#396ae2, white label 4.85:1). The two are deliberately separate now that the VI hex is no longer pinned into ramp slot 9. */
@@ -834,6 +830,22 @@
   --radius-3xl: 1.5rem;
   --radius-full: 9999px;
 
+  /* Containers — the page-width contract from CLAUDE.md, as real utilities.
+     max-w-text (reading), max-w-content (pricing/blog), max-w-wide (feature bento, navbar).
+
+     These values also reach :root through the semantic layer, so var(--container-wide) keeps
+     working; what was missing was the Tailwind side. Without it there is no max-w-wide to reach
+     for, and 92 call sites across apps/** had typed max-w-wide instead — a decided number
+     living in a className, where changing the token cannot move it.
+
+     Literals rather than var(--container-wide): Tailwind emits an @theme entry into its own
+     layer, so a same-named reference becomes self-referential and survives only because the
+     semantic :root happens to come later in the cascade. Duplicating the number and pinning it
+     with a parity test is the honest trade — see design-tokens' container parity test. */
+  --container-text: 896px;
+  --container-content: 1152px;
+  --container-wide: 1400px;
+
   /* Shadows */
   --shadow-xs: var(--elevation-xs);
   --shadow-sm: var(--elevation-sm);
@@ -873,6 +885,7 @@
      (No backticks in this block — it is inside a JS template literal.) */
   --ease-in: var(--motion-ease-in);
   --ease-out: var(--motion-ease-out);
+  --ease-brand: var(--motion-ease-brand);
   --ease-in-out: var(--motion-ease-in-out);
   --ease-spring: var(--motion-ease-spring);
 
@@ -882,6 +895,20 @@
   --duration-reveal: var(--motion-duration-reveal);
   --duration-cinematic: var(--motion-duration-cinematic);
 
+  /* The same four rails on the namespace Tailwind reads for duration-*.
+     --duration-* is the variable other CSS consumes; the utility class is built
+     from --transition-duration-*, and only that one. Without these,
+     duration-micro and duration-reveal are class names that generate nothing:
+     they were in use in the component library and on the marketing site, and
+     every one of them silently fell back to the 150ms default. */
+  --transition-duration-micro: var(--motion-duration-micro);
+  --transition-duration-flow: var(--motion-duration-flow);
+  --transition-duration-reveal: var(--motion-duration-reveal);
+  --transition-duration-cinematic: var(--motion-duration-cinematic);
+
+  /* Likewise for ease-*: the utility namespace is --ease-* already, so the four
+     above are reachable as ease-brand / ease-spring without further mapping. */
+
   /* Spacing — DO NOT register --spacing-sm|md|lg|xl|2xl here.
      Tailwind v4 puts every --spacing-{key} on the shared size rail, so
      max-w-sm / max-w-2xl (and width/height/gap utilities with the same keys)
@@ -893,22 +920,20 @@
      --spacing-{step} alias. --spacing itself (0.25rem arithmetic base) stays
      untouched. See static/base.css. */
 
-  /* Font family — Geist keeps Latin + numerals, self-hosted vivo Sans SC takes
+  /* Font family — Geist keeps Latin + numerals, self-hosted Noto Sans SC takes
      CJK, system CJK faces behind it. Order is the design decision; see the
      fontFamily $description in tokens/core.json. Mirror of those tokens — keep
      the two in sync (verify:parity compares them). */
   --font-sans:
-    var(--font-geist-sans), "Geist", var(--font-vivo-sans-sc, "vivo Sans SC"), "Noto Sans SC",
-    "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+    var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC",
+    "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
   --font-cn:
-    var(--font-geist-sans), "Geist", var(--font-vivo-sans-sc, "vivo Sans SC"), "Noto Sans SC",
-    "PingFang SC", "Microsoft YaHei", sans-serif;
+    var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC",
+    "Microsoft YaHei", sans-serif;
   --font-display:
-    var(--font-geist-sans), "Geist", var(--font-vivo-sans-sc, "vivo Sans SC"), "Noto Sans SC",
-    sans-serif;
+    var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), sans-serif;
   --font-heading:
-    var(--font-geist-sans), "Geist", var(--font-vivo-sans-sc, "vivo Sans SC"), "Noto Sans SC",
-    sans-serif;
+    var(--font-geist-sans), "Geist", var(--font-noto-sans-sc, "Noto Sans SC"), sans-serif;
   --font-mono:
     var(--font-geist-mono), "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
 }
@@ -938,9 +963,71 @@
    ─────────────────────────────────────────────────────────── */
 :root {
   --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
-  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
+  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
   --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
   --motion-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  /* The signature: a long, strong deceleration — most of the distance is
+     covered in the first fifth of the time, then it settles. It has existed as
+     `brandEasing.brand` in @nebutra/brand since the motion language was
+     written, usable only from JS, so every CSS transition on every marketing
+     surface fell back to Tailwind's default curve instead. That default is
+     what "the hovers feel stiff" is: a near-linear ramp at 150ms. */
+  --motion-ease-brand: cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* ─── Category rail ──────────────────────────────────────────
+   Four accents for taxonomy — the monorepo tree's four lanes, and
+   anywhere else a small set of peers has to be told apart.
+
+   Derived, not picked. Hand-picking is how the file tree ended up
+   with fifteen hues across twenty-five rows, three of them reused
+   on unrelated rows: a colour that encodes nothing a reader can
+   learn and follows no design language.
+
+   Each accent is a position on the background→foreground axis,
+   tinted a quarter of the way toward the action fill rotated by
+   72°. Two axes, both always live:
+
+     • the position carries contrast. That axis is non-degenerate
+       in every language by definition — it is the axis that makes
+       body text readable — so a monochrome language still gets
+       four distinct tones. Vercel and Notion anchor on black,
+       where rotating hue returns the same colour four times.
+     • the rotation carries hue separation for the languages that
+       have chroma to give.
+
+   Two earlier constructions failed here and are worth naming.
+   Offsetting lightness from the anchor and clamping collapses when
+   the anchor already sits near the band edge — Raycast's fill is
+   near-white, so all four pinned to one value. A fixed lightness
+   ladder cannot serve both canvases: Raycast and GSAP are dark by
+   default in light mode, so the `.dark` class is not set and an
+   absolute ladder is upside down for them.
+
+   Measured across all seven languages plus factory: lowest contrast
+   3.50:1 against each canvas, closest pair 30/255 apart.
+   ─────────────────────────────────────────────────────────── */
+:root {
+  --category-1: color-mix(
+    in oklab,
+    color-mix(in oklab, hsl(var(--foreground)) 55%, hsl(var(--background))) 75%,
+    oklch(from hsl(var(--primary)) l c h)
+  );
+  --category-2: color-mix(
+    in oklab,
+    color-mix(in oklab, hsl(var(--foreground)) 67%, hsl(var(--background))) 75%,
+    oklch(from hsl(var(--primary)) l c calc(h + 72))
+  );
+  --category-3: color-mix(
+    in oklab,
+    color-mix(in oklab, hsl(var(--foreground)) 79%, hsl(var(--background))) 75%,
+    oklch(from hsl(var(--primary)) l c calc(h + 144))
+  );
+  --category-4: color-mix(
+    in oklab,
+    color-mix(in oklab, hsl(var(--foreground)) 91%, hsl(var(--background))) 75%,
+    oklch(from hsl(var(--primary)) l c calc(h + 216))
+  );
 }
 
 /* ─── Spacing source rail ────────────────────────────────────