@cupcodev/ui 1.2.53 → 1.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.
Files changed (13) hide show
  1. package/README.md +5 -0
  2. package/dist/index.cjs +1425 -996
  3. package/dist/index.d.cts +6 -1
  4. package/dist/index.d.ts +6 -1
  5. package/dist/index.js +1289 -861
  6. package/dist/styles.css +1 -1
  7. package/package.json +4 -2
  8. package/postinstall.cjs +20 -0
  9. package/styles/base.css +24 -24
  10. package/styles/dock.css +10 -10
  11. package/styles/global.css +47 -36
  12. package/styles/tokens.css +98 -91
  13. package/tailwind-preset.cjs +2 -0
package/styles/tokens.css CHANGED
@@ -2,40 +2,44 @@
2
2
  :root {
3
3
  /* Cupcode Core Colors (HSL) */
4
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 */
5
+ --cc-ink: 261 35% 25%; /* #3a2a58 */
6
+ --cc-pink: 330 87% 52%; /* #ed1e79 (high-attention highlight) */
7
+ --cc-purple: 261 41% 55%; /* #7c5bbb */
8
+ --cc-hover: 280 39% 53%; /* #975ab6 */
9
+ --cc-hover-rgb: 151 90 182;
10
+ --cc-highlight: 330 87% 52%; /* #ed1e79 */
11
+ --cc-hover-overlay: rgba(151, 90, 182, 0.3);
8
12
 
9
13
  /* Legacy color variables (compatibilidade) */
10
- --color-one: #ed1e79;
11
- --color-two: #951ddb;
12
- --color-three: #18013a;
14
+ --color-one: #975ab6;
15
+ --color-two: #7c5bbb;
16
+ --color-three: #3a2a58;
13
17
  --color-four: #ffffff;
14
- --cupcode-dark: #18013a;
18
+ --cupcode-dark: #3a2a58;
15
19
  --cupcode-pink: #ed1e79;
16
- --cupcode-purple: #951ddb;
20
+ --cupcode-purple: #7c5bbb;
17
21
  --cupcode-white: #ffffff;
18
22
 
19
23
  /* Base tokens */
20
24
  --background: 0 0% 100%;
21
- --foreground: 262 95% 11%;
25
+ --foreground: 261 35% 25%;
22
26
 
23
27
  --card: 0 0% 100%;
24
- --card-foreground: 262 95% 11%;
28
+ --card-foreground: 261 35% 25%;
25
29
 
26
30
  --popover: 0 0% 100%;
27
- --popover-foreground: 262 95% 11%;
31
+ --popover-foreground: 261 35% 25%;
28
32
 
29
- --primary: 277 77% 48%;
33
+ --primary: 261 41% 55%;
30
34
  --primary-foreground: 0 0% 100%;
31
35
 
32
- --secondary: 330 87% 52%;
36
+ --secondary: 261 41% 55%;
33
37
  --secondary-foreground: 0 0% 100%;
34
38
 
35
39
  --muted: 262 20% 96%;
36
40
  --muted-foreground: 262 15% 45%;
37
41
 
38
- --accent: 330 87% 52%;
42
+ --accent: 280 39% 53%;
39
43
  --accent-foreground: 0 0% 100%;
40
44
 
41
45
  --destructive: 0 84% 60%;
@@ -52,7 +56,7 @@
52
56
 
53
57
  --border: 262 20% 90%;
54
58
  --input: 262 20% 90%;
55
- --ring: 277 77% 48%;
59
+ --ring: 261 41% 55%;
56
60
 
57
61
  /* Glass Morphism tokens (Light Mode) */
58
62
  --glass-bg: rgba(255, 255, 255, 0.16);
@@ -61,7 +65,7 @@
61
65
  --glass-border: rgba(255, 255, 255, 0.35);
62
66
  --glass-border-subtle: rgba(255, 255, 255, 0.18);
63
67
  --glass-highlight: rgba(255, 255, 255, 0.55);
64
- --glass-ambient: rgba(24, 1, 58, 0.12);
68
+ --glass-ambient: rgba(58, 42, 88, 0.12);
65
69
 
66
70
  /* Blur levels */
67
71
  --glass-blur-xs: 6px;
@@ -73,12 +77,12 @@
73
77
  /* Scrollbar tokens (default: purple + light) */
74
78
  --cc-scrollbar-size: 10px;
75
79
  --cc-scrollbar-radius: 999px;
76
- --cc-scrollbar-track: rgba(149, 29, 219, 0.08);
77
- --cc-scrollbar-thumb: rgba(149, 29, 219, 0.26);
80
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.08);
81
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.26);
78
82
  --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
