@planningcenter/tapestry 2.4.0 → 2.4.1-rc.2

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.
Files changed (53) hide show
  1. package/dist/componentRegistration.js.map +1 -1
  2. package/dist/components/Banner/Banner.js.map +1 -1
  3. package/dist/components/button/BaseButton.js.map +1 -1
  4. package/dist/components/button/Button.js.map +1 -1
  5. package/dist/components/button/DropdownButton.js.map +1 -1
  6. package/dist/components/button/DropdownIconButton.js.map +1 -1
  7. package/dist/components/button/IconButton.js.map +1 -1
  8. package/dist/components/button/LoadingButton.js.map +1 -1
  9. package/dist/components/button/PageHeaderActionsDropdownButton.js.map +1 -1
  10. package/dist/components/checkbox/Checkbox.js.map +1 -1
  11. package/dist/components/internal/LoadingSpinner.js.map +1 -1
  12. package/dist/components/link/BaseLink.js.map +1 -1
  13. package/dist/components/link/IconLink.js.map +1 -1
  14. package/dist/components/link/Link.js.map +1 -1
  15. package/dist/components/page-header/PageHeader.js.map +1 -1
  16. package/dist/components/page-header/index.js.map +1 -1
  17. package/dist/components/sidenav/Sidenav.js.map +1 -1
  18. package/dist/components/sidenav/SidenavItem.js.map +1 -1
  19. package/dist/components/sidenav/SidenavSection.js.map +1 -1
  20. package/dist/components/sidenav/index.js.map +1 -1
  21. package/dist/index.css +0 -266
  22. package/dist/index.css.map +1 -1
  23. package/dist/jsTokens.js.map +1 -1
  24. package/dist/reactRender.css +480 -746
  25. package/dist/reactRender.css.map +1 -1
  26. package/dist/reactRenderLegacy.css +480 -746
  27. package/dist/reactRenderLegacy.css.map +1 -1
  28. package/dist/tapestry-render/dist/{buildComponent-DTliJ3_n.js → buildComponent-D0S78fIn.js} +146 -146
  29. package/dist/tapestry-render/dist/buildComponent-D0S78fIn.js.map +1 -0
  30. package/dist/tapestry-render/dist/index.js +1 -1
  31. package/dist/tapestry-render/dist/index.js.map +1 -1
  32. package/dist/tapestry-render/dist/legacy.js +1 -1
  33. package/dist/tapestry-render/dist/legacy.js.map +1 -1
  34. package/dist/tapestry-render/dist/registry.js.map +1 -1
  35. package/dist/tapestry-wc/dist/components/p-5-Cvrlgk.js.map +1 -1
  36. package/dist/tapestry-wc/dist/components/p-74Cc2nEh.js.map +1 -1
  37. package/dist/tapestry-wc/dist/components/p-D0G2xpOq.js.map +1 -1
  38. package/dist/tapestry-wc/dist/components/p-D1rzJeWl.js.map +1 -1
  39. package/dist/tapestry-wc/dist/components/p-DmP02I4b.js.map +1 -1
  40. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  41. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  42. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  43. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  44. package/dist/tokens/ts/tokens.js.map +1 -1
  45. package/dist/tokens-dark.css +0 -266
  46. package/dist/tokens.css +0 -266
  47. package/dist/tokens.css.map +1 -1
  48. package/dist/unstable.css +0 -266
  49. package/dist/unstable.css.map +1 -1
  50. package/dist/utilities/Icon.js.map +1 -1
  51. package/dist/utilities/buttonLinkShared.js.map +1 -1
  52. package/package.json +3 -3
  53. package/dist/tapestry-render/dist/buildComponent-DTliJ3_n.js.map +0 -1
@@ -625,35 +625,82 @@ 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%);
628
+ :root{
629
+ --t-border-radius-sm:2px;
630
+ --t-border-radius-md:4px;
631
+ --t-border-radius-lg:8px;
632
+ --t-border-radius-xl:16px;
633
+ --t-border-radius-round:56px;
634
+ --t-border-radius-default:4px;
635
+ --t-border-width-default:1px;
636
+ --t-border-width-thick:2px;
637
+ --t-spacing-1:8px;
638
+ --t-spacing-2:16px;
639
+ --t-spacing-3:24px;
640
+ --t-spacing-4:32px;
641
+ --t-spacing-5:40px;
642
+ --t-spacing-6:48px;
643
+ --t-spacing-7:56px;
644
+ --t-spacing-fourth:2px;
645
+ --t-spacing-half:4px;
646
+ --t-element-size-3xl:48px;
647
+ --t-element-size-2xl:32px;
648
+ --t-element-size-xl:24px;
649
+ --t-element-size-lg:18px;
650
+ --t-element-size-md:16px;
651
+ --t-element-size-sm:14px;
652
+ --t-element-size-xs:12px;
653
+ --t-font-size-4xl:32px;
654
+ --t-font-size-3xl:28px;
655
+ --t-font-size-2xl:24px;
656
+ --t-font-size-xl:20px;
657
+ --t-font-size-lg:18px;
658
+ --t-font-size-md:16px;
659
+ --t-font-size-sm:14px;
660
+ --t-font-size-xs:12px;
661
+ --t-font-size-2xs:10px;
662
+ --t-font-weight-normal:400;
663
+ --t-font-weight-medium:500;
664
+ --t-font-weight-semibold:600;
665
+ --t-font-weight-bold:700;
666
+ --t-container-size-xl:48px;
667
+ --t-container-size-lg:40px;
668
+ --t-container-size-md:32px;
669
+ --t-container-size-sm:24px;
670
+ --t-container-size-xs:20px;
671
+ --t-avatar-size-20:20px;
672
+ --t-avatar-size-24:24px;
673
+ --t-avatar-size-36:36px;
674
+ --t-avatar-size-48:48px;
675
+ --t-avatar-size-72:72px;
676
+ --t-avatar-size-112:112px;
677
+ --t-text-color-default-headline:hsl(0, 0%, 12%);
678
+ --t-text-color-default-primary:hsl(0, 0%, 24%);
679
+ --t-text-color-default-secondary:hsl(0, 0%, 42%);
680
+ --t-text-color-default-disabled:hsl(0, 0%, 81%);
681
+ --t-text-color-default-placeholder:hsl(0, 0%, 58%);
635
682
  --t-text-color-default-inverted:hsl(0, 0%, 100%);
636
- --t-text-color-interaction-primary:hsl(204, 68%, 55%);
637
- --t-text-color-interaction-hover:hsl(204, 68%, 50%);
638
- --t-text-color-interaction-active:hsl(204, 68%, 45%);
639
- --t-text-color-interaction-visited:hsl(204, 68%, 50%);
640
- --t-text-color-status-neutral:hsl(0, 0%, 80%);
641
- --t-text-color-status-info:hsl(204, 68%, 55%);
642
- --t-text-color-status-success:hsl(97, 57%, 41%);
643
- --t-text-color-status-warning:hsl(42, 84%, 55%);
644
- --t-text-color-status-error:hsl(8, 61%, 61%);
645
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
646
- --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
647
- --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
648
- --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
649
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
650
- --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
651
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
652
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
653
- --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
654
- --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
655
- --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
656
- --t-text-color-tag-bold-gray:hsl(0, 0%, 17%);
683
+ --t-text-color-interaction-primary:hsl(204, 100%, 40%);
684
+ --t-text-color-interaction-hover:hsl(204, 100%, 35%);
685
+ --t-text-color-interaction-active:hsl(204, 100%, 30%);
686
+ --t-text-color-interaction-visited:hsl(204, 100%, 30%);
687
+ --t-text-color-status-neutral:hsl(0, 0%, 24%);
688
+ --t-text-color-status-info:hsl(204, 100%, 35%);
689
+ --t-text-color-status-success:hsl(97, 57%, 28%);
690
+ --t-text-color-status-warning:hsl(42, 100%, 29%);
691
+ --t-text-color-status-error:hsl(8, 60%, 45%);
692
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 24%);
693
+ --t-text-color-tag-subtle-blue:hsl(224, 47%, 31%);
694
+ --t-text-color-tag-subtle-indigo:hsl(241, 59%, 28%);
695
+ --t-text-color-tag-subtle-aqua:hsl(209, 77%, 22%);
696
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 15%);
697
+ --t-text-color-tag-subtle-green:hsl(100, 93%, 17%);
698
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 23%);
699
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 18%);
700
+ --t-text-color-tag-subtle-pink:hsl(327, 88%, 20%);
701
+ --t-text-color-tag-subtle-purple:hsl(268, 71%, 27%);
702
+ --t-text-color-tag-subtle-magenta:hsl(285, 71%, 20%);
703
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 24%);
657
704
  --t-text-color-tag-bold-indigo:hsl(241, 59%, 28%);
658
705
  --t-text-color-tag-bold-blue:hsl(224, 47%, 31%);
659
706
  --t-text-color-tag-bold-aqua:hsl(209, 77%, 22%);
@@ -664,57 +711,57 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
664
711
  --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
665
712
  --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
666
713
  --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
667
- --t-icon-color-default-primary:hsl(0, 0%, 80%);
668
- --t-icon-color-default-secondary:hsl(0, 0%, 54%);
669
- --t-icon-color-default-dim:hsl(0, 0%, 38%);
670
- --t-icon-color-default-disabled:hsl(0, 0%, 25%);
714
+ --t-icon-color-default-primary:hsl(0, 0%, 24%);
715
+ --t-icon-color-default-secondary:hsl(0, 0%, 42%);
716
+ --t-icon-color-default-dim:hsl(0, 0%, 58%);
717
+ --t-icon-color-default-disabled:hsl(0, 0%, 81%);
671
718
  --t-icon-color-default-inverted:hsl(0, 0%, 100%);
672
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
673
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
674
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
675
- --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
719
+ --t-icon-color-status-neutral-primary:hsl(0, 0%, 42%);
720
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 58%);
721
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 24%);
722
+ --t-icon-color-status-info-primary:hsl(204, 100%, 40%);
676
723
  --t-icon-color-status-success-primary:hsl(96, 57%, 33%);
677
724
  --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
678
725
  --t-icon-color-status-warning-primary:hsl(42, 84%, 49%);
