@planningcenter/tapestry 3.0.0-rc.17 → 3.0.0-rc.18

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 (29) hide show
  1. package/dist/components/page-header/index.js +1 -1
  2. package/dist/components/sidenav/index.js +1 -1
  3. package/dist/reactRender.css +556 -556
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +556 -556
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/tapestry-wc/dist/components/{p-c6xqF66T.js → p-BY6zaL3N.js} +3 -3
  8. package/dist/tapestry-wc/dist/components/{p-c6xqF66T.js.map → p-BY6zaL3N.js.map} +1 -1
  9. package/dist/tapestry-wc/dist/components/{p-BobWS0hK.js → p-BfWtGbNU.js} +2 -2
  10. package/dist/tapestry-wc/dist/components/{p-BobWS0hK.js.map → p-BfWtGbNU.js.map} +1 -1
  11. package/dist/tapestry-wc/dist/components/{p-OjdQMmDR.js → p-Bfc7bVCa.js} +3 -3
  12. package/dist/tapestry-wc/dist/components/{p-OjdQMmDR.js.map → p-Bfc7bVCa.js.map} +1 -1
  13. package/dist/tapestry-wc/dist/components/{p-DC60OKIY.js → p-DmGaJ1sH.js} +3 -3
  14. package/dist/tapestry-wc/dist/components/{p-DC60OKIY.js.map → p-DmGaJ1sH.js.map} +1 -1
  15. package/dist/tapestry-wc/dist/components/{p-e4LINQT0.js → p-HBXJbYlS.js} +2 -2
  16. package/dist/tapestry-wc/dist/components/{p-e4LINQT0.js.map → p-HBXJbYlS.js.map} +1 -1
  17. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  18. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  19. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  20. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  21. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  22. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  23. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  24. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  25. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  26. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  27. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  28. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  29. package/package.json +3 -3
@@ -1,561 +1,5 @@
1
1
  @layer t-critical, t-component;
2
2
 
