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

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 (5) hide show
  1. package/dist/reactRender.css +1150 -1150
  2. package/dist/reactRender.css.map +1 -1
  3. package/dist/reactRenderLegacy.css +1150 -1150
  4. package/dist/reactRenderLegacy.css.map +1 -1
  5. package/package.json +2 -2
package/dist/reactRender.css CHANGED
@@ -1,644 +1,6 @@
1
1
  @layer t-critical, t-component;
2
2
 
3
- :root{
4
- --t-border-radius-sm:2px;
5
- --t-border-radius-md:4px;
6
- --t-border-radius-lg:8px;
7
- --t-border-radius-xl:16px;
8
- --t-border-radius-round:56px;
9
- --t-border-radius:4px;
10
- --t-border-width:1px;
11
- --t-border-width-thick:2px;
12
- --t-spacing-1:8px;
13
- --t-spacing-2:16px;
14
- --t-spacing-3:24px;
15
- --t-spacing-4:32px;
16
- --t-spacing-5:40px;
17
- --t-spacing-6:48px;
18
- --t-spacing-7:56px;
19
- --t-spacing-fourth:2px;
20
- --t-spacing-half:4px;
21
- --t-spacing-1-half:12px;
22
- --t-element-size-3xl:48px;
23
- --t-element-size-2xl:32px;
24
- --t-element-size-xl:24px;
25
- --t-element-size-lg:18px;
26
- --t-element-size-md:16px;
27
- --t-element-size-sm:14px;
28
- --t-element-size-xs:12px;
29
- --t-font-size-4xl:32px;
30
- --t-font-size-3xl:28px;
31
- --t-font-size-2xl:24px;
32
- --t-font-size-xl:20px;
33
- --t-font-size-lg:18px;
34
- --t-font-size-md:16px;
35
- --t-font-size-sm:14px;
36
- --t-font-size-xs:12px;
37
- --t-font-size-2xs:10px;
38
- --t-font-weight-normal:400;
39
- --t-font-weight-medium:500;
40
- --t-font-weight-semibold:600;
41
- --t-font-weight-bold:700;
42
- --t-container-size-xl:48px;
43
- --t-container-size-lg:40px;
44
- --t-container-size-md:32px;
45
- --t-container-size-sm:24px;
46
- --t-container-size-xs:20px;
47
- --t-avatar-size-20:20px;
48
- --t-avatar-size-24:24px;
49
- --t-avatar-size-36:36px;
50
- --t-avatar-size-48:48px;
51
- --t-avatar-size-72:72px;
52
- --t-avatar-size-112:112px;
53
- --t-text-color-headline:hsl(0, 0%, 12%);
54
- --t-text-color:hsl(0, 0%, 24%);
55
- --t-text-color-secondary:hsl(0, 0%, 42%);
56
- --t-text-color-disabled:hsl(0, 0%, 81%);
57
- --t-text-color-placeholder:hsl(0, 0%, 58%);
58
- --t-text-color-inverted:hsl(0, 0%, 100%);
59
- --t-text-color-interaction:hsl(204, 100%, 40%);
60
- --t-text-color-interaction-hover:hsl(204, 100%, 35%);
61
- --t-text-color-interaction-active:hsl(204, 100%, 30%);
62
- --t-text-color-interaction-visited:hsl(204, 100%, 30%);
63
- --t-text-color-status-neutral:hsl(0, 0%, 24%);
64
- --t-text-color-status-info:hsl(204, 100%, 35%);
65
- --t-text-color-status-success:hsl(97, 57%, 28%);
66
- --t-text-color-status-warning:hsl(42, 100%, 29%);
67
- --t-text-color-status-error:hsl(8, 60%, 45%);
68
- --t-text-color-tag-subtle-gray:hsl(0, 0%, 24%);
69
- --t-text-color-tag-subtle-blue:hsl(224, 47%, 31%);
70
- --t-text-color-tag-subtle-indigo:hsl(241, 59%, 28%);
71
- --t-text-color-tag-subtle-aqua:hsl(209, 77%, 22%);
72
- --t-text-color-tag-subtle-teal:hsl(180, 95%, 15%);
73
- --t-text-color-tag-subtle-green:hsl(100, 93%, 17%);
74
- --t-text-color-tag-subtle-yellow:hsl(29, 100%, 23%);
75
- --t-text-color-tag-subtle-orange:hsl(18, 100%, 18%);
76
- --t-text-color-tag-subtle-pink:hsl(327, 88%, 20%);
77
- --t-text-color-tag-subtle-purple:hsl(268, 71%, 27%);
78
- --t-text-color-tag-subtle-magenta:hsl(285, 71%, 20%);
79
- --t-text-color-tag-bold-gray:hsl(0, 0%, 24%);
80
- --t-text-color-tag-bold-indigo:hsl(241, 59%, 28%);
81
- --t-text-color-tag-bold-blue:hsl(224, 47%, 31%);
82
- --t-text-color-tag-bold-aqua:hsl(209, 77%, 22%);
83
- --t-text-color-tag-bold-teal:hsl(180, 95%, 15%);
84
- --t-text-color-tag-bold-green:hsl(100, 93%, 17%);
85
- --t-text-color-tag-bold-yellow:hsl(29, 100%, 23%);
86
- --t-text-color-tag-bold-orange:hsl(18, 100%, 18%);
87
- --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
88
- --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
89
- --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
90
- --t-icon-color:hsl(0, 0%, 24%);
91
- --t-icon-color-secondary:hsl(0, 0%, 42%);
92
- --t-icon-color-dim:hsl(0, 0%, 58%);
93
- --t-icon-color-disabled:hsl(0, 0%, 81%);
94
- --t-icon-color-inverted:hsl(0, 0%, 100%);
95
- --t-icon-color-status-neutral:hsl(0, 0%, 42%);
96
- --t-icon-color-status-neutral-secondary:hsl(0, 0%, 58%);
97
- --t-icon-color-status-neutral-bold:hsl(0, 0%, 24%);
98
- --t-icon-color-status-info:hsl(204, 100%, 40%);
99
- --t-icon-color-status-success:hsl(96, 57%, 33%);
100
- --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
101
- --t-icon-color-status-warning:hsl(42, 84%, 49%);
102
- --t-icon-color-status-error:hsl(8, 60%, 47%);
103
- --t-fill-color-neutral-100:hsl(0, 0%, 100%);
104
- --t-fill-color-neutral-000:hsl(0, 0%, 12%);
105
- --t-fill-color-neutral-010:hsl(0, 0%, 24%);
106
- --t-fill-color-neutral-020:hsl(0, 0%, 42%);
107
- --t-fill-color-neutral-025:hsl(0, 0%, 50%);
108
- --t-fill-color-neutral-030:hsl(0, 0%, 58%);
109
- --t-fill-color-neutral-040:hsl(0, 0%, 81%);
110
- --t-fill-color-neutral-050:hsl(0, 0%, 88%);
111
- --t-fill-color-neutral-060:hsl(0, 0%, 93%);
112
- --t-fill-color-neutral-070:hsl(0, 0%, 95%);
113
- --t-fill-color-neutral-080:hsl(0, 0%, 97%);
114
- --t-fill-color-neutral-090:hsl(0, 0%, 98%);
115
- --t-fill-color-interaction:hsl(204, 100%, 40%);
116
- --t-fill-color-interaction-hover:hsl(204, 100%, 35%);
117
- --t-fill-color-interaction-active:hsl(204, 100%, 30%);
118
- --t-fill-color-interaction-disabled:hsl(0, 0%, 81%);
119
- --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
120
- --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
121
- --t-fill-color-control:hsl(204, 100%, 40%);
122
- --t-fill-color-control-secondary:hsl(97, 57%, 40%);
123
- --t-fill-color-control-error:hsl(8, 60%, 47%);
124
- --t-fill-color-control-disabled:hsl(0, 0%, 81%);
125
- --t-fill-color-status-neutral:hsl(0, 0%, 42%);
126
- --t-fill-color-status-neutral-ghost:hsl(0, 0%, 93%);
127
- --t-fill-color-status-neutral-dim:hsl(0, 0%, 97%);
128
- --t-fill-color-status-info:hsl(204, 100%, 40%);
129
- --t-fill-color-status-info-ghost:hsl(203, 94%, 94%);
130
- --t-fill-color-status-info-dim:hsl(204, 100%, 97%);
131
- --t-fill-color-status-success:hsl(96, 57%, 33%);
132
- --t-fill-color-status-success-ghost:hsl(97, 57%, 90%);
133
- --t-fill-color-status-success-dim:hsl(96, 60%, 95%);
134
- --t-fill-color-status-warning:hsl(42, 84%, 63%);
135
- --t-fill-color-status-warning-ghost:hsl(42, 87%, 94%);
136
- --t-fill-color-status-warning-dim:hsl(42, 87%, 97%);
137
- --t-fill-color-status-error:hsl(8, 60%, 47%);
138
- --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
139
- --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
140
- --t-fill-color-tooltip:hsla(0, 0%, 12%, 0.9);
141
- --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
142
- --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
143
- --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
144
- --t-fill-color-product-accounts-040:hsl(210, 54%, 60%);
145
- --t-fill-color-product-accounts-050:hsl(210, 55%, 50%);
146
- --t-fill-color-product-accounts-060:hsl(210, 65%, 40%);
147
- --t-fill-color-product-accounts-070:hsl(211, 70%, 32%);
148
- --t-fill-color-product-accounts-080:hsl(210, 75%, 25%);
149
- --t-fill-color-product-calendar-010:hsl(8, 61%, 90%);
150
- --t-fill-color-product-calendar-020:hsl(8, 61%, 70%);
151
- --t-fill-color-product-calendar-030:hsl(8, 72%, 59%);
152
- --t-fill-color-product-calendar-040:hsl(8, 65%, 55%);
153
- --t-fill-color-product-calendar-050:hsl(9, 61%, 50%);
154
- --t-fill-color-product-calendar-060:hsl(8, 65%, 42%);
155
- --t-fill-color-product-calendar-070:hsl(7, 65%, 34%);
156
- --t-fill-color-product-calendar-080:hsl(9, 61%, 27%);
157
- --t-fill-color-product-checkins-010:hsl(285, 20%, 92%);
158
- --t-fill-color-product-checkins-020:hsl(283, 22%, 75%);
159
- --t-fill-color-product-checkins-030:hsl(284, 22%, 64%);
160
- --t-fill-color-product-checkins-040:hsl(283, 22%, 55%);
161
- --t-fill-color-product-checkins-050:hsl(283, 22%, 48%);
162
- --t-fill-color-product-checkins-060:hsl(283, 27%, 42%);
163
- --t-fill-color-product-checkins-070:hsl(284, 33%, 34%);
164
- --t-fill-color-product-checkins-080:hsl(283, 33%, 27%);
165
- --t-fill-color-product-giving-010:hsl(41, 95%, 93%);
166
- --t-fill-color-product-giving-020:hsl(42, 95%, 83%);
167
- --t-fill-color-product-giving-030:hsl(43, 95%, 75%);
168
- --t-fill-color-product-giving-040:hsl(43, 88%, 70%);
169
- --t-fill-color-product-giving-050:hsl(43, 88%, 64%);
170
- --t-fill-color-product-giving-060:hsl(42, 84%, 55%);
171
- --t-fill-color-product-giving-070:hsl(42, 84%, 48%);
172
- --t-fill-color-product-giving-080:hsl(42, 100%, 40%);
173
- --t-fill-color-product-groups-010:hsl(18, 95%, 92%);
174
- --t-fill-color-product-groups-020:hsl(17, 96%, 80%);
175
- --t-fill-color-product-groups-030:hsl(17, 96%, 70%);
176
- --t-fill-color-product-groups-040:hsl(17, 96%, 63%);
177
- --t-fill-color-product-groups-050:hsl(17, 88%, 55%);
178
- --t-fill-color-product-groups-060:hsl(12, 70%, 48%);
179
- --t-fill-color-product-groups-070:hsl(12, 70%, 40%);
180
- --t-fill-color-product-groups-080:hsl(14, 70%, 34%);
181
- --t-fill-color-product-home-010:hsl(221, 89%, 93%);
182
- --t-fill-color-product-home-020:hsl(221, 91%, 91%);
183
- --t-fill-color-product-home-030:hsl(221, 91%, 87%);
184
- --t-fill-color-product-home-040:hsl(221, 91%, 62%);
185
- --t-fill-color-product-home-050:hsl(221, 91%, 55%);
186
- --t-fill-color-product-home-060:hsl(221, 90%, 50%);
187
- --t-fill-color-product-home-070:hsl(221, 90%, 45%);
188
- --t-fill-color-product-home-080:hsl(218, 84%, 25%);
189
- --t-fill-color-product-people-010:hsl(219, 73%, 91%);
190
- --t-fill-color-product-people-020:hsl(220, 69%, 81%);
191
- --t-fill-color-product-people-030:hsl(221, 73%, 71%);
192
- --t-fill-color-product-people-040:hsl(221, 73%, 65%);
193
- --t-fill-color-product-people-050:hsl(220, 74%, 57%);
194
- --t-fill-color-product-people-060:hsl(220, 68%, 51%);
195
- --t-fill-color-product-people-070:hsl(220, 68%, 41%);
196
- --t-fill-color-product-people-080:hsl(221, 68%, 31%);
197
- --t-fill-color-product-publishing-010:hsl(220, 4%, 86%);
198
- --t-fill-color-product-publishing-020:hsl(222, 10%, 60%);
199
- --t-fill-color-product-publishing-030:hsl(221, 11%, 50%);
200
- --t-fill-color-product-publishing-040:hsl(222, 12%, 39%);
201
- --t-fill-color-product-publishing-050:hsl(220, 12%, 31%);
202
- --t-fill-color-product-publishing-060:hsl(220, 11%, 26%);
203
- --t-fill-color-product-publishing-070:hsl(217, 12%, 22%);
204
- --t-fill-color-product-publishing-080:hsl(214, 11%, 12%);
205
- --t-fill-color-product-registrations-010:hsl(173, 28%, 89%);
206
- --t-fill-color-product-registrations-020:hsl(176, 38%, 78%);
207
- --t-fill-color-product-registrations-030:hsl(176, 37%, 68%);
208
- --t-fill-color-product-registrations-040:hsl(176, 37%, 60%);
209
- --t-fill-color-product-registrations-050:hsl(175, 36%, 43%);
210
- --t-fill-color-product-registrations-060:hsl(175, 51%, 34%);
211
- --t-fill-color-product-registrations-070:hsl(174, 51%, 28%);
212
- --t-fill-color-product-registrations-080:hsl(175, 52%, 22%);
213
- --t-fill-color-product-services-010:hsl(88, 31%, 88%);
214
- --t-fill-color-product-services-020:hsl(88, 39%, 75%);
215
- --t-fill-color-product-services-030:hsl(88, 39%, 66%);
216
- --t-fill-color-product-services-040:hsl(88, 40%, 54%);
217
- --t-fill-color-product-services-050:hsl(88, 45%, 41%);
218
- --t-fill-color-product-services-060:hsl(89, 62%, 31%);
219
- --t-fill-color-product-services-070:hsl(89, 62%, 26%);
220
- --t-fill-color-product-services-080:hsl(89, 63%, 21%);
221
- --t-fill-color-product-staff:hsl(328, 100%, 45%);
222
- --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
223
- --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
224
- --t-fill-color-product-accounts-gradient-brand:linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
225
- --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
226
- --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
227
- --t-fill-color-product-api-gradient-brand:linear-gradient(180deg, hsl(221, 100%, 62%), hsl(217, 100%, 52%));
228
- --t-fill-color-product-calendar-gradient-brand:linear-gradient(135deg, hsl(10, 88%, 58%), hsl(8, 60%, 51%));
229
- --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(5, 80%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
230
- --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(8, 100%, 94%), hsl(285, 18%, 91%), hsl(204, 67%, 92%));
231
- --t-fill-color-product-cc-gradient-brand:linear-gradient(135deg, hsl(207, 90%, 61%), hsl(123, 38%, 57%));
232
- --t-fill-color-product-checkins-gradient-brand:linear-gradient(135deg, hsl(283, 38%, 59%), hsl(284, 23%, 48%));
233
- --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(283, 21%, 77%) 25%, hsl(227, 36%, 78%) 60%, hsl(204, 67%, 73%));
234
- --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 22%, 93%), hsl(225, 35%, 93%) 42%, hsl(204, 67%, 92%));
235
- --t-fill-color-product-giving-gradient-brand:linear-gradient(90deg, hsl(46, 91%, 55%), hsl(41, 89%, 55%));
236
- --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(42, 84%, 80%), hsl(255, 21%, 89%) 58.5%, hsl(204, 67%, 73%));
237
- --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(42, 87%, 94%), hsl(260, 18%, 97%) 58.5%, hsl(204, 67%, 92%));
238
- --t-fill-color-product-groups-gradient-brand:linear-gradient(135deg, hsl(30, 100%, 59%), hsl(19, 97%, 60%));
239
- --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(17, 88%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
240
- --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(18, 87%, 94%), hsl(300, 12%, 92%), hsl(204, 67%, 92%));
241
- --t-fill-color-product-headcounts-gradient-brand:linear-gradient(135deg, hsl(283, 37%, 59%), hsl(285, 23%, 47%));
242
- --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
243
- --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
244
- --t-fill-color-product-musicstand-gradient-brand:linear-gradient(135deg, hsl(204, 64%, 51%), hsl(211, 55%, 51%));
245
- --t-fill-color-product-people-gradient-brand:linear-gradient(135deg, hsl(205, 86%, 57%), hsl(220, 76%, 57%));
246
- --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
247
- --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
248
- --t-fill-color-product-publishing-gradient-brand:linear-gradient(135deg, hsl(240, 4%, 49%), hsl(240, 6%, 39%));
249
- --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(217, 5%, 69%), hsl(214, 15%, 69%) 45%, hsl(204, 67%, 73%));
250
- --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(210, 4%, 91%), hsl(214, 15%, 91%) 45%, hsl(204, 67%, 92%));
251
- --t-fill-color-product-registrations-gradient-brand:linear-gradient(135deg, hsl(168, 46%, 48%), hsl(175, 35%, 43%));
252
- --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(175, 27%, 74%), hsl(196, 46%, 73%) 39.5%, hsl(204, 67%, 73%));
253
- --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(175, 28%, 92%), hsl(196, 46%, 92%) 39.5%, hsl(204, 67%, 92%));
254
- --t-fill-color-product-services-gradient-brand:linear-gradient(135deg, hsl(96, 49%, 47%), hsl(89, 52%, 39%));
255
- --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(89, 31%, 73%), hsl(122, 29%, 78%) 39.5%, hsl(204, 67%, 73%));
256
- --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(88, 32%, 92%), hsl(126, 29%, 93%) 39.5%, hsl(204, 67%, 92%));
257
- --t-fill-color-tag-gray-010:hsl(0, 0%, 93%);
258
- --t-fill-color-tag-gray-020:hsl(0, 0%, 88%);
259
- --t-fill-color-tag-gray-030:hsl(0, 0%, 88%);
260
- --t-fill-color-tag-gray-040:hsl(0, 0%, 81%);
261
- --t-fill-color-tag-blue-010:hsl(220, 100%, 95%);
262
- --t-fill-color-tag-blue-020:hsl(221, 100%, 88%);
263
- --t-fill-color-tag-blue-030:hsl(220, 98%, 81%);
264
- --t-fill-color-tag-blue-040:hsl(220, 98%, 74%);
265
- --t-fill-color-tag-aqua-010:hsl(200, 82%, 89%);
266
- --t-fill-color-tag-aqua-020:hsl(200, 82%, 82%);
267
- --t-fill-color-tag-aqua-030:hsl(201, 76%, 71%);
268
- --t-fill-color-tag-aqua-040:hsl(200, 75%, 64%);
269
- --t-fill-color-tag-teal-010:hsl(163, 53%, 83%);
270
- --t-fill-color-tag-teal-020:hsl(164, 52%, 76%);
271
- --t-fill-color-tag-teal-030:hsl(169, 62%, 64%);
272
- --t-fill-color-tag-teal-040:hsl(169, 62%, 56%);
273
- --t-fill-color-tag-green-010:hsl(98, 59%, 85%);
274
- --t-fill-color-tag-green-020:hsl(99, 59%, 78%);
275
- --t-fill-color-tag-green-030:hsl(112, 57%, 65%);
276
- --t-fill-color-tag-green-040:hsl(112, 57%, 57%);
277
- --t-fill-color-tag-yellow-010:hsl(45, 77%, 85%);
278
- --t-fill-color-tag-yellow-020:hsl(44, 78%, 77%);
279
- --t-fill-color-tag-yellow-030:hsl(44, 92%, 69%);
280
- --t-fill-color-tag-yellow-040:hsl(44, 93%, 61%);
281
- --t-fill-color-tag-orange-010:hsl(22, 89%, 89%);
282
- --t-fill-color-tag-orange-020:hsl(21, 89%, 82%);
283
- --t-fill-color-tag-orange-030:hsl(21, 86%, 72%);
284
- --t-fill-color-tag-orange-040:hsl(21, 86%, 64%);
285
- --t-fill-color-tag-pink-010:hsl(311, 66%, 92%);
286
- --t-fill-color-tag-pink-020:hsl(310, 64%, 85%);
287
- --t-fill-color-tag-pink-030:hsl(324, 78%, 77%);
288
- --t-fill-color-tag-pink-040:hsl(324, 76%, 70%);
289
- --t-fill-color-tag-purple-010:hsl(259, 74%, 93%);
290
- --t-fill-color-tag-purple-020:hsl(259, 74%, 85%);
291
- --t-fill-color-tag-purple-030:hsl(273, 62%, 76%);
292
- --t-fill-color-tag-purple-040:hsl(273, 62%, 70%);
293
- --t-fill-color-tag-magenta-010:hsl(294, 37%, 90%);
294
- --t-fill-color-tag-magenta-020:hsl(291, 40%, 83%);
295
- --t-fill-color-tag-magenta-030:hsl(291, 48%, 70%);
296
- --t-fill-color-tag-magenta-040:hsl(292, 48%, 63%);
297
- --t-fill-color-tag-indigo-010:hsl(234, 78%, 93%);
298
- --t-fill-color-tag-indigo-020:hsl(233, 79%, 87%);
299
- --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
300
- --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
301
- --t-fill-color-button-neutral-solid:hsl(0, 0%, 93%);
302
- --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
303
- --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
304
- --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 95%);
305
- --t-fill-color-button-neutral-outline:hsla(0, 0%, 100%, 0);
306
- --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 95%);
307
- --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 93%);
308
- --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 98%);
309
- --t-fill-color-button-neutral-ghost:hsla(0, 0%, 100%, 0);
310
- --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
311
- --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
312
- --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 100%, 0);
313
- --t-fill-color-button-neutral-responsive-header:hsla(0, 0%, 0%, 0.1);
314
- --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
315
- --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
316
- --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 0%, 0.05);
317
- --t-fill-color-button-interaction-solid:hsl(204, 100%, 40%);
318
- --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
319
- --t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
320
- --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 95%);
321
- --t-fill-color-button-interaction-outline:hsla(0, 0%, 100%, 0);
322
- --t-fill-color-button-interaction-outline-hover:hsl(204, 100%, 97%);
323
- --t-fill-color-button-interaction-outline-active:hsl(203, 94%, 94%);
324
- --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 98%);
325
- --t-fill-color-button-interaction-ghost:hsla(0, 0%, 100%, 0);
326
- --t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
327
- --t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
328
- --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 100%, 0);
329
- --t-fill-color-button-delete-solid:hsl(8, 60%, 47%);
330
- --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
331
- --t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
332
- --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 95%);
333
- --t-fill-color-button-delete-outline:hsla(0, 0%, 100%, 0);
334
- --t-fill-color-button-delete-outline-hover:hsl(7, 60%, 97%);
335
- --t-fill-color-button-delete-outline-active:hsl(9, 59%, 93%);
336
- --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 98%);
337
- --t-fill-color-button-delete-ghost:hsla(0, 0%, 100%, 0);
338
- --t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
339
- --t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
340
- --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
341
- --t-fill-color-button-pill:hsl(0, 0%, 93%);
342
- --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
343
- --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
344
- --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
345
- --t-fill-color-transparency-light-010:hsla(0, 0%, 100%, 0.1);
346
- --t-fill-color-transparency-light-020:hsla(0, 0%, 100%, 0.2);
347
- --t-fill-color-transparency-light-030:hsla(0, 0%, 100%, 0.3);
348
- --t-fill-color-transparency-light-040:hsla(0, 0%, 100%, 0.4);
349
- --t-fill-color-transparency-light-050:hsla(0, 0%, 100%, 0.5);
350
- --t-fill-color-transparency-light-060:hsla(0, 0%, 100%, 0.6);
351
- --t-fill-color-transparency-light-070:hsla(0, 0%, 100%, 0.7);
352
- --t-fill-color-transparency-light-080:hsla(0, 0%, 100%, 0.8);
353
- --t-fill-color-transparency-light-090:hsla(0, 0%, 100%, 0.9);
354
- --t-fill-color-transparency-dark-010:hsla(0, 0%, 0%, 0.1);
355
- --t-fill-color-transparency-dark-020:hsla(0, 0%, 0%, 0.2);
356
- --t-fill-color-transparency-dark-030:hsla(0, 0%, 0%, 0.3);
357
- --t-fill-color-transparency-dark-040:hsla(0, 0%, 0%, 0.4);
358
- --t-fill-color-transparency-dark-050:hsla(0, 0%, 0%, 0.5);
359
- --t-fill-color-transparency-dark-060:hsla(0, 0%, 0%, 0.6);
360
- --t-fill-color-transparency-dark-070:hsla(0, 0%, 0%, 0.7);
361
- --t-fill-color-transparency-dark-080:hsla(0, 0%, 0%, 0.8);
362
- --t-fill-color-transparency-dark-090:hsla(0, 0%, 0%, 0.9);
363
- --t-fill-color-transparency-dark-static-010:hsla(0, 0%, 0%, 0.1);
364
- --t-fill-color-transparency-dark-static-020:hsla(0, 0%, 0%, 0.2);
365
- --t-fill-color-transparency-dark-static-030:hsla(0, 0%, 0%, 0.3);
366
- --t-fill-color-transparency-dark-static-040:hsla(0, 0%, 0%, 0.4);
367
- --t-fill-color-transparency-dark-static-050:hsla(0, 0%, 0%, 0.5);
368
- --t-fill-color-transparency-dark-static-060:hsla(0, 0%, 0%, 0.6);
369
- --t-fill-color-transparency-dark-static-070:hsla(0, 0%, 0%, 0.7);
370
- --t-fill-color-transparency-dark-static-080:hsla(0, 0%, 0%, 0.8);
371
- --t-fill-color-transparency-dark-static-090:hsla(0, 0%, 0%, 0.9);
372
- --t-surface-color-card:hsl(0, 0%, 100%);
373
- --t-surface-color-canvas:hsl(0, 0%, 100%);
374
- --t-border-color:hsl(0, 0%, 88%);
375
- --t-border-color-dark:hsl(0, 0%, 81%);
376
- --t-border-color-darker:hsl(0, 0%, 68%);
377
- --t-border-color-darkest:hsl(0, 0%, 58%);
378
- --t-border-color-disabled:hsl(0, 0%, 88%);
379
- --t-border-color-dim:hsl(0, 0%, 95%);
380
- --t-border-color-white:hsl(0, 0%, 100%);
381
- --t-border-color-status-neutral:hsl(0, 0%, 58%);
382
- --t-border-color-status-info:hsl(204, 100%, 40%);
383
- --t-border-color-status-success:hsl(97, 57%, 40%);
384
- --t-border-color-status-warning:hsl(42, 84%, 63%);
385
- --t-border-color-status-error:hsl(8, 60%, 47%);
386
- --t-border-color-button-neutral:hsl(0, 0%, 88%);
387
- --t-border-color-button-info:hsl(204, 100%, 40%);
388
- --t-border-color-button-create:hsl(96, 57%, 33%);
389
- --t-border-color-button-delete:hsl(8, 60%, 47%);
390
- --t-border-color-control-neutral:hsl(0, 0%, 68%);
391
- --t-border-color-control-info:hsl(204, 100%, 40%);
392
- --t-border-color-control-success:hsl(97, 57%, 40%);
393
- --t-border-color-control-warning:hsl(42, 84%, 63%);
394
- --t-border-color-control-error:hsl(8, 60%, 47%);
395
- --t-border-color-control-disabled:hsl(0, 0%, 88%);
396
- --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.07);
397
- --t-form-background-color:var(--t-fill-color-neutral-100);
398
- --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
399
- --t-form-background-color-error:var(--t-fill-color-neutral-100);
400
- --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
401
- --t-form-border-color:var(--t-border-color);
402
- --t-form-border-color-disabled:var(--t-border-color);
403
- --t-form-border-color-error:var(--t-border-color-status-error);
404
- --t-form-border-color-focus:var(--t-fill-color-interaction);
405
- --t-form-border-color-hover:var(--t-border-color-dark);
406
- --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
407
- --t-form-border-radius:var(--t-border-radius-md);
408
- --t-form-border-width:var(--t-border-width);
409
- --t-form-font-color:var(--t-text-color);
410
- --t-form-font-color-disabled:var(--t-text-color-disabled);
411
- --t-form-font-color-error:var(--t-text-color-status-error);
412
- --t-form-font-color-readonly:var(--t-text-color);
413
- --t-form-picker-icon-color:var(--t-icon-color);
414
- --t-form-placeholder-color:var(--t-text-color-placeholder);
415
- }
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"]{
3
+ :root[data-color-mode="dark"]{
642
4
  color-scheme:dark;
643
5
  --t-text-color-headline:hsl(0, 0%, 94%);
644
6
  --t-text-color:hsl(0, 0%, 80%);
@@ -828,414 +190,781 @@
828
190
  --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
829
191
  --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
830
192
  --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
- --t-border-color-default-base:var(--t-border-color);
903
- --t-border-color-default-dark:var(--t-border-color-dark);
904
- --t-border-color-default-darker:var(--t-border-color-darker);
905
- --t-border-color-default-darkest:var(--t-border-color-darkest);
906
- --t-border-color-default-dim:var(--t-border-color-dim);
907
- --t-border-color-default-disabled:var(--t-border-color-disabled);
908
- --t-border-color-default-white:var(--t-border-color-white);
909
- --t-border-radius-default:var(--t-border-radius);
910
- --t-border-width-default:var(--t-border-width);
911
- --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
912
- --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
913
- --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
914
- --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
915
- --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
916
- --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
917
- --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
918
- --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
919
- --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
920
- --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
921
- --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
922
- --t-fill-color-control-primary:var(--t-fill-color-control);
923
- --t-fill-color-interaction-default:var(--t-fill-color-interaction);
924
- --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
925
- --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
926
- --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
927
- --t-icon-color-default-dim:var(--t-icon-color-dim);
928
- --t-icon-color-default-disabled:var(--t-icon-color-disabled);
929
- --t-icon-color-default-inverted:var(--t-icon-color-inverted);
930
- --t-icon-color-default-primary:var(--t-icon-color);
931
- --t-icon-color-default-secondary:var(--t-icon-color-secondary);
932
- --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
933
- --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
934
- --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
935
- --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
936
- --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
937
- --t-text-color-default-disabled:var(--t-text-color-disabled);
938
- --t-text-color-default-headline:var(--t-text-color-headline);
939
- --t-text-color-default-inverted:var(--t-text-color-inverted);
940
- --t-text-color-default-placeholder:var(--t-text-color-placeholder);
941
- --t-text-color-default-primary:var(--t-text-color);
942
- --t-text-color-default-secondary:var(--t-text-color-secondary);
943
- --t-text-color-interaction-primary:var(--t-text-color-interaction);
944
- }
945
-
946
- :root[data-color-mode="dark"]{
947
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
948
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
949
- --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
950
- --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
951
- --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
952
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
953
- --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
954
- --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
193
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
194
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
195
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
196
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
197
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
198
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
199
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
200
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
201
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
202
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
203
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
204
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
205
+ --t-surface-color-card:hsl(0, 0%, 12%);
206
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
207
+ --t-border-color:hsl(0, 0%, 21%);
208
+ --t-border-color-dark:hsl(0, 0%, 25%);
209
+ --t-border-color-darker:hsl(0, 0%, 33%);
210
+ --t-border-color-darkest:hsl(0, 0%, 38%);
211
+ --t-border-color-disabled:hsl(0, 0%, 21%);
212
+ --t-border-color-dim:hsl(0, 0%, 16%);
213
+ --t-border-color-white:hsl(0, 0%, 12%);
214
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
215
+ --t-border-color-status-info:hsl(204, 100%, 35%);
216
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
217
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
218
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
219
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
220
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
221
+ --t-border-color-control-info:hsl(204, 100%, 35%);
222
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
223
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
955
224
  }
