@j3m-quantum/ui 1.3.1 → 1.5.0

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/dist/index.cjs +193 -116
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +29 -6
  4. package/dist/index.d.ts +29 -6
  5. package/dist/index.js +191 -116
  6. package/dist/index.js.map +1 -1
  7. package/dist/styles/generated/variables.css +263 -0
  8. package/dist/styles/index.css +165 -18
  9. package/package.json +5 -3
package/dist/styles/generated/variables.css ADDED
@@ -0,0 +1,263 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated.
3
+ */
4
+
5
+ :root {
6
+ --j3m-glass-light-10: rgba(255, 255, 255, 0.1);
7
+ --j3m-glass-light-20: rgba(255, 255, 255, 0.2);
8
+ --j3m-glass-light-40: rgba(255, 255, 255, 0.4);
9
+ --j3m-glass-light-50: rgba(255, 255, 255, 0.5);
10
+ --j3m-glass-light-80: rgba(255, 255, 255, 0.8);
11
+ --j3m-glass-light-subtle: rgba(255, 255, 255, 0.1);
12
+ --j3m-glass-light-default: rgba(255, 255, 255, 0.5);
13
+ --j3m-glass-light-hover: rgba(255, 255, 255, 0.8);
14
+ --j3m-glass-light-strong: rgba(255, 255, 255, 0.81);
15
+ --j3m-glass-dark-10: rgba(13, 17, 23, 0.1);
16
+ --j3m-glass-dark-20: rgba(13, 17, 23, 0.2);
17
+ --j3m-glass-dark-40: rgba(13, 17, 23, 0.4);
18
+ --j3m-glass-dark-50: rgba(13, 17, 23, 0.5);
19
+ --j3m-glass-dark-60: rgba(13, 17, 23, 0.6);
20
+ --j3m-glass-dark-70: rgba(13, 17, 23, 0.7);
21
+ --j3m-glass-dark-80: rgba(13, 17, 23, 0.8);
22
+ --j3m-glass-dark-90: rgba(13, 17, 23, 0.9);
23
+ --j3m-glass-dark-95: rgba(13, 17, 23, 0.95);
24
+ --j3m-glass-dark-base: #0d1117;
25
+ --j3m-glass-dark-subtle: rgba(13, 17, 23, 0.3);
26
+ --j3m-glass-dark-muted: rgba(13, 17, 23, 0.4);
27
+ --j3m-glass-dark-surface: rgba(13, 17, 23, 0.7);
28
+ --j3m-glass-dark-surface-hover: rgba(22, 27, 34, 0.8);
29
+ --j3m-glass-dark-surface-active: rgba(30, 35, 42, 0.85);
30
+ --j3m-glass-dark-elevated: rgba(22, 27, 34, 0.85);
31
+ --j3m-glass-dark-elevated-hover: rgba(30, 35, 42, 0.9);
32
+ --j3m-glass-dark-overlay: rgba(22, 27, 34, 0.95);
33
+ --j3m-glass-dark-input: rgba(0, 0, 0, 0.4);
34
+ --j3m-glass-dark-sidebar: rgba(0, 0, 0, 0.6);
35
+ --j3m-glass-dark-element: rgba(255, 255, 255, 0.05);
36
+ --j3m-glass-dark-element-hover: rgba(255, 255, 255, 0.08);
37
+ --j3m-glass-dark-element-active: rgba(255, 255, 255, 0.12);
38
+ --j3m-glass-border-light: rgba(255, 255, 255, 0.3);
39
+ --j3m-glass-border-subtle: rgba(255, 255, 255, 0.1);
40
+ --j3m-glass-border-white: rgba(255, 255, 255, 0.2);
41
+ --j3m-glass-border-dark: rgba(255, 255, 255, 0.08);
42
+ --j3m-glass-border-dark-light: rgba(255, 255, 255, 0.12);
43
+ --j3m-glass-border-dark-subtle: rgba(255, 255, 255, 0.05);
44
+ --j3m-glass-frosted: rgba(255, 255, 255, 0.25);
45
+ --j3m-glass-frosted-strong: rgba(255, 255, 255, 0.4);
46
+ --j3m-glass-frosted-card: rgba(255, 255, 255, 0.35);
47
+ --j3m-glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
48
+ --j3m-glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.08);
49
+ --j3m-glass-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
50
+ --j3m-orange-1: #fffdfb;
51
+ --j3m-orange-2: #fff5ed;
52
+ --j3m-orange-3: #ffe8d9;
53
+ --j3m-orange-4: #ffd4bc;
54
+ --j3m-orange-5: #ffba8f;
55
+ --j3m-orange-6: #ffa66a;
56
+ --j3m-orange-7: #f79d6b;
57
+ --j3m-orange-8: #f58446;
58
+ --j3m-orange-9: #f36c21;
59
+ --j3m-orange-10: #ea5b0c;
60
+ --j3m-orange-11: #ca4f0b;
61
+ --j3m-orange-12: #8f3808;
62
+ --j3m-gray-1: #ffffff;
63
+ --j3m-gray-2: #fafafa;
64
+ --j3m-gray-3: #f0f0f0;
65
+ --j3m-gray-4: #e8e8e8;
66
+ --j3m-gray-5: #e0e0e0;
67
+ --j3m-gray-6: #d2d2d2;
68
+ --j3m-gray-7: #bbbbbb;
69
+ --j3m-gray-8: #a4a4a4;
70
+ --j3m-gray-9: #8e8e8e;
71
+ --j3m-gray-10: #777777;
72
+ --j3m-gray-11: #606060;
73
+ --j3m-gray-12: #333333;
74
+ --j3m-gray-13: #272727;
75
+ --j3m-gray-14: #1a1a1a;
76
+ --j3m-red-9: #fb3748;
77
+ --j3m-red-10: #d00416;
78
+ --j3m-yellow-9: #ffdb43;
79
+ --j3m-yellow-10: #dfb400;
80
+ --j3m-green-9: #84ebb4;
81
+ --j3m-green-10: #1fc16b;
82
+ --j3m-blur-sm: 10px;
83
+ --j3m-blur-md: 20px;
84
+ --j3m-blur-lg: 50px;
85
+ --j3m-blur-frosted: 24px;
86
+ --j3m-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
87
+ --j3m-shadow-default: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
88
+ --j3m-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
89
+ --j3m-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
90
+ --j3m-shadow-glow: 0 0 10px #F36C21;
91
+ --j3m-shadow-glow-active: 0 0 20px #EA5B0C;
92
+ --j3m-radius-none: 0px;
93
+ --j3m-radius-2xs: 4px;
94
+ --j3m-radius-xs: 5px;
95
+ --j3m-radius-s: 8px;
96
+ --j3m-radius-m: 10px;
97
+ --j3m-radius-l: 18px;
98
+ --j3m-radius-xl: 22px;
99
+ --j3m-radius-2xl: 26px;
100
+ --j3m-radius-full: 9999px;
101
+ --j3m-spacing-xs: 8px;
102
+ --j3m-spacing-s: 12px;
103
+ --j3m-spacing-m: 16px;
104
+ --j3m-spacing-l: 24px;
105
+ --j3m-spacing-xl: 32px;
106
+ --j3m-layout-header-height: 56px;
107
+ --j3m-layout-sidebar-width: 256px;
108
+ --j3m-layout-sidebar-width-collapsed: 48px;
109
+ --j3m-stroke-none: 0px;
110
+ --j3m-stroke-s: 1px;
111
+ --j3m-stroke-m: 2px;
112
+ --j3m-stroke-l: 3px;
113
+ --j3m-stroke-xl: 4px;
114
+ --sidebar-primary-foreground: #ffffff;
115
+ --glass-dark-card-foreground: #ffffff;
116
+ --glass-dark-accent-foreground: #ffffff;
117
+ --glass-dark-foreground: rgba(255, 255, 255, 0.95);
118
+ --glass-dark-muted-foreground: rgba(255, 255, 255, 0.6);
119
+ --glass-dark-bg-app: rgba(0, 0, 0, 0);
120
+ --glass-dark-bg-page: rgba(0, 0, 0, 0);
121
+ --glass-dark-bg-surface-active: #404040;
122
+ --glass-dark-bg-elevated-hover: #404040;
123
+ --glass-dark-bg-element-hover: #404040;
124
+ --glass-dark-bg-element-active: #4a4a4a;
125
+ --glass-dark-accent: #404040;
126
+ --glass-dark-sidebar-accent: #404040;
127
+ --glass-dark-shadow-glow: 0 0 20px rgba(243, 108, 33, 0.3);
128
+ --glass-light-bg-app: rgba(0, 0, 0, 0);
129
+ --glass-light-bg-page: rgba(0, 0, 0, 0);
130
+ --glass-light-bg-sidebar: #e8e8e8;
131
+ --glass-light-muted-foreground: rgba(0, 0, 0, 0.55);
132
+ --dark-accent: #404040;
133
+ --dark-destructive-foreground: #ffffff;
134
+ --dark-sidebar-accent: #404040;
135
+ --dark-bg-app: #0d0d0d;
136
+ --dark-bg-page: #1a1a1a;
137
+ --dark-bg-surface-active: #404040;
138
+ --dark-bg-elevated-hover: #404040;
139
+ --dark-bg-subtle: #1a1a1a;
140
+ --dark-bg-element-hover: #404040;
141
+ --dark-bg-element-active: #4d4d4d;
142
+ --dark-bg-input-disabled: #1a1a1a;
143
+ --primary-foreground: #ffffff;
144
+ --destructive-foreground: #ffffff;
145
+ --chart-1: var(--j3m-orange-8);
146
+ --chart-2: var(--j3m-orange-7);
147
+ --chart-3: var(--j3m-orange-9);
148
+ --chart-4: var(--j3m-orange-5);
149
+ --chart-5: var(--j3m-orange-10);
150
+ --j3m-bg-app: var(--j3m-gray-6);
151
+ --j3m-bg-page: var(--j3m-gray-4);
152
+ --j3m-bg-surface: var(--j3m-gray-1);
153
+ --j3m-bg-surface-hover: var(--j3m-gray-2);
154
+ --j3m-bg-surface-active: var(--j3m-gray-3);
155
+ --j3m-bg-elevated: var(--j3m-gray-1);
156
+ --j3m-bg-elevated-hover: var(--j3m-gray-2);
157
+ --j3m-bg-overlay: var(--j3m-gray-1);
158
+ --j3m-bg-muted: var(--j3m-gray-4);
159
+ --j3m-bg-subtle: var(--j3m-gray-3);
160
+ --j3m-bg-element: var(--j3m-gray-4);
161
+ --j3m-bg-element-hover: var(--j3m-gray-5);
162
+ --j3m-bg-element-active: var(--j3m-gray-6);
163
+ --j3m-bg-input: var(--j3m-gray-1);
164
+ --j3m-bg-input-disabled: var(--j3m-gray-3);
165
+ --j3m-bg-sidebar: var(--j3m-gray-4);
166
+ --j3m-bg-toolbar: var(--j3m-gray-5);
167
+ --sidebar: var(--j3m-gray-4);
168
+ --sidebar-foreground: var(--j3m-gray-11);
169
+ --sidebar-primary: var(--j3m-orange-9);
170
+ --sidebar-accent: var(--j3m-gray-3);
171
+ --sidebar-accent-foreground: var(--j3m-gray-12);
172
+ --sidebar-border: var(--j3m-gray-6);
173
+ --sidebar-ring: var(--j3m-orange-9);
174
+ --glass-dark-frosted: var(--j3m-glass-dark-surface);
175
+ --glass-dark-frosted-strong: var(--j3m-glass-dark-elevated);
176
+ --glass-dark-frosted-card: var(--j3m-glass-dark-surface);
177
+ --glass-dark-bg-surface: var(--j3m-gray-13);
178
+ --glass-dark-bg-surface-hover: var(--j3m-gray-12);
179
+ --glass-dark-bg-elevated: var(--j3m-gray-12);
180
+ --glass-dark-bg-overlay: var(--j3m-gray-13);
181
+ --glass-dark-bg-muted: var(--j3m-gray-12);
182
+ --glass-dark-bg-subtle: var(--j3m-gray-11);
183
+ --glass-dark-bg-element: var(--j3m-gray-12);
184
+ --glass-dark-bg-input: var(--j3m-gray-11);
185
+ --glass-dark-bg-input-disabled: var(--j3m-gray-10);
186
+ --glass-dark-bg-sidebar: var(--j3m-gray-13);
187
+ --glass-dark-card: var(--j3m-gray-13);
188
+ --glass-dark-popover: var(--j3m-gray-13);
189
+ --glass-dark-border: var(--j3m-gray-11);
190
+ --glass-dark-secondary: var(--j3m-gray-12);
191
+ --glass-dark-sidebar: var(--j3m-gray-13);
192
+ --glass-dark-sidebar-foreground: var(--j3m-gray-1);
193
+ --glass-dark-sidebar-border: var(--j3m-gray-11);
194
+ --glass-dark-sidebar-accent-foreground: var(--j3m-gray-1);
195
+ --glass-light-bg-surface: var(--j3m-glass-frosted-card);
196
+ --glass-light-bg-surface-hover: var(--j3m-glass-light-50);
197
+ --glass-light-bg-surface-active: var(--j3m-glass-light-80);
198
+ --glass-light-bg-elevated: var(--j3m-glass-light-80);
199
+ --glass-light-bg-elevated-hover: var(--j3m-glass-light-80);
200
+ --glass-light-bg-overlay: var(--j3m-glass-light-strong);
201
+ --glass-light-bg-muted: var(--j3m-glass-light-20);
202
+ --glass-light-bg-subtle: var(--j3m-glass-light-10);
203
+ --glass-light-bg-element: var(--j3m-glass-light-40);
204
+ --glass-light-bg-element-hover: var(--j3m-glass-light-50);
205
+ --glass-light-bg-element-active: var(--j3m-glass-light-80);
206
+ --glass-light-bg-input: var(--j3m-glass-light-50);
207
+ --glass-light-bg-input-disabled: var(--j3m-glass-light-20);
208
+ --glass-light-card: var(--j3m-glass-light-50);
209
+ --glass-light-popover: var(--j3m-gray-1);
210
+ --glass-light-input: var(--j3m-glass-light-50);
211
+ --glass-light-border: var(--j3m-glass-border-light);
212
+ --glass-light-muted: var(--j3m-glass-light-50);
213
+ --glass-light-secondary: var(--j3m-glass-light-80);
214
+ --dark-background: var(--j3m-gray-12);
215
+ --dark-foreground: var(--j3m-gray-1);
216
+ --dark-card: var(--j3m-gray-13);
217
+ --dark-card-foreground: var(--j3m-gray-1);
218
+ --dark-popover: var(--j3m-gray-13);
219
+ --dark-popover-foreground: var(--j3m-gray-1);
220
+ --dark-primary: var(--j3m-orange-8);
221
+ --dark-primary-foreground: var(--j3m-gray-12);
222
+ --dark-secondary: var(--j3m-gray-12);
223
+ --dark-secondary-foreground: var(--j3m-gray-1);
224
+ --dark-muted: var(--j3m-gray-12);
225
+ --dark-muted-foreground: var(--j3m-gray-7);
226
+ --dark-accent-foreground: var(--j3m-gray-1);
227
+ --dark-destructive: var(--j3m-red-10);
228
+ --dark-border: var(--j3m-gray-11);
229
+ --dark-input: var(--j3m-gray-11);
230
+ --dark-ring: var(--j3m-orange-8);
231
+ --dark-sidebar: var(--j3m-gray-13);
232
+ --dark-sidebar-foreground: var(--j3m-gray-1);
233
+ --dark-sidebar-primary: var(--j3m-orange-8);
234
+ --dark-sidebar-primary-foreground: var(--j3m-gray-12);
235
+ --dark-sidebar-accent-foreground: var(--j3m-gray-1);
236
+ --dark-sidebar-border: var(--j3m-gray-11);
237
+ --dark-sidebar-ring: var(--j3m-orange-8);
238
+ --dark-bg-surface: var(--j3m-gray-13);
239
+ --dark-bg-surface-hover: var(--j3m-gray-12);
240
+ --dark-bg-elevated: var(--j3m-gray-12);
241
+ --dark-bg-overlay: var(--j3m-gray-12);
242
+ --dark-bg-muted: var(--j3m-gray-13);
243
+ --dark-bg-element: var(--j3m-gray-12);
244
+ --dark-bg-input: var(--j3m-gray-13);
245
+ --dark-bg-sidebar: var(--j3m-gray-13);
246
+ --primary: var(--j3m-orange-8);
247
+ --secondary: var(--j3m-gray-4);
248
+ --secondary-foreground: var(--j3m-gray-11);
249
+ --accent: var(--j3m-gray-3);
250
+ --accent-foreground: var(--j3m-gray-12);
251
+ --destructive: var(--j3m-red-9);
252
+ --muted: var(--j3m-gray-4);
253
+ --muted-foreground: var(--j3m-gray-9);
254
+ --border: var(--j3m-gray-7);
255
+ --input: var(--j3m-gray-6);
256
+ --ring: var(--j3m-orange-8);
257
+ --background: var(--j3m-gray-1);
258
+ --foreground: var(--j3m-gray-12);
259
+ --card: var(--j3m-gray-1);
260
+ --card-foreground: var(--j3m-gray-12);
261
+ --popover: var(--j3m-gray-1);
262
+ --popover-foreground: var(--j3m-gray-12);
263
+ }
package/dist/styles/index.css CHANGED
@@ -5,8 +5,16 @@
5
5
  Usage:
6
6
  @import "tailwindcss";
7
7
  @import "@j3m-quantum/ui/styles";
8
+
9
+ Token Architecture:
10
+ - Source of Truth: tokens/*.json (Style Dictionary)
11
+ - Generated: src/styles/generated/variables.css
12
+ - This file: Mode overrides, Tailwind mapping, utilities
8
13
  ======================================== */
9
14
 
15
+ /* Import generated primitive tokens from Style Dictionary */
16
+ @import './generated/variables.css';
17
+
10
18
  /* ========================================
11
19
  COLOR SCALES (12-Step, HEX Format)
12
20
 
@@ -514,7 +522,7 @@
514
522
  /* Override frosted glass tokens for dark mode */
515
523
  --j3m-glass-frosted: var(--j3m-glass-dark-surface);
516
524
  --j3m-glass-frosted-strong: var(--j3m-glass-dark-elevated);
517
- --j3m-glass-frosted-card: var(--j3m-glass-dark-surface);
525
+ --j3m-glass-frosted-card: var(--j3m-glass-dark-surface); /* Cards same darkness as sections (70%) */
518
526
  --j3m-glass-border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
519
527
  --j3m-glass-border-light: var(--j3m-glass-dark-border-light);
520
528
  --j3m-glass-border-white: var(--j3m-glass-dark-border);
