@planningcenter/tapestry 2.6.0-rc.0 → 2.6.0

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