679
- --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
680
- --t-fill-color-neutral-100:hsl(0, 0%, 10%);
681
- --t-fill-color-neutral-000:hsl(0, 0%, 98%);
682
- --t-fill-color-neutral-010:hsl(0, 0%, 88%);
683
- --t-fill-color-neutral-020:hsl(0, 0%, 68%);
684
- --t-fill-color-neutral-025:hsl(0, 0%, 58%);
685
- --t-fill-color-neutral-030:hsl(0, 0%, 50%);
686
- --t-fill-color-neutral-040:hsl(0, 0%, 32%);
687
- --t-fill-color-neutral-050:hsl(0, 0%, 24%);
688
- --t-fill-color-neutral-060:hsl(0, 0%, 19%);
689
- --t-fill-color-neutral-070:hsl(0, 0%, 17%);
690
- --t-fill-color-neutral-080:hsl(0, 0%, 15%);
691
- --t-fill-color-neutral-090:hsl(0, 0%, 12%);
692
- --t-fill-color-interaction-default:hsl(204, 100%, 35%);
693
- --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
694
- --t-fill-color-interaction-active:hsl(204, 80%, 45%);
695
- --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
696
- --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
697
- --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
698
- --t-fill-color-control-primary:hsl(204, 100%, 35%);
726
+ --t-icon-color-status-error-primary:hsl(8, 60%, 47%);
727
+ --t-fill-color-neutral-100:hsl(0, 0%, 100%);
728
+ --t-fill-color-neutral-000:hsl(0, 0%, 12%);
729
+ --t-fill-color-neutral-010:hsl(0, 0%, 24%);
730
+ --t-fill-color-neutral-020:hsl(0, 0%, 42%);
731
+ --t-fill-color-neutral-025:hsl(0, 0%, 50%);
732
+ --t-fill-color-neutral-030:hsl(0, 0%, 58%);
733
+ --t-fill-color-neutral-040:hsl(0, 0%, 81%);
734
+ --t-fill-color-neutral-050:hsl(0, 0%, 88%);
735
+ --t-fill-color-neutral-060:hsl(0, 0%, 93%);
736
+ --t-fill-color-neutral-070:hsl(0, 0%, 95%);
737
+ --t-fill-color-neutral-080:hsl(0, 0%, 97%);
738
+ --t-fill-color-neutral-090:hsl(0, 0%, 98%);
739
+ --t-fill-color-interaction-default:hsl(204, 100%, 40%);
740
+ --t-fill-color-interaction-hover:hsl(204, 100%, 35%);
741
+ --t-fill-color-interaction-active:hsl(204, 100%, 30%);
742
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 81%);
743
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
744
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
745
+ --t-fill-color-control-primary:hsl(204, 100%, 40%);
699
746
  --t-fill-color-control-secondary:hsl(97, 57%, 40%);
700
747
  --t-fill-color-control-error:hsl(8, 60%, 47%);
701
- --t-fill-color-control-disabled:hsl(0, 0%, 20%);
702
- --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
703
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
704
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
705
- --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
706
- --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
707
- --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
748
+ --t-fill-color-control-disabled:hsl(0, 0%, 81%);
749
+ --t-fill-color-status-neutral-solid:hsl(0, 0%, 42%);
750
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 93%);
751
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 97%);
752
+ --t-fill-color-status-info-solid:hsl(204, 100%, 40%);
753
+ --t-fill-color-status-info-ghost:hsl(203, 94%, 94%);
754
+ --t-fill-color-status-info-dim:hsl(204, 100%, 97%);
708
755
  --t-fill-color-status-success-solid:hsl(96, 57%, 33%);
709
- --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
710
- --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
756
+ --t-fill-color-status-success-ghost:hsl(97, 57%, 90%);
757
+ --t-fill-color-status-success-dim:hsl(96, 60%, 95%);
711
758
  --t-fill-color-status-warning-solid:hsl(42, 84%, 63%);
712
- --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
713
- --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
759
+ --t-fill-color-status-warning-ghost:hsl(42, 87%, 94%);
760
+ --t-fill-color-status-warning-dim:hsl(42, 87%, 97%);
714
761
  --t-fill-color-status-error-solid:hsl(8, 60%, 47%);
715
- --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
716
- --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
717
- --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
762
+ --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
763
+ --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
764
+ --t-fill-color-tooltip-primary:hsla(0, 0%, 12%, 0.9);
718
765
  --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
719
766
  --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
720
767
  --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
@@ -798,167 +845,215 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
798
845
  --t-fill-color-product-staff-base:hsl(328, 100%, 45%);
799
846
  --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
800
847
  --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
801
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
802
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
803
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
804
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
805
- --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%));
806
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
807
- --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%));
808
- --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%));
809
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
810
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
811
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
812
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
813
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
814
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
815
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
816
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
817
- --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%));
818
- --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%));
819
- --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%));
820
- --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%));
821
- --t-fill-color-tag-gray-010:hsl(0, 0%, 19%);
822
- --t-fill-color-tag-gray-020:hsl(0, 0%, 17%);
823
- --t-fill-color-tag-gray-030:hsl(0, 0%, 68%);
824
- --t-fill-color-tag-gray-040:hsl(0, 0%, 58%);
825
- --t-fill-color-tag-blue-010:hsl(229, 22%, 24%);
826
- --t-fill-color-tag-blue-020:hsl(233, 27%, 23%);
848
+ --t-fill-color-product-accounts-gradient-brand:linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
849
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
850
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
851
+ --t-fill-color-product-api-gradient-brand:linear-gradient(180deg, hsl(221, 100%, 62%), hsl(217, 100%, 52%));
852
+ --t-fill-color-product-calendar-gradient-brand:linear-gradient(135deg, hsl(10, 88%, 58%), hsl(8, 60%, 51%));
853
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(5, 80%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
854
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(8, 100%, 94%), hsl(285, 18%, 91%), hsl(204, 67%, 92%));
855
+ --t-fill-color-product-cc-gradient-brand:linear-gradient(135deg, hsl(207, 90%, 61%), hsl(123, 38%, 57%));
856
+ --t-fill-color-product-checkins-gradient-brand:linear-gradient(135deg, hsl(283, 38%, 59%), hsl(284, 23%, 48%));
857
+ --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(283, 21%, 77%) 25%, hsl(227, 36%, 78%) 60%, hsl(204, 67%, 73%));
858
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 22%, 93%), hsl(225, 35%, 93%) 42%, hsl(204, 67%, 92%));
859
+ --t-fill-color-product-giving-gradient-brand:linear-gradient(90deg, hsl(46, 91%, 55%), hsl(41, 89%, 55%));
860
+ --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(42, 84%, 80%), hsl(255, 21%, 89%) 58.5%, hsl(204, 67%, 73%));
861
+ --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(42, 87%, 94%), hsl(260, 18%, 97%) 58.5%, hsl(204, 67%, 92%));
862
+ --t-fill-color-product-groups-gradient-brand:linear-gradient(135deg, hsl(30, 100%, 59%), hsl(19, 97%, 60%));
863
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(17, 88%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
864
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(18, 87%, 94%), hsl(300, 12%, 92%), hsl(204, 67%, 92%));
865
+ --t-fill-color-product-headcounts-gradient-brand:linear-gradient(135deg, hsl(283, 37%, 59%), hsl(285, 23%, 47%));
866
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
867
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
868
+ --t-fill-color-product-musicstand-gradient-brand:linear-gradient(135deg, hsl(204, 64%, 51%), hsl(211, 55%, 51%));
869
+ --t-fill-color-product-people-gradient-brand:linear-gradient(135deg, hsl(205, 86%, 57%), hsl(220, 76%, 57%));
870
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
871
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
872
+ --t-fill-color-product-publishing-gradient-brand:linear-gradient(135deg, hsl(240, 4%, 49%), hsl(240, 6%, 39%));
873
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(217, 5%, 69%), hsl(214, 15%, 69%) 45%, hsl(204, 67%, 73%));
874
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(210, 4%, 91%), hsl(214, 15%, 91%) 45%, hsl(204, 67%, 92%));
875
+ --t-fill-color-product-registrations-gradient-brand:linear-gradient(135deg, hsl(168, 46%, 48%), hsl(175, 35%, 43%));
876
+ --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(175, 27%, 74%), hsl(196, 46%, 73%) 39.5%, hsl(204, 67%, 73%));
877
+ --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(175, 28%, 92%), hsl(196, 46%, 92%) 39.5%, hsl(204, 67%, 92%));
878
+ --t-fill-color-product-services-gradient-brand:linear-gradient(135deg, hsl(96, 49%, 47%), hsl(89, 52%, 39%));
879
+ --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(89, 31%, 73%), hsl(122, 29%, 78%) 39.5%, hsl(204, 67%, 73%));
880
+ --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(88, 32%, 92%), hsl(126, 29%, 93%) 39.5%, hsl(204, 67%, 92%));
881
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 93%);
882
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 88%);
883
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 88%);
884
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 81%);
885
+ --t-fill-color-tag-blue-010:hsl(220, 100%, 95%);
886
+ --t-fill-color-tag-blue-020:hsl(221, 100%, 88%);
827
887
  --t-fill-color-tag-blue-030:hsl(220, 98%, 81%);
828
888
  --t-fill-color-tag-blue-040:hsl(220, 98%, 74%);
829
- --t-fill-color-tag-aqua-010:hsl(217, 25%, 24%);
830
- --t-fill-color-tag-aqua-020:hsl(222, 27%, 22%);
889
+ --t-fill-color-tag-aqua-010:hsl(200, 82%, 89%);
890
+ --t-fill-color-tag-aqua-020:hsl(200, 82%, 82%);
831
891
  --t-fill-color-tag-aqua-030:hsl(201, 76%, 71%);
832
892
  --t-fill-color-tag-aqua-040:hsl(200, 75%, 64%);
833
- --t-fill-color-tag-teal-010:hsl(150, 20%, 24%);
834
- --t-fill-color-tag-teal-020:hsl(147, 16%, 22%);
893
+ --t-fill-color-tag-teal-010:hsl(163, 53%, 83%);
894
+ --t-fill-color-tag-teal-020:hsl(164, 52%, 76%);
835
895
  --t-fill-color-tag-teal-030:hsl(169, 62%, 64%);
836
896
  --t-fill-color-tag-teal-040:hsl(169, 62%, 56%);