@@ -1352,13 +1360,16 @@ textarea,
1352
1360
 
1353
1361
  /* --- SWITCH --- */
1354
1362
  .glass-context [data-slot="switch"],
1363
+ .glass-context [data-slot="theme-switch"],
1355
1364
  .glass-context [role="switch"] {
1356
1365
  background: rgba(255, 255, 255, 0.5) !important;
1357
1366
  border-color: rgba(0, 0, 0, 0.15) !important;
1358
1367
  }
1359
1368
 
1360
1369
  .glass-context [data-slot="switch"][data-state="checked"],
1361
- .glass-context [role="switch"][data-state="checked"] {
1370
+ .glass-context [data-slot="theme-switch"][data-state="checked"],
1371
+ .glass-context [role="switch"][data-state="checked"],
1372
+ .glass-context [role="switch"][aria-checked="true"] {
1362
1373
  background: var(--primary) !important;
1363
1374
  border-color: var(--primary) !important;
1364
1375
  }
@@ -1777,6 +1788,25 @@ textarea,
1777
1788
  }
1778
1789
 
1779
1790
  /* --- SCROLL AREA --- */
1791
+ /* Solid Light Mode - dark thumb on light background */
1792
+ [data-slot="scroll-area-thumb"] {
1793
+ background: rgba(0, 0, 0, 0.25) !important;
1794
+ }
1795
+
1796
+ [data-slot="scroll-area-thumb"]:hover {
1797
+ background: rgba(0, 0, 0, 0.4) !important;
1798
+ }
1799
+
1800
+ /* Solid Dark Mode - light thumb on dark background */
1801
+ .dark [data-slot="scroll-area-thumb"] {
1802
+ background: rgba(255, 255, 255, 0.25) !important;
1803
+ }
1804
+
1805
+ .dark [data-slot="scroll-area-thumb"]:hover {
1806
+ background: rgba(255, 255, 255, 0.4) !important;
1807
+ }
1808
+
1809
+ /* Glass Light Mode - same as light solid for consistency */
1780
1810
  .glass-context [data-slot="scroll-area"] {
1781
1811
  background: var(--sidebar) !important;
1782
1812
  border: 1px solid var(--sidebar-border) !important;
@@ -1827,23 +1857,41 @@ textarea,
1827
1857
  Styling for components inside .dark .glass-context
1828
1858
  ======================================== */
1829
1859
 
1830
- /* --- CARDS (Dark Glass) - Use SOLID dark colors to match solid dark mode --- */
1860
+ /* --- CARDS (Dark Glass) - Base styling for ALL dark glass cards --- */
1861
+ /* Freestanding cards on background image = Same darkness as sections (70%) */
1831
1862
  .dark.theme-glass [data-slot="card"],
1832
- .theme-glass.dark [data-slot="card"],
1863
+ .theme-glass.dark [data-slot="card"] {
1864
+ background: var(--j3m-glass-dark-surface) !important; /* 70% dark - matches section darkness */
1865
+ backdrop-filter: blur(var(--j3m-blur-frosted)) !important;
1866
+ -webkit-backdrop-filter: blur(var(--j3m-blur-frosted)) !important;
1867
+ border: 1px solid var(--j3m-glass-dark-border-light) !important;
1868
+ box-shadow: var(--j3m-glass-shadow-md) !important;
1869
+ color: var(--j3m-gray-1) !important;
1870
+ position: relative;
1871
+ }
1872
+
1873
+ /* Cards INSIDE glass sections = SAME darkness as sections for consistency */
1833
1874
  .dark .glass-context [data-slot="card"],
1875
+ .dark.theme-glass .glass-context [data-slot="card"],
1834
1876
  .theme-glass.dark .glass-context [data-slot="card"] {
1835
- background: var(--j3m-gray-13) !important;
1836
- border: 1px solid var(--j3m-gray-11) !important;
1837
- box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25) !important;
1838
- color: var(--j3m-gray-1) !important;
1877
+ background: var(--j3m-glass-dark-surface) !important; /* 70% dark - matches section darkness */
1839
1878
  }
