@trading-game/design-intelligence-layer 0.17.2 → 0.17.4

package/guides/design-system-guide/trading-game-ds-guide.md

@@ -415,7 +415,8 @@ The design system uses a custom radius scale (base = 10px). Use these named toke
 | `primary-inverse`    | `bg-primary-inverse` | `text-on-primary-inverse`   | none                                     | `bg-primary-inverse/80`     | Dark/coloured surfaces |
 | `secondary`          | transparent          | `text-on-prominent`         | `border-[1.5px] border-border-prominent` | `bg-secondary-hover`        | Light surfaces         |
 | `secondary-inverse`  | transparent          | `text-on-prominent-inverse` | `border-[1.5px] border-primary-inverse`  | `bg-primary-inverse/10`     | Dark/coloured surfaces |
-| `tertiary`           | transparent          | `text-primary`              | none                                     | `bg-primary/[0.08]`         | Light surfaces         |
+| `tertiary`           | transparent          | `text-on-prominent`         | none                                     | `bg-secondary-hover`        | Light surfaces         |
+| `tertiary-inverse`   | transparent          | `text-on-primary`           | none                                     | `bg-on-primary/[0.10]`      | Dark/coloured surfaces |
 
 ### 6.2 — Sizes
 
@@ -546,8 +547,8 @@ import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, Dialog
 | Field | [complex] | FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSet, FieldContent, FieldTitle, FieldSeparator |
 | Form | [complex] | FormField, FormItem, FormLabel, FormControl, FormDescription, FormMessage |
 | HoverCard | [composed] | HoverCardTrigger, HoverCardContent |
-| Input | [simple] | — |
-| InputGroup | [composed] | InputGroupAddon, InputGroupInput, InputGroupButton, InputGroupText, InputGroupTextarea |
+| Input | [simple] | — variants: `default`, `inverse` (dark sunken fill + white text, for use on `bg-primary` and other brand-coloured surfaces). |
+| InputGroup | [composed] | InputGroupAddon, InputGroupInput, InputGroupButton, InputGroupText, InputGroupTextarea. Variants: `default`, `inverse` (propagates to nested controls via context — addon / text / input all swap to the inverse recipe automatically). |
 | InputOTP | [composed] | InputOTPGroup, InputOTPSlot, InputOTPSeparator. Variants: OTP 4 digits, OTP 6 digits, OTP 6 split, OTP 8 digits, OTP 6 separated |
 | Item | [composed] | ItemGroup, ItemContent, ItemTitle, ItemDescription, ItemMedia, ItemActions, ItemHeader, ItemFooter, ItemSeparator |
 | Kbd | [simple] | KbdGroup |
@@ -588,9 +589,9 @@ These are styling behaviors you can't discover from TypeScript types alone:
 
 | Component | Note |
 |-----------|------|
-| Button | `font-display font-bold`, sentence case (no `uppercase`). **Variants:** `primary` (blue fill, light surfaces), `primary-inverse` (white fill + blue text, dark/coloured surfaces), `secondary` (black outline, light surfaces), `secondary-inverse` (white outline + white text, dark/coloured surfaces), `tertiary` (text-only, light surfaces). **Loading state:** pass `loading` prop — button automatically renders a centred `Spinner`, hides children with `invisible` to preserve width. Do NOT manually place `<Spinner>` or "Loading" text inside the button. |
+| Button | `font-display font-bold`, sentence case (no `uppercase`). **Variants:** `primary` (blue fill, light surfaces), `primary-inverse` (white fill + blue text, dark/coloured surfaces), `secondary` (black outline, light surfaces), `secondary-inverse` (white outline + white text, dark/coloured surfaces), `tertiary` (text-only, black text, light surfaces — `text-on-prominent` hover `bg-secondary-hover`). **Loading state:** pass `loading` prop — button automatically renders a centred `Spinner`, hides children with `invisible` to preserve width. Do NOT manually place `<Spinner>` or "Loading" text inside the button. |
 | Card | Flat by default (no shadow). Add elevation manually: `className="shadow-sm"` |
