dynamic-ds 1.0.4 → 1.0.6
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 +961 -142
- package/package.json +1 -1
- package/src/lib/styles/_animations.scss +1053 -0
- package/src/lib/styles/{icons.scss → _icons.scss} +1 -1
- 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/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
|
|
@@ -407,202 +413,205 @@ export class SettingsComponent {
|
|
|
407
413
|
<details open>
|
|
408
414
|
<summary><strong>Available Icons</strong></summary>
|
|
409
415
|
|
|
410
|
-
The library includes **
|
|
416
|
+
The library includes **143 icons** with multiple style variants (duocolor, duotone, line, solid). Below is the complete list:
|
|
411
417
|
|
|
412
418
|
#### Activity & Status Icons
|
|
413
419
|
|
|
414
|
-
| Icon
|
|
415
|
-
|
|
416
|
-
| Activity
|
|
417
|
-
| Activity Heart |  |  | `dsi-activity-heart-line` `dsi-activity-heart-solid` |
|
|
418
|
-
| Check Circle
|
|
419
|
-
| Check Square
|
|
420
|
-
| Info Circle
|
|
421
|
-
| X Close
|
|
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` |
|
|
422
430
|
|
|
423
431
|
#### Navigation Icons
|
|
424
432
|
|
|
425
|
-
| Icon
|
|
426
|
-
|
|
427
|
-
| Anchor
|
|
428
|
-
| Home 01
|
|
429
|
-
| Home 02
|
|
430
|
-
| Home 03
|
|
431
|
-
| Home 04
|
|
432
|
-
| Home 05
|
|
433
|
-
| Home Line
|
|
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` |
|
|
434
442
|
| Home Smile |  |  | `dsi-home-smile-line` `dsi-home-smile-solid` |
|
|
435
443
|
|
|
436
444
|
#### Arrow Icons
|
|
437
445
|
|
|
438
|
-
| Icon
|
|
439
|
-
|
|
440
|
-
| Arrow Up
|
|
441
|
-
| Arrow Down
|
|
442
|
-
| Arrow Left
|
|
443
|
-
| Arrow Right
|
|
444
|
-
| Arrow Up Left
|
|
445
|
-
| Arrow Up Right
|
|
446
|
-
| Arrow Down Left
|
|
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` |
|
|
447
455
|
| Arrow Down Right |  |  | `dsi-arrow-down-right-line` `dsi-arrow-down-right-solid` |
|
|
448
456
|
|
|
449
457
|
#### Arrow Circle Icons
|
|
450
458
|
|
|
451
|
-
| Icon
|
|
452
|
-
|
|
453
|
-
| Arrow Circle Up
|
|
454
|
-
| Arrow Circle Down
|
|
455
|
-
| Arrow Circle Left
|
|
456
|
-
| Arrow Circle Right
|
|
457
|
-
| Arrow Circle Up Left
|
|
458
|
-
| Arrow Circle Up Right
|
|
459
|
-
| Arrow Circle Down Left
|
|
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` |
|
|
460
468
|
| Arrow Circle Down Right |  |  | `dsi-arrow-circle-down-right-line` `dsi-arrow-circle-down-right-solid` |
|
|
461
469
|
|
|
462
470
|
#### Arrow Square Icons
|
|
463
471
|
|
|
464
|
-
| Icon
|
|
465
|
-
|
|
466
|
-
| Arrow Square Up
|
|
467
|
-
| Arrow Square Down
|
|
468
|
-
| Arrow Square Left
|
|
469
|
-
| Arrow Square Right
|
|
470
|
-
| Arrow Square Up Left
|
|
471
|
-
| Arrow Square Up Right
|
|
472
|
-
| Arrow Square Down Left
|
|
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` |
|
|
473
481
|
| Arrow Square Down Right |  |  | `dsi-arrow-square-down-right-line` `dsi-arrow-square-down-right-solid` |
|
|
474
482
|
|
|
475
483
|
#### Arrow Block Icons
|
|
476
484
|
|
|
477
|
-
| Icon
|
|
478
|
-
|
|
479
|
-
| Arrow Block Up
|
|
480
|
-
| Arrow Block Down
|
|
481
|
-
| Arrow Block Left
|
|
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` |
|
|
482
490
|
| Arrow Block Right |  |  | `dsi-arrow-block-right-line` `dsi-arrow-block-right-solid` |
|
|
483
491
|
|
|
484
492
|
#### Arrow Narrow Icons
|
|
485
493
|
|
|
486
|
-
| Icon
|
|
487
|
-
|
|
488
|
-
| Arrow Narrow Up
|
|
489
|
-
| Arrow Narrow Down
|
|
490
|
-
| Arrow Narrow Left
|
|
491
|
-
| Arrow Narrow Right
|
|
492
|
-
| Arrow Narrow Up Left
|
|
493
|
-
| Arrow Narrow Up Right
|
|
494
|
-
| Arrow Narrow Down Left
|
|
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` |
|
|
495
503
|
| Arrow Narrow Down Right |  |  | `dsi-arrow-narrow-down-right-line` `dsi-arrow-narrow-down-right-solid` |
|
|
496
504
|
|
|
497
505
|
#### Arrow Circle Broken Icons
|
|
498
506
|
|
|
499
|
-
| Icon
|
|
500
|
-
|
|
501
|
-
| Arrow Circle Broken Up
|
|
502
|
-
| Arrow Circle Broken Down
|
|
503
|
-
| Arrow Circle Broken Left
|
|
504
|
-
| Arrow Circle Broken Right
|
|
505
|
-
| Arrow Circle Broken Up Left
|
|
506
|
-
| Arrow Circle Broken Up Right
|
|
507
|
-
| Arrow Circle Broken Down Left
|
|
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` |
|
|
508
516
|
| Arrow Circle Broken Down Right |  |  | `dsi-arrow-circle-broken-down-right-line` `dsi-arrow-circle-broken-down-right-solid` |
|
|
509
517
|
|
|
510
|
-
####
|
|
518
|
+
#### Multi-Arrow Icons
|
|
511
519
|
|
|
512
|
-
| Icon
|
|
513
|
-
|
|
514
|
-
| Arrows Up
|
|
515
|
-
| Arrows Down
|
|
516
|
-
| Arrows Left
|
|
517
|
-
| Arrows Right
|
|
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` |
|
|
518
526
|
| Arrows Triangle |  |  | `dsi-arrows-triangle-line` `dsi-arrows-triangle-solid` |
|
|
519
527
|
|
|
520
|
-
####
|
|
521
|
-
|
|
522
|
-
| Icon
|
|
523
|
-
|
|
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
|
+
|------|------|------|-------------|
|
|
524
547
|
| Mail 01 |  |  | `dsi-mail-01-line` `dsi-mail-01-solid` |
|
|
525
548
|
| Mail 02 |  |  | `dsi-mail-02-line` `dsi-mail-02-solid` |
|
|
526
549
|
| Mail 03 |  |  | `dsi-mail-03-line` `dsi-mail-03-solid` |
|
|
527
550
|
| Mail 04 |  |  | `dsi-mail-04-line` `dsi-mail-04-solid` |
|
|
528
551
|
| Mail 05 |  |  | `dsi-mail-05-line` `dsi-mail-05-solid` |
|
|
529
|
-
|
|
530
|
-
#### Notification Icons
|
|
531
|
-
|
|
532
|
-
| Icon | Line | Solid | Class Names |
|
|
533
|
-
| --------------------------- | -------------------------------------------------------- | --------------------------------------------------------- | ------------------------------------------------------------------------------ |
|
|
534
|
-
| Notification Box |  |  | `dsi-notification-box-line` `dsi-notification-box-solid` |
|
|
535
|
-
| Notification Message |  |  | `dsi-notification-message-line` `dsi-notification-message-solid` |
|
|
536
|
-
| Notification Text |  |  | `dsi-notification-text-line` `dsi-notification-text-solid` |
|
|
537
552
|
| Message Notification Circle |  |  | `dsi-message-notification-circle-line` `dsi-message-notification-circle-solid` |
|
|
538
553
|
| Message Notification Square |  |  | `dsi-message-notification-square-line` `dsi-message-notification-square-solid` |
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
|
543
|
-
|
|
|
544
|
-
|
|
|
545
|
-
|
|
|
546
|
-
| Star
|
|
547
|
-
| Star
|
|
548
|
-
| Star
|
|
549
|
-
| Star
|
|
550
|
-
| Star
|
|
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` |
|
|
551
568
|
| Stars 01 |  |  | `dsi-stars-01-line` `dsi-stars-01-solid` |
|
|
552
569
|
| Stars 02 |  |  | `dsi-stars-02-line` `dsi-stars-02-solid` |
|
|
553
570
|
| Stars 03 |  |  | `dsi-stars-03-line` `dsi-stars-03-solid` |
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
|
558
|
-
|
|
|
559
|
-
|
|
|
560
|
-
|
|
|
561
|
-
|
|
|
562
|
-
| User
|
|
563
|
-
| User
|
|
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` |
|
|
564
582
|
| User Check 01 |  |  | `dsi-user-check-01-line` `dsi-user-check-01-solid` |
|
|
565
583
|
| User Check 02 |  |  | `dsi-user-check-02-line` `dsi-user-check-02-solid` |
|
|
566
|
-
| User
|
|
567
|
-
| User
|
|
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` |
|
|
568
590
|
| User Minus 01 |  |  | `dsi-user-minus-01-line` `dsi-user-minus-01-solid` |
|
|
569
591
|
| User Minus 02 |  |  | `dsi-user-minus-02-line` `dsi-user-minus-02-solid` |
|
|
570
|
-
| User
|
|
571
|
-
| User
|
|
572
|
-
| User Edit |  |  | `dsi-user-edit-line` `dsi-user-edit-solid` |
|
|
573
|
-
| User Up 01 |  |  | `dsi-user-up-01-line` `dsi-user-up-01-solid` |
|
|
574
|
-
| User Up 02 |  |  | `dsi-user-up-02-line` `dsi-user-up-02-solid` |
|
|
575
|
-
| User Down 01 |  |  | `dsi-user-down-01-line` `dsi-user-down-01-solid` |
|
|
576
|
-
| User Down 02 |  |  | `dsi-user-down-02-line` `dsi-user-down-02-solid` |
|
|
577
|
-
| User Left 01 |  |  | `dsi-user-left-01-line` `dsi-user-left-01-solid` |
|
|
578
|
-
| User Left 02 |  |  | `dsi-user-left-02-line` `dsi-user-left-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` |
|
|
579
594
|
| User Right 01 |  |  | `dsi-user-right-01-line` `dsi-user-right-01-solid` |
|
|
580
595
|
| User Right 02 |  |  | `dsi-user-right-02-line` `dsi-user-right-02-solid` |
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
|
585
|
-
|
|
|
586
|
-
| Users 01
|
|
587
|
-
| Users 02
|
|
588
|
-
| Users 03
|
|
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` |
|
|
589
604
|
| Users Check |  |  | `dsi-users-check-line` `dsi-users-check-solid` |
|
|
590
|
-
| Users
|
|
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` |
|
|
591
608
|
| Users Minus |  |  | `dsi-users-minus-line` `dsi-users-minus-solid` |
|
|
592
|
-
| Users
|
|
593
|
-
| Users Edit |  |  | `dsi-users-edit-line` `dsi-users-edit-solid` |
|
|
594
|
-
| Users Up |  |  | `dsi-users-up-line` `dsi-users-up-solid` |
|
|
595
|
-
| Users Down |  |  | `dsi-users-down-line` `dsi-users-down-solid` |
|
|
596
|
-
| Users Left |  |  | `dsi-users-left-line` `dsi-users-left-solid` |
|
|
609
|
+
| Users Plus |  |  | `dsi-users-plus-line` `dsi-users-plus-solid` |
|
|
597
610
|
| Users Right |  |  | `dsi-users-right-line` `dsi-users-right-solid` |
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
npm run generate:icons
|
|
603
|
-
```
|
|
604
|
-
|
|
605
|
-
This command will scan the `assets/` folder and automatically generate CSS classes for all SVG files.
|
|
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` |
|
|
606
615
|
|
|
607
616
|
</details>
|
|
608
617
|
|
|
@@ -909,6 +918,563 @@ _Replace `{shade}` with: `10`, `25`, `50`, `100`, `200`, `300`, `400`, `500`, `6
|
|
|
909
918
|
|
|
910
919
|
---
|
|
911
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
|
+
|
|
912
1478
|
### Utility Classes
|
|
913
1479
|
|
|
914
1480
|
```html
|
|
@@ -996,6 +1562,9 @@ MIT License
|
|
|
996
1562
|
- [Animation Icon](#animation-icon)
|
|
997
1563
|
- [Ví dụ thực tế](#ví-dụ-thực-tế)
|
|
998
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)
|
|
999
1568
|
- [Semantic Classes](#semantic-classes)
|
|
1000
1569
|
- [Màu Badge Theme](#màu-badge-theme)
|
|
1001
1570
|
- [Tiện ích kích thước](#tiện-ích-kích-thước)
|
|
@@ -1014,6 +1583,9 @@ MIT License
|
|
|
1014
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ở
|
|
1015
1584
|
- **CSS Custom Properties**: Tất cả màu được export dưới dạng CSS variables
|
|
1016
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ó
|
|
1017
1589
|
- **Theme Badge Palettes**: 12 bảng màu định sẵn cho badge và tag
|
|
1018
1590
|
- **RGB Mix Algorithm**: Tạo sắc độ màu chính xác bằng thuật toán pha trộn RGB
|
|
1019
1591
|
- **Cập nhật màu Runtime**: Thay đổi màu theme động mà không cần tải lại trang
|
|
@@ -1316,6 +1888,253 @@ Mỗi loại màu tạo ra 14 sắc độ:
|
|
|
1316
1888
|
| 25 | Mềm | +93.5% trắng |
|
|
1317
1889
|
| 10 | Sáng nhất | +97.0% trắng |
|
|
1318
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
|
+
|
|
1319
2138
|
### Semantic Classes
|
|
1320
2139
|
|
|
1321
2140
|
#### Backgrounds (Nền)
|