1840
1879
 
1841
- /* Remove the light gradient border pseudo-element in dark mode */
1880
+ /* Gradient border for glass edge effect on dark cards */
1842
1881
  .dark.theme-glass [data-slot="card"]::before,
1843
1882
  .theme-glass.dark [data-slot="card"]::before,
1844
- .dark .glass-context [data-slot="card"]::before,
1845
- .theme-glass.dark .glass-context [data-slot="card"]::before {
1846
- background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
1883
+ .dark .glass-context [data-slot="card"]::before {
1884
+ content: '';
1885
+ position: absolute;
1886
+ inset: 0;
1887
+ border-radius: inherit;
1888
+ padding: 1px;
1889
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%) !important;
1890
+ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
1891
+ mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
1892
+ -webkit-mask-composite: xor;
1893
+ mask-composite: exclude;
1894
+ pointer-events: none;
1847
1895
  }
1848
1896
 
1849
1897
  /* Card text colors in dark glass */
@@ -1870,8 +1918,12 @@ textarea,
1870
1918
 
1871
1919
  .dark .glass-context input::placeholder,
1872
1920
  .dark .glass-context [data-slot="input"]::placeholder,
1921
+ .dark .glass-context textarea::placeholder,
1922
+ .dark .glass-context [data-slot="textarea"]::placeholder,
1873
1923
  .theme-glass.dark .glass-context input::placeholder,
