@trading-game/design-intelligence-layer 1.0.4 → 1.0.5

package/docs/components/badge.md

@@ -51,6 +51,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` + `text-prominent-default`; `background-success/error/warning-default` + matching `text-*` status tokens. All tints are borderless — the tinted fill alone carries the meaning.
+- The `tint-demo` / `tint-success` / `tint-fail` / `tint-warning` fills are one family by construction: a light `-50` step in light, and the hue's base step at **24% over the canvas** in dark. `tint-demo` gained its dark override so it stops reading as a light chip beside Won/Lost/Pending; note ember's base step is 500, not 600, because it is a game accent rather than a status colour.
 - 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).
@@ -59,6 +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.
+- `tint` (brand) is the one tint that stays light in dark, because `--background-brand-container` is a deliberately static icy panel shared with Calendar's selection. It sits outside the status/demo tint family on purpose.
 - No hover states — badges are read-only markers; if it needs to be clickable, it's a [Chip](./chip.md).
 - `rounded-full`, `border-transparent` on every variant — no outlines, no shadow.
 

package/docs/foundations/colors.md

@@ -61,7 +61,7 @@ All scales run 50→1000 (mono 50→1200; blue adds 25 and 1000 as the two canva
 | `background-warning-default` | amber-50 | amber-600 24% over canvas | ditto |
 | `background-information-default` | azure-50 | azure-600 24% over canvas | ditto |
 | `background-success-solid` / `-error-solid` / `-warning-solid` | status 600 | static — same | Solid status fills (badges) |
-| `background-demo-solid` / `background-demo-default` | ember-500 / ember-50 | static | Demo-account badge fills |
+| `background-demo-solid` / `background-demo-default` | ember-500 / ember-50 | solid static / ember-500 24% over canvas | Demo-account badge fills. The tint takes the same 24%-over-canvas recipe as the status tints in dark, so the Badge set reads as one family — ember's base step is 500, not 600, because it is a game accent |
 | `background-static-white` | mono-50 | static — never flips | White elements on fixed-colour art panels (on-brand buttons) |
 
 ## Semantic tokens — Text & Icon

package/package.json

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

package/src/styles.css

@@ -826,6 +826,11 @@
   --background-success-default: color-mix(in srgb, var(--primitive-green-600) 24%, var(--primitive-blue-1000));
   --background-error-default: color-mix(in srgb, var(--primitive-red-600) 24%, var(--primitive-blue-1000));
   --background-warning-default: color-mix(in srgb, var(--primitive-amber-600) 24%, var(--primitive-blue-1000));
+  /* The demo marker joins the status tints in dark. It had no override at
+     all, so it kept its light ember-50 cream and read as a light chip on a
+     dark canvas next to Won/Lost/Pending. Same 24%-over-canvas recipe;
+     ember's base step is 500, not 600 — it is a game accent. */
+  --background-demo-default: color-mix(in srgb, var(--primitive-ember-500) 24%, var(--primitive-blue-1000));
   --background-information-default: color-mix(in srgb, var(--primitive-azure-600) 24%, var(--primitive-blue-1000));
   --background-overlay-default: var(--primitive-black-alpha-64);