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