@planningcenter/tapestry 3.0.0-rc.6 → 3.0.0-rc.7

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.
@@ -1,230 +1,5 @@
1
1
  @layer t-critical, t-component;
2
2
 
3
- @media (prefers-color-scheme: dark){
4
- :root[data-color-mode="system"]{
5
- color-scheme:dark;
6
- --t-text-color-headline:hsl(0, 0%, 94%);
7
- --t-text-color:hsl(0, 0%, 80%);
8
- --t-text-color-secondary:hsl(0, 0%, 54%);
9
- --t-text-color-disabled:hsl(0, 0%, 25%);
10
- --t-text-color-placeholder:hsl(0, 0%, 38%);
11
- --t-text-color-interaction:hsl(204, 68%, 55%);
12
- --t-text-color-interaction-hover:hsl(204, 68%, 50%);
13
- --t-text-color-interaction-active:hsl(204, 68%, 45%);
14
- --t-text-color-interaction-visited:hsl(204, 68%, 50%);
15
- --t-text-color-status-neutral:hsl(0, 0%, 80%);
16
- --t-text-color-status-info:hsl(204, 68%, 55%);
17
- --t-text-color-status-success:hsl(97, 57%, 41%);
18
- --t-text-color-status-warning:hsl(42, 84%, 55%);
19
- --t-text-color-status-error:hsl(8, 61%, 61%);
20
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
21
- --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
22
- --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
23
- --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
24
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
25
- --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
26
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
27
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
28
- --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
29
- --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
30
- --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
31
- --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
32
- --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
33
- --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
34
- --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
35
- --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
36
- --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
37
- --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
38
- --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
39
- --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
40
- --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
41
- --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
42
- --t-icon-color:hsl(0, 0%, 80%);
43
- --t-icon-color-secondary:hsl(0, 0%, 54%);
44
- --t-icon-color-dim:hsl(0, 0%, 38%);
45
- --t-icon-color-disabled:hsl(0, 0%, 25%);
46
- --t-icon-color-status-neutral:hsl(0, 0%, 54%);
47
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
48
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
49
- --t-icon-color-status-info:hsl(204, 68%, 55%);
50
- --t-icon-color-status-error:hsl(8, 61%, 61%);
51
- --t-fill-color-neutral-100:hsl(0, 0%, 10%);
52
- --t-fill-color-neutral-000:hsl(0, 0%, 98%);
53
- --t-fill-color-neutral-010:hsl(0, 0%, 88%);
54
- --t-fill-color-neutral-020:hsl(0, 0%, 68%);
55
- --t-fill-color-neutral-025:hsl(0, 0%, 58%);
56
- --t-fill-color-neutral-030:hsl(0, 0%, 50%);
57
- --t-fill-color-neutral-040:hsl(0, 0%, 32%);
58
- --t-fill-color-neutral-050:hsl(0, 0%, 24%);
59
- --t-fill-color-neutral-060:hsl(0, 0%, 19%);
60
- --t-fill-color-neutral-070:hsl(0, 0%, 17%);
61
- --t-fill-color-neutral-080:hsl(0, 0%, 15%);
62
- --t-fill-color-neutral-090:hsl(0, 0%, 12%);
63
- --t-fill-color-interaction:hsl(204, 100%, 35%);
64
- --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
65
- --t-fill-color-interaction-active:hsl(204, 80%, 45%);
66
- --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
67
- --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
68
- --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
69
- --t-fill-color-control:hsl(204, 100%, 35%);
70
- --t-fill-color-control-disabled:hsl(0, 0%, 20%);
71
- --t-fill-color-status-neutral:hsl(0, 0%, 24%);
72
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
73
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
74
- --t-fill-color-status-info:hsl(204, 100%, 35%);
75
- --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
76
- --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
77
- --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
78
- --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
79
- --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
80
- --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
81
- --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
82
- --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
83
- --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
84
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
85
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
86
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
87
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
88
- --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%));
89
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
90
- --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%));
91
- --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%));
92
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
93
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
94
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
95
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
96
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
97
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
98
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
99
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
100
- --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%));
101
- --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%));
102
- --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%));
103
- --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%));
104
- --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
105
- --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
106
- --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
107
- --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
108
- --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
109
- --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
110
- --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
111
- --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
112
- --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
113
- --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
114
- --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
115
- --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
116
- --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
117
- --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
118
- --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
119
- --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
120
- --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
121
- --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
122
- --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
123
- --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
124
- --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
125
- --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
126
- --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
127
- --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
128
- --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
129
- --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
130
- --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
131
- --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
132
- --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
133
- --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
134
- --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
135
- --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
136
- --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
137
- --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
138
- --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
139
- --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
140
- --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
141
- --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
142
- --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
143
- --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
144
- --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
145
- --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
146
- --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
147
- --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
148
- --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
149
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
150
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
151
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
152
- --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
153
- --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
154
- --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
155
- --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
156
- --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
157
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
158
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
159
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
160
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
161
- --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
162
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
163
- --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
164
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
165
- --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
166
- --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
167
- --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
168
- --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
169
- --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
170
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
171
- --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
172
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
173
- --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
174
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
175
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
176
- --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
177
- --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
178
- --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
179
- --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
180
- --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
181
- --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
182
- --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
183
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
184
- --t-fill-color-button-pill:hsl(0, 0%, 18%);
185
- --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
186
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
187
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
188
- --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
189
- --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
190
- --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
191
- --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
192
- --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
193
- --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
194
- --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
195
- --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
196
- --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
197
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
198
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
199
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
200
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
201
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
202
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
203
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
204
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
205
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
206
- --t-surface-color-card:hsl(0, 0%, 12%);
207
- --t-surface-color-canvas:hsl(0, 0%, 10%);
208
- --t-border-color:hsl(0, 0%, 21%);
209
- --t-border-color-dark:hsl(0, 0%, 25%);
210
- --t-border-color-darker:hsl(0, 0%, 33%);
211
- --t-border-color-darkest:hsl(0, 0%, 38%);
212
- --t-border-color-disabled:hsl(0, 0%, 21%);
213
- --t-border-color-dim:hsl(0, 0%, 16%);
214
- --t-border-color-white:hsl(0, 0%, 12%);
215
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
216
- --t-border-color-status-info:hsl(204, 100%, 35%);
217
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
218
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
219
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
220
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
221
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
222
- --t-border-color-control-info:hsl(204, 100%, 35%);
223
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
224
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
225
- }
226
- }
227
-
228
3
  :root{
229
4
  --t-border-radius-sm:2px;
230
5
  --t-border-radius-md:4px;
@@ -640,111 +415,230 @@
640
415
  }
