@j3m-quantum/ui 0.9.0 → 1.0.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 (7) hide show
  1. package/README.md +48 -11
  2. package/dist/index.cjs +2 -2
  3. package/dist/index.cjs.map +1 -1
  4. package/dist/index.js +2 -2
  5. package/dist/index.js.map +1 -1
  6. package/dist/styles/index.css +213 -379
  7. package/package.json +1 -1
package/dist/styles/index.css CHANGED
@@ -1,109 +1,69 @@
1
1
  /* ========================================
2
2
  J3M QUANTUM UI - Complete Theme
3
- TweakCN-style structure for global theming
3
+ Radix 12-Step + Shadcn HSL Format
4
4
 
5
5
  Usage:
6
6
  @import "tailwindcss";
7
7
  @import "@j3m-quantum/ui/styles";
8
+
9
+ Color Format: HSL without wrapper for opacity support
10
+ background: hsl(var(--primary));
11
+ background: hsl(var(--primary) / 0.5);
8
12
  ======================================== */
9
13
 
10
14
  /* ========================================
11
- SCALE TOKENS (Primitives)
12
- Direct values - source of truth
15
+ COLOR SCALES (Radix 12-Step, HSL Format)
16
+
17
+ Step Usage Guide:
18
+ 1-2: Backgrounds (app, subtle)
19
+ 3-5: Interactive backgrounds (element, hover, active)
20
+ 6-8: Borders (subtle, element, hover)
21
+ 9-10: Solid colors (buttons, hover)
22
+ 11-12: Text (low-contrast, high-contrast)
13
23
  ======================================== */
14
24
 