79
- --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.34);
83
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
80
84
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
81
- --cc-scrollbar-glow: rgba(149, 29, 219, 0.35);
85
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.35);
82
86
 
83
87
  /* Border radius */
84
88
  --radius-sm: 10px;
@@ -155,31 +159,31 @@
155
159
 
156
160
  /* Gradients */
157
161
  --cc-gradient-galaxy: linear-gradient(120deg,
158
- hsl(var(--cc-pink)) 0%,
162
+ hsl(var(--cc-hover)) 0%,
159
163
  hsl(var(--cc-purple)) 100%
160
164
  );
161
165
  --cc-gradient-comet: radial-gradient(
162
166
  circle at 50% 0%,
163
167
  rgba(255, 255, 255, 0.4) 0%,
164
- rgba(237, 30, 121, 0.15) 30%,
165
- rgba(149, 29, 219, 0.1) 60%,
168
+ var(--cc-hover-overlay) 30%,
169
+ rgba(124, 91, 187, 0.1) 60%,
166
170
  transparent 100%
167
171
  );
168
172
 
169
173
  /* Gradientes Animados */
170
174
  --cc-gradient-animated-1: linear-gradient(
171
175
  135deg,
172
- hsl(var(--cc-pink)) 0%,
176
+ hsl(var(--cc-hover)) 0%,
173
177
  hsl(var(--cc-purple)) 50%,
174
- hsl(var(--cc-pink)) 100%
178
+ hsl(var(--cc-hover)) 100%
175
179
  );
176
180
  --cc-gradient-animated-2: linear-gradient(
177
181
  -45deg,
178
- hsl(var(--cc-pink)) 0%,
182
+ hsl(var(--cc-hover)) 0%,
179
183
  hsl(var(--cc-purple)) 25%,
180
- hsl(var(--cc-pink)) 50%,
184
+ hsl(var(--cc-hover)) 50%,
181
185
  hsl(var(--cc-purple)) 75%,
182
- hsl(var(--cc-pink)) 100%
186
+ hsl(var(--cc-hover)) 100%
183
187
  );
