@cupcodev/ui 1.3.0 → 2.0.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 (10) hide show
  1. package/README.md +17 -0
  2. package/dist/index.cjs +2033 -1448
  3. package/dist/index.d.cts +7 -1
  4. package/dist/index.d.ts +7 -1
  5. package/dist/index.js +1970 -1388
  6. package/dist/styles.css +1 -1
  7. package/package.json +1 -1
  8. package/styles/base.css +2 -2
  9. package/styles/global.css +5 -5
  10. package/styles/tokens.css +18 -18
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cupcodev/ui",
3
3
  "private": false,
4
- "version": "1.3.0",
4
+ "version": "2.0.0",
5
5
  "packageManager": "pnpm@10.28.2+sha512.41872f037ad22f7348e3b1debbaf7e867cfd448f2726d9cf74c08f19507c31d2c8e7a11525b983febc2df640b5438dee6023ebb1f84ed43cc2d654d2bc326264",
6
6
  "type": "module",
7
7
  "main": "./dist/index.cjs",
package/styles/base.css CHANGED
@@ -66,7 +66,7 @@ html {
66
66
  .dark .cc-scrollbar-purple {
67
67
  --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
68
68
  --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
69
- --cc-scrollbar-thumb-highlight: rgba(237, 30, 121, 0.24);
69
+ --cc-scrollbar-thumb-highlight: rgba(151, 90, 182, 0.24);
70
70
  --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
71
71
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
72
72
  --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
@@ -102,7 +102,7 @@ html {
102
102
  .cc-scrollbar-theme-dark {
103
103
  --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
104
104
  --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
105
- --cc-scrollbar-thumb-highlight: rgba(237, 30, 121, 0.24);
105
+ --cc-scrollbar-thumb-highlight: rgba(151, 90, 182, 0.24);
106
106
  --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
107
107
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
108
108
  --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
package/styles/global.css CHANGED
@@ -136,7 +136,7 @@
136
136
  }
137
137
 
138
138
  .glass-card {
139
- background: linear-gradient(115deg, #7c5bbb75, #ffffff90, #ffffff70, #ffffff61, #ed1e799e);
139
+ background: linear-gradient(115deg, #7c5bbb75, #ffffff90, #ffffff70, #ffffff61, #975ab69e);
140
140
  backdrop-filter: blur(15px);
141
141
  border-radius: 25px;
142
142
  box-shadow:
@@ -164,7 +164,7 @@
164
164
  .dark .cc-scrollbar-purple {
165
165
  --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
166
166
  --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
167
- --cc-scrollbar-thumb-highlight: rgba(237, 30, 121, 0.24);
167
+ --cc-scrollbar-thumb-highlight: rgba(151, 90, 182, 0.24);
168
168
  --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
169
169
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
170
170
  --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
@@ -200,7 +200,7 @@
200
200
  .cc-scrollbar-theme-dark {
201
201
  --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
202
202
  --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
203
- --cc-scrollbar-thumb-highlight: rgba(237, 30, 121, 0.24);
203
+ --cc-scrollbar-thumb-highlight: rgba(151, 90, 182, 0.24);
204
204
  --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
205
205
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
206
206
  --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
@@ -661,7 +661,7 @@
661
661
  }
662
662
 
663
663
  .color-one {
664
- color: hsl(var(--cc-pink));
664
+ color: var(--color-one);
665
665
  }
666
666
 
667
667
  .color-four {
@@ -1008,7 +1008,7 @@
1008
1008
  }
1009
1009
 
1010
1010
  .dialog-video-player button[data-slot='dialog-close'] {
1011
- background: #ed1e79;
1011
+ background: #975ab6;
1012
1012
  padding: 5px;
1013
1013
  border-radius: 100%;
1014
1014
  opacity: 1;
package/styles/tokens.css CHANGED
@@ -159,13 +159,13 @@
159
159
 
160
160
  /* Gradients */
161
161
  --cc-gradient-galaxy: linear-gradient(120deg,
162
- hsl(var(--cc-pink)) 0%,
162
+ hsl(var(--cc-hover)) 0%,
163
163
  hsl(var(--cc-purple)) 100%
164
164
  );
165
165
  --cc-gradient-comet: radial-gradient(
166
166
  circle at 50% 0%,
167
167
  rgba(255, 255, 255, 0.4) 0%,
168
- rgba(237, 30, 121, 0.15) 30%,
168
+ var(--cc-hover-overlay) 30%,
169
169
  rgba(124, 91, 187, 0.1) 60%,
170
170
  transparent 100%
171
171
  );
@@ -173,17 +173,17 @@
173
173
  /* Gradientes Animados */
174
174
  --cc-gradient-animated-1: linear-gradient(
175
175
  135deg,
176
- hsl(var(--cc-pink)) 0%,
176
+ hsl(var(--cc-hover)) 0%,
177
177
  hsl(var(--cc-purple)) 50%,
178
- hsl(var(--cc-pink)) 100%
178
+ hsl(var(--cc-hover)) 100%
179
179
  );
180
180
  --cc-gradient-animated-2: linear-gradient(
181
181
  -45deg,
182
- hsl(var(--cc-pink)) 0%,
182
+ hsl(var(--cc-hover)) 0%,
183
183
  hsl(var(--cc-purple)) 25%,
184
- hsl(var(--cc-pink)) 50%,
184
+ hsl(var(--cc-hover)) 50%,
185
185
  hsl(var(--cc-purple)) 75%,
186
- hsl(var(--cc-pink)) 100%
186
+ hsl(var(--cc-hover)) 100%
187
187
  );
188
188
  --cc-gradient-shimmer: linear-gradient(
189
189
  90deg,
@@ -287,43 +287,43 @@
287
287
  --glass-bg: rgba(124, 91, 187, 0.12); /* Purple tinted glass */
288
288
  --glass-bg-subtle: rgba(124, 91, 187, 0.08);
289
289
  --glass-bg-strong: rgba(124, 91, 187, 0.20);
290
- --glass-border: rgba(237, 30, 121, 0.25); /* Pink border glow */
290
+ --glass-border: rgba(151, 90, 182, 0.3); /* Hover border glow */
291
291
  --glass-border-subtle: rgba(124, 91, 187, 0.15);
292
292
  --glass-highlight: rgba(255, 255, 255, 0.1);
293
- --glass-ambient: rgba(237, 30, 121, 0.08); /* Pink ambient glow */
293
+ --glass-ambient: rgba(151, 90, 182, 0.12); /* Hover ambient glow */
294
294
 
295
295
  /* Scrollbar tokens (default: purple + dark) */
296
296
  --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
297
297
  --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
298
- --cc-scrollbar-thumb-highlight: rgba(237, 30, 121, 0.24);
298
+ --cc-scrollbar-thumb-highlight: rgba(151, 90, 182, 0.24);
299
299
  --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
300
300
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
301
301
  --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
302
302
 
303
303
  /* Shadow tokens (Dark Mode) */
304
- --shadow-sm: 0 1px 4px rgba(237, 30, 121, 0.2);
304
+ --shadow-sm: 0 1px 4px rgba(151, 90, 182, 0.2);
305
305
  --shadow-md: 0 4px 12px rgba(124, 91, 187, 0.3);
306
306
  --shadow-lg: 0 8px 24px rgba(124, 91, 187, 0.4);
307
- --shadow-xl: 0 16px 48px rgba(237, 30, 121, 0.5);
307
+ --shadow-xl: 0 16px 48px rgba(151, 90, 182, 0.5);
308
308
  --shadow-glow-pink: 0 0 32px rgba(237, 30, 121, 0.6);
309
309
  --shadow-glow-purple: 0 0 32px rgba(124, 91, 187, 0.6);
310
310
  --shadow-glow-galaxy: 0 0 48px rgba(193, 27, 150, 0.7);
311
311
 
312
312
  /* Elevation (Dark Mode) */
313
313
  --elevation-1:
314
- 0 1px 2px rgba(237, 30, 121, 0.1),
314
+ 0 1px 2px rgba(151, 90, 182, 0.1),
315
315
  0 1px 3px rgba(124, 91, 187, 0.15);
316
316
  --elevation-2:
317
- 0 2px 4px rgba(237, 30, 121, 0.15),
317
+ 0 2px 4px rgba(151, 90, 182, 0.15),
318
318
  0 3px 8px rgba(124, 91, 187, 0.2);
319
319
  --elevation-3:
320
- 0 4px 8px rgba(237, 30, 121, 0.2),
320
+ 0 4px 8px rgba(151, 90, 182, 0.2),
321
321
  0 6px 16px rgba(124, 91, 187, 0.25);
322
322
  --elevation-4:
323
- 0 8px 16px rgba(237, 30, 121, 0.25),
323
+ 0 8px 16px rgba(151, 90, 182, 0.25),
324
324
  0 12px 32px rgba(124, 91, 187, 0.3);
325
325
  --elevation-5:
326
- 0 16px 32px rgba(237, 30, 121, 0.3),
326
+ 0 16px 32px rgba(151, 90, 182, 0.3),
327
327
  0 24px 64px rgba(124, 91, 187, 0.4);
328
328
  }
329
329
 
@@ -369,7 +369,7 @@
369
369
  html[data-cc-scrollbar-theme="dark"] {
370
370
  --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
371
371
  --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
372
- --cc-scrollbar-thumb-highlight: rgba(237, 30, 121, 0.24);
372
+ --cc-scrollbar-thumb-highlight: rgba(151, 90, 182, 0.24);
373
373
  --cc-scrollbar-thumb-hover: var(--cc-hover-overlay);
374
374
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
375
375
  --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);