@cupcodev/ui 1.2.10 → 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.
- package/dist/index.cjs +10 -10
- package/dist/index.js +10 -10
- package/dist/styles.css +1 -1
- package/package.json +1 -1
- package/styles/base.css +18 -18
- package/styles/dock.css +10 -10
- package/styles/global.css +31 -31
- 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.
|
|
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(
|
|
59
|
-
--cc-scrollbar-thumb: rgba(
|
|
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(
|
|
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(
|
|
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(
|
|
68
|
-
--cc-scrollbar-thumb: rgba(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
95
|
-
--cc-scrollbar-thumb: rgba(
|
|
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(
|
|
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(
|
|
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(
|
|
104
|
-
--cc-scrollbar-thumb: rgba(
|
|
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(
|
|
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(
|
|
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(
|
|
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: #
|
|
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: #
|
|
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: #
|
|
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: #
|
|
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: #
|
|
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(
|
|
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(
|
|
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(
|
|
824
|
-
inset 0px -4px 1px -2px rgba(
|
|
825
|
-
0px 3px 6px 0px rgba(
|
|
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(
|
|
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, #
|
|
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(
|
|
157
|
-
--cc-scrollbar-thumb: rgba(
|
|
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(
|
|
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(
|
|
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(
|
|
166
|
-
--cc-scrollbar-thumb: rgba(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
193
|
-
--cc-scrollbar-thumb: rgba(
|
|
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(
|
|
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(
|
|
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(
|
|
202
|
-
--cc-scrollbar-thumb: rgba(
|
|
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(
|
|
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(
|
|
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(
|
|
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 #
|
|
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: #
|
|
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, #
|
|
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(
|
|
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 #
|
|
1196
|
+
border: solid 1px #7c5bbb14;
|
|
1197
1197
|
padding: 5px 10px;
|
|
1198
1198
|
border-radius: 20px;
|
|
1199
|
-
background: #
|
|
1199
|
+
background: #7c5bbb14;
|
|
1200
1200
|
overflow: hidden;
|
|
1201
1201
|
}
|
|
1202
1202
|
|
|
1203
1203
|
.orcamento-to-step .orcamento-steps-numeros-content {
|
|
1204
|
-
background: #
|
|
1204
|
+
background: #7c5bbb80;
|
|
1205
1205
|
width: 110%;
|
|
1206
1206
|
left: 50%;
|
|
1207
1207
|
transform: translate(-50%, 0px);
|
|
@@ -1306,12 +1306,12 @@
|
|
|
1306
1306
|
}
|
|
1307
1307
|
|
|
1308
1308
|
@layer utilities {
|
|
1309
|
-
.bg-\[\#
|
|
1310
|
-
background-color: #
|
|
1309
|
+
.bg-\[\#7c5bbb\]\/30 {
|
|
1310
|
+
background-color: #7c5bbb4d;
|
|
1311
1311
|
}
|
|
1312
1312
|
|
|
1313
|
-
.dark .bg-\[\#
|
|
1314
|
-
background-color: #
|
|
1313
|
+
.dark .bg-\[\#7c5bbb\]\/30 {
|
|
1314
|
+
background-color: #3a2a5836;
|
|
1315
1315
|
backdrop-filter: blur(10px);
|
|
1316
1316
|
-webkit-backdrop-filter: blur(10px);
|
|
1317
1317
|
}
|
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:
|
|
5
|
+
--cc-ink: 261 35% 25%; /* #3a2a58 */
|
|
6
6
|
--cc-pink: 330 87% 52%; /* #ed1e79 */
|
|
7
|
-
--cc-purple:
|
|
7
|
+
--cc-purple: 261 41% 55%; /* #7c5bbb */
|
|
8
8
|
|
|
9
9
|
/* Legacy color variables (compatibilidade) */
|
|
10
10
|
--color-one: #ed1e79;
|
|
11
|
-
--color-two: #
|
|
12
|
-
--color-three: #
|
|
11
|
+
--color-two: #7c5bbb;
|
|
12
|
+
--color-three: #3a2a58;
|
|
13
13
|
--color-four: #ffffff;
|
|
14
|
-
--cupcode-dark: #
|
|
14
|
+
--cupcode-dark: #3a2a58;
|
|
15
15
|
--cupcode-pink: #ed1e79;
|
|
16
|
-
--cupcode-purple: #
|
|
16
|
+
--cupcode-purple: #7c5bbb;
|
|
17
17
|
--cupcode-white: #ffffff;
|
|
18
18
|
|
|
19
19
|
/* Base tokens */
|
|
20
20
|
--background: 0 0% 100%;
|
|
21
|
-
--foreground:
|
|
21
|
+
--foreground: 261 35% 25%;
|
|
22
22
|
|
|
23
23
|
--card: 0 0% 100%;
|
|
24
|
-
--card-foreground:
|
|
24
|
+
--card-foreground: 261 35% 25%;
|
|
25
25
|
|
|
26
26
|
--popover: 0 0% 100%;
|
|
27
|
-
--popover-foreground:
|
|
27
|
+
--popover-foreground: 261 35% 25%;
|
|
28
28
|
|
|
29
|
-
--primary:
|
|
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:
|
|
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(
|
|
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(
|
|
77
|
-
--cc-scrollbar-thumb: rgba(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
195
|
-
0 1px 3px rgba(
|
|
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(
|
|
198
|
-
0 3px 8px rgba(
|
|
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(
|
|
201
|
-
0 6px 16px rgba(
|
|
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(
|
|
204
|
-
0 12px 32px rgba(
|
|
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(
|
|
207
|
-
0 24px 64px rgba(
|
|
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(
|
|
211
|
-
--shadow-md: 0 4px 12px rgba(
|
|
212
|
-
--shadow-lg: 0 8px 24px rgba(
|
|
213
|
-
--shadow-xl: 0 16px 48px rgba(
|
|
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(
|
|
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:
|
|
237
|
+
--cc-ink: 261 35% 25%;
|
|
238
238
|
--cc-pink: 330 87% 52%;
|
|
239
|
-
--cc-purple:
|
|
239
|
+
--cc-purple: 261 41% 55%;
|
|
240
240
|
|
|
241
241
|
/* Base tokens - Dark Mode */
|
|
242
|
-
--background:
|
|
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:
|
|
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
|
+
--ring: 261 41% 65%;
|
|
278
278
|
|
|
279
279
|
/* Glass Morphism tokens (Dark Mode) */
|
|
280
|
-
--glass-bg: rgba(
|
|
281
|
-
--glass-bg-subtle: rgba(
|
|
282
|
-
--glass-bg-strong: rgba(
|
|
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(
|
|
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(
|
|
290
|
-
--cc-scrollbar-thumb: rgba(
|
|
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(
|
|
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(
|
|
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(
|
|
299
|
-
--shadow-lg: 0 8px 24px rgba(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
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(
|
|
345
|
-
--cc-scrollbar-thumb: rgba(
|
|
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(
|
|
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(
|
|
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(
|
|
364
|
-
--cc-scrollbar-thumb: rgba(
|
|
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(
|
|
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(
|
|
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(
|
|
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);
|