@planningcenter/tapestry 3.0.0-rc.25 → 3.0.0-rc.26

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 (38) hide show
  1. package/dist/index.css +87 -98
  2. package/dist/index.css.map +1 -1
  3. package/dist/index.d.ts +0 -2
  4. package/dist/index.d.ts.map +1 -1
  5. package/dist/jsTokens.d.ts +1 -1
  6. package/dist/jsTokens.d.ts.map +1 -1
  7. package/dist/jsTokens.js +1 -1
  8. package/dist/jsTokens.js.map +1 -1
  9. package/dist/reactRender.css +1007 -1018
  10. package/dist/reactRender.css.map +1 -1
  11. package/dist/reactRenderLegacy.css +1007 -1018
  12. package/dist/reactRenderLegacy.css.map +1 -1
  13. package/dist/tokens-dark.css.map +1 -1
  14. package/dist/tokens-dark.js +2 -0
  15. package/dist/tokens-deprecated.css +0 -3
  16. package/dist/tokens-deprecated.css.map +1 -1
  17. package/dist/tokens-deprecated.js +2 -0
  18. package/dist/tokens.css.map +1 -1
  19. package/dist/tokens.js +2 -0
  20. package/dist/unstable.css +87 -98
  21. package/dist/unstable.css.map +1 -1
  22. package/dist/unstable.d.ts +1 -1
  23. package/dist/unstable.d.ts.map +1 -1
  24. package/dist/unstable.js +2 -1
  25. package/dist/unstable.js.map +1 -1
  26. package/package.json +7 -7
  27. package/dist/tokens/ts/react-native-tokens.d.ts +0 -1927
  28. package/dist/tokens/ts/react-native-tokens.d.ts.map +0 -1
  29. package/dist/tokens/ts/react-native-tokens.js +0 -497
  30. package/dist/tokens/ts/react-native-tokens.js.map +0 -1
  31. package/dist/tokens/ts/tokens.d.ts +0 -497
  32. package/dist/tokens/ts/tokens.d.ts.map +0 -1
  33. package/dist/tokens/ts/tokens.js +0 -499
  34. package/dist/tokens/ts/tokens.js.map +0 -1
  35. package/dist/tokens-deprecated.d.ts +0 -5
  36. package/dist/tokens-deprecated.d.ts.map +0 -1
  37. package/dist/tokens.d.ts +0 -4
  38. package/dist/tokens.d.ts.map +0 -1