956
225
 
957
226
  @media (prefers-color-scheme: dark){
958
227
  :root[data-color-mode="system"]{
959
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
960
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
961
- --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
962
- --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
963
- --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
964
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
965
- --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
966
- --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
967
- }
968
- }
969
-
970
- @layer t-critical{
971
- tds-page-header:not(.hydrated){
972
- display:none;
973
- }
974
- }
975
-
976
- @layer t-component{
977
- .tds-page-header{
978
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
979
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
980
- --tds-page-header-color:var(--t-text-color-default-primary);
981
- --tds-page-header-headline-color:var(--t-text-color-default-headline);
982
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
983
- --tds-page-header-padding-x:var(--t-spacing-2);
984
- --tds-page-header-padding-y:var(--t-spacing-2);
985
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
986
- --tds-page-header-nav-gap:var(--t-spacing-1);
987
- --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
988
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
989
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
990
- --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
991
- --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
992
- --tds-page-header-nav-item-border-width:1px;
993
-
994
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
995
- --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
996
-
997
- --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
998
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
999
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1000
-
1001
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
1002
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
1003
-
1004
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
1005
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1006
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1007
-
1008
- --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
1009
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1010
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1011
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1012
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
1013
- }
1014
-
1015
- .tds-page-header--profile{
1016
- --tds-page-header-padding-y:20px;
1017
- }
1018
- @media (min-width: 600px){
1019
- .tds-page-header{
1020
- --tds-page-header-background-color:var(--t-surface-color-canvas);
1021
- --tds-page-header-color:var(--t-text-color-default-secondary);
1022
- --tds-page-header-padding-x:var(--t-spacing-3);
1023
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1024
- --tds-page-header-nav-gap:var(--t-spacing-half);
1025
- --tds-page-header-nav-background:transparent;
1026
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1027
- --tds-page-header-nav-item-border-width:1px;
1028
- --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
1029
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1030
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
1031
- }
1032
- }
1033
- }
1034
-
1035
- .tds-page-header{
1036
- display:flex;
1037
- flex-direction:column;
1038
- padding-top:var(--tds-page-header-padding-y);
1039
- color:var(--tds-page-header-color);
1040
- background:var(--tds-page-header-background-color);
1041
- border-bottom:1px solid var(--t-border-color-default-base);
1042
- }
1043
-
1044
- .tds-page-header:not(.has-nav){
1045
- padding-bottom:var(--tds-page-header-padding-y);
1046
- }
1047
-
1048
- .tds-page-header.inactive{
1049
- background:var(--tds-page-header-background-color-inactive);
1050
- }
1051
-
1052
- .tds-page-header__title-bar{
1053
- display:flex;
1054
- flex-direction:column;
1055
- gap:var(--t-spacing-2) var(--t-spacing-1);
1056
- align-items:flex-start;
1057
- justify-content:space-between;
1058
- padding:0 var(--tds-page-header-padding-x);
1059
- }
1060
-
1061
- .tds-page-header--profile > .tds-page-header__title-bar{
1062
- align-items:center;
1063
- }
1064
-
1065
- .tds-page-header__primary{
1066
- width:100%;
1067
- }
1068
-
1069
- .tds-page-header__primary h1{
1070
- margin:0;
1071
- font-size:var(--tds-page-header-headline-font-size);
1072
- font-weight:var(--t-font-weight-normal);
1073
- line-height:32px;
1074
- color:var(--tds-page-header-headline-color);
1075
- overflow-wrap:break-word;
1076
- }
1077
-
1078
- .tds-page-header [slot="actions"]{
1079
- width:100%;
1080
- }
1081
-
1082
- .has-multi-actions.tds-page-header [slot="actions"],
1083
- .has-multi-actions.tds-page-header .tds-page-header__actions{
1084
- display:flex;
1085
- flex-flow:row wrap;
1086
- gap:var(--t-spacing-half) var(--t-spacing-1);
1087
- align-items:flex-start;
1088
- justify-content:flex-start;
1089
- min-width:0;
1090
- }
1091
-
1092
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
1093
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
1094
- .tds-page-header nav[slot="navigation"] ul,
1095
- .tds-page-header nav.tds-page-header__nav ul{
1096
- display:flex;
1097
- gap:var(--tds-page-header-nav-gap);
1098
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1099
- margin:0 0 -1px;
1100
- overflow:auto;
1101
- list-style:none;
1102
- background:var(--tds-page-header-nav-background);
1103
- }
1104
-
1105
- .tds-page-header nav[slot="navigation"] a,
1106
- .tds-page-header nav[slot="navigation"] button,
1107
- .tds-page-header nav.tds-page-header__nav a,
1108
- .tds-page-header nav.tds-page-header__nav button{
1109
- position:relative;
1110
- display:inline-flex;
1111
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1112
- font-size:var(--t-font-size-sm);
1113
- line-height:22px;
1114
- color:var(--tds-page-header-nav-item-color);
1115
- white-space:nowrap;
1116
- text-decoration:none;
1117
- -webkit-appearance:none;
1118
- -moz-appearance:none;
1119
- appearance:none;
1120
- cursor:pointer;
1121
- outline-offset:-2px;
1122
- background-color:var(--tds-page-header-nav-item-background-color);
1123
- background-clip:padding-box;
1124
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1125
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1126
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1127
- }
1128
-
1129
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
1130
- position:relative;
1131
- }
1132
-
1133
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
1134
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1135
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1136
- }
1137
-
1138
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
1139
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1140
- position:absolute;
1141
- top:-5px;
1142
- right:-2px;
1143
- width:10px;
1144
- height:10px;
1145
- content:"";
1146
- background:var(--tds-page-header-nav-item-indicator-color);
1147
- border-radius:50%;
1148
- }
1149
-
1150
- @media (prefers-reduced-motion: no-preference){
1151
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1152
- animation:indicator-pulse 1.25s ease infinite;
1153
- }
1154
- }
1155
-
1156
- .tds-page-header nav[slot="navigation"] a.selected,
1157
- .tds-page-header nav[slot="navigation"] button.selected,
1158
- .tds-page-header nav.tds-page-header__nav a.selected,
1159
- .tds-page-header nav.tds-page-header__nav button.selected{
1160
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1161
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1162
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1163
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1164
- }
1165
-
1166
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
1167
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
1168
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
1169
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
1170
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1171
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1172
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
228
+ color-scheme:dark;
229
+ --t-text-color-headline:hsl(0, 0%, 94%);
230
+ --t-text-color:hsl(0, 0%, 80%);
231
+ --t-text-color-secondary:hsl(0, 0%, 54%);
232
+ --t-text-color-disabled:hsl(0, 0%, 25%);
233
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
234
+ --t-text-color-interaction:hsl(204, 68%, 55%);
235
+ --t-text-color-interaction-hover:hsl(204, 68%, 50%);
236
+ --t-text-color-interaction-active:hsl(204, 68%, 45%);
237
+ --t-text-color-interaction-visited:hsl(204, 68%, 50%);
238
+ --t-text-color-status-neutral:hsl(0, 0%, 80%);
239
+ --t-text-color-status-info:hsl(204, 68%, 55%);
240
+ --t-text-color-status-success:hsl(97, 57%, 41%);
241
+ --t-text-color-status-warning:hsl(42, 84%, 55%);
242
+ --t-text-color-status-error:hsl(8, 61%, 61%);
243
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 80%);
244
+ --t-text-color-tag-subtle-blue:hsl(223, 46%, 84%);
245
+ --t-text-color-tag-subtle-indigo:hsl(233, 78%, 84%);
246
+ --t-text-color-tag-subtle-aqua:hsl(208, 77%, 85%);
247
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 74%);
248
+ --t-text-color-tag-subtle-green:hsl(99, 93%, 84%);
249
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 85%);
250
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 85%);
251
+ --t-text-color-tag-subtle-pink:hsl(328, 89%, 89%);
252
+ --t-text-color-tag-subtle-purple:hsl(268, 70%, 88%);
253
+ --t-text-color-tag-subtle-magenta:hsl(285, 70%, 88%);
254
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 100%);
255
+ --t-text-color-tag-bold-indigo:hsl(0, 0%, 100%);
256
+ --t-text-color-tag-bold-blue:hsl(0, 0%, 100%);
257
+ --t-text-color-tag-bold-aqua:hsl(0, 0%, 100%);
258
+ --t-text-color-tag-bold-teal:hsl(0, 0%, 100%);
259
+ --t-text-color-tag-bold-green:hsl(0, 0%, 100%);
260
+ --t-text-color-tag-bold-yellow:hsl(0, 0%, 100%);
261
+ --t-text-color-tag-bold-orange:hsl(0, 0%, 100%);
262
+ --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
263
+ --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
264
+ --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
265
+ --t-icon-color:hsl(0, 0%, 80%);
266
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
267
+ --t-icon-color-dim:hsl(0, 0%, 38%);
268
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
269
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
270
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
271
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
272
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
273
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
274
+ --t-fill-color-neutral-100:hsl(0, 0%, 10%);
275
+ --t-fill-color-neutral-000:hsl(0, 0%, 98%);
276
+ --t-fill-color-neutral-010:hsl(0, 0%, 88%);
277
+ --t-fill-color-neutral-020:hsl(0, 0%, 68%);
278
+ --t-fill-color-neutral-025:hsl(0, 0%, 58%);
279
+ --t-fill-color-neutral-030:hsl(0, 0%, 50%);
280
+ --t-fill-color-neutral-040:hsl(0, 0%, 32%);
281
+ --t-fill-color-neutral-050:hsl(0, 0%, 24%);
282
+ --t-fill-color-neutral-060:hsl(0, 0%, 19%);
283
+ --t-fill-color-neutral-070:hsl(0, 0%, 17%);
284
+ --t-fill-color-neutral-080:hsl(0, 0%, 15%);
285
+ --t-fill-color-neutral-090:hsl(0, 0%, 12%);
286
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
287
+ --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
288
+ --t-fill-color-interaction-active:hsl(204, 80%, 45%);
289
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
290
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
291
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
292
+ --t-fill-color-control:hsl(204, 100%, 35%);
293
+ --t-fill-color-control-disabled:hsl(0, 0%, 20%);
294
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
295
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
296
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
297
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
298
+ --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
299
+ --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
300
+ --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
301
+ --t-fill-color-status-success-dim:hsl(120, 12%, 14%);
302
+ --t-fill-color-status-warning-ghost:hsl(41, 18%, 17%);
303
+ --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
304
+ --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
305
+ --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
306
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
307
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
308
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
309
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
310
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(9, 29%, 13%), hsl(276, 8%, 12%), hsl(203, 37%, 11%));
311
+ --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%));
312
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 11%, 14%), hsl(266, 10%, 14%) 42%, hsl(203, 37%, 11%));
313
+ --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%));
314
+ --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%));
315
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(23, 46%, 18%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
316
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(23, 29%, 14%), hsl(276, 7%, 14%), hsl(203, 37%, 11%));
317
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
318
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
319
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
320
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
321
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(225, 11%, 22%), hsl(227, 20%, 18%) 45%, hsl(204, 70%, 12%));
322
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(220, 7%, 16%), hsl(227, 12%, 14%) 45%, hsl(203, 37%, 11%));
323
+ --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%));
324
+ --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%));
325
+ --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%));
326
+ --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%));
327
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 20%);
328
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 24%);
329
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 36%);
330
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 42%);
331
+ --t-fill-color-tag-blue-010:hsl(219, 26%, 24%);
332
+ --t-fill-color-tag-blue-020:hsl(220, 28%, 29%);
333
+ --t-fill-color-tag-blue-030:hsl(219, 32%, 45%);
334
+ --t-fill-color-tag-blue-040:hsl(220, 35%, 52%);
335
+ --t-fill-color-tag-aqua-010:hsl(200, 30%, 21%);
336
+ --t-fill-color-tag-aqua-020:hsl(200, 33%, 26%);
337
+ --t-fill-color-tag-aqua-030:hsl(200, 39%, 38%);
338
+ --t-fill-color-tag-aqua-040:hsl(200, 39%, 43%);
339
+ --t-fill-color-tag-teal-010:hsl(169, 33%, 19%);
340
+ --t-fill-color-tag-teal-020:hsl(169, 37%, 22%);
341
+ --t-fill-color-tag-teal-030:hsl(169, 43%, 31%);
342
+ --t-fill-color-tag-teal-040:hsl(169, 44%, 35%);
343
+ --t-fill-color-tag-green-010:hsl(110, 30%, 20%);
344
+ --t-fill-color-tag-green-020:hsl(112, 33%, 23%);
345
+ --t-fill-color-tag-green-030:hsl(112, 37%, 33%);
346
+ --t-fill-color-tag-green-040:hsl(112, 39%, 37%);
347
+ --t-fill-color-tag-yellow-010:hsl(44, 39%, 19%);
348
+ --t-fill-color-tag-yellow-020:hsl(44, 44%, 22%);
349
+ --t-fill-color-tag-yellow-030:hsl(44, 50%, 31%);
350
+ --t-fill-color-tag-yellow-040:hsl(44, 53%, 36%);
351
+ --t-fill-color-tag-orange-010:hsl(21, 35%, 22%);
352
+ --t-fill-color-tag-orange-020:hsl(20, 38%, 26%);
353
+ --t-fill-color-tag-orange-030:hsl(21, 44%, 40%);
354
+ --t-fill-color-tag-orange-040:hsl(21, 46%, 45%);
355
+ --t-fill-color-tag-pink-010:hsl(331, 22%, 24%);
356
+ --t-fill-color-tag-pink-020:hsl(324, 26%, 26%);
357
+ --t-fill-color-tag-pink-030:hsl(324, 30%, 45%);
358
+ --t-fill-color-tag-pink-040:hsl(324, 33%, 51%);
359
+ --t-fill-color-tag-purple-010:hsl(274, 20%, 23%);
360
+ --t-fill-color-tag-purple-020:hsl(274, 21%, 28%);
361
+ --t-fill-color-tag-purple-030:hsl(274, 25%, 46%);
362
+ --t-fill-color-tag-purple-040:hsl(274, 28%, 53%);
363
+ --t-fill-color-tag-magenta-010:hsl(292, 20%, 21%);
364
+ --t-fill-color-tag-magenta-020:hsl(292, 22%, 26%);
365
+ --t-fill-color-tag-magenta-030:hsl(293, 26%, 42%);
366
+ --t-fill-color-tag-magenta-040:hsl(292, 27%, 48%);
367
+ --t-fill-color-tag-indigo-010:hsl(235, 21%, 24%);
368
+ --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
369
+ --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
370
+ --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
371
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
372
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
373
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
374
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
375
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
376
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
377
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
378
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
379
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
380
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
381
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
382
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
383
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
384
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
385
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
386
+ --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
387
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
388
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
389
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
390
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
391
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
392
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
393
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
394
+ --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
395
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
396
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
397
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
398
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
399
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
400
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
401
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
402
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
403
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
404
+ --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
405
+ --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
406
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
407
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
408
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
409
+ --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
410
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
411
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 0%, 0.1);
412
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 0%, 0.2);
413
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 0%, 0.3);
414
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 0%, 0.4);
415
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 0%, 0.5);
416
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 0%, 0.6);
417
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 0%, 0.7);
418
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 0%, 0.8);
419
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 0%, 0.9);
420
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 100%, 0.1);
421
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 100%, 0.2);
422
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 100%, 0.3);
423
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 100%, 0.4);
424
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 100%, 0.5);
425
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 100%, 0.6);
426
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 100%, 0.7);
427
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 100%, 0.8);
428
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
429
+ --t-surface-color-card:hsl(0, 0%, 12%);
430
+ --t-surface-color-canvas:hsl(0, 0%, 10%);
431
+ --t-border-color:hsl(0, 0%, 21%);
432
+ --t-border-color-dark:hsl(0, 0%, 25%);
433
+ --t-border-color-darker:hsl(0, 0%, 33%);
434
+ --t-border-color-darkest:hsl(0, 0%, 38%);
435
+ --t-border-color-disabled:hsl(0, 0%, 21%);
436
+ --t-border-color-dim:hsl(0, 0%, 16%);
437
+ --t-border-color-white:hsl(0, 0%, 12%);
438
+ --t-border-color-status-neutral:hsl(0, 0%, 38%);
439
+ --t-border-color-status-info:hsl(204, 100%, 35%);
440
+ --t-border-color-button-neutral:hsl(0, 0%, 19%);
441
+ --t-border-color-button-info:hsla(204, 100%, 40%, 0.25);
442
+ --t-border-color-button-create:hsla(96, 57%, 33%, 0.25);
443
+ --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
444
+ --t-border-color-control-neutral:hsl(0, 0%, 33%);
445
+ --t-border-color-control-info:hsl(204, 100%, 35%);
446
+ --t-border-color-control-disabled:hsl(0, 0%, 21%);
447
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
1173
448
  }
