@bcc-code/design-tokens 3.0.8 → 3.0.9

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.
@@ -515,209 +515,207 @@
515
515
  --body-lg: var(--font-weight-regular) var(--text-md)/var(--leading-4) var(--font-archivo);
516
516
  }
517
517
 
518
- @layer base {
519
- @variant dark {
520
- --color-background-inverse-subtle-default: rgba(255, 255, 255, 0.16);
521
- --color-background-inverse-subtle-hovered: rgba(255, 255, 255, 0.24);
522
- --color-background-inverse-subtle-pressed: rgba(255, 255, 255, 0.32);
523
- --color-background-accent-neutral-subtle-default: rgba(0, 0, 0, 0);
524
- --color-blanket-default: rgba(16, 18, 20, 0.6);
525
- --color-blanket-selected: rgba(29, 122, 252, 0.08);
526
- --color-blanket-danger: rgba(227, 73, 53, 0.08);
527
- --color-interaction-hovered: rgba(255, 255, 255, 0.2);
528
- --color-interaction-pressed: rgba(255, 255, 255, 0.36);
529
- --color-text-default: var(--color-dark-neutral-900);
530
- --color-text-subtle: var(--color-dark-neutral-800);
531
- --color-text-subtlest: var(--color-dark-neutral-700);
532
- --color-text-disabled: var(--color-dark-neutral-alpha-400-a);
533
- --color-text-selected: var(--color-bcc-400);
534
- --color-text-inverse: var(--color-dark-neutral-100);
535
- --color-text-success: var(--color-green-300);
536
- --color-text-danger: var(--color-red-300);
537
- --color-text-information: var(--color-blue-300);
538
- --color-text-warning-default: var(--color-yellow-300);
539
- --color-text-warning-inverse: var(--color-dark-neutral-100);
540
- --color-text-brand-default: var(--color-bcc-400);
541
- --color-text-brand-bold: var(--color-bcc-300);
542
- --color-text-accent-gray-default: var(--color-dark-neutral-800);
543
- --color-text-accent-gray-bold: var(--color-dark-neutral-1100);
544
- --color-text-accent-blue-default: var(--color-blue-300);
545
- --color-text-accent-blue-bold: var(--color-blue-200);
546
- --color-text-accent-teal-default: var(--color-teal-300);
547
- --color-text-accent-teal-bold: var(--color-teal-200);
548
- --color-text-accent-green-default: var(--color-green-300);
549
- --color-text-accent-green-bold: var(--color-green-200);
550
- --color-text-accent-brown-default: var(--color-brown-300);
551
- --color-text-accent-brown-bold: var(--color-brown-200);
552
- --color-text-accent-yellow-default: var(--color-yellow-300);
553
- --color-text-accent-yellow-bold: var(--color-yellow-200);
554
- --color-text-accent-orange-default: var(--color-orange-300);
555
- --color-text-accent-orange-bold: var(--color-orange-200);
556
- --color-text-accent-red-default: var(--color-red-300);
557
- --color-text-accent-red-bold: var(--color-red-200);
558
- --color-text-accent-magenta-default: var(--color-magenta-300);
559
- --color-text-accent-magenta-bold: var(--color-magenta-200);
560
- --color-text-accent-purple-default: var(--color-purple-300);
561
- --color-text-accent-purple-bold: var(--color-purple-200);
562
- --color-link-default: var(--color-blue-400);
563
- --color-link-pressed: var(--color-blue-300);
564
- --color-link-visited-default: var(--color-purple-300);
565
- --color-link-visited-hover: var(--color-purple-200);
566
- --color-icon-default: var(--color-dark-neutral-1000);
567
- --color-icon-subtle: var(--color-dark-neutral-800);
568
- --color-icon-subtlest: var(--color-dark-neutral-700);
569
- --color-icon-disabled: var(--color-dark-neutral-alpha-400-a);
570
- --color-icon-selected: var(--color-bcc-400);
571
- --color-icon-inverse: var(--color-dark-neutral-100);
572
- --color-icon-success: var(--color-green-500);
573
- --color-icon-danger: var(--color-red-500);
574
- --color-icon-information: var(--color-blue-500);
575
- --color-icon-warning-default: var(--color-yellow-300);
576
- --color-icon-warning-inverse: var(--color-dark-neutral-100);
577
- --color-icon-brand-default: var(--color-bcc-400);
578
- --color-icon-brand-bold: var(--color-bcc-300);
579
- --color-icon-accent-gray-default: var(--color-dark-neutral-600);
580
- --color-icon-accent-gray-bold: var(--color-dark-neutral-700);
581
- --color-icon-accent-blue-default: var(--color-blue-500);
582
- --color-icon-accent-blue-bold: var(--color-blue-400);
583
- --color-icon-accent-teal-default: var(--color-teal-500);
584
- --color-icon-accent-teal-bold: var(--color-teal-400);
585
- --color-icon-accent-green-default: var(--color-green-500);
586
- --color-icon-accent-green-bold: var(--color-green-400);
587
- --color-icon-accent-brown-default: var(--color-brown-500);
588
- --color-icon-accent-brown-bold: var(--color-brown-400);
589
- --color-icon-accent-yellow-default: var(--color-yellow-300);
590
- --color-icon-accent-yellow-bold: var(--color-yellow-200);
591
- --color-icon-accent-orange-default: var(--color-orange-500);
592
- --color-icon-accent-orange-bold: var(--color-orange-400);
593
- --color-icon-accent-red-default: var(--color-red-600);
594
- --color-icon-accent-red-bold: var(--color-red-500);
595
- --color-icon-accent-magenta-default: var(--color-magenta-500);
596
- --color-icon-accent-magenta-bold: var(--color-magenta-400);
597
- --color-icon-accent-purple-default: var(--color-purple-500);
598
- --color-icon-accent-purple-bold: var(--color-purple-400);
599
- --color-border-default: var(--color-dark-neutral-alpha-300-a);
600
- --color-border-bold: var(--color-dark-neutral-600);
601
- --color-border-disabled: var(--color-dark-neutral-alpha-200-a);
602
- --color-border-selected: var(--color-bcc-400);
603
- --color-border-focused: var(--color-bcc-300);
604
- --color-border-inverse: var(--color-dark-neutral-0);
605
- --color-border-input: var(--color-dark-neutral-500);
606
- --color-border-success: var(--color-green-500);
607
- --color-border-information: var(--color-blue-500);
608
- --color-border-danger: var(--color-red-500);
609
- --color-border-warning: var(--color-yellow-500);
610
- --color-border-brand: var(--color-bcc-400);
611
- --color-border-accent-gray: var(--color-dark-neutral-600);
612
- --color-border-accent-blue: var(--color-blue-500);
613
- --color-border-accent-teal: var(--color-teal-500);
614
- --color-border-accent-green: var(--color-green-500);
615
- --color-border-accent-brown: var(--color-brown-500);
616
- --color-border-accent-yellow: var(--color-yellow-500);
617
- --color-border-accent-orange: var(--color-orange-500);
618
- --color-border-accent-red: var(--color-red-500);
619
- --color-border-accent-magenta: var(--color-magenta-500);
620
- --color-border-accent-purple: var(--color-purple-500);
621
- --color-background-disabled-default: var(--color-dark-neutral-alpha-100-a);
622
- --color-background-selected-default: var(--color-bcc-1000);
623
- --color-background-selected-hovered: var(--color-bcc-900);
624
- --color-background-selected-pressed: var(--color-bcc-800);
625
- --color-background-selected-bold-default: var(--color-bcc-400);
626
- --color-background-selected-bold-hovered: var(--color-bcc-300);
627
- --color-background-selected-bold-pressed: var(--color-bcc-200);
628
- --color-background-input-default: var(--color-dark-neutral-200);
629
- --color-background-input-hovered: var(--color-dark-neutral-300);
630
- --color-background-input-pressed: var(--color-dark-neutral-200);
631
- --color-background-information-default: var(--color-blue-1000);
632
- --color-background-information-hover: var(--color-blue-900);
633
- --color-background-information-pressed: var(--color-blue-800);
634
- --color-background-information-bolder-default: var(--color-blue-400);
635
- --color-background-information-bolder-hover: var(--color-blue-300);
636
- --color-background-information-bolder-pressed: var(--color-blue-200);
637
- --color-background-success-default: var(--color-green-1000);
638
- --color-background-success-hover: var(--color-green-900);
639
- --color-background-success-pressed: var(--color-green-800);
640
- --color-background-success-bolder-default: var(--color-green-400);
641
- --color-background-success-bolder-hover: var(--color-green-300);
642
- --color-background-success-bolder-pressed: var(--color-green-200);
643
- --color-background-danger-default: var(--color-red-1000);
644
- --color-background-danger-hover: var(--color-red-900);
645
- --color-background-danger-pressed: var(--color-red-800);
646
- --color-background-danger-bolder-default: var(--color-red-400);
647
- --color-background-danger-bolder-hover: var(--color-red-300);
648
- --color-background-danger-bolder-pressed: var(--color-red-200);
649
- --color-background-warning-default: var(--color-yellow-1000);
650
- --color-background-warning-hover: var(--color-yellow-900);
651
- --color-background-warning-pressed: var(--color-yellow-800);
652
- --color-background-warning-bolder-default: var(--color-yellow-400);
653
- --color-background-warning-bolder-hover: var(--color-yellow-300);
654
- --color-background-warning-bolder-pressed: var(--color-yellow-200);
655
- --color-background-brand-subtlest-default: var(--color-bcc-1000);
656
- --color-background-brand-subtlest-hover: var(--color-bcc-900);
657
- --color-background-brand-subtlest-pressed: var(--color-bcc-800);
658
- --color-background-brand-subtler-default: var(--color-bcc-900);
659
- --color-background-brand-subtler-hover: var(--color-bcc-800);
660
- --color-background-brand-subtler-pressed: var(--color-bcc-700);
661
- --color-background-brand-subtle-default: var(--color-bcc-700);
662
- --color-background-brand-subtle-hover: var(--color-bcc-600);
663
- --color-background-brand-subtle-pressed: var(--color-bcc-500);
664
- --color-background-brand-bolder-default: var(--color-bcc-400);
665
- --color-background-brand-bolder-hover: var(--color-bcc-300);
666
- --color-background-brand-bolder-pressed: var(--color-bcc-200);
667
- --color-background-accent-neutral-subtlest-default: var(--color-dark-neutral-alpha-300-a);
668
- --color-background-accent-neutral-subtlest-hover: var(--color-dark-neutral-alpha-400-a);
669
- --color-background-accent-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-200-a);
670
- --color-background-accent-neutral-subtle-hover: var(--color-dark-neutral-alpha-200-a);
671
- --color-background-accent-neutral-subtle-pressed: var(--color-dark-neutral-alpha-300-a);
672
- --color-background-accent-purple-subtlest-default: var(--color-purple-1000);
673
- --color-background-accent-purple-subtlest-hover: var(--color-purple-900);
674
- --color-background-accent-purple-subtlest-pressed: var(--color-purple-800);
675
- --color-background-accent-purple-subtler-default: var(--color-purple-900);
676
- --color-background-accent-purple-subtler-hover: var(--color-purple-800);
677
- --color-background-accent-purple-subtler-pressed: var(--color-purple-700);
678
- --color-background-accent-purple-subtle-default: var(--color-purple-700);
679
- --color-background-accent-purple-subtle-hover: var(--color-purple-600);
680
- --color-background-accent-purple-subtle-pressed: var(--color-purple-500);
681
- --color-background-accent-purple-bolder-default: var(--color-purple-400);
682
- --color-background-accent-purple-bolder-hover: var(--color-purple-300);
683
- --color-background-accent-purple-bolder-pressed: var(--color-purple-200);
684
- --color-background-accent-magenta-subtlest-default: var(--color-magenta-1000);
685
- --color-background-accent-magenta-subtlest-hover: var(--color-magenta-900);
686
- --color-background-accent-magenta-subtlest-pressed: var(--color-magenta-800);
687
- --color-background-accent-magenta-subtler-default: var(--color-magenta-900);
688
- --color-background-accent-magenta-subtler-hover: var(--color-magenta-800);
689
- --color-background-accent-magenta-subtler-pressed: var(--color-magenta-700);
690
- --color-background-accent-magenta-subtle-default: var(--color-magenta-700);
691
- --color-background-accent-magenta-subtle-hover: var(--color-magenta-600);
692
- --color-background-accent-magenta-subtle-pressed: var(--color-magenta-500);
693
- --color-background-accent-magenta-bolder-default: var(--color-magenta-400);
694
- --color-background-accent-magenta-bolder-hover: var(--color-magenta-300);
695
- --color-background-accent-magenta-bolder-pressed: var(--color-magenta-200);
696
- --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-200);
697
- --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-300);
698
- --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-400);
699
- --color-background-accent-gray-subtler-default: var(--color-dark-neutral-400);
700
- --color-background-accent-gray-subtler-hover: var(--color-dark-neutral-500);
701
- --color-background-accent-gray-subtler-pressed: var(--color-dark-neutral-600);
702
- --color-background-accent-gray-subtle-default: var(--color-dark-neutral-500);
703
- --color-background-accent-gray-subtle-hover: var(--color-dark-neutral-400);
704
- --color-background-accent-gray-subtle-pressed: var(--color-dark-neutral-300);
705
- --color-background-accent-gray-bolder-default: var(--color-dark-neutral-700);
706
- --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-900);
707
- --color-background-accent-gray-bolder-pressed: var(--color-dark-neutral-900);
708
- --color-skeleton-default: var(--color-dark-neutral-alpha-200-a);
709
- --color-skeleton-subtle: var(--color-dark-neutral-alpha-100-a);
710
- --color-elevation-surface-default: var(--color-dark-neutral-100);
711
- --color-elevation-surface-hovered: var(--color-dark-neutral-200);
712
- --color-elevation-surface-pressed: var(--color-dark-neutral-300);
713
- --color-elevation-surface-overlay-default: var(--color-dark-neutral-200);
714
- --color-elevation-surface-overlay-hovered: var(--color-dark-neutral-300);
715
- --color-elevation-surface-overlay-pressed: var(--color-dark-neutral-400);
716
- --color-elevation-surface-raised-default: var(--color-dark-neutral-200);
717
- --color-elevation-surface-raised-hovered: var(--color-dark-neutral-300);
718
- --color-elevation-surface-raised-pressed: var(--color-dark-neutral-400);
719
- --color-elevation-surface-sunken-default: var(--color-dark-neutral-0);
720
- }
518
+ .dark {
519
+ --color-background-inverse-subtle-default: rgba(255, 255, 255, 0.16);
520
+ --color-background-inverse-subtle-hovered: rgba(255, 255, 255, 0.24);
521
+ --color-background-inverse-subtle-pressed: rgba(255, 255, 255, 0.32);
522
+ --color-background-accent-neutral-subtle-default: rgba(0, 0, 0, 0);
523
+ --color-blanket-default: rgba(16, 18, 20, 0.6);
524
+ --color-blanket-selected: rgba(29, 122, 252, 0.08);
525
+ --color-blanket-danger: rgba(227, 73, 53, 0.08);
526
+ --color-interaction-hovered: rgba(255, 255, 255, 0.2);
527
+ --color-interaction-pressed: rgba(255, 255, 255, 0.36);
528
+ --color-text-default: var(--color-dark-neutral-900);
529
+ --color-text-subtle: var(--color-dark-neutral-800);
530
+ --color-text-subtlest: var(--color-dark-neutral-700);
531
+ --color-text-disabled: var(--color-dark-neutral-alpha-400-a);
532
+ --color-text-selected: var(--color-bcc-400);
533
+ --color-text-inverse: var(--color-dark-neutral-100);
534
+ --color-text-success: var(--color-green-300);
535
+ --color-text-danger: var(--color-red-300);
536
+ --color-text-information: var(--color-blue-300);
537
+ --color-text-warning-default: var(--color-yellow-300);
538
+ --color-text-warning-inverse: var(--color-dark-neutral-100);
539
+ --color-text-brand-default: var(--color-bcc-400);
540
+ --color-text-brand-bold: var(--color-bcc-300);
541
+ --color-text-accent-gray-default: var(--color-dark-neutral-800);
542
+ --color-text-accent-gray-bold: var(--color-dark-neutral-1100);
543
+ --color-text-accent-blue-default: var(--color-blue-300);
544
+ --color-text-accent-blue-bold: var(--color-blue-200);
545
+ --color-text-accent-teal-default: var(--color-teal-300);
546
+ --color-text-accent-teal-bold: var(--color-teal-200);
547
+ --color-text-accent-green-default: var(--color-green-300);
548
+ --color-text-accent-green-bold: var(--color-green-200);
549
+ --color-text-accent-brown-default: var(--color-brown-300);
550
+ --color-text-accent-brown-bold: var(--color-brown-200);
551
+ --color-text-accent-yellow-default: var(--color-yellow-300);
552
+ --color-text-accent-yellow-bold: var(--color-yellow-200);
553
+ --color-text-accent-orange-default: var(--color-orange-300);
554
+ --color-text-accent-orange-bold: var(--color-orange-200);
555
+ --color-text-accent-red-default: var(--color-red-300);
556
+ --color-text-accent-red-bold: var(--color-red-200);
557
+ --color-text-accent-magenta-default: var(--color-magenta-300);
558
+ --color-text-accent-magenta-bold: var(--color-magenta-200);
559
+ --color-text-accent-purple-default: var(--color-purple-300);
560
+ --color-text-accent-purple-bold: var(--color-purple-200);
561
+ --color-link-default: var(--color-blue-400);
562
+ --color-link-pressed: var(--color-blue-300);
563
+ --color-link-visited-default: var(--color-purple-300);
564
+ --color-link-visited-hover: var(--color-purple-200);
565
+ --color-icon-default: var(--color-dark-neutral-1000);
566
+ --color-icon-subtle: var(--color-dark-neutral-800);
567
+ --color-icon-subtlest: var(--color-dark-neutral-700);
568
+ --color-icon-disabled: var(--color-dark-neutral-alpha-400-a);
569
+ --color-icon-selected: var(--color-bcc-400);
570
+ --color-icon-inverse: var(--color-dark-neutral-100);
571
+ --color-icon-success: var(--color-green-500);
572
+ --color-icon-danger: var(--color-red-500);
573
+ --color-icon-information: var(--color-blue-500);
574
+ --color-icon-warning-default: var(--color-yellow-300);
575
+ --color-icon-warning-inverse: var(--color-dark-neutral-100);
576
+ --color-icon-brand-default: var(--color-bcc-400);
577
+ --color-icon-brand-bold: var(--color-bcc-300);
578
+ --color-icon-accent-gray-default: var(--color-dark-neutral-600);
579
+ --color-icon-accent-gray-bold: var(--color-dark-neutral-700);
580
+ --color-icon-accent-blue-default: var(--color-blue-500);
581
+ --color-icon-accent-blue-bold: var(--color-blue-400);
582
+ --color-icon-accent-teal-default: var(--color-teal-500);
583
+ --color-icon-accent-teal-bold: var(--color-teal-400);
584
+ --color-icon-accent-green-default: var(--color-green-500);
585
+ --color-icon-accent-green-bold: var(--color-green-400);
586
+ --color-icon-accent-brown-default: var(--color-brown-500);
587
+ --color-icon-accent-brown-bold: var(--color-brown-400);
588
+ --color-icon-accent-yellow-default: var(--color-yellow-300);
589
+ --color-icon-accent-yellow-bold: var(--color-yellow-200);
590
+ --color-icon-accent-orange-default: var(--color-orange-500);
591
+ --color-icon-accent-orange-bold: var(--color-orange-400);
592
+ --color-icon-accent-red-default: var(--color-red-600);
593
+ --color-icon-accent-red-bold: var(--color-red-500);
594
+ --color-icon-accent-magenta-default: var(--color-magenta-500);
595
+ --color-icon-accent-magenta-bold: var(--color-magenta-400);
596
+ --color-icon-accent-purple-default: var(--color-purple-500);
597
+ --color-icon-accent-purple-bold: var(--color-purple-400);
598
+ --color-border-default: var(--color-dark-neutral-alpha-300-a);
599
+ --color-border-bold: var(--color-dark-neutral-600);
600
+ --color-border-disabled: var(--color-dark-neutral-alpha-200-a);
601
+ --color-border-selected: var(--color-bcc-400);
602
+ --color-border-focused: var(--color-bcc-300);
603
+ --color-border-inverse: var(--color-dark-neutral-0);
604
+ --color-border-input: var(--color-dark-neutral-500);
605
+ --color-border-success: var(--color-green-500);
606
+ --color-border-information: var(--color-blue-500);
607
+ --color-border-danger: var(--color-red-500);
608
+ --color-border-warning: var(--color-yellow-500);
609
+ --color-border-brand: var(--color-bcc-400);
610
+ --color-border-accent-gray: var(--color-dark-neutral-600);
611
+ --color-border-accent-blue: var(--color-blue-500);
612
+ --color-border-accent-teal: var(--color-teal-500);
613
+ --color-border-accent-green: var(--color-green-500);
614
+ --color-border-accent-brown: var(--color-brown-500);
615
+ --color-border-accent-yellow: var(--color-yellow-500);
616
+ --color-border-accent-orange: var(--color-orange-500);
617
+ --color-border-accent-red: var(--color-red-500);
618
+ --color-border-accent-magenta: var(--color-magenta-500);
619
+ --color-border-accent-purple: var(--color-purple-500);
620
+ --color-background-disabled-default: var(--color-dark-neutral-alpha-100-a);
621
+ --color-background-selected-default: var(--color-bcc-1000);
622
+ --color-background-selected-hovered: var(--color-bcc-900);
623
+ --color-background-selected-pressed: var(--color-bcc-800);
624
+ --color-background-selected-bold-default: var(--color-bcc-400);
625
+ --color-background-selected-bold-hovered: var(--color-bcc-300);
626
+ --color-background-selected-bold-pressed: var(--color-bcc-200);
627
+ --color-background-input-default: var(--color-dark-neutral-200);
628
+ --color-background-input-hovered: var(--color-dark-neutral-300);
629
+ --color-background-input-pressed: var(--color-dark-neutral-200);
630
+ --color-background-information-default: var(--color-blue-1000);
631
+ --color-background-information-hover: var(--color-blue-900);
632
+ --color-background-information-pressed: var(--color-blue-800);
633
+ --color-background-information-bolder-default: var(--color-blue-400);
634
+ --color-background-information-bolder-hover: var(--color-blue-300);
635
+ --color-background-information-bolder-pressed: var(--color-blue-200);
636
+ --color-background-success-default: var(--color-green-1000);
637
+ --color-background-success-hover: var(--color-green-900);
638
+ --color-background-success-pressed: var(--color-green-800);
639
+ --color-background-success-bolder-default: var(--color-green-400);
640
+ --color-background-success-bolder-hover: var(--color-green-300);
641
+ --color-background-success-bolder-pressed: var(--color-green-200);
642
+ --color-background-danger-default: var(--color-red-1000);
643
+ --color-background-danger-hover: var(--color-red-900);
644
+ --color-background-danger-pressed: var(--color-red-800);
645
+ --color-background-danger-bolder-default: var(--color-red-400);
646
+ --color-background-danger-bolder-hover: var(--color-red-300);
647
+ --color-background-danger-bolder-pressed: var(--color-red-200);
648
+ --color-background-warning-default: var(--color-yellow-1000);
649
+ --color-background-warning-hover: var(--color-yellow-900);
650
+ --color-background-warning-pressed: var(--color-yellow-800);
651
+ --color-background-warning-bolder-default: var(--color-yellow-400);
652
+ --color-background-warning-bolder-hover: var(--color-yellow-300);
653
+ --color-background-warning-bolder-pressed: var(--color-yellow-200);
654
+ --color-background-brand-subtlest-default: var(--color-bcc-1000);
655
+ --color-background-brand-subtlest-hover: var(--color-bcc-900);
656
+ --color-background-brand-subtlest-pressed: var(--color-bcc-800);
657
+ --color-background-brand-subtler-default: var(--color-bcc-900);
658
+ --color-background-brand-subtler-hover: var(--color-bcc-800);
659
+ --color-background-brand-subtler-pressed: var(--color-bcc-700);
660
+ --color-background-brand-subtle-default: var(--color-bcc-700);
661
+ --color-background-brand-subtle-hover: var(--color-bcc-600);
662
+ --color-background-brand-subtle-pressed: var(--color-bcc-500);
663
+ --color-background-brand-bolder-default: var(--color-bcc-400);
664
+ --color-background-brand-bolder-hover: var(--color-bcc-300);
665
+ --color-background-brand-bolder-pressed: var(--color-bcc-200);
666
+ --color-background-accent-neutral-subtlest-default: var(--color-dark-neutral-alpha-300-a);
667
+ --color-background-accent-neutral-subtlest-hover: var(--color-dark-neutral-alpha-400-a);
668
+ --color-background-accent-neutral-subtlest-pressed: var(--color-dark-neutral-alpha-200-a);
669
+ --color-background-accent-neutral-subtle-hover: var(--color-dark-neutral-alpha-200-a);
670
+ --color-background-accent-neutral-subtle-pressed: var(--color-dark-neutral-alpha-300-a);
671
+ --color-background-accent-purple-subtlest-default: var(--color-purple-1000);
672
+ --color-background-accent-purple-subtlest-hover: var(--color-purple-900);
673
+ --color-background-accent-purple-subtlest-pressed: var(--color-purple-800);
674
+ --color-background-accent-purple-subtler-default: var(--color-purple-900);
675
+ --color-background-accent-purple-subtler-hover: var(--color-purple-800);
676
+ --color-background-accent-purple-subtler-pressed: var(--color-purple-700);
677
+ --color-background-accent-purple-subtle-default: var(--color-purple-700);
678
+ --color-background-accent-purple-subtle-hover: var(--color-purple-600);
679
+ --color-background-accent-purple-subtle-pressed: var(--color-purple-500);
680
+ --color-background-accent-purple-bolder-default: var(--color-purple-400);
681
+ --color-background-accent-purple-bolder-hover: var(--color-purple-300);
682
+ --color-background-accent-purple-bolder-pressed: var(--color-purple-200);
683
+ --color-background-accent-magenta-subtlest-default: var(--color-magenta-1000);
684
+ --color-background-accent-magenta-subtlest-hover: var(--color-magenta-900);
685
+ --color-background-accent-magenta-subtlest-pressed: var(--color-magenta-800);
686
+ --color-background-accent-magenta-subtler-default: var(--color-magenta-900);
687
+ --color-background-accent-magenta-subtler-hover: var(--color-magenta-800);
688
+ --color-background-accent-magenta-subtler-pressed: var(--color-magenta-700);
689
+ --color-background-accent-magenta-subtle-default: var(--color-magenta-700);
690
+ --color-background-accent-magenta-subtle-hover: var(--color-magenta-600);
691
+ --color-background-accent-magenta-subtle-pressed: var(--color-magenta-500);
692
+ --color-background-accent-magenta-bolder-default: var(--color-magenta-400);
693
+ --color-background-accent-magenta-bolder-hover: var(--color-magenta-300);
694
+ --color-background-accent-magenta-bolder-pressed: var(--color-magenta-200);
695
+ --color-background-accent-gray-subtlest-default: var(--color-dark-neutral-200);
696
+ --color-background-accent-gray-subtlest-hover: var(--color-dark-neutral-300);
697
+ --color-background-accent-gray-subtlest-pressed: var(--color-dark-neutral-400);
698
+ --color-background-accent-gray-subtler-default: var(--color-dark-neutral-400);
699
+ --color-background-accent-gray-subtler-hover: var(--color-dark-neutral-500);
700
+ --color-background-accent-gray-subtler-pressed: var(--color-dark-neutral-600);
701
+ --color-background-accent-gray-subtle-default: var(--color-dark-neutral-500);
702
+ --color-background-accent-gray-subtle-hover: var(--color-dark-neutral-400);
703
+ --color-background-accent-gray-subtle-pressed: var(--color-dark-neutral-300);
704
+ --color-background-accent-gray-bolder-default: var(--color-dark-neutral-700);
705
+ --color-background-accent-gray-bolder-hover: var(--color-dark-neutral-900);
706
+ --color-background-accent-gray-bolder-pressed: var(--color-dark-neutral-900);
707
+ --color-skeleton-default: var(--color-dark-neutral-alpha-200-a);
708
+ --color-skeleton-subtle: var(--color-dark-neutral-alpha-100-a);
709
+ --color-elevation-surface-default: var(--color-dark-neutral-100);
710
+ --color-elevation-surface-hovered: var(--color-dark-neutral-200);
711
+ --color-elevation-surface-pressed: var(--color-dark-neutral-300);
712
+ --color-elevation-surface-overlay-default: var(--color-dark-neutral-200);
713
+ --color-elevation-surface-overlay-hovered: var(--color-dark-neutral-300);
714
+ --color-elevation-surface-overlay-pressed: var(--color-dark-neutral-400);
715
+ --color-elevation-surface-raised-default: var(--color-dark-neutral-200);
716
+ --color-elevation-surface-raised-hovered: var(--color-dark-neutral-300);
717
+ --color-elevation-surface-raised-pressed: var(--color-dark-neutral-400);
718
+ --color-elevation-surface-sunken-default: var(--color-dark-neutral-0);
721
719
  }
