@trading-game/design-intelligence-layer 0.11.1 → 0.12.1

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

@@ -135,12 +135,14 @@ import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
 
 ### 2.3 — Semantic (Trading Status)
 
-| CSS Variable         | Tailwind Class          | Usage                     |
-| -------------------- | ----------------------- | ------------------------- |
-| `--semantic-win`     | `text-semantic-win` / `bg-semantic-win`     | Win / Profit / Positive outcomes |
-| `--semantic-loss`    | `text-semantic-loss` / `bg-semantic-loss`   | Loss / Negative outcomes  |
-| `--semantic-warning` | `text-semantic-warning` / `bg-semantic-warning` | Warning / Caution / Non-destructive alerts |
-| `--semantic-info`    | `text-semantic-info` / `bg-semantic-info`   | Informational alerts      |
+| CSS Variable               | Tailwind Class                              | Usage                                         |
+| -------------------------- | ------------------------------------------- | --------------------------------------------- |
+| `--semantic-win`           | `text-semantic-win` / `bg-semantic-win`     | Win / Profit / Positive outcomes              |
+| `--semantic-loss`          | `text-semantic-loss` / `bg-semantic-loss`   | Loss / Negative outcomes                      |
+| `--semantic-warning`       | `text-semantic-warning` / `bg-semantic-warning` | Warning / Caution / Non-destructive alerts |
+| `--semantic-info`          | `text-semantic-info` / `bg-semantic-info`   | Informational alerts                          |
+| `--semantic-credit`        | `bg-semantic-credit`                        | Credit / bonus badge background (`#F9840F` amber-orange) |
+| `--semantic-credit-text`   | `text-semantic-credit-text`                 | Credit / bonus badge foreground (`#713813` dark amber) |
 
 > All semantic tokens support opacity variants (e.g. `bg-semantic-warning/10` for tinted backgrounds). For structured alpha surfaces, use the primitive alpha scales — see Section 2.10.
 
@@ -273,6 +275,7 @@ import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
 | Show WIN / profit / positive           | `text-semantic-win`               | Primary blue for profit                |
 | Show LOSS / negative                   | `text-semantic-loss`              | Any non-token red                      |
 | Show WARNING / caution                 | `text-semantic-warning`           | Raw orange hex or primary tint         |
+| Show a credit / bonus badge            | `<Badge variant="fill-credit">` (uses `bg-semantic-credit` + `text-semantic-credit-text`) | Hardcoded amber hex values |
 | Color a tab container background       | `bg-tabs`                         | `bg-subtle` for tabs                   |
 | Color an active/selected tab           | `bg-tabs-active`                  | `bg-prominent` for active tab          |
 | Color a page background                | `bg-prominent`                    | `bg-white` directly                    |
@@ -553,7 +556,8 @@ import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, Dialog
 | Table | [composed] | TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption |
 | Tabs | [composed] | TabsList (`variant`: default/line, `size`: sm/md/lg), TabsTrigger (`iconPosition`: inline/top), TabsContent. Root accepts `orientation`: horizontal/vertical. |
 | Textarea | [simple] | — |
-| TicketCard | [composed] | — (`icon`, `label`, `value`, `currency`, `stubLabel`, `onStubClick`, `stubDisabled`, `welcomeCredit`, `creditUsed`, `creditTotal`, `creditCurrency`, `creditLabel`, `creditFullWidth`, `freeCredit` *(deprecated)*) |
+| TicketCard | [composed] | — (`icon`, `label`, `value`, `currency`, `stubLabel`, `onStubClick`, `stubDisabled`, `compact`) |
+| CreditTicketCard | [composed] | — (`icon`, `label`, `value`, `currency`, `stubLabel`, `onStubClick`, `stubDisabled`, `creditAmount`, `creditCurrency`, `compact`) — use when a credit badge must appear below the value |
 | Toggle | [simple] | — |
 | ToggleGroup | [composed] | ToggleGroupItem |
 | Tooltip | [composed] | TooltipTrigger, TooltipContent, TooltipProvider |
@@ -582,7 +586,9 @@ These are styling behaviors you can't discover from TypeScript types alone:
 | Slider | Thumb: square `rounded-[4px]`, `bg-primary`. Track range: `bg-slider-range` |
 | Dialog/Sheet | Footer buttons should use `size="md"`. Overlay: `bg-overlay` |
 | Menubar | Hover: `bg-primary/[0.08]`. Open state: `bg-primary/10` |
