@planningcenter/tapestry 2.5.0-rc.2 → 2.5.0-rc.4

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.
@@ -625,394 +625,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
625
625
  }
626
626
  }
627
627
 
628
- :root[data-color-mode="dark"]{
629
- color-scheme:dark;
630
- --t-text-color-default-headline:hsl(0, 0%, 94%);
631
- --t-text-color-default-primary:hsl(0, 0%, 80%);
632
- --t-text-color-default-secondary:hsl(0, 0%, 54%);
633
- --t-text-color-default-disabled:hsl(0, 0%, 25%);
634
- --t-text-color-default-placeholder:hsl(0, 0%, 38%);
635
- --t-text-color-interaction-primary:hsl(204, 68%, 55%);
636
- --t-text-color-interaction-hover:hsl(204, 68%, 50%);
637
- --t-text-color-interaction-active:hsl(204, 68%, 45%);
638
- --t-text-color-interaction-visited:hsl(204, 68%, 50%);
639
- --t-text-color-status-neutral:hsl(0, 0%, 80%);
640
- --t-text-color-status-info:hsl(204, 68%, 55%);
641
- --t-text-color-status-success:hsl(97, 57%, 41%);
642
- --t-text-color-status-warning:hsl(42, 84%, 55%);
643
- --t-text-color-status-error:hsl(8, 61%, 61%);
644
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
645
- --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
646
- --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
647
- --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
648
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
649
- --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
650
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
651
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
652
- --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
653
- --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
654
- --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
655
- --t-text-color-tag-bold-gray:hsl(0, 0%, 17%);
656
- --t-icon-color-default-primary:hsl(0, 0%, 80%);
657
- --t-icon-color-default-secondary:hsl(0, 0%, 54%);
658
- --t-icon-color-default-dim:hsl(0, 0%, 38%);
659
- --t-icon-color-default-disabled:hsl(0, 0%, 25%);
660
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
661
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
662
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
663
- --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
664
- --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
665
- --t-fill-color-neutral-100:hsl(0, 0%, 10%);
666
- --t-fill-color-neutral-000:hsl(0, 0%, 98%);
667
- --t-fill-color-neutral-010:hsl(0, 0%, 88%);
668
- --t-fill-color-neutral-020:hsl(0, 0%, 68%);
669
- --t-fill-color-neutral-025:hsl(0, 0%, 58%);
670
- --t-fill-color-neutral-030:hsl(0, 0%, 50%);
671
- --t-fill-color-neutral-040:hsl(0, 0%, 32%);
672
- --t-fill-color-neutral-050:hsl(0, 0%, 24%);
673
- --t-fill-color-neutral-060:hsl(0, 0%, 19%);
674
- --t-fill-color-neutral-070:hsl(0, 0%, 17%);
675
- --t-fill-color-neutral-080:hsl(0, 0%, 15%);
676
- --t-fill-color-neutral-090:hsl(0, 0%, 12%);
677
- --t-fill-color-interaction-default:hsl(204, 100%, 35%);
678
- --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
679
- --t-fill-color-interaction-active:hsl(204, 80%, 45%);
680
- --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
681
- --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
682
- --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
683
- --t-fill-color-control-primary:hsl(204, 100%, 35%);
684
- --t-fill-color-control-disabled:hsl(0, 0%, 20%);
685
- --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
686
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
687
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
688
- --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
689
- --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
690
- --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
691
- --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
692
- --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
693
- --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
694
- --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
695
- --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
696
- --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
697
- --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
698
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
699
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
700
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
701
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
702
- --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(285, 17%, 18%) 25%, hsl(263, 15%, 17%) 60%, hsl(204, 70%, 12%));
703
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
704
- --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(43, 80%, 16%), hsl(267, 15%, 14%) 58.5%, hsl(204, 70%, 12%));
705
- --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(44, 49%, 13%), hsl(264, 8%, 12%) 58.5%, hsl(203, 37%, 11%));
706
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
707
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
708
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
709
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
710
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
711
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
712
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
713
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
714
- --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(174, 34%, 18%), hsl(187, 39%, 14%) 39.5%, hsl(204, 70%, 12%));
715
- --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
716
- --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
717
- --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
718
- --t-fill-color-tag-gray-010:hsl(0, 0%, 19%);
719
- --t-fill-color-tag-gray-020:hsl(0, 0%, 17%);
720
- --t-fill-color-tag-gray-030:hsl(0, 0%, 68%);
721
- --t-fill-color-tag-gray-040:hsl(0, 0%, 58%);
722
- --t-fill-color-tag-blue-010:hsl(229, 22%, 24%);
723
- --t-fill-color-tag-blue-020:hsl(233, 27%, 23%);
724
- --t-fill-color-tag-aqua-010:hsl(217, 25%, 24%);
725
- --t-fill-color-tag-aqua-020:hsl(222, 27%, 22%);
726
- --t-fill-color-tag-teal-010:hsl(150, 20%, 24%);
727
- --t-fill-color-tag-teal-020:hsl(147, 16%, 22%);
728
- --t-fill-color-tag-green-010:hsl(108, 21%, 22%);
729
- --t-fill-color-tag-green-020:hsl(109, 22%, 20%);
730
- --t-fill-color-tag-yellow-010:hsl(38, 27%, 23%);
731
- --t-fill-color-tag-yellow-020:hsl(37, 27%, 21%);
732
- --t-fill-color-tag-orange-010:hsl(12, 25%, 23%);
733
- --t-fill-color-tag-orange-020:hsl(10, 29%, 21%);
734
- --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
735
- --t-fill-color-tag-pink-020:hsl(338, 25%, 21%);
736
- --t-fill-color-tag-purple-010:hsl(260, 25%, 24%);
737
- --t-fill-color-tag-purple-020:hsl(254, 27%, 22%);
738
- --t-fill-color-tag-magenta-010:hsl(276, 18%, 22%);
739
- --t-fill-color-tag-magenta-020:hsl(277, 18%, 20%);
740
- --t-fill-color-tag-indigo-010:hsl(233, 30%, 27%);
741
- --t-fill-color-tag-indigo-020:hsl(233, 30%, 23%);
742
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
743
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
744
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
745
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
746
- --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
747
- --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
748
- --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
749
- --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
750
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
751
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
752
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
753
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
754
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
755
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
756
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
757
- --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
758
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
759
- --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
760
- --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
761
- --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
762
- --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
763
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
764
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
765
- --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
766
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
767
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
768
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
769
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
770
- --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
771
- --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
772
- --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
773
- --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
774
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
775
- --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
776
- --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
777
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
778
- --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
779
- --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
780
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
781
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
782
- --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
783
- --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
784
- --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
785
- --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
786
- --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
787
- --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
788
- --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
789
- --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
790
- --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
791
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
792
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
793
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
794
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
795
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
796
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
797
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
798
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
799
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
800
- --t-surface-color-card:hsl(0, 0%, 12%);
801
- --t-surface-color-canvas:hsl(0, 0%, 10%);
802
- --t-border-color-default-base:hsl(0, 0%, 21%);
803
- --t-border-color-default-dark:hsl(0, 0%, 25%);
804
- --t-border-color-default-darker:hsl(0, 0%, 33%);
805
- --t-border-color-default-darkest:hsl(0, 0%, 38%);
806
- --t-border-color-default-disabled:hsl(0, 0%, 21%);
807
- --t-border-color-default-dim:hsl(0, 0%, 16%);
808
- --t-border-color-default-white:hsl(0, 0%, 12%);
809
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
810
- --t-border-color-status-info:hsl(204, 100%, 35%);
811
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
812
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
813
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
814
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
815
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
816
- --t-border-color-control-info:hsl(204, 100%, 35%);
817
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
818
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
819
- }
820
-
821
- @media (prefers-color-scheme: dark){
822
- :root[data-color-mode="system"]{
823
- color-scheme:dark;
824
- --t-text-color-default-headline:hsl(0, 0%, 94%);
825
- --t-text-color-default-primary:hsl(0, 0%, 80%);
826
- --t-text-color-default-secondary:hsl(0, 0%, 54%);
827
- --t-text-color-default-disabled:hsl(0, 0%, 25%);
828
- --t-text-color-default-placeholder:hsl(0, 0%, 38%);
829
- --t-text-color-interaction-primary:hsl(204, 68%, 55%);
830
- --t-text-color-interaction-hover:hsl(204, 68%, 50%);
831
- --t-text-color-interaction-active:hsl(204, 68%, 45%);
832
- --t-text-color-interaction-visited:hsl(204, 68%, 50%);
833
- --t-text-color-status-neutral:hsl(0, 0%, 80%);
834
- --t-text-color-status-info:hsl(204, 68%, 55%);
835
- --t-text-color-status-success:hsl(97, 57%, 41%);
836
- --t-text-color-status-warning:hsl(42, 84%, 55%);
837
- --t-text-color-status-error:hsl(8, 61%, 61%);
838
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
839
- --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
840
- --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
841
- --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
842
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
843
- --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
844
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
845
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
846
- --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
847
- --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
848
- --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
849
- --t-text-color-tag-bold-gray:hsl(0, 0%, 17%);
850
- --t-icon-color-default-primary:hsl(0, 0%, 80%);
851
- --t-icon-color-default-secondary:hsl(0, 0%, 54%);
852
- --t-icon-color-default-dim:hsl(0, 0%, 38%);
853
- --t-icon-color-default-disabled:hsl(0, 0%, 25%);
854
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
855
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
856
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
857
- --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
858
- --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
859
- --t-fill-color-neutral-100:hsl(0, 0%, 10%);
860
- --t-fill-color-neutral-000:hsl(0, 0%, 98%);
861
- --t-fill-color-neutral-010:hsl(0, 0%, 88%);
862
- --t-fill-color-neutral-020:hsl(0, 0%, 68%);
863
- --t-fill-color-neutral-025:hsl(0, 0%, 58%);
864
- --t-fill-color-neutral-030:hsl(0, 0%, 50%);
865
- --t-fill-color-neutral-040:hsl(0, 0%, 32%);
866
- --t-fill-color-neutral-050:hsl(0, 0%, 24%);
867
- --t-fill-color-neutral-060:hsl(0, 0%, 19%);
868
- --t-fill-color-neutral-070:hsl(0, 0%, 17%);
869
- --t-fill-color-neutral-080:hsl(0, 0%, 15%);
870
- --t-fill-color-neutral-090:hsl(0, 0%, 12%);
871
- --t-fill-color-interaction-default:hsl(204, 100%, 35%);
872
- --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
873
- --t-fill-color-interaction-active:hsl(204, 80%, 45%);
874
- --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
875
- --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
876
- --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
877
- --t-fill-color-control-primary:hsl(204, 100%, 35%);
878
- --t-fill-color-control-disabled:hsl(0, 0%, 20%);
879
- --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
880
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
881
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
882
- --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
883
- --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
884
- --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
885
- --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
886
- --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
887
- --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
888
- --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
889
- --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
890
- --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
891
- --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
892
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
893
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
894
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
895
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
896
- --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(285, 17%, 18%) 25%, hsl(263, 15%, 17%) 60%, hsl(204, 70%, 12%));
897
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
898
- --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(43, 80%, 16%), hsl(267, 15%, 14%) 58.5%, hsl(204, 70%, 12%));
899
- --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(44, 49%, 13%), hsl(264, 8%, 12%) 58.5%, hsl(203, 37%, 11%));
900
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
901
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
902
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
903
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
904
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
905
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
906
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
907
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
908
- --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(174, 34%, 18%), hsl(187, 39%, 14%) 39.5%, hsl(204, 70%, 12%));
909
- --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
910
- --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
911
- --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
912
- --t-fill-color-tag-gray-010:hsl(0, 0%, 19%);
913
- --t-fill-color-tag-gray-020:hsl(0, 0%, 17%);
914
- --t-fill-color-tag-gray-030:hsl(0, 0%, 68%);
915
- --t-fill-color-tag-gray-040:hsl(0, 0%, 58%);
916
- --t-fill-color-tag-blue-010:hsl(229, 22%, 24%);
917
- --t-fill-color-tag-blue-020:hsl(233, 27%, 23%);
918
- --t-fill-color-tag-aqua-010:hsl(217, 25%, 24%);
919
- --t-fill-color-tag-aqua-020:hsl(222, 27%, 22%);
920
- --t-fill-color-tag-teal-010:hsl(150, 20%, 24%);
921
- --t-fill-color-tag-teal-020:hsl(147, 16%, 22%);
922
- --t-fill-color-tag-green-010:hsl(108, 21%, 22%);
923
- --t-fill-color-tag-green-020:hsl(109, 22%, 20%);
924
- --t-fill-color-tag-yellow-010:hsl(38, 27%, 23%);
925
- --t-fill-color-tag-yellow-020:hsl(37, 27%, 21%);
926
- --t-fill-color-tag-orange-010:hsl(12, 25%, 23%);
927
- --t-fill-color-tag-orange-020:hsl(10, 29%, 21%);
928
- --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
929
- --t-fill-color-tag-pink-020:hsl(338, 25%, 21%);
930
- --t-fill-color-tag-purple-010:hsl(260, 25%, 24%);
931
- --t-fill-color-tag-purple-020:hsl(254, 27%, 22%);
932
- --t-fill-color-tag-magenta-010:hsl(276, 18%, 22%);
933
- --t-fill-color-tag-magenta-020:hsl(277, 18%, 20%);
934
- --t-fill-color-tag-indigo-010:hsl(233, 30%, 27%);
935
- --t-fill-color-tag-indigo-020:hsl(233, 30%, 23%);
936
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
937
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
938
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
939
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
940
- --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
941
- --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
942
- --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
943
- --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
944
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
945
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
946
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
947
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
948
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
949
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
950
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
951
- --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
952
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
953
- --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
954
- --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
955
- --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
956
- --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
957
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
958
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
959
- --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
960
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
961
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
962
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
963
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
964
- --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
965
- --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
966
- --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
967
- --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
968
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
969
- --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
970
- --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
971
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
972
- --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
973
- --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
974
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
975
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
976
- --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
977
- --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
978
- --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
979
- --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
980
- --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
981
- --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
982
- --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
983
- --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
984
- --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
985
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
986
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
987
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
988
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
989
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
990
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
991
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
992
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
993
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
994
- --t-surface-color-card:hsl(0, 0%, 12%);
995
- --t-surface-color-canvas:hsl(0, 0%, 10%);
996
- --t-border-color-default-base:hsl(0, 0%, 21%);
997
- --t-border-color-default-dark:hsl(0, 0%, 25%);
998
- --t-border-color-default-darker:hsl(0, 0%, 33%);
999
- --t-border-color-default-darkest:hsl(0, 0%, 38%);
1000
- --t-border-color-default-disabled:hsl(0, 0%, 21%);
1001
- --t-border-color-default-dim:hsl(0, 0%, 16%);
1002
- --t-border-color-default-white:hsl(0, 0%, 12%);
1003
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
1004
- --t-border-color-status-info:hsl(204, 100%, 35%);
1005
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
1006
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
1007
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
1008
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
1009
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
1010
- --t-border-color-control-info:hsl(204, 100%, 35%);
1011
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
1012
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
1013
- }
1014
- }
1015
-
1016
628
  :root{
1017
629
  --t-border-radius-sm:2px;
1018
630
  --t-border-radius-md:4px;
@@ -1445,6 +1057,394 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1445
1057
  --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
1446
1058
  }
