@tangle-network/ui 11.2.3 → 11.2.4

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @tangle-network/ui
 
+## 11.2.4
+
+### Patch Changes
+
+- 2088fb9: Retune the token spine to a neutral-grey surface ladder with indigo as trim rather than as field, in both themes. Surfaces separate by their own fill so a card, a nested panel and an overlay each read as a distinct plane, and the canvas sits off pure black so long reading sessions land away from the glare end of the range.
+
+  Faint text in `Input`, `Textarea`, `StatCard` and `TerminalLine` now takes a dedicated `--text-dim` token instead of a faded stronger one. A translucent foreground renders as its colour composited over the plane behind it, so those hints, subtitles and timestamps measured differently on a card than on the canvas and fell under the 4.5:1 floor on both.
+
+  **Worth a look after upgrading:** in dark mode `--sidebar-background` is now one step BELOW the canvas rather than above it, so the nav reads as chrome the content sits in front of instead of as another raised card. Apps that composited their own surfaces on top of the sidebar assuming it was the lighter plane should give that area a visual pass. Light mode is unchanged — the sidebar is still paper on a grey canvas.
+
 ## 11.2.3
 
 ### Patch Changes

package/dist/{chunk-XZFJAF6G.js → chunk-HSMVDKL3.js}

@@ -163,7 +163,7 @@ var Input = React2.forwardRef(
       ),
       input,
       error && /* @__PURE__ */ jsx2("p", { className: "text-[var(--surface-danger-text)] text-sm font-medium", children: error }),
-      hint && !error && /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground/70 text-sm", children: hint })
+      hint && !error && /* @__PURE__ */ jsx2("p", { className: "text-[var(--text-dim)] text-sm", children: hint })
     ] });
   }
 );
@@ -203,7 +203,7 @@ var Textarea = React2.forwardRef(
       ),
       textarea,
       error && /* @__PURE__ */ jsx2("p", { className: "text-[var(--surface-danger-text)] text-sm", children: error }),
-      hint && !error && /* @__PURE__ */ jsx2("p", { className: "text-muted-foreground/70 text-sm", children: hint })
+      hint && !error && /* @__PURE__ */ jsx2("p", { className: "text-[var(--text-dim)] text-sm", children: hint })
     ] });
   }
 );
