@j3m-quantum/ui 0.2.0 → 0.4.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.
|
@@ -0,0 +1,370 @@
|
|
|
1
|
+
/* ========================================
|
|
2
|
+
SHADCN ANIMATIONS
|
|
3
|
+
|
|
4
|
+
All animation keyframes required by shadcn components.
|
|
5
|
+
Based on tw-animate-css / tailwindcss-animate.
|
|
6
|
+
======================================== */
|
|
7
|
+
|
|
8
|
+
/* ========================================
|
|
9
|
+
ACCORDION ANIMATIONS
|
|
10
|
+
======================================== */
|
|
11
|
+
|
|
12
|
+
@keyframes accordion-down {
|
|
13
|
+
from {
|
|
14
|
+
height: 0;
|
|
15
|
+
}
|
|
16
|
+
to {
|
|
17
|
+
height: var(--radix-accordion-content-height);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@keyframes accordion-up {
|
|
22
|
+
from {
|
|
23
|
+
height: var(--radix-accordion-content-height);
|
|
24
|
+
}
|
|
25
|
+
to {
|
|
26
|
+
height: 0;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* ========================================
|
|
31
|
+
COLLAPSIBLE ANIMATIONS
|
|
32
|
+
======================================== */
|
|
33
|
+
|
|
34
|
+
@keyframes collapsible-down {
|
|
35
|
+
from {
|
|
36
|
+
height: 0;
|
|
37
|
+
}
|
|
38
|
+
to {
|
|
39
|
+
height: var(--radix-collapsible-content-height);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
@keyframes collapsible-up {
|
|
44
|
+
from {
|
|
45
|
+
height: var(--radix-collapsible-content-height);
|
|
46
|
+
}
|
|
47
|
+
to {
|
|
48
|
+
height: 0;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* ========================================
|
|
53
|
+
FADE ANIMATIONS
|
|
54
|
+
======================================== */
|
|
55
|
+
|
|
56
|
+
@keyframes fade-in {
|
|
57
|
+
from {
|
|
58
|
+
opacity: 0;
|
|
59
|
+
}
|
|
60
|
+
to {
|
|
61
|
+
opacity: 1;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@keyframes fade-out {
|
|
66
|
+
from {
|
|
67
|
+
opacity: 1;
|
|
68
|
+
}
|
|
69
|
+
to {
|
|
70
|
+
opacity: 0;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* ========================================
|
|
75
|
+
ZOOM ANIMATIONS
|
|
76
|
+
======================================== */
|
|
77
|
+
|
|
78
|
+
@keyframes zoom-in {
|
|
79
|
+
from {
|
|
80
|
+
opacity: 0;
|
|
81
|
+
transform: scale(0.95);
|
|
82
|
+
}
|
|
83
|
+
to {
|
|
84
|
+
opacity: 1;
|
|
85
|
+
transform: scale(1);
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
@keyframes zoom-out {
|
|
90
|
+
from {
|
|
91
|
+
opacity: 1;
|
|
92
|
+
transform: scale(1);
|
|
93
|
+
}
|
|
94
|
+
to {
|
|
95
|
+
opacity: 0;
|
|
96
|
+
transform: scale(0.95);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
/* ========================================
|
|
101
|
+
SLIDE ANIMATIONS
|
|
102
|
+
======================================== */
|
|
103
|
+
|
|
104
|
+
@keyframes slide-in-from-top {
|
|
105
|
+
from {
|
|
106
|
+
transform: translateY(-100%);
|
|
107
|
+
}
|
|
108
|
+
to {
|
|
109
|
+
transform: translateY(0);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
@keyframes slide-in-from-bottom {
|
|
114
|
+
from {
|
|
115
|
+
transform: translateY(100%);
|
|
116
|
+
}
|
|
117
|
+
to {
|
|
118
|
+
transform: translateY(0);
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
@keyframes slide-in-from-left {
|
|
123
|
+
from {
|
|
124
|
+
transform: translateX(-100%);
|
|
125
|
+
}
|
|
126
|
+
to {
|
|
127
|
+
transform: translateX(0);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
@keyframes slide-in-from-right {
|
|
132
|
+
from {
|
|
133
|
+
transform: translateX(100%);
|
|
134
|
+
}
|
|
135
|
+
to {
|
|
136
|
+
transform: translateX(0);
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
@keyframes slide-out-to-top {
|
|
141
|
+
from {
|
|
142
|
+
transform: translateY(0);
|
|
143
|
+
}
|
|
144
|
+
to {
|
|
145
|
+
transform: translateY(-100%);
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
@keyframes slide-out-to-bottom {
|
|
150
|
+
from {
|
|
151
|
+
transform: translateY(0);
|
|
152
|
+
}
|
|
153
|
+
to {
|
|
154
|
+
transform: translateY(100%);
|
|
155
|
+
}
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
@keyframes slide-out-to-left {
|
|
159
|
+
from {
|
|
160
|
+
transform: translateX(0);
|
|
161
|
+
}
|
|
162
|
+
to {
|
|
163
|
+
transform: translateX(-100%);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
@keyframes slide-out-to-right {
|
|
168
|
+
from {
|
|
169
|
+
transform: translateX(0);
|
|
170
|
+
}
|
|
171
|
+
to {
|
|
172
|
+
transform: translateX(100%);
|
|
173
|
+
}
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
/* ========================================
|
|
177
|
+
SPIN ANIMATION
|
|
178
|
+
======================================== */
|
|
179
|
+
|
|
180
|
+
@keyframes spin {
|
|
181
|
+
from {
|
|
182
|
+
transform: rotate(0deg);
|
|
183
|
+
}
|
|
184
|
+
to {
|
|
185
|
+
transform: rotate(360deg);
|
|
186
|
+
}
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
/* ========================================
|
|
190
|
+
PING ANIMATION
|
|
191
|
+
======================================== */
|
|
192
|
+
|
|
193
|
+
@keyframes ping {
|
|
194
|
+
75%, 100% {
|
|
195
|
+
transform: scale(2);
|
|
196
|
+
opacity: 0;
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
/* ========================================
|
|
201
|
+
PULSE ANIMATION
|
|
202
|
+
======================================== */
|
|
203
|
+
|
|
204
|
+
@keyframes pulse {
|
|
205
|
+
0%, 100% {
|
|
206
|
+
opacity: 1;
|
|
207
|
+
}
|
|
208
|
+
50% {
|
|
209
|
+
opacity: 0.5;
|
|
210
|
+
}
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
/* ========================================
|
|
214
|
+
BOUNCE ANIMATION
|
|
215
|
+
======================================== */
|
|
216
|
+
|
|
217
|
+
@keyframes bounce {
|
|
218
|
+
0%, 100% {
|
|
219
|
+
transform: translateY(-25%);
|
|
220
|
+
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
|
221
|
+
}
|
|
222
|
+
50% {
|
|
223
|
+
transform: translateY(0);
|
|
224
|
+
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/* ========================================
|
|
229
|
+
ANIMATION UTILITIES
|
|
230
|
+
======================================== */
|
|
231
|
+
|
|
232
|
+
.animate-accordion-down {
|
|
233
|
+
animation: accordion-down 0.2s ease-out;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.animate-accordion-up {
|
|
237
|
+
animation: accordion-up 0.2s ease-out;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.animate-collapsible-down {
|
|
241
|
+
animation: collapsible-down 0.2s ease-out;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.animate-collapsible-up {
|
|
245
|
+
animation: collapsible-up 0.2s ease-out;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.animate-fade-in {
|
|
249
|
+
animation: fade-in 0.2s ease-out;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
.animate-fade-out {
|
|
253
|
+
animation: fade-out 0.2s ease-out;
|
|
254
|
+
}
|
|
255
|
+
|
|
256
|
+
.animate-zoom-in {
|
|
257
|
+
animation: zoom-in 0.2s ease-out;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.animate-zoom-out {
|
|
261
|
+
animation: zoom-out 0.2s ease-out;
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
.animate-spin {
|
|
265
|
+
animation: spin 1s linear infinite;
|
|
266
|
+
}
|
|
267
|
+
|
|
268
|
+
.animate-ping {
|
|
269
|
+
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
.animate-pulse {
|
|
273
|
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.animate-bounce {
|
|
277
|
+
animation: bounce 1s infinite;
|
|
278
|
+
}
|
|
279
|
+
|
|
280
|
+
/* ========================================
|
|
281
|
+
ENTER/EXIT ANIMATIONS (for Radix)
|
|
282
|
+
======================================== */
|
|
283
|
+
|
|
284
|
+
[data-state="open"] {
|
|
285
|
+
--tw-enter-opacity: 1;
|
|
286
|
+
--tw-enter-scale: 1;
|
|
287
|
+
--tw-enter-translate-x: 0;
|
|
288
|
+
--tw-enter-translate-y: 0;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
[data-state="closed"] {
|
|
292
|
+
--tw-exit-opacity: 0;
|
|
293
|
+
--tw-exit-scale: 0.95;
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.animate-in {
|
|
297
|
+
animation-name: fade-in, zoom-in;
|
|
298
|
+
animation-duration: 0.2s;
|
|
299
|
+
animation-timing-function: ease-out;
|
|
300
|
+
animation-fill-mode: both;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.animate-out {
|
|
304
|
+
animation-name: fade-out, zoom-out;
|
|
305
|
+
animation-duration: 0.2s;
|
|
306
|
+
animation-timing-function: ease-in;
|
|
307
|
+
animation-fill-mode: both;
|
|
308
|
+
}
|
|
309
|
+
|
|
310
|
+
.fade-in-0 {
|
|
311
|
+
--tw-enter-opacity: 0;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
.fade-out-0 {
|
|
315
|
+
--tw-exit-opacity: 0;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.zoom-in-95 {
|
|
319
|
+
--tw-enter-scale: 0.95;
|
|
320
|
+
}
|
|
321
|
+
|
|
322
|
+
.zoom-out-95 {
|
|
323
|
+
--tw-exit-scale: 0.95;
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
.slide-in-from-top-2 {
|
|
327
|
+
--tw-enter-translate-y: -0.5rem;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
.slide-in-from-bottom-2 {
|
|
331
|
+
--tw-enter-translate-y: 0.5rem;
|
|
332
|
+
}
|
|
333
|
+
|
|
334
|
+
.slide-in-from-left-2 {
|
|
335
|
+
--tw-enter-translate-x: -0.5rem;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.slide-in-from-right-2 {
|
|
339
|
+
--tw-enter-translate-x: 0.5rem;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
.slide-out-to-top-2 {
|
|
343
|
+
--tw-exit-translate-y: -0.5rem;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.slide-out-to-bottom-2 {
|
|
347
|
+
--tw-exit-translate-y: 0.5rem;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.slide-out-to-left-2 {
|
|
351
|
+
--tw-exit-translate-x: -0.5rem;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.slide-out-to-right-2 {
|
|
355
|
+
--tw-exit-translate-x: 0.5rem;
|
|
356
|
+
}
|
|
357
|
+
|
|
358
|
+
/* Duration utilities */
|
|
359
|
+
.duration-200 {
|
|
360
|
+
animation-duration: 200ms;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
.duration-300 {
|
|
364
|
+
animation-duration: 300ms;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.duration-500 {
|
|
368
|
+
animation-duration: 500ms;
|
|
369
|
+
}
|
|
370
|
+
|
|
@@ -1,11 +1,18 @@
|
|
|
1
1
|
/* ========================================
|
|
2
2
|
SHADCN BASE THEME
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
|
|
4
|
+
Base theme variables required by shadcn components.
|
|
5
|
+
This ensures components work without running shadcn init.
|
|
6
|
+
======================================== */
|
|
7
|
+
|
|
8
|
+
@custom-variant dark (&:is(.dark *));
|
|
9
|
+
|
|
10
|
+
/* ========================================
|
|
11
|
+
THEME VARIABLES (Light Mode)
|
|
5
12
|
======================================== */
|
|
6
13
|
|
|
7
14
|
@theme {
|
|
8
|
-
/*
|
|
15
|
+
/* Background & Foreground */
|
|
9
16
|
--color-background: #ffffff;
|
|
10
17
|
--color-foreground: #09090b;
|
|
11
18
|
|
|
@@ -17,9 +24,9 @@
|
|
|
17
24
|
--color-popover: #ffffff;
|
|
18
25
|
--color-popover-foreground: #09090b;
|
|
19
26
|
|
|
20
|
-
/* Primary
|
|
21
|
-
--color-primary:
|
|
22
|
-
--color-primary-foreground: #
|
|
27
|
+
/* Primary */
|
|
28
|
+
--color-primary: #18181b;
|
|
29
|
+
--color-primary-foreground: #fafafa;
|
|
23
30
|
|
|
24
31
|
/* Secondary */
|
|
25
32
|
--color-secondary: #f4f4f5;
|
|
@@ -37,34 +44,34 @@
|
|
|
37
44
|
--color-destructive: #ef4444;
|
|
38
45
|
--color-destructive-foreground: #fafafa;
|
|
39
46
|
|
|
40
|
-
/* Border
|
|
47
|
+
/* Border, Input, Ring */
|
|
41
48
|
--color-border: #e4e4e7;
|
|
42
49
|
--color-input: #e4e4e7;
|
|
43
|
-
--color-ring:
|
|
50
|
+
--color-ring: #18181b;
|
|
44
51
|
|
|
45
52
|
/* Sidebar */
|
|
46
53
|
--color-sidebar: #fafafa;
|
|
47
54
|
--color-sidebar-foreground: #09090b;
|
|
48
|
-
--color-sidebar-primary:
|
|
49
|
-
--color-sidebar-primary-foreground: #
|
|
55
|
+
--color-sidebar-primary: #18181b;
|
|
56
|
+
--color-sidebar-primary-foreground: #fafafa;
|
|
50
57
|
--color-sidebar-accent: #f4f4f5;
|
|
51
58
|
--color-sidebar-accent-foreground: #18181b;
|
|
52
59
|
--color-sidebar-border: #e4e4e7;
|
|
53
|
-
--color-sidebar-ring:
|
|
60
|
+
--color-sidebar-ring: #18181b;
|
|
54
61
|
|
|
55
|
-
/* Chart
|
|
56
|
-
--color-chart-1:
|
|
57
|
-
--color-chart-2:
|
|
58
|
-
--color-chart-3:
|
|
59
|
-
--color-chart-4:
|
|
60
|
-
--color-chart-5:
|
|
62
|
+
/* Chart Colors */
|
|
63
|
+
--color-chart-1: #e76e50;
|
|
64
|
+
--color-chart-2: #2a9d90;
|
|
65
|
+
--color-chart-3: #274754;
|
|
66
|
+
--color-chart-4: #e8c468;
|
|
67
|
+
--color-chart-5: #f4a462;
|
|
61
68
|
|
|
62
|
-
/*
|
|
69
|
+
/* Radius */
|
|
63
70
|
--radius: 0.5rem;
|
|
64
71
|
}
|
|
65
72
|
|
|
66
73
|
/* ========================================
|
|
67
|
-
DARK MODE
|
|
74
|
+
DARK MODE OVERRIDES
|
|
68
75
|
======================================== */
|
|
69
76
|
|
|
70
77
|
.dark {
|
|
@@ -77,7 +84,7 @@
|
|
|
77
84
|
--color-popover: #09090b;
|
|
78
85
|
--color-popover-foreground: #fafafa;
|
|
79
86
|
|
|
80
|
-
--color-primary:
|
|
87
|
+
--color-primary: #fafafa;
|
|
81
88
|
--color-primary-foreground: #18181b;
|
|
82
89
|
|
|
83
90
|
--color-secondary: #27272a;
|
|
@@ -94,30 +101,29 @@
|
|
|
94
101
|
|
|
95
102
|
--color-border: #27272a;
|
|
96
103
|
--color-input: #27272a;
|
|
97
|
-
--color-ring:
|
|
104
|
+
--color-ring: #d4d4d8;
|
|
98
105
|
|
|
99
106
|
--color-sidebar: #09090b;
|
|
100
107
|
--color-sidebar-foreground: #fafafa;
|
|
101
|
-
--color-sidebar-primary:
|
|
108
|
+
--color-sidebar-primary: #fafafa;
|
|
102
109
|
--color-sidebar-primary-foreground: #18181b;
|
|
103
110
|
--color-sidebar-accent: #27272a;
|
|
104
111
|
--color-sidebar-accent-foreground: #fafafa;
|
|
105
112
|
--color-sidebar-border: #27272a;
|
|
106
|
-
--color-sidebar-ring:
|
|
113
|
+
--color-sidebar-ring: #d4d4d8;
|
|
107
114
|
}
|
|
108
115
|
|
|
109
116
|
/* ========================================
|
|
110
|
-
BASE STYLES
|
|
117
|
+
BASE LAYER STYLES
|
|
111
118
|
======================================== */
|
|
112
119
|
|
|
113
120
|
@layer base {
|
|
114
121
|
* {
|
|
115
|
-
border-
|
|
122
|
+
@apply border-border;
|
|
116
123
|
}
|
|
117
124
|
|
|
118
125
|
body {
|
|
119
|
-
background
|
|
120
|
-
color: var(--color-foreground);
|
|
126
|
+
@apply bg-background text-foreground;
|
|
121
127
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
122
128
|
}
|
|
123
129
|
}
|
package/dist/styles/index.css
CHANGED
|
@@ -1,19 +1,26 @@
|
|
|
1
1
|
/* ========================================
|
|
2
|
-
J3M UI STYLES
|
|
2
|
+
J3M QUANTUM UI - COMPLETE STYLES
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
Self-contained styles for J3M UI components.
|
|
5
|
+
No need to run shadcn init - everything is included.
|
|
6
6
|
|
|
7
7
|
Usage:
|
|
8
8
|
@import "tailwindcss";
|
|
9
|
+
@source "../node_modules/@j3m-quantum/ui/dist";
|
|
9
10
|
@import "@j3m-quantum/ui/styles";
|
|
10
11
|
======================================== */
|
|
11
12
|
|
|
12
|
-
/* 1.
|
|
13
|
-
@import "./base
|
|
13
|
+
/* 1. Base shadcn theme (theme variables, dark mode, base layer) */
|
|
14
|
+
@import "./base.css";
|
|
14
15
|
|
|
15
|
-
/* 2.
|
|
16
|
+
/* 2. Animations (keyframes for all shadcn components) */
|
|
17
|
+
@import "./animations.css";
|
|
18
|
+
|
|
19
|
+
/* 3. J3M Design Tokens (color scales, spacing, radii, glass effects) */
|
|
16
20
|
@import "./tokens.css";
|
|
17
21
|
|
|
18
|
-
/*
|
|
22
|
+
/* 4. J3M Theme Overrides (replaces shadcn colors with J3M palette) */
|
|
23
|
+
@import "./j3m-overrides.css";
|
|
24
|
+
|
|
25
|
+
/* 5. Component-specific styles (toast, glass utilities) */
|
|
19
26
|
@import "./theme.css";
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
/* ========================================
|
|
2
|
+
J3M THEME OVERRIDES
|
|
3
|
+
|
|
4
|
+
Overrides shadcn's default theme with J3M brand colors.
|
|
5
|
+
Uses direct values for maximum compatibility.
|
|
6
|
+
======================================== */
|
|
7
|
+
|
|
8
|
+
@theme {
|
|
9
|
+
/* ========================================
|
|
10
|
+
PRIMARY - J3M Orange
|
|
11
|
+
======================================== */
|
|
12
|
+
--color-primary: #F36C21;
|
|
13
|
+
--color-primary-foreground: #FFFFFF;
|
|
14
|
+
|
|
15
|
+
/* ========================================
|
|
16
|
+
SECONDARY - J3M Neutral
|
|
17
|
+
======================================== */
|
|
18
|
+
--color-secondary: #E8E8E8;
|
|
19
|
+
--color-secondary-foreground: #4A4A4A;
|
|
20
|
+
|
|
21
|
+
/* ========================================
|
|
22
|
+
MUTED
|
|
23
|
+
======================================== */
|
|
24
|
+
--color-muted: #E8E8E8;
|
|
25
|
+
--color-muted-foreground: #8E8E8E;
|
|
26
|
+
|
|
27
|
+
/* ========================================
|
|
28
|
+
ACCENT
|
|
29
|
+
======================================== */
|
|
30
|
+
--color-accent: #FBCEB5;
|
|
31
|
+
--color-accent-foreground: #8F3808;
|
|
32
|
+
|
|
33
|
+
/* ========================================
|
|
34
|
+
DESTRUCTIVE - J3M Red
|
|
35
|
+
======================================== */
|
|
36
|
+
--color-destructive: #FB3748;
|
|
37
|
+
--color-destructive-foreground: #FFFFFF;
|
|
38
|
+
|
|
39
|
+
/* ========================================
|
|
40
|
+
BACKGROUND & FOREGROUND
|
|
41
|
+
======================================== */
|
|
42
|
+
--color-background: #FFFFFF;
|
|
43
|
+
--color-foreground: #333333;
|
|
44
|
+
|
|
45
|
+
/* ========================================
|
|
46
|
+
CARD
|
|
47
|
+
======================================== */
|
|
48
|
+
--color-card: #FFFFFF;
|
|
49
|
+
--color-card-foreground: #333333;
|
|
50
|
+
|
|
51
|
+
/* ========================================
|
|
52
|
+
POPOVER
|
|
53
|
+
======================================== */
|
|
54
|
+
--color-popover: #FFFFFF;
|
|
55
|
+
--color-popover-foreground: #333333;
|
|
56
|
+
|
|
57
|
+
/* ========================================
|
|
58
|
+
BORDER & INPUT
|
|
59
|
+
======================================== */
|
|
60
|
+
--color-border: #D2D2D2;
|
|
61
|
+
--color-input: #D2D2D2;
|
|
62
|
+
--color-ring: #F58446;
|
|
63
|
+
|
|
64
|
+
/* ========================================
|
|
65
|
+
SIDEBAR - J3M Branded
|
|
66
|
+
======================================== */
|
|
67
|
+
--color-sidebar: #FFFFFF;
|
|
68
|
+
--color-sidebar-foreground: #4A4A4A;
|
|
69
|
+
--color-sidebar-primary: #F36C21;
|
|
70
|
+
--color-sidebar-primary-foreground: #FFFFFF;
|
|
71
|
+
--color-sidebar-accent: #E8E8E8;
|
|
72
|
+
--color-sidebar-accent-foreground: #4A4A4A;
|
|
73
|
+
--color-sidebar-border: #E8E8E8;
|
|
74
|
+
--color-sidebar-ring: #F36C21;
|
|
75
|
+
|
|
76
|
+
/* ========================================
|
|
77
|
+
CHART COLORS - J3M Palette
|
|
78
|
+
======================================== */
|
|
79
|
+
--color-chart-1: #F36C21;
|
|
80
|
+
--color-chart-2: #1FC16B;
|
|
81
|
+
--color-chart-3: #777777;
|
|
82
|
+
--color-chart-4: #FFDB43;
|
|
83
|
+
--color-chart-5: #F79D6B;
|
|
84
|
+
|
|
85
|
+
/* ========================================
|
|
86
|
+
RADIUS - J3M Values
|
|
87
|
+
======================================== */
|
|
88
|
+
--radius: 8px;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* ========================================
|
|
92
|
+
DARK MODE - J3M Dark Theme
|
|
93
|
+
======================================== */
|
|
94
|
+
|
|
95
|
+
.dark {
|
|
96
|
+
--color-primary: #F58446;
|
|
97
|
+
--color-primary-foreground: #333333;
|
|
98
|
+
|
|
99
|
+
--color-secondary: #606060;
|
|
100
|
+
--color-secondary-foreground: #FFFFFF;
|
|
101
|
+
|
|
102
|
+
--color-muted: #606060;
|
|
103
|
+
--color-muted-foreground: #BBBBBB;
|
|
104
|
+
|
|
105
|
+
--color-accent: #606060;
|
|
106
|
+
--color-accent-foreground: #FFFFFF;
|
|
107
|
+
|
|
108
|
+
--color-destructive: #D00416;
|
|
109
|
+
--color-destructive-foreground: #FFFFFF;
|
|
110
|
+
|
|
111
|
+
--color-background: #333333;
|
|
112
|
+
--color-foreground: #FFFFFF;
|
|
113
|
+
|
|
114
|
+
--color-card: #333333;
|
|
115
|
+
--color-card-foreground: #FFFFFF;
|
|
116
|
+
|
|
117
|
+
--color-popover: #333333;
|
|
118
|
+
--color-popover-foreground: #FFFFFF;
|
|
119
|
+
|
|
120
|
+
--color-border: #606060;
|
|
121
|
+
--color-input: #606060;
|
|
122
|
+
--color-ring: #F58446;
|
|
123
|
+
|
|
124
|
+
--color-sidebar: #333333;
|
|
125
|
+
--color-sidebar-foreground: #FFFFFF;
|
|
126
|
+
--color-sidebar-primary: #F58446;
|
|
127
|
+
--color-sidebar-primary-foreground: #333333;
|
|
128
|
+
--color-sidebar-accent: #606060;
|
|
129
|
+
--color-sidebar-accent-foreground: #FFFFFF;
|
|
130
|
+
--color-sidebar-border: #606060;
|
|
131
|
+
--color-sidebar-ring: #F58446;
|
|
132
|
+
}
|