@@ -1,925 +1,7 @@
1
- @layer t-critical, t-component;
2
-
3
- :root[data-color-mode="dark"]{
4
- color-scheme:dark;
5
- --t-text-color-headline:hsl(0, 0%, 94%);
6
- --t-text-color:hsl(0, 0%, 80%);
7
- --t-text-color-secondary:hsl(0, 0%, 54%);
8
- --t-text-color-disabled:hsl(0, 0%, 25%);
9
- --t-text-color-placeholder:hsl(0, 0%, 38%);
10
- --t-text-color-interaction:hsl(204, 68%, 55%);
11
- --t-text-color-interaction-hover:hsl(204, 68%, 50%);
12
- --t-text-color-interaction-active:hsl(204, 68%, 45%);
13
- --t-text-color-interaction-visited:hsl(204, 68%, 50%);
14
- --t-text-color-status-neutral:hsl(0, 0%, 80%);
15
- --t-text-color-status-info:hsl(204, 68%, 55%);
16
- --t-text-color-status-success:hsl(97, 57%, 41%);
17
- --t-text-color-status-warning:hsl(42, 84%, 55%);
18
- --t-text-color-status-error:hsl(8, 61%, 61%);
19
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
20
- --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
21
- --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
22
- --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
23
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
24
- --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
25
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
26
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
27
- --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
28
- --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
29
- --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
30
- --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
31
- --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
32
- --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
33
- --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
34
- --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
35
- --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
36
- --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
37
- --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
38
- --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
39
- --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
40
- --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
41
- --t-icon-color:hsl(0, 0%, 80%);
42
- --t-icon-color-secondary:hsl(0, 0%, 54%);
43
- --t-icon-color-dim:hsl(0, 0%, 38%);
44
- --t-icon-color-disabled:hsl(0, 0%, 25%);
45
- --t-icon-color-status-neutral:hsl(0, 0%, 54%);
46
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
47
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
48
- --t-icon-color-status-info:hsl(204, 68%, 55%);
49
- --t-icon-color-status-error:hsl(8, 61%, 61%);
50
- --t-fill-color-neutral-100:hsl(0, 0%, 10%);
51
- --t-fill-color-neutral-000:hsl(0, 0%, 98%);
52
- --t-fill-color-neutral-010:hsl(0, 0%, 88%);
53
- --t-fill-color-neutral-020:hsl(0, 0%, 68%);
54
- --t-fill-color-neutral-025:hsl(0, 0%, 58%);
55
- --t-fill-color-neutral-030:hsl(0, 0%, 50%);
56
- --t-fill-color-neutral-040:hsl(0, 0%, 32%);
57
- --t-fill-color-neutral-050:hsl(0, 0%, 24%);
58
- --t-fill-color-neutral-060:hsl(0, 0%, 19%);
59
- --t-fill-color-neutral-070:hsl(0, 0%, 17%);
60
- --t-fill-color-neutral-080:hsl(0, 0%, 15%);
61
- --t-fill-color-neutral-090:hsl(0, 0%, 12%);
62
- --t-fill-color-interaction:hsl(204, 100%, 35%);
63
- --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
64
- --t-fill-color-interaction-active:hsl(204, 80%, 45%);
65
- --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
66
- --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
67
- --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
68
- --t-fill-color-control:hsl(204, 100%, 35%);
69
- --t-fill-color-control-disabled:hsl(0, 0%, 20%);
70
- --t-fill-color-status-neutral:hsl(0, 0%, 24%);
71
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
72
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
73
- --t-fill-color-status-info:hsl(204, 100%, 35%);
74
- --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
75
- --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
76
- --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
77
- --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
78
- --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
79
- --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
80
- --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
81
- --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
82
- --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
83
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
84
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
85
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
86
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
87
- --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%));
88
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
89
- --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%));
90
- --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%));
91
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
92
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
93
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
94
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
95
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
96
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
97
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
98
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
99
- --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%));
100
- --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%));
101
- --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%));
102
- --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%));
103
- --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
104
- --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
105
- --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
106
- --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
107
- --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
108
- --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
109
- --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
110
- --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
111
- --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
112
- --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
113
- --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
114
- --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
115
- --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
116
- --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
117
- --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
118
- --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
119
- --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
120
- --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
121
- --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
122
- --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
123
- --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
124
- --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
125
- --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
126
- --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
127
- --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
128
- --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
129
- --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
130
- --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
131
- --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
132
- --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
133
- --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
134
- --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
135
- --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
136
- --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
137
- --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
138
- --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
139
- --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
140
- --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
141
- --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
142
- --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
143
- --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
144
- --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
145
- --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
146
- --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
147
- --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
148
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
149
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
150
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
151
- --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
152
- --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
153
- --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
154
- --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
155
- --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
156
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
157
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
158
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
159
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
160
- --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
161
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
162
- --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
163
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
164
- --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
165
- --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
166
- --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
167
- --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
168
- --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
169
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
170
- --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
171
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
172
- --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
173
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
174
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
175
- --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
176
- --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
177
- --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
178
- --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
179
- --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
180
- --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
181
- --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
182
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
183
- --t-fill-color-button-pill:hsl(0, 0%, 18%);
184
- --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
185
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
186
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
187
- --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
188
- --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
189
- --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
190
- --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
191
- --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
192
- --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
193
- --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
194
- --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
195
- --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
196
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
197
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
198
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
199
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
200
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
201
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
202
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
203
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
204
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
205
- --t-surface-color-card:hsl(0, 0%, 12%);
206
- --t-surface-color-canvas:hsl(0, 0%, 10%);
207
- --t-border-color:hsl(0, 0%, 21%);
208
- --t-border-color-dark:hsl(0, 0%, 25%);
209
- --t-border-color-darker:hsl(0, 0%, 33%);
210
- --t-border-color-darkest:hsl(0, 0%, 38%);
211
- --t-border-color-disabled:hsl(0, 0%, 21%);
212
- --t-border-color-dim:hsl(0, 0%, 16%);
213
- --t-border-color-white:hsl(0, 0%, 12%);
214
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
215
- --t-border-color-status-info:hsl(204, 100%, 35%);
216
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
217
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
218
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
219
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
220
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
221
- --t-border-color-control-info:hsl(204, 100%, 35%);
222
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
223
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
224
- }
225
-
226
- :root{
227
- --t-border-radius-sm:2px;
228
- --t-border-radius-md:4px;
229
- --t-border-radius-lg:8px;
230
- --t-border-radius-xl:16px;
231
- --t-border-radius-round:56px;
232
- --t-border-radius:4px;
233
- --t-border-width:1px;
234
- --t-border-width-thick:2px;
235
- --t-spacing-1:8px;
236
- --t-spacing-2:16px;
237
- --t-spacing-3:24px;
238
- --t-spacing-4:32px;
239
- --t-spacing-5:40px;
240
- --t-spacing-6:48px;
241
- --t-spacing-7:56px;
242
- --t-spacing-fourth:2px;
243
- --t-spacing-half:4px;
244
- --t-spacing-1-half:12px;
245
- --t-element-size-3xl:48px;
246
- --t-element-size-2xl:32px;
247
- --t-element-size-xl:24px;
248
- --t-element-size-lg:18px;
249
- --t-element-size-md:16px;
250
- --t-element-size-sm:14px;
251
- --t-element-size-xs:12px;
252
- --t-font-size-4xl:32px;
253
- --t-font-size-3xl:28px;
254
- --t-font-size-2xl:24px;
255
- --t-font-size-xl:20px;
256
- --t-font-size-lg:18px;
257
- --t-font-size-md:16px;
258
- --t-font-size-sm:14px;
259
- --t-font-size-xs:12px;
260
- --t-font-size-2xs:10px;
261
- --t-font-weight-normal:400;
262
- --t-font-weight-medium:500;
263
- --t-font-weight-semibold:600;
264
- --t-font-weight-bold:700;
265
- --t-container-size-xl:48px;
266
- --t-container-size-lg:40px;
267
- --t-container-size-md:32px;
268
- --t-container-size-sm:24px;
269
- --t-container-size-xs:20px;
270
- --t-avatar-size-20:20px;
271
- --t-avatar-size-24:24px;
272
- --t-avatar-size-36:36px;
273
- --t-avatar-size-48:48px;
274
- --t-avatar-size-72:72px;
275
- --t-avatar-size-112:112px;
276
- --t-text-color-headline:hsl(0, 0%, 12%);
277
- --t-text-color:hsl(0, 0%, 24%);
278
- --t-text-color-secondary:hsl(0, 0%, 42%);
279
- --t-text-color-disabled:hsl(0, 0%, 81%);
280
- --t-text-color-placeholder:hsl(0, 0%, 58%);
281
- --t-text-color-inverted:hsl(0, 0%, 100%);
282
- --t-text-color-interaction:hsl(204, 100%, 40%);
283
- --t-text-color-interaction-hover:hsl(204, 100%, 35%);
284
- --t-text-color-interaction-active:hsl(204, 100%, 30%);
285
- --t-text-color-interaction-visited:hsl(204, 100%, 30%);
286
- --t-text-color-status-neutral:hsl(0, 0%, 24%);
287
- --t-text-color-status-info:hsl(204, 100%, 35%);
288
- --t-text-color-status-success:hsl(97, 57%, 28%);
289
- --t-text-color-status-warning:hsl(42, 100%, 29%);
290
- --t-text-color-status-error:hsl(8, 60%, 45%);
291
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 24%);
292
- --t-text-color-tag-subtle-blue:hsl(224, 47%, 31%);
293
- --t-text-color-tag-subtle-indigo:hsl(241, 59%, 28%);
294
- --t-text-color-tag-subtle-aqua:hsl(209, 77%, 22%);
295
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 15%);
296
- --t-text-color-tag-subtle-green:hsl(100, 93%, 17%);
297
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 23%);
298
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 18%);
299
- --t-text-color-tag-subtle-pink:hsl(327, 88%, 20%);
300
- --t-text-color-tag-subtle-purple:hsl(268, 71%, 27%);
301
- --t-text-color-tag-subtle-magenta:hsl(285, 71%, 20%);
302
- --t-text-color-tag-bold-gray:hsl(0, 0%, 24%);
303
- --t-text-color-tag-bold-indigo:hsl(241, 59%, 28%);
304
- --t-text-color-tag-bold-blue:hsl(224, 47%, 31%);
305
- --t-text-color-tag-bold-aqua:hsl(209, 77%, 22%);
306
- --t-text-color-tag-bold-teal:hsl(180, 95%, 15%);
307
- --t-text-color-tag-bold-green:hsl(100, 93%, 17%);
308
- --t-text-color-tag-bold-yellow:hsl(29, 100%, 23%);
309
- --t-text-color-tag-bold-orange:hsl(18, 100%, 18%);
310
- --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
311
- --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
312
- --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
313
- --t-icon-color:hsl(0, 0%, 24%);
314
- --t-icon-color-secondary:hsl(0, 0%, 42%);
315
- --t-icon-color-dim:hsl(0, 0%, 58%);
316
- --t-icon-color-disabled:hsl(0, 0%, 81%);
317
- --t-icon-color-inverted:hsl(0, 0%, 100%);
318
- --t-icon-color-status-neutral:hsl(0, 0%, 42%);
319
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 58%);
320
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 24%);
321
- --t-icon-color-status-info:hsl(204, 100%, 40%);
322
- --t-icon-color-status-success:hsl(96, 57%, 33%);
323
- --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
324
- --t-icon-color-status-warning:hsl(42, 84%, 49%);
325
- --t-icon-color-status-error:hsl(8, 60%, 47%);
326
- --t-fill-color-neutral-100:hsl(0, 0%, 100%);
327
- --t-fill-color-neutral-000:hsl(0, 0%, 12%);
328
- --t-fill-color-neutral-010:hsl(0, 0%, 24%);
329
- --t-fill-color-neutral-020:hsl(0, 0%, 42%);
330
- --t-fill-color-neutral-025:hsl(0, 0%, 50%);
331
- --t-fill-color-neutral-030:hsl(0, 0%, 58%);
332
- --t-fill-color-neutral-040:hsl(0, 0%, 81%);
333
- --t-fill-color-neutral-050:hsl(0, 0%, 88%);
334
- --t-fill-color-neutral-060:hsl(0, 0%, 93%);
335
- --t-fill-color-neutral-070:hsl(0, 0%, 95%);
336
- --t-fill-color-neutral-080:hsl(0, 0%, 97%);
337
- --t-fill-color-neutral-090:hsl(0, 0%, 98%);
338
- --t-fill-color-interaction:hsl(204, 100%, 40%);
339
- --t-fill-color-interaction-hover:hsl(204, 100%, 35%);
340
- --t-fill-color-interaction-active:hsl(204, 100%, 30%);
341
- --t-fill-color-interaction-disabled:hsl(0, 0%, 81%);
342
- --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
343
- --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
344
- --t-fill-color-control:hsl(204, 100%, 40%);
345
- --t-fill-color-control-secondary:hsl(97, 57%, 40%);
346
- --t-fill-color-control-error:hsl(8, 60%, 47%);
347
- --t-fill-color-control-disabled:hsl(0, 0%, 81%);
348
- --t-fill-color-status-neutral:hsl(0, 0%, 42%);
349
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 93%);
350
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 97%);
351
- --t-fill-color-status-info:hsl(204, 100%, 40%);
352
- --t-fill-color-status-info-ghost:hsl(203, 94%, 94%);
353
- --t-fill-color-status-info-dim:hsl(204, 100%, 97%);
354
- --t-fill-color-status-success:hsl(96, 57%, 33%);
355
- --t-fill-color-status-success-ghost:hsl(97, 57%, 90%);
356
- --t-fill-color-status-success-dim:hsl(96, 60%, 95%);
357
- --t-fill-color-status-warning:hsl(42, 84%, 63%);
358
- --t-fill-color-status-warning-ghost:hsl(42, 87%, 94%);
359
- --t-fill-color-status-warning-dim:hsl(42, 87%, 97%);
360
- --t-fill-color-status-error:hsl(8, 60%, 47%);
361
- --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
362
- --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
363
- --t-fill-color-tooltip:hsla(0, 0%, 12%, 0.9);
364
- --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
365
- --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
366
- --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
367
- --t-fill-color-product-accounts-040:hsl(210, 54%, 60%);
368
- --t-fill-color-product-accounts-050:hsl(210, 55%, 50%);
369
- --t-fill-color-product-accounts-060:hsl(210, 65%, 40%);
370
- --t-fill-color-product-accounts-070:hsl(211, 70%, 32%);
371
- --t-fill-color-product-accounts-080:hsl(210, 75%, 25%);
372
- --t-fill-color-product-calendar-010:hsl(8, 61%, 90%);
373
- --t-fill-color-product-calendar-020:hsl(8, 61%, 70%);
374
- --t-fill-color-product-calendar-030:hsl(8, 72%, 59%);
375
- --t-fill-color-product-calendar-040:hsl(8, 65%, 55%);
376
- --t-fill-color-product-calendar-050:hsl(9, 61%, 50%);
377
- --t-fill-color-product-calendar-060:hsl(8, 65%, 42%);
378
- --t-fill-color-product-calendar-070:hsl(7, 65%, 34%);
379
- --t-fill-color-product-calendar-080:hsl(9, 61%, 27%);
380
- --t-fill-color-product-checkins-010:hsl(285, 20%, 92%);
381
- --t-fill-color-product-checkins-020:hsl(283, 22%, 75%);
382
- --t-fill-color-product-checkins-030:hsl(284, 22%, 64%);
383
- --t-fill-color-product-checkins-040:hsl(283, 22%, 55%);
384
- --t-fill-color-product-checkins-050:hsl(283, 22%, 48%);
385
- --t-fill-color-product-checkins-060:hsl(283, 27%, 42%);
386
- --t-fill-color-product-checkins-070:hsl(284, 33%, 34%);
387
- --t-fill-color-product-checkins-080:hsl(283, 33%, 27%);
388
- --t-fill-color-product-giving-010:hsl(41, 95%, 93%);
389
- --t-fill-color-product-giving-020:hsl(42, 95%, 83%);
390
- --t-fill-color-product-giving-030:hsl(43, 95%, 75%);
391
- --t-fill-color-product-giving-040:hsl(43, 88%, 70%);
392
- --t-fill-color-product-giving-050:hsl(43, 88%, 64%);
393
- --t-fill-color-product-giving-060:hsl(42, 84%, 55%);
394
- --t-fill-color-product-giving-070:hsl(42, 84%, 48%);
395
- --t-fill-color-product-giving-080:hsl(42, 100%, 40%);
396
- --t-fill-color-product-groups-010:hsl(18, 95%, 92%);
397
- --t-fill-color-product-groups-020:hsl(17, 96%, 80%);
398
- --t-fill-color-product-groups-030:hsl(17, 96%, 70%);
399
- --t-fill-color-product-groups-040:hsl(17, 96%, 63%);
400
- --t-fill-color-product-groups-050:hsl(17, 88%, 55%);
401
- --t-fill-color-product-groups-060:hsl(12, 70%, 48%);
402
- --t-fill-color-product-groups-070:hsl(12, 70%, 40%);
403
- --t-fill-color-product-groups-080:hsl(14, 70%, 34%);
404
- --t-fill-color-product-home-010:hsl(221, 89%, 93%);
405
- --t-fill-color-product-home-020:hsl(221, 91%, 91%);
406
- --t-fill-color-product-home-030:hsl(221, 91%, 87%);
407
- --t-fill-color-product-home-040:hsl(221, 91%, 62%);
408
- --t-fill-color-product-home-050:hsl(221, 91%, 55%);
409
- --t-fill-color-product-home-060:hsl(221, 90%, 50%);
410
- --t-fill-color-product-home-070:hsl(221, 90%, 45%);
411
- --t-fill-color-product-home-080:hsl(218, 84%, 25%);
412
- --t-fill-color-product-people-010:hsl(219, 73%, 91%);
413
- --t-fill-color-product-people-020:hsl(220, 69%, 81%);
414
- --t-fill-color-product-people-030:hsl(221, 73%, 71%);
415
- --t-fill-color-product-people-040:hsl(221, 73%, 65%);
416
- --t-fill-color-product-people-050:hsl(220, 74%, 57%);
417
- --t-fill-color-product-people-060:hsl(220, 68%, 51%);
418
- --t-fill-color-product-people-070:hsl(220, 68%, 41%);
419
- --t-fill-color-product-people-080:hsl(221, 68%, 31%);
420
- --t-fill-color-product-publishing-010:hsl(220, 4%, 86%);
421
- --t-fill-color-product-publishing-020:hsl(222, 10%, 60%);
422
- --t-fill-color-product-publishing-030:hsl(221, 11%, 50%);
423
- --t-fill-color-product-publishing-040:hsl(222, 12%, 39%);
424
- --t-fill-color-product-publishing-050:hsl(220, 12%, 31%);
425
- --t-fill-color-product-publishing-060:hsl(220, 11%, 26%);
426
- --t-fill-color-product-publishing-070:hsl(217, 12%, 22%);
427
- --t-fill-color-product-publishing-080:hsl(214, 11%, 12%);
428
- --t-fill-color-product-registrations-010:hsl(173, 28%, 89%);
429
- --t-fill-color-product-registrations-020:hsl(176, 38%, 78%);
430
- --t-fill-color-product-registrations-030:hsl(176, 37%, 68%);
431
- --t-fill-color-product-registrations-040:hsl(176, 37%, 60%);
432
- --t-fill-color-product-registrations-050:hsl(175, 36%, 43%);
433
- --t-fill-color-product-registrations-060:hsl(175, 51%, 34%);
434
- --t-fill-color-product-registrations-070:hsl(174, 51%, 28%);
435
- --t-fill-color-product-registrations-080:hsl(175, 52%, 22%);
436
- --t-fill-color-product-services-010:hsl(88, 31%, 88%);
437
- --t-fill-color-product-services-020:hsl(88, 39%, 75%);
438
- --t-fill-color-product-services-030:hsl(88, 39%, 66%);
439
- --t-fill-color-product-services-040:hsl(88, 40%, 54%);
440
- --t-fill-color-product-services-050:hsl(88, 45%, 41%);
441
- --t-fill-color-product-services-060:hsl(89, 62%, 31%);
442
- --t-fill-color-product-services-070:hsl(89, 62%, 26%);
443
- --t-fill-color-product-services-080:hsl(89, 63%, 21%);
444
- --t-fill-color-product-staff:hsl(328, 100%, 45%);
445
- --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
446
- --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
447
- --t-fill-color-product-accounts-gradient-brand:linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
448
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
449
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
450
- --t-fill-color-product-api-gradient-brand:linear-gradient(180deg, hsl(221, 100%, 62%), hsl(217, 100%, 52%));
451
- --t-fill-color-product-calendar-gradient-brand:linear-gradient(135deg, hsl(10, 88%, 58%), hsl(8, 60%, 51%));
452
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(5, 80%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
453
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(8, 100%, 94%), hsl(285, 18%, 91%), hsl(204, 67%, 92%));
454
- --t-fill-color-product-cc-gradient-brand:linear-gradient(135deg, hsl(207, 90%, 61%), hsl(123, 38%, 57%));
455
- --t-fill-color-product-checkins-gradient-brand:linear-gradient(135deg, hsl(283, 38%, 59%), hsl(284, 23%, 48%));
456
- --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%));
457
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 22%, 93%), hsl(225, 35%, 93%) 42%, hsl(204, 67%, 92%));
458
- --t-fill-color-product-giving-gradient-brand:linear-gradient(90deg, hsl(46, 91%, 55%), hsl(41, 89%, 55%));
459
- --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%));
460
- --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%));
461
- --t-fill-color-product-groups-gradient-brand:linear-gradient(135deg, hsl(30, 100%, 59%), hsl(19, 97%, 60%));
462
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(17, 88%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
463
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(18, 87%, 94%), hsl(300, 12%, 92%), hsl(204, 67%, 92%));
464
- --t-fill-color-product-headcounts-gradient-brand:linear-gradient(135deg, hsl(283, 37%, 59%), hsl(285, 23%, 47%));
465
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
466
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
467
- --t-fill-color-product-musicstand-gradient-brand:linear-gradient(135deg, hsl(204, 64%, 51%), hsl(211, 55%, 51%));
468
- --t-fill-color-product-people-gradient-brand:linear-gradient(135deg, hsl(205, 86%, 57%), hsl(220, 76%, 57%));
469
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
470
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
471
- --t-fill-color-product-publishing-gradient-brand:linear-gradient(135deg, hsl(240, 4%, 49%), hsl(240, 6%, 39%));
472
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(217, 5%, 69%), hsl(214, 15%, 69%) 45%, hsl(204, 67%, 73%));
473
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(210, 4%, 91%), hsl(214, 15%, 91%) 45%, hsl(204, 67%, 92%));
474
- --t-fill-color-product-registrations-gradient-brand:linear-gradient(135deg, hsl(168, 46%, 48%), hsl(175, 35%, 43%));
475
- --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%));
476
- --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%));
477
- --t-fill-color-product-services-gradient-brand:linear-gradient(135deg, hsl(96, 49%, 47%), hsl(89, 52%, 39%));
478
- --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%));
479
- --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%));
480
- --t-fill-color-tag-gray-010:hsl(0, 0%, 93%);
481
- --t-fill-color-tag-gray-020:hsl(0, 0%, 88%);
482
- --t-fill-color-tag-gray-030:hsl(0, 0%, 88%);
483
- --t-fill-color-tag-gray-040:hsl(0, 0%, 81%);
484
- --t-fill-color-tag-blue-010:hsl(220, 100%, 95%);
485
- --t-fill-color-tag-blue-020:hsl(221, 100%, 88%);
486
- --t-fill-color-tag-blue-030:hsl(220, 98%, 81%);
487
- --t-fill-color-tag-blue-040:hsl(220, 98%, 74%);
488
- --t-fill-color-tag-aqua-010:hsl(200, 82%, 89%);
489
- --t-fill-color-tag-aqua-020:hsl(200, 82%, 82%);
490
- --t-fill-color-tag-aqua-030:hsl(201, 76%, 71%);
491
- --t-fill-color-tag-aqua-040:hsl(200, 75%, 64%);
492
- --t-fill-color-tag-teal-010:hsl(163, 53%, 83%);
493
- --t-fill-color-tag-teal-020:hsl(164, 52%, 76%);
494
- --t-fill-color-tag-teal-030:hsl(169, 62%, 64%);
495
- --t-fill-color-tag-teal-040:hsl(169, 62%, 56%);
496
- --t-fill-color-tag-green-010:hsl(98, 59%, 85%);
497
- --t-fill-color-tag-green-020:hsl(99, 59%, 78%);
498
- --t-fill-color-tag-green-030:hsl(112, 57%, 65%);
499
- --t-fill-color-tag-green-040:hsl(112, 57%, 57%);
500
- --t-fill-color-tag-yellow-010:hsl(45, 77%, 85%);
501
- --t-fill-color-tag-yellow-020:hsl(44, 78%, 77%);
502
- --t-fill-color-tag-yellow-030:hsl(44, 92%, 69%);
503
- --t-fill-color-tag-yellow-040:hsl(44, 93%, 61%);
504
- --t-fill-color-tag-orange-010:hsl(22, 89%, 89%);
505
- --t-fill-color-tag-orange-020:hsl(21, 89%, 82%);
506
- --t-fill-color-tag-orange-030:hsl(21, 86%, 72%);
507
- --t-fill-color-tag-orange-040:hsl(21, 86%, 64%);
508
- --t-fill-color-tag-pink-010:hsl(311, 66%, 92%);
509
- --t-fill-color-tag-pink-020:hsl(310, 64%, 85%);
510
- --t-fill-color-tag-pink-030:hsl(324, 78%, 77%);
511
- --t-fill-color-tag-pink-040:hsl(324, 76%, 70%);
512
- --t-fill-color-tag-purple-010:hsl(259, 74%, 93%);
513
- --t-fill-color-tag-purple-020:hsl(259, 74%, 85%);
514
- --t-fill-color-tag-purple-030:hsl(273, 62%, 76%);
515
- --t-fill-color-tag-purple-040:hsl(273, 62%, 70%);
516
- --t-fill-color-tag-magenta-010:hsl(294, 37%, 90%);
517
- --t-fill-color-tag-magenta-020:hsl(291, 40%, 83%);
518
- --t-fill-color-tag-magenta-030:hsl(291, 48%, 70%);
519
- --t-fill-color-tag-magenta-040:hsl(292, 48%, 63%);
520
- --t-fill-color-tag-indigo-010:hsl(234, 78%, 93%);
521
- --t-fill-color-tag-indigo-020:hsl(233, 79%, 87%);
522
- --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
523
- --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
524
- --t-fill-color-button-neutral-solid:hsl(0, 0%, 93%);
525
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
526
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
527
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 95%);
528
- --t-fill-color-button-neutral-outline:hsla(0, 0%, 100%, 0);
529
- --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 95%);
530
- --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 93%);
531
- --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 98%);
532
- --t-fill-color-button-neutral-ghost:hsla(0, 0%, 100%, 0);
533
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
534
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
535
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 100%, 0);
536
- --t-fill-color-button-neutral-responsive-header:hsla(0, 0%, 0%, 0.1);
537
- --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
538
- --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
539
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 0%, 0.05);
540
- --t-fill-color-button-interaction-solid:hsl(204, 100%, 40%);
541
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
542
- --t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
543
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 95%);
544
- --t-fill-color-button-interaction-outline:hsla(0, 0%, 100%, 0);
545
- --t-fill-color-button-interaction-outline-hover:hsl(204, 100%, 97%);
546
- --t-fill-color-button-interaction-outline-active:hsl(203, 94%, 94%);
547
- --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 98%);
548
- --t-fill-color-button-interaction-ghost:hsla(0, 0%, 100%, 0);
549
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
550
- --t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
551
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 100%, 0);
552
- --t-fill-color-button-delete-solid:hsl(8, 60%, 47%);
553
- --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
554
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
555
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 95%);
556
- --t-fill-color-button-delete-outline:hsla(0, 0%, 100%, 0);
557
- --t-fill-color-button-delete-outline-hover:hsl(7, 60%, 97%);
558
- --t-fill-color-button-delete-outline-active:hsl(9, 59%, 93%);
559
- --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 98%);
560
- --t-fill-color-button-delete-ghost:hsla(0, 0%, 100%, 0);
561
- --t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
562
- --t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
563
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
564
- --t-fill-color-button-pill:hsl(0, 0%, 93%);
565
- --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
566
- --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
567
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
568
- --t-fill-color-transparency-light-010:hsla(0, 0%, 100%, 0.1);
569
- --t-fill-color-transparency-light-020:hsla(0, 0%, 100%, 0.2);
570
- --t-fill-color-transparency-light-030:hsla(0, 0%, 100%, 0.3);
571
- --t-fill-color-transparency-light-040:hsla(0, 0%, 100%, 0.4);
572
- --t-fill-color-transparency-light-050:hsla(0, 0%, 100%, 0.5);
573
- --t-fill-color-transparency-light-060:hsla(0, 0%, 100%, 0.6);
574
- --t-fill-color-transparency-light-070:hsla(0, 0%, 100%, 0.7);
575
- --t-fill-color-transparency-light-080:hsla(0, 0%, 100%, 0.8);
576
- --t-fill-color-transparency-light-090:hsla(0, 0%, 100%, 0.9);
577
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 0%, 0.1);
578
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 0%, 0.2);
579
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 0%, 0.3);
580
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 0%, 0.4);
581
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 0%, 0.5);
582
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 0%, 0.6);
583
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 0%, 0.7);
584
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 0%, 0.8);
585
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 0%, 0.9);
586
- --t-fill-color-transparency-dark-static-010:hsla(0, 0%, 0%, 0.1);
587
- --t-fill-color-transparency-dark-static-020:hsla(0, 0%, 0%, 0.2);
588
- --t-fill-color-transparency-dark-static-030:hsla(0, 0%, 0%, 0.3);
589
- --t-fill-color-transparency-dark-static-040:hsla(0, 0%, 0%, 0.4);
590
- --t-fill-color-transparency-dark-static-050:hsla(0, 0%, 0%, 0.5);
591
- --t-fill-color-transparency-dark-static-060:hsla(0, 0%, 0%, 0.6);
592
- --t-fill-color-transparency-dark-static-070:hsla(0, 0%, 0%, 0.7);
593
- --t-fill-color-transparency-dark-static-080:hsla(0, 0%, 0%, 0.8);
594
- --t-fill-color-transparency-dark-static-090:hsla(0, 0%, 0%, 0.9);
595
- --t-surface-color-card:hsl(0, 0%, 100%);
596
- --t-surface-color-canvas:hsl(0, 0%, 100%);
597
- --t-border-color:hsl(0, 0%, 88%);
598
- --t-border-color-dark:hsl(0, 0%, 81%);
599
- --t-border-color-darker:hsl(0, 0%, 68%);
600
- --t-border-color-darkest:hsl(0, 0%, 58%);
601
- --t-border-color-disabled:hsl(0, 0%, 88%);
602
- --t-border-color-dim:hsl(0, 0%, 95%);
603
- --t-border-color-white:hsl(0, 0%, 100%);
604
- --t-border-color-status-neutral:hsl(0, 0%, 58%);
605
- --t-border-color-status-info:hsl(204, 100%, 40%);
606
- --t-border-color-status-success:hsl(97, 57%, 40%);
607
- --t-border-color-status-warning:hsl(42, 84%, 63%);
608
- --t-border-color-status-error:hsl(8, 60%, 47%);
609
- --t-border-color-button-neutral:hsl(0, 0%, 88%);
610
- --t-border-color-button-info:hsl(204, 100%, 40%);
611
- --t-border-color-button-create:hsl(96, 57%, 33%);
612
- --t-border-color-button-delete:hsl(8, 60%, 47%);
613
- --t-border-color-control-neutral:hsl(0, 0%, 68%);
614
- --t-border-color-control-info:hsl(204, 100%, 40%);
615
- --t-border-color-control-success:hsl(97, 57%, 40%);
616
- --t-border-color-control-warning:hsl(42, 84%, 63%);
617
- --t-border-color-control-error:hsl(8, 60%, 47%);
618
- --t-border-color-control-disabled:hsl(0, 0%, 88%);
619
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.07);
620
- --t-font-sans-serif:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
621
- --t-font-monospace:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
622
- --t-form-background-color:var(--t-fill-color-neutral-100);
623
- --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
624
- --t-form-background-color-error:var(--t-fill-color-neutral-100);
625
- --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
626
- --t-form-border-color:var(--t-border-color);
627
- --t-form-border-color-disabled:var(--t-border-color);
628
- --t-form-border-color-error:var(--t-border-color-status-error);
629
- --t-form-border-color-focus:var(--t-fill-color-interaction);
630
- --t-form-border-color-hover:var(--t-border-color-dark);
631
- --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
632
- --t-form-border-radius:var(--t-border-radius-md);
633
- --t-form-border-width:var(--t-border-width);
634
- --t-form-font-color:var(--t-text-color);
635
- --t-form-font-color-disabled:var(--t-text-color-disabled);
636
- --t-form-font-color-error:var(--t-text-color-status-error);
637
- --t-form-font-color-readonly:var(--t-text-color);
638
- --t-form-picker-icon-color:var(--t-icon-color);
639
- --t-form-placeholder-color:var(--t-text-color-placeholder);
640
- }
641
-
642
- @media (prefers-color-scheme: dark){
643
- :root[data-color-mode="system"]{
644
- color-scheme:dark;
645
- --t-text-color-headline:hsl(0, 0%, 94%);
646
- --t-text-color:hsl(0, 0%, 80%);
647
- --t-text-color-secondary:hsl(0, 0%, 54%);
648
- --t-text-color-disabled:hsl(0, 0%, 25%);
649
- --t-text-color-placeholder:hsl(0, 0%, 38%);
650
- --t-text-color-interaction:hsl(204, 68%, 55%);
651
- --t-text-color-interaction-hover:hsl(204, 68%, 50%);
652
- --t-text-color-interaction-active:hsl(204, 68%, 45%);
653
- --t-text-color-interaction-visited:hsl(204, 68%, 50%);
654
- --t-text-color-status-neutral:hsl(0, 0%, 80%);
655
- --t-text-color-status-info:hsl(204, 68%, 55%);
656
- --t-text-color-status-success:hsl(97, 57%, 41%);
657
- --t-text-color-status-warning:hsl(42, 84%, 55%);
658
- --t-text-color-status-error:hsl(8, 61%, 61%);
659
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
660
- --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
661
- --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
662
- --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
663
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
664
- --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
665
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
666
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
667
- --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
668
- --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
669
- --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
670
- --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
671
- --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
672
- --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
673
- --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
674
- --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
675
- --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
676
- --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
677
- --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
678
- --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
679
- --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
680
- --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
681
- --t-icon-color:hsl(0, 0%, 80%);
682
- --t-icon-color-secondary:hsl(0, 0%, 54%);
683
- --t-icon-color-dim:hsl(0, 0%, 38%);
684
- --t-icon-color-disabled:hsl(0, 0%, 25%);
685
- --t-icon-color-status-neutral:hsl(0, 0%, 54%);
686
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
687
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
688
- --t-icon-color-status-info:hsl(204, 68%, 55%);
689
- --t-icon-color-status-error:hsl(8, 61%, 61%);
690
- --t-fill-color-neutral-100:hsl(0, 0%, 10%);
691
- --t-fill-color-neutral-000:hsl(0, 0%, 98%);
692
- --t-fill-color-neutral-010:hsl(0, 0%, 88%);
693
- --t-fill-color-neutral-020:hsl(0, 0%, 68%);
694
- --t-fill-color-neutral-025:hsl(0, 0%, 58%);
695
- --t-fill-color-neutral-030:hsl(0, 0%, 50%);
696
- --t-fill-color-neutral-040:hsl(0, 0%, 32%);
697
- --t-fill-color-neutral-050:hsl(0, 0%, 24%);
698
- --t-fill-color-neutral-060:hsl(0, 0%, 19%);
699
- --t-fill-color-neutral-070:hsl(0, 0%, 17%);
700
- --t-fill-color-neutral-080:hsl(0, 0%, 15%);
701
- --t-fill-color-neutral-090:hsl(0, 0%, 12%);
702
- --t-fill-color-interaction:hsl(204, 100%, 35%);
703
- --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
704
- --t-fill-color-interaction-active:hsl(204, 80%, 45%);
705
- --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
706
- --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
707
- --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
708
- --t-fill-color-control:hsl(204, 100%, 35%);
709
- --t-fill-color-control-disabled:hsl(0, 0%, 20%);
710
- --t-fill-color-status-neutral:hsl(0, 0%, 24%);
711
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
712
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
713
- --t-fill-color-status-info:hsl(204, 100%, 35%);
714
- --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
715
- --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
716
- --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
717
- --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
718
- --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
719
- --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
720
- --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
721
- --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
722
- --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
723
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
724
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
725
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
726
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
727
- --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%));
728
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
729
- --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%));
730
- --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%));
731
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
732
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
733
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
734
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
735
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
736
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
737
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
738
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
739
- --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%));
740
- --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%));
741
- --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%));
742
- --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%));
743
- --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
744
- --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
745
- --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
746
- --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
747
- --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
748
- --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
749
- --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
750
- --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
751
- --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
752
- --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
753
- --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
754
- --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
755
- --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
756
- --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
757
- --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
758
- --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
759
- --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
760
- --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
761
- --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
762
- --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
763
- --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
764
- --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
765
- --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
766
- --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
767
- --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
768
- --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
769
- --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
770
- --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
771
- --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
772
- --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
773
- --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
774
- --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
775
- --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
776
- --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
777
- --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
778
- --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
779
- --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
780
- --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
781
- --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
782
- --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
783
- --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
784
- --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
785
- --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
786
- --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
787
- --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
788
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
789
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
790
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
791
- --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
792
- --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
793
- --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
794
- --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
795
- --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
796
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
797
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
798
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
799
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
800
- --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
801
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
802
- --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
803
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
804
- --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
805
- --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
806
- --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
807
- --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
808
- --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
809
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
810
- --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
811
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
812
- --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
813
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
814
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
815
- --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
816
- --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
817
- --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
818
- --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
819
- --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
820
- --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
821
- --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
822
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
823
- --t-fill-color-button-pill:hsl(0, 0%, 18%);
824
- --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
825
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
826
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
827
- --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
828
- --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
829
- --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
830
- --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
831
- --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
832
- --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
833
- --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
834
- --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
835
- --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
836
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
837
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
838
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
839
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
840
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
841
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
842
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
843
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
844
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
845
- --t-surface-color-card:hsl(0, 0%, 12%);
846
- --t-surface-color-canvas:hsl(0, 0%, 10%);
847
- --t-border-color:hsl(0, 0%, 21%);
848
- --t-border-color-dark:hsl(0, 0%, 25%);
849
- --t-border-color-darker:hsl(0, 0%, 33%);
850
- --t-border-color-darkest:hsl(0, 0%, 38%);
851
- --t-border-color-disabled:hsl(0, 0%, 21%);
852
- --t-border-color-dim:hsl(0, 0%, 16%);
853
- --t-border-color-white:hsl(0, 0%, 12%);
854
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
855
- --t-border-color-status-info:hsl(204, 100%, 35%);
856
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
857
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
858
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
859
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
860
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
861
- --t-border-color-control-info:hsl(204, 100%, 35%);
862
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
863
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
864
- }
865
- }
866
-
867
- :root{
868
- --t-border-size-default:var(--t-border-width);
869
- --t-border-size-thick:var(--t-border-width-thick);
870
- --t-font-weight-semi-bold:var(--t-font-weight-semibold);
871
- --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
872
- --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
873
- --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
874
- --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
875
- --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
876
- --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
877
- --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
878
- --t-fill-color-alert-info:hsl(204, 94%, 49%);
879
- --t-fill-color-alert-success:hsl(122, 60%, 41%);
880
- --t-fill-color-alert-warning:hsl(43, 96%, 58%);
881
- --t-fill-color-alert-error:hsl(4, 77%, 59%);
882
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
883
- --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
884
- --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
885
- --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
886
- --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
887
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
888
- --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
889
- --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
890
- --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
891
- --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
892
- --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
893
- --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
894
- --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
895
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
896
- --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
897
- --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
898
- --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
899
- --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
900
- --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
901
- --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
902
- --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
903
- --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
904
- }
905
-
906
- @media (prefers-color-scheme: dark){
907
- :root[data-color-mode="system"]{
908
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
909
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
910
- --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
911
- --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
912
- --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
913
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
914
- --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
915
- --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
916
- }
917
- }
918
-
919
- @layer t-critical{
920
- tds-page-header:not(.hydrated){
921
- display:none;
922
- }
1
+ @layer t-critical{
2
+ tds-page-header:not(.hydrated){
3
+ display:none;
4
+ }
923
5
  }
924
6
 
925
7
  @layer t-component{
@@ -1492,81 +574,25 @@
1492
574
  }
1493
575
  }
