draft-components 0.72.1 → 0.75.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,601 @@
1
+ @use '../abstracts' as dc;
2
+
3
+ /*------------------------------------*\
4
+ #TEXT COLOR
5
+ \*------------------------------------*/
6
+ .color-inherit {
7
+ color: inherit !important;
8
+ }
9
+
10
+ .color-primary {
11
+ color: var(--dc-primary-text-color) !important;
12
+ }
13
+
14
+ .color-secondary {
15
+ color: var(--dc-secondary-text-color) !important;
16
+ }
17
+
18
+ .color-tertiary {
19
+ color: var(--dc-tertiary-text-color) !important;
20
+ }
21
+
22
+ .color-link {
23
+ color: var(--dc-link-text-color) !important;
24
+ }
25
+
26
+ .color-error {
27
+ color: var(--dc-error-text-color) !important;
28
+ }
29
+
30
+ .color-warning {
31
+ color: var(--dc-warning-text-color) !important;
32
+ }
33
+
34
+ .color-info {
35
+ color: var(--dc-info-text-color) !important;
36
+ }
37
+
38
+ .color-success {
39
+ color: var(--dc-success-text-color) !important;
40
+ }
41
+
42
+ .color-gray-50 {
43
+ color: dc.$gray-50 !important;
44
+ }
45
+ .color-gray-100 {
46
+ color: dc.$gray-100 !important;
47
+ }
48
+ .color-gray-200 {
49
+ color: dc.$gray-200 !important;
50
+ }
51
+ .color-gray-300 {
52
+ color: dc.$gray-300 !important;
53
+ }
54
+ .color-gray-400 {
55
+ color: dc.$gray-400 !important;
56
+ }
57
+ .color-gray-500 {
58
+ color: dc.$gray-500 !important;
59
+ }
60
+ .color-gray-600 {
61
+ color: dc.$gray-600 !important;
62
+ }
63
+ .color-gray-700 {
64
+ color: dc.$gray-700 !important;
65
+ }
66
+ .color-gray-800 {
67
+ color: dc.$gray-800 !important;
68
+ }
69
+ .color-gray-900 {
70
+ color: dc.$gray-900 !important;
71
+ }
72
+
73
+ .color-blue-50 {
74
+ color: dc.$blue-50 !important;
75
+ }
76
+ .color-blue-100 {
77
+ color: dc.$blue-100 !important;
78
+ }
79
+ .color-blue-200 {
80
+ color: dc.$blue-200 !important;
81
+ }
82
+ .color-blue-300 {
83
+ color: dc.$blue-300 !important;
84
+ }
85
+ .color-blue-400 {
86
+ color: dc.$blue-400 !important;
87
+ }
88
+ .color-blue-500 {
89
+ color: dc.$blue-500 !important;
90
+ }
91
+ .color-blue-600 {
92
+ color: dc.$blue-600 !important;
93
+ }
94
+ .color-blue-700 {
95
+ color: dc.$blue-700 !important;
96
+ }
97
+ .color-blue-800 {
98
+ color: dc.$blue-800 !important;
99
+ }
100
+ .color-blue-900 {
101
+ color: dc.$blue-900 !important;
102
+ }
103
+
104
+ .color-cyan-50 {
105
+ color: dc.$cyan-50 !important;
106
+ }
107
+ .color-cyan-100 {
108
+ color: dc.$cyan-100 !important;
109
+ }
110
+ .color-cyan-200 {
111
+ color: dc.$cyan-200 !important;
112
+ }
113
+ .color-cyan-300 {
114
+ color: dc.$cyan-300 !important;
115
+ }
116
+ .color-cyan-400 {
117
+ color: dc.$cyan-400 !important;
118
+ }
119
+ .color-cyan-500 {
120
+ color: dc.$cyan-500 !important;
121
+ }
122
+ .color-cyan-600 {
123
+ color: dc.$cyan-600 !important;
124
+ }
125
+ .color-cyan-700 {
126
+ color: dc.$cyan-700 !important;
127
+ }
128
+ .color-cyan-800 {
129
+ color: dc.$cyan-800 !important;
130
+ }
131
+ .color-cyan-900 {
132
+ color: dc.$cyan-900 !important;
133
+ }
134
+
135
+ .color-red-50 {
136
+ color: dc.$red-50 !important;
137
+ }
138
+ .color-red-100 {
139
+ color: dc.$red-100 !important;
140
+ }
141
+ .color-red-200 {
142
+ color: dc.$red-200 !important;
143
+ }
144
+ .color-red-300 {
145
+ color: dc.$red-300 !important;
146
+ }
147
+ .color-red-400 {
148
+ color: dc.$red-400 !important;
149
+ }
150
+ .color-red-500 {
151
+ color: dc.$red-500 !important;
152
+ }
153
+ .color-red-600 {
154
+ color: dc.$red-600 !important;
155
+ }
156
+ .color-red-700 {
157
+ color: dc.$red-700 !important;
158
+ }
159
+ .color-red-800 {
160
+ color: dc.$red-800 !important;
161
+ }
162
+ .color-red-900 {
163
+ color: dc.$red-900 !important;
164
+ }
165
+
166
+ .color-green-50 {
167
+ color: dc.$green-50 !important;
168
+ }
169
+ .color-green-100 {
170
+ color: dc.$green-100 !important;
171
+ }
172
+ .color-green-200 {
173
+ color: dc.$green-200 !important;
174
+ }
175
+ .color-green-300 {
176
+ color: dc.$green-300 !important;
177
+ }
178
+ .color-green-400 {
179
+ color: dc.$green-400 !important;
180
+ }
181
+ .color-green-500 {
182
+ color: dc.$green-500 !important;
183
+ }
184
+ .color-green-600 {
185
+ color: dc.$green-600 !important;
186
+ }
187
+ .color-green-700 {
188
+ color: dc.$green-700 !important;
189
+ }
190
+ .color-green-800 {
191
+ color: dc.$green-800 !important;
192
+ }
193
+ .color-green-900 {
194
+ color: dc.$green-900 !important;
195
+ }
196
+
197
+ .color-lime-50 {
198
+ color: dc.$lime-50 !important;
199
+ }
200
+ .color-lime-100 {
201
+ color: dc.$lime-100 !important;
202
+ }
203
+ .color-lime-200 {
204
+ color: dc.$lime-200 !important;
205
+ }
206
+ .color-lime-300 {
207
+ color: dc.$lime-300 !important;
208
+ }
209
+ .color-lime-400 {
210
+ color: dc.$lime-400 !important;
211
+ }
212
+ .color-lime-500 {
213
+ color: dc.$lime-500 !important;
214
+ }
215
+ .color-lime-600 {
216
+ color: dc.$lime-600 !important;
217
+ }
218
+ .color-lime-700 {
219
+ color: dc.$lime-700 !important;
220
+ }
221
+ .color-lime-800 {
222
+ color: dc.$lime-800 !important;
223
+ }
224
+ .color-lime-900 {
225
+ color: dc.$lime-900 !important;
226
+ }
227
+
228
+ .color-indigo-50 {
229
+ color: dc.$indigo-50 !important;
230
+ }
231
+ .color-indigo-100 {
232
+ color: dc.$indigo-100 !important;
233
+ }
234
+ .color-indigo-200 {
235
+ color: dc.$indigo-200 !important;
236
+ }
237
+ .color-indigo-300 {
238
+ color: dc.$indigo-300 !important;
239
+ }
240
+ .color-indigo-400 {
241
+ color: dc.$indigo-400 !important;
242
+ }
243
+ .color-indigo-500 {
244
+ color: dc.$indigo-500 !important;
245
+ }
246
+ .color-indigo-600 {
247
+ color: dc.$indigo-600 !important;
248
+ }
249
+ .color-indigo-700 {
250
+ color: dc.$indigo-700 !important;
251
+ }
252
+ .color-indigo-800 {
253
+ color: dc.$indigo-800 !important;
254
+ }
255
+ .color-indigo-900 {
256
+ color: dc.$indigo-900 !important;
257
+ }
258
+
259
+ .color-yellow-50 {
260
+ color: dc.$yellow-50 !important;
261
+ }
262
+ .color-yellow-100 {
263
+ color: dc.$yellow-100 !important;
264
+ }
265
+ .color-yellow-200 {
266
+ color: dc.$yellow-200 !important;
267
+ }
268
+ .color-yellow-300 {
269
+ color: dc.$yellow-300 !important;
270
+ }
271
+ .color-yellow-400 {
272
+ color: dc.$yellow-400 !important;
273
+ }
274
+ .color-yellow-500 {
275
+ color: dc.$yellow-500 !important;
276
+ }
277
+ .color-yellow-600 {
278
+ color: dc.$yellow-600 !important;
279
+ }
280
+ .color-yellow-700 {
281
+ color: dc.$yellow-700 !important;
282
+ }
283
+ .color-yellow-800 {
284
+ color: dc.$yellow-800 !important;
285
+ }
286
+ .color-yellow-900 {
287
+ color: dc.$yellow-900 !important;
288
+ }
289
+
290
+ .color-orange-50 {
291
+ color: dc.$orange-50 !important;
292
+ }
293
+ .color-orange-100 {
294
+ color: dc.$orange-100 !important;
295
+ }
296
+ .color-orange-200 {
297
+ color: dc.$orange-200 !important;
298
+ }
299
+ .color-orange-300 {
300
+ color: dc.$orange-300 !important;
301
+ }
302
+ .color-orange-400 {
303
+ color: dc.$orange-400 !important;
304
+ }
305
+ .color-orange-500 {
306
+ color: dc.$orange-500 !important;
307
+ }
308
+ .color-orange-600 {
309
+ color: dc.$orange-600 !important;
310
+ }
311
+ .color-orange-700 {
312
+ color: dc.$orange-700 !important;
313
+ }
314
+ .color-orange-800 {
315
+ color: dc.$orange-800 !important;
316
+ }
317
+ .color-orange-900 {
318
+ color: dc.$orange-900 !important;
319
+ }
320
+
321
+ /*------------------------------------*\
322
+ #BACKGROUND COLOR
323
+ \*------------------------------------*/
324
+ .bg-gray-50 {
325
+ background: dc.$gray-50 !important;
326
+ }
327
+ .bg-gray-100 {
328
+ background: dc.$gray-100 !important;
329
+ }
330
+ .bg-gray-200 {
331
+ background: dc.$gray-200 !important;
332
+ }
333
+ .bg-gray-300 {
334
+ background: dc.$gray-300 !important;
335
+ }
336
+ .bg-gray-400 {
337
+ background: dc.$gray-400 !important;
338
+ }
339
+ .bg-gray-500 {
340
+ background: dc.$gray-500 !important;
341
+ }
342
+ .bg-gray-600 {
343
+ background: dc.$gray-600 !important;
344
+ }
345
+ .bg-gray-700 {
346
+ background: dc.$gray-700 !important;
347
+ }
348
+ .bg-gray-800 {
349
+ background: dc.$gray-800 !important;
350
+ }
351
+ .bg-gray-900 {
352
+ background: dc.$gray-900 !important;
353
+ }
354
+
355
+ .bg-blue-50 {
356
+ background: dc.$blue-50 !important;
357
+ }
358
+ .bg-blue-100 {
359
+ background: dc.$blue-100 !important;
360
+ }
361
+ .bg-blue-200 {
362
+ background: dc.$blue-200 !important;
363
+ }
364
+ .bg-blue-300 {
365
+ background: dc.$blue-300 !important;
366
+ }
367
+ .bg-blue-400 {
368
+ background: dc.$blue-400 !important;
369
+ }
370
+ .bg-blue-500 {
371
+ background: dc.$blue-500 !important;
372
+ }
373
+ .bg-blue-600 {
374
+ background: dc.$blue-600 !important;
375
+ }
376
+ .bg-blue-700 {
377
+ background: dc.$blue-700 !important;
378
+ }
379
+ .bg-blue-800 {
380
+ background: dc.$blue-800 !important;
381
+ }
382
+ .bg-blue-900 {
383
+ background: dc.$blue-900 !important;
384
+ }
385
+
386
+ .bg-cyan-50 {
387
+ background: dc.$cyan-50 !important;
388
+ }
389
+ .bg-cyan-100 {
390
+ background: dc.$cyan-100 !important;
391
+ }
392
+ .bg-cyan-200 {
393
+ background: dc.$cyan-200 !important;
394
+ }
395
+ .bg-cyan-300 {
396
+ background: dc.$cyan-300 !important;
397
+ }
398
+ .bg-cyan-400 {
399
+ background: dc.$cyan-400 !important;
400
+ }
401
+ .bg-cyan-500 {
402
+ background: dc.$cyan-500 !important;
403
+ }
404
+ .bg-cyan-600 {
405
+ background: dc.$cyan-600 !important;
406
+ }
407
+ .bg-cyan-700 {
408
+ background: dc.$cyan-700 !important;
409
+ }
410
+ .bg-cyan-800 {
411
+ background: dc.$cyan-800 !important;
412
+ }
413
+ .bg-cyan-900 {
414
+ background: dc.$cyan-900 !important;
415
+ }
416
+
417
+ .bg-red-50 {
418
+ background: dc.$red-50 !important;
419
+ }
420
+ .bg-red-100 {
421
+ background: dc.$red-100 !important;
422
+ }
423
+ .bg-red-200 {
424
+ background: dc.$red-200 !important;
425
+ }
426
+ .bg-red-300 {
427
+ background: dc.$red-300 !important;
428
+ }
429
+ .bg-red-400 {
430
+ background: dc.$red-400 !important;
431
+ }
432
+ .bg-red-500 {
433
+ background: dc.$red-500 !important;
434
+ }
435
+ .bg-red-600 {
436
+ background: dc.$red-600 !important;
437
+ }
438
+ .bg-red-700 {
439
+ background: dc.$red-700 !important;
440
+ }
441
+ .bg-red-800 {
442
+ background: dc.$red-800 !important;
443
+ }
444
+ .bg-red-900 {
445
+ background: dc.$red-900 !important;
446
+ }
447
+
448
+ .bg-green-50 {
449
+ background: dc.$green-50 !important;
450
+ }
451
+ .bg-green-100 {
452
+ background: dc.$green-100 !important;
453
+ }
454
+ .bg-green-200 {
455
+ background: dc.$green-200 !important;
456
+ }
457
+ .bg-green-300 {
458
+ background: dc.$green-300 !important;
459
+ }
460
+ .bg-green-400 {
461
+ background: dc.$green-400 !important;
462
+ }
463
+ .bg-green-500 {
464
+ background: dc.$green-500 !important;
465
+ }
466
+ .bg-green-600 {
467
+ background: dc.$green-600 !important;
468
+ }
469
+ .bg-green-700 {
470
+ background: dc.$green-700 !important;
471
+ }
472
+ .bg-green-800 {
473
+ background: dc.$green-800 !important;
474
+ }
475
+ .bg-green-900 {
476
+ background: dc.$green-900 !important;
477
+ }
478
+
479
+ .bg-lime-50 {
480
+ background: dc.$lime-50 !important;
481
+ }
482
+ .bg-lime-100 {
483
+ background: dc.$lime-100 !important;
484
+ }
485
+ .bg-lime-200 {
486
+ background: dc.$lime-200 !important;
487
+ }
488
+ .bg-lime-300 {
489
+ background: dc.$lime-300 !important;
490
+ }
491
+ .bg-lime-400 {
492
+ background: dc.$lime-400 !important;
493
+ }
494
+ .bg-lime-500 {
495
+ background: dc.$lime-500 !important;
496
+ }
497
+ .bg-lime-600 {
498
+ background: dc.$lime-600 !important;
499
+ }
500
+ .bg-lime-700 {
501
+ background: dc.$lime-700 !important;
502
+ }
503
+ .bg-lime-800 {
504
+ background: dc.$lime-800 !important;
505
+ }
506
+ .bg-lime-900 {
507
+ background: dc.$lime-900 !important;
508
+ }
509
+
510
+ .bg-indigo-50 {
511
+ background: dc.$indigo-50 !important;
512
+ }
513
+ .bg-indigo-100 {
514
+ background: dc.$indigo-100 !important;
515
+ }
516
+ .bg-indigo-200 {
517
+ background: dc.$indigo-200 !important;
518
+ }
519
+ .bg-indigo-300 {
520
+ background: dc.$indigo-300 !important;
521
+ }
522
+ .bg-indigo-400 {
523
+ background: dc.$indigo-400 !important;
524
+ }
525
+ .bg-indigo-500 {
526
+ background: dc.$indigo-500 !important;
527
+ }
528
+ .bg-indigo-600 {
529
+ background: dc.$indigo-600 !important;
530
+ }
531
+ .bg-indigo-700 {
532
+ background: dc.$indigo-700 !important;
533
+ }
534
+ .bg-indigo-800 {
535
+ background: dc.$indigo-800 !important;
536
+ }
537
+ .bg-indigo-900 {
538
+ background: dc.$indigo-900 !important;
539
+ }
540
+
541
+ .bg-yellow-50 {
542
+ background: dc.$yellow-50 !important;
543
+ }
544
+ .bg-yellow-100 {
545
+ background: dc.$yellow-100 !important;
546
+ }
547
+ .bg-yellow-200 {
548
+ background: dc.$yellow-200 !important;
549
+ }
550
+ .bg-yellow-300 {
551
+ background: dc.$yellow-300 !important;
552
+ }
553
+ .bg-yellow-400 {
554
+ background: dc.$yellow-400 !important;
555
+ }
556
+ .bg-yellow-500 {
557
+ background: dc.$yellow-500 !important;
558
+ }
559
+ .bg-yellow-600 {
560
+ background: dc.$yellow-600 !important;
561
+ }
562
+ .bg-yellow-700 {
563
+ background: dc.$yellow-700 !important;
564
+ }
565
+ .bg-yellow-800 {
566
+ background: dc.$yellow-800 !important;
567
+ }
568
+ .bg-yellow-900 {
569
+ background: dc.$yellow-900 !important;
570
+ }
571
+
572
+ .bg-orange-50 {
573
+ background: dc.$orange-50 !important;
574
+ }
575
+ .bg-orange-100 {
576
+ background: dc.$orange-100 !important;
577
+ }
578
+ .bg-orange-200 {
579
+ background: dc.$orange-200 !important;
580
+ }
581
+ .bg-orange-300 {
582
+ background: dc.$orange-300 !important;
583
+ }
584
+ .bg-orange-400 {
585
+ background: dc.$orange-400 !important;
586
+ }
587
+ .bg-orange-500 {
588
+ background: dc.$orange-500 !important;
589
+ }
590
+ .bg-orange-600 {
591
+ background: dc.$orange-600 !important;
592
+ }
593
+ .bg-orange-700 {
594
+ background: dc.$orange-700 !important;
595
+ }
596
+ .bg-orange-800 {
597
+ background: dc.$orange-800 !important;
598
+ }
599
+ .bg-orange-900 {
600
+ background: dc.$orange-900 !important;
601
+ }