15
25
  :root {
16
- /* Primary Orange Scale */
17
- --j3m-primary-100: #FBCEB5;
18
- --j3m-primary-200: #F79D6B;
19
- --j3m-primary-250: #F58446;
20
- --j3m-primary-300: #F36C21;
21
- --j3m-primary-350: #EA5B0C;
22
- --j3m-primary-400: #CA4F0B;
23
- --j3m-primary-500: #8F3808;
24
-
25
- /* Neutral Gray Scale */
26
- --j3m-neutral-100: #FFFFFF;
27
- --j3m-neutral-200: #E8E8E8;
28
- --j3m-neutral-250: #DADBDC;
29
- --j3m-neutral-300: #D2D2D2;
30
- --j3m-neutral-350: #D1D1D1;
31
- --j3m-neutral-400: #BBBBBB;
32
- --j3m-neutral-500: #A4A4A4;
33
- --j3m-neutral-600: #8E8E8E;
34
- --j3m-neutral-700: #777777;
35
- --j3m-neutral-750: #747474;
36
- --j3m-neutral-800: #606060;
37
- --j3m-neutral-900: #4A4A4A;
38
- --j3m-neutral-1000: #333333;
39
-
40
- /* Status Colors */
41
- --j3m-red-100: #FB3748;
42
- --j3m-red-200: #D00416;
43
- --j3m-yellow-100: #FFDB43;
44
- --j3m-yellow-200: #DFB400;
45
- --j3m-green-100: #84EBB4;
46
- --j3m-green-200: #1FC16B;
26
+ /* ========================================
27
+ ORANGE SCALE (12-step, brand #F58446 at step 9)
28
+ ======================================== */
29
+ --j3m-orange-1: 30 100% 99%;
30
+ --j3m-orange-2: 33 100% 96%;
31
+ --j3m-orange-3: 32 98% 91%;
32
+ --j3m-orange-4: 31 97% 83%;
33
+ --j3m-orange-5: 27 96% 72%;
34
+ --j3m-orange-6: 27 96% 61%;
35
+ --j3m-orange-7: 25 95% 53%;
36
+ --j3m-orange-8: 21 90% 48%;
37
+ --j3m-orange-9: 24 91% 62%;
38
+ --j3m-orange-10: 22 92% 54%;
39
+ --j3m-orange-11: 18 85% 40%;
40
+ --j3m-orange-12: 15 63% 28%;
47
41
 
48
42
  /* ========================================
49
- SEMANTIC TOKENS
50
- Purpose-driven aliases
43
+ GRAY SCALE (12-step Radix official)
51
44
  ======================================== */
45
+ --j3m-gray-1: 0 0% 99%;
46
+ --j3m-gray-2: 0 0% 98%;
47
+ --j3m-gray-3: 0 0% 94%;
48
+ --j3m-gray-4: 0 0% 91%;
49
+ --j3m-gray-5: 0 0% 88%;
50
+ --j3m-gray-6: 0 0% 85%;
51
+ --j3m-gray-7: 0 0% 81%;
52
+ --j3m-gray-8: 0 0% 73%;
53
+ --j3m-gray-9: 0 0% 55%;
54
+ --j3m-gray-10: 0 0% 51%;
55
+ --j3m-gray-11: 0 0% 39%;
56
+ --j3m-gray-12: 0 0% 13%;
52
57
 
53
- /* Background Hierarchy */
54
- --color-bg-app: var(--j3m-neutral-350);
55
- --color-bg-page: var(--j3m-neutral-200);
56
- --color-bg-surface: var(--j3m-neutral-100);
57
- --color-bg-subtle: var(--j3m-neutral-200);
58
- --color-bg-toolbar: var(--j3m-neutral-250);
59
-
60
- /* Text Colors (opacity-based for glass) */
61
- --color-text-main: rgba(0, 0, 0, 0.7);
62
- --color-text-muted: rgba(0, 0, 0, 0.5);
63
- --color-text-soft: rgba(0, 0, 0, 0.4);
64
- --color-text-on-accent: #FFFFFF;
65
- --color-text-on-accent-muted: rgba(255, 255, 255, 0.5);
66
-
67
- /* Border Colors */
68
- --color-border-subtle: var(--j3m-neutral-200);
69
- --color-border-strong: var(--j3m-neutral-400);
70
-
71
- /* Accent/Interactive Colors */
72
- --color-accent: var(--j3m-primary-250);
73
- --color-accent-hover: var(--j3m-primary-300);
74
- --color-accent-active: var(--j3m-primary-350);
75
-
76
- /* Interactive Component Patterns */
77
- --color-interactive-bg: var(--j3m-primary-250);
78
- --color-interactive-text: var(--j3m-neutral-100);
79
- --color-cta-bg: var(--j3m-primary-300);
80
- --color-cta-text: var(--j3m-neutral-100);
81
- --color-focus-ring: rgba(245, 132, 70, 0.2);
82
- --color-hover-overlay-light: rgba(255, 255, 255, 0.2);
83
- --color-hover-overlay-dark: rgba(51, 51, 51, 0.1);
84
-
85
- /* Status Semantic */
86
- --color-success-bg: var(--j3m-green-100);
87
- --color-success-border: var(--j3m-green-200);
88
- --color-success-text: var(--j3m-green-200);
89
- --color-warning-bg: var(--j3m-yellow-100);
90
- --color-warning-border: var(--j3m-yellow-200);
91
- --color-warning-text: var(--j3m-yellow-200);
92
- --color-error-bg: var(--j3m-red-100);
93
- --color-error-border: var(--j3m-red-200);
94
- --color-error-text: var(--j3m-red-100);
95
-
96
- /* Tooltip */
97
- --color-tooltip-bg: var(--j3m-neutral-1000);
98
- --color-tooltip-text: var(--j3m-neutral-100);
99
-
100
- /* Progress */
101
- --color-progress-fill: var(--j3m-primary-250);
102
- --color-progress-track: rgba(255, 255, 255, 0.5);
103
-
104
- /* Form Controls */
105
- --color-checkbox-bg: rgba(255, 255, 255, 0.5);
106
- --color-radio-bg: rgba(255, 255, 255, 0.5);
58
+ /* ========================================
59
+ STATUS COLORS (HSL format)
60
+ ======================================== */
61
+ --j3m-red-9: 355 91% 60%;
62
+ --j3m-red-10: 355 82% 42%;
63
+ --j3m-yellow-9: 45 100% 63%;
64
+ --j3m-yellow-10: 45 100% 44%;
65
+ --j3m-green-9: 152 72% 72%;
66
+ --j3m-green-10: 152 76% 44%;
107
67
 
108
68
  /* ========================================
109
69
  RADIUS TOKENS
@@ -128,7 +88,7 @@
128
88
  --j3m-spacing-xl: 32px;
129
89
 
130
90
  /* ========================================
131
- STROKE/BORDER TOKENS
91
+ STROKE WIDTH TOKENS
132
92
  ======================================== */
133
93
  --j3m-stroke-none: 0px;
134
94
  --j3m-stroke-s: 1px;
@@ -136,108 +96,58 @@
136
96
  --j3m-stroke-l: 3px;
137
97
  --j3m-stroke-xl: 4px;
138
98
 
139
- /* Stroke Colors (opacity-based) */
140
- --j3m-stroke-dark-5: rgba(0, 0, 0, 0.05);
141
- --j3m-stroke-dark-10: rgba(0, 0, 0, 0.1);
142
- --j3m-stroke-dark-20: rgba(0, 0, 0, 0.2);
143
- --j3m-stroke-light-5: rgba(255, 255, 255, 0.05);
144
- --j3m-stroke-light-10: rgba(255, 255, 255, 0.1);
145
- --j3m-stroke-light-20: rgba(255, 255, 255, 0.2);
146
- --j3m-stroke-white: rgba(255, 255, 255, 1);
147
- --j3m-stroke-primary-10: rgba(243, 108, 33, 0.1);
148
- --j3m-stroke-primary-350-50: rgba(234, 91, 12, 0.5);
149
- --j3m-stroke-neutral-1000-10: rgba(51, 51, 51, 0.1);
150
-
151
99
  /* ========================================
152
- GLASS EFFECTS
100
+ GLASS EFFECTS (Essential 8)
153
101
  ======================================== */
154
-
155
- /* Blur Scale */
156
- --j3m-blur-sm: 10px;
157
- --j3m-blur-md: 20px;
158
- --j3m-blur-lg: 50px;
159
-
160
- /* Glass Backgrounds */
161
- --j3m-glass-light-10: rgba(255, 255, 255, 0.1);
162
- --j3m-glass-light-20: rgba(255, 255, 255, 0.2);
163
- --j3m-glass-light-40: rgba(255, 255, 255, 0.4);
164
- --j3m-glass-light-50: rgba(255, 255, 255, 0.5);
165
- --j3m-glass-light-70: rgba(255, 255, 255, 0.8);
166
- --j3m-glass-light-80: rgba(255, 255, 255, 0.8);
167
- --j3m-glass-light-subtle: rgba(255, 255, 255, 0.1);
168
- --j3m-glass-light: rgba(255, 255, 255, 0.5);
169
- --j3m-glass-light-hover: rgba(255, 255, 255, 0.8);
170
- --j3m-glass-light-strong: rgba(255, 255, 255, 0.81);
171
- --j3m-glass-dark: rgba(51, 51, 51, 0.6);
172
- --j3m-glass-dark-hover: rgba(51, 51, 51, 0.7);
173
- --j3m-glass-dark-strong: rgba(51, 51, 51, 0.85);
174
- --j3m-glass-neutral-subtle: rgba(227, 227, 227, 0.3);
175
- --j3m-glass-neutral: rgba(227, 227, 227, 0.5);
176
- --j3m-glass-neutral-strong: rgba(227, 227, 227, 0.7);
177
- --j3m-glass-primary: rgba(243, 108, 33, 0.1);
178
- --j3m-glass-primary-highlight: rgba(243, 108, 33, 0.2);
179
-
180
- /* Frosted Glass (enhanced) */
181
- --j3m-glass-frosted: rgba(255, 255, 255, 0.25);
182
- --j3m-glass-frosted-strong: rgba(255, 255, 255, 0.4);
183
- --j3m-glass-frosted-card: rgba(255, 255, 255, 0.35);
184
- --j3m-blur-frosted: 24px;
185
-
186
- /* Glass Borders */
187
- --j3m-glass-border-light: rgba(255, 255, 255, 0.3);
188
- --j3m-glass-border-subtle: rgba(255, 255, 255, 0.1);
189
- --j3m-glass-border-white: rgba(255, 255, 255, 0.2);
190
-
191
- /* Gradient Border (top lighter, bottom darker - simulates light from above) */
192
- --j3m-glass-border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%);
193
-
194
- /* Glass Shadows */
195
- --j3m-glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
196
- --j3m-glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.08);
197
- --j3m-glass-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
198
- --j3m-glass-shadow-glow: 0 0 10px var(--j3m-primary-300);
199
- --j3m-glass-shadow-glow-active: 0 0 20px var(--j3m-primary-350);
102
+ --j3m-glass-blur: 20px;
103
+ --j3m-glass-light: 0 0% 100% / 0.5;
104
+ --j3m-glass-light-strong: 0 0% 100% / 0.8;
105
+ --j3m-glass-dark: 0 0% 20% / 0.6;
106
+ --j3m-glass-dark-strong: 0 0% 20% / 0.85;
107
+ --j3m-glass-border: 0 0% 100% / 0.2;
108
+ --j3m-glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
109
+ --j3m-glass-primary: var(--j3m-orange-9) / 0.1;
200
110
 