-| Input | Resting: `border-input`. Focus: `border-ring` + `ring-[3px] ring-ring/50`. Radius: `rounded-sm` (6px) |
+| Input | Resting: `border-input`. Focus: `border-ring` + `ring-[3px] ring-ring/50`. Radius: `rounded-sm` (6px). **Read-only:** pass the native `readOnly` prop — renders with `border-transparent bg-subtle/60`, `pointer-events-none` (non-interactive, non-focusable). Use to display a value that the user should not be able to edit. |
 | InputGroup | Wraps `Input` with inline addons (icons, buttons, text). **Sizes:** `sm` (h-8) / `md` (h-10, default) / `lg` (h-12) — pass `size` to `InputGroup`, it flows to `InputGroupInput` via context. **Padding:** when any `inline-start` or `inline-end` addon is present, input text gets equal `pl-2 pr-2` (8px) on both sides for visual symmetry. Without addons, Input's default `px-3`/`px-4` applies. |
 | InputOTP | **Variants:** OTP 4 digits (single group, 4 slots), OTP 6 digits (single group, 6 slots), OTP 6 split (two groups of 3 with `InputOTPSeparator`), OTP 8 digits (single group, 8 slots), OTP 6 separated (each slot in its own `InputOTPGroup` for individually spaced boxes). Slot: `h-9 w-9`, `border-border-subtle`, `rounded-sm` on first/last. Focus: `border-primary` + `ring-primary/[0.08]`. |
 | NavigationButton | Icon-only tertiary button for navigation. `text-on-prominent` (black icons), `hover:bg-secondary-hover`. **Sizes (8-point grid):** `lg` 48px / 24px icon, `md` 40px / 20px icon, `sm` 32px / 20px icon, `xs` 24px / 16px icon. States: focus `ring-ring/50`, active `opacity-60`, disabled `opacity-24`. Supports `asChild`. |
@@ -914,3 +915,19 @@ import { ResultDialog } from "@trading-game/design-intelligence-layer"
 ```tsx
 <Input type="email" placeholder="Enter your email" />
 ```
+
+**Read-only input:**
+```tsx
+<Input value="Read-only value" readOnly />
+```
+
+---
+
+## 11 — Release Notes
+
+### v0.17.4
+
+- **Button `tertiary` variant** — text color changed from `text-primary` (blue) to `text-on-prominent` (black). Hover changed from `bg-primary/[0.08]` to `bg-secondary-hover`. Use `tertiary-inverse` for white text on dark/coloured surfaces (unchanged).
+- **Input `readOnly` state** — native `readOnly` prop now has a distinct visual treatment: `border-transparent`, `bg-subtle/60`, `pointer-events-none`. Renders as a non-interactive display field. Clearly distinguishable from both the default (bordered) and `disabled` (faded/greyed) states.
+- **Demo page sidebar** — replaced custom `<aside>` + plain buttons with the design system `Sidebar` component (`SidebarProvider`, `SidebarMenu`, `SidebarMenuButton` with `isActive`).
+- **Demo page layout** — removed `max-w-5xl` content cap; content now uses the full available width.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trading-game/design-intelligence-layer",
-  "version": "0.17.2",
+  "version": "0.17.4",
   "description": "Trading Game Design System — shadcn/ui components with Tailwind CSS v4",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -23,7 +23,7 @@
     "**/*.css"
   ],
   "scripts": {
-    "dev": "next dev -H 127.0.0.1 -p 3000",
+    "dev": "next dev -H 127.0.0.1 -p 4000",
     "generate:registry": "node scripts/generate-component-registry.mjs",
     "build": "tsup",
     "build:next": "next build",

package/src/styles.css

@@ -40,6 +40,7 @@
   --color-sidebar: var(--sidebar);
   --color-ring: var(--ring);
   --color-input: var(--input);
+  --color-input-inverse-surface: var(--input-inverse-surface);
   --color-border: var(--border);
   /* @deprecated — use border-border-subtle or border-border-prominent */
   --color-border-subtle: var(--border-subtle);
@@ -393,6 +394,11 @@
   --popover: var(--primitive-mono-50);
   --popover-foreground: oklch(0.07 0.012 165);
   --input: var(--border-subtle);
+  /* Sunken dark fill for Input/InputGroup variant="inverse" — sits on
+     coloured surfaces (brand-blue, etc.) where a frosted-white fill would
+     blend into the surrounding chrome. 35 % black overlay deepens the
+     surface enough for white text to read cleanly. */
+  --input-inverse-surface: oklch(0 0 0 / 0.35);
   --alert-info-text: var(--semantic-info);
   --alert-info-border: var(--semantic-info);
   --alert-error-text: var(--semantic-error);