@cupcodev/ui 1.2.8 → 1.2.11

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 (8) hide show
  1. package/dist/index.cjs +850 -630
  2. package/dist/index.js +850 -630
  3. package/dist/styles.css +1 -1
  4. package/package.json +1 -1
  5. package/styles/base.css +18 -18
  6. package/styles/dock.css +10 -10
  7. package/styles/global.css +37 -27
  8. package/styles/tokens.css +63 -63
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@cupcodev/ui",
3
3
  "private": false,
4
- "version": "1.2.8",
4
+ "version": "1.2.11",
5
5
  "packageManager": "pnpm@10.28.2+sha512.41872f037ad22f7348e3b1debbaf7e867cfd448f2726d9cf74c08f19507c31d2c8e7a11525b983febc2df640b5438dee6023ebb1f84ed43cc2d654d2bc326264",
6
6
  "type": "module",
7
7
  "main": "./dist/index.cjs",
package/styles/base.css CHANGED
@@ -55,21 +55,21 @@ html {
55
55
  }
56
56
 
57
57
  .cc-scrollbar-purple {
58
- --cc-scrollbar-track: rgba(149, 29, 219, 0.08);
59
- --cc-scrollbar-thumb: rgba(149, 29, 219, 0.26);
58
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.08);
59
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.26);
60
60
  --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
61
- --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.34);
61
+ --cc-scrollbar-thumb-hover: rgba(124, 91, 187, 0.34);
62
62
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
63
- --cc-scrollbar-glow: rgba(149, 29, 219, 0.35);
63
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.35);
64
64
  }
65
65
 
66
66
  .dark .cc-scrollbar-purple {
67
- --cc-scrollbar-track: rgba(149, 29, 219, 0.16);
68
- --cc-scrollbar-thumb: rgba(149, 29, 219, 0.42);
67
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
68
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
69
69
  --cc-scrollbar-thumb-highlight: rgba(237, 30, 121, 0.24);
70
- --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.55);
70
+ --cc-scrollbar-thumb-hover: rgba(124, 91, 187, 0.55);
71
71
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
72
- --cc-scrollbar-glow: rgba(149, 29, 219, 0.5);
72
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
73
73
  }
74
74
 
75
75
  .cc-scrollbar-pink {
@@ -84,28 +84,28 @@ html {
84
84
  .dark .cc-scrollbar-pink {
85
85
  --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
86
86
  --cc-scrollbar-thumb: rgba(237, 30, 121, 0.45);
87
- --cc-scrollbar-thumb-highlight: rgba(149, 29, 219, 0.3);
87
+ --cc-scrollbar-thumb-highlight: rgba(124, 91, 187, 0.3);
88
88
  --cc-scrollbar-thumb-hover: rgba(237, 30, 121, 0.6);
89
89
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
90
90
  --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);
91
91
  }
92
92
 
93
93
  .cc-scrollbar-theme-light {
94
- --cc-scrollbar-track: rgba(149, 29, 219, 0.08);
95
- --cc-scrollbar-thumb: rgba(149, 29, 219, 0.26);
94
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.08);
95
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.26);
96
96
  --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
97
- --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.34);
97
+ --cc-scrollbar-thumb-hover: rgba(124, 91, 187, 0.34);
98
98
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
99
- --cc-scrollbar-glow: rgba(149, 29, 219, 0.35);
99
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.35);
100
100
  }
101
101
 
102
102
  .cc-scrollbar-theme-dark {
103
- --cc-scrollbar-track: rgba(149, 29, 219, 0.16);
104
- --cc-scrollbar-thumb: rgba(149, 29, 219, 0.42);
103
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
104
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
105
105
  --cc-scrollbar-thumb-highlight: rgba(237, 30, 121, 0.24);
106
- --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.55);
106
+ --cc-scrollbar-thumb-hover: rgba(124, 91, 187, 0.55);
107
107
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
108
- --cc-scrollbar-glow: rgba(149, 29, 219, 0.5);
108
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
109
109
  }
110
110
 