1174
-
1175
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
1176
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
1177
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
1178
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
1179
- background-color:var(--tds-page-header-nav-item-background-color-active);
1180
449
  }
1181
450
 
1182
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
1183
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
1184
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
1185
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
1186
- color:var(--tds-page-header-nav-item-color-disabled);
1187
- cursor:not-allowed;
1188
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
1189
- opacity:1;
451
+ :root{
452
+ --t-border-size-default:var(--t-border-width);
453
+ --t-border-size-thick:var(--t-border-width-thick);
454
+ --t-font-weight-semi-bold:var(--t-font-weight-semibold);
455
+ --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
456
+ --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
457
+ --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
458
+ --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
459
+ --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
460
+ --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
461
+ --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
462
+ --t-fill-color-alert-info:hsl(204, 94%, 49%);
463
+ --t-fill-color-alert-success:hsl(122, 60%, 41%);
464
+ --t-fill-color-alert-warning:hsl(43, 96%, 58%);
465
+ --t-fill-color-alert-error:hsl(4, 77%, 59%);
466
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
467
+ --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
468
+ --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
469
+ --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
470
+ --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
471
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
472
+ --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
473
+ --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
474
+ --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
475
+ --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
476
+ --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
477
+ --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
478
+ --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
479
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
480
+ --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
481
+ --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
482
+ --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
483
+ --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
484
+ --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
485
+ --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
486
+ --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
487
+ --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
488
+ --t-border-color-default-base:var(--t-border-color);
489
+ --t-border-color-default-dark:var(--t-border-color-dark);
490
+ --t-border-color-default-darker:var(--t-border-color-darker);
491
+ --t-border-color-default-darkest:var(--t-border-color-darkest);
492
+ --t-border-color-default-dim:var(--t-border-color-dim);
493
+ --t-border-color-default-disabled:var(--t-border-color-disabled);
494
+ --t-border-color-default-white:var(--t-border-color-white);
495
+ --t-border-radius-default:var(--t-border-radius);
496
+ --t-border-width-default:var(--t-border-width);
497
+ --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
498
+ --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
499
+ --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
500
+ --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
501
+ --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
502
+ --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
503
+ --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
504
+ --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
505
+ --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
506
+ --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
507
+ --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
508
+ --t-fill-color-control-primary:var(--t-fill-color-control);
509
+ --t-fill-color-interaction-default:var(--t-fill-color-interaction);
510
+ --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
511
+ --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
512
+ --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
513
+ --t-icon-color-default-dim:var(--t-icon-color-dim);
514
+ --t-icon-color-default-disabled:var(--t-icon-color-disabled);
515
+ --t-icon-color-default-inverted:var(--t-icon-color-inverted);
516
+ --t-icon-color-default-primary:var(--t-icon-color);
517
+ --t-icon-color-default-secondary:var(--t-icon-color-secondary);
518
+ --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
519
+ --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
520
+ --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
521
+ --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
522
+ --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
523
+ --t-text-color-default-disabled:var(--t-text-color-disabled);
524
+ --t-text-color-default-headline:var(--t-text-color-headline);
525
+ --t-text-color-default-inverted:var(--t-text-color-inverted);
526
+ --t-text-color-default-placeholder:var(--t-text-color-placeholder);
527
+ --t-text-color-default-primary:var(--t-text-color);
528
+ --t-text-color-default-secondary:var(--t-text-color-secondary);
529
+ --t-text-color-interaction-primary:var(--t-text-color-interaction);
1190
530
  }
