@deriv-com/trading-game-design-system 0.2.10 → 0.2.12

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 (9) hide show
  1. package/README.md +21 -11
  2. package/dist/index.cjs +675 -778
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.d.cts +10 -18
  5. package/dist/index.d.ts +10 -18
  6. package/dist/index.js +523 -622
  7. package/dist/index.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/styles.css +87 -85
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deriv-com/trading-game-design-system",
3
- "version": "0.2.10",
3
+ "version": "0.2.12",
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
@@ -28,11 +28,7 @@
28
28
  --color-sidebar-primary: var(--sidebar-primary);
29
29
  --color-sidebar-foreground: var(--sidebar-foreground);
30
30
  --color-sidebar: var(--sidebar);
31
- --color-chart-5: var(--chart-5);
32
- --color-chart-4: var(--chart-4);
33
- --color-chart-3: var(--chart-3);
34
- --color-chart-2: var(--chart-2);
35
- --color-chart-1: var(--chart-1);
31
+ --color-badge-rank: var(--badge-rank);
36
32
  --color-ring: var(--ring);
37
33
  --color-input: var(--input);
38
34
  --color-border: var(--border);
@@ -58,6 +54,9 @@
58
54
  --color-text-secondary: var(--text-secondary);
59
55
  --color-text-tertiary: var(--text-tertiary);
60
56
  --color-text-decorative: var(--text-decorative);
57
+ --color-overlay: var(--overlay);
58
+ --radius-2xs: calc(var(--radius) - 8px);
59
+ --radius-xs: calc(var(--radius) - 6px);
61
60
  --radius-sm: calc(var(--radius) - 4px);
62
61
  --radius-md: calc(var(--radius) - 2px);
63
62
  --radius-lg: var(--radius);
@@ -71,90 +70,93 @@
71
70
  --font-barlow: "Barlow", ui-sans-serif, system-ui, sans-serif;
72
71
  --font-orbitron: "Orbitron", ui-sans-serif, system-ui, sans-serif;
73
72
  --radius: 0.625rem;
