@cupcodev/ui 1.0.7 → 1.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/README.md +146 -129
  2. package/dist/index.cjs +21779 -1629
  3. package/dist/index.d.cts +550 -2
  4. package/dist/index.d.ts +550 -2
  5. package/dist/index.js +21903 -1712
  6. package/package.json +155 -155
  7. package/styles/base.css +126 -0
  8. package/styles/dock.css +875 -875
  9. package/styles/global.css +1314 -1187
  10. package/styles/tokens.css +380 -305
  11. package/tailwind-preset.cjs +192 -192
package/styles/tokens.css CHANGED
@@ -1,305 +1,380 @@
1
- @layer base {
2
- :root {
3
- /* Cupcode Core Colors (HSL) */
4
- --cc-surface: 0 0% 100%; /* #ffffff */
5
- --cc-ink: 262 95% 11%; /* #18013a */
6
- --cc-pink: 330 87% 52%; /* #ed1e79 */
7
- --cc-purple: 277 77% 48%; /* #951ddb */
8
-
9
- /* Legacy color variables (compatibilidade) */
10
- --color-one: #ed1e79;
11
- --color-two: #951ddb;
12
- --color-three: #18013a;
13
- --color-four: #ffffff;
14
- --cupcode-dark: #18013a;
15
- --cupcode-pink: #ed1e79;
16
- --cupcode-purple: #951ddb;
17
- --cupcode-white: #ffffff;
18
-
19
- /* Base tokens */
20
- --background: 0 0% 100%;
21
- --foreground: 262 95% 11%;
22
-
23
- --card: 0 0% 100%;
24
- --card-foreground: 262 95% 11%;
25
-
26
- --popover: 0 0% 100%;
27
- --popover-foreground: 262 95% 11%;
28
-
29
- --primary: 277 77% 48%;
30
- --primary-foreground: 0 0% 100%;
31
-
32
- --secondary: 330 87% 52%;
33
- --secondary-foreground: 0 0% 100%;
34
-
35
- --muted: 262 20% 96%;
36
- --muted-foreground: 262 15% 45%;
37
-
38
- --accent: 330 87% 52%;
39
- --accent-foreground: 0 0% 100%;
40
-
41
- --destructive: 0 84% 60%;
42
- --destructive-foreground: 0 0% 100%;
43
-
44
- --success: 142 76% 36%;
45
- --success-foreground: 0 0% 100%;
46
-
47
- --warning: 38 92% 50%;
48
- --warning-foreground: 0 0% 100%;
49
-
50
- --info: 199 89% 48%;
51
- --info-foreground: 0 0% 100%;
52
-
53
- --border: 262 20% 90%;
54
- --input: 262 20% 90%;
55
- --ring: 277 77% 48%;
56
-
57
- /* Glass Morphism tokens (Light Mode) */
58
- --glass-bg: rgba(255, 255, 255, 0.16);
59
- --glass-bg-subtle: rgba(255, 255, 255, 0.08);
60
- --glass-bg-strong: rgba(255, 255, 255, 0.24);
61
- --glass-border: rgba(255, 255, 255, 0.35);
62
- --glass-border-subtle: rgba(255, 255, 255, 0.18);
63
- --glass-highlight: rgba(255, 255, 255, 0.55);
64
- --glass-ambient: rgba(24, 1, 58, 0.12);
65
-
66
- /* Blur levels */
67
- --glass-blur-xs: 6px;
68
- --glass-blur-sm: 10px;
69
- --glass-blur-md: 16px;
70
- --glass-blur-lg: 24px;
71
- --glass-blur-xl: 40px;
72
-
73
- /* Border radius */
74
- --radius-sm: 10px;
75
- --radius-md: 14px;
76
- --radius: 14px;
77
- --radius-lg: 18px;
78
- --radius-xl: 24px;
79
- --radius-2xl: 32px;
80
- --radius-pill: 9999px;
81
-
82
- /* Typography */
83
- --font-display: "Tomorrow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
84
- --font-ui: "Tomorrow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
85
- --font-sans: "Tomorrow", sans-serif;
86
-
87
- /* ===== SPACING SCALE (Cupcode) ===== */
88
- --space-0: 0;
89
- --space-1: 4px;
90
- --space-2: 8px;
91
- --space-3: 12px;
92
- --space-4: 16px;
93
- --space-5: 20px;
94
- --space-6: 24px;
95
- --space-7: 28px;
96
- --space-8: 32px;
97
- --space-9: 36px;
98
- --space-10: 40px;
99
- --space-12: 48px;
100
- --space-14: 56px;
101
- --space-16: 64px;
102
- --space-20: 80px;
103
- --space-24: 96px;
104
- --space-32: 128px;
105
-
106
- /* ===== FLUID TYPOGRAPHY (Responsive scales) ===== */
107
- --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
108
- --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
109
- --text-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
110
- --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
111
- --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.875rem);
112
- --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
113
- --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 3rem);
114
- --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem);
115
-
116
- /* ===== MOTION SYSTEM (Cupcode) ===== */
117
- /* Velocity tokens */
118
- --motion-instant: 0ms;
119
- --motion-fast: 120ms;
120
- --motion-medium: 220ms;
121
- --motion-slow: 360ms;
122
- --motion-slower: 500ms;
123
- --motion-slowest: 800ms;
124
-
125
- /* Easing curves Cupcode */
126
- --ease-natural: cubic-bezier(0.2, 0.8, 0.2, 1);
127
- --ease-jelly: cubic-bezier(0.77, 0, 0.175, 1);
128
- --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
129
- --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
130
- --ease-in: cubic-bezier(0.4, 0, 1, 1);
131
- --ease-out: cubic-bezier(0, 0, 0.2, 1);
132
- --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
133
-
134
- /* Legacy duration support */
135
- --dur-fast: var(--motion-fast);
136
- --dur-med: var(--motion-medium);
137
- --dur-slow: var(--motion-slow);
138
-
139
- /* ===== STATE OPACITIES ===== */
140
- --opacity-hover: 0.85;
141
- --opacity-active: 0.7;
142
- --opacity-disabled: 0.5;
143
- --opacity-focus: 1;
144
- --opacity-subtle: 0.6;
145
-
146
- /* Gradients */
147
- --cc-gradient-galaxy: linear-gradient(120deg,
148
- hsl(var(--cc-pink)) 0%,
149
- hsl(var(--cc-purple)) 100%
150
- );
151
- --cc-gradient-comet: radial-gradient(
152
- circle at 50% 0%,
153
- rgba(255, 255, 255, 0.4) 0%,
154
- rgba(237, 30, 121, 0.15) 30%,
155
- rgba(149, 29, 219, 0.1) 60%,
156
- transparent 100%
157
- );
158
-
159
- /* Gradientes Animados */
160
- --cc-gradient-animated-1: linear-gradient(
161
- 135deg,
162
- hsl(var(--cc-pink)) 0%,
163
- hsl(var(--cc-purple)) 50%,
164
- hsl(var(--cc-pink)) 100%
165
- );
166
- --cc-gradient-animated-2: linear-gradient(
167
- -45deg,
168
- hsl(var(--cc-pink)) 0%,
169
- hsl(var(--cc-purple)) 25%,
170
- hsl(var(--cc-pink)) 50%,
171
- hsl(var(--cc-purple)) 75%,
172
- hsl(var(--cc-pink)) 100%
173
- );
174
- --cc-gradient-shimmer: linear-gradient(
175
- 90deg,
176
- transparent 0%,
177
- rgba(255, 255, 255, 0.3) 50%,
178
- transparent 100%
179
- );
180
-
181
- /* ===== ELEVATION & SHADOWS (Cupcode) ===== */
182
- --elevation-0: none;
183
- --elevation-1:
184
- 0 1px 2px rgba(149, 29, 219, 0.04),
185
- 0 1px 3px rgba(24, 1, 58, 0.06);
186
- --elevation-2:
187
- 0 2px 4px rgba(149, 29, 219, 0.06),
188
- 0 3px 8px rgba(24, 1, 58, 0.08);
189
- --elevation-3:
190
- 0 4px 8px rgba(149, 29, 219, 0.08),
191
- 0 6px 16px rgba(24, 1, 58, 0.1);
192
- --elevation-4:
193
- 0 8px 16px rgba(149, 29, 219, 0.1),
194
- 0 12px 32px rgba(24, 1, 58, 0.12);
195
- --elevation-5:
196
- 0 16px 32px rgba(149, 29, 219, 0.12),
197
- 0 24px 64px rgba(24, 1, 58, 0.15);
198
-
199
- /* Shadow tokens (named) */
200
- --shadow-sm: 0 1px 4px rgba(24, 1, 58, 0.1);
201
- --shadow-md: 0 4px 12px rgba(24, 1, 58, 0.15);
202
- --shadow-lg: 0 8px 24px rgba(24, 1, 58, 0.2);
203
- --shadow-xl: 0 16px 48px rgba(24, 1, 58, 0.25);
204
- --shadow-glow-pink: 0 0 24px rgba(237, 30, 121, 0.4);
205
- --shadow-glow-purple: 0 0 24px rgba(149, 29, 219, 0.4);
206
- --shadow-glow-galaxy: 0 0 32px rgba(193, 27, 150, 0.5);
207
-
208
- /* Clay/Neumorphism tokens */
209
- --white: #fff;
210
- --greyLight-1: #e4ebf5;
211
- --greyLight-2: #c8d0e7;
212
- --accent-color: #1fa8f5;
213
- --accent-color-fg: #fefefe;
214
- --backdrop-color: #89d4fe;
215
- --app-content-background-color: #c0d8ec;
216
- --inset-shadow: rgba(7, 43, 74, 0.3);
217
- --outset-shadow: rgba(223, 240, 255, 0.25);
218
- --clay-box-shadow: rgba(7, 43, 74, 0.3);
219
- --clay-background-color: #c0d8ec;
220
- --clay-fg-color: #444;
221
- }
222
-
223
- /* ===== DARK MODE ===== */
224
- .dark {
225
- /* Cupcode Core Colors (mantém as mesmas cores base) */
226
- --cc-surface: 0 0% 100%;
227
- --cc-ink: 262 95% 11%;
228
- --cc-pink: 330 87% 52%;
229
- --cc-purple: 277 77% 48%;
230
-
231
- /* Base tokens - Dark Mode */
232
- --background: 262 90% 8%; /* #0d0021 - Deep purple almost black */
233
- --foreground: 0 0% 98%; /* #fafafa - Soft white */
234
-
235
- --card: 262 80% 12%; /* #1a0336 - Darker purple card */
236
- --card-foreground: 0 0% 98%;
237
-
238
- --popover: 262 75% 10%; /* #150028 - Deep purple popover */
239
- --popover-foreground: 0 0% 98%;
240
-
241
- --primary: 277 77% 58%; /* Lighter purple for dark mode */
242
- --primary-foreground: 0 0% 100%;
243
-
244
- --secondary: 330 87% 62%; /* Lighter pink for dark mode */
245
- --secondary-foreground: 0 0% 100%;
246
-
247
- --muted: 262 40% 18%; /* #1f0a3d - Muted purple */
248
- --muted-foreground: 262 20% 75%; /* Light purple gray text */
249
-
250
- --accent: 330 87% 62%; /* Vibrant pink accent */
251
- --accent-foreground: 0 0% 100%;
252
-
253
- --destructive: 0 84% 65%;
254
- --destructive-foreground: 0 0% 100%;
255
-
256
- --success: 142 76% 45%;
257
- --success-foreground: 0 0% 100%;
258
-
259
- --warning: 38 92% 60%;
260
- --warning-foreground: 0 0% 100%;
261
-
262
- --info: 199 89% 58%;
263
- --info-foreground: 0 0% 100%;
264
-
265
- --border: 262 40% 22%; /* #2b0f52 - Purple border */
266
- --input: 262 40% 22%;
267
- --ring: 277 77% 58%;
268
-
269
- /* Glass Morphism tokens (Dark Mode) */
270
- --glass-bg: rgba(149, 29, 219, 0.12); /* Purple tinted glass */
271
- --glass-bg-subtle: rgba(149, 29, 219, 0.08);
272
- --glass-bg-strong: rgba(149, 29, 219, 0.20);
273
- --glass-border: rgba(237, 30, 121, 0.25); /* Pink border glow */
274
- --glass-border-subtle: rgba(149, 29, 219, 0.15);
275
- --glass-highlight: rgba(255, 255, 255, 0.1);
276
- --glass-ambient: rgba(237, 30, 121, 0.08); /* Pink ambient glow */
277
-
278
- /* Shadow tokens (Dark Mode) */
279
- --shadow-sm: 0 1px 4px rgba(237, 30, 121, 0.2);
280
- --shadow-md: 0 4px 12px rgba(149, 29, 219, 0.3);
281
- --shadow-lg: 0 8px 24px rgba(149, 29, 219, 0.4);
282
- --shadow-xl: 0 16px 48px rgba(237, 30, 121, 0.5);
283
- --shadow-glow-pink: 0 0 32px rgba(237, 30, 121, 0.6);
284
- --shadow-glow-purple: 0 0 32px rgba(149, 29, 219, 0.6);
285
- --shadow-glow-galaxy: 0 0 48px rgba(193, 27, 150, 0.7);
286
-
287
- /* Elevation (Dark Mode) */
288
- --elevation-1:
289
- 0 1px 2px rgba(237, 30, 121, 0.1),
290
- 0 1px 3px rgba(149, 29, 219, 0.15);
291
- --elevation-2:
292
- 0 2px 4px rgba(237, 30, 121, 0.15),
293
- 0 3px 8px rgba(149, 29, 219, 0.2);
294
- --elevation-3:
295
- 0 4px 8px rgba(237, 30, 121, 0.2),
296
- 0 6px 16px rgba(149, 29, 219, 0.25);
297
- --elevation-4:
298
- 0 8px 16px rgba(237, 30, 121, 0.25),
299
- 0 12px 32px rgba(149, 29, 219, 0.3);
300
- --elevation-5:
301
- 0 16px 32px rgba(237, 30, 121, 0.3),
302
- 0 24px 64px rgba(149, 29, 219, 0.4);
303
- }
304
-
305
- }
1
+ @layer base {
2
+ :root {
3
+ /* Cupcode Core Colors (HSL) */
4
+ --cc-surface: 0 0% 100%; /* #ffffff */
5
+ --cc-ink: 262 95% 11%; /* #18013a */
6
+ --cc-pink: 330 87% 52%; /* #ed1e79 */
7
+ --cc-purple: 277 77% 48%; /* #951ddb */
8
+
9
+ /* Legacy color variables (compatibilidade) */
10
+ --color-one: #ed1e79;
11
+ --color-two: #951ddb;
12
+ --color-three: #18013a;
13
+ --color-four: #ffffff;
14
+ --cupcode-dark: #18013a;
15
+ --cupcode-pink: #ed1e79;
16
+ --cupcode-purple: #951ddb;
17
+ --cupcode-white: #ffffff;
18
+
19
+ /* Base tokens */
20
+ --background: 0 0% 100%;
21
+ --foreground: 262 95% 11%;
22
+
23
+ --card: 0 0% 100%;
24
+ --card-foreground: 262 95% 11%;
25
+
26
+ --popover: 0 0% 100%;
27
+ --popover-foreground: 262 95% 11%;
28
+
29
+ --primary: 277 77% 48%;
30
+ --primary-foreground: 0 0% 100%;
31
+
32
+ --secondary: 330 87% 52%;
33
+ --secondary-foreground: 0 0% 100%;
34
+
35
+ --muted: 262 20% 96%;
36
+ --muted-foreground: 262 15% 45%;
37
+
38
+ --accent: 330 87% 52%;
39
+ --accent-foreground: 0 0% 100%;
40
+
41
+ --destructive: 0 84% 60%;
42
+ --destructive-foreground: 0 0% 100%;
43
+
44
+ --success: 142 76% 36%;
45
+ --success-foreground: 0 0% 100%;
46
+
47
+ --warning: 38 92% 50%;
48
+ --warning-foreground: 0 0% 100%;
49
+
50
+ --info: 199 89% 48%;
51
+ --info-foreground: 0 0% 100%;
52
+
53
+ --border: 262 20% 90%;
54
+ --input: 262 20% 90%;
55
+ --ring: 277 77% 48%;
56
+
57
+ /* Glass Morphism tokens (Light Mode) */
58
+ --glass-bg: rgba(255, 255, 255, 0.16);
59
+ --glass-bg-subtle: rgba(255, 255, 255, 0.08);
60
+ --glass-bg-strong: rgba(255, 255, 255, 0.24);
61
+ --glass-border: rgba(255, 255, 255, 0.35);
62
+ --glass-border-subtle: rgba(255, 255, 255, 0.18);
63
+ --glass-highlight: rgba(255, 255, 255, 0.55);
64
+ --glass-ambient: rgba(24, 1, 58, 0.12);
65
+
66
+ /* Blur levels */
67
+ --glass-blur-xs: 6px;
68
+ --glass-blur-sm: 10px;
69
+ --glass-blur-md: 16px;
70
+ --glass-blur-lg: 24px;
71
+ --glass-blur-xl: 40px;
72
+
73
+ /* Scrollbar tokens (default: purple + light) */
74
+ --cc-scrollbar-size: 10px;
75
+ --cc-scrollbar-radius: 999px;
76
+ --cc-scrollbar-track: rgba(149, 29, 219, 0.08);
77
+ --cc-scrollbar-thumb: rgba(149, 29, 219, 0.26);
78
+ --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
79
+ --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.34);
80
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
81
+ --cc-scrollbar-glow: rgba(149, 29, 219, 0.35);
82
+
83
+ /* Border radius */
84
+ --radius-sm: 10px;
85
+ --radius-md: 14px;
86
+ --radius: 14px;
87
+ --radius-lg: 18px;
88
+ --radius-xl: 24px;
89
+ --radius-2xl: 32px;
90
+ --radius-pill: 9999px;
91
+
92
+ /* Typography */
93
+ --font-display: "Tomorrow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
94
+ --font-ui: "Tomorrow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
95
+ --font-sans: "Tomorrow", sans-serif;
96
+
97
+ /* ===== SPACING SCALE (Cupcode) ===== */
98
+ --space-0: 0;
99
+ --space-1: 4px;
100
+ --space-2: 8px;
101
+ --space-3: 12px;
102
+ --space-4: 16px;
103
+ --space-5: 20px;
104
+ --space-6: 24px;
105
+ --space-7: 28px;
106
+ --space-8: 32px;
107
+ --space-9: 36px;
108
+ --space-10: 40px;
109
+ --space-12: 48px;
110
+ --space-14: 56px;
111
+ --space-16: 64px;
112
+ --space-20: 80px;
113
+ --space-24: 96px;
114
+ --space-32: 128px;
115
+
116
+ /* ===== FLUID TYPOGRAPHY (Responsive scales) ===== */
117
+ --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
118
+ --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
119
+ --text-base: clamp(1rem, 0.925rem + 0.375vw, 1.125rem);
120
+ --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.5rem);
121
+ --text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.875rem);
122
+ --text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
123
+ --text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 3rem);
124
+ --text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3.75rem);
125
+
126
+ /* ===== MOTION SYSTEM (Cupcode) ===== */
127
+ /* Velocity tokens */
128
+ --motion-instant: 0ms;
129
+ --motion-fast: 120ms;
130
+ --motion-medium: 220ms;
131
+ --motion-slow: 360ms;
132
+ --motion-slower: 500ms;
133
+ --motion-slowest: 800ms;
134
+
135
+ /* Easing curves Cupcode */
136
+ --ease-natural: cubic-bezier(0.2, 0.8, 0.2, 1);
137
+ --ease-jelly: cubic-bezier(0.77, 0, 0.175, 1);
138
+ --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
139
+ --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
140
+ --ease-in: cubic-bezier(0.4, 0, 1, 1);
141
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
142
+ --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
143
+
144
+ /* Legacy duration support */
145
+ --dur-fast: var(--motion-fast);
146
+ --dur-med: var(--motion-medium);
147
+ --dur-slow: var(--motion-slow);
148
+
149
+ /* ===== STATE OPACITIES ===== */
150
+ --opacity-hover: 0.85;
151
+ --opacity-active: 0.7;
152
+ --opacity-disabled: 0.5;
153
+ --opacity-focus: 1;
154
+ --opacity-subtle: 0.6;
155
+
156
+ /* Gradients */
157
+ --cc-gradient-galaxy: linear-gradient(120deg,
158
+ hsl(var(--cc-pink)) 0%,
159
+ hsl(var(--cc-purple)) 100%
160
+ );
161
+ --cc-gradient-comet: radial-gradient(
162
+ circle at 50% 0%,
163
+ rgba(255, 255, 255, 0.4) 0%,
164
+ rgba(237, 30, 121, 0.15) 30%,
165
+ rgba(149, 29, 219, 0.1) 60%,
166
+ transparent 100%
167
+ );
168
+
169
+ /* Gradientes Animados */
170
+ --cc-gradient-animated-1: linear-gradient(
171
+ 135deg,
172
+ hsl(var(--cc-pink)) 0%,
173
+ hsl(var(--cc-purple)) 50%,
174
+ hsl(var(--cc-pink)) 100%
175
+ );
176
+ --cc-gradient-animated-2: linear-gradient(
177
+ -45deg,
178
+ hsl(var(--cc-pink)) 0%,
179
+ hsl(var(--cc-purple)) 25%,
180
+ hsl(var(--cc-pink)) 50%,
181
+ hsl(var(--cc-purple)) 75%,
182
+ hsl(var(--cc-pink)) 100%
183
+ );
184
+ --cc-gradient-shimmer: linear-gradient(
185
+ 90deg,
186
+ transparent 0%,
187
+ rgba(255, 255, 255, 0.3) 50%,
188
+ transparent 100%
189
+ );
190
+
191
+ /* ===== ELEVATION & SHADOWS (Cupcode) ===== */
192
+ --elevation-0: none;
193
+ --elevation-1:
194
+ 0 1px 2px rgba(149, 29, 219, 0.04),
195
+ 0 1px 3px rgba(24, 1, 58, 0.06);
196
+ --elevation-2:
197
+ 0 2px 4px rgba(149, 29, 219, 0.06),
198
+ 0 3px 8px rgba(24, 1, 58, 0.08);
199
+ --elevation-3:
200
+ 0 4px 8px rgba(149, 29, 219, 0.08),
201
+ 0 6px 16px rgba(24, 1, 58, 0.1);
202
+ --elevation-4:
203
+ 0 8px 16px rgba(149, 29, 219, 0.1),
204
+ 0 12px 32px rgba(24, 1, 58, 0.12);
205
+ --elevation-5:
206
+ 0 16px 32px rgba(149, 29, 219, 0.12),
207
+ 0 24px 64px rgba(24, 1, 58, 0.15);
208
+
209
+ /* Shadow tokens (named) */
210
+ --shadow-sm: 0 1px 4px rgba(24, 1, 58, 0.1);
211
+ --shadow-md: 0 4px 12px rgba(24, 1, 58, 0.15);
212
+ --shadow-lg: 0 8px 24px rgba(24, 1, 58, 0.2);
213
+ --shadow-xl: 0 16px 48px rgba(24, 1, 58, 0.25);
214
+ --shadow-glow-pink: 0 0 24px rgba(237, 30, 121, 0.4);
215
+ --shadow-glow-purple: 0 0 24px rgba(149, 29, 219, 0.4);
216
+ --shadow-glow-galaxy: 0 0 32px rgba(193, 27, 150, 0.5);
217
+
218
+ /* Clay/Neumorphism tokens */
219
+ --white: #fff;
220
+ --greyLight-1: #e4ebf5;
221
+ --greyLight-2: #c8d0e7;
222
+ --accent-color: #1fa8f5;
223
+ --accent-color-fg: #fefefe;
224
+ --backdrop-color: #89d4fe;
225
+ --app-content-background-color: #c0d8ec;
226
+ --inset-shadow: rgba(7, 43, 74, 0.3);
227
+ --outset-shadow: rgba(223, 240, 255, 0.25);
228
+ --clay-box-shadow: rgba(7, 43, 74, 0.3);
229
+ --clay-background-color: #c0d8ec;
230
+ --clay-fg-color: #444;
231
+ }
232
+
233
+ /* ===== DARK MODE ===== */
234
+ .dark {
235
+ /* Cupcode Core Colors (mantém as mesmas cores base) */
236
+ --cc-surface: 0 0% 100%;
237
+ --cc-ink: 262 95% 11%;
238
+ --cc-pink: 330 87% 52%;
239
+ --cc-purple: 277 77% 48%;
240
+
241
+ /* Base tokens - Dark Mode */
242
+ --background: 262 90% 8%; /* #0d0021 - Deep purple almost black */
243
+ --foreground: 0 0% 98%; /* #fafafa - Soft white */
244
+
245
+ --card: 262 80% 12%; /* #1a0336 - Darker purple card */
246
+ --card-foreground: 0 0% 98%;
247
+
248
+ --popover: 262 75% 10%; /* #150028 - Deep purple popover */
249
+ --popover-foreground: 0 0% 98%;
250
+
251
+ --primary: 277 77% 58%; /* Lighter purple for dark mode */
252
+ --primary-foreground: 0 0% 100%;
253
+
254
+ --secondary: 330 87% 62%; /* Lighter pink for dark mode */
255
+ --secondary-foreground: 0 0% 100%;
256
+
257
+ --muted: 262 40% 18%; /* #1f0a3d - Muted purple */
258
+ --muted-foreground: 262 20% 75%; /* Light purple gray text */
259
+
260
+ --accent: 330 87% 62%; /* Vibrant pink accent */
261
+ --accent-foreground: 0 0% 100%;
262
+
263
+ --destructive: 0 84% 65%;
264
+ --destructive-foreground: 0 0% 100%;
265
+
266
+ --success: 142 76% 45%;
267
+ --success-foreground: 0 0% 100%;
268
+
269
+ --warning: 38 92% 60%;
270
+ --warning-foreground: 0 0% 100%;
271
+
272
+ --info: 199 89% 58%;
273
+ --info-foreground: 0 0% 100%;
274
+
275
+ --border: 262 40% 22%; /* #2b0f52 - Purple border */
276
+ --input: 262 40% 22%;
277
+ --ring: 277 77% 58%;
278
+
279
+ /* Glass Morphism tokens (Dark Mode) */
280
+ --glass-bg: rgba(149, 29, 219, 0.12); /* Purple tinted glass */
281
+ --glass-bg-subtle: rgba(149, 29, 219, 0.08);
282
+ --glass-bg-strong: rgba(149, 29, 219, 0.20);
283
+ --glass-border: rgba(237, 30, 121, 0.25); /* Pink border glow */
284
+ --glass-border-subtle: rgba(149, 29, 219, 0.15);
285
+ --glass-highlight: rgba(255, 255, 255, 0.1);
286
+ --glass-ambient: rgba(237, 30, 121, 0.08); /* Pink ambient glow */
287
+
288
+ /* Scrollbar tokens (default: purple + dark) */
289
+ --cc-scrollbar-track: rgba(149, 29, 219, 0.16);
290
+ --cc-scrollbar-thumb: rgba(149, 29, 219, 0.42);
291
+ --cc-scrollbar-thumb-highlight: rgba(237, 30, 121, 0.24);
292
+ --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.55);
293
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
294
+ --cc-scrollbar-glow: rgba(149, 29, 219, 0.5);
295
+
296
+ /* Shadow tokens (Dark Mode) */
297
+ --shadow-sm: 0 1px 4px rgba(237, 30, 121, 0.2);
298
+ --shadow-md: 0 4px 12px rgba(149, 29, 219, 0.3);
299
+ --shadow-lg: 0 8px 24px rgba(149, 29, 219, 0.4);
300
+ --shadow-xl: 0 16px 48px rgba(237, 30, 121, 0.5);
301
+ --shadow-glow-pink: 0 0 32px rgba(237, 30, 121, 0.6);
302
+ --shadow-glow-purple: 0 0 32px rgba(149, 29, 219, 0.6);
303
+ --shadow-glow-galaxy: 0 0 48px rgba(193, 27, 150, 0.7);
304
+
305
+ /* Elevation (Dark Mode) */
306
+ --elevation-1:
307
+ 0 1px 2px rgba(237, 30, 121, 0.1),
308
+ 0 1px 3px rgba(149, 29, 219, 0.15);
309
+ --elevation-2:
310
+ 0 2px 4px rgba(237, 30, 121, 0.15),
311
+ 0 3px 8px rgba(149, 29, 219, 0.2);
312
+ --elevation-3:
313
+ 0 4px 8px rgba(237, 30, 121, 0.2),
314
+ 0 6px 16px rgba(149, 29, 219, 0.25);
315
+ --elevation-4:
316
+ 0 8px 16px rgba(237, 30, 121, 0.25),
317
+ 0 12px 32px rgba(149, 29, 219, 0.3);
318
+ --elevation-5:
319
+ 0 16px 32px rgba(237, 30, 121, 0.3),
320
+ 0 24px 64px rgba(149, 29, 219, 0.4);
321
+ }
322
+
323
+ /* Global scrollbar color override: pink + auto theme */
324
+ html[data-cc-scrollbar-color="pink"] {
325
+ --cc-scrollbar-track: rgba(237, 30, 121, 0.08);
326
+ --cc-scrollbar-thumb: rgba(237, 30, 121, 0.26);
327
+ --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
328
+ --cc-scrollbar-thumb-hover: rgba(237, 30, 121, 0.35);
329
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
330
+ --cc-scrollbar-glow: rgba(237, 30, 121, 0.36);
331
+ }
332
+
333
+ html.dark[data-cc-scrollbar-color="pink"] {
334
+ --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
335
+ --cc-scrollbar-thumb: rgba(237, 30, 121, 0.45);
336
+ --cc-scrollbar-thumb-highlight: rgba(149, 29, 219, 0.3);
337
+ --cc-scrollbar-thumb-hover: rgba(237, 30, 121, 0.6);
338
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
339
+ --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);
340
+ }
341
+
342
+ /* Forced theme: light */
343
+ html[data-cc-scrollbar-theme="light"] {
344
+ --cc-scrollbar-track: rgba(149, 29, 219, 0.08);
345
+ --cc-scrollbar-thumb: rgba(149, 29, 219, 0.26);
346
+ --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
347
+ --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.34);
348
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
349
+ --cc-scrollbar-glow: rgba(149, 29, 219, 0.35);
350
+ }
351
+
352
+ html[data-cc-scrollbar-theme="light"][data-cc-scrollbar-color="pink"] {
353
+ --cc-scrollbar-track: rgba(237, 30, 121, 0.08);
354
+ --cc-scrollbar-thumb: rgba(237, 30, 121, 0.26);
355
+ --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
356
+ --cc-scrollbar-thumb-hover: rgba(237, 30, 121, 0.35);
357
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
358
+ --cc-scrollbar-glow: rgba(237, 30, 121, 0.36);
359
+ }
360
+
361
+ /* Forced theme: dark */
362
+ html[data-cc-scrollbar-theme="dark"] {
363
+ --cc-scrollbar-track: rgba(149, 29, 219, 0.16);
364
+ --cc-scrollbar-thumb: rgba(149, 29, 219, 0.42);
365
+ --cc-scrollbar-thumb-highlight: rgba(237, 30, 121, 0.24);
366
+ --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.55);
367
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
368
+ --cc-scrollbar-glow: rgba(149, 29, 219, 0.5);
369
+ }
370
+
371
+ html[data-cc-scrollbar-theme="dark"][data-cc-scrollbar-color="pink"] {
372
+ --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
373
+ --cc-scrollbar-thumb: rgba(237, 30, 121, 0.45);
374
+ --cc-scrollbar-thumb-highlight: rgba(149, 29, 219, 0.3);
375
+ --cc-scrollbar-thumb-hover: rgba(237, 30, 121, 0.6);
376
+ --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
377
+ --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);
378
+ }
379
+
380
+ }