@trading-game/design-intelligence-layer 0.12.1 → 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
package/README.md
CHANGED
|
@@ -173,9 +173,11 @@ Blocks are pre-composed UI patterns built from design system primitives. They ar
|
|
|
173
173
|
## Button variants and sizes
|
|
174
174
|
|
|
175
175
|
```tsx
|
|
176
|
-
<Button variant="primary" />
|
|
177
|
-
<Button variant="
|
|
178
|
-
<Button variant="
|
|
176
|
+
<Button variant="primary" /> // Blue filled — main CTA (light surfaces)
|
|
177
|
+
<Button variant="primary-inverse" /> // White filled + blue text — main CTA on dark/coloured surfaces
|
|
178
|
+
<Button variant="secondary" /> // Black outline — secondary actions (light surfaces)
|
|
179
|
+
<Button variant="secondary-inverse" /> // White outline + white text — secondary actions on dark/coloured surfaces
|
|
180
|
+
<Button variant="tertiary" /> // Text only — minimal (light surfaces)
|
|
179
181
|
|
|
180
182
|
// Sizes
|
|
181
183
|
<Button size="lg" /> // 48px height (default)
|
package/dist/index.cjs
CHANGED
|
@@ -580,7 +580,11 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
|
|
|
580
580
|
variant: {
|
|
581
581
|
// Primary brand blue (#2323FF)
|
|
582
582
|
primary: "bg-primary text-on-prominent-static-inverse hover:bg-primary-hover",
|
|
583
|
+
// Primary Inverse — white bg + blue text; for use on dark/coloured surfaces
|
|
584
|
+
"primary-inverse": "bg-on-prominent-static-inverse text-primary hover:bg-on-prominent-static-inverse/80",
|
|
583
585
|
secondary: "bg-transparent border-[1.5px] border-border-prominent text-on-prominent hover:bg-secondary-hover",
|
|
586
|
+
// Secondary Inverse — white border + white text; for use on dark/coloured surfaces
|
|
587
|
+
"secondary-inverse": "bg-transparent border-[1.5px] border-on-prominent-static-inverse text-on-prominent-static-inverse hover:bg-on-prominent-static-inverse/10",
|
|
584
588
|
tertiary: "bg-transparent text-primary hover:bg-primary/[0.08]"
|
|
585
589
|
},
|
|
586
590
|
size: {
|