74
- /* Light mode */
75
- --background: oklch(1 0 0);
76
- --foreground: oklch(0.07 0.012 165);
77
- --card: oklch(1 0 0);
78
- --card-foreground: oklch(0.07 0.012 165);
79
- --popover: oklch(1 0 0);
80
- --popover-foreground: oklch(0.07 0.012 165);
81
- --primary: oklch(0.905 0.158 194);
82
- --primary-foreground: oklch(0.07 0.012 165);
83
- --primary-hover: oklch(0.80 0.130 194);
84
- --secondary: oklch(0.764 0.188 76 / 4%);
85
- --secondary-hover: oklch(0.764 0.188 76);
86
- --secondary-foreground: oklch(0.12 0.015 160);
87
- --muted: oklch(0.96 0 0);
88
- --muted-foreground: oklch(0.52 0 0);
89
- --accent: oklch(0.96 0 0);
90
- --accent-foreground: oklch(0.12 0.015 160);
91
- --accent-hover: oklch(0.92 0 0);
92
- --destructive: oklch(0.53 0.220 27);
93
- --border: oklch(0.92 0 0);
94
- --input: oklch(0.92 0 0);
95
- --ring: oklch(0.70 0 0);
96
- --chart-1: oklch(0.62 0.200 41);
97
- --chart-2: oklch(0.83 0.130 196);
98
- --chart-3: oklch(0.37 0.075 215);
99
- --chart-4: oklch(0.84 0.170 85);
100
- --chart-5: oklch(0.764 0.188 76);
101
- --semantic-win: oklch(0.87 0.200 155);
102
- --semantic-loss: oklch(0.60 0.240 15);
103
- --semantic-warning: oklch(0.68 0.210 48);
104
- --text-secondary: oklch(0.52 0 0);
105
- --text-tertiary: oklch(0.38 0 0);
106
- --text-decorative: oklch(0.12 0.015 160);
107
- --sidebar: oklch(1 0 0);
108
- --sidebar-foreground: oklch(0.07 0.012 165);
109
- --sidebar-primary: oklch(0.12 0.015 160);
110
- --sidebar-primary-foreground: oklch(1 0 0);
111
- --sidebar-accent: oklch(0.96 0 0);
112
- --sidebar-accent-foreground: oklch(0.12 0.015 160);
113
- --sidebar-border: oklch(0.92 0 0);
114
- --sidebar-ring: oklch(0.70 0 0);
73
+ /* Dark theme — single mode (light mode reserved for future) */
74
+ --background: oklch(0.138 0.018 188.4); /* #020B0A page bg */
75
+ --foreground: oklch(0.929 0.027 179.8); /* #D5EEE8 primary text */
76
+ --card: oklch(0.097 0.050 305.8); /* #06000F card/panel bg */
77
+ --card-foreground: oklch(0.929 0.027 179.8);
78
+ --popover: oklch(0.206 0.023 215.8); /* #0A1A1E elevated surfaces */
79
+ --popover-foreground: oklch(0.929 0.027 179.8);
80
+ --primary: oklch(0.905 0.155 194.8); /* #00FFFF */
81
+ --primary-foreground: oklch(0.138 0.018 188.4); /* #020B0A */
82
+ --primary-hover: oklch(0.788 0.134 194.8); /* #00D4D4 */
83
+ --secondary: oklch(0.827 0.171 80.5 / 4%); /* #FFB800 @ 4% */
84
+ --secondary-hover: oklch(0.827 0.171 80.5); /* #FFB800 amber */
85
+ --secondary-foreground: oklch(0.929 0.027 179.8);
86
+ --muted: oklch(0.206 0.023 215.8);
87
+ --muted-foreground: oklch(0.701 0.050 206.2); /* #7AA8AE */
88
+ /* shadcn accent = UI interaction surface */
89
+ --accent: oklch(0.206 0.023 215.8);
90
+ --accent-foreground: oklch(0.929 0.027 179.8);
91
+ --accent-hover: oklch(0.261 0.034 221.5);
92
+ --destructive: oklch(0.653 0.234 18.5); /* #FF3355 */
93
+ --border: oklch(1 0 0 / 10%); /* rgba(255,255,255,0.10) */
94
+ --input: oklch(1 0 0 / 10%);
95
+ --ring: oklch(0.905 0.155 194.8); /* cyan ring for focus */
96
+ --badge-rank: oklch(0.601 0.263 301.6); /* #A040FF violet — badge/rank accent */
97
+ --semantic-win: oklch(0.880 0.208 157.4); /* #00FF9F */
98
+ --semantic-loss: oklch(0.653 0.234 18.5); /* #FF3355 */
99
+ --semantic-warning: oklch(0.751 0.179 58.3); /* #FF8C00 */
100
+ --text-secondary: oklch(0.701 0.050 206.2); /* #7AA8AE */
101
+ --text-tertiary: oklch(0.439 0.054 204.1); /* #295B60 */
102
+ --text-decorative: oklch(0.226 0.024 230.9); /* #101E25 */
103
+ --overlay: oklch(0 0 0 / 50%); /* rgba(0,0,0,0.50) modal scrim */ oklch(0.097 0.050 305.8);
104
+ --sidebar-foreground: oklch(0.929 0.027 179.8);
105
+ --sidebar-primary: oklch(0.905 0.155 194.8);
106
+ --sidebar-primary-foreground: oklch(0.138 0.018 188.4);
107
+ --sidebar-accent: oklch(0.206 0.023 215.8);
108
+ --sidebar-accent-foreground: oklch(0.929 0.027 179.8);
109
+ --sidebar-border: oklch(1 0 0 / 10%);
110
+ --sidebar-ring: oklch(0.905 0.155 194.8);
115
111
  }
116
112
 