1874
- .theme-glass.dark .glass-context [data-slot="input"]::placeholder {
1924
+ .theme-glass.dark .glass-context [data-slot="input"]::placeholder,
1925
+ .theme-glass.dark .glass-context textarea::placeholder,
1926
+ .theme-glass.dark .glass-context [data-slot="textarea"]::placeholder {
1875
1927
  color: var(--muted-foreground) !important;
1876
1928
  }
1877
1929
 
@@ -1883,6 +1935,40 @@ textarea,
1883
1935
  color: var(--sidebar-foreground) !important;
1884
1936
  }
1885
1937
 
1938
+ .dark .glass-context [data-slot="select-trigger"] [data-slot="select-value"],
1939
+ .theme-glass.dark .glass-context [data-slot="select-trigger"] [data-slot="select-value"] {
1940
+ color: var(--sidebar-foreground) !important;
1941
+ }
1942
+
1943
+ /* Select placeholder text in dark glass */
1944
+ .dark .glass-context [data-slot="select-trigger"] [data-placeholder],
1945
+ .theme-glass.dark .glass-context [data-slot="select-trigger"] [data-placeholder] {
1946
+ color: var(--muted-foreground) !important;
1947
+ }
1948
+
1949
+ /* --- NATIVE SELECT (Dark Glass) --- */
1950
+ .dark .glass-context select,
1951
+ .dark .glass-context [data-slot="native-select"],
1952
+ .theme-glass.dark .glass-context select,
1953
+ .theme-glass.dark .glass-context [data-slot="native-select"] {
1954
+ background: var(--sidebar) !important;
1955
+ border-color: var(--sidebar-border) !important;
1956
+ color: var(--sidebar-foreground) !important;
1957
+ }
1958
+
1959
+ .dark .glass-context select:focus,
1960
+ .dark .glass-context [data-slot="native-select"]:focus,
1961
+ .theme-glass.dark .glass-context select:focus,
1962
+ .theme-glass.dark .glass-context [data-slot="native-select"]:focus {
1963
+ border-color: var(--j3m-orange-9) !important;
1964
+ box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.3) !important;
1965
+ }
1966
+
1967
+ .dark .glass-context [data-slot="native-select-icon"],
1968
+ .theme-glass.dark .glass-context [data-slot="native-select-icon"] {
1969
+ color: var(--muted-foreground) !important;
1970
+ }
1971
+
1886
1972
  /* --- BUTTONS (Dark Glass) --- */