@@ -755,7 +755,7 @@ var StatCard = React10.forwardRef(
           /* @__PURE__ */ jsxs9("div", { className: "space-y-1", children: [
             /* @__PURE__ */ jsx11("p", { className: "text-muted-foreground text-sm", children: title }),
             /* @__PURE__ */ jsx11("p", { className: "font-bold text-3xl tracking-tight", children: value }),
-            subtitle && /* @__PURE__ */ jsx11("p", { className: "text-muted-foreground opacity-70 text-xs", children: subtitle }),
+            subtitle && /* @__PURE__ */ jsx11("p", { className: "text-[var(--text-dim)] text-xs", children: subtitle }),
             trend && trendStatus && /* @__PURE__ */ jsxs9(
               "div",
               {
@@ -872,7 +872,7 @@ var TerminalLine = React11.forwardRef(
         children: [
           (type === "input" || type === "command") && /* @__PURE__ */ jsx12("span", { className: "shrink-0 select-none text-[var(--surface-success-text)]", children: prompt }),
           type === "thinking" && /* @__PURE__ */ jsx12("span", { className: "shrink-0 select-none", children: "..." }),
-          timestamp && /* @__PURE__ */ jsxs10("span", { className: "shrink-0 select-none text-muted-foreground opacity-50", children: [
+          timestamp && /* @__PURE__ */ jsxs10("span", { className: "shrink-0 select-none text-[var(--text-dim)]", children: [
             "[",
             timestamp,
             "]"

package/dist/index.js

@@ -109,7 +109,7 @@ import {
   UploadProgress,
   useTheme,
   useToast
-} from "./chunk-XZFJAF6G.js";
+} from "./chunk-HSMVDKL3.js";
 import {
   Avatar,
   AvatarFallback,

package/dist/primitives.js

@@ -44,7 +44,7 @@ import {
   UploadProgress,
   useTheme,
   useToast
-} from "./chunk-XZFJAF6G.js";
+} from "./chunk-HSMVDKL3.js";
 import {
   Avatar,
   AvatarFallback,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.2.3",
+  "version": "11.2.4",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -141,7 +141,7 @@
     "react-dom": "^18 || ^19",
     "react-router": "^7 || ^8",
     "yjs": "^13.6.0",
-    "@tangle-network/brand": "^1.1.0"
+    "@tangle-network/brand": "^1.3.0"
   },
   "peerDependenciesMeta": {
     "@nanostores/react": {

package/src/primitives/faint-text.test.tsx

@@ -0,0 +1,127 @@
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import { Input, Textarea } from "./input"
+import { StatCard } from "./stat-card"
+import { TerminalLine } from "./terminal-display"
+
+/**
+ * The quietest line in each primitive — a field hint, a stat subtitle, a log
+ * timestamp — must take its colour from a TOKEN, never from a faded stronger
+ * one.
+ *
+ * A translucent foreground does not render the colour it names: it renders that
+ * colour composited over whatever plane is behind it. So `text-muted-foreground/70`
+ * measures one ratio on a card and a different one on the canvas, and the same
+ * markup is legible in one place and not in another. That is how these three
+ * landed at 3.65:1, 2.91:1 and 3.4:1 while looking, in the source, like they had
+ * been styled deliberately.
+ *
+ * These assert the RULE rather than the current class string — the point is that
+ * faint text carries no alpha, not that it carries one specific token today.
+ */
+
+/**
+ * A class with its variant chain removed: `dark:hover:text-white/50` → `text-white/50`.
+ *
+ * Split on the colons that separate variants, which are the ones at bracket
+ * depth zero — an arbitrary value carries its own (`text-[color:var(--x)]`,
+ * `supports-[display:grid]:`) and splitting on those would mangle the utility.
+ */
+function bareUtility(cls: string): string {
+  let depth = 0
+  let start = 0
+  for (let i = 0; i < cls.length; i++) {
+    const c = cls[i]
+    if (c === "[") depth++
+    else if (c === "]") depth--
+    else if (c === ":" && depth === 0) start = i + 1
+  }
+  return cls.slice(start)
+}
+
+/** Colour utilities, where a trailing `/NN` is an alpha modifier rather than a fraction. */
+const COLOUR = "text|bg|border|ring|outline|decoration|placeholder|caret|accent|fill|stroke|divide|from|via|to|shadow"
+/** `text-white/70`, `bg-card/60`, `text-[var(--x)]/40`. */
+const ALPHA_MODIFIER = new RegExp(`^(?:${COLOUR})-.+/\\d{1,3}$`)
+/** `opacity-50` — the same fade by another route. */
+const OPACITY_UTILITY = /^opacity-\d{1,3}$/
+
+function expectSolidColour(el: HTMLElement | null, what: string) {
+  expect(el, `${what} should render`).not.toBeNull()
+  // Per class, not across the whole string: a variant prefix has no whitespace
+  // in it, so a single regex over the joined list never sees where one class
+  // ends — and `dark:text-white/50` slips past a pattern anchored on spaces.
+  const faded = (el?.className ?? "")
+    .split(/\s+/)
+    .filter(Boolean)
+    .filter((cls) => {
+      const bare = bareUtility(cls)
+      return ALPHA_MODIFIER.test(bare) || OPACITY_UTILITY.test(bare)
+    })
+  expect(faded, `${what} must take a token, not a faded colour`).toEqual([])
+}
+
+describe("the fade detector itself", () => {
+  // The guard below is only worth as much as this table. An earlier version
+  // anchored on whitespace and so never saw a variant prefix — `dark:text-white/50`
+  // read as clean, which is the exact mistake the guard exists to catch.
+  const FADED = [
+    "text-muted-foreground/70",
+    "text-[var(--text-dim)]/70",
+    "dark:text-white/50",
+    "hover:text-muted-foreground/70",
+    "group-hover:text-foreground/40",
+    "md:bg-card/60",
+    "supports-[display:grid]:text-white/50",
+    "opacity-50",
+    "hover:opacity-50",
+  ]
+  const SOLID = [
+    "text-[var(--text-dim)]",
+    "text-sm",
+    "text-muted-foreground",
+    "dark:text-white",
+    // A slash that is a FRACTION, not an alpha modifier — must not trip the guard.
+    "w-1/2",
+    "basis-1/3",
+    // A colon inside an arbitrary value, which must survive variant-stripping.
+    "text-[color:var(--text-dim)]",
+  ]
+  const isFaded = (cls: string) =>
+    ALPHA_MODIFIER.test(bareUtility(cls)) || OPACITY_UTILITY.test(bareUtility(cls))
+
+  for (const cls of FADED) {
+    it(`catches ${cls}`, () => expect(isFaded(cls)).toBe(true))
+  }
+  for (const cls of SOLID) {
+    it(`allows ${cls}`, () => expect(isFaded(cls)).toBe(false))
+  }
+})
+
+describe("faint text is a token, not a faded one", () => {
+  it("Input renders its hint at full strength", () => {
+    render(<Input label="Name" hint="Shown on your public profile" />)
+    expectSolidColour(
+      screen.getByText("Shown on your public profile"),
+      "the Input hint",
+    )
+  })
+
+  it("Textarea renders its hint at full strength", () => {
+    render(<Textarea label="Bio" hint="Markdown is supported" />)
+    expectSolidColour(
+      screen.getByText("Markdown is supported"),
+      "the Textarea hint",
+    )
+  })
+
+  it("StatCard renders its subtitle at full strength", () => {
+    render(<StatCard title="Sandboxes" value={12} subtitle="up from 9" />)
+    expectSolidColour(screen.getByText("up from 9"), "the StatCard subtitle")
+  })
+
+  it("TerminalLine renders its timestamp at full strength", () => {
+    render(<TerminalLine timestamp="12:04:11">compiling</TerminalLine>)
+    expectSolidColour(screen.getByText("[12:04:11]"), "the TerminalLine timestamp")
+  })
+})

package/src/primitives/input.tsx

@@ -65,7 +65,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         {input}
         {error && <p className="text-[var(--surface-danger-text)] text-sm font-medium">{error}</p>}
         {hint && !error && (
-          <p className="text-muted-foreground/70 text-sm">{hint}</p>
+          <p className="text-[var(--text-dim)] text-sm">{hint}</p>
         )}
       </div>
     );
@@ -125,7 +125,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         {textarea}
         {error && <p className="text-[var(--surface-danger-text)] text-sm">{error}</p>}
         {hint && !error && (
-          <p className="text-muted-foreground/70 text-sm">{hint}</p>
+          <p className="text-[var(--text-dim)] text-sm">{hint}</p>
         )}
       </div>
     );

package/src/primitives/stat-card.tsx

@@ -58,8 +58,12 @@ const StatCard = React.forwardRef<HTMLDivElement, StatCardProps>(
           <div className="space-y-1">
             <p className="text-muted-foreground text-sm">{title}</p>
             <p className="font-bold text-3xl tracking-tight">{value}</p>
+            {/* A token, never `opacity-70` over the muted tone: a translucent
+                foreground renders as the token COMPOSITED over whatever plane sits
+                behind it, so the same class lands a different colour — and a
+                different contrast ratio — on a card than on the canvas. */}
             {subtitle && (
-              <p className="text-muted-foreground opacity-70 text-xs">{subtitle}</p>
+              <p className="text-[var(--text-dim)] text-xs">{subtitle}</p>
             )}
             {trend && trendStatus && (
               <div

package/src/primitives/terminal-display.tsx

@@ -113,7 +113,7 @@ const TerminalLine = React.forwardRef<HTMLDivElement, TerminalLineProps>(
           <span className="shrink-0 select-none">...</span>
         )}
         {timestamp && (
-          <span className="shrink-0 select-none text-muted-foreground opacity-50">
+          <span className="shrink-0 select-none text-[var(--text-dim)]">
             [{timestamp}]
           </span>
         )}

package/src/stories/theme-showcase.stories.tsx

@@ -11,6 +11,7 @@ type Story = StoryObj;
 
 const THEMES: { name: string; theme?: string }[] = [
   { name: "Tangle (neutral)", theme: undefined }, // default :root dark
+  { name: "Tangle · dark", theme: "tangle-dark" }, // the same spine, named
   { name: "Tangle · light", theme: "tangle-light" },
   { name: "Aubergine (bazaar)", theme: "aubergine" },
   { name: "Aubergine · light", theme: "aubergine-light" },