@trading-game/design-intelligence-layer 1.0.0 → 1.0.1

package/AGENTS.md

@@ -23,6 +23,7 @@ Rules of engagement for AI agents building with `@trading-game/design-intelligen
 - **Menus**: Command, Context Menu, Dropdown Menu, Menubar, and Select rows share one look (`--menu-*` family): `rounded-lg` surface panel + hairline, `type-menu-item` rows with the hover glaze, `type-menu-heading` group labels. See [docs/patterns/menus.md](./docs/patterns/menus.md).
 - **On brand/art surfaces**: use the `on-brand` variants (Button `primary/secondary/tertiary-on-brand`, Input/InputGroup `variant="on-brand"`, Link `tone="on-brand"`) and the frost recipe (`variant="frosted-on-brand"` on Button, NavigationButton, and Card); on page surfaces the tinted counterpart is Button `variant="frosted"`. See [docs/patterns/on-brand.md](./docs/patterns/on-brand.md).
 - **State layers**: hover = `bg-background-hover-default` glaze; pressed = `bg-background-pressed-default`; brand fills derive hover/press via the built-in `brand-hover`/`brand-pressed` recipes.
+- **Page canvas**: the app shell paints the page background once — plain `bg-background-primary-canvas`, or the tinted screen background via `background: var(--background-tinted-canvas)` (a layered gradient token; not a `bg-*` utility). Components never set the page background. See the demo's Canvas foundation page.
 
 ## Anti-patterns (seen in the wild — don't repeat)
 

package/README.md

@@ -2,7 +2,7 @@
 
 The component library and token architecture for **Champion Trade** (formerly Trading Game) — a Tailwind CSS v4 + React design system with a strict semantic token layer, per-component typography tokens, light and dark themes, and 57 production components.
 
-> **Package name:** still published as `@trading-game/design-intelligence-layer`. The npm scope renames to Champion Trade at v1.0 — until then, install and import under the current name below.
+> **Package name:** published as `@trading-game/design-intelligence-layer`. The Champion Trade npm scope rename is parked for a future major — install and import under the current name below.
 
 ## Install
 
@@ -74,11 +74,15 @@ React 18+, ReactDOM, Tailwind CSS v4+.
 
 ## What's inside
 
-- **57 components** — forms, overlays, menus, navigation, data display, plus trading-specific pieces (Numpad, Bottom Navigation, Profile Photo)
-- **Three-layer token architecture** — primitives → semantics → component type tokens; components consume semantic colour tokens only
+- **57 components** — forms, overlays, menus, navigation, data display, plus trading-specific pieces (Numpad, Bottom Navigation with its liquid selection bubble + AI circle, Profile Photo, Stepper)
+- **Three-layer token architecture** — primitives → semantics → component type tokens; components consume semantic colour tokens only, and `npm run check:tokens` fails the build on any drift (undocumented tokens, primitives in components, alpha-modified colour constructions)
+- **Three-layer motion system** — duration/easing primitives → semantic roles (hover, press, surface, overlay) → named signature moves (the liquid travel spring, the arrival pop); overlay animations ship with the package
 - **Light + dark themes** — dark is designed, not mirrored: its own surface mixes, selection fills, and ink steps
-- **No shadows** — elevation is hairlines and surface steps
-- **Pill shape system** — buttons and chips are pills, icon buttons are circles, cards 18px, menus 10px
+- **Tinted canvas** — the signature screen background (`--background-tinted-canvas`): a blue aurora melting into the canvas, pure token math, applied once on the page root
+- **The frosted family** — `variant="frosted"` (brand-tinted glass on page surfaces) and `variant="frosted-on-brand"` (white frost on art) across Button, NavigationButton, and Card
+- **No shadows** — elevation is hairlines and surface steps, with one sanctioned exception: the Bottom Navigation's floating-chrome lift
+- **Pill shape system** — buttons and chips are pills, icon buttons are circles, cards 18px, menus 10px, form fields 4px; every control on the 32/40/48 rail
+- **AI-readable in `node_modules`** — AGENTS.md, all 57 component pages, foundations, and patterns ship inside the npm tarball
 - **TypeScript, ESM + CJS**
 
 ## Documentation
@@ -91,7 +95,7 @@ React 18+, ReactDOM, Tailwind CSS v4+.
 | [docs/foundations/shape-layout.md](./docs/foundations/shape-layout.md) | The 32/40/48 size rail, radius system, spacing, grid |
 | [docs/foundations/motion.md](./docs/foundations/motion.md) | The three-layer motion system: primitives → semantic roles → signature moves |
 | [docs/components/](./docs/components/) | One page per component: API, variants, tokens consumed, behaviour, do/don't |
-| [docs/patterns/](./docs/patterns/) | Forms (Field cascade), menus (shared family), on-brand surfaces & glass |
+| [docs/patterns/](./docs/patterns/) | Forms (Field cascade), menus (shared family), on-brand surfaces & the frosted recipe |
 
 ## Demo app
 
@@ -105,4 +109,4 @@ npm run dev   # Next.js demo at http://localhost:4000 — every component, light
 npm install @trading-game/design-intelligence-layer@latest --safe-chain-skip-minimum-package-age
 ```
 
-Deprecated token aliases and component aliases (e.g. Input `variant="inverse"`, NativeSelect `size="default"`) keep working until **v1.0**, when they are removed in one breaking sweep alongside the Champion Trade package rename.
+Deprecated token aliases and component aliases (e.g. Button `variant="glass"` → `frosted-on-brand`, Input `variant="inverse"`, NativeSelect `size="default"`) keep working throughout 1.x; they are removed in one breaking sweep at the **next major**, alongside the Champion Trade package rename.

package/dist/index.cjs

@@ -1257,10 +1257,10 @@ var badgeVariants = (0, import_class_variance_authority4.cva)(
         // so it paints via `background`, not a bg-* utility).
         tint: "[background:var(--background-brand-container)] border-transparent text-text-brand-container-static",
         "tint-demo": "bg-background-demo-default border-transparent text-text-demo-default",
-        "tint-neutral": "bg-background-secondary-surface border-border-neutral-default text-text-prominent-default",
-        "tint-success": "bg-background-success-default border-border-success-default text-text-success-default",
-        "tint-fail": "bg-background-error-default border-border-error-default text-text-error-default",
-        "tint-warning": "bg-background-warning-default border-border-warning-default text-text-warning-default"
+        "tint-neutral": "bg-background-secondary-surface border-transparent text-text-prominent-default",
+        "tint-success": "bg-background-success-default border-transparent text-text-success-default",
+        "tint-fail": "bg-background-error-default border-transparent text-text-error-default",
+        "tint-warning": "bg-background-warning-default border-transparent text-text-warning-default"
       },
       size: {
         xs: "type-badge-xs h-5 px-2 py-0.5",