722
720
 
723
721
  @utility text-* {
@@ -776,6 +774,46 @@
776
774
  padding-left: var(--spacing-0);
777
775
  }
778
776
 
777
+ @utility m-0 {
778
+ margin: var(--spacing-0);
779
+ }
780
+
781
+ @utility mx-0 {
782
+ margin-inline: var(--spacing-0);
783
+ }
784
+
785
+ @utility my-0 {
786
+ margin-block: var(--spacing-0);
787
+ }
788
+
789
+ @utility mt-0 {
790
+ margin-top: var(--spacing-0);
791
+ }
792
+
793
+ @utility mr-0 {
794
+ margin-right: var(--spacing-0);
795
+ }
796
+
797
+ @utility mb-0 {
798
+ margin-bottom: var(--spacing-0);
799
+ }
800
+
801
+ @utility ml-0 {
802
+ margin-left: var(--spacing-0);
803
+ }
804
+
805
+ @utility gap-0 {
806
+ gap: var(--spacing-0);
807
+ }
808
+
809
+ @utility gap-x-0 {
810
+ column-gap: var(--spacing-0);
811
+ }
812
+
813
+ @utility gap-y-0 {
814
+ row-gap: var(--spacing-0);
815
+ }
816
+
779
817
  @utility p-25 {
780
818
  padding: var(--spacing-25);
781
819
  }