1191
531
 
1192
- @media (min-width: 960px){
1193
- .tds-page-header__primary{
1194
- flex:1 1 max-content;
1195
- width:auto;
1196
- min-width:0;
1197
- max-width:100%;
1198
- }
1199
-
1200
- .tds-page-header__title-bar,
1201
- .tds-page-header--profile .tds-page-header__title-bar{
1202
- flex-flow:row nowrap;
1203
- row-gap:12px;
1204
- align-items:flex-start;
1205
- }
1206
-
1207
- .tds-page-header [slot="actions"]{
1208
- width:auto;
1209
- }
1210
-
1211
- .has-multi-actions.tds-page-header [slot="actions"],
1212
- .has-multi-actions.tds-page-header .tds-page-header__actions{
1213
- justify-content:flex-end;
1214
- }
532
+ @media (prefers-color-scheme: dark){
533
+ :root[data-color-mode="system"]{
534
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
535
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
536
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
537
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
538
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
539
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
540
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
541
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
1215
542
  }
1216
-
1217
- .tds-page-header-phone,
1218
- .tds-page-header-email{
1219
- color:var(--tds-page-header-color);
1220
- white-space:nowrap;
1221
543
  }
1222
544
 
1223
- .tds-page-header-email{
1224
- max-width:100%;
1225
- overflow:hidden;
1226
- text-overflow:ellipsis;
545
+ :root[data-color-mode="dark"]{
546
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
547
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
548
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
549
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
550
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
551
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
552
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
553
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
1227
554
  }
1228
555
 
1229
- @keyframes indicator-pulse{
1230
- 0%{
1231
- opacity:.3;
1232
- transform:scale(.9);
1233
- }
1234
-
1235
- 100%{
1236
- opacity:0;
1237
- transform:scale(1.75);
1238
- }
556
+ :root{
557
+ --t-border-radius-sm:2px;
558
+ --t-border-radius-md:4px;
559
+ --t-border-radius-lg:8px;
560
+ --t-border-radius-xl:16px;
561
+ --t-border-radius-round:56px;
562
+ --t-border-radius:4px;
563
+ --t-border-width:1px;
564
+ --t-border-width-thick:2px;
565
+ --t-spacing-1:8px;
566
+ --t-spacing-2:16px;
567
+ --t-spacing-3:24px;
568
+ --t-spacing-4:32px;
569
+ --t-spacing-5:40px;
570
+ --t-spacing-6:48px;
571
+ --t-spacing-7:56px;
572
+ --t-spacing-fourth:2px;
573
+ --t-spacing-half:4px;
574
+ --t-spacing-1-half:12px;
575
+ --t-element-size-3xl:48px;
576
+ --t-element-size-2xl:32px;
577
+ --t-element-size-xl:24px;
578
+ --t-element-size-lg:18px;
579
+ --t-element-size-md:16px;
580
+ --t-element-size-sm:14px;
581
+ --t-element-size-xs:12px;
582
+ --t-font-size-4xl:32px;
583
+ --t-font-size-3xl:28px;
584
+ --t-font-size-2xl:24px;
585
+ --t-font-size-xl:20px;
586
+ --t-font-size-lg:18px;
587
+ --t-font-size-md:16px;
588
+ --t-font-size-sm:14px;
589
+ --t-font-size-xs:12px;
590
+ --t-font-size-2xs:10px;
591
+ --t-font-weight-normal:400;
592
+ --t-font-weight-medium:500;
593
+ --t-font-weight-semibold:600;
594
+ --t-font-weight-bold:700;
595
+ --t-container-size-xl:48px;
596
+ --t-container-size-lg:40px;
597
+ --t-container-size-md:32px;
598
+ --t-container-size-sm:24px;
599
+ --t-container-size-xs:20px;
600
+ --t-avatar-size-20:20px;
601
+ --t-avatar-size-24:24px;
602
+ --t-avatar-size-36:36px;
603
+ --t-avatar-size-48:48px;
604
+ --t-avatar-size-72:72px;
605
+ --t-avatar-size-112:112px;
606
+ --t-text-color-headline:hsl(0, 0%, 12%);
607
+ --t-text-color:hsl(0, 0%, 24%);
608
+ --t-text-color-secondary:hsl(0, 0%, 42%);
609
+ --t-text-color-disabled:hsl(0, 0%, 81%);
610
+ --t-text-color-placeholder:hsl(0, 0%, 58%);
611
+ --t-text-color-inverted:hsl(0, 0%, 100%);
612
+ --t-text-color-interaction:hsl(204, 100%, 40%);
613
+ --t-text-color-interaction-hover:hsl(204, 100%, 35%);
614
+ --t-text-color-interaction-active:hsl(204, 100%, 30%);
615
+ --t-text-color-interaction-visited:hsl(204, 100%, 30%);
616
+ --t-text-color-status-neutral:hsl(0, 0%, 24%);
617
+ --t-text-color-status-info:hsl(204, 100%, 35%);
618
+ --t-text-color-status-success:hsl(97, 57%, 28%);
619
+ --t-text-color-status-warning:hsl(42, 100%, 29%);
620
+ --t-text-color-status-error:hsl(8, 60%, 45%);
621
+ --t-text-color-tag-subtle-gray:hsl(0, 0%, 24%);
622
+ --t-text-color-tag-subtle-blue:hsl(224, 47%, 31%);
623
+ --t-text-color-tag-subtle-indigo:hsl(241, 59%, 28%);
624
+ --t-text-color-tag-subtle-aqua:hsl(209, 77%, 22%);
625
+ --t-text-color-tag-subtle-teal:hsl(180, 95%, 15%);
626
+ --t-text-color-tag-subtle-green:hsl(100, 93%, 17%);
627
+ --t-text-color-tag-subtle-yellow:hsl(29, 100%, 23%);
628
+ --t-text-color-tag-subtle-orange:hsl(18, 100%, 18%);
629
+ --t-text-color-tag-subtle-pink:hsl(327, 88%, 20%);
630
+ --t-text-color-tag-subtle-purple:hsl(268, 71%, 27%);
631
+ --t-text-color-tag-subtle-magenta:hsl(285, 71%, 20%);
632
+ --t-text-color-tag-bold-gray:hsl(0, 0%, 24%);
633
+ --t-text-color-tag-bold-indigo:hsl(241, 59%, 28%);
634
+ --t-text-color-tag-bold-blue:hsl(224, 47%, 31%);
635
+ --t-text-color-tag-bold-aqua:hsl(209, 77%, 22%);
636
+ --t-text-color-tag-bold-teal:hsl(180, 95%, 15%);
637
+ --t-text-color-tag-bold-green:hsl(100, 93%, 17%);
638
+ --t-text-color-tag-bold-yellow:hsl(29, 100%, 23%);
639
+ --t-text-color-tag-bold-orange:hsl(18, 100%, 18%);
640
+ --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
641
+ --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
642
+ --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
643
+ --t-icon-color:hsl(0, 0%, 24%);
644
+ --t-icon-color-secondary:hsl(0, 0%, 42%);
645
+ --t-icon-color-dim:hsl(0, 0%, 58%);
646
+ --t-icon-color-disabled:hsl(0, 0%, 81%);
647
+ --t-icon-color-inverted:hsl(0, 0%, 100%);
648
+ --t-icon-color-status-neutral:hsl(0, 0%, 42%);
649
+ --t-icon-color-status-neutral-secondary:hsl(0, 0%, 58%);
650
+ --t-icon-color-status-neutral-bold:hsl(0, 0%, 24%);
651
+ --t-icon-color-status-info:hsl(204, 100%, 40%);
652
+ --t-icon-color-status-success:hsl(96, 57%, 33%);
653
+ --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
654
+ --t-icon-color-status-warning:hsl(42, 84%, 49%);
655
+ --t-icon-color-status-error:hsl(8, 60%, 47%);
656
+ --t-fill-color-neutral-100:hsl(0, 0%, 100%);
657
+ --t-fill-color-neutral-000:hsl(0, 0%, 12%);
658
+ --t-fill-color-neutral-010:hsl(0, 0%, 24%);
659
+ --t-fill-color-neutral-020:hsl(0, 0%, 42%);
660
+ --t-fill-color-neutral-025:hsl(0, 0%, 50%);
661
+ --t-fill-color-neutral-030:hsl(0, 0%, 58%);
662
+ --t-fill-color-neutral-040:hsl(0, 0%, 81%);
663
+ --t-fill-color-neutral-050:hsl(0, 0%, 88%);
664
+ --t-fill-color-neutral-060:hsl(0, 0%, 93%);
665
+ --t-fill-color-neutral-070:hsl(0, 0%, 95%);
666
+ --t-fill-color-neutral-080:hsl(0, 0%, 97%);
667
+ --t-fill-color-neutral-090:hsl(0, 0%, 98%);
668
+ --t-fill-color-interaction:hsl(204, 100%, 40%);
669
+ --t-fill-color-interaction-hover:hsl(204, 100%, 35%);
670
+ --t-fill-color-interaction-active:hsl(204, 100%, 30%);
671
+ --t-fill-color-interaction-disabled:hsl(0, 0%, 81%);
672
+ --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
673
+ --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
674
+ --t-fill-color-control:hsl(204, 100%, 40%);
675
+ --t-fill-color-control-secondary:hsl(97, 57%, 40%);
676
+ --t-fill-color-control-error:hsl(8, 60%, 47%);
677
+ --t-fill-color-control-disabled:hsl(0, 0%, 81%);
678
+ --t-fill-color-status-neutral:hsl(0, 0%, 42%);
679
+ --t-fill-color-status-neutral-ghost:hsl(0, 0%, 93%);
680
+ --t-fill-color-status-neutral-dim:hsl(0, 0%, 97%);
681
+ --t-fill-color-status-info:hsl(204, 100%, 40%);
682
+ --t-fill-color-status-info-ghost:hsl(203, 94%, 94%);
683
+ --t-fill-color-status-info-dim:hsl(204, 100%, 97%);
684
+ --t-fill-color-status-success:hsl(96, 57%, 33%);
685
+ --t-fill-color-status-success-ghost:hsl(97, 57%, 90%);
686
+ --t-fill-color-status-success-dim:hsl(96, 60%, 95%);
687
+ --t-fill-color-status-warning:hsl(42, 84%, 63%);
688
+ --t-fill-color-status-warning-ghost:hsl(42, 87%, 94%);
689
+ --t-fill-color-status-warning-dim:hsl(42, 87%, 97%);
690
+ --t-fill-color-status-error:hsl(8, 60%, 47%);
691
+ --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
692
+ --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
693
+ --t-fill-color-tooltip:hsla(0, 0%, 12%, 0.9);
694
+ --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
695
+ --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
696
+ --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
697
+ --t-fill-color-product-accounts-040:hsl(210, 54%, 60%);
698
+ --t-fill-color-product-accounts-050:hsl(210, 55%, 50%);
699
+ --t-fill-color-product-accounts-060:hsl(210, 65%, 40%);
700
+ --t-fill-color-product-accounts-070:hsl(211, 70%, 32%);
701
+ --t-fill-color-product-accounts-080:hsl(210, 75%, 25%);
702
+ --t-fill-color-product-calendar-010:hsl(8, 61%, 90%);
703
+ --t-fill-color-product-calendar-020:hsl(8, 61%, 70%);
704
+ --t-fill-color-product-calendar-030:hsl(8, 72%, 59%);
705
+ --t-fill-color-product-calendar-040:hsl(8, 65%, 55%);
706
+ --t-fill-color-product-calendar-050:hsl(9, 61%, 50%);
707
+ --t-fill-color-product-calendar-060:hsl(8, 65%, 42%);
708
+ --t-fill-color-product-calendar-070:hsl(7, 65%, 34%);
709
+ --t-fill-color-product-calendar-080:hsl(9, 61%, 27%);
710
+ --t-fill-color-product-checkins-010:hsl(285, 20%, 92%);
711
+ --t-fill-color-product-checkins-020:hsl(283, 22%, 75%);
712
+ --t-fill-color-product-checkins-030:hsl(284, 22%, 64%);
713
+ --t-fill-color-product-checkins-040:hsl(283, 22%, 55%);
714
+ --t-fill-color-product-checkins-050:hsl(283, 22%, 48%);
715
+ --t-fill-color-product-checkins-060:hsl(283, 27%, 42%);
716
+ --t-fill-color-product-checkins-070:hsl(284, 33%, 34%);
717
+ --t-fill-color-product-checkins-080:hsl(283, 33%, 27%);
718
+ --t-fill-color-product-giving-010:hsl(41, 95%, 93%);
719
+ --t-fill-color-product-giving-020:hsl(42, 95%, 83%);
720
+ --t-fill-color-product-giving-030:hsl(43, 95%, 75%);
721
+ --t-fill-color-product-giving-040:hsl(43, 88%, 70%);
722
+ --t-fill-color-product-giving-050:hsl(43, 88%, 64%);
723
+ --t-fill-color-product-giving-060:hsl(42, 84%, 55%);
724
+ --t-fill-color-product-giving-070:hsl(42, 84%, 48%);
725
+ --t-fill-color-product-giving-080:hsl(42, 100%, 40%);
726
+ --t-fill-color-product-groups-010:hsl(18, 95%, 92%);
727
+ --t-fill-color-product-groups-020:hsl(17, 96%, 80%);
728
+ --t-fill-color-product-groups-030:hsl(17, 96%, 70%);
729
+ --t-fill-color-product-groups-040:hsl(17, 96%, 63%);
730
+ --t-fill-color-product-groups-050:hsl(17, 88%, 55%);
731
+ --t-fill-color-product-groups-060:hsl(12, 70%, 48%);
732
+ --t-fill-color-product-groups-070:hsl(12, 70%, 40%);
733
+ --t-fill-color-product-groups-080:hsl(14, 70%, 34%);
734
+ --t-fill-color-product-home-010:hsl(221, 89%, 93%);
735
+ --t-fill-color-product-home-020:hsl(221, 91%, 91%);
736
+ --t-fill-color-product-home-030:hsl(221, 91%, 87%);
737
+ --t-fill-color-product-home-040:hsl(221, 91%, 62%);
738
+ --t-fill-color-product-home-050:hsl(221, 91%, 55%);
739
+ --t-fill-color-product-home-060:hsl(221, 90%, 50%);
740
+ --t-fill-color-product-home-070:hsl(221, 90%, 45%);
741
+ --t-fill-color-product-home-080:hsl(218, 84%, 25%);
742
+ --t-fill-color-product-people-010:hsl(219, 73%, 91%);
743
+ --t-fill-color-product-people-020:hsl(220, 69%, 81%);
744
+ --t-fill-color-product-people-030:hsl(221, 73%, 71%);
745
+ --t-fill-color-product-people-040:hsl(221, 73%, 65%);
746
+ --t-fill-color-product-people-050:hsl(220, 74%, 57%);
747
+ --t-fill-color-product-people-060:hsl(220, 68%, 51%);
748
+ --t-fill-color-product-people-070:hsl(220, 68%, 41%);
749
+ --t-fill-color-product-people-080:hsl(221, 68%, 31%);
750
+ --t-fill-color-product-publishing-010:hsl(220, 4%, 86%);
751
+ --t-fill-color-product-publishing-020:hsl(222, 10%, 60%);
752
+ --t-fill-color-product-publishing-030:hsl(221, 11%, 50%);
753
+ --t-fill-color-product-publishing-040:hsl(222, 12%, 39%);
754
+ --t-fill-color-product-publishing-050:hsl(220, 12%, 31%);
755
+ --t-fill-color-product-publishing-060:hsl(220, 11%, 26%);
756
+ --t-fill-color-product-publishing-070:hsl(217, 12%, 22%);
757
+ --t-fill-color-product-publishing-080:hsl(214, 11%, 12%);
758
+ --t-fill-color-product-registrations-010:hsl(173, 28%, 89%);
759
+ --t-fill-color-product-registrations-020:hsl(176, 38%, 78%);
760
+ --t-fill-color-product-registrations-030:hsl(176, 37%, 68%);
761
+ --t-fill-color-product-registrations-040:hsl(176, 37%, 60%);
762
+ --t-fill-color-product-registrations-050:hsl(175, 36%, 43%);
763
+ --t-fill-color-product-registrations-060:hsl(175, 51%, 34%);
764
+ --t-fill-color-product-registrations-070:hsl(174, 51%, 28%);
765
+ --t-fill-color-product-registrations-080:hsl(175, 52%, 22%);
766
+ --t-fill-color-product-services-010:hsl(88, 31%, 88%);
767
+ --t-fill-color-product-services-020:hsl(88, 39%, 75%);
768
+ --t-fill-color-product-services-030:hsl(88, 39%, 66%);
769
+ --t-fill-color-product-services-040:hsl(88, 40%, 54%);
770
+ --t-fill-color-product-services-050:hsl(88, 45%, 41%);
771
+ --t-fill-color-product-services-060:hsl(89, 62%, 31%);
772
+ --t-fill-color-product-services-070:hsl(89, 62%, 26%);
773
+ --t-fill-color-product-services-080:hsl(89, 63%, 21%);
774
+ --t-fill-color-product-staff:hsl(328, 100%, 45%);
775
+ --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
776
+ --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
777
+ --t-fill-color-product-accounts-gradient-brand:linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
778
+ --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
779
+ --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
780
+ --t-fill-color-product-api-gradient-brand:linear-gradient(180deg, hsl(221, 100%, 62%), hsl(217, 100%, 52%));
781
+ --t-fill-color-product-calendar-gradient-brand:linear-gradient(135deg, hsl(10, 88%, 58%), hsl(8, 60%, 51%));
782
+ --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(5, 80%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
783
+ --t-fill-color-product-calendar-gradient-tint:linear-gradient(111.72deg, hsl(8, 100%, 94%), hsl(285, 18%, 91%), hsl(204, 67%, 92%));
784
+ --t-fill-color-product-cc-gradient-brand:linear-gradient(135deg, hsl(207, 90%, 61%), hsl(123, 38%, 57%));
785
+ --t-fill-color-product-checkins-gradient-brand:linear-gradient(135deg, hsl(283, 38%, 59%), hsl(284, 23%, 48%));
786
+ --t-fill-color-product-checkins-gradient-page:linear-gradient(111.72deg, hsl(283, 21%, 77%) 25%, hsl(227, 36%, 78%) 60%, hsl(204, 67%, 73%));
787
+ --t-fill-color-product-checkins-gradient-tint:linear-gradient(111.72deg, hsl(285, 22%, 93%), hsl(225, 35%, 93%) 42%, hsl(204, 67%, 92%));
788
+ --t-fill-color-product-giving-gradient-brand:linear-gradient(90deg, hsl(46, 91%, 55%), hsl(41, 89%, 55%));
789
+ --t-fill-color-product-giving-gradient-page:linear-gradient(111.72deg, hsl(42, 84%, 80%), hsl(255, 21%, 89%) 58.5%, hsl(204, 67%, 73%));
790
+ --t-fill-color-product-giving-gradient-tint:linear-gradient(111.72deg, hsl(42, 87%, 94%), hsl(260, 18%, 97%) 58.5%, hsl(204, 67%, 92%));
791
+ --t-fill-color-product-groups-gradient-brand:linear-gradient(135deg, hsl(30, 100%, 59%), hsl(19, 97%, 60%));
792
+ --t-fill-color-product-groups-gradient-page:linear-gradient(111.72deg, hsl(17, 88%, 80%), hsl(293, 13%, 74%), hsl(204, 67%, 73%));
793
+ --t-fill-color-product-groups-gradient-tint:linear-gradient(111.72deg, hsl(18, 87%, 94%), hsl(300, 12%, 92%), hsl(204, 67%, 92%));
794
+ --t-fill-color-product-headcounts-gradient-brand:linear-gradient(135deg, hsl(283, 37%, 59%), hsl(285, 23%, 47%));
795
+ --t-fill-color-product-home-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
796
+ --t-fill-color-product-home-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
797
+ --t-fill-color-product-musicstand-gradient-brand:linear-gradient(135deg, hsl(204, 64%, 51%), hsl(211, 55%, 51%));
798
+ --t-fill-color-product-people-gradient-brand:linear-gradient(135deg, hsl(205, 86%, 57%), hsl(220, 76%, 57%));
799
+ --t-fill-color-product-people-gradient-page:linear-gradient(111.72deg, hsl(220, 73%, 81%), hsl(220, 73%, 81%), hsl(204, 67%, 73%));
800
+ --t-fill-color-product-people-gradient-tint:linear-gradient(111.72deg, hsl(218, 73%, 94%), hsl(218, 73%, 94%), hsl(204, 67%, 92%));
801
+ --t-fill-color-product-publishing-gradient-brand:linear-gradient(135deg, hsl(240, 4%, 49%), hsl(240, 6%, 39%));
802
+ --t-fill-color-product-publishing-gradient-page:linear-gradient(111.72deg, hsl(217, 5%, 69%), hsl(214, 15%, 69%) 45%, hsl(204, 67%, 73%));
803
+ --t-fill-color-product-publishing-gradient-tint:linear-gradient(111.72deg, hsl(210, 4%, 91%), hsl(214, 15%, 91%) 45%, hsl(204, 67%, 92%));
804
+ --t-fill-color-product-registrations-gradient-brand:linear-gradient(135deg, hsl(168, 46%, 48%), hsl(175, 35%, 43%));
805
+ --t-fill-color-product-registrations-gradient-page:linear-gradient(111.72deg, hsl(175, 27%, 74%), hsl(196, 46%, 73%) 39.5%, hsl(204, 67%, 73%));
806
+ --t-fill-color-product-registrations-gradient-tint:linear-gradient(111.72deg, hsl(175, 28%, 92%), hsl(196, 46%, 92%) 39.5%, hsl(204, 67%, 92%));
807
+ --t-fill-color-product-services-gradient-brand:linear-gradient(135deg, hsl(96, 49%, 47%), hsl(89, 52%, 39%));
808
+ --t-fill-color-product-services-gradient-page:linear-gradient(111.72deg, hsl(89, 31%, 73%), hsl(122, 29%, 78%) 39.5%, hsl(204, 67%, 73%));
809
+ --t-fill-color-product-services-gradient-tint:linear-gradient(111.72deg, hsl(88, 32%, 92%), hsl(126, 29%, 93%) 39.5%, hsl(204, 67%, 92%));
810
+ --t-fill-color-tag-gray-010:hsl(0, 0%, 93%);
811
+ --t-fill-color-tag-gray-020:hsl(0, 0%, 88%);
812
+ --t-fill-color-tag-gray-030:hsl(0, 0%, 88%);
813
+ --t-fill-color-tag-gray-040:hsl(0, 0%, 81%);
814
+ --t-fill-color-tag-blue-010:hsl(220, 100%, 95%);
815
+ --t-fill-color-tag-blue-020:hsl(221, 100%, 88%);
816
+ --t-fill-color-tag-blue-030:hsl(220, 98%, 81%);
817
+ --t-fill-color-tag-blue-040:hsl(220, 98%, 74%);
818
+ --t-fill-color-tag-aqua-010:hsl(200, 82%, 89%);
819
+ --t-fill-color-tag-aqua-020:hsl(200, 82%, 82%);
820
+ --t-fill-color-tag-aqua-030:hsl(201, 76%, 71%);
821
+ --t-fill-color-tag-aqua-040:hsl(200, 75%, 64%);
822
+ --t-fill-color-tag-teal-010:hsl(163, 53%, 83%);
823
+ --t-fill-color-tag-teal-020:hsl(164, 52%, 76%);
824
+ --t-fill-color-tag-teal-030:hsl(169, 62%, 64%);
825
+ --t-fill-color-tag-teal-040:hsl(169, 62%, 56%);
826
+ --t-fill-color-tag-green-010:hsl(98, 59%, 85%);
827
+ --t-fill-color-tag-green-020:hsl(99, 59%, 78%);
828
+ --t-fill-color-tag-green-030:hsl(112, 57%, 65%);
829
+ --t-fill-color-tag-green-040:hsl(112, 57%, 57%);
830
+ --t-fill-color-tag-yellow-010:hsl(45, 77%, 85%);
831
+ --t-fill-color-tag-yellow-020:hsl(44, 78%, 77%);
832
+ --t-fill-color-tag-yellow-030:hsl(44, 92%, 69%);
833
+ --t-fill-color-tag-yellow-040:hsl(44, 93%, 61%);
834
+ --t-fill-color-tag-orange-010:hsl(22, 89%, 89%);
835
+ --t-fill-color-tag-orange-020:hsl(21, 89%, 82%);
836
+ --t-fill-color-tag-orange-030:hsl(21, 86%, 72%);
837
+ --t-fill-color-tag-orange-040:hsl(21, 86%, 64%);
838
+ --t-fill-color-tag-pink-010:hsl(311, 66%, 92%);
839
+ --t-fill-color-tag-pink-020:hsl(310, 64%, 85%);
840
+ --t-fill-color-tag-pink-030:hsl(324, 78%, 77%);
841
+ --t-fill-color-tag-pink-040:hsl(324, 76%, 70%);
842
+ --t-fill-color-tag-purple-010:hsl(259, 74%, 93%);
843
+ --t-fill-color-tag-purple-020:hsl(259, 74%, 85%);
844
+ --t-fill-color-tag-purple-030:hsl(273, 62%, 76%);
845
+ --t-fill-color-tag-purple-040:hsl(273, 62%, 70%);
846
+ --t-fill-color-tag-magenta-010:hsl(294, 37%, 90%);
847
+ --t-fill-color-tag-magenta-020:hsl(291, 40%, 83%);
848
+ --t-fill-color-tag-magenta-030:hsl(291, 48%, 70%);
849
+ --t-fill-color-tag-magenta-040:hsl(292, 48%, 63%);
850
+ --t-fill-color-tag-indigo-010:hsl(234, 78%, 93%);
851
+ --t-fill-color-tag-indigo-020:hsl(233, 79%, 87%);
852
+ --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
853
+ --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
854
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 93%);
855
+ --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
856
+ --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
857
+ --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 95%);
858
+ --t-fill-color-button-neutral-outline:hsla(0, 0%, 100%, 0);
859
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 95%);
860
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 93%);
861
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 98%);
862
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 100%, 0);
863
+ --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
864
+ --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
865
+ --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 100%, 0);
866
+ --t-fill-color-button-neutral-responsive-header:hsla(0, 0%, 0%, 0.1);
867
+ --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
868
+ --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
869
+ --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 0%, 0.05);
870
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 40%);
871
+ --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
872
+ --t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
873
+ --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 95%);
874
+ --t-fill-color-button-interaction-outline:hsla(0, 0%, 100%, 0);
875
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 100%, 97%);
876
+ --t-fill-color-button-interaction-outline-active:hsl(203, 94%, 94%);
877
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 98%);
878
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 100%, 0);
879
+ --t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
880
+ --t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
881
+ --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 100%, 0);
882
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 47%);
883
+ --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
884
+ --t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
885
+ --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 95%);
886
+ --t-fill-color-button-delete-outline:hsla(0, 0%, 100%, 0);
887
+ --t-fill-color-button-delete-outline-hover:hsl(7, 60%, 97%);
888
+ --t-fill-color-button-delete-outline-active:hsl(9, 59%, 93%);
889
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 98%);
890
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 100%, 0);
891
+ --t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
892
+ --t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
893
+ --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
894
+ --t-fill-color-button-pill:hsl(0, 0%, 93%);
895
+ --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
896
+ --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
897
+ --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
898
+ --t-fill-color-transparency-light-010:hsla(0, 0%, 100%, 0.1);
899
+ --t-fill-color-transparency-light-020:hsla(0, 0%, 100%, 0.2);
900
+ --t-fill-color-transparency-light-030:hsla(0, 0%, 100%, 0.3);
901
+ --t-fill-color-transparency-light-040:hsla(0, 0%, 100%, 0.4);
902
+ --t-fill-color-transparency-light-050:hsla(0, 0%, 100%, 0.5);
903
+ --t-fill-color-transparency-light-060:hsla(0, 0%, 100%, 0.6);
904
+ --t-fill-color-transparency-light-070:hsla(0, 0%, 100%, 0.7);
905
+ --t-fill-color-transparency-light-080:hsla(0, 0%, 100%, 0.8);
906
+ --t-fill-color-transparency-light-090:hsla(0, 0%, 100%, 0.9);
907
+ --t-fill-color-transparency-dark-010:hsla(0, 0%, 0%, 0.1);
908
+ --t-fill-color-transparency-dark-020:hsla(0, 0%, 0%, 0.2);
909
+ --t-fill-color-transparency-dark-030:hsla(0, 0%, 0%, 0.3);
910
+ --t-fill-color-transparency-dark-040:hsla(0, 0%, 0%, 0.4);
911
+ --t-fill-color-transparency-dark-050:hsla(0, 0%, 0%, 0.5);
912
+ --t-fill-color-transparency-dark-060:hsla(0, 0%, 0%, 0.6);
913
+ --t-fill-color-transparency-dark-070:hsla(0, 0%, 0%, 0.7);
914
+ --t-fill-color-transparency-dark-080:hsla(0, 0%, 0%, 0.8);
915
+ --t-fill-color-transparency-dark-090:hsla(0, 0%, 0%, 0.9);
916
+ --t-fill-color-transparency-dark-static-010:hsla(0, 0%, 0%, 0.1);
917
+ --t-fill-color-transparency-dark-static-020:hsla(0, 0%, 0%, 0.2);
918
+ --t-fill-color-transparency-dark-static-030:hsla(0, 0%, 0%, 0.3);
919
+ --t-fill-color-transparency-dark-static-040:hsla(0, 0%, 0%, 0.4);
920
+ --t-fill-color-transparency-dark-static-050:hsla(0, 0%, 0%, 0.5);
921
+ --t-fill-color-transparency-dark-static-060:hsla(0, 0%, 0%, 0.6);
922
+ --t-fill-color-transparency-dark-static-070:hsla(0, 0%, 0%, 0.7);
923
+ --t-fill-color-transparency-dark-static-080:hsla(0, 0%, 0%, 0.8);
924
+ --t-fill-color-transparency-dark-static-090:hsla(0, 0%, 0%, 0.9);
925
+ --t-surface-color-card:hsl(0, 0%, 100%);
926
+ --t-surface-color-canvas:hsl(0, 0%, 100%);
927
+ --t-border-color:hsl(0, 0%, 88%);
928
+ --t-border-color-dark:hsl(0, 0%, 81%);
929
+ --t-border-color-darker:hsl(0, 0%, 68%);
930
+ --t-border-color-darkest:hsl(0, 0%, 58%);
931
+ --t-border-color-disabled:hsl(0, 0%, 88%);
932
+ --t-border-color-dim:hsl(0, 0%, 95%);
933
+ --t-border-color-white:hsl(0, 0%, 100%);
934
+ --t-border-color-status-neutral:hsl(0, 0%, 58%);
935
+ --t-border-color-status-info:hsl(204, 100%, 40%);
936
+ --t-border-color-status-success:hsl(97, 57%, 40%);
937
+ --t-border-color-status-warning:hsl(42, 84%, 63%);
938
+ --t-border-color-status-error:hsl(8, 60%, 47%);
939
+ --t-border-color-button-neutral:hsl(0, 0%, 88%);
940
+ --t-border-color-button-info:hsl(204, 100%, 40%);
941
+ --t-border-color-button-create:hsl(96, 57%, 33%);
942
+ --t-border-color-button-delete:hsl(8, 60%, 47%);
943
+ --t-border-color-control-neutral:hsl(0, 0%, 68%);
944
+ --t-border-color-control-info:hsl(204, 100%, 40%);
945
+ --t-border-color-control-success:hsl(97, 57%, 40%);
946
+ --t-border-color-control-warning:hsl(42, 84%, 63%);
947
+ --t-border-color-control-error:hsl(8, 60%, 47%);
948
+ --t-border-color-control-disabled:hsl(0, 0%, 88%);
949
+ --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.07);
950
+ --t-form-background-color:var(--t-fill-color-neutral-100);
951
+ --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
952
+ --t-form-background-color-error:var(--t-fill-color-neutral-100);
953
+ --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
954
+ --t-form-border-color:var(--t-border-color);
955
+ --t-form-border-color-disabled:var(--t-border-color);
956
+ --t-form-border-color-error:var(--t-border-color-status-error);
957
+ --t-form-border-color-focus:var(--t-fill-color-interaction);
958
+ --t-form-border-color-hover:var(--t-border-color-dark);
959
+ --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
960
+ --t-form-border-radius:var(--t-border-radius-md);
961
+ --t-form-border-width:var(--t-border-width);
962
+ --t-form-font-color:var(--t-text-color);
963
+ --t-form-font-color-disabled:var(--t-text-color-disabled);
964
+ --t-form-font-color-error:var(--t-text-color-status-error);
965
+ --t-form-font-color-readonly:var(--t-text-color);
966
+ --t-form-picker-icon-color:var(--t-icon-color);
967
+ --t-form-placeholder-color:var(--t-text-color-placeholder);
1239
968
  }