641
416
 
642
417
  :root[data-color-mode="dark"]{
643
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
644
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
645
- --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
646
- --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
647
- --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
648
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
649
- --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
650
- --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
651
- }
652
-
653
- :root{
654
- --t-border-size-default:var(--t-border-width);
655
- --t-border-size-thick:var(--t-border-width-thick);
656
- --t-font-weight-semi-bold:var(--t-font-weight-semibold);
657
- --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
658
- --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
659
- --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
660
- --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
661
- --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
662
- --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
663
- --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
664
- --t-fill-color-alert-info:hsl(204, 94%, 49%);
665
- --t-fill-color-alert-success:hsl(122, 60%, 41%);
666
- --t-fill-color-alert-warning:hsl(43, 96%, 58%);
667
- --t-fill-color-alert-error:hsl(4, 77%, 59%);
668
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
669
- --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
670
- --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
671
- --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
672
- --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
673
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
674
- --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
675
- --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
676
- --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
677
- --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
678
- --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
679
- --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
680
- --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
681
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
682
- --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
683
- --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
684
- --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
685
- --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
686
- --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
687
- --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
688
- --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
689
- --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
690
- --t-border-color-default-base:var(--t-border-color);
691
- --t-border-color-default-dark:var(--t-border-color-dark);
692
- --t-border-color-default-darker:var(--t-border-color-darker);
693
- --t-border-color-default-darkest:var(--t-border-color-darkest);
694
- --t-border-color-default-dim:var(--t-border-color-dim);
695
- --t-border-color-default-disabled:var(--t-border-color-disabled);
696
- --t-border-color-default-white:var(--t-border-color-white);
697
- --t-border-radius-default:var(--t-border-radius);
698
- --t-border-width-default:var(--t-border-width);
699
- --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
700
- --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
701
- --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
702
- --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
703
- --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
704
- --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
705
- --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
706
- --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
707
- --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
708
- --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
709
- --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
710
- --t-fill-color-control-primary:var(--t-fill-color-control);
711
- --t-fill-color-interaction-default:var(--t-fill-color-interaction);
712
- --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
713
- --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
714
- --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
715
- --t-icon-color-default-dim:var(--t-icon-color-dim);
716
- --t-icon-color-default-disabled:var(--t-icon-color-disabled);
717
- --t-icon-color-default-inverted:var(--t-icon-color-inverted);
718
- --t-icon-color-default-primary:var(--t-icon-color);
719
- --t-icon-color-default-secondary:var(--t-icon-color-secondary);
720
- --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
721
- --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
722
- --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
723
- --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
724
- --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
725
- --t-text-color-default-disabled:var(--t-text-color-disabled);
726
- --t-text-color-default-headline:var(--t-text-color-headline);
727
- --t-text-color-default-inverted:var(--t-text-color-inverted);
728
- --t-text-color-default-placeholder:var(--t-text-color-placeholder);
729
- --t-text-color-default-primary:var(--t-text-color);
730
- --t-text-color-default-secondary:var(--t-text-color-secondary);
731
- --t-text-color-interaction-primary:var(--t-text-color-interaction);
418
+ color-scheme:dark;
419
+ --t-text-color-headline:hsl(0, 0%, 94%);
420
+ --t-text-color:hsl(0, 0%, 80%);
421
+ --t-text-color-secondary:hsl(0, 0%, 54%);
422
+ --t-text-color-disabled:hsl(0, 0%, 25%);
423
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
424
+ --t-text-color-interaction:hsl(204, 68%, 55%);
425
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
426
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
427
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
428
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
429
+ --t-text-color-status-info:hsl(204, 68%, 55%);
430
+ --t-text-color-status-success:hsl(97, 57%, 41%);
431
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
432
+ --t-text-color-status-error:hsl(8, 61%, 61%);
433
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
434
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
435
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
436
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
437
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
438
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
439
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
440
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
441
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
442
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
443
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
444
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
445
+ --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
446
+ --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
447
+ --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
448
+ --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
449
+ --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
450
+ --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
451
+ --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
452
+ --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
453
+ --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
454
+ --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
455
+ --t-icon-color:hsl(0, 0%, 80%);
456
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
457
+ --t-icon-color-dim:hsl(0, 0%, 38%);
458
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
459
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
460
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
461
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
462
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
463
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
464
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
465
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
466
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
467
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
468
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
469
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
470
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
471
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
472
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
473
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
474
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
475
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
476
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
477
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
478
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
479
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
480
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
481
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
482
+ --t-fill-color-control:hsl(204, 100%, 35%);
483
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
484
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
485
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
486
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
487
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
488
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
489
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
490
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
491
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
492
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
493
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
494
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
495
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
496
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
497
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
498
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
499
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
500
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
501
+ --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%));
502
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
503
+ --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%));
504
+ --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%));
505
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
506
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
507
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
508
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
509
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
510
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
511
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
512
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
513
+ --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%));
514
+ --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%));
515
+ --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%));
516
+ --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%));
517
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
518
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
519
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
520
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
521
+ --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
522
+ --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
523
+ --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
524
+ --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
525
+ --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
526
+ --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
527
+ --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
528
+ --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
529
+ --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
530
+ --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
531
+ --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
532
+ --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
533
+ --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
534
+ --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
535
+ --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
536
+ --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
537
+ --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
538
+ --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
539
+ --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
540
+ --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
541
+ --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
542
+ --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
543
+ --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
544
+ --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
545
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
546
+ --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
547
+ --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
548
+ --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
549
+ --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
550
+ --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
551
+ --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
552
+ --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
553
+ --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
554
+ --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
555
+ --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
556
+ --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
557
+ --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
558
+ --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
559
+ --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
560
+ --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
561
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
562
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
563
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
564
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
565
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
566
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
567
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
568
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
569
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
570
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
571
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
572
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
573
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
574
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
575
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
576
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
577
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
578
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
579
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
580
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
581
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
582
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
583
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
584
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
585
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
586
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
587
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
588
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
589
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
590
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
591
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
592
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
593
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
594
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
595
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
596
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
597
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
598
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
599
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
600
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
601
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
602
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
603
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
604
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
605
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
606
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
607
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
608
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
609
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
610
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
611
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
612
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
613
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
614
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
615
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
616
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
617
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
618
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
619
+ --t-surface-color-card:hsl(0, 0%, 12%);
620
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
621
+ --t-border-color:hsl(0, 0%, 21%);
622
+ --t-border-color-dark:hsl(0, 0%, 25%);
623
+ --t-border-color-darker:hsl(0, 0%, 33%);
624
+ --t-border-color-darkest:hsl(0, 0%, 38%);
625
+ --t-border-color-disabled:hsl(0, 0%, 21%);
626
+ --t-border-color-dim:hsl(0, 0%, 16%);
627
+ --t-border-color-white:hsl(0, 0%, 12%);
628
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
629
+ --t-border-color-status-info:hsl(204, 100%, 35%);
630
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
631
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
632
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
633
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
634
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
635
+ --t-border-color-control-info:hsl(204, 100%, 35%);
636
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
637
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
732
638
  }
