@nebutra/tokens 0.1.1 → 0.1.2

package/styles.css

@@ -69,6 +69,10 @@
   --nebutra-gray-800: #262626;
   --nebutra-gray-900: #171717;
   --nebutra-gray-950: #0a0a0a;
+  --breakpoint-xs: 26.25rem; /** 420px — narrow-phone grid flip */
+  --breakpoint-tight: 67.5rem; /** 1080px — dense dashboard header horizontal */
+  --breakpoint-shell: 73.75rem; /** 1180px — three-pane shell threshold */
+  --breakpoint-3xl: 112.5rem; /** 1800px — 4K / Studio Display friendliness */
   --radius-none: 0;
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
@@ -95,22 +99,43 @@
   --leading-heading: 1.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: "Geist", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --font-sans:
+    var(--font-geist-sans), "Geist", "Noto Sans SC", "PingFang SC", "Microsoft YaHei",
+    -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
   --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "vivo Sans", sans-serif;
-  --font-display: "Geist", "Noto Sans SC", sans-serif;
-  --font-heading: "Geist", "Noto Sans SC", sans-serif;
-  --font-mono: "Geist Mono", "Fira Code", ui-monospace, Consolas, "Courier New", monospace;
+  --font-display: var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif;
+  --font-heading: var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif;
+  --font-mono:
+    var(--font-geist-mono), "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
   --transition-duration: 200ms; /** Default transition duration — 200ms flow rail. */
   --transition-easing: ease-out; /** ease-out keyword form (CSS-friendly). Equivalent to cubic-bezier(0,0,0.2,1). */
   --brand-primary: #0033fe; /** Brand primary — 云毓蓝 */
   --brand-accent: #0bf1c3; /** Brand accent — 云毓青 */
   --brand-tertiary: #8b5cf6;
