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

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 (13) hide show
  1. package/dist/index.css +24 -0
  2. package/dist/index.css.map +1 -1
  3. package/dist/reactRender.css +326 -302
  4. package/dist/reactRender.css.map +1 -1
  5. package/dist/reactRenderLegacy.css +326 -302
  6. package/dist/reactRenderLegacy.css.map +1 -1
  7. package/dist/tokens-deprecated.css +24 -0
  8. package/dist/tokens-deprecated.css.map +1 -1
  9. package/dist/tokens-deprecated.d.ts +2 -0
  10. package/dist/tokens-deprecated.d.ts.map +1 -1
  11. package/dist/unstable.css +24 -0
  12. package/dist/unstable.css.map +1 -1
  13. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,5 +1,230 @@
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
+
3
228
  :root{
4
229
  --t-border-radius-sm:2px;
5
230
  --t-border-radius-md:4px;
@@ -415,230 +640,111 @@
415
640
  }
416
641
 
417
642
  :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);
643
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
644
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
645
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
646
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
647
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
648
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
649
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
650
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
651
+ }
652
+
653
+ :root{
654
+ --t-border-size-default:var(--t-border-width);
655
+ --t-border-size-thick:var(--t-border-width-thick);
656
+ --t-font-weight-semi-bold:var(--t-font-weight-semibold);
657
+ --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
658
+ --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
659
+ --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
660
+ --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
661
+ --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
662
+ --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
663
+ --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
664
+ --t-fill-color-alert-info:hsl(204, 94%, 49%);
665
+ --t-fill-color-alert-success:hsl(122, 60%, 41%);
666
+ --t-fill-color-alert-warning:hsl(43, 96%, 58%);
667
+ --t-fill-color-alert-error:hsl(4, 77%, 59%);
668
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
669
+ --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
670
+ --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
671
+ --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
672
+ --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
673
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
674
+ --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
675
+ --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
676
+ --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
677
+ --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
678
+ --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
679
+ --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
680
+ --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
681
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
682
+ --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
683
+ --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
684
+ --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
685
+ --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
686
+ --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
687
+ --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
688
+ --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
689
+ --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
690
+ --t-border-color-default-base:var(--t-border-color);
691
+ --t-border-color-default-dark:var(--t-border-color-dark);
692
+ --t-border-color-default-darker:var(--t-border-color-darker);
693
+ --t-border-color-default-darkest:var(--t-border-color-darkest);
694
+ --t-border-color-default-dim:var(--t-border-color-dim);
695
+ --t-border-color-default-disabled:var(--t-border-color-disabled);
696
+ --t-border-color-default-white:var(--t-border-color-white);
697
+ --t-border-radius-default:var(--t-border-radius);
698
+ --t-border-width-default:var(--t-border-width);
699
+ --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
700
+ --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
701
+ --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
702
+ --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
703
+ --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
704
+ --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
705
+ --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
706
+ --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
707
+ --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
708
+ --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
709
+ --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
710
+ --t-fill-color-control-primary:var(--t-fill-color-control);
711
+ --t-fill-color-interaction-default:var(--t-fill-color-interaction);
712
+ --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
713
+ --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
714
+ --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
715
+ --t-icon-color-default-dim:var(--t-icon-color-dim);
716
+ --t-icon-color-default-disabled:var(--t-icon-color-disabled);
717
+ --t-icon-color-default-inverted:var(--t-icon-color-inverted);
718
+ --t-icon-color-default-primary:var(--t-icon-color);
719
+ --t-icon-color-default-secondary:var(--t-icon-color-secondary);
720
+ --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
721
+ --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
722
+ --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
723
+ --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
724
+ --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
725
+ --t-text-color-default-disabled:var(--t-text-color-disabled);
726
+ --t-text-color-default-headline:var(--t-text-color-headline);
727
+ --t-text-color-default-inverted:var(--t-text-color-inverted);
728
+ --t-text-color-default-placeholder:var(--t-text-color-placeholder);
729
+ --t-text-color-default-primary:var(--t-text-color);
730
+ --t-text-color-default-secondary:var(--t-text-color-secondary);
731
+ --t-text-color-interaction-primary:var(--t-text-color-interaction);
638
732
  }