@@ -804,6 +842,46 @@
804
842
  padding-left: var(--spacing-25);
805
843
  }
806
844
 
845
+ @utility m-25 {
846
+ margin: var(--spacing-25);
847
+ }
848
+
849
+ @utility mx-25 {
850
+ margin-inline: var(--spacing-25);
851
+ }
852
+
853
+ @utility my-25 {
854
+ margin-block: var(--spacing-25);
855
+ }
856
+
857
+ @utility mt-25 {
858
+ margin-top: var(--spacing-25);
859
+ }
860
+
861
+ @utility mr-25 {
862
+ margin-right: var(--spacing-25);
863
+ }
864
+
865
+ @utility mb-25 {
866
+ margin-bottom: var(--spacing-25);
867
+ }
868
+
869
+ @utility ml-25 {
870
+ margin-left: var(--spacing-25);
871
+ }
872
+
873
+ @utility gap-25 {
874
+ gap: var(--spacing-25);
875
+ }
876
+
877
+ @utility gap-x-25 {
878
+ column-gap: var(--spacing-25);
879
+ }
880
+
881
+ @utility gap-y-25 {
882
+ row-gap: var(--spacing-25);
883
+ }
884
+
807
885
  @utility p-50 {
808
886
  padding: var(--spacing-50);
809
887
  }