733
639
 
734
640
  @media (prefers-color-scheme: dark){
735
641
  :root[data-color-mode="system"]{
736
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
737
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
738
- --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
739
- --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
740
- --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
741
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
742
- --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
743
- --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
744
- }
745
- }
746
-
747
- :root[data-color-mode="dark"]{
748
642
  color-scheme:dark;
749
643
  --t-text-color-headline:hsl(0, 0%, 94%);
750
644
  --t-text-color:hsl(0, 0%, 80%);
@@ -966,6 +860,112 @@
966
860
  --t-border-color-control-disabled:hsl(0, 0%, 21%);
967
861
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
968
862
  }
863
+ }
864
+
865
+ :root{
866
+ --t-border-size-default:var(--t-border-width);
867
+ --t-border-size-thick:var(--t-border-width-thick);
868
+ --t-font-weight-semi-bold:var(--t-font-weight-semibold);
869
+ --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
870
+ --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
871
+ --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
872
+ --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
873
+ --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
874
+ --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
875
+ --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
876
+ --t-fill-color-alert-info:hsl(204, 94%, 49%);
877
+ --t-fill-color-alert-success:hsl(122, 60%, 41%);
878
+ --t-fill-color-alert-warning:hsl(43, 96%, 58%);
879
+ --t-fill-color-alert-error:hsl(4, 77%, 59%);
880
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
881
+ --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
882
+ --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
883
+ --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
884
+ --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
885
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
886
+ --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
887
+ --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
888
+ --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
889
+ --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
890
+ --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
891
+ --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
892
+ --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
893
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
894
+ --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
895
+ --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
896
+ --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
897
+ --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
898
+ --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
899
+ --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
900
+ --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
901
+ --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
902
+ --t-border-color-default-base:var(--t-border-color);
903
+ --t-border-color-default-dark:var(--t-border-color-dark);
904
+ --t-border-color-default-darker:var(--t-border-color-darker);
905
+ --t-border-color-default-darkest:var(--t-border-color-darkest);
906
+ --t-border-color-default-dim:var(--t-border-color-dim);
907
+ --t-border-color-default-disabled:var(--t-border-color-disabled);
908
+ --t-border-color-default-white:var(--t-border-color-white);
909
+ --t-border-radius-default:var(--t-border-radius);
910
+ --t-border-width-default:var(--t-border-width);
911
+ --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
912
+ --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
913
+ --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
914
+ --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
915
+ --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
916
+ --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
917
+ --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
918
+ --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
919
+ --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
920
+ --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
921
+ --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
922
+ --t-fill-color-control-primary:var(--t-fill-color-control);
923
+ --t-fill-color-interaction-default:var(--t-fill-color-interaction);
924
+ --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
925
+ --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
926
+ --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
927
+ --t-icon-color-default-dim:var(--t-icon-color-dim);
928
+ --t-icon-color-default-disabled:var(--t-icon-color-disabled);
929
+ --t-icon-color-default-inverted:var(--t-icon-color-inverted);
930
+ --t-icon-color-default-primary:var(--t-icon-color);
931
+ --t-icon-color-default-secondary:var(--t-icon-color-secondary);
932
+ --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
933
+ --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
934
+ --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
935
+ --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
936
+ --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
937
+ --t-text-color-default-disabled:var(--t-text-color-disabled);
938
+ --t-text-color-default-headline:var(--t-text-color-headline);
939
+ --t-text-color-default-inverted:var(--t-text-color-inverted);
940
+ --t-text-color-default-placeholder:var(--t-text-color-placeholder);
941
+ --t-text-color-default-primary:var(--t-text-color);
942
+ --t-text-color-default-secondary:var(--t-text-color-secondary);
943
+ --t-text-color-interaction-primary:var(--t-text-color-interaction);
944
+ }
945
+
946
+ :root[data-color-mode="dark"]{
947
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
948
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
949
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
950
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
951
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
952
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
953
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
954
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
955
+ }
956
+
957
+ @media (prefers-color-scheme: dark){
958
+ :root[data-color-mode="system"]{
959
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
960
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
961
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
962
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
963
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
964
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
965
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
966
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
967
+ }
968
+ }
969
969
 
970
970
  @layer t-critical{
971
971
  tds-page-header:not(.hydrated){