3
- @media (prefers-color-scheme: dark){
4
- :root[data-color-mode="system"]{
5
- color-scheme:dark;
6
- --t-text-color-headline:hsl(0, 0%, 94%);
7
- --t-text-color:hsl(0, 0%, 80%);
8
- --t-text-color-secondary:hsl(0, 0%, 54%);
9
- --t-text-color-disabled:hsl(0, 0%, 25%);
10
- --t-text-color-placeholder:hsl(0, 0%, 38%);
11
- --t-text-color-interaction:hsl(204, 68%, 55%);
12
- --t-text-color-interaction-hover:hsl(204, 68%, 50%);
13
- --t-text-color-interaction-active:hsl(204, 68%, 45%);
14
- --t-text-color-interaction-visited:hsl(204, 68%, 50%);
15
- --t-text-color-status-neutral:hsl(0, 0%, 80%);
16
- --t-text-color-status-info:hsl(204, 68%, 55%);
17
- --t-text-color-status-success:hsl(97, 57%, 41%);
18
- --t-text-color-status-warning:hsl(42, 84%, 55%);
19
- --t-text-color-status-error:hsl(8, 61%, 61%);
20
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
21
- --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
22
- --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
23
- --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
24
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
25
- --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
26
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
27
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
28
- --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
29
- --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
30
- --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
31
- --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
32
- --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
33
- --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
34
- --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
35
- --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
36
- --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
37
- --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
38
- --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
39
- --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
40
- --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
41
- --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
42
- --t-icon-color:hsl(0, 0%, 80%);
43
- --t-icon-color-secondary:hsl(0, 0%, 54%);
44
- --t-icon-color-dim:hsl(0, 0%, 38%);
45
- --t-icon-color-disabled:hsl(0, 0%, 25%);
46
- --t-icon-color-status-neutral:hsl(0, 0%, 54%);
47
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
48
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
49
- --t-icon-color-status-info:hsl(204, 68%, 55%);
50
- --t-icon-color-status-error:hsl(8, 61%, 61%);
51
- --t-fill-color-neutral-100:hsl(0, 0%, 10%);
52
- --t-fill-color-neutral-000:hsl(0, 0%, 98%);
53
- --t-fill-color-neutral-010:hsl(0, 0%, 88%);
54
- --t-fill-color-neutral-020:hsl(0, 0%, 68%);
55
- --t-fill-color-neutral-025:hsl(0, 0%, 58%);
56
- --t-fill-color-neutral-030:hsl(0, 0%, 50%);
57
- --t-fill-color-neutral-040:hsl(0, 0%, 32%);
58
- --t-fill-color-neutral-050:hsl(0, 0%, 24%);
59
- --t-fill-color-neutral-060:hsl(0, 0%, 19%);
60
- --t-fill-color-neutral-070:hsl(0, 0%, 17%);
61
- --t-fill-color-neutral-080:hsl(0, 0%, 15%);
62
- --t-fill-color-neutral-090:hsl(0, 0%, 12%);
63
- --t-fill-color-interaction:hsl(204, 100%, 35%);
64
- --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
65
- --t-fill-color-interaction-active:hsl(204, 80%, 45%);
66
- --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
67
- --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
68
- --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
69
- --t-fill-color-control:hsl(204, 100%, 35%);
70
- --t-fill-color-control-disabled:hsl(0, 0%, 20%);
71
- --t-fill-color-status-neutral:hsl(0, 0%, 24%);
72
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
73
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
74
- --t-fill-color-status-info:hsl(204, 100%, 35%);
75
- --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
76
- --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
77
- --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
78
- --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
79
- --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
80
- --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
81
- --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
82
- --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
83
- --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
84
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
85
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
86
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
87
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
88
- --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(285, 17%, 18%) 25%, hsl(263, 15%, 17%) 60%, hsl(204, 70%, 12%));
89
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
90
- --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(43, 80%, 16%), hsl(267, 15%, 14%) 58.5%, hsl(204, 70%, 12%));
91
- --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(44, 49%, 13%), hsl(264, 8%, 12%) 58.5%, hsl(203, 37%, 11%));
92
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
93
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
94
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
95
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
96
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
97
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
98
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
99
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
100
- --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(174, 34%, 18%), hsl(187, 39%, 14%) 39.5%, hsl(204, 70%, 12%));
101
- --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
102
- --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
103
- --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
104
- --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
105
- --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
106
- --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
107
- --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
108
- --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
109
- --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
110
- --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
111
- --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
112
- --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
113
- --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
114
- --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
115
- --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
116
- --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
117
- --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
118
- --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
119
- --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
120
- --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
121
- --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
122
- --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
123
- --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
124
- --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
125
- --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
126
- --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
127
- --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
128
- --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
129
- --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
130
- --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
131
- --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
132
- --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
133
- --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
134
- --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
135
- --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
136
- --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
137
- --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
138
- --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
139
- --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
140
- --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
141
- --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
142
- --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
143
- --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
144
- --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
145
- --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
146
- --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
147
- --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
148
- --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
149
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
150
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
151
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
152
- --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
153
- --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
154
- --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
155
- --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
156
- --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
157
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
158
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
159
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
160
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
161
- --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
162
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
163
- --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
164
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
165
- --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
166
- --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
167
- --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
168
- --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
169
- --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
170
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
171
- --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
172
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
173
- --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
174
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
175
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
176
- --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
177
- --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
178
- --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
179
- --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
180
- --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
181
- --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
182
- --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
183
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
184
- --t-fill-color-button-pill:hsl(0, 0%, 18%);
185
- --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
186
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
187
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
188
- --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
189
- --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
190
- --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
191
- --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
192
- --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
193
- --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
194
- --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
195
- --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
196
- --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
197
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
198
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
199
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
200
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
201
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
202
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
203
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
204
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
205
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
206
- --t-surface-color-card:hsl(0, 0%, 12%);
207
- --t-surface-color-canvas:hsl(0, 0%, 10%);
208
- --t-border-color:hsl(0, 0%, 21%);
209
- --t-border-color-dark:hsl(0, 0%, 25%);
210
- --t-border-color-darker:hsl(0, 0%, 33%);
211
- --t-border-color-darkest:hsl(0, 0%, 38%);
212
- --t-border-color-disabled:hsl(0, 0%, 21%);
213
- --t-border-color-dim:hsl(0, 0%, 16%);
214
- --t-border-color-white:hsl(0, 0%, 12%);
215
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
216
- --t-border-color-status-info:hsl(204, 100%, 35%);
217
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
218
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
219
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
220
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
221
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
222
- --t-border-color-control-info:hsl(204, 100%, 35%);
223
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
224
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
225
- }
226
- }
227
-
228
- :root{
229
- --t-border-color-default-base:var(--t-border-color);
230
- --t-border-color-default-dark:var(--t-border-color-dark);
231
- --t-border-color-default-darker:var(--t-border-color-darker);
232
- --t-border-color-default-darkest:var(--t-border-color-darkest);
233
- --t-border-color-default-dim:var(--t-border-color-dim);
234
- --t-border-color-default-disabled:var(--t-border-color-disabled);
235
- --t-border-color-default-white:var(--t-border-color-white);
236
- --t-border-radius-default:var(--t-border-radius);
237
- --t-border-width-default:var(--t-border-width);
238
- --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
239
- --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
240
- --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
241
- --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
242
- --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
243
- --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
244
- --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
245
- --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
246
- --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
247
- --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
248
- --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
249
- --t-fill-color-control-primary:var(--t-fill-color-control);
250
- --t-fill-color-interaction-default:var(--t-fill-color-interaction);
251
- --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
252
- --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
253
- --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
254
- --t-icon-color-default-dim:var(--t-icon-color-dim);
255
- --t-icon-color-default-disabled:var(--t-icon-color-disabled);
256
- --t-icon-color-default-inverted:var(--t-icon-color-inverted);
257
- --t-icon-color-default-primary:var(--t-icon-color);
258
- --t-icon-color-default-secondary:var(--t-icon-color-secondary);
259
- --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
260
- --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
261
- --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
262
- --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
263
- --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
264
- --t-text-color-default-disabled:var(--t-text-color-disabled);
265
- --t-text-color-default-headline:var(--t-text-color-headline);
266
- --t-text-color-default-inverted:var(--t-text-color-inverted);
267
- --t-text-color-default-placeholder:var(--t-text-color-placeholder);
268
- --t-text-color-default-primary:var(--t-text-color);
269
- --t-text-color-default-secondary:var(--t-text-color-secondary);
270
- --t-text-color-interaction-primary:var(--t-text-color-interaction);
271
- }
272
-
273
- @media (prefers-color-scheme: dark){
274
- :root[data-color-mode="system"]{
275
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
276
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
277
- --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
278
- --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
279
- --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
280
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
281
- --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
282
- --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
283
- }
284
- }
285
-
286
- :root[data-color-mode="dark"]{
287
- color-scheme:dark;
288
- --t-text-color-headline:hsl(0, 0%, 94%);
289
- --t-text-color:hsl(0, 0%, 80%);
290
- --t-text-color-secondary:hsl(0, 0%, 54%);
291
- --t-text-color-disabled:hsl(0, 0%, 25%);
292
- --t-text-color-placeholder:hsl(0, 0%, 38%);
293
- --t-text-color-interaction:hsl(204, 68%, 55%);
294
- --t-text-color-interaction-hover:hsl(204, 68%, 50%);
295
- --t-text-color-interaction-active:hsl(204, 68%, 45%);
296
- --t-text-color-interaction-visited:hsl(204, 68%, 50%);
297
- --t-text-color-status-neutral:hsl(0, 0%, 80%);
298
- --t-text-color-status-info:hsl(204, 68%, 55%);
299
- --t-text-color-status-success:hsl(97, 57%, 41%);
300
- --t-text-color-status-warning:hsl(42, 84%, 55%);
301
- --t-text-color-status-error:hsl(8, 61%, 61%);
302
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
303
- --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
304
- --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
305
- --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
306
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
307
- --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
308
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
309
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
310
- --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
311
- --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
312
- --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
313
- --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
314
- --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
315
- --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
316
- --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
317
- --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
318
- --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
319
- --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
320
- --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
321
- --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
322
- --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
323
- --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
324
- --t-icon-color:hsl(0, 0%, 80%);
325
- --t-icon-color-secondary:hsl(0, 0%, 54%);
326
- --t-icon-color-dim:hsl(0, 0%, 38%);
327
- --t-icon-color-disabled:hsl(0, 0%, 25%);
328
- --t-icon-color-status-neutral:hsl(0, 0%, 54%);
329
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
330
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
331
- --t-icon-color-status-info:hsl(204, 68%, 55%);
332
- --t-icon-color-status-error:hsl(8, 61%, 61%);
333
- --t-fill-color-neutral-100:hsl(0, 0%, 10%);
334
- --t-fill-color-neutral-000:hsl(0, 0%, 98%);
335
- --t-fill-color-neutral-010:hsl(0, 0%, 88%);
336
- --t-fill-color-neutral-020:hsl(0, 0%, 68%);
337
- --t-fill-color-neutral-025:hsl(0, 0%, 58%);
338
- --t-fill-color-neutral-030:hsl(0, 0%, 50%);
339
- --t-fill-color-neutral-040:hsl(0, 0%, 32%);
340
- --t-fill-color-neutral-050:hsl(0, 0%, 24%);
341
- --t-fill-color-neutral-060:hsl(0, 0%, 19%);
342
- --t-fill-color-neutral-070:hsl(0, 0%, 17%);
343
- --t-fill-color-neutral-080:hsl(0, 0%, 15%);
344
- --t-fill-color-neutral-090:hsl(0, 0%, 12%);
345
- --t-fill-color-interaction:hsl(204, 100%, 35%);
346
- --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
347
- --t-fill-color-interaction-active:hsl(204, 80%, 45%);
348
- --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
349
- --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
350
- --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
351
- --t-fill-color-control:hsl(204, 100%, 35%);
352
- --t-fill-color-control-disabled:hsl(0, 0%, 20%);
353
- --t-fill-color-status-neutral:hsl(0, 0%, 24%);
354
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
355
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
356
- --t-fill-color-status-info:hsl(204, 100%, 35%);
357
- --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
358
- --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
359
- --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
360
- --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
361
- --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
362
- --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
363
- --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
364
- --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
365
- --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
366
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
367
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
368
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
369
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
370
- --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%));
371
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
372
- --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%));
373
- --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%));
374
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
375
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
376
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
377
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
378
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
379
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
380
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
381
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
382
- --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%));
383
- --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%));
384
- --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%));
385
- --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%));
386
- --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
387
- --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
388
- --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
389
- --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
390
- --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
391
- --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
392
- --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
393
- --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
394
- --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
395
- --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
396
- --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
397
- --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
398
- --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
399
- --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
400
- --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
401
- --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
402
- --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
403
- --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
404
- --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
405
- --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
406
- --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
407
- --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
408
- --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
409
- --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
410
- --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
411
- --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
412
- --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
413
- --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
414
- --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
415
- --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
416
- --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
417
- --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
418
- --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
419
- --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
420
- --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
421
- --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
422
- --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
423
- --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
424
- --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
425
- --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
426
- --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
427
- --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
428
- --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
429
- --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
430
- --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
431
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
432
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
433
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
434
- --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
435
- --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
436
- --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
437
- --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
438
- --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
439
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
440
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
441
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
442
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
443
- --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
444
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
445
- --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
446
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
447
- --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
448
- --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
449
- --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
450
- --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
451
- --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
452
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
453
- --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
454
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
455
- --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
456
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
457
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
458
- --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
459
- --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
460
- --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
461
- --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
462
- --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
463
- --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
464
- --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
465
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
466
- --t-fill-color-button-pill:hsl(0, 0%, 18%);
467
- --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
468
- --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
469
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
470
- --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
471
- --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
472
- --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
473
- --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
474
- --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
475
- --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
476
- --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
477
- --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
478
- --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
479
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
480
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
481
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
482
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
483
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
484
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
485
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
486
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
487
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
488
- --t-surface-color-card:hsl(0, 0%, 12%);
489
- --t-surface-color-canvas:hsl(0, 0%, 10%);
490
- --t-border-color:hsl(0, 0%, 21%);
491
- --t-border-color-dark:hsl(0, 0%, 25%);
492
- --t-border-color-darker:hsl(0, 0%, 33%);
493
- --t-border-color-darkest:hsl(0, 0%, 38%);
494
- --t-border-color-disabled:hsl(0, 0%, 21%);
495
- --t-border-color-dim:hsl(0, 0%, 16%);
496
- --t-border-color-white:hsl(0, 0%, 12%);
497
- --t-border-color-status-neutral:hsl(0, 0%, 38%);
498
- --t-border-color-status-info:hsl(204, 100%, 35%);
499
- --t-border-color-button-neutral:hsl(0, 0%, 19%);
500
- --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
501
- --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
502
- --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
503
- --t-border-color-control-neutral:hsl(0, 0%, 33%);
504
- --t-border-color-control-info:hsl(204, 100%, 35%);
505
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
506
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
507
- }
508
-
509
- :root{
510
- --t-border-size-default:var(--t-border-width);
511
- --t-border-size-thick:var(--t-border-width-thick);
512
- --t-font-weight-semi-bold:var(--t-font-weight-semibold);
513
- --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
514
- --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
515
- --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
516
- --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
517
- --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
518
- --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
519
- --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
520
- --t-fill-color-alert-info:hsl(204, 94%, 49%);
521
- --t-fill-color-alert-success:hsl(122, 60%, 41%);
522
- --t-fill-color-alert-warning:hsl(43, 96%, 58%);
523
- --t-fill-color-alert-error:hsl(4, 77%, 59%);
524
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
525
- --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
526
- --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
527
- --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
528
- --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
529
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
530
- --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
531
- --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
532
- --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
533
- --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
534
- --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
535
- --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
536
- --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
537
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
538
- --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
539
- --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
540
- --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
541
- --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
542
- --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
543
- --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
544
- --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
545
- --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
546
- }
547
-
548
- :root[data-color-mode="dark"]{
549
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
550
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
551
- --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
552
- --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
553
- --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
554
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
555
- --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
556
- --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
557
- }
558
-
559
3
  :root{
560
4
  --t-border-radius-sm:2px;
561
5
  --t-border-radius-md:4px;
@@ -970,6 +414,549 @@
970
414
  --t-form-placeholder-color:var(--t-text-color-placeholder);
971
415
  }