@@ -832,6 +910,46 @@
832
910
  padding-left: var(--spacing-50);
833
911
  }
834
912
 
913
+ @utility m-50 {
914
+ margin: var(--spacing-50);
915
+ }
916
+
917
+ @utility mx-50 {
918
+ margin-inline: var(--spacing-50);
919
+ }
920
+
921
+ @utility my-50 {
922
+ margin-block: var(--spacing-50);
923
+ }
924
+
925
+ @utility mt-50 {
926
+ margin-top: var(--spacing-50);
927
+ }
928
+
929
+ @utility mr-50 {
930
+ margin-right: var(--spacing-50);
931
+ }
932
+
933
+ @utility mb-50 {
934
+ margin-bottom: var(--spacing-50);
935
+ }
936
+
937
+ @utility ml-50 {
938
+ margin-left: var(--spacing-50);
939
+ }
940
+
941
+ @utility gap-50 {
942
+ gap: var(--spacing-50);
943
+ }
944
+
945
+ @utility gap-x-50 {
946
+ column-gap: var(--spacing-50);
947
+ }
948
+
949
+ @utility gap-y-50 {
950
+ row-gap: var(--spacing-50);
951
+ }
952
+
835
953
  @utility p-75 {
836
954
  padding: var(--spacing-75);
837
955
  }