111
111
  .cc-scrollbar-pink.cc-scrollbar-theme-light {
@@ -120,7 +120,7 @@ html {
120
120
  .cc-scrollbar-pink.cc-scrollbar-theme-dark {
121
121
  --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
122
122
  --cc-scrollbar-thumb: rgba(237, 30, 121, 0.45);
123
- --cc-scrollbar-thumb-highlight: rgba(149, 29, 219, 0.3);
123
+ --cc-scrollbar-thumb-highlight: rgba(124, 91, 187, 0.3);
124
124
  --cc-scrollbar-thumb-hover: rgba(237, 30, 121, 0.6);
125
125
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
126
126
  --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);
package/styles/dock.css CHANGED
@@ -9,19 +9,19 @@
9
9
  --clay-fg-color: #444;
10
10
  --lg-bg-color: rgba(255, 255, 255, 0.25);
11
11
  --lg-highlight: rgba(255, 255, 255, 0.75);
12
- --lg-text: #18013a;
12
+ --lg-text: #3a2a58;
13
13
  --lg-hover-glow: rgba(255, 255, 255, 0.4);
14
14
  --lg-grey: #5b5b5b;
15
15
  --card-spacing: 0.5rem;
16
16
  --marketing-base: #ed1e79;
17
- --desenvolvimento-base: #951ddb;
17
+ --desenvolvimento-base: #7c5bbb;
18
18
  --blue-sky-light: #87ceeb;
19
19
  --blue-sky-med: #00b7eb;
20
20
  --blue-sky-dark: #006bb3;
21
21
  --blue-pink-light: #ff69b4;
22
22
  --blue-pink-med: #00b7eb;
23
23
  --purple-orange-light: #ff4500;
24
- --purple-orange-med: #951ddb;
24
+ --purple-orange-med: #7c5bbb;
25
25
  --black-grey-light: #a9a9a9;
26
26
  --black-grey-med: #2f2f2f;
27
27
  --orange-base: #ffa500;
@@ -29,7 +29,7 @@
29
29
  --pink-blue-light: #ff69b4;
30
30
  --pink-blue-med: #00b7eb;
31
31
  --yellow-purple-light: #ffff00;
32
- --yellow-purple-med: #951ddb;
32
+ --yellow-purple-med: #7c5bbb;
33
33
  --blue-green-grey-light: #00b7eb;
34
34
  --blue-green-grey-med: #228b22;
35
35
  --blue-green-grey-dark: #696969;
@@ -66,7 +66,7 @@
66
66
  --app-content-background-color: #ed1e79;
67
67
  }
68
68
  .mn-desenvolvimento-style {
69
- --app-content-background-color: #951ddb;
69
+ --app-content-background-color: #7c5bbb;
70
70
  }
71
71
  .mn-solucoes-style {
72
72
  --app-content-background-color: #00b7eb;
@@ -223,13 +223,13 @@
223
223
  display: grid;
224
224
  place-items: center;
225
225
  border-radius: 1rem;
226
- background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.2) 45%, rgba(149, 29, 219, 0.22) 75%);
226
+ background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.2) 45%, rgba(124, 91, 187, 0.22) 75%);
227
227
  color: var(--lg-text);
228
228
  font-weight: 700;
229
229
  font-size: 0.85rem;
230
230
  letter-spacing: 0.04em;
231
231
  text-transform: uppercase;
232
- box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 6px 12px rgba(24, 1, 58, 0.18);
232
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 6px 12px rgba(58, 42, 88, 0.18);
233
233
  }
234
234
 