1240
969
 
1241
970
 
@@ -1419,148 +1148,419 @@
1419
1148
  gap:0;
1420
1149
  }
1421
1150
 
1422
- .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1423
- visibility:hidden;
1424
- block-size:0;
1425
- overflow-y:clip;
1426
- opacity:0;
1427
- transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
1428
- }
1151
+ .tds-sidenav-action--toggle + :is(.tds-sidenav-item .tds-sidenav-section-list){
1152
+ visibility:hidden;
1153
+ block-size:0;
1154
+ overflow-y:clip;
1155
+ opacity:0;
1156
+ transition:content-visibility .2s allow-discrete, opacity .2s, block-size .2s;
1157
+ }
1158
+
1159
+ :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1160
+ --tds-sidenav-item-depth:2;
1161
+ }
1162
+
1163
+ :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1164
+ min-height:var(--t-element-size-2xl);
1165
+ padding-block:9px;
1166
+ padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1167
+ line-height:1;
1168
+ background-color:transparent;
1169
+ }
1170
+
1171
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1172
+ position:absolute;
1173
+ top:0;
1174
+ bottom:0;
1175
+ left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1176
+ width:2px;
1177
+ content:"";
1178
+ background-color:var(--tds-sidenav-item-nested-border-color);
1179
+ transition:var(--tds-sidenav-item-transition);
1180
+ }
1181
+
1182
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1183
+ position:absolute;
1184
+ inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1185
+ z-index:-1;
1186
+ height:100%;
1187
+ content:"";
1188
+ background-color:var(--tds-sidenav-item-nested-background);
1189
+ border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
1190
+ transition:var(--tds-sidenav-item-transition);
1191
+ }
1192
+
1193
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1194
+ display:block;
1195
+ text-align:left;
1196
+ white-space:normal;
1197
+ }
1198
+
1199
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1200
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1201
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1202
+ }
1203
+
1204
+ :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1205
+ --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1206
+ }
1207
+
1208
+ .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1209
+ --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1210
+ font-weight:var(--t-font-weight-medium);
1211
+ }
1212
+
1213
+ .tds-sidenav-responsive-header{
1214
+ display:flex;
1215
+ gap:var(--t-spacing-2);
1216
+ align-items:center;
1217
+ width:100%;
1218
+ }
1219
+
1220
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1221
+ order:0;
1222
+ }
1223
+
1224
+ .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1225
+ flex:1;
1226
+ order:1;
1227
+ margin:0;
1228
+ font-size:var(--t-font-size-lg);
1229
+ font-weight:var(--t-font-weight-medium);
1230
+ color:var(--t-text-color-default-headline);
1231
+ }
1232
+
1233
+ @media (max-width: 719px){
1234
+ .tds-sidenav-collapse{
1235
+ z-index:10001;
1236
+ display:none;
1237
+ max-width:min(448px, calc(100vw - 48px));
1238
+ padding:0;
1239
+ margin:12px 0;
1240
+ overflow:hidden;
1241
+ outline:0;
1242
+ background:var(--t-surface-color-card);
1243
+ border:0;
1244
+ border-radius:6px;
1245
+ box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1246
+ will-change:transform;
1247
+ position-area:bottom span-right;
1248
+ }
1249
+
1250
+ .tds-sidenav-scroll-container{
1251
+ --webkit-overflow-scrolling:touch;
1252
+ display:block;
1253
+ width:100%;
1254
+ height:-moz-fit-content;
1255
+ height:fit-content;
1256
+ padding:var(--t-spacing-2);
1257
+ overflow-y:auto;
1258
+ }
1259
+
1260
+ .tds-sidenav-item :is(a, button) :is(.prefix){
1261
+ display:none;
1262
+ }
1263
+ @supports selector(:popover-open){
1264
+ .tds-sidenav-collapse:popover-open{
1265
+ display:flex;
1266
+ }
1267
+ }
1268
+ @supports not selector(:popover-open){
1269
+ .tds-sidenav-collapse.\:popover-open{
1270
+ display:flex;
1271
+ }
1272
+ }
1273
+ }
1274
+
1275
+ @media (min-width: 720px){
1276
+ .tds-sidenav-responsive-header{
1277
+ display:none;
1278
+ }
1279
+ }
1280
+
1281
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1282
+ display:none;
1283
+ }
1284
+
1285
+ :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1286
+ display:block;
1287
+ }
1288
+
1289
+ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1290
+ display:flex;
1291
+ flex-direction:column;
1292
+ }
1293
+
1294
+ @layer t-critical{
1295
+ tds-page-header:not(.hydrated){
1296
+ display:none;
1297
+ }
1298
+ }
1299
+
1300
+ @layer t-component{
1301
+ .tds-page-header{
1302
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1303
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1304
+ --tds-page-header-color:var(--t-text-color-default-primary);
1305
+ --tds-page-header-headline-color:var(--t-text-color-default-headline);
1306
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1307
+ --tds-page-header-padding-x:var(--t-spacing-2);
1308
+ --tds-page-header-padding-y:var(--t-spacing-2);
1309
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
1310
+ --tds-page-header-nav-gap:var(--t-spacing-1);
1311
+ --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
1312
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1313
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1314
+ --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
1315
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
1316
+ --tds-page-header-nav-item-border-width:1px;
1317
+
1318
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1319
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
1320
+
1321
+ --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
1322
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
1323
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1324
+
1325
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
1326
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
1327
+
1328
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
1329
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1330
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1331
+
1332
+ --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
1333
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1334
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1335
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1336
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
1337
+ }
1338
+
1339
+ .tds-page-header--profile{
1340
+ --tds-page-header-padding-y:20px;
1341
+ }
1342
+ @media (min-width: 600px){
1343
+ .tds-page-header{
1344
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
1345
+ --tds-page-header-color:var(--t-text-color-default-secondary);
1346
+ --tds-page-header-padding-x:var(--t-spacing-3);
1347
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1348
+ --tds-page-header-nav-gap:var(--t-spacing-half);
1349
+ --tds-page-header-nav-background:transparent;
1350
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1351
+ --tds-page-header-nav-item-border-width:1px;
1352
+ --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
1353
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1354
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
1355
+ }
1356
+ }
1357
+ }
1358
+
1359
+ .tds-page-header{
1360
+ display:flex;
1361
+ flex-direction:column;
1362
+ padding-top:var(--tds-page-header-padding-y);
1363
+ color:var(--tds-page-header-color);
1364
+ background:var(--tds-page-header-background-color);
1365
+ border-bottom:1px solid var(--t-border-color-default-base);
1366
+ }
1367
+
1368
+ .tds-page-header:not(.has-nav){
1369
+ padding-bottom:var(--tds-page-header-padding-y);
1370
+ }
1371
+
1372
+ .tds-page-header.inactive{
1373
+ background:var(--tds-page-header-background-color-inactive);
1374
+ }
1375
+
1376
+ .tds-page-header__title-bar{
1377
+ display:flex;
1378
+ flex-direction:column;
1379
+ gap:var(--t-spacing-2) var(--t-spacing-1);
1380
+ align-items:flex-start;
1381
+ justify-content:space-between;
1382
+ padding:0 var(--tds-page-header-padding-x);
1383
+ }
1384
+
1385
+ .tds-page-header--profile > .tds-page-header__title-bar{
1386
+ align-items:center;
1387
+ }
1388
+
1389
+ .tds-page-header__primary{
1390
+ width:100%;
1391
+ }
1392
+
1393
+ .tds-page-header__primary h1{
1394
+ margin:0;
1395
+ font-size:var(--tds-page-header-headline-font-size);
1396
+ font-weight:var(--t-font-weight-normal);
1397
+ line-height:32px;
1398
+ color:var(--tds-page-header-headline-color);
1399
+ overflow-wrap:break-word;
1400
+ }
1401
+
1402
+ .tds-page-header [slot="actions"]{
1403
+ width:100%;
1404
+ }
1429
1405
 
