@j3m-quantum/ui 1.0.0 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +185 -30
- package/dist/index.cjs +3702 -306
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +654 -3
- package/dist/index.d.ts +654 -3
- package/dist/index.js +3596 -304
- package/dist/index.js.map +1 -1
- package/dist/styles/index.css +1381 -253
- package/package.json +3 -2
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,157 @@
|
|
|
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 */
|
|
434
|
+
--surface-bg: var(--j3m-glass-light-40);
|
|
435
|
+
--surface-border: var(--j3m-glass-border-white);
|
|
436
|
+
--surface-shadow: var(--j3m-glass-shadow-md);
|
|
230
437
|
--surface-radius: var(--j3m-radius-l);
|
|
231
|
-
--surface-blur: var(--j3m-
|
|
438
|
+
--surface-blur: var(--j3m-blur-lg);
|
|
232
439
|
|
|
233
440
|
/* Overlay surfaces (dialogs, popovers, etc) */
|
|
234
|
-
--overlay-bg:
|
|
235
|
-
--overlay-border:
|
|
236
|
-
--overlay-shadow: var(--shadow-lg);
|
|
237
|
-
--overlay-blur:
|
|
441
|
+
--overlay-bg: var(--j3m-glass-light-70);
|
|
442
|
+
--overlay-border: var(--j3m-glass-border-light);
|
|
443
|
+
--overlay-shadow: var(--j3m-glass-shadow-lg);
|
|
444
|
+
--overlay-blur: var(--j3m-blur-lg);
|
|
238
445
|
|
|
239
|
-
/*
|
|
240
|
-
--
|
|
241
|
-
--
|
|
242
|
-
--
|
|
446
|
+
/* Shadcn overrides for glass */
|
|
447
|
+
--input-bg: var(--j3m-glass-light-50);
|
|
448
|
+
--card: var(--j3m-glass-light-50);
|
|
449
|
+
--popover: var(--j3m-glass-light-70);
|
|
243
450
|
}
|
|
244
451
|
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
452
|
+
/* ========================================
|
|
453
|
+
THEME MODE: GLASS (Dark)
|
|
454
|
+
Dark frosted surfaces on deep gradient - sophisticated industrial aesthetic
|
|
455
|
+
======================================== */
|
|
456
|
+
|
|
457
|
+
.theme-glass.dark,
|
|
458
|
+
.dark.theme-glass {
|
|
459
|
+
/* Override frosted glass tokens for dark mode */
|
|
460
|
+
--j3m-glass-frosted: var(--j3m-glass-dark-surface);
|
|
461
|
+
--j3m-glass-frosted-strong: var(--j3m-glass-dark-elevated);
|
|
462
|
+
--j3m-glass-frosted-card: var(--j3m-glass-dark-surface);
|
|
463
|
+
--j3m-glass-border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%);
|
|
464
|
+
--j3m-glass-border-light: var(--j3m-glass-dark-border-light);
|
|
465
|
+
--j3m-glass-border-white: var(--j3m-glass-dark-border);
|
|
466
|
+
--j3m-glass-border-subtle: var(--j3m-glass-dark-border-subtle);
|
|
467
|
+
|
|
468
|
+
/* Override text colors for visibility */
|
|
469
|
+
--card-foreground: rgba(255, 255, 255, 0.95);
|
|
470
|
+
--accent-foreground: #FFFFFF;
|
|
471
|
+
--foreground: rgba(255, 255, 255, 0.95);
|
|
472
|
+
--muted-foreground: rgba(255, 255, 255, 0.6);
|
|
473
|
+
|
|
474
|
+
/* Deep gradient backgrounds with subtle orange glow */
|
|
475
|
+
--j3m-bg-gradient: linear-gradient(
|
|
476
|
+
135deg,
|
|
477
|
+
#0a0a0f 0%,
|
|
478
|
+
#0d1117 25%,
|
|
479
|
+
#161b22 50%,
|
|
480
|
+
#1a1a2e 75%,
|
|
481
|
+
#16213e 100%
|
|
482
|
+
);
|
|
483
|
+
|
|
484
|
+
--j3m-bg-mesh:
|
|
485
|
+
radial-gradient(at 0% 0%, rgba(243, 108, 33, 0.15) 0px, transparent 50%),
|
|
486
|
+
radial-gradient(at 100% 0%, rgba(22, 33, 62, 0.5) 0px, transparent 50%),
|
|
487
|
+
radial-gradient(at 80% 80%, rgba(243, 108, 33, 0.08) 0px, transparent 50%),
|
|
488
|
+
radial-gradient(at 0% 100%, rgba(22, 27, 34, 0.6) 0px, transparent 50%),
|
|
489
|
+
linear-gradient(180deg, #0a0a0f 0%, #0d1117 50%, #161b22 100%);
|
|
490
|
+
|
|
491
|
+
/* Background & Surface Tokens (Dark Glass) - using semantic tokens */
|
|
492
|
+
--j3m-bg-app: transparent;
|
|
493
|
+
--j3m-bg-page: transparent;
|
|
494
|
+
--j3m-bg-surface: var(--j3m-glass-dark-surface);
|
|
495
|
+
--j3m-bg-surface-hover: var(--j3m-glass-dark-surface-hover);
|
|
496
|
+
--j3m-bg-surface-active: var(--j3m-glass-dark-surface-active);
|
|
497
|
+
--j3m-bg-elevated: var(--j3m-glass-dark-elevated);
|
|
498
|
+
--j3m-bg-elevated-hover: var(--j3m-glass-dark-elevated-hover);
|
|
499
|
+
--j3m-bg-overlay: var(--j3m-glass-dark-overlay);
|
|
500
|
+
--j3m-bg-muted: var(--j3m-glass-dark-muted);
|
|
501
|
+
--j3m-bg-subtle: var(--j3m-glass-dark-subtle);
|
|
502
|
+
--j3m-bg-element: var(--j3m-glass-dark-element);
|
|
503
|
+
--j3m-bg-element-hover: var(--j3m-glass-dark-element-hover);
|
|
504
|
+
--j3m-bg-element-active: var(--j3m-glass-dark-element-active);
|
|
505
|
+
--j3m-bg-input: var(--j3m-glass-dark-input);
|
|
506
|
+
--j3m-bg-input-disabled: var(--j3m-glass-dark-subtle);
|
|
507
|
+
--j3m-bg-sidebar: #1a1a1a; /* Solid dark sidebar in glass mode */
|
|
508
|
+
|
|
509
|
+
/* Legacy surface tokens */
|
|
510
|
+
--surface-bg: var(--j3m-glass-dark-surface);
|
|
511
|
+
--surface-border: var(--j3m-glass-dark-border);
|
|
512
|
+
--overlay-bg: var(--j3m-glass-dark-overlay);
|
|
513
|
+
--overlay-border: var(--j3m-glass-dark-border-light);
|
|
514
|
+
|
|
515
|
+
/* Dark glass borders */
|
|
516
|
+
--border: var(--j3m-glass-dark-border);
|
|
517
|
+
|
|
518
|
+
/* Text colors for dark glass */
|
|
519
|
+
--foreground: rgba(255, 255, 255, 0.95);
|
|
520
|
+
--muted-foreground: rgba(255, 255, 255, 0.6);
|
|
521
|
+
|
|
522
|
+
/* Shadcn overrides for dark glass */
|
|
523
|
+
--card: var(--j3m-glass-dark-surface);
|
|
524
|
+
--popover: var(--j3m-glass-dark-overlay);
|
|
525
|
+
|
|
526
|
+
/* Orange accent glow for interactive elements */
|
|
527
|
+
--j3m-glass-shadow-glow: 0 0 20px rgba(243, 108, 33, 0.3);
|
|
251
528
|
}
|
|
252
529
|
|
|
253
530
|
/* ========================================
|
|
@@ -256,13 +533,29 @@
|
|
|
256
533
|
======================================== */
|
|
257
534
|
|
|
258
535
|
.glass-context {
|
|
259
|
-
--background: var(--j3m-glass-light-
|
|
260
|
-
--input: var(--j3m-glass-light);
|
|
261
|
-
--card: var(--j3m-glass-light-
|
|
262
|
-
--popover: var(--j3m-glass-light-
|
|
263
|
-
--muted: var(--j3m-glass-light);
|
|
264
|
-
--
|
|
265
|
-
--
|
|
536
|
+
--background: var(--j3m-glass-light-80);
|
|
537
|
+
--input: var(--j3m-glass-light-50);
|
|
538
|
+
--card: var(--j3m-glass-light-70);
|
|
539
|
+
--popover: var(--j3m-glass-light-80);
|
|
540
|
+
--muted: var(--j3m-glass-light-50);
|
|
541
|
+
--muted-foreground: rgba(0, 0, 0, 0.55);
|
|
542
|
+
--secondary: var(--j3m-glass-light-80);
|
|
543
|
+
--border: var(--j3m-glass-border-light);
|
|
544
|
+
}
|
|
545
|
+
|
|
546
|
+
/* Dark glass context - override for dark mode */
|
|
547
|
+
.dark .glass-context,
|
|
548
|
+
.theme-glass.dark .glass-context {
|
|
549
|
+
--background: var(--j3m-glass-dark-surface);
|
|
550
|
+
--input: var(--j3m-glass-dark-input);
|
|
551
|
+
--card: var(--j3m-glass-dark-surface);
|
|
552
|
+
--popover: var(--j3m-glass-dark-overlay);
|
|
553
|
+
--muted: var(--j3m-glass-dark-muted);
|
|
554
|
+
--muted-foreground: rgba(255, 255, 255, 0.6);
|
|
555
|
+
--secondary: var(--j3m-glass-dark-element);
|
|
556
|
+
--border: var(--j3m-glass-dark-border);
|
|
557
|
+
--foreground: rgba(255, 255, 255, 0.95);
|
|
558
|
+
--card-foreground: rgba(255, 255, 255, 0.95);
|
|
266
559
|
}
|
|
267
560
|
|
|
268
561
|
/* ========================================
|
|
@@ -271,7 +564,9 @@
|
|
|
271
564
|
======================================== */
|
|
272
565
|
|
|
273
566
|
@theme inline {
|
|
274
|
-
/*
|
|
567
|
+
/* ========================================
|
|
568
|
+
SEMANTIC COLORS (J3M Design System)
|
|
569
|
+
======================================== */
|
|
275
570
|
--color-background: var(--background);
|
|
276
571
|
--color-foreground: var(--foreground);
|
|
277
572
|
--color-card: var(--card);
|
|
@@ -309,13 +604,310 @@
|
|
|
309
604
|
--color-sidebar-border: var(--sidebar-border);
|
|
310
605
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
311
606
|
|
|
312
|
-
/*
|
|
607
|
+
/* ========================================
|
|
608
|
+
TAILWIND DEFAULT COLOR PALETTE
|
|
609
|
+
Full 11-step scales (50-950) in OKLCH
|
|
610
|
+
https://tailwindcss.com/docs/colors
|
|
611
|
+
======================================== */
|
|
612
|
+
|
|
613
|
+
/* Red */
|
|
614
|
+
--color-red-50: oklch(0.971 0.013 17.38);
|
|
615
|
+
--color-red-100: oklch(0.936 0.032 17.717);
|
|
616
|
+
--color-red-200: oklch(0.885 0.062 18.334);
|
|
617
|
+
--color-red-300: oklch(0.808 0.114 19.571);
|
|
618
|
+
--color-red-400: oklch(0.704 0.191 22.216);
|
|
619
|
+
--color-red-500: oklch(0.637 0.237 25.331);
|
|
620
|
+
--color-red-600: oklch(0.577 0.245 27.325);
|
|
621
|
+
--color-red-700: oklch(0.505 0.213 27.518);
|
|
622
|
+
--color-red-800: oklch(0.444 0.177 26.899);
|
|
623
|
+
--color-red-900: oklch(0.396 0.141 25.723);
|
|
624
|
+
--color-red-950: oklch(0.258 0.092 26.042);
|
|
625
|
+
|
|
626
|
+
/* Orange */
|
|
627
|
+
--color-orange-50: oklch(0.98 0.016 73.684);
|
|
628
|
+
--color-orange-100: oklch(0.954 0.038 75.164);
|
|
629
|
+
--color-orange-200: oklch(0.901 0.076 70.697);
|
|
630
|
+
--color-orange-300: oklch(0.837 0.128 66.29);
|
|
631
|
+
--color-orange-400: oklch(0.75 0.183 55.934);
|
|
632
|
+
--color-orange-500: oklch(0.705 0.213 47.604);
|
|
633
|
+
--color-orange-600: oklch(0.646 0.222 41.116);
|
|
634
|
+
--color-orange-700: oklch(0.553 0.195 38.402);
|
|
635
|
+
--color-orange-800: oklch(0.47 0.157 37.304);
|
|
636
|
+
--color-orange-900: oklch(0.408 0.123 38.172);
|
|
637
|
+
--color-orange-950: oklch(0.266 0.079 36.259);
|
|
638
|
+
|
|
639
|
+
/* Amber */
|
|
640
|
+
--color-amber-50: oklch(0.987 0.022 95.277);
|
|
641
|
+
--color-amber-100: oklch(0.962 0.059 95.617);
|
|
642
|
+
--color-amber-200: oklch(0.924 0.12 95.746);
|
|
643
|
+
--color-amber-300: oklch(0.879 0.169 91.605);
|
|
644
|
+
--color-amber-400: oklch(0.828 0.189 84.429);
|
|
645
|
+
--color-amber-500: oklch(0.769 0.188 70.08);
|
|
646
|
+
--color-amber-600: oklch(0.666 0.179 58.318);
|
|
647
|
+
--color-amber-700: oklch(0.555 0.163 48.998);
|
|
648
|
+
--color-amber-800: oklch(0.473 0.137 46.201);
|
|
649
|
+
--color-amber-900: oklch(0.414 0.112 45.904);
|
|
650
|
+
--color-amber-950: oklch(0.279 0.077 45.635);
|
|
651
|
+
|
|
652
|
+
/* Yellow */
|
|
653
|
+
--color-yellow-50: oklch(0.987 0.026 102.212);
|
|
654
|
+
--color-yellow-100: oklch(0.973 0.071 103.193);
|
|
655
|
+
--color-yellow-200: oklch(0.945 0.129 101.54);
|
|
656
|
+
--color-yellow-300: oklch(0.905 0.182 98.111);
|
|
657
|
+
--color-yellow-400: oklch(0.852 0.199 91.936);
|
|
658
|
+
--color-yellow-500: oklch(0.795 0.184 86.047);
|
|
659
|
+
--color-yellow-600: oklch(0.681 0.162 75.834);
|
|
660
|
+
--color-yellow-700: oklch(0.554 0.135 66.442);
|
|
661
|
+
--color-yellow-800: oklch(0.476 0.114 61.907);
|
|
662
|
+
--color-yellow-900: oklch(0.421 0.095 57.708);
|
|
663
|
+
--color-yellow-950: oklch(0.286 0.066 53.813);
|
|
664
|
+
|
|
665
|
+
/* Lime */
|
|
666
|
+
--color-lime-50: oklch(0.986 0.031 120.757);
|
|
667
|
+
--color-lime-100: oklch(0.967 0.067 122.328);
|
|
668
|
+
--color-lime-200: oklch(0.938 0.127 124.321);
|
|
669
|
+
--color-lime-300: oklch(0.897 0.196 126.665);
|
|
670
|
+
--color-lime-400: oklch(0.841 0.238 128.85);
|
|
671
|
+
--color-lime-500: oklch(0.768 0.233 130.85);
|
|
672
|
+
--color-lime-600: oklch(0.648 0.2 131.684);
|
|
673
|
+
--color-lime-700: oklch(0.532 0.157 131.589);
|
|
674
|
+
--color-lime-800: oklch(0.453 0.124 130.933);
|
|
675
|
+
--color-lime-900: oklch(0.405 0.101 131.063);
|
|
676
|
+
--color-lime-950: oklch(0.274 0.072 132.109);
|
|
677
|
+
|
|
678
|
+
/* Green */
|
|
679
|
+
--color-green-50: oklch(0.982 0.018 155.826);
|
|
680
|
+
--color-green-100: oklch(0.962 0.044 156.743);
|
|
681
|
+
--color-green-200: oklch(0.925 0.084 155.995);
|
|
682
|
+
--color-green-300: oklch(0.871 0.15 154.449);
|
|
683
|
+
--color-green-400: oklch(0.792 0.209 151.711);
|
|
684
|
+
--color-green-500: oklch(0.723 0.219 149.579);
|
|
685
|
+
--color-green-600: oklch(0.627 0.194 149.214);
|
|
686
|
+
--color-green-700: oklch(0.527 0.154 150.069);
|
|
687
|
+
--color-green-800: oklch(0.448 0.119 151.328);
|
|
688
|
+
--color-green-900: oklch(0.393 0.095 152.535);
|
|
689
|
+
--color-green-950: oklch(0.266 0.065 152.934);
|
|
690
|
+
|
|
691
|
+
/* Emerald */
|
|
692
|
+
--color-emerald-50: oklch(0.979 0.021 166.113);
|
|
693
|
+
--color-emerald-100: oklch(0.95 0.052 163.051);
|
|
694
|
+
--color-emerald-200: oklch(0.905 0.093 164.15);
|
|
695
|
+
--color-emerald-300: oklch(0.845 0.143 164.978);
|
|
696
|
+
--color-emerald-400: oklch(0.765 0.177 163.223);
|
|
697
|
+
--color-emerald-500: oklch(0.696 0.17 162.48);
|
|
698
|
+
--color-emerald-600: oklch(0.596 0.145 163.225);
|
|
699
|
+
--color-emerald-700: oklch(0.508 0.118 165.612);
|
|
700
|
+
--color-emerald-800: oklch(0.432 0.095 166.913);
|
|
701
|
+
--color-emerald-900: oklch(0.378 0.077 168.94);
|
|
702
|
+
--color-emerald-950: oklch(0.262 0.051 172.552);
|
|
703
|
+
|
|
704
|
+
/* Teal */
|
|
705
|
+
--color-teal-50: oklch(0.984 0.014 180.72);
|
|
706
|
+
--color-teal-100: oklch(0.953 0.051 180.801);
|
|
707
|
+
--color-teal-200: oklch(0.91 0.096 180.426);
|
|
708
|
+
--color-teal-300: oklch(0.855 0.138 181.071);
|
|
709
|
+
--color-teal-400: oklch(0.777 0.152 181.912);
|
|
710
|
+
--color-teal-500: oklch(0.704 0.14 182.503);
|
|
711
|
+
--color-teal-600: oklch(0.6 0.118 184.704);
|
|
712
|
+
--color-teal-700: oklch(0.511 0.096 186.391);
|
|
713
|
+
--color-teal-800: oklch(0.437 0.078 188.216);
|
|
714
|
+
--color-teal-900: oklch(0.386 0.063 188.416);
|
|
715
|
+
--color-teal-950: oklch(0.277 0.046 192.524);
|
|
716
|
+
|
|
717
|
+
/* Cyan */
|
|
718
|
+
--color-cyan-50: oklch(0.984 0.019 200.873);
|
|
719
|
+
--color-cyan-100: oklch(0.956 0.045 203.388);
|
|
720
|
+
--color-cyan-200: oklch(0.917 0.08 205.041);
|
|
721
|
+
--color-cyan-300: oklch(0.865 0.127 207.078);
|
|
722
|
+
--color-cyan-400: oklch(0.789 0.154 211.53);
|
|
723
|
+
--color-cyan-500: oklch(0.715 0.143 215.221);
|
|
724
|
+
--color-cyan-600: oklch(0.609 0.126 221.723);
|
|
725
|
+
--color-cyan-700: oklch(0.52 0.105 223.128);
|
|
726
|
+
--color-cyan-800: oklch(0.45 0.085 224.283);
|
|
727
|
+
--color-cyan-900: oklch(0.398 0.07 227.392);
|
|
728
|
+
--color-cyan-950: oklch(0.302 0.056 229.695);
|
|
729
|
+
|
|
730
|
+
/* Sky */
|
|
731
|
+
--color-sky-50: oklch(0.977 0.013 236.62);
|
|
732
|
+
--color-sky-100: oklch(0.951 0.026 236.824);
|
|
733
|
+
--color-sky-200: oklch(0.901 0.058 230.902);
|
|
734
|
+
--color-sky-300: oklch(0.828 0.111 230.318);
|
|
735
|
+
--color-sky-400: oklch(0.746 0.16 232.661);
|
|
736
|
+
--color-sky-500: oklch(0.685 0.169 237.323);
|
|
737
|
+
--color-sky-600: oklch(0.588 0.158 241.966);
|
|
738
|
+
--color-sky-700: oklch(0.5 0.134 242.749);
|
|
739
|
+
--color-sky-800: oklch(0.443 0.11 240.79);
|
|
740
|
+
--color-sky-900: oklch(0.391 0.09 240.876);
|
|
741
|
+
--color-sky-950: oklch(0.293 0.066 243.157);
|
|
742
|
+
|
|
743
|
+
/* Blue */
|
|
744
|
+
--color-blue-50: oklch(0.97 0.014 254.604);
|
|
745
|
+
--color-blue-100: oklch(0.932 0.032 255.585);
|
|
746
|
+
--color-blue-200: oklch(0.882 0.059 254.128);
|
|
747
|
+
--color-blue-300: oklch(0.809 0.105 251.813);
|
|
748
|
+
--color-blue-400: oklch(0.707 0.165 254.624);
|
|
749
|
+
--color-blue-500: oklch(0.623 0.214 259.815);
|
|
750
|
+
--color-blue-600: oklch(0.546 0.245 262.881);
|
|
751
|
+
--color-blue-700: oklch(0.488 0.243 264.376);
|
|
752
|
+
--color-blue-800: oklch(0.424 0.199 265.638);
|
|
753
|
+
--color-blue-900: oklch(0.379 0.146 265.522);
|
|
754
|
+
--color-blue-950: oklch(0.282 0.091 267.935);
|
|
755
|
+
|
|
756
|
+
/* Indigo */
|
|
757
|
+
--color-indigo-50: oklch(0.962 0.018 272.314);
|
|
758
|
+
--color-indigo-100: oklch(0.93 0.034 272.788);
|
|
759
|
+
--color-indigo-200: oklch(0.87 0.065 274.039);
|
|
760
|
+
--color-indigo-300: oklch(0.785 0.115 274.713);
|
|
761
|
+
--color-indigo-400: oklch(0.673 0.182 276.935);
|
|
762
|
+
--color-indigo-500: oklch(0.585 0.233 277.117);
|
|
763
|
+
--color-indigo-600: oklch(0.511 0.262 276.966);
|
|
764
|
+
--color-indigo-700: oklch(0.457 0.24 277.023);
|
|
765
|
+
--color-indigo-800: oklch(0.398 0.195 277.366);
|
|
766
|
+
--color-indigo-900: oklch(0.359 0.144 278.697);
|
|
767
|
+
--color-indigo-950: oklch(0.257 0.09 281.288);
|
|
768
|
+
|
|
769
|
+
/* Violet */
|
|
770
|
+
--color-violet-50: oklch(0.969 0.016 293.756);
|
|
771
|
+
--color-violet-100: oklch(0.943 0.029 294.588);
|
|
772
|
+
--color-violet-200: oklch(0.894 0.057 293.283);
|
|
773
|
+
--color-violet-300: oklch(0.811 0.111 293.571);
|
|
774
|
+
--color-violet-400: oklch(0.702 0.183 293.541);
|
|
775
|
+
--color-violet-500: oklch(0.606 0.25 292.717);
|
|
776
|
+
--color-violet-600: oklch(0.541 0.281 293.009);
|
|
777
|
+
--color-violet-700: oklch(0.491 0.27 292.581);
|
|
778
|
+
--color-violet-800: oklch(0.432 0.232 292.759);
|
|
779
|
+
--color-violet-900: oklch(0.38 0.189 293.745);
|
|
780
|
+
--color-violet-950: oklch(0.283 0.141 291.089);
|
|
781
|
+
|
|
782
|
+
/* Purple */
|
|
783
|
+
--color-purple-50: oklch(0.977 0.014 308.299);
|
|
784
|
+
--color-purple-100: oklch(0.946 0.033 307.174);
|
|
785
|
+
--color-purple-200: oklch(0.902 0.063 306.703);
|
|
786
|
+
--color-purple-300: oklch(0.827 0.119 306.383);
|
|
787
|
+
--color-purple-400: oklch(0.714 0.203 305.504);
|
|
788
|
+
--color-purple-500: oklch(0.627 0.265 303.9);
|
|
789
|
+
--color-purple-600: oklch(0.558 0.288 302.321);
|
|
790
|
+
--color-purple-700: oklch(0.496 0.265 301.924);
|
|
791
|
+
--color-purple-800: oklch(0.438 0.218 303.724);
|
|
792
|
+
--color-purple-900: oklch(0.381 0.176 304.987);
|
|
793
|
+
--color-purple-950: oklch(0.291 0.149 302.717);
|
|
794
|
+
|
|
795
|
+
/* Fuchsia */
|
|
796
|
+
--color-fuchsia-50: oklch(0.977 0.017 320.058);
|
|
797
|
+
--color-fuchsia-100: oklch(0.952 0.037 318.852);
|
|
798
|
+
--color-fuchsia-200: oklch(0.903 0.076 319.62);
|
|
799
|
+
--color-fuchsia-300: oklch(0.833 0.145 321.434);
|
|
800
|
+
--color-fuchsia-400: oklch(0.74 0.238 322.16);
|
|
801
|
+
--color-fuchsia-500: oklch(0.667 0.295 322.15);
|
|
802
|
+
--color-fuchsia-600: oklch(0.591 0.293 322.896);
|
|
803
|
+
--color-fuchsia-700: oklch(0.518 0.253 323.949);
|
|
804
|
+
--color-fuchsia-800: oklch(0.452 0.211 324.591);
|
|
805
|
+
--color-fuchsia-900: oklch(0.401 0.17 325.612);
|
|
806
|
+
--color-fuchsia-950: oklch(0.293 0.136 325.661);
|
|
807
|
+
|
|
808
|
+
/* Pink */
|
|
809
|
+
--color-pink-50: oklch(0.971 0.014 343.198);
|
|
810
|
+
--color-pink-100: oklch(0.948 0.028 342.258);
|
|
811
|
+
--color-pink-200: oklch(0.899 0.061 343.231);
|
|
812
|
+
--color-pink-300: oklch(0.823 0.12 346.018);
|
|
813
|
+
--color-pink-400: oklch(0.718 0.202 349.761);
|
|
814
|
+
--color-pink-500: oklch(0.656 0.241 354.308);
|
|
815
|
+
--color-pink-600: oklch(0.592 0.249 0.584);
|
|
816
|
+
--color-pink-700: oklch(0.525 0.223 3.958);
|
|
817
|
+
--color-pink-800: oklch(0.459 0.187 3.815);
|
|
818
|
+
--color-pink-900: oklch(0.408 0.153 2.432);
|
|
819
|
+
--color-pink-950: oklch(0.284 0.109 3.907);
|
|
820
|
+
|
|
821
|
+
/* Rose */
|
|
822
|
+
--color-rose-50: oklch(0.969 0.015 12.422);
|
|
823
|
+
--color-rose-100: oklch(0.941 0.03 12.58);
|
|
824
|
+
--color-rose-200: oklch(0.892 0.058 10.001);
|
|
825
|
+
--color-rose-300: oklch(0.81 0.117 11.638);
|
|
826
|
+
--color-rose-400: oklch(0.712 0.194 13.428);
|
|
827
|
+
--color-rose-500: oklch(0.645 0.246 16.439);
|
|
828
|
+
--color-rose-600: oklch(0.586 0.253 17.585);
|
|
829
|
+
--color-rose-700: oklch(0.514 0.222 16.935);
|
|
830
|
+
--color-rose-800: oklch(0.455 0.188 13.697);
|
|
831
|
+
--color-rose-900: oklch(0.41 0.159 10.272);
|
|
832
|
+
--color-rose-950: oklch(0.271 0.105 12.094);
|
|
833
|
+
|
|
834
|
+
/* Slate */
|
|
835
|
+
--color-slate-50: oklch(0.984 0.003 247.858);
|
|
836
|
+
--color-slate-100: oklch(0.968 0.007 247.896);
|
|
837
|
+
--color-slate-200: oklch(0.929 0.013 255.508);
|
|
838
|
+
--color-slate-300: oklch(0.869 0.022 252.894);
|
|
839
|
+
--color-slate-400: oklch(0.704 0.04 256.788);
|
|
840
|
+
--color-slate-500: oklch(0.554 0.046 257.417);
|
|
841
|
+
--color-slate-600: oklch(0.446 0.043 257.281);
|
|
842
|
+
--color-slate-700: oklch(0.372 0.044 257.287);
|
|
843
|
+
--color-slate-800: oklch(0.279 0.041 260.031);
|
|
844
|
+
--color-slate-900: oklch(0.208 0.042 265.755);
|
|
845
|
+
--color-slate-950: oklch(0.129 0.042 264.695);
|
|
846
|
+
|
|
847
|
+
/* Gray */
|
|
848
|
+
--color-gray-50: oklch(0.985 0.002 247.839);
|
|
849
|
+
--color-gray-100: oklch(0.967 0.003 264.542);
|
|
850
|
+
--color-gray-200: oklch(0.928 0.006 264.531);
|
|
851
|
+
--color-gray-300: oklch(0.872 0.01 258.338);
|
|
852
|
+
--color-gray-400: oklch(0.707 0.022 261.325);
|
|
853
|
+
--color-gray-500: oklch(0.551 0.027 264.364);
|
|
854
|
+
--color-gray-600: oklch(0.446 0.03 256.802);
|
|
855
|
+
--color-gray-700: oklch(0.373 0.034 259.733);
|
|
856
|
+
--color-gray-800: oklch(0.278 0.033 256.848);
|
|
857
|
+
--color-gray-900: oklch(0.21 0.034 264.665);
|
|
858
|
+
--color-gray-950: oklch(0.13 0.028 261.692);
|
|
859
|
+
|
|
860
|
+
/* Zinc */
|
|
861
|
+
--color-zinc-50: oklch(0.985 0 0);
|
|
862
|
+
--color-zinc-100: oklch(0.967 0.001 286.375);
|
|
863
|
+
--color-zinc-200: oklch(0.92 0.004 286.32);
|
|
864
|
+
--color-zinc-300: oklch(0.871 0.006 286.286);
|
|
865
|
+
--color-zinc-400: oklch(0.705 0.015 286.067);
|
|
866
|
+
--color-zinc-500: oklch(0.552 0.016 285.938);
|
|
867
|
+
--color-zinc-600: oklch(0.442 0.017 285.786);
|
|
868
|
+
--color-zinc-700: oklch(0.37 0.013 285.805);
|
|
869
|
+
--color-zinc-800: oklch(0.274 0.006 286.033);
|
|
870
|
+
--color-zinc-900: oklch(0.21 0.006 285.885);
|
|
871
|
+
--color-zinc-950: oklch(0.141 0.005 285.823);
|
|
872
|
+
|
|
873
|
+
/* Neutral */
|
|
874
|
+
--color-neutral-50: oklch(0.985 0 0);
|
|
875
|
+
--color-neutral-100: oklch(0.97 0 0);
|
|
876
|
+
--color-neutral-200: oklch(0.922 0 0);
|
|
877
|
+
--color-neutral-300: oklch(0.87 0 0);
|
|
878
|
+
--color-neutral-400: oklch(0.708 0 0);
|
|
879
|
+
--color-neutral-500: oklch(0.556 0 0);
|
|
880
|
+
--color-neutral-600: oklch(0.439 0 0);
|
|
881
|
+
--color-neutral-700: oklch(0.371 0 0);
|
|
882
|
+
--color-neutral-800: oklch(0.269 0 0);
|
|
883
|
+
--color-neutral-900: oklch(0.205 0 0);
|
|
884
|
+
--color-neutral-950: oklch(0.145 0 0);
|
|
885
|
+
|
|
886
|
+
/* Stone */
|
|
887
|
+
--color-stone-50: oklch(0.985 0.001 106.423);
|
|
888
|
+
--color-stone-100: oklch(0.97 0.001 106.424);
|
|
889
|
+
--color-stone-200: oklch(0.923 0.003 48.717);
|
|
890
|
+
--color-stone-300: oklch(0.869 0.005 56.366);
|
|
891
|
+
--color-stone-400: oklch(0.709 0.01 56.259);
|
|
892
|
+
--color-stone-500: oklch(0.553 0.013 58.071);
|
|
893
|
+
--color-stone-600: oklch(0.444 0.011 73.639);
|
|
894
|
+
--color-stone-700: oklch(0.374 0.01 67.558);
|
|
895
|
+
--color-stone-800: oklch(0.268 0.007 34.298);
|
|
896
|
+
--color-stone-900: oklch(0.216 0.006 56.043);
|
|
897
|
+
--color-stone-950: oklch(0.147 0.004 49.25);
|
|
898
|
+
|
|
899
|
+
/* Black & White */
|
|
900
|
+
--color-black: #000;
|
|
901
|
+
--color-white: #fff;
|
|
902
|
+
|
|
903
|
+
/* ========================================
|
|
904
|
+
RADIUS & SHADOWS
|
|
905
|
+
======================================== */
|
|
313
906
|
--radius-sm: calc(var(--radius) - 4px);
|
|
314
907
|
--radius-md: calc(var(--radius) - 2px);
|
|
315
908
|
--radius-lg: var(--radius);
|
|
316
909
|
--radius-xl: calc(var(--radius) + 4px);
|
|
317
910
|
|
|
318
|
-
/* Shadows */
|
|
319
911
|
--shadow-sm: var(--shadow-sm);
|
|
320
912
|
--shadow: var(--shadow);
|
|
321
913
|
--shadow-md: var(--shadow-md);
|
|
@@ -328,12 +920,12 @@
|
|
|
328
920
|
|
|
329
921
|
@layer base {
|
|
330
922
|
* {
|
|
331
|
-
border-color:
|
|
923
|
+
border-color: var(--border);
|
|
332
924
|
}
|
|
333
925
|
|
|
334
926
|
body {
|
|
335
|
-
background-color:
|
|
336
|
-
color:
|
|
927
|
+
background-color: var(--background);
|
|
928
|
+
color: var(--foreground);
|
|
337
929
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
338
930
|
}
|
|
339
931
|
}
|
|
@@ -428,40 +1020,135 @@ textarea,
|
|
|
428
1020
|
border-radius: 9999px !important;
|
|
429
1021
|
}
|
|
430
1022
|
|
|
1023
|
+
/* ========================================
|
|
1024
|
+
APP BACKGROUND UTILITY CLASS
|
|
1025
|
+
Apply to root element for proper theme backgrounds
|
|
1026
|
+
======================================== */
|
|
1027
|
+
|
|
1028
|
+
.j3m-app-bg {
|
|
1029
|
+
background: var(--j3m-bg-app);
|
|
1030
|
+
min-height: 100vh;
|
|
1031
|
+
}
|
|
1032
|
+
|
|
1033
|
+
/* Light/Dark solid modes - image background with fallback */
|
|
1034
|
+
:root:not(.theme-glass) .j3m-app-bg,
|
|
1035
|
+
.dark:not(.theme-glass) .j3m-app-bg {
|
|
1036
|
+
background-color: var(--j3m-bg-app);
|
|
1037
|
+
background-image: var(--j3m-bg-image, none);
|
|
1038
|
+
background-size: cover;
|
|
1039
|
+
background-position: center;
|
|
1040
|
+
background-attachment: fixed;
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
/* Glass light mode - image background (both same-element and child patterns) */
|
|
1044
|
+
.theme-glass:not(.dark).j3m-app-bg,
|
|
1045
|
+
.theme-glass:not(.dark) .j3m-app-bg {
|
|
1046
|
+
background-color: #E8E8E8;
|
|
1047
|
+
background-image: var(--j3m-bg-image, none);
|
|
1048
|
+
background-size: cover;
|
|
1049
|
+
background-position: center;
|
|
1050
|
+
background-attachment: fixed;
|
|
1051
|
+
}
|
|
1052
|
+
|
|
1053
|
+
/* Glass dark mode - image background (both same-element and child patterns) */
|
|
1054
|
+
.theme-glass.dark.j3m-app-bg,
|
|
1055
|
+
.theme-glass.dark .j3m-app-bg {
|
|
1056
|
+
background-color: #1a1a1a;
|
|
1057
|
+
background-image: var(--j3m-bg-image, none);
|
|
1058
|
+
background-size: cover;
|
|
1059
|
+
background-position: center;
|
|
1060
|
+
background-attachment: fixed;
|
|
1061
|
+
}
|
|
1062
|
+
|
|
1063
|
+
/* No overlay - show image as-is without darkening */
|
|
1064
|
+
|
|
1065
|
+
/* Gradient variant (optional) - use .gradient class alongside .j3m-app-bg */
|
|
1066
|
+
.theme-glass:not(.dark).j3m-app-bg.gradient,
|
|
1067
|
+
.theme-glass:not(.dark) .j3m-app-bg.gradient {
|
|
1068
|
+
background: var(--j3m-bg-gradient);
|
|
1069
|
+
background-attachment: fixed;
|
|
1070
|
+
}
|
|
1071
|
+
|
|
1072
|
+
.theme-glass.dark.j3m-app-bg.gradient,
|
|
1073
|
+
.theme-glass.dark .j3m-app-bg.gradient {
|
|
1074
|
+
background: var(--j3m-bg-gradient);
|
|
1075
|
+
background-attachment: fixed;
|
|
1076
|
+
}
|
|
1077
|
+
|
|
1078
|
+
.theme-glass.dark.j3m-app-bg.gradient::before,
|
|
1079
|
+
.theme-glass.dark .j3m-app-bg.gradient::before {
|
|
1080
|
+
display: none;
|
|
1081
|
+
}
|
|
1082
|
+
|
|
431
1083
|
/* ========================================
|
|
432
1084
|
GLASS UTILITY CLASSES
|
|
433
1085
|
======================================== */
|
|
434
1086
|
|
|
435
1087
|
.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);
|
|
1088
|
+
background: var(--j3m-glass-light-subtle);
|
|
1089
|
+
backdrop-filter: blur(var(--j3m-blur-lg));
|
|
1090
|
+
-webkit-backdrop-filter: blur(var(--j3m-blur-lg));
|
|
1091
|
+
border: 1px solid var(--j3m-glass-border-white);
|
|
1092
|
+
box-shadow: var(--j3m-glass-shadow-lg);
|
|
441
1093
|
}
|
|
442
1094
|
|
|
443
1095
|
.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);
|
|
1096
|
+
background: var(--j3m-glass-dark);
|
|
1097
|
+
backdrop-filter: blur(var(--j3m-blur-md));
|
|
1098
|
+
-webkit-backdrop-filter: blur(var(--j3m-blur-md));
|
|
1099
|
+
border: 1px solid var(--j3m-glass-border-subtle);
|
|
1100
|
+
box-shadow: var(--j3m-glass-shadow-lg);
|
|
449
1101
|
}
|
|
450
1102
|
|
|
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);
|
|
1103
|
+
.glass-neutral {
|
|
1104
|
+
background: var(--j3m-glass-neutral-subtle);
|
|
1105
|
+
backdrop-filter: blur(var(--j3m-blur-lg));
|
|
1106
|
+
-webkit-backdrop-filter: blur(var(--j3m-blur-lg));
|
|
1107
|
+
border: 1px solid var(--j3m-glass-primary);
|
|
1108
|
+
box-shadow: var(--j3m-glass-shadow-lg);
|
|
457
1109
|
}
|
|
458
1110
|
|
|
459
1111
|
.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);
|
|
1112
|
+
background: var(--j3m-glass-primary);
|
|
1113
|
+
backdrop-filter: blur(var(--j3m-blur-sm));
|
|
1114
|
+
-webkit-backdrop-filter: blur(var(--j3m-blur-sm));
|
|
1115
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
1116
|
+
box-shadow: var(--j3m-glass-shadow-glow);
|
|
1117
|
+
}
|
|
1118
|
+
|
|
1119
|
+
/* Frosted glass with gradient border */
|
|
1120
|
+
.glass-frosted {
|
|
1121
|
+
background: var(--j3m-glass-frosted);
|
|
1122
|
+
backdrop-filter: blur(var(--j3m-blur-frosted));
|
|
1123
|
+
-webkit-backdrop-filter: blur(var(--j3m-blur-frosted));
|
|
1124
|
+
box-shadow: var(--j3m-glass-shadow-lg);
|
|
1125
|
+
}
|
|
1126
|
+
|
|
1127
|
+
.glass-frosted-strong {
|
|
1128
|
+
background: var(--j3m-glass-frosted-strong);
|
|
1129
|
+
backdrop-filter: blur(var(--j3m-blur-frosted));
|
|
1130
|
+
-webkit-backdrop-filter: blur(var(--j3m-blur-frosted));
|
|
1131
|
+
box-shadow: var(--j3m-glass-shadow-lg);
|
|
1132
|
+
}
|
|
1133
|
+
|
|
1134
|
+
/* Gradient border utility - creates top-lit edge effect */
|
|
1135
|
+
.glass-border-gradient {
|
|
1136
|
+
position: relative;
|
|
1137
|
+
border: none !important;
|
|
1138
|
+
}
|
|
1139
|
+
|
|
1140
|
+
.glass-border-gradient::before {
|
|
1141
|
+
content: '';
|
|
1142
|
+
position: absolute;
|
|
1143
|
+
inset: 0;
|
|
1144
|
+
border-radius: inherit;
|
|
1145
|
+
padding: 1px;
|
|
1146
|
+
background: var(--j3m-glass-border-gradient);
|
|
1147
|
+
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
1148
|
+
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
1149
|
+
-webkit-mask-composite: xor;
|
|
1150
|
+
mask-composite: exclude;
|
|
1151
|
+
pointer-events: none;
|
|
465
1152
|
}
|
|
466
1153
|
|
|
467
1154
|
/* ========================================
|
|
@@ -495,9 +1182,9 @@ textarea,
|
|
|
495
1182
|
.glass-context [data-slot="input"]:focus-visible,
|
|
496
1183
|
.glass-context textarea:focus-visible,
|
|
497
1184
|
.glass-context [data-slot="textarea"]:focus-visible {
|
|
498
|
-
border-color:
|
|
499
|
-
--color-ring:
|
|
500
|
-
box-shadow: 0 0 0 3px
|
|
1185
|
+
border-color: var(--j3m-orange-9) !important;
|
|
1186
|
+
--color-ring: rgba(243, 108, 33, 0.3);
|
|
1187
|
+
box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.3) !important;
|
|
501
1188
|
}
|
|
502
1189
|
|
|
503
1190
|
/* --- SELECT TRIGGER --- */
|
|
@@ -515,9 +1202,9 @@ textarea,
|
|
|
515
1202
|
.glass-context [data-slot="select-trigger"]:focus,
|
|
516
1203
|
.glass-context [data-slot="select-trigger"]:focus-visible,
|
|
517
1204
|
.glass-context [data-slot="select-trigger"][data-state="open"] {
|
|
518
|
-
border-color:
|
|
519
|
-
--color-ring:
|
|
520
|
-
box-shadow: 0 0 0 3px
|
|
1205
|
+
border-color: var(--j3m-orange-9) !important;
|
|
1206
|
+
--color-ring: rgba(243, 108, 33, 0.3);
|
|
1207
|
+
box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.3) !important;
|
|
521
1208
|
}
|
|
522
1209
|
|
|
523
1210
|
/* --- NATIVE SELECT --- */
|
|
@@ -532,16 +1219,16 @@ textarea,
|
|
|
532
1219
|
|
|
533
1220
|
.glass-context select:focus,
|
|
534
1221
|
.glass-context [data-slot="native-select"]:focus {
|
|
535
|
-
border-color:
|
|
536
|
-
--color-ring:
|
|
537
|
-
box-shadow: 0 0 0 3px
|
|
1222
|
+
border-color: var(--j3m-orange-9) !important;
|
|
1223
|
+
--color-ring: rgba(243, 108, 33, 0.3);
|
|
1224
|
+
box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.3) !important;
|
|
538
1225
|
}
|
|
539
1226
|
|
|
540
1227
|
/* --- BUTTONS --- */
|
|
541
1228
|
/* Default button hover in glass */
|
|
542
1229
|
.glass-context [data-slot="button"][data-variant="default"]:hover,
|
|
543
1230
|
.glass-context [data-slot="button"]:not([data-variant]):hover {
|
|
544
|
-
background:
|
|
1231
|
+
background: var(--j3m-orange-10) !important;
|
|
545
1232
|
}
|
|
546
1233
|
|
|
547
1234
|
/* Outline/Secondary/Ghost buttons - white fill, dark border */
|
|
@@ -553,13 +1240,13 @@ textarea,
|
|
|
553
1240
|
color: rgba(0, 0, 0, 0.8) !important;
|
|
554
1241
|
}
|
|
555
1242
|
|
|
556
|
-
/* Button hover:
|
|
1243
|
+
/* Button hover: grey to match solid mode */
|
|
557
1244
|
.glass-context [data-slot="button"][data-variant="outline"]:hover,
|
|
558
1245
|
.glass-context [data-slot="button"][data-variant="secondary"]:hover,
|
|
559
1246
|
.glass-context [data-slot="button"][data-variant="ghost"]:hover {
|
|
560
|
-
background:
|
|
561
|
-
border-color:
|
|
562
|
-
color:
|
|
1247
|
+
background: var(--accent) !important;
|
|
1248
|
+
border-color: var(--accent) !important;
|
|
1249
|
+
color: var(--accent-foreground) !important;
|
|
563
1250
|
}
|
|
564
1251
|
|
|
565
1252
|
/* --- RADIO BUTTONS --- */
|
|
@@ -572,12 +1259,12 @@ textarea,
|
|
|
572
1259
|
.glass-context [data-slot="radio-group-item"][data-state="checked"],
|
|
573
1260
|
.glass-context [role="radio"][data-state="checked"] {
|
|
574
1261
|
background: rgba(255, 255, 255, 0.8) !important;
|
|
575
|
-
border-color:
|
|
1262
|
+
border-color: var(--j3m-orange-9) !important;
|
|
576
1263
|
}
|
|
577
1264
|
|
|
578
1265
|
.glass-context [data-slot="radio-group-item"][data-state="checked"] span,
|
|
579
1266
|
.glass-context [role="radio"][data-state="checked"] span {
|
|
580
|
-
background:
|
|
1267
|
+
background: var(--j3m-orange-9) !important;
|
|
581
1268
|
}
|
|
582
1269
|
|
|
583
1270
|
/* --- CHECKBOX --- */
|
|
@@ -589,8 +1276,8 @@ textarea,
|
|
|
589
1276
|
|
|
590
1277
|
.glass-context [data-slot="checkbox"][data-state="checked"],
|
|
591
1278
|
.glass-context [role="checkbox"][data-state="checked"] {
|
|
592
|
-
background:
|
|
593
|
-
border-color:
|
|
1279
|
+
background: var(--j3m-orange-9) !important;
|
|
1280
|
+
border-color: var(--j3m-orange-9) !important;
|
|
594
1281
|
}
|
|
595
1282
|
|
|
596
1283
|
/* --- SWITCH --- */
|
|
@@ -602,8 +1289,8 @@ textarea,
|
|
|
602
1289
|
|
|
603
1290
|
.glass-context [data-slot="switch"][data-state="checked"],
|
|
604
1291
|
.glass-context [role="switch"][data-state="checked"] {
|
|
605
|
-
background:
|
|
606
|
-
border-color:
|
|
1292
|
+
background: var(--primary) !important;
|
|
1293
|
+
border-color: var(--primary) !important;
|
|
607
1294
|
}
|
|
608
1295
|
|
|
609
1296
|
/* Switch thumb - always white */
|
|
@@ -725,80 +1412,91 @@ textarea,
|
|
|
725
1412
|
}
|
|
726
1413
|
|
|
727
1414
|
/* --- NAVIGATION MENU --- */
|
|
728
|
-
/*
|
|
729
|
-
[data-slot="navigation-menu-link"]:hover,
|
|
730
|
-
[data-slot="navigation-menu-link"]:focus {
|
|
731
|
-
background: linear-gradient(135deg,
|
|
1415
|
+
/* Light solid mode - orange gradient hover */
|
|
1416
|
+
.theme-solid:not(.dark) [data-slot="navigation-menu-link"]:hover,
|
|
1417
|
+
.theme-solid:not(.dark) [data-slot="navigation-menu-link"]:focus {
|
|
1418
|
+
background: linear-gradient(135deg, var(--j3m-orange-7) 0%, var(--primary) 50%, var(--j3m-orange-9) 100%) !important;
|
|
732
1419
|
color: #FFFFFF !important;
|
|
733
1420
|
}
|
|
734
1421
|
|
|
735
|
-
[data-slot="navigation-menu-link"]:hover *,
|
|
736
|
-
[data-slot="navigation-menu-link"]:focus * {
|
|
1422
|
+
.theme-solid:not(.dark) [data-slot="navigation-menu-link"]:hover *,
|
|
1423
|
+
.theme-solid:not(.dark) [data-slot="navigation-menu-link"]:focus * {
|
|
737
1424
|
color: #FFFFFF !important;
|
|
738
1425
|
}
|
|
739
1426
|
|
|
740
|
-
/*
|
|
1427
|
+
/* Dark solid mode - grey hover to match theme */
|
|
1428
|
+
.dark [data-slot="navigation-menu-link"]:hover,
|
|
1429
|
+
.dark [data-slot="navigation-menu-link"]:focus {
|
|
1430
|
+
background: var(--accent) !important;
|
|
1431
|
+
color: var(--accent-foreground) !important;
|
|
1432
|
+
}
|
|
1433
|
+
|
|
1434
|
+
.dark [data-slot="navigation-menu-link"]:hover *,
|
|
1435
|
+
.dark [data-slot="navigation-menu-link"]:focus * {
|
|
1436
|
+
color: var(--accent-foreground) !important;
|
|
1437
|
+
}
|
|
1438
|
+
|
|
1439
|
+
/* Glass mode - grey hover to match solid mode */
|
|
741
1440
|
.glass-context [data-slot="navigation-menu-content"] a:hover,
|
|
742
1441
|
.glass-context [data-slot="navigation-menu-content"] a:focus {
|
|
743
|
-
background:
|
|
744
|
-
color:
|
|
1442
|
+
background: var(--accent) !important;
|
|
1443
|
+
color: var(--accent-foreground) !important;
|
|
745
1444
|
}
|
|
746
1445
|
|
|
747
1446
|
.glass-context [data-slot="navigation-menu-content"] a:hover *,
|
|
748
1447
|
.glass-context [data-slot="navigation-menu-content"] a:focus * {
|
|
749
|
-
color:
|
|
1448
|
+
color: var(--accent-foreground) !important;
|
|
750
1449
|
}
|
|
751
1450
|
|
|
752
1451
|
/* --- MENUBAR --- */
|
|
753
1452
|
.glass-context [data-slot="menubar"] {
|
|
754
|
-
background:
|
|
755
|
-
border: 1px solid
|
|
1453
|
+
background: var(--sidebar) !important;
|
|
1454
|
+
border: 1px solid var(--sidebar-border) !important;
|
|
756
1455
|
border-radius: var(--j3m-radius-l) !important;
|
|
757
1456
|
}
|
|
758
1457
|
|
|
759
1458
|
.glass-context [data-slot="menubar-trigger"] {
|
|
760
|
-
color:
|
|
1459
|
+
color: var(--sidebar-foreground) !important;
|
|
761
1460
|
}
|
|
762
1461
|
|
|
763
1462
|
.glass-context [data-slot="menubar-trigger"]:hover,
|
|
764
1463
|
.glass-context [data-slot="menubar-trigger"][data-state="open"] {
|
|
765
|
-
background:
|
|
766
|
-
color:
|
|
1464
|
+
background: var(--accent) !important;
|
|
1465
|
+
color: var(--accent-foreground) !important;
|
|
767
1466
|
}
|
|
768
1467
|
|
|
769
1468
|
.glass-context [data-slot="menubar-content"] {
|
|
770
|
-
background:
|
|
771
|
-
|
|
772
|
-
border: 1px solid rgba(0, 0, 0, 0.15) !important;
|
|
1469
|
+
background: var(--sidebar) !important;
|
|
1470
|
+
border: 1px solid var(--sidebar-border) !important;
|
|
773
1471
|
}
|
|
774
1472
|
|
|
775
1473
|
.glass-context [data-slot="menubar-item"]:hover,
|
|
776
1474
|
.glass-context [data-slot="menubar-item"]:focus {
|
|
777
|
-
background:
|
|
778
|
-
color:
|
|
1475
|
+
background: var(--accent) !important;
|
|
1476
|
+
color: var(--accent-foreground) !important;
|
|
779
1477
|
}
|
|
780
1478
|
|
|
781
1479
|
/* --- TABS --- */
|
|
782
1480
|
.glass-context [data-slot="tabs-list"] {
|
|
783
|
-
background:
|
|
1481
|
+
background: var(--muted) !important;
|
|
784
1482
|
}
|
|
785
1483
|
|
|
786
1484
|
.glass-context [data-slot="tabs-trigger"] {
|
|
787
|
-
color:
|
|
1485
|
+
color: var(--muted-foreground) !important;
|
|
788
1486
|
}
|
|
789
1487
|
|
|
790
1488
|
.glass-context [data-slot="tabs-trigger"][data-state="active"] {
|
|
791
|
-
background:
|
|
792
|
-
color:
|
|
1489
|
+
background: var(--sidebar) !important;
|
|
1490
|
+
color: var(--sidebar-foreground) !important;
|
|
793
1491
|
}
|
|
794
1492
|
|
|
795
1493
|
/* --- ACCORDION --- */
|
|
796
1494
|
.glass-context [data-slot="accordion-item"] {
|
|
797
|
-
border-color:
|
|
1495
|
+
border-color: var(--sidebar-border) !important;
|
|
798
1496
|
}
|
|
799
1497
|
|
|
800
1498
|
.glass-context [data-slot="accordion-trigger"] {
|
|
801
|
-
color:
|
|
1499
|
+
color: var(--sidebar-foreground) !important;
|
|
802
1500
|
}
|
|
803
1501
|
|
|
804
1502
|
/* --- SLIDER --- */
|
|
@@ -807,62 +1505,74 @@ textarea,
|
|
|
807
1505
|
}
|
|
808
1506
|
|
|
809
1507
|
.glass-context [data-slot="slider-range"] {
|
|
810
|
-
background:
|
|
1508
|
+
background: var(--primary) !important;
|
|
811
1509
|
}
|
|
812
1510
|
|
|
813
1511
|
.glass-context [data-slot="slider-thumb"] {
|
|
814
1512
|
background: #FFFFFF !important;
|
|
815
|
-
border-color:
|
|
1513
|
+
border-color: var(--primary) !important;
|
|
816
1514
|
}
|
|
817
1515
|
|
|
818
1516
|
/* --- TOGGLE / TOGGLE GROUP --- */
|
|
819
1517
|
.glass-context [data-slot="toggle"],
|
|
820
1518
|
.glass-context [data-slot="toggle-group-item"] {
|
|
821
|
-
background:
|
|
822
|
-
border-color:
|
|
823
|
-
color:
|
|
1519
|
+
background: var(--sidebar) !important;
|
|
1520
|
+
border-color: var(--sidebar-border) !important;
|
|
1521
|
+
color: var(--sidebar-foreground) !important;
|
|
824
1522
|
}
|
|
825
1523
|
|
|
826
1524
|
.glass-context [data-slot="toggle"][data-state="on"],
|
|
827
1525
|
.glass-context [data-slot="toggle-group-item"][data-state="on"] {
|
|
828
|
-
background:
|
|
829
|
-
border-color:
|
|
1526
|
+
background: var(--primary) !important;
|
|
1527
|
+
border-color: var(--primary) !important;
|
|
830
1528
|
color: #FFFFFF !important;
|
|
831
1529
|
}
|
|
832
1530
|
|
|
833
1531
|
.glass-context [data-slot="toggle"]:hover,
|
|
834
1532
|
.glass-context [data-slot="toggle-group-item"]:hover {
|
|
835
|
-
background:
|
|
836
|
-
border-color:
|
|
837
|
-
color:
|
|
1533
|
+
background: var(--accent) !important;
|
|
1534
|
+
border-color: var(--accent) !important;
|
|
1535
|
+
color: var(--accent-foreground) !important;
|
|
838
1536
|
}
|
|
839
1537
|
|
|
840
1538
|
/* --- DROPDOWN MENU --- */
|
|
841
1539
|
.glass-context [data-slot="dropdown-menu-content"],
|
|
842
1540
|
.glass-context [role="menu"] {
|
|
843
|
-
background:
|
|
844
|
-
|
|
845
|
-
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
1541
|
+
background: var(--sidebar) !important;
|
|
1542
|
+
border-color: var(--sidebar-border) !important;
|
|
846
1543
|
}
|
|
847
1544
|
|
|
848
1545
|
.glass-context [data-slot="dropdown-menu-item"],
|
|
849
1546
|
.glass-context [role="menuitem"] {
|
|
850
|
-
color:
|
|
1547
|
+
color: var(--sidebar-foreground) !important;
|
|
851
1548
|
}
|
|
852
1549
|
|
|
853
1550
|
.glass-context [data-slot="dropdown-menu-item"]:hover,
|
|
854
1551
|
.glass-context [role="menuitem"]:hover,
|
|
855
1552
|
.glass-context [data-slot="dropdown-menu-item"]:focus,
|
|
856
1553
|
.glass-context [role="menuitem"]:focus {
|
|
857
|
-
background:
|
|
858
|
-
color:
|
|
1554
|
+
background: var(--accent) !important;
|
|
1555
|
+
color: var(--accent-foreground) !important;
|
|
1556
|
+
}
|
|
1557
|
+
|
|
1558
|
+
/* Context menu hover */
|
|
1559
|
+
.glass-context [data-slot="context-menu-item"]:hover,
|
|
1560
|
+
.glass-context [data-slot="context-menu-item"]:focus {
|
|
1561
|
+
background: var(--accent) !important;
|
|
1562
|
+
color: var(--accent-foreground) !important;
|
|
1563
|
+
}
|
|
1564
|
+
|
|
1565
|
+
/* Select item hover */
|
|
1566
|
+
.glass-context [data-slot="select-item"]:hover,
|
|
1567
|
+
.glass-context [data-slot="select-item"]:focus {
|
|
1568
|
+
background: var(--accent) !important;
|
|
1569
|
+
color: var(--accent-foreground) !important;
|
|
859
1570
|
}
|
|
860
1571
|
|
|
861
1572
|
/* --- POPOVER --- */
|
|
862
1573
|
.glass-context [data-slot="popover-content"] {
|
|
863
|
-
background:
|
|
864
|
-
|
|
865
|
-
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
1574
|
+
background: var(--sidebar) !important;
|
|
1575
|
+
border-color: var(--sidebar-border) !important;
|
|
866
1576
|
}
|
|
867
1577
|
|
|
868
1578
|
/* --- TOOLTIP --- */
|
|
@@ -877,19 +1587,19 @@ textarea,
|
|
|
877
1587
|
}
|
|
878
1588
|
|
|
879
1589
|
.glass-context [data-slot="progress-indicator"] {
|
|
880
|
-
background:
|
|
1590
|
+
background: var(--primary) !important;
|
|
881
1591
|
}
|
|
882
1592
|
|
|
883
1593
|
/* --- ALERT --- */
|
|
884
1594
|
.glass-context [data-slot="alert"] {
|
|
885
|
-
background:
|
|
886
|
-
border-color:
|
|
1595
|
+
background: var(--sidebar) !important;
|
|
1596
|
+
border-color: var(--sidebar-border) !important;
|
|
887
1597
|
}
|
|
888
1598
|
|
|
889
1599
|
/* --- SHEET --- */
|
|
890
1600
|
.glass-context [data-slot="sheet-content"] {
|
|
891
|
-
background:
|
|
892
|
-
|
|
1601
|
+
background: var(--sidebar) !important;
|
|
1602
|
+
border-color: var(--sidebar-border) !important;
|
|
893
1603
|
padding-left: 1.5rem !important;
|
|
894
1604
|
padding-right: 1.5rem !important;
|
|
895
1605
|
}
|
|
@@ -903,8 +1613,8 @@ textarea,
|
|
|
903
1613
|
|
|
904
1614
|
/* --- DIALOG --- */
|
|
905
1615
|
.glass-context [data-slot="dialog-content"] {
|
|
906
|
-
background:
|
|
907
|
-
|
|
1616
|
+
background: var(--sidebar) !important;
|
|
1617
|
+
border-color: var(--sidebar-border) !important;
|
|
908
1618
|
}
|
|
909
1619
|
|
|
910
1620
|
/* --- COMMAND / SEARCH INPUT --- */
|
|
@@ -922,8 +1632,8 @@ textarea,
|
|
|
922
1632
|
}
|
|
923
1633
|
|
|
924
1634
|
.glass-context [data-slot="command-input-wrapper"] {
|
|
925
|
-
background:
|
|
926
|
-
border: 1px solid
|
|
1635
|
+
background: var(--sidebar) !important;
|
|
1636
|
+
border: 1px solid var(--sidebar-border) !important;
|
|
927
1637
|
border-radius: var(--j3m-radius-full) !important;
|
|
928
1638
|
padding-left: 1rem !important;
|
|
929
1639
|
padding-right: 1rem !important;
|
|
@@ -931,21 +1641,21 @@ textarea,
|
|
|
931
1641
|
|
|
932
1642
|
.glass-context [data-slot="command-input"] {
|
|
933
1643
|
background: transparent !important;
|
|
934
|
-
color:
|
|
1644
|
+
color: var(--sidebar-foreground) !important;
|
|
935
1645
|
}
|
|
936
1646
|
|
|
937
1647
|
.glass-context [data-slot="command-input"]::placeholder {
|
|
938
|
-
color:
|
|
1648
|
+
color: var(--muted-foreground) !important;
|
|
939
1649
|
}
|
|
940
1650
|
|
|
941
1651
|
.glass-context [data-slot="command-input-wrapper"]:focus-within {
|
|
942
|
-
border-color:
|
|
1652
|
+
border-color: var(--j3m-orange-9) !important;
|
|
943
1653
|
box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.2) !important;
|
|
944
1654
|
}
|
|
945
1655
|
|
|
946
1656
|
.glass-context [data-slot="command-list"] {
|
|
947
|
-
background:
|
|
948
|
-
border: 1px solid
|
|
1657
|
+
background: var(--sidebar) !important;
|
|
1658
|
+
border: 1px solid var(--sidebar-border) !important;
|
|
949
1659
|
border-radius: var(--j3m-radius-l) !important;
|
|
950
1660
|
margin-top: 0.25rem !important;
|
|
951
1661
|
}
|
|
@@ -955,35 +1665,48 @@ textarea,
|
|
|
955
1665
|
}
|
|
956
1666
|
|
|
957
1667
|
.glass-context [data-slot="command-item"] {
|
|
958
|
-
color:
|
|
1668
|
+
color: var(--sidebar-foreground) !important;
|
|
1669
|
+
}
|
|
1670
|
+
|
|
1671
|
+
/* Command item hover - use accent (grey) not primary (orange) */
|
|
1672
|
+
.glass-context [data-slot="command-item"]:hover,
|
|
1673
|
+
.glass-context [cmdk-item]:hover {
|
|
1674
|
+
background: var(--accent) !important;
|
|
1675
|
+
color: var(--accent-foreground) !important;
|
|
959
1676
|
}
|
|
960
1677
|
|
|
1678
|
+
.glass-context [data-slot="command-item"]:hover *,
|
|
1679
|
+
.glass-context [cmdk-item]:hover * {
|
|
1680
|
+
color: var(--accent-foreground) !important;
|
|
1681
|
+
}
|
|
1682
|
+
|
|
1683
|
+
/* Command item selected state - also use accent for consistency */
|
|
961
1684
|
.glass-context [data-slot="command-item"][data-selected=true] {
|
|
962
|
-
background:
|
|
963
|
-
color:
|
|
1685
|
+
background: var(--accent) !important;
|
|
1686
|
+
color: var(--accent-foreground) !important;
|
|
964
1687
|
}
|
|
965
1688
|
|
|
966
1689
|
.glass-context [data-slot="command-item"][data-selected=true] svg {
|
|
967
|
-
color:
|
|
1690
|
+
color: var(--accent-foreground) !important;
|
|
968
1691
|
}
|
|
969
1692
|
|
|
970
1693
|
.glass-context [data-slot="command-separator"] {
|
|
971
|
-
background:
|
|
1694
|
+
background: var(--sidebar-border) !important;
|
|
972
1695
|
}
|
|
973
1696
|
|
|
974
1697
|
/* --- SCROLL AREA --- */
|
|
975
1698
|
.glass-context [data-slot="scroll-area"] {
|
|
976
|
-
background:
|
|
977
|
-
border: 1px solid
|
|
1699
|
+
background: var(--sidebar) !important;
|
|
1700
|
+
border: 1px solid var(--sidebar-border) !important;
|
|
978
1701
|
border-radius: var(--radius) !important;
|
|
979
1702
|
}
|
|
980
1703
|
|
|
981
1704
|
.glass-context [data-slot="scroll-area-thumb"] {
|
|
982
|
-
background: rgba(0, 0, 0, 0.
|
|
1705
|
+
background: rgba(0, 0, 0, 0.15) !important;
|
|
983
1706
|
}
|
|
984
1707
|
|
|
985
1708
|
.glass-context [data-slot="scroll-area-thumb"]:hover {
|
|
986
|
-
background: rgba(0, 0, 0, 0.
|
|
1709
|
+
background: rgba(0, 0, 0, 0.25) !important;
|
|
987
1710
|
}
|
|
988
1711
|
|
|
989
1712
|
/* --- COLLAPSIBLE --- */
|
|
@@ -995,11 +1718,417 @@ textarea,
|
|
|
995
1718
|
|
|
996
1719
|
/* --- CARD (ensure frosted glass in glass context) --- */
|
|
997
1720
|
.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;
|
|
1721
|
+
background: var(--j3m-glass-frosted-card) !important;
|
|
1722
|
+
backdrop-filter: blur(var(--j3m-blur-frosted)) !important;
|
|
1723
|
+
-webkit-backdrop-filter: blur(var(--j3m-blur-frosted)) !important;
|
|
1724
|
+
border: none !important;
|
|
1725
|
+
box-shadow: var(--j3m-glass-shadow-md) !important;
|
|
1726
|
+
position: relative;
|
|
1727
|
+
}
|
|
1728
|
+
|
|
1729
|
+
.glass-context [data-slot="card"]:not([class*="glass"])::before {
|
|
1730
|
+
content: '';
|
|
1731
|
+
position: absolute;
|
|
1732
|
+
inset: 0;
|
|
1733
|
+
border-radius: inherit;
|
|
1734
|
+
padding: 1px;
|
|
1735
|
+
background: var(--j3m-glass-border-gradient);
|
|
1736
|
+
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
1737
|
+
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
1738
|
+
-webkit-mask-composite: xor;
|
|
1739
|
+
mask-composite: exclude;
|
|
1740
|
+
pointer-events: none;
|
|
1741
|
+
}
|
|
1742
|
+
|
|
1743
|
+
/* ========================================
|
|
1744
|
+
DARK GLASS MODE COMPONENT OVERRIDES
|
|
1745
|
+
Styling for components inside .dark .glass-context
|
|
1746
|
+
======================================== */
|
|
1747
|
+
|
|
1748
|
+
/* --- CARDS (Dark Glass) - ALL cards in dark glass mode --- */
|
|
1749
|
+
.dark.theme-glass [data-slot="card"],
|
|
1750
|
+
.theme-glass.dark [data-slot="card"],
|
|
1751
|
+
.dark .glass-context [data-slot="card"],
|
|
1752
|
+
.theme-glass.dark .glass-context [data-slot="card"] {
|
|
1753
|
+
background: var(--sidebar) !important;
|
|
1754
|
+
border: 1px solid var(--sidebar-border) !important;
|
|
1755
|
+
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15) !important;
|
|
1756
|
+
color: var(--sidebar-foreground) !important;
|
|
1757
|
+
}
|
|
1758
|
+
|
|
1759
|
+
/* Remove the light gradient border pseudo-element in dark mode */
|
|
1760
|
+
.dark.theme-glass [data-slot="card"]::before,
|
|
1761
|
+
.theme-glass.dark [data-slot="card"]::before,
|
|
1762
|
+
.dark .glass-context [data-slot="card"]::before,
|
|
1763
|
+
.theme-glass.dark .glass-context [data-slot="card"]::before {
|
|
1764
|
+
background: linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.04) 100%) !important;
|
|
1765
|
+
}
|
|
1766
|
+
|
|
1767
|
+
/* Card text colors in dark glass */
|
|
1768
|
+
.dark.theme-glass [data-slot="card"] *,
|
|
1769
|
+
.theme-glass.dark [data-slot="card"] *,
|
|
1770
|
+
.dark.theme-glass .glass-context *,
|
|
1771
|
+
.theme-glass.dark .glass-context * {
|
|
1772
|
+
--card-foreground: var(--sidebar-foreground);
|
|
1773
|
+
}
|
|
1774
|
+
|
|
1775
|
+
/* --- INPUT FIELDS (Dark Glass) --- */
|
|
1776
|
+
.dark .glass-context input,
|
|
1777
|
+
.dark .glass-context [data-slot="input"],
|
|
1778
|
+
.dark .glass-context textarea,
|
|
1779
|
+
.dark .glass-context [data-slot="textarea"],
|
|
1780
|
+
.theme-glass.dark .glass-context input,
|
|
1781
|
+
.theme-glass.dark .glass-context [data-slot="input"],
|
|
1782
|
+
.theme-glass.dark .glass-context textarea,
|
|
1783
|
+
.theme-glass.dark .glass-context [data-slot="textarea"] {
|
|
1784
|
+
background: var(--sidebar) !important;
|
|
1785
|
+
border-color: var(--sidebar-border) !important;
|
|
1786
|
+
color: var(--sidebar-foreground) !important;
|
|
1787
|
+
}
|
|
1788
|
+
|
|
1789
|
+
.dark .glass-context input::placeholder,
|
|
1790
|
+
.dark .glass-context [data-slot="input"]::placeholder,
|
|
1791
|
+
.theme-glass.dark .glass-context input::placeholder,
|
|
1792
|
+
.theme-glass.dark .glass-context [data-slot="input"]::placeholder {
|
|
1793
|
+
color: var(--muted-foreground) !important;
|
|
1794
|
+
}
|
|
1795
|
+
|
|
1796
|
+
/* --- SELECT TRIGGER (Dark Glass) --- */
|
|
1797
|
+
.dark .glass-context [data-slot="select-trigger"],
|
|
1798
|
+
.theme-glass.dark .glass-context [data-slot="select-trigger"] {
|
|
1799
|
+
background: var(--sidebar) !important;
|
|
1800
|
+
border-color: var(--sidebar-border) !important;
|
|
1801
|
+
color: var(--sidebar-foreground) !important;
|
|
1802
|
+
}
|
|
1803
|
+
|
|
1804
|
+
/* --- BUTTONS (Dark Glass) --- */
|
|
1805
|
+
.dark .glass-context [data-slot="button"][data-variant="outline"],
|
|
1806
|
+
.dark .glass-context [data-slot="button"][data-variant="secondary"],
|
|
1807
|
+
.dark .glass-context [data-slot="button"][data-variant="ghost"],
|
|
1808
|
+
.theme-glass.dark .glass-context [data-slot="button"][data-variant="outline"],
|
|
1809
|
+
.theme-glass.dark .glass-context [data-slot="button"][data-variant="secondary"],
|
|
1810
|
+
.theme-glass.dark .glass-context [data-slot="button"][data-variant="ghost"] {
|
|
1811
|
+
background: var(--sidebar) !important;
|
|
1812
|
+
border-color: var(--sidebar-border) !important;
|
|
1813
|
+
color: var(--sidebar-foreground) !important;
|
|
1814
|
+
}
|
|
1815
|
+
|
|
1816
|
+
.dark .glass-context [data-slot="button"][data-variant="outline"]:hover,
|
|
1817
|
+
.dark .glass-context [data-slot="button"][data-variant="secondary"]:hover,
|
|
1818
|
+
.dark .glass-context [data-slot="button"][data-variant="ghost"]:hover,
|
|
1819
|
+
.theme-glass.dark .glass-context [data-slot="button"][data-variant="outline"]:hover,
|
|
1820
|
+
.theme-glass.dark .glass-context [data-slot="button"][data-variant="secondary"]:hover,
|
|
1821
|
+
.theme-glass.dark .glass-context [data-slot="button"][data-variant="ghost"]:hover {
|
|
1822
|
+
background: var(--accent) !important;
|
|
1823
|
+
border-color: var(--accent) !important;
|
|
1824
|
+
color: var(--accent-foreground) !important;
|
|
1825
|
+
}
|
|
1826
|
+
|
|
1827
|
+
/* --- TABS (Dark Glass) --- */
|
|
1828
|
+
.dark .glass-context [data-slot="tabs-list"],
|
|
1829
|
+
.theme-glass.dark .glass-context [data-slot="tabs-list"] {
|
|
1830
|
+
background: var(--muted) !important;
|
|
1831
|
+
}
|
|
1832
|
+
|
|
1833
|
+
.dark .glass-context [data-slot="tabs-trigger"],
|
|
1834
|
+
.theme-glass.dark .glass-context [data-slot="tabs-trigger"] {
|
|
1835
|
+
color: var(--muted-foreground) !important;
|
|
1836
|
+
}
|
|
1837
|
+
|
|
1838
|
+
.dark .glass-context [data-slot="tabs-trigger"][data-state="active"],
|
|
1839
|
+
.theme-glass.dark .glass-context [data-slot="tabs-trigger"][data-state="active"] {
|
|
1840
|
+
background: var(--sidebar) !important;
|
|
1841
|
+
color: var(--sidebar-foreground) !important;
|
|
1842
|
+
}
|
|
1843
|
+
|
|
1844
|
+
/* --- TABLE (Dark Glass) --- */
|
|
1845
|
+
.dark .glass-context table,
|
|
1846
|
+
.dark .glass-context [data-slot="table"],
|
|
1847
|
+
.theme-glass.dark .glass-context table,
|
|
1848
|
+
.theme-glass.dark .glass-context [data-slot="table"] {
|
|
1849
|
+
background: var(--sidebar) !important;
|
|
1850
|
+
}
|
|
1851
|
+
|
|
1852
|
+
.dark .glass-context thead,
|
|
1853
|
+
.dark .glass-context [data-slot="table-header"],
|
|
1854
|
+
.theme-glass.dark .glass-context thead,
|
|
1855
|
+
.theme-glass.dark .glass-context [data-slot="table-header"] {
|
|
1856
|
+
background: var(--muted) !important;
|
|
1857
|
+
}
|
|
1858
|
+
|
|
1859
|
+
.dark .glass-context th,
|
|
1860
|
+
.dark .glass-context td,
|
|
1861
|
+
.theme-glass.dark .glass-context th,
|
|
1862
|
+
.theme-glass.dark .glass-context td {
|
|
1863
|
+
border-color: var(--sidebar-border) !important;
|
|
1864
|
+
color: var(--sidebar-foreground) !important;
|
|
1865
|
+
}
|
|
1866
|
+
|
|
1867
|
+
/* --- DROPDOWN/POPOVER (Dark Glass) --- */
|
|
1868
|
+
.dark .glass-context [data-slot="dropdown-menu-content"],
|
|
1869
|
+
.dark .glass-context [data-slot="popover-content"],
|
|
1870
|
+
.dark .glass-context [role="menu"],
|
|
1871
|
+
.theme-glass.dark .glass-context [data-slot="dropdown-menu-content"],
|
|
1872
|
+
.theme-glass.dark .glass-context [data-slot="popover-content"],
|
|
1873
|
+
.theme-glass.dark .glass-context [role="menu"] {
|
|
1874
|
+
background: var(--sidebar) !important;
|
|
1875
|
+
border-color: var(--sidebar-border) !important;
|
|
1876
|
+
}
|
|
1877
|
+
|
|
1878
|
+
.dark .glass-context [data-slot="dropdown-menu-item"],
|
|
1879
|
+
.dark .glass-context [role="menuitem"],
|
|
1880
|
+
.theme-glass.dark .glass-context [data-slot="dropdown-menu-item"],
|
|
1881
|
+
.theme-glass.dark .glass-context [role="menuitem"] {
|
|
1882
|
+
color: var(--sidebar-foreground) !important;
|
|
1883
|
+
}
|
|
1884
|
+
|
|
1885
|
+
/* Dark Glass Mode - Hover Overrides */
|
|
1886
|
+
.dark .glass-context [data-slot="menubar-trigger"]:hover,
|
|
1887
|
+
.dark .glass-context [data-slot="menubar-trigger"][data-state="open"],
|
|
1888
|
+
.theme-glass.dark .glass-context [data-slot="menubar-trigger"]:hover,
|
|
1889
|
+
.theme-glass.dark .glass-context [data-slot="menubar-trigger"][data-state="open"] {
|
|
1890
|
+
background: var(--accent) !important;
|
|
1891
|
+
color: var(--accent-foreground) !important;
|
|
1892
|
+
}
|
|
1893
|
+
|
|
1894
|
+
.dark .glass-context [data-slot="menubar-item"]:hover,
|
|
1895
|
+
.dark .glass-context [data-slot="menubar-item"]:focus,
|
|
1896
|
+
.theme-glass.dark .glass-context [data-slot="menubar-item"]:hover,
|
|
1897
|
+
.theme-glass.dark .glass-context [data-slot="menubar-item"]:focus {
|
|
1898
|
+
background: var(--accent) !important;
|
|
1899
|
+
color: var(--accent-foreground) !important;
|
|
1900
|
+
}
|
|
1901
|
+
|
|
1902
|
+
.dark .glass-context [data-slot="toggle"]:hover,
|
|
1903
|
+
.dark .glass-context [data-slot="toggle-group-item"]:hover,
|
|
1904
|
+
.theme-glass.dark .glass-context [data-slot="toggle"]:hover,
|
|
1905
|
+
.theme-glass.dark .glass-context [data-slot="toggle-group-item"]:hover {
|
|
1906
|
+
background: var(--accent) !important;
|
|
1907
|
+
border-color: var(--accent) !important;
|
|
1908
|
+
color: var(--accent-foreground) !important;
|
|
1909
|
+
}
|
|
1910
|
+
|
|
1911
|
+
.dark .glass-context [data-slot="dropdown-menu-item"]:hover,
|
|
1912
|
+
.dark .glass-context [data-slot="dropdown-menu-item"]:focus,
|
|
1913
|
+
.dark .glass-context [role="menuitem"]:hover,
|
|
1914
|
+
.theme-glass.dark .glass-context [data-slot="dropdown-menu-item"]:hover,
|
|
1915
|
+
.theme-glass.dark .glass-context [data-slot="dropdown-menu-item"]:focus,
|
|
1916
|
+
.theme-glass.dark .glass-context [role="menuitem"]:hover {
|
|
1917
|
+
background: var(--accent) !important;
|
|
1918
|
+
color: var(--accent-foreground) !important;
|
|
1919
|
+
}
|
|
1920
|
+
|
|
1921
|
+
.dark .glass-context [data-slot="context-menu-item"]:hover,
|
|
1922
|
+
.dark .glass-context [data-slot="context-menu-item"]:focus,
|
|
1923
|
+
.theme-glass.dark .glass-context [data-slot="context-menu-item"]:hover,
|
|
1924
|
+
.theme-glass.dark .glass-context [data-slot="context-menu-item"]:focus {
|
|
1925
|
+
background: var(--accent) !important;
|
|
1926
|
+
color: var(--accent-foreground) !important;
|
|
1927
|
+
}
|
|
1928
|
+
|
|
1929
|
+
.dark .glass-context [data-slot="navigation-menu-content"] a:hover,
|
|
1930
|
+
.dark .glass-context [data-slot="navigation-menu-link"]:hover,
|
|
1931
|
+
.theme-glass.dark .glass-context [data-slot="navigation-menu-content"] a:hover,
|
|
1932
|
+
.theme-glass.dark .glass-context [data-slot="navigation-menu-link"]:hover {
|
|
1933
|
+
background: var(--accent) !important;
|
|
1934
|
+
color: var(--accent-foreground) !important;
|
|
1935
|
+
}
|
|
1936
|
+
|
|
1937
|
+
.dark .glass-context [data-slot="navigation-menu-content"] a:hover *,
|
|
1938
|
+
.dark .glass-context [data-slot="navigation-menu-link"]:hover *,
|
|
1939
|
+
.theme-glass.dark .glass-context [data-slot="navigation-menu-content"] a:hover *,
|
|
1940
|
+
.theme-glass.dark .glass-context [data-slot="navigation-menu-link"]:hover * {
|
|
1941
|
+
color: var(--accent-foreground) !important;
|
|
1942
|
+
}
|
|
1943
|
+
|
|
1944
|
+
/* Command item hover in dark glass */
|
|
1945
|
+
.dark .glass-context [data-slot="command-item"]:hover,
|
|
1946
|
+
.dark .glass-context [cmdk-item]:hover,
|
|
1947
|
+
.theme-glass.dark .glass-context [data-slot="command-item"]:hover,
|
|
1948
|
+
.theme-glass.dark .glass-context [cmdk-item]:hover {
|
|
1949
|
+
background: var(--accent) !important;
|
|
1950
|
+
color: var(--accent-foreground) !important;
|
|
1951
|
+
}
|
|
1952
|
+
|
|
1953
|
+
.dark .glass-context [data-slot="command-item"]:hover *,
|
|
1954
|
+
.dark .glass-context [cmdk-item]:hover *,
|
|
1955
|
+
.theme-glass.dark .glass-context [data-slot="command-item"]:hover *,
|
|
1956
|
+
.theme-glass.dark .glass-context [cmdk-item]:hover * {
|
|
1957
|
+
color: var(--accent-foreground) !important;
|
|
1958
|
+
}
|
|
1959
|
+
|
|
1960
|
+
/* Select item hover in dark glass */
|
|
1961
|
+
.dark .glass-context [data-slot="select-item"]:hover,
|
|
1962
|
+
.dark .glass-context [data-slot="select-item"]:focus,
|
|
1963
|
+
.theme-glass.dark .glass-context [data-slot="select-item"]:hover,
|
|
1964
|
+
.theme-glass.dark .glass-context [data-slot="select-item"]:focus {
|
|
1965
|
+
background: var(--accent) !important;
|
|
1966
|
+
color: var(--accent-foreground) !important;
|
|
1967
|
+
}
|
|
1968
|
+
|
|
1969
|
+
/* --- DIALOG/SHEET (Dark Glass) --- */
|
|
1970
|
+
.dark .glass-context [data-slot="dialog-content"],
|
|
1971
|
+
.dark .glass-context [data-slot="sheet-content"],
|
|
1972
|
+
.theme-glass.dark .glass-context [data-slot="dialog-content"],
|
|
1973
|
+
.theme-glass.dark .glass-context [data-slot="sheet-content"] {
|
|
1974
|
+
background: var(--sidebar) !important;
|
|
1975
|
+
border: 1px solid var(--sidebar-border) !important;
|
|
1976
|
+
}
|
|
1977
|
+
|
|
1978
|
+
/* --- COMMAND (Dark Glass) --- */
|
|
1979
|
+
.dark .glass-context [data-slot="command-input-wrapper"],
|
|
1980
|
+
.theme-glass.dark .glass-context [data-slot="command-input-wrapper"] {
|
|
1981
|
+
background: var(--sidebar) !important;
|
|
1982
|
+
border-color: var(--sidebar-border) !important;
|
|
1983
|
+
}
|
|
1984
|
+
|
|
1985
|
+
.dark .glass-context [data-slot="command-input"],
|
|
1986
|
+
.theme-glass.dark .glass-context [data-slot="command-input"] {
|
|
1987
|
+
color: var(--sidebar-foreground) !important;
|
|
1988
|
+
}
|
|
1989
|
+
|
|
1990
|
+
.dark .glass-context [data-slot="command-input"]::placeholder,
|
|
1991
|
+
.theme-glass.dark .glass-context [data-slot="command-input"]::placeholder {
|
|
1992
|
+
color: var(--muted-foreground) !important;
|
|
1993
|
+
}
|
|
1994
|
+
|
|
1995
|
+
.dark .glass-context [data-slot="command-list"],
|
|
1996
|
+
.theme-glass.dark .glass-context [data-slot="command-list"] {
|
|
1997
|
+
background: var(--sidebar) !important;
|
|
1998
|
+
border-color: var(--sidebar-border) !important;
|
|
1999
|
+
}
|
|
2000
|
+
|
|
2001
|
+
.dark .glass-context [data-slot="command-item"],
|
|
2002
|
+
.theme-glass.dark .glass-context [data-slot="command-item"] {
|
|
2003
|
+
color: var(--sidebar-foreground) !important;
|
|
2004
|
+
}
|
|
2005
|
+
|
|
2006
|
+
/* --- ACCORDION (Dark Glass) --- */
|
|
2007
|
+
.dark .glass-context [data-slot="accordion-item"],
|
|
2008
|
+
.theme-glass.dark .glass-context [data-slot="accordion-item"] {
|
|
2009
|
+
border-color: var(--sidebar-border) !important;
|
|
2010
|
+
}
|
|
2011
|
+
|
|
2012
|
+
.dark .glass-context [data-slot="accordion-trigger"],
|
|
2013
|
+
.theme-glass.dark .glass-context [data-slot="accordion-trigger"] {
|
|
2014
|
+
color: var(--sidebar-foreground) !important;
|
|
2015
|
+
}
|
|
2016
|
+
|
|
2017
|
+
/* --- SEPARATOR (Dark Glass) --- */
|
|
2018
|
+
.dark .glass-context [data-slot="separator"],
|
|
2019
|
+
.dark .glass-context hr,
|
|
2020
|
+
.theme-glass.dark .glass-context [data-slot="separator"],
|
|
2021
|
+
.theme-glass.dark .glass-context hr {
|
|
2022
|
+
background-color: var(--sidebar-border) !important;
|
|
2023
|
+
border-color: var(--sidebar-border) !important;
|
|
2024
|
+
}
|
|
2025
|
+
|
|
2026
|
+
/* --- ALERT (Dark Glass) --- */
|
|
2027
|
+
.dark .glass-context [data-slot="alert"],
|
|
2028
|
+
.theme-glass.dark .glass-context [data-slot="alert"] {
|
|
2029
|
+
background: var(--sidebar) !important;
|
|
2030
|
+
border-color: var(--sidebar-border) !important;
|
|
2031
|
+
}
|
|
2032
|
+
|
|
2033
|
+
/* --- SCROLL AREA (Dark Glass) --- */
|
|
2034
|
+
.dark .glass-context [data-slot="scroll-area"],
|
|
2035
|
+
.theme-glass.dark .glass-context [data-slot="scroll-area"] {
|
|
2036
|
+
background: var(--sidebar) !important;
|
|
2037
|
+
border-color: var(--sidebar-border) !important;
|
|
2038
|
+
}
|
|
2039
|
+
|
|
2040
|
+
.dark .glass-context [data-slot="scroll-area-thumb"],
|
|
2041
|
+
.theme-glass.dark .glass-context [data-slot="scroll-area-thumb"] {
|
|
2042
|
+
background: rgba(255, 255, 255, 0.3) !important;
|
|
2043
|
+
}
|
|
2044
|
+
|
|
2045
|
+
/* --- BADGE (Dark Glass) --- */
|
|
2046
|
+
.dark .glass-context [data-slot="badge"][data-variant="outline"],
|
|
2047
|
+
.theme-glass.dark .glass-context [data-slot="badge"][data-variant="outline"] {
|
|
2048
|
+
background: var(--sidebar) !important;
|
|
2049
|
+
border-color: var(--sidebar-border) !important;
|
|
2050
|
+
color: var(--sidebar-foreground) !important;
|
|
2051
|
+
}
|
|
2052
|
+
|
|
2053
|
+
/* --- TOGGLE (Dark Glass) --- */
|
|
2054
|
+
.dark .glass-context [data-slot="toggle"],
|
|
2055
|
+
.dark .glass-context [data-slot="toggle-group-item"],
|
|
2056
|
+
.theme-glass.dark .glass-context [data-slot="toggle"],
|
|
2057
|
+
.theme-glass.dark .glass-context [data-slot="toggle-group-item"] {
|
|
2058
|
+
background: var(--sidebar) !important;
|
|
2059
|
+
border-color: var(--sidebar-border) !important;
|
|
2060
|
+
color: var(--sidebar-foreground) !important;
|
|
2061
|
+
}
|
|
2062
|
+
|
|
2063
|
+
/* --- MENUBAR (Dark Glass) --- */
|
|
2064
|
+
.dark .glass-context [data-slot="menubar"],
|
|
2065
|
+
.theme-glass.dark .glass-context [data-slot="menubar"] {
|
|
2066
|
+
background: var(--sidebar) !important;
|
|
2067
|
+
border-color: var(--sidebar-border) !important;
|
|
2068
|
+
}
|
|
2069
|
+
|
|
2070
|
+
.dark .glass-context [data-slot="menubar-trigger"],
|
|
2071
|
+
.theme-glass.dark .glass-context [data-slot="menubar-trigger"] {
|
|
2072
|
+
color: var(--sidebar-foreground) !important;
|
|
2073
|
+
}
|
|
2074
|
+
|
|
2075
|
+
.dark .glass-context [data-slot="menubar-content"],
|
|
2076
|
+
.theme-glass.dark .glass-context [data-slot="menubar-content"] {
|
|
2077
|
+
background: var(--sidebar) !important;
|
|
2078
|
+
border-color: var(--sidebar-border) !important;
|
|
2079
|
+
}
|
|
2080
|
+
|
|
2081
|
+
/* --- CALENDAR (Dark Glass) --- */
|
|
2082
|
+
.dark .glass-context [data-slot="calendar"],
|
|
2083
|
+
.dark .glass-context .rdp,
|
|
2084
|
+
.theme-glass.dark .glass-context [data-slot="calendar"],
|
|
2085
|
+
.theme-glass.dark .glass-context .rdp {
|
|
2086
|
+
background: var(--sidebar) !important;
|
|
2087
|
+
border-color: var(--sidebar-border) !important;
|
|
2088
|
+
}
|
|
2089
|
+
|
|
2090
|
+
/* --- SLIDER (Dark Glass) --- */
|
|
2091
|
+
.dark .glass-context [data-slot="slider-track"],
|
|
2092
|
+
.theme-glass.dark .glass-context [data-slot="slider-track"] {
|
|
2093
|
+
background: var(--muted) !important;
|
|
2094
|
+
}
|
|
2095
|
+
|
|
2096
|
+
/* --- PROGRESS (Dark Glass) --- */
|
|
2097
|
+
.dark .glass-context [data-slot="progress"],
|
|
2098
|
+
.theme-glass.dark .glass-context [data-slot="progress"] {
|
|
2099
|
+
background: var(--muted) !important;
|
|
2100
|
+
}
|
|
2101
|
+
|
|
2102
|
+
/* --- TOAST (Dark Glass) --- */
|
|
2103
|
+
.dark .glass-context [data-sonner-toast],
|
|
2104
|
+
.dark .glass-context .sonner-toast,
|
|
2105
|
+
.theme-glass.dark .glass-context [data-sonner-toast],
|
|
2106
|
+
.theme-glass.dark .glass-context .sonner-toast {
|
|
2107
|
+
background: var(--sidebar) !important;
|
|
2108
|
+
border-color: var(--sidebar-border) !important;
|
|
2109
|
+
color: var(--sidebar-foreground) !important;
|
|
2110
|
+
}
|
|
2111
|
+
|
|
2112
|
+
/* --- CHECKBOX/RADIO (Dark Glass) --- */
|
|
2113
|
+
.dark .glass-context [data-slot="checkbox"],
|
|
2114
|
+
.dark .glass-context [role="checkbox"],
|
|
2115
|
+
.dark .glass-context [data-slot="radio-group-item"],
|
|
2116
|
+
.dark .glass-context [role="radio"],
|
|
2117
|
+
.theme-glass.dark .glass-context [data-slot="checkbox"],
|
|
2118
|
+
.theme-glass.dark .glass-context [role="checkbox"],
|
|
2119
|
+
.theme-glass.dark .glass-context [data-slot="radio-group-item"],
|
|
2120
|
+
.theme-glass.dark .glass-context [role="radio"] {
|
|
2121
|
+
background: var(--sidebar) !important;
|
|
2122
|
+
border-color: var(--sidebar-border) !important;
|
|
2123
|
+
}
|
|
2124
|
+
|
|
2125
|
+
/* --- SWITCH (Dark Glass) --- */
|
|
2126
|
+
.dark .glass-context [data-slot="switch"],
|
|
2127
|
+
.dark .glass-context [role="switch"],
|
|
2128
|
+
.theme-glass.dark .glass-context [data-slot="switch"],
|
|
2129
|
+
.theme-glass.dark .glass-context [role="switch"] {
|
|
2130
|
+
background: var(--muted) !important;
|
|
2131
|
+
border-color: var(--sidebar-border) !important;
|
|
1003
2132
|
}
|
|
1004
2133
|
|
|
1005
2134
|
/* ========================================
|
|
@@ -1024,10 +2153,9 @@ textarea,
|
|
|
1024
2153
|
/* Glass mode toast styling */
|
|
1025
2154
|
.glass-context [data-sonner-toast],
|
|
1026
2155
|
.glass-context .sonner-toast {
|
|
1027
|
-
background:
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
color: rgba(0, 0, 0, 0.85) !important;
|
|
2156
|
+
background: var(--sidebar) !important;
|
|
2157
|
+
border-color: var(--sidebar-border) !important;
|
|
2158
|
+
color: var(--sidebar-foreground) !important;
|
|
1031
2159
|
}
|
|
1032
2160
|
|
|
1033
2161
|
/* ========================================
|