@deriv-com/trading-game-design-system 0.2.15 → 0.2.17

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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/styles.css +14 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@deriv-com/trading-game-design-system",
3
- "version": "0.2.15",
3
+ "version": "0.2.17",
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
@@ -36,6 +36,8 @@
36
36
  --color-accent-foreground: var(--accent-foreground);
37
37
  --color-accent: var(--accent);
38
38
  --color-accent-hover: var(--accent-hover);
39
+ --color-brand-accent: var(--brand-accent);
40
+ --color-brand-accent-hover: var(--brand-accent-hover);
39
41
  --color-muted-foreground: var(--muted-foreground);
40
42
  --color-muted: var(--muted);
41
43
  --color-secondary-foreground: var(--secondary-foreground);
@@ -90,9 +92,11 @@
90
92
  --accent-foreground: oklch(0.929 0.027 179.8);
91
93
  --accent-hover: oklch(0.261 0.034 221.5);
92
94
  --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
+ --border: oklch(0.226 0.042 215.0); /* #0F2830 border-dividers */
96
+ --input: oklch(0.226 0.042 215.0); /* #0F2830 border-dividers */
95
97
  --ring: oklch(0.905 0.155 194.8); /* cyan ring for focus */
98
+ --brand-accent: oklch(0.62 0.185 38); /* #FF6600 accent orange */
99
+ --brand-accent-hover: oklch(0.52 0.168 38); /* #D45200 accent hover */
96
100
  --badge-rank: oklch(0.601 0.263 301.6); /* #A040FF violet — badge/rank accent */
97
101
  --semantic-win: oklch(0.880 0.208 157.4); /* #00FF9F */
98
102
  --semantic-loss: oklch(0.653 0.234 18.5); /* #FF3355 */
@@ -106,7 +110,7 @@
106
110
  --sidebar-primary-foreground: oklch(0.138 0.018 188.4);
107
111
  --sidebar-accent: oklch(0.206 0.023 215.8);
108
112
  --sidebar-accent-foreground: oklch(0.929 0.027 179.8);
109
- --sidebar-border: oklch(1 0 0 / 10%);
113
+ --sidebar-border: oklch(0.226 0.042 215.0); /* #0F2830 */
110
114
  --sidebar-ring: oklch(0.905 0.155 194.8);
111
115
  }
112
116
 
@@ -134,9 +138,11 @@
134
138
  --accent-foreground: oklch(0.929 0.027 179.8);
135
139
  --accent-hover: oklch(0.261 0.034 221.5);
136
140
  --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%);
141
+ --border: oklch(0.226 0.042 215.0); /* #0F2830 border-dividers */
142
+ --input: oklch(0.226 0.042 215.0); /* #0F2830 border-dividers */
139
143
  --ring: oklch(0.905 0.155 194.8); /* cyan ring for focus */
144
+ --brand-accent: oklch(0.62 0.185 38); /* #FF6600 accent orange */
145
+ --brand-accent-hover: oklch(0.52 0.168 38); /* #D45200 accent hover */
140
146
  /* Badge/rank accent */
141
147
  --badge-rank: oklch(0.601 0.263 301.6); /* #A040FF violet */
142
148
  /* Semantic trading colors */
@@ -155,13 +161,14 @@
155
161
  --sidebar-primary-foreground: oklch(0.138 0.018 188.4);
156
162
  --sidebar-accent: oklch(0.206 0.023 215.8);
157
163
  --sidebar-accent-foreground: oklch(0.929 0.027 179.8);
158
- --sidebar-border: oklch(1 0 0 / 10%);
164
+ --sidebar-border: oklch(0.226 0.042 215.0); /* #0F2830 */
159
165
  --sidebar-ring: oklch(0.905 0.155 194.8);
160
166
  }
161
167
 
162
168
  @layer base {
163
169
  * {
164
- @apply border-border outline-ring/50;
170
+ border-color: var(--color-border);
171
+ outline-color: color-mix(in oklch, var(--color-ring) 50%, transparent);
165
172
  }
166
173
  body {
167
174
  @apply bg-background text-foreground font-sans antialiased;