dynamic-ds 1.0.5 → 1.0.7
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 +1018 -202
- package/package.json +1 -1
- package/src/lib/styles/_animations.scss +1053 -0
- package/src/lib/styles/_spacing.scss +924 -0
- package/src/lib/styles/_typography.scss +587 -0
- package/src/lib/styles/system-design.scss +16 -1
- /package/src/lib/styles/{icons.scss → _icons.scss} +0 -0
package/README.md
CHANGED
|
@@ -23,6 +23,9 @@
|
|
|
23
23
|
- [Icon Animations](#icon-animations)
|
|
24
24
|
- [Real-World Examples](#real-world-examples)
|
|
25
25
|
- [Color System](#color-system)
|
|
26
|
+
- [Typography System](#typography-system)
|
|
27
|
+
- [Spacing & Layout System](#spacing--layout-system)
|
|
28
|
+
- [Animation System](#animation-system)
|
|
26
29
|
- [Semantic Classes Reference](#semantic-classes-reference)
|
|
27
30
|
- [Utility Classes](#utility-classes)
|
|
28
31
|
- [API Reference](#api-reference)
|
|
@@ -46,6 +49,9 @@
|
|
|
46
49
|
- **CSS Custom Properties**: All colors exposed as CSS variables for easy access
|
|
47
50
|
- **Semantic Color Classes**: Pre-built utility classes for backgrounds, text, borders, and icons
|
|
48
51
|
- **Icon System (DSI)**: Bootstrap Icons-style icon system with full color customization
|
|
52
|
+
- **Typography System**: Comprehensive font utilities with semantic heading/body classes
|
|
53
|
+
- **Spacing & Layout**: Flexible spacing scale, flexbox, and CSS grid utilities
|
|
54
|
+
- **Animation System**: Pre-built transitions, keyframe animations, and loading states
|
|
49
55
|
- **Theme Badge Palettes**: 12 predefined color themes for badges and tags
|
|
50
56
|
- **RGB Mix Algorithm**: Accurate color shade generation using RGB mixing
|
|
51
57
|
- **Runtime Color Updates**: Change theme colors dynamically without page reload
|
|
@@ -405,208 +411,208 @@ export class SettingsComponent {
|
|
|
405
411
|
</details>
|
|
406
412
|
|
|
407
413
|
<details open>
|
|
408
|
-
<summary><strong>Available Icons</strong></summary>
|
|
409
|
-
|
|
410
|
-
The library includes **143 icons** with multiple style variants (duocolor, duotone, line, solid). Below is the complete list:
|
|
411
|
-
|
|
412
|
-
#### Activity & Status Icons
|
|
413
|
-
|
|
414
|
-
| Icon | Duocolor | Duotone | Line | Solid | Class Names |
|
|
415
|
-
|------|------|------|------|------|-------------|
|
|
416
|
-
| Activity | - | - |  |  | `dsi-activity-line` `dsi-activity-solid` |
|
|
417
|
-
| Activity Heart | - | - |  |  | `dsi-activity-heart-line` `dsi-activity-heart-solid` |
|
|
418
|
-
| Check Circle |  |  |  |  | `dsi-check-circle-duocolor` `dsi-check-circle-duotone` `dsi-check-circle-line` `dsi-check-circle-solid` |
|
|
419
|
-
| Check Square | - | - |  |  | `dsi-check-square-line` `dsi-check-square-solid` |
|
|
420
|
-
| Info Circle | - | - |  |  | `dsi-info-circle-line` `dsi-info-circle-solid` |
|
|
421
|
-
| X Close | - | - |  |  | `dsi-x-close-line` `dsi-x-close-solid` |
|
|
422
|
-
| X Circle |  |  |  |  | `dsi-x-circle-duocolor` `dsi-x-circle-duotone` `dsi-x-circle-line` `dsi-x-circle-solid` |
|
|
423
|
-
| Minus Circle |  |  |  |  | `dsi-minus-circle-duocolor` `dsi-minus-circle-duotone` `dsi-minus-circle-line` `dsi-minus-circle-solid` |
|
|
424
|
-
|
|
425
|
-
#### Navigation Icons
|
|
426
|
-
|
|
427
|
-
| Icon | Line | Solid | Class Names |
|
|
428
|
-
|------|------|------|-------------|
|
|
429
|
-
| Anchor |  |  | `dsi-anchor-line` `dsi-anchor-solid` |
|
|
430
|
-
| Home 01 |  |  | `dsi-home-01-line` `dsi-home-01-solid` |
|
|
431
|
-
| Home 02 |  |  | `dsi-home-02-line` `dsi-home-02-solid` |
|
|
432
|
-
| Home 03 |  |  | `dsi-home-03-line` `dsi-home-03-solid` |
|
|
433
|
-
| Home 04 |  |  | `dsi-home-04-line` `dsi-home-04-solid` |
|
|
434
|
-
| Home 05 |  |  | `dsi-home-05-line` `dsi-home-05-solid` |
|
|
435
|
-
| Home Line |  |  | `dsi-home-line-line` `dsi-home-line-solid` |
|
|
436
|
-
| Home Smile |  |  | `dsi-home-smile-line` `dsi-home-smile-solid` |
|
|
437
|
-
|
|
438
|
-
#### Arrow Icons
|
|
439
|
-
|
|
440
|
-
| Icon | Line | Solid | Class Names |
|
|
441
|
-
|------|------|------|-------------|
|
|
442
|
-
| Arrow Up |  |  | `dsi-arrow-up-line` `dsi-arrow-up-solid` |
|
|
443
|
-
| Arrow Down |  |  | `dsi-arrow-down-line` `dsi-arrow-down-solid` |
|
|
444
|
-
| Arrow Left |  |  | `dsi-arrow-left-line` `dsi-arrow-left-solid` |
|
|
445
|
-
| Arrow Right |  |  | `dsi-arrow-right-line` `dsi-arrow-right-solid` |
|
|
446
|
-
| Arrow Up Left |  |  | `dsi-arrow-up-left-line` `dsi-arrow-up-left-solid` |
|
|
447
|
-
| Arrow Up Right |  |  | `dsi-arrow-up-right-line` `dsi-arrow-up-right-solid` |
|
|
448
|
-
| Arrow Down Left |  |  | `dsi-arrow-down-left-line` `dsi-arrow-down-left-solid` |
|
|
449
|
-
| Arrow Down Right |  |  | `dsi-arrow-down-right-line` `dsi-arrow-down-right-solid` |
|
|
450
|
-
|
|
451
|
-
#### Arrow Circle Icons
|
|
452
|
-
|
|
453
|
-
| Icon | Line | Solid | Class Names |
|
|
454
|
-
|------|------|------|-------------|
|
|
455
|
-
| Arrow Circle Up |  |  | `dsi-arrow-circle-up-line` `dsi-arrow-circle-up-solid` |
|
|
456
|
-
| Arrow Circle Down |  |  | `dsi-arrow-circle-down-line` `dsi-arrow-circle-down-solid` |
|
|
457
|
-
| Arrow Circle Left |  |  | `dsi-arrow-circle-left-line` `dsi-arrow-circle-left-solid` |
|
|
458
|
-
| Arrow Circle Right |  |  | `dsi-arrow-circle-right-line` `dsi-arrow-circle-right-solid` |
|
|
459
|
-
| Arrow Circle Up Left |  |  | `dsi-arrow-circle-up-left-line` `dsi-arrow-circle-up-left-solid` |
|
|
460
|
-
| Arrow Circle Up Right |  |  | `dsi-arrow-circle-up-right-line` `dsi-arrow-circle-up-right-solid` |
|
|
461
|
-
| Arrow Circle Down Left |  |  | `dsi-arrow-circle-down-left-line` `dsi-arrow-circle-down-left-solid` |
|
|
462
|
-
| Arrow Circle Down Right |  |  | `dsi-arrow-circle-down-right-line` `dsi-arrow-circle-down-right-solid` |
|
|
463
|
-
|
|
464
|
-
#### Arrow Square Icons
|
|
465
|
-
|
|
466
|
-
| Icon | Line | Solid | Class Names |
|
|
467
|
-
|------|------|------|-------------|
|
|
468
|
-
| Arrow Square Up |  |  | `dsi-arrow-square-up-line` `dsi-arrow-square-up-solid` |
|
|
469
|
-
| Arrow Square Down |  |  | `dsi-arrow-square-down-line` `dsi-arrow-square-down-solid` |
|
|
470
|
-
| Arrow Square Left |  |  | `dsi-arrow-square-left-line` `dsi-arrow-square-left-solid` |
|
|
471
|
-
| Arrow Square Right |  |  | `dsi-arrow-square-right-line` `dsi-arrow-square-right-solid` |
|
|
472
|
-
| Arrow Square Up Left |  |  | `dsi-arrow-square-up-left-line` `dsi-arrow-square-up-left-solid` |
|
|
473
|
-
| Arrow Square Up Right |  |  | `dsi-arrow-square-up-right-line` `dsi-arrow-square-up-right-solid` |
|
|
474
|
-
| Arrow Square Down Left |  |  | `dsi-arrow-square-down-left-line` `dsi-arrow-square-down-left-solid` |
|
|
475
|
-
| Arrow Square Down Right |  |  | `dsi-arrow-square-down-right-line` `dsi-arrow-square-down-right-solid` |
|
|
476
|
-
|
|
477
|
-
#### Arrow Block Icons
|
|
478
|
-
|
|
479
|
-
| Icon | Line | Solid | Class Names |
|
|
480
|
-
|------|------|------|-------------|
|
|
481
|
-
| Arrow Block Up |  |  | `dsi-arrow-block-up-line` `dsi-arrow-block-up-solid` |
|
|
482
|
-
| Arrow Block Down |  |  | `dsi-arrow-block-down-line` `dsi-arrow-block-down-solid` |
|
|
483
|
-
| Arrow Block Left |  |  | `dsi-arrow-block-left-line` `dsi-arrow-block-left-solid` |
|
|
484
|
-
| Arrow Block Right |  |  | `dsi-arrow-block-right-line` `dsi-arrow-block-right-solid` |
|
|
485
|
-
|
|
486
|
-
#### Arrow Narrow Icons
|
|
487
|
-
|
|
488
|
-
| Icon | Line | Solid | Class Names |
|
|
489
|
-
|------|------|------|-------------|
|
|
490
|
-
| Arrow Narrow Up |  |  | `dsi-arrow-narrow-up-line` `dsi-arrow-narrow-up-solid` |
|
|
491
|
-
| Arrow Narrow Down |  |  | `dsi-arrow-narrow-down-line` `dsi-arrow-narrow-down-solid` |
|
|
492
|
-
| Arrow Narrow Left |  |  | `dsi-arrow-narrow-left-line` `dsi-arrow-narrow-left-solid` |
|
|
493
|
-
| Arrow Narrow Right |  |  | `dsi-arrow-narrow-right-line` `dsi-arrow-narrow-right-solid` |
|
|
494
|
-
| Arrow Narrow Up Left |  |  | `dsi-arrow-narrow-up-left-line` `dsi-arrow-narrow-up-left-solid` |
|
|
495
|
-
| Arrow Narrow Up Right |  |  | `dsi-arrow-narrow-up-right-line` `dsi-arrow-narrow-up-right-solid` |
|
|
496
|
-
| Arrow Narrow Down Left |  |  | `dsi-arrow-narrow-down-left-line` `dsi-arrow-narrow-down-left-solid` |
|
|
497
|
-
| Arrow Narrow Down Right |  |  | `dsi-arrow-narrow-down-right-line` `dsi-arrow-narrow-down-right-solid` |
|
|
498
|
-
|
|
499
|
-
#### Arrow Circle Broken Icons
|
|
500
|
-
|
|
501
|
-
| Icon | Line | Solid | Class Names |
|
|
502
|
-
|------|------|------|-------------|
|
|
503
|
-
| Arrow Circle Broken Up |  |  | `dsi-arrow-circle-broken-up-line` `dsi-arrow-circle-broken-up-solid` |
|
|
504
|
-
| Arrow Circle Broken Down |  |  | `dsi-arrow-circle-broken-down-line` `dsi-arrow-circle-broken-down-solid` |
|
|
505
|
-
| Arrow Circle Broken Left |  |  | `dsi-arrow-circle-broken-left-line` `dsi-arrow-circle-broken-left-solid` |
|
|
506
|
-
| Arrow Circle Broken Right |  |  | `dsi-arrow-circle-broken-right-line` `dsi-arrow-circle-broken-right-solid` |
|
|
507
|
-
| Arrow Circle Broken Up Left |  |  | `dsi-arrow-circle-broken-up-left-line` `dsi-arrow-circle-broken-up-left-solid` |
|
|
508
|
-
| Arrow Circle Broken Up Right |  |  | `dsi-arrow-circle-broken-up-right-line` `dsi-arrow-circle-broken-up-right-solid` |
|
|
509
|
-
| Arrow Circle Broken Down Left |  |  | `dsi-arrow-circle-broken-down-left-line` `dsi-arrow-circle-broken-down-left-solid` |
|
|
510
|
-
| Arrow Circle Broken Down Right |  |  | `dsi-arrow-circle-broken-down-right-line` `dsi-arrow-circle-broken-down-right-solid` |
|
|
511
|
-
|
|
512
|
-
#### Multi-Arrow Icons
|
|
513
|
-
|
|
514
|
-
| Icon | Line | Solid | Class Names |
|
|
515
|
-
|------|------|------|-------------|
|
|
516
|
-
| Arrows Up |  |  | `dsi-arrows-up-line` `dsi-arrows-up-solid` |
|
|
517
|
-
| Arrows Down |  |  | `dsi-arrows-down-line` `dsi-arrows-down-solid` |
|
|
518
|
-
| Arrows Left |  |  | `dsi-arrows-left-line` `dsi-arrows-left-solid` |
|
|
519
|
-
| Arrows Right |  |  | `dsi-arrows-right-line` `dsi-arrows-right-solid` |
|
|
520
|
-
| Arrows Triangle |  |  | `dsi-arrows-triangle-line` `dsi-arrows-triangle-solid` |
|
|
521
|
-
|
|
522
|
-
#### Calendar Icons
|
|
523
|
-
|
|
524
|
-
| Icon | Line | Solid | Class Names |
|
|
525
|
-
|------|------|------|-------------|
|
|
526
|
-
| Calendar |  |  | `dsi-calendar-line` `dsi-calendar-solid` |
|
|
527
|
-
| Calendar Check 01 |  |  | `dsi-calendar-check-01-line` `dsi-calendar-check-01-solid` |
|
|
528
|
-
| Calendar Check 02 |  |  | `dsi-calendar-check-02-line` `dsi-calendar-check-02-solid` |
|
|
529
|
-
| Calendar Date |  |  | `dsi-calendar-date-line` `dsi-calendar-date-solid` |
|
|
530
|
-
| Calendar Heart 01 |  |  | `dsi-calendar-heart-01-line` `dsi-calendar-heart-01-solid` |
|
|
531
|
-
| Calendar Heart 02 |  |  | `dsi-calendar-heart-02-line` `dsi-calendar-heart-02-solid` |
|
|
532
|
-
| Calendar Minus 01 |  |  | `dsi-calendar-minus-01-line` `dsi-calendar-minus-01-solid` |
|
|
533
|
-
| Calendar Minus 02 |  |  | `dsi-calendar-minus-02-line` `dsi-calendar-minus-02-solid` |
|
|
534
|
-
| Calendar Plus 01 |  |  | `dsi-calendar-plus-01-line` `dsi-calendar-plus-01-solid` |
|
|
535
|
-
| Calendar Plus 02 |  |  | `dsi-calendar-plus-02-line` `dsi-calendar-plus-02-solid` |
|
|
536
|
-
|
|
537
|
-
#### Other Icons
|
|
538
|
-
|
|
539
|
-
| Icon | Line | Solid | Class Names |
|
|
540
|
-
|------|------|------|-------------|
|
|
541
|
-
| Mail 01 |  |  | `dsi-mail-01-line` `dsi-mail-01-solid` |
|
|
542
|
-
| Mail 02 |  |  | `dsi-mail-02-line` `dsi-mail-02-solid` |
|
|
543
|
-
| Mail 03 |  |  | `dsi-mail-03-line` `dsi-mail-03-solid` |
|
|
544
|
-
| Mail 04 |  |  | `dsi-mail-04-line` `dsi-mail-04-solid` |
|
|
545
|
-
| Mail 05 |  |  | `dsi-mail-05-line` `dsi-mail-05-solid` |
|
|
546
|
-
| Message Notification Circle |  |  | `dsi-message-notification-circle-line` `dsi-message-notification-circle-solid` |
|
|
547
|
-
| Message Notification Square |  |  | `dsi-message-notification-square-line` `dsi-message-notification-square-solid` |
|
|
548
|
-
| Notification Box |  |  | `dsi-notification-box-line` `dsi-notification-box-solid` |
|
|
549
|
-
| Notification Message |  |  | `dsi-notification-message-line` `dsi-notification-message-solid` |
|
|
550
|
-
| Notification Text |  |  | `dsi-notification-text-line` `dsi-notification-text-solid` |
|
|
551
|
-
| Search Lg |  |  | `dsi-search-lg-line` `dsi-search-lg-solid` |
|
|
552
|
-
| Search Md |  |  | `dsi-search-md-line` `dsi-search-md-solid` |
|
|
553
|
-
| Search Refraction |  |  | `dsi-search-refraction-line` `dsi-search-refraction-solid` |
|
|
554
|
-
| Search Sm |  |  | `dsi-search-sm-line` `dsi-search-sm-solid` |
|
|
555
|
-
| Star 01 |  |  | `dsi-star-01-line` `dsi-star-01-solid` |
|
|
556
|
-
| Star 02 |  |  | `dsi-star-02-line` `dsi-star-02-solid` |
|
|
557
|
-
| Star 03 |  |  | `dsi-star-03-line` `dsi-star-03-solid` |
|
|
558
|
-
| Star 04 |  |  | `dsi-star-04-line` `dsi-star-04-solid` |
|
|
559
|
-
| Star 05 |  |  | `dsi-star-05-line` `dsi-star-05-solid` |
|
|
560
|
-
| Star 06 |  |  | `dsi-star-06-line` `dsi-star-06-solid` |
|
|
561
|
-
| Star 07 |  |  | `dsi-star-07-line` `dsi-star-07-solid` |
|
|
562
|
-
| Stars 01 |  |  | `dsi-stars-01-line` `dsi-stars-01-solid` |
|
|
563
|
-
| Stars 02 |  |  | `dsi-stars-02-line` `dsi-stars-02-solid` |
|
|
564
|
-
| Stars 03 |  |  | `dsi-stars-03-line` `dsi-stars-03-solid` |
|
|
565
|
-
| Ticket 01 |  |  | `dsi-ticket-01-line` `dsi-ticket-01-solid` |
|
|
566
|
-
| Ticket 02 |  |  | `dsi-ticket-02-line` `dsi-ticket-02-solid` |
|
|
567
|
-
| Trash 01 |  |  | `dsi-trash-01-line` `dsi-trash-01-solid` |
|
|
568
|
-
| Trash 02 |  |  | `dsi-trash-02-line` `dsi-trash-02-solid` |
|
|
569
|
-
| Trash 03 |  |  | `dsi-trash-03-line` `dsi-trash-03-solid` |
|
|
570
|
-
| Trash 04 |  |  | `dsi-trash-04-line` `dsi-trash-04-solid` |
|
|
571
|
-
| Upload Cloud 01 |  |  | `dsi-upload-cloud-01-line` `dsi-upload-cloud-01-solid` |
|
|
572
|
-
| Upload Cloud 02 |  |  | `dsi-upload-cloud-02-line` `dsi-upload-cloud-02-solid` |
|
|
573
|
-
| User 01 |  |  | `dsi-user-01-line` `dsi-user-01-solid` |
|
|
574
|
-
| User 02 |  |  | `dsi-user-02-line` `dsi-user-02-solid` |
|
|
575
|
-
| User 03 |  |  | `dsi-user-03-line` `dsi-user-03-solid` |
|
|
576
|
-
| User Check 01 |  |  | `dsi-user-check-01-line` `dsi-user-check-01-solid` |
|
|
577
|
-
| User Check 02 |  |  | `dsi-user-check-02-line` `dsi-user-check-02-solid` |
|
|
578
|
-
| User Circle |  |  | `dsi-user-circle-line` `dsi-user-circle-solid` |
|
|
579
|
-
| User Down 01 |  |  | `dsi-user-down-01-line` `dsi-user-down-01-solid` |
|
|
580
|
-
| User Down 02 |  |  | `dsi-user-down-02-line` `dsi-user-down-02-solid` |
|
|
581
|
-
| User Edit |  |  | `dsi-user-edit-line` `dsi-user-edit-solid` |
|
|
582
|
-
| User Left 01 |  |  | `dsi-user-left-01-line` `dsi-user-left-01-solid` |
|
|
583
|
-
| User Left 02 |  |  | `dsi-user-left-02-line` `dsi-user-left-02-solid` |
|
|
584
|
-
| User Minus 01 |  |  | `dsi-user-minus-01-line` `dsi-user-minus-01-solid` |
|
|
585
|
-
| User Minus 02 |  |  | `dsi-user-minus-02-line` `dsi-user-minus-02-solid` |
|
|
586
|
-
| User Plus 01 |  |  | `dsi-user-plus-01-line` `dsi-user-plus-01-solid` |
|
|
587
|
-
| User Plus 02 |  |  | `dsi-user-plus-02-line` `dsi-user-plus-02-solid` |
|
|
588
|
-
| User Right 01 |  |  | `dsi-user-right-01-line` `dsi-user-right-01-solid` |
|
|
589
|
-
| User Right 02 |  |  | `dsi-user-right-02-line` `dsi-user-right-02-solid` |
|
|
590
|
-
| User Square |  |  | `dsi-user-square-line` `dsi-user-square-solid` |
|
|
591
|
-
| User Up 01 |  |  | `dsi-user-up-01-line` `dsi-user-up-01-solid` |
|
|
592
|
-
| User Up 02 |  |  | `dsi-user-up-02-line` `dsi-user-up-02-solid` |
|
|
593
|
-
| User X 01 |  |  | `dsi-user-x-01-line` `dsi-user-x-01-solid` |
|
|
594
|
-
| User X 02 |  |  | `dsi-user-x-02-line` `dsi-user-x-02-solid` |
|
|
595
|
-
| Users 01 |  |  | `dsi-users-01-line` `dsi-users-01-solid` |
|
|
596
|
-
| Users 02 |  |  | `dsi-users-02-line` `dsi-users-02-solid` |
|
|
597
|
-
| Users 03 |  |  | `dsi-users-03-line` `dsi-users-03-solid` |
|
|
598
|
-
| Users Check |  |  | `dsi-users-check-line` `dsi-users-check-solid` |
|
|
599
|
-
| Users Down |  |  | `dsi-users-down-line` `dsi-users-down-solid` |
|
|
600
|
-
| Users Edit |  |  | `dsi-users-edit-line` `dsi-users-edit-solid` |
|
|
601
|
-
| Users Left |  |  | `dsi-users-left-line` `dsi-users-left-solid` |
|
|
602
|
-
| Users Minus |  |  | `dsi-users-minus-line` `dsi-users-minus-solid` |
|
|
603
|
-
| Users Plus |  |  | `dsi-users-plus-line` `dsi-users-plus-solid` |
|
|
604
|
-
| Users Right |  |  | `dsi-users-right-line` `dsi-users-right-solid` |
|
|
605
|
-
| Users Up |  |  | `dsi-users-up-line` `dsi-users-up-solid` |
|
|
606
|
-
| Users X |  |  | `dsi-users-x-line` `dsi-users-x-solid` |
|
|
607
|
-
| Wifi |  |  | `dsi-wifi-line` `dsi-wifi-solid` |
|
|
608
|
-
| Wifi Off |  |  | `dsi-wifi-off-line` `dsi-wifi-off-solid` |
|
|
609
|
-
|
|
414
|
+
<summary><strong>Available Icons</strong></summary>
|
|
415
|
+
|
|
416
|
+
The library includes **143 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
|
+
| Mail 01 |  |  | `dsi-mail-01-line` `dsi-mail-01-solid` |
|
|
548
|
+
| Mail 02 |  |  | `dsi-mail-02-line` `dsi-mail-02-solid` |
|
|
549
|
+
| Mail 03 |  |  | `dsi-mail-03-line` `dsi-mail-03-solid` |
|
|
550
|
+
| Mail 04 |  |  | `dsi-mail-04-line` `dsi-mail-04-solid` |
|
|
551
|
+
| Mail 05 |  |  | `dsi-mail-05-line` `dsi-mail-05-solid` |
|
|
552
|
+
| Message Notification Circle |  |  | `dsi-message-notification-circle-line` `dsi-message-notification-circle-solid` |
|
|
553
|
+
| Message Notification Square |  |  | `dsi-message-notification-square-line` `dsi-message-notification-square-solid` |
|
|
554
|
+
| Notification Box |  |  | `dsi-notification-box-line` `dsi-notification-box-solid` |
|
|
555
|
+
| Notification Message |  |  | `dsi-notification-message-line` `dsi-notification-message-solid` |
|
|
556
|
+
| Notification Text |  |  | `dsi-notification-text-line` `dsi-notification-text-solid` |
|
|
557
|
+
| Search Lg |  |  | `dsi-search-lg-line` `dsi-search-lg-solid` |
|
|
558
|
+
| Search Md |  |  | `dsi-search-md-line` `dsi-search-md-solid` |
|
|
559
|
+
| Search Refraction |  |  | `dsi-search-refraction-line` `dsi-search-refraction-solid` |
|
|
560
|
+
| Search Sm |  |  | `dsi-search-sm-line` `dsi-search-sm-solid` |
|
|
561
|
+
| Star 01 |  |  | `dsi-star-01-line` `dsi-star-01-solid` |
|
|
562
|
+
| Star 02 |  |  | `dsi-star-02-line` `dsi-star-02-solid` |
|
|
563
|
+
| Star 03 |  |  | `dsi-star-03-line` `dsi-star-03-solid` |
|
|
564
|
+
| Star 04 |  |  | `dsi-star-04-line` `dsi-star-04-solid` |
|
|
565
|
+
| Star 05 |  |  | `dsi-star-05-line` `dsi-star-05-solid` |
|
|
566
|
+
| Star 06 |  |  | `dsi-star-06-line` `dsi-star-06-solid` |
|
|
567
|
+
| Star 07 |  |  | `dsi-star-07-line` `dsi-star-07-solid` |
|
|
568
|
+
| Stars 01 |  |  | `dsi-stars-01-line` `dsi-stars-01-solid` |
|
|
569
|
+
| Stars 02 |  |  | `dsi-stars-02-line` `dsi-stars-02-solid` |
|
|
570
|
+
| Stars 03 |  |  | `dsi-stars-03-line` `dsi-stars-03-solid` |
|
|
571
|
+
| Ticket 01 |  |  | `dsi-ticket-01-line` `dsi-ticket-01-solid` |
|
|
572
|
+
| Ticket 02 |  |  | `dsi-ticket-02-line` `dsi-ticket-02-solid` |
|
|
573
|
+
| Trash 01 |  |  | `dsi-trash-01-line` `dsi-trash-01-solid` |
|
|
574
|
+
| Trash 02 |  |  | `dsi-trash-02-line` `dsi-trash-02-solid` |
|
|
575
|
+
| Trash 03 |  |  | `dsi-trash-03-line` `dsi-trash-03-solid` |
|
|
576
|
+
| Trash 04 |  |  | `dsi-trash-04-line` `dsi-trash-04-solid` |
|
|
577
|
+
| Upload Cloud 01 |  |  | `dsi-upload-cloud-01-line` `dsi-upload-cloud-01-solid` |
|
|
578
|
+
| Upload Cloud 02 |  |  | `dsi-upload-cloud-02-line` `dsi-upload-cloud-02-solid` |
|
|
579
|
+
| User 01 |  |  | `dsi-user-01-line` `dsi-user-01-solid` |
|
|
580
|
+
| User 02 |  |  | `dsi-user-02-line` `dsi-user-02-solid` |
|
|
581
|
+
| User 03 |  |  | `dsi-user-03-line` `dsi-user-03-solid` |
|
|
582
|
+
| User Check 01 |  |  | `dsi-user-check-01-line` `dsi-user-check-01-solid` |
|
|
583
|
+
| User Check 02 |  |  | `dsi-user-check-02-line` `dsi-user-check-02-solid` |
|
|
584
|
+
| User Circle |  |  | `dsi-user-circle-line` `dsi-user-circle-solid` |
|
|
585
|
+
| User Down 01 |  |  | `dsi-user-down-01-line` `dsi-user-down-01-solid` |
|
|
586
|
+
| User Down 02 |  |  | `dsi-user-down-02-line` `dsi-user-down-02-solid` |
|
|
587
|
+
| User Edit |  |  | `dsi-user-edit-line` `dsi-user-edit-solid` |
|
|
588
|
+
| User Left 01 |  |  | `dsi-user-left-01-line` `dsi-user-left-01-solid` |
|
|
589
|
+
| User Left 02 |  |  | `dsi-user-left-02-line` `dsi-user-left-02-solid` |
|
|
590
|
+
| User Minus 01 |  |  | `dsi-user-minus-01-line` `dsi-user-minus-01-solid` |
|
|
591
|
+
| User Minus 02 |  |  | `dsi-user-minus-02-line` `dsi-user-minus-02-solid` |
|
|
592
|
+
| User Plus 01 |  |  | `dsi-user-plus-01-line` `dsi-user-plus-01-solid` |
|
|
593
|
+
| User Plus 02 |  |  | `dsi-user-plus-02-line` `dsi-user-plus-02-solid` |
|
|
594
|
+
| User Right 01 |  |  | `dsi-user-right-01-line` `dsi-user-right-01-solid` |
|
|
595
|
+
| User Right 02 |  |  | `dsi-user-right-02-line` `dsi-user-right-02-solid` |
|
|
596
|
+
| User Square |  |  | `dsi-user-square-line` `dsi-user-square-solid` |
|
|
597
|
+
| User Up 01 |  |  | `dsi-user-up-01-line` `dsi-user-up-01-solid` |
|
|
598
|
+
| User Up 02 |  |  | `dsi-user-up-02-line` `dsi-user-up-02-solid` |
|
|
599
|
+
| User X 01 |  |  | `dsi-user-x-01-line` `dsi-user-x-01-solid` |
|
|
600
|
+
| User X 02 |  |  | `dsi-user-x-02-line` `dsi-user-x-02-solid` |
|
|
601
|
+
| Users 01 |  |  | `dsi-users-01-line` `dsi-users-01-solid` |
|
|
602
|
+
| Users 02 |  |  | `dsi-users-02-line` `dsi-users-02-solid` |
|
|
603
|
+
| Users 03 |  |  | `dsi-users-03-line` `dsi-users-03-solid` |
|
|
604
|
+
| Users Check |  |  | `dsi-users-check-line` `dsi-users-check-solid` |
|
|
605
|
+
| Users Down |  |  | `dsi-users-down-line` `dsi-users-down-solid` |
|
|
606
|
+
| Users Edit |  |  | `dsi-users-edit-line` `dsi-users-edit-solid` |
|
|
607
|
+
| Users Left |  |  | `dsi-users-left-line` `dsi-users-left-solid` |
|
|
608
|
+
| Users Minus |  |  | `dsi-users-minus-line` `dsi-users-minus-solid` |
|
|
609
|
+
| Users Plus |  |  | `dsi-users-plus-line` `dsi-users-plus-solid` |
|
|
610
|
+
| Users Right |  |  | `dsi-users-right-line` `dsi-users-right-solid` |
|
|
611
|
+
| Users Up |  |  | `dsi-users-up-line` `dsi-users-up-solid` |
|
|
612
|
+
| Users X |  |  | `dsi-users-x-line` `dsi-users-x-solid` |
|
|
613
|
+
| Wifi |  |  | `dsi-wifi-line` `dsi-wifi-solid` |
|
|
614
|
+
| Wifi Off |  |  | `dsi-wifi-off-line` `dsi-wifi-off-solid` |
|
|
615
|
+
|
|
610
616
|
</details>
|
|
611
617
|
|
|
612
618
|
<details open>
|
|
@@ -912,6 +918,563 @@ _Replace `{shade}` with: `10`, `25`, `50`, `100`, `200`, `300`, `400`, `500`, `6
|
|
|
912
918
|
|
|
913
919
|
---
|
|
914
920
|
|
|
921
|
+
### Typography System
|
|
922
|
+
|
|
923
|
+
Comprehensive typography utilities for consistent text styling.
|
|
924
|
+
|
|
925
|
+
<details open>
|
|
926
|
+
<summary><strong>Font Families</strong></summary>
|
|
927
|
+
|
|
928
|
+
```html
|
|
929
|
+
<!-- Font family classes -->
|
|
930
|
+
<p class="font-sans">System sans-serif font (default)</p>
|
|
931
|
+
<p class="font-mono">Monospace font for code</p>
|
|
932
|
+
<p class="font-serif">Serif font</p>
|
|
933
|
+
```
|
|
934
|
+
|
|
935
|
+
**CSS Variables:**
|
|
936
|
+
- `--font-sans`: System sans-serif stack
|
|
937
|
+
- `--font-mono`: Monospace stack
|
|
938
|
+
- `--font-serif`: Serif stack
|
|
939
|
+
|
|
940
|
+
</details>
|
|
941
|
+
|
|
942
|
+
<details open>
|
|
943
|
+
<summary><strong>Font Sizes</strong></summary>
|
|
944
|
+
|
|
945
|
+
| Class | Size | Line Height |
|
|
946
|
+
|-------|------|-------------|
|
|
947
|
+
| `text-2xs` | 10px | 14px |
|
|
948
|
+
| `text-xs` | 12px | 16px |
|
|
949
|
+
| `text-sm` | 14px | 20px |
|
|
950
|
+
| `text-base` | 16px | 24px |
|
|
951
|
+
| `text-lg` | 18px | 28px |
|
|
952
|
+
| `text-xl` | 20px | 28px |
|
|
953
|
+
| `text-2xl` | 24px | 32px |
|
|
954
|
+
| `text-3xl` | 30px | 36px |
|
|
955
|
+
| `text-4xl` | 36px | 40px |
|
|
956
|
+
| `text-5xl` | 48px | 48px |
|
|
957
|
+
| `text-6xl` | 64px | 64px |
|
|
958
|
+
|
|
959
|
+
```html
|
|
960
|
+
<p class="text-sm">Small text (14px)</p>
|
|
961
|
+
<p class="text-base">Base text (16px)</p>
|
|
962
|
+
<p class="text-xl">Extra large text (20px)</p>
|
|
963
|
+
<h1 class="text-4xl">Large heading (36px)</h1>
|
|
964
|
+
```
|
|
965
|
+
|
|
966
|
+
</details>
|
|
967
|
+
|
|
968
|
+
<details open>
|
|
969
|
+
<summary><strong>Font Weights</strong></summary>
|
|
970
|
+
|
|
971
|
+
| Class | Weight |
|
|
972
|
+
|-------|--------|
|
|
973
|
+
| `font-thin` | 100 |
|
|
974
|
+
| `font-extralight` | 200 |
|
|
975
|
+
| `font-light` | 300 |
|
|
976
|
+
| `font-normal` | 400 |
|
|
977
|
+
| `font-medium` | 500 |
|
|
978
|
+
| `font-semibold` | 600 |
|
|
979
|
+
| `font-bold` | 700 |
|
|
980
|
+
| `font-extrabold` | 800 |
|
|
981
|
+
| `font-black` | 900 |
|
|
982
|
+
|
|
983
|
+
```html
|
|
984
|
+
<p class="font-normal">Normal weight text</p>
|
|
985
|
+
<p class="font-semibold">Semi-bold text</p>
|
|
986
|
+
<p class="font-bold">Bold text</p>
|
|
987
|
+
```
|
|
988
|
+
|
|
989
|
+
</details>
|
|
990
|
+
|
|
991
|
+
<details open>
|
|
992
|
+
<summary><strong>Semantic Text Classes</strong></summary>
|
|
993
|
+
|
|
994
|
+
```html
|
|
995
|
+
<!-- Headings -->
|
|
996
|
+
<h1 class="heading-1">Main heading (36px, bold)</h1>
|
|
997
|
+
<h2 class="heading-2">Section heading (30px, bold)</h2>
|
|
998
|
+
<h3 class="heading-3">Subsection heading (24px, semibold)</h3>
|
|
999
|
+
<h4 class="heading-4">Minor heading (20px, semibold)</h4>
|
|
1000
|
+
<h5 class="heading-5">Small heading (18px, medium)</h5>
|
|
1001
|
+
<h6 class="heading-6">Tiny heading (16px, medium)</h6>
|
|
1002
|
+
|
|
1003
|
+
<!-- Body text -->
|
|
1004
|
+
<p class="body-lg">Large body text</p>
|
|
1005
|
+
<p class="body-base">Default body text</p>
|
|
1006
|
+
<p class="body-sm">Small body text</p>
|
|
1007
|
+
|
|
1008
|
+
<!-- Labels -->
|
|
1009
|
+
<span class="label-lg">Large label</span>
|
|
1010
|
+
<span class="label-md">Medium label</span>
|
|
1011
|
+
<span class="label-sm">Small label</span>
|
|
1012
|
+
|
|
1013
|
+
<!-- Captions -->
|
|
1014
|
+
<small class="caption">Caption text (12px)</small>
|
|
1015
|
+
```
|
|
1016
|
+
|
|
1017
|
+
</details>
|
|
1018
|
+
|
|
1019
|
+
<details open>
|
|
1020
|
+
<summary><strong>Text Utilities</strong></summary>
|
|
1021
|
+
|
|
1022
|
+
```html
|
|
1023
|
+
<!-- Text alignment -->
|
|
1024
|
+
<p class="text-left">Left aligned</p>
|
|
1025
|
+
<p class="text-center">Center aligned</p>
|
|
1026
|
+
<p class="text-right">Right aligned</p>
|
|
1027
|
+
<p class="text-justify">Justified text</p>
|
|
1028
|
+
|
|
1029
|
+
<!-- Text transform -->
|
|
1030
|
+
<p class="uppercase">UPPERCASE TEXT</p>
|
|
1031
|
+
<p class="lowercase">lowercase text</p>
|
|
1032
|
+
<p class="capitalize">Capitalize Words</p>
|
|
1033
|
+
<p class="normal-case">Normal case</p>
|
|
1034
|
+
|
|
1035
|
+
<!-- Text decoration -->
|
|
1036
|
+
<p class="underline">Underlined text</p>
|
|
1037
|
+
<p class="line-through">Strikethrough text</p>
|
|
1038
|
+
<p class="no-underline">No underline</p>
|
|
1039
|
+
|
|
1040
|
+
<!-- Whitespace -->
|
|
1041
|
+
<p class="whitespace-nowrap">No wrap</p>
|
|
1042
|
+
<p class="whitespace-pre">Preserve whitespace</p>
|
|
1043
|
+
<p class="whitespace-normal">Normal wrap</p>
|
|
1044
|
+
|
|
1045
|
+
<!-- Text overflow -->
|
|
1046
|
+
<p class="truncate">Truncate with ellipsis...</p>
|
|
1047
|
+
<p class="text-ellipsis">Text with ellipsis</p>
|
|
1048
|
+
```
|
|
1049
|
+
|
|
1050
|
+
</details>
|
|
1051
|
+
|
|
1052
|
+
---
|
|
1053
|
+
|
|
1054
|
+
### Spacing & Layout System
|
|
1055
|
+
|
|
1056
|
+
Flexible spacing utilities based on a 4px grid system.
|
|
1057
|
+
|
|
1058
|
+
<details open>
|
|
1059
|
+
<summary><strong>Spacing Scale</strong></summary>
|
|
1060
|
+
|
|
1061
|
+
| Token | Value | Usage |
|
|
1062
|
+
|-------|-------|-------|
|
|
1063
|
+
| `0` | 0px | No spacing |
|
|
1064
|
+
| `px` | 1px | Hairline |
|
|
1065
|
+
| `0.5` | 2px | Minimal |
|
|
1066
|
+
| `1` | 4px | Extra small |
|
|
1067
|
+
| `2` | 8px | Small |
|
|
1068
|
+
| `3` | 12px | Default |
|
|
1069
|
+
| `4` | 16px | Medium |
|
|
1070
|
+
| `6` | 24px | Large |
|
|
1071
|
+
| `8` | 32px | Extra large |
|
|
1072
|
+
| `10` | 40px | 2XL |
|
|
1073
|
+
| `12` | 48px | 3XL |
|
|
1074
|
+
| `16` | 64px | 4XL |
|
|
1075
|
+
| `20` | 80px | 5XL |
|
|
1076
|
+
| `24` | 96px | 6XL |
|
|
1077
|
+
|
|
1078
|
+
</details>
|
|
1079
|
+
|
|
1080
|
+
<details open>
|
|
1081
|
+
<summary><strong>Margin & Padding</strong></summary>
|
|
1082
|
+
|
|
1083
|
+
```html
|
|
1084
|
+
<!-- Margin all sides -->
|
|
1085
|
+
<div class="m-4">16px margin all sides</div>
|
|
1086
|
+
|
|
1087
|
+
<!-- Margin specific sides -->
|
|
1088
|
+
<div class="mt-4">16px margin top</div>
|
|
1089
|
+
<div class="mr-4">16px margin right</div>
|
|
1090
|
+
<div class="mb-4">16px margin bottom</div>
|
|
1091
|
+
<div class="ml-4">16px margin left</div>
|
|
1092
|
+
|
|
1093
|
+
<!-- Margin horizontal/vertical -->
|
|
1094
|
+
<div class="mx-4">16px margin left & right</div>
|
|
1095
|
+
<div class="my-4">16px margin top & bottom</div>
|
|
1096
|
+
|
|
1097
|
+
<!-- Padding follows same pattern -->
|
|
1098
|
+
<div class="p-4">16px padding all sides</div>
|
|
1099
|
+
<div class="px-4">16px padding left & right</div>
|
|
1100
|
+
<div class="py-4">16px padding top & bottom</div>
|
|
1101
|
+
<div class="pt-2 pb-4">8px top, 16px bottom</div>
|
|
1102
|
+
|
|
1103
|
+
<!-- Negative margin -->
|
|
1104
|
+
<div class="-mt-4">-16px margin top</div>
|
|
1105
|
+
<div class="-mx-2">-8px margin horizontal</div>
|
|
1106
|
+
|
|
1107
|
+
<!-- Auto margin -->
|
|
1108
|
+
<div class="mx-auto">Centered horizontally</div>
|
|
1109
|
+
<div class="ml-auto">Push to right</div>
|
|
1110
|
+
```
|
|
1111
|
+
|
|
1112
|
+
</details>
|
|
1113
|
+
|
|
1114
|
+
<details open>
|
|
1115
|
+
<summary><strong>Gap Utilities</strong></summary>
|
|
1116
|
+
|
|
1117
|
+
```html
|
|
1118
|
+
<!-- Gap for flex/grid containers -->
|
|
1119
|
+
<div class="flex gap-4">16px gap between items</div>
|
|
1120
|
+
<div class="grid gap-6">24px gap in grid</div>
|
|
1121
|
+
|
|
1122
|
+
<!-- Directional gaps -->
|
|
1123
|
+
<div class="flex gap-x-4">16px horizontal gap</div>
|
|
1124
|
+
<div class="grid gap-y-2">8px vertical gap</div>
|
|
1125
|
+
```
|
|
1126
|
+
|
|
1127
|
+
</details>
|
|
1128
|
+
|
|
1129
|
+
<details open>
|
|
1130
|
+
<summary><strong>Flexbox Utilities</strong></summary>
|
|
1131
|
+
|
|
1132
|
+
```html
|
|
1133
|
+
<!-- Display -->
|
|
1134
|
+
<div class="flex">Flex container</div>
|
|
1135
|
+
<div class="inline-flex">Inline flex</div>
|
|
1136
|
+
|
|
1137
|
+
<!-- Direction -->
|
|
1138
|
+
<div class="flex flex-row">Horizontal (default)</div>
|
|
1139
|
+
<div class="flex flex-col">Vertical</div>
|
|
1140
|
+
<div class="flex flex-row-reverse">Reversed horizontal</div>
|
|
1141
|
+
<div class="flex flex-col-reverse">Reversed vertical</div>
|
|
1142
|
+
|
|
1143
|
+
<!-- Wrap -->
|
|
1144
|
+
<div class="flex flex-wrap">Wrap items</div>
|
|
1145
|
+
<div class="flex flex-nowrap">No wrap</div>
|
|
1146
|
+
|
|
1147
|
+
<!-- Justify content -->
|
|
1148
|
+
<div class="flex justify-start">Align start</div>
|
|
1149
|
+
<div class="flex justify-center">Center items</div>
|
|
1150
|
+
<div class="flex justify-end">Align end</div>
|
|
1151
|
+
<div class="flex justify-between">Space between</div>
|
|
1152
|
+
<div class="flex justify-around">Space around</div>
|
|
1153
|
+
<div class="flex justify-evenly">Space evenly</div>
|
|
1154
|
+
|
|
1155
|
+
<!-- Align items -->
|
|
1156
|
+
<div class="flex items-start">Align top</div>
|
|
1157
|
+
<div class="flex items-center">Align center</div>
|
|
1158
|
+
<div class="flex items-end">Align bottom</div>
|
|
1159
|
+
<div class="flex items-stretch">Stretch to fill</div>
|
|
1160
|
+
<div class="flex items-baseline">Align baselines</div>
|
|
1161
|
+
|
|
1162
|
+
<!-- Flex grow/shrink -->
|
|
1163
|
+
<div class="flex-1">Grow to fill space</div>
|
|
1164
|
+
<div class="flex-auto">Auto size</div>
|
|
1165
|
+
<div class="flex-none">Don't grow or shrink</div>
|
|
1166
|
+
<div class="grow">Allow growing</div>
|
|
1167
|
+
<div class="shrink-0">Prevent shrinking</div>
|
|
1168
|
+
```
|
|
1169
|
+
|
|
1170
|
+
</details>
|
|
1171
|
+
|
|
1172
|
+
<details open>
|
|
1173
|
+
<summary><strong>Grid System</strong></summary>
|
|
1174
|
+
|
|
1175
|
+
```html
|
|
1176
|
+
<!-- Grid container -->
|
|
1177
|
+
<div class="grid">Grid container</div>
|
|
1178
|
+
<div class="inline-grid">Inline grid</div>
|
|
1179
|
+
|
|
1180
|
+
<!-- Grid columns -->
|
|
1181
|
+
<div class="grid grid-cols-2">2 columns</div>
|
|
1182
|
+
<div class="grid grid-cols-3">3 columns</div>
|
|
1183
|
+
<div class="grid grid-cols-4">4 columns</div>
|
|
1184
|
+
<div class="grid grid-cols-6">6 columns</div>
|
|
1185
|
+
<div class="grid grid-cols-12">12 columns</div>
|
|
1186
|
+
|
|
1187
|
+
<!-- Column span -->
|
|
1188
|
+
<div class="col-span-2">Span 2 columns</div>
|
|
1189
|
+
<div class="col-span-3">Span 3 columns</div>
|
|
1190
|
+
<div class="col-span-6">Span 6 columns (half)</div>
|
|
1191
|
+
<div class="col-span-full">Span all columns</div>
|
|
1192
|
+
|
|
1193
|
+
<!-- Row span -->
|
|
1194
|
+
<div class="row-span-2">Span 2 rows</div>
|
|
1195
|
+
<div class="row-span-3">Span 3 rows</div>
|
|
1196
|
+
|
|
1197
|
+
<!-- Place items -->
|
|
1198
|
+
<div class="grid place-items-center">Center all items</div>
|
|
1199
|
+
<div class="grid place-content-center">Center content</div>
|
|
1200
|
+
```
|
|
1201
|
+
|
|
1202
|
+
</details>
|
|
1203
|
+
|
|
1204
|
+
<details open>
|
|
1205
|
+
<summary><strong>Width & Height</strong></summary>
|
|
1206
|
+
|
|
1207
|
+
```html
|
|
1208
|
+
<!-- Fixed widths -->
|
|
1209
|
+
<div class="w-0">0px</div>
|
|
1210
|
+
<div class="w-4">16px</div>
|
|
1211
|
+
<div class="w-8">32px</div>
|
|
1212
|
+
<div class="w-16">64px</div>
|
|
1213
|
+
<div class="w-32">128px</div>
|
|
1214
|
+
<div class="w-64">256px</div>
|
|
1215
|
+
|
|
1216
|
+
<!-- Fractional widths (format: numerator-denominator) -->
|
|
1217
|
+
<div class="w-1-2">50%</div>
|
|
1218
|
+
<div class="w-1-3">33.333%</div>
|
|
1219
|
+
<div class="w-2-3">66.667%</div>
|
|
1220
|
+
<div class="w-1-4">25%</div>
|
|
1221
|
+
<div class="w-3-4">75%</div>
|
|
1222
|
+
|
|
1223
|
+
<!-- Special widths -->
|
|
1224
|
+
<div class="w-full">100%</div>
|
|
1225
|
+
<div class="w-screen">100vw</div>
|
|
1226
|
+
<div class="w-auto">Auto</div>
|
|
1227
|
+
<div class="w-fit">Fit content</div>
|
|
1228
|
+
<div class="w-min">Min content</div>
|
|
1229
|
+
<div class="w-max">Max content</div>
|
|
1230
|
+
|
|
1231
|
+
<!-- Min/Max width -->
|
|
1232
|
+
<div class="min-w-0">Min width 0</div>
|
|
1233
|
+
<div class="max-w-md">Max 448px</div>
|
|
1234
|
+
<div class="max-w-lg">Max 512px</div>
|
|
1235
|
+
<div class="max-w-xl">Max 576px</div>
|
|
1236
|
+
<div class="max-w-full">Max 100%</div>
|
|
1237
|
+
|
|
1238
|
+
<!-- Heights -->
|
|
1239
|
+
<div class="h-4">16px height</div>
|
|
1240
|
+
<div class="h-full">100% height</div>
|
|
1241
|
+
<div class="h-screen">100vh height</div>
|
|
1242
|
+
<div class="min-h-screen">Min 100vh</div>
|
|
1243
|
+
```
|
|
1244
|
+
|
|
1245
|
+
</details>
|
|
1246
|
+
|
|
1247
|
+
<details open>
|
|
1248
|
+
<summary><strong>Position Utilities</strong></summary>
|
|
1249
|
+
|
|
1250
|
+
```html
|
|
1251
|
+
<!-- Position -->
|
|
1252
|
+
<div class="relative">Relative positioning</div>
|
|
1253
|
+
<div class="absolute">Absolute positioning</div>
|
|
1254
|
+
<div class="fixed">Fixed positioning</div>
|
|
1255
|
+
<div class="sticky">Sticky positioning</div>
|
|
1256
|
+
<div class="static">Static (default)</div>
|
|
1257
|
+
|
|
1258
|
+
<!-- Inset values -->
|
|
1259
|
+
<div class="absolute top-0">Top: 0</div>
|
|
1260
|
+
<div class="absolute right-0">Right: 0</div>
|
|
1261
|
+
<div class="absolute bottom-0">Bottom: 0</div>
|
|
1262
|
+
<div class="absolute left-0">Left: 0</div>
|
|
1263
|
+
<div class="absolute inset-0">All sides: 0</div>
|
|
1264
|
+
<div class="absolute inset-x-0">Left & Right: 0</div>
|
|
1265
|
+
<div class="absolute inset-y-0">Top & Bottom: 0</div>
|
|
1266
|
+
|
|
1267
|
+
<!-- Z-index -->
|
|
1268
|
+
<div class="z-0">z-index: 0</div>
|
|
1269
|
+
<div class="z-10">z-index: 10</div>
|
|
1270
|
+
<div class="z-50">z-index: 50</div>
|
|
1271
|
+
<div class="z-auto">z-index: auto</div>
|
|
1272
|
+
```
|
|
1273
|
+
|
|
1274
|
+
</details>
|
|
1275
|
+
|
|
1276
|
+
---
|
|
1277
|
+
|
|
1278
|
+
### Animation System
|
|
1279
|
+
|
|
1280
|
+
Pre-built animations and transitions for smooth UI interactions.
|
|
1281
|
+
|
|
1282
|
+
<details open>
|
|
1283
|
+
<summary><strong>Transition Utilities</strong></summary>
|
|
1284
|
+
|
|
1285
|
+
```html
|
|
1286
|
+
<!-- Transition properties -->
|
|
1287
|
+
<div class="transition">Transition all properties</div>
|
|
1288
|
+
<div class="transition-colors">Transition colors only</div>
|
|
1289
|
+
<div class="transition-opacity">Transition opacity only</div>
|
|
1290
|
+
<div class="transition-transform">Transition transform only</div>
|
|
1291
|
+
<div class="transition-shadow">Transition shadow only</div>
|
|
1292
|
+
<div class="transition-none">No transitions</div>
|
|
1293
|
+
|
|
1294
|
+
<!-- Duration -->
|
|
1295
|
+
<div class="duration-75">75ms</div>
|
|
1296
|
+
<div class="duration-100">100ms</div>
|
|
1297
|
+
<div class="duration-150">150ms</div>
|
|
1298
|
+
<div class="duration-200">200ms</div>
|
|
1299
|
+
<div class="duration-300">300ms (default)</div>
|
|
1300
|
+
<div class="duration-500">500ms</div>
|
|
1301
|
+
<div class="duration-700">700ms</div>
|
|
1302
|
+
<div class="duration-1000">1000ms</div>
|
|
1303
|
+
|
|
1304
|
+
<!-- Timing functions -->
|
|
1305
|
+
<div class="ease-linear">Linear</div>
|
|
1306
|
+
<div class="ease-in">Ease in</div>
|
|
1307
|
+
<div class="ease-out">Ease out</div>
|
|
1308
|
+
<div class="ease-in-out">Ease in-out</div>
|
|
1309
|
+
<div class="ease-bounce">Bounce effect</div>
|
|
1310
|
+
<div class="ease-spring">Spring effect</div>
|
|
1311
|
+
<div class="ease-elastic">Elastic effect</div>
|
|
1312
|
+
|
|
1313
|
+
<!-- Delay -->
|
|
1314
|
+
<div class="delay-75">75ms delay</div>
|
|
1315
|
+
<div class="delay-150">150ms delay</div>
|
|
1316
|
+
<div class="delay-300">300ms delay</div>
|
|
1317
|
+
<div class="delay-500">500ms delay</div>
|
|
1318
|
+
```
|
|
1319
|
+
|
|
1320
|
+
</details>
|
|
1321
|
+
|
|
1322
|
+
<details open>
|
|
1323
|
+
<summary><strong>Keyframe Animations</strong></summary>
|
|
1324
|
+
|
|
1325
|
+
```html
|
|
1326
|
+
<!-- Fade animations -->
|
|
1327
|
+
<div class="animate-fade-in">Fade in</div>
|
|
1328
|
+
<div class="animate-fade-out">Fade out</div>
|
|
1329
|
+
<div class="animate-fade-in-up">Fade in from bottom</div>
|
|
1330
|
+
<div class="animate-fade-in-down">Fade in from top</div>
|
|
1331
|
+
<div class="animate-fade-in-left">Fade in from right</div>
|
|
1332
|
+
<div class="animate-fade-in-right">Fade in from left</div>
|
|
1333
|
+
|
|
1334
|
+
<!-- Slide animations -->
|
|
1335
|
+
<div class="animate-slide-in-up">Slide up</div>
|
|
1336
|
+
<div class="animate-slide-in-down">Slide down</div>
|
|
1337
|
+
<div class="animate-slide-in-left">Slide from right</div>
|
|
1338
|
+
<div class="animate-slide-in-right">Slide from left</div>
|
|
1339
|
+
|
|
1340
|
+
<!-- Scale animations -->
|
|
1341
|
+
<div class="animate-scale-in">Scale in</div>
|
|
1342
|
+
<div class="animate-scale-out">Scale out</div>
|
|
1343
|
+
<div class="animate-zoom-in">Zoom in (larger)</div>
|
|
1344
|
+
<div class="animate-zoom-out">Zoom out</div>
|
|
1345
|
+
|
|
1346
|
+
<!-- Attention animations -->
|
|
1347
|
+
<div class="animate-bounce">Bouncing</div>
|
|
1348
|
+
<div class="animate-pulse">Pulsing opacity</div>
|
|
1349
|
+
<div class="animate-ping">Ping effect</div>
|
|
1350
|
+
<div class="animate-shake">Shake left-right</div>
|
|
1351
|
+
<div class="animate-wiggle">Wiggle rotation</div>
|
|
1352
|
+
<div class="animate-heartbeat">Heartbeat scale</div>
|
|
1353
|
+
<div class="animate-flash">Flash opacity</div>
|
|
1354
|
+
<div class="animate-jello">Jello effect</div>
|
|
1355
|
+
|
|
1356
|
+
<!-- Rotation -->
|
|
1357
|
+
<div class="animate-spin">Continuous spin</div>
|
|
1358
|
+
<div class="animate-spin-slow">Slow spin (3s)</div>
|
|
1359
|
+
<div class="animate-spin-reverse">Reverse spin</div>
|
|
1360
|
+
```
|
|
1361
|
+
|
|
1362
|
+
</details>
|
|
1363
|
+
|
|
1364
|
+
<details open>
|
|
1365
|
+
<summary><strong>Loading States</strong></summary>
|
|
1366
|
+
|
|
1367
|
+
```html
|
|
1368
|
+
<!-- Shimmer effect (for skeleton loading) -->
|
|
1369
|
+
<div class="shimmer">Loading placeholder...</div>
|
|
1370
|
+
|
|
1371
|
+
<!-- Skeleton components -->
|
|
1372
|
+
<div class="skeleton">Basic skeleton</div>
|
|
1373
|
+
<div class="skeleton skeleton-text">Text line skeleton</div>
|
|
1374
|
+
<div class="skeleton skeleton-circle">Avatar skeleton</div>
|
|
1375
|
+
<div class="skeleton skeleton-rect">Rectangle skeleton</div>
|
|
1376
|
+
|
|
1377
|
+
<!-- Spinner -->
|
|
1378
|
+
<div class="spinner">Loading spinner</div>
|
|
1379
|
+
<div class="spinner spinner-sm">Small spinner</div>
|
|
1380
|
+
<div class="spinner spinner-lg">Large spinner</div>
|
|
1381
|
+
|
|
1382
|
+
<!-- Skeleton example -->
|
|
1383
|
+
<div class="space-y-4">
|
|
1384
|
+
<div class="skeleton skeleton-circle" style="width: 48px; height: 48px;"></div>
|
|
1385
|
+
<div class="skeleton skeleton-text"></div>
|
|
1386
|
+
<div class="skeleton skeleton-text" style="width: 75%;"></div>
|
|
1387
|
+
</div>
|
|
1388
|
+
```
|
|
1389
|
+
|
|
1390
|
+
</details>
|
|
1391
|
+
|
|
1392
|
+
<details open>
|
|
1393
|
+
<summary><strong>Hover Effects</strong></summary>
|
|
1394
|
+
|
|
1395
|
+
```html
|
|
1396
|
+
<!-- Scale on hover -->
|
|
1397
|
+
<button class="hover-scale">Scale up on hover</button>
|
|
1398
|
+
<button class="hover-scale-sm">Small scale</button>
|
|
1399
|
+
<button class="hover-scale-lg">Large scale</button>
|
|
1400
|
+
|
|
1401
|
+
<!-- Lift effect (scale + shadow) -->
|
|
1402
|
+
<div class="hover-lift">Lift on hover</div>
|
|
1403
|
+
|
|
1404
|
+
<!-- Brightness -->
|
|
1405
|
+
<img class="hover-bright">Brighten on hover</img>
|
|
1406
|
+
<img class="hover-dim">Dim on hover</img>
|
|
1407
|
+
|
|
1408
|
+
<!-- Button example -->
|
|
1409
|
+
<button class="transition hover-scale duration-200 ease-out">
|
|
1410
|
+
Animated Button
|
|
1411
|
+
</button>
|
|
1412
|
+
```
|
|
1413
|
+
|
|
1414
|
+
</details>
|
|
1415
|
+
|
|
1416
|
+
<details open>
|
|
1417
|
+
<summary><strong>Transform Utilities</strong></summary>
|
|
1418
|
+
|
|
1419
|
+
```html
|
|
1420
|
+
<!-- Scale -->
|
|
1421
|
+
<div class="scale-0">Scale 0%</div>
|
|
1422
|
+
<div class="scale-50">Scale 50%</div>
|
|
1423
|
+
<div class="scale-75">Scale 75%</div>
|
|
1424
|
+
<div class="scale-100">Scale 100%</div>
|
|
1425
|
+
<div class="scale-110">Scale 110%</div>
|
|
1426
|
+
<div class="scale-125">Scale 125%</div>
|
|
1427
|
+
<div class="scale-150">Scale 150%</div>
|
|
1428
|
+
|
|
1429
|
+
<!-- Rotate -->
|
|
1430
|
+
<div class="rotate-0">No rotation</div>
|
|
1431
|
+
<div class="rotate-45">45 degrees</div>
|
|
1432
|
+
<div class="rotate-90">90 degrees</div>
|
|
1433
|
+
<div class="rotate-180">180 degrees</div>
|
|
1434
|
+
<div class="-rotate-45">-45 degrees</div>
|
|
1435
|
+
<div class="-rotate-90">-90 degrees</div>
|
|
1436
|
+
|
|
1437
|
+
<!-- Translate -->
|
|
1438
|
+
<div class="translate-x-4">Move right 16px</div>
|
|
1439
|
+
<div class="-translate-x-4">Move left 16px</div>
|
|
1440
|
+
<div class="translate-y-4">Move down 16px</div>
|
|
1441
|
+
<div class="-translate-y-4">Move up 16px</div>
|
|
1442
|
+
<div class="translate-x-1-2">Move right 50%</div>
|
|
1443
|
+
<div class="-translate-y-full">Move up 100%</div>
|
|
1444
|
+
|
|
1445
|
+
<!-- Skew -->
|
|
1446
|
+
<div class="skew-x-3">Skew X 3deg</div>
|
|
1447
|
+
<div class="skew-y-6">Skew Y 6deg</div>
|
|
1448
|
+
|
|
1449
|
+
<!-- Transform origin -->
|
|
1450
|
+
<div class="origin-center">Center origin</div>
|
|
1451
|
+
<div class="origin-top">Top origin</div>
|
|
1452
|
+
<div class="origin-top-right">Top right origin</div>
|
|
1453
|
+
```
|
|
1454
|
+
|
|
1455
|
+
</details>
|
|
1456
|
+
|
|
1457
|
+
<details open>
|
|
1458
|
+
<summary><strong>Motion Preferences</strong></summary>
|
|
1459
|
+
|
|
1460
|
+
Animations respect user's motion preferences:
|
|
1461
|
+
|
|
1462
|
+
```css
|
|
1463
|
+
/* Automatically applied when user prefers reduced motion */
|
|
1464
|
+
@media (prefers-reduced-motion: reduce) {
|
|
1465
|
+
.animate-*, .transition {
|
|
1466
|
+
animation: none !important;
|
|
1467
|
+
transition: none !important;
|
|
1468
|
+
}
|
|
1469
|
+
}
|
|
1470
|
+
```
|
|
1471
|
+
|
|
1472
|
+
All animations include built-in support for `prefers-reduced-motion`, ensuring accessibility for users who are sensitive to motion.
|
|
1473
|
+
|
|
1474
|
+
</details>
|
|
1475
|
+
|
|
1476
|
+
---
|
|
1477
|
+
|
|
915
1478
|
### Utility Classes
|
|
916
1479
|
|
|
917
1480
|
```html
|
|
@@ -999,6 +1562,9 @@ MIT License
|
|
|
999
1562
|
- [Animation Icon](#animation-icon)
|
|
1000
1563
|
- [Ví dụ thực tế](#ví-dụ-thực-tế)
|
|
1001
1564
|
- [Bảng màu](#bảng-màu)
|
|
1565
|
+
- [Hệ thống Typography](#hệ-thống-typography)
|
|
1566
|
+
- [Hệ thống Spacing & Layout](#hệ-thống-spacing--layout)
|
|
1567
|
+
- [Hệ thống Animation](#hệ-thống-animation)
|
|
1002
1568
|
- [Semantic Classes](#semantic-classes)
|
|
1003
1569
|
- [Màu Badge Theme](#màu-badge-theme)
|
|
1004
1570
|
- [Tiện ích kích thước](#tiện-ích-kích-thước)
|
|
@@ -1017,6 +1583,9 @@ MIT License
|
|
|
1017
1583
|
- **Tự động tạo bảng màu**: Tạo 14 sắc độ màu (900-10) từ một màu cơ sở
|
|
1018
1584
|
- **CSS Custom Properties**: Tất cả màu được export dưới dạng CSS variables
|
|
1019
1585
|
- **Semantic Color Classes**: Các lớp tiện ích sẵn có cho background, text, border và icon
|
|
1586
|
+
- **Hệ thống Typography**: Tiện ích font toàn diện với các class heading/body ngữ nghĩa
|
|
1587
|
+
- **Spacing & Layout**: Thang đo spacing linh hoạt, flexbox và CSS grid utilities
|
|
1588
|
+
- **Hệ thống Animation**: Transition, keyframe animations và trạng thái loading sẵn có
|
|
1020
1589
|
- **Theme Badge Palettes**: 12 bảng màu định sẵn cho badge và tag
|
|
1021
1590
|
- **RGB Mix Algorithm**: Tạo sắc độ màu chính xác bằng thuật toán pha trộn RGB
|
|
1022
1591
|
- **Cập nhật màu Runtime**: Thay đổi màu theme động mà không cần tải lại trang
|
|
@@ -1319,6 +1888,253 @@ Mỗi loại màu tạo ra 14 sắc độ:
|
|
|
1319
1888
|
| 25 | Mềm | +93.5% trắng |
|
|
1320
1889
|
| 10 | Sáng nhất | +97.0% trắng |
|
|
1321
1890
|
|
|
1891
|
+
### Hệ thống Typography
|
|
1892
|
+
|
|
1893
|
+
Các tiện ích typography toàn diện để định dạng văn bản nhất quán.
|
|
1894
|
+
|
|
1895
|
+
#### Font Family
|
|
1896
|
+
|
|
1897
|
+
```html
|
|
1898
|
+
<p class="font-sans">Font sans-serif hệ thống (mặc định)</p>
|
|
1899
|
+
<p class="font-mono">Font monospace cho code</p>
|
|
1900
|
+
<p class="font-serif">Font serif</p>
|
|
1901
|
+
```
|
|
1902
|
+
|
|
1903
|
+
#### Kích thước chữ
|
|
1904
|
+
|
|
1905
|
+
| Class | Kích thước | Line Height |
|
|
1906
|
+
|-------|------------|-------------|
|
|
1907
|
+
| `text-2xs` | 10px | 14px |
|
|
1908
|
+
| `text-xs` | 12px | 16px |
|
|
1909
|
+
| `text-sm` | 14px | 20px |
|
|
1910
|
+
| `text-base` | 16px | 24px |
|
|
1911
|
+
| `text-lg` | 18px | 28px |
|
|
1912
|
+
| `text-xl` | 20px | 28px |
|
|
1913
|
+
| `text-2xl` | 24px | 32px |
|
|
1914
|
+
| `text-3xl` | 30px | 36px |
|
|
1915
|
+
| `text-4xl` | 36px | 40px |
|
|
1916
|
+
|
|
1917
|
+
#### Độ đậm chữ
|
|
1918
|
+
|
|
1919
|
+
| Class | Weight |
|
|
1920
|
+
|-------|--------|
|
|
1921
|
+
| `font-light` | 300 |
|
|
1922
|
+
| `font-normal` | 400 |
|
|
1923
|
+
| `font-medium` | 500 |
|
|
1924
|
+
| `font-semibold` | 600 |
|
|
1925
|
+
| `font-bold` | 700 |
|
|
1926
|
+
|
|
1927
|
+
#### Heading ngữ nghĩa
|
|
1928
|
+
|
|
1929
|
+
```html
|
|
1930
|
+
<h1 class="heading-1">Heading chính (36px, bold)</h1>
|
|
1931
|
+
<h2 class="heading-2">Heading phần (30px, bold)</h2>
|
|
1932
|
+
<h3 class="heading-3">Heading phụ (24px, semibold)</h3>
|
|
1933
|
+
```
|
|
1934
|
+
|
|
1935
|
+
#### Tiện ích văn bản
|
|
1936
|
+
|
|
1937
|
+
```html
|
|
1938
|
+
<!-- Căn chỉnh -->
|
|
1939
|
+
<p class="text-left">Căn trái</p>
|
|
1940
|
+
<p class="text-center">Căn giữa</p>
|
|
1941
|
+
<p class="text-right">Căn phải</p>
|
|
1942
|
+
|
|
1943
|
+
<!-- Biến đổi chữ -->
|
|
1944
|
+
<p class="uppercase">CHỮ IN HOA</p>
|
|
1945
|
+
<p class="lowercase">chữ thường</p>
|
|
1946
|
+
<p class="capitalize">Viết Hoa Chữ Cái Đầu</p>
|
|
1947
|
+
|
|
1948
|
+
<!-- Trang trí -->
|
|
1949
|
+
<p class="underline">Gạch chân</p>
|
|
1950
|
+
<p class="line-through">Gạch ngang</p>
|
|
1951
|
+
|
|
1952
|
+
<!-- Cắt ngắn -->
|
|
1953
|
+
<p class="truncate">Cắt ngắn với dấu chấm lửng...</p>
|
|
1954
|
+
```
|
|
1955
|
+
|
|
1956
|
+
### Hệ thống Spacing & Layout
|
|
1957
|
+
|
|
1958
|
+
Tiện ích spacing linh hoạt dựa trên hệ thống lưới 4px.
|
|
1959
|
+
|
|
1960
|
+
#### Thang đo Spacing
|
|
1961
|
+
|
|
1962
|
+
| Token | Giá trị | Mô tả |
|
|
1963
|
+
|-------|---------|-------|
|
|
1964
|
+
| `0` | 0px | Không có spacing |
|
|
1965
|
+
| `1` | 4px | Cực nhỏ |
|
|
1966
|
+
| `2` | 8px | Nhỏ |
|
|
1967
|
+
| `3` | 12px | Mặc định |
|
|
1968
|
+
| `4` | 16px | Vừa |
|
|
1969
|
+
| `6` | 24px | Lớn |
|
|
1970
|
+
| `8` | 32px | Cực lớn |
|
|
1971
|
+
|
|
1972
|
+
#### Margin & Padding
|
|
1973
|
+
|
|
1974
|
+
```html
|
|
1975
|
+
<!-- Margin tất cả các phía -->
|
|
1976
|
+
<div class="m-4">16px margin tất cả</div>
|
|
1977
|
+
|
|
1978
|
+
<!-- Margin theo hướng -->
|
|
1979
|
+
<div class="mt-4">16px margin trên</div>
|
|
1980
|
+
<div class="mb-4">16px margin dưới</div>
|
|
1981
|
+
<div class="mx-4">16px margin ngang</div>
|
|
1982
|
+
<div class="my-4">16px margin dọc</div>
|
|
1983
|
+
|
|
1984
|
+
<!-- Padding tương tự -->
|
|
1985
|
+
<div class="p-4">16px padding tất cả</div>
|
|
1986
|
+
<div class="px-4">16px padding ngang</div>
|
|
1987
|
+
<div class="py-4">16px padding dọc</div>
|
|
1988
|
+
|
|
1989
|
+
<!-- Margin âm -->
|
|
1990
|
+
<div class="-mt-4">-16px margin trên</div>
|
|
1991
|
+
|
|
1992
|
+
<!-- Margin auto -->
|
|
1993
|
+
<div class="mx-auto">Căn giữa theo chiều ngang</div>
|
|
1994
|
+
```
|
|
1995
|
+
|
|
1996
|
+
#### Flexbox
|
|
1997
|
+
|
|
1998
|
+
```html
|
|
1999
|
+
<!-- Display -->
|
|
2000
|
+
<div class="flex">Flex container</div>
|
|
2001
|
+
<div class="inline-flex">Inline flex</div>
|
|
2002
|
+
|
|
2003
|
+
<!-- Hướng -->
|
|
2004
|
+
<div class="flex flex-row">Ngang (mặc định)</div>
|
|
2005
|
+
<div class="flex flex-col">Dọc</div>
|
|
2006
|
+
|
|
2007
|
+
<!-- Justify content -->
|
|
2008
|
+
<div class="flex justify-start">Căn đầu</div>
|
|
2009
|
+
<div class="flex justify-center">Căn giữa</div>
|
|
2010
|
+
<div class="flex justify-end">Căn cuối</div>
|
|
2011
|
+
<div class="flex justify-between">Cách đều</div>
|
|
2012
|
+
|
|
2013
|
+
<!-- Align items -->
|
|
2014
|
+
<div class="flex items-start">Căn trên</div>
|
|
2015
|
+
<div class="flex items-center">Căn giữa</div>
|
|
2016
|
+
<div class="flex items-end">Căn dưới</div>
|
|
2017
|
+
|
|
2018
|
+
<!-- Gap -->
|
|
2019
|
+
<div class="flex gap-4">16px gap giữa items</div>
|
|
2020
|
+
```
|
|
2021
|
+
|
|
2022
|
+
#### Grid System
|
|
2023
|
+
|
|
2024
|
+
```html
|
|
2025
|
+
<!-- Grid columns -->
|
|
2026
|
+
<div class="grid grid-cols-2">2 cột</div>
|
|
2027
|
+
<div class="grid grid-cols-3">3 cột</div>
|
|
2028
|
+
<div class="grid grid-cols-4">4 cột</div>
|
|
2029
|
+
<div class="grid grid-cols-12">12 cột</div>
|
|
2030
|
+
|
|
2031
|
+
<!-- Column span -->
|
|
2032
|
+
<div class="col-span-2">Chiếm 2 cột</div>
|
|
2033
|
+
<div class="col-span-6">Chiếm 6 cột (nửa)</div>
|
|
2034
|
+
<div class="col-span-full">Chiếm tất cả cột</div>
|
|
2035
|
+
```
|
|
2036
|
+
|
|
2037
|
+
#### Width & Height
|
|
2038
|
+
|
|
2039
|
+
```html
|
|
2040
|
+
<!-- Chiều rộng cố định -->
|
|
2041
|
+
<div class="w-4">16px</div>
|
|
2042
|
+
<div class="w-16">64px</div>
|
|
2043
|
+
<div class="w-32">128px</div>
|
|
2044
|
+
|
|
2045
|
+
<!-- Chiều rộng phân số (format: tử số-mẫu số) -->
|
|
2046
|
+
<div class="w-1-2">50%</div>
|
|
2047
|
+
<div class="w-1-3">33.333%</div>
|
|
2048
|
+
<div class="w-full">100%</div>
|
|
2049
|
+
|
|
2050
|
+
<!-- Chiều cao -->
|
|
2051
|
+
<div class="h-full">100%</div>
|
|
2052
|
+
<div class="h-screen">100vh</div>
|
|
2053
|
+
```
|
|
2054
|
+
|
|
2055
|
+
### Hệ thống Animation
|
|
2056
|
+
|
|
2057
|
+
Animation và transition sẵn có cho giao diện mượt mà.
|
|
2058
|
+
|
|
2059
|
+
#### Transition
|
|
2060
|
+
|
|
2061
|
+
```html
|
|
2062
|
+
<!-- Thuộc tính transition -->
|
|
2063
|
+
<div class="transition">Transition tất cả thuộc tính</div>
|
|
2064
|
+
<div class="transition-colors">Transition chỉ màu sắc</div>
|
|
2065
|
+
<div class="transition-opacity">Transition chỉ độ mờ</div>
|
|
2066
|
+
<div class="transition-transform">Transition chỉ transform</div>
|
|
2067
|
+
|
|
2068
|
+
<!-- Thời lượng -->
|
|
2069
|
+
<div class="duration-150">150ms</div>
|
|
2070
|
+
<div class="duration-300">300ms (mặc định)</div>
|
|
2071
|
+
<div class="duration-500">500ms</div>
|
|
2072
|
+
|
|
2073
|
+
<!-- Timing function -->
|
|
2074
|
+
<div class="ease-in">Ease in</div>
|
|
2075
|
+
<div class="ease-out">Ease out</div>
|
|
2076
|
+
<div class="ease-in-out">Ease in-out</div>
|
|
2077
|
+
<div class="ease-bounce">Hiệu ứng nảy</div>
|
|
2078
|
+
```
|
|
2079
|
+
|
|
2080
|
+
#### Keyframe Animations
|
|
2081
|
+
|
|
2082
|
+
```html
|
|
2083
|
+
<!-- Fade animations -->
|
|
2084
|
+
<div class="animate-fade-in">Fade vào</div>
|
|
2085
|
+
<div class="animate-fade-in-up">Fade vào từ dưới</div>
|
|
2086
|
+
<div class="animate-fade-in-down">Fade vào từ trên</div>
|
|
2087
|
+
|
|
2088
|
+
<!-- Slide animations -->
|
|
2089
|
+
<div class="animate-slide-in-up">Trượt lên</div>
|
|
2090
|
+
<div class="animate-slide-in-down">Trượt xuống</div>
|
|
2091
|
+
<div class="animate-slide-in-left">Trượt từ phải</div>
|
|
2092
|
+
<div class="animate-slide-in-right">Trượt từ trái</div>
|
|
2093
|
+
|
|
2094
|
+
<!-- Scale animations -->
|
|
2095
|
+
<div class="animate-scale-in">Phóng to vào</div>
|
|
2096
|
+
<div class="animate-zoom-in">Zoom vào</div>
|
|
2097
|
+
|
|
2098
|
+
<!-- Attention animations -->
|
|
2099
|
+
<div class="animate-bounce">Nảy</div>
|
|
2100
|
+
<div class="animate-pulse">Nhấp nháy opacity</div>
|
|
2101
|
+
<div class="animate-shake">Rung</div>
|
|
2102
|
+
<div class="animate-spin">Xoay liên tục</div>
|
|
2103
|
+
```
|
|
2104
|
+
|
|
2105
|
+
#### Trạng thái Loading
|
|
2106
|
+
|
|
2107
|
+
```html
|
|
2108
|
+
<!-- Shimmer effect -->
|
|
2109
|
+
<div class="shimmer">Loading placeholder...</div>
|
|
2110
|
+
|
|
2111
|
+
<!-- Skeleton components -->
|
|
2112
|
+
<div class="skeleton">Skeleton cơ bản</div>
|
|
2113
|
+
<div class="skeleton skeleton-text">Skeleton dòng chữ</div>
|
|
2114
|
+
<div class="skeleton skeleton-circle">Skeleton avatar</div>
|
|
2115
|
+
|
|
2116
|
+
<!-- Spinner -->
|
|
2117
|
+
<div class="spinner">Loading spinner</div>
|
|
2118
|
+
```
|
|
2119
|
+
|
|
2120
|
+
#### Transform
|
|
2121
|
+
|
|
2122
|
+
```html
|
|
2123
|
+
<!-- Scale -->
|
|
2124
|
+
<div class="scale-50">50%</div>
|
|
2125
|
+
<div class="scale-100">100%</div>
|
|
2126
|
+
<div class="scale-110">110%</div>
|
|
2127
|
+
|
|
2128
|
+
<!-- Rotate -->
|
|
2129
|
+
<div class="rotate-45">45 độ</div>
|
|
2130
|
+
<div class="rotate-90">90 độ</div>
|
|
2131
|
+
<div class="rotate-180">180 độ</div>
|
|
2132
|
+
|
|
2133
|
+
<!-- Translate -->
|
|
2134
|
+
<div class="translate-x-4">Di chuyển phải 16px</div>
|
|
2135
|
+
<div class="translate-y-4">Di chuyển xuống 16px</div>
|
|
2136
|
+
```
|
|
2137
|
+
|
|
1322
2138
|
### Semantic Classes
|
|
1323
2139
|
|
|
1324
2140
|
#### Backgrounds (Nền)
|