@planningcenter/tapestry-tokens 0.0.1 → 2.7.0

package/dist/css/tokens-alias.css

@@ -0,0 +1,427 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --t-border-radius-sm: 2px;
+  --t-border-radius-md: 4px;
+  --t-border-radius-lg: 8px;
+  --t-border-radius-xl: 16px;
+  --t-border-radius-round: 56px;
+  --t-border-radius: 4px;
+  --t-border-width: 1px;
+  --t-border-width-thick: 2px;
+  --t-spacing-1: 8px;
+  --t-spacing-2: 16px;
+  --t-spacing-3: 24px;
+  --t-spacing-4: 32px;
+  --t-spacing-5: 40px;
+  --t-spacing-6: 48px;
+  --t-spacing-7: 56px;
+  --t-spacing-fourth: 2px;
+  --t-spacing-half: 4px;
+  --t-spacing-1-half: 12px;
+  --t-element-size-3xl: 48px;
+  --t-element-size-2xl: 32px;
+  --t-element-size-xl: 24px;
+  --t-element-size-lg: 18px;
+  --t-element-size-md: 16px;
+  --t-element-size-sm: 14px;
+  --t-element-size-xs: 12px;
+  --t-font-size-4xl: 32px;
+  --t-font-size-3xl: 28px;
+  --t-font-size-2xl: 24px;
+  --t-font-size-xl: 20px;
+  --t-font-size-lg: 18px;
+  --t-font-size-md: 16px;
+  --t-font-size-sm: 14px;
+  --t-font-size-xs: 12px;
+  --t-font-size-2xs: 10px;
+  --t-font-weight-normal: 400;
+  --t-font-weight-medium: 500;
+  --t-font-weight-semibold: 600;
+  --t-font-weight-bold: 700;
+  --t-container-size-xl: 48px;
+  --t-container-size-lg: 40px;
+  --t-container-size-md: 32px;
+  --t-container-size-sm: 24px;
+  --t-container-size-xs: 20px;
+  --t-avatar-size-20: 20px;
+  --t-avatar-size-24: 24px;
+  --t-avatar-size-36: 36px;
+  --t-avatar-size-48: 48px;
+  --t-avatar-size-72: 72px;
+  --t-avatar-size-112: 112px;
+  --t-text-color-headline: hsl(0, 0%, 12%);
+  --t-text-color: hsl(0, 0%, 24%);
+  --t-text-color-secondary: hsl(0, 0%, 42%);
+  --t-text-color-disabled: hsl(0, 0%, 68%);
+  --t-text-color-placeholder: hsl(0, 0%, 58%);
+  --t-text-color-inverted: hsl(0, 0%, 100%);
+  --t-text-color-interaction: hsl(204, 100%, 40%);
+  --t-text-color-interaction-hover: hsl(204, 100%, 35%);
+  --t-text-color-interaction-active: hsl(204, 100%, 30%);
+  --t-text-color-interaction-visited: hsl(204, 100%, 30%);
+  --t-text-color-status-neutral: hsl(0, 0%, 24%);
+  --t-text-color-status-info: hsl(204, 100%, 35%);
+  --t-text-color-status-success: hsl(97, 57%, 28%);
+  --t-text-color-status-warning: hsl(42, 100%, 29%);
+  --t-text-color-status-error: hsl(8, 60%, 45%);
+  --t-text-color-tag-subtle-gray: hsl(0, 0%, 24%);
+  --t-text-color-tag-subtle-blue: hsl(224, 47%, 31%);
+  --t-text-color-tag-subtle-indigo: hsl(241, 59%, 28%);
+  --t-text-color-tag-subtle-aqua: hsl(209, 77%, 22%);
+  --t-text-color-tag-subtle-teal: hsl(180, 95%, 15%);
+  --t-text-color-tag-subtle-green: hsl(100, 93%, 17%);
+  --t-text-color-tag-subtle-yellow: hsl(29, 100%, 23%);
+  --t-text-color-tag-subtle-orange: hsl(18, 100%, 18%);
+  --t-text-color-tag-subtle-pink: hsl(327, 88%, 20%);
+  --t-text-color-tag-subtle-purple: hsl(268, 71%, 27%);
+  --t-text-color-tag-subtle-magenta: hsl(285, 71%, 20%);
+  --t-text-color-tag-bold-gray: hsl(0, 0%, 24%);
+  --t-text-color-tag-bold-indigo: hsl(241, 59%, 28%);
+  --t-text-color-tag-bold-blue: hsl(224, 47%, 31%);
+  --t-text-color-tag-bold-aqua: hsl(209, 77%, 22%);
+  --t-text-color-tag-bold-teal: hsl(180, 95%, 15%);
+  --t-text-color-tag-bold-green: hsl(100, 93%, 17%);
+  --t-text-color-tag-bold-yellow: hsl(29, 100%, 23%);
+  --t-text-color-tag-bold-orange: hsl(18, 100%, 18%);
+  --t-text-color-tag-bold-pink: hsl(327, 88%, 20%);
+  --t-text-color-tag-bold-purple: hsl(268, 71%, 27%);
+  --t-text-color-tag-bold-magenta: hsl(285, 71%, 20%);
+  --t-icon-color: hsl(0, 0%, 24%);
+  --t-icon-color-secondary: hsl(0, 0%, 42%);
+  --t-icon-color-dim: hsl(0, 0%, 58%);
+  --t-icon-color-disabled: hsl(0, 0%, 81%);
+  --t-icon-color-inverted: hsl(0, 0%, 100%);
+  --t-icon-color-status-neutral: hsl(0, 0%, 42%);
+  --t-icon-color-status-neutral-secondary: hsl(0, 0%, 58%);
+  --t-icon-color-status-neutral-bold: hsl(0, 0%, 24%);
+  --t-icon-color-status-info: hsl(204, 100%, 40%);
+  --t-icon-color-status-success: hsl(96, 57%, 33%);
+  --t-icon-color-status-success-secondary: hsl(97, 57%, 40%);
+  --t-icon-color-status-warning: hsl(42, 84%, 49%);
+  --t-icon-color-status-error: hsl(8, 60%, 47%);
+  --t-fill-color-neutral-100: hsl(0, 0%, 100%);
+  --t-fill-color-neutral-000: hsl(0, 0%, 12%);
+  --t-fill-color-neutral-010: hsl(0, 0%, 24%);
+  --t-fill-color-neutral-020: hsl(0, 0%, 42%);
+  --t-fill-color-neutral-025: hsl(0, 0%, 50%);
+  --t-fill-color-neutral-030: hsl(0, 0%, 58%);
+  --t-fill-color-neutral-040: hsl(0, 0%, 81%);
+  --t-fill-color-neutral-050: hsl(0, 0%, 88%);
+  --t-fill-color-neutral-060: hsl(0, 0%, 93%);
+  --t-fill-color-neutral-070: hsl(0, 0%, 95%);
+  --t-fill-color-neutral-080: hsl(0, 0%, 97%);
+  --t-fill-color-neutral-090: hsl(0, 0%, 98%);
+  --t-fill-color-interaction: hsl(204, 100%, 40%);
+  --t-fill-color-interaction-hover: hsl(204, 100%, 35%);
+  --t-fill-color-interaction-active: hsl(204, 100%, 30%);
+  --t-fill-color-interaction-disabled: hsl(0, 0%, 81%);
+  --t-fill-color-control-neutral-off: hsl(0, 0%, 58%);
+  --t-fill-color-control-neutral-on: hsl(0, 0%, 24%);
+  --t-fill-color-control: hsl(204, 100%, 40%);
+  --t-fill-color-control-secondary: hsl(97, 57%, 40%);
+  --t-fill-color-control-error: hsl(8, 60%, 47%);
+  --t-fill-color-control-disabled: hsl(0, 0%, 81%);
+  --t-fill-color-status-neutral: hsl(0, 0%, 42%);
+  --t-fill-color-status-neutral-ghost: hsl(0, 0%, 93%);
+  --t-fill-color-status-neutral-dim: hsl(0, 0%, 97%);
+  --t-fill-color-status-info: hsl(204, 100%, 40%);
+  --t-fill-color-status-info-ghost: hsl(203, 94%, 94%);
+  --t-fill-color-status-info-dim: hsl(204, 100%, 97%);
+  --t-fill-color-status-success: hsl(96, 57%, 33%);
+  --t-fill-color-status-success-ghost: hsl(97, 57%, 90%);
+  --t-fill-color-status-success-dim: hsl(96, 60%, 95%);
+  --t-fill-color-status-warning: hsl(42, 84%, 63%);
+  --t-fill-color-status-warning-ghost: hsl(42, 87%, 94%);
+  --t-fill-color-status-warning-dim: hsl(42, 87%, 97%);
+  --t-fill-color-status-error: hsl(8, 60%, 47%);
+  --t-fill-color-status-error-ghost: hsl(9, 59%, 93%);
+  --t-fill-color-status-error-dim: hsl(7, 60%, 97%);
+  --t-fill-color-tooltip: hsla(0, 0%, 12%, 0.9);
+  --t-fill-color-product-accounts-010: hsl(212, 54%, 93%);
+  --t-fill-color-product-accounts-020: hsl(209, 53%, 90%);
+  --t-fill-color-product-accounts-030: hsl(210, 56%, 70%);
+  --t-fill-color-product-accounts-040: hsl(210, 54%, 60%);
+  --t-fill-color-product-accounts-050: hsl(210, 55%, 50%);
+  --t-fill-color-product-accounts-060: hsl(210, 65%, 40%);
+  --t-fill-color-product-accounts-070: hsl(211, 70%, 32%);
+  --t-fill-color-product-accounts-080: hsl(210, 75%, 25%);
+  --t-fill-color-product-calendar-010: hsl(8, 61%, 90%);
+  --t-fill-color-product-calendar-020: hsl(8, 61%, 70%);
+  --t-fill-color-product-calendar-030: hsl(8, 72%, 59%);
+  --t-fill-color-product-calendar-040: hsl(8, 65%, 55%);
+  --t-fill-color-product-calendar-050: hsl(9, 61%, 50%);
+  --t-fill-color-product-calendar-060: hsl(8, 65%, 42%);
+  --t-fill-color-product-calendar-070: hsl(7, 65%, 34%);
+  --t-fill-color-product-calendar-080: hsl(9, 61%, 27%);
+  --t-fill-color-product-checkins-010: hsl(285, 20%, 92%);
+  --t-fill-color-product-checkins-020: hsl(283, 22%, 75%);
+  --t-fill-color-product-checkins-030: hsl(284, 22%, 64%);
+  --t-fill-color-product-checkins-040: hsl(283, 22%, 55%);
+  --t-fill-color-product-checkins-050: hsl(283, 22%, 48%);
+  --t-fill-color-product-checkins-060: hsl(283, 27%, 42%);
+  --t-fill-color-product-checkins-070: hsl(284, 33%, 34%);
+  --t-fill-color-product-checkins-080: hsl(283, 33%, 27%);
+  --t-fill-color-product-giving-010: hsl(41, 95%, 93%);
+  --t-fill-color-product-giving-020: hsl(42, 95%, 83%);
+  --t-fill-color-product-giving-030: hsl(43, 95%, 75%);
+  --t-fill-color-product-giving-040: hsl(43, 88%, 70%);
+  --t-fill-color-product-giving-050: hsl(43, 88%, 64%);
+  --t-fill-color-product-giving-060: hsl(42, 84%, 55%);
+  --t-fill-color-product-giving-070: hsl(42, 84%, 48%);
+  --t-fill-color-product-giving-080: hsl(42, 100%, 40%);
+  --t-fill-color-product-groups-010: hsl(18, 95%, 92%);
+  --t-fill-color-product-groups-020: hsl(17, 96%, 80%);
+  --t-fill-color-product-groups-030: hsl(17, 96%, 70%);
+  --t-fill-color-product-groups-040: hsl(17, 96%, 63%);
+  --t-fill-color-product-groups-050: hsl(17, 88%, 55%);
+  --t-fill-color-product-groups-060: hsl(12, 70%, 48%);
+  --t-fill-color-product-groups-070: hsl(12, 70%, 40%);
+  --t-fill-color-product-groups-080: hsl(14, 70%, 34%);
+  --t-fill-color-product-home-010: hsl(221, 89%, 93%);
+  --t-fill-color-product-home-020: hsl(221, 91%, 91%);
+  --t-fill-color-product-home-030: hsl(221, 91%, 87%);
+  --t-fill-color-product-home-040: hsl(221, 91%, 62%);
+  --t-fill-color-product-home-050: hsl(221, 91%, 55%);
+  --t-fill-color-product-home-060: hsl(221, 90%, 50%);
+  --t-fill-color-product-home-070: hsl(221, 90%, 45%);
+  --t-fill-color-product-home-080: hsl(218, 84%, 25%);
+  --t-fill-color-product-musicstand-010: hsl(207, 61%, 93%);
+  --t-fill-color-product-musicstand-020: hsl(207, 61%, 90%);
+  --t-fill-color-product-musicstand-030: hsl(207, 58%, 85%);
+  --t-fill-color-product-musicstand-040: hsl(207, 59%, 60%);
+  --t-fill-color-product-musicstand-050: hsl(207, 59%, 50%);
+  --t-fill-color-product-musicstand-060: hsl(207, 59%, 40%);
+  --t-fill-color-product-musicstand-070: hsl(207, 59%, 35%);
+  --t-fill-color-product-musicstand-080: hsl(207, 59%, 25%);
+  --t-fill-color-product-people-010: hsl(219, 73%, 91%);
+  --t-fill-color-product-people-020: hsl(220, 69%, 81%);
+  --t-fill-color-product-people-030: hsl(221, 73%, 71%);
+  --t-fill-color-product-people-040: hsl(221, 73%, 65%);
+  --t-fill-color-product-people-050: hsl(220, 74%, 57%);
+  --t-fill-color-product-people-060: hsl(220, 68%, 51%);
+  --t-fill-color-product-people-070: hsl(220, 68%, 41%);
+  --t-fill-color-product-people-080: hsl(221, 68%, 31%);
+  --t-fill-color-product-publishing-010: hsl(220, 4%, 86%);
+  --t-fill-color-product-publishing-020: hsl(222, 10%, 60%);
+  --t-fill-color-product-publishing-030: hsl(221, 11%, 50%);
+  --t-fill-color-product-publishing-040: hsl(222, 12%, 39%);
+  --t-fill-color-product-publishing-050: hsl(220, 12%, 31%);
+  --t-fill-color-product-publishing-060: hsl(220, 11%, 26%);
+  --t-fill-color-product-publishing-070: hsl(217, 12%, 22%);
+  --t-fill-color-product-publishing-080: hsl(214, 11%, 12%);
+  --t-fill-color-product-registrations-010: hsl(173, 28%, 89%);
+  --t-fill-color-product-registrations-020: hsl(176, 38%, 78%);
+  --t-fill-color-product-registrations-030: hsl(176, 37%, 68%);
+  --t-fill-color-product-registrations-040: hsl(176, 37%, 60%);
+  --t-fill-color-product-registrations-050: hsl(175, 36%, 43%);
+  --t-fill-color-product-registrations-060: hsl(175, 51%, 34%);
+  --t-fill-color-product-registrations-070: hsl(174, 51%, 28%);
+  --t-fill-color-product-registrations-080: hsl(175, 52%, 22%);
+  --t-fill-color-product-services-010: hsl(88, 31%, 88%);
+  --t-fill-color-product-services-020: hsl(88, 39%, 75%);
+  --t-fill-color-product-services-030: hsl(88, 39%, 66%);
+  --t-fill-color-product-services-040: hsl(88, 40%, 54%);
+  --t-fill-color-product-services-050: hsl(88, 45%, 41%);
+  --t-fill-color-product-services-060: hsl(89, 62%, 31%);
+  --t-fill-color-product-services-070: hsl(89, 62%, 26%);
+  --t-fill-color-product-services-080: hsl(89, 63%, 21%);
+  --t-fill-color-product-staff: hsl(328, 100%, 45%);
+  --t-fill-color-product-staff-dark: hsl(328, 100%, 38%);
+  --t-fill-color-product-staff-darker: hsl(328, 100%, 33%);
+  --t-fill-color-product-accounts-gradient-brand: linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
+  --t-fill-color-product-accounts-gradient-page: linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
+  --t-fill-color-product-accounts-gradient-tint: linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
+  --t-fill-color-product-api-gradient-brand: linear-gradient(180deg, hsl(221, 100%, 62%), hsl(217, 100%, 52%));
+  --t-fill-color-product-calendar-gradient-brand: linear-gradient(135deg, hsl(10, 88%, 58%), hsl(8, 60%, 51%));
+  --t-fill-color-product-calendar-gradient-page: linear-gradient(111.72deg, hsl(5, 80%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
+  --t-fill-color-product-calendar-gradient-tint: linear-gradient(111.72deg, hsl(8, 100%, 94%), hsl(285, 18%, 91%), hsl(204, 67%, 92%));
+  --t-fill-color-product-cc-gradient-brand: linear-gradient(135deg, hsl(207, 90%, 61%), hsl(123, 38%, 57%));
+  --t-fill-color-product-checkins-gradient-brand: linear-gradient(135deg, hsl(283, 38%, 59%), hsl(284, 23%, 48%));
+  --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%));
+  --t-fill-color-product-checkins-gradient-tint: linear-gradient(111.72deg, hsl(285, 22%, 93%), hsl(225, 35%, 93%) 42%, hsl(204, 67%, 92%));
+  --t-fill-color-product-giving-gradient-brand: linear-gradient(90deg, hsl(46, 91%, 55%), hsl(41, 89%, 55%));
+  --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%));
+  --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%));
+  --t-fill-color-product-groups-gradient-brand: linear-gradient(135deg, hsl(30, 100%, 59%), hsl(19, 97%, 60%));
+  --t-fill-color-product-groups-gradient-page: linear-gradient(111.72deg, hsl(17, 88%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
+  --t-fill-color-product-groups-gradient-tint: linear-gradient(111.72deg, hsl(18, 87%, 94%), hsl(300, 12%, 92%), hsl(204, 67%, 92%));
+  --t-fill-color-product-headcounts-gradient-brand: linear-gradient(135deg, hsl(283, 37%, 59%), hsl(285, 23%, 47%));
+  --t-fill-color-product-home-gradient-page: linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
+  --t-fill-color-product-home-gradient-tint: linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
+  --t-fill-color-product-musicstand-gradient-brand: linear-gradient(135deg, hsl(204, 64%, 51%), hsl(211, 55%, 51%));
+  --t-fill-color-product-people-gradient-brand: linear-gradient(135deg, hsl(205, 86%, 57%), hsl(220, 76%, 57%));
+  --t-fill-color-product-people-gradient-page: linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
+  --t-fill-color-product-people-gradient-tint: linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
+  --t-fill-color-product-publishing-gradient-brand: linear-gradient(135deg, hsl(240, 4%, 49%), hsl(240, 6%, 39%));
+  --t-fill-color-product-publishing-gradient-page: linear-gradient(111.72deg, hsl(217, 5%, 69%), hsl(214, 15%, 69%) 45%, hsl(204, 67%, 73%));
+  --t-fill-color-product-publishing-gradient-tint: linear-gradient(111.72deg, hsl(210, 4%, 91%), hsl(214, 15%, 91%) 45%, hsl(204, 67%, 92%));
+  --t-fill-color-product-registrations-gradient-brand: linear-gradient(135deg, hsl(168, 46%, 48%), hsl(175, 35%, 43%));
+  --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%));
+  --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%));
+  --t-fill-color-product-services-gradient-brand: linear-gradient(135deg, hsl(96, 49%, 47%), hsl(89, 52%, 39%));
+  --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%));
+  --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%));
+  --t-fill-color-tag-gray-010: hsl(0, 0%, 93%);
+  --t-fill-color-tag-gray-020: hsl(0, 0%, 88%);
+  --t-fill-color-tag-gray-030: hsl(0, 0%, 88%);
+  --t-fill-color-tag-gray-040: hsl(0, 0%, 81%);
+  --t-fill-color-tag-blue-010: hsl(220, 100%, 95%);
+  --t-fill-color-tag-blue-020: hsl(221, 100%, 88%);
+  --t-fill-color-tag-blue-030: hsl(220, 98%, 81%);
+  --t-fill-color-tag-blue-040: hsl(220, 98%, 74%);
+  --t-fill-color-tag-aqua-010: hsl(200, 82%, 89%);
+  --t-fill-color-tag-aqua-020: hsl(200, 82%, 82%);
+  --t-fill-color-tag-aqua-030: hsl(201, 76%, 71%);
+  --t-fill-color-tag-aqua-040: hsl(200, 75%, 64%);
+  --t-fill-color-tag-teal-010: hsl(163, 53%, 83%);
+  --t-fill-color-tag-teal-020: hsl(164, 52%, 76%);
+  --t-fill-color-tag-teal-030: hsl(169, 62%, 64%);
+  --t-fill-color-tag-teal-040: hsl(169, 62%, 56%);
+  --t-fill-color-tag-green-010: hsl(98, 59%, 85%);
+  --t-fill-color-tag-green-020: hsl(99, 59%, 78%);
+  --t-fill-color-tag-green-030: hsl(112, 57%, 65%);
+  --t-fill-color-tag-green-040: hsl(112, 57%, 57%);
+  --t-fill-color-tag-yellow-010: hsl(45, 77%, 85%);
+  --t-fill-color-tag-yellow-020: hsl(44, 78%, 77%);
+  --t-fill-color-tag-yellow-030: hsl(44, 92%, 69%);
+  --t-fill-color-tag-yellow-040: hsl(44, 93%, 61%);
+  --t-fill-color-tag-orange-010: hsl(22, 89%, 89%);
+  --t-fill-color-tag-orange-020: hsl(21, 89%, 82%);
+  --t-fill-color-tag-orange-030: hsl(21, 86%, 72%);
+  --t-fill-color-tag-orange-040: hsl(21, 86%, 64%);
+  --t-fill-color-tag-pink-010: hsl(311, 66%, 92%);
+  --t-fill-color-tag-pink-020: hsl(310, 64%, 85%);
+  --t-fill-color-tag-pink-030: hsl(324, 78%, 77%);
+  --t-fill-color-tag-pink-040: hsl(324, 76%, 70%);
+  --t-fill-color-tag-purple-010: hsl(259, 74%, 93%);
+  --t-fill-color-tag-purple-020: hsl(259, 74%, 85%);
+  --t-fill-color-tag-purple-030: hsl(273, 62%, 76%);
+  --t-fill-color-tag-purple-040: hsl(273, 62%, 70%);
+  --t-fill-color-tag-magenta-010: hsl(294, 37%, 90%);
+  --t-fill-color-tag-magenta-020: hsl(291, 40%, 83%);
+  --t-fill-color-tag-magenta-030: hsl(291, 48%, 70%);
+  --t-fill-color-tag-magenta-040: hsl(292, 48%, 63%);
+  --t-fill-color-tag-indigo-010: hsl(234, 78%, 93%);
+  --t-fill-color-tag-indigo-020: hsl(233, 79%, 87%);
+  --t-fill-color-tag-indigo-030: hsl(233, 77%, 81%);
+  --t-fill-color-tag-indigo-040: hsl(236, 79%, 74%);
+  --t-fill-color-button-neutral-solid: hsl(0, 0%, 93%);
+  --t-fill-color-button-neutral-solid-hover: hsl(0, 0%, 88%);
+  --t-fill-color-button-neutral-solid-active: hsl(0, 0%, 81%);
+  --t-fill-color-button-neutral-solid-disabled: hsl(0, 0%, 95%);
+  --t-fill-color-button-neutral-outline: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-neutral-outline-hover: hsl(0, 0%, 95%);
+  --t-fill-color-button-neutral-outline-active: hsl(0, 0%, 93%);
+  --t-fill-color-button-neutral-outline-disabled: hsl(0, 0%, 98%);
+  --t-fill-color-button-neutral-ghost: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-neutral-ghost-hover: hsl(0, 0%, 95%);
+  --t-fill-color-button-neutral-ghost-active: hsl(0, 0%, 93%);
+  --t-fill-color-button-neutral-ghost-disabled: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-neutral-responsive-header: hsla(0, 0%, 0%, 0.1);
+  --t-fill-color-button-neutral-responsive-header-hover: hsla(0, 0%, 0%, 0.2);
+  --t-fill-color-button-neutral-responsive-header-active: hsla(0, 0%, 0%, 0.3);
+  --t-fill-color-button-neutral-responsive-header-disabled: hsla(0, 0%, 0%, 0.05);
+  --t-fill-color-button-interaction-solid: hsl(204, 100%, 40%);
+  --t-fill-color-button-interaction-solid-hover: hsl(204, 100%, 35%);
+  --t-fill-color-button-interaction-solid-active: hsl(204, 100%, 30%);
+  --t-fill-color-button-interaction-solid-disabled: hsl(0, 0%, 95%);
+  --t-fill-color-button-interaction-outline: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-interaction-outline-hover: hsl(204, 100%, 97%);
+  --t-fill-color-button-interaction-outline-active: hsl(203, 94%, 94%);
+  --t-fill-color-button-interaction-outline-disabled: hsl(0, 0%, 98%);
+  --t-fill-color-button-interaction-ghost: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-interaction-ghost-hover: hsl(204, 100%, 97%);
+  --t-fill-color-button-interaction-ghost-active: hsl(203, 94%, 94%);
+  --t-fill-color-button-interaction-ghost-disabled: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-delete-solid: hsl(8, 60%, 47%);
+  --t-fill-color-button-delete-solid-hover: hsl(8, 60%, 45%);
+  --t-fill-color-button-delete-solid-active: hsl(8, 60%, 40%);
+  --t-fill-color-button-delete-solid-disabled: hsl(0, 0%, 95%);
+  --t-fill-color-button-delete-outline: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-delete-outline-hover: hsl(7, 60%, 97%);
+  --t-fill-color-button-delete-outline-active: hsl(9, 59%, 93%);
+  --t-fill-color-button-delete-outline-disabled: hsl(0, 0%, 98%);
+  --t-fill-color-button-delete-ghost: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-delete-ghost-hover: hsl(7, 60%, 97%);
+  --t-fill-color-button-delete-ghost-active: hsl(9, 59%, 93%);
+  --t-fill-color-button-delete-ghost-disabled: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-pill: hsl(0, 0%, 93%);
+  --t-fill-color-button-pill-hover: hsl(0, 0%, 88%);
+  --t-fill-color-button-pill-active: hsl(0, 0%, 88%);
+  --t-fill-color-button-pill-disabled: hsl(0, 0%, 93%);
+  --t-fill-color-transparency-light-010: hsla(0, 0%, 100%, 0.1);
+  --t-fill-color-transparency-light-020: hsla(0, 0%, 100%, 0.2);
+  --t-fill-color-transparency-light-030: hsla(0, 0%, 100%, 0.3);
+  --t-fill-color-transparency-light-040: hsla(0, 0%, 100%, 0.4);
+  --t-fill-color-transparency-light-050: hsla(0, 0%, 100%, 0.5);
+  --t-fill-color-transparency-light-060: hsla(0, 0%, 100%, 0.6);
+  --t-fill-color-transparency-light-070: hsla(0, 0%, 100%, 0.7);
+  --t-fill-color-transparency-light-080: hsla(0, 0%, 100%, 0.8);
+  --t-fill-color-transparency-light-090: hsla(0, 0%, 100%, 0.9);
+  --t-fill-color-transparency-dark-010: hsla(0, 0%, 0%, 0.1);
+  --t-fill-color-transparency-dark-020: hsla(0, 0%, 0%, 0.2);
+  --t-fill-color-transparency-dark-030: hsla(0, 0%, 0%, 0.3);
+  --t-fill-color-transparency-dark-040: hsla(0, 0%, 0%, 0.4);
+  --t-fill-color-transparency-dark-050: hsla(0, 0%, 0%, 0.5);
+  --t-fill-color-transparency-dark-060: hsla(0, 0%, 0%, 0.6);
+  --t-fill-color-transparency-dark-070: hsla(0, 0%, 0%, 0.7);
+  --t-fill-color-transparency-dark-080: hsla(0, 0%, 0%, 0.8);
+  --t-fill-color-transparency-dark-090: hsla(0, 0%, 0%, 0.9);
+  --t-fill-color-transparency-dark-static-010: hsla(0, 0%, 0%, 0.1);
+  --t-fill-color-transparency-dark-static-020: hsla(0, 0%, 0%, 0.2);
+  --t-fill-color-transparency-dark-static-030: hsla(0, 0%, 0%, 0.3);
+  --t-fill-color-transparency-dark-static-040: hsla(0, 0%, 0%, 0.4);
+  --t-fill-color-transparency-dark-static-050: hsla(0, 0%, 0%, 0.5);
+  --t-fill-color-transparency-dark-static-060: hsla(0, 0%, 0%, 0.6);
+  --t-fill-color-transparency-dark-static-070: hsla(0, 0%, 0%, 0.7);
+  --t-fill-color-transparency-dark-static-080: hsla(0, 0%, 0%, 0.8);
+  --t-fill-color-transparency-dark-static-090: hsla(0, 0%, 0%, 0.9);
+  --t-surface-color-card: hsl(0, 0%, 100%);
+  --t-surface-color-canvas: hsl(0, 0%, 100%);
+  --t-border-color: hsl(0, 0%, 88%);
+  --t-border-color-dark: hsl(0, 0%, 81%);
+  --t-border-color-darker: hsl(0, 0%, 68%);
+  --t-border-color-darkest: hsl(0, 0%, 58%);
+  --t-border-color-disabled: hsl(0, 0%, 88%);
+  --t-border-color-dim: hsl(0, 0%, 95%);
+  --t-border-color-white: hsl(0, 0%, 100%);
+  --t-border-color-status-neutral: hsl(0, 0%, 58%);
+  --t-border-color-status-info: hsl(204, 100%, 40%);
+  --t-border-color-status-success: hsl(97, 57%, 40%);
+  --t-border-color-status-warning: hsl(42, 84%, 63%);
+  --t-border-color-status-error: hsl(8, 60%, 47%);
+  --t-border-color-button-neutral: hsl(0, 0%, 88%);
+  --t-border-color-button-info: hsl(204, 100%, 40%);
+  --t-border-color-button-create: hsl(96, 57%, 33%);
+  --t-border-color-button-delete: hsl(8, 60%, 47%);
+  --t-border-color-control-neutral: hsl(0, 0%, 68%);
+  --t-border-color-control-info: hsl(204, 100%, 40%);
+  --t-border-color-control-success: hsl(97, 57%, 40%);
+  --t-border-color-control-warning: hsl(42, 84%, 63%);
+  --t-border-color-control-error: hsl(8, 60%, 47%);
+  --t-border-color-control-disabled: hsl(0, 0%, 81%);
+  --t-shadow-overflow-color: hsla(0, 0%, 0%, 0.07);
+  --t-font-sans-serif: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --t-font-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  --t-form-background-color: var(--t-fill-color-neutral-100);
+  --t-form-background-color-disabled: var(--t-fill-color-neutral-070);
+  --t-form-background-color-error: var(--t-fill-color-neutral-100);
+  --t-form-background-color-readonly: var(--t-fill-color-neutral-070);
+  --t-form-border-color: var(--t-border-color);
+  --t-form-border-color-disabled: var(--t-border-color);
+  --t-form-border-color-error: var(--t-border-color-status-error);
+  --t-form-border-color-focus: var(--t-fill-color-interaction);
+  --t-form-border-color-hover: var(--t-border-color-dark);
+  --t-form-border-color-readonly: hsla(0, 0%, 100%, 0);
+  --t-form-border-radius: var(--t-border-radius-md);
+  --t-form-border-width: var(--t-border-width);
+  --t-form-font-color: var(--t-text-color);
+  --t-form-font-color-disabled: var(--t-text-color-disabled);
+  --t-form-font-color-error: var(--t-text-color-status-error);
+  --t-form-font-color-readonly: var(--t-text-color);
+  --t-form-picker-icon-color: var(--t-icon-color);
+  --t-form-placeholder-color: var(--t-text-color-placeholder);
+}