201
111
  /* ========================================
202
- SHADCN/TAILWIND SEMANTIC TOKENS
203
- For standard shadcn component compatibility
112
+ SHADCN SEMANTIC TOKENS (HSL format)
113
+ Change these to re-theme entire UI
204
114
  ======================================== */
205
- --primary: var(--j3m-primary-250);
206
- --primary-foreground: #FFFFFF;
207
- --secondary: var(--j3m-neutral-200);
208
- --secondary-foreground: var(--j3m-neutral-900);
209
- --muted: var(--j3m-neutral-200);
210
- --muted-foreground: var(--j3m-neutral-600);
211
- --accent: var(--j3m-primary-250);
212
- --accent-foreground: #FFFFFF;
213
- --destructive: var(--j3m-red-100);
214
- --destructive-foreground: #FFFFFF;
215
- --background: var(--j3m-neutral-100);
216
- --foreground: var(--j3m-neutral-1000);
217
- --card: var(--j3m-neutral-100);
218
- --card-foreground: var(--j3m-neutral-1000);
219
- --popover: var(--j3m-neutral-100);
220
- --popover-foreground: var(--j3m-neutral-1000);
221
- --border: var(--j3m-neutral-300);
222
- --input: var(--j3m-neutral-300);
223
- --ring: var(--j3m-primary-250);
115
+ --primary: var(--j3m-orange-9);
116
+ --primary-foreground: 0 0% 100%;
117
+ --secondary: var(--j3m-gray-3);
118
+ --secondary-foreground: var(--j3m-gray-12);
119
+ --muted: var(--j3m-gray-3);
120
+ --muted-foreground: var(--j3m-gray-11);
121
+ --accent: var(--j3m-orange-9);
122
+ --accent-foreground: 0 0% 100%;
123
+ --destructive: var(--j3m-red-9);
124
+ --destructive-foreground: 0 0% 100%;
125
+ --background: var(--j3m-gray-1);
126
+ --foreground: var(--j3m-gray-12);
127
+ --card: var(--j3m-gray-1);
128
+ --card-foreground: var(--j3m-gray-12);
129
+ --popover: var(--j3m-gray-1);
130
+ --popover-foreground: var(--j3m-gray-12);
131
+ --border: var(--j3m-gray-6);
132
+ --input: var(--j3m-gray-6);
133
+ --ring: var(--j3m-orange-9);
224
134
 
225
135
  /* Sidebar */
226
- --sidebar: var(--j3m-neutral-200);
227
- --sidebar-foreground: var(--j3m-neutral-900);
228
- --sidebar-primary: var(--j3m-primary-300);
229
- --sidebar-primary-foreground: #FFFFFF;
230
- --sidebar-accent: var(--j3m-neutral-200);
231
- --sidebar-accent-foreground: var(--j3m-neutral-900);
232
- --sidebar-border: var(--j3m-neutral-200);
233
- --sidebar-ring: var(--j3m-primary-300);
136
+ --sidebar: var(--j3m-gray-2);
137
+ --sidebar-foreground: var(--j3m-gray-12);
138
+ --sidebar-primary: var(--j3m-orange-10);
139
+ --sidebar-primary-foreground: 0 0% 100%;
140
+ --sidebar-accent: var(--j3m-gray-3);
141
+ --sidebar-accent-foreground: var(--j3m-gray-12);
142
+ --sidebar-border: var(--j3m-gray-6);
143
+ --sidebar-ring: var(--j3m-orange-9);
234
144
 