235
235
  .tabbar li .bg-img-menu-fix-mob.dock-fallback .dock-fallback-icon {
@@ -820,9 +820,9 @@ a.link-absolute-menu {
820
820
  inset 2px 1px 0px -1px rgba(255, 255, 255, 0.8),
821
821
  inset -1.5px -1px 0px -1px rgba(255, 255, 255, 0.7),
822
822
  inset -2px -6px 1px -5px rgba(255, 255, 255, 0.5),
823
- inset -1px 2px 3px -1px rgba(24, 1, 58, 0.2),
824
- inset 0px -4px 1px -2px rgba(24, 1, 58, 0.1),
825
- 0px 3px 6px 0px rgba(24, 1, 58, 0.08);
823
+ inset -1px 2px 3px -1px rgba(58, 42, 88, 0.2),
824
+ inset 0px -4px 1px -2px rgba(58, 42, 88, 0.1),
825
+ 0px 3px 6px 0px rgba(58, 42, 88, 0.08);
826
826
  z-index: -1;
827
827
  will-change: left, width, height, top, transform;
828
828
  transform: translateZ(0) scale(var(--slider-scale, 1));
package/styles/global.css CHANGED
@@ -129,14 +129,14 @@
129
129
  }
130
130
 
131
131
  .glass-inverse {
132
- background: rgba(24, 1, 58, 0.2);
132
+ background: rgba(58, 42, 88, 0.2);
133
133
  backdrop-filter: blur(var(--glass-blur-md));
134
134
  -webkit-backdrop-filter: blur(var(--glass-blur-md));
135
135
  border: 1px solid rgba(255, 255, 255, 0.1);
136
136
  }
137
137
 
138
138
  .glass-card {
139
- background: linear-gradient(115deg, #951ddb75, #ffffff90, #ffffff70, #ffffff61, #ed1e799e);
139
+ background: linear-gradient(115deg, #7c5bbb75, #ffffff90, #ffffff70, #ffffff61, #ed1e799e);
140
140
  backdrop-filter: blur(15px);
141
141
  border-radius: 25px;
142
142
  box-shadow:
@@ -153,21 +153,21 @@
153
153
  }
154
154
 
155
155
  .cc-scrollbar-purple {
156
- --cc-scrollbar-track: rgba(149, 29, 219, 0.08);
157
- --cc-scrollbar-thumb: rgba(149, 29, 219, 0.26);
156
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.08);
157
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.26);
158
158
  --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
159
- --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.34);
159
+ --cc-scrollbar-thumb-hover: rgba(124, 91, 187, 0.34);
160
160
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
161
- --cc-scrollbar-glow: rgba(149, 29, 219, 0.35);
161
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.35);
162
162
  }
163
163
 
164
164
  .dark .cc-scrollbar-purple {
165
- --cc-scrollbar-track: rgba(149, 29, 219, 0.16);
166
- --cc-scrollbar-thumb: rgba(149, 29, 219, 0.42);
165
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
166
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
167
167
  --cc-scrollbar-thumb-highlight: rgba(237, 30, 121, 0.24);
168
- --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.55);
168
+ --cc-scrollbar-thumb-hover: rgba(124, 91, 187, 0.55);
169
169
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
170
- --cc-scrollbar-glow: rgba(149, 29, 219, 0.5);
170
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
171
171
  }
172
172
 
173
173
  .cc-scrollbar-pink {
@@ -182,28 +182,28 @@
182
182
  .dark .cc-scrollbar-pink {
183
183
  --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
184
184
  --cc-scrollbar-thumb: rgba(237, 30, 121, 0.45);
185
- --cc-scrollbar-thumb-highlight: rgba(149, 29, 219, 0.3);
185
+ --cc-scrollbar-thumb-highlight: rgba(124, 91, 187, 0.3);
186
186
  --cc-scrollbar-thumb-hover: rgba(237, 30, 121, 0.6);
187
187
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
188
188
  --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);
189
189
  }
190
190
 
191
191
  .cc-scrollbar-theme-light {
192
- --cc-scrollbar-track: rgba(149, 29, 219, 0.08);
193
- --cc-scrollbar-thumb: rgba(149, 29, 219, 0.26);
192
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.08);
193
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.26);
194
194
  --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
195
- --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.34);
195
+ --cc-scrollbar-thumb-hover: rgba(124, 91, 187, 0.34);
196
196
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
197
- --cc-scrollbar-glow: rgba(149, 29, 219, 0.35);
197
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.35);
198
198
  }
199
199
 
200
200
  .cc-scrollbar-theme-dark {
201
- --cc-scrollbar-track: rgba(149, 29, 219, 0.16);
202
- --cc-scrollbar-thumb: rgba(149, 29, 219, 0.42);
201
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
202
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
203
203
  --cc-scrollbar-thumb-highlight: rgba(237, 30, 121, 0.24);
204
- --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.55);
204
+ --cc-scrollbar-thumb-hover: rgba(124, 91, 187, 0.55);
205
205
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
206
- --cc-scrollbar-glow: rgba(149, 29, 219, 0.5);
206
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
207
207
  }
208
208
 
