@tangle-network/ui 11.22.1 → 11.22.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @tangle-network/ui
 
+## 11.22.3
+
+### Patch Changes
+
+- 191de4b: Switch: draw the on state as an `--accent-text` track carrying a `bg-card` thumb. The `bg-primary` track measured 2.4:1 against the dark card and canvas, and its `bg-background` thumb 2.5:1 against the track, so a checked switch did not clear the 3:1 non-text floor in dark themes. Accent text clears 3:1 against the card and the canvas in every theme, which `@tangle-network/brand` now asserts per theme.
+
+## 11.22.2
+
+### Patch Changes
+
+- e78325b: Input, Textarea, Select and the terminal prompt draw placeholder text in `--text-dim`, the faintest text tier, instead of `muted-foreground`. An empty field's example text no longer looks like an entered value; `--text-dim` still clears 4.5:1 on the field well in both themes.
+
 ## 11.22.1
 
 ### Patch Changes

package/dist/primitives/input.js

@@ -7,7 +7,7 @@ import { cva } from "class-variance-authority";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/primitives/input.tsx
-const inputVariants = cva(cn("flex w-full rounded-lg border px-4 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm", fieldPresentation), {
+const inputVariants = cva(cn("flex w-full rounded-lg border px-4 py-2 text-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm", fieldPresentation), {
 	variants: {
 		variant: {
 			default: "",
@@ -78,7 +78,7 @@ const Textarea = React.forwardRef(({ className, variant: _variant, size = "defau
 	const errorId = error ? `${textareaId}-error` : void 0;
 	const textarea = /* @__PURE__ */ jsx("textarea", {
 		id: textareaId,
-		className: cn("flex min-h-[120px] w-full resize-y rounded-lg border px-4 py-3 text-sm", "placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-50", fieldPresentation, error && "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]", size === "compact" && "min-h-24 px-3 py-2", size === "touch" && "text-base", className),
+		className: cn("flex min-h-[120px] w-full resize-y rounded-lg border px-4 py-3 text-sm", "placeholder:text-[var(--text-dim)]", "disabled:cursor-not-allowed disabled:opacity-50", fieldPresentation, error && "border-[var(--surface-danger-border)] hover:border-[var(--surface-danger-border)] focus:border-[var(--focus-border-danger)] focus:ring-[var(--focus-halo-danger)]", size === "compact" && "min-h-24 px-3 py-2", size === "touch" && "text-base", className),
 		ref,
 		...props,
 		"aria-describedby": descriptionIds(describedBy, hintId, errorId),

package/dist/primitives/select.js

@@ -11,7 +11,7 @@ const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 const SelectTrigger = React.forwardRef(({ className, children, size = "default", ...props }, ref) => /* @__PURE__ */ jsxs(SelectPrimitive.Trigger, {
 	ref,
-	className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", fieldPresentation, "data-[placeholder]:text-muted-foreground [&>span]:min-w-0 [&>span]:text-left", "data-[state=open]:border-primary data-[state=open]:bg-[var(--accent-surface-strong)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform", size !== "default" && controlSizes[size], className),
+	className: cn("flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", fieldPresentation, "data-[placeholder]:text-[var(--text-dim)] [&>span]:min-w-0 [&>span]:text-left", "data-[state=open]:border-primary data-[state=open]:bg-[var(--accent-surface-strong)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform", size !== "default" && controlSizes[size], className),
 	...props,
 	children: [children, /* @__PURE__ */ jsx(SelectPrimitive.Icon, {
 		asChild: true,

package/dist/primitives/switch.js

@@ -6,10 +6,10 @@ import { jsx } from "react/jsx-runtime";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 //#region src/primitives/switch.tsx
 const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(SwitchPrimitives.Root, {
-	className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-[background-color,border-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-primary data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent", focusRing, className),
+	className: cn("peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-[background-color,border-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-[var(--accent-text)] data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent", focusRing, className),
 	...props,
 	ref,
-	children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-[translate,background-color] data-[state=checked]:translate-x-4 data-[state=checked]:bg-background data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-muted-foreground") })
+	children: /* @__PURE__ */ jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-[translate,background-color] data-[state=checked]:translate-x-4 data-[state=checked]:bg-card data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-muted-foreground") })
 }));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 //#endregion

package/dist/primitives/terminal-display.js

@@ -97,7 +97,7 @@ const TerminalInput = React.forwardRef(({ className, onSubmit, variant: _variant
 				value,
 				onChange: (e) => setValue(e.target.value),
 				onKeyDown: handleKeyDown,
-				className: "flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground",
+				className: "flex-1 bg-transparent text-foreground outline-none placeholder:text-[var(--text-dim)]",
 				...props
 			}),
 			/* @__PURE__ */ jsx(TerminalCursor, {})

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tangle-network/ui",
-  "version": "11.22.1",
+  "version": "11.22.3",
   "description": "Generic React UI components for Tangle products — primitives, chat, run, files, editor, markdown.",
   "type": "module",
   "license": "MIT",
@@ -149,7 +149,7 @@
   "peerDependencies": {
     "@hocuspocus/provider": ">=2.15.0 <5.0.0",
     "@nanostores/react": ">=0.8.4 <3.0.0",
-    "@tangle-network/brand": "^1.15.4",
+    "@tangle-network/brand": "^1.15.6",
     "@tiptap/core": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration": ">=3.20.4 <4.0.0",
     "@tiptap/extension-collaboration-caret": ">=3.7.0 <4.0.0",

package/src/primitives/input.tsx

@@ -10,7 +10,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 const inputVariants = cva(
   cn(
-    "flex w-full rounded-lg border px-4 py-2 text-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
+    "flex w-full rounded-lg border px-4 py-2 text-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 file:border-0 file:bg-transparent file:font-medium file:text-sm",
     fieldPresentation,
   ),
   {
@@ -117,7 +117,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
         id={textareaId}
         className={cn(
           "flex min-h-[120px] w-full resize-y rounded-lg border px-4 py-3 text-sm",
-          "placeholder:text-muted-foreground",
+          "placeholder:text-[var(--text-dim)]",
           "disabled:cursor-not-allowed disabled:opacity-50",
           fieldPresentation,
           error && focusFieldInvalid,

package/src/primitives/placeholder-tone.test.tsx

@@ -0,0 +1,56 @@
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import { Input, Textarea } from "./input"
+import { Select, SelectTrigger, SelectValue } from "./select"
+
+/**
+ * An empty field's example text must not read as an entered value.
+ *
+ * Placeholders used `text-muted-foreground`, which is `--text-muted`: the tier
+ * one step below body text (#4c4c4c against #2d2d2d in light). An empty PTIN
+ * field showing "P01234567" then looked like saved data. `--text-dim` is the
+ * faintest TEXT tier — still 4.5:1 on every plane including the field well,
+ * which tokens.test.ts asserts — so it is the quietest colour that is still
+ * legible, and three tier steps from the value.
+ */
+const PLACEHOLDER_TIER = "--text-dim"
+
+function placeholderColours(el: HTMLElement): string[] {
+  return el.className
+    .split(/\s+/)
+    .filter((cls) => /^(?:placeholder|data-\[placeholder\]):text-/.test(cls))
+}
+
+function expectQuietPlaceholder(el: HTMLElement, what: string) {
+  const colours = placeholderColours(el)
+  expect(colours, `${what} must declare a placeholder colour`).not.toEqual([])
+  for (const cls of colours) {
+    expect(cls, `${what} placeholder must use ${PLACEHOLDER_TIER}`).toContain(
+      `var(${PLACEHOLDER_TIER})`,
+    )
+    expect(cls, `${what} placeholder must not be faded with alpha`).not.toMatch(/\/\d{1,3}$/)
+  }
+}
+
+describe("placeholder text sits on the faintest text tier", () => {
+  it("Input", () => {
+    render(<Input aria-label="PTIN" placeholder="P01234567" />)
+    expectQuietPlaceholder(screen.getByLabelText("PTIN"), "Input")
+  })
+
+  it("Textarea", () => {
+    render(<Textarea aria-label="Notes" placeholder="Details" />)
+    expectQuietPlaceholder(screen.getByLabelText("Notes"), "Textarea")
+  })
+
+  it("SelectTrigger", () => {
+    render(
+      <Select>
+        <SelectTrigger aria-label="Filing status">
+          <SelectValue placeholder="Choose" />
+        </SelectTrigger>
+      </Select>,
+    )
+    expectQuietPlaceholder(screen.getByLabelText("Filing status"), "SelectTrigger")
+  })
+})

package/src/primitives/select.tsx

@@ -22,9 +22,9 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border px-3 py-2 text-sm shadow-sm placeholder:text-[var(--text-dim)] disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       fieldPresentation,
-      "data-[placeholder]:text-muted-foreground [&>span]:min-w-0 [&>span]:text-left",
+      "data-[placeholder]:text-[var(--text-dim)] [&>span]:min-w-0 [&>span]:text-left",
       // The designed open state: accent border and surface while the menu is up.
       "data-[state=open]:border-primary data-[state=open]:bg-[var(--accent-surface-strong)] [&[data-state=open]>svg]:rotate-180 [&>svg]:transition-transform",
       size !== "default" && controlSizes[size],

package/src/primitives/switch.test.tsx

@@ -24,12 +24,16 @@ describe("Switch", () => {
     expect(stateClasses(thumb, "unchecked")).not.toContain("bg-background");
   });
 
-  it("fills the track with primary once it is on", () => {
+  it("draws its on state as an accent-text track with a card thumb, so a checked switch clears 3:1 in every theme", () => {
     render(<Switch aria-label="Reminders" />);
     const track = screen.getByRole("switch", { name: "Reminders" });
     fireEvent.click(track);
     expect(track).toHaveAttribute("data-state", "checked");
-    expect(stateClasses(track, "checked")).toContain("bg-primary");
-    expect(stateClasses(track.firstElementChild as Element, "checked")).toContain("bg-background");
+    const thumb = track.firstElementChild as Element;
+    expect(stateClasses(track, "checked")).toContain("bg-[var(--accent-text)]");
+    expect(stateClasses(track, "checked")).toContain("border-transparent");
+    expect(stateClasses(track, "checked")).not.toContain("bg-primary");
+    expect(stateClasses(thumb, "checked")).toContain("bg-card");
+    expect(stateClasses(thumb, "checked")).not.toContain("bg-background");
   });
 });

package/src/primitives/switch.tsx

@@ -16,7 +16,13 @@ const Switch = React.forwardRef<
       // switch's boundary is non-text content). The old bg-input track under a
       // bg-background thumb read as one flat shape, so an off switch was not
       // visible at all. --border-strong was tried and measured 2.2:1 on a white card.
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-[background-color,border-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-primary data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent",
+      // On is an --accent-text track carrying a card-coloured thumb. Accent text
+      // is held to text contrast on the card and the canvas, so the track's edge
+      // and the thumb on it (the same pair, inverted) both clear 3:1 in every
+      // theme. The bg-primary fill is tuned to carry white text and measured
+      // 2.4:1 on the dark card, with a bg-background thumb at 2.5:1 on it.
+      // brand's switch-contrast.test.ts asserts these pairs for every theme.
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 shadow-sm transition-[background-color,border-color,box-shadow] disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-transparent data-[state=checked]:bg-[var(--accent-text)] data-[state=unchecked]:border-muted-foreground data-[state=unchecked]:bg-transparent",
       focusRing,
       className,
     )}
@@ -25,7 +31,7 @@ const Switch = React.forwardRef<
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-[translate,background-color] data-[state=checked]:translate-x-4 data-[state=checked]:bg-background data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-muted-foreground",
+        "pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-[translate,background-color] data-[state=checked]:translate-x-4 data-[state=checked]:bg-card data-[state=unchecked]:translate-x-0 data-[state=unchecked]:bg-muted-foreground",
       )}
     />
   </SwitchPrimitives.Root>

package/src/primitives/terminal-display.tsx

@@ -174,7 +174,7 @@ const TerminalInput = React.forwardRef<HTMLInputElement, TerminalInputProps>(
           value={value}
           onChange={(e) => setValue(e.target.value)}
           onKeyDown={handleKeyDown}
-          className="flex-1 bg-transparent text-foreground outline-none placeholder:text-muted-foreground"
+          className="flex-1 bg-transparent text-foreground outline-none placeholder:text-[var(--text-dim)]"
           {...props}
         />
         <TerminalCursor />