1430
- :is(.tds-sidenav-item .tds-sidenav-section-list) .tds-sidenav-section-list{
1431
- --tds-sidenav-item-depth:2;
1432
- }
1406
+ .has-multi-actions.tds-page-header [slot="actions"],
1407
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
1408
+ display:flex;
1409
+ flex-flow:row wrap;
1410
+ gap:var(--t-spacing-half) var(--t-spacing-1);
1411
+ align-items:flex-start;
1412
+ justify-content:flex-start;
1413
+ min-width:0;
1414
+ }
1433
1415
 
1434
- :is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1435
- min-height:var(--t-element-size-2xl);
1436
- padding-block:9px;
1437
- padding-left:calc((var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth)) + var(--tds-sidenav-indent) + var(--t-spacing-fourth));
1438
- line-height:1;
1439
- background-color:transparent;
1440
- }
1416
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
1417
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
1418
+ .tds-page-header nav[slot="navigation"] ul,
1419
+ .tds-page-header nav.tds-page-header__nav ul{
1420
+ display:flex;
1421
+ gap:var(--tds-page-header-nav-gap);
1422
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
1423
+ margin:0 0 -1px;
1424
+ overflow:auto;
1425
+ list-style:none;
1426
+ background:var(--tds-page-header-nav-background);
1427
+ }
1441
1428
 