639
733
 
640
734
  @media (prefers-color-scheme: dark){
641
735
  :root[data-color-mode="system"]{
736
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
737
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
738
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
739
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
740
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
741
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
742
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
743
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
744
+ }
745
+ }
746
+
747
+ :root[data-color-mode="dark"]{
642
748
  color-scheme:dark;
643
749
  --t-text-color-headline:hsl(0, 0%, 94%);
644
750
  --t-text-color:hsl(0, 0%, 80%);
@@ -860,88 +966,6 @@
860
966
  --t-border-color-control-disabled:hsl(0, 0%, 21%);
861
967
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
862
968
  }
863
- }
864
-
865
- :root{
866
- --t-border-size-default:var(--t-border-width);
867
- --t-border-size-thick:var(--t-border-width-thick);
868
- --t-font-weight-semi-bold:var(--t-font-weight-semibold);
869
- --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
870
- --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
871
- --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
872
- --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
873
- --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
874
- --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
875
- --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
876
- --t-fill-color-alert-info:hsl(204, 94%, 49%);
877
- --t-fill-color-alert-success:hsl(122, 60%, 41%);
878
- --t-fill-color-alert-warning:hsl(43, 96%, 58%);
879
- --t-fill-color-alert-error:hsl(4, 77%, 59%);
880
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
881
- --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
882
- --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
883
- --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
884
- --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
885
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
886
- --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
887
- --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
888
- --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
889
- --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
890
- --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
891
- --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
892
- --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
893
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
894
- --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
895
- --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
896
- --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
897
- --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
898
- --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
899
- --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
900
- --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
901
- --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
902
- --t-border-color-default-base:var(--t-border-color);
903
- --t-border-color-default-dark:var(--t-border-color-dark);
904
- --t-border-color-default-darker:var(--t-border-color-darker);
905
- --t-border-color-default-darkest:var(--t-border-color-darkest);
906
- --t-border-color-default-dim:var(--t-border-color-dim);
907
- --t-border-color-default-disabled:var(--t-border-color-disabled);
908
- --t-border-color-default-white:var(--t-border-color-white);
909
- --t-border-radius-default:var(--t-border-radius);
910
- --t-border-width-default:var(--t-border-width);
911
- --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
912
- --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
913
- --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
914
- --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
915
- --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
916
- --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
917
- --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
918
- --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
919
- --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
920
- --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
921
- --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
922
- --t-fill-color-control-primary:var(--t-fill-color-control);
923
- --t-fill-color-interaction-default:var(--t-fill-color-interaction);
924
- --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
925
- --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
926
- --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
927
- --t-icon-color-default-dim:var(--t-icon-color-dim);
928
- --t-icon-color-default-disabled:var(--t-icon-color-disabled);
929
- --t-icon-color-default-inverted:var(--t-icon-color-inverted);
930
- --t-icon-color-default-primary:var(--t-icon-color);
931
- --t-icon-color-default-secondary:var(--t-icon-color-secondary);
932
- --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
933
- --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
934
- --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
935
- --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
936
- --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
937
- --t-text-color-default-disabled:var(--t-text-color-disabled);
938
- --t-text-color-default-headline:var(--t-text-color-headline);
939
- --t-text-color-default-inverted:var(--t-text-color-inverted);
940
- --t-text-color-default-placeholder:var(--t-text-color-placeholder);
941
- --t-text-color-default-primary:var(--t-text-color);
942
- --t-text-color-default-secondary:var(--t-text-color-secondary);
943
- --t-text-color-interaction-primary:var(--t-text-color-interaction);
944
- }
945
969
 
946
970
  @layer t-critical{
947
971
  tds-page-header:not(.hydrated){