1887
1973
  .dark .glass-context [data-slot="button"][data-variant="outline"],
1888
1974
  .dark .glass-context [data-slot="button"][data-variant="secondary"],
@@ -1946,6 +2032,22 @@ textarea,
1946
2032
  color: var(--sidebar-foreground) !important;
1947
2033
  }
1948
2034
 
2035
+ .dark .glass-context tfoot,
2036
+ .dark .glass-context [data-slot="table-footer"],
2037
+ .theme-glass.dark .glass-context tfoot,
2038
+ .theme-glass.dark .glass-context [data-slot="table-footer"] {
2039
+ background: var(--muted) !important;
2040
+ }
2041
+
2042
+ .dark .glass-context caption,
2043
+ .dark .glass-context [data-slot="table-caption"],
2044
+ .theme-glass.dark .glass-context caption,
2045
+ .theme-glass.dark .glass-context [data-slot="table-caption"] {
2046
+ background: var(--sidebar) !important;
2047
+ border-top: 1px solid var(--sidebar-border) !important;
2048
+ color: var(--muted-foreground) !important;
2049
+ }
2050
+
1949
2051
  /* --- DROPDOWN/POPOVER (Dark Glass) --- */
1950
2052
  .dark .glass-context [data-slot="dropdown-menu-content"],
