@j3m-quantum/ui 0.9.1 → 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 +212 -20
- 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 +1273 -317
- package/package.json +3 -2
package/dist/styles/index.css
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
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";
|
|
@@ -8,102 +8,66 @@
|
|
|
8
8
|
======================================== */
|
|
9
9
|
|
|
10
10
|
/* ========================================
|
|
11
|
-
|
|
12
|
-
|
|
11
|
+
COLOR SCALES (12-Step, HEX Format)
|
|
12
|
+
|
|
13
|
+
Step Usage Guide:
|
|
14
|
+
1-2: Backgrounds (app, subtle)
|
|
15
|
+
3-5: Interactive backgrounds (element, hover, active)
|
|
16
|
+
6-8: Borders (subtle, element, hover)
|
|
17
|
+
9-10: Solid colors (buttons, hover)
|
|
18
|
+
11-12: Text (low-contrast, high-contrast)
|
|
13
19
|
======================================== */
|
|
14
20
|
|
|
15
21
|
:root {
|
|
16
|
-
/*
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
--j3m-
|
|
20
|
-
--j3m-
|
|
21
|
-
--j3m-
|
|
22
|
-
--j3m-
|
|
23
|
-
--j3m-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
--j3m-
|
|
27
|
-
--j3m-
|
|
28
|
-
--j3m-
|
|
29
|
-
--j3m-
|
|
30
|
-
--j3m-
|
|
31
|
-
--j3m-neutral-400: #BBBBBB;
|
|
32
|
-
--j3m-neutral-500: #A4A4A4;
|
|
33
|
-
--j3m-neutral-600: #8E8E8E;
|
|
34
|
-
--j3m-neutral-700: #777777;
|
|
35
|
-
--j3m-neutral-750: #747474;
|
|
36
|
-
--j3m-neutral-800: #606060;
|
|
37
|
-
--j3m-neutral-900: #4A4A4A;
|
|
38
|
-
--j3m-neutral-1000: #333333;
|
|
39
|
-
|
|
40
|
-
/* Status Colors */
|
|
41
|
-
--j3m-red-100: #FB3748;
|
|
42
|
-
--j3m-red-200: #D00416;
|
|
43
|
-
--j3m-yellow-100: #FFDB43;
|
|
44
|
-
--j3m-yellow-200: #DFB400;
|
|
45
|
-
--j3m-green-100: #84EBB4;
|
|
46
|
-
--j3m-green-200: #1FC16B;
|
|
22
|
+
/* ========================================
|
|
23
|
+
ORANGE SCALE (12-step, brand #F58446 at step 8)
|
|
24
|
+
======================================== */
|
|
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;
|
|
47
37
|
|
|
48
38
|
/* ========================================
|
|
49
|
-
|
|
50
|
-
|
|
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)
|
|
51
47
|
======================================== */
|
|
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;
|
|
52
61
|
|
|
53
|
-
/*
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
--
|
|
57
|
-
--
|
|
58
|
-
--
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
--
|
|
62
|
-
--color-text-muted: rgba(0, 0, 0, 0.5);
|
|
63
|
-
--color-text-soft: rgba(0, 0, 0, 0.4);
|
|
64
|
-
--color-text-on-accent: #FFFFFF;
|
|
65
|
-
--color-text-on-accent-muted: rgba(255, 255, 255, 0.5);
|
|
66
|
-
|
|
67
|
-
/* Border Colors */
|
|
68
|
-
--color-border-subtle: var(--j3m-neutral-200);
|
|
69
|
-
--color-border-strong: var(--j3m-neutral-400);
|
|
70
|
-
|
|
71
|
-
/* Accent/Interactive Colors */
|
|
72
|
-
--color-accent: var(--j3m-primary-250);
|
|
73
|
-
--color-accent-hover: var(--j3m-primary-300);
|
|
74
|
-
--color-accent-active: var(--j3m-primary-350);
|
|
75
|
-
|
|
76
|
-
/* Interactive Component Patterns */
|
|
77
|
-
--color-interactive-bg: var(--j3m-primary-250);
|
|
78
|
-
--color-interactive-text: var(--j3m-neutral-100);
|
|
79
|
-
--color-cta-bg: var(--j3m-primary-300);
|
|
80
|
-
--color-cta-text: var(--j3m-neutral-100);
|
|
81
|
-
--color-focus-ring: rgba(245, 132, 70, 0.2);
|
|
82
|
-
--color-hover-overlay-light: rgba(255, 255, 255, 0.2);
|
|
83
|
-
--color-hover-overlay-dark: rgba(51, 51, 51, 0.1);
|
|
84
|
-
|
|
85
|
-
/* Status Semantic */
|
|
86
|
-
--color-success-bg: var(--j3m-green-100);
|
|
87
|
-
--color-success-border: var(--j3m-green-200);
|
|
88
|
-
--color-success-text: var(--j3m-green-200);
|
|
89
|
-
--color-warning-bg: var(--j3m-yellow-100);
|
|
90
|
-
--color-warning-border: var(--j3m-yellow-200);
|
|
91
|
-
--color-warning-text: var(--j3m-yellow-200);
|
|
92
|
-
--color-error-bg: var(--j3m-red-100);
|
|
93
|
-
--color-error-border: var(--j3m-red-200);
|
|
94
|
-
--color-error-text: var(--j3m-red-100);
|
|
95
|
-
|
|
96
|
-
/* Tooltip */
|
|
97
|
-
--color-tooltip-bg: var(--j3m-neutral-1000);
|
|
98
|
-
--color-tooltip-text: var(--j3m-neutral-100);
|
|
99
|
-
|
|
100
|
-
/* Progress */
|
|
101
|
-
--color-progress-fill: var(--j3m-primary-250);
|
|
102
|
-
--color-progress-track: rgba(255, 255, 255, 0.5);
|
|
103
|
-
|
|
104
|
-
/* Form Controls */
|
|
105
|
-
--color-checkbox-bg: rgba(255, 255, 255, 0.5);
|
|
106
|
-
--color-radio-bg: rgba(255, 255, 255, 0.5);
|
|
62
|
+
/* ========================================
|
|
63
|
+
STATUS COLORS
|
|
64
|
+
======================================== */
|
|
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;
|
|
107
71
|
|
|
108
72
|
/* ========================================
|
|
109
73
|
RADIUS TOKENS
|
|
@@ -127,8 +91,13 @@
|
|
|
127
91
|
--j3m-spacing-l: 24px;
|
|
128
92
|
--j3m-spacing-xl: 32px;
|
|
129
93
|
|
|
94
|
+
/* Layout Sizes */
|
|
95
|
+
--header-height: 3.5rem;
|
|
96
|
+
--sidebar-width: 16rem;
|
|
97
|
+
--sidebar-width-collapsed: 3rem;
|
|
98
|
+
|
|
130
99
|
/* ========================================
|
|
131
|
-
STROKE
|
|
100
|
+
STROKE WIDTH TOKENS
|
|
132
101
|
======================================== */
|
|
133
102
|
--j3m-stroke-none: 0px;
|
|
134
103
|
--j3m-stroke-s: 1px;
|
|
@@ -136,18 +105,6 @@
|
|
|
136
105
|
--j3m-stroke-l: 3px;
|
|
137
106
|
--j3m-stroke-xl: 4px;
|
|
138
107
|
|
|
139
|
-
/* Stroke Colors (opacity-based) */
|
|
140
|
-
--j3m-stroke-dark-5: rgba(0, 0, 0, 0.05);
|
|
141
|
-
--j3m-stroke-dark-10: rgba(0, 0, 0, 0.1);
|
|
142
|
-
--j3m-stroke-dark-20: rgba(0, 0, 0, 0.2);
|
|
143
|
-
--j3m-stroke-light-5: rgba(255, 255, 255, 0.05);
|
|
144
|
-
--j3m-stroke-light-10: rgba(255, 255, 255, 0.1);
|
|
145
|
-
--j3m-stroke-light-20: rgba(255, 255, 255, 0.2);
|
|
146
|
-
--j3m-stroke-white: rgba(255, 255, 255, 1);
|
|
147
|
-
--j3m-stroke-primary-10: rgba(243, 108, 33, 0.1);
|
|
148
|
-
--j3m-stroke-primary-350-50: rgba(234, 91, 12, 0.5);
|
|
149
|
-
--j3m-stroke-neutral-1000-10: rgba(51, 51, 51, 0.1);
|
|
150
|
-
|
|
151
108
|
/* ========================================
|
|
152
109
|
GLASS EFFECTS
|
|
153
110
|
======================================== */
|
|
@@ -156,6 +113,8 @@
|
|
|
156
113
|
--j3m-blur-sm: 10px;
|
|
157
114
|
--j3m-blur-md: 20px;
|
|
158
115
|
--j3m-blur-lg: 50px;
|
|
116
|
+
--j3m-blur-frosted: 24px;
|
|
117
|
+
--j3m-glass-blur: 20px;
|
|
159
118
|
|
|
160
119
|
/* Glass Backgrounds */
|
|
161
120
|
--j3m-glass-light-10: rgba(255, 255, 255, 0.1);
|
|
@@ -177,67 +136,120 @@
|
|
|
177
136
|
--j3m-glass-primary: rgba(243, 108, 33, 0.1);
|
|
178
137
|
--j3m-glass-primary-highlight: rgba(243, 108, 33, 0.2);
|
|
179
138
|
|
|
180
|
-
/* Frosted Glass (enhanced) */
|
|
139
|
+
/* Frosted Glass (light - enhanced) */
|
|
181
140
|
--j3m-glass-frosted: rgba(255, 255, 255, 0.25);
|
|
182
141
|
--j3m-glass-frosted-strong: rgba(255, 255, 255, 0.4);
|
|
183
142
|
--j3m-glass-frosted-card: rgba(255, 255, 255, 0.35);
|
|
184
|
-
--j3m-blur-frosted: 24px;
|
|
185
143
|
|
|
186
|
-
/* Glass
|
|
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) */
|
|
187
177
|
--j3m-glass-border-light: rgba(255, 255, 255, 0.3);
|
|
188
178
|
--j3m-glass-border-subtle: rgba(255, 255, 255, 0.1);
|
|
189
179
|
--j3m-glass-border-white: rgba(255, 255, 255, 0.2);
|
|
190
|
-
|
|
191
|
-
/* Gradient Border (top lighter, bottom darker - simulates light from above) */
|
|
180
|
+
--j3m-glass-border: rgba(255, 255, 255, 0.2);
|
|
192
181
|
--j3m-glass-border-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 100%);
|
|
193
182
|
|
|
194
183
|
/* Glass Shadows */
|
|
195
184
|
--j3m-glass-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
|
|
196
185
|
--j3m-glass-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.08);
|
|
186
|
+
--j3m-glass-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
|
|
197
187
|
--j3m-glass-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
|
198
|
-
--j3m-glass-shadow-glow: 0 0 10px
|
|
199
|
-
--j3m-glass-shadow-glow-active: 0 0 20px
|
|
188
|
+
--j3m-glass-shadow-glow: 0 0 10px #F36C21;
|
|
189
|
+
--j3m-glass-shadow-glow-active: 0 0 20px #EA5B0C;
|
|
200
190
|
|
|
201
191
|
/* ========================================
|
|
202
|
-
SHADCN
|
|
203
|
-
|
|
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
|
|
204
210
|
======================================== */
|
|
205
|
-
|
|
211
|
+
|
|
212
|
+
/* Action Colors */
|
|
213
|
+
--primary: var(--j3m-orange-8);
|
|
206
214
|
--primary-foreground: #FFFFFF;
|
|
207
|
-
--secondary: var(--j3m-
|
|
208
|
-
--secondary-foreground: var(--j3m-
|
|
209
|
-
--
|
|
210
|
-
--
|
|
211
|
-
--
|
|
212
|
-
--accent-foreground: #FFFFFF;
|
|
213
|
-
--destructive: var(--j3m-red-100);
|
|
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 */
|
|
219
|
+
--destructive: var(--j3m-red-9);
|
|
214
220
|
--destructive-foreground: #FFFFFF;
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
--
|
|
218
|
-
--
|
|
219
|
-
--
|
|
220
|
-
--
|
|
221
|
-
--
|
|
222
|
-
--
|
|
223
|
-
--
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
--
|
|
228
|
-
--
|
|
221
|
+
|
|
222
|
+
/* Surface Colors */
|
|
223
|
+
--background: var(--j3m-bg-surface);
|
|
224
|
+
--foreground: var(--j3m-gray-12);
|
|
225
|
+
--card: var(--j3m-bg-surface);
|
|
226
|
+
--card-foreground: var(--j3m-gray-12);
|
|
227
|
+
--popover: var(--j3m-bg-overlay);
|
|
228
|
+
--popover-foreground: var(--j3m-gray-12);
|
|
229
|
+
--muted: var(--j3m-bg-muted);
|
|
230
|
+
--muted-foreground: var(--j3m-gray-9);
|
|
231
|
+
|
|
232
|
+
/* Border & Input Colors */
|
|
233
|
+
--border: var(--j3m-gray-7);
|
|
234
|
+
--input: var(--j3m-gray-6);
|
|
235
|
+
--ring: var(--j3m-orange-8);
|
|
236
|
+
|
|
237
|
+
/* Sidebar & Topbar */
|
|
238
|
+
--sidebar: var(--j3m-bg-sidebar);
|
|
239
|
+
--sidebar-foreground: var(--j3m-gray-11);
|
|
240
|
+
--sidebar-primary: var(--j3m-orange-9);
|
|
229
241
|
--sidebar-primary-foreground: #FFFFFF;
|
|
230
|
-
--sidebar-accent: var(--
|
|
231
|
-
--sidebar-accent-foreground: var(--
|
|
232
|
-
--sidebar-border: var(--j3m-
|
|
233
|
-
--sidebar-ring: var(--j3m-
|
|
242
|
+
--sidebar-accent: var(--accent); /* Match --accent for consistent hover */
|
|
243
|
+
--sidebar-accent-foreground: var(--accent-foreground);
|
|
244
|
+
--sidebar-border: var(--j3m-gray-6);
|
|
245
|
+
--sidebar-ring: var(--j3m-orange-9);
|
|
234
246
|
|
|
235
247
|
/* Chart Colors */
|
|
236
|
-
--chart-1: var(--j3m-
|
|
237
|
-
--chart-2: var(--j3m-
|
|
238
|
-
--chart-3: var(--j3m-
|
|
239
|
-
--chart-4: var(--j3m-
|
|
240
|
-
--chart-5: var(--j3m-
|
|
248
|
+
--chart-1: var(--j3m-orange-8);
|
|
249
|
+
--chart-2: var(--j3m-orange-7);
|
|
250
|
+
--chart-3: var(--j3m-orange-9);
|
|
251
|
+
--chart-4: var(--j3m-orange-5);
|
|
252
|
+
--chart-5: var(--j3m-orange-10);
|
|
241
253
|
|
|
242
254
|
/* Global Radius */
|
|
243
255
|
--radius: 12px;
|
|
@@ -247,6 +259,56 @@
|
|
|
247
259
|
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
|
|
248
260
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
|
|
249
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);
|
|
250
312
|
}
|
|
251
313
|
|
|
252
314
|
/* ========================================
|
|
@@ -254,52 +316,55 @@
|
|
|
254
316
|
======================================== */
|
|
255
317
|
|
|
256
318
|
.dark {
|
|
257
|
-
/*
|
|
258
|
-
--
|
|
259
|
-
--
|
|
260
|
-
--
|
|
261
|
-
--
|
|
262
|
-
--
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
--
|
|
266
|
-
--
|
|
267
|
-
--
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
--
|
|
271
|
-
--
|
|
272
|
-
|
|
273
|
-
/* Shadcn tokens */
|
|
274
|
-
--primary: var(--j3m-primary-250);
|
|
275
|
-
--primary-foreground: var(--j3m-neutral-1000);
|
|
276
|
-
--secondary: var(--j3m-neutral-800);
|
|
277
|
-
--secondary-foreground: var(--j3m-neutral-100);
|
|
278
|
-
--muted: var(--j3m-neutral-800);
|
|
279
|
-
--muted-foreground: var(--j3m-neutral-400);
|
|
280
|
-
--accent: var(--j3m-neutral-800);
|
|
281
|
-
--accent-foreground: var(--j3m-neutral-100);
|
|
282
|
-
--destructive: var(--j3m-red-200);
|
|
319
|
+
/* Core semantic tokens */
|
|
320
|
+
--background: var(--j3m-gray-12);
|
|
321
|
+
--foreground: var(--j3m-gray-1);
|
|
322
|
+
--card: var(--j3m-gray-13);
|
|
323
|
+
--card-foreground: var(--j3m-gray-1);
|
|
324
|
+
--popover: var(--j3m-gray-13);
|
|
325
|
+
--popover-foreground: var(--j3m-gray-1);
|
|
326
|
+
--primary: var(--j3m-orange-8);
|
|
327
|
+
--primary-foreground: var(--j3m-gray-12); /* Dark text on orange */
|
|
328
|
+
--secondary: var(--j3m-gray-12);
|
|
329
|
+
--secondary-foreground: var(--j3m-gray-1);
|
|
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 */
|
|
333
|
+
--accent-foreground: var(--j3m-gray-1);
|
|
334
|
+
--destructive: var(--j3m-red-10);
|
|
283
335
|
--destructive-foreground: #FFFFFF;
|
|
284
|
-
--
|
|
285
|
-
--
|
|
286
|
-
--
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
--
|
|
290
|
-
--
|
|
291
|
-
--
|
|
292
|
-
--
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
--sidebar: var(--j3m-
|
|
296
|
-
--sidebar-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
--
|
|
301
|
-
--
|
|
302
|
-
--
|
|
336
|
+
--border: var(--j3m-gray-11);
|
|
337
|
+
--input: var(--j3m-gray-11);
|
|
338
|
+
--ring: var(--j3m-orange-8);
|
|
339
|
+
|
|
340
|
+
/* Sidebar & Topbar (uses --sidebar token) */
|
|
341
|
+
--sidebar: var(--j3m-gray-13);
|
|
342
|
+
--sidebar-foreground: var(--j3m-gray-1);
|
|
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);
|
|
303
368
|
}
|
|
304
369
|
|
|
305
370
|
/* ========================================
|
|
@@ -309,27 +374,63 @@
|
|
|
309
374
|
|
|
310
375
|
.theme-solid,
|
|
311
376
|
:root:not(.theme-glass) {
|
|
312
|
-
/* Surface tokens for solid mode */
|
|
313
|
-
--surface-bg: var(--
|
|
314
|
-
--surface-border: var(--
|
|
315
|
-
--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;
|
|
316
381
|
--surface-radius: var(--j3m-radius-l);
|
|
317
382
|
--surface-blur: 0px;
|
|
318
383
|
|
|
319
|
-
/* Overlay surfaces (dialogs, popovers, etc) */
|
|
320
|
-
--overlay-bg: var(--
|
|
321
|
-
--overlay-border: var(--
|
|
322
|
-
--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);
|
|
323
388
|
--overlay-blur: 0px;
|
|
324
389
|
}
|
|
325
390
|
|
|
326
391
|
/* ========================================
|
|
327
|
-
THEME MODE: GLASS
|
|
328
|
-
Frosted translucent surfaces
|
|
392
|
+
THEME MODE: GLASS (Light)
|
|
393
|
+
Frosted translucent surfaces on colorful gradient
|
|
329
394
|
======================================== */
|
|
330
395
|
|
|
331
396
|
.theme-glass {
|
|
332
|
-
/*
|
|
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 */
|
|
333
434
|
--surface-bg: var(--j3m-glass-light-40);
|
|
334
435
|
--surface-border: var(--j3m-glass-border-white);
|
|
335
436
|
--surface-shadow: var(--j3m-glass-shadow-md);
|
|
@@ -340,20 +441,90 @@
|
|
|
340
441
|
--overlay-bg: var(--j3m-glass-light-70);
|
|
341
442
|
--overlay-border: var(--j3m-glass-border-light);
|
|
342
443
|
--overlay-shadow: var(--j3m-glass-shadow-lg);
|
|
343
|
-
--overlay-blur: var(--j3m-blur-
|
|
444
|
+
--overlay-blur: var(--j3m-blur-lg);
|
|
344
445
|
|
|
345
|
-
/*
|
|
446
|
+
/* Shadcn overrides for glass */
|
|
346
447
|
--input-bg: var(--j3m-glass-light-50);
|
|
347
448
|
--card: var(--j3m-glass-light-50);
|
|
348
449
|
--popover: var(--j3m-glass-light-70);
|
|
349
450
|
}
|
|
350
451
|
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
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);
|
|
357
528
|
}
|
|
358
529
|
|
|
359
530
|
/* ========================================
|
|
@@ -367,17 +538,35 @@
|
|
|
367
538
|
--card: var(--j3m-glass-light-70);
|
|
368
539
|
--popover: var(--j3m-glass-light-80);
|
|
369
540
|
--muted: var(--j3m-glass-light-50);
|
|
370
|
-
--
|
|
541
|
+
--muted-foreground: rgba(0, 0, 0, 0.55);
|
|
542
|
+
--secondary: var(--j3m-glass-light-80);
|
|
371
543
|
--border: var(--j3m-glass-border-light);
|
|
372
544
|
}
|
|
373
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);
|
|
559
|
+
}
|
|
560
|
+
|
|
374
561
|
/* ========================================
|
|
375
562
|
TAILWIND THEME MAPPING
|
|
376
563
|
@theme inline for Tailwind v4
|
|
377
564
|
======================================== */
|
|
378
565
|
|
|
379
566
|
@theme inline {
|
|
380
|
-
/*
|
|
567
|
+
/* ========================================
|
|
568
|
+
SEMANTIC COLORS (J3M Design System)
|
|
569
|
+
======================================== */
|
|
381
570
|
--color-background: var(--background);
|
|
382
571
|
--color-foreground: var(--foreground);
|
|
383
572
|
--color-card: var(--card);
|
|
@@ -415,13 +604,310 @@
|
|
|
415
604
|
--color-sidebar-border: var(--sidebar-border);
|
|
416
605
|
--color-sidebar-ring: var(--sidebar-ring);
|
|
417
606
|
|
|
418
|
-
/*
|
|
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
|
+
======================================== */
|
|
419
906
|
--radius-sm: calc(var(--radius) - 4px);
|
|
420
907
|
--radius-md: calc(var(--radius) - 2px);
|
|
421
908
|
--radius-lg: var(--radius);
|
|
422
909
|
--radius-xl: calc(var(--radius) + 4px);
|
|
423
910
|
|
|
424
|
-
/* Shadows */
|
|
425
911
|
--shadow-sm: var(--shadow-sm);
|
|
426
912
|
--shadow: var(--shadow);
|
|
427
913
|
--shadow-md: var(--shadow-md);
|
|
@@ -444,22 +930,6 @@
|
|
|
444
930
|
}
|
|
445
931
|
}
|
|
446
932
|
|
|
447
|
-
/* ========================================
|
|
448
|
-
GLASS CONTEXT
|
|
449
|
-
Apply when inside a glass container
|
|
450
|
-
======================================== */
|
|
451
|
-
|
|
452
|
-
.glass-context {
|
|
453
|
-
--background: rgba(255, 255, 255, 0.8);
|
|
454
|
-
--input: rgba(255, 255, 255, 0.3);
|
|
455
|
-
--card: rgba(255, 255, 255, 0.8);
|
|
456
|
-
--popover: rgba(255, 255, 255, 0.85);
|
|
457
|
-
--muted: rgba(255, 255, 255, 0.6);
|
|
458
|
-
--muted-foreground: rgba(0, 0, 0, 0.55);
|
|
459
|
-
--secondary: rgba(255, 255, 255, 0.8);
|
|
460
|
-
--border: rgba(255, 255, 255, 0.3);
|
|
461
|
-
}
|
|
462
|
-
|
|
463
933
|
/* ========================================
|
|
464
934
|
COMPONENT-LEVEL OVERRIDES
|
|
465
935
|
Pill shapes for J3M design
|
|
@@ -550,6 +1020,66 @@ textarea,
|
|
|
550
1020
|
border-radius: 9999px !important;
|
|
551
1021
|
}
|
|
552
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
|
+
|
|
553
1083
|
/* ========================================
|
|
554
1084
|
GLASS UTILITY CLASSES
|
|
555
1085
|
======================================== */
|
|
@@ -558,7 +1088,7 @@ textarea,
|
|
|
558
1088
|
background: var(--j3m-glass-light-subtle);
|
|
559
1089
|
backdrop-filter: blur(var(--j3m-blur-lg));
|
|
560
1090
|
-webkit-backdrop-filter: blur(var(--j3m-blur-lg));
|
|
561
|
-
border: 1px solid var(--j3m-
|
|
1091
|
+
border: 1px solid var(--j3m-glass-border-white);
|
|
562
1092
|
box-shadow: var(--j3m-glass-shadow-lg);
|
|
563
1093
|
}
|
|
564
1094
|
|
|
@@ -566,7 +1096,7 @@ textarea,
|
|
|
566
1096
|
background: var(--j3m-glass-dark);
|
|
567
1097
|
backdrop-filter: blur(var(--j3m-blur-md));
|
|
568
1098
|
-webkit-backdrop-filter: blur(var(--j3m-blur-md));
|
|
569
|
-
border: 1px solid var(--j3m-
|
|
1099
|
+
border: 1px solid var(--j3m-glass-border-subtle);
|
|
570
1100
|
box-shadow: var(--j3m-glass-shadow-lg);
|
|
571
1101
|
}
|
|
572
1102
|
|
|
@@ -574,7 +1104,7 @@ textarea,
|
|
|
574
1104
|
background: var(--j3m-glass-neutral-subtle);
|
|
575
1105
|
backdrop-filter: blur(var(--j3m-blur-lg));
|
|
576
1106
|
-webkit-backdrop-filter: blur(var(--j3m-blur-lg));
|
|
577
|
-
border: 1px solid var(--j3m-
|
|
1107
|
+
border: 1px solid var(--j3m-glass-primary);
|
|
578
1108
|
box-shadow: var(--j3m-glass-shadow-lg);
|
|
579
1109
|
}
|
|
580
1110
|
|
|
@@ -582,7 +1112,7 @@ textarea,
|
|
|
582
1112
|
background: var(--j3m-glass-primary);
|
|
583
1113
|
backdrop-filter: blur(var(--j3m-blur-sm));
|
|
584
1114
|
-webkit-backdrop-filter: blur(var(--j3m-blur-sm));
|
|
585
|
-
border: 1px solid
|
|
1115
|
+
border: 1px solid rgba(0, 0, 0, 0.1);
|
|
586
1116
|
box-shadow: var(--j3m-glass-shadow-glow);
|
|
587
1117
|
}
|
|
588
1118
|
|
|
@@ -652,7 +1182,7 @@ textarea,
|
|
|
652
1182
|
.glass-context [data-slot="input"]:focus-visible,
|
|
653
1183
|
.glass-context textarea:focus-visible,
|
|
654
1184
|
.glass-context [data-slot="textarea"]:focus-visible {
|
|
655
|
-
border-color: var(--j3m-
|
|
1185
|
+
border-color: var(--j3m-orange-9) !important;
|
|
656
1186
|
--color-ring: rgba(243, 108, 33, 0.3);
|
|
657
1187
|
box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.3) !important;
|
|
658
1188
|
}
|
|
@@ -672,7 +1202,7 @@ textarea,
|
|
|
672
1202
|
.glass-context [data-slot="select-trigger"]:focus,
|
|
673
1203
|
.glass-context [data-slot="select-trigger"]:focus-visible,
|
|
674
1204
|
.glass-context [data-slot="select-trigger"][data-state="open"] {
|
|
675
|
-
border-color: var(--j3m-
|
|
1205
|
+
border-color: var(--j3m-orange-9) !important;
|
|
676
1206
|
--color-ring: rgba(243, 108, 33, 0.3);
|
|
677
1207
|
box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.3) !important;
|
|
678
1208
|
}
|
|
@@ -689,7 +1219,7 @@ textarea,
|
|
|
689
1219
|
|
|
690
1220
|
.glass-context select:focus,
|
|
691
1221
|
.glass-context [data-slot="native-select"]:focus {
|
|
692
|
-
border-color: var(--j3m-
|
|
1222
|
+
border-color: var(--j3m-orange-9) !important;
|
|
693
1223
|
--color-ring: rgba(243, 108, 33, 0.3);
|
|
694
1224
|
box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.3) !important;
|
|
695
1225
|
}
|
|
@@ -698,7 +1228,7 @@ textarea,
|
|
|
698
1228
|
/* Default button hover in glass */
|
|
699
1229
|
.glass-context [data-slot="button"][data-variant="default"]:hover,
|
|
700
1230
|
.glass-context [data-slot="button"]:not([data-variant]):hover {
|
|
701
|
-
background: var(--j3m-
|
|
1231
|
+
background: var(--j3m-orange-10) !important;
|
|
702
1232
|
}
|
|
703
1233
|
|
|
704
1234
|
/* Outline/Secondary/Ghost buttons - white fill, dark border */
|
|
@@ -710,13 +1240,13 @@ textarea,
|
|
|
710
1240
|
color: rgba(0, 0, 0, 0.8) !important;
|
|
711
1241
|
}
|
|
712
1242
|
|
|
713
|
-
/* Button hover:
|
|
1243
|
+
/* Button hover: grey to match solid mode */
|
|
714
1244
|
.glass-context [data-slot="button"][data-variant="outline"]:hover,
|
|
715
1245
|
.glass-context [data-slot="button"][data-variant="secondary"]:hover,
|
|
716
1246
|
.glass-context [data-slot="button"][data-variant="ghost"]:hover {
|
|
717
|
-
background: var(--
|
|
718
|
-
border-color: var(--
|
|
719
|
-
color:
|
|
1247
|
+
background: var(--accent) !important;
|
|
1248
|
+
border-color: var(--accent) !important;
|
|
1249
|
+
color: var(--accent-foreground) !important;
|
|
720
1250
|
}
|
|
721
1251
|
|
|
722
1252
|
/* --- RADIO BUTTONS --- */
|
|
@@ -729,12 +1259,12 @@ textarea,
|
|
|
729
1259
|
.glass-context [data-slot="radio-group-item"][data-state="checked"],
|
|
730
1260
|
.glass-context [role="radio"][data-state="checked"] {
|
|
731
1261
|
background: rgba(255, 255, 255, 0.8) !important;
|
|
732
|
-
border-color: var(--j3m-
|
|
1262
|
+
border-color: var(--j3m-orange-9) !important;
|
|
733
1263
|
}
|
|
734
1264
|
|
|
735
1265
|
.glass-context [data-slot="radio-group-item"][data-state="checked"] span,
|
|
736
1266
|
.glass-context [role="radio"][data-state="checked"] span {
|
|
737
|
-
background: var(--j3m-
|
|
1267
|
+
background: var(--j3m-orange-9) !important;
|
|
738
1268
|
}
|
|
739
1269
|
|
|
740
1270
|
/* --- CHECKBOX --- */
|
|
@@ -746,8 +1276,8 @@ textarea,
|
|
|
746
1276
|
|
|
747
1277
|
.glass-context [data-slot="checkbox"][data-state="checked"],
|
|
748
1278
|
.glass-context [role="checkbox"][data-state="checked"] {
|
|
749
|
-
background: var(--j3m-
|
|
750
|
-
border-color: var(--j3m-
|
|
1279
|
+
background: var(--j3m-orange-9) !important;
|
|
1280
|
+
border-color: var(--j3m-orange-9) !important;
|
|
751
1281
|
}
|
|
752
1282
|
|
|
753
1283
|
/* --- SWITCH --- */
|
|
@@ -759,8 +1289,8 @@ textarea,
|
|
|
759
1289
|
|
|
760
1290
|
.glass-context [data-slot="switch"][data-state="checked"],
|
|
761
1291
|
.glass-context [role="switch"][data-state="checked"] {
|
|
762
|
-
background: var(--
|
|
763
|
-
border-color: var(--
|
|
1292
|
+
background: var(--primary) !important;
|
|
1293
|
+
border-color: var(--primary) !important;
|
|
764
1294
|
}
|
|
765
1295
|
|
|
766
1296
|
/* Switch thumb - always white */
|
|
@@ -882,80 +1412,91 @@ textarea,
|
|
|
882
1412
|
}
|
|
883
1413
|
|
|
884
1414
|
/* --- NAVIGATION MENU --- */
|
|
885
|
-
/*
|
|
886
|
-
[data-slot="navigation-menu-link"]:hover,
|
|
887
|
-
[data-slot="navigation-menu-link"]:focus {
|
|
888
|
-
background: linear-gradient(135deg, var(--j3m-
|
|
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;
|
|
889
1419
|
color: #FFFFFF !important;
|
|
890
1420
|
}
|
|
891
1421
|
|
|
892
|
-
[data-slot="navigation-menu-link"]:hover *,
|
|
893
|
-
[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 * {
|
|
894
1424
|
color: #FFFFFF !important;
|
|
895
1425
|
}
|
|
896
1426
|
|
|
897
|
-
/*
|
|
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 */
|
|
898
1440
|
.glass-context [data-slot="navigation-menu-content"] a:hover,
|
|
899
1441
|
.glass-context [data-slot="navigation-menu-content"] a:focus {
|
|
900
|
-
background: var(--
|
|
901
|
-
color:
|
|
1442
|
+
background: var(--accent) !important;
|
|
1443
|
+
color: var(--accent-foreground) !important;
|
|
902
1444
|
}
|
|
903
1445
|
|
|
904
1446
|
.glass-context [data-slot="navigation-menu-content"] a:hover *,
|
|
905
1447
|
.glass-context [data-slot="navigation-menu-content"] a:focus * {
|
|
906
|
-
color:
|
|
1448
|
+
color: var(--accent-foreground) !important;
|
|
907
1449
|
}
|
|
908
1450
|
|
|
909
1451
|
/* --- MENUBAR --- */
|
|
910
1452
|
.glass-context [data-slot="menubar"] {
|
|
911
|
-
background:
|
|
912
|
-
border: 1px solid
|
|
1453
|
+
background: var(--sidebar) !important;
|
|
1454
|
+
border: 1px solid var(--sidebar-border) !important;
|
|
913
1455
|
border-radius: var(--j3m-radius-l) !important;
|
|
914
1456
|
}
|
|
915
1457
|
|
|
916
1458
|
.glass-context [data-slot="menubar-trigger"] {
|
|
917
|
-
color:
|
|
1459
|
+
color: var(--sidebar-foreground) !important;
|
|
918
1460
|
}
|
|
919
1461
|
|
|
920
1462
|
.glass-context [data-slot="menubar-trigger"]:hover,
|
|
921
1463
|
.glass-context [data-slot="menubar-trigger"][data-state="open"] {
|
|
922
|
-
background: var(--
|
|
923
|
-
color:
|
|
1464
|
+
background: var(--accent) !important;
|
|
1465
|
+
color: var(--accent-foreground) !important;
|
|
924
1466
|
}
|
|
925
1467
|
|
|
926
1468
|
.glass-context [data-slot="menubar-content"] {
|
|
927
|
-
background:
|
|
928
|
-
|
|
929
|
-
border: 1px solid rgba(0, 0, 0, 0.15) !important;
|
|
1469
|
+
background: var(--sidebar) !important;
|
|
1470
|
+
border: 1px solid var(--sidebar-border) !important;
|
|
930
1471
|
}
|
|
931
1472
|
|
|
932
1473
|
.glass-context [data-slot="menubar-item"]:hover,
|
|
933
1474
|
.glass-context [data-slot="menubar-item"]:focus {
|
|
934
|
-
background: var(--
|
|
935
|
-
color:
|
|
1475
|
+
background: var(--accent) !important;
|
|
1476
|
+
color: var(--accent-foreground) !important;
|
|
936
1477
|
}
|
|
937
1478
|
|
|
938
1479
|
/* --- TABS --- */
|
|
939
1480
|
.glass-context [data-slot="tabs-list"] {
|
|
940
|
-
background:
|
|
1481
|
+
background: var(--muted) !important;
|
|
941
1482
|
}
|
|
942
1483
|
|
|
943
1484
|
.glass-context [data-slot="tabs-trigger"] {
|
|
944
|
-
color:
|
|
1485
|
+
color: var(--muted-foreground) !important;
|
|
945
1486
|
}
|
|
946
1487
|
|
|
947
1488
|
.glass-context [data-slot="tabs-trigger"][data-state="active"] {
|
|
948
|
-
background:
|
|
949
|
-
color:
|
|
1489
|
+
background: var(--sidebar) !important;
|
|
1490
|
+
color: var(--sidebar-foreground) !important;
|
|
950
1491
|
}
|
|
951
1492
|
|
|
952
1493
|
/* --- ACCORDION --- */
|
|
953
1494
|
.glass-context [data-slot="accordion-item"] {
|
|
954
|
-
border-color:
|
|
1495
|
+
border-color: var(--sidebar-border) !important;
|
|
955
1496
|
}
|
|
956
1497
|
|
|
957
1498
|
.glass-context [data-slot="accordion-trigger"] {
|
|
958
|
-
color:
|
|
1499
|
+
color: var(--sidebar-foreground) !important;
|
|
959
1500
|
}
|
|
960
1501
|
|
|
961
1502
|
/* --- SLIDER --- */
|
|
@@ -964,62 +1505,74 @@ textarea,
|
|
|
964
1505
|
}
|
|
965
1506
|
|
|
966
1507
|
.glass-context [data-slot="slider-range"] {
|
|
967
|
-
background: var(--
|
|
1508
|
+
background: var(--primary) !important;
|
|
968
1509
|
}
|
|
969
1510
|
|
|
970
1511
|
.glass-context [data-slot="slider-thumb"] {
|
|
971
1512
|
background: #FFFFFF !important;
|
|
972
|
-
border-color: var(--
|
|
1513
|
+
border-color: var(--primary) !important;
|
|
973
1514
|
}
|
|
974
1515
|
|
|
975
1516
|
/* --- TOGGLE / TOGGLE GROUP --- */
|
|
976
1517
|
.glass-context [data-slot="toggle"],
|
|
977
1518
|
.glass-context [data-slot="toggle-group-item"] {
|
|
978
|
-
background:
|
|
979
|
-
border-color:
|
|
980
|
-
color:
|
|
1519
|
+
background: var(--sidebar) !important;
|
|
1520
|
+
border-color: var(--sidebar-border) !important;
|
|
1521
|
+
color: var(--sidebar-foreground) !important;
|
|
981
1522
|
}
|
|
982
1523
|
|
|
983
1524
|
.glass-context [data-slot="toggle"][data-state="on"],
|
|
984
1525
|
.glass-context [data-slot="toggle-group-item"][data-state="on"] {
|
|
985
|
-
background: var(--
|
|
986
|
-
border-color: var(--
|
|
1526
|
+
background: var(--primary) !important;
|
|
1527
|
+
border-color: var(--primary) !important;
|
|
987
1528
|
color: #FFFFFF !important;
|
|
988
1529
|
}
|
|
989
1530
|
|
|
990
1531
|
.glass-context [data-slot="toggle"]:hover,
|
|
991
1532
|
.glass-context [data-slot="toggle-group-item"]:hover {
|
|
992
|
-
background: var(--
|
|
993
|
-
border-color: var(--
|
|
994
|
-
color:
|
|
1533
|
+
background: var(--accent) !important;
|
|
1534
|
+
border-color: var(--accent) !important;
|
|
1535
|
+
color: var(--accent-foreground) !important;
|
|
995
1536
|
}
|
|
996
1537
|
|
|
997
1538
|
/* --- DROPDOWN MENU --- */
|
|
998
1539
|
.glass-context [data-slot="dropdown-menu-content"],
|
|
999
1540
|
.glass-context [role="menu"] {
|
|
1000
|
-
background:
|
|
1001
|
-
|
|
1002
|
-
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
1541
|
+
background: var(--sidebar) !important;
|
|
1542
|
+
border-color: var(--sidebar-border) !important;
|
|
1003
1543
|
}
|
|
1004
1544
|
|
|
1005
1545
|
.glass-context [data-slot="dropdown-menu-item"],
|
|
1006
1546
|
.glass-context [role="menuitem"] {
|
|
1007
|
-
color:
|
|
1547
|
+
color: var(--sidebar-foreground) !important;
|
|
1008
1548
|
}
|
|
1009
1549
|
|
|
1010
1550
|
.glass-context [data-slot="dropdown-menu-item"]:hover,
|
|
1011
1551
|
.glass-context [role="menuitem"]:hover,
|
|
1012
1552
|
.glass-context [data-slot="dropdown-menu-item"]:focus,
|
|
1013
1553
|
.glass-context [role="menuitem"]:focus {
|
|
1014
|
-
background: var(--
|
|
1015
|
-
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;
|
|
1016
1570
|
}
|
|
1017
1571
|
|
|
1018
1572
|
/* --- POPOVER --- */
|
|
1019
1573
|
.glass-context [data-slot="popover-content"] {
|
|
1020
|
-
background:
|
|
1021
|
-
|
|
1022
|
-
border-color: rgba(0, 0, 0, 0.15) !important;
|
|
1574
|
+
background: var(--sidebar) !important;
|
|
1575
|
+
border-color: var(--sidebar-border) !important;
|
|
1023
1576
|
}
|
|
1024
1577
|
|
|
1025
1578
|
/* --- TOOLTIP --- */
|
|
@@ -1034,19 +1587,19 @@ textarea,
|
|
|
1034
1587
|
}
|
|
1035
1588
|
|
|
1036
1589
|
.glass-context [data-slot="progress-indicator"] {
|
|
1037
|
-
background: var(--
|
|
1590
|
+
background: var(--primary) !important;
|
|
1038
1591
|
}
|
|
1039
1592
|
|
|
1040
1593
|
/* --- ALERT --- */
|
|
1041
1594
|
.glass-context [data-slot="alert"] {
|
|
1042
|
-
background:
|
|
1043
|
-
border-color:
|
|
1595
|
+
background: var(--sidebar) !important;
|
|
1596
|
+
border-color: var(--sidebar-border) !important;
|
|
1044
1597
|
}
|
|
1045
1598
|
|
|
1046
1599
|
/* --- SHEET --- */
|
|
1047
1600
|
.glass-context [data-slot="sheet-content"] {
|
|
1048
|
-
background:
|
|
1049
|
-
|
|
1601
|
+
background: var(--sidebar) !important;
|
|
1602
|
+
border-color: var(--sidebar-border) !important;
|
|
1050
1603
|
padding-left: 1.5rem !important;
|
|
1051
1604
|
padding-right: 1.5rem !important;
|
|
1052
1605
|
}
|
|
@@ -1060,8 +1613,8 @@ textarea,
|
|
|
1060
1613
|
|
|
1061
1614
|
/* --- DIALOG --- */
|
|
1062
1615
|
.glass-context [data-slot="dialog-content"] {
|
|
1063
|
-
background:
|
|
1064
|
-
|
|
1616
|
+
background: var(--sidebar) !important;
|
|
1617
|
+
border-color: var(--sidebar-border) !important;
|
|
1065
1618
|
}
|
|
1066
1619
|
|
|
1067
1620
|
/* --- COMMAND / SEARCH INPUT --- */
|
|
@@ -1079,8 +1632,8 @@ textarea,
|
|
|
1079
1632
|
}
|
|
1080
1633
|
|
|
1081
1634
|
.glass-context [data-slot="command-input-wrapper"] {
|
|
1082
|
-
background:
|
|
1083
|
-
border: 1px solid
|
|
1635
|
+
background: var(--sidebar) !important;
|
|
1636
|
+
border: 1px solid var(--sidebar-border) !important;
|
|
1084
1637
|
border-radius: var(--j3m-radius-full) !important;
|
|
1085
1638
|
padding-left: 1rem !important;
|
|
1086
1639
|
padding-right: 1rem !important;
|
|
@@ -1088,21 +1641,21 @@ textarea,
|
|
|
1088
1641
|
|
|
1089
1642
|
.glass-context [data-slot="command-input"] {
|
|
1090
1643
|
background: transparent !important;
|
|
1091
|
-
color:
|
|
1644
|
+
color: var(--sidebar-foreground) !important;
|
|
1092
1645
|
}
|
|
1093
1646
|
|
|
1094
1647
|
.glass-context [data-slot="command-input"]::placeholder {
|
|
1095
|
-
color:
|
|
1648
|
+
color: var(--muted-foreground) !important;
|
|
1096
1649
|
}
|
|
1097
1650
|
|
|
1098
1651
|
.glass-context [data-slot="command-input-wrapper"]:focus-within {
|
|
1099
|
-
border-color: var(--j3m-
|
|
1652
|
+
border-color: var(--j3m-orange-9) !important;
|
|
1100
1653
|
box-shadow: 0 0 0 3px rgba(243, 108, 33, 0.2) !important;
|
|
1101
1654
|
}
|
|
1102
1655
|
|
|
1103
1656
|
.glass-context [data-slot="command-list"] {
|
|
1104
|
-
background:
|
|
1105
|
-
border: 1px solid
|
|
1657
|
+
background: var(--sidebar) !important;
|
|
1658
|
+
border: 1px solid var(--sidebar-border) !important;
|
|
1106
1659
|
border-radius: var(--j3m-radius-l) !important;
|
|
1107
1660
|
margin-top: 0.25rem !important;
|
|
1108
1661
|
}
|
|
@@ -1112,35 +1665,48 @@ textarea,
|
|
|
1112
1665
|
}
|
|
1113
1666
|
|
|
1114
1667
|
.glass-context [data-slot="command-item"] {
|
|
1115
|
-
color:
|
|
1668
|
+
color: var(--sidebar-foreground) !important;
|
|
1116
1669
|
}
|
|
1117
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;
|
|
1676
|
+
}
|
|
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 */
|
|
1118
1684
|
.glass-context [data-slot="command-item"][data-selected=true] {
|
|
1119
|
-
background: var(--
|
|
1120
|
-
color:
|
|
1685
|
+
background: var(--accent) !important;
|
|
1686
|
+
color: var(--accent-foreground) !important;
|
|
1121
1687
|
}
|
|
1122
1688
|
|
|
1123
1689
|
.glass-context [data-slot="command-item"][data-selected=true] svg {
|
|
1124
|
-
color:
|
|
1690
|
+
color: var(--accent-foreground) !important;
|
|
1125
1691
|
}
|
|
1126
1692
|
|
|
1127
1693
|
.glass-context [data-slot="command-separator"] {
|
|
1128
|
-
background:
|
|
1694
|
+
background: var(--sidebar-border) !important;
|
|
1129
1695
|
}
|
|
1130
1696
|
|
|
1131
1697
|
/* --- SCROLL AREA --- */
|
|
1132
1698
|
.glass-context [data-slot="scroll-area"] {
|
|
1133
|
-
background:
|
|
1134
|
-
border: 1px solid
|
|
1699
|
+
background: var(--sidebar) !important;
|
|
1700
|
+
border: 1px solid var(--sidebar-border) !important;
|
|
1135
1701
|
border-radius: var(--radius) !important;
|
|
1136
1702
|
}
|
|
1137
1703
|
|
|
1138
1704
|
.glass-context [data-slot="scroll-area-thumb"] {
|
|
1139
|
-
background: rgba(0, 0, 0, 0.
|
|
1705
|
+
background: rgba(0, 0, 0, 0.15) !important;
|
|
1140
1706
|
}
|
|
1141
1707
|
|
|
1142
1708
|
.glass-context [data-slot="scroll-area-thumb"]:hover {
|
|
1143
|
-
background: rgba(0, 0, 0, 0.
|
|
1709
|
+
background: rgba(0, 0, 0, 0.25) !important;
|
|
1144
1710
|
}
|
|
1145
1711
|
|
|
1146
1712
|
/* --- COLLAPSIBLE --- */
|
|
@@ -1174,6 +1740,397 @@ textarea,
|
|
|
1174
1740
|
pointer-events: none;
|
|
1175
1741
|
}
|
|
1176
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;
|
|
2132
|
+
}
|
|
2133
|
+
|
|
1177
2134
|
/* ========================================
|
|
1178
2135
|
TOAST/SONNER POSITIONING
|
|
1179
2136
|
Position toasts at top-center of screen
|
|
@@ -1196,10 +2153,9 @@ textarea,
|
|
|
1196
2153
|
/* Glass mode toast styling */
|
|
1197
2154
|
.glass-context [data-sonner-toast],
|
|
1198
2155
|
.glass-context .sonner-toast {
|
|
1199
|
-
background:
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
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;
|
|
1203
2159
|
}
|
|
1204
2160
|
|
|
1205
2161
|
/* ========================================
|