@trading-game/design-intelligence-layer 0.8.7 → 0.8.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/README.md +19 -0
  2. package/dist/index.cjs +28 -24
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +2 -2
  5. package/dist/index.d.ts +2 -2
  6. package/dist/index.js +28 -24
  7. package/dist/index.js.map +1 -1
  8. package/guides/design-system-guide/trading-game-ds-guide.md +43 -3
  9. package/package.json +1 -1
  10. package/src/styles.css +28 -1
package/guides/design-system-guide/trading-game-ds-guide.md CHANGED
@@ -123,6 +123,8 @@ import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
123
123
  | `--popover` | `bg-popover` | Popovers, elevated cards |
124
124
  | `--subtle` | `bg-subtle` | Muted / secondary surfaces|
125
125
  | `--overlay` | `bg-overlay` | Modal/dialog/drawer/sheet backdrop (semi-transparent) |
126
+ | `--tabs` | `bg-tabs` | Tab container / tab bar background (`variant="default"`) — 4% black alpha, adapts to any surface |
127
+ | `--tabs-active` | `bg-tabs-active` | Active / selected tab background — solid white |
126
128
 
127
129
  ### 2.2 — Primary (Brand Blue)
128
130
 
@@ -140,7 +142,7 @@ import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
140
142
  | `--semantic-warning` | `text-semantic-warning` / `bg-semantic-warning` | Warning / Caution / Non-destructive alerts |
141
143
  | `--semantic-info` | `text-semantic-info` / `bg-semantic-info` | Informational alerts |
142
144
 
143
- > All semantic tokens support opacity variants (e.g. `bg-semantic-warning/10` for tinted backgrounds).
145
+ > 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.
144
146
 
145
147
  ### 2.4 — Text & Icon Colors
146
148
 
@@ -223,6 +225,42 @@ import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
223
225
  <div className="transition-colors duration-fast ease-standard">...</div>