1442
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::before{
1443
- position:absolute;
1444
- top:0;
1445
- bottom:0;
1446
- left:calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1447
- width:2px;
1448
- content:"";
1449
- background-color:var(--tds-sidenav-item-nested-border-color);
1450
- transition:var(--tds-sidenav-item-transition);
1451
- }
1429
+ .tds-page-header nav[slot="navigation"] a,
1430
+ .tds-page-header nav[slot="navigation"] button,
1431
+ .tds-page-header nav.tds-page-header__nav a,
1432
+ .tds-page-header nav.tds-page-header__nav button{
1433
+ position:relative;
1434
+ display:inline-flex;
1435
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
1436
+ font-size:var(--t-font-size-sm);
1437
+ line-height:22px;
1438
+ color:var(--tds-page-header-nav-item-color);
1439
+ white-space:nowrap;
1440
+ text-decoration:none;
1441
+ -webkit-appearance:none;
1442
+ -moz-appearance:none;
1443
+ appearance:none;
1444
+ cursor:pointer;
1445
+ outline-offset:-2px;
1446
+ background-color:var(--tds-page-header-nav-item-background-color);
1447
+ background-clip:padding-box;
1448
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
1449
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
1450
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
1451
+ }
1452
1452
 
1453
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button))::after{
1454
- position:absolute;
1455
- inset:0 0 0 calc(var(--tds-sidenav-indent) * var(--tds-sidenav-item-depth));
1456
- z-index:-1;
1457
- height:100%;
1458
- content:"";
1459
- background-color:var(--tds-sidenav-item-nested-background);
1460
- border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
1461
- transition:var(--tds-sidenav-item-transition);
1462
- }
1453
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
1454
+ position:relative;
1455
+ }
1463
1456
 