184
188
  --cc-gradient-shimmer: linear-gradient(
185
189
  90deg,
@@ -191,28 +195,28 @@
191
195
  /* ===== ELEVATION & SHADOWS (Cupcode) ===== */
192
196
  --elevation-0: none;
193
197
  --elevation-1:
194
- 0 1px 2px rgba(149, 29, 219, 0.04),
195
- 0 1px 3px rgba(24, 1, 58, 0.06);
198
+ 0 1px 2px rgba(124, 91, 187, 0.04),
199
+ 0 1px 3px rgba(58, 42, 88, 0.06);
196
200
  --elevation-2:
197
- 0 2px 4px rgba(149, 29, 219, 0.06),
198
- 0 3px 8px rgba(24, 1, 58, 0.08);
201
+ 0 2px 4px rgba(124, 91, 187, 0.06),
202
+ 0 3px 8px rgba(58, 42, 88, 0.08);
199
203
  --elevation-3:
200
- 0 4px 8px rgba(149, 29, 219, 0.08),
201
- 0 6px 16px rgba(24, 1, 58, 0.1);
204
+ 0 4px 8px rgba(124, 91, 187, 0.08),
205
+ 0 6px 16px rgba(58, 42, 88, 0.1);
202
206
  --elevation-4:
203
- 0 8px 16px rgba(149, 29, 219, 0.1),
204
- 0 12px 32px rgba(24, 1, 58, 0.12);
207
+ 0 8px 16px rgba(124, 91, 187, 0.1),
208
+ 0 12px 32px rgba(58, 42, 88, 0.12);
205
209
  --elevation-5:
206
- 0 16px 32px rgba(149, 29, 219, 0.12),
207
- 0 24px 64px rgba(24, 1, 58, 0.15);
210
+ 0 16px 32px rgba(124, 91, 187, 0.12),
211
+ 0 24px 64px rgba(58, 42, 88, 0.15);
208
212
 
209
213
  /* 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-sm: 0 1px 4px rgba(58, 42, 88, 0.1);
215
+ --shadow-md: 0 4px 12px rgba(58, 42, 88, 0.15);
216
+ --shadow-lg: 0 8px 24px rgba(58, 42, 88, 0.2);
217
+ --shadow-xl: 0 16px 48px rgba(58, 42, 88, 0.25);
214
218
  --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);
219
+ --shadow-glow-purple: 0 0 24px rgba(124, 91, 187, 0.4);
216
220
  --shadow-glow-galaxy: 0 0 32px rgba(193, 27, 150, 0.5);
217
221
 
218
222
  /* Clay/Neumorphism tokens */
@@ -234,12 +238,15 @@
234
238
  .dark {
235
239
  /* Cupcode Core Colors (mantém as mesmas cores base) */
236
240
  --cc-surface: 0 0% 100%;
237
- --cc-ink: 262 95% 11%;
241
+ --cc-ink: 261 35% 25%;
238
242
  --cc-pink: 330 87% 52%;
239
- --cc-purple: 277 77% 48%;
243
+ --cc-purple: 261 41% 55%;
244
+ --cc-hover: 280 39% 53%;
245
+ --cc-hover-rgb: 151 90 182;
246
+ --cc-highlight: 330 87% 52%;
240
247
 
241
248
  /* Base tokens - Dark Mode */
242
- --background: 262 90% 8%; /* #0d0021 - Deep purple almost black */
249
+ --background: 261 35% 25%; /* #3a2a58 - Deep purple almost black */
243
250
  --foreground: 0 0% 98%; /* #fafafa - Soft white */
244
251
 
245
252
  --card: 262 80% 12%; /* #1a0336 - Darker purple card */
@@ -248,16 +255,16 @@
248
255
  --popover: 262 75% 10%; /* #150028 - Deep purple popover */
249
256
  --popover-foreground: 0 0% 98%;
250
257
 
251
- --primary: 277 77% 58%; /* Lighter purple for dark mode */
258
+ --primary: 261 41% 65%; /* Lighter purple for dark mode */
252
259
  --primary-foreground: 0 0% 100%;
253
260
 
254
- --secondary: 330 87% 62%; /* Lighter pink for dark mode */
261
+ --secondary: 261 41% 65%; /* Lighter purple for dark mode */
255
262
  --secondary-foreground: 0 0% 100%;
256
263
 
257
264
  --muted: 262 40% 18%; /* #1f0a3d - Muted purple */
258
265
  --muted-foreground: 262 20% 75%; /* Light purple gray text */
259
266
 
260
- --accent: 330 87% 62%; /* Vibrant pink accent */
267
+ --accent: 280 39% 63%; /* Hover color for dark mode */
261
268
  --accent-foreground: 0 0% 100%;
262
269
 
263
270
  --destructive: 0 84% 65%;
@@ -274,50 +281,50 @@
274
281
 
275
282
  --border: 262 40% 22%; /* #2b0f52 - Purple border */
276
283
  --input: 262 40% 22%;
277
- --ring: 277 77% 58%;
284
+ --ring: 261 41% 65%;
278
285
 
279
286
  /* 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);
287
+ --glass-bg: rgba(124, 91, 187, 0.12); /* Purple tinted glass */
288
+ --glass-bg-subtle: rgba(124, 91, 187, 0.08);
289
+ --glass-bg-strong: rgba(124, 91, 187, 0.20);
290
+ --glass-border: rgba(151, 90, 182, 0.3); /* Hover border glow */
291
+ --glass-border-subtle: rgba(124, 91, 187, 0.15);
285
292
  --glass-highlight: rgba(255, 255, 255, 0.1);
286
- --glass-ambient: rgba(237, 30, 121, 0.08); /* Pink ambient glow */
293
+ --glass-ambient: rgba(151, 90, 182, 0.12); /* Hover ambient glow */
287
294
 
288
295
  /* 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);
296
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
297
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
298
+ --cc-scrollbar-thumb-highlight: rgba(151, 90, 182, 0.24);
299
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
293
300
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
294
- --cc-scrollbar-glow: rgba(149, 29, 219, 0.5);
301
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
295
302
 
296
303
  /* 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);
304
+ --shadow-sm: 0 1px 4px rgba(151, 90, 182, 0.2);
305
+ --shadow-md: 0 4px 12px rgba(124, 91, 187, 0.3);
306
+ --shadow-lg: 0 8px 24px rgba(124, 91, 187, 0.4);
307
+ --shadow-xl: 0 16px 48px rgba(151, 90, 182, 0.5);
301
308
  --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);
309
+ --shadow-glow-purple: 0 0 32px rgba(124, 91, 187, 0.6);
303
310
  --shadow-glow-galaxy: 0 0 48px rgba(193, 27, 150, 0.7);
304
311
 
305
312
  /* Elevation (Dark Mode) */
306
313
  --elevation-1:
307
- 0 1px 2px rgba(237, 30, 121, 0.1),
308
- 0 1px 3px rgba(149, 29, 219, 0.15);
314
+ 0 1px 2px rgba(151, 90, 182, 0.1),
315
+ 0 1px 3px rgba(124, 91, 187, 0.15);
309
316
  --elevation-2:
310
- 0 2px 4px rgba(237, 30, 121, 0.15),
311
- 0 3px 8px rgba(149, 29, 219, 0.2);
317
+ 0 2px 4px rgba(151, 90, 182, 0.15),
318
+ 0 3px 8px rgba(124, 91, 187, 0.2);
312
319
  --elevation-3:
313
- 0 4px 8px rgba(237, 30, 121, 0.2),
314
- 0 6px 16px rgba(149, 29, 219, 0.25);
320
+ 0 4px 8px rgba(151, 90, 182, 0.2),
321
+ 0 6px 16px rgba(124, 91, 187, 0.25);
315
322
  --elevation-4:
316
- 0 8px 16px rgba(237, 30, 121, 0.25),
317
- 0 12px 32px rgba(149, 29, 219, 0.3);
323
+ 0 8px 16px rgba(151, 90, 182, 0.25),
324
+ 0 12px 32px rgba(124, 91, 187, 0.3);
318
325
  --elevation-5:
319
- 0 16px 32px rgba(237, 30, 121, 0.3),
320
- 0 24px 64px rgba(149, 29, 219, 0.4);
326
+ 0 16px 32px rgba(151, 90, 182, 0.3),
327
+ 0 24px 64px rgba(124, 91, 187, 0.4);
321
328
  }
322
329
 
323
330
  /* Global scrollbar color override: pink + auto theme */
@@ -325,7 +332,7 @@
325
332
  --cc-scrollbar-track: rgba(237, 30, 121, 0.08);
326
333
  --cc-scrollbar-thumb: rgba(237, 30, 121, 0.26);
327
334
  --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
328
- --cc-scrollbar-thumb-hover: rgba(237, 30, 121, 0.35);
335
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
329
336
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
330
337
  --cc-scrollbar-glow: rgba(237, 30, 121, 0.36);
331
338
  }