117
113
  .dark {
118
- --background: oklch(0.07 0.012 165);
119
- --foreground: oklch(1 0 0);
120
- --card: oklch(0.12 0.015 160);
121
- --card-foreground: oklch(1 0 0);
122
- --popover: oklch(0.20 0.013 155);
123
- --popover-foreground: oklch(1 0 0);
124
- --primary: oklch(0.905 0.158 194);
125
- --primary-foreground: oklch(0.07 0.012 165);
126
- --primary-hover: oklch(0.80 0.130 194);
127
- --secondary: oklch(0.764 0.188 76 / 4%);
128
- --secondary-hover: oklch(0.764 0.188 76);
129
- --secondary-foreground: oklch(1 0 0);
130
- --muted: oklch(0.20 0.013 155);
131
- --muted-foreground: oklch(0.70 0 0);
132
- --accent: oklch(0.28 0.010 155);
133
- --accent-foreground: oklch(1 0 0);
134
- --accent-hover: oklch(0.37 0.006 155);
135
- --destructive: oklch(0.64 0.185 22);
136
- --border: oklch(1 0 0 / 10%);
137
- --input: oklch(1 0 0 / 15%);
138
- --ring: oklch(0.52 0 0);
139
- --chart-1: oklch(0.44 0.240 265);
140
- --chart-2: oklch(0.70 0.175 160);
141
- --chart-3: oklch(0.764 0.188 76);
142
- --chart-4: oklch(0.59 0.270 308);
143
- --chart-5: oklch(0.64 0.235 12);
144
- --semantic-win: oklch(0.87 0.200 155);
145
- --semantic-loss: oklch(0.60 0.240 15);
146
- --semantic-warning: oklch(0.68 0.210 48);
147
- --text-secondary: oklch(0.70 0 0);
148
- --text-tertiary: oklch(0.40 0 0);
149
- --text-decorative: oklch(0.20 0.013 155);
150
- --sidebar: oklch(0.12 0.015 160);
151
- --sidebar-foreground: oklch(1 0 0);
152
- --sidebar-primary: oklch(0.44 0.240 265);
153
- --sidebar-primary-foreground: oklch(1 0 0);
154
- --sidebar-accent: oklch(0.20 0.013 155);
155
- --sidebar-accent-foreground: oklch(1 0 0);
114
+ /* Backgrounds — exact Figma hex values */
115
+ --background: oklch(0.138 0.018 188.4); /* #020B0A page bg */
116
+ --foreground: oklch(0.929 0.027 179.8); /* #D5EEE8 primary text */
117
+ --card: oklch(0.097 0.050 305.8); /* #06000F card/panel bg */
118
+ --card-foreground: oklch(0.929 0.027 179.8);
119
+ --popover: oklch(0.206 0.023 215.8); /* #0A1A1E elevated surfaces */
120
+ --popover-foreground: oklch(0.929 0.027 179.8);
121
+ /* Primary cyan */
122
+ --primary: oklch(0.905 0.155 194.8); /* #00FFFF */
123
+ --primary-foreground: oklch(0.138 0.018 188.4); /* #020B0A */
124
+ --primary-hover: oklch(0.788 0.134 194.8); /* #00D4D4 */
125
+ /* Supporting — amber */
126
+ --secondary: oklch(0.827 0.171 80.5 / 4%); /* #FFB800 @ 4% */
127
+ --secondary-hover: oklch(0.827 0.171 80.5); /* #FFB800 */
128
+ --secondary-foreground: oklch(0.929 0.027 179.8);
129
+ /* Surfaces */
130
+ --muted: oklch(0.206 0.023 215.8);
131
+ --muted-foreground: oklch(0.701 0.050 206.2); /* #7AA8AE */
132
+ /* shadcn accent = UI interaction surface (NOT the brand orange) */
133
+ --accent: oklch(0.206 0.023 215.8);
134
+ --accent-foreground: oklch(0.929 0.027 179.8);
135
+ --accent-hover: oklch(0.261 0.034 221.5);
136
+ --destructive: oklch(0.653 0.234 18.5); /* #FF3355 */
137
+ --border: oklch(1 0 0 / 10%); /* rgba(255,255,255,0.10) */
138
+ --input: oklch(1 0 0 / 10%);
139
+ --ring: oklch(0.905 0.155 194.8); /* cyan ring for focus */
140
+ /* Badge/rank accent */
141
+ --badge-rank: oklch(0.601 0.263 301.6); /* #A040FF violet */
142
+ /* Semantic trading colors */
143
+ --semantic-win: oklch(0.880 0.208 157.4); /* #00FF9F */
144
+ --semantic-loss: oklch(0.653 0.234 18.5); /* #FF3355 */
145
+ --semantic-warning: oklch(0.751 0.179 58.3); /* #FF8C00 */
146
+ /* Text scale */
147
+ --text-secondary: oklch(0.701 0.050 206.2); /* #7AA8AE */
148
+ --text-tertiary: oklch(0.439 0.054 204.1); /* #295B60 */
149
+ --text-decorative: oklch(0.226 0.024 230.9); /* #101E25 */
150
+ --overlay: oklch(0 0 0 / 50%); /* rgba(0,0,0,0.50) modal scrim */
151
+ /* Sidebar */
152
+ --sidebar: oklch(0.097 0.050 305.8);
153
+ --sidebar-foreground: oklch(0.929 0.027 179.8);
154
+ --sidebar-primary: oklch(0.905 0.155 194.8);
155
+ --sidebar-primary-foreground: oklch(0.138 0.018 188.4);
156
+ --sidebar-accent: oklch(0.206 0.023 215.8);
157
+ --sidebar-accent-foreground: oklch(0.929 0.027 179.8);
156
158
  --sidebar-border: oklch(1 0 0 / 10%);
157
- --sidebar-ring: oklch(0.37 0 0);
159
+ --sidebar-ring: oklch(0.905 0.155 194.8);
158
160
  }
159
161
 
160
162
  @layer base {