-| TicketCard | **Icon:** pass any `ReactNode` via `icon`. Icon container: `size-10` rounded-full, `border-2 border-primary`, `text-primary`. **Labels:** `label` (above value) and `stubLabel` (stub button) render in sentence case — do NOT apply `uppercase` or `tracking-widest`. Stub: `w-[100px]` `bg-primary` button, `text-on-prominent-static-inverse`, shimmer sweep animation. Disabled stub: `opacity-50`, `cursor-not-allowed`. Perforation notches sit outside the card box — do NOT put `overflow-hidden` on the card wrapper. **Welcome credit bar:** enabled via `welcomeCredit` prop. Colors are hardcoded per Figma spec — icon + label text `#713813` (dark amber), progress bar fill `#ef9f00` (golden amber). Padding: `p-2` (8px). **`creditFullWidth`** (default `false`): `false` = desktop, bar is `calc(100% - 112px)` wide (stops flush with stub left edge); `true` = mobile, bar is `w-full`. Customise bar copy via `creditUsed`, `creditTotal`, `creditCurrency`, `creditLabel`. `freeCredit` is a deprecated alias for `welcomeCredit`. |
+| Badge | Variants: `default` (solid blue), `default-success`, `default-fail`; `fill` (blue tint), `fill-success`, `fill-fail`, `fill-warning`; `fill-credit` (amber-orange tint — `bg-semantic-credit/16` bg + `text-semantic-credit-text` foreground — use for credit/bonus labels, always pair with a `TicketPlus` icon); `outline`; `ghost`, `ghost-success`, `ghost-fail`. Base class no longer applies `tracking-wide` — letter spacing is default. |
+| TicketCard | **Icon:** pass any `ReactNode` via `icon`. Icon container: `size-10` rounded-full, `border-2 border-primary`, `text-primary`. **Labels:** `label` (above value) and `stubLabel` (stub button) render in sentence case — do NOT apply `uppercase` or `tracking-widest`. Stub: `w-[100px]` `bg-primary` button, `text-on-prominent-static-inverse`, shimmer sweep animation. Disabled stub: `opacity-50`, `cursor-not-allowed`. Perforation notches sit outside the card box — do NOT put `overflow-hidden` on the card wrapper. **`compact`** (default `false`): `true` = mobile layout — reduces left-content horizontal padding from `px-4 gap-4` to `px-2 gap-2`. **For credit use cases:** use `CreditTicketCard` instead — it renders a `<Badge variant="fill-credit">` inline below the value. |
+| CreditTicketCard | Same visual shell as `TicketCard` (perforation notches, tear-line, shimmer stub). The card height is **variable** (grows with content via `py-4`) rather than fixed at `h-20`. Credit is displayed as an inline `<Badge variant="fill-credit" size="sm">` with a `TicketPlus` icon: *"Credit: {creditAmount} {creditCurrency}"*. Tokens used: `bg-subtle`, `bg-primary`, `bg-primary-hover`, `text-on-prominent-static-inverse`, `bg-semantic-credit/16`, `text-semantic-credit-text`. Supports `compact` prop for mobile layout (same padding reduction as `TicketCard`). |
 | Toggle | Pressed: `bg-primary/10` + `border-primary` + `text-primary` |
 | Calendar | Selected: `bg-secondary-hover` + `text-primary font-bold`. Today: primary dot below date |
 
@@ -627,6 +633,37 @@ Landing page hero sections in multiple layout types.
 
 ---
 
+### Sheet Open Positions
+
+A slide-in panel listing the user's open trading positions. Responsive — renders as a right-side `Sheet` on desktop and a bottom `Drawer` on mobile.
+
+| State | Description |
+|-------|-------------|
+| Active | Scrollable list of open positions with direction, asset, stake, and P&L per row. Win/loss coloured with semantic tokens. Footer button links to transaction history. |
+| Empty | Empty state with icon and "No trades yet." message in place of the list. |
+
+**Components used:** `Sheet`, `Drawer`, `Item`, `ItemGroup`, `ItemContent`, `ItemTitle`, `ItemDescription`, `ItemActions`, `Empty`, `EmptyHeader`, `EmptyMedia`, `EmptyTitle`, `Button`, `NavigationButton`, `Separator`
+
+**Tokens used:** `bg-prominent`, `border-border-subtle`, `text-semantic-win`, `text-semantic-loss`, `text-on-prominent`, `text-on-subtle`
+
+---
+
+### Header navigation
+
+A product app top header bar. Not a landing page component — used inside the trading game itself.
+
+| Region | Content |
+|--------|---------|
+| Left | `NavigationButton` (back arrow) |
+| Centre | `Badge` (fill-warning "Demo" label) + account balance amount + currency label |
+| Right | `NavigationButton` icons for history and sound toggle |
+
+**Components used:** `NavigationButton`, `Badge`
+
+**Tokens used:** `bg-prominent`, `border-border-subtle`, `text-on-prominent`, `text-on-subtle`
+
+---
+
 ## 9 — Common Mistakes
 
 | Mistake | Correct Approach |

package/package.json

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

package/src/styles.css

@@ -48,6 +48,8 @@
   --color-semantic-win: var(--semantic-win);
   --color-semantic-loss: var(--semantic-loss);
   --color-semantic-warning: var(--semantic-warning);
+  --color-semantic-credit: var(--semantic-credit);
+  --color-semantic-credit-text: var(--semantic-credit-text);
   --color-alert-info-text: var(--alert-info-text);
   --color-alert-info-border: var(--alert-info-border);
   --color-alert-error-text: var(--alert-error-text);
@@ -167,6 +169,8 @@
   /* ── Amber ── */
   --primitive-amber-500: oklch(0.74 0.18 72);
   /* #ef9f00 — golden amber; ticket credit progress fill */
+  --primitive-amber-600: #F9840F;
+  /* #F9840F — warm orange-amber; credit badge background base */
   --primitive-amber-800: oklch(0.40 0.10 52);
   /* #713813 — dark amber/brown; ticket credit label text */
 
@@ -265,6 +269,10 @@
   --semantic-info: var(--primitive-sky-600);
   --semantic-error: var(--primitive-red-600);
   --semantic-warning: var(--primitive-orange-500);
+  --semantic-credit: var(--primitive-amber-600);
+  /* #F9840F — credit badge background */
+  --semantic-credit-text: var(--primitive-amber-800);
+  /* #713813 — credit badge foreground */
   --tabs: var(--primitive-mono-alpha-4);
   --tabs-active: var(--primitive-mono-50);