@cupcodev/ui 1.2.53 → 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.
Files changed (13) hide show
  1. package/README.md +4 -0
  2. package/dist/index.cjs +787 -631
  3. package/dist/index.d.cts +5 -1
  4. package/dist/index.d.ts +5 -1
  5. package/dist/index.js +786 -631
  6. package/dist/styles.css +1 -1
  7. package/package.json +4 -2
  8. package/postinstall.cjs +20 -0
  9. package/styles/base.css +22 -22
  10. package/styles/dock.css +10 -10
  11. package/styles/global.css +43 -32
  12. package/styles/tokens.css +80 -73
  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;
@@ -162,7 +166,7 @@
162
166
  circle at 50% 0%,
163
167
  rgba(255, 255, 255, 0.4) 0%,
164
168
  rgba(237, 30, 121, 0.15) 30%,
165
- rgba(149, 29, 219, 0.1) 60%,
169
+ rgba(124, 91, 187, 0.1) 60%,
166
170
  transparent 100%
167
171
  );
168
172
 
@@ -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);
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);
283
290
  --glass-border: rgba(237, 30, 121, 0.25); /* Pink border glow */
284
- --glass-border-subtle: rgba(149, 29, 219, 0.15);
291
+ --glass-border-subtle: rgba(124, 91, 187, 0.15);
285
292
  --glass-highlight: rgba(255, 255, 255, 0.1);
286
293
  --glass-ambient: rgba(237, 30, 121, 0.08); /* Pink 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);
296
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
297
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
291
298
  --cc-scrollbar-thumb-highlight: rgba(237, 30, 121, 0.24);
292
- --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.55);
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
304
  --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);
305
+ --shadow-md: 0 4px 12px rgba(124, 91, 187, 0.3);
306
+ --shadow-lg: 0 8px 24px rgba(124, 91, 187, 0.4);
300
307
  --shadow-xl: 0 16px 48px rgba(237, 30, 121, 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
314
  0 1px 2px rgba(237, 30, 121, 0.1),
308
- 0 1px 3px rgba(149, 29, 219, 0.15);
315
+ 0 1px 3px rgba(124, 91, 187, 0.15);
309
316
  --elevation-2:
310
317
  0 2px 4px rgba(237, 30, 121, 0.15),
311
- 0 3px 8px rgba(149, 29, 219, 0.2);
318
+ 0 3px 8px rgba(124, 91, 187, 0.2);
312
319
  --elevation-3:
313
320
  0 4px 8px rgba(237, 30, 121, 0.2),
314
- 0 6px 16px rgba(149, 29, 219, 0.25);
321
+ 0 6px 16px rgba(124, 91, 187, 0.25);
315
322
  --elevation-4:
316
323
  0 8px 16px rgba(237, 30, 121, 0.25),
317
- 0 12px 32px rgba(149, 29, 219, 0.3);
324
+ 0 12px 32px rgba(124, 91, 187, 0.3);
318
325
  --elevation-5:
319
326
  0 16px 32px rgba(237, 30, 121, 0.3),
320
- 0 24px 64px rgba(149, 29, 219, 0.4);
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);
370
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
371
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
365
372
  --cc-scrollbar-thumb-highlight: rgba(237, 30, 121, 0.24);
366
- --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.55);
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
  },