209
209
  .cc-scrollbar-pink.cc-scrollbar-theme-light {
@@ -218,7 +218,7 @@
218
218
  .cc-scrollbar-pink.cc-scrollbar-theme-dark {
219
219
  --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
220
220
  --cc-scrollbar-thumb: rgba(237, 30, 121, 0.45);
221
- --cc-scrollbar-thumb-highlight: rgba(149, 29, 219, 0.3);
221
+ --cc-scrollbar-thumb-highlight: rgba(124, 91, 187, 0.3);
222
222
  --cc-scrollbar-thumb-hover: rgba(237, 30, 121, 0.6);
223
223
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
224
224
  --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);
@@ -246,7 +246,7 @@
246
246
  position: relative;
247
247
  transition: all 0.3s ease;
248
248
  border-radius: 1rem;
249
- border: 1px solid #d33cfb4d;
249
+ border: 1px solid #7c5bbb4d;
250
250
  filter: grayscale(1);
251
251
  transform: scale(1);
252
252
  }
@@ -829,7 +829,7 @@
829
829
  }
830
830
 
831
831
  .circle__btn:hover {
832
- color: #951ddb40;
832
+ color: #7c5bbb40;
833
833
  background-color: #fff;
834
834
  }
835
835
 
@@ -839,11 +839,11 @@
839
839
  }
840
840
 
841
841
  .circle__btn:hover ~ .circle__back-1 {
842
- background: linear-gradient(to bottom, #951ddb30 0%, #ed1e7930 100%);
842
+ background: linear-gradient(to bottom, #7c5bbb30 0%, #ed1e7930 100%);
843
843
  }
844
844
 
845
845
  .dark .circle__btn:hover ~ .circle__back-1 {
846
- background: linear-gradient(to bottom, rgba(149, 29, 219, 0.45) 0%, rgba(237, 30, 121, 0.45) 100%);
846
+ background: linear-gradient(to bottom, rgba(124, 91, 187, 0.45) 0%, rgba(237, 30, 121, 0.45) 100%);
847
847
  }
848
848
 
849
849
  .circle__btn.shadow {
@@ -1193,15 +1193,15 @@
1193
1193
  .orcamento-to-step .orcamento-steps-numeros {
1194
1194
  max-width: 250px;
1195
1195
  margin: 0 auto;
1196
- border: solid 1px #951ddb14;
1196
+ border: solid 1px #7c5bbb14;
1197
1197
  padding: 5px 10px;
1198
1198
  border-radius: 20px;
1199
- background: #951ddb14;
1199
+ background: #7c5bbb14;
1200
1200
  overflow: hidden;
1201
1201
  }
1202
1202
 
1203
1203
  .orcamento-to-step .orcamento-steps-numeros-content {
1204
- background: #951ddb80;
1204
+ background: #7c5bbb80;
1205
1205
  width: 110%;
1206
1206
  left: 50%;
1207
1207
  transform: translate(-50%, 0px);
@@ -1306,6 +1306,16 @@
1306
1306
  }
1307
1307
 
1308
1308
  @layer utilities {
1309
+ .bg-\[\#7c5bbb\]\/30 {
1310
+ background-color: #7c5bbb4d;
1311
+ }
1312
+
1313
+ .dark .bg-\[\#7c5bbb\]\/30 {
1314
+ background-color: #3a2a5836;
1315
+ backdrop-filter: blur(10px);
1316
+ -webkit-backdrop-filter: blur(10px);
1317
+ }
1318
+
1309
1319
  /* Reduced motion */
1310
1320
  @media (prefers-reduced-motion: reduce) {
1311
1321
  *,
package/styles/tokens.css CHANGED
@@ -2,31 +2,31 @@
2
2
  :root {
3
3
  /* Cupcode Core Colors (HSL) */
4
4
  --cc-surface: 0 0% 100%; /* #ffffff */
5
- --cc-ink: 262 95% 11%; /* #18013a */
5
+ --cc-ink: 261 35% 25%; /* #3a2a58 */
6
6
  --cc-pink: 330 87% 52%; /* #ed1e79 */
7
- --cc-purple: 277 77% 48%; /* #951ddb */
7
+ --cc-purple: 261 41% 55%; /* #7c5bbb */
8
8
 
9
9
  /* Legacy color variables (compatibilidade) */
10
10
  --color-one: #ed1e79;
11
- --color-two: #951ddb;
12
- --color-three: #18013a;
11
+ --color-two: #7c5bbb;
12
+ --color-three: #3a2a58;
13
13
  --color-four: #ffffff;
14
- --cupcode-dark: #18013a;
14
+ --cupcode-dark: #3a2a58;
15
15
  --cupcode-pink: #ed1e79;
16
- --cupcode-purple: #951ddb;
16
+ --cupcode-purple: #7c5bbb;
17
17
  --cupcode-white: #ffffff;
18
18
 
19
19
  /* Base tokens */
20
20
  --background: 0 0% 100%;
21
- --foreground: 262 95% 11%;
21
+ --foreground: 261 35% 25%;
22
22
 
23
23
  --card: 0 0% 100%;
24
- --card-foreground: 262 95% 11%;
24
+ --card-foreground: 261 35% 25%;
25
25
 
26
26
  --popover: 0 0% 100%;
27
- --popover-foreground: 262 95% 11%;
27
+ --popover-foreground: 261 35% 25%;
28
28
 
29
- --primary: 277 77% 48%;
29
+ --primary: 261 41% 55%;
30
30
  --primary-foreground: 0 0% 100%;
31
31
 
32
32
  --secondary: 330 87% 52%;
@@ -52,7 +52,7 @@
52
52
 
53
53
  --border: 262 20% 90%;
54
54
  --input: 262 20% 90%;
55
- --ring: 277 77% 48%;
55
+ --ring: 261 41% 55%;
56
56
 
57
57
  /* Glass Morphism tokens (Light Mode) */
58
58
  --glass-bg: rgba(255, 255, 255, 0.16);
@@ -61,7 +61,7 @@
61
61
  --glass-border: rgba(255, 255, 255, 0.35);
62
62
  --glass-border-subtle: rgba(255, 255, 255, 0.18);
63
63
  --glass-highlight: rgba(255, 255, 255, 0.55);
64
- --glass-ambient: rgba(24, 1, 58, 0.12);
64
+ --glass-ambient: rgba(58, 42, 88, 0.12);
65
65
 
66
66
  /* Blur levels */
67
67
  --glass-blur-xs: 6px;
@@ -73,12 +73,12 @@
73
73
  /* Scrollbar tokens (default: purple + light) */
74
74
  --cc-scrollbar-size: 10px;
75
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);
76
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.08);
77
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.26);
78
78
  --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
79
- --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.34);
79
+ --cc-scrollbar-thumb-hover: rgba(124, 91, 187, 0.34);
80
80
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
81
- --cc-scrollbar-glow: rgba(149, 29, 219, 0.35);
81
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.35);
82
82
 
83
83
  /* Border radius */
84
84
  --radius-sm: 10px;
@@ -162,7 +162,7 @@
162
162
  circle at 50% 0%,
163
163
  rgba(255, 255, 255, 0.4) 0%,
164
164
  rgba(237, 30, 121, 0.15) 30%,
165
- rgba(149, 29, 219, 0.1) 60%,
165
+ rgba(124, 91, 187, 0.1) 60%,
166
166
  transparent 100%
167
167
  );