1464
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):not(:has(.prefix,.suffix)),:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)) :is(:not(.prefix,.suffix)){
1465
- display:block;
1466
- text-align:left;
1467
- white-space:normal;
1468
- }
1457
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
1458
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1459
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
1460
+ }
1469
1461
 
1470
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):hover,:is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):focus-visible{
1471
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-hover);
1472
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-hover);
1473
- }
1462
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
1463
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1464
+ position:absolute;
1465
+ top:-5px;
1466
+ right:-2px;
1467
+ width:10px;
1468
+ height:10px;
1469
+ content:"";
1470
+ background:var(--tds-page-header-nav-item-indicator-color);
1471
+ border-radius:50%;
1472
+ }
1474
1473
 
1475
- :is(:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button)):active{
1476
- --tds-sidenav-item-nested-background:var(--tds-sidenav-item-nested-background-active);
1477
- }
1474
+ @media (prefers-reduced-motion: no-preference){
1475
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
1476
+ animation:indicator-pulse 1.25s ease infinite;
1477
+ }
1478
+ }
1478
1479
 
1479
- .selected:is(.tds-sidenav-section-list .tds-sidenav-section-list .tds-sidenav-item) :is(a,button){
1480
- --tds-sidenav-item-nested-border-color:var(--tds-sidenav-item-nested-border-color-selected);
1481
- font-weight:var(--t-font-weight-medium);
1482
- }
1480
+ .tds-page-header nav[slot="navigation"] a.selected,
1481
+ .tds-page-header nav[slot="navigation"] button.selected,
1482
+ .tds-page-header nav.tds-page-header__nav a.selected,
1483
+ .tds-page-header nav.tds-page-header__nav button.selected{
1484
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
1485
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
1486
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
1487
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
1488
+ }
1483
1489
 
1484
- .tds-sidenav-responsive-header{
1485
- display:flex;
1486
- gap:var(--t-spacing-2);
1487
- align-items:center;
1488
- width:100%;
1490
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
1491
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
1492
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
1493
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
1494
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
1495
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
1496
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
1489
1497
  }
1490
1498
 
1491
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-toggle{
1492
- order:0;
1493
- }
1499
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
1500
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
1501
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
1502
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
1503
+ background-color:var(--tds-page-header-nav-item-background-color-active);
1504
+ }
1494
1505
 
1495
- .tds-sidenav-responsive-header .tds-sidenav-responsive-header-label{
1496
- flex:1;
1497
- order:1;
1498
- margin:0;
1499
- font-size:var(--t-font-size-lg);
1500
- font-weight:var(--t-font-weight-medium);
1501
- color:var(--t-text-color-default-headline);
1502
- }
1506
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
1507
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
1508
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
1509
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
1510
+ color:var(--tds-page-header-nav-item-color-disabled);
1511
+ cursor:not-allowed;
1512
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
1513
+ opacity:1;
1514
+ }
1503
1515
 
1504
- @media (max-width: 719px){
1505
- .tds-sidenav-collapse{
1506
- z-index:10001;
1507
- display:none;
1508
- max-width:min(448px, calc(100vw - 48px));
1509
- padding:0;
1510
- margin:12px 0;
1511
- overflow:hidden;
1512
- outline:0;
1513
- background:var(--t-surface-color-card);
1514
- border:0;
1515
- border-radius:6px;
1516
- box-shadow:0 8px 20px 0 rgba(0, 0, 0, .25);
1517
- will-change:transform;
1518
- position-area:bottom span-right;
1516
+ @media (min-width: 960px){
1517
+ .tds-page-header__primary{
1518
+ flex:1 1 max-content;
1519
+ width:auto;
1520
+ min-width:0;
1521
+ max-width:100%;
1519
1522
  }
1520
1523
 
1521
- .tds-sidenav-scroll-container{
1522
- --webkit-overflow-scrolling:touch;
1523
- display:block;
1524
- width:100%;
1525
- height:-moz-fit-content;
1526
- height:fit-content;
1527
- padding:var(--t-spacing-2);
1528
- overflow-y:auto;
1524
+ .tds-page-header__title-bar,
1525
+ .tds-page-header--profile .tds-page-header__title-bar{
1526
+ flex-flow:row nowrap;
1527
+ row-gap:12px;
1528
+ align-items:flex-start;
1529
1529
  }
1530
1530
 
1531
- .tds-sidenav-item :is(a, button) :is(.prefix){
1532
- display:none;
1533
- }
1534
- @supports selector(:popover-open){
1535
- .tds-sidenav-collapse:popover-open{
1536
- display:flex;
1537
- }
1531
+ .tds-page-header [slot="actions"]{
1532
+ width:auto;
1538
1533
  }
1539
- @supports not selector(:popover-open){
1540
- .tds-sidenav-collapse.\:popover-open{
1541
- display:flex;
1542
- }
1534
+
1535
+ .has-multi-actions.tds-page-header [slot="actions"],
1536
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
1537
+ justify-content:flex-end;
1543
1538
  }
1544
1539
  }
1545
1540
 
1546
- @media (min-width: 720px){
1547
- .tds-sidenav-responsive-header{
1548
- display:none;
1549
- }
1541
+ .tds-page-header-phone,
1542
+ .tds-page-header-email{
1543
+ color:var(--tds-page-header-color);
1544
+ white-space:nowrap;
1550
1545
  }
1551
1546
 
1552
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > :not([slot="ssr"]){
1553
- display:none;
1554
- }
1547
+ .tds-page-header-email{
1548
+ max-width:100%;
1549
+ overflow:hidden;
1550
+ text-overflow:ellipsis;
1551
+ }
1555
1552
 
1556
- :is(tds-sidenav,tds-sidenav-section,tds-sidenav-item):not(.hydrated) > [slot="ssr"]{
1557
- display:block;
1558
- }
1553
+ @keyframes indicator-pulse{
1554
+ 0%{
1555
+ opacity:.3;
1556
+ transform:scale(.9);
1557
+ }
1559
1558
 
1560
- tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1561
- display:flex;
1562
- flex-direction:column;
1563
- }
1559
+ 100%{
1560
+ opacity:0;
1561
+ transform:scale(1.75);
1562
+ }
1563
+ }
1564
1564
 
1565
1565
  .tds-loading-spinner{
1566
1566
  --tds-loading-spinner-size:1.25em;