@j3m-quantum/ui 0.9.1 → 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 +210 -382
  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
  /* ========================================
@@ -652,9 +495,9 @@ textarea,
652
495
  .glass-context [data-slot="input"]:focus-visible,
653
496
  .glass-context textarea:focus-visible,
654
497
  .glass-context [data-slot="textarea"]:focus-visible {
655
- border-color: var(--j3m-primary-300) !important;
656
- --color-ring: rgba(243, 108, 33, 0.3);
657
- box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.3) !important;
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;
658
501
  }
659
502
 
660
503
  /* --- SELECT TRIGGER --- */
@@ -672,9 +515,9 @@ textarea,
672
515
  .glass-context [data-slot="select-trigger"]:focus,
673
516
  .glass-context [data-slot="select-trigger"]:focus-visible,
674
517
  .glass-context [data-slot="select-trigger"][data-state="open"] {
675
- border-color: var(--j3m-primary-300) !important;
676
- --color-ring: rgba(243, 108, 33, 0.3);
677
- box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.3) !important;
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;
678
521
  }
679
522
 
680
523
  /* --- NATIVE SELECT --- */
@@ -689,16 +532,16 @@ textarea,
689
532
 
690
533
  .glass-context select:focus,
691
534
  .glass-context [data-slot="native-select"]:focus {
692
- border-color: var(--j3m-primary-300) !important;
693
- --color-ring: rgba(243, 108, 33, 0.3);
694
- box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.3) !important;
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;
695
538
  }
696
539
 
697
540
  /* --- BUTTONS --- */
698
541
  /* Default button hover in glass */
699
542
  .glass-context [data-slot="button"][data-variant="default"]:hover,
700
543
  .glass-context [data-slot="button"]:not([data-variant]):hover {
701
- background: var(--j3m-primary-350) !important;
544
+ background: hsl(var(--j3m-orange-11)) !important;
702
545
  }
703
546
 
704
547
  /* Outline/Secondary/Ghost buttons - white fill, dark border */
@@ -714,8 +557,8 @@ textarea,
714
557
  .glass-context [data-slot="button"][data-variant="outline"]:hover,
715
558
  .glass-context [data-slot="button"][data-variant="secondary"]:hover,
716
559
  .glass-context [data-slot="button"][data-variant="ghost"]:hover {
717
- background: var(--j3m-primary-250) !important;
718
- border-color: var(--j3m-primary-250) !important;
560
+ background: hsl(var(--primary)) !important;
561
+ border-color: hsl(var(--primary)) !important;
719
562
  color: #FFFFFF !important;
720
563
  }
721
564
 
@@ -729,12 +572,12 @@ textarea,
729
572
  .glass-context [data-slot="radio-group-item"][data-state="checked"],
730
573
  .glass-context [role="radio"][data-state="checked"] {
731
574
  background: rgba(255, 255, 255, 0.8) !important;
732
- border-color: var(--j3m-primary-300) !important;
575
+ border-color: hsl(var(--j3m-orange-10)) !important;
733
576
  }
734
577
 
735
578
  .glass-context [data-slot="radio-group-item"][data-state="checked"] span,
736
579
  .glass-context [role="radio"][data-state="checked"] span {
737
- background: var(--j3m-primary-300) !important;
580
+ background: hsl(var(--j3m-orange-10)) !important;
738
581
  }
739
582
 
740
583
  /* --- CHECKBOX --- */
@@ -746,8 +589,8 @@ textarea,
746
589
 
747
590
  .glass-context [data-slot="checkbox"][data-state="checked"],
748
591
  .glass-context [role="checkbox"][data-state="checked"] {
749
- background: var(--j3m-primary-300) !important;
750
- border-color: var(--j3m-primary-300) !important;
592
+ background: hsl(var(--j3m-orange-10)) !important;
593
+ border-color: hsl(var(--j3m-orange-10)) !important;
751
594
  }
752
595
 
753
596
  /* --- SWITCH --- */
@@ -759,8 +602,8 @@ textarea,
759
602
 
760
603
  .glass-context [data-slot="switch"][data-state="checked"],
761
604
  .glass-context [role="switch"][data-state="checked"] {
762
- background: var(--j3m-primary-250) !important;
763
- border-color: var(--j3m-primary-250) !important;
605
+ background: hsl(var(--primary)) !important;
606
+ border-color: hsl(var(--primary)) !important;
764
607
  }
765
608
 
766
609
  /* Switch thumb - always white */
@@ -885,7 +728,7 @@ textarea,
885
728
  /* Solid mode - orange gradient hover */
886
729
  [data-slot="navigation-menu-link"]:hover,
887
730
  [data-slot="navigation-menu-link"]:focus {
888
- 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;
889
732
  color: #FFFFFF !important;
890
733
  }
891
734
 
@@ -897,7 +740,7 @@ textarea,
897
740
  /* Glass mode - default orange hover, bright text */
898
741
  .glass-context [data-slot="navigation-menu-content"] a:hover,
899
742
  .glass-context [data-slot="navigation-menu-content"] a:focus {
900
- background: var(--j3m-primary-250) !important;
743
+ background: hsl(var(--primary)) !important;
901
744
  color: #FFFFFF !important;
902
745
  }