235
145
  /* Chart Colors */
236
- --chart-1: var(--j3m-primary-250);
237
- --chart-2: var(--j3m-primary-200);
238
- --chart-3: var(--j3m-primary-300);
239
- --chart-4: var(--j3m-primary-100);
240
- --chart-5: var(--j3m-primary-350);
146
+ --chart-1: var(--j3m-orange-9);
147
+ --chart-2: var(--j3m-orange-7);
148
+ --chart-3: var(--j3m-orange-10);
149
+ --chart-4: var(--j3m-orange-5);
150
+ --chart-5: var(--j3m-orange-11);
241
151
 
242
152
  /* Global Radius */
243
153
  --radius: 12px;
@@ -254,52 +164,36 @@
254
164
  ======================================== */
255
165
 
256
166
  .dark {
257
- /* Background Hierarchy */
258
- --color-bg-app: var(--j3m-neutral-1000);
259
- --color-bg-page: var(--j3m-neutral-900);
260
- --color-bg-surface: var(--j3m-neutral-800);
261
- --color-bg-subtle: var(--j3m-neutral-700);
262
- --color-bg-toolbar: var(--j3m-neutral-750);
263
-
264
- /* Text Colors */
265
- --color-text-main: rgba(255, 255, 255, 0.9);
266
- --color-text-muted: rgba(255, 255, 255, 0.6);
267
- --color-text-soft: rgba(255, 255, 255, 0.4);
268
-
269
- /* Border Colors */
270
- --color-border-subtle: var(--j3m-neutral-700);
271
- --color-border-strong: var(--j3m-neutral-600);
272
-
273
- /* Shadcn tokens */
274
- --primary: var(--j3m-primary-250);
275
- --primary-foreground: var(--j3m-neutral-1000);
276
- --secondary: var(--j3m-neutral-800);
277
- --secondary-foreground: var(--j3m-neutral-100);
278
- --muted: var(--j3m-neutral-800);
279
- --muted-foreground: var(--j3m-neutral-400);
280
- --accent: var(--j3m-neutral-800);
281
- --accent-foreground: var(--j3m-neutral-100);
282
- --destructive: var(--j3m-red-200);
283
- --destructive-foreground: #FFFFFF;
284
- --background: var(--j3m-neutral-1000);
285
- --foreground: var(--j3m-neutral-100);
286
- --card: var(--j3m-neutral-900);
287
- --card-foreground: var(--j3m-neutral-100);
288
- --popover: var(--j3m-neutral-900);
289
- --popover-foreground: var(--j3m-neutral-100);
290
- --border: var(--j3m-neutral-700);
291
- --input: var(--j3m-neutral-700);
292
- --ring: var(--j3m-primary-250);
167
+ /* Invert gray scale for dark mode */
168
+ --background: var(--j3m-gray-12);
169
+ --foreground: var(--j3m-gray-1);
170
+ --card: var(--j3m-gray-11);
171
+ --card-foreground: var(--j3m-gray-1);
172
+ --popover: var(--j3m-gray-11);
173
+ --popover-foreground: var(--j3m-gray-1);
174
+ --primary: var(--j3m-orange-9);
175
+ --primary-foreground: var(--j3m-gray-12);
176
+ --secondary: 0 0% 20%;
177
+ --secondary-foreground: var(--j3m-gray-1);
178
+ --muted: 0 0% 20%;
179
+ --muted-foreground: var(--j3m-gray-8);
180
+ --accent: 0 0% 20%;
181
+ --accent-foreground: var(--j3m-gray-1);
182
+ --destructive: var(--j3m-red-10);
183
+ --destructive-foreground: 0 0% 100%;
184
+ --border: 0 0% 25%;
185
+ --input: 0 0% 25%;
186
+ --ring: var(--j3m-orange-9);
293
187
 
294
188
  /* Sidebar */
295
- --sidebar: var(--j3m-neutral-900);
296
- --sidebar-foreground: var(--j3m-neutral-100);
297
- --sidebar-primary: var(--j3m-primary-250);
298
- --sidebar-primary-foreground: var(--j3m-neutral-1000);
299
- --sidebar-accent: var(--j3m-neutral-800);
300
- --sidebar-accent-foreground: var(--j3m-neutral-100);
301
- --sidebar-border: var(--j3m-neutral-700);
302
- --sidebar-ring: var(--j3m-primary-250);
189
+ --sidebar: var(--j3m-gray-11);
190
+ --sidebar-foreground: var(--j3m-gray-1);
191
+ --sidebar-primary: var(--j3m-orange-9);
192
+ --sidebar-primary-foreground: var(--j3m-gray-12);
193
+ --sidebar-accent: 0 0% 20%;
194
+ --sidebar-accent-foreground: var(--j3m-gray-1);
195
+ --sidebar-border: 0 0% 25%;
196
+ --sidebar-ring: var(--j3m-orange-9);
303
197
  }
304
198
 
305
199
  /* ========================================
@@ -310,15 +204,15 @@
310
204
  .theme-solid,
311
205
  :root:not(.theme-glass) {
312
206
  /* Surface tokens for solid mode */
313
- --surface-bg: var(--color-bg-surface);
314
- --surface-border: var(--color-border-subtle);
207
+ --surface-bg: hsl(var(--background));
208
+ --surface-border: hsl(var(--border));
315
209
  --surface-shadow: var(--shadow-sm);