1951
2053
  .dark .glass-context [data-slot="popover-content"],
@@ -2198,6 +2300,21 @@ textarea,
2198
2300
  color: var(--j3m-gray-1) !important;
2199
2301
  }
2200
2302
 
2303
+ /* Calendar weekday row - remove background, use light text */
2304
+ .dark .glass-context [data-slot="calendar"] thead,
2305
+ .dark .glass-context [data-slot="calendar"] .rdp-weekdays,
2306
+ .dark .glass-context [data-slot="calendar"] .rdp-weekday,
2307
+ .theme-glass.dark .glass-context [data-slot="calendar"] thead,
2308
+ .theme-glass.dark .glass-context [data-slot="calendar"] .rdp-weekdays,
2309
+ .theme-glass.dark .glass-context [data-slot="calendar"] .rdp-weekday,
2310
+ .theme-glass.dark [data-slot="calendar"] thead,
2311
+ .theme-glass.dark [data-slot="calendar"] .rdp-weekdays,
2312
+ .theme-glass.dark [data-slot="calendar"] .rdp-weekday {
2313
+ background: transparent !important;
2314
+ background-color: transparent !important;
2315
+ color: var(--muted-foreground) !important;
2316
+ }
2317
+
2201
2318
  /* --- SLIDER (Dark Glass) --- */
2202
2319
  .dark .glass-context [data-slot="slider-track"],