168
168
 
@@ -191,28 +191,28 @@
191
191
  /* ===== ELEVATION & SHADOWS (Cupcode) ===== */
192
192
  --elevation-0: none;
193
193
  --elevation-1:
194
- 0 1px 2px rgba(149, 29, 219, 0.04),
195
- 0 1px 3px rgba(24, 1, 58, 0.06);
194
+ 0 1px 2px rgba(124, 91, 187, 0.04),
195
+ 0 1px 3px rgba(58, 42, 88, 0.06);
196
196
  --elevation-2:
197
- 0 2px 4px rgba(149, 29, 219, 0.06),
198
- 0 3px 8px rgba(24, 1, 58, 0.08);
197
+ 0 2px 4px rgba(124, 91, 187, 0.06),
198
+ 0 3px 8px rgba(58, 42, 88, 0.08);
199
199
  --elevation-3:
200
- 0 4px 8px rgba(149, 29, 219, 0.08),
201
- 0 6px 16px rgba(24, 1, 58, 0.1);
200
+ 0 4px 8px rgba(124, 91, 187, 0.08),
201
+ 0 6px 16px rgba(58, 42, 88, 0.1);
202
202
  --elevation-4:
203
- 0 8px 16px rgba(149, 29, 219, 0.1),
204
- 0 12px 32px rgba(24, 1, 58, 0.12);
203
+ 0 8px 16px rgba(124, 91, 187, 0.1),
204
+ 0 12px 32px rgba(58, 42, 88, 0.12);
205
205
  --elevation-5:
206
- 0 16px 32px rgba(149, 29, 219, 0.12),
207
- 0 24px 64px rgba(24, 1, 58, 0.15);
206
+ 0 16px 32px rgba(124, 91, 187, 0.12),
207
+ 0 24px 64px rgba(58, 42, 88, 0.15);
208
208
 
209
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);
210
+ --shadow-sm: 0 1px 4px rgba(58, 42, 88, 0.1);
211
+ --shadow-md: 0 4px 12px rgba(58, 42, 88, 0.15);
212
+ --shadow-lg: 0 8px 24px rgba(58, 42, 88, 0.2);
213
+ --shadow-xl: 0 16px 48px rgba(58, 42, 88, 0.25);
214
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);
215
+ --shadow-glow-purple: 0 0 24px rgba(124, 91, 187, 0.4);
216
216
  --shadow-glow-galaxy: 0 0 32px rgba(193, 27, 150, 0.5);
217
217
 
218
218
  /* Clay/Neumorphism tokens */
@@ -234,12 +234,12 @@
234
234
  .dark {
235
235
  /* Cupcode Core Colors (mantém as mesmas cores base) */
236
236
  --cc-surface: 0 0% 100%;
237
- --cc-ink: 262 95% 11%;
237
+ --cc-ink: 261 35% 25%;
238
238
  --cc-pink: 330 87% 52%;
239
- --cc-purple: 277 77% 48%;
239
+ --cc-purple: 261 41% 55%;
240
240
 
241
241
  /* Base tokens - Dark Mode */
242
- --background: 262 90% 8%; /* #0d0021 - Deep purple almost black */
242
+ --background: 261 35% 25%; /* #3a2a58 - Deep purple almost black */
243
243
  --foreground: 0 0% 98%; /* #fafafa - Soft white */
244
244
 
245
245
  --card: 262 80% 12%; /* #1a0336 - Darker purple card */
@@ -248,7 +248,7 @@
248
248
  --popover: 262 75% 10%; /* #150028 - Deep purple popover */
249
249
  --popover-foreground: 0 0% 98%;
250
250
 
251
- --primary: 277 77% 58%; /* Lighter purple for dark mode */
251
+ --primary: 261 41% 65%; /* Lighter purple for dark mode */
252
252
  --primary-foreground: 0 0% 100%;
253
253
 
254
254
  --secondary: 330 87% 62%; /* Lighter pink for dark mode */
@@ -274,50 +274,50 @@
274
274
 
275
275
  --border: 262 40% 22%; /* #2b0f52 - Purple border */
276
276
  --input: 262 40% 22%;
277
- --ring: 277 77% 58%;
277
+ --ring: 261 41% 65%;
278
278
 
279
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);
280
+ --glass-bg: rgba(124, 91, 187, 0.12); /* Purple tinted glass */
281
+ --glass-bg-subtle: rgba(124, 91, 187, 0.08);
282
+ --glass-bg-strong: rgba(124, 91, 187, 0.20);
283
283
  --glass-border: rgba(237, 30, 121, 0.25); /* Pink border glow */
284
- --glass-border-subtle: rgba(149, 29, 219, 0.15);
284
+ --glass-border-subtle: rgba(124, 91, 187, 0.15);
285
285
  --glass-highlight: rgba(255, 255, 255, 0.1);
286
286
  --glass-ambient: rgba(237, 30, 121, 0.08); /* Pink ambient glow */
287
287
 
288
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);
289
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
290
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
291
291
  --cc-scrollbar-thumb-highlight: rgba(237, 30, 121, 0.24);
292
- --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.55);
292
+ --cc-scrollbar-thumb-hover: rgba(124, 91, 187, 0.55);
293
293
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
294
- --cc-scrollbar-glow: rgba(149, 29, 219, 0.5);
294
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
295
295
 
296
296
  /* Shadow tokens (Dark Mode) */
297
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);
298
+ --shadow-md: 0 4px 12px rgba(124, 91, 187, 0.3);
299
+ --shadow-lg: 0 8px 24px rgba(124, 91, 187, 0.4);
300
300
  --shadow-xl: 0 16px 48px rgba(237, 30, 121, 0.5);
301
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);
302
+ --shadow-glow-purple: 0 0 32px rgba(124, 91, 187, 0.6);
303
303
  --shadow-glow-galaxy: 0 0 48px rgba(193, 27, 150, 0.7);