316
210
  --surface-radius: var(--j3m-radius-l);
317
211
  --surface-blur: 0px;
318
212
 
319
213
  /* Overlay surfaces (dialogs, popovers, etc) */
320
- --overlay-bg: var(--color-bg-surface);
321
- --overlay-border: var(--color-border-subtle);
214
+ --overlay-bg: hsl(var(--background));
215
+ --overlay-border: hsl(var(--border));
322
216
  --overlay-shadow: var(--shadow-lg);
323
217
  --overlay-blur: 0px;
324
218
  }
@@ -330,30 +224,30 @@
330
224
 
331
225
  .theme-glass {
332
226
  /* Surface tokens for glass mode */
333
- --surface-bg: var(--j3m-glass-light-40);
334
- --surface-border: var(--j3m-glass-border-white);
335
- --surface-shadow: var(--j3m-glass-shadow-md);
227
+ --surface-bg: hsl(var(--j3m-glass-light));
228
+ --surface-border: hsl(var(--j3m-glass-border));
229
+ --surface-shadow: var(--j3m-glass-shadow);
336
230
  --surface-radius: var(--j3m-radius-l);
337
- --surface-blur: var(--j3m-blur-lg);
231
+ --surface-blur: var(--j3m-glass-blur);
338
232
 
339
233
  /* Overlay surfaces (dialogs, popovers, etc) */
340
- --overlay-bg: var(--j3m-glass-light-70);
341
- --overlay-border: var(--j3m-glass-border-light);
342
- --overlay-shadow: var(--j3m-glass-shadow-lg);
343
- --overlay-blur: var(--j3m-blur-2xl);
234
+ --overlay-bg: hsl(var(--j3m-glass-light-strong));
235
+ --overlay-border: hsl(var(--j3m-glass-border));
236
+ --overlay-shadow: var(--shadow-lg);
237
+ --overlay-blur: 30px;
344
238
 
345
- /* Adjust input backgrounds for glass */
346
- --input-bg: var(--j3m-glass-light-50);
347
- --card: var(--j3m-glass-light-50);
348
- --popover: var(--j3m-glass-light-70);
239
+ /* Adjust component backgrounds for glass */
240
+ --card: var(--j3m-glass-light);
241
+ --popover: var(--j3m-glass-light-strong);
242
+ --input: var(--j3m-glass-light);
349
243
  }
350
244
 
351
245
  .theme-glass.dark {
352
246
  /* Dark glass overrides */
353
- --surface-bg: var(--j3m-glass-dark);
354
- --surface-border: var(--j3m-stroke-light-10);
355
- --overlay-bg: var(--j3m-glass-dark-hover);
356
- --overlay-border: var(--j3m-stroke-light-20);
247
+ --surface-bg: hsl(var(--j3m-glass-dark));
248
+ --surface-border: hsl(0 0% 100% / 0.1);
249
+ --overlay-bg: hsl(var(--j3m-glass-dark-strong));
250
+ --overlay-border: hsl(0 0% 100% / 0.2);
357
251
  }
358
252
 
359
253
  /* ========================================
@@ -362,13 +256,13 @@
362
256
  ======================================== */
363
257
 
364
258
  .glass-context {
365
- --background: var(--j3m-glass-light-80);
366
- --input: var(--j3m-glass-light-50);
367
- --card: var(--j3m-glass-light-70);
368
- --popover: var(--j3m-glass-light-80);
369
- --muted: var(--j3m-glass-light-50);
370
- --secondary: var(--j3m-glass-light-70);
371
- --border: var(--j3m-glass-border-light);
259
+ --background: var(--j3m-glass-light-strong);
260
+ --input: var(--j3m-glass-light);
261
+ --card: var(--j3m-glass-light-strong);
262
+ --popover: var(--j3m-glass-light-strong);
263
+ --muted: var(--j3m-glass-light);
264
+ --secondary: var(--j3m-glass-light-strong);
265
+ --border: var(--j3m-glass-border);
372
266
  }
373
267
 
374
268
  /* ========================================
@@ -434,32 +328,16 @@
434
328
 
435
329
  @layer base {
436
330
  * {
437
- border-color: var(--border);
331
+ border-color: hsl(var(--border));
438
332
  }
439
333
 
440
334
  body {
441
- background-color: var(--background);
442
- color: var(--foreground);
335
+ background-color: hsl(var(--background));
336
+ color: hsl(var(--foreground));
443
337
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
444
338
  }
445
339
  }
446
340
 
447
- /* ========================================
448
- GLASS CONTEXT
449
- Apply when inside a glass container
450
- ======================================== */
451
-
452
- .glass-context {
453
- --background: rgba(255, 255, 255, 0.8);
454
- --input: rgba(255, 255, 255, 0.3);
455
- --card: rgba(255, 255, 255, 0.8);
456
- --popover: rgba(255, 255, 255, 0.85);
457
- --muted: rgba(255, 255, 255, 0.6);
458
- --muted-foreground: rgba(0, 0, 0, 0.55);
459
- --secondary: rgba(255, 255, 255, 0.8);
460
- --border: rgba(255, 255, 255, 0.3);
461
- }
462
-
463
341
  /* ========================================
464
342
  COMPONENT-LEVEL OVERRIDES
465
343
  Pill shapes for J3M design
@@ -555,70 +433,35 @@ textarea,
555
433
  ======================================== */
556
434
 
