dynamic-ds 1.0.7 → 1.0.8
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/README.md +339 -270
- package/package.json +1 -1
- package/src/lib/styles/_animations.scss +1012 -300
- package/src/lib/styles/_spacing.scss +1413 -563
- package/src/lib/styles/_typography.scss +293 -148
- package/src/lib/styles/icons.scss +3135 -0
package/README.md
CHANGED
|
@@ -411,208 +411,275 @@ export class SettingsComponent {
|
|
|
411
411
|
</details>
|
|
412
412
|
|
|
413
413
|
<details open>
|
|
414
|
-
<summary><strong>Available Icons</strong></summary>
|
|
415
|
-
|
|
416
|
-
The library includes **
|
|
417
|
-
|
|
418
|
-
#### Activity & Status Icons
|
|
419
|
-
|
|
420
|
-
| Icon | Duocolor | Duotone | Line | Solid | Class Names |
|
|
421
|
-
|------|------|------|------|------|-------------|
|
|
422
|
-
| Activity | - | - |  |  | `dsi-activity-line` `dsi-activity-solid` |
|
|
423
|
-
| Activity Heart | - | - |  |  | `dsi-activity-heart-line` `dsi-activity-heart-solid` |
|
|
424
|
-
| Check Circle |  |  |  |  | `dsi-check-circle-duocolor` `dsi-check-circle-duotone` `dsi-check-circle-line` `dsi-check-circle-solid` |
|
|
425
|
-
| Check Square | - | - |  |  | `dsi-check-square-line` `dsi-check-square-solid` |
|
|
426
|
-
| Info Circle | - | - |  |  | `dsi-info-circle-line` `dsi-info-circle-solid` |
|
|
427
|
-
| X Close | - | - |  |  | `dsi-x-close-line` `dsi-x-close-solid` |
|
|
428
|
-
| X Circle |  |  |  |  | `dsi-x-circle-duocolor` `dsi-x-circle-duotone` `dsi-x-circle-line` `dsi-x-circle-solid` |
|
|
429
|
-
| Minus Circle |  |  |  |  | `dsi-minus-circle-duocolor` `dsi-minus-circle-duotone` `dsi-minus-circle-line` `dsi-minus-circle-solid` |
|
|
430
|
-
|
|
431
|
-
#### Navigation Icons
|
|
432
|
-
|
|
433
|
-
| Icon | Line | Solid | Class Names |
|
|
434
|
-
|------|------|------|-------------|
|
|
435
|
-
| Anchor |  |  | `dsi-anchor-line` `dsi-anchor-solid` |
|
|
436
|
-
| Home 01 |  |  | `dsi-home-01-line` `dsi-home-01-solid` |
|
|
437
|
-
| Home 02 |  |  | `dsi-home-02-line` `dsi-home-02-solid` |
|
|
438
|
-
| Home 03 |  |  | `dsi-home-03-line` `dsi-home-03-solid` |
|
|
439
|
-
| Home 04 |  |  | `dsi-home-04-line` `dsi-home-04-solid` |
|
|
440
|
-
| Home 05 |  |  | `dsi-home-05-line` `dsi-home-05-solid` |
|
|
441
|
-
| Home Line |  |  | `dsi-home-line-line` `dsi-home-line-solid` |
|
|
442
|
-
| Home Smile |  |  | `dsi-home-smile-line` `dsi-home-smile-solid` |
|
|
443
|
-
|
|
444
|
-
#### Arrow Icons
|
|
445
|
-
|
|
446
|
-
| Icon | Line | Solid | Class Names |
|
|
447
|
-
|------|------|------|-------------|
|
|
448
|
-
| Arrow Up |  |  | `dsi-arrow-up-line` `dsi-arrow-up-solid` |
|
|
449
|
-
| Arrow Down |  |  | `dsi-arrow-down-line` `dsi-arrow-down-solid` |
|
|
450
|
-
| Arrow Left |  |  | `dsi-arrow-left-line` `dsi-arrow-left-solid` |
|
|
451
|
-
| Arrow Right |  |  | `dsi-arrow-right-line` `dsi-arrow-right-solid` |
|
|
452
|
-
| Arrow Up Left |  |  | `dsi-arrow-up-left-line` `dsi-arrow-up-left-solid` |
|
|
453
|
-
| Arrow Up Right |  |  | `dsi-arrow-up-right-line` `dsi-arrow-up-right-solid` |
|
|
454
|
-
| Arrow Down Left |  |  | `dsi-arrow-down-left-line` `dsi-arrow-down-left-solid` |
|
|
455
|
-
| Arrow Down Right |  |  | `dsi-arrow-down-right-line` `dsi-arrow-down-right-solid` |
|
|
456
|
-
|
|
457
|
-
#### Arrow Circle Icons
|
|
458
|
-
|
|
459
|
-
| Icon | Line | Solid | Class Names |
|
|
460
|
-
|------|------|------|-------------|
|
|
461
|
-
| Arrow Circle Up |  |  | `dsi-arrow-circle-up-line` `dsi-arrow-circle-up-solid` |
|
|
462
|
-
| Arrow Circle Down |  |  | `dsi-arrow-circle-down-line` `dsi-arrow-circle-down-solid` |
|
|
463
|
-
| Arrow Circle Left |  |  | `dsi-arrow-circle-left-line` `dsi-arrow-circle-left-solid` |
|
|
464
|
-
| Arrow Circle Right |  |  | `dsi-arrow-circle-right-line` `dsi-arrow-circle-right-solid` |
|
|
465
|
-
| Arrow Circle Up Left |  |  | `dsi-arrow-circle-up-left-line` `dsi-arrow-circle-up-left-solid` |
|
|
466
|
-
| Arrow Circle Up Right |  |  | `dsi-arrow-circle-up-right-line` `dsi-arrow-circle-up-right-solid` |
|
|
467
|
-
| Arrow Circle Down Left |  |  | `dsi-arrow-circle-down-left-line` `dsi-arrow-circle-down-left-solid` |
|
|
468
|
-
| Arrow Circle Down Right |  |  | `dsi-arrow-circle-down-right-line` `dsi-arrow-circle-down-right-solid` |
|
|
469
|
-
|
|
470
|
-
#### Arrow Square Icons
|
|
471
|
-
|
|
472
|
-
| Icon | Line | Solid | Class Names |
|
|
473
|
-
|------|------|------|-------------|
|
|
474
|
-
| Arrow Square Up |  |  | `dsi-arrow-square-up-line` `dsi-arrow-square-up-solid` |
|
|
475
|
-
| Arrow Square Down |  |  | `dsi-arrow-square-down-line` `dsi-arrow-square-down-solid` |
|
|
476
|
-
| Arrow Square Left |  |  | `dsi-arrow-square-left-line` `dsi-arrow-square-left-solid` |
|
|
477
|
-
| Arrow Square Right |  |  | `dsi-arrow-square-right-line` `dsi-arrow-square-right-solid` |
|
|
478
|
-
| Arrow Square Up Left |  |  | `dsi-arrow-square-up-left-line` `dsi-arrow-square-up-left-solid` |
|
|
479
|
-
| Arrow Square Up Right |  |  | `dsi-arrow-square-up-right-line` `dsi-arrow-square-up-right-solid` |
|
|
480
|
-
| Arrow Square Down Left |  |  | `dsi-arrow-square-down-left-line` `dsi-arrow-square-down-left-solid` |
|
|
481
|
-
| Arrow Square Down Right |  |  | `dsi-arrow-square-down-right-line` `dsi-arrow-square-down-right-solid` |
|
|
482
|
-
|
|
483
|
-
#### Arrow Block Icons
|
|
484
|
-
|
|
485
|
-
| Icon | Line | Solid | Class Names |
|
|
486
|
-
|------|------|------|-------------|
|
|
487
|
-
| Arrow Block Up |  |  | `dsi-arrow-block-up-line` `dsi-arrow-block-up-solid` |
|
|
488
|
-
| Arrow Block Down |  |  | `dsi-arrow-block-down-line` `dsi-arrow-block-down-solid` |
|
|
489
|
-
| Arrow Block Left |  |  | `dsi-arrow-block-left-line` `dsi-arrow-block-left-solid` |
|
|
490
|
-
| Arrow Block Right |  |  | `dsi-arrow-block-right-line` `dsi-arrow-block-right-solid` |
|
|
491
|
-
|
|
492
|
-
#### Arrow Narrow Icons
|
|
493
|
-
|
|
494
|
-
| Icon | Line | Solid | Class Names |
|
|
495
|
-
|------|------|------|-------------|
|
|
496
|
-
| Arrow Narrow Up |  |  | `dsi-arrow-narrow-up-line` `dsi-arrow-narrow-up-solid` |
|
|
497
|
-
| Arrow Narrow Down |  |  | `dsi-arrow-narrow-down-line` `dsi-arrow-narrow-down-solid` |
|
|
498
|
-
| Arrow Narrow Left |  |  | `dsi-arrow-narrow-left-line` `dsi-arrow-narrow-left-solid` |
|
|
499
|
-
| Arrow Narrow Right |  |  | `dsi-arrow-narrow-right-line` `dsi-arrow-narrow-right-solid` |
|
|
500
|
-
| Arrow Narrow Up Left |  |  | `dsi-arrow-narrow-up-left-line` `dsi-arrow-narrow-up-left-solid` |
|
|
501
|
-
| Arrow Narrow Up Right |  |  | `dsi-arrow-narrow-up-right-line` `dsi-arrow-narrow-up-right-solid` |
|
|
502
|
-
| Arrow Narrow Down Left |  |  | `dsi-arrow-narrow-down-left-line` `dsi-arrow-narrow-down-left-solid` |
|
|
503
|
-
| Arrow Narrow Down Right |  |  | `dsi-arrow-narrow-down-right-line` `dsi-arrow-narrow-down-right-solid` |
|
|
504
|
-
|
|
505
|
-
#### Arrow Circle Broken Icons
|
|
506
|
-
|
|
507
|
-
| Icon | Line | Solid | Class Names |
|
|
508
|
-
|------|------|------|-------------|
|
|
509
|
-
| Arrow Circle Broken Up |  |  | `dsi-arrow-circle-broken-up-line` `dsi-arrow-circle-broken-up-solid` |
|
|
510
|
-
| Arrow Circle Broken Down |  |  | `dsi-arrow-circle-broken-down-line` `dsi-arrow-circle-broken-down-solid` |
|
|
511
|
-
| Arrow Circle Broken Left |  |  | `dsi-arrow-circle-broken-left-line` `dsi-arrow-circle-broken-left-solid` |
|
|
512
|
-
| Arrow Circle Broken Right |  |  | `dsi-arrow-circle-broken-right-line` `dsi-arrow-circle-broken-right-solid` |
|
|
513
|
-
| Arrow Circle Broken Up Left |  |  | `dsi-arrow-circle-broken-up-left-line` `dsi-arrow-circle-broken-up-left-solid` |
|
|
514
|
-
| Arrow Circle Broken Up Right |  |  | `dsi-arrow-circle-broken-up-right-line` `dsi-arrow-circle-broken-up-right-solid` |
|
|
515
|
-
| Arrow Circle Broken Down Left |  |  | `dsi-arrow-circle-broken-down-left-line` `dsi-arrow-circle-broken-down-left-solid` |
|
|
516
|
-
| Arrow Circle Broken Down Right |  |  | `dsi-arrow-circle-broken-down-right-line` `dsi-arrow-circle-broken-down-right-solid` |
|
|
517
|
-
|
|
518
|
-
#### Multi-Arrow Icons
|
|
519
|
-
|
|
520
|
-
| Icon | Line | Solid | Class Names |
|
|
521
|
-
|------|------|------|-------------|
|
|
522
|
-
| Arrows Up |  |  | `dsi-arrows-up-line` `dsi-arrows-up-solid` |
|
|
523
|
-
| Arrows Down |  |  | `dsi-arrows-down-line` `dsi-arrows-down-solid` |
|
|
524
|
-
| Arrows Left |  |  | `dsi-arrows-left-line` `dsi-arrows-left-solid` |
|
|
525
|
-
| Arrows Right |  |  | `dsi-arrows-right-line` `dsi-arrows-right-solid` |
|
|
526
|
-
| Arrows Triangle |  |  | `dsi-arrows-triangle-line` `dsi-arrows-triangle-solid` |
|
|
527
|
-
|
|
528
|
-
#### Calendar Icons
|
|
529
|
-
|
|
530
|
-
| Icon | Line | Solid | Class Names |
|
|
531
|
-
|------|------|------|-------------|
|
|
532
|
-
| Calendar |  |  | `dsi-calendar-line` `dsi-calendar-solid` |
|
|
533
|
-
| Calendar Check 01 |  |  | `dsi-calendar-check-01-line` `dsi-calendar-check-01-solid` |
|
|
534
|
-
| Calendar Check 02 |  |  | `dsi-calendar-check-02-line` `dsi-calendar-check-02-solid` |
|
|
535
|
-
| Calendar Date |  |  | `dsi-calendar-date-line` `dsi-calendar-date-solid` |
|
|
536
|
-
| Calendar Heart 01 |  |  | `dsi-calendar-heart-01-line` `dsi-calendar-heart-01-solid` |
|
|
537
|
-
| Calendar Heart 02 |  |  | `dsi-calendar-heart-02-line` `dsi-calendar-heart-02-solid` |
|
|
538
|
-
| Calendar Minus 01 |  |  | `dsi-calendar-minus-01-line` `dsi-calendar-minus-01-solid` |
|
|
539
|
-
| Calendar Minus 02 |  |  | `dsi-calendar-minus-02-line` `dsi-calendar-minus-02-solid` |
|
|
540
|
-
| Calendar Plus 01 |  |  | `dsi-calendar-plus-01-line` `dsi-calendar-plus-01-solid` |
|
|
541
|
-
| Calendar Plus 02 |  |  | `dsi-calendar-plus-02-line` `dsi-calendar-plus-02-solid` |
|
|
542
|
-
|
|
543
|
-
#### Other Icons
|
|
544
|
-
|
|
545
|
-
| Icon | Line | Solid | Class Names |
|
|
546
|
-
|------|------|------|-------------|
|
|
547
|
-
|
|
|
548
|
-
|
|
|
549
|
-
|
|
|
550
|
-
|
|
|
551
|
-
|
|
|
552
|
-
|
|
|
553
|
-
|
|
|
554
|
-
|
|
|
555
|
-
|
|
|
556
|
-
|
|
|
557
|
-
|
|
|
558
|
-
|
|
|
559
|
-
|
|
|
560
|
-
|
|
|
561
|
-
|
|
|
562
|
-
|
|
|
563
|
-
|
|
|
564
|
-
|
|
|
565
|
-
|
|
|
566
|
-
|
|
|
567
|
-
|
|
|
568
|
-
|
|
|
569
|
-
|
|
|
570
|
-
|
|
|
571
|
-
|
|
|
572
|
-
|
|
|
573
|
-
|
|
|
574
|
-
|
|
|
575
|
-
|
|
|
576
|
-
|
|
|
577
|
-
|
|
|
578
|
-
|
|
|
579
|
-
|
|
|
580
|
-
|
|
|
581
|
-
|
|
|
582
|
-
|
|
|
583
|
-
|
|
|
584
|
-
|
|
|
585
|
-
|
|
|
586
|
-
|
|
|
587
|
-
|
|
|
588
|
-
|
|
|
589
|
-
|
|
|
590
|
-
|
|
|
591
|
-
|
|
|
592
|
-
|
|
|
593
|
-
|
|
|
594
|
-
|
|
|
595
|
-
|
|
|
596
|
-
|
|
|
597
|
-
|
|
|
598
|
-
|
|
|
599
|
-
|
|
|
600
|
-
|
|
|
601
|
-
|
|
|
602
|
-
|
|
|
603
|
-
|
|
|
604
|
-
|
|
|
605
|
-
|
|
|
606
|
-
|
|
|
607
|
-
|
|
|
608
|
-
|
|
|
609
|
-
|
|
|
610
|
-
|
|
|
611
|
-
|
|
|
612
|
-
|
|
|
613
|
-
|
|
|
614
|
-
|
|
|
615
|
-
|
|
414
|
+
<summary><strong>Available Icons</strong></summary>
|
|
415
|
+
|
|
416
|
+
The library includes **210 icons** with multiple style variants (duocolor, duotone, line, solid). Below is the complete list:
|
|
417
|
+
|
|
418
|
+
#### Activity & Status Icons
|
|
419
|
+
|
|
420
|
+
| Icon | Duocolor | Duotone | Line | Solid | Class Names |
|
|
421
|
+
|------|------|------|------|------|-------------|
|
|
422
|
+
| Activity | - | - |  |  | `dsi-activity-line` `dsi-activity-solid` |
|
|
423
|
+
| Activity Heart | - | - |  |  | `dsi-activity-heart-line` `dsi-activity-heart-solid` |
|
|
424
|
+
| Check Circle |  |  |  |  | `dsi-check-circle-duocolor` `dsi-check-circle-duotone` `dsi-check-circle-line` `dsi-check-circle-solid` |
|
|
425
|
+
| Check Square | - | - |  |  | `dsi-check-square-line` `dsi-check-square-solid` |
|
|
426
|
+
| Info Circle | - | - |  |  | `dsi-info-circle-line` `dsi-info-circle-solid` |
|
|
427
|
+
| X Close | - | - |  |  | `dsi-x-close-line` `dsi-x-close-solid` |
|
|
428
|
+
| X Circle |  |  |  |  | `dsi-x-circle-duocolor` `dsi-x-circle-duotone` `dsi-x-circle-line` `dsi-x-circle-solid` |
|
|
429
|
+
| Minus Circle |  |  |  |  | `dsi-minus-circle-duocolor` `dsi-minus-circle-duotone` `dsi-minus-circle-line` `dsi-minus-circle-solid` |
|
|
430
|
+
|
|
431
|
+
#### Navigation Icons
|
|
432
|
+
|
|
433
|
+
| Icon | Line | Solid | Class Names |
|
|
434
|
+
|------|------|------|-------------|
|
|
435
|
+
| Anchor |  |  | `dsi-anchor-line` `dsi-anchor-solid` |
|
|
436
|
+
| Home 01 |  |  | `dsi-home-01-line` `dsi-home-01-solid` |
|
|
437
|
+
| Home 02 |  |  | `dsi-home-02-line` `dsi-home-02-solid` |
|
|
438
|
+
| Home 03 |  |  | `dsi-home-03-line` `dsi-home-03-solid` |
|
|
439
|
+
| Home 04 |  |  | `dsi-home-04-line` `dsi-home-04-solid` |
|
|
440
|
+
| Home 05 |  |  | `dsi-home-05-line` `dsi-home-05-solid` |
|
|
441
|
+
| Home Line |  |  | `dsi-home-line-line` `dsi-home-line-solid` |
|
|
442
|
+
| Home Smile |  |  | `dsi-home-smile-line` `dsi-home-smile-solid` |
|
|
443
|
+
|
|
444
|
+
#### Arrow Icons
|
|
445
|
+
|
|
446
|
+
| Icon | Line | Solid | Class Names |
|
|
447
|
+
|------|------|------|-------------|
|
|
448
|
+
| Arrow Up |  |  | `dsi-arrow-up-line` `dsi-arrow-up-solid` |
|
|
449
|
+
| Arrow Down |  |  | `dsi-arrow-down-line` `dsi-arrow-down-solid` |
|
|
450
|
+
| Arrow Left |  |  | `dsi-arrow-left-line` `dsi-arrow-left-solid` |
|
|
451
|
+
| Arrow Right |  |  | `dsi-arrow-right-line` `dsi-arrow-right-solid` |
|
|
452
|
+
| Arrow Up Left |  |  | `dsi-arrow-up-left-line` `dsi-arrow-up-left-solid` |
|
|
453
|
+
| Arrow Up Right |  |  | `dsi-arrow-up-right-line` `dsi-arrow-up-right-solid` |
|
|
454
|
+
| Arrow Down Left |  |  | `dsi-arrow-down-left-line` `dsi-arrow-down-left-solid` |
|
|
455
|
+
| Arrow Down Right |  |  | `dsi-arrow-down-right-line` `dsi-arrow-down-right-solid` |
|
|
456
|
+
|
|
457
|
+
#### Arrow Circle Icons
|
|
458
|
+
|
|
459
|
+
| Icon | Line | Solid | Class Names |
|
|
460
|
+
|------|------|------|-------------|
|
|
461
|
+
| Arrow Circle Up |  |  | `dsi-arrow-circle-up-line` `dsi-arrow-circle-up-solid` |
|
|
462
|
+
| Arrow Circle Down |  |  | `dsi-arrow-circle-down-line` `dsi-arrow-circle-down-solid` |
|
|
463
|
+
| Arrow Circle Left |  |  | `dsi-arrow-circle-left-line` `dsi-arrow-circle-left-solid` |
|
|
464
|
+
| Arrow Circle Right |  |  | `dsi-arrow-circle-right-line` `dsi-arrow-circle-right-solid` |
|
|
465
|
+
| Arrow Circle Up Left |  |  | `dsi-arrow-circle-up-left-line` `dsi-arrow-circle-up-left-solid` |
|
|
466
|
+
| Arrow Circle Up Right |  |  | `dsi-arrow-circle-up-right-line` `dsi-arrow-circle-up-right-solid` |
|
|
467
|
+
| Arrow Circle Down Left |  |  | `dsi-arrow-circle-down-left-line` `dsi-arrow-circle-down-left-solid` |
|
|
468
|
+
| Arrow Circle Down Right |  |  | `dsi-arrow-circle-down-right-line` `dsi-arrow-circle-down-right-solid` |
|
|
469
|
+
|
|
470
|
+
#### Arrow Square Icons
|
|
471
|
+
|
|
472
|
+
| Icon | Line | Solid | Class Names |
|
|
473
|
+
|------|------|------|-------------|
|
|
474
|
+
| Arrow Square Up |  |  | `dsi-arrow-square-up-line` `dsi-arrow-square-up-solid` |
|
|
475
|
+
| Arrow Square Down |  |  | `dsi-arrow-square-down-line` `dsi-arrow-square-down-solid` |
|
|
476
|
+
| Arrow Square Left |  |  | `dsi-arrow-square-left-line` `dsi-arrow-square-left-solid` |
|
|
477
|
+
| Arrow Square Right |  |  | `dsi-arrow-square-right-line` `dsi-arrow-square-right-solid` |
|
|
478
|
+
| Arrow Square Up Left |  |  | `dsi-arrow-square-up-left-line` `dsi-arrow-square-up-left-solid` |
|
|
479
|
+
| Arrow Square Up Right |  |  | `dsi-arrow-square-up-right-line` `dsi-arrow-square-up-right-solid` |
|
|
480
|
+
| Arrow Square Down Left |  |  | `dsi-arrow-square-down-left-line` `dsi-arrow-square-down-left-solid` |
|
|
481
|
+
| Arrow Square Down Right |  |  | `dsi-arrow-square-down-right-line` `dsi-arrow-square-down-right-solid` |
|
|
482
|
+
|
|
483
|
+
#### Arrow Block Icons
|
|
484
|
+
|
|
485
|
+
| Icon | Line | Solid | Class Names |
|
|
486
|
+
|------|------|------|-------------|
|
|
487
|
+
| Arrow Block Up |  |  | `dsi-arrow-block-up-line` `dsi-arrow-block-up-solid` |
|
|
488
|
+
| Arrow Block Down |  |  | `dsi-arrow-block-down-line` `dsi-arrow-block-down-solid` |
|
|
489
|
+
| Arrow Block Left |  |  | `dsi-arrow-block-left-line` `dsi-arrow-block-left-solid` |
|
|
490
|
+
| Arrow Block Right |  |  | `dsi-arrow-block-right-line` `dsi-arrow-block-right-solid` |
|
|
491
|
+
|
|
492
|
+
#### Arrow Narrow Icons
|
|
493
|
+
|
|
494
|
+
| Icon | Line | Solid | Class Names |
|
|
495
|
+
|------|------|------|-------------|
|
|
496
|
+
| Arrow Narrow Up |  |  | `dsi-arrow-narrow-up-line` `dsi-arrow-narrow-up-solid` |
|
|
497
|
+
| Arrow Narrow Down |  |  | `dsi-arrow-narrow-down-line` `dsi-arrow-narrow-down-solid` |
|
|
498
|
+
| Arrow Narrow Left |  |  | `dsi-arrow-narrow-left-line` `dsi-arrow-narrow-left-solid` |
|
|
499
|
+
| Arrow Narrow Right |  |  | `dsi-arrow-narrow-right-line` `dsi-arrow-narrow-right-solid` |
|
|
500
|
+
| Arrow Narrow Up Left |  |  | `dsi-arrow-narrow-up-left-line` `dsi-arrow-narrow-up-left-solid` |
|
|
501
|
+
| Arrow Narrow Up Right |  |  | `dsi-arrow-narrow-up-right-line` `dsi-arrow-narrow-up-right-solid` |
|
|
502
|
+
| Arrow Narrow Down Left |  |  | `dsi-arrow-narrow-down-left-line` `dsi-arrow-narrow-down-left-solid` |
|
|
503
|
+
| Arrow Narrow Down Right |  |  | `dsi-arrow-narrow-down-right-line` `dsi-arrow-narrow-down-right-solid` |
|
|
504
|
+
|
|
505
|
+
#### Arrow Circle Broken Icons
|
|
506
|
+
|
|
507
|
+
| Icon | Line | Solid | Class Names |
|
|
508
|
+
|------|------|------|-------------|
|
|
509
|
+
| Arrow Circle Broken Up |  |  | `dsi-arrow-circle-broken-up-line` `dsi-arrow-circle-broken-up-solid` |
|
|
510
|
+
| Arrow Circle Broken Down |  |  | `dsi-arrow-circle-broken-down-line` `dsi-arrow-circle-broken-down-solid` |
|
|
511
|
+
| Arrow Circle Broken Left |  |  | `dsi-arrow-circle-broken-left-line` `dsi-arrow-circle-broken-left-solid` |
|
|
512
|
+
| Arrow Circle Broken Right |  |  | `dsi-arrow-circle-broken-right-line` `dsi-arrow-circle-broken-right-solid` |
|
|
513
|
+
| Arrow Circle Broken Up Left |  |  | `dsi-arrow-circle-broken-up-left-line` `dsi-arrow-circle-broken-up-left-solid` |
|
|
514
|
+
| Arrow Circle Broken Up Right |  |  | `dsi-arrow-circle-broken-up-right-line` `dsi-arrow-circle-broken-up-right-solid` |
|
|
515
|
+
| Arrow Circle Broken Down Left |  |  | `dsi-arrow-circle-broken-down-left-line` `dsi-arrow-circle-broken-down-left-solid` |
|
|
516
|
+
| Arrow Circle Broken Down Right |  |  | `dsi-arrow-circle-broken-down-right-line` `dsi-arrow-circle-broken-down-right-solid` |
|
|
517
|
+
|
|
518
|
+
#### Multi-Arrow Icons
|
|
519
|
+
|
|
520
|
+
| Icon | Line | Solid | Class Names |
|
|
521
|
+
|------|------|------|-------------|
|
|
522
|
+
| Arrows Up |  |  | `dsi-arrows-up-line` `dsi-arrows-up-solid` |
|
|
523
|
+
| Arrows Down |  |  | `dsi-arrows-down-line` `dsi-arrows-down-solid` |
|
|
524
|
+
| Arrows Left |  |  | `dsi-arrows-left-line` `dsi-arrows-left-solid` |
|
|
525
|
+
| Arrows Right |  |  | `dsi-arrows-right-line` `dsi-arrows-right-solid` |
|
|
526
|
+
| Arrows Triangle |  |  | `dsi-arrows-triangle-line` `dsi-arrows-triangle-solid` |
|
|
527
|
+
|
|
528
|
+
#### Calendar Icons
|
|
529
|
+
|
|
530
|
+
| Icon | Line | Solid | Class Names |
|
|
531
|
+
|------|------|------|-------------|
|
|
532
|
+
| Calendar |  |  | `dsi-calendar-line` `dsi-calendar-solid` |
|
|
533
|
+
| Calendar Check 01 |  |  | `dsi-calendar-check-01-line` `dsi-calendar-check-01-solid` |
|
|
534
|
+
| Calendar Check 02 |  |  | `dsi-calendar-check-02-line` `dsi-calendar-check-02-solid` |
|
|
535
|
+
| Calendar Date |  |  | `dsi-calendar-date-line` `dsi-calendar-date-solid` |
|
|
536
|
+
| Calendar Heart 01 |  |  | `dsi-calendar-heart-01-line` `dsi-calendar-heart-01-solid` |
|
|
537
|
+
| Calendar Heart 02 |  |  | `dsi-calendar-heart-02-line` `dsi-calendar-heart-02-solid` |
|
|
538
|
+
| Calendar Minus 01 |  |  | `dsi-calendar-minus-01-line` `dsi-calendar-minus-01-solid` |
|
|
539
|
+
| Calendar Minus 02 |  |  | `dsi-calendar-minus-02-line` `dsi-calendar-minus-02-solid` |
|
|
540
|
+
| Calendar Plus 01 |  |  | `dsi-calendar-plus-01-line` `dsi-calendar-plus-01-solid` |
|
|
541
|
+
| Calendar Plus 02 |  |  | `dsi-calendar-plus-02-line` `dsi-calendar-plus-02-solid` |
|
|
542
|
+
|
|
543
|
+
#### Other Icons
|
|
544
|
+
|
|
545
|
+
| Icon | Line | Solid | Class Names |
|
|
546
|
+
|------|------|------|-------------|
|
|
547
|
+
| Announcement 01 |  |  | `dsi-announcement-01-line` `dsi-announcement-01-solid` |
|
|
548
|
+
| Announcement 02 |  |  | `dsi-announcement-02-line` `dsi-announcement-02-solid` |
|
|
549
|
+
| Announcement 03 |  |  | `dsi-announcement-03-line` `dsi-announcement-03-solid` |
|
|
550
|
+
| Bar Chart 01 |  |  | `dsi-bar-chart-01-line` `dsi-bar-chart-01-solid` |
|
|
551
|
+
| Bar Chart 02 |  |  | `dsi-bar-chart-02-line` `dsi-bar-chart-02-solid` |
|
|
552
|
+
| Bar Chart 03 |  |  | `dsi-bar-chart-03-line` `dsi-bar-chart-03-solid` |
|
|
553
|
+
| Bar Chart 04 |  |  | `dsi-bar-chart-04-line` `dsi-bar-chart-04-solid` |
|
|
554
|
+
| Bar Chart 05 |  |  | `dsi-bar-chart-05-line` `dsi-bar-chart-05-solid` |
|
|
555
|
+
| Bar Chart 06 |  |  | `dsi-bar-chart-06-line` `dsi-bar-chart-06-solid` |
|
|
556
|
+
| Bar Chart 07 |  |  | `dsi-bar-chart-07-line` `dsi-bar-chart-07-solid` |
|
|
557
|
+
| Bar Chart 08 |  |  | `dsi-bar-chart-08-line` `dsi-bar-chart-08-solid` |
|
|
558
|
+
| Bar Chart 09 |  |  | `dsi-bar-chart-09-line` `dsi-bar-chart-09-solid` |
|
|
559
|
+
| Bar Chart 10 |  |  | `dsi-bar-chart-10-line` `dsi-bar-chart-10-solid` |
|
|
560
|
+
| Bar Chart 11 |  |  | `dsi-bar-chart-11-line` `dsi-bar-chart-11-solid` |
|
|
561
|
+
| Bar Chart 12 |  |  | `dsi-bar-chart-12-line` `dsi-bar-chart-12-solid` |
|
|
562
|
+
| Bell 01 |  |  | `dsi-bell-01-line` `dsi-bell-01-solid` |
|
|
563
|
+
| Bell 02 |  |  | `dsi-bell-02-line` `dsi-bell-02-solid` |
|
|
564
|
+
| Bell 03 |  |  | `dsi-bell-03-line` `dsi-bell-03-solid` |
|
|
565
|
+
| Bell 04 |  |  | `dsi-bell-04-line` `dsi-bell-04-solid` |
|
|
566
|
+
| Book Open 01 |  |  | `dsi-book-open-01-line` `dsi-book-open-01-solid` |
|
|
567
|
+
| Book Open 02 |  |  | `dsi-book-open-02-line` `dsi-book-open-02-solid` |
|
|
568
|
+
| Chevron Down |  |  | `dsi-chevron-down-line` `dsi-chevron-down-solid` |
|
|
569
|
+
| Chevron Down Double |  |  | `dsi-chevron-down-double-line` `dsi-chevron-down-double-solid` |
|
|
570
|
+
| Chevron Left |  |  | `dsi-chevron-left-line` `dsi-chevron-left-solid` |
|
|
571
|
+
| Chevron Left Double |  |  | `dsi-chevron-left-double-line` `dsi-chevron-left-double-solid` |
|
|
572
|
+
| Chevron Right |  |  | `dsi-chevron-right-line` `dsi-chevron-right-solid` |
|
|
573
|
+
| Chevron Right Double |  |  | `dsi-chevron-right-double-line` `dsi-chevron-right-double-solid` |
|
|
574
|
+
| Chevron Selector Horizontal |  |  | `dsi-chevron-selector-horizontal-line` `dsi-chevron-selector-horizontal-solid` |
|
|
575
|
+
| Chevron Selector Vertical |  |  | `dsi-chevron-selector-vertical-line` `dsi-chevron-selector-vertical-solid` |
|
|
576
|
+
| Chevron Up |  |  | `dsi-chevron-up-line` `dsi-chevron-up-solid` |
|
|
577
|
+
| Chevron Up Double |  |  | `dsi-chevron-up-double-line` `dsi-chevron-up-double-solid` |
|
|
578
|
+
| Dots Grid |  |  | `dsi-dots-grid-line` `dsi-dots-grid-solid` |
|
|
579
|
+
| Dots Horizontal |  |  | `dsi-dots-horizontal-line` `dsi-dots-horizontal-solid` |
|
|
580
|
+
| Dots Vertical |  |  | `dsi-dots-vertical-line` `dsi-dots-vertical-solid` |
|
|
581
|
+
| Edit 01 |  |  | `dsi-edit-01-line` `dsi-edit-01-solid` |
|
|
582
|
+
| Edit 02 |  |  | `dsi-edit-02-line` `dsi-edit-02-solid` |
|
|
583
|
+
| Edit 03 |  |  | `dsi-edit-03-line` `dsi-edit-03-solid` |
|
|
584
|
+
| Edit 04 |  |  | `dsi-edit-04-line` `dsi-edit-04-solid` |
|
|
585
|
+
| Edit 05 |  |  | `dsi-edit-05-line` `dsi-edit-05-solid` |
|
|
586
|
+
| File 01 |  |  | `dsi-file-01-line` `dsi-file-01-solid` |
|
|
587
|
+
| File 02 |  |  | `dsi-file-02-line` `dsi-file-02-solid` |
|
|
588
|
+
| File 03 |  |  | `dsi-file-03-line` `dsi-file-03-solid` |
|
|
589
|
+
| File 04 |  |  | `dsi-file-04-line` `dsi-file-04-solid` |
|
|
590
|
+
| File 05 |  |  | `dsi-file-05-line` `dsi-file-05-solid` |
|
|
591
|
+
| File 06 |  |  | `dsi-file-06-line` `dsi-file-06-solid` |
|
|
592
|
+
| File 07 |  |  | `dsi-file-07-line` `dsi-file-07-solid` |
|
|
593
|
+
| File Minus 01 |  |  | `dsi-file-minus-01-line` `dsi-file-minus-01-solid` |
|
|
594
|
+
| File Minus 02 |  |  | `dsi-file-minus-02-line` `dsi-file-minus-02-solid` |
|
|
595
|
+
| File Minus 03 |  |  | `dsi-file-minus-03-line` `dsi-file-minus-03-solid` |
|
|
596
|
+
| File Plus 01 |  |  | `dsi-file-plus-01-line` `dsi-file-plus-01-solid` |
|
|
597
|
+
| File Plus 02 |  |  | `dsi-file-plus-02-line` `dsi-file-plus-02-solid` |
|
|
598
|
+
| File Plus 03 |  |  | `dsi-file-plus-03-line` `dsi-file-plus-03-solid` |
|
|
599
|
+
| Help Circle |  |  | `dsi-help-circle-line` `dsi-help-circle-solid` |
|
|
600
|
+
| Help Hexagon |  |  | `dsi-help-hexagon-line` `dsi-help-hexagon-solid` |
|
|
601
|
+
| Help Octagon |  |  | `dsi-help-octagon-line` `dsi-help-octagon-solid` |
|
|
602
|
+
| Help Square |  |  | `dsi-help-square-line` `dsi-help-square-solid` |
|
|
603
|
+
| Info Hexagon |  |  | `dsi-info-hexagon-line` `dsi-info-hexagon-solid` |
|
|
604
|
+
| Info Octagon |  |  | `dsi-info-octagon-line` `dsi-info-octagon-solid` |
|
|
605
|
+
| Info Square |  |  | `dsi-info-square-line` `dsi-info-square-solid` |
|
|
606
|
+
| List |  |  | `dsi-list-line` `dsi-list-solid` |
|
|
607
|
+
| Mail 01 |  |  | `dsi-mail-01-line` `dsi-mail-01-solid` |
|
|
608
|
+
| Mail 02 |  |  | `dsi-mail-02-line` `dsi-mail-02-solid` |
|
|
609
|
+
| Mail 03 |  |  | `dsi-mail-03-line` `dsi-mail-03-solid` |
|
|
610
|
+
| Mail 04 |  |  | `dsi-mail-04-line` `dsi-mail-04-solid` |
|
|
611
|
+
| Mail 05 |  |  | `dsi-mail-05-line` `dsi-mail-05-solid` |
|
|
612
|
+
| Message Notification Circle |  |  | `dsi-message-notification-circle-line` `dsi-message-notification-circle-solid` |
|
|
613
|
+
| Message Notification Square |  |  | `dsi-message-notification-square-line` `dsi-message-notification-square-solid` |
|
|
614
|
+
| Notification Box |  |  | `dsi-notification-box-line` `dsi-notification-box-solid` |
|
|
615
|
+
| Notification Message |  |  | `dsi-notification-message-line` `dsi-notification-message-solid` |
|
|
616
|
+
| Notification Text |  |  | `dsi-notification-text-line` `dsi-notification-text-solid` |
|
|
617
|
+
| Plus |  |  | `dsi-plus-line` `dsi-plus-solid` |
|
|
618
|
+
| Plus Circle |  |  | `dsi-plus-circle-line` `dsi-plus-circle-solid` |
|
|
619
|
+
| Plus Square |  |  | `dsi-plus-square-line` `dsi-plus-square-solid` |
|
|
620
|
+
| Search Lg |  |  | `dsi-search-lg-line` `dsi-search-lg-solid` |
|
|
621
|
+
| Search Md |  |  | `dsi-search-md-line` `dsi-search-md-solid` |
|
|
622
|
+
| Search Refraction |  |  | `dsi-search-refraction-line` `dsi-search-refraction-solid` |
|
|
623
|
+
| Search Sm |  |  | `dsi-search-sm-line` `dsi-search-sm-solid` |
|
|
624
|
+
| Settings 01 |  |  | `dsi-settings-01-line` `dsi-settings-01-solid` |
|
|
625
|
+
| Settings 02 |  |  | `dsi-settings-02-line` `dsi-settings-02-solid` |
|
|
626
|
+
| Settings 03 |  |  | `dsi-settings-03-line` `dsi-settings-03-solid` |
|
|
627
|
+
| Settings 04 |  |  | `dsi-settings-04-line` `dsi-settings-04-solid` |
|
|
628
|
+
| Star 01 |  |  | `dsi-star-01-line` `dsi-star-01-solid` |
|
|
629
|
+
| Star 02 |  |  | `dsi-star-02-line` `dsi-star-02-solid` |
|
|
630
|
+
| Star 03 |  |  | `dsi-star-03-line` `dsi-star-03-solid` |
|
|
631
|
+
| Star 04 |  |  | `dsi-star-04-line` `dsi-star-04-solid` |
|
|
632
|
+
| Star 05 |  |  | `dsi-star-05-line` `dsi-star-05-solid` |
|
|
633
|
+
| Star 06 |  |  | `dsi-star-06-line` `dsi-star-06-solid` |
|
|
634
|
+
| Star 07 |  |  | `dsi-star-07-line` `dsi-star-07-solid` |
|
|
635
|
+
| Stars 01 |  |  | `dsi-stars-01-line` `dsi-stars-01-solid` |
|
|
636
|
+
| Stars 02 |  |  | `dsi-stars-02-line` `dsi-stars-02-solid` |
|
|
637
|
+
| Stars 03 |  |  | `dsi-stars-03-line` `dsi-stars-03-solid` |
|
|
638
|
+
| Ticket 01 |  |  | `dsi-ticket-01-line` `dsi-ticket-01-solid` |
|
|
639
|
+
| Ticket 02 |  |  | `dsi-ticket-02-line` `dsi-ticket-02-solid` |
|
|
640
|
+
| Trash 01 |  |  | `dsi-trash-01-line` `dsi-trash-01-solid` |
|
|
641
|
+
| Trash 02 |  |  | `dsi-trash-02-line` `dsi-trash-02-solid` |
|
|
642
|
+
| Trash 03 |  |  | `dsi-trash-03-line` `dsi-trash-03-solid` |
|
|
643
|
+
| Trash 04 |  |  | `dsi-trash-04-line` `dsi-trash-04-solid` |
|
|
644
|
+
| Upload Cloud 01 |  |  | `dsi-upload-cloud-01-line` `dsi-upload-cloud-01-solid` |
|
|
645
|
+
| Upload Cloud 02 |  |  | `dsi-upload-cloud-02-line` `dsi-upload-cloud-02-solid` |
|
|
646
|
+
| User 01 |  |  | `dsi-user-01-line` `dsi-user-01-solid` |
|
|
647
|
+
| User 02 |  |  | `dsi-user-02-line` `dsi-user-02-solid` |
|
|
648
|
+
| User 03 |  |  | `dsi-user-03-line` `dsi-user-03-solid` |
|
|
649
|
+
| User Check 01 |  |  | `dsi-user-check-01-line` `dsi-user-check-01-solid` |
|
|
650
|
+
| User Check 02 |  |  | `dsi-user-check-02-line` `dsi-user-check-02-solid` |
|
|
651
|
+
| User Circle |  |  | `dsi-user-circle-line` `dsi-user-circle-solid` |
|
|
652
|
+
| User Down 01 |  |  | `dsi-user-down-01-line` `dsi-user-down-01-solid` |
|
|
653
|
+
| User Down 02 |  |  | `dsi-user-down-02-line` `dsi-user-down-02-solid` |
|
|
654
|
+
| User Edit |  |  | `dsi-user-edit-line` `dsi-user-edit-solid` |
|
|
655
|
+
| User Left 01 |  |  | `dsi-user-left-01-line` `dsi-user-left-01-solid` |
|
|
656
|
+
| User Left 02 |  |  | `dsi-user-left-02-line` `dsi-user-left-02-solid` |
|
|
657
|
+
| User Minus 01 |  |  | `dsi-user-minus-01-line` `dsi-user-minus-01-solid` |
|
|
658
|
+
| User Minus 02 |  |  | `dsi-user-minus-02-line` `dsi-user-minus-02-solid` |
|
|
659
|
+
| User Plus 01 |  |  | `dsi-user-plus-01-line` `dsi-user-plus-01-solid` |
|
|
660
|
+
| User Plus 02 |  |  | `dsi-user-plus-02-line` `dsi-user-plus-02-solid` |
|
|
661
|
+
| User Right 01 |  |  | `dsi-user-right-01-line` `dsi-user-right-01-solid` |
|
|
662
|
+
| User Right 02 |  |  | `dsi-user-right-02-line` `dsi-user-right-02-solid` |
|
|
663
|
+
| User Square |  |  | `dsi-user-square-line` `dsi-user-square-solid` |
|
|
664
|
+
| User Up 01 |  |  | `dsi-user-up-01-line` `dsi-user-up-01-solid` |
|
|
665
|
+
| User Up 02 |  |  | `dsi-user-up-02-line` `dsi-user-up-02-solid` |
|
|
666
|
+
| User X 01 |  |  | `dsi-user-x-01-line` `dsi-user-x-01-solid` |
|
|
667
|
+
| User X 02 |  |  | `dsi-user-x-02-line` `dsi-user-x-02-solid` |
|
|
668
|
+
| Users 01 |  |  | `dsi-users-01-line` `dsi-users-01-solid` |
|
|
669
|
+
| Users 02 |  |  | `dsi-users-02-line` `dsi-users-02-solid` |
|
|
670
|
+
| Users 03 |  |  | `dsi-users-03-line` `dsi-users-03-solid` |
|
|
671
|
+
| Users Check |  |  | `dsi-users-check-line` `dsi-users-check-solid` |
|
|
672
|
+
| Users Down |  |  | `dsi-users-down-line` `dsi-users-down-solid` |
|
|
673
|
+
| Users Edit |  |  | `dsi-users-edit-line` `dsi-users-edit-solid` |
|
|
674
|
+
| Users Left |  |  | `dsi-users-left-line` `dsi-users-left-solid` |
|
|
675
|
+
| Users Minus |  |  | `dsi-users-minus-line` `dsi-users-minus-solid` |
|
|
676
|
+
| Users Plus |  |  | `dsi-users-plus-line` `dsi-users-plus-solid` |
|
|
677
|
+
| Users Right |  |  | `dsi-users-right-line` `dsi-users-right-solid` |
|
|
678
|
+
| Users Up |  |  | `dsi-users-up-line` `dsi-users-up-solid` |
|
|
679
|
+
| Users X |  |  | `dsi-users-x-line` `dsi-users-x-solid` |
|
|
680
|
+
| Wifi |  |  | `dsi-wifi-line` `dsi-wifi-solid` |
|
|
681
|
+
| Wifi Off |  |  | `dsi-wifi-off-line` `dsi-wifi-off-solid` |
|
|
682
|
+
|
|
616
683
|
</details>
|
|
617
684
|
|
|
618
685
|
<details open>
|
|
@@ -933,6 +1000,7 @@ Comprehensive typography utilities for consistent text styling.
|
|
|
933
1000
|
```
|
|
934
1001
|
|
|
935
1002
|
**CSS Variables:**
|
|
1003
|
+
|
|
936
1004
|
- `--font-sans`: System sans-serif stack
|
|
937
1005
|
- `--font-mono`: Monospace stack
|
|
938
1006
|
- `--font-serif`: Serif stack
|
|
@@ -942,19 +1010,19 @@ Comprehensive typography utilities for consistent text styling.
|
|
|
942
1010
|
<details open>
|
|
943
1011
|
<summary><strong>Font Sizes</strong></summary>
|
|
944
1012
|
|
|
945
|
-
| Class
|
|
946
|
-
|
|
947
|
-
| `text-2xs`
|
|
948
|
-
| `text-xs`
|
|
949
|
-
| `text-sm`
|
|
950
|
-
| `text-base` | 16px | 24px
|
|
951
|
-
| `text-lg`
|
|
952
|
-
| `text-xl`
|
|
953
|
-
| `text-2xl`
|
|
954
|
-
| `text-3xl`
|
|
955
|
-
| `text-4xl`
|
|
956
|
-
| `text-5xl`
|
|
957
|
-
| `text-6xl`
|
|
1013
|
+
| Class | Size | Line Height |
|
|
1014
|
+
| ----------- | ---- | ----------- |
|
|
1015
|
+
| `text-2xs` | 10px | 14px |
|
|
1016
|
+
| `text-xs` | 12px | 16px |
|
|
1017
|
+
| `text-sm` | 14px | 20px |
|
|
1018
|
+
| `text-base` | 16px | 24px |
|
|
1019
|
+
| `text-lg` | 18px | 28px |
|
|
1020
|
+
| `text-xl` | 20px | 28px |
|
|
1021
|
+
| `text-2xl` | 24px | 32px |
|
|
1022
|
+
| `text-3xl` | 30px | 36px |
|
|
1023
|
+
| `text-4xl` | 36px | 40px |
|
|
1024
|
+
| `text-5xl` | 48px | 48px |
|
|
1025
|
+
| `text-6xl` | 64px | 64px |
|
|
958
1026
|
|
|
959
1027
|
```html
|
|
960
1028
|
<p class="text-sm">Small text (14px)</p>
|
|
@@ -968,17 +1036,17 @@ Comprehensive typography utilities for consistent text styling.
|
|
|
968
1036
|
<details open>
|
|
969
1037
|
<summary><strong>Font Weights</strong></summary>
|
|
970
1038
|
|
|
971
|
-
| Class
|
|
972
|
-
|
|
973
|
-
| `font-thin`
|
|
974
|
-
| `font-extralight` | 200
|
|
975
|
-
| `font-light`
|
|
976
|
-
| `font-normal`
|
|
977
|
-
| `font-medium`
|
|
978
|
-
| `font-semibold`
|
|
979
|
-
| `font-bold`
|
|
980
|
-
| `font-extrabold`
|
|
981
|
-
| `font-black`
|
|
1039
|
+
| Class | Weight |
|
|
1040
|
+
| ----------------- | ------ |
|
|
1041
|
+
| `font-thin` | 100 |
|
|
1042
|
+
| `font-extralight` | 200 |
|
|
1043
|
+
| `font-light` | 300 |
|
|
1044
|
+
| `font-normal` | 400 |
|
|
1045
|
+
| `font-medium` | 500 |
|
|
1046
|
+
| `font-semibold` | 600 |
|
|
1047
|
+
| `font-bold` | 700 |
|
|
1048
|
+
| `font-extrabold` | 800 |
|
|
1049
|
+
| `font-black` | 900 |
|
|
982
1050
|
|
|
983
1051
|
```html
|
|
984
1052
|
<p class="font-normal">Normal weight text</p>
|
|
@@ -1058,22 +1126,22 @@ Flexible spacing utilities based on a 4px grid system.
|
|
|
1058
1126
|
<details open>
|
|
1059
1127
|
<summary><strong>Spacing Scale</strong></summary>
|
|
1060
1128
|
|
|
1061
|
-
| Token | Value | Usage
|
|
1062
|
-
|
|
1063
|
-
| `0`
|
|
1064
|
-
| `px`
|
|
1065
|
-
| `0.5` | 2px
|
|
1066
|
-
| `1`
|
|
1067
|
-
| `2`
|
|
1068
|
-
| `3`
|
|
1069
|
-
| `4`
|
|
1070
|
-
| `6`
|
|
1071
|
-
| `8`
|
|
1072
|
-
| `10`
|
|
1073
|
-
| `12`
|
|
1074
|
-
| `16`
|
|
1075
|
-
| `20`
|
|
1076
|
-
| `24`
|
|
1129
|
+
| Token | Value | Usage |
|
|
1130
|
+
| ----- | ----- | ----------- |
|
|
1131
|
+
| `0` | 0px | No spacing |
|
|
1132
|
+
| `px` | 1px | Hairline |
|
|
1133
|
+
| `0.5` | 2px | Minimal |
|
|
1134
|
+
| `1` | 4px | Extra small |
|
|
1135
|
+
| `2` | 8px | Small |
|
|
1136
|
+
| `3` | 12px | Default |
|
|
1137
|
+
| `4` | 16px | Medium |
|
|
1138
|
+
| `6` | 24px | Large |
|
|
1139
|
+
| `8` | 32px | Extra large |
|
|
1140
|
+
| `10` | 40px | 2XL |
|
|
1141
|
+
| `12` | 48px | 3XL |
|
|
1142
|
+
| `16` | 64px | 4XL |
|
|
1143
|
+
| `20` | 80px | 5XL |
|
|
1144
|
+
| `24` | 96px | 6XL |
|
|
1077
1145
|
|
|
1078
1146
|
</details>
|
|
1079
1147
|
|
|
@@ -1462,7 +1530,8 @@ Animations respect user's motion preferences:
|
|
|
1462
1530
|
```css
|
|
1463
1531
|
/* Automatically applied when user prefers reduced motion */
|
|
1464
1532
|
@media (prefers-reduced-motion: reduce) {
|
|
1465
|
-
.animate-*,
|
|
1533
|
+
.animate-*,
|
|
1534
|
+
.transition {
|
|
1466
1535
|
animation: none !important;
|
|
1467
1536
|
transition: none !important;
|
|
1468
1537
|
}
|
|
@@ -1902,27 +1971,27 @@ Các tiện ích typography toàn diện để định dạng văn bản nhất
|
|
|
1902
1971
|
|
|
1903
1972
|
#### Kích thước chữ
|
|
1904
1973
|
|
|
1905
|
-
| Class
|
|
1906
|
-
|
|
1907
|
-
| `text-2xs`
|
|
1908
|
-
| `text-xs`
|
|
1909
|
-
| `text-sm`
|
|
1910
|
-
| `text-base` | 16px
|
|
1911
|
-
| `text-lg`
|
|
1912
|
-
| `text-xl`
|
|
1913
|
-
| `text-2xl`
|
|
1914
|
-
| `text-3xl`
|
|
1915
|
-
| `text-4xl`
|
|
1974
|
+
| Class | Kích thước | Line Height |
|
|
1975
|
+
| ----------- | ---------- | ----------- |
|
|
1976
|
+
| `text-2xs` | 10px | 14px |
|
|
1977
|
+
| `text-xs` | 12px | 16px |
|
|
1978
|
+
| `text-sm` | 14px | 20px |
|
|
1979
|
+
| `text-base` | 16px | 24px |
|
|
1980
|
+
| `text-lg` | 18px | 28px |
|
|
1981
|
+
| `text-xl` | 20px | 28px |
|
|
1982
|
+
| `text-2xl` | 24px | 32px |
|
|
1983
|
+
| `text-3xl` | 30px | 36px |
|
|
1984
|
+
| `text-4xl` | 36px | 40px |
|
|
1916
1985
|
|
|
1917
1986
|
#### Độ đậm chữ
|
|
1918
1987
|
|
|
1919
|
-
| Class
|
|
1920
|
-
|
|
1921
|
-
| `font-light`
|
|
1922
|
-
| `font-normal`
|
|
1923
|
-
| `font-medium`
|
|
1924
|
-
| `font-semibold` | 600
|
|
1925
|
-
| `font-bold`
|
|
1988
|
+
| Class | Weight |
|
|
1989
|
+
| --------------- | ------ |
|
|
1990
|
+
| `font-light` | 300 |
|
|
1991
|
+
| `font-normal` | 400 |
|
|
1992
|
+
| `font-medium` | 500 |
|
|
1993
|
+
| `font-semibold` | 600 |
|
|
1994
|
+
| `font-bold` | 700 |
|
|
1926
1995
|
|
|
1927
1996
|
#### Heading ngữ nghĩa
|
|
1928
1997
|
|
|
@@ -1959,15 +2028,15 @@ Tiện ích spacing linh hoạt dựa trên hệ thống lưới 4px.
|
|
|
1959
2028
|
|
|
1960
2029
|
#### Thang đo Spacing
|
|
1961
2030
|
|
|
1962
|
-
| Token | Giá trị | Mô tả
|
|
1963
|
-
|
|
1964
|
-
| `0`
|
|
1965
|
-
| `1`
|
|
1966
|
-
| `2`
|
|
1967
|
-
| `3`
|
|
1968
|
-
| `4`
|
|
1969
|
-
| `6`
|
|
1970
|
-
| `8`
|
|
2031
|
+
| Token | Giá trị | Mô tả |
|
|
2032
|
+
| ----- | ------- | ---------------- |
|
|
2033
|
+
| `0` | 0px | Không có spacing |
|
|
2034
|
+
| `1` | 4px | Cực nhỏ |
|
|
2035
|
+
| `2` | 8px | Nhỏ |
|
|
2036
|
+
| `3` | 12px | Mặc định |
|
|
2037
|
+
| `4` | 16px | Vừa |
|
|
2038
|
+
| `6` | 24px | Lớn |
|
|
2039
|
+
| `8` | 32px | Cực lớn |
|
|
1971
2040
|
|
|
1972
2041
|
#### Margin & Padding
|
|
1973
2042
|
|