837
- --t-fill-color-tag-green-010:hsl(108, 21%, 22%);
838
- --t-fill-color-tag-green-020:hsl(109, 22%, 20%);
897
+ --t-fill-color-tag-green-010:hsl(98, 59%, 85%);
898
+ --t-fill-color-tag-green-020:hsl(99, 59%, 78%);
839
899
  --t-fill-color-tag-green-030:hsl(112, 57%, 65%);
840
900
  --t-fill-color-tag-green-040:hsl(112, 57%, 57%);
841
- --t-fill-color-tag-yellow-010:hsl(38, 27%, 23%);
842
- --t-fill-color-tag-yellow-020:hsl(37, 27%, 21%);
901
+ --t-fill-color-tag-yellow-010:hsl(45, 77%, 85%);
902
+ --t-fill-color-tag-yellow-020:hsl(44, 78%, 77%);
843
903
  --t-fill-color-tag-yellow-030:hsl(44, 92%, 69%);
844
904
  --t-fill-color-tag-yellow-040:hsl(44, 93%, 61%);
845
- --t-fill-color-tag-orange-010:hsl(12, 25%, 23%);
846
- --t-fill-color-tag-orange-020:hsl(10, 29%, 21%);
905
+ --t-fill-color-tag-orange-010:hsl(22, 89%, 89%);
906
+ --t-fill-color-tag-orange-020:hsl(21, 89%, 82%);
847
907
  --t-fill-color-tag-orange-030:hsl(21, 86%, 72%);
848
908
  --t-fill-color-tag-orange-040:hsl(21, 86%, 64%);
849
- --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
850
- --t-fill-color-tag-pink-020:hsl(338, 25%, 21%);
909
+ --t-fill-color-tag-pink-010:hsl(311, 66%, 92%);
910
+ --t-fill-color-tag-pink-020:hsl(310, 64%, 85%);
851
911
  --t-fill-color-tag-pink-030:hsl(324, 78%, 77%);
852
912
  --t-fill-color-tag-pink-040:hsl(324, 76%, 70%);
853
- --t-fill-color-tag-purple-010:hsl(260, 25%, 24%);
854
- --t-fill-color-tag-purple-020:hsl(254, 27%, 22%);
913
+ --t-fill-color-tag-purple-010:hsl(259, 74%, 93%);
914
+ --t-fill-color-tag-purple-020:hsl(259, 74%, 85%);
855
915
  --t-fill-color-tag-purple-030:hsl(273, 62%, 76%);
856
916
  --t-fill-color-tag-purple-040:hsl(273, 62%, 70%);
857
- --t-fill-color-tag-magenta-010:hsl(276, 18%, 22%);
858
- --t-fill-color-tag-magenta-020:hsl(277, 18%, 20%);
917
+ --t-fill-color-tag-magenta-010:hsl(294, 37%, 90%);
918
+ --t-fill-color-tag-magenta-020:hsl(291, 40%, 83%);
859
919
  --t-fill-color-tag-magenta-030:hsl(291, 48%, 70%);
860
920
  --t-fill-color-tag-magenta-040:hsl(292, 48%, 63%);
861
- --t-fill-color-tag-indigo-010:hsl(233, 30%, 27%);
862
- --t-fill-color-tag-indigo-020:hsl(233, 30%, 23%);
921
+ --t-fill-color-tag-indigo-010:hsl(234, 78%, 93%);
922
+ --t-fill-color-tag-indigo-020:hsl(233, 79%, 87%);
863
923
  --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
864
924
  --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
865
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
866
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
867
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
868
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
869
- --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
870
- --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
871
- --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
872
- --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
873
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
874
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
875
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
876
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
925
+ --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 93%);
926
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
927
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
928
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 95%);
929
+ --t-fill-color-button-neutral-outline-dim-default:hsla(0, 0%, 100%, 0);
930
+ --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 95%);
931
+ --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 93%);
932
+ --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 98%);
933
+ --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 100%, 0);
934
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
935
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
936
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 100%, 0);
877
937
  --t-fill-color-button-neutral-responsive-header-default:hsla(0, 0%, 0%, 0.1);
878
938
  --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
879
939
  --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
880
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
881
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
882
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
883
- --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
884
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
885
- --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
886
- --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
887
- --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
888
- --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
889
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
890
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
891
- --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
892
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
893
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
940
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 0%, 0.05);
941
+ --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 40%);
942
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
943
+ --t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
944
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 95%);
945
+ --t-fill-color-button-interaction-outline-dim-default:hsla(0, 0%, 100%, 0);
946
+ --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 100%, 97%);
947
+ --t-fill-color-button-interaction-outline-dim-active:hsl(203, 94%, 94%);
948
+ --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 98%);
949
+ --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 100%, 0);
950
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
951
+ --t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
952
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 100%, 0);
953
+ --t-fill-color-button-delete-solid-default:hsl(8, 60%, 47%);
894
954
  --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
895
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
896
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
897
- --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
898
- --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
899
- --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
900
- --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
901
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
902
- --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
903
- --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
904
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
905
- --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
906
- --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
907
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
908
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
909
- --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
910
- --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
911
- --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
912
- --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
913
- --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
914
- --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
915
- --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
916
- --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
917
- --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
918
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
919
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
920
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
921
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
922
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
923
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
924
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
925
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
926
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
927
- --t-surface-color-card:hsl(0, 0%, 12%);
928
- --t-surface-color-canvas:hsl(0, 0%, 10%);
929
- --t-border-color-default-base:hsl(0, 0%, 21%);
930
- --t-border-color-default-dark:hsl(0, 0%, 25%);
931
- --t-border-color-default-darker:hsl(0, 0%, 33%);
932
- --t-border-color-default-darkest:hsl(0, 0%, 38%);
933
- --t-border-color-default-disabled:hsl(0, 0%, 21%);
934
- --t-border-color-default-dim:hsl(0, 0%, 16%);
935
- --t-border-color-default-white:hsl(0, 0%, 12%);
936
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
937
- --t-border-color-status-info:hsl(204, 100%, 35%);
955
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
956
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 95%);
957
+ --t-fill-color-button-delete-outline-dim-default:hsla(0, 0%, 100%, 0);
958
+ --t-fill-color-button-delete-outline-dim-hover:hsl(7, 60%, 97%);
959
+ --t-fill-color-button-delete-outline-dim-active:hsl(9, 59%, 93%);
960
+ --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 98%);
961
+ --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 100%, 0);
962
+ --t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
963
+ --t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
964
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
965
+ --t-fill-color-button-pill-default:hsl(0, 0%, 93%);
966
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
967
+ --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
968
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
969
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 100%, 0.1);
970
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 100%, 0.2);
971
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 100%, 0.3);
972
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 100%, 0.4);
973
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 100%, 0.5);
974
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 100%, 0.6);
975
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 100%, 0.7);
976
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 100%, 0.8);
977
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 100%, 0.9);
978
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 0%, 0.1);
979
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 0%, 0.2);
980
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 0%, 0.3);
981
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 0%, 0.4);
982
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 0%, 0.5);
983
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 0%, 0.6);
984
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 0%, 0.7);
985
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 0%, 0.8);
986
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 0%, 0.9);
987
+ --t-surface-color-card:hsl(0, 0%, 100%);
988
+ --t-surface-color-canvas:hsl(0, 0%, 100%);
989
+ --t-border-color-default-base:hsl(0, 0%, 88%);
990
+ --t-border-color-default-dark:hsl(0, 0%, 81%);
991
+ --t-border-color-default-darker:hsl(0, 0%, 68%);
992
+ --t-border-color-default-darkest:hsl(0, 0%, 58%);
993
+ --t-border-color-default-disabled:hsl(0, 0%, 88%);
994
+ --t-border-color-default-dim:hsl(0, 0%, 95%);
995
+ --t-border-color-default-white:hsl(0, 0%, 100%);
996
+ --t-border-color-status-neutral:hsl(0, 0%, 58%);
997
+ --t-border-color-status-info:hsl(204, 100%, 40%);
938
998
  --t-border-color-status-success:hsl(97, 57%, 40%);
939
999
  --t-border-color-status-warning:hsl(42, 84%, 63%);
940
1000
  --t-border-color-status-error:hsl(8, 60%, 47%);
941
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
942
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
943
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
944
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
945
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
946
- --t-border-color-control-info:hsl(204, 100%, 35%);
1001
+ --t-border-color-button-neutral:hsl(0, 0%, 88%);
1002
+ --t-border-color-button-info:hsl(204, 100%, 40%);
1003
+ --t-border-color-button-create:hsl(96, 57%, 33%);
1004
+ --t-border-color-button-delete:hsl(8, 60%, 47%);
1005
+ --t-border-color-control-neutral:hsl(0, 0%, 68%);
1006
+ --t-border-color-control-info:hsl(204, 100%, 40%);
947
1007
  --t-border-color-control-success:hsl(97, 57%, 40%);
948
1008
  --t-border-color-control-warning:hsl(42, 84%, 63%);
949
1009
  --t-border-color-control-error:hsl(8, 60%, 47%);
950
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
1010
+ --t-border-color-control-disabled:hsl(0, 0%, 88%);
1011
+ --t-form-background-color:var(--t-fill-color-neutral-100);
1012
+ --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
1013
+ --t-form-background-color-error:var(--t-fill-color-neutral-100);
1014
+ --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
1015
+ --t-form-border-color:var(--t-border-color-default-base);
1016
+ --t-form-border-color-disabled:var(--t-border-color-default-base);
1017
+ --t-form-border-color-error:var(--t-border-color-status-error);
1018
+ --t-form-border-color-focus:var(--t-fill-color-interaction-default);
1019
+ --t-form-border-color-hover:var(--t-border-color-default-dark);
1020
+ --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
1021
+ --t-form-border-radius:var(--t-border-radius-md);
1022
+ --t-form-border-width:var(--t-border-width-default);
1023
+ --t-form-font-color:var(--t-text-color-default-primary);
1024
+ --t-form-font-color-disabled:var(--t-text-color-default-disabled);
1025
+ --t-form-font-color-error:var(--t-text-color-status-error);
1026
+ --t-form-font-color-readonly:var(--t-text-color-default-primary);
1027
+ --t-form-picker-icon-color:var(--t-icon-color-default-primary);
1028
+ --t-form-placeholder-color:var(--t-text-color-default-placeholder);
1029
+ --t-border-size-default:var(--t-border-width-default);
1030
+ --t-border-size-thick:var(--t-border-width-thick);
1031
+ --t-font-weight-semi-bold:var(--t-font-weight-semibold);
1032
+ --t-icon-color-status-neutral-dark:hsl(0, 0%, 24%);
1033
+ --t-icon-color-status-info-secondary:hsl(204, 100%, 40%);
1034
+ --t-fill-color-alert-info:hsl(204, 94%, 49%);
1035
+ --t-fill-color-alert-success:hsl(122, 60%, 41%);
1036
+ --t-fill-color-alert-warning:hsl(43, 96%, 58%);
1037
+ --t-fill-color-alert-error:hsl(4, 77%, 59%);
1038
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
1039
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
1040
+ --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
1041
+ --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
1042
+ --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
1043
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
1044
+ --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
1045
+ --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
1046
+ --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
1047
+ --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
951
1048
  }