903
746
 
@@ -919,7 +762,7 @@ textarea,
919
762
 
920
763
  .glass-context [data-slot="menubar-trigger"]:hover,
921
764
  .glass-context [data-slot="menubar-trigger"][data-state="open"] {
922
- background: var(--j3m-primary-250) !important;
765
+ background: hsl(var(--primary)) !important;
923
766
  color: #FFFFFF !important;
924
767
  }
925
768
 
@@ -931,7 +774,7 @@ textarea,
931
774
 
932
775
  .glass-context [data-slot="menubar-item"]:hover,
933
776
  .glass-context [data-slot="menubar-item"]:focus {
934
- background: var(--j3m-primary-250) !important;
777
+ background: hsl(var(--primary)) !important;
935
778
  color: #FFFFFF !important;
936
779
  }
937
780
 
@@ -964,12 +807,12 @@ textarea,
964
807
  }
965
808
 
966
809
  .glass-context [data-slot="slider-range"] {
967
- background: var(--j3m-primary-250) !important;
810
+ background: hsl(var(--primary)) !important;
968
811
  }
969
812
 
970
813
  .glass-context [data-slot="slider-thumb"] {
971
814
  background: #FFFFFF !important;
972
- border-color: var(--j3m-primary-250) !important;
815
+ border-color: hsl(var(--primary)) !important;
973
816
  }
974
817
 
975
818
  /* --- TOGGLE / TOGGLE GROUP --- */
@@ -982,15 +825,15 @@ textarea,
982
825
 
983
826
  .glass-context [data-slot="toggle"][data-state="on"],
984
827
  .glass-context [data-slot="toggle-group-item"][data-state="on"] {
985
- background: var(--j3m-primary-250) !important;
986
- border-color: var(--j3m-primary-250) !important;
828
+ background: hsl(var(--primary)) !important;
829
+ border-color: hsl(var(--primary)) !important;
987
830
  color: #FFFFFF !important;
988
831
  }
989
832
 
990
833
  .glass-context [data-slot="toggle"]:hover,
991
834
  .glass-context [data-slot="toggle-group-item"]:hover {
992
- background: var(--j3m-primary-250) !important;
993
- border-color: var(--j3m-primary-250) !important;
835
+ background: hsl(var(--primary)) !important;
836
+ border-color: hsl(var(--primary)) !important;
994
837
  color: #FFFFFF !important;
995
838
  }
996
839
 
@@ -1011,7 +854,7 @@ textarea,
1011
854
  .glass-context [role="menuitem"]:hover,
1012
855
  .glass-context [data-slot="dropdown-menu-item"]:focus,
1013
856
  .glass-context [role="menuitem"]:focus {
1014
- background: var(--j3m-primary-250) !important;
857
+ background: hsl(var(--primary)) !important;
1015
858
  color: #FFFFFF !important;
1016
859
  }
1017
860
 
@@ -1034,7 +877,7 @@ textarea,
1034
877
  }
1035
878
 
1036
879
  .glass-context [data-slot="progress-indicator"] {
1037
- background: var(--j3m-primary-250) !important;
880
+ background: hsl(var(--primary)) !important;
1038
881
  }
1039
882
 
1040
883
  /* --- ALERT --- */
@@ -1096,7 +939,7 @@ textarea,
1096
939
  }
1097
940
 
1098
941
  .glass-context [data-slot="command-input-wrapper"]:focus-within {
1099
- border-color: var(--j3m-primary-300) !important;
942
+ border-color: hsl(var(--j3m-orange-10)) !important;
1100
943
  box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.2) !important;
1101
944
  }
1102
945
 
@@ -1116,7 +959,7 @@ textarea,
1116
959
  }
1117
960
 
1118
961
  .glass-context [data-slot="command-item"][data-selected=true] {
1119
- background: var(--j3m-primary-250) !important;
962
+ background: hsl(var(--primary)) !important;
1120
963
  color: #FFFFFF !important;
1121
964
  }
1122
965
 
@@ -1152,26 +995,11 @@ textarea,
1152
995
 
1153
996
  /* --- CARD (ensure frosted glass in glass context) --- */
1154
997
  .glass-context [data-slot="card"]:not([class*="glass"]) {
1155
- background: var(--j3m-glass-frosted-card) !important;
1156
- backdrop-filter: blur(var(--j3m-blur-frosted)) !important;
1157
- -webkit-backdrop-filter: blur(var(--j3m-blur-frosted)) !important;
1158
- border: none !important;
1159
- box-shadow: var(--j3m-glass-shadow-md) !important;
1160
- position: relative;
1161
- }
1162
-
1163
- .glass-context [data-slot="card"]:not([class*="glass"])::before {
1164
- content: '';
1165
- position: absolute;
1166
- inset: 0;
1167
- border-radius: inherit;
1168
- padding: 1px;
1169
- background: var(--j3m-glass-border-gradient);
1170
- -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
1171
- mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
1172
- -webkit-mask-composite: xor;
1173
- mask-composite: exclude;
1174
- 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;
1175
1003
  }
1176
1004
 
1177
1005
  /* ========================================