prometeo-design-system 2.9.1 → 2.9.2
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/{CardProfile-CsytJlKZ.js → CardProfile-WHoeSibd.js} +8 -8
- package/dist/CardProfile.es.js +1 -1
- package/dist/CheckBox.es.js +4 -4
- package/dist/DatePicker.es.js +62 -62
- package/dist/DrawerDesktop.es.js +1 -1
- package/dist/DropZone.es.js +5 -5
- package/dist/FAButton.es.js +1 -1
- package/dist/{HelperComponent-g_xuKWzK.js → HelperComponent-BeNlTMqI.js} +7 -7
- package/dist/Icons/Icons.d.ts +1 -1
- package/dist/Icons.d.ts +0 -4
- package/dist/Icons.es.js +1119 -3
- package/dist/{ImageGallery-Ckxg9OIC.js → ImageGallery-WKzUevOQ.js} +34 -34
- package/dist/ImageGallery.es.js +1 -1
- package/dist/{Input-Cck37DpG.js → Input-Bdiozi8s.js} +11 -11
- package/dist/Input.es.js +1 -1
- package/dist/InputMultiple.es.js +34 -34
- package/dist/Logo.es.js +1 -1
- package/dist/OtpInput.es.js +43 -43
- package/dist/RadioButton.es.js +1 -1
- package/dist/{Select-BD5FTxVw.js → Select-L7JCe1-i.js} +3 -3
- package/dist/Select.es.js +1 -1
- package/dist/SelectSearch.es.js +1 -1
- package/dist/Steps.es.js +1 -1
- package/dist/Toast.es.js +22 -22
- package/dist/Tooltip.es.js +1 -1
- package/dist/exports/Icons.d.ts +1 -2
- package/dist/index.d.ts +1 -0
- package/dist/prometeo-design-system.es.js +190 -131
- package/dist/styles.css +1 -0
- package/dist/styles.d.ts +1 -0
- package/package.json +2 -2
- package/src/styles/app.css +1 -1313
- package/src/styles/base.css +480 -463
- package/dist/Icons-DtFC5DJ7.js +0 -1079
- package/dist/prometeo-design-system.css +0 -1
package/src/styles/base.css
CHANGED
|
@@ -1,167 +1,176 @@
|
|
|
1
1
|
@import "./fonts.css";
|
|
2
2
|
@import "./palette.css";
|
|
3
3
|
@import "./utilities.css";
|
|
4
|
+
|
|
5
|
+
/* Component Styles */
|
|
4
6
|
@import "../components/Drawer/Drawer.styles.css";
|
|
7
|
+
@import "../components/DatePicker/DatePicker.css";
|
|
8
|
+
@import "../components/Image/ImageGallery.css";
|
|
9
|
+
@import "../components/Skeleton/skeleton.styles.css";
|
|
10
|
+
@import "../components/Spinner/spinner.css";
|
|
11
|
+
@import "../components/TabSwitch/Tabswitch.styles.css";
|
|
12
|
+
|
|
5
13
|
|
|
6
14
|
* {
|
|
7
|
-
|
|
15
|
+
font-family: "Montserrat", sans-serif;
|
|
8
16
|
}
|
|
9
17
|
|
|
10
18
|
body {
|
|
11
|
-
|
|
19
|
+
font-family: "Montserrat", sans-serif;
|
|
12
20
|
}
|
|
13
21
|
|
|
22
|
+
|
|
14
23
|
/* Prometeo Fonts */
|
|
15
24
|
|
|
16
25
|
@utility prometeo-fonts-display-large {
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
26
|
+
font-family: 'Montserrat', sans-serif;
|
|
27
|
+
font-weight: 600;
|
|
28
|
+
font-size: 56px;
|
|
29
|
+
line-height: 64px;
|
|
30
|
+
color: var(--black);
|
|
22
31
|
}
|
|
23
32
|
|
|
24
33
|
@utility prometeo-fonts-display-medium {
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
34
|
+
font-family: 'Montserrat', sans-serif;
|
|
35
|
+
font-weight: 600;
|
|
36
|
+
font-size: 48px;
|
|
37
|
+
line-height: 56px;
|
|
38
|
+
color: var(--black);
|
|
30
39
|
}
|
|
31
40
|
|
|
32
41
|
@utility prometeo-fonts-display-small {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
42
|
+
font-family: 'Montserrat', sans-serif;
|
|
43
|
+
font-weight: 600;
|
|
44
|
+
font-size: 36px;
|
|
45
|
+
line-height: 44px;
|
|
46
|
+
color: var(--black);
|
|
38
47
|
}
|
|
39
48
|
|
|
40
49
|
@utility prometeo-fonts-headline-large {
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
50
|
+
font-family: 'Montserrat', sans-serif;
|
|
51
|
+
font-weight: 700;
|
|
52
|
+
font-size: 32px;
|
|
53
|
+
line-height: 40px;
|
|
54
|
+
color: var(--neutral-100);
|
|
46
55
|
}
|
|
47
56
|
|
|
48
57
|
@utility prometeo-fonts-headline-medium {
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
58
|
+
font-family: 'Montserrat', sans-serif;
|
|
59
|
+
font-weight: 600;
|
|
60
|
+
font-size: 28px;
|
|
61
|
+
line-height: 32px;
|
|
62
|
+
color: var(--neutral-100);
|
|
54
63
|
}
|
|
55
64
|
|
|
56
65
|
@utility prometeo-fonts-headline-small {
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
66
|
+
font-family: 'Montserrat', sans-serif;
|
|
67
|
+
font-weight: 600;
|
|
68
|
+
font-size: 24px;
|
|
69
|
+
line-height: 30px;
|
|
70
|
+
color: var(--neutral-100);
|
|
62
71
|
}
|
|
63
72
|
|
|
64
73
|
@utility prometeo-fonts-title-large {
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
74
|
+
font-family: 'Montserrat', sans-serif;
|
|
75
|
+
font-weight: 700;
|
|
76
|
+
font-size: 24px;
|
|
77
|
+
line-height: 30px;
|
|
78
|
+
color: var(--neutral-100);
|
|
70
79
|
}
|
|
71
80
|
|
|
72
81
|
@utility prometeo-fonts-title-medium {
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
82
|
+
font-family: 'Montserrat', sans-serif;
|
|
83
|
+
font-weight: 700;
|
|
84
|
+
font-size: 16px;
|
|
85
|
+
line-height: 20px;
|
|
86
|
+
color: var(--neutral-100);
|
|
78
87
|
}
|
|
79
88
|
|
|
80
89
|
@utility prometeo-fonts-title-small {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
90
|
+
font-family: 'Montserrat', sans-serif;
|
|
91
|
+
font-weight: 700;
|
|
92
|
+
font-size: 14px;
|
|
93
|
+
line-height: 18px;
|
|
94
|
+
color: var(--neutral-100);
|
|
86
95
|
}
|
|
87
96
|
|
|
88
97
|
@utility prometeo-fonts-body-xlarge {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
98
|
+
font-family: 'Montserrat', sans-serif;
|
|
99
|
+
font-weight: 400;
|
|
100
|
+
font-size: 24px;
|
|
101
|
+
line-height: 30px;
|
|
102
|
+
color: var(--neutral-100);
|
|
94
103
|
}
|
|
95
104
|
|
|
96
105
|
@utility prometeo-fonts-body-large {
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
106
|
+
font-family: 'Montserrat', sans-serif;
|
|
107
|
+
font-weight: 400;
|
|
108
|
+
font-size: 16px;
|
|
109
|
+
line-height: 24px;
|
|
110
|
+
color: var(--neutral-100);
|
|
102
111
|
}
|
|
103
112
|
|
|
104
113
|
@utility prometeo-fonts-body-medium {
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
114
|
+
font-family: 'Montserrat', sans-serif;
|
|
115
|
+
font-weight: 400;
|
|
116
|
+
font-size: 14px;
|
|
117
|
+
line-height: 18px;
|
|
118
|
+
color: var(--neutral-100);
|
|
110
119
|
}
|
|
111
120
|
|
|
112
121
|
@utility prometeo-fonts-body-small {
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
122
|
+
font-family: 'Montserrat', sans-serif;
|
|
123
|
+
font-weight: 400;
|
|
124
|
+
font-size: 12px;
|
|
125
|
+
line-height: 14px;
|
|
126
|
+
color: var(--neutral-100);
|
|
118
127
|
}
|
|
119
128
|
|
|
120
129
|
@utility prometeo-fonts-body-xsmall {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
130
|
+
font-family: 'Montserrat', sans-serif;
|
|
131
|
+
font-weight: 400;
|
|
132
|
+
font-size: 10px;
|
|
133
|
+
line-height: 12px;
|
|
134
|
+
color: var(--neutral-100);
|
|
126
135
|
}
|
|
127
136
|
|
|
128
137
|
@utility prometeo-fonts-label-xlarge {
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
138
|
+
font-family: 'Montserrat', sans-serif;
|
|
139
|
+
font-weight: 600;
|
|
140
|
+
font-size: 16px;
|
|
141
|
+
line-height: 20px;
|
|
142
|
+
color: var(--neutral-100);
|
|
134
143
|
}
|
|
135
144
|
|
|
136
145
|
@utility prometeo-fonts-label-large {
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
146
|
+
font-family: 'Montserrat', sans-serif;
|
|
147
|
+
font-weight: 600;
|
|
148
|
+
font-size: 14px;
|
|
149
|
+
line-height: 18px;
|
|
150
|
+
color: var(--neutral-100);
|
|
142
151
|
}
|
|
143
152
|
|
|
144
153
|
@utility prometeo-fonts-label-medium {
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
154
|
+
font-family: 'Montserrat', sans-serif;
|
|
155
|
+
font-weight: 600;
|
|
156
|
+
font-size: 12px;
|
|
157
|
+
line-height: 18px;
|
|
158
|
+
color: var(--neutral-100);
|
|
150
159
|
}
|
|
151
160
|
@utility prometeo-fonts-label-small {
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
161
|
+
font-family: 'Montserrat', sans-serif;
|
|
162
|
+
font-weight: 600;
|
|
163
|
+
font-size: 12px;
|
|
164
|
+
line-height: 14px;
|
|
165
|
+
color: var(--neutral-100);
|
|
157
166
|
}
|
|
158
167
|
|
|
159
168
|
@utility prometeo-fonts-label-xsmall {
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
169
|
+
font-family: 'Montserrat', sans-serif;
|
|
170
|
+
font-weight: 600;
|
|
171
|
+
font-size: 10px;
|
|
172
|
+
line-height: 12px;
|
|
173
|
+
color: var(--neutral-100);
|
|
165
174
|
}
|
|
166
175
|
|
|
167
176
|
/* <!-- COLORS --> */
|
|
@@ -169,1146 +178,1154 @@ body {
|
|
|
169
178
|
/* GRADIENTS */
|
|
170
179
|
|
|
171
180
|
@utility prometeo-gradient-bg {
|
|
172
|
-
|
|
173
|
-
to bottom,
|
|
174
|
-
var(--primary-900),
|
|
175
|
-
var(--primary-950)
|
|
176
|
-
);
|
|
181
|
+
background: linear-gradient(to bottom, var(--primary-900), var(--primary-950));
|
|
177
182
|
}
|
|
178
183
|
|
|
179
184
|
@utility prometeo-gradient-border {
|
|
180
|
-
|
|
181
|
-
to bottom,
|
|
182
|
-
var(--primary-950) 0%,
|
|
183
|
-
var(--primary-900) 100%
|
|
184
|
-
);
|
|
185
|
+
border-image: linear-gradient(to bottom, var(--primary-950) 0%, var(--primary-900) 100%);
|
|
185
186
|
}
|
|
186
187
|
|
|
187
188
|
/* FOUNDATION --> */
|
|
188
189
|
|
|
189
190
|
@utility text-white-prometeo {
|
|
190
|
-
|
|
191
|
+
color: var(--white);
|
|
191
192
|
}
|
|
192
193
|
|
|
193
194
|
@utility text-black-prometeo {
|
|
194
|
-
|
|
195
|
+
color: var(--black);
|
|
195
196
|
}
|
|
196
197
|
|
|
197
198
|
/* PRIMARY --> */
|
|
198
199
|
|
|
199
200
|
@utility text-primary {
|
|
200
|
-
|
|
201
|
+
color: var(--primary-500);
|
|
201
202
|
}
|
|
202
203
|
|
|
203
204
|
/* PRIMARY DEFAULT */
|
|
204
205
|
@utility text-primary-default {
|
|
205
|
-
|
|
206
|
+
color: var(--primary-400);
|
|
206
207
|
}
|
|
207
208
|
|
|
208
209
|
@utility text-primary-default-default {
|
|
209
|
-
|
|
210
|
+
color: var(--primary-400);
|
|
210
211
|
}
|
|
211
212
|
|
|
212
213
|
@utility text-primary-default-hover {
|
|
213
|
-
|
|
214
|
+
color: var(--primary-500);
|
|
214
215
|
}
|
|
215
216
|
|
|
216
217
|
@utility text-primary-default-pressed {
|
|
217
|
-
|
|
218
|
+
color: var(--primary-600);
|
|
218
219
|
}
|
|
219
220
|
|
|
220
221
|
@utility text-primary-default-focused {
|
|
221
|
-
|
|
222
|
+
color: var(--primary-600);
|
|
222
223
|
}
|
|
223
224
|
|
|
224
225
|
@utility text-primary-default-disabled {
|
|
225
|
-
|
|
226
|
+
color: var(--neutral-800);
|
|
226
227
|
}
|
|
227
228
|
|
|
229
|
+
|
|
228
230
|
@utility text-primary-light {
|
|
229
|
-
|
|
231
|
+
color: var(--primary-400);
|
|
230
232
|
}
|
|
231
233
|
|
|
232
234
|
@utility text-primary-dark {
|
|
233
|
-
|
|
235
|
+
color: var(--primary-600);
|
|
234
236
|
}
|
|
235
237
|
|
|
236
238
|
/* PRIMARY MEDIUM */
|
|
237
239
|
|
|
238
240
|
@utility text-primary-medium-default {
|
|
239
|
-
|
|
241
|
+
color: var(--primary-400);
|
|
240
242
|
}
|
|
241
243
|
|
|
242
244
|
@utility text-primary-medium-hover {
|
|
243
|
-
|
|
245
|
+
color: var(--primary-300);
|
|
244
246
|
}
|
|
245
247
|
|
|
246
248
|
@utility text-primary-medium-pressed {
|
|
247
|
-
|
|
249
|
+
color: var(--primary-200);
|
|
248
250
|
}
|
|
249
251
|
|
|
250
252
|
@utility text-primary-medium-focused {
|
|
251
|
-
|
|
253
|
+
color: var(--primary-200);
|
|
252
254
|
}
|
|
253
255
|
|
|
254
256
|
@utility text-primary-medium-disabled {
|
|
255
|
-
|
|
257
|
+
color: var(--neutral-800);
|
|
256
258
|
}
|
|
257
259
|
|
|
260
|
+
|
|
261
|
+
|
|
258
262
|
/* NEUTRAL --> */
|
|
259
263
|
|
|
260
264
|
/* NEUTRAL DEFAULT */
|
|
261
265
|
|
|
262
266
|
@utility text-neutral {
|
|
263
|
-
|
|
267
|
+
color: var(--neutral-500);
|
|
264
268
|
}
|
|
265
269
|
|
|
266
270
|
@utility text-label-default {
|
|
267
|
-
|
|
271
|
+
color: var(--neutral-400);
|
|
268
272
|
}
|
|
269
273
|
|
|
270
274
|
@utility text-neutral-default-default {
|
|
271
|
-
|
|
275
|
+
color: var(--neutral-200);
|
|
272
276
|
}
|
|
273
277
|
|
|
274
278
|
@utility text-neutral-default-hover {
|
|
275
|
-
|
|
279
|
+
color: var(--neutral-300);
|
|
276
280
|
}
|
|
277
281
|
|
|
278
282
|
@utility text-neutral-default-pressed {
|
|
279
|
-
|
|
283
|
+
color: var(--neutral-400);
|
|
280
284
|
}
|
|
281
285
|
|
|
282
286
|
@utility text-neutral-default-focused {
|
|
283
|
-
|
|
287
|
+
color: var(--neutral-400);
|
|
284
288
|
}
|
|
285
289
|
|
|
286
290
|
@utility text-neutral-default-disabled {
|
|
287
|
-
|
|
291
|
+
color: var(--neutral-500);
|
|
288
292
|
}
|
|
289
293
|
|
|
290
294
|
/* NEUTRAL STRONG */
|
|
291
295
|
@utility text-neutral-strong {
|
|
292
|
-
|
|
296
|
+
color: var(--neutral-100);
|
|
293
297
|
}
|
|
294
298
|
|
|
295
299
|
@utility text-neutral-strong-hover {
|
|
296
|
-
|
|
300
|
+
color: var(--neutral-200);
|
|
297
301
|
}
|
|
298
302
|
|
|
299
303
|
@utility text-neutral-strong-pressed {
|
|
300
|
-
|
|
304
|
+
color: var(--neutral-300);
|
|
301
305
|
}
|
|
302
306
|
|
|
303
307
|
@utility text-neutral-strong-focused {
|
|
304
|
-
|
|
308
|
+
color: var(--neutral-300);
|
|
305
309
|
}
|
|
306
310
|
|
|
307
311
|
@utility text-neutral-strong-disabled {
|
|
308
|
-
|
|
312
|
+
color: var(--neutral-500);
|
|
309
313
|
}
|
|
310
314
|
|
|
311
315
|
@utility text-neutral-strong-default {
|
|
312
|
-
|
|
316
|
+
color: var(--neutral-100);
|
|
313
317
|
}
|
|
314
318
|
|
|
315
319
|
/* NEUTRAL MEDIUM */
|
|
316
320
|
|
|
317
321
|
@utility text-neutral-medium {
|
|
318
|
-
|
|
322
|
+
color: var(--neutral-400);
|
|
319
323
|
}
|
|
320
324
|
|
|
321
325
|
@utility text-neutral-medium-default {
|
|
322
|
-
|
|
326
|
+
color: var(--neutral-400);
|
|
323
327
|
}
|
|
324
328
|
|
|
325
329
|
@utility text-neutral-medium-hover {
|
|
326
|
-
|
|
330
|
+
color: var(--neutral-500);
|
|
327
331
|
}
|
|
328
332
|
|
|
329
333
|
@utility text-neutral-medium-pressed {
|
|
330
|
-
|
|
334
|
+
color: var(--neutral-600);
|
|
331
335
|
}
|
|
332
336
|
|
|
333
337
|
@utility text-neutral-medium-focused {
|
|
334
|
-
|
|
338
|
+
color: var(--neutral-600);
|
|
335
339
|
}
|
|
336
340
|
|
|
337
341
|
@utility text-neutral-medium-disabled {
|
|
338
|
-
|
|
342
|
+
color: var(--neutral-500);
|
|
339
343
|
}
|
|
340
344
|
|
|
345
|
+
|
|
341
346
|
/* NEUTRAL WEAK */
|
|
342
347
|
|
|
343
348
|
@utility text-neutral-weak {
|
|
344
|
-
|
|
349
|
+
color: var(--neutral-900);
|
|
345
350
|
}
|
|
346
351
|
|
|
347
352
|
@utility text-neutral-weak-default {
|
|
348
|
-
|
|
353
|
+
color: var(--neutral-900);
|
|
349
354
|
}
|
|
350
355
|
|
|
351
356
|
@utility text-neutral-weak-hover {
|
|
352
|
-
|
|
357
|
+
color: var(--neutral-800);
|
|
353
358
|
}
|
|
354
359
|
|
|
355
360
|
@utility text-neutral-weak-pressed {
|
|
356
|
-
|
|
361
|
+
color: var(--neutral-800);
|
|
357
362
|
}
|
|
358
363
|
|
|
359
364
|
@utility text-neutral-weak-focused {
|
|
360
|
-
|
|
365
|
+
color: var(--neutral-800);
|
|
361
366
|
}
|
|
362
367
|
|
|
363
368
|
@utility text-neutral-weak-disabled {
|
|
364
|
-
|
|
369
|
+
color: var(--neutral-500);
|
|
365
370
|
}
|
|
366
371
|
|
|
367
372
|
/* TEXT SUCCESS --> */
|
|
368
373
|
|
|
369
374
|
/* SUCCESS DEFAULT */
|
|
370
375
|
@utility text-success {
|
|
371
|
-
|
|
376
|
+
color: var(--success-500);
|
|
372
377
|
}
|
|
373
378
|
|
|
374
379
|
@utility text-success-default-default {
|
|
375
|
-
|
|
380
|
+
color: var(--success-500);
|
|
376
381
|
}
|
|
377
382
|
|
|
378
383
|
@utility text-success-default-hover {
|
|
379
|
-
|
|
384
|
+
color: var(--success-500);
|
|
380
385
|
}
|
|
381
386
|
|
|
382
387
|
@utility text-success-default-pressed {
|
|
383
|
-
|
|
388
|
+
color: var(--success-700);
|
|
384
389
|
}
|
|
385
390
|
|
|
386
391
|
@utility text-success-default-focused {
|
|
387
|
-
|
|
392
|
+
color: var(--success-500);
|
|
388
393
|
}
|
|
389
394
|
|
|
390
395
|
@utility text-success-default-disabled {
|
|
391
|
-
|
|
396
|
+
color: var(--neutral-800);
|
|
392
397
|
}
|
|
393
398
|
|
|
394
399
|
/* TEXT SUCCESS MEDIUM */
|
|
395
400
|
|
|
396
401
|
@utility text-success-medium-default {
|
|
397
|
-
|
|
402
|
+
color: var(--success-500);
|
|
398
403
|
}
|
|
399
404
|
|
|
400
405
|
@utility text-success-medium-hover {
|
|
401
|
-
|
|
406
|
+
color: var(--success-500);
|
|
402
407
|
}
|
|
403
408
|
|
|
404
409
|
@utility text-success-medium-pressed {
|
|
405
|
-
|
|
410
|
+
color: var(--success-500);
|
|
406
411
|
}
|
|
407
412
|
|
|
408
413
|
@utility text-success-medium-focused {
|
|
409
|
-
|
|
414
|
+
color: var(--success-500);
|
|
410
415
|
}
|
|
411
416
|
|
|
412
417
|
@utility text-success-medium-disabled {
|
|
413
|
-
|
|
418
|
+
color: var(--neutral-800);
|
|
414
419
|
}
|
|
415
420
|
|
|
421
|
+
|
|
416
422
|
/* TEXT ERROR --> */
|
|
417
423
|
@utility text-error {
|
|
418
|
-
|
|
424
|
+
color: var(--error-500);
|
|
419
425
|
}
|
|
420
426
|
|
|
421
427
|
/* ERROR DEFAULT */
|
|
422
428
|
|
|
423
429
|
@utility text-error-default-default {
|
|
424
|
-
|
|
430
|
+
color: var(--error-500);
|
|
425
431
|
}
|
|
426
432
|
|
|
427
433
|
@utility text-error-default-hover {
|
|
428
|
-
|
|
434
|
+
color: var(--error-600);
|
|
429
435
|
}
|
|
430
436
|
|
|
431
437
|
@utility text-error-default-pressed {
|
|
432
|
-
|
|
438
|
+
color: var(--error-700);
|
|
433
439
|
}
|
|
434
440
|
|
|
435
441
|
@utility text-error-default-focused {
|
|
436
|
-
|
|
442
|
+
color: var(--error-700);
|
|
437
443
|
}
|
|
438
444
|
|
|
439
445
|
@utility text-error-default-disabled {
|
|
440
|
-
|
|
446
|
+
color: var(--neutral-800);
|
|
441
447
|
}
|
|
442
448
|
|
|
443
449
|
/* ERROR MEDIUM */
|
|
444
450
|
@utility text-error-medium-default {
|
|
445
|
-
|
|
451
|
+
color: var(--error-500);
|
|
446
452
|
}
|
|
447
453
|
|
|
448
454
|
@utility text-error-medium-hover {
|
|
449
|
-
|
|
455
|
+
color: var(--error-500);
|
|
450
456
|
}
|
|
451
457
|
|
|
452
458
|
@utility text-error-medium-pressed {
|
|
453
|
-
|
|
459
|
+
color: var(--error-700);
|
|
454
460
|
}
|
|
455
461
|
|
|
456
462
|
@utility text-error-medium-focused {
|
|
457
|
-
|
|
463
|
+
color: var(--error-700);
|
|
458
464
|
}
|
|
459
465
|
|
|
460
466
|
@utility text-error-medium-disabled {
|
|
461
|
-
|
|
467
|
+
color: var(--neutral-800);
|
|
462
468
|
}
|
|
463
469
|
|
|
464
470
|
/* ERROR MISC */
|
|
465
471
|
|
|
466
472
|
@utility text-error-light {
|
|
467
|
-
|
|
473
|
+
color: var(--error-400);
|
|
468
474
|
}
|
|
469
475
|
|
|
470
476
|
@utility text-error-dark {
|
|
471
|
-
|
|
477
|
+
color: var(--error-600);
|
|
472
478
|
}
|
|
473
479
|
|
|
474
480
|
@utility text-error-weak-default {
|
|
475
|
-
|
|
481
|
+
color: var(--error-950);
|
|
476
482
|
}
|
|
477
483
|
|
|
478
484
|
/* TEXT WARNING --> */
|
|
479
485
|
/* WARNING DEFAULT */
|
|
480
486
|
@utility text-warning {
|
|
481
|
-
|
|
487
|
+
color: var(--warning-500);
|
|
482
488
|
}
|
|
483
489
|
|
|
484
490
|
@utility text-warning-default-default {
|
|
485
|
-
|
|
491
|
+
color: var(--warning-500);
|
|
486
492
|
}
|
|
487
493
|
|
|
488
494
|
@utility text-warning-default-hover {
|
|
489
|
-
|
|
495
|
+
color: var(--warning-600);
|
|
490
496
|
}
|
|
491
497
|
|
|
492
498
|
@utility text-warning-default-pressed {
|
|
493
|
-
|
|
499
|
+
color: var(--warning-700);
|
|
494
500
|
}
|
|
495
501
|
|
|
496
502
|
@utility text-warning-default-focused {
|
|
497
|
-
|
|
503
|
+
color: var(--warning-700);
|
|
498
504
|
}
|
|
499
505
|
|
|
500
506
|
@utility text-warning-default-disabled {
|
|
501
|
-
|
|
507
|
+
color: var(--neutral-800);
|
|
502
508
|
}
|
|
503
509
|
|
|
504
510
|
/* WARNING MEDIUM */
|
|
505
511
|
@utility text-warning-medium-default {
|
|
506
|
-
|
|
512
|
+
color: var(--warning-500);
|
|
507
513
|
}
|
|
508
514
|
|
|
509
515
|
@utility text-warning-medium-hover {
|
|
510
|
-
|
|
516
|
+
color: var(--warning-500);
|
|
511
517
|
}
|
|
512
518
|
|
|
513
519
|
@utility text-warning-medium-pressed {
|
|
514
|
-
|
|
520
|
+
color: var(--warning-600);
|
|
515
521
|
}
|
|
516
522
|
|
|
517
523
|
@utility text-warning-medium-focused {
|
|
518
|
-
|
|
524
|
+
color: var(--warning-600);
|
|
519
525
|
}
|
|
520
526
|
|
|
521
527
|
@utility text-warning-medium-disabled {
|
|
522
|
-
|
|
528
|
+
color: var(--neutral-800);
|
|
523
529
|
}
|
|
524
530
|
|
|
525
531
|
/* WARNING MISC */
|
|
526
532
|
|
|
527
533
|
@utility text-warning-light {
|
|
528
|
-
|
|
534
|
+
color: var(--warning-400);
|
|
529
535
|
}
|
|
530
536
|
|
|
531
537
|
@utility text-warning-dark {
|
|
532
|
-
|
|
538
|
+
color: var(--warning-600);
|
|
533
539
|
}
|
|
534
540
|
|
|
541
|
+
|
|
535
542
|
/* PENDING --> */
|
|
536
543
|
@utility text-pending {
|
|
537
|
-
|
|
544
|
+
color: var(--pending-500);
|
|
538
545
|
}
|
|
539
546
|
|
|
540
547
|
@utility text-pending-light {
|
|
541
|
-
|
|
548
|
+
color: var(--pending-300);
|
|
542
549
|
}
|
|
543
550
|
|
|
544
551
|
/* PROGRESS --> */
|
|
545
552
|
@utility text-progress {
|
|
546
|
-
|
|
553
|
+
color: var(--progress-500);
|
|
547
554
|
}
|
|
548
555
|
|
|
549
556
|
@utility text-progress-light {
|
|
550
|
-
|
|
557
|
+
color: var(--progress-300);
|
|
551
558
|
}
|
|
552
559
|
|
|
553
560
|
/* <!-- BACKGROUND --> */
|
|
554
561
|
@utility bg-primary {
|
|
555
|
-
|
|
562
|
+
background-color: var(--primary-500);
|
|
556
563
|
}
|
|
557
564
|
|
|
558
565
|
@utility bg-primary-default-default {
|
|
559
|
-
|
|
566
|
+
background-color: var(--primary-500);
|
|
560
567
|
}
|
|
561
568
|
|
|
562
569
|
@utility bg-primary-default-disabled {
|
|
563
|
-
|
|
570
|
+
background-color: var(--neutral-600);
|
|
564
571
|
}
|
|
565
572
|
|
|
566
573
|
@utility bg-primary-default-hover {
|
|
567
|
-
|
|
574
|
+
background-color: var(--primary-600);
|
|
568
575
|
}
|
|
569
576
|
|
|
570
577
|
@utility bg-primary-default-pressed {
|
|
571
|
-
|
|
578
|
+
background-color: var(--primary-700);
|
|
572
579
|
}
|
|
573
580
|
|
|
574
581
|
@utility bg-primary-default-focused {
|
|
575
|
-
|
|
582
|
+
background-color: var(--primary-700);
|
|
576
583
|
}
|
|
577
584
|
|
|
578
585
|
@utility bg-primary-medium-default {
|
|
579
|
-
|
|
586
|
+
background-color: var(--primary-200);
|
|
580
587
|
}
|
|
581
588
|
|
|
582
589
|
@utility bg-primary-medium-disabled {
|
|
583
|
-
|
|
590
|
+
background-color: var(--neutral-800);
|
|
584
591
|
}
|
|
585
592
|
|
|
586
593
|
@utility bg-primary-light {
|
|
587
|
-
|
|
594
|
+
background-color: var(--primary-400);
|
|
588
595
|
}
|
|
589
596
|
|
|
590
597
|
@utility bg-primary-dark {
|
|
591
|
-
|
|
598
|
+
background-color: var(--primary-600);
|
|
592
599
|
}
|
|
593
600
|
|
|
594
601
|
/* NEUTRAL --> */
|
|
595
602
|
@utility bg-neutral {
|
|
596
|
-
|
|
603
|
+
background-color: var(--neutral-500);
|
|
597
604
|
}
|
|
598
605
|
|
|
599
606
|
@utility bg-neutral-default-default {
|
|
600
|
-
|
|
607
|
+
background-color: var(--neutral-900);
|
|
601
608
|
}
|
|
602
609
|
|
|
603
610
|
@utility bg-neutral-default-default-light {
|
|
604
|
-
|
|
611
|
+
background-color: var(--neutral-200);
|
|
605
612
|
}
|
|
606
613
|
|
|
607
614
|
@utility bg-neutral-default-pressed {
|
|
608
|
-
|
|
615
|
+
background-color: var(--neutral-700);
|
|
609
616
|
}
|
|
610
617
|
|
|
611
618
|
@utility bg-neutral-default-hover {
|
|
612
|
-
|
|
619
|
+
background-color: var(--neutral-800);
|
|
613
620
|
}
|
|
614
621
|
|
|
615
622
|
@utility bg-neutral-default-hover-light {
|
|
616
|
-
|
|
623
|
+
background-color: var(--neutral-400);
|
|
617
624
|
}
|
|
618
625
|
|
|
619
626
|
@utility bg-neutral-strong {
|
|
620
|
-
|
|
627
|
+
background-color: var(--neutral-100);
|
|
621
628
|
}
|
|
622
629
|
|
|
623
630
|
@utility bg-neutral-strong-default {
|
|
624
|
-
|
|
631
|
+
background-color: var(--neutral-925);
|
|
625
632
|
}
|
|
626
633
|
|
|
627
634
|
@utility bg-neutral-strong-medium-default {
|
|
628
|
-
|
|
635
|
+
background-color: var(--neutral-800);
|
|
629
636
|
}
|
|
630
637
|
|
|
631
638
|
@utility bg-neutral-medium {
|
|
632
|
-
|
|
639
|
+
background-color: var(--neutral-400);
|
|
633
640
|
}
|
|
634
641
|
|
|
635
642
|
@utility bg-neutral-medium-default {
|
|
636
|
-
|
|
643
|
+
background-color: var(--neutral-800);
|
|
637
644
|
}
|
|
638
645
|
|
|
639
646
|
@utility bg-neutral-medium-hover {
|
|
640
|
-
|
|
647
|
+
background-color: var(--neutral-700);
|
|
641
648
|
}
|
|
642
649
|
|
|
643
650
|
@utility bg-neutral-medium-selected {
|
|
644
|
-
|
|
651
|
+
background-color: var(--neutral-800);
|
|
645
652
|
}
|
|
646
653
|
|
|
647
654
|
@utility bg-neutral-medium-pressed {
|
|
648
|
-
|
|
655
|
+
background-color: var(--neutral-925);
|
|
649
656
|
}
|
|
650
657
|
|
|
651
658
|
@utility bg-neutral-weak {
|
|
652
|
-
|
|
659
|
+
background-color: var(--neutral-900);
|
|
653
660
|
}
|
|
654
661
|
|
|
655
662
|
@utility bg-neutral-weak-default {
|
|
656
|
-
|
|
663
|
+
background-color: var(--neutral-600);
|
|
657
664
|
}
|
|
658
665
|
|
|
659
666
|
@utility bg-neutral-weak-hover {
|
|
660
|
-
|
|
667
|
+
background-color: var(--neutral-500);
|
|
661
668
|
}
|
|
662
669
|
|
|
663
670
|
@utility bg-neutral-weak-focused {
|
|
664
|
-
|
|
671
|
+
background-color: var(--neutral-400);
|
|
665
672
|
}
|
|
666
673
|
|
|
667
674
|
@utility bg-surface {
|
|
668
|
-
|
|
675
|
+
background-color: var(--neutral-800);
|
|
669
676
|
}
|
|
670
677
|
|
|
671
678
|
@utility bg-surface-elevated {
|
|
672
|
-
|
|
679
|
+
background-color: var(--neutral-700);
|
|
673
680
|
}
|
|
674
681
|
|
|
675
682
|
/* SUCCESS --> */
|
|
676
683
|
@utility bg-success {
|
|
677
|
-
|
|
684
|
+
background-color: var(--success-500);
|
|
678
685
|
}
|
|
679
686
|
|
|
680
687
|
@utility bg-success-default-default {
|
|
681
|
-
|
|
688
|
+
background-color: var(--success-500);
|
|
682
689
|
}
|
|
683
690
|
|
|
684
691
|
@utility bg-success-default-hover {
|
|
685
|
-
|
|
692
|
+
background-color: var(--success-600);
|
|
686
693
|
}
|
|
687
694
|
|
|
688
695
|
@utility bg-success-default-pressed {
|
|
689
|
-
|
|
696
|
+
background-color: var(--success-700);
|
|
690
697
|
}
|
|
691
698
|
|
|
692
699
|
@utility bg-success-default-focused {
|
|
693
|
-
|
|
700
|
+
background-color: var(--success-700);
|
|
694
701
|
}
|
|
695
702
|
|
|
696
703
|
@utility bg-success-medium-default {
|
|
697
|
-
|
|
704
|
+
background-color: var(--success-200);
|
|
698
705
|
}
|
|
699
706
|
|
|
700
707
|
@utility bg-success-light {
|
|
701
|
-
|
|
708
|
+
background-color: var(--success-400);
|
|
702
709
|
}
|
|
703
710
|
|
|
704
711
|
@utility bg-success-dark {
|
|
705
|
-
|
|
712
|
+
background-color: var(--success-600);
|
|
706
713
|
}
|
|
707
714
|
|
|
708
715
|
/* ERROR --> */
|
|
709
716
|
@utility bg-error {
|
|
710
|
-
|
|
717
|
+
background-color: var(--error-500);
|
|
711
718
|
}
|
|
712
719
|
|
|
713
720
|
@utility bg-error-default-default {
|
|
714
|
-
|
|
721
|
+
background-color: var(--error-500);
|
|
715
722
|
}
|
|
716
723
|
|
|
717
724
|
@utility bg-error-default-hover {
|
|
718
|
-
|
|
725
|
+
background-color: var(--error-600);
|
|
719
726
|
}
|
|
720
727
|
|
|
721
728
|
@utility bg-error-default-pressed {
|
|
722
|
-
|
|
729
|
+
background-color: var(--error-700);
|
|
723
730
|
}
|
|
724
731
|
|
|
725
732
|
@utility bg-error-medium-default {
|
|
726
|
-
|
|
733
|
+
background-color: var(--error-200);
|
|
727
734
|
}
|
|
728
735
|
|
|
729
736
|
@utility bg-error-light {
|
|
730
|
-
|
|
737
|
+
background-color: var(--error-400);
|
|
731
738
|
}
|
|
732
739
|
|
|
733
740
|
@utility bg-error-dark {
|
|
734
|
-
|
|
741
|
+
background-color: var(--error-600);
|
|
735
742
|
}
|
|
736
743
|
|
|
737
744
|
/* WARNING --> */
|
|
738
745
|
@utility bg-warning {
|
|
739
|
-
|
|
746
|
+
background-color: var(--warning-500);
|
|
740
747
|
}
|
|
741
748
|
|
|
742
749
|
@utility bg-warning-default-default {
|
|
743
|
-
|
|
750
|
+
background-color: var(--warning-500);
|
|
744
751
|
}
|
|
745
752
|
|
|
746
753
|
@utility bg-warning-default-hover {
|
|
747
|
-
|
|
754
|
+
background-color: var(--warning-600);
|
|
748
755
|
}
|
|
749
756
|
|
|
750
757
|
@utility bg-warning-default-pressed {
|
|
751
|
-
|
|
758
|
+
background-color: var(--warning-700);
|
|
752
759
|
}
|
|
753
760
|
|
|
754
761
|
@utility bg-warning-medium-default {
|
|
755
|
-
|
|
762
|
+
background-color: var(--warning-200);
|
|
756
763
|
}
|
|
757
764
|
|
|
758
765
|
@utility bg-warning-light {
|
|
759
|
-
|
|
766
|
+
background-color: var(--warning-400);
|
|
760
767
|
}
|
|
761
768
|
|
|
762
769
|
@utility bg-warning-dark {
|
|
763
|
-
|
|
770
|
+
background-color: var(--warning-600);
|
|
764
771
|
}
|
|
765
772
|
|
|
766
773
|
/* <!-- BORDER --> */
|
|
767
774
|
/* PRIMARY --> */
|
|
768
775
|
@utility border-primary {
|
|
769
|
-
|
|
776
|
+
border-color: var(--primary-500);
|
|
770
777
|
}
|
|
771
778
|
|
|
772
779
|
@utility border-primary-default-default {
|
|
773
|
-
|
|
780
|
+
border-color: var(--primary-400);
|
|
774
781
|
}
|
|
775
782
|
|
|
776
783
|
@utility border-primary-default-hover {
|
|
777
|
-
|
|
784
|
+
border-color: var(--primary-500);
|
|
778
785
|
}
|
|
779
786
|
|
|
780
787
|
@utility border-primary-default-focused {
|
|
781
|
-
|
|
788
|
+
border-color: var(--primary-600);
|
|
782
789
|
}
|
|
783
790
|
|
|
784
791
|
@utility border-primary-default-pressed {
|
|
785
|
-
|
|
792
|
+
border-color: var(--primary-600);
|
|
786
793
|
}
|
|
787
794
|
|
|
788
795
|
@utility border-primary-default-disabled {
|
|
789
|
-
|
|
796
|
+
border-color: var(--neutral-700);
|
|
790
797
|
}
|
|
791
798
|
|
|
792
799
|
@utility border-primary-strong-pressed {
|
|
793
|
-
|
|
800
|
+
border-color: var(--primary-700);
|
|
794
801
|
}
|
|
795
802
|
|
|
796
803
|
@utility border-primary-light {
|
|
797
|
-
|
|
804
|
+
border-color: var(--primary-400);
|
|
798
805
|
}
|
|
799
806
|
|
|
800
807
|
@utility border-primary-medium-default {
|
|
801
|
-
|
|
808
|
+
border-color: var(--primary-400);
|
|
802
809
|
}
|
|
803
810
|
|
|
804
811
|
@utility border-primary-medium-pressed {
|
|
805
|
-
|
|
812
|
+
border-color: var(--primary-200);
|
|
806
813
|
}
|
|
807
814
|
|
|
808
815
|
@utility border-primary-medium-disabled {
|
|
809
|
-
|
|
816
|
+
border-color: var(--neutral-600);
|
|
810
817
|
}
|
|
811
818
|
|
|
812
819
|
@utility border-primary-medium-hover {
|
|
813
|
-
|
|
820
|
+
border-color: var(--primary-300);
|
|
814
821
|
}
|
|
815
822
|
|
|
816
823
|
@utility border-primary-medium-pressed {
|
|
817
|
-
|
|
824
|
+
border-color: var(--primary-200);
|
|
818
825
|
}
|
|
819
826
|
|
|
820
827
|
/* NEUTRAL --> */
|
|
821
828
|
@utility border-neutral {
|
|
822
|
-
|
|
829
|
+
border-color: var(--neutral-500);
|
|
823
830
|
}
|
|
824
831
|
|
|
825
832
|
@utility border-neutral-default-default {
|
|
826
|
-
|
|
833
|
+
border-color: var(--neutral-500);
|
|
827
834
|
}
|
|
828
835
|
|
|
829
836
|
@utility border-neutral-default-hover {
|
|
830
|
-
|
|
837
|
+
border-color: var(--neutral-400);
|
|
831
838
|
}
|
|
832
839
|
|
|
833
840
|
@utility border-neutral-default-pressed {
|
|
834
|
-
|
|
841
|
+
border-color: var(--neutral-500);
|
|
835
842
|
}
|
|
836
843
|
|
|
837
844
|
@utility border-neutral-default-focused {
|
|
838
|
-
|
|
845
|
+
border-color: var(--neutral-500);
|
|
839
846
|
}
|
|
840
847
|
|
|
841
848
|
@utility border-neutral-default-disabled {
|
|
842
|
-
|
|
849
|
+
border-color: var(--neutral-700);
|
|
843
850
|
}
|
|
844
851
|
|
|
845
852
|
@utility border-neutral-strong-default {
|
|
846
|
-
|
|
853
|
+
border-color: var(--neutral-700);
|
|
847
854
|
}
|
|
848
855
|
|
|
849
856
|
@utility border-neutral-strong {
|
|
850
|
-
|
|
857
|
+
border-color: var(--neutral-800);
|
|
851
858
|
}
|
|
852
859
|
|
|
853
860
|
@utility border-neutral-default {
|
|
854
|
-
|
|
861
|
+
border-color: var(--neutral-900);
|
|
855
862
|
}
|
|
856
863
|
|
|
857
864
|
@utility border-neutral-medium {
|
|
858
|
-
|
|
865
|
+
border-color: var(--neutral-600);
|
|
859
866
|
}
|
|
860
867
|
|
|
861
868
|
@utility border-neutral-weak {
|
|
862
|
-
|
|
869
|
+
border-color: var(--neutral-700);
|
|
863
870
|
}
|
|
864
871
|
|
|
865
872
|
/* SUCCESS --> */
|
|
866
873
|
@utility border-success {
|
|
867
|
-
|
|
874
|
+
border-color: var(--success-500);
|
|
868
875
|
}
|
|
869
876
|
|
|
870
877
|
@utility border-success-default-default {
|
|
871
|
-
|
|
878
|
+
border-color: var(--success-500);
|
|
872
879
|
}
|
|
873
880
|
|
|
874
881
|
@utility border-success-default-hover {
|
|
875
|
-
|
|
882
|
+
border-color: var(--success-600);
|
|
876
883
|
}
|
|
877
884
|
|
|
878
885
|
@utility border-success-default-pressed {
|
|
879
|
-
|
|
886
|
+
border-color: var(--success-700);
|
|
880
887
|
}
|
|
881
888
|
|
|
882
889
|
@utility border-success-default-focused {
|
|
883
|
-
|
|
890
|
+
border-color: var(--success-700);
|
|
884
891
|
}
|
|
885
892
|
|
|
886
893
|
@utility border-success-default-disabled {
|
|
887
|
-
|
|
894
|
+
border-color: var(--neutral-800);
|
|
888
895
|
}
|
|
889
896
|
|
|
890
897
|
/* ERROR --> */
|
|
891
898
|
@utility border-error {
|
|
892
|
-
|
|
899
|
+
border-color: var(--error-500);
|
|
893
900
|
}
|
|
894
901
|
|
|
895
902
|
@utility border-error-default-default {
|
|
896
|
-
|
|
903
|
+
border-color: var(--error-500);
|
|
897
904
|
}
|
|
898
905
|
|
|
899
906
|
@utility border-error-default-hover {
|
|
900
|
-
|
|
907
|
+
border-color: var(--error-600);
|
|
901
908
|
}
|
|
902
909
|
|
|
903
910
|
@utility border-error-default-pressed {
|
|
904
|
-
|
|
911
|
+
border-color: var(--error-700);
|
|
905
912
|
}
|
|
906
913
|
|
|
907
914
|
@utility border-error-default-focused {
|
|
908
|
-
|
|
915
|
+
border-color: var(--error-700);
|
|
909
916
|
}
|
|
910
917
|
|
|
911
918
|
@utility border-error-default-disabled {
|
|
912
|
-
|
|
919
|
+
border-color: var(--neutral-800);
|
|
913
920
|
}
|
|
914
921
|
|
|
922
|
+
|
|
923
|
+
|
|
915
924
|
/* WARNING --> */
|
|
916
925
|
@utility border-warning {
|
|
917
|
-
|
|
926
|
+
border-color: var(--warning-500);
|
|
918
927
|
}
|
|
919
928
|
|
|
920
929
|
@utility border-warning-default-default {
|
|
921
|
-
|
|
930
|
+
border-color: var(--warning-500);
|
|
922
931
|
}
|
|
923
932
|
|
|
924
933
|
@utility border-warning-default-hover {
|
|
925
|
-
|
|
934
|
+
border-color: var(--warning-600);
|
|
926
935
|
}
|
|
927
936
|
|
|
928
937
|
@utility border-warning-default-pressed {
|
|
929
|
-
|
|
938
|
+
border-color: var(--warning-700);
|
|
930
939
|
}
|
|
931
940
|
|
|
932
941
|
@utility border-warning-default-focused {
|
|
933
|
-
|
|
942
|
+
border-color: var(--warning-700);
|
|
934
943
|
}
|
|
935
944
|
|
|
945
|
+
|
|
946
|
+
|
|
936
947
|
/* ICONS */
|
|
937
948
|
|
|
938
949
|
@utility icon-neutral-default-default {
|
|
939
|
-
|
|
950
|
+
color: var(--neutral-500);
|
|
940
951
|
}
|
|
941
952
|
|
|
953
|
+
|
|
942
954
|
@utility icon-neutral-medium-default {
|
|
943
|
-
|
|
955
|
+
color: var(--neutral-400);
|
|
944
956
|
}
|
|
945
957
|
|
|
946
958
|
@utility icon-neutral-medium-focused {
|
|
947
|
-
|
|
959
|
+
color: var(--neutral-600);
|
|
948
960
|
}
|
|
949
961
|
|
|
950
962
|
@utility icon-neutral-strong-default {
|
|
951
|
-
|
|
963
|
+
color: var(--neutral-100);
|
|
952
964
|
}
|
|
953
965
|
|
|
954
966
|
@utility icon-neutral-strong-disabled {
|
|
955
|
-
|
|
967
|
+
color: var(--neutral-500);
|
|
956
968
|
}
|
|
957
969
|
|
|
970
|
+
|
|
971
|
+
|
|
972
|
+
|
|
958
973
|
/* <!-- WEIGTH --> */
|
|
959
974
|
@utility font-light {
|
|
960
|
-
|
|
975
|
+
font-weight: 300;
|
|
961
976
|
}
|
|
962
977
|
|
|
963
978
|
@utility font-normal {
|
|
964
|
-
|
|
979
|
+
font-weight: 400;
|
|
965
980
|
}
|
|
966
981
|
|
|
967
982
|
@utility font-medium {
|
|
968
|
-
|
|
983
|
+
font-weight: 500;
|
|
969
984
|
}
|
|
970
985
|
|
|
971
986
|
@utility font-semibold {
|
|
972
|
-
|
|
987
|
+
font-weight: 600;
|
|
973
988
|
}
|
|
974
989
|
|
|
975
990
|
@utility font-bold {
|
|
976
|
-
|
|
991
|
+
font-weight: 700;
|
|
977
992
|
}
|
|
978
993
|
|
|
979
994
|
@utility text-xs-prometeo {
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
995
|
+
font-size: 0.875rem;
|
|
996
|
+
/* 14px */
|
|
997
|
+
line-height: 1.25;
|
|
983
998
|
}
|
|
984
999
|
|
|
985
1000
|
@utility text-sm-prometeo {
|
|
986
|
-
|
|
987
|
-
|
|
988
|
-
|
|
1001
|
+
font-size: 1rem;
|
|
1002
|
+
/* 16px */
|
|
1003
|
+
line-height: 1.375;
|
|
989
1004
|
}
|
|
990
1005
|
|
|
991
1006
|
@utility text-md-prometeo {
|
|
992
|
-
|
|
993
|
-
|
|
994
|
-
|
|
1007
|
+
font-size: 1.125rem;
|
|
1008
|
+
/* 18px */
|
|
1009
|
+
line-height: 1.375;
|
|
995
1010
|
}
|
|
996
1011
|
|
|
997
1012
|
@utility text-lg-prometeo {
|
|
998
|
-
|
|
999
|
-
|
|
1000
|
-
|
|
1013
|
+
font-size: 1.25rem;
|
|
1014
|
+
/* 20px */
|
|
1015
|
+
line-height: 1.375;
|
|
1001
1016
|
}
|
|
1002
1017
|
|
|
1003
1018
|
@utility text-xl-prometeo {
|
|
1004
|
-
|
|
1005
|
-
|
|
1006
|
-
|
|
1019
|
+
font-size: 1.5rem;
|
|
1020
|
+
/* 24px */
|
|
1021
|
+
line-height: 1.375;
|
|
1007
1022
|
}
|
|
1008
1023
|
|
|
1009
1024
|
/* ESTADOS INTERACTIVOS - Con hover, focus, etc. */
|
|
1010
1025
|
@utility bg-primary {
|
|
1011
|
-
|
|
1026
|
+
background-color: var(--primary-500);
|
|
1012
1027
|
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1028
|
+
&:hover {
|
|
1029
|
+
background-color: var(--primary-600);
|
|
1030
|
+
}
|
|
1016
1031
|
|
|
1017
|
-
|
|
1018
|
-
|
|
1019
|
-
|
|
1032
|
+
&:active {
|
|
1033
|
+
background-color: var(--primary-700);
|
|
1034
|
+
}
|
|
1020
1035
|
}
|
|
1021
1036
|
|
|
1022
1037
|
@utility bg-success {
|
|
1023
|
-
|
|
1038
|
+
background-color: var(--success-500);
|
|
1024
1039
|
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
|
|
1040
|
+
&:hover {
|
|
1041
|
+
background-color: var(--success-600);
|
|
1042
|
+
}
|
|
1028
1043
|
}
|
|
1029
1044
|
|
|
1030
1045
|
@utility bg-error {
|
|
1031
|
-
|
|
1046
|
+
background-color: var(--error-500);
|
|
1032
1047
|
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1048
|
+
&:hover {
|
|
1049
|
+
background-color: var(--error-600);
|
|
1050
|
+
}
|
|
1036
1051
|
}
|
|
1037
1052
|
|
|
1053
|
+
|
|
1054
|
+
|
|
1038
1055
|
@utility input-base {
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1056
|
+
padding: 0.5rem 0.75rem;
|
|
1057
|
+
border: 1px solid var(--neutral-500);
|
|
1058
|
+
border-radius: 0.375rem;
|
|
1059
|
+
background-color: var(--neutral-800);
|
|
1060
|
+
color: var(--neutral-100);
|
|
1061
|
+
|
|
1062
|
+
&:focus {
|
|
1063
|
+
outline: none;
|
|
1064
|
+
border-color: var(--primary-500);
|
|
1065
|
+
box-shadow: 0 0 0 3px rgba(97, 95, 255, 0.1);
|
|
1066
|
+
}
|
|
1050
1067
|
}
|
|
1051
1068
|
|
|
1069
|
+
|
|
1052
1070
|
/* RING */
|
|
1053
1071
|
/* PRIMARY */
|
|
1054
1072
|
@utility ring-primary-default-default {
|
|
1055
|
-
|
|
1073
|
+
--tw-ring-color: var(--primary-400);
|
|
1056
1074
|
}
|
|
1057
1075
|
|
|
1058
1076
|
@utility ring-primary-default-hover {
|
|
1059
|
-
|
|
1077
|
+
--tw-ring-color: var(--primary-600);
|
|
1060
1078
|
}
|
|
1061
1079
|
|
|
1062
1080
|
@utility ring-primary-default-pressed {
|
|
1063
|
-
|
|
1081
|
+
--tw-ring-color: var(--primary-600);
|
|
1064
1082
|
}
|
|
1065
1083
|
|
|
1066
1084
|
@utility ring-primary-default-focused {
|
|
1067
|
-
|
|
1085
|
+
--tw-ring-color: var(--primary-600);
|
|
1068
1086
|
}
|
|
1069
1087
|
|
|
1070
1088
|
/* SUCCESS */
|
|
1071
1089
|
@utility ring-success-default-default {
|
|
1072
|
-
|
|
1090
|
+
--tw-ring-color: var(--success-500);
|
|
1073
1091
|
}
|
|
1074
1092
|
|
|
1075
1093
|
@utility ring-success-default-hover {
|
|
1076
|
-
|
|
1094
|
+
--tw-ring-color: var(--success-600);
|
|
1077
1095
|
}
|
|
1078
1096
|
|
|
1079
1097
|
@utility ring-success-default-pressed {
|
|
1080
|
-
|
|
1098
|
+
--tw-ring-color: var(--success-600);
|
|
1081
1099
|
}
|
|
1082
1100
|
|
|
1083
1101
|
@utility ring-success-default-focused {
|
|
1084
|
-
|
|
1102
|
+
--tw-ring-color: var(--success-700);
|
|
1085
1103
|
}
|
|
1086
1104
|
|
|
1105
|
+
|
|
1087
1106
|
/* WARNING */
|
|
1088
1107
|
@utility ring-warning-default-default {
|
|
1089
|
-
|
|
1108
|
+
--tw-ring-color: var(--warning-500);
|
|
1090
1109
|
}
|
|
1091
1110
|
|
|
1092
1111
|
@utility ring-warning-default-hover {
|
|
1093
|
-
|
|
1112
|
+
--tw-ring-color: var(--warning-600);
|
|
1094
1113
|
}
|
|
1095
1114
|
|
|
1096
1115
|
@utility ring-warning-default-pressed {
|
|
1097
|
-
|
|
1116
|
+
--tw-ring-color: var(--warning-700);
|
|
1098
1117
|
}
|
|
1099
1118
|
|
|
1100
1119
|
@utility ring-warning-default-focused {
|
|
1101
|
-
|
|
1120
|
+
--tw-ring-color: var(--warning-700);
|
|
1102
1121
|
}
|
|
1103
1122
|
|
|
1123
|
+
|
|
1104
1124
|
/* ERROR */
|
|
1105
1125
|
|
|
1106
1126
|
@utility ring-error-default-default {
|
|
1107
|
-
|
|
1127
|
+
--tw-ring-color: var(--error-500);
|
|
1108
1128
|
}
|
|
1109
1129
|
|
|
1110
1130
|
@utility ring-error-default-hover {
|
|
1111
|
-
|
|
1131
|
+
--tw-ring-color: var(--error-600);
|
|
1112
1132
|
}
|
|
1113
1133
|
|
|
1114
1134
|
@utility ring-error-default-pressed {
|
|
1115
|
-
|
|
1135
|
+
--tw-ring-color: var(--error-700);
|
|
1116
1136
|
}
|
|
1117
1137
|
|
|
1118
1138
|
@utility ring-error-default-focused {
|
|
1119
|
-
|
|
1139
|
+
--tw-ring-color: var(--error-700);
|
|
1120
1140
|
}
|
|
1121
1141
|
|
|
1122
1142
|
/* SCROLLBAR. */
|
|
1123
1143
|
* {
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
|
|
1144
|
+
--sb-track-color: var(--neutral-800);
|
|
1145
|
+
--sb-thumb-color: var(--primary-400);
|
|
1146
|
+
--sb-size: 10px;
|
|
1127
1147
|
}
|
|
1128
1148
|
|
|
1129
1149
|
*::-webkit-scrollbar {
|
|
1130
|
-
|
|
1150
|
+
width: var(--sb-size);
|
|
1131
1151
|
}
|
|
1132
1152
|
|
|
1133
1153
|
*::-webkit-scrollbar-track {
|
|
1134
|
-
|
|
1154
|
+
background: var(--sb-track-color);
|
|
1135
1155
|
}
|
|
1136
1156
|
|
|
1137
1157
|
*::-webkit-scrollbar-thumb {
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1158
|
+
background: var(--sb-thumb-color);
|
|
1159
|
+
border: 3px solid var(--neutral-800);
|
|
1160
|
+
border-radius: 10px;
|
|
1141
1161
|
}
|
|
1142
1162
|
|
|
1143
1163
|
@utility prometeo-scrollbar-thin {
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
|
|
1164
|
+
--sb-size: 8px !important;
|
|
1165
|
+
--sb-track-color: var(--neutral-800);
|
|
1166
|
+
--sb-thumb-color: var(--primary-400);
|
|
1147
1167
|
|
|
1148
|
-
|
|
1149
|
-
|
|
1150
|
-
|
|
1151
|
-
|
|
1168
|
+
&::-webkit-scrollbar {
|
|
1169
|
+
width: var(--sb-size);
|
|
1170
|
+
height: var(--sb-size);
|
|
1171
|
+
}
|
|
1152
1172
|
|
|
1153
|
-
|
|
1154
|
-
|
|
1155
|
-
|
|
1173
|
+
&::-webkit-scrollbar-track {
|
|
1174
|
+
background: var(--sb-track-color);
|
|
1175
|
+
}
|
|
1176
|
+
|
|
1177
|
+
&::-webkit-scrollbar-thumb {
|
|
1178
|
+
background: var(--sb-thumb-color);
|
|
1179
|
+
border: 2px solid var(--sb-track-color);
|
|
1180
|
+
border-radius: 8px;
|
|
1181
|
+
}
|
|
1156
1182
|
|
|
1157
|
-
&::-webkit-scrollbar-thumb {
|
|
1158
|
-
background: var(--sb-thumb-color);
|
|
1159
|
-
border: 2px solid var(--sb-track-color);
|
|
1160
|
-
border-radius: 8px;
|
|
1161
|
-
}
|
|
1162
1183
|
}
|
|
1163
1184
|
|
|
1164
1185
|
@utility scrollbar-stable {
|
|
1165
|
-
|
|
1186
|
+
scrollbar-gutter: stable;
|
|
1166
1187
|
}
|
|
1167
1188
|
|
|
1168
1189
|
@utility prometeo-scrollbar-overlay {
|
|
1169
1190
|
--sb-size: 8px;
|
|
1170
1191
|
padding-inline-end: var(--sb-size) !important;
|
|
1171
1192
|
margin-inline-end: calc(-1 * var(--sb-size)) !important;
|
|
1172
|
-
&::-webkit-scrollbar {
|
|
1173
|
-
width: var(--sb-size);
|
|
1174
|
-
}
|
|
1193
|
+
&::-webkit-scrollbar { width: var(--sb-size); }
|
|
1175
1194
|
}
|
|
1176
1195
|
|
|
1177
1196
|
@utility prometeo-scrollbar-overlay-x {
|
|
1178
|
-
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
height: var(--sb-size);
|
|
1183
|
-
}
|
|
1197
|
+
--sb-size: 8px;
|
|
1198
|
+
padding-block-end: var(--sb-size)!important;
|
|
1199
|
+
margin-block-end: calc(-1 * var(--sb-size)) !important;
|
|
1200
|
+
&::-webkit-scrollbar { height: var(--sb-size); }
|
|
1184
1201
|
}
|
|
1185
1202
|
|
|
1186
1203
|
@utility prometeo-scrollbar-none {
|
|
1187
|
-
|
|
1188
|
-
|
|
1204
|
+
scrollbar-width: none;
|
|
1205
|
+
-ms-overflow-style: none;
|
|
1189
1206
|
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1207
|
+
&::-webkit-scrollbar {
|
|
1208
|
+
width: 0;
|
|
1209
|
+
height: 0;
|
|
1210
|
+
display: none;
|
|
1211
|
+
background: transparent;
|
|
1212
|
+
}
|
|
1196
1213
|
}
|
|
1197
1214
|
|
|
1198
1215
|
@supports not selector(::-webkit-scrollbar) {
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1216
|
+
* {
|
|
1217
|
+
scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
|
|
1218
|
+
}
|
|
1202
1219
|
}
|
|
1203
1220
|
|
|
1204
1221
|
.input-group {
|
|
1205
|
-
|
|
1206
|
-
|
|
1222
|
+
position: relative;
|
|
1223
|
+
width: var(--input-width, 100%);
|
|
1207
1224
|
}
|
|
1208
1225
|
|
|
1209
1226
|
.input-field {
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
|
|
1214
|
-
|
|
1215
|
-
|
|
1227
|
+
padding: 12px;
|
|
1228
|
+
border: 1px solid var(--neutral-500);
|
|
1229
|
+
font-size: 16px;
|
|
1230
|
+
transition: all 0.1s ease;
|
|
1231
|
+
border-radius: 8px;
|
|
1232
|
+
box-sizing: border-box;
|
|
1216
1233
|
}
|
|
1217
1234
|
|
|
1218
1235
|
.input-field:focus {
|
|
1219
|
-
|
|
1220
|
-
|
|
1236
|
+
border-color: #3b82f6;
|
|
1237
|
+
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
|
1221
1238
|
}
|
|
1222
1239
|
|
|
1223
1240
|
.floating-label {
|
|
1224
|
-
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
}
|
|
1236
|
-
|
|
1237
|
-
.input-field:focus
|
|
1238
|
-
.input-field.has-value
|
|
1239
|
-
|
|
1240
|
-
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1241
|
+
position: absolute;
|
|
1242
|
+
left: 1rem;
|
|
1243
|
+
top: 50%;
|
|
1244
|
+
transform: translateY(-50%);
|
|
1245
|
+
background-color: transparent;
|
|
1246
|
+
padding: 0 0.25rem;
|
|
1247
|
+
font-size: 1rem;
|
|
1248
|
+
color: #9ca3af;
|
|
1249
|
+
pointer-events: none;
|
|
1250
|
+
transition: all 0.3s ease;
|
|
1251
|
+
z-index: 10;
|
|
1252
|
+
}
|
|
1253
|
+
|
|
1254
|
+
.input-field:focus+.floating-label,
|
|
1255
|
+
.input-field.has-value+.floating-label {
|
|
1256
|
+
top: -10px;
|
|
1257
|
+
left: 0px;
|
|
1258
|
+
transform: translateY(-50%);
|
|
1259
|
+
font-size: 0.75rem;
|
|
1260
|
+
color: var(--neutral-400);
|
|
1244
1261
|
}
|
|
1245
1262
|
|
|
1246
1263
|
/* Estilos del dropdown personalizado */
|
|
1247
1264
|
.custom-dropdown {
|
|
1248
|
-
|
|
1249
|
-
|
|
1250
|
-
|
|
1251
|
-
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1265
|
+
position: absolute;
|
|
1266
|
+
top: 100%;
|
|
1267
|
+
left: 0;
|
|
1268
|
+
right: 0;
|
|
1269
|
+
z-index: 50;
|
|
1270
|
+
margin-top: 0.25rem;
|
|
1271
|
+
background-color: transparent;
|
|
1272
|
+
border: 1px solid var(--neutral-400);
|
|
1273
|
+
border-radius: 0.375rem;
|
|
1274
|
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
|
|
1275
|
+
max-height: 240px;
|
|
1276
|
+
overflow-y: auto;
|
|
1260
1277
|
}
|
|
1261
1278
|
|
|
1262
1279
|
/* Estilos para cada opción */
|
|
1263
1280
|
.custom-option {
|
|
1264
|
-
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1281
|
+
display: flex;
|
|
1282
|
+
align-items: center;
|
|
1283
|
+
padding: 0.75rem 1rem;
|
|
1284
|
+
cursor: pointer;
|
|
1285
|
+
transition: background-color 0.2s ease;
|
|
1286
|
+
color: white;
|
|
1287
|
+
border-bottom: 1px solid #374151;
|
|
1271
1288
|
}
|
|
1272
1289
|
|
|
1273
1290
|
.custom-option:last-child {
|
|
1274
|
-
|
|
1291
|
+
border-bottom: none;
|
|
1275
1292
|
}
|
|
1276
1293
|
|
|
1277
1294
|
.custom-option:hover {
|
|
1278
|
-
|
|
1295
|
+
background-color: #374151;
|
|
1279
1296
|
}
|
|
1280
1297
|
|
|
1281
1298
|
.custom-option.selected {
|
|
1282
|
-
|
|
1299
|
+
background-color: #1e40af;
|
|
1283
1300
|
}
|
|
1284
1301
|
|
|
1285
1302
|
.custom-option.selected:hover {
|
|
1286
|
-
|
|
1303
|
+
background-color: #1d4ed8;
|
|
1287
1304
|
}
|
|
1288
1305
|
|
|
1289
1306
|
/* Checkbox para múltiple selección */
|
|
1290
1307
|
.option-checkbox {
|
|
1291
|
-
|
|
1292
|
-
|
|
1308
|
+
margin-right: 0.75rem;
|
|
1309
|
+
accent-color: #3b82f6;
|
|
1293
1310
|
}
|
|
1294
1311
|
|
|
1295
1312
|
/* Punto de estado/color */
|
|
1296
1313
|
.status-dot {
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1314
|
+
width: 12px;
|
|
1315
|
+
height: 12px;
|
|
1316
|
+
border-radius: 50%;
|
|
1317
|
+
margin-right: 0.75rem;
|
|
1318
|
+
flex-shrink: 0;
|
|
1302
1319
|
}
|
|
1303
1320
|
|
|
1304
1321
|
@keyframes cursor-intermitent {
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1322
|
+
0% {
|
|
1323
|
+
opacity: 1;
|
|
1324
|
+
}
|
|
1325
|
+
50% {
|
|
1326
|
+
opacity: 0;
|
|
1327
|
+
}
|
|
1328
|
+
100% {
|
|
1329
|
+
opacity: 1;
|
|
1330
|
+
}
|
|
1314
1331
|
}
|