557
435
  .glass-light {
558
- background: var(--j3m-glass-light-subtle);
559
- backdrop-filter: blur(var(--j3m-blur-lg));
560
- -webkit-backdrop-filter: blur(var(--j3m-blur-lg));
561
- border: 1px solid var(--j3m-stroke-white);
562
- box-shadow: var(--j3m-glass-shadow-lg);
436
+ background: hsl(var(--j3m-glass-light));
437
+ backdrop-filter: blur(var(--j3m-glass-blur));
438
+ -webkit-backdrop-filter: blur(var(--j3m-glass-blur));
439
+ border: 1px solid hsl(var(--j3m-glass-border));
440
+ box-shadow: var(--j3m-glass-shadow);
563
441
  }
564
442
 
565
443
  .glass-dark {
566
- background: var(--j3m-glass-dark);
567
- backdrop-filter: blur(var(--j3m-blur-md));
568
- -webkit-backdrop-filter: blur(var(--j3m-blur-md));
569
- border: 1px solid var(--j3m-stroke-light-10);
570
- box-shadow: var(--j3m-glass-shadow-lg);
444
+ background: hsl(var(--j3m-glass-dark));
445
+ backdrop-filter: blur(var(--j3m-glass-blur));
446
+ -webkit-backdrop-filter: blur(var(--j3m-glass-blur));
447
+ border: 1px solid hsl(0 0% 100% / 0.1);
448
+ box-shadow: var(--j3m-glass-shadow);
571
449
  }
572
450
 
573
- .glass-neutral {
574
- background: var(--j3m-glass-neutral-subtle);
575
- backdrop-filter: blur(var(--j3m-blur-lg));
576
- -webkit-backdrop-filter: blur(var(--j3m-blur-lg));
577
- border: 1px solid var(--j3m-stroke-primary-10);
578
- box-shadow: var(--j3m-glass-shadow-lg);
451
+ .glass-strong {
452
+ background: hsl(var(--j3m-glass-light-strong));
453
+ backdrop-filter: blur(var(--j3m-glass-blur));
454
+ -webkit-backdrop-filter: blur(var(--j3m-glass-blur));
455
+ border: 1px solid hsl(var(--j3m-glass-border));
456
+ box-shadow: var(--j3m-glass-shadow);
579
457
  }
580
458
 
581
459
  .glass-primary {
582
- background: var(--j3m-glass-primary);
583
- backdrop-filter: blur(var(--j3m-blur-sm));
584
- -webkit-backdrop-filter: blur(var(--j3m-blur-sm));
585
- border: 1px solid var(--j3m-stroke-dark-10);
586
- box-shadow: var(--j3m-glass-shadow-glow);
587
- }
588
-
589
- /* Frosted glass with gradient border */
590
- .glass-frosted {
591
- background: var(--j3m-glass-frosted);
592
- backdrop-filter: blur(var(--j3m-blur-frosted));
593
- -webkit-backdrop-filter: blur(var(--j3m-blur-frosted));
594
- box-shadow: var(--j3m-glass-shadow-lg);
595
- }
596
-
597
- .glass-frosted-strong {
598
- background: var(--j3m-glass-frosted-strong);
599
- backdrop-filter: blur(var(--j3m-blur-frosted));
600
- -webkit-backdrop-filter: blur(var(--j3m-blur-frosted));
601
- box-shadow: var(--j3m-glass-shadow-lg);
602
- }
603
-
604
- /* Gradient border utility - creates top-lit edge effect */
605
- .glass-border-gradient {
606
- position: relative;
607
- border: none !important;
608
- }
609
-
610
- .glass-border-gradient::before {
611
- content: '';
612
- position: absolute;
613
- inset: 0;
614
- border-radius: inherit;
615
- padding: 1px;
616
- background: var(--j3m-glass-border-gradient);
617
- -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
618
- mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
619
- -webkit-mask-composite: xor;
620
- mask-composite: exclude;
621
- pointer-events: none;
460
+ background: hsl(var(--j3m-glass-primary));
461
+ backdrop-filter: blur(var(--j3m-glass-blur));
462
+ -webkit-backdrop-filter: blur(var(--j3m-glass-blur));
463
+ border: 1px solid hsl(var(--primary) / 0.2);
464
+ box-shadow: var(--j3m-glass-shadow);
622
465
  }
623
466
 
624
467
  /* ========================================
@@ -634,6 +477,7 @@ textarea,
634
477
  background: rgba(255, 255, 255, 0.8) !important;
635
478
  border-color: rgba(0, 0, 0, 0.15) !important;
636
479
  color: rgba(0, 0, 0, 0.85) !important;
480
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
637
481
  }
638
482
 
639
483
  .glass-context input::placeholder,
@@ -651,8 +495,9 @@ textarea,
651
495
  .glass-context [data-slot="input"]:focus-visible,
652
496
  .glass-context textarea:focus-visible,
653
497
  .glass-context [data-slot="textarea"]:focus-visible {
654
- border-color: var(--j3m-primary-300) !important;
655
- --color-ring: rgba(243, 108, 33, 0.3);
498
+ border-color: hsl(var(--j3m-orange-10)) !important;
499
+ --color-ring: var(--primary) / 0.3;
500
+ box-shadow: 0 0 0 3px hsl(var(--primary) / 0.3) !important;
656
501
  }
657
502
 
658
503
  /* --- SELECT TRIGGER --- */
@@ -660,6 +505,7 @@ textarea,
660
505
  background: rgba(255, 255, 255, 0.8) !important;
661
506
  border-color: rgba(0, 0, 0, 0.15) !important;
662
507
  color: rgba(0, 0, 0, 0.85) !important;
508
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
663
509
  }
664
510
 