@@ -860,6 +978,46 @@
860
978
  padding-left: var(--spacing-75);
861
979
  }
862
980
 
981
+ @utility m-75 {
982
+ margin: var(--spacing-75);
983
+ }
984
+
985
+ @utility mx-75 {
986
+ margin-inline: var(--spacing-75);
987
+ }
988
+
989
+ @utility my-75 {
990
+ margin-block: var(--spacing-75);
991
+ }
992
+
993
+ @utility mt-75 {
994
+ margin-top: var(--spacing-75);
995
+ }
996
+
997
+ @utility mr-75 {
998
+ margin-right: var(--spacing-75);
999
+ }
1000
+
1001
+ @utility mb-75 {
1002
+ margin-bottom: var(--spacing-75);
1003
+ }
1004
+
1005
+ @utility ml-75 {
1006
+ margin-left: var(--spacing-75);
1007
+ }
1008
+
1009
+ @utility gap-75 {
1010
+ gap: var(--spacing-75);
1011
+ }
1012
+
1013
+ @utility gap-x-75 {
1014
+ column-gap: var(--spacing-75);
1015
+ }
1016
+
1017
+ @utility gap-y-75 {
1018
+ row-gap: var(--spacing-75);
1019
+ }
1020
+
863
1021
  @utility p-100 {
864
1022
  padding: var(--spacing-100);
865
1023
  }
@@ -888,6 +1046,46 @@
888
1046
  padding-left: var(--spacing-100);
889
1047
  }
890
1048
 
1049
+ @utility m-100 {
1050
+ margin: var(--spacing-100);
1051
+ }
1052
+
1053
+ @utility mx-100 {
1054
+ margin-inline: var(--spacing-100);
1055
+ }
1056
+
1057
+ @utility my-100 {
1058
+ margin-block: var(--spacing-100);
1059
+ }
1060
+
1061
+ @utility mt-100 {
1062
+ margin-top: var(--spacing-100);
1063
+ }
1064
+
1065
+ @utility mr-100 {
1066
+ margin-right: var(--spacing-100);
1067
+ }
1068
+
1069
+ @utility mb-100 {
1070
+ margin-bottom: var(--spacing-100);
1071
+ }
1072
+
1073
+ @utility ml-100 {
1074
+ margin-left: var(--spacing-100);
1075
+ }
1076
+
1077
+ @utility gap-100 {
1078
+ gap: var(--spacing-100);
1079
+ }
1080
+
1081
+ @utility gap-x-100 {
1082
+ column-gap: var(--spacing-100);
1083
+ }
1084
+
1085
+ @utility gap-y-100 {
1086
+ row-gap: var(--spacing-100);
1087
+ }
1088
+
891
1089
  @utility p-150 {
892
1090
  padding: var(--spacing-150);
893
1091
  }
@@ -916,6 +1114,46 @@
916
1114
  padding-left: var(--spacing-150);
917
1115
  }
918
1116
 
1117
+ @utility m-150 {
1118
+ margin: var(--spacing-150);
1119
+ }
1120
+
1121
+ @utility mx-150 {
1122
+ margin-inline: var(--spacing-150);
1123
+ }
1124
+
1125
+ @utility my-150 {
1126
+ margin-block: var(--spacing-150);
1127
+ }
1128
+
1129
+ @utility mt-150 {
1130
+ margin-top: var(--spacing-150);
1131
+ }
1132
+
1133
+ @utility mr-150 {
1134
+ margin-right: var(--spacing-150);
1135
+ }
1136
+
1137
+ @utility mb-150 {
1138
+ margin-bottom: var(--spacing-150);
1139
+ }
1140
+
1141
+ @utility ml-150 {
1142
+ margin-left: var(--spacing-150);
1143
+ }
1144
+
1145
+ @utility gap-150 {
1146
+ gap: var(--spacing-150);
1147
+ }
1148
+
1149
+ @utility gap-x-150 {
1150
+ column-gap: var(--spacing-150);
1151
+ }
1152
+
1153
+ @utility gap-y-150 {
1154
+ row-gap: var(--spacing-150);
1155
+ }
1156
+
919
1157
  @utility p-200 {
920
1158
  padding: var(--spacing-200);
921
1159
  }
@@ -944,20 +1182,60 @@
944
1182
  padding-left: var(--spacing-200);
945
1183
  }
946
1184
 