224
226
  ```
225
227
 
228
+ ### 2.10 — Primitive Alpha Scales
229
+
230
+ > Raw alpha (opacity) variants of the mono and blue primitives. These are **internal CSS variables only** — not exposed as Tailwind utility classes. Reference them only from semantic tokens, never directly in components.
231
+
232
+ **Naming convention:** `--primitive-[color]-alpha-[stop]`
233
+
234
+ **Mono alpha scale** (black — `oklch(0 0 0 / X%)`)
235
+
236
+ | CSS Variable | Opacity | Typical use |
237
+ | ----------------------------- | ------- | ---------------------------------------- |
238
+ | `--primitive-mono-alpha-4` | 4% | Tab container background (`--tabs`) |
239
+ | `--primitive-mono-alpha-8` | 8% | Subtle hover tint |
240
+ | `--primitive-mono-alpha-16` | 16% | Pressed / active surface tint |
241
+ | `--primitive-mono-alpha-24` | 24% | Medium-weight tinted surface |
242
+ | `--primitive-mono-alpha-32` | 32% | Disabled state overlay |
243
+ | `--primitive-mono-alpha-40` | 40% | Strong tint / scrim |
244
+ | `--primitive-mono-alpha-50` | 50% | Backdrop overlay (replaces `--primitive-black-50`) |
245
+ | `--primitive-mono-alpha-64` | 64% | Heavy overlay |
246
+ | `--primitive-mono-alpha-80` | 80% | Near-opaque overlay |
247
+
248
+ **Blue alpha scale** (brand blue — `oklch(0.476 0.297 267.4 / X%)`)
249
+
250
+ | CSS Variable | Opacity | Typical use |
251
+ | ----------------------------- | ------- | ---------------------------------------- |
252
+ | `--primitive-blue-alpha-4` | 4% | Extremely subtle brand tint |
253
+ | `--primitive-blue-alpha-8` | 8% | Hover tint on brand surfaces |
254
+ | `--primitive-blue-alpha-16` | 16% | Selected / active brand tint |
255
+ | `--primitive-blue-alpha-24` | 24% | Medium brand surface highlight |
256
+ | `--primitive-blue-alpha-32` | 32% | Strong brand tint |
257
+ | `--primitive-blue-alpha-40` | 40% | Slider range fill (via `--slider-range`) |
258
+ | `--primitive-blue-alpha-50` | 50% | Brand overlay |
259
+ | `--primitive-blue-alpha-64` | 64% | Heavy brand overlay |
260
+ | `--primitive-blue-alpha-80` | 80% | Near-opaque brand overlay |
261
+
262
+ > **`--primitive-black-50` is deprecated.** It now aliases `--primitive-mono-alpha-50`. The `--overlay` semantic token is unaffected — it still resolves to the same 50% black value.
263
+
226
264
  ---
227
265
 
228
266
  ## 3 — AI Agent Decision Rules
@@ -235,6 +273,8 @@ import { Button, Card, Badge } from "@trading-game/design-intelligence-layer"
235
273
  | Show WIN / profit / positive | `text-semantic-win` | Primary blue for profit |
236
274
  | Show LOSS / negative | `text-semantic-loss` | Any non-token red |
237
275
  | Show WARNING / caution | `text-semantic-warning` | Raw orange hex or primary tint |
276
+ | Color a tab container background | `bg-tabs` | `bg-subtle` for tabs |
277
+ | Color an active/selected tab | `bg-tabs-active` | `bg-background` for active tab |
238
278
  | Color a page background | `bg-background` | `bg-white` directly |
239
279
  | Color a modal/dialog backdrop | `bg-overlay` | `bg-black/50` or raw black opacity |
240
280
  | Color a card or panel | `bg-card` | Arbitrary gray |
@@ -527,8 +567,8 @@ These are styling behaviors you can't discover from TypeScript types alone:
527
567
  | Tooltip | Bubble: `bg-primary` + `text-on-prominent-static-inverse` (not `bg-popover`). Always wrap in `<TooltipProvider>` |
528
568
  | Sidebar | Menu buttons use `rounded-sm`. Selection: `bg-secondary-hover` + `text-primary` + `font-semibold` |
529
569
  | Breadcrumb | Active page: `text-primary font-medium`. Links: `text-on-subtle` |
530
- | Tabs | **Variants:** `default` (pill, `bg-subtle`) and `line` (underline, transparent bg). **Sizes:** `sm` (h-8, text-xs), `md` (h-10, text-sm, default), `lg` (h-12, text-base). **Icon position:** `inline` (default) or `top` (stacks icon above label). **Orientation:** `horizontal` (default) or `vertical` (line variant renders left-edge indicator). Hover: `bg-secondary-hover` (default) / `text-primary` (line). Selected: `bg-background` + `text-primary font-semibold`. Line variant underline: `bg-primary`. |
531
- | Select | Item hover: `bg-primary/[0.08]`. Selected: `text-primary font-medium` + checkmark |
570
+ | Tabs | **Variants:** `default` (pill, `bg-tabs`) and `line` (underline, transparent bg). **Sizes:** `sm` (h-8, text-xs), `md` (h-10, text-sm, default), `lg` (h-12, text-base). **Icon position:** `inline` (default) or `top` (stacks icon above label). **Orientation:** `horizontal` (default) or `vertical` (line variant renders left-edge indicator). Hover: `bg-secondary-hover` (default) / `text-primary` (line). Selected: `bg-tabs-active` + `text-primary font-semibold`. Line variant underline: `bg-primary`. |
571
+ | Select | Item hover: `bg-primary/[0.08]`. Selected: `text-primary font-medium` + checkmark. `SelectTrigger` accepts `readOnly` prop: blocks interaction, retains full default appearance, chevron renders at `opacity-30` |
532
572
  | Progress | Track: `bg-primary/20`. Indicator: `bg-primary`. Radius: `rounded-2xs` |
533
573
  | Spinner | Inherits parent text color. **Always pass `text-primary` for standalone use** |
534
574
  | Switch | Checked track: `bg-slider-range`. Checked thumb: `bg-primary` |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trading-game/design-intelligence-layer",
3
- "version": "0.8.7",
3
+ "version": "0.8.9",
4
4
  "description": "Trading Game Design System — shadcn/ui components with Tailwind CSS v4",
5
5
  "type": "module",
6
6
  "main": "./dist/index.cjs",
package/src/styles.css CHANGED
@@ -55,6 +55,8 @@
55
55
  --color-overlay: var(--overlay);
56
56
  --color-slider-range: var(--slider-range);
57
57
  --color-semantic-info: var(--semantic-info);
58
+ --color-tabs: var(--tabs);
59
+ --color-tabs-active: var(--tabs-active);
58
60
  --spacing-layout-gutter: var(--semantic-layout-gutter);
59
61
  --spacing-layout-margin-inline: var(--semantic-layout-margin-inline);
60
62
  --max-width-layout-diagram-default: var(--semantic-layout-diagram-max-default);
@@ -165,8 +167,31 @@
165
167
  --primitive-violet-500: oklch(0.601 0.263 301.6);
166
168
  /* #A040FF */
167
169
 
170
+ /* ── Mono alpha scale ── */
171
+ --primitive-mono-alpha-4: oklch(0 0 0 / 4%);
172
+ --primitive-mono-alpha-8: oklch(0 0 0 / 8%);
173
+ --primitive-mono-alpha-16: oklch(0 0 0 / 16%);
174
+ --primitive-mono-alpha-24: oklch(0 0 0 / 24%);
175
+ --primitive-mono-alpha-32: oklch(0 0 0 / 32%);
176
+ --primitive-mono-alpha-40: oklch(0 0 0 / 40%);
177
+ --primitive-mono-alpha-50: oklch(0 0 0 / 50%);
178
+ --primitive-mono-alpha-64: oklch(0 0 0 / 64%);
179
+ --primitive-mono-alpha-80: oklch(0 0 0 / 80%);
180
+
181
+ /* ── Blue alpha scale ── */
182
+ --primitive-blue-alpha-4: oklch(0.476 0.297 267.4 / 4%);
183
+ --primitive-blue-alpha-8: oklch(0.476 0.297 267.4 / 8%);
184
+ --primitive-blue-alpha-16: oklch(0.476 0.297 267.4 / 16%);
185
+ --primitive-blue-alpha-24: oklch(0.476 0.297 267.4 / 24%);
186
+ --primitive-blue-alpha-32: oklch(0.476 0.297 267.4 / 32%);
187
+ --primitive-blue-alpha-40: oklch(0.476 0.297 267.4 / 40%);
188
+ --primitive-blue-alpha-50: oklch(0.476 0.297 267.4 / 50%);
189
+ --primitive-blue-alpha-64: oklch(0.476 0.297 267.4 / 64%);
190
+ --primitive-blue-alpha-80: oklch(0.476 0.297 267.4 / 80%);
191
+
168
192
  /* ── Overlay ── */
169
- --primitive-black-50: oklch(0 0 0 / 50%);
193
+ --primitive-black-50: var(--primitive-mono-alpha-50);
194
+ /* @deprecated — use --primitive-mono-alpha-50 */
170
195
 
171
196
  /* ── Transitions — Duration scale ── */
172
197
  --primitive-duration-instant: 50ms;
@@ -232,6 +257,8 @@
232
257
  --semantic-info: var(--primitive-sky-600);
233
258
  --semantic-error: var(--primitive-red-600);
234
259
  --semantic-warning: var(--primitive-orange-500);
260
+ --tabs: var(--primitive-mono-alpha-4);
261
+ --tabs-active: var(--primitive-mono-50);
235
262
  --semantic-layout-diagram-max-default: var(--primitive-layout-diagram-max-default);
236
263
  --semantic-layout-diagram-max-small: var(--primitive-layout-diagram-max-small);
237
264
  --semantic-layout-diagram-max-medium: var(--primitive-layout-diagram-max-medium);