1494
576
 
1495
- @media (min-width: 720px){
1496
- .tds-sidenav-responsive-header{
1497
- display:none;
1498
- }
1499
- }
1500
-
1501
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1502
- display:none;
1503
- }
1504
-
1505
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1506
- display:block;
1507
- }
1508
-
1509
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1510
- display:flex;
1511
- flex-direction:column;
1512
- }
1513
-
1514
- :root[data-color-mode="dark"]{
1515
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
1516
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
1517
- --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
1518
- --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
1519
- --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
1520
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
1521
- --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
1522
- --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
1523
- }
1524
-
1525
- :root{
1526
- --t-border-color-default-base:var(--t-border-color);
1527
- --t-border-color-default-dark:var(--t-border-color-dark);
1528
- --t-border-color-default-darker:var(--t-border-color-darker);
1529
- --t-border-color-default-darkest:var(--t-border-color-darkest);
1530
- --t-border-color-default-dim:var(--t-border-color-dim);
1531
- --t-border-color-default-disabled:var(--t-border-color-disabled);
1532
- --t-border-color-default-white:var(--t-border-color-white);
1533
- --t-border-radius-default:var(--t-border-radius);
1534
- --t-border-width-default:var(--t-border-width);
1535
- --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
1536
- --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
1537
- --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
1538
- --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
1539
- --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
1540
- --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
1541
- --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
1542
- --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
1543
- --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
1544
- --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
1545
- --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
1546
- --t-fill-color-control-primary:var(--t-fill-color-control);
1547
- --t-fill-color-interaction-default:var(--t-fill-color-interaction);
1548
- --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
1549
- --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
1550
- --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
1551
- --t-icon-color-default-dim:var(--t-icon-color-dim);
1552
- --t-icon-color-default-disabled:var(--t-icon-color-disabled);
1553
- --t-icon-color-default-inverted:var(--t-icon-color-inverted);
1554
- --t-icon-color-default-primary:var(--t-icon-color);
1555
- --t-icon-color-default-secondary:var(--t-icon-color-secondary);
1556
- --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
1557
- --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
1558
- --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
1559
- --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
1560
- --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
1561
- --t-text-color-default-disabled:var(--t-text-color-disabled);
1562
- --t-text-color-default-headline:var(--t-text-color-headline);
1563
- --t-text-color-default-inverted:var(--t-text-color-inverted);
1564
- --t-text-color-default-placeholder:var(--t-text-color-placeholder);
1565
- --t-text-color-default-primary:var(--t-text-color);
1566
- --t-text-color-default-secondary:var(--t-text-color-secondary);
1567
- --t-text-color-interaction-primary:var(--t-text-color-interaction);
1568
- }
1569
-
577
+ @media (min-width: 720px){
578
+ .tds-sidenav-responsive-header{
579
+ display:none;
580
+ }
581
+ }
582
+
583
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
584
+ display:none;
585
+ }
586
+
587
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
588
+ display:block;
589
+ }
590
+
591
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
592
+ display:flex;
593
+ flex-direction:column;
594
+ }
595
+
1570
596
  .tds-loading-spinner{
1571
597
  --tds-loading-spinner-size:1.25em;
1572
598
 
@@ -2031,32 +1057,995 @@ a[class="tds-btn"]{
2031
1057
  transition:transform .2s ease-in-out;
2032
1058
  }
2033
1059
 
2034
- .tds-btn--dropdown[aria-expanded="true"] .suffix{
2035
- transform:rotate(-180deg);
1060
+ .tds-btn--dropdown[aria-expanded="true"] .suffix{
1061
+ transform:rotate(-180deg);
1062
+ }
1063
+
1064
+ .tds-btn--full-width{
1065
+ width:100%;
1066
+ }
1067
+
1068
+ .tds-btn--loading{
1069
+ --tds-btn-loading-spinner-visibility:visible;
1070
+ --tds-btn-loading-spinner-animation-play-state:running;
1071
+
1072
+ position:relative;
1073
+ }
1074
+
1075
+ .tds-btn--loading :not(.tds-loading-spinner){
1076
+ visibility:hidden;
1077
+ }
1078
+
1079
+ .tds-btn--attention .attention-icon{
1080
+ display:inline-block;
1081
+ width:var(--tds-btn-attention-icon-size);
1082
+ height:var(--tds-btn-attention-icon-size);
1083
+ background-color:var(--t-icon-color-status-warning);
1084
+ border:.125em solid var(--t-border-color-white);
1085
+ border-radius:var(--t-border-radius-round);
1086
+ }
1087
+
1088
+ @layer t-critical, t-component;
1089
+
1090
+ :root{
1091
+ --t-border-radius-sm:2px;
1092
+ --t-border-radius-md:4px;
1093
+ --t-border-radius-lg:8px;
1094
+ --t-border-radius-xl:16px;
1095
+ --t-border-radius-round:56px;
1096
+ --t-border-radius:4px;
1097
+ --t-border-width:1px;
1098
+ --t-border-width-thick:2px;
1099
+ --t-spacing-1:8px;
1100
+ --t-spacing-2:16px;
1101
+ --t-spacing-3:24px;
1102
+ --t-spacing-4:32px;
1103
+ --t-spacing-5:40px;
1104
+ --t-spacing-6:48px;
1105
+ --t-spacing-7:56px;
1106
+ --t-spacing-fourth:2px;
1107
+ --t-spacing-half:4px;
1108
+ --t-spacing-1-half:12px;
1109
+ --t-element-size-3xl:48px;
1110
+ --t-element-size-2xl:32px;
1111
+ --t-element-size-xl:24px;
1112
+ --t-element-size-lg:18px;
1113
+ --t-element-size-md:16px;
1114
+ --t-element-size-sm:14px;
1115
+ --t-element-size-xs:12px;
1116
+ --t-font-size-4xl:32px;
1117
+ --t-font-size-3xl:28px;
1118
+ --t-font-size-2xl:24px;
1119
+ --t-font-size-xl:20px;
1120
+ --t-font-size-lg:18px;
1121
+ --t-font-size-md:16px;
1122
+ --t-font-size-sm:14px;
1123
+ --t-font-size-xs:12px;
1124
+ --t-font-size-2xs:10px;
1125
+ --t-font-weight-normal:400;
1126
+ --t-font-weight-medium:500;
1127
+ --t-font-weight-semibold:600;
1128
+ --t-font-weight-bold:700;
1129
+ --t-container-size-xl:48px;
1130
+ --t-container-size-lg:40px;
1131
+ --t-container-size-md:32px;
1132
+ --t-container-size-sm:24px;
1133
+ --t-container-size-xs:20px;
1134
+ --t-avatar-size-20:20px;
1135
+ --t-avatar-size-24:24px;
1136
+ --t-avatar-size-36:36px;
1137
+ --t-avatar-size-48:48px;
1138
+ --t-avatar-size-72:72px;
1139
+ --t-avatar-size-112:112px;
1140
+ --t-text-color-headline:hsl(0, 0%, 12%);
1141
+ --t-text-color:hsl(0, 0%, 24%);
1142
+ --t-text-color-secondary:hsl(0, 0%, 42%);
1143
+ --t-text-color-disabled:hsl(0, 0%, 81%);
1144
+ --t-text-color-placeholder:hsl(0, 0%, 58%);
1145
+ --t-text-color-inverted:hsl(0, 0%, 100%);
1146
+ --t-text-color-interaction:hsl(204, 100%, 40%);
1147
+ --t-text-color-interaction-hover:hsl(204, 100%, 35%);
1148
+ --t-text-color-interaction-active:hsl(204, 100%, 30%);
1149
+ --t-text-color-interaction-visited:hsl(204, 100%, 30%);
1150
+ --t-text-color-status-neutral:hsl(0, 0%, 24%);
1151
+ --t-text-color-status-info:hsl(204, 100%, 35%);
1152
+ --t-text-color-status-success:hsl(97, 57%, 28%);
1153
+ --t-text-color-status-warning:hsl(42, 100%, 29%);
1154
+ --t-text-color-status-error:hsl(8, 60%, 45%);
1155
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 24%);
1156
+ --t-text-color-tag-subtle-blue:hsl(224, 47%, 31%);
1157
+ --t-text-color-tag-subtle-indigo:hsl(241, 59%, 28%);
1158
+ --t-text-color-tag-subtle-aqua:hsl(209, 77%, 22%);
1159
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 15%);
1160
+ --t-text-color-tag-subtle-green:hsl(100, 93%, 17%);
1161
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 23%);
1162
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 18%);
1163
+ --t-text-color-tag-subtle-pink:hsl(327, 88%, 20%);
1164
+ --t-text-color-tag-subtle-purple:hsl(268, 71%, 27%);
1165
+ --t-text-color-tag-subtle-magenta:hsl(285, 71%, 20%);
1166
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 24%);
1167
+ --t-text-color-tag-bold-indigo:hsl(241, 59%, 28%);
1168
+ --t-text-color-tag-bold-blue:hsl(224, 47%, 31%);
1169
+ --t-text-color-tag-bold-aqua:hsl(209, 77%, 22%);
1170
+ --t-text-color-tag-bold-teal:hsl(180, 95%, 15%);
1171
+ --t-text-color-tag-bold-green:hsl(100, 93%, 17%);
1172
+ --t-text-color-tag-bold-yellow:hsl(29, 100%, 23%);
1173
+ --t-text-color-tag-bold-orange:hsl(18, 100%, 18%);
1174
+ --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
1175
+ --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
1176
+ --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
1177
+ --t-icon-color:hsl(0, 0%, 24%);
1178
+ --t-icon-color-secondary:hsl(0, 0%, 42%);
1179
+ --t-icon-color-dim:hsl(0, 0%, 58%);
1180
+ --t-icon-color-disabled:hsl(0, 0%, 81%);
1181
+ --t-icon-color-inverted:hsl(0, 0%, 100%);
1182
+ --t-icon-color-status-neutral:hsl(0, 0%, 42%);
1183
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 58%);
1184
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 24%);
1185
+ --t-icon-color-status-info:hsl(204, 100%, 40%);
1186
+ --t-icon-color-status-success:hsl(96, 57%, 33%);
1187
+ --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
1188
+ --t-icon-color-status-warning:hsl(42, 84%, 49%);
1189
+ --t-icon-color-status-error:hsl(8, 60%, 47%);
1190
+ --t-fill-color-neutral-100:hsl(0, 0%, 100%);
1191
+ --t-fill-color-neutral-000:hsl(0, 0%, 12%);
1192
+ --t-fill-color-neutral-010:hsl(0, 0%, 24%);
1193
+ --t-fill-color-neutral-020:hsl(0, 0%, 42%);
1194
+ --t-fill-color-neutral-025:hsl(0, 0%, 50%);
1195
+ --t-fill-color-neutral-030:hsl(0, 0%, 58%);
1196
+ --t-fill-color-neutral-040:hsl(0, 0%, 81%);
1197
+ --t-fill-color-neutral-050:hsl(0, 0%, 88%);
1198
+ --t-fill-color-neutral-060:hsl(0, 0%, 93%);
1199
+ --t-fill-color-neutral-070:hsl(0, 0%, 95%);
1200
+ --t-fill-color-neutral-080:hsl(0, 0%, 97%);
1201
+ --t-fill-color-neutral-090:hsl(0, 0%, 98%);
1202
+ --t-fill-color-interaction:hsl(204, 100%, 40%);
1203
+ --t-fill-color-interaction-hover:hsl(204, 100%, 35%);
1204
+ --t-fill-color-interaction-active:hsl(204, 100%, 30%);
1205
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 81%);
1206
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
1207
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
1208
+ --t-fill-color-control:hsl(204, 100%, 40%);
1209
+ --t-fill-color-control-secondary:hsl(97, 57%, 40%);
1210
+ --t-fill-color-control-error:hsl(8, 60%, 47%);
1211
+ --t-fill-color-control-disabled:hsl(0, 0%, 81%);
1212
+ --t-fill-color-status-neutral:hsl(0, 0%, 42%);
1213
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 93%);
1214
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 97%);
1215
+ --t-fill-color-status-info:hsl(204, 100%, 40%);
1216
+ --t-fill-color-status-info-ghost:hsl(203, 94%, 94%);
1217
+ --t-fill-color-status-info-dim:hsl(204, 100%, 97%);
1218
+ --t-fill-color-status-success:hsl(96, 57%, 33%);
1219
+ --t-fill-color-status-success-ghost:hsl(97, 57%, 90%);
1220
+ --t-fill-color-status-success-dim:hsl(96, 60%, 95%);
1221
+ --t-fill-color-status-warning:hsl(42, 84%, 63%);
1222
+ --t-fill-color-status-warning-ghost:hsl(42, 87%, 94%);
1223
+ --t-fill-color-status-warning-dim:hsl(42, 87%, 97%);
1224
+ --t-fill-color-status-error:hsl(8, 60%, 47%);
1225
+ --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
1226
+ --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
1227
+ --t-fill-color-tooltip:hsla(0, 0%, 12%, 0.9);
1228
+ --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
1229
+ --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
1230
+ --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
1231
+ --t-fill-color-product-accounts-040:hsl(210, 54%, 60%);
1232
+ --t-fill-color-product-accounts-050:hsl(210, 55%, 50%);
1233
+ --t-fill-color-product-accounts-060:hsl(210, 65%, 40%);
1234
+ --t-fill-color-product-accounts-070:hsl(211, 70%, 32%);
1235
+ --t-fill-color-product-accounts-080:hsl(210, 75%, 25%);
1236
+ --t-fill-color-product-calendar-010:hsl(8, 61%, 90%);
1237
+ --t-fill-color-product-calendar-020:hsl(8, 61%, 70%);
1238
+ --t-fill-color-product-calendar-030:hsl(8, 72%, 59%);
1239
+ --t-fill-color-product-calendar-040:hsl(8, 65%, 55%);
1240
+ --t-fill-color-product-calendar-050:hsl(9, 61%, 50%);
1241
+ --t-fill-color-product-calendar-060:hsl(8, 65%, 42%);
1242
+ --t-fill-color-product-calendar-070:hsl(7, 65%, 34%);
1243
+ --t-fill-color-product-calendar-080:hsl(9, 61%, 27%);
1244
+ --t-fill-color-product-checkins-010:hsl(285, 20%, 92%);
1245
+ --t-fill-color-product-checkins-020:hsl(283, 22%, 75%);
1246
+ --t-fill-color-product-checkins-030:hsl(284, 22%, 64%);
1247
+ --t-fill-color-product-checkins-040:hsl(283, 22%, 55%);
1248
+ --t-fill-color-product-checkins-050:hsl(283, 22%, 48%);
1249
+ --t-fill-color-product-checkins-060:hsl(283, 27%, 42%);
1250
+ --t-fill-color-product-checkins-070:hsl(284, 33%, 34%);
1251
+ --t-fill-color-product-checkins-080:hsl(283, 33%, 27%);
1252
+ --t-fill-color-product-giving-010:hsl(41, 95%, 93%);
1253
+ --t-fill-color-product-giving-020:hsl(42, 95%, 83%);
1254
+ --t-fill-color-product-giving-030:hsl(43, 95%, 75%);
1255
+ --t-fill-color-product-giving-040:hsl(43, 88%, 70%);
1256
+ --t-fill-color-product-giving-050:hsl(43, 88%, 64%);
1257
+ --t-fill-color-product-giving-060:hsl(42, 84%, 55%);
1258
+ --t-fill-color-product-giving-070:hsl(42, 84%, 48%);
1259
+ --t-fill-color-product-giving-080:hsl(42, 100%, 40%);
1260
+ --t-fill-color-product-groups-010:hsl(18, 95%, 92%);
1261
+ --t-fill-color-product-groups-020:hsl(17, 96%, 80%);
1262
+ --t-fill-color-product-groups-030:hsl(17, 96%, 70%);
1263
+ --t-fill-color-product-groups-040:hsl(17, 96%, 63%);
1264
+ --t-fill-color-product-groups-050:hsl(17, 88%, 55%);
1265
+ --t-fill-color-product-groups-060:hsl(12, 70%, 48%);
1266
+ --t-fill-color-product-groups-070:hsl(12, 70%, 40%);
1267
+ --t-fill-color-product-groups-080:hsl(14, 70%, 34%);
1268
+ --t-fill-color-product-home-010:hsl(221, 89%, 93%);
1269
+ --t-fill-color-product-home-020:hsl(221, 91%, 91%);
1270
+ --t-fill-color-product-home-030:hsl(221, 91%, 87%);
1271
+ --t-fill-color-product-home-040:hsl(221, 91%, 62%);
1272
+ --t-fill-color-product-home-050:hsl(221, 91%, 55%);
1273
+ --t-fill-color-product-home-060:hsl(221, 90%, 50%);
1274
+ --t-fill-color-product-home-070:hsl(221, 90%, 45%);
1275
+ --t-fill-color-product-home-080:hsl(218, 84%, 25%);
1276
+ --t-fill-color-product-people-010:hsl(219, 73%, 91%);
1277
+ --t-fill-color-product-people-020:hsl(220, 69%, 81%);
1278
+ --t-fill-color-product-people-030:hsl(221, 73%, 71%);
1279
+ --t-fill-color-product-people-040:hsl(221, 73%, 65%);
1280
+ --t-fill-color-product-people-050:hsl(220, 74%, 57%);
1281
+ --t-fill-color-product-people-060:hsl(220, 68%, 51%);
1282
+ --t-fill-color-product-people-070:hsl(220, 68%, 41%);
1283
+ --t-fill-color-product-people-080:hsl(221, 68%, 31%);
1284
+ --t-fill-color-product-publishing-010:hsl(220, 4%, 86%);
1285
+ --t-fill-color-product-publishing-020:hsl(222, 10%, 60%);
1286
+ --t-fill-color-product-publishing-030:hsl(221, 11%, 50%);
1287
+ --t-fill-color-product-publishing-040:hsl(222, 12%, 39%);
1288
+ --t-fill-color-product-publishing-050:hsl(220, 12%, 31%);
1289
+ --t-fill-color-product-publishing-060:hsl(220, 11%, 26%);
1290
+ --t-fill-color-product-publishing-070:hsl(217, 12%, 22%);
1291
+ --t-fill-color-product-publishing-080:hsl(214, 11%, 12%);
1292
+ --t-fill-color-product-registrations-010:hsl(173, 28%, 89%);
1293
+ --t-fill-color-product-registrations-020:hsl(176, 38%, 78%);
1294
+ --t-fill-color-product-registrations-030:hsl(176, 37%, 68%);
1295
+ --t-fill-color-product-registrations-040:hsl(176, 37%, 60%);
1296
+ --t-fill-color-product-registrations-050:hsl(175, 36%, 43%);
1297
+ --t-fill-color-product-registrations-060:hsl(175, 51%, 34%);
1298
+ --t-fill-color-product-registrations-070:hsl(174, 51%, 28%);
1299
+ --t-fill-color-product-registrations-080:hsl(175, 52%, 22%);
1300
+ --t-fill-color-product-services-010:hsl(88, 31%, 88%);
1301
+ --t-fill-color-product-services-020:hsl(88, 39%, 75%);
1302
+ --t-fill-color-product-services-030:hsl(88, 39%, 66%);
1303
+ --t-fill-color-product-services-040:hsl(88, 40%, 54%);
1304
+ --t-fill-color-product-services-050:hsl(88, 45%, 41%);
1305
+ --t-fill-color-product-services-060:hsl(89, 62%, 31%);
1306
+ --t-fill-color-product-services-070:hsl(89, 62%, 26%);
1307
+ --t-fill-color-product-services-080:hsl(89, 63%, 21%);
1308
+ --t-fill-color-product-staff:hsl(328, 100%, 45%);
1309
+ --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
1310
+ --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
1311
+ --t-fill-color-product-accounts-gradient-brand:linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
1312
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
1313
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
1314
+ --t-fill-color-product-api-gradient-brand:linear-gradient(180deg, hsl(221, 100%, 62%), hsl(217, 100%, 52%));
1315
+ --t-fill-color-product-calendar-gradient-brand:linear-gradient(135deg, hsl(10, 88%, 58%), hsl(8, 60%, 51%));
1316
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(5, 80%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
1317
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(8, 100%, 94%), hsl(285, 18%, 91%), hsl(204, 67%, 92%));
1318
+ --t-fill-color-product-cc-gradient-brand:linear-gradient(135deg, hsl(207, 90%, 61%), hsl(123, 38%, 57%));
1319
+ --t-fill-color-product-checkins-gradient-brand:linear-gradient(135deg, hsl(283, 38%, 59%), hsl(284, 23%, 48%));
1320
+ --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%));
1321
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 22%, 93%), hsl(225, 35%, 93%) 42%, hsl(204, 67%, 92%));
1322
+ --t-fill-color-product-giving-gradient-brand:linear-gradient(90deg, hsl(46, 91%, 55%), hsl(41, 89%, 55%));
1323
+ --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%));
1324
+ --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%));
1325
+ --t-fill-color-product-groups-gradient-brand:linear-gradient(135deg, hsl(30, 100%, 59%), hsl(19, 97%, 60%));
1326
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(17, 88%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
1327
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(18, 87%, 94%), hsl(300, 12%, 92%), hsl(204, 67%, 92%));
1328
+ --t-fill-color-product-headcounts-gradient-brand:linear-gradient(135deg, hsl(283, 37%, 59%), hsl(285, 23%, 47%));
1329
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
1330
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
1331
+ --t-fill-color-product-musicstand-gradient-brand:linear-gradient(135deg, hsl(204, 64%, 51%), hsl(211, 55%, 51%));
1332
+ --t-fill-color-product-people-gradient-brand:linear-gradient(135deg, hsl(205, 86%, 57%), hsl(220, 76%, 57%));
1333
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
1334
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
1335
+ --t-fill-color-product-publishing-gradient-brand:linear-gradient(135deg, hsl(240, 4%, 49%), hsl(240, 6%, 39%));
1336
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(217, 5%, 69%), hsl(214, 15%, 69%) 45%, hsl(204, 67%, 73%));
1337
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(210, 4%, 91%), hsl(214, 15%, 91%) 45%, hsl(204, 67%, 92%));
1338
+ --t-fill-color-product-registrations-gradient-brand:linear-gradient(135deg, hsl(168, 46%, 48%), hsl(175, 35%, 43%));
1339
+ --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%));
1340
+ --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%));
1341
+ --t-fill-color-product-services-gradient-brand:linear-gradient(135deg, hsl(96, 49%, 47%), hsl(89, 52%, 39%));
1342
+ --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%));
1343
+ --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%));
1344
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 93%);
1345
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 88%);
1346
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 88%);
1347
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 81%);
1348
+ --t-fill-color-tag-blue-010:hsl(220, 100%, 95%);
1349
+ --t-fill-color-tag-blue-020:hsl(221, 100%, 88%);
1350
+ --t-fill-color-tag-blue-030:hsl(220, 98%, 81%);
1351
+ --t-fill-color-tag-blue-040:hsl(220, 98%, 74%);
1352
+ --t-fill-color-tag-aqua-010:hsl(200, 82%, 89%);
1353
+ --t-fill-color-tag-aqua-020:hsl(200, 82%, 82%);
1354
+ --t-fill-color-tag-aqua-030:hsl(201, 76%, 71%);
1355
+ --t-fill-color-tag-aqua-040:hsl(200, 75%, 64%);
1356
+ --t-fill-color-tag-teal-010:hsl(163, 53%, 83%);
1357
+ --t-fill-color-tag-teal-020:hsl(164, 52%, 76%);
1358
+ --t-fill-color-tag-teal-030:hsl(169, 62%, 64%);
1359
+ --t-fill-color-tag-teal-040:hsl(169, 62%, 56%);
1360
+ --t-fill-color-tag-green-010:hsl(98, 59%, 85%);
1361
+ --t-fill-color-tag-green-020:hsl(99, 59%, 78%);
1362
+ --t-fill-color-tag-green-030:hsl(112, 57%, 65%);
1363
+ --t-fill-color-tag-green-040:hsl(112, 57%, 57%);
1364
+ --t-fill-color-tag-yellow-010:hsl(45, 77%, 85%);
1365
+ --t-fill-color-tag-yellow-020:hsl(44, 78%, 77%);
1366
+ --t-fill-color-tag-yellow-030:hsl(44, 92%, 69%);
1367
+ --t-fill-color-tag-yellow-040:hsl(44, 93%, 61%);
1368
+ --t-fill-color-tag-orange-010:hsl(22, 89%, 89%);
1369
+ --t-fill-color-tag-orange-020:hsl(21, 89%, 82%);
1370
+ --t-fill-color-tag-orange-030:hsl(21, 86%, 72%);
1371
+ --t-fill-color-tag-orange-040:hsl(21, 86%, 64%);
1372
+ --t-fill-color-tag-pink-010:hsl(311, 66%, 92%);
1373
+ --t-fill-color-tag-pink-020:hsl(310, 64%, 85%);
1374
+ --t-fill-color-tag-pink-030:hsl(324, 78%, 77%);
1375
+ --t-fill-color-tag-pink-040:hsl(324, 76%, 70%);
1376
+ --t-fill-color-tag-purple-010:hsl(259, 74%, 93%);
1377
+ --t-fill-color-tag-purple-020:hsl(259, 74%, 85%);
1378
+ --t-fill-color-tag-purple-030:hsl(273, 62%, 76%);
1379
+ --t-fill-color-tag-purple-040:hsl(273, 62%, 70%);
1380
+ --t-fill-color-tag-magenta-010:hsl(294, 37%, 90%);
1381
+ --t-fill-color-tag-magenta-020:hsl(291, 40%, 83%);
1382
+ --t-fill-color-tag-magenta-030:hsl(291, 48%, 70%);
1383
+ --t-fill-color-tag-magenta-040:hsl(292, 48%, 63%);
1384
+ --t-fill-color-tag-indigo-010:hsl(234, 78%, 93%);
1385
+ --t-fill-color-tag-indigo-020:hsl(233, 79%, 87%);
1386
+ --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
1387
+ --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
1388
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 93%);
1389
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
1390
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
1391
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 95%);
1392
+ --t-fill-color-button-neutral-outline:hsla(0, 0%, 100%, 0);
1393
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 95%);
1394
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 93%);
1395
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 98%);
1396
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 100%, 0);
1397
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
1398
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
1399
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 100%, 0);
1400
+ --t-fill-color-button-neutral-responsive-header:hsla(0, 0%, 0%, 0.1);
1401
+ --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
1402
+ --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
1403
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 0%, 0.05);
1404
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 40%);
1405
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
1406
+ --t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
1407
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 95%);
1408
+ --t-fill-color-button-interaction-outline:hsla(0, 0%, 100%, 0);
1409
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 100%, 97%);
1410
+ --t-fill-color-button-interaction-outline-active:hsl(203, 94%, 94%);
1411
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 98%);
1412
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 100%, 0);
1413
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
1414
+ --t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
1415
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 100%, 0);
1416
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 47%);
1417
+ --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
1418
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
1419
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 95%);
1420
+ --t-fill-color-button-delete-outline:hsla(0, 0%, 100%, 0);
1421
+ --t-fill-color-button-delete-outline-hover:hsl(7, 60%, 97%);
1422
+ --t-fill-color-button-delete-outline-active:hsl(9, 59%, 93%);
1423
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 98%);
1424
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 100%, 0);
1425
+ --t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
1426
+ --t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
1427
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
1428
+ --t-fill-color-button-pill:hsl(0, 0%, 93%);
1429
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
1430
+ --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
1431
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
1432
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 100%, 0.1);
1433
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 100%, 0.2);
1434
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 100%, 0.3);
1435
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 100%, 0.4);
1436
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 100%, 0.5);
1437
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 100%, 0.6);
1438
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 100%, 0.7);
1439
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 100%, 0.8);
1440
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 100%, 0.9);
1441
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 0%, 0.1);
1442
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 0%, 0.2);
1443
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 0%, 0.3);
1444
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 0%, 0.4);
1445
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 0%, 0.5);
1446
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 0%, 0.6);
1447
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 0%, 0.7);
1448
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 0%, 0.8);
1449
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 0%, 0.9);
1450
+ --t-fill-color-transparency-dark-static-010:hsla(0, 0%, 0%, 0.1);
1451
+ --t-fill-color-transparency-dark-static-020:hsla(0, 0%, 0%, 0.2);
1452
+ --t-fill-color-transparency-dark-static-030:hsla(0, 0%, 0%, 0.3);
1453
+ --t-fill-color-transparency-dark-static-040:hsla(0, 0%, 0%, 0.4);
1454
+ --t-fill-color-transparency-dark-static-050:hsla(0, 0%, 0%, 0.5);
1455
+ --t-fill-color-transparency-dark-static-060:hsla(0, 0%, 0%, 0.6);
1456
+ --t-fill-color-transparency-dark-static-070:hsla(0, 0%, 0%, 0.7);
1457
+ --t-fill-color-transparency-dark-static-080:hsla(0, 0%, 0%, 0.8);
1458
+ --t-fill-color-transparency-dark-static-090:hsla(0, 0%, 0%, 0.9);
1459
+ --t-surface-color-card:hsl(0, 0%, 100%);
1460
+ --t-surface-color-canvas:hsl(0, 0%, 100%);
1461
+ --t-border-color:hsl(0, 0%, 88%);
1462
+ --t-border-color-dark:hsl(0, 0%, 81%);
1463
+ --t-border-color-darker:hsl(0, 0%, 68%);
1464
+ --t-border-color-darkest:hsl(0, 0%, 58%);
1465
+ --t-border-color-disabled:hsl(0, 0%, 88%);
1466
+ --t-border-color-dim:hsl(0, 0%, 95%);
1467
+ --t-border-color-white:hsl(0, 0%, 100%);
1468
+ --t-border-color-status-neutral:hsl(0, 0%, 58%);
1469
+ --t-border-color-status-info:hsl(204, 100%, 40%);
1470
+ --t-border-color-status-success:hsl(97, 57%, 40%);
1471
+ --t-border-color-status-warning:hsl(42, 84%, 63%);
1472
+ --t-border-color-status-error:hsl(8, 60%, 47%);
1473
+ --t-border-color-button-neutral:hsl(0, 0%, 88%);
1474
+ --t-border-color-button-info:hsl(204, 100%, 40%);
1475
+ --t-border-color-button-create:hsl(96, 57%, 33%);
1476
+ --t-border-color-button-delete:hsl(8, 60%, 47%);
1477
+ --t-border-color-control-neutral:hsl(0, 0%, 68%);
1478
+ --t-border-color-control-info:hsl(204, 100%, 40%);
1479
+ --t-border-color-control-success:hsl(97, 57%, 40%);
1480
+ --t-border-color-control-warning:hsl(42, 84%, 63%);
1481
+ --t-border-color-control-error:hsl(8, 60%, 47%);
1482
+ --t-border-color-control-disabled:hsl(0, 0%, 88%);
1483
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.07);
1484
+ --t-font-sans-serif:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
1485
+ --t-font-monospace:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
1486
+ --t-form-background-color:var(--t-fill-color-neutral-100);
1487
+ --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
1488
+ --t-form-background-color-error:var(--t-fill-color-neutral-100);
1489
+ --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
1490
+ --t-form-border-color:var(--t-border-color);
1491
+ --t-form-border-color-disabled:var(--t-border-color);
1492
+ --t-form-border-color-error:var(--t-border-color-status-error);
1493
+ --t-form-border-color-focus:var(--t-fill-color-interaction);
1494
+ --t-form-border-color-hover:var(--t-border-color-dark);
1495
+ --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
1496
+ --t-form-border-radius:var(--t-border-radius-md);
1497
+ --t-form-border-width:var(--t-border-width);
1498
+ --t-form-font-color:var(--t-text-color);
1499
+ --t-form-font-color-disabled:var(--t-text-color-disabled);
1500
+ --t-form-font-color-error:var(--t-text-color-status-error);
1501
+ --t-form-font-color-readonly:var(--t-text-color);
1502
+ --t-form-picker-icon-color:var(--t-icon-color);
1503
+ --t-form-placeholder-color:var(--t-text-color-placeholder);
1504
+ --t-border-size-default:var(--t-border-width);
1505
+ --t-border-size-thick:var(--t-border-width-thick);
1506
+ --t-font-weight-semi-bold:var(--t-font-weight-semibold);
1507
+ --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
1508
+ --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
1509
+ --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
1510
+ --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
1511
+ --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
1512
+ --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
1513
+ --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
1514
+ --t-fill-color-alert-info:hsl(204, 94%, 49%);
1515
+ --t-fill-color-alert-success:hsl(122, 60%, 41%);
1516
+ --t-fill-color-alert-warning:hsl(43, 96%, 58%);
1517
+ --t-fill-color-alert-error:hsl(4, 77%, 59%);
1518
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
1519
+ --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
1520
+ --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
1521
+ --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
1522
+ --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
1523
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
1524
+ --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
1525
+ --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
1526
+ --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
1527
+ --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
1528
+ --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
1529
+ --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
1530
+ --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
1531
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
1532
+ --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
1533
+ --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
1534
+ --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
1535
+ --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
1536
+ --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
1537
+ --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
1538
+ --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
1539
+ --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
1540
+ --t-border-color-default-base:var(--t-border-color);
1541
+ --t-border-color-default-dark:var(--t-border-color-dark);
1542
+ --t-border-color-default-darker:var(--t-border-color-darker);
1543
+ --t-border-color-default-darkest:var(--t-border-color-darkest);
1544
+ --t-border-color-default-dim:var(--t-border-color-dim);
1545
+ --t-border-color-default-disabled:var(--t-border-color-disabled);
1546
+ --t-border-color-default-white:var(--t-border-color-white);
1547
+ --t-border-radius-default:var(--t-border-radius);
1548
+ --t-border-width-default:var(--t-border-width);
1549
+ --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
1550
+ --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
1551
+ --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
1552
+ --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
1553
+ --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
1554
+ --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
1555
+ --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
1556
+ --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
1557
+ --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
1558
+ --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
1559
+ --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
1560
+ --t-fill-color-control-primary:var(--t-fill-color-control);
1561
+ --t-fill-color-interaction-default:var(--t-fill-color-interaction);
1562
+ --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
1563
+ --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
1564
+ --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
1565
+ --t-icon-color-default-dim:var(--t-icon-color-dim);
1566
+ --t-icon-color-default-disabled:var(--t-icon-color-disabled);
1567
+ --t-icon-color-default-inverted:var(--t-icon-color-inverted);
1568
+ --t-icon-color-default-primary:var(--t-icon-color);
1569
+ --t-icon-color-default-secondary:var(--t-icon-color-secondary);
1570
+ --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
1571
+ --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
1572
+ --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
1573
+ --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
1574
+ --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
1575
+ --t-text-color-default-disabled:var(--t-text-color-disabled);
1576
+ --t-text-color-default-headline:var(--t-text-color-headline);
1577
+ --t-text-color-default-inverted:var(--t-text-color-inverted);
1578
+ --t-text-color-default-placeholder:var(--t-text-color-placeholder);
1579
+ --t-text-color-default-primary:var(--t-text-color);
1580
+ --t-text-color-default-secondary:var(--t-text-color-secondary);
1581
+ --t-text-color-interaction-primary:var(--t-text-color-interaction);
1582
+ }
1583
+
1584
+ :root[data-color-mode="dark"]{
1585
+ color-scheme:dark;
1586
+ --t-text-color-headline:hsl(0, 0%, 94%);
1587
+ --t-text-color:hsl(0, 0%, 80%);
1588
+ --t-text-color-secondary:hsl(0, 0%, 54%);
1589
+ --t-text-color-disabled:hsl(0, 0%, 25%);
1590
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
1591
+ --t-text-color-interaction:hsl(204, 68%, 55%);
1592
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
1593
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
1594
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
1595
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
1596
+ --t-text-color-status-info:hsl(204, 68%, 55%);
1597
+ --t-text-color-status-success:hsl(97, 57%, 41%);
1598
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
1599
+ --t-text-color-status-error:hsl(8, 61%, 61%);
1600
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
1601
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
1602
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
1603
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
1604
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
1605
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
1606
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
1607
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
1608
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
1609
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
1610
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
1611
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
1612
+ --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
1613
+ --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
1614
+ --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
1615
+ --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
1616
+ --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
1617
+ --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
1618
+ --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
1619
+ --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
1620
+ --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
1621
+ --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
1622
+ --t-icon-color:hsl(0, 0%, 80%);
1623
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
1624
+ --t-icon-color-dim:hsl(0, 0%, 38%);
1625
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
1626
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
1627
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
1628
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
1629
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
1630
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
1631
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
1632
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
1633
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
1634
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
1635
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
1636
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
1637
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
1638
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
1639
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
1640
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
1641
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
1642
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
1643
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
1644
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
1645
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
1646
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
1647
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
1648
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
1649
+ --t-fill-color-control:hsl(204, 100%, 35%);
1650
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
1651
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
1652
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
1653
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
1654
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
1655
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
1656
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
1657
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
1658
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
1659
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
1660
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
1661
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
1662
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
1663
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
1664
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1665
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1666
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1667
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
1668
+ --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%));
1669
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
1670
+ --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%));
1671
+ --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%));
1672
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1673
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
1674
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1675
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1676
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1677
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1678
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
1679
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
1680
+ --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%));
1681
+ --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%));
1682
+ --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%));
1683
+ --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%));
1684
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
1685
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
1686
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
1687
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
1688
+ --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
1689
+ --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
1690
+ --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
1691
+ --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
1692
+ --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
1693
+ --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
1694
+ --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
1695
+ --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
1696
+ --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
1697
+ --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
1698
+ --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
1699
+ --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
1700
+ --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
1701
+ --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
1702
+ --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
1703
+ --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
1704
+ --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
1705
+ --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
1706
+ --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
1707
+ --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
1708
+ --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
1709
+ --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
1710
+ --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
1711
+ --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
1712
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
1713
+ --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
1714
+ --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
1715
+ --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
1716
+ --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
1717
+ --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
1718
+ --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
1719
+ --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
1720
+ --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
1721
+ --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
1722
+ --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
1723
+ --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
1724
+ --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
1725
+ --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
1726
+ --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
1727
+ --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
1728
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
1729
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
1730
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
1731
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
1732
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
1733
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
1734
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
1735
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
1736
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
1737
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
1738
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
1739
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
1740
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
1741
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
1742
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
1743
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
1744
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
1745
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
1746
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
1747
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
1748
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
1749
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
1750
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
1751
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
1752
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
1753
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
1754
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
1755
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
1756
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
1757
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
1758
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
1759
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
1760
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
1761
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
1762
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
1763
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
1764
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
1765
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
1766
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
1767
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
1768
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
1769
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
1770
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
1771
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
1772
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
1773
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
1774
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
1775
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
1776
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
1777
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
1778
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
1779
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
1780
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
1781
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
1782
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
1783
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
1784
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
1785
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
1786
+ --t-surface-color-card:hsl(0, 0%, 12%);
1787
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
1788
+ --t-border-color:hsl(0, 0%, 21%);
1789
+ --t-border-color-dark:hsl(0, 0%, 25%);
1790
+ --t-border-color-darker:hsl(0, 0%, 33%);
1791
+ --t-border-color-darkest:hsl(0, 0%, 38%);
1792
+ --t-border-color-disabled:hsl(0, 0%, 21%);
1793
+ --t-border-color-dim:hsl(0, 0%, 16%);
1794
+ --t-border-color-white:hsl(0, 0%, 12%);
1795
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
1796
+ --t-border-color-status-info:hsl(204, 100%, 35%);
1797
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
1798
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
1799
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
1800
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
1801
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
1802
+ --t-border-color-control-info:hsl(204, 100%, 35%);
1803
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
1804
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
1805
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
1806
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
1807
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
1808
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
1809
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
1810
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
1811
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
1812
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
2036
1813
  }