2203
2320
  .theme-glass.dark .glass-context [data-slot="slider-track"] {
@@ -2235,13 +2352,26 @@ textarea,
2235
2352
 
2236
2353
  /* --- SWITCH (Dark Glass) --- */
2237
2354
  .dark .glass-context [data-slot="switch"],
2355
+ .dark .glass-context [data-slot="theme-switch"],
2238
2356
  .dark .glass-context [role="switch"],
2239
2357
  .theme-glass.dark .glass-context [data-slot="switch"],
2358
+ .theme-glass.dark .glass-context [data-slot="theme-switch"],
2240
2359
  .theme-glass.dark .glass-context [role="switch"] {
2241
2360
  background: var(--muted) !important;
2242
2361
  border-color: var(--sidebar-border) !important;
2243
2362
  }
2244
2363
 
2364
+ /* Switch checked state - orange background */
2365
+ .dark .glass-context [data-slot="switch"][data-state="checked"],
2366
+ .dark .glass-context [data-slot="theme-switch"][data-state="checked"],
2367
+ .dark .glass-context [role="switch"][aria-checked="true"],
2368
+ .theme-glass.dark .glass-context [data-slot="switch"][data-state="checked"],
2369
+ .theme-glass.dark .glass-context [data-slot="theme-switch"][data-state="checked"],
2370
+ .theme-glass.dark .glass-context [role="switch"][aria-checked="true"] {
2371
+ background: var(--primary) !important;
2372
+ border-color: var(--primary) !important;
2373
+ }
2374
+
2245
2375
  /* ========================================
2246
2376
  TOAST/SONNER POSITIONING
2247
2377
  Position toasts at top-center of screen
@@ -2274,21 +2404,38 @@ textarea,
2274
2404
  .theme-glass.dark .sonner-toast,
2275
2405
  .dark.theme-glass [data-sonner-toast],
2276
2406
  .dark.theme-glass .sonner-toast {
2277
- background: var(--j3m-bg-sidebar) !important;
2278
- border-color: var(--sidebar-border) !important;
2279
- color: #FFFFFF !important;
2407
+ background: var(--j3m-gray-13) !important;
2408
+ border-color: var(--j3m-gray-11) !important;
2409
+ color: var(--j3m-gray-1) !important;
2280
2410
  }
2281
2411
 
2282
2412
  .theme-glass.dark [data-sonner-toast] *,
2283
2413
  .theme-glass.dark .sonner-toast *,
2284
2414
  .dark.theme-glass [data-sonner-toast] *,
2285
2415
  .dark.theme-glass .sonner-toast * {
2286
- color: #FFFFFF !important;
2416
+ color: var(--j3m-gray-1) !important;
2287
2417
  }
2288
2418
 
2289
2419
  .theme-glass.dark [data-sonner-toast] [data-description],
2290
2420
  .dark.theme-glass [data-sonner-toast] [data-description] {
2291
- color: rgba(255, 255, 255, 0.7) !important;
2421
+ color: var(--j3m-gray-7) !important;
2422
+ }
2423
+
2424
+ /* Solid Dark mode toast - ensure dark background */
2425
+ .dark:not(.theme-glass) [data-sonner-toast],
2426
+ .dark:not(.theme-glass) .sonner-toast {
2427
+ background: var(--j3m-gray-13) !important;
2428
+ border-color: var(--j3m-gray-11) !important;
2429
+ color: var(--j3m-gray-1) !important;
2430
+ }
2431
+
2432
+ .dark:not(.theme-glass) [data-sonner-toast] *,
2433
+ .dark:not(.theme-glass) .sonner-toast * {
2434
+ color: var(--j3m-gray-1) !important;
2435
+ }
2436
+
2437
+ .dark:not(.theme-glass) [data-sonner-toast] [data-description] {
2438
+ color: var(--j3m-gray-7) !important;
2292
2439
  }
2293
2440
 
2294
2441
  /* ========================================
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@j3m-quantum/ui",
3
- "version": "1.3.1",
3
+ "version": "1.5.0",
4
4
  "private": false,
5
5
  "description": "J3M UI Component Library - React components with J3M design tokens",
6
6
  "type": "module",
@@ -27,7 +27,8 @@
27
27
  "README.md"
28
28
  ],
29
29
  "scripts": {
30
- "build": "tsup && npm run copy-styles",
30
+ "tokens": "style-dictionary build --config style-dictionary.config.js",
31
+ "build": "npm run tokens && tsup && npm run copy-styles",
31
32
  "copy-styles": "cp -r src/styles dist/",
32
33
  "dev": "tsup --watch",
33
34
  "prepublishOnly": "npm run build"
@@ -98,7 +99,8 @@
98
99
  "@changesets/cli": "^2.29.4",
99
100
  "@types/react": "^19.1.8",
100
101
  "@types/react-dom": "^19.1.6",
102
+ "style-dictionary": "^4.2.0",
101
103
  "tsup": "^8.5.0",
102
104
  "typescript": "^5.8.3"
103
105
  }
104
- }
106
+ }