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

package/docs/components/badge.md

@@ -50,7 +50,7 @@ import { Badge } from "@trading-game/design-intelligence-layer"
 
 **Colour (semantic):**
 - Solid: `background-brand-default` + `text-on-brand-static`; `background-demo-solid`; `background-inverse-surface` + `text-prominent-inverse`; `background-success-solid` / `background-error-solid` / `background-warning-solid`, all with `text-on-status-static`.
-- Tint: `--background-brand-container` (layered static recipe, painted via `[background:…]`) + `text-brand-container-static`; `background-demo-default` + `text-demo-default`; `background-secondary-surface` + `border-neutral-default` + `text-prominent-default`; `background-success/error/warning-default` + matching `border-*` and `text-*` status tokens.
+- Tint: `--background-brand-container` (layered static recipe, painted via `[background:…]`) + `text-brand-container-static`; `background-demo-default` + `text-demo-default`; `background-secondary-surface` + `text-prominent-default`; `background-success/error/warning-default` + matching `text-*` status tokens. All tints are borderless — the tinted fill alone carries the meaning.
 - Focus: `ring-focus-strong`.
 
 **Type (private):** `--badge-font-size/line-height-{xs,sm,md,lg}` = 10/16, 12/16, 14/20, 16/24; `--badge-font-weight` = semibold (600).
@@ -60,7 +60,7 @@ import { Badge } from "@trading-game/design-intelligence-layer"
 - Status solids use the bright 600 fills with shared static white ink (`text-on-status-static`) — deliberately below AA on green and amber; a style call, not an oversight.
 - `tint` (brand) paints the layered `--background-brand-container` value via arbitrary `background`, so a `bg-*` utility cannot override it — replace the whole `[background:…]` if you must.
 - No hover states — badges are read-only markers; if it needs to be clickable, it's a [Chip](./chip.md).
-- `rounded-full`, `border-transparent` base (tints add their own status borders), no shadow.
+- `rounded-full`, `border-transparent` on every variant — no outlines, no shadow.
 
 ## Do / Don't
 

package/docs/foundations/colors.md

@@ -42,6 +42,7 @@ All scales run 50→1000 (mono 50→1200; blue adds 25 and 1000 as the two canva
 | Token | Light | Dark | Job |
 |---|---|---|---|
 | `background-primary-canvas` | blue-25 `#F7F8FC` | blue-1000 `#00001F` | The app page behind everything |
+| `background-tinted-canvas` | blue-600 12%→4% mixed into the canvas + a blue-400 aurora | blue-400 14% into the canvas + aurora | The Refined screen background — a layered gradient, consume via `background: var(--background-tinted-canvas)` on the page root only; ends on `primary-canvas` in both themes so long pages melt in seamlessly |
 | `background-primary-surface` | mono-50 `#FFFFFF` | white 6% over canvas ≈ `#0F0F2C` | Cards, panels, menus, inputs, sheets — the default solid surface |
 | `background-secondary-surface` | mono-100 `#F1F1F1` | white 12% over canvas ≈ `#1F1F3A` | One step up: muted fills, tracks, icon tiles, read-only fields |
 | `background-hover-default` | black-alpha-4 | white-alpha-12 | The hover glaze — laid over any solid surface |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trading-game/design-intelligence-layer",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Trading Game Design System — shadcn/ui components with Tailwind CSS v4",
   "type": "module",
   "main": "./dist/index.cjs",

package/src/styles.css

@@ -544,6 +544,18 @@
   /* pressed wash on outline chips */
   --background-static-white-wash: var(--primitive-white-alpha-80);
   /* hover on the white on-brand button fills */
+  /* Tinted canvas — the screen background: a blue tint melting into the
+     canvas with a soft centred aurora — the Refined composition, in token math. One token, two layers; consume via
+     `background: var(--background-tinted-canvas)` on the page root (an
+     app-shell decision — components never paint it). Every stop is token
+     math (blue primitives mixed into the canvas), and both themes end on
+     background-primary-canvas so long pages melt in without a seam. */
+  --background-tinted-canvas:
+    radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--primitive-blue-400) 24%, transparent), transparent 55%),
+    linear-gradient(180deg,
+      color-mix(in srgb, var(--primitive-blue-600) 12%, var(--background-primary-canvas)) 0%,
+      color-mix(in srgb, var(--primitive-blue-600) 4%, var(--background-primary-canvas)) 55%,
+      var(--background-primary-canvas) 100%);
   --background-brand-container:
     linear-gradient(rgb(255 255 255 / 92%), rgb(255 255 255 / 92%)),
     var(--primitive-blue-600);
@@ -779,6 +791,11 @@
   --text-brand-default: var(--primitive-blue-400);
   --text-brand-hover: var(--primitive-blue-300);
   --background-brand-selected: color-mix(in srgb, var(--primitive-blue-400) 24%, var(--primitive-blue-1000));
+  --background-tinted-canvas:
+    radial-gradient(circle at 60% 15%, color-mix(in srgb, var(--primitive-blue-400) 28%, transparent), transparent 55%),
+    linear-gradient(180deg,
+      color-mix(in srgb, var(--primitive-blue-400) 14%, var(--background-primary-canvas)) 0%,
+      var(--background-primary-canvas) 100%);
   --text-brand-selected: var(--primitive-blue-200);
   --border-brand-selected: var(--primitive-blue-300);
   --background-chrome-default: rgb(20 20 44 / 72%);
@@ -1153,7 +1170,7 @@
   }
 
   body {
-    @apply bg-prominent text-on-prominent font-sans antialiased;
+    @apply bg-background-primary-canvas text-text-prominent-default font-sans antialiased;
   }
 }