1447
1059
 
1060
+ :root[data-color-mode="dark"]{
1061
+ color-scheme:dark;
1062
+ --t-text-color-default-headline:hsl(0, 0%, 94%);
1063
+ --t-text-color-default-primary:hsl(0, 0%, 80%);
1064
+ --t-text-color-default-secondary:hsl(0, 0%, 54%);
1065
+ --t-text-color-default-disabled:hsl(0, 0%, 25%);
1066
+ --t-text-color-default-placeholder:hsl(0, 0%, 38%);
1067
+ --t-text-color-interaction-primary:hsl(204, 68%, 55%);
1068
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
1069
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
1070
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
1071
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
1072
+ --t-text-color-status-info:hsl(204, 68%, 55%);
1073
+ --t-text-color-status-success:hsl(97, 57%, 41%);
1074
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
1075
+ --t-text-color-status-error:hsl(8, 61%, 61%);
1076
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
1077
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
1078
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
1079
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
1080
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
1081
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
1082
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
1083
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
1084
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
1085
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
1086
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
1087
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 17%);
1088
+ --t-icon-color-default-primary:hsl(0, 0%, 80%);
1089
+ --t-icon-color-default-secondary:hsl(0, 0%, 54%);
1090
+ --t-icon-color-default-dim:hsl(0, 0%, 38%);
1091
+ --t-icon-color-default-disabled:hsl(0, 0%, 25%);
1092
+ --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
1093
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
1094
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
1095
+ --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
1096
+ --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
1097
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
1098
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
1099
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
1100
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
1101
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
1102
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
1103
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
1104
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
1105
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
1106
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
1107
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
1108
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
1109
+ --t-fill-color-interaction-default:hsl(204, 100%, 35%);
1110
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
1111
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
1112
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
1113
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
1114
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
1115
+ --t-fill-color-control-primary:hsl(204, 100%, 35%);
1116
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
1117
+ --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
1118
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
1119
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
1120
+ --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
1121
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
1122
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
1123
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
1124
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
1125
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
1126
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
1127
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
1128
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
1129
+ --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
1130
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1131
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1132
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1133
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
1134
+ --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(285, 17%, 18%) 25%, hsl(263, 15%, 17%) 60%, hsl(204, 70%, 12%));
1135
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
1136
+ --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(43, 80%, 16%), hsl(267, 15%, 14%) 58.5%, hsl(204, 70%, 12%));
1137
+ --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(44, 49%, 13%), hsl(264, 8%, 12%) 58.5%, hsl(203, 37%, 11%));
1138
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1139
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
1140
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1141
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1142
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1143
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1144
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
1145
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
1146
+ --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(174, 34%, 18%), hsl(187, 39%, 14%) 39.5%, hsl(204, 70%, 12%));
1147
+ --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
1148
+ --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
1149
+ --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
1150
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 19%);
1151
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 17%);
1152
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 68%);
1153
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 58%);
1154
+ --t-fill-color-tag-blue-010:hsl(229, 22%, 24%);
1155
+ --t-fill-color-tag-blue-020:hsl(233, 27%, 23%);
1156
+ --t-fill-color-tag-aqua-010:hsl(217, 25%, 24%);
1157
+ --t-fill-color-tag-aqua-020:hsl(222, 27%, 22%);
1158
+ --t-fill-color-tag-teal-010:hsl(150, 20%, 24%);
1159
+ --t-fill-color-tag-teal-020:hsl(147, 16%, 22%);
1160
+ --t-fill-color-tag-green-010:hsl(108, 21%, 22%);
1161
+ --t-fill-color-tag-green-020:hsl(109, 22%, 20%);
1162
+ --t-fill-color-tag-yellow-010:hsl(38, 27%, 23%);
1163
+ --t-fill-color-tag-yellow-020:hsl(37, 27%, 21%);
1164
+ --t-fill-color-tag-orange-010:hsl(12, 25%, 23%);
1165
+ --t-fill-color-tag-orange-020:hsl(10, 29%, 21%);
1166
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
1167
+ --t-fill-color-tag-pink-020:hsl(338, 25%, 21%);
1168
+ --t-fill-color-tag-purple-010:hsl(260, 25%, 24%);
1169
+ --t-fill-color-tag-purple-020:hsl(254, 27%, 22%);
1170
+ --t-fill-color-tag-magenta-010:hsl(276, 18%, 22%);
1171
+ --t-fill-color-tag-magenta-020:hsl(277, 18%, 20%);
1172
+ --t-fill-color-tag-indigo-010:hsl(233, 30%, 27%);
1173
+ --t-fill-color-tag-indigo-020:hsl(233, 30%, 23%);
1174
+ --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
1175
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
1176
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
1177
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
1178
+ --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
1179
+ --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
1180
+ --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
1181
+ --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
1182
+ --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
1183
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
1184
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
1185
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
1186
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
1187
+ --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
1188
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
1189
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
1190
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
1191
+ --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
1192
+ --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
1193
+ --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
1194
+ --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
1195
+ --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
1196
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
1197
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
1198
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
1199
+ --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
1200
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
1201
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
1202
+ --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
1203
+ --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
1204
+ --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
1205
+ --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
1206
+ --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
1207
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
1208
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
1209
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
1210
+ --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
1211
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
1212
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
1213
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
1214
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
1215
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
1216
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
1217
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
1218
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
1219
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
1220
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
1221
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
1222
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
1223
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
1224
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
1225
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
1226
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
1227
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
1228
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
1229
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
1230
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
1231
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
1232
+ --t-surface-color-card:hsl(0, 0%, 12%);
1233
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
1234
+ --t-border-color-default-base:hsl(0, 0%, 21%);
1235
+ --t-border-color-default-dark:hsl(0, 0%, 25%);
1236
+ --t-border-color-default-darker:hsl(0, 0%, 33%);
1237
+ --t-border-color-default-darkest:hsl(0, 0%, 38%);
1238
+ --t-border-color-default-disabled:hsl(0, 0%, 21%);
1239
+ --t-border-color-default-dim:hsl(0, 0%, 16%);
1240
+ --t-border-color-default-white:hsl(0, 0%, 12%);
1241
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
1242
+ --t-border-color-status-info:hsl(204, 100%, 35%);
1243
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
1244
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
1245
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
1246
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
1247
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
1248
+ --t-border-color-control-info:hsl(204, 100%, 35%);
1249
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
1250
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
1251
+ }
1252
+
1253
+ @media (prefers-color-scheme: dark){
1254
+ :root[data-color-mode="system"]{
1255
+ color-scheme:dark;
1256
+ --t-text-color-default-headline:hsl(0, 0%, 94%);
1257
+ --t-text-color-default-primary:hsl(0, 0%, 80%);
1258
+ --t-text-color-default-secondary:hsl(0, 0%, 54%);
1259
+ --t-text-color-default-disabled:hsl(0, 0%, 25%);
1260
+ --t-text-color-default-placeholder:hsl(0, 0%, 38%);
1261
+ --t-text-color-interaction-primary:hsl(204, 68%, 55%);
1262
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
1263
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
1264
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
1265
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
1266
+ --t-text-color-status-info:hsl(204, 68%, 55%);
1267
+ --t-text-color-status-success:hsl(97, 57%, 41%);
1268
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
1269
+ --t-text-color-status-error:hsl(8, 61%, 61%);
1270
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
1271
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
1272
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
1273
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
1274
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
1275
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
1276
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
1277
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
1278
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
1279
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
1280
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
1281
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 17%);
1282
+ --t-icon-color-default-primary:hsl(0, 0%, 80%);
1283
+ --t-icon-color-default-secondary:hsl(0, 0%, 54%);
1284
+ --t-icon-color-default-dim:hsl(0, 0%, 38%);
1285
+ --t-icon-color-default-disabled:hsl(0, 0%, 25%);
1286
+ --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
1287
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
1288
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
1289
+ --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
1290
+ --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
1291
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
1292
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
1293
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
1294
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
1295
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
1296
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
1297
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
1298
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
1299
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
1300
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
1301
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
1302
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
1303
+ --t-fill-color-interaction-default:hsl(204, 100%, 35%);
1304
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
1305
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
1306
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
1307
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
1308
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
1309
+ --t-fill-color-control-primary:hsl(204, 100%, 35%);
1310
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
1311
+ --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
1312
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
1313
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
1314
+ --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
1315
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
1316
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
1317
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
1318
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
1319
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
1320
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
1321
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
1322
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
1323
+ --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
1324
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1325
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1326
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1327
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
1328
+ --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(285, 17%, 18%) 25%, hsl(263, 15%, 17%) 60%, hsl(204, 70%, 12%));
1329
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
1330
+ --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(43, 80%, 16%), hsl(267, 15%, 14%) 58.5%, hsl(204, 70%, 12%));
1331
+ --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(44, 49%, 13%), hsl(264, 8%, 12%) 58.5%, hsl(203, 37%, 11%));
1332
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1333
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
1334
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1335
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1336
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1337
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1338
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
1339
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
1340
+ --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(174, 34%, 18%), hsl(187, 39%, 14%) 39.5%, hsl(204, 70%, 12%));
1341
+ --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
1342
+ --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
1343
+ --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
1344
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 19%);
1345
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 17%);
1346
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 68%);
1347
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 58%);
1348
+ --t-fill-color-tag-blue-010:hsl(229, 22%, 24%);
1349
+ --t-fill-color-tag-blue-020:hsl(233, 27%, 23%);
1350
+ --t-fill-color-tag-aqua-010:hsl(217, 25%, 24%);
1351
+ --t-fill-color-tag-aqua-020:hsl(222, 27%, 22%);
1352
+ --t-fill-color-tag-teal-010:hsl(150, 20%, 24%);
1353
+ --t-fill-color-tag-teal-020:hsl(147, 16%, 22%);
1354
+ --t-fill-color-tag-green-010:hsl(108, 21%, 22%);
1355
+ --t-fill-color-tag-green-020:hsl(109, 22%, 20%);
1356
+ --t-fill-color-tag-yellow-010:hsl(38, 27%, 23%);
1357
+ --t-fill-color-tag-yellow-020:hsl(37, 27%, 21%);
1358
+ --t-fill-color-tag-orange-010:hsl(12, 25%, 23%);
1359
+ --t-fill-color-tag-orange-020:hsl(10, 29%, 21%);
1360
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
1361
+ --t-fill-color-tag-pink-020:hsl(338, 25%, 21%);
1362
+ --t-fill-color-tag-purple-010:hsl(260, 25%, 24%);
1363
+ --t-fill-color-tag-purple-020:hsl(254, 27%, 22%);
1364
+ --t-fill-color-tag-magenta-010:hsl(276, 18%, 22%);
1365
+ --t-fill-color-tag-magenta-020:hsl(277, 18%, 20%);
1366
+ --t-fill-color-tag-indigo-010:hsl(233, 30%, 27%);
1367
+ --t-fill-color-tag-indigo-020:hsl(233, 30%, 23%);
1368
+ --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
1369
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
1370
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
1371
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
1372
+ --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
1373
+ --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
1374
+ --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
1375
+ --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
1376
+ --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
1377
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
1378
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
1379
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
1380
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
1381
+ --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
1382
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
1383
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
1384
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
1385
+ --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
1386
+ --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
1387
+ --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
1388
+ --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
1389
+ --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
1390
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
1391
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
1392
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
1393
+ --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
1394
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
1395
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
1396
+ --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
1397
+ --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
1398
+ --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
1399
+ --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
1400
+ --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
1401
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
1402
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
1403
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
1404
+ --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
1405
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
1406
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
1407
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
1408
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
1409
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
1410
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
1411
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
1412
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
1413
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
1414
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
1415
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
1416
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
1417
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
1418
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
1419
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
1420
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
1421
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
1422
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
1423
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
1424
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
1425
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
1426
+ --t-surface-color-card:hsl(0, 0%, 12%);
1427
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
1428
+ --t-border-color-default-base:hsl(0, 0%, 21%);
1429
+ --t-border-color-default-dark:hsl(0, 0%, 25%);
1430
+ --t-border-color-default-darker:hsl(0, 0%, 33%);
1431
+ --t-border-color-default-darkest:hsl(0, 0%, 38%);
1432
+ --t-border-color-default-disabled:hsl(0, 0%, 21%);
1433
+ --t-border-color-default-dim:hsl(0, 0%, 16%);
1434
+ --t-border-color-default-white:hsl(0, 0%, 12%);
1435
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
1436
+ --t-border-color-status-info:hsl(204, 100%, 35%);
1437
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
1438
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
1439
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
1440
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
1441
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
1442
+ --t-border-color-control-info:hsl(204, 100%, 35%);
1443
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
1444
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
1445
+ }
1446
+ }
1447
+
1448
1448
  .symbol{
1449
1449
  display:inline-block;
1450
1450
  vertical-align:text-top;