665
511
  .glass-context [data-slot="select-trigger"] [data-slot="select-value"] {
@@ -669,8 +515,9 @@ textarea,
669
515
  .glass-context [data-slot="select-trigger"]:focus,
670
516
  .glass-context [data-slot="select-trigger"]:focus-visible,
671
517
  .glass-context [data-slot="select-trigger"][data-state="open"] {
672
- border-color: var(--j3m-primary-300) !important;
673
- --color-ring: rgba(243, 108, 33, 0.3);
518
+ border-color: hsl(var(--j3m-orange-10)) !important;
519
+ --color-ring: var(--primary) / 0.3;
520
+ box-shadow: 0 0 0 3px hsl(var(--primary) / 0.3) !important;
674
521
  }
675
522
 
676
523
  /* --- NATIVE SELECT --- */
@@ -680,19 +527,21 @@ textarea,
680
527
  border-color: rgba(0, 0, 0, 0.15) !important;
681
528
  border-radius: 9999px !important;
682
529
  color: rgba(0, 0, 0, 0.85) !important;
530
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
683
531
  }
684
532
 
685
533
  .glass-context select:focus,
686
534
  .glass-context [data-slot="native-select"]:focus {
687
- border-color: var(--j3m-primary-300) !important;
688
- --color-ring: rgba(243, 108, 33, 0.3);
535
+ border-color: hsl(var(--j3m-orange-10)) !important;
536
+ --color-ring: var(--primary) / 0.3;
537
+ box-shadow: 0 0 0 3px hsl(var(--primary) / 0.3) !important;
689
538
  }
690
539
 
691
540
  /* --- BUTTONS --- */
692
541
  /* Default button hover in glass */
693
542
  .glass-context [data-slot="button"][data-variant="default"]:hover,
694
543
  .glass-context [data-slot="button"]:not([data-variant]):hover {
695
- background: var(--j3m-primary-350) !important;
544
+ background: hsl(var(--j3m-orange-11)) !important;
696
545
  }
697
546
 
698
547
  /* Outline/Secondary/Ghost buttons - white fill, dark border */
@@ -708,8 +557,8 @@ textarea,
708
557
  .glass-context [data-slot="button"][data-variant="outline"]:hover,
709
558
  .glass-context [data-slot="button"][data-variant="secondary"]:hover,
710
559
  .glass-context [data-slot="button"][data-variant="ghost"]:hover {
711
- background: var(--j3m-primary-250) !important;
712
- border-color: var(--j3m-primary-250) !important;
560
+ background: hsl(var(--primary)) !important;
561
+ border-color: hsl(var(--primary)) !important;
713
562
  color: #FFFFFF !important;
714
563
  }
715
564
 
@@ -723,12 +572,12 @@ textarea,
723
572
  .glass-context [data-slot="radio-group-item"][data-state="checked"],
724
573
  .glass-context [role="radio"][data-state="checked"] {
725
574
  background: rgba(255, 255, 255, 0.8) !important;
726
- border-color: var(--j3m-primary-300) !important;
575
+ border-color: hsl(var(--j3m-orange-10)) !important;
727
576
  }
728
577
 
729
578
  .glass-context [data-slot="radio-group-item"][data-state="checked"] span,
730
579
  .glass-context [role="radio"][data-state="checked"] span {
731
- background: var(--j3m-primary-300) !important;
580
+ background: hsl(var(--j3m-orange-10)) !important;
732
581
  }
733
582
 
734
583
  /* --- CHECKBOX --- */
@@ -740,8 +589,8 @@ textarea,
740
589
 
741
590
  .glass-context [data-slot="checkbox"][data-state="checked"],
742
591
  .glass-context [role="checkbox"][data-state="checked"] {
743
- background: var(--j3m-primary-300) !important;
744
- border-color: var(--j3m-primary-300) !important;
592
+ background: hsl(var(--j3m-orange-10)) !important;
593
+ border-color: hsl(var(--j3m-orange-10)) !important;
745
594
  }
746
595
 
747
596
  /* --- SWITCH --- */
@@ -753,8 +602,8 @@ textarea,
753
602
 
754
603
  .glass-context [data-slot="switch"][data-state="checked"],
755
604
  .glass-context [role="switch"][data-state="checked"] {
756
- background: var(--j3m-primary-250) !important;
757
- border-color: var(--j3m-primary-250) !important;
605
+ background: hsl(var(--primary)) !important;
606
+ border-color: hsl(var(--primary)) !important;
758
607
  }
759
608
 
760
609
  /* Switch thumb - always white */
@@ -879,7 +728,7 @@ textarea,
879
728
  /* Solid mode - orange gradient hover */
880
729
  [data-slot="navigation-menu-link"]:hover,
881
730
  [data-slot="navigation-menu-link"]:focus {
882
- background: linear-gradient(135deg, var(--j3m-primary-200) 0%, var(--j3m-primary-250) 50%, var(--j3m-primary-300) 100%) !important;
731
+ background: linear-gradient(135deg, hsl(var(--j3m-orange-7)) 0%, hsl(var(--primary)) 50%, hsl(var(--j3m-orange-10)) 100%) !important;
883
732
  color: #FFFFFF !important;
884
733
  }
885
734
 
@@ -891,7 +740,7 @@ textarea,
891
740
  /* Glass mode - default orange hover, bright text */
892
741
  .glass-context [data-slot="navigation-menu-content"] a:hover,
893
742
  .glass-context [data-slot="navigation-menu-content"] a:focus {
894
- background: var(--j3m-primary-250) !important;
743
+ background: hsl(var(--primary)) !important;
895
744
  color: #FFFFFF !important;
896
745
  }