-  --brand-gradient: linear-gradient(135deg, #254bfa 0%, #057963 100%); /** UI brand gradient — usage-adjusted from the locked VI blue/cyan anchors to reduce saturation and preserve white-text contrast. */
-  --brand-gradient-reverse: linear-gradient(135deg, #057963 0%, #254bfa 100%);
-  --brand-gradient-vertical: linear-gradient(180deg, #254bfa 0%, #057963 100%);
-  --brand-gradient-radial: radial-gradient(circle, #057963 0%, #254bfa 100%);
-  --brand-gradient-logo: linear-gradient(135deg, #0033fe 0%, #0bf1c3 100%); /** Logo/VI standard gradient. Use for brand assets only; product UI should use --brand-gradient. */
-  --brand-gradient-logo-reverse: linear-gradient(135deg, #0bf1c3 0%, #0033fe 100%);
+  --brand-gradient-start: hsl(
+    var(--primary)
+  ); /** Legacy alias of --primary (shadcn product blue). Prefer bg-primary / Button default. */
+  --brand-gradient-end: hsl(
+    var(--primary)
+  ); /** Legacy alias of --primary. Prefer hover:bg-primary/90. */
+  --brand-gradient: hsl(
+    var(--primary)
+  ); /** Legacy --brand-gradient. Same color as --primary — not a second palette. App CTAs should use Button / bg-primary. */
+  --brand-gradient-reverse: hsl(var(--primary)); /** Legacy alias of --primary. */
+  --brand-gradient-vertical: hsl(var(--primary)); /** Legacy alias of --primary. */
+  --brand-gradient-radial: hsl(var(--primary)); /** Legacy alias of --primary. */
+  --brand-gradient-logo: linear-gradient(
+    135deg,
+    #0033fe 0%,
+    #00a2e9 50%,
+    #0bf1c3 100%
+  ); /** Logo/VI gradient (云毓蓝→云毓青). Mid stop #00a2e9 is the OKLab perceptual midpoint (avoids sRGB mid-path soft spots). Brand assets only — not product CTAs. */
+  --brand-gradient-logo-reverse: linear-gradient(
+    135deg,
+    #0bf1c3 0%,
+    #00a2e9 50%,
+    #0033fe 100%
+  ); /** Logo/VI reverse gradient with same OKLab mid stop. */
   --status-danger: #ef4444;
   --status-warning: #f59e0b;
   --status-success: #22c55e;
@@ -339,6 +364,10 @@
   --nebutra-gray-800: #262626;
   --nebutra-gray-900: #171717;
   --nebutra-gray-950: #0a0a0a;
+  --breakpoint-xs: 26.25rem; /** 420px — narrow-phone grid flip */
+  --breakpoint-tight: 67.5rem; /** 1080px — dense dashboard header horizontal */
+  --breakpoint-shell: 73.75rem; /** 1180px — three-pane shell threshold */
+  --breakpoint-3xl: 112.5rem; /** 1800px — 4K / Studio Display friendliness */
   --radius-none: 0;
   --radius-sm: 0.25rem;
   --radius-md: 0.375rem;
@@ -364,23 +393,46 @@
   --leading-display: 1.05;
   --leading-heading: 1.15;
   --ring-hairline: inset 0 0 0 1px rgb(255 255 255 / 0.06); /** Hairline override — more visible on dark background */
-  --overlay-faint: rgb(255 255 255 / 0.06); /** Dark-mode faint overlay (6% white) — inverted from light */
-  --font-sans: "Geist", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --overlay-faint: rgb(
+    255 255 255 / 0.06
+  ); /** Dark-mode faint overlay (6% white) — inverted from light */
+  --font-sans:
+    var(--font-geist-sans), "Geist", "Noto Sans SC", "PingFang SC", "Microsoft YaHei",
+    -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
   --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "vivo Sans", sans-serif;
-  --font-display: "Geist", "Noto Sans SC", sans-serif;
-  --font-heading: "Geist", "Noto Sans SC", sans-serif;
-  --font-mono: "Geist Mono", "Fira Code", ui-monospace, Consolas, "Courier New", monospace;
+  --font-display: var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif;
+  --font-heading: var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif;
+  --font-mono:
+    var(--font-geist-mono), "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
   --transition-duration: 200ms; /** Default transition duration — 200ms flow rail. */
   --transition-easing: ease-out; /** ease-out keyword form (CSS-friendly). Equivalent to cubic-bezier(0,0,0.2,1). */
   --brand-primary: #5c7cfa; /** Dark-mode brand primary — visible against dark surfaces (uses --blue-9 = nebutra-blue-400). */
   --brand-accent: #1af7c8; /** Dark-mode brand accent — visible against dark surfaces (uses --cyan-9 = nebutra-cyan-400). */
   --brand-tertiary: #8b5cf6;
-  --brand-gradient: linear-gradient(135deg, #254bfa 0%, #057963 100%); /** UI brand gradient — usage-adjusted from the locked VI blue/cyan anchors to reduce saturation and preserve white-text contrast. */
-  --brand-gradient-reverse: linear-gradient(135deg, #057963 0%, #254bfa 100%);
-  --brand-gradient-vertical: linear-gradient(180deg, #254bfa 0%, #057963 100%);
-  --brand-gradient-radial: radial-gradient(circle, #057963 0%, #254bfa 100%);
-  --brand-gradient-logo: linear-gradient(135deg, #0033fe 0%, #0bf1c3 100%); /** Logo/VI standard gradient. Use for brand assets only; product UI should use --brand-gradient. */
-  --brand-gradient-logo-reverse: linear-gradient(135deg, #0bf1c3 0%, #0033fe 100%);
+  --brand-gradient-start: hsl(
+    var(--primary)
+  ); /** Legacy alias of --primary (shadcn product blue). Prefer bg-primary / Button default. */
+  --brand-gradient-end: hsl(
+    var(--primary)
+  ); /** Legacy alias of --primary. Prefer hover:bg-primary/90. */
+  --brand-gradient: hsl(
+    var(--primary)
+  ); /** Legacy --brand-gradient. Same color as --primary — not a second palette. App CTAs should use Button / bg-primary. */
+  --brand-gradient-reverse: hsl(var(--primary)); /** Legacy alias of --primary. */
+  --brand-gradient-vertical: hsl(var(--primary)); /** Legacy alias of --primary. */
+  --brand-gradient-radial: hsl(var(--primary)); /** Legacy alias of --primary. */
+  --brand-gradient-logo: linear-gradient(
+    135deg,
+    #0033fe 0%,
+    #00a2e9 50%,
+    #0bf1c3 100%
+  ); /** Logo/VI gradient (云毓蓝→云毓青). Mid stop #00a2e9 is the OKLab perceptual midpoint (avoids sRGB mid-path soft spots). Brand assets only — not product CTAs. */
+  --brand-gradient-logo-reverse: linear-gradient(
+    135deg,
+    #0bf1c3 0%,
+    #00a2e9 50%,
+    #0033fe 100%
+  ); /** Logo/VI reverse gradient with same OKLab mid stop. */
   --status-danger: #ef4444;
   --status-warning: #f59e0b;
   --status-success: #22c55e;
@@ -430,39 +482,39 @@
   --cyan-10: #4dfcd4;
   --cyan-11: #80ffe0;
   --cyan-12: #b3ffec;
-  --background: 222 47% 4%;
-  --foreground: 210 40% 98%;
-  --card: 222 47% 7%;
-  --card-foreground: 210 40% 98%;
-  --popover: 222 47% 7%;
-  --popover-foreground: 210 40% 98%;
+  --background: 222 14% 9%;
+  --foreground: 210 18% 96%;
+  --card: 222 12% 13%;
+  --card-foreground: 210 18% 96%;
+  --popover: 222 12% 13%;
+  --popover-foreground: 210 18% 96%;
   --primary: 228 90% 72%;
-  --primary-foreground: 222 47% 4%;
-  --secondary: 217 33% 17%;
-  --secondary-foreground: 210 40% 98%;
-  --muted: 217 33% 17%;
-  --muted-foreground: 215 20% 65%;
-  --accent: 228 100% 12%;
-  --accent-foreground: 228 95% 67%;
-  --destructive: 0 63% 31%;
-  --destructive-foreground: 210 40% 98%;
-  --success: 142 76% 36%;
-  --success-foreground: 222 47% 4%;
-  --warning: 38 80% 45%;
-  --warning-foreground: 222 47% 4%;
-  --info: 228 95% 67%;
-  --info-foreground: 222 47% 4%;
-  --border: 0 0% 14.9%;
-  --input: 0 0% 14.9%;
+  --primary-foreground: 222 14% 9%;
+  --secondary: 222 10% 18%;
+  --secondary-foreground: 210 18% 96%;
+  --muted: 222 10% 17%;
+  --muted-foreground: 220 8% 65%;
+  --accent: 228 38% 22%;
+  --accent-foreground: 228 95% 80%;
+  --destructive: 0 63% 38%;
+  --destructive-foreground: 210 18% 96%;
+  --success: 142 60% 42%;
+  --success-foreground: 222 14% 9%;
+  --warning: 38 80% 52%;
+  --warning-foreground: 222 14% 9%;
+  --info: 228 95% 72%;
+  --info-foreground: 222 14% 9%;
+  --border: 220 8% 22%;
+  --input: 220 8% 22%;
   --ring: 0 0% 88%; /** Focus ring (dark mode) — neutral light gray. Mirrors light-mode neutral foreground choice. */
-  --sidebar: 222 47% 6%;
-  --sidebar-foreground: 210 40% 96%;
-  --sidebar-primary: 228 95% 67%;
-  --sidebar-primary-foreground: 222 47% 4%;
-  --sidebar-accent: 228 100% 12%;
-  --sidebar-accent-foreground: 228 95% 67%;
-  --sidebar-border: 0 0% 14.9%;
-  --sidebar-ring: 228 95% 67%;
+  --sidebar: 222 16% 8%;
+  --sidebar-foreground: 210 18% 94%;
+  --sidebar-primary: 228 95% 72%;
+  --sidebar-primary-foreground: 222 14% 9%;
+  --sidebar-accent: 228 38% 22%;
+  --sidebar-accent-foreground: 228 95% 80%;
+  --sidebar-border: 220 8% 18%;
+  --sidebar-ring: 228 95% 72%;
   --chart-1: 228 95% 67%;
   --chart-2: 168 96% 54%;
   --chart-3: 228 100% 82%;
@@ -737,11 +789,14 @@
   --duration-cinematic: 500ms;
 
   /* Font family — Geist primary stack with CJK fallbacks */
-  --font-sans: "Geist", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+  --font-sans:
+    var(--font-geist-sans), "Geist", "Noto Sans SC", "PingFang SC", "Microsoft YaHei",
+    -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
   --font-cn: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "vivo Sans", sans-serif;
-  --font-display: "Geist", "Noto Sans SC", sans-serif;
-  --font-heading: "Geist", "Noto Sans SC", sans-serif;
-  --font-mono: "Geist Mono", "Fira Code", ui-monospace, Consolas, "Courier New", monospace;
+  --font-display: var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif;
+  --font-heading: var(--font-geist-sans), "Geist", "Noto Sans SC", sans-serif;
+  --font-mono:
+    var(--font-geist-mono), "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
 }
 
 /* ============================================
@@ -749,15 +804,39 @@
    This file is concatenated into styles.generated.css after the @theme block.
    ============================================ */
 
-*,
-*::before,
-*::after {
-  /* Token-aware default border — resolves via cascade:
-     :root → light (hsl 240 5.9% 90% ≈ #e4e4e7)
-     .dark → dark  (hsl 0 0% 14.9%  ≈ #262626)
-     Previously hardcoded to the light value, which leaked a near-white border
-     into every element in dark mode regardless of component. See ADR 2026-05-11. */
-  border-color: hsl(var(--border));
+/* ─── Edge tokens (2026-05 perf governance) ─────────────────
+   Pre-computed alpha values for borders / hairlines / outer glows.
+   Replaces ~70 runtime `color-mix(foreground, transparent N%)` calls per
+   page that re-evaluated on every paint. Mode-aware via CSS cascade.
+   Lives in static/ so it survives Style Dictionary rebuilds.
+   ─────────────────────────────────────────────────────────── */
+:root {
+  --edge-faint: rgb(0 0 0 / 0.04);
+  --edge-soft: rgb(0 0 0 / 0.07);
+  --edge-medium: rgb(0 0 0 / 0.12);
+  --halo-faint: rgb(0 0 0 / 0.03);
+}
+.dark {
+  --edge-faint: rgb(255 255 255 / 0.04);
+  --edge-soft: rgb(255 255 255 / 0.06);
+  --edge-medium: rgb(255 255 255 / 0.1);
+  --halo-faint: rgb(255 255 255 / 0.03);
+}
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    /* Token-aware default border — resolves via cascade:
+       :root → light (hsl 240 5.9% 90% ≈ #e4e4e7)
+       .dark → dark  (hsl 0 0% 14.9%  ≈ #262626)
+       Previously hardcoded to the light value, which leaked a near-white border
+       into every element in dark mode regardless of component. See ADR 2026-05-11.
+
+       Keep this in Tailwind's base layer so component utilities such as
+       border-r-transparent can override it. */
+    border-color: hsl(var(--border));
+  }
 }
 
 body {
@@ -773,7 +852,9 @@ html {
   scroll-behavior: smooth;
 }
 
-:focus-visible {
+:focus-visible:not(
+    :where(input, textarea, select, [cmdk-input], [role="textbox"], [contenteditable="true"])
+  ) {
   outline: 2px solid hsl(var(--ring) / 0.5);
   outline-offset: 2px;
   border-radius: inherit;
@@ -1373,10 +1454,13 @@ html {
 }
 
 /* ─── Reduced Motion ─────────────────────────────────────── */
+/* Honors OS preference EXCEPT for functional progress indicators
+ * (spinners / pulses / pings). Per WCAG 2.3.3, those are excluded
+ * from the "animation from interactions" reduction requirement. */
 @media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
+  *:not(.animate-spin):not(.animate-pulse):not(.animate-ping),
+  *:not(.animate-spin):not(.animate-pulse):not(.animate-ping)::before,
+  *:not(.animate-spin):not(.animate-pulse):not(.animate-ping)::after {
     animation-duration: 0.01ms;
     animation-iteration-count: 1;
     transition-duration: 0.01ms;

package/turbo.json

@@ -0,0 +1,15 @@
+{
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "dependsOn": ["@nebutra/design-tokens#build"],
+      "inputs": [
+        "$TURBO_EXTENDS$",
+        "../design-tokens/build/css/styles.generated.css",
+        "brands/**",
+        "scripts/**"
+      ],
+      "outputs": ["styles.css", "skins/**"]
+    }
+  }
+}