@j3m-quantum/ui 1.0.0 → 1.3.1
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.
- package/README.md +248 -39
- package/cursor-rules-for-consumers.md +171 -28
- package/dist/index.cjs +3925 -409
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +671 -3
- package/dist/index.d.ts +671 -3
- package/dist/index.js +3820 -409
- package/dist/index.js.map +1 -1
- package/dist/styles/index.css +1540 -279
- package/package.json +5 -3
package/dist/styles/index.css
CHANGED
|
@@ -1,18 +1,14 @@
|
|
|
1
1
|
/* ========================================
|
|
2
2
|
J3M QUANTUM UI - Complete Theme
|
|
3
|
-
|
|
3
|
+
Minimal 12-Step Color Scales + Tailwind v4
|
|
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);
|
|
12
8
|
======================================== */
|
|
13
9
|
|
|
14
10
|
/* ========================================
|
|
15
|
-
COLOR SCALES (
|
|
11
|
+
COLOR SCALES (12-Step, HEX Format)
|
|
16
12
|
|
|
17
13
|
Step Usage Guide:
|
|
18
14
|
1-2: Backgrounds (app, subtle)
|
|
@@ -24,46 +20,54 @@
|
|
|
24
20
|
|
|
25
21
|
:root {
|
|
26
22
|
/* ========================================
|
|
27
|
-
ORANGE SCALE (12-step, brand #F58446 at step
|
|
23
|
+
ORANGE SCALE (12-step, brand #F58446 at step 8)
|
|
28
24
|
======================================== */
|
|
29
|
-
--j3m-orange-1:
|
|
30
|
-
--j3m-orange-2:
|
|
31
|
-
--j3m-orange-3:
|
|
32
|
-
--j3m-orange-4:
|
|
33
|
-
--j3m-orange-5:
|
|
34
|
-
--j3m-orange-6:
|
|
35
|
-
--j3m-orange-7:
|
|
36
|
-
--j3m-orange-8:
|
|
37
|
-
--j3m-orange-9:
|
|
38
|
-
--j3m-orange-10:
|
|
39
|
-
--j3m-orange-11:
|
|
40
|
-
--j3m-orange-12:
|
|
25
|
+
--j3m-orange-1: #FFFDFB;
|
|
26
|
+
--j3m-orange-2: #FFF5ED;
|
|
27
|
+
--j3m-orange-3: #FFE8D9;
|
|
28
|
+
--j3m-orange-4: #FFD4BC;
|
|
29
|
+
--j3m-orange-5: #FFBA8F;
|
|
30
|
+
--j3m-orange-6: #FFA66A;
|
|
31
|
+
--j3m-orange-7: #F79D6B;
|
|
32
|
+
--j3m-orange-8: #F58446;
|
|
33
|
+
--j3m-orange-9: #F36C21;
|
|
34
|
+
--j3m-orange-10: #EA5B0C;
|
|
35
|
+
--j3m-orange-11: #CA4F0B;
|
|
36
|
+
--j3m-orange-12: #8F3808;
|
|
41
37
|
|
|
42
38
|
/* ========================================
|
|
43
|
-
GRAY SCALE (
|
|
39
|
+
GRAY SCALE (13-step neutral)
|
|
40
|
+
|
|
41
|
+
Steps 1-2: Backgrounds (app, subtle)
|
|
42
|
+
Steps 3-5: Interactive backgrounds (element, hover, active)
|
|
43
|
+
Steps 6-8: Borders (subtle, element, hover)
|
|
44
|
+
Steps 9-10: Placeholder/muted text
|
|
45
|
+
Steps 11-12: Body text, headings
|
|
46
|
+
Step 13: Near-black (dark mode surfaces)
|
|
44
47
|
======================================== */
|
|
45
|
-
--j3m-gray-1:
|
|
46
|
-
--j3m-gray-2:
|
|
47
|
-
--j3m-gray-3:
|
|
48
|
-
--j3m-gray-4:
|
|
49
|
-
--j3m-gray-5:
|
|
50
|
-
--j3m-gray-6:
|
|
51
|
-
--j3m-gray-7:
|
|
52
|
-
--j3m-gray-8:
|
|
53
|
-
--j3m-gray-9:
|
|
54
|
-
--j3m-gray-10:
|
|
55
|
-
--j3m-gray-11:
|
|
56
|
-
--j3m-gray-12:
|
|
48
|
+
--j3m-gray-1: #FFFFFF;
|
|
49
|
+
--j3m-gray-2: #FAFAFA;
|
|
50
|
+
--j3m-gray-3: #F0F0F0;
|
|
51
|
+
--j3m-gray-4: #E8E8E8;
|
|
52
|
+
--j3m-gray-5: #E0E0E0;
|
|
53
|
+
--j3m-gray-6: #D2D2D2;
|
|
54
|
+
--j3m-gray-7: #BBBBBB;
|
|
55
|
+
--j3m-gray-8: #A4A4A4;
|
|
56
|
+
--j3m-gray-9: #8E8E8E;
|
|
57
|
+
--j3m-gray-10: #777777;
|
|
58
|
+
--j3m-gray-11: #606060;
|
|
59
|
+
--j3m-gray-12: #333333;
|
|
60
|
+
--j3m-gray-13: #272727;
|
|
57
61
|
|
|
58
62
|
/* ========================================
|
|
59
|
-
STATUS COLORS
|
|
63
|
+
STATUS COLORS
|
|
60
64
|
======================================== */
|
|
61
|
-
--j3m-red-9:
|
|
62
|
-
--j3m-red-10:
|
|
63
|
-
--j3m-yellow-9:
|
|
64
|
-
--j3m-yellow-10:
|
|
65
|
-
--j3m-green-9:
|
|
66
|
-
--j3m-green-10:
|
|
65
|
+
--j3m-red-9: #FB3748;
|
|
66
|
+
--j3m-red-10: #D00416;
|
|
67
|
+
--j3m-yellow-9: #FFDB43;
|
|
68
|
+
--j3m-yellow-10: #DFB400;
|
|
69
|
+
--j3m-green-9: #84EBB4;
|
|
70
|
+
--j3m-green-10: #1FC16B;
|
|
67
71
|
|
|
68
72
|
/* ========================================
|
|
69
73
|
RADIUS TOKENS
|
|
@@ -87,6 +91,11 @@
|
|
|
87
91
|
--j3m-spacing-l: 24px;
|
|
88
92
|
--j3m-spacing-xl: 32px;
|
|
89
93
|
|
|
94
|
+
/* Layout Sizes */
|
|
95
|
+
--header-height: 3.5rem;
|
|
96
|
+
--sidebar-width: 16rem;
|
|
97
|
+
--sidebar-width-collapsed: 3rem;
|
|
98
|
+
|
|
90
99
|
/* ========================================
|
|
91
100
|
STROKE WIDTH TOKENS
|
|
92
101
|
======================================== */
|
|
@@ -97,57 +106,150 @@
|
|
|
97
106
|
--j3m-stroke-xl: 4px;
|
|
98
107
|
|
|
99
108
|
/* ========================================
|
|
100
|
-
GLASS EFFECTS
|
|
109
|
+
GLASS EFFECTS
|
|
101
110
|
======================================== */
|
|
111
|
+
|
|
112
|
+
/* Blur Scale */
|
|
113
|
+
--j3m-blur-sm: 10px;
|
|
114
|
+
--j3m-blur-md: 20px;
|
|
115
|
+
--j3m-blur-lg: 50px;
|
|
116
|
+
--j3m-blur-frosted: 24px;
|
|
102
117
|
--j3m-glass-blur: 20px;
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
--j3m-glass-
|
|
106
|
-
--j3m-glass-
|
|
107
|
-
--j3m-glass-
|
|
118
|
+
|
|
119
|
+
/* Glass Backgrounds */
|
|
120
|
+
--j3m-glass-light-10: rgba(255, 255, 255, 0.1);
|
|
121
|
+
--j3m-glass-light-20: rgba(255, 255, 255, 0.2);
|
|
122
|
+
--j3m-glass-light-40: rgba(255, 255, 255, 0.4);
|
|
123
|
+
--j3m-glass-light-50: rgba(255, 255, 255, 0.5);
|
|
124
|
+
--j3m-glass-light-70: rgba(255, 255, 255, 0.8);
|
|
125
|
+
--j3m-glass-light-80: rgba(255, 255, 255, 0.8);
|
|
126
|
+
--j3m-glass-light-subtle: rgba(255, 255, 255, 0.1);
|
|
127
|
+
--j3m-glass-light: rgba(255, 255, 255, 0.5);
|
|
128
|
+
--j3m-glass-light-hover: rgba(255, 255, 255, 0.8);
|
|
129
|
+
--j3m-glass-light-strong: rgba(255, 255, 255, 0.81);
|
|
130
|
+
--j3m-glass-dark: rgba(51, 51, 51, 0.6);
|
|
131
|
+
--j3m-glass-dark-hover: rgba(51, 51, 51, 0.7);
|
|
132
|
+
--j3m-glass-dark-strong: rgba(51, 51, 51, 0.85);
|
|
133
|
+
--j3m-glass-neutral-subtle: rgba(227, 227, 227, 0.3);
|
|
134
|
+
--j3m-glass-neutral: rgba(227, 227, 227, 0.5);
|
|
135
|
+
--j3m-glass-neutral-strong: rgba(227, 227, 227, 0.7);
|
|
136
|
+
--j3m-glass-primary: rgba(243, 108, 33, 0.1);
|
|
137
|
+
--j3m-glass-primary-highlight: rgba(243, 108, 33, 0.2);
|
|
138
|
+
|
|
139
|
+
/* Frosted Glass (light - enhanced) */
|
|
140
|
+
--j3m-glass-frosted: rgba(255, 255, 255, 0.25);
|
|
141
|
+
--j3m-glass-frosted-strong: rgba(255, 255, 255, 0.4);
|
|
142
|
+
--j3m-glass-frosted-card: rgba(255, 255, 255, 0.35);
|
|
143
|
+
|
|
144
|
+
/* Dark Glass Primitives (blue-tinted dark for sophisticated look) */
|
|
145
|
+
--j3m-glass-dark-base: #0d1117;
|
|
146
|
+
--j3m-glass-dark-10: rgba(13, 17, 23, 0.1);
|
|
147
|
+
--j3m-glass-dark-20: rgba(13, 17, 23, 0.2);
|
|
148
|
+
--j3m-glass-dark-40: rgba(13, 17, 23, 0.4);
|
|
149
|
+
--j3m-glass-dark-50: rgba(13, 17, 23, 0.5);
|
|
150
|
+
--j3m-glass-dark-60: rgba(13, 17, 23, 0.6);
|
|
151
|
+
--j3m-glass-dark-70: rgba(13, 17, 23, 0.7);
|
|
152
|
+
--j3m-glass-dark-80: rgba(13, 17, 23, 0.8);
|
|
153
|
+
--j3m-glass-dark-90: rgba(13, 17, 23, 0.9);
|
|
154
|
+
--j3m-glass-dark-95: rgba(13, 17, 23, 0.95);
|
|
155
|
+
|
|
156
|
+
/* Dark Glass Semantic Tokens (named fills for dark glass mode) */
|
|
157
|
+
--j3m-glass-dark-subtle: rgba(13, 17, 23, 0.3);
|
|
158
|
+
--j3m-glass-dark-muted: rgba(13, 17, 23, 0.4);
|
|
159
|
+
--j3m-glass-dark-surface: rgba(13, 17, 23, 0.7);
|
|
160
|
+
--j3m-glass-dark-surface-hover: rgba(22, 27, 34, 0.8);
|
|
161
|
+
--j3m-glass-dark-surface-active: rgba(30, 35, 42, 0.85);
|
|
162
|
+
--j3m-glass-dark-elevated: rgba(22, 27, 34, 0.85);
|
|
163
|
+
--j3m-glass-dark-elevated-hover: rgba(30, 35, 42, 0.9);
|
|
164
|
+
--j3m-glass-dark-overlay: rgba(22, 27, 34, 0.95);
|
|
165
|
+
--j3m-glass-dark-input: rgba(0, 0, 0, 0.4);
|
|
166
|
+
--j3m-glass-dark-sidebar: rgba(0, 0, 0, 0.6);
|
|
167
|
+
--j3m-glass-dark-element: rgba(255, 255, 255, 0.05);
|
|
168
|
+
--j3m-glass-dark-element-hover: rgba(255, 255, 255, 0.08);
|
|
169
|
+
--j3m-glass-dark-element-active: rgba(255, 255, 255, 0.12);
|
|
170
|
+
|
|
171
|
+
/* Dark Glass Borders */
|
|
172
|
+
--j3m-glass-dark-border: rgba(255, 255, 255, 0.08);
|
|
173
|
+
--j3m-glass-dark-border-light: rgba(255, 255, 255, 0.12);
|
|
174
|
+
--j3m-glass-dark-border-subtle: rgba(255, 255, 255, 0.05);
|
|
175
|
+
|
|
176
|
+
/* Glass Borders (light) */
|
|
177
|
+
--j3m-glass-border-light: rgba(255, 255, 255, 0.3);
|
|
178
|
+
--j3m-glass-border-subtle: rgba(255, 255, 255, 0.1);
|
|
179
|
+
--j3m-glass-border-white: rgba(255, 255, 255, 0.2);
|
|
180
|
+
--j3m-glass-border: rgba(255, 255, 255, 0.2);
|
|
181
|
+
--j3m-glass-border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%);
|
|
182
|
+
|
|
183
|
+
/* Glass Shadows */
|
|
184
|
+
--j3m-glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
185
|
+
--j3m-glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
108
186
|
--j3m-glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
|
|
109
|
-
--j3m-glass-
|
|
187
|
+
--j3m-glass-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
188
|
+
--j3m-glass-shadow-glow: 0 0 10px #F36C21;
|
|
189
|
+
--j3m-glass-shadow-glow-active: 0 0 20px #EA5B0C;
|
|
110
190
|
|
|
111
191
|
/* ========================================
|
|
112
|
-
SHADCN SEMANTIC TOKENS (
|
|
113
|
-
|
|
192
|
+
SHADCN SEMANTIC TOKENS (Light Solid Mode)
|
|
193
|
+
|
|
194
|
+
These are the tokens shadcn components use directly.
|
|
195
|
+
Change these to re-theme the entire UI.
|
|
196
|
+
|
|
197
|
+
Token Purposes:
|
|
198
|
+
- primary: Main action buttons, links, active states
|
|
199
|
+
- secondary: Secondary buttons, subtle actions
|
|
200
|
+
- muted: Subtle backgrounds (tab lists, badges)
|
|
201
|
+
- accent: Highlighted elements, focus states
|
|
202
|
+
- destructive: Delete buttons, error states
|
|
203
|
+
- background: Main page/app background
|
|
204
|
+
- foreground: Primary text color
|
|
205
|
+
- card: Card component backgrounds
|
|
206
|
+
- popover: Dropdown/popover backgrounds
|
|
207
|
+
- border: Default border color
|
|
208
|
+
- input: Input field borders
|
|
209
|
+
- ring: Focus ring color
|
|
114
210
|
======================================== */
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
--
|
|
118
|
-
--
|
|
119
|
-
--
|
|
120
|
-
--
|
|
121
|
-
--accent: var(--j3m-
|
|
122
|
-
--accent-foreground:
|
|
211
|
+
|
|
212
|
+
/* Action Colors */
|
|
213
|
+
--primary: var(--j3m-orange-8);
|
|
214
|
+
--primary-foreground: #FFFFFF;
|
|
215
|
+
--secondary: var(--j3m-bg-muted);
|
|
216
|
+
--secondary-foreground: var(--j3m-gray-11);
|
|
217
|
+
--accent: var(--j3m-gray-3); /* Gray hover - lets orange stand out when used */
|
|
218
|
+
--accent-foreground: var(--j3m-gray-12); /* Dark text on gray hover */
|
|
123
219
|
--destructive: var(--j3m-red-9);
|
|
124
|
-
--destructive-foreground:
|
|
125
|
-
|
|
220
|
+
--destructive-foreground: #FFFFFF;
|
|
221
|
+
|
|
222
|
+
/* Surface Colors */
|
|
223
|
+
--background: var(--j3m-bg-surface);
|
|
126
224
|
--foreground: var(--j3m-gray-12);
|
|
127
|
-
--card: var(--j3m-
|
|
225
|
+
--card: var(--j3m-bg-surface);
|
|
128
226
|
--card-foreground: var(--j3m-gray-12);
|
|
129
|
-
--popover: var(--j3m-
|
|
227
|
+
--popover: var(--j3m-bg-overlay);
|
|
130
228
|
--popover-foreground: var(--j3m-gray-12);
|
|
131
|
-
--
|
|
229
|
+
--muted: var(--j3m-bg-muted);
|
|
230
|
+
--muted-foreground: var(--j3m-gray-9);
|
|
231
|
+
|
|
232
|
+
/* Border & Input Colors */
|
|
233
|
+
--border: var(--j3m-gray-7);
|
|
132
234
|
--input: var(--j3m-gray-6);
|
|
133
|
-
--ring: var(--j3m-orange-
|
|
235
|
+
--ring: var(--j3m-orange-8);
|
|
134
236
|
|
|
135
|
-
/* Sidebar */
|
|
136
|
-
--sidebar: var(--j3m-
|
|
137
|
-
--sidebar-foreground: var(--j3m-gray-
|
|
138
|
-
--sidebar-primary: var(--j3m-orange-
|
|
139
|
-
--sidebar-primary-foreground:
|
|
140
|
-
--sidebar-accent: var(--
|
|
141
|
-
--sidebar-accent-foreground: var(--
|
|
237
|
+
/* Sidebar & Topbar */
|
|
238
|
+
--sidebar: var(--j3m-bg-sidebar);
|
|
239
|
+
--sidebar-foreground: var(--j3m-gray-11);
|
|
240
|
+
--sidebar-primary: var(--j3m-orange-9);
|
|
241
|
+
--sidebar-primary-foreground: #FFFFFF;
|
|
242
|
+
--sidebar-accent: var(--accent); /* Match --accent for consistent hover */
|
|
243
|
+
--sidebar-accent-foreground: var(--accent-foreground);
|
|
142
244
|
--sidebar-border: var(--j3m-gray-6);
|
|
143
245
|
--sidebar-ring: var(--j3m-orange-9);
|
|
144
246
|
|
|
145
247
|
/* Chart Colors */
|
|
146
|
-
--chart-1: var(--j3m-orange-
|
|
248
|
+
--chart-1: var(--j3m-orange-8);
|
|
147
249
|
--chart-2: var(--j3m-orange-7);
|
|
148
|
-
--chart-3: var(--j3m-orange-
|
|
250
|
+
--chart-3: var(--j3m-orange-9);
|
|
149
251
|
--chart-4: var(--j3m-orange-5);
|
|
150
|
-
--chart-5: var(--j3m-orange-
|
|
252
|
+
--chart-5: var(--j3m-orange-10);
|
|
151
253
|
|
|
152
254
|
/* Global Radius */
|
|
153
255
|
--radius: 12px;
|
|
@@ -157,6 +259,56 @@
|
|
|
157
259
|
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
|
|
158
260
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
159
261
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
|
|
262
|
+
|
|
263
|
+
/* ========================================
|
|
264
|
+
BACKGROUND & SURFACE TOKENS (Light Mode - Solid)
|
|
265
|
+
|
|
266
|
+
Layer Hierarchy (back to front):
|
|
267
|
+
- Layer 0: App → The outermost canvas behind everything
|
|
268
|
+
- Layer 1: Page → Main content area background
|
|
269
|
+
- Layer 2: Surface → Cards, sections, containers
|
|
270
|
+
- Layer 3: Elevated → Floating cards, dropdowns (use shadow for depth)
|
|
271
|
+
- Layer 4: Overlay → Dialogs, popovers, tooltips (use shadow for depth)
|
|
272
|
+
|
|
273
|
+
In Solid mode, layers 2-4 are all white - depth comes from shadows.
|
|
274
|
+
======================================== */
|
|
275
|
+
|
|
276
|
+
/* Layer 0: App Background - The outermost canvas */
|
|
277
|
+
--j3m-bg-app: var(--j3m-gray-6);
|
|
278
|
+
|
|
279
|
+
/* Layer 1: Page Background - Main content area */
|
|
280
|
+
--j3m-bg-page: var(--j3m-gray-4);
|
|
281
|
+
|
|
282
|
+
/* Layer 2: Surface - Cards, sections, containers */
|
|
283
|
+
--j3m-bg-surface: var(--j3m-gray-1);
|
|
284
|
+
--j3m-bg-surface-hover: var(--j3m-gray-2);
|
|
285
|
+
--j3m-bg-surface-active: var(--j3m-gray-3);
|
|
286
|
+
|
|
287
|
+
/* Layer 3: Elevated - Floating cards (depth via shadow) */
|
|
288
|
+
--j3m-bg-elevated: var(--j3m-gray-1);
|
|
289
|
+
--j3m-bg-elevated-hover: var(--j3m-gray-2);
|
|
290
|
+
|
|
291
|
+
/* Layer 4: Overlay - Dialogs, popovers, tooltips (depth via shadow) */
|
|
292
|
+
--j3m-bg-overlay: var(--j3m-gray-1);
|
|
293
|
+
|
|
294
|
+
/* Utility Backgrounds */
|
|
295
|
+
--j3m-bg-muted: var(--j3m-gray-4); /* Subtle fills: tab lists, badges */
|
|
296
|
+
--j3m-bg-subtle: var(--j3m-gray-3); /* Very subtle fills */
|
|
297
|
+
|
|
298
|
+
/* Interactive Element Backgrounds */
|
|
299
|
+
--j3m-bg-element: var(--j3m-gray-4); /* Default: buttons, toggles */
|
|
300
|
+
--j3m-bg-element-hover: var(--j3m-gray-5); /* Hover state */
|
|
301
|
+
--j3m-bg-element-active: var(--j3m-gray-6); /* Pressed/active state */
|
|
302
|
+
|
|
303
|
+
/* Input Backgrounds */
|
|
304
|
+
--j3m-bg-input: var(--j3m-gray-1); /* Input field background */
|
|
305
|
+
--j3m-bg-input-disabled: var(--j3m-gray-3); /* Disabled inputs */
|
|
306
|
+
|
|
307
|
+
/* Sidebar Background */
|
|
308
|
+
--j3m-bg-sidebar: var(--j3m-gray-4);
|
|
309
|
+
|
|
310
|
+
/* Toolbar Background */
|
|
311
|
+
--j3m-bg-toolbar: var(--j3m-gray-5);
|
|
160
312
|
}
|
|
161
313
|
|
|
162
314
|
/* ========================================
|
|
@@ -164,36 +316,55 @@
|
|
|
164
316
|
======================================== */
|
|
165
317
|
|
|
166
318
|
.dark {
|
|
167
|
-
/*
|
|
319
|
+
/* Core semantic tokens */
|
|
168
320
|
--background: var(--j3m-gray-12);
|
|
169
321
|
--foreground: var(--j3m-gray-1);
|
|
170
|
-
--card: var(--j3m-gray-
|
|
322
|
+
--card: var(--j3m-gray-13);
|
|
171
323
|
--card-foreground: var(--j3m-gray-1);
|
|
172
|
-
--popover: var(--j3m-gray-
|
|
324
|
+
--popover: var(--j3m-gray-13);
|
|
173
325
|
--popover-foreground: var(--j3m-gray-1);
|
|
174
|
-
--primary: var(--j3m-orange-
|
|
175
|
-
--primary-foreground: var(--j3m-gray-12);
|
|
176
|
-
--secondary:
|
|
326
|
+
--primary: var(--j3m-orange-8);
|
|
327
|
+
--primary-foreground: var(--j3m-gray-12); /* Dark text on orange */
|
|
328
|
+
--secondary: var(--j3m-gray-12);
|
|
177
329
|
--secondary-foreground: var(--j3m-gray-1);
|
|
178
|
-
--muted:
|
|
179
|
-
--muted-foreground: var(--j3m-gray-
|
|
180
|
-
--accent:
|
|
330
|
+
--muted: var(--j3m-gray-12);
|
|
331
|
+
--muted-foreground: var(--j3m-gray-7);
|
|
332
|
+
--accent: #404040; /* Hover state for all components - visible on dark surfaces */
|
|
181
333
|
--accent-foreground: var(--j3m-gray-1);
|
|
182
334
|
--destructive: var(--j3m-red-10);
|
|
183
|
-
--destructive-foreground:
|
|
184
|
-
--border:
|
|
185
|
-
--input:
|
|
186
|
-
--ring: var(--j3m-orange-
|
|
335
|
+
--destructive-foreground: #FFFFFF;
|
|
336
|
+
--border: var(--j3m-gray-11);
|
|
337
|
+
--input: var(--j3m-gray-11);
|
|
338
|
+
--ring: var(--j3m-orange-8);
|
|
187
339
|
|
|
188
|
-
/* Sidebar */
|
|
189
|
-
--sidebar: var(--j3m-gray-
|
|
340
|
+
/* Sidebar & Topbar (uses --sidebar token) */
|
|
341
|
+
--sidebar: var(--j3m-gray-13);
|
|
190
342
|
--sidebar-foreground: var(--j3m-gray-1);
|
|
191
|
-
--sidebar-primary: var(--j3m-orange-
|
|
192
|
-
--sidebar-primary-foreground: var(--j3m-gray-12);
|
|
193
|
-
--sidebar-accent:
|
|
194
|
-
--sidebar-accent-foreground: var(--
|
|
195
|
-
--sidebar-border:
|
|
196
|
-
--sidebar-ring: var(--j3m-orange-
|
|
343
|
+
--sidebar-primary: var(--j3m-orange-8);
|
|
344
|
+
--sidebar-primary-foreground: var(--j3m-gray-12); /* Dark text on orange */
|
|
345
|
+
--sidebar-accent: var(--accent); /* Match --accent for consistent hover */
|
|
346
|
+
--sidebar-accent-foreground: var(--accent-foreground);
|
|
347
|
+
--sidebar-border: var(--j3m-gray-11);
|
|
348
|
+
--sidebar-ring: var(--j3m-orange-8);
|
|
349
|
+
|
|
350
|
+
/* Background & Surface Tokens (Dark Solid Mode)
|
|
351
|
+
Using gray-13 (#272727) for main surfaces per user request */
|
|
352
|
+
--j3m-bg-app: #0d0d0d;
|
|
353
|
+
--j3m-bg-page: #1a1a1a;
|
|
354
|
+
--j3m-bg-surface: var(--j3m-gray-13);
|
|
355
|
+
--j3m-bg-surface-hover: var(--j3m-gray-12);
|
|
356
|
+
--j3m-bg-surface-active: #404040;
|
|
357
|
+
--j3m-bg-elevated: var(--j3m-gray-12);
|
|
358
|
+
--j3m-bg-elevated-hover: #404040;
|
|
359
|
+
--j3m-bg-overlay: var(--j3m-gray-12);
|
|
360
|
+
--j3m-bg-muted: var(--j3m-gray-13);
|
|
361
|
+
--j3m-bg-subtle: #1a1a1a;
|
|
362
|
+
--j3m-bg-element: var(--j3m-gray-12);
|
|
363
|
+
--j3m-bg-element-hover: #404040;
|
|
364
|
+
--j3m-bg-element-active: #4d4d4d;
|
|
365
|
+
--j3m-bg-input: var(--j3m-gray-13);
|
|
366
|
+
--j3m-bg-input-disabled: #1a1a1a;
|
|
367
|
+
--j3m-bg-sidebar: var(--j3m-gray-13);
|
|
197
368
|
}
|
|
198
369
|
|
|
199
370
|
/* ========================================
|
|
@@ -203,51 +374,222 @@
|
|
|
203
374
|
|
|
204
375
|
.theme-solid,
|
|
205
376
|
:root:not(.theme-glass) {
|
|
206
|
-
/* Surface tokens for solid mode */
|
|
207
|
-
--surface-bg:
|
|
208
|
-
--surface-border:
|
|
209
|
-
--surface-shadow:
|
|
377
|
+
/* Surface tokens for solid mode - borders, no shadows */
|
|
378
|
+
--surface-bg: var(--background);
|
|
379
|
+
--surface-border: var(--border);
|
|
380
|
+
--surface-shadow: none;
|
|
210
381
|
--surface-radius: var(--j3m-radius-l);
|
|
211
382
|
--surface-blur: 0px;
|
|
212
383
|
|
|
213
|
-
/* Overlay surfaces (dialogs, popovers, etc) */
|
|
214
|
-
--overlay-bg:
|
|
215
|
-
--overlay-border:
|
|
216
|
-
--overlay-shadow: var(--shadow-
|
|
384
|
+
/* Overlay surfaces (dialogs, popovers, etc) - subtle shadow for elevation */
|
|
385
|
+
--overlay-bg: var(--background);
|
|
386
|
+
--overlay-border: var(--border);
|
|
387
|
+
--overlay-shadow: var(--shadow-md);
|
|
217
388
|
--overlay-blur: 0px;
|
|
218
389
|
}
|
|
219
390
|
|
|
220
391
|
/* ========================================
|
|
221
|
-
THEME MODE: GLASS
|
|
222
|
-
Frosted translucent surfaces
|
|
392
|
+
THEME MODE: GLASS (Light)
|
|
393
|
+
Frosted translucent surfaces on colorful gradient
|
|
223
394
|
======================================== */
|
|
224
395
|
|
|
225
396
|
.theme-glass {
|
|
226
|
-
/*
|
|
227
|
-
--
|
|
228
|
-
|
|
229
|
-
|
|
397
|
+
/* Gradient backgrounds for glass mode */
|
|
398
|
+
--j3m-bg-gradient: linear-gradient(
|
|
399
|
+
135deg,
|
|
400
|
+
hsl(220 60% 20%) 0%,
|
|
401
|
+
hsl(260 40% 25%) 25%,
|
|
402
|
+
hsl(280 50% 30%) 50%,
|
|
403
|
+
hsl(320 40% 35%) 75%,
|
|
404
|
+
hsl(20 60% 40%) 100%
|
|
405
|
+
);
|
|
406
|
+
|
|
407
|
+
--j3m-bg-mesh:
|
|
408
|
+
radial-gradient(at 40% 20%, rgba(102, 126, 234, 0.25) 0px, transparent 50%),
|
|
409
|
+
radial-gradient(at 80% 0%, rgba(118, 75, 162, 0.2) 0px, transparent 50%),
|
|
410
|
+
radial-gradient(at 0% 50%, rgba(240, 147, 251, 0.15) 0px, transparent 50%),
|
|
411
|
+
radial-gradient(at 80% 50%, rgba(243, 108, 33, 0.15) 0px, transparent 50%),
|
|
412
|
+
radial-gradient(at 0% 100%, rgba(253, 160, 133, 0.2) 0px, transparent 50%),
|
|
413
|
+
linear-gradient(180deg, hsl(220 60% 15%) 0%, hsl(260 50% 20%) 50%, hsl(280 40% 25%) 100%);
|
|
414
|
+
|
|
415
|
+
/* Background & Surface Tokens (Glass Light) */
|
|
416
|
+
--j3m-bg-app: transparent;
|
|
417
|
+
--j3m-bg-page: transparent;
|
|
418
|
+
--j3m-bg-surface: var(--j3m-glass-frosted-card);
|
|
419
|
+
--j3m-bg-surface-hover: var(--j3m-glass-light-50);
|
|
420
|
+
--j3m-bg-surface-active: var(--j3m-glass-light-70);
|
|
421
|
+
--j3m-bg-elevated: var(--j3m-glass-light-70);
|
|
422
|
+
--j3m-bg-elevated-hover: var(--j3m-glass-light-80);
|
|
423
|
+
--j3m-bg-overlay: var(--j3m-glass-light-strong);
|
|
424
|
+
--j3m-bg-muted: var(--j3m-glass-light-20);
|
|
425
|
+
--j3m-bg-subtle: var(--j3m-glass-light-10);
|
|
426
|
+
--j3m-bg-element: var(--j3m-glass-light-40);
|
|
427
|
+
--j3m-bg-element-hover: var(--j3m-glass-light-50);
|
|
428
|
+
--j3m-bg-element-active: var(--j3m-glass-light-70);
|
|
429
|
+
--j3m-bg-input: var(--j3m-glass-light-50);
|
|
430
|
+
--j3m-bg-input-disabled: var(--j3m-glass-light-20);
|
|
431
|
+
--j3m-bg-sidebar: #E8E8E8; /* Solid sidebar in glass mode */
|
|
432
|
+
|
|
433
|
+
/* Legacy surface tokens - SOLID colors for portal components (match solid light mode) */
|
|
434
|
+
--surface-bg: var(--j3m-gray-1);
|
|
435
|
+
--surface-border: var(--j3m-gray-6);
|
|
436
|
+
--surface-shadow: var(--j3m-glass-shadow-md);
|
|
230
437
|
--surface-radius: var(--j3m-radius-l);
|
|
231
|
-
--surface-blur:
|
|
438
|
+
--surface-blur: 0;
|
|
232
439
|
|
|
233
|
-
/* Overlay surfaces (dialogs, popovers, etc) */
|
|
234
|
-
--overlay-bg:
|
|
235
|
-
--overlay-border:
|
|
236
|
-
--overlay-shadow: var(--shadow-lg);
|
|
237
|
-
--overlay-blur:
|
|
440
|
+
/* Overlay surfaces (dialogs, popovers, etc) - WHITE to match solid light mode */
|
|
441
|
+
--overlay-bg: var(--j3m-gray-1);
|
|
442
|
+
--overlay-border: var(--j3m-gray-6);
|
|
443
|
+
--overlay-shadow: var(--j3m-glass-shadow-lg);
|
|
444
|
+
--overlay-blur: 0;
|
|
238
445
|
|
|
239
|
-
/*
|
|
240
|
-
--
|
|
241
|
-
--
|
|
242
|
-
--
|
|
446
|
+
/* Shadcn overrides for glass - Portal components use WHITE to match solid light mode */
|
|
447
|
+
--input-bg: var(--j3m-gray-1);
|
|
448
|
+
--card: var(--j3m-glass-light-50);
|
|
449
|
+
--popover: var(--j3m-gray-1);
|
|
450
|
+
|
|
451
|
+
/* Dialog, Sheet, Drawer use popover token - ensure they're white */
|
|
452
|
+
--dialog: var(--j3m-gray-1);
|
|
453
|
+
}
|
|
454
|
+
|
|
455
|
+
/* Light Glass Mode - Portal Components (Dialog, Sheet, Drawer, Popover, HoverCard)
|
|
456
|
+
These render outside the app tree via React Portals.
|
|
457
|
+
Use WHITE backgrounds to match solid light mode. */
|
|
458
|
+
.theme-glass:not(.dark) [data-slot="dialog-content"],
|
|
459
|
+
.theme-glass:not(.dark) [data-slot="sheet-content"],
|
|
460
|
+
.theme-glass:not(.dark) [data-slot="drawer-content"],
|
|
461
|
+
.theme-glass:not(.dark) [data-slot="popover-content"],
|
|
462
|
+
.theme-glass:not(.dark) [data-slot="hover-card-content"],
|
|
463
|
+
.theme-glass:not(.dark) [data-slot="dropdown-menu-content"],
|
|
464
|
+
.theme-glass:not(.dark) [data-slot="context-menu-content"],
|
|
465
|
+
.theme-glass:not(.dark) [data-slot="menubar-content"],
|
|
466
|
+
.theme-glass:not(.dark) [data-slot="select-content"] {
|
|
467
|
+
background: var(--j3m-gray-1) !important;
|
|
468
|
+
border-color: var(--j3m-gray-6) !important;
|
|
469
|
+
color: var(--j3m-gray-12) !important;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
/* Light Glass Mode - Command component and its children */
|
|
473
|
+
.theme-glass:not(.dark) [data-slot="command"] {
|
|
474
|
+
background: transparent !important;
|
|
243
475
|
}
|
|
244
476
|
|
|
245
|
-
.theme-glass.dark {
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
477
|
+
.theme-glass:not(.dark) [data-slot="command-input-wrapper"] {
|
|
478
|
+
background: var(--j3m-gray-1) !important;
|
|
479
|
+
border-color: var(--j3m-gray-6) !important;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
.theme-glass:not(.dark) [data-slot="command-list"] {
|
|
483
|
+
background: var(--j3m-gray-1) !important;
|
|
484
|
+
border-color: var(--j3m-gray-6) !important;
|
|
485
|
+
}
|
|
486
|
+
|
|
487
|
+
.theme-glass:not(.dark) [data-slot="command-input"] {
|
|
488
|
+
color: var(--j3m-gray-12) !important;
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
.theme-glass:not(.dark) [data-slot="command-item"] {
|
|
492
|
+
color: var(--j3m-gray-12) !important;
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
.theme-glass:not(.dark) [data-slot="command-group-heading"] {
|
|
496
|
+
color: var(--j3m-gray-9) !important;
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
/* Light Glass Mode - Calendar should match solid mode */
|
|
500
|
+
.theme-glass:not(.dark) [data-slot="calendar"],
|
|
501
|
+
.theme-glass:not(.dark) .rdp {
|
|
502
|
+
background: var(--j3m-gray-1) !important;
|
|
503
|
+
border-color: var(--j3m-gray-6) !important;
|
|
504
|
+
color: var(--j3m-gray-12) !important;
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
/* ========================================
|
|
508
|
+
THEME MODE: GLASS (Dark)
|
|
509
|
+
Dark frosted surfaces on deep gradient - sophisticated industrial aesthetic
|
|
510
|
+
======================================== */
|
|
511
|
+
|
|
512
|
+
.theme-glass.dark,
|
|
513
|
+
.dark.theme-glass {
|
|
514
|
+
/* Override frosted glass tokens for dark mode */
|
|
515
|
+
--j3m-glass-frosted: var(--j3m-glass-dark-surface);
|
|
516
|
+
--j3m-glass-frosted-strong: var(--j3m-glass-dark-elevated);
|
|
517
|
+
--j3m-glass-frosted-card: var(--j3m-glass-dark-surface);
|
|
518
|
+
--j3m-glass-border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
|
|
519
|
+
--j3m-glass-border-light: var(--j3m-glass-dark-border-light);
|
|
520
|
+
--j3m-glass-border-white: var(--j3m-glass-dark-border);
|
|
521
|
+
--j3m-glass-border-subtle: var(--j3m-glass-dark-border-subtle);
|
|
522
|
+
|
|
523
|
+
/* Override text colors for visibility */
|
|
524
|
+
--card-foreground: var(--accent-foreground);
|
|
525
|
+
--accent-foreground: #FFFFFF;
|
|
526
|
+
--foreground: rgba(255, 255, 255, 0.95);
|
|
527
|
+
--muted-foreground: rgba(255, 255, 255, 0.6);
|
|
528
|
+
|
|
529
|
+
/* Deep gradient backgrounds with subtle orange glow */
|
|
530
|
+
--j3m-bg-gradient: linear-gradient(
|
|
531
|
+
135deg,
|
|
532
|
+
#0a0a0f 0%,
|
|
533
|
+
#0d1117 25%,
|
|
534
|
+
#161b22 50%,
|
|
535
|
+
#1a1a2e 75%,
|
|
536
|
+
#16213e 100%
|
|
537
|
+
);
|
|
538
|
+
|
|
539
|
+
--j3m-bg-mesh:
|
|
540
|
+
radial-gradient(at 0% 0%, rgba(243, 108, 33, 0.15) 0px, transparent 50%),
|
|
541
|
+
radial-gradient(at 100% 0%, rgba(22, 33, 62, 0.5) 0px, transparent 50%),
|
|
542
|
+
radial-gradient(at 80% 80%, rgba(243, 108, 33, 0.08) 0px, transparent 50%),
|
|
543
|
+
radial-gradient(at 0% 100%, rgba(22, 27, 34, 0.6) 0px, transparent 50%),
|
|
544
|
+
linear-gradient(180deg, #0a0a0f 0%, #0d1117 50%, #161b22 100%);
|
|
545
|
+
|
|
546
|
+
/* Background & Surface Tokens (Dark Glass) - Use SOLID colors to match solid dark mode */
|
|
547
|
+
--j3m-bg-app: transparent;
|
|
548
|
+
--j3m-bg-page: transparent;
|
|
549
|
+
--j3m-bg-surface: var(--j3m-gray-13);
|
|
550
|
+
--j3m-bg-surface-hover: var(--j3m-gray-12);
|
|
551
|
+
--j3m-bg-surface-active: #404040;
|
|
552
|
+
--j3m-bg-elevated: var(--j3m-gray-12);
|
|
553
|
+
--j3m-bg-elevated-hover: #404040;
|
|
554
|
+
--j3m-bg-overlay: var(--j3m-gray-13);
|
|
555
|
+
--j3m-bg-muted: var(--j3m-gray-12);
|
|
556
|
+
--j3m-bg-subtle: var(--j3m-gray-11);
|
|
557
|
+
--j3m-bg-element: var(--j3m-gray-12);
|
|
558
|
+
--j3m-bg-element-hover: #404040;
|
|
559
|
+
--j3m-bg-element-active: #4a4a4a;
|
|
560
|
+
--j3m-bg-input: var(--j3m-gray-11);
|
|
561
|
+
--j3m-bg-input-disabled: var(--j3m-gray-10);
|
|
562
|
+
--j3m-bg-sidebar: var(--j3m-gray-13);
|
|
563
|
+
|
|
564
|
+
/* Legacy surface tokens - SOLID colors for portal components */
|
|
565
|
+
--surface-bg: var(--j3m-gray-13);
|
|
566
|
+
--surface-border: var(--j3m-gray-11);
|
|
567
|
+
--overlay-bg: var(--j3m-gray-13);
|
|
568
|
+
--overlay-border: var(--j3m-gray-11);
|
|
569
|
+
|
|
570
|
+
/* Dark glass borders - SOLID to match solid dark mode */
|
|
571
|
+
--border: var(--j3m-gray-11);
|
|
572
|
+
|
|
573
|
+
/* Text colors - match solid dark mode */
|
|
574
|
+
--foreground: var(--j3m-gray-1);
|
|
575
|
+
--muted-foreground: var(--j3m-gray-7);
|
|
576
|
+
|
|
577
|
+
/* Shadcn overrides for dark glass - Use SOLID colors to match solid dark mode */
|
|
578
|
+
--card: var(--j3m-gray-13);
|
|
579
|
+
--popover: var(--j3m-gray-13);
|
|
580
|
+
--secondary: var(--j3m-gray-12);
|
|
581
|
+
--accent: #404040;
|
|
582
|
+
--accent-foreground: var(--j3m-gray-1);
|
|
583
|
+
|
|
584
|
+
/* Sidebar tokens - match solid dark mode */
|
|
585
|
+
--sidebar: var(--j3m-gray-13);
|
|
586
|
+
--sidebar-foreground: var(--j3m-gray-1);
|
|
587
|
+
--sidebar-border: var(--j3m-gray-11);
|
|
588
|
+
--sidebar-accent: #404040;
|
|
589
|
+
--sidebar-accent-foreground: var(--j3m-gray-1);
|
|
590
|
+
|
|
591
|
+
/* Orange accent glow for interactive elements */
|
|
592
|
+
--j3m-glass-shadow-glow: 0 0 20px rgba(243, 108, 33, 0.3);
|
|
251
593
|
}
|
|
252
594
|
|
|
253
595
|
/* ========================================
|
|
@@ -255,14 +597,35 @@
|
|
|
255
597
|
Applied inside glass surfaces to adjust nested components
|
|
256
598
|
======================================== */
|
|
257
599
|
|
|
600
|
+
/* Glass Context - Applied inside glass surfaces
|
|
601
|
+
- card: Keeps glass appearance for in-app content
|
|
602
|
+
- popover: WHITE solid to match solid light mode */
|
|
258
603
|
.glass-context {
|
|
259
|
-
--background: var(--j3m-glass-light-
|
|
260
|
-
--input: var(--j3m-glass-light);
|
|
261
|
-
--card: var(--j3m-glass-light-
|
|
262
|
-
--popover: var(--j3m-
|
|
263
|
-
--muted: var(--j3m-glass-light);
|
|
264
|
-
--
|
|
265
|
-
--
|
|
604
|
+
--background: var(--j3m-glass-light-80);
|
|
605
|
+
--input: var(--j3m-glass-light-50);
|
|
606
|
+
--card: var(--j3m-glass-light-70);
|
|
607
|
+
--popover: var(--j3m-gray-1);
|
|
608
|
+
--muted: var(--j3m-glass-light-50);
|
|
609
|
+
--muted-foreground: rgba(0, 0, 0, 0.55);
|
|
610
|
+
--secondary: var(--j3m-glass-light-80);
|
|
611
|
+
--border: var(--j3m-glass-border-light);
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
/* Dark glass context - Use SOLID dark mode colors to match solid dark mode */
|
|
615
|
+
.dark .glass-context,
|
|
616
|
+
.theme-glass.dark .glass-context {
|
|
617
|
+
--background: var(--j3m-gray-12);
|
|
618
|
+
--input: var(--j3m-gray-11);
|
|
619
|
+
--card: var(--j3m-gray-13);
|
|
620
|
+
--popover: var(--j3m-gray-13);
|
|
621
|
+
--muted: var(--j3m-gray-12);
|
|
622
|
+
--muted-foreground: var(--j3m-gray-7);
|
|
623
|
+
--secondary: var(--j3m-gray-12);
|
|
624
|
+
--accent: #404040;
|
|
625
|
+
--accent-foreground: var(--j3m-gray-1);
|
|
626
|
+
--border: var(--j3m-gray-11);
|
|
627
|
+
--foreground: var(--j3m-gray-1);
|
|
628
|
+
--card-foreground: var(--j3m-gray-1);
|
|
266
629
|
}
|
|
267
630
|
|
|
268
631
|
/* ========================================
|
|
@@ -271,7 +634,9 @@
|
|
|
271
634
|
======================================== */
|
|
272
635
|
|
|
273
636
|
@theme inline {
|
|
274
|
-
/*
|
|
637
|
+
/* ========================================
|
|
638
|
+
SEMANTIC COLORS (J3M Design System)
|
|
639
|
+
======================================== */
|
|
275
640
|
--color-background: var(--background);
|
|
276
641
|
--color-foreground: var(--foreground);
|
|
277
642
|
--color-card: var(--card);
|
|
@@ -309,13 +674,310 @@
|
|
|
309
674
|
--color-sidebar-border: var(--sidebar-border);
|
|
310
675
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
311
676
|
|
|
312
|
-
/*
|
|
677
|
+
/* ========================================
|
|
678
|
+
TAILWIND DEFAULT COLOR PALETTE
|
|
679
|
+
Full 11-step scales (50-950) in OKLCH
|
|
680
|
+
https://tailwindcss.com/docs/colors
|
|
681
|
+
======================================== */
|
|
682
|
+
|
|
683
|
+
/* Red */
|
|
684
|
+
--color-red-50: oklch(0.971 0.013 17.38);
|
|
685
|
+
--color-red-100: oklch(0.936 0.032 17.717);
|
|
686
|
+
--color-red-200: oklch(0.885 0.062 18.334);
|
|
687
|
+
--color-red-300: oklch(0.808 0.114 19.571);
|
|
688
|
+
--color-red-400: oklch(0.704 0.191 22.216);
|
|
689
|
+
--color-red-500: oklch(0.637 0.237 25.331);
|
|
690
|
+
--color-red-600: oklch(0.577 0.245 27.325);
|
|
691
|
+
--color-red-700: oklch(0.505 0.213 27.518);
|
|
692
|
+
--color-red-800: oklch(0.444 0.177 26.899);
|
|
693
|
+
--color-red-900: oklch(0.396 0.141 25.723);
|
|
694
|
+
--color-red-950: oklch(0.258 0.092 26.042);
|
|
695
|
+
|
|
696
|
+
/* Orange */
|
|
697
|
+
--color-orange-50: oklch(0.98 0.016 73.684);
|
|
698
|
+
--color-orange-100: oklch(0.954 0.038 75.164);
|
|
699
|
+
--color-orange-200: oklch(0.901 0.076 70.697);
|
|
700
|
+
--color-orange-300: oklch(0.837 0.128 66.29);
|
|
701
|
+
--color-orange-400: oklch(0.75 0.183 55.934);
|
|
702
|
+
--color-orange-500: oklch(0.705 0.213 47.604);
|
|
703
|
+
--color-orange-600: oklch(0.646 0.222 41.116);
|
|
704
|
+
--color-orange-700: oklch(0.553 0.195 38.402);
|
|
705
|
+
--color-orange-800: oklch(0.47 0.157 37.304);
|
|
706
|
+
--color-orange-900: oklch(0.408 0.123 38.172);
|
|
707
|
+
--color-orange-950: oklch(0.266 0.079 36.259);
|
|
708
|
+
|
|
709
|
+
/* Amber */
|
|
710
|
+
--color-amber-50: oklch(0.987 0.022 95.277);
|
|
711
|
+
--color-amber-100: oklch(0.962 0.059 95.617);
|
|
712
|
+
--color-amber-200: oklch(0.924 0.12 95.746);
|
|
713
|
+
--color-amber-300: oklch(0.879 0.169 91.605);
|
|
714
|
+
--color-amber-400: oklch(0.828 0.189 84.429);
|
|
715
|
+
--color-amber-500: oklch(0.769 0.188 70.08);
|
|
716
|
+
--color-amber-600: oklch(0.666 0.179 58.318);
|
|
717
|
+
--color-amber-700: oklch(0.555 0.163 48.998);
|
|
718
|
+
--color-amber-800: oklch(0.473 0.137 46.201);
|
|
719
|
+
--color-amber-900: oklch(0.414 0.112 45.904);
|
|
720
|
+
--color-amber-950: oklch(0.279 0.077 45.635);
|
|
721
|
+
|
|
722
|
+
/* Yellow */
|
|
723
|
+
--color-yellow-50: oklch(0.987 0.026 102.212);
|
|
724
|
+
--color-yellow-100: oklch(0.973 0.071 103.193);
|
|
725
|
+
--color-yellow-200: oklch(0.945 0.129 101.54);
|
|
726
|
+
--color-yellow-300: oklch(0.905 0.182 98.111);
|
|
727
|
+
--color-yellow-400: oklch(0.852 0.199 91.936);
|
|
728
|
+
--color-yellow-500: oklch(0.795 0.184 86.047);
|
|
729
|
+
--color-yellow-600: oklch(0.681 0.162 75.834);
|
|
730
|
+
--color-yellow-700: oklch(0.554 0.135 66.442);
|
|
731
|
+
--color-yellow-800: oklch(0.476 0.114 61.907);
|
|
732
|
+
--color-yellow-900: oklch(0.421 0.095 57.708);
|
|
733
|
+
--color-yellow-950: oklch(0.286 0.066 53.813);
|
|
734
|
+
|
|
735
|
+
/* Lime */
|
|
736
|
+
--color-lime-50: oklch(0.986 0.031 120.757);
|
|
737
|
+
--color-lime-100: oklch(0.967 0.067 122.328);
|
|
738
|
+
--color-lime-200: oklch(0.938 0.127 124.321);
|
|
739
|
+
--color-lime-300: oklch(0.897 0.196 126.665);
|
|
740
|
+
--color-lime-400: oklch(0.841 0.238 128.85);
|
|
741
|
+
--color-lime-500: oklch(0.768 0.233 130.85);
|
|
742
|
+
--color-lime-600: oklch(0.648 0.2 131.684);
|
|
743
|
+
--color-lime-700: oklch(0.532 0.157 131.589);
|
|
744
|
+
--color-lime-800: oklch(0.453 0.124 130.933);
|
|
745
|
+
--color-lime-900: oklch(0.405 0.101 131.063);
|
|
746
|
+
--color-lime-950: oklch(0.274 0.072 132.109);
|
|
747
|
+
|
|
748
|
+
/* Green */
|
|
749
|
+
--color-green-50: oklch(0.982 0.018 155.826);
|
|
750
|
+
--color-green-100: oklch(0.962 0.044 156.743);
|
|
751
|
+
--color-green-200: oklch(0.925 0.084 155.995);
|
|
752
|
+
--color-green-300: oklch(0.871 0.15 154.449);
|
|
753
|
+
--color-green-400: oklch(0.792 0.209 151.711);
|
|
754
|
+
--color-green-500: oklch(0.723 0.219 149.579);
|
|
755
|
+
--color-green-600: oklch(0.627 0.194 149.214);
|
|
756
|
+
--color-green-700: oklch(0.527 0.154 150.069);
|
|
757
|
+
--color-green-800: oklch(0.448 0.119 151.328);
|
|
758
|
+
--color-green-900: oklch(0.393 0.095 152.535);
|
|
759
|
+
--color-green-950: oklch(0.266 0.065 152.934);
|
|
760
|
+
|
|
761
|
+
/* Emerald */
|
|
762
|
+
--color-emerald-50: oklch(0.979 0.021 166.113);
|
|
763
|
+
--color-emerald-100: oklch(0.95 0.052 163.051);
|
|
764
|
+
--color-emerald-200: oklch(0.905 0.093 164.15);
|
|
765
|
+
--color-emerald-300: oklch(0.845 0.143 164.978);
|
|
766
|
+
--color-emerald-400: oklch(0.765 0.177 163.223);
|
|
767
|
+
--color-emerald-500: oklch(0.696 0.17 162.48);
|
|
768
|
+
--color-emerald-600: oklch(0.596 0.145 163.225);
|
|
769
|
+
--color-emerald-700: oklch(0.508 0.118 165.612);
|
|
770
|
+
--color-emerald-800: oklch(0.432 0.095 166.913);
|
|
771
|
+
--color-emerald-900: oklch(0.378 0.077 168.94);
|
|
772
|
+
--color-emerald-950: oklch(0.262 0.051 172.552);
|
|
773
|
+
|
|
774
|
+
/* Teal */
|
|
775
|
+
--color-teal-50: oklch(0.984 0.014 180.72);
|
|
776
|
+
--color-teal-100: oklch(0.953 0.051 180.801);
|
|
777
|
+
--color-teal-200: oklch(0.91 0.096 180.426);
|
|
778
|
+
--color-teal-300: oklch(0.855 0.138 181.071);
|
|
779
|
+
--color-teal-400: oklch(0.777 0.152 181.912);
|
|
780
|
+
--color-teal-500: oklch(0.704 0.14 182.503);
|
|
781
|
+
--color-teal-600: oklch(0.6 0.118 184.704);
|
|
782
|
+
--color-teal-700: oklch(0.511 0.096 186.391);
|
|
783
|
+
--color-teal-800: oklch(0.437 0.078 188.216);
|
|
784
|
+
--color-teal-900: oklch(0.386 0.063 188.416);
|
|
785
|
+
--color-teal-950: oklch(0.277 0.046 192.524);
|
|
786
|
+
|
|
787
|
+
/* Cyan */
|
|
788
|
+
--color-cyan-50: oklch(0.984 0.019 200.873);
|
|
789
|
+
--color-cyan-100: oklch(0.956 0.045 203.388);
|
|
790
|
+
--color-cyan-200: oklch(0.917 0.08 205.041);
|
|
791
|
+
--color-cyan-300: oklch(0.865 0.127 207.078);
|
|
792
|
+
--color-cyan-400: oklch(0.789 0.154 211.53);
|
|
793
|
+
--color-cyan-500: oklch(0.715 0.143 215.221);
|
|
794
|
+
--color-cyan-600: oklch(0.609 0.126 221.723);
|
|
795
|
+
--color-cyan-700: oklch(0.52 0.105 223.128);
|
|
796
|
+
--color-cyan-800: oklch(0.45 0.085 224.283);
|
|
797
|
+
--color-cyan-900: oklch(0.398 0.07 227.392);
|
|
798
|
+
--color-cyan-950: oklch(0.302 0.056 229.695);
|
|
799
|
+
|
|
800
|
+
/* Sky */
|
|
801
|
+
--color-sky-50: oklch(0.977 0.013 236.62);
|
|
802
|
+
--color-sky-100: oklch(0.951 0.026 236.824);
|
|
803
|
+
--color-sky-200: oklch(0.901 0.058 230.902);
|
|
804
|
+
--color-sky-300: oklch(0.828 0.111 230.318);
|
|
805
|
+
--color-sky-400: oklch(0.746 0.16 232.661);
|
|
806
|
+
--color-sky-500: oklch(0.685 0.169 237.323);
|
|
807
|
+
--color-sky-600: oklch(0.588 0.158 241.966);
|
|
808
|
+
--color-sky-700: oklch(0.5 0.134 242.749);
|
|
809
|
+
--color-sky-800: oklch(0.443 0.11 240.79);
|
|
810
|
+
--color-sky-900: oklch(0.391 0.09 240.876);
|
|
811
|
+
--color-sky-950: oklch(0.293 0.066 243.157);
|
|
812
|
+
|
|
813
|
+
/* Blue */
|
|
814
|
+
--color-blue-50: oklch(0.97 0.014 254.604);
|
|
815
|
+
--color-blue-100: oklch(0.932 0.032 255.585);
|
|
816
|
+
--color-blue-200: oklch(0.882 0.059 254.128);
|
|
817
|
+
--color-blue-300: oklch(0.809 0.105 251.813);
|
|
818
|
+
--color-blue-400: oklch(0.707 0.165 254.624);
|
|
819
|
+
--color-blue-500: oklch(0.623 0.214 259.815);
|
|
820
|
+
--color-blue-600: oklch(0.546 0.245 262.881);
|
|
821
|
+
--color-blue-700: oklch(0.488 0.243 264.376);
|
|
822
|
+
--color-blue-800: oklch(0.424 0.199 265.638);
|
|
823
|
+
--color-blue-900: oklch(0.379 0.146 265.522);
|
|
824
|
+
--color-blue-950: oklch(0.282 0.091 267.935);
|
|
825
|
+
|
|
826
|
+
/* Indigo */
|
|
827
|
+
--color-indigo-50: oklch(0.962 0.018 272.314);
|
|
828
|
+
--color-indigo-100: oklch(0.93 0.034 272.788);
|
|
829
|
+
--color-indigo-200: oklch(0.87 0.065 274.039);
|
|
830
|
+
--color-indigo-300: oklch(0.785 0.115 274.713);
|
|
831
|
+
--color-indigo-400: oklch(0.673 0.182 276.935);
|
|
832
|
+
--color-indigo-500: oklch(0.585 0.233 277.117);
|
|
833
|
+
--color-indigo-600: oklch(0.511 0.262 276.966);
|
|
834
|
+
--color-indigo-700: oklch(0.457 0.24 277.023);
|
|
835
|
+
--color-indigo-800: oklch(0.398 0.195 277.366);
|
|
836
|
+
--color-indigo-900: oklch(0.359 0.144 278.697);
|
|
837
|
+
--color-indigo-950: oklch(0.257 0.09 281.288);
|
|
838
|
+
|
|
839
|
+
/* Violet */
|
|
840
|
+
--color-violet-50: oklch(0.969 0.016 293.756);
|
|
841
|
+
--color-violet-100: oklch(0.943 0.029 294.588);
|
|
842
|
+
--color-violet-200: oklch(0.894 0.057 293.283);
|
|
843
|
+
--color-violet-300: oklch(0.811 0.111 293.571);
|
|
844
|
+
--color-violet-400: oklch(0.702 0.183 293.541);
|
|
845
|
+
--color-violet-500: oklch(0.606 0.25 292.717);
|
|
846
|
+
--color-violet-600: oklch(0.541 0.281 293.009);
|
|
847
|
+
--color-violet-700: oklch(0.491 0.27 292.581);
|
|
848
|
+
--color-violet-800: oklch(0.432 0.232 292.759);
|
|
849
|
+
--color-violet-900: oklch(0.38 0.189 293.745);
|
|
850
|
+
--color-violet-950: oklch(0.283 0.141 291.089);
|
|
851
|
+
|
|
852
|
+
/* Purple */
|
|
853
|
+
--color-purple-50: oklch(0.977 0.014 308.299);
|
|
854
|
+
--color-purple-100: oklch(0.946 0.033 307.174);
|
|
855
|
+
--color-purple-200: oklch(0.902 0.063 306.703);
|
|
856
|
+
--color-purple-300: oklch(0.827 0.119 306.383);
|
|
857
|
+
--color-purple-400: oklch(0.714 0.203 305.504);
|
|
858
|
+
--color-purple-500: oklch(0.627 0.265 303.9);
|
|
859
|
+
--color-purple-600: oklch(0.558 0.288 302.321);
|
|
860
|
+
--color-purple-700: oklch(0.496 0.265 301.924);
|
|
861
|
+
--color-purple-800: oklch(0.438 0.218 303.724);
|
|
862
|
+
--color-purple-900: oklch(0.381 0.176 304.987);
|
|
863
|
+
--color-purple-950: oklch(0.291 0.149 302.717);
|
|
864
|
+
|
|
865
|
+
/* Fuchsia */
|
|
866
|
+
--color-fuchsia-50: oklch(0.977 0.017 320.058);
|
|
867
|
+
--color-fuchsia-100: oklch(0.952 0.037 318.852);
|
|
868
|
+
--color-fuchsia-200: oklch(0.903 0.076 319.62);
|
|
869
|
+
--color-fuchsia-300: oklch(0.833 0.145 321.434);
|
|
870
|
+
--color-fuchsia-400: oklch(0.74 0.238 322.16);
|
|
871
|
+
--color-fuchsia-500: oklch(0.667 0.295 322.15);
|
|
872
|
+
--color-fuchsia-600: oklch(0.591 0.293 322.896);
|
|
873
|
+
--color-fuchsia-700: oklch(0.518 0.253 323.949);
|
|
874
|
+
--color-fuchsia-800: oklch(0.452 0.211 324.591);
|
|
875
|
+
--color-fuchsia-900: oklch(0.401 0.17 325.612);
|
|
876
|
+
--color-fuchsia-950: oklch(0.293 0.136 325.661);
|
|
877
|
+
|
|
878
|
+
/* Pink */
|
|
879
|
+
--color-pink-50: oklch(0.971 0.014 343.198);
|
|
880
|
+
--color-pink-100: oklch(0.948 0.028 342.258);
|
|
881
|
+
--color-pink-200: oklch(0.899 0.061 343.231);
|
|
882
|
+
--color-pink-300: oklch(0.823 0.12 346.018);
|
|
883
|
+
--color-pink-400: oklch(0.718 0.202 349.761);
|
|
884
|
+
--color-pink-500: oklch(0.656 0.241 354.308);
|
|
885
|
+
--color-pink-600: oklch(0.592 0.249 0.584);
|
|
886
|
+
--color-pink-700: oklch(0.525 0.223 3.958);
|
|
887
|
+
--color-pink-800: oklch(0.459 0.187 3.815);
|
|
888
|
+
--color-pink-900: oklch(0.408 0.153 2.432);
|
|
889
|
+
--color-pink-950: oklch(0.284 0.109 3.907);
|
|
890
|
+
|
|
891
|
+
/* Rose */
|
|
892
|
+
--color-rose-50: oklch(0.969 0.015 12.422);
|
|
893
|
+
--color-rose-100: oklch(0.941 0.03 12.58);
|
|
894
|
+
--color-rose-200: oklch(0.892 0.058 10.001);
|
|
895
|
+
--color-rose-300: oklch(0.81 0.117 11.638);
|
|
896
|
+
--color-rose-400: oklch(0.712 0.194 13.428);
|
|
897
|
+
--color-rose-500: oklch(0.645 0.246 16.439);
|
|
898
|
+
--color-rose-600: oklch(0.586 0.253 17.585);
|
|
899
|
+
--color-rose-700: oklch(0.514 0.222 16.935);
|
|
900
|
+
--color-rose-800: oklch(0.455 0.188 13.697);
|
|
901
|
+
--color-rose-900: oklch(0.41 0.159 10.272);
|
|
902
|
+
--color-rose-950: oklch(0.271 0.105 12.094);
|
|
903
|
+
|
|
904
|
+
/* Slate */
|
|
905
|
+
--color-slate-50: oklch(0.984 0.003 247.858);
|
|
906
|
+
--color-slate-100: oklch(0.968 0.007 247.896);
|
|
907
|
+
--color-slate-200: oklch(0.929 0.013 255.508);
|
|
908
|
+
--color-slate-300: oklch(0.869 0.022 252.894);
|
|
909
|
+
--color-slate-400: oklch(0.704 0.04 256.788);
|
|
910
|
+
--color-slate-500: oklch(0.554 0.046 257.417);
|
|
911
|
+
--color-slate-600: oklch(0.446 0.043 257.281);
|
|
912
|
+
--color-slate-700: oklch(0.372 0.044 257.287);
|
|
913
|
+
--color-slate-800: oklch(0.279 0.041 260.031);
|
|
914
|
+
--color-slate-900: oklch(0.208 0.042 265.755);
|
|
915
|
+
--color-slate-950: oklch(0.129 0.042 264.695);
|
|
916
|
+
|
|
917
|
+
/* Gray */
|
|
918
|
+
--color-gray-50: oklch(0.985 0.002 247.839);
|
|
919
|
+
--color-gray-100: oklch(0.967 0.003 264.542);
|
|
920
|
+
--color-gray-200: oklch(0.928 0.006 264.531);
|
|
921
|
+
--color-gray-300: oklch(0.872 0.01 258.338);
|
|
922
|
+
--color-gray-400: oklch(0.707 0.022 261.325);
|
|
923
|
+
--color-gray-500: oklch(0.551 0.027 264.364);
|
|
924
|
+
--color-gray-600: oklch(0.446 0.03 256.802);
|
|
925
|
+
--color-gray-700: oklch(0.373 0.034 259.733);
|
|
926
|
+
--color-gray-800: oklch(0.278 0.033 256.848);
|
|
927
|
+
--color-gray-900: oklch(0.21 0.034 264.665);
|
|
928
|
+
--color-gray-950: oklch(0.13 0.028 261.692);
|
|
929
|
+
|
|
930
|
+
/* Zinc */
|
|
931
|
+
--color-zinc-50: oklch(0.985 0 0);
|
|
932
|
+
--color-zinc-100: oklch(0.967 0.001 286.375);
|
|
933
|
+
--color-zinc-200: oklch(0.92 0.004 286.32);
|
|
934
|
+
--color-zinc-300: oklch(0.871 0.006 286.286);
|
|
935
|
+
--color-zinc-400: oklch(0.705 0.015 286.067);
|
|
936
|
+
--color-zinc-500: oklch(0.552 0.016 285.938);
|
|
937
|
+
--color-zinc-600: oklch(0.442 0.017 285.786);
|
|
938
|
+
--color-zinc-700: oklch(0.37 0.013 285.805);
|
|
939
|
+
--color-zinc-800: oklch(0.274 0.006 286.033);
|
|
940
|
+
--color-zinc-900: oklch(0.21 0.006 285.885);
|
|
941
|
+
--color-zinc-950: oklch(0.141 0.005 285.823);
|
|
942
|
+
|
|
943
|
+
/* Neutral */
|
|
944
|
+
--color-neutral-50: oklch(0.985 0 0);
|
|
945
|
+
--color-neutral-100: oklch(0.97 0 0);
|
|
946
|
+
--color-neutral-200: oklch(0.922 0 0);
|
|
947
|
+
--color-neutral-300: oklch(0.87 0 0);
|
|
948
|
+
--color-neutral-400: oklch(0.708 0 0);
|
|
949
|
+
--color-neutral-500: oklch(0.556 0 0);
|
|
950
|
+
--color-neutral-600: oklch(0.439 0 0);
|
|
951
|
+
--color-neutral-700: oklch(0.371 0 0);
|
|
952
|
+
--color-neutral-800: oklch(0.269 0 0);
|
|
953
|
+
--color-neutral-900: oklch(0.205 0 0);
|
|
954
|
+
--color-neutral-950: oklch(0.145 0 0);
|
|
955
|
+
|
|
956
|
+
/* Stone */
|
|
957
|
+
--color-stone-50: oklch(0.985 0.001 106.423);
|
|
958
|
+
--color-stone-100: oklch(0.97 0.001 106.424);
|
|
959
|
+
--color-stone-200: oklch(0.923 0.003 48.717);
|
|
960
|
+
--color-stone-300: oklch(0.869 0.005 56.366);
|
|
961
|
+
--color-stone-400: oklch(0.709 0.01 56.259);
|
|
962
|
+
--color-stone-500: oklch(0.553 0.013 58.071);
|
|
963
|
+
--color-stone-600: oklch(0.444 0.011 73.639);
|
|
964
|
+
--color-stone-700: oklch(0.374 0.01 67.558);
|
|
965
|
+
--color-stone-800: oklch(0.268 0.007 34.298);
|
|
966
|
+
--color-stone-900: oklch(0.216 0.006 56.043);
|
|
967
|
+
--color-stone-950: oklch(0.147 0.004 49.25);
|
|
968
|
+
|
|
969
|
+
/* Black & White */
|
|
970
|
+
--color-black: #000;
|
|
971
|
+
--color-white: #fff;
|
|
972
|
+
|
|
973
|
+
/* ========================================
|
|
974
|
+
RADIUS & SHADOWS
|
|
975
|
+
======================================== */
|
|
313
976
|
--radius-sm: calc(var(--radius) - 4px);
|
|
314
977
|
--radius-md: calc(var(--radius) - 2px);
|
|
315
978
|
--radius-lg: var(--radius);
|
|
316
979
|
--radius-xl: calc(var(--radius) + 4px);
|
|
317
980
|
|
|
318
|
-
/* Shadows */
|
|
319
981
|
--shadow-sm: var(--shadow-sm);
|
|
320
982
|
--shadow: var(--shadow);
|
|
321
983
|
--shadow-md: var(--shadow-md);
|
|
@@ -328,12 +990,12 @@
|
|
|
328
990
|
|
|
329
991
|
@layer base {
|
|
330
992
|
* {
|
|
331
|
-
border-color:
|
|
993
|
+
border-color: var(--border);
|
|
332
994
|
}
|
|
333
995
|
|
|
334
996
|
body {
|
|
335
|
-
background-color:
|
|
336
|
-
color:
|
|
997
|
+
background-color: var(--background);
|
|
998
|
+
color: var(--foreground);
|
|
337
999
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
338
1000
|
}
|
|
339
1001
|
}
|
|
@@ -428,40 +1090,135 @@ textarea,
|
|
|
428
1090
|
border-radius: 9999px !important;
|
|
429
1091
|
}
|
|
430
1092
|
|
|
1093
|
+
/* ========================================
|
|
1094
|
+
APP BACKGROUND UTILITY CLASS
|
|
1095
|
+
Apply to root element for proper theme backgrounds
|
|
1096
|
+
======================================== */
|
|
1097
|
+
|
|
1098
|
+
.j3m-app-bg {
|
|
1099
|
+
background: var(--j3m-bg-app);
|
|
1100
|
+
min-height: 100vh;
|
|
1101
|
+
}
|
|
1102
|
+
|
|
1103
|
+
/* Light/Dark solid modes - image background with fallback */
|
|
1104
|
+
:root:not(.theme-glass) .j3m-app-bg,
|
|
1105
|
+
.dark:not(.theme-glass) .j3m-app-bg {
|
|
1106
|
+
background-color: var(--j3m-bg-app);
|
|
1107
|
+
background-image: var(--j3m-bg-image, none);
|
|
1108
|
+
background-size: cover;
|
|
1109
|
+
background-position: center;
|
|
1110
|
+
background-attachment: fixed;
|
|
1111
|
+
}
|
|
1112
|
+
|
|
1113
|
+
/* Glass light mode - image background (both same-element and child patterns) */
|
|
1114
|
+
.theme-glass:not(.dark).j3m-app-bg,
|
|
1115
|
+
.theme-glass:not(.dark) .j3m-app-bg {
|
|
1116
|
+
background-color: #E8E8E8;
|
|
1117
|
+
background-image: var(--j3m-bg-image, none);
|
|
1118
|
+
background-size: cover;
|
|
1119
|
+
background-position: center;
|
|
1120
|
+
background-attachment: fixed;
|
|
1121
|
+
}
|
|
1122
|
+
|
|
1123
|
+
/* Glass dark mode - image background (both same-element and child patterns) */
|
|
1124
|
+
.theme-glass.dark.j3m-app-bg,
|
|
1125
|
+
.theme-glass.dark .j3m-app-bg {
|
|
1126
|
+
background-color: #1a1a1a;
|
|
1127
|
+
background-image: var(--j3m-bg-image, none);
|
|
1128
|
+
background-size: cover;
|
|
1129
|
+
background-position: center;
|
|
1130
|
+
background-attachment: fixed;
|
|
1131
|
+
}
|
|
1132
|
+
|
|
1133
|
+
/* No overlay - show image as-is without darkening */
|
|
1134
|
+
|
|
1135
|
+
/* Gradient variant (optional) - use .gradient class alongside .j3m-app-bg */
|
|
1136
|
+
.theme-glass:not(.dark).j3m-app-bg.gradient,
|
|
1137
|
+
.theme-glass:not(.dark) .j3m-app-bg.gradient {
|
|
1138
|
+
background: var(--j3m-bg-gradient);
|
|
1139
|
+
background-attachment: fixed;
|
|
1140
|
+
}
|
|
1141
|
+
|
|
1142
|
+
.theme-glass.dark.j3m-app-bg.gradient,
|
|
1143
|
+
.theme-glass.dark .j3m-app-bg.gradient {
|
|
1144
|
+
background: var(--j3m-bg-gradient);
|
|
1145
|
+
background-attachment: fixed;
|
|
1146
|
+
}
|
|
1147
|
+
|
|
1148
|
+
.theme-glass.dark.j3m-app-bg.gradient::before,
|
|
1149
|
+
.theme-glass.dark .j3m-app-bg.gradient::before {
|
|
1150
|
+
display: none;
|
|
1151
|
+
}
|
|
1152
|
+
|
|
431
1153
|
/* ========================================
|
|
432
1154
|
GLASS UTILITY CLASSES
|
|
433
1155
|
======================================== */
|
|
434
1156
|
|
|
435
1157
|
.glass-light {
|
|
436
|
-
background:
|
|
437
|
-
backdrop-filter: blur(var(--j3m-
|
|
438
|
-
-webkit-backdrop-filter: blur(var(--j3m-
|
|
439
|
-
border: 1px solid
|
|
440
|
-
box-shadow: var(--j3m-glass-shadow);
|
|
1158
|
+
background: var(--j3m-glass-light-subtle);
|
|
1159
|
+
backdrop-filter: blur(var(--j3m-blur-lg));
|
|
1160
|
+
-webkit-backdrop-filter: blur(var(--j3m-blur-lg));
|
|
1161
|
+
border: 1px solid var(--j3m-glass-border-white);
|
|
1162
|
+
box-shadow: var(--j3m-glass-shadow-lg);
|
|
441
1163
|
}
|
|
442
1164
|
|
|
443
1165
|
.glass-dark {
|
|
444
|
-
background:
|
|
445
|
-
backdrop-filter: blur(var(--j3m-
|
|
446
|
-
-webkit-backdrop-filter: blur(var(--j3m-
|
|
447
|
-
border: 1px solid
|
|
448
|
-
box-shadow: var(--j3m-glass-shadow);
|
|
1166
|
+
background: var(--j3m-glass-dark);
|
|
1167
|
+
backdrop-filter: blur(var(--j3m-blur-md));
|
|
1168
|
+
-webkit-backdrop-filter: blur(var(--j3m-blur-md));
|
|
1169
|
+
border: 1px solid var(--j3m-glass-border-subtle);
|
|
1170
|
+
box-shadow: var(--j3m-glass-shadow-lg);
|
|
449
1171
|
}
|
|
450
1172
|
|
|
451
|
-
.glass-
|
|
452
|
-
background:
|
|
453
|
-
backdrop-filter: blur(var(--j3m-
|
|
454
|
-
-webkit-backdrop-filter: blur(var(--j3m-
|
|
455
|
-
border: 1px solid
|
|
456
|
-
box-shadow: var(--j3m-glass-shadow);
|
|
1173
|
+
.glass-neutral {
|
|
1174
|
+
background: var(--j3m-glass-neutral-subtle);
|
|
1175
|
+
backdrop-filter: blur(var(--j3m-blur-lg));
|
|
1176
|
+
-webkit-backdrop-filter: blur(var(--j3m-blur-lg));
|
|
1177
|
+
border: 1px solid var(--j3m-glass-primary);
|
|
1178
|
+
box-shadow: var(--j3m-glass-shadow-lg);
|
|
457
1179
|
}
|
|
458
1180
|
|
|
459
1181
|
.glass-primary {
|
|
460
|
-
background:
|
|
461
|
-
backdrop-filter: blur(var(--j3m-
|
|
462
|
-
-webkit-backdrop-filter: blur(var(--j3m-
|
|
463
|
-
border: 1px solid
|
|
464
|
-
box-shadow: var(--j3m-glass-shadow);
|
|
1182
|
+
background: var(--j3m-glass-primary);
|
|
1183
|
+
backdrop-filter: blur(var(--j3m-blur-sm));
|
|
1184
|
+
-webkit-backdrop-filter: blur(var(--j3m-blur-sm));
|
|
1185
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
1186
|
+
box-shadow: var(--j3m-glass-shadow-glow);
|
|
1187
|
+
}
|
|
1188
|
+
|
|
1189
|
+
/* Frosted glass with gradient border */
|
|
1190
|
+
.glass-frosted {
|
|
1191
|
+
background: var(--j3m-glass-frosted);
|
|
1192
|
+
backdrop-filter: blur(var(--j3m-blur-frosted));
|
|
1193
|
+
-webkit-backdrop-filter: blur(var(--j3m-blur-frosted));
|
|
1194
|
+
box-shadow: var(--j3m-glass-shadow-lg);
|
|
1195
|
+
}
|
|
1196
|
+
|
|
1197
|
+
.glass-frosted-strong {
|
|
1198
|
+
background: var(--j3m-glass-frosted-strong);
|
|
1199
|
+
backdrop-filter: blur(var(--j3m-blur-frosted));
|
|
1200
|
+
-webkit-backdrop-filter: blur(var(--j3m-blur-frosted));
|
|
1201
|
+
box-shadow: var(--j3m-glass-shadow-lg);
|
|
1202
|
+
}
|
|
1203
|
+
|
|
1204
|
+
/* Gradient border utility - creates top-lit edge effect */
|
|
1205
|
+
.glass-border-gradient {
|
|
1206
|
+
position: relative;
|
|
1207
|
+
border: none !important;
|
|
1208
|
+
}
|
|
1209
|
+
|
|
1210
|
+
.glass-border-gradient::before {
|
|
1211
|
+
content: '';
|
|
1212
|
+
position: absolute;
|
|
1213
|
+
inset: 0;
|
|
1214
|
+
border-radius: inherit;
|
|
1215
|
+
padding: 1px;
|
|
1216
|
+
background: var(--j3m-glass-border-gradient);
|
|
1217
|
+
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
1218
|
+
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
1219
|
+
-webkit-mask-composite: xor;
|
|
1220
|
+
mask-composite: exclude;
|
|
1221
|
+
pointer-events: none;
|
|
465
1222
|
}
|
|
466
1223
|
|
|
467
1224
|
/* ========================================
|
|
@@ -495,9 +1252,9 @@ textarea,
|
|
|
495
1252
|
.glass-context [data-slot="input"]:focus-visible,
|
|
496
1253
|
.glass-context textarea:focus-visible,
|
|
497
1254
|
.glass-context [data-slot="textarea"]:focus-visible {
|
|
498
|
-
border-color:
|
|
499
|
-
--color-ring:
|
|
500
|
-
box-shadow: 0 0 0 3px
|
|
1255
|
+
border-color: var(--j3m-orange-9) !important;
|
|
1256
|
+
--color-ring: rgba(243, 108, 33, 0.3);
|
|
1257
|
+
box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.3) !important;
|
|
501
1258
|
}
|
|
502
1259
|
|
|
503
1260
|
/* --- SELECT TRIGGER --- */
|
|
@@ -515,9 +1272,9 @@ textarea,
|
|
|
515
1272
|
.glass-context [data-slot="select-trigger"]:focus,
|
|
516
1273
|
.glass-context [data-slot="select-trigger"]:focus-visible,
|
|
517
1274
|
.glass-context [data-slot="select-trigger"][data-state="open"] {
|
|
518
|
-
border-color:
|
|
519
|
-
--color-ring:
|
|
520
|
-
box-shadow: 0 0 0 3px
|
|
1275
|
+
border-color: var(--j3m-orange-9) !important;
|
|
1276
|
+
--color-ring: rgba(243, 108, 33, 0.3);
|
|
1277
|
+
box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.3) !important;
|
|
521
1278
|
}
|
|
522
1279
|
|
|
523
1280
|
/* --- NATIVE SELECT --- */
|
|
@@ -532,16 +1289,16 @@ textarea,
|
|
|
532
1289
|
|
|
533
1290
|
.glass-context select:focus,
|
|
534
1291
|
.glass-context [data-slot="native-select"]:focus {
|
|
535
|
-
border-color:
|
|
536
|
-
--color-ring:
|
|
537
|
-
box-shadow: 0 0 0 3px
|
|
1292
|
+
border-color: var(--j3m-orange-9) !important;
|
|
1293
|
+
--color-ring: rgba(243, 108, 33, 0.3);
|
|
1294
|
+
box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.3) !important;
|
|
538
1295
|
}
|
|
539
1296
|
|
|
540
1297
|
/* --- BUTTONS --- */
|
|
541
1298
|
/* Default button hover in glass */
|
|
542
1299
|
.glass-context [data-slot="button"][data-variant="default"]:hover,
|
|
543
1300
|
.glass-context [data-slot="button"]:not([data-variant]):hover {
|
|
544
|
-
background:
|
|
1301
|
+
background: var(--j3m-orange-10) !important;
|
|
545
1302
|
}
|
|
546
1303
|
|
|
547
1304
|
/* Outline/Secondary/Ghost buttons - white fill, dark border */
|
|
@@ -553,13 +1310,13 @@ textarea,
|
|
|
553
1310
|
color: rgba(0, 0, 0, 0.8) !important;
|
|
554
1311
|
}
|
|
555
1312
|
|
|
556
|
-
/* Button hover:
|
|
1313
|
+
/* Button hover: grey to match solid mode */
|
|
557
1314
|
.glass-context [data-slot="button"][data-variant="outline"]:hover,
|
|
558
1315
|
.glass-context [data-slot="button"][data-variant="secondary"]:hover,
|
|
559
1316
|
.glass-context [data-slot="button"][data-variant="ghost"]:hover {
|
|
560
|
-
background:
|
|
561
|
-
border-color:
|
|
562
|
-
color:
|
|
1317
|
+
background: var(--accent) !important;
|
|
1318
|
+
border-color: var(--accent) !important;
|
|
1319
|
+
color: var(--accent-foreground) !important;
|
|
563
1320
|
}
|
|
564
1321
|
|
|
565
1322
|
/* --- RADIO BUTTONS --- */
|
|
@@ -572,12 +1329,12 @@ textarea,
|
|
|
572
1329
|
.glass-context [data-slot="radio-group-item"][data-state="checked"],
|
|
573
1330
|
.glass-context [role="radio"][data-state="checked"] {
|
|
574
1331
|
background: rgba(255, 255, 255, 0.8) !important;
|
|
575
|
-
border-color:
|
|
1332
|
+
border-color: var(--j3m-orange-9) !important;
|
|
576
1333
|
}
|
|
577
1334
|
|
|
578
1335
|
.glass-context [data-slot="radio-group-item"][data-state="checked"] span,
|
|
579
1336
|
.glass-context [role="radio"][data-state="checked"] span {
|
|
580
|
-
background:
|
|
1337
|
+
background: var(--j3m-orange-9) !important;
|
|
581
1338
|
}
|
|
582
1339
|
|
|
583
1340
|
/* --- CHECKBOX --- */
|
|
@@ -589,8 +1346,8 @@ textarea,
|
|
|
589
1346
|
|
|
590
1347
|
.glass-context [data-slot="checkbox"][data-state="checked"],
|
|
591
1348
|
.glass-context [role="checkbox"][data-state="checked"] {
|
|
592
|
-
background:
|
|
593
|
-
border-color:
|
|
1349
|
+
background: var(--j3m-orange-9) !important;
|
|
1350
|
+
border-color: var(--j3m-orange-9) !important;
|
|
594
1351
|
}
|
|
595
1352
|
|
|
596
1353
|
/* --- SWITCH --- */
|
|
@@ -602,8 +1359,8 @@ textarea,
|
|
|
602
1359
|
|
|
603
1360
|
.glass-context [data-slot="switch"][data-state="checked"],
|
|
604
1361
|
.glass-context [role="switch"][data-state="checked"] {
|
|
605
|
-
background:
|
|
606
|
-
border-color:
|
|
1362
|
+
background: var(--primary) !important;
|
|
1363
|
+
border-color: var(--primary) !important;
|
|
607
1364
|
}
|
|
608
1365
|
|
|
609
1366
|
/* Switch thumb - always white */
|
|
@@ -664,12 +1421,13 @@ textarea,
|
|
|
664
1421
|
}
|
|
665
1422
|
|
|
666
1423
|
/* --- CALENDAR --- */
|
|
667
|
-
/* Glass mode -
|
|
1424
|
+
/* Glass mode - use solid white to match solid light mode */
|
|
668
1425
|
.glass-context [data-slot="calendar"],
|
|
669
1426
|
.glass-context .rdp {
|
|
670
|
-
background:
|
|
671
|
-
border: 1px solid
|
|
1427
|
+
background: var(--j3m-gray-1) !important;
|
|
1428
|
+
border: 1px solid var(--j3m-gray-6) !important;
|
|
672
1429
|
border-radius: var(--j3m-radius-l) !important;
|
|
1430
|
+
color: var(--j3m-gray-12) !important;
|
|
673
1431
|
}
|
|
674
1432
|
|
|
675
1433
|
/* Remove inner white background from calendar grid */
|
|
@@ -725,80 +1483,91 @@ textarea,
|
|
|
725
1483
|
}
|
|
726
1484
|
|
|
727
1485
|
/* --- NAVIGATION MENU --- */
|
|
728
|
-
/*
|
|
729
|
-
[data-slot="navigation-menu-link"]:hover,
|
|
730
|
-
[data-slot="navigation-menu-link"]:focus {
|
|
731
|
-
background: linear-gradient(135deg,
|
|
1486
|
+
/* Light solid mode - orange gradient hover */
|
|
1487
|
+
.theme-solid:not(.dark) [data-slot="navigation-menu-link"]:hover,
|
|
1488
|
+
.theme-solid:not(.dark) [data-slot="navigation-menu-link"]:focus {
|
|
1489
|
+
background: linear-gradient(135deg, var(--j3m-orange-7) 0%, var(--primary) 50%, var(--j3m-orange-9) 100%) !important;
|
|
732
1490
|
color: #FFFFFF !important;
|
|
733
1491
|
}
|
|
734
1492
|
|
|
735
|
-
[data-slot="navigation-menu-link"]:hover *,
|
|
736
|
-
[data-slot="navigation-menu-link"]:focus * {
|
|
1493
|
+
.theme-solid:not(.dark) [data-slot="navigation-menu-link"]:hover *,
|
|
1494
|
+
.theme-solid:not(.dark) [data-slot="navigation-menu-link"]:focus * {
|
|
737
1495
|
color: #FFFFFF !important;
|
|
738
1496
|
}
|
|
739
1497
|
|
|
740
|
-
/*
|
|
1498
|
+
/* Dark solid mode - grey hover to match theme */
|
|
1499
|
+
.dark [data-slot="navigation-menu-link"]:hover,
|
|
1500
|
+
.dark [data-slot="navigation-menu-link"]:focus {
|
|
1501
|
+
background: var(--accent) !important;
|
|
1502
|
+
color: var(--accent-foreground) !important;
|
|
1503
|
+
}
|
|
1504
|
+
|
|
1505
|
+
.dark [data-slot="navigation-menu-link"]:hover *,
|
|
1506
|
+
.dark [data-slot="navigation-menu-link"]:focus * {
|
|
1507
|
+
color: var(--accent-foreground) !important;
|
|
1508
|
+
}
|
|
1509
|
+
|
|
1510
|
+
/* Glass mode - grey hover to match solid mode */
|
|
741
1511
|
.glass-context [data-slot="navigation-menu-content"] a:hover,
|
|
742
1512
|
.glass-context [data-slot="navigation-menu-content"] a:focus {
|
|
743
|
-
background:
|
|
744
|
-
color:
|
|
1513
|
+
background: var(--accent) !important;
|
|
1514
|
+
color: var(--accent-foreground) !important;
|
|
745
1515
|
}
|
|
746
1516
|
|
|
747
1517
|
.glass-context [data-slot="navigation-menu-content"] a:hover *,
|
|
748
1518
|
.glass-context [data-slot="navigation-menu-content"] a:focus * {
|
|
749
|
-
color:
|
|
1519
|
+
color: var(--accent-foreground) !important;
|
|
750
1520
|
}
|
|
751
1521
|
|
|
752
1522
|
/* --- MENUBAR --- */
|
|
753
1523
|
.glass-context [data-slot="menubar"] {
|
|
754
|
-
background:
|
|
755
|
-
border: 1px solid
|
|
1524
|
+
background: var(--sidebar) !important;
|
|
1525
|
+
border: 1px solid var(--sidebar-border) !important;
|
|
756
1526
|
border-radius: var(--j3m-radius-l) !important;
|
|
757
1527
|
}
|
|
758
1528
|
|
|
759
1529
|
.glass-context [data-slot="menubar-trigger"] {
|
|
760
|
-
color:
|
|
1530
|
+
color: var(--sidebar-foreground) !important;
|
|
761
1531
|
}
|
|
762
1532
|
|
|
763
1533
|
.glass-context [data-slot="menubar-trigger"]:hover,
|
|
764
1534
|
.glass-context [data-slot="menubar-trigger"][data-state="open"] {
|
|
765
|
-
background:
|
|
766
|
-
color:
|
|
1535
|
+
background: var(--accent) !important;
|
|
1536
|
+
color: var(--accent-foreground) !important;
|
|
767
1537
|
}
|
|
768
1538
|
|
|
769
1539
|
.glass-context [data-slot="menubar-content"] {
|
|
770
|
-
background:
|
|
771
|
-
|
|
772
|
-
border: 1px solid rgba(0, 0, 0, 0.15) !important;
|
|
1540
|
+
background: var(--sidebar) !important;
|
|
1541
|
+
border: 1px solid var(--sidebar-border) !important;
|
|
773
1542
|
}
|
|
774
1543
|
|
|
775
1544
|
.glass-context [data-slot="menubar-item"]:hover,
|
|
776
1545
|
.glass-context [data-slot="menubar-item"]:focus {
|
|
777
|
-
background:
|
|
778
|
-
color:
|
|
1546
|
+
background: var(--accent) !important;
|
|
1547
|
+
color: var(--accent-foreground) !important;
|
|
779
1548
|
}
|
|
780
1549
|
|
|
781
1550
|
/* --- TABS --- */
|
|
782
1551
|
.glass-context [data-slot="tabs-list"] {
|
|
783
|
-
background:
|
|
1552
|
+
background: var(--muted) !important;
|
|
784
1553
|
}
|
|
785
1554
|
|
|
786
1555
|
.glass-context [data-slot="tabs-trigger"] {
|
|
787
|
-
color:
|
|
1556
|
+
color: var(--muted-foreground) !important;
|
|
788
1557
|
}
|
|
789
1558
|
|
|
790
1559
|
.glass-context [data-slot="tabs-trigger"][data-state="active"] {
|
|
791
|
-
background:
|
|
792
|
-
color:
|
|
1560
|
+
background: var(--sidebar) !important;
|
|
1561
|
+
color: var(--sidebar-foreground) !important;
|
|
793
1562
|
}
|
|
794
1563
|
|
|
795
1564
|
/* --- ACCORDION --- */
|
|
796
1565
|
.glass-context [data-slot="accordion-item"] {
|
|
797
|
-
border-color:
|
|
1566
|
+
border-color: var(--sidebar-border) !important;
|
|
798
1567
|
}
|
|
799
1568
|
|
|
800
1569
|
.glass-context [data-slot="accordion-trigger"] {
|
|
801
|
-
color:
|
|
1570
|
+
color: var(--sidebar-foreground) !important;
|
|
802
1571
|
}
|
|
803
1572
|
|
|
804
1573
|
/* --- SLIDER --- */
|
|
@@ -807,62 +1576,74 @@ textarea,
|
|
|
807
1576
|
}
|
|
808
1577
|
|
|
809
1578
|
.glass-context [data-slot="slider-range"] {
|
|
810
|
-
background:
|
|
1579
|
+
background: var(--primary) !important;
|
|
811
1580
|
}
|
|
812
1581
|
|
|
813
1582
|
.glass-context [data-slot="slider-thumb"] {
|
|
814
1583
|
background: #FFFFFF !important;
|
|
815
|
-
border-color:
|
|
1584
|
+
border-color: var(--primary) !important;
|
|
816
1585
|
}
|
|
817
1586
|
|
|
818
1587
|
/* --- TOGGLE / TOGGLE GROUP --- */
|
|
819
1588
|
.glass-context [data-slot="toggle"],
|
|
820
1589
|
.glass-context [data-slot="toggle-group-item"] {
|
|
821
|
-
background:
|
|
822
|
-
border-color:
|
|
823
|
-
color:
|
|
1590
|
+
background: var(--sidebar) !important;
|
|
1591
|
+
border-color: var(--sidebar-border) !important;
|
|
1592
|
+
color: var(--sidebar-foreground) !important;
|
|
824
1593
|
}
|
|
825
1594
|
|
|
826
1595
|
.glass-context [data-slot="toggle"][data-state="on"],
|
|
827
1596
|
.glass-context [data-slot="toggle-group-item"][data-state="on"] {
|
|
828
|
-
background:
|
|
829
|
-
border-color:
|
|
1597
|
+
background: var(--primary) !important;
|
|
1598
|
+
border-color: var(--primary) !important;
|
|
830
1599
|
color: #FFFFFF !important;
|
|
831
1600
|
}
|
|
832
1601
|
|
|
833
1602
|
.glass-context [data-slot="toggle"]:hover,
|
|
834
1603
|
.glass-context [data-slot="toggle-group-item"]:hover {
|
|
835
|
-
background:
|
|
836
|
-
border-color:
|
|
837
|
-
color:
|
|
1604
|
+
background: var(--accent) !important;
|
|
1605
|
+
border-color: var(--accent) !important;
|
|
1606
|
+
color: var(--accent-foreground) !important;
|
|
838
1607
|
}
|
|
839
1608
|
|
|
840
1609
|
/* --- DROPDOWN MENU --- */
|
|
841
1610
|
.glass-context [data-slot="dropdown-menu-content"],
|
|
842
1611
|
.glass-context [role="menu"] {
|
|
843
|
-
background:
|
|
844
|
-
|
|
845
|
-
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
1612
|
+
background: var(--sidebar) !important;
|
|
1613
|
+
border-color: var(--sidebar-border) !important;
|
|
846
1614
|
}
|
|
847
1615
|
|
|
848
1616
|
.glass-context [data-slot="dropdown-menu-item"],
|
|
849
1617
|
.glass-context [role="menuitem"] {
|
|
850
|
-
color:
|
|
1618
|
+
color: var(--sidebar-foreground) !important;
|
|
851
1619
|
}
|
|
852
1620
|
|
|
853
1621
|
.glass-context [data-slot="dropdown-menu-item"]:hover,
|
|
854
1622
|
.glass-context [role="menuitem"]:hover,
|
|
855
1623
|
.glass-context [data-slot="dropdown-menu-item"]:focus,
|
|
856
1624
|
.glass-context [role="menuitem"]:focus {
|
|
857
|
-
background:
|
|
858
|
-
color:
|
|
1625
|
+
background: var(--accent) !important;
|
|
1626
|
+
color: var(--accent-foreground) !important;
|
|
1627
|
+
}
|
|
1628
|
+
|
|
1629
|
+
/* Context menu hover */
|
|
1630
|
+
.glass-context [data-slot="context-menu-item"]:hover,
|
|
1631
|
+
.glass-context [data-slot="context-menu-item"]:focus {
|
|
1632
|
+
background: var(--accent) !important;
|
|
1633
|
+
color: var(--accent-foreground) !important;
|
|
1634
|
+
}
|
|
1635
|
+
|
|
1636
|
+
/* Select item hover */
|
|
1637
|
+
.glass-context [data-slot="select-item"]:hover,
|
|
1638
|
+
.glass-context [data-slot="select-item"]:focus {
|
|
1639
|
+
background: var(--accent) !important;
|
|
1640
|
+
color: var(--accent-foreground) !important;
|
|
859
1641
|
}
|
|
860
1642
|
|
|
861
1643
|
/* --- POPOVER --- */
|
|
862
1644
|
.glass-context [data-slot="popover-content"] {
|
|
863
|
-
background:
|
|
864
|
-
|
|
865
|
-
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
1645
|
+
background: var(--sidebar) !important;
|
|
1646
|
+
border-color: var(--sidebar-border) !important;
|
|
866
1647
|
}
|
|
867
1648
|
|
|
868
1649
|
/* --- TOOLTIP --- */
|
|
@@ -877,34 +1658,25 @@ textarea,
|
|
|
877
1658
|
}
|
|
878
1659
|
|
|
879
1660
|
.glass-context [data-slot="progress-indicator"] {
|
|
880
|
-
background:
|
|
1661
|
+
background: var(--primary) !important;
|
|
881
1662
|
}
|
|
882
1663
|
|
|
883
1664
|
/* --- ALERT --- */
|
|
884
1665
|
.glass-context [data-slot="alert"] {
|
|
885
|
-
background:
|
|
886
|
-
border-color:
|
|
1666
|
+
background: var(--sidebar) !important;
|
|
1667
|
+
border-color: var(--sidebar-border) !important;
|
|
887
1668
|
}
|
|
888
1669
|
|
|
889
1670
|
/* --- SHEET --- */
|
|
890
1671
|
.glass-context [data-slot="sheet-content"] {
|
|
891
|
-
background:
|
|
892
|
-
|
|
893
|
-
padding-left: 1.5rem !important;
|
|
894
|
-
padding-right: 1.5rem !important;
|
|
895
|
-
}
|
|
896
|
-
|
|
897
|
-
.glass-context [data-slot="sheet-header"],
|
|
898
|
-
.glass-context [data-slot="sheet-footer"],
|
|
899
|
-
.glass-context [data-slot="sheet-body"] {
|
|
900
|
-
padding-left: 0 !important;
|
|
901
|
-
padding-right: 0 !important;
|
|
1672
|
+
background: var(--sidebar) !important;
|
|
1673
|
+
border-color: var(--sidebar-border) !important;
|
|
902
1674
|
}
|
|
903
1675
|
|
|
904
1676
|
/* --- DIALOG --- */
|
|
905
1677
|
.glass-context [data-slot="dialog-content"] {
|
|
906
|
-
background:
|
|
907
|
-
|
|
1678
|
+
background: var(--sidebar) !important;
|
|
1679
|
+
border-color: var(--sidebar-border) !important;
|
|
908
1680
|
}
|
|
909
1681
|
|
|
910
1682
|
/* --- COMMAND / SEARCH INPUT --- */
|
|
@@ -914,40 +1686,56 @@ textarea,
|
|
|
914
1686
|
}
|
|
915
1687
|
|
|
916
1688
|
.glass-context [data-slot="command"] {
|
|
917
|
-
background:
|
|
918
|
-
background-color:
|
|
919
|
-
border:
|
|
920
|
-
|
|
1689
|
+
background: var(--j3m-gray-1) !important;
|
|
1690
|
+
background-color: var(--j3m-gray-1) !important;
|
|
1691
|
+
border: 1px solid var(--j3m-gray-6) !important;
|
|
1692
|
+
border-width: 1px !important;
|
|
1693
|
+
border-style: solid !important;
|
|
1694
|
+
box-shadow: var(--shadow-md) !important;
|
|
921
1695
|
outline: none !important;
|
|
1696
|
+
border-radius: var(--j3m-radius-l) !important;
|
|
1697
|
+
overflow: hidden !important;
|
|
922
1698
|
}
|
|
923
1699
|
|
|
1700
|
+
/* Command in glass-context - unified container styling */
|
|
924
1701
|
.glass-context [data-slot="command-input-wrapper"] {
|
|
925
|
-
background:
|
|
926
|
-
border:
|
|
927
|
-
border-
|
|
928
|
-
|
|
929
|
-
|
|
1702
|
+
background: transparent !important;
|
|
1703
|
+
border: 0 !important;
|
|
1704
|
+
border-width: 0 !important;
|
|
1705
|
+
border-bottom: 1px solid var(--j3m-gray-6) !important;
|
|
1706
|
+
border-radius: 0 !important;
|
|
1707
|
+
padding-left: 0.75rem !important;
|
|
1708
|
+
padding-right: 0.75rem !important;
|
|
930
1709
|
}
|
|
931
1710
|
|
|
932
1711
|
.glass-context [data-slot="command-input"] {
|
|
933
1712
|
background: transparent !important;
|
|
934
|
-
color:
|
|
1713
|
+
color: var(--j3m-gray-12) !important;
|
|
935
1714
|
}
|
|
936
1715
|
|
|
937
1716
|
.glass-context [data-slot="command-input"]::placeholder {
|
|
938
|
-
color:
|
|
1717
|
+
color: var(--j3m-gray-9) !important;
|
|
1718
|
+
}
|
|
1719
|
+
|
|
1720
|
+
/* Override generic input focus styles for command-input */
|
|
1721
|
+
.glass-context [data-slot="command-input"]:focus,
|
|
1722
|
+
.glass-context [data-slot="command-input"]:focus-visible {
|
|
1723
|
+
border-color: transparent !important;
|
|
1724
|
+
box-shadow: none !important;
|
|
1725
|
+
outline: none !important;
|
|
939
1726
|
}
|
|
940
1727
|
|
|
941
1728
|
.glass-context [data-slot="command-input-wrapper"]:focus-within {
|
|
942
|
-
border-color:
|
|
943
|
-
box-shadow:
|
|
1729
|
+
border-bottom-color: var(--j3m-gray-8) !important;
|
|
1730
|
+
box-shadow: none !important;
|
|
944
1731
|
}
|
|
945
1732
|
|
|
946
1733
|
.glass-context [data-slot="command-list"] {
|
|
947
|
-
background:
|
|
948
|
-
border:
|
|
949
|
-
border-
|
|
950
|
-
|
|
1734
|
+
background: transparent !important;
|
|
1735
|
+
border: 0 !important;
|
|
1736
|
+
border-width: 0 !important;
|
|
1737
|
+
border-radius: 0 !important;
|
|
1738
|
+
margin-top: 0 !important;
|
|
951
1739
|
}
|
|
952
1740
|
|
|
953
1741
|
.glass-context [data-slot="command-group"] {
|
|
@@ -955,35 +1743,52 @@ textarea,
|
|
|
955
1743
|
}
|
|
956
1744
|
|
|
957
1745
|
.glass-context [data-slot="command-item"] {
|
|
958
|
-
color:
|
|
1746
|
+
color: var(--j3m-gray-12) !important;
|
|
1747
|
+
}
|
|
1748
|
+
|
|
1749
|
+
.glass-context [data-slot="command-group-heading"] {
|
|
1750
|
+
color: var(--j3m-gray-9) !important;
|
|
1751
|
+
}
|
|
1752
|
+
|
|
1753
|
+
/* Command item hover - use accent (grey) not primary (orange) */
|
|
1754
|
+
.glass-context [data-slot="command-item"]:hover,
|
|
1755
|
+
.glass-context [cmdk-item]:hover {
|
|
1756
|
+
background: var(--accent) !important;
|
|
1757
|
+
color: var(--accent-foreground) !important;
|
|
959
1758
|
}
|
|
960
1759
|
|
|
1760
|
+
.glass-context [data-slot="command-item"]:hover *,
|
|
1761
|
+
.glass-context [cmdk-item]:hover * {
|
|
1762
|
+
color: var(--accent-foreground) !important;
|
|
1763
|
+
}
|
|
1764
|
+
|
|
1765
|
+
/* Command item selected state - also use accent for consistency */
|
|
961
1766
|
.glass-context [data-slot="command-item"][data-selected=true] {
|
|
962
|
-
background:
|
|
963
|
-
color:
|
|
1767
|
+
background: var(--accent) !important;
|
|
1768
|
+
color: var(--accent-foreground) !important;
|
|
964
1769
|
}
|
|
965
1770
|
|
|
966
1771
|
.glass-context [data-slot="command-item"][data-selected=true] svg {
|
|
967
|
-
color:
|
|
1772
|
+
color: var(--accent-foreground) !important;
|
|
968
1773
|
}
|
|
969
1774
|
|
|
970
1775
|
.glass-context [data-slot="command-separator"] {
|
|
971
|
-
background:
|
|
1776
|
+
background: var(--sidebar-border) !important;
|
|
972
1777
|
}
|
|
973
1778
|
|
|
974
1779
|
/* --- SCROLL AREA --- */
|
|
975
1780
|
.glass-context [data-slot="scroll-area"] {
|
|
976
|
-
background:
|
|
977
|
-
border: 1px solid
|
|
1781
|
+
background: var(--sidebar) !important;
|
|
1782
|
+
border: 1px solid var(--sidebar-border) !important;
|
|
978
1783
|
border-radius: var(--radius) !important;
|
|
979
1784
|
}
|
|
980
1785
|
|
|
981
1786
|
.glass-context [data-slot="scroll-area-thumb"] {
|
|
982
|
-
background: rgba(0, 0, 0, 0.
|
|
1787
|
+
background: rgba(0, 0, 0, 0.15) !important;
|
|
983
1788
|
}
|
|
984
1789
|
|
|
985
1790
|
.glass-context [data-slot="scroll-area-thumb"]:hover {
|
|
986
|
-
background: rgba(0, 0, 0, 0.
|
|
1791
|
+
background: rgba(0, 0, 0, 0.25) !important;
|
|
987
1792
|
}
|
|
988
1793
|
|
|
989
1794
|
/* --- COLLAPSIBLE --- */
|
|
@@ -995,11 +1800,446 @@ textarea,
|
|
|
995
1800
|
|
|
996
1801
|
/* --- CARD (ensure frosted glass in glass context) --- */
|
|
997
1802
|
.glass-context [data-slot="card"]:not([class*="glass"]) {
|
|
998
|
-
background:
|
|
999
|
-
backdrop-filter: blur(var(--j3m-
|
|
1000
|
-
-webkit-backdrop-filter: blur(var(--j3m-
|
|
1001
|
-
border:
|
|
1002
|
-
box-shadow: var(--j3m-glass-shadow) !important;
|
|
1803
|
+
background: var(--j3m-glass-frosted-card) !important;
|
|
1804
|
+
backdrop-filter: blur(var(--j3m-blur-frosted)) !important;
|
|
1805
|
+
-webkit-backdrop-filter: blur(var(--j3m-blur-frosted)) !important;
|
|
1806
|
+
border: none !important;
|
|
1807
|
+
box-shadow: var(--j3m-glass-shadow-md) !important;
|
|
1808
|
+
position: relative;
|
|
1809
|
+
}
|
|
1810
|
+
|
|
1811
|
+
.glass-context [data-slot="card"]:not([class*="glass"])::before {
|
|
1812
|
+
content: '';
|
|
1813
|
+
position: absolute;
|
|
1814
|
+
inset: 0;
|
|
1815
|
+
border-radius: inherit;
|
|
1816
|
+
padding: 1px;
|
|
1817
|
+
background: var(--j3m-glass-border-gradient);
|
|
1818
|
+
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
1819
|
+
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
1820
|
+
-webkit-mask-composite: xor;
|
|
1821
|
+
mask-composite: exclude;
|
|
1822
|
+
pointer-events: none;
|
|
1823
|
+
}
|
|
1824
|
+
|
|
1825
|
+
/* ========================================
|
|
1826
|
+
DARK GLASS MODE COMPONENT OVERRIDES
|
|
1827
|
+
Styling for components inside .dark .glass-context
|
|
1828
|
+
======================================== */
|
|
1829
|
+
|
|
1830
|
+
/* --- CARDS (Dark Glass) - Use SOLID dark colors to match solid dark mode --- */
|
|
1831
|
+
.dark.theme-glass [data-slot="card"],
|
|
1832
|
+
.theme-glass.dark [data-slot="card"],
|
|
1833
|
+
.dark .glass-context [data-slot="card"],
|
|
1834
|
+
.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;
|
|
1839
|
+
}
|
|
1840
|
+
|
|
1841
|
+
/* Remove the light gradient border pseudo-element in dark mode */
|
|
1842
|
+
.dark.theme-glass [data-slot="card"]::before,
|
|
1843
|
+
.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;
|
|
1847
|
+
}
|
|
1848
|
+
|
|
1849
|
+
/* Card text colors in dark glass */
|
|
1850
|
+
.dark.theme-glass [data-slot="card"] *,
|
|
1851
|
+
.theme-glass.dark [data-slot="card"] *,
|
|
1852
|
+
.dark.theme-glass .glass-context *,
|
|
1853
|
+
.theme-glass.dark .glass-context * {
|
|
1854
|
+
--card-foreground: rgba(255, 255, 255, 0.95);
|
|
1855
|
+
}
|
|
1856
|
+
|
|
1857
|
+
/* --- INPUT FIELDS (Dark Glass) --- */
|
|
1858
|
+
.dark .glass-context input,
|
|
1859
|
+
.dark .glass-context [data-slot="input"],
|
|
1860
|
+
.dark .glass-context textarea,
|
|
1861
|
+
.dark .glass-context [data-slot="textarea"],
|
|
1862
|
+
.theme-glass.dark .glass-context input,
|
|
1863
|
+
.theme-glass.dark .glass-context [data-slot="input"],
|
|
1864
|
+
.theme-glass.dark .glass-context textarea,
|
|
1865
|
+
.theme-glass.dark .glass-context [data-slot="textarea"] {
|
|
1866
|
+
background: var(--sidebar) !important;
|
|
1867
|
+
border-color: var(--sidebar-border) !important;
|
|
1868
|
+
color: var(--sidebar-foreground) !important;
|
|
1869
|
+
}
|
|
1870
|
+
|
|
1871
|
+
.dark .glass-context input::placeholder,
|
|
1872
|
+
.dark .glass-context [data-slot="input"]::placeholder,
|
|
1873
|
+
.theme-glass.dark .glass-context input::placeholder,
|
|
1874
|
+
.theme-glass.dark .glass-context [data-slot="input"]::placeholder {
|
|
1875
|
+
color: var(--muted-foreground) !important;
|
|
1876
|
+
}
|
|
1877
|
+
|
|
1878
|
+
/* --- SELECT TRIGGER (Dark Glass) --- */
|
|
1879
|
+
.dark .glass-context [data-slot="select-trigger"],
|
|
1880
|
+
.theme-glass.dark .glass-context [data-slot="select-trigger"] {
|
|
1881
|
+
background: var(--sidebar) !important;
|
|
1882
|
+
border-color: var(--sidebar-border) !important;
|
|
1883
|
+
color: var(--sidebar-foreground) !important;
|
|
1884
|
+
}
|
|
1885
|
+
|
|
1886
|
+
/* --- BUTTONS (Dark Glass) --- */
|
|
1887
|
+
.dark .glass-context [data-slot="button"][data-variant="outline"],
|
|
1888
|
+
.dark .glass-context [data-slot="button"][data-variant="secondary"],
|
|
1889
|
+
.dark .glass-context [data-slot="button"][data-variant="ghost"],
|
|
1890
|
+
.theme-glass.dark .glass-context [data-slot="button"][data-variant="outline"],
|
|
1891
|
+
.theme-glass.dark .glass-context [data-slot="button"][data-variant="secondary"],
|
|
1892
|
+
.theme-glass.dark .glass-context [data-slot="button"][data-variant="ghost"] {
|
|
1893
|
+
background: var(--sidebar) !important;
|
|
1894
|
+
border-color: var(--sidebar-border) !important;
|
|
1895
|
+
color: var(--sidebar-foreground) !important;
|
|
1896
|
+
}
|
|
1897
|
+
|
|
1898
|
+
.dark .glass-context [data-slot="button"][data-variant="outline"]:hover,
|
|
1899
|
+
.dark .glass-context [data-slot="button"][data-variant="secondary"]:hover,
|
|
1900
|
+
.dark .glass-context [data-slot="button"][data-variant="ghost"]:hover,
|
|
1901
|
+
.theme-glass.dark .glass-context [data-slot="button"][data-variant="outline"]:hover,
|
|
1902
|
+
.theme-glass.dark .glass-context [data-slot="button"][data-variant="secondary"]:hover,
|
|
1903
|
+
.theme-glass.dark .glass-context [data-slot="button"][data-variant="ghost"]:hover {
|
|
1904
|
+
background: var(--accent) !important;
|
|
1905
|
+
border-color: var(--accent) !important;
|
|
1906
|
+
color: var(--accent-foreground) !important;
|
|
1907
|
+
}
|
|
1908
|
+
|
|
1909
|
+
/* --- TABS (Dark Glass) --- */
|
|
1910
|
+
.dark .glass-context [data-slot="tabs-list"],
|
|
1911
|
+
.theme-glass.dark .glass-context [data-slot="tabs-list"] {
|
|
1912
|
+
background: var(--muted) !important;
|
|
1913
|
+
}
|
|
1914
|
+
|
|
1915
|
+
.dark .glass-context [data-slot="tabs-trigger"],
|
|
1916
|
+
.theme-glass.dark .glass-context [data-slot="tabs-trigger"] {
|
|
1917
|
+
color: var(--muted-foreground) !important;
|
|
1918
|
+
}
|
|
1919
|
+
|
|
1920
|
+
.dark .glass-context [data-slot="tabs-trigger"][data-state="active"],
|
|
1921
|
+
.theme-glass.dark .glass-context [data-slot="tabs-trigger"][data-state="active"] {
|
|
1922
|
+
background: var(--sidebar) !important;
|
|
1923
|
+
color: var(--sidebar-foreground) !important;
|
|
1924
|
+
}
|
|
1925
|
+
|
|
1926
|
+
/* --- TABLE (Dark Glass) --- */
|
|
1927
|
+
.dark .glass-context table,
|
|
1928
|
+
.dark .glass-context [data-slot="table"],
|
|
1929
|
+
.theme-glass.dark .glass-context table,
|
|
1930
|
+
.theme-glass.dark .glass-context [data-slot="table"] {
|
|
1931
|
+
background: var(--sidebar) !important;
|
|
1932
|
+
}
|
|
1933
|
+
|
|
1934
|
+
.dark .glass-context thead,
|
|
1935
|
+
.dark .glass-context [data-slot="table-header"],
|
|
1936
|
+
.theme-glass.dark .glass-context thead,
|
|
1937
|
+
.theme-glass.dark .glass-context [data-slot="table-header"] {
|
|
1938
|
+
background: var(--muted) !important;
|
|
1939
|
+
}
|
|
1940
|
+
|
|
1941
|
+
.dark .glass-context th,
|
|
1942
|
+
.dark .glass-context td,
|
|
1943
|
+
.theme-glass.dark .glass-context th,
|
|
1944
|
+
.theme-glass.dark .glass-context td {
|
|
1945
|
+
border-color: var(--sidebar-border) !important;
|
|
1946
|
+
color: var(--sidebar-foreground) !important;
|
|
1947
|
+
}
|
|
1948
|
+
|
|
1949
|
+
/* --- DROPDOWN/POPOVER (Dark Glass) --- */
|
|
1950
|
+
.dark .glass-context [data-slot="dropdown-menu-content"],
|
|
1951
|
+
.dark .glass-context [data-slot="popover-content"],
|
|
1952
|
+
.dark .glass-context [role="menu"],
|
|
1953
|
+
.theme-glass.dark .glass-context [data-slot="dropdown-menu-content"],
|
|
1954
|
+
.theme-glass.dark .glass-context [data-slot="popover-content"],
|
|
1955
|
+
.theme-glass.dark .glass-context [role="menu"] {
|
|
1956
|
+
background: var(--sidebar) !important;
|
|
1957
|
+
border-color: var(--sidebar-border) !important;
|
|
1958
|
+
}
|
|
1959
|
+
|
|
1960
|
+
.dark .glass-context [data-slot="dropdown-menu-item"],
|
|
1961
|
+
.dark .glass-context [role="menuitem"],
|
|
1962
|
+
.theme-glass.dark .glass-context [data-slot="dropdown-menu-item"],
|
|
1963
|
+
.theme-glass.dark .glass-context [role="menuitem"] {
|
|
1964
|
+
color: var(--sidebar-foreground) !important;
|
|
1965
|
+
}
|
|
1966
|
+
|
|
1967
|
+
/* Dark Glass Mode - Hover Overrides */
|
|
1968
|
+
.dark .glass-context [data-slot="menubar-trigger"]:hover,
|
|
1969
|
+
.dark .glass-context [data-slot="menubar-trigger"][data-state="open"],
|
|
1970
|
+
.theme-glass.dark .glass-context [data-slot="menubar-trigger"]:hover,
|
|
1971
|
+
.theme-glass.dark .glass-context [data-slot="menubar-trigger"][data-state="open"] {
|
|
1972
|
+
background: var(--accent) !important;
|
|
1973
|
+
color: var(--accent-foreground) !important;
|
|
1974
|
+
}
|
|
1975
|
+
|
|
1976
|
+
.dark .glass-context [data-slot="menubar-item"]:hover,
|
|
1977
|
+
.dark .glass-context [data-slot="menubar-item"]:focus,
|
|
1978
|
+
.theme-glass.dark .glass-context [data-slot="menubar-item"]:hover,
|
|
1979
|
+
.theme-glass.dark .glass-context [data-slot="menubar-item"]:focus {
|
|
1980
|
+
background: var(--accent) !important;
|
|
1981
|
+
color: var(--accent-foreground) !important;
|
|
1982
|
+
}
|
|
1983
|
+
|
|
1984
|
+
.dark .glass-context [data-slot="toggle"]:hover,
|
|
1985
|
+
.dark .glass-context [data-slot="toggle-group-item"]:hover,
|
|
1986
|
+
.theme-glass.dark .glass-context [data-slot="toggle"]:hover,
|
|
1987
|
+
.theme-glass.dark .glass-context [data-slot="toggle-group-item"]:hover {
|
|
1988
|
+
background: var(--accent) !important;
|
|
1989
|
+
border-color: var(--accent) !important;
|
|
1990
|
+
color: var(--accent-foreground) !important;
|
|
1991
|
+
}
|
|
1992
|
+
|
|
1993
|
+
.dark .glass-context [data-slot="dropdown-menu-item"]:hover,
|
|
1994
|
+
.dark .glass-context [data-slot="dropdown-menu-item"]:focus,
|
|
1995
|
+
.dark .glass-context [role="menuitem"]:hover,
|
|
1996
|
+
.theme-glass.dark .glass-context [data-slot="dropdown-menu-item"]:hover,
|
|
1997
|
+
.theme-glass.dark .glass-context [data-slot="dropdown-menu-item"]:focus,
|
|
1998
|
+
.theme-glass.dark .glass-context [role="menuitem"]:hover {
|
|
1999
|
+
background: var(--accent) !important;
|
|
2000
|
+
color: var(--accent-foreground) !important;
|
|
2001
|
+
}
|
|
2002
|
+
|
|
2003
|
+
.dark .glass-context [data-slot="context-menu-item"]:hover,
|
|
2004
|
+
.dark .glass-context [data-slot="context-menu-item"]:focus,
|
|
2005
|
+
.theme-glass.dark .glass-context [data-slot="context-menu-item"]:hover,
|
|
2006
|
+
.theme-glass.dark .glass-context [data-slot="context-menu-item"]:focus {
|
|
2007
|
+
background: var(--accent) !important;
|
|
2008
|
+
color: var(--accent-foreground) !important;
|
|
2009
|
+
}
|
|
2010
|
+
|
|
2011
|
+
.dark .glass-context [data-slot="navigation-menu-content"] a:hover,
|
|
2012
|
+
.dark .glass-context [data-slot="navigation-menu-link"]:hover,
|
|
2013
|
+
.theme-glass.dark .glass-context [data-slot="navigation-menu-content"] a:hover,
|
|
2014
|
+
.theme-glass.dark .glass-context [data-slot="navigation-menu-link"]:hover {
|
|
2015
|
+
background: var(--accent) !important;
|
|
2016
|
+
color: var(--accent-foreground) !important;
|
|
2017
|
+
}
|
|
2018
|
+
|
|
2019
|
+
.dark .glass-context [data-slot="navigation-menu-content"] a:hover *,
|
|
2020
|
+
.dark .glass-context [data-slot="navigation-menu-link"]:hover *,
|
|
2021
|
+
.theme-glass.dark .glass-context [data-slot="navigation-menu-content"] a:hover *,
|
|
2022
|
+
.theme-glass.dark .glass-context [data-slot="navigation-menu-link"]:hover * {
|
|
2023
|
+
color: var(--accent-foreground) !important;
|
|
2024
|
+
}
|
|
2025
|
+
|
|
2026
|
+
/* Command item hover in dark glass */
|
|
2027
|
+
.dark .glass-context [data-slot="command-item"]:hover,
|
|
2028
|
+
.dark .glass-context [cmdk-item]:hover,
|
|
2029
|
+
.theme-glass.dark .glass-context [data-slot="command-item"]:hover,
|
|
2030
|
+
.theme-glass.dark .glass-context [cmdk-item]:hover {
|
|
2031
|
+
background: var(--accent) !important;
|
|
2032
|
+
color: var(--accent-foreground) !important;
|
|
2033
|
+
}
|
|
2034
|
+
|
|
2035
|
+
.dark .glass-context [data-slot="command-item"]:hover *,
|
|
2036
|
+
.dark .glass-context [cmdk-item]:hover *,
|
|
2037
|
+
.theme-glass.dark .glass-context [data-slot="command-item"]:hover *,
|
|
2038
|
+
.theme-glass.dark .glass-context [cmdk-item]:hover * {
|
|
2039
|
+
color: var(--accent-foreground) !important;
|
|
2040
|
+
}
|
|
2041
|
+
|
|
2042
|
+
/* Select item hover in dark glass */
|
|
2043
|
+
.dark .glass-context [data-slot="select-item"]:hover,
|
|
2044
|
+
.dark .glass-context [data-slot="select-item"]:focus,
|
|
2045
|
+
.theme-glass.dark .glass-context [data-slot="select-item"]:hover,
|
|
2046
|
+
.theme-glass.dark .glass-context [data-slot="select-item"]:focus {
|
|
2047
|
+
background: var(--accent) !important;
|
|
2048
|
+
color: var(--accent-foreground) !important;
|
|
2049
|
+
}
|
|
2050
|
+
|
|
2051
|
+
/* --- DIALOG/SHEET (Dark Glass) --- */
|
|
2052
|
+
.dark .glass-context [data-slot="dialog-content"],
|
|
2053
|
+
.dark .glass-context [data-slot="sheet-content"],
|
|
2054
|
+
.theme-glass.dark .glass-context [data-slot="dialog-content"],
|
|
2055
|
+
.theme-glass.dark .glass-context [data-slot="sheet-content"] {
|
|
2056
|
+
background: var(--sidebar) !important;
|
|
2057
|
+
border: 1px solid var(--sidebar-border) !important;
|
|
2058
|
+
}
|
|
2059
|
+
|
|
2060
|
+
/* --- COMMAND (Dark Glass) --- */
|
|
2061
|
+
.dark .glass-context [data-slot="command"],
|
|
2062
|
+
.theme-glass.dark .glass-context [data-slot="command"] {
|
|
2063
|
+
background: var(--sidebar) !important;
|
|
2064
|
+
background-color: var(--sidebar) !important;
|
|
2065
|
+
border: 1px solid var(--sidebar-border) !important;
|
|
2066
|
+
border-width: 1px !important;
|
|
2067
|
+
border-style: solid !important;
|
|
2068
|
+
}
|
|
2069
|
+
|
|
2070
|
+
.dark .glass-context [data-slot="command-input-wrapper"],
|
|
2071
|
+
.theme-glass.dark .glass-context [data-slot="command-input-wrapper"] {
|
|
2072
|
+
background: transparent !important;
|
|
2073
|
+
border-bottom-color: var(--sidebar-border) !important;
|
|
2074
|
+
}
|
|
2075
|
+
|
|
2076
|
+
.dark .glass-context [data-slot="command-input-wrapper"]:focus-within,
|
|
2077
|
+
.theme-glass.dark .glass-context [data-slot="command-input-wrapper"]:focus-within {
|
|
2078
|
+
border-bottom-color: var(--j3m-gray-8) !important;
|
|
2079
|
+
box-shadow: none !important;
|
|
2080
|
+
}
|
|
2081
|
+
|
|
2082
|
+
.dark .glass-context [data-slot="command-input"],
|
|
2083
|
+
.theme-glass.dark .glass-context [data-slot="command-input"] {
|
|
2084
|
+
color: var(--sidebar-foreground) !important;
|
|
2085
|
+
}
|
|
2086
|
+
|
|
2087
|
+
.dark .glass-context [data-slot="command-input"]::placeholder,
|
|
2088
|
+
.theme-glass.dark .glass-context [data-slot="command-input"]::placeholder {
|
|
2089
|
+
color: var(--muted-foreground) !important;
|
|
2090
|
+
}
|
|
2091
|
+
|
|
2092
|
+
/* Override generic input focus styles for command-input in dark glass */
|
|
2093
|
+
.dark .glass-context [data-slot="command-input"]:focus,
|
|
2094
|
+
.dark .glass-context [data-slot="command-input"]:focus-visible,
|
|
2095
|
+
.theme-glass.dark .glass-context [data-slot="command-input"]:focus,
|
|
2096
|
+
.theme-glass.dark .glass-context [data-slot="command-input"]:focus-visible {
|
|
2097
|
+
border-color: transparent !important;
|
|
2098
|
+
box-shadow: none !important;
|
|
2099
|
+
outline: none !important;
|
|
2100
|
+
}
|
|
2101
|
+
|
|
2102
|
+
.dark .glass-context [data-slot="command-list"],
|
|
2103
|
+
.theme-glass.dark .glass-context [data-slot="command-list"] {
|
|
2104
|
+
background: transparent !important;
|
|
2105
|
+
border: 0 !important;
|
|
2106
|
+
border-width: 0 !important;
|
|
2107
|
+
}
|
|
2108
|
+
|
|
2109
|
+
.dark .glass-context [data-slot="command-item"],
|
|
2110
|
+
.theme-glass.dark .glass-context [data-slot="command-item"] {
|
|
2111
|
+
color: var(--sidebar-foreground) !important;
|
|
2112
|
+
}
|
|
2113
|
+
|
|
2114
|
+
/* --- ACCORDION (Dark Glass) --- */
|
|
2115
|
+
.dark .glass-context [data-slot="accordion-item"],
|
|
2116
|
+
.theme-glass.dark .glass-context [data-slot="accordion-item"] {
|
|
2117
|
+
border-color: var(--sidebar-border) !important;
|
|
2118
|
+
}
|
|
2119
|
+
|
|
2120
|
+
.dark .glass-context [data-slot="accordion-trigger"],
|
|
2121
|
+
.theme-glass.dark .glass-context [data-slot="accordion-trigger"] {
|
|
2122
|
+
color: var(--sidebar-foreground) !important;
|
|
2123
|
+
}
|
|
2124
|
+
|
|
2125
|
+
/* --- SEPARATOR (Dark Glass) --- */
|
|
2126
|
+
.dark .glass-context [data-slot="separator"],
|
|
2127
|
+
.dark .glass-context hr,
|
|
2128
|
+
.theme-glass.dark .glass-context [data-slot="separator"],
|
|
2129
|
+
.theme-glass.dark .glass-context hr {
|
|
2130
|
+
background-color: var(--sidebar-border) !important;
|
|
2131
|
+
border-color: var(--sidebar-border) !important;
|
|
2132
|
+
}
|
|
2133
|
+
|
|
2134
|
+
/* --- ALERT (Dark Glass) --- */
|
|
2135
|
+
.dark .glass-context [data-slot="alert"],
|
|
2136
|
+
.theme-glass.dark .glass-context [data-slot="alert"] {
|
|
2137
|
+
background: var(--sidebar) !important;
|
|
2138
|
+
border-color: var(--sidebar-border) !important;
|
|
2139
|
+
}
|
|
2140
|
+
|
|
2141
|
+
/* --- SCROLL AREA (Dark Glass) --- */
|
|
2142
|
+
.dark .glass-context [data-slot="scroll-area"],
|
|
2143
|
+
.theme-glass.dark .glass-context [data-slot="scroll-area"] {
|
|
2144
|
+
background: var(--sidebar) !important;
|
|
2145
|
+
border-color: var(--sidebar-border) !important;
|
|
2146
|
+
}
|
|
2147
|
+
|
|
2148
|
+
.dark .glass-context [data-slot="scroll-area-thumb"],
|
|
2149
|
+
.theme-glass.dark .glass-context [data-slot="scroll-area-thumb"] {
|
|
2150
|
+
background: rgba(255, 255, 255, 0.3) !important;
|
|
2151
|
+
}
|
|
2152
|
+
|
|
2153
|
+
/* --- BADGE (Dark Glass) --- */
|
|
2154
|
+
.dark .glass-context [data-slot="badge"][data-variant="outline"],
|
|
2155
|
+
.theme-glass.dark .glass-context [data-slot="badge"][data-variant="outline"] {
|
|
2156
|
+
background: var(--sidebar) !important;
|
|
2157
|
+
border-color: var(--sidebar-border) !important;
|
|
2158
|
+
color: var(--sidebar-foreground) !important;
|
|
2159
|
+
}
|
|
2160
|
+
|
|
2161
|
+
/* --- TOGGLE (Dark Glass) --- */
|
|
2162
|
+
.dark .glass-context [data-slot="toggle"],
|
|
2163
|
+
.dark .glass-context [data-slot="toggle-group-item"],
|
|
2164
|
+
.theme-glass.dark .glass-context [data-slot="toggle"],
|
|
2165
|
+
.theme-glass.dark .glass-context [data-slot="toggle-group-item"] {
|
|
2166
|
+
background: var(--sidebar) !important;
|
|
2167
|
+
border-color: var(--sidebar-border) !important;
|
|
2168
|
+
color: var(--sidebar-foreground) !important;
|
|
2169
|
+
}
|
|
2170
|
+
|
|
2171
|
+
/* --- MENUBAR (Dark Glass) --- */
|
|
2172
|
+
.dark .glass-context [data-slot="menubar"],
|
|
2173
|
+
.theme-glass.dark .glass-context [data-slot="menubar"] {
|
|
2174
|
+
background: var(--sidebar) !important;
|
|
2175
|
+
border-color: var(--sidebar-border) !important;
|
|
2176
|
+
}
|
|
2177
|
+
|
|
2178
|
+
.dark .glass-context [data-slot="menubar-trigger"],
|
|
2179
|
+
.theme-glass.dark .glass-context [data-slot="menubar-trigger"] {
|
|
2180
|
+
color: var(--sidebar-foreground) !important;
|
|
2181
|
+
}
|
|
2182
|
+
|
|
2183
|
+
.dark .glass-context [data-slot="menubar-content"],
|
|
2184
|
+
.theme-glass.dark .glass-context [data-slot="menubar-content"] {
|
|
2185
|
+
background: var(--sidebar) !important;
|
|
2186
|
+
border-color: var(--sidebar-border) !important;
|
|
2187
|
+
}
|
|
2188
|
+
|
|
2189
|
+
/* --- CALENDAR (Dark Glass) - Match solid dark mode --- */
|
|
2190
|
+
.dark .glass-context [data-slot="calendar"],
|
|
2191
|
+
.dark .glass-context .rdp,
|
|
2192
|
+
.theme-glass.dark .glass-context [data-slot="calendar"],
|
|
2193
|
+
.theme-glass.dark .glass-context .rdp,
|
|
2194
|
+
.theme-glass.dark [data-slot="calendar"],
|
|
2195
|
+
.theme-glass.dark .rdp {
|
|
2196
|
+
background: var(--j3m-gray-13) !important;
|
|
2197
|
+
border-color: var(--j3m-gray-11) !important;
|
|
2198
|
+
color: var(--j3m-gray-1) !important;
|
|
2199
|
+
}
|
|
2200
|
+
|
|
2201
|
+
/* --- SLIDER (Dark Glass) --- */
|
|
2202
|
+
.dark .glass-context [data-slot="slider-track"],
|
|
2203
|
+
.theme-glass.dark .glass-context [data-slot="slider-track"] {
|
|
2204
|
+
background: var(--muted) !important;
|
|
2205
|
+
}
|
|
2206
|
+
|
|
2207
|
+
/* --- PROGRESS (Dark Glass) --- */
|
|
2208
|
+
.dark .glass-context [data-slot="progress"],
|
|
2209
|
+
.theme-glass.dark .glass-context [data-slot="progress"] {
|
|
2210
|
+
background: var(--muted) !important;
|
|
2211
|
+
}
|
|
2212
|
+
|
|
2213
|
+
/* --- TOAST (Dark Glass) --- */
|
|
2214
|
+
.dark .glass-context [data-sonner-toast],
|
|
2215
|
+
.dark .glass-context .sonner-toast,
|
|
2216
|
+
.theme-glass.dark .glass-context [data-sonner-toast],
|
|
2217
|
+
.theme-glass.dark .glass-context .sonner-toast {
|
|
2218
|
+
background: var(--sidebar) !important;
|
|
2219
|
+
border-color: var(--sidebar-border) !important;
|
|
2220
|
+
color: var(--sidebar-foreground) !important;
|
|
2221
|
+
}
|
|
2222
|
+
|
|
2223
|
+
/* --- CHECKBOX/RADIO (Dark Glass) --- */
|
|
2224
|
+
.dark .glass-context [data-slot="checkbox"],
|
|
2225
|
+
.dark .glass-context [role="checkbox"],
|
|
2226
|
+
.dark .glass-context [data-slot="radio-group-item"],
|
|
2227
|
+
.dark .glass-context [role="radio"],
|
|
2228
|
+
.theme-glass.dark .glass-context [data-slot="checkbox"],
|
|
2229
|
+
.theme-glass.dark .glass-context [role="checkbox"],
|
|
2230
|
+
.theme-glass.dark .glass-context [data-slot="radio-group-item"],
|
|
2231
|
+
.theme-glass.dark .glass-context [role="radio"] {
|
|
2232
|
+
background: var(--sidebar) !important;
|
|
2233
|
+
border-color: var(--sidebar-border) !important;
|
|
2234
|
+
}
|
|
2235
|
+
|
|
2236
|
+
/* --- SWITCH (Dark Glass) --- */
|
|
2237
|
+
.dark .glass-context [data-slot="switch"],
|
|
2238
|
+
.dark .glass-context [role="switch"],
|
|
2239
|
+
.theme-glass.dark .glass-context [data-slot="switch"],
|
|
2240
|
+
.theme-glass.dark .glass-context [role="switch"] {
|
|
2241
|
+
background: var(--muted) !important;
|
|
2242
|
+
border-color: var(--sidebar-border) !important;
|
|
1003
2243
|
}
|
|
1004
2244
|
|
|
1005
2245
|
/* ========================================
|
|
@@ -1021,13 +2261,34 @@ textarea,
|
|
|
1021
2261
|
transform: translateX(-50%) !important;
|
|
1022
2262
|
}
|
|
1023
2263
|
|
|
1024
|
-
/* Glass mode toast styling */
|
|
1025
|
-
.glass
|
|
1026
|
-
.glass
|
|
1027
|
-
background:
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
2264
|
+
/* Light Glass mode toast styling - WHITE to match solid light mode */
|
|
2265
|
+
.theme-glass:not(.dark) [data-sonner-toast],
|
|
2266
|
+
.theme-glass:not(.dark) .sonner-toast {
|
|
2267
|
+
background: var(--j3m-gray-1) !important;
|
|
2268
|
+
border-color: var(--j3m-gray-6) !important;
|
|
2269
|
+
color: var(--j3m-gray-12) !important;
|
|
2270
|
+
}
|
|
2271
|
+
|
|
2272
|
+
/* Dark glass toast - solid dark background with bright text */
|
|
2273
|
+
.theme-glass.dark [data-sonner-toast],
|
|
2274
|
+
.theme-glass.dark .sonner-toast,
|
|
2275
|
+
.dark.theme-glass [data-sonner-toast],
|
|
2276
|
+
.dark.theme-glass .sonner-toast {
|
|
2277
|
+
background: var(--j3m-bg-sidebar) !important;
|
|
2278
|
+
border-color: var(--sidebar-border) !important;
|
|
2279
|
+
color: #FFFFFF !important;
|
|
2280
|
+
}
|
|
2281
|
+
|
|
2282
|
+
.theme-glass.dark [data-sonner-toast] *,
|
|
2283
|
+
.theme-glass.dark .sonner-toast *,
|
|
2284
|
+
.dark.theme-glass [data-sonner-toast] *,
|
|
2285
|
+
.dark.theme-glass .sonner-toast * {
|
|
2286
|
+
color: #FFFFFF !important;
|
|
2287
|
+
}
|
|
2288
|
+
|
|
2289
|
+
.theme-glass.dark [data-sonner-toast] [data-description],
|
|
2290
|
+
.dark.theme-glass [data-sonner-toast] [data-description] {
|
|
2291
|
+
color: rgba(255, 255, 255, 0.7) !important;
|
|
1031
2292
|
}
|
|
1032
2293
|
|
|
1033
2294
|
/* ========================================
|