@trading-game/design-intelligence-layer 0.12.2 → 0.12.3
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.
- package/README.md +5 -3
- package/dist/index.cjs +4 -0
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -1
- package/guides/design-system-guide/trading-game-ds-guide.md +10 -8
- package/guides/rules/design-system-consuming-project.mdc +14 -3
- package/package.json +1 -1
|
@@ -393,11 +393,13 @@ The design system uses a custom radius scale (base = 10px). Use these named toke
|
|
|
393
393
|
|
|
394
394
|
### 6.1 — Variants
|
|
395
395
|
|
|
396
|
-
| Variant
|
|
397
|
-
|
|
|
398
|
-
| `primary`
|
|
399
|
-
| `
|
|
400
|
-
| `
|
|
396
|
+
| Variant | Background | Text Color | Border | Hover | Use on |
|
|
397
|
+
| -------------------- | --------------------------------- | ---------------------------------- | ---------------------------------------- | ---------------------------------------- | -------------- |
|
|
398
|
+
| `primary` | `bg-primary` | `text-on-prominent-static-inverse` | none | `bg-primary-hover` | Light surfaces |
|
|
399
|
+
| `primary-inverse` | `bg-on-prominent-static-inverse` | `text-primary` | none | `bg-on-prominent-static-inverse/80` | Dark/coloured surfaces |
|
|
400
|
+
| `secondary` | transparent | `text-on-prominent` | `border-[1.5px] border-border-prominent` | `bg-secondary-hover` | Light surfaces |
|
|
401
|
+
| `secondary-inverse` | transparent | `text-on-prominent-static-inverse` | `border-[1.5px] border-on-prominent-static-inverse` | `bg-on-prominent-static-inverse/10` | Dark/coloured surfaces |
|
|
402
|
+
| `tertiary` | transparent | `text-primary` | none | `bg-primary/[0.08]` | Light surfaces |
|
|
401
403
|
|
|
402
404
|
### 6.2 — Sizes
|
|
403
405
|
|
|
@@ -427,8 +429,8 @@ All buttons: `font-display font-bold`, sentence case (no `uppercase`, no `tracki
|
|
|
427
429
|
| Hover | Color shift per variant (see above) |
|
|
428
430
|
| Focus | 3px ring with `ring-ring/50` opacity |
|
|
429
431
|
| Pressed | `active:opacity-60` |
|
|
430
|
-
| Loading | `opacity-24`, `pointer-events-none`, `data-loading`, `aria-busy` — applies to all variants
|
|
431
|
-
| Disabled | `opacity-24`, `pointer-events-none` — applies to all variants
|
|
432
|
+
| Loading | `opacity-24`, `pointer-events-none`, `data-loading`, `aria-busy` — applies to all variants |
|
|
433
|
+
| Disabled | `opacity-24`, `pointer-events-none` — applies to all variants |
|
|
432
434
|
|
|
433
435
|
---
|
|
434
436
|
|
|
@@ -568,7 +570,7 @@ These are styling behaviors you can't discover from TypeScript types alone:
|
|
|
568
570
|
|
|
569
571
|
| Component | Note |
|
|
570
572
|
|-----------|------|
|
|
571
|
-
| Button | `font-display font-bold`, sentence case (no `uppercase`).
|
|
573
|
+
| Button | `font-display font-bold`, sentence case (no `uppercase`). **Variants:** `primary` (blue fill, light surfaces), `primary-inverse` (white fill + blue text, dark/coloured surfaces), `secondary` (black outline, light surfaces), `secondary-inverse` (white outline + white text, dark/coloured surfaces), `tertiary` (text-only, light surfaces). **Loading state:** pass `loading` prop — button automatically renders a centred `Spinner`, hides children with `invisible` to preserve width. Do NOT manually place `<Spinner>` or "Loading" text inside the button. |
|
|
572
574
|
| Card | Flat by default (no shadow). Add elevation manually: `className="shadow-sm"` |
|
|
573
575
|
| Input | Resting: `border-input`. Focus: `border-ring` + `ring-[3px] ring-ring/50`. Radius: `rounded-sm` (6px) |
|
|
574
576
|
| InputGroup | Wraps `Input` with inline addons (icons, buttons, text). **Sizes:** `sm` (h-8) / `md` (h-10, default) / `lg` (h-12) — pass `size` to `InputGroup`, it flows to `InputGroupInput` via context. **Padding:** when any `inline-start` or `inline-end` addon is present, input text gets equal `pl-2 pr-2` (8px) on both sides for visual symmetry. Without addons, Input's default `px-3`/`px-4` applies. |
|
|
@@ -142,9 +142,20 @@ Without this, Tailwind CSS will not process any styles. Next.js projects do NOT
|
|
|
142
142
|
|
|
143
143
|
### Button variants
|
|
144
144
|
```tsx
|
|
145
|
-
|
|
146
|
-
<Button variant="
|
|
147
|
-
<Button variant="
|
|
145
|
+
// Light surfaces
|
|
146
|
+
<Button variant="primary" /> // Blue filled — main CTA
|
|
147
|
+
<Button variant="secondary" /> // Black outline — secondary actions
|
|
148
|
+
<Button variant="tertiary" /> // Text only — minimal
|
|
149
|
+
|
|
150
|
+
// Dark / coloured surfaces
|
|
151
|
+
<Button variant="primary-inverse" /> // White filled + blue text — main CTA on dark bg
|
|
152
|
+
<Button variant="secondary-inverse" /> // White outline + white text — secondary on dark bg
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
All variants support icon sizes — use `size="icon-lg|icon-md|icon-sm|icon-xs"` for icon-only buttons on any variant:
|
|
156
|
+
```tsx
|
|
157
|
+
<Button variant="primary-inverse" size="icon-md"><Bell /></Button>
|
|
158
|
+
<Button variant="secondary-inverse" size="icon-sm"><X /></Button>
|
|
148
159
|
```
|
|
149
160
|
|
|
150
161
|
### Badge variants
|
package/package.json
CHANGED