@planningcenter/tapestry 2.4.1-rc.1 → 2.4.1-rc.2

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