package/dist/css/tokens-dark-deprecated.css

@@ -0,0 +1,14 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root[data-color-mode="dark"] {
+  --t-fill-color-button-neutral-ghost-disabled-solid: hsl(0, 0%, 100%);
+  --t-fill-color-button-neutral-outline-dim-disabled-solid: hsl(0, 0%, 100%);
+  --t-fill-color-button-create-solid-default: hsl(0, 0%, 25%);
+  --t-fill-color-button-create-solid-hover: hsl(0, 0%, 25%);
+  --t-fill-color-button-create-solid-active: hsl(0, 0%, 25%);
+  --t-fill-color-button-create-solid-disabled: hsl(0, 0%, 25%);
+  --t-fill-color-button-create-ghost-hover: hsla(0, 0%, 100%, 0);
+  --t-fill-color-button-create-ghost-active: hsla(0, 0%, 100%, 0);
+}

package/dist/css/tokens-dark.css

@@ -0,0 +1,226 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root[data-color-mode="dark"] {
+  color-scheme: dark;
+  --t-text-color-headline: hsl(0, 0%, 94%);
+  --t-text-color: hsl(0, 0%, 80%);
+  --t-text-color-secondary: hsl(0, 0%, 54%);
+  --t-text-color-disabled: hsl(0, 0%, 32%);
+  --t-text-color-placeholder: hsl(0, 0%, 38%);
+  --t-text-color-interaction: hsl(204, 68%, 55%);
+  --t-text-color-interaction-hover: hsl(204, 68%, 50%);
+  --t-text-color-interaction-active: hsl(204, 68%, 45%);
+  --t-text-color-interaction-visited: hsl(204, 68%, 50%);
+  --t-text-color-status-neutral: hsl(0, 0%, 80%);
+  --t-text-color-status-info: hsl(204, 68%, 55%);
+  --t-text-color-status-success: hsl(97, 57%, 41%);
+  --t-text-color-status-warning: hsl(42, 84%, 55%);
+  --t-text-color-status-error: hsl(8, 61%, 61%);
+  --t-text-color-tag-subtle-gray: hsl(0, 0%, 80%);
+  --t-text-color-tag-subtle-blue: hsl(223, 46%, 84%);
+  --t-text-color-tag-subtle-indigo: hsl(233, 78%, 84%);
+  --t-text-color-tag-subtle-aqua: hsl(208, 77%, 85%);
+  --t-text-color-tag-subtle-teal: hsl(180, 95%, 74%);
+  --t-text-color-tag-subtle-green: hsl(99, 93%, 84%);
+  --t-text-color-tag-subtle-yellow: hsl(29, 100%, 85%);
+  --t-text-color-tag-subtle-orange: hsl(18, 100%, 85%);
+  --t-text-color-tag-subtle-pink: hsl(328, 89%, 89%);
+  --t-text-color-tag-subtle-purple: hsl(268, 70%, 88%);
+  --t-text-color-tag-subtle-magenta: hsl(285, 70%, 88%);
+  --t-text-color-tag-bold-gray: hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-indigo: hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-blue: hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-aqua: hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-teal: hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-green: hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-yellow: hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-orange: hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-pink: hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-purple: hsl(0, 0%, 100%);
+  --t-text-color-tag-bold-magenta: hsl(0, 0%, 100%);
+  --t-icon-color: hsl(0, 0%, 80%);
+  --t-icon-color-secondary: hsl(0, 0%, 54%);
+  --t-icon-color-dim: hsl(0, 0%, 38%);
+  --t-icon-color-disabled: hsl(0, 0%, 25%);
+  --t-icon-color-status-neutral: hsl(0, 0%, 54%);
+  --t-icon-color-status-neutral-secondary: hsl(0, 0%, 38%);
+  --t-icon-color-status-neutral-bold: hsl(0, 0%, 80%);
+  --t-icon-color-status-info: hsl(204, 68%, 55%);
+  --t-icon-color-status-error: hsl(8, 61%, 61%);
+  --t-fill-color-neutral-100: hsl(0, 0%, 10%);
+  --t-fill-color-neutral-000: hsl(0, 0%, 98%);
+  --t-fill-color-neutral-010: hsl(0, 0%, 88%);
+  --t-fill-color-neutral-020: hsl(0, 0%, 68%);
+  --t-fill-color-neutral-025: hsl(0, 0%, 58%);
+  --t-fill-color-neutral-030: hsl(0, 0%, 50%);
+  --t-fill-color-neutral-040: hsl(0, 0%, 32%);
+  --t-fill-color-neutral-050: hsl(0, 0%, 24%);
+  --t-fill-color-neutral-060: hsl(0, 0%, 19%);
+  --t-fill-color-neutral-070: hsl(0, 0%, 17%);
+  --t-fill-color-neutral-080: hsl(0, 0%, 15%);
+  --t-fill-color-neutral-090: hsl(0, 0%, 12%);
+  --t-fill-color-interaction: hsl(204, 100%, 35%);
+  --t-fill-color-interaction-hover: hsl(204, 100%, 40%);
+  --t-fill-color-interaction-active: hsl(204, 80%, 45%);
+  --t-fill-color-interaction-disabled: hsl(0, 0%, 25%);
+  --t-fill-color-control-neutral-off: hsl(0, 0%, 32%);
+  --t-fill-color-control-neutral-on: hsl(0, 0%, 50%);
+  --t-fill-color-control: hsl(204, 100%, 35%);
+  --t-fill-color-control-disabled: hsl(0, 0%, 20%);
+  --t-fill-color-status-neutral: hsl(0, 0%, 24%);
+  --t-fill-color-status-neutral-ghost: hsl(0, 0%, 18%);
+  --t-fill-color-status-neutral-dim: hsl(0, 0%, 15%);
+  --t-fill-color-status-info: hsl(204, 100%, 35%);
+  --t-fill-color-status-info-ghost: hsl(204, 32%, 15%);
+  --t-fill-color-status-info-dim: hsl(206, 22%, 15%);
+  --t-fill-color-status-success-ghost: hsl(125, 17%, 15%);
+  --t-fill-color-status-success-dim: hsl(120, 12%, 14%);
+  --t-fill-color-status-warning-ghost: hsl(41, 18%, 17%);
+  --t-fill-color-status-warning-dim: hsl(42, 13%, 15%);
+  --t-fill-color-status-error-ghost: hsl(8, 20%, 16%);
+  --t-fill-color-status-error-dim: hsl(10, 16%, 15%);
+  --t-fill-color-tooltip: hsla(0, 0%, 24%, 0.9);
+  --t-fill-color-product-accounts-gradient-page: linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
+  --t-fill-color-product-accounts-gradient-tint: linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
+  --t-fill-color-product-calendar-gradient-page: linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
+  --t-fill-color-product-calendar-gradient-tint: linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
+  --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%));
+  --t-fill-color-product-checkins-gradient-tint: linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
+  --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%));
+  --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%));
+  --t-fill-color-product-groups-gradient-page: linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
+  --t-fill-color-product-groups-gradient-tint: linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
+  --t-fill-color-product-home-gradient-page: linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
+  --t-fill-color-product-home-gradient-tint: linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
+  --t-fill-color-product-people-gradient-page: linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
+  --t-fill-color-product-people-gradient-tint: linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
+  --t-fill-color-product-publishing-gradient-page: linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
+  --t-fill-color-product-publishing-gradient-tint: linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
+  --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%));
+  --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%));
+  --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%));
+  --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%));
+  --t-fill-color-tag-gray-010: hsl(0, 0%, 20%);
+  --t-fill-color-tag-gray-020: hsl(0, 0%, 24%);
+  --t-fill-color-tag-gray-030: hsl(0, 0%, 36%);
+  --t-fill-color-tag-gray-040: hsl(0, 0%, 42%);
+  --t-fill-color-tag-blue-010: hsl(219, 26%, 24%);
+  --t-fill-color-tag-blue-020: hsl(220, 28%, 29%);
+  --t-fill-color-tag-blue-030: hsl(219, 32%, 45%);
+  --t-fill-color-tag-blue-040: hsl(220, 35%, 52%);
+  --t-fill-color-tag-aqua-010: hsl(200, 30%, 21%);
+  --t-fill-color-tag-aqua-020: hsl(200, 33%, 26%);
+  --t-fill-color-tag-aqua-030: hsl(200, 39%, 38%);
+  --t-fill-color-tag-aqua-040: hsl(200, 39%, 43%);
+  --t-fill-color-tag-teal-010: hsl(169, 33%, 19%);
+  --t-fill-color-tag-teal-020: hsl(169, 37%, 22%);
+  --t-fill-color-tag-teal-030: hsl(169, 43%, 31%);
+  --t-fill-color-tag-teal-040: hsl(169, 44%, 35%);
+  --t-fill-color-tag-green-010: hsl(110, 30%, 20%);
+  --t-fill-color-tag-green-020: hsl(112, 33%, 23%);
+  --t-fill-color-tag-green-030: hsl(112, 37%, 33%);
+  --t-fill-color-tag-green-040: hsl(112, 39%, 37%);
+  --t-fill-color-tag-yellow-010: hsl(44, 39%, 19%);
+  --t-fill-color-tag-yellow-020: hsl(44, 44%, 22%);
+  --t-fill-color-tag-yellow-030: hsl(44, 50%, 31%);
+  --t-fill-color-tag-yellow-040: hsl(44, 53%, 36%);
+  --t-fill-color-tag-orange-010: hsl(21, 35%, 22%);
+  --t-fill-color-tag-orange-020: hsl(20, 38%, 26%);
+  --t-fill-color-tag-orange-030: hsl(21, 44%, 40%);
+  --t-fill-color-tag-orange-040: hsl(21, 46%, 45%);
+  --t-fill-color-tag-pink-010: hsl(331, 22%, 24%);
+  --t-fill-color-tag-pink-020: hsl(324, 26%, 26%);
+  --t-fill-color-tag-pink-030: hsl(324, 30%, 45%);
+  --t-fill-color-tag-pink-040: hsl(324, 33%, 51%);
+  --t-fill-color-tag-purple-010: hsl(274, 20%, 23%);
+  --t-fill-color-tag-purple-020: hsl(274, 21%, 28%);
+  --t-fill-color-tag-purple-030: hsl(274, 25%, 46%);
+  --t-fill-color-tag-purple-040: hsl(274, 28%, 53%);
+  --t-fill-color-tag-magenta-010: hsl(292, 20%, 21%);
+  --t-fill-color-tag-magenta-020: hsl(292, 22%, 26%);
+  --t-fill-color-tag-magenta-030: hsl(293, 26%, 42%);
+  --t-fill-color-tag-magenta-040: hsl(292, 27%, 48%);
+  --t-fill-color-tag-indigo-010: hsl(235, 21%, 24%);
+  --t-fill-color-tag-indigo-020: hsl(236, 22%, 29%);
+  --t-fill-color-tag-indigo-030: hsl(236, 26%, 50%);
+  --t-fill-color-tag-indigo-040: hsl(236, 34%, 56%);
+  --t-fill-color-button-neutral-solid: hsl(0, 0%, 19%);
+  --t-fill-color-button-neutral-solid-hover: hsl(0, 0%, 24%);
+  --t-fill-color-button-neutral-solid-active: hsl(0, 0%, 32%);
+  --t-fill-color-button-neutral-solid-disabled: hsl(0, 0%, 12%);
+  --t-fill-color-button-neutral-outline: hsl(0, 0%, 15%);
+  --t-fill-color-button-neutral-outline-hover: hsl(0, 0%, 17%);
+  --t-fill-color-button-neutral-outline-active: hsl(0, 0%, 19%);
+  --t-fill-color-button-neutral-outline-disabled: hsl(0, 0%, 12%);
+  --t-fill-color-button-neutral-ghost: hsla(0, 0%, 0%, 0);
+  --t-fill-color-button-neutral-ghost-hover: hsl(0, 0%, 17%);
+  --t-fill-color-button-neutral-ghost-active: hsl(0, 0%, 19%);
+  --t-fill-color-button-neutral-ghost-disabled: hsla(0, 0%, 0%, 0);
+  --t-fill-color-button-neutral-responsive-header-disabled: hsla(0, 0%, 100%, 0.05);
+  --t-fill-color-button-interaction-solid: hsl(204, 100%, 35%);
+  --t-fill-color-button-interaction-solid-hover: hsl(204, 100%, 40%);
+  --t-fill-color-button-interaction-solid-active: hsl(204, 80%, 45%);
+  --t-fill-color-button-interaction-solid-disabled: hsl(0, 0%, 12%);
+  --t-fill-color-button-interaction-outline: hsl(204, 32%, 15%);
+  --t-fill-color-button-interaction-outline-hover: hsl(204, 39%, 17%);
+  --t-fill-color-button-interaction-outline-active: hsl(205, 45%, 18%);
+  --t-fill-color-button-interaction-outline-disabled: hsl(0, 0%, 12%);
+  --t-fill-color-button-interaction-ghost: hsla(0, 0%, 0%, 0);
+  --t-fill-color-button-interaction-ghost-hover: hsl(204, 32%, 15%);
+  --t-fill-color-button-interaction-ghost-active: hsl(204, 39%, 17%);
+  --t-fill-color-button-interaction-ghost-disabled: hsla(0, 0%, 0%, 0);
+  --t-fill-color-button-delete-solid: hsl(8, 60%, 40%);
+  --t-fill-color-button-delete-solid-active: hsl(8, 60%, 47%);
+  --t-fill-color-button-delete-solid-disabled: hsl(0, 0%, 12%);
+  --t-fill-color-button-delete-outline: hsl(8, 20%, 16%);
+  --t-fill-color-button-delete-outline-hover: hsl(9, 24%, 17%);
+  --t-fill-color-button-delete-outline-active: hsl(9, 29%, 19%);
+  --t-fill-color-button-delete-outline-disabled: hsl(0, 0%, 12%);
+  --t-fill-color-button-delete-ghost: hsla(0, 0%, 0%, 0);
+  --t-fill-color-button-delete-ghost-hover: hsl(8, 20%, 16%);
+  --t-fill-color-button-delete-ghost-active: hsl(9, 24%, 17%);
+  --t-fill-color-button-delete-ghost-disabled: hsla(0, 0%, 0%, 0);
+  --t-fill-color-button-pill: hsl(0, 0%, 18%);
+  --t-fill-color-button-pill-hover: hsl(0, 0%, 21%);
+  --t-fill-color-button-pill-active: hsl(0, 0%, 21%);
+  --t-fill-color-button-pill-disabled: hsl(0, 0%, 18%);
+  --t-fill-color-transparency-light-010: hsla(0, 0%, 0%, 0.1);
+  --t-fill-color-transparency-light-020: hsla(0, 0%, 0%, 0.2);
+  --t-fill-color-transparency-light-030: hsla(0, 0%, 0%, 0.3);
+  --t-fill-color-transparency-light-040: hsla(0, 0%, 0%, 0.4);
+  --t-fill-color-transparency-light-050: hsla(0, 0%, 0%, 0.5);
+  --t-fill-color-transparency-light-060: hsla(0, 0%, 0%, 0.6);
+  --t-fill-color-transparency-light-070: hsla(0, 0%, 0%, 0.7);
+  --t-fill-color-transparency-light-080: hsla(0, 0%, 0%, 0.8);
+  --t-fill-color-transparency-light-090: hsla(0, 0%, 0%, 0.9);
+  --t-fill-color-transparency-dark-010: hsla(0, 0%, 100%, 0.1);
+  --t-fill-color-transparency-dark-020: hsla(0, 0%, 100%, 0.2);
+  --t-fill-color-transparency-dark-030: hsla(0, 0%, 100%, 0.3);
+  --t-fill-color-transparency-dark-040: hsla(0, 0%, 100%, 0.4);
+  --t-fill-color-transparency-dark-050: hsla(0, 0%, 100%, 0.5);
+  --t-fill-color-transparency-dark-060: hsla(0, 0%, 100%, 0.6);
+  --t-fill-color-transparency-dark-070: hsla(0, 0%, 100%, 0.7);
+  --t-fill-color-transparency-dark-080: hsla(0, 0%, 100%, 0.8);
+  --t-fill-color-transparency-dark-090: hsla(0, 0%, 100%, 0.9);
+  --t-surface-color-card: hsl(0, 0%, 12%);
+  --t-surface-color-canvas: hsl(0, 0%, 10%);
+  --t-border-color: hsl(0, 0%, 21%);
+  --t-border-color-dark: hsl(0, 0%, 25%);
+  --t-border-color-darker: hsl(0, 0%, 33%);
+  --t-border-color-darkest: hsl(0, 0%, 38%);
+  --t-border-color-disabled: hsl(0, 0%, 21%);
+  --t-border-color-dim: hsl(0, 0%, 16%);
+  --t-border-color-white: hsl(0, 0%, 12%);
+  --t-border-color-status-neutral: hsl(0, 0%, 38%);
+  --t-border-color-status-info: hsl(204, 100%, 35%);
+  --t-border-color-button-neutral: hsl(0, 0%, 19%);
+  --t-border-color-button-info: hsla(204, 100%, 40%, 0.25);
+  --t-border-color-button-create: hsla(96, 57%, 33%, 0.25);
+  --t-border-color-button-delete: hsla(8, 60%, 47%, 0.25);
+  --t-border-color-control-neutral: hsl(0, 0%, 33%);
+  --t-border-color-control-info: hsl(204, 100%, 35%);
+  --t-border-color-control-disabled: hsl(0, 0%, 24%);
+  --t-shadow-overflow-color: hsla(0, 0%, 0%, 0.6);
+}