972
416
 
417
+ :root[data-color-mode="dark"]{
418
+ color-scheme:dark;
419
+ --t-text-color-headline:hsl(0, 0%, 94%);
420
+ --t-text-color:hsl(0, 0%, 80%);
421
+ --t-text-color-secondary:hsl(0, 0%, 54%);
422
+ --t-text-color-disabled:hsl(0, 0%, 25%);
423
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
424
+ --t-text-color-interaction:hsl(204, 68%, 55%);
425
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
426
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
427
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
428
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
429
+ --t-text-color-status-info:hsl(204, 68%, 55%);
430
+ --t-text-color-status-success:hsl(97, 57%, 41%);
431
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
432
+ --t-text-color-status-error:hsl(8, 61%, 61%);
433
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
434
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
435
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
436
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
437
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
438
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
439
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
440
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
441
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
442
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
443
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
444
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
445
+ --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
446
+ --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
447
+ --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
448
+ --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
449
+ --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
450
+ --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
451
+ --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
452
+ --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
453
+ --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
454
+ --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
455
+ --t-icon-color:hsl(0, 0%, 80%);
456
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
457
+ --t-icon-color-dim:hsl(0, 0%, 38%);
458
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
459
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
460
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
461
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
462
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
463
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
464
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
465
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
466
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
467
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
468
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
469
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
470
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
471
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
472
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
473
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
474
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
475
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
476
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
477
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
478
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
479
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
480
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
481
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
482
+ --t-fill-color-control:hsl(204, 100%, 35%);
483
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
484
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
485
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
486
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
487
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
488
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
489
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
490
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
491
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
492
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
493
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
494
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
495
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
496
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
497
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
498
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
499
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
500
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
501
+ --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(285, 17%, 18%) 25%, hsl(263, 15%, 17%) 60%, hsl(204, 70%, 12%));
502
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
503
+ --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(43, 80%, 16%), hsl(267, 15%, 14%) 58.5%, hsl(204, 70%, 12%));
504
+ --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(44, 49%, 13%), hsl(264, 8%, 12%) 58.5%, hsl(203, 37%, 11%));
505
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
506
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
507
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
508
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
509
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
510
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
511
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
512
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
513
+ --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(174, 34%, 18%), hsl(187, 39%, 14%) 39.5%, hsl(204, 70%, 12%));
514
+ --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(173, 22%, 15%), hsl(185, 21%, 12%) 39.5%, hsl(203, 37%, 11%));
515
+ --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(87, 26%, 18%), hsl(88, 25%, 15%) 39.5%, hsl(204, 70%, 12%));
516
+ --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(85, 17%, 14%), hsl(87, 14%, 13%) 39.5%, hsl(203, 37%, 11%));
517
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
518
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
519
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
520
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
521
+ --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
522
+ --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
523
+ --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
524
+ --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
525
+ --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
526
+ --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
527
+ --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
528
+ --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
529
+ --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
530
+ --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
531
+ --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
532
+ --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
533
+ --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
534
+ --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
535
+ --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
536
+ --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
537
+ --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
538
+ --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
539
+ --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
540
+ --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
541
+ --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
542
+ --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
543
+ --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
544
+ --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
545
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
546
+ --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
547
+ --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
548
+ --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
549
+ --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
550
+ --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
551
+ --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
552
+ --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
553
+ --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
554
+ --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
555
+ --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
556
+ --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
557
+ --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
558
+ --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
559
+ --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
560
+ --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
561
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
562
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
563
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
564
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
565
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
566
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
567
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
568
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
569
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
570
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
571
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
572
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
573
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
574
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
575
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
576
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
577
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
578
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
579
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
580
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
581
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
582
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
583
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
584
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
585
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
586
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
587
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
588
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
589
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
590
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
591
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
592
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
593
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
594
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
595
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
596
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
597
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
598
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
599
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
600
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
601
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
602
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
603
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
604
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
605
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
606
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
607
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
608
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
609
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
610
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
611
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
612
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
613
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
614
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
615
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
616
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
617
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
618
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
619
+ --t-surface-color-card:hsl(0, 0%, 12%);
620
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
621
+ --t-border-color:hsl(0, 0%, 21%);
622
+ --t-border-color-dark:hsl(0, 0%, 25%);
623
+ --t-border-color-darker:hsl(0, 0%, 33%);
624
+ --t-border-color-darkest:hsl(0, 0%, 38%);
625
+ --t-border-color-disabled:hsl(0, 0%, 21%);
626
+ --t-border-color-dim:hsl(0, 0%, 16%);
627
+ --t-border-color-white:hsl(0, 0%, 12%);
628
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
629
+ --t-border-color-status-info:hsl(204, 100%, 35%);
630
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
631
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
632
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
633
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
634
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
635
+ --t-border-color-control-info:hsl(204, 100%, 35%);
636
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
637
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
638
+ }
639
+
640
+ @media (prefers-color-scheme: dark){
641
+ :root[data-color-mode="system"]{
642
+ color-scheme:dark;
643
+ --t-text-color-headline:hsl(0, 0%, 94%);
644
+ --t-text-color:hsl(0, 0%, 80%);
645
+ --t-text-color-secondary:hsl(0, 0%, 54%);
646
+ --t-text-color-disabled:hsl(0, 0%, 25%);
647
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
648
+ --t-text-color-interaction:hsl(204, 68%, 55%);
649
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
650
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
651
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
652
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
653
+ --t-text-color-status-info:hsl(204, 68%, 55%);
654
+ --t-text-color-status-success:hsl(97, 57%, 41%);
655
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
656
+ --t-text-color-status-error:hsl(8, 61%, 61%);
657
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
658
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
659
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
660
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
661
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
662
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
663
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
664
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
665
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
666
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
667
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
668
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
669
+ --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
670
+ --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
671
+ --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
672
+ --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
673
+ --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
674
+ --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
675
+ --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
676
+ --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
677
+ --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
678
+ --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
679
+ --t-icon-color:hsl(0, 0%, 80%);
680
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
681
+ --t-icon-color-dim:hsl(0, 0%, 38%);
682
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
683
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
684
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
685
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
686
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
687
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
688
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
689
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
690
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
691
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
692
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
693
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
694
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
695
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
696
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
697
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
698
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
699
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
700
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
701
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
702
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
703
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
704
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
705
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
706
+ --t-fill-color-control:hsl(204, 100%, 35%);
707
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
708
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
709
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
710
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
711
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
712
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
713
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
714
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
715
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
716
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
717
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
718
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
719
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
720
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
721
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
722
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
723
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
724
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
725
+ --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%));
726
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
727
+ --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%));
728
+ --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%));
729
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
730
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
731
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
732
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
733
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
734
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
735
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
736
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
737
+ --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%));
738
+ --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%));
739
+ --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%));
740
+ --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%));
741
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
742
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
743
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
744
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
745
+ --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
746
+ --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
747
+ --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
748
+ --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
749
+ --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
750
+ --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
751
+ --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
752
+ --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
753
+ --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
754
+ --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
755
+ --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
756
+ --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
757
+ --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
758
+ --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
759
+ --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
760
+ --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
761
+ --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
762
+ --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
763
+ --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
764
+ --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
765
+ --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
766
+ --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
767
+ --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
768
+ --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
769
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
770
+ --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
771
+ --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
772
+ --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
773
+ --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
774
+ --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
775
+ --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
776
+ --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
777
+ --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
778
+ --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
779
+ --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
780
+ --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
781
+ --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
782
+ --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
783
+ --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
784
+ --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
785
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
786
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
787
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
788
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
789
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
790
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
791
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
792
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
793
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
794
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
795
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
796
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
797
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
798
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
799
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
800
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
801
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
802
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
803
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
804
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
805
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
806
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
807
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
808
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
809
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
810
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
811
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
812
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
813
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
814
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
815
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
816
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
817
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
818
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
819
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
820
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
821
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
822
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
823
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
824
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
825
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
826
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
827
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
828
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
829
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
830
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
831
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
832
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
833
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
834
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
835
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
836
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
837
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
838
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
839
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
840
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
841
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
842
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
843
+ --t-surface-color-card:hsl(0, 0%, 12%);
844
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
845
+ --t-border-color:hsl(0, 0%, 21%);
846
+ --t-border-color-dark:hsl(0, 0%, 25%);
847
+ --t-border-color-darker:hsl(0, 0%, 33%);
848
+ --t-border-color-darkest:hsl(0, 0%, 38%);
849
+ --t-border-color-disabled:hsl(0, 0%, 21%);
850
+ --t-border-color-dim:hsl(0, 0%, 16%);
851
+ --t-border-color-white:hsl(0, 0%, 12%);
852
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
853
+ --t-border-color-status-info:hsl(204, 100%, 35%);
854
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
855
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
856
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
857
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
858
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
859
+ --t-border-color-control-info:hsl(204, 100%, 35%);
860
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
861
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
862
+ }
863
+ }
864
+
865
+ :root{
866
+ --t-border-size-default:var(--t-border-width);
867
+ --t-border-size-thick:var(--t-border-width-thick);
868
+ --t-font-weight-semi-bold:var(--t-font-weight-semibold);
869
+ --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
870
+ --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
871
+ --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
872
+ --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
873
+ --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
874
+ --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
875
+ --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
876
+ --t-fill-color-alert-info:hsl(204, 94%, 49%);
877
+ --t-fill-color-alert-success:hsl(122, 60%, 41%);
878
+ --t-fill-color-alert-warning:hsl(43, 96%, 58%);
879
+ --t-fill-color-alert-error:hsl(4, 77%, 59%);
880
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
881
+ --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
882
+ --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
883
+ --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
884
+ --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
885
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
886
+ --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
887
+ --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
888
+ --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
889
+ --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
890
+ --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
891
+ --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
892
+ --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
893
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
894
+ --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
895
+ --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
896
+ --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
897
+ --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
898
+ --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
899
+ --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
900
+ --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
901
+ --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
902
+ }
903
+
904
+ :root[data-color-mode="dark"]{
905
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
906
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
907
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
908
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
909
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
910
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
911
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
912
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
913
+ }
914
+
915
+ :root{
916
+ --t-border-color-default-base:var(--t-border-color);
917
+ --t-border-color-default-dark:var(--t-border-color-dark);
918
+ --t-border-color-default-darker:var(--t-border-color-darker);
919
+ --t-border-color-default-darkest:var(--t-border-color-darkest);
920
+ --t-border-color-default-dim:var(--t-border-color-dim);
921
+ --t-border-color-default-disabled:var(--t-border-color-disabled);
922
+ --t-border-color-default-white:var(--t-border-color-white);
923
+ --t-border-radius-default:var(--t-border-radius);
924
+ --t-border-width-default:var(--t-border-width);
925
+ --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
926
+ --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
927
+ --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
928
+ --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
929
+ --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
930
+ --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
931
+ --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
932
+ --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
933
+ --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
934
+ --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
935
+ --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
936
+ --t-fill-color-control-primary:var(--t-fill-color-control);
937
+ --t-fill-color-interaction-default:var(--t-fill-color-interaction);
938
+ --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
939
+ --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
940
+ --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
941
+ --t-icon-color-default-dim:var(--t-icon-color-dim);
942
+ --t-icon-color-default-disabled:var(--t-icon-color-disabled);
943
+ --t-icon-color-default-inverted:var(--t-icon-color-inverted);
944
+ --t-icon-color-default-primary:var(--t-icon-color);
945
+ --t-icon-color-default-secondary:var(--t-icon-color-secondary);
946
+ --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
947
+ --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
948
+ --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
949
+ --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
950
+ --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
951
+ --t-text-color-default-disabled:var(--t-text-color-disabled);
952
+ --t-text-color-default-headline:var(--t-text-color-headline);
953
+ --t-text-color-default-inverted:var(--t-text-color-inverted);
954
+ --t-text-color-default-placeholder:var(--t-text-color-placeholder);
955
+ --t-text-color-default-primary:var(--t-text-color);
956
+ --t-text-color-default-secondary:var(--t-text-color-secondary);
957
+ --t-text-color-interaction-primary:var(--t-text-color-interaction);
958
+ }
959
+
973
960
 
974
961
  @media (prefers-reduced-motion: no-preference){
975
962
 
@@ -1565,6 +1552,19 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1565
1552
  }
1566
1553
  }
1567
1554
 
1555
+ @media (prefers-color-scheme: dark){
1556
+ :root[data-color-mode="system"]{
1557
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
1558
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
1559
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
1560
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
1561
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
1562
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
1563
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
1564
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
1565
+ }
1566
+ }
1567
+
1568
1568
  .tds-loading-spinner{
1569
1569
  --tds-loading-spinner-size:1.25em;
1570
1570