897
746
 
@@ -913,7 +762,7 @@ textarea,
913
762
 
914
763
  .glass-context [data-slot="menubar-trigger"]:hover,
915
764
  .glass-context [data-slot="menubar-trigger"][data-state="open"] {
916
- background: var(--j3m-primary-250) !important;
765
+ background: hsl(var(--primary)) !important;
917
766
  color: #FFFFFF !important;
918
767
  }
919
768
 
@@ -925,7 +774,7 @@ textarea,
925
774
 
926
775
  .glass-context [data-slot="menubar-item"]:hover,
927
776
  .glass-context [data-slot="menubar-item"]:focus {
928
- background: var(--j3m-primary-250) !important;
777
+ background: hsl(var(--primary)) !important;
929
778
  color: #FFFFFF !important;
930
779
  }
931
780
 
@@ -958,12 +807,12 @@ textarea,
958
807
  }
959
808
 
960
809
  .glass-context [data-slot="slider-range"] {
961
- background: var(--j3m-primary-250) !important;
810
+ background: hsl(var(--primary)) !important;
962
811
  }
963
812
 
964
813
  .glass-context [data-slot="slider-thumb"] {
965
814
  background: #FFFFFF !important;
966
- border-color: var(--j3m-primary-250) !important;
815
+ border-color: hsl(var(--primary)) !important;
967
816
  }
968
817
 
969
818
  /* --- TOGGLE / TOGGLE GROUP --- */
@@ -976,15 +825,15 @@ textarea,
976
825
 
977
826
  .glass-context [data-slot="toggle"][data-state="on"],
978
827
  .glass-context [data-slot="toggle-group-item"][data-state="on"] {
979
- background: var(--j3m-primary-250) !important;
980
- border-color: var(--j3m-primary-250) !important;
828
+ background: hsl(var(--primary)) !important;
829
+ border-color: hsl(var(--primary)) !important;
981
830
  color: #FFFFFF !important;
982
831
  }
983
832
 
984
833
  .glass-context [data-slot="toggle"]:hover,
985
834
  .glass-context [data-slot="toggle-group-item"]:hover {
986
- background: var(--j3m-primary-250) !important;
987
- border-color: var(--j3m-primary-250) !important;
835
+ background: hsl(var(--primary)) !important;
836
+ border-color: hsl(var(--primary)) !important;
988
837
  color: #FFFFFF !important;
989
838
  }
990
839
 
@@ -1005,7 +854,7 @@ textarea,
1005
854
  .glass-context [role="menuitem"]:hover,
1006
855
  .glass-context [data-slot="dropdown-menu-item"]:focus,
1007
856
  .glass-context [role="menuitem"]:focus {
1008
- background: var(--j3m-primary-250) !important;
857
+ background: hsl(var(--primary)) !important;
1009
858
  color: #FFFFFF !important;
1010
859
  }
1011
860
 
@@ -1028,7 +877,7 @@ textarea,
1028
877
  }
1029
878
 
1030
879
  .glass-context [data-slot="progress-indicator"] {
1031
- background: var(--j3m-primary-250) !important;
880
+ background: hsl(var(--primary)) !important;
1032
881
  }
1033
882
 
1034
883
  /* --- ALERT --- */
@@ -1090,7 +939,7 @@ textarea,
1090
939
  }
1091
940
 
1092
941
  .glass-context [data-slot="command-input-wrapper"]:focus-within {
1093
- border-color: var(--j3m-primary-300) !important;
942
+ border-color: hsl(var(--j3m-orange-10)) !important;
1094
943
  box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.2) !important;
1095
944
  }
1096
945
 
@@ -1110,7 +959,7 @@ textarea,
1110
959
  }
1111
960
 
1112
961
  .glass-context [data-slot="command-item"][data-selected=true] {
1113
- background: var(--j3m-primary-250) !important;
962
+ background: hsl(var(--primary)) !important;
1114
963
  color: #FFFFFF !important;
1115
964
  }
1116
965
 
@@ -1146,26 +995,11 @@ textarea,
1146
995
 
1147
996
  /* --- CARD (ensure frosted glass in glass context) --- */
1148
997
  .glass-context [data-slot="card"]:not([class*="glass"]) {
1149
- background: var(--j3m-glass-frosted-card) !important;
1150
- backdrop-filter: blur(var(--j3m-blur-frosted)) !important;
1151
- -webkit-backdrop-filter: blur(var(--j3m-blur-frosted)) !important;
1152
- border: none !important;
1153
- box-shadow: var(--j3m-glass-shadow-md) !important;
1154
- position: relative;
1155
- }
1156
-
1157
- .glass-context [data-slot="card"]:not([class*="glass"])::before {
1158
- content: '';
1159
- position: absolute;
1160
- inset: 0;
1161
- border-radius: inherit;
1162
- padding: 1px;
1163
- background: var(--j3m-glass-border-gradient);
1164
- -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
1165
- mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
1166
- -webkit-mask-composite: xor;
1167
- mask-composite: exclude;
1168
- pointer-events: none;
998
+ background: hsl(var(--j3m-glass-light-strong)) !important;
999
+ backdrop-filter: blur(var(--j3m-glass-blur)) !important;
1000
+ -webkit-backdrop-filter: blur(var(--j3m-glass-blur)) !important;
1001
+ border: 1px solid hsl(var(--j3m-glass-border)) !important;
1002
+ box-shadow: var(--j3m-glass-shadow) !important;
1169
1003
  }
1170
1004
 
1171
1005
  /* ========================================