947
- @utility p-250 {
948
- padding: var(--spacing-250);
1185
+ @utility m-200 {
1186
+ margin: var(--spacing-200);
949
1187
  }
950
1188
 
951
- @utility px-250 {
952
- padding-inline: var(--spacing-250);
1189
+ @utility mx-200 {
1190
+ margin-inline: var(--spacing-200);
953
1191
  }
954
1192
 
955
- @utility py-250 {
956
- padding-block: var(--spacing-250);
1193
+ @utility my-200 {
1194
+ margin-block: var(--spacing-200);
957
1195
  }
958
1196
 
959
- @utility pt-250 {
960
- padding-top: var(--spacing-250);
1197
+ @utility mt-200 {
1198
+ margin-top: var(--spacing-200);
1199
+ }
1200
+
1201
+ @utility mr-200 {
1202
+ margin-right: var(--spacing-200);
1203
+ }
1204
+
1205
+ @utility mb-200 {
1206
+ margin-bottom: var(--spacing-200);
1207
+ }
1208
+
1209
+ @utility ml-200 {
1210
+ margin-left: var(--spacing-200);
1211
+ }
1212
+
1213
+ @utility gap-200 {
1214
+ gap: var(--spacing-200);
1215
+ }
1216
+
1217
+ @utility gap-x-200 {
1218
+ column-gap: var(--spacing-200);
1219
+ }
1220
+
1221
+ @utility gap-y-200 {
1222
+ row-gap: var(--spacing-200);
1223
+ }
1224
+
1225
+ @utility p-250 {
1226
+ padding: var(--spacing-250);
1227
+ }
1228
+
1229
+ @utility px-250 {
1230
+ padding-inline: var(--spacing-250);
1231
+ }
1232
+
1233
+ @utility py-250 {
1234
+ padding-block: var(--spacing-250);
1235
+ }
1236
+
1237
+ @utility pt-250 {
1238
+ padding-top: var(--spacing-250);
961
1239
  }
962
1240
 
963
1241
  @utility pr-250 {
@@ -972,6 +1250,46 @@
972
1250
  padding-left: var(--spacing-250);
973
1251
  }
974
1252
 
1253
+ @utility m-250 {
1254
+ margin: var(--spacing-250);
1255
+ }
1256
+
1257
+ @utility mx-250 {
1258
+ margin-inline: var(--spacing-250);
1259
+ }
1260
+
1261
+ @utility my-250 {
1262
+ margin-block: var(--spacing-250);
1263
+ }
1264
+
1265
+ @utility mt-250 {
1266
+ margin-top: var(--spacing-250);
1267
+ }
1268
+
1269
+ @utility mr-250 {
1270
+ margin-right: var(--spacing-250);
1271
+ }
1272
+
1273
+ @utility mb-250 {
1274
+ margin-bottom: var(--spacing-250);
1275
+ }
1276
+
1277
+ @utility ml-250 {
1278
+ margin-left: var(--spacing-250);
1279
+ }
1280
+
1281
+ @utility gap-250 {
1282
+ gap: var(--spacing-250);
1283
+ }
1284
+
1285
+ @utility gap-x-250 {
1286
+ column-gap: var(--spacing-250);
1287
+ }
1288
+
1289
+ @utility gap-y-250 {
1290
+ row-gap: var(--spacing-250);
1291
+ }
1292
+
975
1293
  @utility p-300 {
976
1294
  padding: var(--spacing-300);
977
1295
  }
@@ -1000,6 +1318,46 @@
1000
1318
  padding-left: var(--spacing-300);
1001
1319
  }
1002
1320
 
1321
+ @utility m-300 {
1322
+ margin: var(--spacing-300);
1323
+ }
1324
+
1325
+ @utility mx-300 {
1326
+ margin-inline: var(--spacing-300);
1327
+ }
1328
+
1329
+ @utility my-300 {
1330
+ margin-block: var(--spacing-300);
1331
+ }
1332
+
1333
+ @utility mt-300 {
1334
+ margin-top: var(--spacing-300);
1335
+ }
1336
+
1337
+ @utility mr-300 {
1338
+ margin-right: var(--spacing-300);
1339
+ }
1340
+
1341
+ @utility mb-300 {
1342
+ margin-bottom: var(--spacing-300);
1343
+ }
1344
+
1345
+ @utility ml-300 {
1346
+ margin-left: var(--spacing-300);
1347
+ }
1348
+
1349
+ @utility gap-300 {
1350
+ gap: var(--spacing-300);
1351
+ }
1352
+
1353
+ @utility gap-x-300 {
1354
+ column-gap: var(--spacing-300);
1355
+ }
1356
+
1357
+ @utility gap-y-300 {
1358
+ row-gap: var(--spacing-300);
1359
+ }
1360
+
1003
1361
  @utility p-400 {
1004
1362
  padding: var(--spacing-400);
1005
1363
  }
@@ -1028,6 +1386,46 @@
1028
1386
  padding-left: var(--spacing-400);
1029
1387
  }
1030
1388
 
1389
+ @utility m-400 {
1390
+ margin: var(--spacing-400);
1391
+ }
1392
+
1393
+ @utility mx-400 {
1394
+ margin-inline: var(--spacing-400);
1395
+ }
1396
+
1397
+ @utility my-400 {
1398
+ margin-block: var(--spacing-400);
1399
+ }
1400
+
1401
+ @utility mt-400 {
1402
+ margin-top: var(--spacing-400);
1403
+ }
1404
+
1405
+ @utility mr-400 {
1406
+ margin-right: var(--spacing-400);
1407
+ }
1408
+
1409
+ @utility mb-400 {
1410
+ margin-bottom: var(--spacing-400);
1411
+ }
1412
+
1413
+ @utility ml-400 {
1414
+ margin-left: var(--spacing-400);
1415
+ }
1416
+
1417
+ @utility gap-400 {
1418
+ gap: var(--spacing-400);
1419
+ }
1420
+
1421
+ @utility gap-x-400 {
1422
+ column-gap: var(--spacing-400);
1423
+ }
1424
+
1425
+ @utility gap-y-400 {
1426
+ row-gap: var(--spacing-400);
1427
+ }
1428
+
1031
1429
  @utility p-500 {
1032
1430
  padding: var(--spacing-500);
1033
1431
  }
@@ -1056,6 +1454,46 @@
1056
1454
  padding-left: var(--spacing-500);
1057
1455
  }
1058
1456
 
1457
+ @utility m-500 {
1458
+ margin: var(--spacing-500);
1459
+ }
1460
+
1461
+ @utility mx-500 {
1462
+ margin-inline: var(--spacing-500);
1463
+ }
1464
+
1465
+ @utility my-500 {
1466
+ margin-block: var(--spacing-500);
1467
+ }
1468
+
1469
+ @utility mt-500 {
1470
+ margin-top: var(--spacing-500);
1471
+ }
1472
+
1473
+ @utility mr-500 {
1474
+ margin-right: var(--spacing-500);
1475
+ }
1476
+
1477
+ @utility mb-500 {
1478
+ margin-bottom: var(--spacing-500);
1479
+ }
1480
+
1481
+ @utility ml-500 {
1482
+ margin-left: var(--spacing-500);
1483
+ }
1484
+
1485
+ @utility gap-500 {
1486
+ gap: var(--spacing-500);
1487
+ }
1488
+
1489
+ @utility gap-x-500 {
1490
+ column-gap: var(--spacing-500);
1491
+ }
1492
+
1493
+ @utility gap-y-500 {
1494
+ row-gap: var(--spacing-500);
1495
+ }
1496
+
1059
1497
  @utility p-600 {
1060
1498
  padding: var(--spacing-600);
1061
1499
  }
@@ -1084,6 +1522,46 @@
1084
1522
  padding-left: var(--spacing-600);
1085
1523
  }
1086
1524
 
1525
+ @utility m-600 {
1526
+ margin: var(--spacing-600);
1527
+ }
1528
+
1529
+ @utility mx-600 {
1530
+ margin-inline: var(--spacing-600);
1531
+ }
1532
+
1533
+ @utility my-600 {
1534
+ margin-block: var(--spacing-600);
1535
+ }
1536
+
1537
+ @utility mt-600 {
1538
+ margin-top: var(--spacing-600);
1539
+ }
1540
+
1541
+ @utility mr-600 {
1542
+ margin-right: var(--spacing-600);
1543
+ }
1544
+
1545
+ @utility mb-600 {
1546
+ margin-bottom: var(--spacing-600);
1547
+ }
1548
+
1549
+ @utility ml-600 {
1550
+ margin-left: var(--spacing-600);
1551
+ }
1552
+
1553
+ @utility gap-600 {
1554
+ gap: var(--spacing-600);
1555
+ }
1556
+
1557
+ @utility gap-x-600 {
1558
+ column-gap: var(--spacing-600);
1559
+ }
1560
+
1561
+ @utility gap-y-600 {
1562
+ row-gap: var(--spacing-600);
1563
+ }
1564
+
1087
1565
  @utility p-800 {
1088
1566
  padding: var(--spacing-800);
1089
1567
  }
@@ -1112,396 +1590,72 @@
1112
1590
  padding-left: var(--spacing-800);
1113
1591
  }
1114
1592
 
