@trading-game/design-intelligence-layer 0.11.0 → 0.12.0

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, stubIcon, stubLabel, onStubClick, stubDisabled) |
+| 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:** default icon is `Wallet` (lucide) — pass any `ReactNode` via the `icon` prop. Icon container: `size-11` (sm: `size-12`) rounded-full circle, `border-2 border-primary`, `text-primary`. **Labels:** `label` (above value) and `stubLabel` (stub button) both render in sentence case with default letter spacing — do NOT apply `uppercase` or `tracking-widest` when passing string values. Stub: `bg-primary` button, `text-on-prominent-static-inverse`. Disabled stub: `bg-primary/30`, `opacity-50`, `cursor-not-allowed`. Perforation notches sit outside the card box and require the card wrapper to NOT use `overflow-hidden`. |
+| 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 |
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trading-game/design-intelligence-layer",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "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);
@@ -164,6 +166,14 @@
   --primitive-orange-400: oklch(0.751 0.179 58.3);
   /* #FF8C00 */
 
+  /* ── 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 */
+
   /* ── Violet ── */
   --primitive-violet-500: oklch(0.601 0.263 301.6);
   /* #A040FF */
@@ -259,8 +269,13 @@
   --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);
+
   --semantic-layout-diagram-max-default: var(--primitive-layout-diagram-max-default);
   --semantic-layout-diagram-max-small: var(--primitive-layout-diagram-max-small);
   --semantic-layout-diagram-max-medium: var(--primitive-layout-diagram-max-medium);
@@ -357,6 +372,12 @@
   }
 }
 
+/* Ticket card stub — shimmer sweep across deposit/action button */
+@keyframes stub-shimmer {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+
 /* Spinner — pill-style activity indicator */
 @keyframes spinner-fade {
   0% {