@@ -333,46 +340,46 @@
333
340
  html.dark[data-cc-scrollbar-color="pink"] {
334
341
  --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
335
342
  --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);
343
+ --cc-scrollbar-thumb-highlight: rgba(124, 91, 187, 0.3);
344
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
338
345
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
339
346
  --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);
340
347
  }
341
348
 
342
349
  /* Forced theme: light */
343
350
  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);
351
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.08);
352
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.26);
346
353
  --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
347
- --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.34);
354
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
348
355
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
349
- --cc-scrollbar-glow: rgba(149, 29, 219, 0.35);
356
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.35);
350
357
  }
351
358
 
352
359
  html[data-cc-scrollbar-theme="light"][data-cc-scrollbar-color="pink"] {
353
360
  --cc-scrollbar-track: rgba(237, 30, 121, 0.08);
354
361
  --cc-scrollbar-thumb: rgba(237, 30, 121, 0.26);
355
362
  --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
356
- --cc-scrollbar-thumb-hover: rgba(237, 30, 121, 0.35);
363
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
357
364
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
358
365
  --cc-scrollbar-glow: rgba(237, 30, 121, 0.36);
359
366
  }
360
367
 
361
368
  /* Forced theme: dark */
362
369
  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);
370
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
371
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
372
+ --cc-scrollbar-thumb-highlight: rgba(151, 90, 182, 0.24);
373
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
367
374
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
368
- --cc-scrollbar-glow: rgba(149, 29, 219, 0.5);
375
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
369
376
  }
370
377
 
371
378
  html[data-cc-scrollbar-theme="dark"][data-cc-scrollbar-color="pink"] {
372
379
  --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
373
380
  --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);
381
+ --cc-scrollbar-thumb-highlight: rgba(124, 91, 187, 0.3);
382
+ --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
376
383
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
377
384
  --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);
378
385
  }
package/tailwind-preset.cjs CHANGED
@@ -63,7 +63,9 @@ module.exports = {
63
63
  },
64
64
  cupcode: {
65
65
  pink: "hsl(var(--cc-pink))",
66
+ highlight: "hsl(var(--cc-highlight))",
66
67
  purple: "hsl(var(--cc-purple))",
68
+ hover: "rgb(var(--cc-hover-rgb, 151 90 182) / <alpha-value>)",
67
69
  ink: "hsl(var(--cc-ink))",
68
70
  surface: "hsl(var(--cc-surface))",
69
71
  },