1115
- @utility p-1000 {
1116
- padding: var(--spacing-1000);
1593
+ @utility m-800 {
1594
+ margin: var(--spacing-800);
1117
1595
  }
1118
1596
 
1119
- @utility px-1000 {
1120
- padding-inline: var(--spacing-1000);
1597
+ @utility mx-800 {
1598
+ margin-inline: var(--spacing-800);
1121
1599
  }
1122
1600
 
1123
- @utility py-1000 {
1124
- padding-block: var(--spacing-1000);
1601
+ @utility my-800 {
1602
+ margin-block: var(--spacing-800);
1125
1603
  }
1126
1604
 
1127
- @utility pt-1000 {
1128
- padding-top: var(--spacing-1000);
1605
+ @utility mt-800 {
1606
+ margin-top: var(--spacing-800);
1129
1607
  }
1130
1608
 
1131
- @utility pr-1000 {
1132
- padding-right: var(--spacing-1000);
1133
- }
1134
-
1135
- @utility pb-1000 {
1136
- padding-bottom: var(--spacing-1000);
1137
- }
1138
-
1139
- @utility pl-1000 {
1140
- padding-left: var(--spacing-1000);
1141
- }
1142
-
1143
- @utility m-0 {
1144
- margin: var(--spacing-0);
1145
- }
1146
-
1147
- @utility mx-0 {
1148
- margin-inline: var(--spacing-0);
1149
- }
1150
-
1151
- @utility my-0 {
1152
- margin-block: var(--spacing-0);
1153
- }
1154
-
1155
- @utility mt-0 {
1156
- margin-top: var(--spacing-0);
1157
- }
1158
-
1159
- @utility mr-0 {
1160
- margin-right: var(--spacing-0);
1161
- }
1162
-
1163
- @utility mb-0 {
1164
- margin-bottom: var(--spacing-0);
1165
- }
1166
-
1167
- @utility ml-0 {
1168
- margin-left: var(--spacing-0);
1169
- }
1170
-
1171
- @utility m-25 {
1172
- margin: var(--spacing-25);
1173
- }
1174
-
1175
- @utility mx-25 {
1176
- margin-inline: var(--spacing-25);
1177
- }
1178
-
1179
- @utility my-25 {
1180
- margin-block: var(--spacing-25);
1181
- }
1182
-
1183
- @utility mt-25 {
1184
- margin-top: var(--spacing-25);
1185
- }
1186
-
1187
- @utility mr-25 {
1188
- margin-right: var(--spacing-25);
1189
- }
1190
-
1191
- @utility mb-25 {
1192
- margin-bottom: var(--spacing-25);
1193
- }
1194
-
1195
- @utility ml-25 {
1196
- margin-left: var(--spacing-25);
1197
- }
1198
-
1199
- @utility m-50 {
1200
- margin: var(--spacing-50);
1201
- }
1202
-
1203
- @utility mx-50 {
1204
- margin-inline: var(--spacing-50);
1205
- }
1206
-
1207
- @utility my-50 {
1208
- margin-block: var(--spacing-50);
1209
- }
1210
-
1211
- @utility mt-50 {
1212
- margin-top: var(--spacing-50);
1213
- }
1214
-
1215
- @utility mr-50 {
1216
- margin-right: var(--spacing-50);
1217
- }
1218
-
1219
- @utility mb-50 {
1220
- margin-bottom: var(--spacing-50);
1221
- }
1222
-
1223
- @utility ml-50 {
1224
- margin-left: var(--spacing-50);
1225
- }
1226
-
1227
- @utility m-75 {
1228
- margin: var(--spacing-75);
1229
- }
1230
-
1231
- @utility mx-75 {
1232
- margin-inline: var(--spacing-75);
1233
- }
1234
-
1235
- @utility my-75 {
1236
- margin-block: var(--spacing-75);
1237
- }
1238
-
1239
- @utility mt-75 {
1240
- margin-top: var(--spacing-75);
1241
- }
1242
-
1243
- @utility mr-75 {
1244
- margin-right: var(--spacing-75);
1245
- }
1246
-
1247
- @utility mb-75 {
1248
- margin-bottom: var(--spacing-75);
1249
- }
1250
-
1251
- @utility ml-75 {
1252
- margin-left: var(--spacing-75);
1253
- }
1254
-
1255
- @utility m-100 {
1256
- margin: var(--spacing-100);
1257
- }
1258
-
1259
- @utility mx-100 {
1260
- margin-inline: var(--spacing-100);
1261
- }
1262
-
1263
- @utility my-100 {
1264
- margin-block: var(--spacing-100);
1265
- }
1266
-
1267
- @utility mt-100 {
1268
- margin-top: var(--spacing-100);
1269
- }
1270
-
1271
- @utility mr-100 {
1272
- margin-right: var(--spacing-100);
1273
- }
1274
-
1275
- @utility mb-100 {
1276
- margin-bottom: var(--spacing-100);
1277
- }
1278
-
1279
- @utility ml-100 {
1280
- margin-left: var(--spacing-100);
1281
- }
1282
-
1283
- @utility m-150 {
1284
- margin: var(--spacing-150);
1285
- }
1286
-
1287
- @utility mx-150 {
1288
- margin-inline: var(--spacing-150);
1289
- }
1290
-
1291
- @utility my-150 {
1292
- margin-block: var(--spacing-150);
1293
- }
1294
-
1295
- @utility mt-150 {
1296
- margin-top: var(--spacing-150);
1297
- }
1298
-
1299
- @utility mr-150 {
1300
- margin-right: var(--spacing-150);
1301
- }
1302
-
1303
- @utility mb-150 {
1304
- margin-bottom: var(--spacing-150);
1305
- }
1306
-
1307
- @utility ml-150 {
1308
- margin-left: var(--spacing-150);
1309
- }
1310
-
1311
- @utility m-200 {
1312
- margin: var(--spacing-200);
1313
- }
1314
-
1315
- @utility mx-200 {
1316
- margin-inline: var(--spacing-200);
1317
- }
1318
-
1319
- @utility my-200 {
1320
- margin-block: var(--spacing-200);
1321
- }
1322
-
1323
- @utility mt-200 {
1324
- margin-top: var(--spacing-200);
1325
- }
1326
-
1327
- @utility mr-200 {
1328
- margin-right: var(--spacing-200);
1329
- }
1330
-
1331
- @utility mb-200 {
1332
- margin-bottom: var(--spacing-200);
1333
- }
1334
-
1335
- @utility ml-200 {
1336
- margin-left: var(--spacing-200);
1337
- }
1338
-
1339
- @utility m-250 {
1340
- margin: var(--spacing-250);
1341
- }
1342
-
1343
- @utility mx-250 {
1344
- margin-inline: var(--spacing-250);
1345
- }
1346
-
1347
- @utility my-250 {
1348
- margin-block: var(--spacing-250);
1349
- }
1350
-
1351
- @utility mt-250 {
1352
- margin-top: var(--spacing-250);
1353
- }
1354
-
1355
- @utility mr-250 {
1356
- margin-right: var(--spacing-250);
1357
- }
1358
-
1359
- @utility mb-250 {
1360
- margin-bottom: var(--spacing-250);
1361
- }
1362
-
1363
- @utility ml-250 {
1364
- margin-left: var(--spacing-250);
1365
- }
1366
-
1367
- @utility m-300 {
1368
- margin: var(--spacing-300);
1369
- }
1370
-
1371
- @utility mx-300 {
1372
- margin-inline: var(--spacing-300);
1373
- }
1374
-
1375
- @utility my-300 {
1376
- margin-block: var(--spacing-300);
1377
- }
1378
-
1379
- @utility mt-300 {
1380
- margin-top: var(--spacing-300);
1381
- }
1382
-
1383
- @utility mr-300 {
1384
- margin-right: var(--spacing-300);
1385
- }
1386
-
1387
- @utility mb-300 {
1388
- margin-bottom: var(--spacing-300);
1389
- }
1390
-
1391
- @utility ml-300 {
1392
- margin-left: var(--spacing-300);
1393
- }
1394
-
1395
- @utility m-400 {
1396
- margin: var(--spacing-400);
1397
- }
1398
-
1399
- @utility mx-400 {
1400
- margin-inline: var(--spacing-400);
1401
- }
1402
-
1403
- @utility my-400 {
1404
- margin-block: var(--spacing-400);
1405
- }
1406
-
1407
- @utility mt-400 {
1408
- margin-top: var(--spacing-400);
1409
- }
1410
-
1411
- @utility mr-400 {
1412
- margin-right: var(--spacing-400);
1413
- }
1414
-
1415
- @utility mb-400 {
1416
- margin-bottom: var(--spacing-400);
1417
- }
1418
-
1419
- @utility ml-400 {
1420
- margin-left: var(--spacing-400);
1421
- }
1422
-
1423
- @utility m-500 {
1424
- margin: var(--spacing-500);
1425
- }
1426
-
1427
- @utility mx-500 {
1428
- margin-inline: var(--spacing-500);
1429
- }
1430
-
1431
- @utility my-500 {
1432
- margin-block: var(--spacing-500);
1433
- }
1434
-
1435
- @utility mt-500 {
1436
- margin-top: var(--spacing-500);
1437
- }
1438
-
1439
- @utility mr-500 {
1440
- margin-right: var(--spacing-500);
1441
- }
1442
-
1443
- @utility mb-500 {
1444
- margin-bottom: var(--spacing-500);
1445
- }
1446
-
1447
- @utility ml-500 {
1448
- margin-left: var(--spacing-500);
1449
- }
1450
-
1451
- @utility m-600 {
1452
- margin: var(--spacing-600);
1453
- }
1454
-
1455
- @utility mx-600 {
1456
- margin-inline: var(--spacing-600);
1609
+ @utility mr-800 {
1610
+ margin-right: var(--spacing-800);
1457
1611
  }
1458
1612
 
1459
- @utility my-600 {
1460
- margin-block: var(--spacing-600);
1613
+ @utility mb-800 {
1614
+ margin-bottom: var(--spacing-800);
1461
1615
  }
1462
1616
 
1463
- @utility mt-600 {
1464
- margin-top: var(--spacing-600);
1617
+ @utility ml-800 {
1618
+ margin-left: var(--spacing-800);
1465
1619
  }
1466
1620
 
1467
- @utility mr-600 {
1468
- margin-right: var(--spacing-600);
1621
+ @utility gap-800 {
1622
+ gap: var(--spacing-800);
1469
1623
  }
1470
1624
 
1471
- @utility mb-600 {
1472
- margin-bottom: var(--spacing-600);
1625
+ @utility gap-x-800 {
1626
+ column-gap: var(--spacing-800);
1473
1627
  }
1474
1628
 
1475
- @utility ml-600 {
1476
- margin-left: var(--spacing-600);
1629
+ @utility gap-y-800 {
1630
+ row-gap: var(--spacing-800);
1477
1631
  }
1478
1632
 
1479
- @utility m-800 {
1480
- margin: var(--spacing-800);
1633
+ @utility p-1000 {
1634
+ padding: var(--spacing-1000);
1481
1635
  }
1482
1636
 
1483
- @utility mx-800 {
1484
- margin-inline: var(--spacing-800);
1637
+ @utility px-1000 {
1638
+ padding-inline: var(--spacing-1000);
1485
1639
  }
1486
1640
 
1487
- @utility my-800 {
1488
- margin-block: var(--spacing-800);
1641
+ @utility py-1000 {
1642
+ padding-block: var(--spacing-1000);
1489
1643
  }
1490
1644
 
1491
- @utility mt-800 {
1492
- margin-top: var(--spacing-800);
1645
+ @utility pt-1000 {
1646
+ padding-top: var(--spacing-1000);
1493
1647
  }
1494
1648
 
1495
- @utility mr-800 {
1496
- margin-right: var(--spacing-800);
1649
+ @utility pr-1000 {
1650
+ padding-right: var(--spacing-1000);
1497
1651
  }
1498
1652
 
1499
- @utility mb-800 {
1500
- margin-bottom: var(--spacing-800);
1653
+ @utility pb-1000 {
1654
+ padding-bottom: var(--spacing-1000);
1501
1655
  }
1502
1656
 
1503
- @utility ml-800 {
1504
- margin-left: var(--spacing-800);
1657
+ @utility pl-1000 {
1658
+ padding-left: var(--spacing-1000);
1505
1659
  }
1506
1660
 
1507
1661
  @utility m-1000 {
@@ -1532,162 +1686,6 @@
1532
1686
  margin-left: var(--spacing-1000);
1533
1687
  }
1534
1688
 
1535
- @utility gap-0 {
1536
- gap: var(--spacing-0);
1537
- }
1538
-
1539
- @utility gap-x-0 {
1540
- column-gap: var(--spacing-0);
1541
- }
1542
-
1543
- @utility gap-y-0 {
1544
- row-gap: var(--spacing-0);
1545
- }
1546
-
1547
- @utility gap-25 {
1548
- gap: var(--spacing-25);
1549
- }
1550
-
1551
- @utility gap-x-25 {
1552
- column-gap: var(--spacing-25);
1553
- }
1554
-
1555
- @utility gap-y-25 {
1556
- row-gap: var(--spacing-25);
1557
- }
1558
-
1559
- @utility gap-50 {
1560
- gap: var(--spacing-50);
1561
- }
1562
-
1563
- @utility gap-x-50 {
1564
- column-gap: var(--spacing-50);
1565
- }
1566
-
1567
- @utility gap-y-50 {
1568
- row-gap: var(--spacing-50);
1569
- }
1570
-
1571
- @utility gap-75 {
1572
- gap: var(--spacing-75);
1573
- }
1574
-
1575
- @utility gap-x-75 {
1576
- column-gap: var(--spacing-75);
1577
- }
1578
-
1579
- @utility gap-y-75 {
1580
- row-gap: var(--spacing-75);
1581
- }
1582
-
1583
- @utility gap-100 {
1584
- gap: var(--spacing-100);
1585
- }
1586
-
1587
- @utility gap-x-100 {
1588
- column-gap: var(--spacing-100);
1589
- }
1590
-
1591
- @utility gap-y-100 {
1592
- row-gap: var(--spacing-100);
1593
- }
1594
-
1595
- @utility gap-150 {
1596
- gap: var(--spacing-150);
1597
- }
1598
-
1599
- @utility gap-x-150 {
1600
- column-gap: var(--spacing-150);
1601
- }
1602
-
1603
- @utility gap-y-150 {
1604
- row-gap: var(--spacing-150);
1605
- }
1606
-
1607
- @utility gap-200 {
1608
- gap: var(--spacing-200);
1609
- }
1610
-
1611
- @utility gap-x-200 {
1612
- column-gap: var(--spacing-200);
1613
- }
1614
-
1615
- @utility gap-y-200 {
1616
- row-gap: var(--spacing-200);
1617
- }
1618
-
1619
- @utility gap-250 {
1620
- gap: var(--spacing-250);
1621
- }
1622
-
1623
- @utility gap-x-250 {
1624
- column-gap: var(--spacing-250);
1625
- }
1626
-
1627
- @utility gap-y-250 {
1628
- row-gap: var(--spacing-250);
1629
- }
1630
-
1631
- @utility gap-300 {
1632
- gap: var(--spacing-300);
1633
- }
1634
-
1635
- @utility gap-x-300 {
1636
- column-gap: var(--spacing-300);
1637
- }
1638
-
1639
- @utility gap-y-300 {
1640
- row-gap: var(--spacing-300);
1641
- }
1642
-
1643
- @utility gap-400 {
1644
- gap: var(--spacing-400);
1645
- }
1646
-
1647
- @utility gap-x-400 {
1648
- column-gap: var(--spacing-400);
1649
- }
1650
-
1651
- @utility gap-y-400 {
1652
- row-gap: var(--spacing-400);
1653
- }
1654
-
1655
- @utility gap-500 {
1656
- gap: var(--spacing-500);
1657
- }
1658
-
1659
- @utility gap-x-500 {
1660
- column-gap: var(--spacing-500);
1661
- }
1662
-
1663
- @utility gap-y-500 {
1664
- row-gap: var(--spacing-500);
1665
- }
1666
-
1667
- @utility gap-600 {
1668
- gap: var(--spacing-600);
1669
- }
1670
-
1671
- @utility gap-x-600 {
1672
- column-gap: var(--spacing-600);
1673
- }
1674
-
1675
- @utility gap-y-600 {
1676
- row-gap: var(--spacing-600);
1677
- }
1678
-
1679
- @utility gap-800 {
1680
- gap: var(--spacing-800);
1681
- }
1682
-
1683
- @utility gap-x-800 {
1684
- column-gap: var(--spacing-800);
1685
- }
1686
-
1687
- @utility gap-y-800 {
1688
- row-gap: var(--spacing-800);
1689
- }
1690
-
1691
1689
  @utility gap-1000 {
1692
1690
  gap: var(--spacing-1000);
1693
1691
  }