2037
1814
 
2038
- .tds-btn--full-width{
2039
- width:100%;
1815
+ @media (prefers-color-scheme: dark){
1816
+ :root[data-color-mode="system"]{
1817
+ color-scheme:dark;
1818
+ --t-text-color-headline:hsl(0, 0%, 94%);
1819
+ --t-text-color:hsl(0, 0%, 80%);
1820
+ --t-text-color-secondary:hsl(0, 0%, 54%);
1821
+ --t-text-color-disabled:hsl(0, 0%, 25%);
1822
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
1823
+ --t-text-color-interaction:hsl(204, 68%, 55%);
1824
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
1825
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
1826
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
1827
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
1828
+ --t-text-color-status-info:hsl(204, 68%, 55%);
1829
+ --t-text-color-status-success:hsl(97, 57%, 41%);
1830
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
1831
+ --t-text-color-status-error:hsl(8, 61%, 61%);
1832
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
1833
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
1834
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
1835
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
1836
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
1837
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
1838
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
1839
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
1840
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
1841
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
1842
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
1843
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
1844
+ --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
1845
+ --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
1846
+ --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
1847
+ --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
1848
+ --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
1849
+ --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
1850
+ --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
1851
+ --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
1852
+ --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
1853
+ --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
1854
+ --t-icon-color:hsl(0, 0%, 80%);
1855
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
1856
+ --t-icon-color-dim:hsl(0, 0%, 38%);
1857
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
1858
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
1859
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
1860
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
1861
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
1862
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
1863
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
1864
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
1865
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
1866
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
1867
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
1868
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
1869
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
1870
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
1871
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
1872
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
1873
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
1874
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
1875
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
1876
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
1877
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
1878
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
1879
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
1880
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
1881
+ --t-fill-color-control:hsl(204, 100%, 35%);
1882
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
1883
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
1884
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
1885
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
1886
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
1887
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
1888
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
1889
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
1890
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
1891
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
1892
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
1893
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
1894
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
1895
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
1896
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1897
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1898
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1899
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
1900
+ --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%));
1901
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
1902
+ --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%));
1903
+ --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%));
1904
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
1905
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
1906
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1907
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1908
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1909
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1910
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
1911
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
1912
+ --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%));
1913
+ --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%));
1914
+ --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%));
1915
+ --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%));
1916
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
1917
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
1918
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
1919
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
1920
+ --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
1921
+ --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
1922
+ --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
1923
+ --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
1924
+ --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
1925
+ --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
1926
+ --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
1927
+ --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
1928
+ --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
1929
+ --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
1930
+ --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
1931
+ --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
1932
+ --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
1933
+ --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
1934
+ --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
1935
+ --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
1936
+ --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
1937
+ --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
1938
+ --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
1939
+ --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
1940
+ --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
1941
+ --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
1942
+ --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
1943
+ --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
1944
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
1945
+ --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
1946
+ --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
1947
+ --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
1948
+ --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
1949
+ --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
1950
+ --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
1951
+ --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
1952
+ --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
1953
+ --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
1954
+ --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
1955
+ --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
1956
+ --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
1957
+ --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
1958
+ --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
1959
+ --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
1960
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
1961
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
1962
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
1963
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
1964
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
1965
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
1966
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
1967
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
1968
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
1969
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
1970
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
1971
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
1972
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
1973
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
1974
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
1975
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
1976
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
1977
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
1978
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
1979
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
1980
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
1981
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
1982
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
1983
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
1984
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
1985
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
1986
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
1987
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
1988
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
1989
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
1990
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
1991
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
1992
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
1993
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
1994
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
1995
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
1996
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
1997
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
1998
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
1999
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
2000
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
2001
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
2002
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
2003
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
2004
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
2005
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
2006
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
2007
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
2008
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
2009
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
2010
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
2011
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
2012
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
2013
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
2014
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
2015
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
2016
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
2017
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
2018
+ --t-surface-color-card:hsl(0, 0%, 12%);
2019
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
2020
+ --t-border-color:hsl(0, 0%, 21%);
2021
+ --t-border-color-dark:hsl(0, 0%, 25%);
2022
+ --t-border-color-darker:hsl(0, 0%, 33%);
2023
+ --t-border-color-darkest:hsl(0, 0%, 38%);
2024
+ --t-border-color-disabled:hsl(0, 0%, 21%);
2025
+ --t-border-color-dim:hsl(0, 0%, 16%);
2026
+ --t-border-color-white:hsl(0, 0%, 12%);
2027
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
2028
+ --t-border-color-status-info:hsl(204, 100%, 35%);
2029
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
2030
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
2031
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
2032
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
2033
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
2034
+ --t-border-color-control-info:hsl(204, 100%, 35%);
2035
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
2036
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
2037
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
2038
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
2039
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
2040
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
2041
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
2042
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
2043
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
2044
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
2040
2045
  }
2041
-
2042
- .tds-btn--loading{
2043
- --tds-btn-loading-spinner-visibility:visible;
2044
- --tds-btn-loading-spinner-animation-play-state:running;
2045
-
2046
- position:relative;
2047
2046
  }
2048
2047
 
2049
- .tds-btn--loading :not(.tds-loading-spinner){
2050
- visibility:hidden;
2051
- }
2052
-
2053
- .tds-btn--attention .attention-icon{
2054
- display:inline-block;
2055
- width:var(--tds-btn-attention-icon-size);
2056
- height:var(--tds-btn-attention-icon-size);
2057
- background-color:var(--t-icon-color-status-warning);
2058
- border:.125em solid var(--t-border-color-white);
2059
- border-radius:var(--t-border-radius-round);
2048
+ @media (prefers-color-scheme: dark){
2060
2049
  }
2061
2050
 
2062
2051
  .tds-checkbox{