304
304
 
305
305
  /* Elevation (Dark Mode) */
306
306
  --elevation-1:
307
307
  0 1px 2px rgba(237, 30, 121, 0.1),
308
- 0 1px 3px rgba(149, 29, 219, 0.15);
308
+ 0 1px 3px rgba(124, 91, 187, 0.15);
309
309
  --elevation-2:
310
310
  0 2px 4px rgba(237, 30, 121, 0.15),
311
- 0 3px 8px rgba(149, 29, 219, 0.2);
311
+ 0 3px 8px rgba(124, 91, 187, 0.2);
312
312
  --elevation-3:
313
313
  0 4px 8px rgba(237, 30, 121, 0.2),
314
- 0 6px 16px rgba(149, 29, 219, 0.25);
314
+ 0 6px 16px rgba(124, 91, 187, 0.25);
315
315
  --elevation-4:
316
316
  0 8px 16px rgba(237, 30, 121, 0.25),
317
- 0 12px 32px rgba(149, 29, 219, 0.3);
317
+ 0 12px 32px rgba(124, 91, 187, 0.3);
318
318
  --elevation-5:
319
319
  0 16px 32px rgba(237, 30, 121, 0.3),
320
- 0 24px 64px rgba(149, 29, 219, 0.4);
320
+ 0 24px 64px rgba(124, 91, 187, 0.4);
321
321
  }
322
322
 
323
323
  /* Global scrollbar color override: pink + auto theme */
@@ -333,7 +333,7 @@
333
333
  html.dark[data-cc-scrollbar-color="pink"] {
334
334
  --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
335
335
  --cc-scrollbar-thumb: rgba(237, 30, 121, 0.45);
336
- --cc-scrollbar-thumb-highlight: rgba(149, 29, 219, 0.3);
336
+ --cc-scrollbar-thumb-highlight: rgba(124, 91, 187, 0.3);
337
337
  --cc-scrollbar-thumb-hover: rgba(237, 30, 121, 0.6);
338
338
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
339
339
  --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);
@@ -341,12 +341,12 @@
341
341
 
342
342
  /* Forced theme: light */
343
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);
344
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.08);
345
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.26);
346
346
  --cc-scrollbar-thumb-highlight: rgba(255, 255, 255, 0.35);
347
- --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.34);
347
+ --cc-scrollbar-thumb-hover: rgba(124, 91, 187, 0.34);
348
348
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.34);
349
- --cc-scrollbar-glow: rgba(149, 29, 219, 0.35);
349
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.35);
350
350
  }
351
351
 
352
352
  html[data-cc-scrollbar-theme="light"][data-cc-scrollbar-color="pink"] {
@@ -360,18 +360,18 @@
360
360
 
361
361
  /* Forced theme: dark */
362
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);
363
+ --cc-scrollbar-track: rgba(124, 91, 187, 0.16);
364
+ --cc-scrollbar-thumb: rgba(124, 91, 187, 0.42);
365
365
  --cc-scrollbar-thumb-highlight: rgba(237, 30, 121, 0.24);
366
- --cc-scrollbar-thumb-hover: rgba(149, 29, 219, 0.55);
366
+ --cc-scrollbar-thumb-hover: rgba(124, 91, 187, 0.55);
367
367
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.2);
368
- --cc-scrollbar-glow: rgba(149, 29, 219, 0.5);
368
+ --cc-scrollbar-glow: rgba(124, 91, 187, 0.5);
369
369
  }
370
370
 
371
371
  html[data-cc-scrollbar-theme="dark"][data-cc-scrollbar-color="pink"] {
372
372
  --cc-scrollbar-track: rgba(237, 30, 121, 0.18);
373
373
  --cc-scrollbar-thumb: rgba(237, 30, 121, 0.45);
374
- --cc-scrollbar-thumb-highlight: rgba(149, 29, 219, 0.3);
374
+ --cc-scrollbar-thumb-highlight: rgba(124, 91, 187, 0.3);
375
375
  --cc-scrollbar-thumb-hover: rgba(237, 30, 121, 0.6);
376
376
  --cc-scrollbar-thumb-border: rgba(255, 255, 255, 0.22);
377
377
  --cc-scrollbar-glow: rgba(237, 30, 121, 0.58);