@deriv-com/trading-game-design-system 0.2.10 → 0.2.11
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 +21 -11
- package/dist/index.cjs +641 -720
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +8 -16
- package/dist/index.d.ts +8 -16
- package/dist/index.js +483 -558
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -49,7 +49,7 @@ npm install react react-dom tailwindcss
|
|
|
49
49
|
|
|
50
50
|
## What's inside
|
|
51
51
|
|
|
52
|
-
- **
|
|
52
|
+
- **55 UI components** — buttons, forms, dialogs, charts, sidebars, and more
|
|
53
53
|
- **Design tokens** — CSS custom properties for color, radius, and typography synced from Figma
|
|
54
54
|
- **Dark mode** — built-in light/dark theming via CSS variables
|
|
55
55
|
- **TypeScript** — full type definitions included
|
|
@@ -68,7 +68,6 @@ npm install react react-dom tailwindcss
|
|
|
68
68
|
| Badge | `Badge, badgeVariants` |
|
|
69
69
|
| Breadcrumb | `Breadcrumb, BreadcrumbList, BreadcrumbItem, ...` |
|
|
70
70
|
| Button | `Button, buttonVariants` |
|
|
71
|
-
| Button Group | `ButtonGroup, ButtonGroupSeparator, ButtonGroupText` |
|
|
72
71
|
| Calendar | `Calendar, CalendarDayButton` |
|
|
73
72
|
| Card | `Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter` |
|
|
74
73
|
| Carousel | `Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext` |
|
|
@@ -122,26 +121,37 @@ npm install react react-dom tailwindcss
|
|
|
122
121
|
|
|
123
122
|
```tsx
|
|
124
123
|
// Cyan family
|
|
125
|
-
<Button variant="primary" /> //
|
|
126
|
-
<Button variant="secondary" /> //
|
|
127
|
-
<Button variant="tertiary" /> //
|
|
128
|
-
|
|
129
|
-
// Amber family
|
|
130
|
-
<Button variant="amber-primary" /> // amber filled
|
|
131
|
-
<Button variant="amber-secondary" /> // amber outline
|
|
132
|
-
<Button variant="amber-tertiary" /> // amber text
|
|
124
|
+
<Button variant="primary" /> // cyan filled — main CTA
|
|
125
|
+
<Button variant="secondary" /> // cyan outline — secondary action
|
|
126
|
+
<Button variant="tertiary" /> // cyan text — minimal
|
|
133
127
|
|
|
134
128
|
// Sizes
|
|
135
129
|
<Button size="lg" /> // 48px height (default)
|
|
136
130
|
<Button size="md" /> // 40px height
|
|
137
131
|
<Button size="sm" /> // 32px height
|
|
138
132
|
<Button size="xs" /> // 24px height
|
|
139
|
-
<Button size="icon" />
|
|
133
|
+
<Button size="icon-lg" /> // 48px square
|
|
140
134
|
<Button size="icon-md" /> // 40px square
|
|
141
135
|
<Button size="icon-sm" /> // 28px square
|
|
142
136
|
<Button size="icon-xs" /> // 24px square
|
|
143
137
|
```
|
|
144
138
|
|
|
139
|
+
## Badge variants
|
|
140
|
+
|
|
141
|
+
```tsx
|
|
142
|
+
<Badge /> // default — cyan filled
|
|
143
|
+
<Badge variant="fill" /> // cyan tint fill
|
|
144
|
+
<Badge variant="fill-amber" /> // amber tint fill
|
|
145
|
+
<Badge variant="fill-pink" /> // pink tint fill
|
|
146
|
+
<Badge variant="fill-purple" /> // purple tint fill (#A040FF)
|
|
147
|
+
<Badge variant="ghost" /> // transparent, muted text
|
|
148
|
+
|
|
149
|
+
// Sizes
|
|
150
|
+
<Badge size="default" /> // 20px height
|
|
151
|
+
<Badge size="md" /> // 32px height
|
|
152
|
+
<Badge size="lg" /> // 40px height
|
|
153
|
+
```
|
|
154
|
+
|
|
145
155
|
---
|
|
146
156
|
|
|
147
157
|
## Design tokens
|