952
1049
 
953
- @media (prefers-color-scheme: dark){
954
- :root[data-color-mode="system"]{
1050
+ :root[data-color-mode="dark"]{
955
1051
  color-scheme:dark;
956
1052
  --t-text-color-default-headline:hsl(0, 0%, 94%);
957
1053
  --t-text-color-default-primary:hsl(0, 0%, 80%);
958
1054
  --t-text-color-default-secondary:hsl(0, 0%, 54%);
959
1055
  --t-text-color-default-disabled:hsl(0, 0%, 25%);
960
1056
  --t-text-color-default-placeholder:hsl(0, 0%, 38%);
961
- --t-text-color-default-inverted:hsl(0, 0%, 100%);
962
1057
  --t-text-color-interaction-primary:hsl(204, 68%, 55%);
963
1058
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
964
1059
  --t-text-color-interaction-active:hsl(204, 68%, 45%);
@@ -980,28 +1075,14 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
980
1075
  --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
981
1076
  --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
982
1077
  --t-text-color-tag-bold-gray:hsl(0, 0%, 17%);
983
- --t-text-color-tag-bold-indigo:hsl(241, 59%, 28%);
984
- --t-text-color-tag-bold-blue:hsl(224, 47%, 31%);
985
- --t-text-color-tag-bold-aqua:hsl(209, 77%, 22%);
986
- --t-text-color-tag-bold-teal:hsl(180, 95%, 15%);
987
- --t-text-color-tag-bold-green:hsl(100, 93%, 17%);
988
- --t-text-color-tag-bold-yellow:hsl(29, 100%, 23%);
989
- --t-text-color-tag-bold-orange:hsl(18, 100%, 18%);
990
- --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
991
- --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
992
- --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
993
1078
  --t-icon-color-default-primary:hsl(0, 0%, 80%);
994
1079
  --t-icon-color-default-secondary:hsl(0, 0%, 54%);
995
1080
  --t-icon-color-default-dim:hsl(0, 0%, 38%);
996
1081
  --t-icon-color-default-disabled:hsl(0, 0%, 25%);
997
- --t-icon-color-default-inverted:hsl(0, 0%, 100%);
998
1082
  --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
999
1083
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
1000
1084
  --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
1001
1085
  --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
1002
- --t-icon-color-status-success-primary:hsl(96, 57%, 33%);
1003
- --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
1004
- --t-icon-color-status-warning-primary:hsl(42, 84%, 49%);
1005
1086
  --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
1006
1087
  --t-fill-color-neutral-100:hsl(0, 0%, 10%);
1007
1088
  --t-fill-color-neutral-000:hsl(0, 0%, 98%);
@@ -1022,8 +1103,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1022
1103
  --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
1023
1104
  --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
1024
1105
  --t-fill-color-control-primary:hsl(204, 100%, 35%);
1025
- --t-fill-color-control-secondary:hsl(97, 57%, 40%);
1026
- --t-fill-color-control-error:hsl(8, 60%, 47%);
1027
1106
  --t-fill-color-control-disabled:hsl(0, 0%, 20%);
1028
1107
  --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
1029
1108
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
@@ -1031,99 +1110,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1031
1110
  --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
1032
1111
  --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
1033
1112
  --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
1034
- --t-fill-color-status-success-solid:hsl(96, 57%, 33%);
1035
1113
  --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
1036
1114
  --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
1037
- --t-fill-color-status-warning-solid:hsl(42, 84%, 63%);
1038
1115
  --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
1039
1116
  --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
1040
- --t-fill-color-status-error-solid:hsl(8, 60%, 47%);
1041
1117
  --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
1042
1118
  --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
1043
1119
  --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
1044
- --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
1045
- --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
1046
- --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
1047
- --t-fill-color-product-accounts-040:hsl(210, 54%, 60%);
1048
- --t-fill-color-product-accounts-050:hsl(210, 55%, 50%);
1049
- --t-fill-color-product-accounts-060:hsl(210, 65%, 40%);
1050
- --t-fill-color-product-accounts-070:hsl(211, 70%, 32%);
1051
- --t-fill-color-product-accounts-080:hsl(210, 75%, 25%);
1052
- --t-fill-color-product-calendar-010:hsl(8, 61%, 90%);
1053
- --t-fill-color-product-calendar-020:hsl(8, 61%, 70%);
1054
- --t-fill-color-product-calendar-030:hsl(8, 72%, 59%);
1055
- --t-fill-color-product-calendar-040:hsl(8, 65%, 55%);
1056
- --t-fill-color-product-calendar-050:hsl(9, 61%, 50%);
1057
- --t-fill-color-product-calendar-060:hsl(8, 65%, 42%);
1058
- --t-fill-color-product-calendar-070:hsl(7, 65%, 34%);
1059
- --t-fill-color-product-calendar-080:hsl(9, 61%, 27%);
1060
- --t-fill-color-product-checkins-010:hsl(285, 20%, 92%);
1061
- --t-fill-color-product-checkins-020:hsl(283, 22%, 75%);
1062
- --t-fill-color-product-checkins-030:hsl(284, 22%, 64%);
1063
- --t-fill-color-product-checkins-040:hsl(283, 22%, 55%);
1064
- --t-fill-color-product-checkins-050:hsl(283, 22%, 48%);
1065
- --t-fill-color-product-checkins-060:hsl(283, 27%, 42%);
1066
- --t-fill-color-product-checkins-070:hsl(284, 33%, 34%);
1067
- --t-fill-color-product-checkins-080:hsl(283, 33%, 27%);
1068
- --t-fill-color-product-giving-010:hsl(41, 95%, 93%);
1069
- --t-fill-color-product-giving-020:hsl(42, 95%, 83%);
1070
- --t-fill-color-product-giving-030:hsl(43, 95%, 75%);
1071
- --t-fill-color-product-giving-040:hsl(43, 88%, 70%);
1072
- --t-fill-color-product-giving-050:hsl(43, 88%, 64%);
1073
- --t-fill-color-product-giving-060:hsl(42, 84%, 55%);
1074
- --t-fill-color-product-giving-070:hsl(42, 84%, 48%);
1075
- --t-fill-color-product-giving-080:hsl(42, 100%, 40%);
1076
- --t-fill-color-product-groups-010:hsl(18, 95%, 92%);
1077
- --t-fill-color-product-groups-020:hsl(17, 96%, 80%);
1078
- --t-fill-color-product-groups-030:hsl(17, 96%, 70%);
1079
- --t-fill-color-product-groups-040:hsl(17, 96%, 63%);
1080
- --t-fill-color-product-groups-050:hsl(17, 88%, 55%);
1081
- --t-fill-color-product-groups-060:hsl(12, 70%, 48%);
1082
- --t-fill-color-product-groups-070:hsl(12, 70%, 40%);
1083
- --t-fill-color-product-groups-080:hsl(14, 70%, 34%);
1084
- --t-fill-color-product-home-010:hsl(221, 89%, 93%);
1085
- --t-fill-color-product-home-020:hsl(221, 91%, 91%);
1086
- --t-fill-color-product-home-030:hsl(221, 91%, 87%);
1087
- --t-fill-color-product-home-040:hsl(221, 91%, 62%);
1088
- --t-fill-color-product-home-050:hsl(221, 91%, 55%);
1089
- --t-fill-color-product-home-060:hsl(221, 90%, 50%);
1090
- --t-fill-color-product-home-070:hsl(221, 90%, 45%);
1091
- --t-fill-color-product-home-080:hsl(218, 84%, 25%);
1092
- --t-fill-color-product-people-010:hsl(219, 73%, 91%);
1093
- --t-fill-color-product-people-020:hsl(220, 69%, 81%);
1094
- --t-fill-color-product-people-030:hsl(221, 73%, 71%);
1095
- --t-fill-color-product-people-040:hsl(221, 73%, 65%);
1096
- --t-fill-color-product-people-050:hsl(220, 74%, 57%);
1097
- --t-fill-color-product-people-060:hsl(220, 68%, 51%);
1098
- --t-fill-color-product-people-070:hsl(220, 68%, 41%);
1099
- --t-fill-color-product-people-080:hsl(221, 68%, 31%);
1100
- --t-fill-color-product-publishing-010:hsl(220, 4%, 86%);
1101
- --t-fill-color-product-publishing-020:hsl(222, 10%, 60%);
1102
- --t-fill-color-product-publishing-030:hsl(221, 11%, 50%);
1103
- --t-fill-color-product-publishing-040:hsl(222, 12%, 39%);
1104
- --t-fill-color-product-publishing-050:hsl(220, 12%, 31%);
1105
- --t-fill-color-product-publishing-060:hsl(220, 11%, 26%);
1106
- --t-fill-color-product-publishing-070:hsl(217, 12%, 22%);
1107
- --t-fill-color-product-publishing-080:hsl(214, 11%, 12%);
1108
- --t-fill-color-product-registrations-010:hsl(173, 28%, 89%);
1109
- --t-fill-color-product-registrations-020:hsl(176, 38%, 78%);
1110
- --t-fill-color-product-registrations-030:hsl(176, 37%, 68%);
1111
- --t-fill-color-product-registrations-040:hsl(176, 37%, 60%);
1112
- --t-fill-color-product-registrations-050:hsl(175, 36%, 43%);
1113
- --t-fill-color-product-registrations-060:hsl(175, 51%, 34%);
1114
- --t-fill-color-product-registrations-070:hsl(174, 51%, 28%);
1115
- --t-fill-color-product-registrations-080:hsl(175, 52%, 22%);
1116
- --t-fill-color-product-services-010:hsl(88, 31%, 88%);
1117
- --t-fill-color-product-services-020:hsl(88, 39%, 75%);
1118
- --t-fill-color-product-services-030:hsl(88, 39%, 66%);
1119
- --t-fill-color-product-services-040:hsl(88, 40%, 54%);
1120
- --t-fill-color-product-services-050:hsl(88, 45%, 41%);
1121
- --t-fill-color-product-services-060:hsl(89, 62%, 31%);
1122
- --t-fill-color-product-services-070:hsl(89, 62%, 26%);
1123
- --t-fill-color-product-services-080:hsl(89, 63%, 21%);
1124
- --t-fill-color-product-staff-base:hsl(328, 100%, 45%);
1125
- --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
1126
- --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
1127
1120
  --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1128
1121
  --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1129
1122
  --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
@@ -1150,44 +1143,24 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1150
1143
  --t-fill-color-tag-gray-040:hsl(0, 0%, 58%);
1151
1144
  --t-fill-color-tag-blue-010:hsl(229, 22%, 24%);
1152
1145
  --t-fill-color-tag-blue-020:hsl(233, 27%, 23%);
1153
- --t-fill-color-tag-blue-030:hsl(220, 98%, 81%);
1154
- --t-fill-color-tag-blue-040:hsl(220, 98%, 74%);
1155
1146
  --t-fill-color-tag-aqua-010:hsl(217, 25%, 24%);
1156
1147
  --t-fill-color-tag-aqua-020:hsl(222, 27%, 22%);
1157
- --t-fill-color-tag-aqua-030:hsl(201, 76%, 71%);
1158
- --t-fill-color-tag-aqua-040:hsl(200, 75%, 64%);
1159
1148
  --t-fill-color-tag-teal-010:hsl(150, 20%, 24%);
1160
1149
  --t-fill-color-tag-teal-020:hsl(147, 16%, 22%);
1161
- --t-fill-color-tag-teal-030:hsl(169, 62%, 64%);
1162
- --t-fill-color-tag-teal-040:hsl(169, 62%, 56%);
1163
1150
  --t-fill-color-tag-green-010:hsl(108, 21%, 22%);
1164
1151
  --t-fill-color-tag-green-020:hsl(109, 22%, 20%);
1165
- --t-fill-color-tag-green-030:hsl(112, 57%, 65%);
1166
- --t-fill-color-tag-green-040:hsl(112, 57%, 57%);
1167
1152
  --t-fill-color-tag-yellow-010:hsl(38, 27%, 23%);
1168
1153
  --t-fill-color-tag-yellow-020:hsl(37, 27%, 21%);
1169
- --t-fill-color-tag-yellow-030:hsl(44, 92%, 69%);
1170
- --t-fill-color-tag-yellow-040:hsl(44, 93%, 61%);
1171
1154
  --t-fill-color-tag-orange-010:hsl(12, 25%, 23%);
1172
1155
  --t-fill-color-tag-orange-020:hsl(10, 29%, 21%);
1173
- --t-fill-color-tag-orange-030:hsl(21, 86%, 72%);
1174
- --t-fill-color-tag-orange-040:hsl(21, 86%, 64%);
1175
1156
  --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
1176
1157
  --t-fill-color-tag-pink-020:hsl(338, 25%, 21%);
1177
- --t-fill-color-tag-pink-030:hsl(324, 78%, 77%);
1178
- --t-fill-color-tag-pink-040:hsl(324, 76%, 70%);
1179
1158
  --t-fill-color-tag-purple-010:hsl(260, 25%, 24%);
1180
1159
  --t-fill-color-tag-purple-020:hsl(254, 27%, 22%);
1181
- --t-fill-color-tag-purple-030:hsl(273, 62%, 76%);
1182
- --t-fill-color-tag-purple-040:hsl(273, 62%, 70%);
1183
1160
  --t-fill-color-tag-magenta-010:hsl(276, 18%, 22%);
1184
1161
  --t-fill-color-tag-magenta-020:hsl(277, 18%, 20%);
1185
- --t-fill-color-tag-magenta-030:hsl(291, 48%, 70%);
1186
- --t-fill-color-tag-magenta-040:hsl(292, 48%, 63%);
1187
1162
  --t-fill-color-tag-indigo-010:hsl(233, 30%, 27%);
1188
1163
  --t-fill-color-tag-indigo-020:hsl(233, 30%, 23%);
1189
- --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
1190
- --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
1191
1164
  --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
1192
1165
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
1193
1166
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
@@ -1200,9 +1173,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1200
1173
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
1201
1174
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
1202
1175
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
1203
- --t-fill-color-button-neutral-responsive-header-default:hsla(0, 0%, 0%, 0.1);
1204
- --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
1205
- --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
1206
1176
  --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
1207
1177
  --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
1208
1178
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
@@ -1217,7 +1187,6 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1217
1187
  --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
1218
1188
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
1219
1189
  --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
1220
- --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
1221
1190
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
1222
1191
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
1223
1192
  --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
@@ -1261,442 +1230,207 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1261
1230
  --t-border-color-default-white:hsl(0, 0%, 12%);
1262
1231
  --t-border-color-status-neutral:hsl(0, 0%, 38%);
1263
1232
  --t-border-color-status-info:hsl(204, 100%, 35%);
1264
- --t-border-color-status-success:hsl(97, 57%, 40%);
1265
- --t-border-color-status-warning:hsl(42, 84%, 63%);
1266
- --t-border-color-status-error:hsl(8, 60%, 47%);
1267
1233
  --t-border-color-button-neutral:hsl(0, 0%, 19%);
1268
1234
  --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
1269
1235
  --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
1270
1236
  --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
1271
1237
  --t-border-color-control-neutral:hsl(0, 0%, 33%);
1272
1238
  --t-border-color-control-info:hsl(204, 100%, 35%);
1273
- --t-border-color-control-success:hsl(97, 57%, 40%);
1274
- --t-border-color-control-warning:hsl(42, 84%, 63%);
1275
- --t-border-color-control-error:hsl(8, 60%, 47%);
1276
1239
  --t-border-color-control-disabled:hsl(0, 0%, 21%);
1277
1240
  }
1278
- }
1279
1241
 
1280
- :root{
1281
- --t-border-radius-sm:2px;
1282
- --t-border-radius-md:4px;
1283
- --t-border-radius-lg:8px;
1284
- --t-border-radius-xl:16px;
1285
- --t-border-radius-round:56px;
1286
- --t-border-radius-default:4px;
1287
- --t-border-width-default:1px;
1288
- --t-border-width-thick:2px;
1289
- --t-spacing-1:8px;
1290
- --t-spacing-2:16px;
1291
- --t-spacing-3:24px;
1292
- --t-spacing-4:32px;
1293
- --t-spacing-5:40px;
1294
- --t-spacing-6:48px;
1295
- --t-spacing-7:56px;
1296
- --t-spacing-fourth:2px;
1297
- --t-spacing-half:4px;
1298
- --t-element-size-3xl:48px;
1299
- --t-element-size-2xl:32px;
1300
- --t-element-size-xl:24px;
1301
- --t-element-size-lg:18px;
1302
- --t-element-size-md:16px;
1303
- --t-element-size-sm:14px;
1304
- --t-element-size-xs:12px;
1305
- --t-font-size-4xl:32px;
1306
- --t-font-size-3xl:28px;
1307
- --t-font-size-2xl:24px;
1308
- --t-font-size-xl:20px;
1309
- --t-font-size-lg:18px;
1310
- --t-font-size-md:16px;
1311
- --t-font-size-sm:14px;
1312
- --t-font-size-xs:12px;
1313
- --t-font-size-2xs:10px;
1314
- --t-font-weight-normal:400;
1315
- --t-font-weight-medium:500;
1316
- --t-font-weight-semibold:600;
1317
- --t-font-weight-bold:700;
1318
- --t-container-size-xl:48px;
1319
- --t-container-size-lg:40px;
1320
- --t-container-size-md:32px;
1321
- --t-container-size-sm:24px;
1322
- --t-container-size-xs:20px;
1323
- --t-avatar-size-20:20px;
1324
- --t-avatar-size-24:24px;
1325
- --t-avatar-size-36:36px;
1326
- --t-avatar-size-48:48px;
1327
- --t-avatar-size-72:72px;
1328
- --t-avatar-size-112:112px;
1329
- --t-text-color-default-headline:hsl(0, 0%, 12%);
1330
- --t-text-color-default-primary:hsl(0, 0%, 24%);
1331
- --t-text-color-default-secondary:hsl(0, 0%, 42%);
1332
- --t-text-color-default-disabled:hsl(0, 0%, 81%);
1333
- --t-text-color-default-placeholder:hsl(0, 0%, 58%);
1334
- --t-text-color-default-inverted:hsl(0, 0%, 100%);
1335
- --t-text-color-interaction-primary:hsl(204, 100%, 40%);
1336
- --t-text-color-interaction-hover:hsl(204, 100%, 35%);
1337
- --t-text-color-interaction-active:hsl(204, 100%, 30%);
1338
- --t-text-color-interaction-visited:hsl(204, 100%, 30%);
1339
- --t-text-color-status-neutral:hsl(0, 0%, 24%);
1340
- --t-text-color-status-info:hsl(204, 100%, 35%);
1341
- --t-text-color-status-success:hsl(97, 57%, 28%);
1342
- --t-text-color-status-warning:hsl(42, 100%, 29%);
1343
- --t-text-color-status-error:hsl(8, 60%, 45%);
1344
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 24%);
1345
- --t-text-color-tag-subtle-blue:hsl(224, 47%, 31%);
1346
- --t-text-color-tag-subtle-indigo:hsl(241, 59%, 28%);
1347
- --t-text-color-tag-subtle-aqua:hsl(209, 77%, 22%);
1348
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 15%);
1349
- --t-text-color-tag-subtle-green:hsl(100, 93%, 17%);
1350
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 23%);
1351
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 18%);
1352
- --t-text-color-tag-subtle-pink:hsl(327, 88%, 20%);
1353
- --t-text-color-tag-subtle-purple:hsl(268, 71%, 27%);
1354
- --t-text-color-tag-subtle-magenta:hsl(285, 71%, 20%);
1355
- --t-text-color-tag-bold-gray:hsl(0, 0%, 24%);
1356
- --t-text-color-tag-bold-indigo:hsl(241, 59%, 28%);
1357
- --t-text-color-tag-bold-blue:hsl(224, 47%, 31%);
1358
- --t-text-color-tag-bold-aqua:hsl(209, 77%, 22%);
1359
- --t-text-color-tag-bold-teal:hsl(180, 95%, 15%);
1360
- --t-text-color-tag-bold-green:hsl(100, 93%, 17%);
1361
- --t-text-color-tag-bold-yellow:hsl(29, 100%, 23%);
1362
- --t-text-color-tag-bold-orange:hsl(18, 100%, 18%);
1363
- --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
1364
- --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
1365
- --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
1366
- --t-icon-color-default-primary:hsl(0, 0%, 24%);
1367
- --t-icon-color-default-secondary:hsl(0, 0%, 42%);
1368
- --t-icon-color-default-dim:hsl(0, 0%, 58%);
1369
- --t-icon-color-default-disabled:hsl(0, 0%, 81%);
1370
- --t-icon-color-default-inverted:hsl(0, 0%, 100%);
1371
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 42%);
1372
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 58%);
1373
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 24%);
1374
- --t-icon-color-status-info-primary:hsl(204, 100%, 40%);
1375
- --t-icon-color-status-success-primary:hsl(96, 57%, 33%);
1376
- --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
1377
- --t-icon-color-status-warning-primary:hsl(42, 84%, 49%);
1378
- --t-icon-color-status-error-primary:hsl(8, 60%, 47%);
1379
- --t-fill-color-neutral-100:hsl(0, 0%, 100%);
1380
- --t-fill-color-neutral-000:hsl(0, 0%, 12%);
1381
- --t-fill-color-neutral-010:hsl(0, 0%, 24%);
1382
- --t-fill-color-neutral-020:hsl(0, 0%, 42%);
1383
- --t-fill-color-neutral-025:hsl(0, 0%, 50%);
1384
- --t-fill-color-neutral-030:hsl(0, 0%, 58%);
1385
- --t-fill-color-neutral-040:hsl(0, 0%, 81%);
1386
- --t-fill-color-neutral-050:hsl(0, 0%, 88%);
1387
- --t-fill-color-neutral-060:hsl(0, 0%, 93%);
1388
- --t-fill-color-neutral-070:hsl(0, 0%, 95%);
1389
- --t-fill-color-neutral-080:hsl(0, 0%, 97%);
1390
- --t-fill-color-neutral-090:hsl(0, 0%, 98%);
1391
- --t-fill-color-interaction-default:hsl(204, 100%, 40%);
1392
- --t-fill-color-interaction-hover:hsl(204, 100%, 35%);
1393
- --t-fill-color-interaction-active:hsl(204, 100%, 30%);
1394
- --t-fill-color-interaction-disabled:hsl(0, 0%, 81%);
1395
- --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
1396
- --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
1397
- --t-fill-color-control-primary:hsl(204, 100%, 40%);
1398
- --t-fill-color-control-secondary:hsl(97, 57%, 40%);
1399
- --t-fill-color-control-error:hsl(8, 60%, 47%);
1400
- --t-fill-color-control-disabled:hsl(0, 0%, 81%);
1401
- --t-fill-color-status-neutral-solid:hsl(0, 0%, 42%);
1402
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 93%);
1403
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 97%);
1404
- --t-fill-color-status-info-solid:hsl(204, 100%, 40%);
1405
- --t-fill-color-status-info-ghost:hsl(203, 94%, 94%);
1406
- --t-fill-color-status-info-dim:hsl(204, 100%, 97%);
1407
- --t-fill-color-status-success-solid:hsl(96, 57%, 33%);
1408
- --t-fill-color-status-success-ghost:hsl(97, 57%, 90%);
1409
- --t-fill-color-status-success-dim:hsl(96, 60%, 95%);
1410
- --t-fill-color-status-warning-solid:hsl(42, 84%, 63%);
1411
- --t-fill-color-status-warning-ghost:hsl(42, 87%, 94%);
1412
- --t-fill-color-status-warning-dim:hsl(42, 87%, 97%);
1413
- --t-fill-color-status-error-solid:hsl(8, 60%, 47%);
1414
- --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
1415
- --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
1416
- --t-fill-color-tooltip-primary:hsla(0, 0%, 12%, 0.9);
1417
- --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
1418
- --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
1419
- --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
1420
- --t-fill-color-product-accounts-040:hsl(210, 54%, 60%);
1421
- --t-fill-color-product-accounts-050:hsl(210, 55%, 50%);
1422
- --t-fill-color-product-accounts-060:hsl(210, 65%, 40%);
1423
- --t-fill-color-product-accounts-070:hsl(211, 70%, 32%);
1424
- --t-fill-color-product-accounts-080:hsl(210, 75%, 25%);
1425
- --t-fill-color-product-calendar-010:hsl(8, 61%, 90%);
1426
- --t-fill-color-product-calendar-020:hsl(8, 61%, 70%);
1427
- --t-fill-color-product-calendar-030:hsl(8, 72%, 59%);
1428
- --t-fill-color-product-calendar-040:hsl(8, 65%, 55%);
1429
- --t-fill-color-product-calendar-050:hsl(9, 61%, 50%);
1430
- --t-fill-color-product-calendar-060:hsl(8, 65%, 42%);
1431
- --t-fill-color-product-calendar-070:hsl(7, 65%, 34%);
1432
- --t-fill-color-product-calendar-080:hsl(9, 61%, 27%);
1433
- --t-fill-color-product-checkins-010:hsl(285, 20%, 92%);
1434
- --t-fill-color-product-checkins-020:hsl(283, 22%, 75%);
1435
- --t-fill-color-product-checkins-030:hsl(284, 22%, 64%);
1436
- --t-fill-color-product-checkins-040:hsl(283, 22%, 55%);
1437
- --t-fill-color-product-checkins-050:hsl(283, 22%, 48%);
1438
- --t-fill-color-product-checkins-060:hsl(283, 27%, 42%);
1439
- --t-fill-color-product-checkins-070:hsl(284, 33%, 34%);
1440
- --t-fill-color-product-checkins-080:hsl(283, 33%, 27%);
1441
- --t-fill-color-product-giving-010:hsl(41, 95%, 93%);
1442
- --t-fill-color-product-giving-020:hsl(42, 95%, 83%);
1443
- --t-fill-color-product-giving-030:hsl(43, 95%, 75%);
1444
- --t-fill-color-product-giving-040:hsl(43, 88%, 70%);
1445
- --t-fill-color-product-giving-050:hsl(43, 88%, 64%);
1446
- --t-fill-color-product-giving-060:hsl(42, 84%, 55%);
1447
- --t-fill-color-product-giving-070:hsl(42, 84%, 48%);
1448
- --t-fill-color-product-giving-080:hsl(42, 100%, 40%);
1449
- --t-fill-color-product-groups-010:hsl(18, 95%, 92%);
1450
- --t-fill-color-product-groups-020:hsl(17, 96%, 80%);
1451
- --t-fill-color-product-groups-030:hsl(17, 96%, 70%);
1452
- --t-fill-color-product-groups-040:hsl(17, 96%, 63%);
1453
- --t-fill-color-product-groups-050:hsl(17, 88%, 55%);
1454
- --t-fill-color-product-groups-060:hsl(12, 70%, 48%);
1455
- --t-fill-color-product-groups-070:hsl(12, 70%, 40%);
1456
- --t-fill-color-product-groups-080:hsl(14, 70%, 34%);
1457
- --t-fill-color-product-home-010:hsl(221, 89%, 93%);
1458
- --t-fill-color-product-home-020:hsl(221, 91%, 91%);
1459
- --t-fill-color-product-home-030:hsl(221, 91%, 87%);
1460
- --t-fill-color-product-home-040:hsl(221, 91%, 62%);
1461
- --t-fill-color-product-home-050:hsl(221, 91%, 55%);
1462
- --t-fill-color-product-home-060:hsl(221, 90%, 50%);
1463
- --t-fill-color-product-home-070:hsl(221, 90%, 45%);
1464
- --t-fill-color-product-home-080:hsl(218, 84%, 25%);
1465
- --t-fill-color-product-people-010:hsl(219, 73%, 91%);
1466
- --t-fill-color-product-people-020:hsl(220, 69%, 81%);
1467
- --t-fill-color-product-people-030:hsl(221, 73%, 71%);
1468
- --t-fill-color-product-people-040:hsl(221, 73%, 65%);
1469
- --t-fill-color-product-people-050:hsl(220, 74%, 57%);
1470
- --t-fill-color-product-people-060:hsl(220, 68%, 51%);
1471
- --t-fill-color-product-people-070:hsl(220, 68%, 41%);
1472
- --t-fill-color-product-people-080:hsl(221, 68%, 31%);
1473
- --t-fill-color-product-publishing-010:hsl(220, 4%, 86%);
1474
- --t-fill-color-product-publishing-020:hsl(222, 10%, 60%);
1475
- --t-fill-color-product-publishing-030:hsl(221, 11%, 50%);
1476
- --t-fill-color-product-publishing-040:hsl(222, 12%, 39%);
1477
- --t-fill-color-product-publishing-050:hsl(220, 12%, 31%);
1478
- --t-fill-color-product-publishing-060:hsl(220, 11%, 26%);
1479
- --t-fill-color-product-publishing-070:hsl(217, 12%, 22%);
1480
- --t-fill-color-product-publishing-080:hsl(214, 11%, 12%);
1481
- --t-fill-color-product-registrations-010:hsl(173, 28%, 89%);
1482
- --t-fill-color-product-registrations-020:hsl(176, 38%, 78%);
1483
- --t-fill-color-product-registrations-030:hsl(176, 37%, 68%);
1484
- --t-fill-color-product-registrations-040:hsl(176, 37%, 60%);
1485
- --t-fill-color-product-registrations-050:hsl(175, 36%, 43%);
1486
- --t-fill-color-product-registrations-060:hsl(175, 51%, 34%);
1487
- --t-fill-color-product-registrations-070:hsl(174, 51%, 28%);
1488
- --t-fill-color-product-registrations-080:hsl(175, 52%, 22%);
1489
- --t-fill-color-product-services-010:hsl(88, 31%, 88%);
1490
- --t-fill-color-product-services-020:hsl(88, 39%, 75%);
1491
- --t-fill-color-product-services-030:hsl(88, 39%, 66%);
1492
- --t-fill-color-product-services-040:hsl(88, 40%, 54%);
1493
- --t-fill-color-product-services-050:hsl(88, 45%, 41%);
1494
- --t-fill-color-product-services-060:hsl(89, 62%, 31%);
1495
- --t-fill-color-product-services-070:hsl(89, 62%, 26%);
1496
- --t-fill-color-product-services-080:hsl(89, 63%, 21%);
1497
- --t-fill-color-product-staff-base:hsl(328, 100%, 45%);
1498
- --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
1499
- --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
1500
- --t-fill-color-product-accounts-gradient-brand:linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
1501
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
1502
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
1503
- --t-fill-color-product-api-gradient-brand:linear-gradient(180deg, hsl(221, 100%, 62%), hsl(217, 100%, 52%));
1504
- --t-fill-color-product-calendar-gradient-brand:linear-gradient(135deg, hsl(10, 88%, 58%), hsl(8, 60%, 51%));
1505
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(5, 80%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
1506
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(8, 100%, 94%), hsl(285, 18%, 91%), hsl(204, 67%, 92%));
1507
- --t-fill-color-product-cc-gradient-brand:linear-gradient(135deg, hsl(207, 90%, 61%), hsl(123, 38%, 57%));
1508
- --t-fill-color-product-checkins-gradient-brand:linear-gradient(135deg, hsl(283, 38%, 59%), hsl(284, 23%, 48%));
1509
- --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(283, 21%, 77%) 25%, hsl(227, 36%, 78%) 60%, hsl(204, 67%, 73%));
1510
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 22%, 93%), hsl(225, 35%, 93%) 42%, hsl(204, 67%, 92%));
1511
- --t-fill-color-product-giving-gradient-brand:linear-gradient(90deg, hsl(46, 91%, 55%), hsl(41, 89%, 55%));
1512
- --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(42, 84%, 80%), hsl(255, 21%, 89%) 58.5%, hsl(204, 67%, 73%));
1513
- --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(42, 87%, 94%), hsl(260, 18%, 97%) 58.5%, hsl(204, 67%, 92%));
1514
- --t-fill-color-product-groups-gradient-brand:linear-gradient(135deg, hsl(30, 100%, 59%), hsl(19, 97%, 60%));
1515
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(17, 88%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
1516
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(18, 87%, 94%), hsl(300, 12%, 92%), hsl(204, 67%, 92%));
1517
- --t-fill-color-product-headcounts-gradient-brand:linear-gradient(135deg, hsl(283, 37%, 59%), hsl(285, 23%, 47%));
1518
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
1519
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
1520
- --t-fill-color-product-musicstand-gradient-brand:linear-gradient(135deg, hsl(204, 64%, 51%), hsl(211, 55%, 51%));
1521
- --t-fill-color-product-people-gradient-brand:linear-gradient(135deg, hsl(205, 86%, 57%), hsl(220, 76%, 57%));
1522
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
1523
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
1524
- --t-fill-color-product-publishing-gradient-brand:linear-gradient(135deg, hsl(240, 4%, 49%), hsl(240, 6%, 39%));
1525
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(217, 5%, 69%), hsl(214, 15%, 69%) 45%, hsl(204, 67%, 73%));
1526
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(210, 4%, 91%), hsl(214, 15%, 91%) 45%, hsl(204, 67%, 92%));
1527
- --t-fill-color-product-registrations-gradient-brand:linear-gradient(135deg, hsl(168, 46%, 48%), hsl(175, 35%, 43%));
1528
- --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(175, 27%, 74%), hsl(196, 46%, 73%) 39.5%, hsl(204, 67%, 73%));
1529
- --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(175, 28%, 92%), hsl(196, 46%, 92%) 39.5%, hsl(204, 67%, 92%));
1530
- --t-fill-color-product-services-gradient-brand:linear-gradient(135deg, hsl(96, 49%, 47%), hsl(89, 52%, 39%));
1531
- --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(89, 31%, 73%), hsl(122, 29%, 78%) 39.5%, hsl(204, 67%, 73%));
1532
- --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(88, 32%, 92%), hsl(126, 29%, 93%) 39.5%, hsl(204, 67%, 92%));
1533
- --t-fill-color-tag-gray-010:hsl(0, 0%, 93%);
1534
- --t-fill-color-tag-gray-020:hsl(0, 0%, 88%);
1535
- --t-fill-color-tag-gray-030:hsl(0, 0%, 88%);
1536
- --t-fill-color-tag-gray-040:hsl(0, 0%, 81%);
1537
- --t-fill-color-tag-blue-010:hsl(220, 100%, 95%);
1538
- --t-fill-color-tag-blue-020:hsl(221, 100%, 88%);
1539
- --t-fill-color-tag-blue-030:hsl(220, 98%, 81%);
1540
- --t-fill-color-tag-blue-040:hsl(220, 98%, 74%);
1541
- --t-fill-color-tag-aqua-010:hsl(200, 82%, 89%);
1542
- --t-fill-color-tag-aqua-020:hsl(200, 82%, 82%);
1543
- --t-fill-color-tag-aqua-030:hsl(201, 76%, 71%);
1544
- --t-fill-color-tag-aqua-040:hsl(200, 75%, 64%);
1545
- --t-fill-color-tag-teal-010:hsl(163, 53%, 83%);
1546
- --t-fill-color-tag-teal-020:hsl(164, 52%, 76%);
1547
- --t-fill-color-tag-teal-030:hsl(169, 62%, 64%);
1548
- --t-fill-color-tag-teal-040:hsl(169, 62%, 56%);
1549
- --t-fill-color-tag-green-010:hsl(98, 59%, 85%);
1550
- --t-fill-color-tag-green-020:hsl(99, 59%, 78%);
1551
- --t-fill-color-tag-green-030:hsl(112, 57%, 65%);
1552
- --t-fill-color-tag-green-040:hsl(112, 57%, 57%);
1553
- --t-fill-color-tag-yellow-010:hsl(45, 77%, 85%);
1554
- --t-fill-color-tag-yellow-020:hsl(44, 78%, 77%);
1555
- --t-fill-color-tag-yellow-030:hsl(44, 92%, 69%);
1556
- --t-fill-color-tag-yellow-040:hsl(44, 93%, 61%);
1557
- --t-fill-color-tag-orange-010:hsl(22, 89%, 89%);
1558
- --t-fill-color-tag-orange-020:hsl(21, 89%, 82%);
1559
- --t-fill-color-tag-orange-030:hsl(21, 86%, 72%);
1560
- --t-fill-color-tag-orange-040:hsl(21, 86%, 64%);
1561
- --t-fill-color-tag-pink-010:hsl(311, 66%, 92%);
1562
- --t-fill-color-tag-pink-020:hsl(310, 64%, 85%);
1563
- --t-fill-color-tag-pink-030:hsl(324, 78%, 77%);
1564
- --t-fill-color-tag-pink-040:hsl(324, 76%, 70%);
1565
- --t-fill-color-tag-purple-010:hsl(259, 74%, 93%);
1566
- --t-fill-color-tag-purple-020:hsl(259, 74%, 85%);
1567
- --t-fill-color-tag-purple-030:hsl(273, 62%, 76%);
1568
- --t-fill-color-tag-purple-040:hsl(273, 62%, 70%);
1569
- --t-fill-color-tag-magenta-010:hsl(294, 37%, 90%);
1570
- --t-fill-color-tag-magenta-020:hsl(291, 40%, 83%);
1571
- --t-fill-color-tag-magenta-030:hsl(291, 48%, 70%);
1572
- --t-fill-color-tag-magenta-040:hsl(292, 48%, 63%);
1573
- --t-fill-color-tag-indigo-010:hsl(234, 78%, 93%);
1574
- --t-fill-color-tag-indigo-020:hsl(233, 79%, 87%);
1575
- --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
1576
- --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
1577
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 93%);
1578
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
1579
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
1580
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 95%);
1581
- --t-fill-color-button-neutral-outline-dim-default:hsla(0, 0%, 100%, 0);
1582
- --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 95%);
1583
- --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 93%);
1584
- --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 98%);
1585
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 100%, 0);
1586
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
1587
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
1588
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 100%, 0);
1589
- --t-fill-color-button-neutral-responsive-header-default:hsla(0, 0%, 0%, 0.1);
1590
- --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
1591
- --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
1592
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 0%, 0.05);
1593
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 40%);
1594
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
1595
- --t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
1596
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 95%);
1597
- --t-fill-color-button-interaction-outline-dim-default:hsla(0, 0%, 100%, 0);
1598
- --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 100%, 97%);
1599
- --t-fill-color-button-interaction-outline-dim-active:hsl(203, 94%, 94%);
1600
- --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 98%);
1601
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 100%, 0);
1602
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
1603
- --t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
1604
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 100%, 0);
1605
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 47%);
1606
- --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
1607
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
1608
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 95%);
1609
- --t-fill-color-button-delete-outline-dim-default:hsla(0, 0%, 100%, 0);
1610
- --t-fill-color-button-delete-outline-dim-hover:hsl(7, 60%, 97%);
1611
- --t-fill-color-button-delete-outline-dim-active:hsl(9, 59%, 93%);
1612
- --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 98%);
1613
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 100%, 0);
1614
- --t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
1615
- --t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
1616
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
1617
- --t-fill-color-button-pill-default:hsl(0, 0%, 93%);
1618
- --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
1619
- --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
1620
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
1621
- --t-fill-color-transparency-light-010:hsla(0, 0%, 100%, 0.1);
1622
- --t-fill-color-transparency-light-020:hsla(0, 0%, 100%, 0.2);
1623
- --t-fill-color-transparency-light-030:hsla(0, 0%, 100%, 0.3);
1624
- --t-fill-color-transparency-light-040:hsla(0, 0%, 100%, 0.4);
1625
- --t-fill-color-transparency-light-050:hsla(0, 0%, 100%, 0.5);
1626
- --t-fill-color-transparency-light-060:hsla(0, 0%, 100%, 0.6);
1627
- --t-fill-color-transparency-light-070:hsla(0, 0%, 100%, 0.7);
1628
- --t-fill-color-transparency-light-080:hsla(0, 0%, 100%, 0.8);
1629
- --t-fill-color-transparency-light-090:hsla(0, 0%, 100%, 0.9);
1630
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 0%, 0.1);
1631
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 0%, 0.2);
1632
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 0%, 0.3);
1633
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 0%, 0.4);
1634
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 0%, 0.5);
1635
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 0%, 0.6);
1636
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 0%, 0.7);
1637
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 0%, 0.8);
1638
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 0%, 0.9);
1639
- --t-surface-color-card:hsl(0, 0%, 100%);
1640
- --t-surface-color-canvas:hsl(0, 0%, 100%);
1641
- --t-border-color-default-base:hsl(0, 0%, 88%);
1642
- --t-border-color-default-dark:hsl(0, 0%, 81%);
1643
- --t-border-color-default-darker:hsl(0, 0%, 68%);
1644
- --t-border-color-default-darkest:hsl(0, 0%, 58%);
1645
- --t-border-color-default-disabled:hsl(0, 0%, 88%);
1646
- --t-border-color-default-dim:hsl(0, 0%, 95%);
1647
- --t-border-color-default-white:hsl(0, 0%, 100%);
1648
- --t-border-color-status-neutral:hsl(0, 0%, 58%);
1649
- --t-border-color-status-info:hsl(204, 100%, 40%);
1650
- --t-border-color-status-success:hsl(97, 57%, 40%);
1651
- --t-border-color-status-warning:hsl(42, 84%, 63%);
1652
- --t-border-color-status-error:hsl(8, 60%, 47%);
1653
- --t-border-color-button-neutral:hsl(0, 0%, 88%);
1654
- --t-border-color-button-info:hsl(204, 100%, 40%);
1655
- --t-border-color-button-create:hsl(96, 57%, 33%);
1656
- --t-border-color-button-delete:hsl(8, 60%, 47%);
1657
- --t-border-color-control-neutral:hsl(0, 0%, 68%);
1658
- --t-border-color-control-info:hsl(204, 100%, 40%);
1659
- --t-border-color-control-success:hsl(97, 57%, 40%);
1660
- --t-border-color-control-warning:hsl(42, 84%, 63%);
1661
- --t-border-color-control-error:hsl(8, 60%, 47%);
1662
- --t-border-color-control-disabled:hsl(0, 0%, 88%);
1663
- --t-form-background-color:var(--t-fill-color-neutral-100);
1664
- --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
1665
- --t-form-background-color-error:var(--t-fill-color-neutral-100);
1666
- --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
1667
- --t-form-border-color:var(--t-border-color-default-base);
1668
- --t-form-border-color-disabled:var(--t-border-color-default-base);
1669
- --t-form-border-color-error:var(--t-border-color-status-error);
1670
- --t-form-border-color-focus:var(--t-fill-color-interaction-default);
1671
- --t-form-border-color-hover:var(--t-border-color-default-dark);
1672
- --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
1673
- --t-form-border-radius:var(--t-border-radius-md);
1674
- --t-form-border-width:var(--t-border-width-default);
1675
- --t-form-font-color:var(--t-text-color-default-primary);
1676
- --t-form-font-color-disabled:var(--t-text-color-default-disabled);
1677
- --t-form-font-color-error:var(--t-text-color-status-error);
1678
- --t-form-font-color-readonly:var(--t-text-color-default-primary);
1679
- --t-form-picker-icon-color:var(--t-icon-color-default-primary);
1680
- --t-form-placeholder-color:var(--t-text-color-default-placeholder);
1681
- --t-border-size-default:var(--t-border-width-default);
1682
- --t-border-size-thick:var(--t-border-width-thick);
1683
- --t-font-weight-semi-bold:var(--t-font-weight-semibold);
1684
- --t-icon-color-status-neutral-dark:hsl(0, 0%, 24%);
1685
- --t-icon-color-status-info-secondary:hsl(204, 100%, 40%);
1686
- --t-fill-color-alert-info:hsl(204, 94%, 49%);
1687
- --t-fill-color-alert-success:hsl(122, 60%, 41%);
1688
- --t-fill-color-alert-warning:hsl(43, 96%, 58%);
1689
- --t-fill-color-alert-error:hsl(4, 77%, 59%);
1690
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
1691
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
1692
- --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
1693
- --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
1694
- --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
1695
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
1696
- --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
1697
- --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
1698
- --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
1699
- --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
1242
+ @media (prefers-color-scheme: dark){
1243
+ :root[data-color-mode="system"]{
1244
+ color-scheme:dark;
1245
+ --t-text-color-default-headline:hsl(0, 0%, 94%);
1246
+ --t-text-color-default-primary:hsl(0, 0%, 80%);
1247
+ --t-text-color-default-secondary:hsl(0, 0%, 54%);
1248
+ --t-text-color-default-disabled:hsl(0, 0%, 25%);
1249
+ --t-text-color-default-placeholder:hsl(0, 0%, 38%);
1250
+ --t-text-color-interaction-primary:hsl(204, 68%, 55%);
1251
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
1252
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
1253
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
1254
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
1255
+ --t-text-color-status-info:hsl(204, 68%, 55%);
1256
+ --t-text-color-status-success:hsl(97, 57%, 41%);
1257
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
1258
+ --t-text-color-status-error:hsl(8, 61%, 61%);
1259
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
1260
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
1261
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
1262
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
1263
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
1264
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
1265
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
1266
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
1267
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
1268
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
1269
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
1270
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 17%);
1271
+ --t-icon-color-default-primary:hsl(0, 0%, 80%);
1272
+ --t-icon-color-default-secondary:hsl(0, 0%, 54%);
1273
+ --t-icon-color-default-dim:hsl(0, 0%, 38%);
1274
+ --t-icon-color-default-disabled:hsl(0, 0%, 25%);
1275
+ --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
1276
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
1277
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
1278
+ --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
1279
+ --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
1280
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
1281
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
1282
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
1283
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
1284
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
1285
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
1286
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
1287
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
1288
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
1289
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
1290
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
1291
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
1292
+ --t-fill-color-interaction-default:hsl(204, 100%, 35%);
1293
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
1294
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
1295
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
1296
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
1297
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
1298
+ --t-fill-color-control-primary:hsl(204, 100%, 35%);
1299
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
1300
+ --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
1301
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
1302
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
1303
+ --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
1304
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
1305
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
1306
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
1307
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
1308
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
1309
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
1310
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
1311
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
1312
+ --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
1313
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1314
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1315
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1316
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
1317
+ --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%));
1318
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
1319
+ --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%));
1320
+ --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%));
1321
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1322
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
1323
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1324
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1325
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1326
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1327
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
1328
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
1329
+ --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%));
1330
+ --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%));
1331
+ --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%));
1332
+ --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%));
1333
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 19%);
1334
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 17%);
1335
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 68%);
1336
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 58%);
1337
+ --t-fill-color-tag-blue-010:hsl(229, 22%, 24%);
1338
+ --t-fill-color-tag-blue-020:hsl(233, 27%, 23%);
1339
+ --t-fill-color-tag-aqua-010:hsl(217, 25%, 24%);
1340
+ --t-fill-color-tag-aqua-020:hsl(222, 27%, 22%);
1341
+ --t-fill-color-tag-teal-010:hsl(150, 20%, 24%);
1342
+ --t-fill-color-tag-teal-020:hsl(147, 16%, 22%);
1343
+ --t-fill-color-tag-green-010:hsl(108, 21%, 22%);
1344
+ --t-fill-color-tag-green-020:hsl(109, 22%, 20%);
1345
+ --t-fill-color-tag-yellow-010:hsl(38, 27%, 23%);
1346
+ --t-fill-color-tag-yellow-020:hsl(37, 27%, 21%);
1347
+ --t-fill-color-tag-orange-010:hsl(12, 25%, 23%);
1348
+ --t-fill-color-tag-orange-020:hsl(10, 29%, 21%);
1349
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
1350
+ --t-fill-color-tag-pink-020:hsl(338, 25%, 21%);
1351
+ --t-fill-color-tag-purple-010:hsl(260, 25%, 24%);
1352
+ --t-fill-color-tag-purple-020:hsl(254, 27%, 22%);
1353
+ --t-fill-color-tag-magenta-010:hsl(276, 18%, 22%);
1354
+ --t-fill-color-tag-magenta-020:hsl(277, 18%, 20%);
1355
+ --t-fill-color-tag-indigo-010:hsl(233, 30%, 27%);
1356
+ --t-fill-color-tag-indigo-020:hsl(233, 30%, 23%);
1357
+ --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
1358
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
1359
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
1360
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
1361
+ --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
1362
+ --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
1363
+ --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
1364
+ --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
1365
+ --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
1366
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
1367
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
1368
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
1369
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
1370
+ --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
1371
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
1372
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
1373
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
1374
+ --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
1375
+ --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
1376
+ --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
1377
+ --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
1378
+ --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
1379
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
1380
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
1381
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
1382
+ --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
1383
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
1384
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
1385
+ --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
1386
+ --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
1387
+ --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
1388
+ --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
1389
+ --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
1390
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
1391
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
1392
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
1393
+ --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
1394
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
1395
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
1396
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
1397
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
1398
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
1399
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
1400
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
1401
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
1402
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
1403
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
1404
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
1405
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
1406
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
1407
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
1408
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
1409
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
1410
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
1411
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
1412
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
1413
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
1414
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
1415
+ --t-surface-color-card:hsl(0, 0%, 12%);
1416
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
1417
+ --t-border-color-default-base:hsl(0, 0%, 21%);
1418
+ --t-border-color-default-dark:hsl(0, 0%, 25%);
1419
+ --t-border-color-default-darker:hsl(0, 0%, 33%);
1420
+ --t-border-color-default-darkest:hsl(0, 0%, 38%);
1421
+ --t-border-color-default-disabled:hsl(0, 0%, 21%);
1422
+ --t-border-color-default-dim:hsl(0, 0%, 16%);
1423
+ --t-border-color-default-white:hsl(0, 0%, 12%);
1424
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
1425
+ --t-border-color-status-info:hsl(204, 100%, 35%);
1426
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
1427
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
1428
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
1429
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
1430
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
1431
+ --t-border-color-control-info:hsl(204, 100%, 35%);
1432
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
1433
+ }
1700
1434
  }
1701
1435
 
1702
1436
  .symbol{