@planningcenter/tapestry 2.6.0-rc.1 → 2.6.1-rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/dist/deprecated.css +42 -1
  2. package/dist/index.css +159 -118
  3. package/dist/index.css.map +1 -1
  4. package/dist/reactRender.css +556 -515
  5. package/dist/reactRender.css.map +1 -1
  6. package/dist/reactRenderLegacy.css +556 -515
  7. package/dist/reactRenderLegacy.css.map +1 -1
  8. package/dist/tokens/ts/react-native-tokens.d.ts +41 -41
  9. package/dist/tokens/ts/react-native-tokens.d.ts.map +1 -1
  10. package/dist/tokens/ts/react-native-tokens.js +41 -41
  11. package/dist/tokens/ts/react-native-tokens.js.map +1 -1
  12. package/dist/tokens/ts/tokens.d.ts +41 -41
  13. package/dist/tokens/ts/tokens.js +41 -41
  14. package/dist/tokens/ts/tokens.js.map +1 -1
  15. package/dist/tokens-dark.css +66 -66
  16. package/dist/tokens.css +159 -118
  17. package/dist/tokens.css.map +1 -1
  18. package/dist/unstable.css +166 -125
  19. package/dist/unstable.css.map +1 -1
  20. package/package.json +3 -3
package/dist/reactRender.css CHANGED
@@ -1,427 +1,156 @@
1
1
  @layer t-critical, t-component;
2
2
 
3
- @layer t-critical{
4
- tds-page-header:not(.hydrated){
5
- display:none;
6
- }
3
+
4
+ @media (prefers-reduced-motion: no-preference){
5
+
6
+ :root{
7
+ interpolate-size:allow-keywords;
7
8
  }
9
+ }
8
10
 
9
- @layer t-component{
10
- .tds-page-header{
11
- --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
12
- --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
13
- --tds-page-header-color:var(--t-text-color-default-primary);
14
- --tds-page-header-headline-color:var(--t-text-color-default-headline);
15
- --tds-page-header-headline-font-size:var(--t-font-size-2xl);
16
- --tds-page-header-padding-x:var(--t-spacing-2);
17
- --tds-page-header-padding-y:var(--t-spacing-2);
18
- --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
19
- --tds-page-header-nav-gap:var(--t-spacing-1);
20
- --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
21
- --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
22
- --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
23
- --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
24
- --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
25
- --tds-page-header-nav-item-border-width:1px;
11
+ @layer tds-component{
12
+ tds-sidenav, .tds-sidenav{
13
+ --tds-sidenav-indent:12px;
14
+ --tds-sidenav-item-depth:0;
26
15
 
27
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
28
- --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
16
+ --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
29
17
 
30
- --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
31
- --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
32
- --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
18
+ --tds-sidenav-item-icon-size:var(--t-element-size-md);
19
+ --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
20
+ --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
21
+ --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
33
22
 
34
- --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
35
- --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
23
+ --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
24
+ --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
25
+ --tds-sidenav-item-nested-background-selected:transparent;
36
26
 
37
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
38
- --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
39
- --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
27
+ --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
28
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
29
+ --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
40
30
 
41
- --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
42
- --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
43
- --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
44
- --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
45
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
31
+ --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
32
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
46
33
  }
47
34
 
48
- .tds-page-header--profile{
49
- --tds-page-header-padding-y:20px;
50
- }
51
- @media (min-width: 600px){
52
- .tds-page-header{
53
- --tds-page-header-background-color:var(--t-surface-color-canvas);
54
- --tds-page-header-color:var(--t-text-color-default-secondary);
55
- --tds-page-header-padding-x:var(--t-spacing-3);
56
- --tds-page-header-headline-font-size:var(--t-font-size-3xl);
57
- --tds-page-header-nav-gap:var(--t-spacing-half);
58
- --tds-page-header-nav-background:transparent;
59
- --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
60
- --tds-page-header-nav-item-border-width:1px;
61
- --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
62
- --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
63
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
64
- }
35
+ .tds-sidenav--theme-gray{
36
+ --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
37
+ --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
38
+ --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
39
+ --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
40
+ --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
65
41
  }
66
42
  }
67
43
 
68
- .tds-page-header{
69
- display:flex;
70
- flex-direction:column;
71
- padding-top:var(--tds-page-header-padding-y);
72
- color:var(--tds-page-header-color);
73
- background:var(--tds-page-header-background-color);
74
- border-bottom:1px solid var(--t-border-color-default-base);
75
- }
44
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section){
45
+ display:flex;
46
+ }
76
47
 
77
- .tds-page-header:not(.has-nav){
78
- padding-bottom:var(--tds-page-header-padding-y);
79
- }
48
+ .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
49
+ flex-direction:column;
50
+ gap:var(--t-spacing-half);
51
+ width:100%;
52
+ }
80
53
 
81
- .tds-page-header.inactive{
82
- background:var(--tds-page-header-background-color-inactive);
54
+ .tds-sidenav-section-list{
55
+ width:100%;
56
+ padding:0;
57
+ margin:0;
58
+ list-style:none;
83
59
  }
84
60
 
85
- .tds-page-header__title-bar{
61
+ .tds-sidenav-section-header{
86
62
  display:flex;
87
- flex-direction:column;
88
- gap:var(--t-spacing-2) var(--t-spacing-1);
89
- align-items:flex-start;
63
+ align-items:baseline;
90
64
  justify-content:space-between;
91
- padding:0 var(--tds-page-header-padding-x);
65
+ padding-top:var(--t-spacing-2);
92
66
  }
93
67
 
94
- .tds-page-header--profile > .tds-page-header__title-bar{
68
+ .tds-sidenav-section-header h2{
69
+ margin:0;
70
+ font-size:var(--t-font-size-sm);
71
+ font-weight:var(--t-font-weight-semibold);
72
+ line-height:1.35;
73
+ color:var(--t-text-color-default-secondary);
74
+ text-transform:uppercase;
75
+ }
76
+
77
+ .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
78
+ padding-top:0;
79
+ }
80
+
81
+ .tds-sidenav-section-header [slot="label-actions"]{
82
+ display:flex;
83
+ gap:var(--t-spacing-half);
84
+ align-items:center;
85
+ }
86
+
87
+ .tds-sidenav-section [slot="section-actions"]{
88
+ display:flex;
89
+ gap:12px;
95
90
  align-items:center;
91
+ min-height:42px;
92
+ padding:var(--t-spacing-1) 0;
96
93
  }
97
94
 
98
- .tds-page-header__primary{
95
+ .tds-sidenav-section-list,
96
+ .tds-sidenav-item{
99
97
  width:100%;
100
- }
101
-
102
- .tds-page-header__primary h1{
98
+ padding:0;
103
99
  margin:0;
104
- font-size:var(--tds-page-header-headline-font-size);
105
- font-weight:var(--t-font-weight-normal);
106
- line-height:32px;
107
- color:var(--tds-page-header-headline-color);
108
- overflow-wrap:break-word;
109
100
  }
110
101
 
111
- .tds-page-header [slot="actions"]{
112
- width:100%;
113
- }
102
+ .tds-sidenav-item :is(a,button){
103
+ position:relative;
104
+ display:flex;
105
+ gap:12px;
106
+ align-items:center;
107
+ width:100%;
108
+ padding:12px;
109
+ overflow:hidden;
110
+ font-size:var(--t-font-size-sm);
111
+ line-height:18px;
112
+ color:var(--t-text-color-default-headline);
113
+ white-space:nowrap;
114
+ text-decoration:none;
115
+ -webkit-appearance:none;
116
+ -moz-appearance:none;
117
+ appearance:none;
118
+ cursor:pointer;
119
+ background-color:var(--tds-sidenav-item-background, transparent);
120
+ border:0;
121
+ border-radius:var(--t-border-radius-default);
122
+ transition:var(--tds-sidenav-item-transition);
123
+ }
114
124
 
115
- .has-multi-actions.tds-page-header [slot="actions"],
116
- .has-multi-actions.tds-page-header .tds-page-header__actions{
117
- display:flex;
118
- flex-flow:row wrap;
119
- gap:var(--t-spacing-half) var(--t-spacing-1);
120
- align-items:flex-start;
121
- justify-content:flex-start;
122
- min-width:0;
123
- }
125
+ :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
126
+ display:block;
127
+ flex:1;
128
+ overflow:hidden;
129
+ text-overflow:ellipsis;
130
+ text-align:left;
131
+ white-space:nowrap;
132
+ }
124
133
 
125
- .tds-page-header nav[slot="navigation"]:not(:has(ul)),
126
- .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
127
- .tds-page-header nav[slot="navigation"] ul,
128
- .tds-page-header nav.tds-page-header__nav ul{
129
- display:flex;
130
- gap:var(--tds-page-header-nav-gap);
131
- padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
132
- margin:0 0 -1px;
133
- overflow:auto;
134
- list-style:none;
135
- background:var(--tds-page-header-nav-background);
136
- }
134
+ :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
135
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
136
+ color:var(--t-text-color-default-headline);
137
+ text-decoration:none;
138
+ }
137
139
 
138
- .tds-page-header nav[slot="navigation"] a,
139
- .tds-page-header nav[slot="navigation"] button,
140
- .tds-page-header nav.tds-page-header__nav a,
141
- .tds-page-header nav.tds-page-header__nav button{
142
- position:relative;
143
- display:inline-flex;
144
- padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
145
- font-size:var(--t-font-size-sm);
146
- line-height:22px;
147
- color:var(--tds-page-header-nav-item-color);
148
- white-space:nowrap;
149
- text-decoration:none;
150
- -webkit-appearance:none;
151
- -moz-appearance:none;
152
- appearance:none;
153
- cursor:pointer;
154
- outline-offset:-2px;
155
- background-color:var(--tds-page-header-nav-item-background-color);
156
- background-clip:padding-box;
157
- border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
158
- border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
159
- border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
160
- }
140
+ :is(.tds-sidenav-item :is(a,button)):active{
141
+ --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
142
+ }
161
143
 
162
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
163
- position:relative;
164
- }
144
+ :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
145
+ overflow:hidden;
146
+ color:var(--tds-sidenav-item-icon-color);
147
+ }
165
148
 
166
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
167
- -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
168
- mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
169
- }
170
-
171
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
172
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
173
- position:absolute;
174
- top:-5px;
175
- right:-2px;
176
- width:10px;
177
- height:10px;
178
- content:"";
179
- background:var(--tds-page-header-nav-item-indicator-color);
180
- border-radius:50%;
181
- }
182
-
183
- @media (prefers-reduced-motion: no-preference){
184
- .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
185
- animation:indicator-pulse 1.25s ease infinite;
186
- }
187
- }
188
-
189
- .tds-page-header nav[slot="navigation"] a.selected,
190
- .tds-page-header nav[slot="navigation"] button.selected,
191
- .tds-page-header nav.tds-page-header__nav a.selected,
192
- .tds-page-header nav.tds-page-header__nav button.selected{
193
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
194
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
195
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
196
- --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
197
- }
198
-
199
- .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
200
- .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
201
- .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
202
- .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
203
- --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
204
- --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
205
- --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
206
- }
207
-
208
- .tds-page-header nav[slot="navigation"] a:not(.selected):active,
209
- .tds-page-header nav[slot="navigation"] button:not(.selected):active,
210
- .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
211
- .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
212
- background-color:var(--tds-page-header-nav-item-background-color-active);
213
- }
214
-
215
- .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
216
- .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
217
- .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
218
- .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
219
- color:var(--tds-page-header-nav-item-color-disabled);
220
- cursor:not-allowed;
221
- background-color:var(--tds-page-header-nav-item-background-color-disabled);
222
- opacity:1;
223
- }
224
-
225
- @media (min-width: 960px){
226
- .tds-page-header__primary{
227
- flex:1 1 max-content;
228
- width:auto;
229
- min-width:0;
230
- max-width:100%;
231
- }
232
-
233
- .tds-page-header__title-bar,
234
- .tds-page-header--profile .tds-page-header__title-bar{
235
- flex-flow:row nowrap;
236
- row-gap:12px;
237
- align-items:flex-start;
238
- }
239
-
240
- .tds-page-header [slot="actions"]{
241
- width:auto;
242
- }
243
-
244
- .has-multi-actions.tds-page-header [slot="actions"],
245
- .has-multi-actions.tds-page-header .tds-page-header__actions{
246
- justify-content:flex-end;
247
- }
248
- }
249
-
250
- .tds-page-header-phone,
251
- .tds-page-header-email{
252
- color:var(--tds-page-header-color);
253
- white-space:nowrap;
254
- }
255
-
256
- .tds-page-header-email{
257
- max-width:100%;
258
- overflow:hidden;
259
- text-overflow:ellipsis;
260
- }
261
-
262
- @keyframes indicator-pulse{
263
- 0%{
264
- opacity:.3;
265
- transform:scale(.9);
266
- }
267
-
268
- 100%{
269
- opacity:0;
270
- transform:scale(1.75);
271
- }
272
- }
273
-
274
-
275
- @media (prefers-reduced-motion: no-preference){
276
-
277
- :root{
278
- interpolate-size:allow-keywords;
279
- }
280
- }
281
-
282
- @layer tds-component{
283
- tds-sidenav, .tds-sidenav{
284
- --tds-sidenav-indent:12px;
285
- --tds-sidenav-item-depth:0;
286
-
287
- --tds-sidenav-item-transition:background-color .2s cubic-bezier(.19, .91, .38, 1);
288
-
289
- --tds-sidenav-item-icon-size:var(--t-element-size-md);
290
- --tds-sidenav-item-background-hover:var(--t-fill-color-button-interaction-ghost-hover);
291
- --tds-sidenav-item-background-active:var(--t-fill-color-button-interaction-ghost-active);
292
- --tds-sidenav-item-background-selected:var(--t-fill-color-button-interaction-ghost-active);
293
-
294
- --tds-sidenav-item-nested-background-hover:var(--tds-sidenav-item-background-hover);
295
- --tds-sidenav-item-nested-background-active:var(--tds-sidenav-item-background-hover);
296
- --tds-sidenav-item-nested-background-selected:transparent;
297
-
298
- --tds-sidenav-item-nested-border-color:var(--t-fill-color-neutral-050);
299
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
300
- --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
301
-
302
- --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
303
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
304
- }
305
-
306
- .tds-sidenav--theme-gray{
307
- --tds-sidenav-item-background-hover:var(--t-fill-color-neutral-080);
308
- --tds-sidenav-item-background-active:var(--t-fill-color-neutral-070);
309
- --tds-sidenav-item-background-selected:var(--t-fill-color-neutral-050);
310
- --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
311
- --tds-sidenav-item-nested-border-color-selected:var(--t-fill-color-neutral-010);
312
- }
313
- }
314
-
315
- .tds-sidenav :where(nav,ul,.tds-sidenav-section){
316
- display:flex;
317
- }
318
-
319
- .tds-sidenav :where(nav,ul,.tds-sidenav-section,.tds-sidenav-collapse){
320
- flex-direction:column;
321
- gap:var(--t-spacing-half);
322
- width:100%;
323
- }
324
-
325
- .tds-sidenav-section-list{
326
- width:100%;
327
- padding:0;
328
- margin:0;
329
- list-style:none;
330
- }
331
-
332
- .tds-sidenav-section-header{
333
- display:flex;
334
- align-items:baseline;
335
- justify-content:space-between;
336
- padding-top:var(--t-spacing-2);
337
- }
338
-
339
- .tds-sidenav-section-header h2{
340
- margin:0;
341
- font-size:var(--t-font-size-sm);
342
- font-weight:var(--t-font-weight-semibold);
343
- line-height:1.35;
344
- color:var(--t-text-color-default-secondary);
345
- text-transform:uppercase;
346
- }
347
-
348
- .tds-sidenav-section:first-of-type .tds-sidenav-section-header{
349
- padding-top:0;
350
- }
351
-
352
- .tds-sidenav-section-header [slot="label-actions"]{
353
- display:flex;
354
- gap:var(--t-spacing-half);
355
- align-items:center;
356
- }
357
-
358
- .tds-sidenav-section [slot="section-actions"]{
359
- display:flex;
360
- gap:12px;
361
- align-items:center;
362
- min-height:42px;
363
- padding:var(--t-spacing-1) 0;
364
- }
365
-
366
- .tds-sidenav-section-list,
367
- .tds-sidenav-item{
368
- width:100%;
369
- padding:0;
370
- margin:0;
371
- }
372
-
373
- .tds-sidenav-item :is(a,button){
374
- position:relative;
375
- display:flex;
376
- gap:12px;
377
- align-items:center;
378
- width:100%;
379
- padding:12px;
380
- overflow:hidden;
381
- font-size:var(--t-font-size-sm);
382
- line-height:18px;
383
- color:var(--t-text-color-default-headline);
384
- white-space:nowrap;
385
- text-decoration:none;
386
- -webkit-appearance:none;
387
- -moz-appearance:none;
388
- appearance:none;
389
- cursor:pointer;
390
- background-color:var(--tds-sidenav-item-background, transparent);
391
- border:0;
392
- border-radius:var(--t-border-radius-default);
393
- transition:var(--tds-sidenav-item-transition);
394
- }
395
-
396
- :is(.tds-sidenav-item :is(a,button)):not(:has(.prefix,.suffix)),:is(.tds-sidenav-item :is(a,button)) :is(:not(.prefix,.suffix)){
397
- display:block;
398
- flex:1;
399
- overflow:hidden;
400
- text-overflow:ellipsis;
401
- text-align:left;
402
- white-space:nowrap;
403
- }
404
-
405
- :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
406
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
407
- color:var(--t-text-color-default-headline);
408
- text-decoration:none;
409
- }
410
-
411
- :is(.tds-sidenav-item :is(a,button)):active{
412
- --tds-sidenav-item-background:var(--tds-sidenav-item-background-active);
413
- }
414
-
415
- :is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"]){
416
- overflow:hidden;
417
- color:var(--tds-sidenav-item-icon-color);
418
- }
419
-
420
- :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
421
- display:block;
422
- width:var(--tds-sidenav-item-icon-size);
423
- height:var(--tds-sidenav-item-icon-size);
424
- }
149
+ :is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])),:is(:is(.tds-sidenav-item :is(a,button)) :is(.prefix,[slot="prefix"])) svg{
150
+ display:block;
151
+ width:var(--tds-sidenav-item-icon-size);
152
+ height:var(--tds-sidenav-item-icon-size);
153
+ }
425
154
 
426
155
  :is(.tds-sidenav-item :is(a,button)):has(.prefix,[slot="prefix"]) + .tds-sidenav-section{
427
156
  --tds-sidenav-indent:19px;
@@ -595,6 +324,277 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
595
324
  flex-direction:column;
596
325
  }
597
326
 
327
+ @layer t-critical{
328
+ tds-page-header:not(.hydrated){
329
+ display:none;
330
+ }
331
+ }
332
+
333
+ @layer t-component{
334
+ .tds-page-header{
335
+ --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
336
+ --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
337
+ --tds-page-header-color:var(--t-text-color-default-primary);
338
+ --tds-page-header-headline-color:var(--t-text-color-default-headline);
339
+ --tds-page-header-headline-font-size:var(--t-font-size-2xl);
340
+ --tds-page-header-padding-x:var(--t-spacing-2);
341
+ --tds-page-header-padding-y:var(--t-spacing-2);
342
+ --tds-page-header-nav-padding-x:var(--tds-page-header-padding-x, var(--t-spacing-3));
343
+ --tds-page-header-nav-gap:var(--t-spacing-1);
344
+ --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
345
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
346
+ --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
347
+ --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
348
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
349
+ --tds-page-header-nav-item-border-width:1px;
350
+
351
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
352
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
353
+
354
+ --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
355
+ --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
356
+ --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
357
+
358
+ --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
359
+ --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
360
+
361
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
362
+ --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
363
+ --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
364
+
365
+ --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
366
+ --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
367
+ --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
368
+ --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
369
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
370
+ }
371
+
372
+ .tds-page-header--profile{
373
+ --tds-page-header-padding-y:20px;
374
+ }
375
+ @media (min-width: 600px){
376
+ .tds-page-header{
377
+ --tds-page-header-background-color:var(--t-surface-color-canvas);
378
+ --tds-page-header-color:var(--t-text-color-default-secondary);
379
+ --tds-page-header-padding-x:var(--t-spacing-3);
380
+ --tds-page-header-headline-font-size:var(--t-font-size-3xl);
381
+ --tds-page-header-nav-gap:var(--t-spacing-half);
382
+ --tds-page-header-nav-background:transparent;
383
+ --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
384
+ --tds-page-header-nav-item-border-width:1px;
385
+ --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
386
+ --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
387
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
388
+ }
389
+ }
390
+ }
391
+
392
+ .tds-page-header{
393
+ display:flex;
394
+ flex-direction:column;
395
+ padding-top:var(--tds-page-header-padding-y);
396
+ color:var(--tds-page-header-color);
397
+ background:var(--tds-page-header-background-color);
398
+ border-bottom:1px solid var(--t-border-color-default-base);
399
+ }
400
+
401
+ .tds-page-header:not(.has-nav){
402
+ padding-bottom:var(--tds-page-header-padding-y);
403
+ }
404
+
405
+ .tds-page-header.inactive{
406
+ background:var(--tds-page-header-background-color-inactive);
407
+ }
408
+
409
+ .tds-page-header__title-bar{
410
+ display:flex;
411
+ flex-direction:column;
412
+ gap:var(--t-spacing-2) var(--t-spacing-1);
413
+ align-items:flex-start;
414
+ justify-content:space-between;
415
+ padding:0 var(--tds-page-header-padding-x);
416
+ }
417
+
418
+ .tds-page-header--profile > .tds-page-header__title-bar{
419
+ align-items:center;
420
+ }
421
+
422
+ .tds-page-header__primary{
423
+ width:100%;
424
+ }
425
+
426
+ .tds-page-header__primary h1{
427
+ margin:0;
428
+ font-size:var(--tds-page-header-headline-font-size);
429
+ font-weight:var(--t-font-weight-normal);
430
+ line-height:32px;
431
+ color:var(--tds-page-header-headline-color);
432
+ overflow-wrap:break-word;
433
+ }
434
+
435
+ .tds-page-header [slot="actions"]{
436
+ width:100%;
437
+ }
438
+
439
+ .has-multi-actions.tds-page-header [slot="actions"],
440
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
441
+ display:flex;
442
+ flex-flow:row wrap;
443
+ gap:var(--t-spacing-half) var(--t-spacing-1);
444
+ align-items:flex-start;
445
+ justify-content:flex-start;
446
+ min-width:0;
447
+ }
448
+
449
+ .tds-page-header nav[slot="navigation"]:not(:has(ul)),
450
+ .tds-page-header nav.tds-page-header__nav:not(:has(ul)),
451
+ .tds-page-header nav[slot="navigation"] ul,
452
+ .tds-page-header nav.tds-page-header__nav ul{
453
+ display:flex;
454
+ gap:var(--tds-page-header-nav-gap);
455
+ padding:var(--t-spacing-2) var(--tds-page-header-nav-padding-x) 0;
456
+ margin:0 0 -1px;
457
+ overflow:auto;
458
+ list-style:none;
459
+ background:var(--tds-page-header-nav-background);
460
+ }
461
+
462
+ .tds-page-header nav[slot="navigation"] a,
463
+ .tds-page-header nav[slot="navigation"] button,
464
+ .tds-page-header nav.tds-page-header__nav a,
465
+ .tds-page-header nav.tds-page-header__nav button{
466
+ position:relative;
467
+ display:inline-flex;
468
+ padding:var(--tds-page-header-nav-item-padding-y) var(--tds-page-header-nav-item-padding-x);
469
+ font-size:var(--t-font-size-sm);
470
+ line-height:22px;
471
+ color:var(--tds-page-header-nav-item-color);
472
+ white-space:nowrap;
473
+ text-decoration:none;
474
+ -webkit-appearance:none;
475
+ -moz-appearance:none;
476
+ appearance:none;
477
+ cursor:pointer;
478
+ outline-offset:-2px;
479
+ background-color:var(--tds-page-header-nav-item-background-color);
480
+ background-clip:padding-box;
481
+ border:var(--tds-page-header-nav-item-border-width) solid var(--tds-page-header-nav-item-border-color);
482
+ border-bottom:1px solid var(--tds-page-header-nav-item-border-bottom-color);
483
+ border-radius:var(--t-border-radius-md) var(--t-border-radius-md) 0 0;
484
+ }
485
+
486
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator){
487
+ position:relative;
488
+ }
489
+
490
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator) :is(a, button){
491
+ -webkit-mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
492
+ mask:radial-gradient(8px at calc(100% - 3px) 0, #0000 98%, #000);
493
+ }
494
+
495
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::before,
496
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
497
+ position:absolute;
498
+ top:-5px;
499
+ right:-2px;
500
+ width:10px;
501
+ height:10px;
502
+ content:"";
503
+ background:var(--tds-page-header-nav-item-indicator-color);
504
+ border-radius:50%;
505
+ }
506
+
507
+ @media (prefers-reduced-motion: no-preference){
508
+ .tds-page-header nav:is([slot="navigation"], .tds-page-header__nav) li:has(.indicator)::after{
509
+ animation:indicator-pulse 1.25s ease infinite;
510
+ }
511
+ }
512
+
513
+ .tds-page-header nav[slot="navigation"] a.selected,
514
+ .tds-page-header nav[slot="navigation"] button.selected,
515
+ .tds-page-header nav.tds-page-header__nav a.selected,
516
+ .tds-page-header nav.tds-page-header__nav button.selected{
517
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-selected);
518
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-selected);
519
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-selected);
520
+ --tds-page-header-nav-item-border-bottom-color:var(--tds-page-header-nav-item-background-color-selected);
521
+ }
522
+
523
+ .tds-page-header nav[slot="navigation"] a:not(.selected):hover,
524
+ .tds-page-header nav[slot="navigation"] button:not(.selected):hover,
525
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):hover,
526
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):hover{
527
+ --tds-page-header-nav-item-color:var(--tds-page-header-nav-item-color-hover);
528
+ --tds-page-header-nav-item-background-color:var(--tds-page-header-nav-item-background-color-hover);
529
+ --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-border-color-hover);
530
+ }
531
+
532
+ .tds-page-header nav[slot="navigation"] a:not(.selected):active,
533
+ .tds-page-header nav[slot="navigation"] button:not(.selected):active,
534
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):active,
535
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):active{
536
+ background-color:var(--tds-page-header-nav-item-background-color-active);
537
+ }
538
+
539
+ .tds-page-header nav[slot="navigation"] a:not(.selected):disabled,
540
+ .tds-page-header nav[slot="navigation"] button:not(.selected):disabled,
541
+ .tds-page-header nav.tds-page-header__nav a:not(.selected):disabled,
542
+ .tds-page-header nav.tds-page-header__nav button:not(.selected):disabled{
543
+ color:var(--tds-page-header-nav-item-color-disabled);
544
+ cursor:not-allowed;
545
+ background-color:var(--tds-page-header-nav-item-background-color-disabled);
546
+ opacity:1;
547
+ }
548
+
549
+ @media (min-width: 960px){
550
+ .tds-page-header__primary{
551
+ flex:1 1 max-content;
552
+ width:auto;
553
+ min-width:0;
554
+ max-width:100%;
555
+ }
556
+
557
+ .tds-page-header__title-bar,
558
+ .tds-page-header--profile .tds-page-header__title-bar{
559
+ flex-flow:row nowrap;
560
+ row-gap:12px;
561
+ align-items:flex-start;
562
+ }
563
+
564
+ .tds-page-header [slot="actions"]{
565
+ width:auto;
566
+ }
567
+
568
+ .has-multi-actions.tds-page-header [slot="actions"],
569
+ .has-multi-actions.tds-page-header .tds-page-header__actions{
570
+ justify-content:flex-end;
571
+ }
572
+ }
573
+
574
+ .tds-page-header-phone,
575
+ .tds-page-header-email{
576
+ color:var(--tds-page-header-color);
577
+ white-space:nowrap;
578
+ }
579
+
580
+ .tds-page-header-email{
581
+ max-width:100%;
582
+ overflow:hidden;
583
+ text-overflow:ellipsis;
584
+ }
585
+
586
+ @keyframes indicator-pulse{
587
+ 0%{
588
+ opacity:.3;
589
+ transform:scale(.9);
590
+ }
591
+
592
+ 100%{
593
+ opacity:0;
594
+ transform:scale(1.75);
595
+ }
596
+ }
597
+
598
598
  .tds-loading-spinner{
599
599
  --tds-loading-spinner-size:1.25em;
600
600
 
@@ -630,8 +630,8 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
630
630
  --t-border-radius-lg:8px;
631
631
  --t-border-radius-xl:16px;
632
632
  --t-border-radius-round:56px;
633
- --t-border-radius-default:4px;
634
- --t-border-width-default:1px;
633
+ --t-border-radius:4px;
634
+ --t-border-width:1px;
635
635
  --t-border-width-thick:2px;
636
636
  --t-spacing-1:8px;
637
637
  --t-spacing-2:16px;
@@ -673,13 +673,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
673
673
  --t-avatar-size-48:48px;
674
674
  --t-avatar-size-72:72px;
675
675
  --t-avatar-size-112:112px;
676
- --t-text-color-default-headline:hsl(0, 0%, 12%);
677
- --t-text-color-default-primary:hsl(0, 0%, 24%);
678
- --t-text-color-default-secondary:hsl(0, 0%, 42%);
679
- --t-text-color-default-disabled:hsl(0, 0%, 81%);
680
- --t-text-color-default-placeholder:hsl(0, 0%, 58%);
681
- --t-text-color-default-inverted:hsl(0, 0%, 100%);
682
- --t-text-color-interaction-primary:hsl(204, 100%, 40%);
676
+ --t-text-color-headline:hsl(0, 0%, 12%);
677
+ --t-text-color:hsl(0, 0%, 24%);
678
+ --t-text-color-secondary:hsl(0, 0%, 42%);
679
+ --t-text-color-disabled:hsl(0, 0%, 81%);
680
+ --t-text-color-placeholder:hsl(0, 0%, 58%);
681
+ --t-text-color-inverted:hsl(0, 0%, 100%);
682
+ --t-text-color-interaction:hsl(204, 100%, 40%);
683
683
  --t-text-color-interaction-hover:hsl(204, 100%, 35%);
684
684
  --t-text-color-interaction-active:hsl(204, 100%, 30%);
685
685
  --t-text-color-interaction-visited:hsl(204, 100%, 30%);
@@ -710,19 +710,19 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
710
710
  --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
711
711
  --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
712
712
  --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
713
- --t-icon-color-default-primary:hsl(0, 0%, 24%);
714
- --t-icon-color-default-secondary:hsl(0, 0%, 42%);
715
- --t-icon-color-default-dim:hsl(0, 0%, 58%);
716
- --t-icon-color-default-disabled:hsl(0, 0%, 81%);
717
- --t-icon-color-default-inverted:hsl(0, 0%, 100%);
718
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 42%);
713
+ --t-icon-color:hsl(0, 0%, 24%);
714
+ --t-icon-color-secondary:hsl(0, 0%, 42%);
715
+ --t-icon-color-dim:hsl(0, 0%, 58%);
716
+ --t-icon-color-disabled:hsl(0, 0%, 81%);
717
+ --t-icon-color-inverted:hsl(0, 0%, 100%);
718
+ --t-icon-color-status-neutral:hsl(0, 0%, 42%);
719
719
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 58%);
720
720
  --t-icon-color-status-neutral-bold:hsl(0, 0%, 24%);
721
- --t-icon-color-status-info-primary:hsl(204, 100%, 40%);
722
- --t-icon-color-status-success-primary:hsl(96, 57%, 33%);
721
+ --t-icon-color-status-info:hsl(204, 100%, 40%);
722
+ --t-icon-color-status-success:hsl(96, 57%, 33%);
723
723
  --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
724
- --t-icon-color-status-warning-primary:hsl(42, 84%, 49%);
725
- --t-icon-color-status-error-primary:hsl(8, 60%, 47%);
724
+ --t-icon-color-status-warning:hsl(42, 84%, 49%);
725
+ --t-icon-color-status-error:hsl(8, 60%, 47%);
726
726
  --t-fill-color-neutral-100:hsl(0, 0%, 100%);
727
727
  --t-fill-color-neutral-000:hsl(0, 0%, 12%);
728
728
  --t-fill-color-neutral-010:hsl(0, 0%, 24%);
@@ -735,13 +735,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
735
735
  --t-fill-color-neutral-070:hsl(0, 0%, 95%);
736
736
  --t-fill-color-neutral-080:hsl(0, 0%, 97%);
737
737
  --t-fill-color-neutral-090:hsl(0, 0%, 98%);
738
- --t-fill-color-interaction-default:hsl(204, 100%, 40%);
738
+ --t-fill-color-interaction:hsl(204, 100%, 40%);
739
739
  --t-fill-color-interaction-hover:hsl(204, 100%, 35%);
740
740
  --t-fill-color-interaction-active:hsl(204, 100%, 30%);
741
741
  --t-fill-color-interaction-disabled:hsl(0, 0%, 81%);
742
742
  --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
743
743
  --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
744
- --t-fill-color-control-primary:hsl(204, 100%, 40%);
744
+ --t-fill-color-control:hsl(204, 100%, 40%);
745
745
  --t-fill-color-control-secondary:hsl(97, 57%, 40%);
746
746
  --t-fill-color-control-error:hsl(8, 60%, 47%);
747
747
  --t-fill-color-control-disabled:hsl(0, 0%, 81%);
@@ -760,7 +760,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
760
760
  --t-fill-color-status-error-solid:hsl(8, 60%, 47%);
761
761
  --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
762
762
  --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
763
- --t-fill-color-tooltip-primary:hsla(0, 0%, 12%, 0.9);
763
+ --t-fill-color-tooltip:hsla(0, 0%, 12%, 0.9);
764
764
  --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
765
765
  --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
766
766
  --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
@@ -841,7 +841,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
841
841
  --t-fill-color-product-services-060:hsl(89, 62%, 31%);
842
842
  --t-fill-color-product-services-070:hsl(89, 62%, 26%);
843
843
  --t-fill-color-product-services-080:hsl(89, 63%, 21%);
844
- --t-fill-color-product-staff-base:hsl(328, 100%, 45%);
844
+ --t-fill-color-product-staff:hsl(328, 100%, 45%);
845
845
  --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
846
846
  --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
847
847
  --t-fill-color-product-accounts-gradient-brand:linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
@@ -921,47 +921,47 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
921
921
  --t-fill-color-tag-indigo-020:hsl(233, 79%, 87%);
922
922
  --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
923
923
  --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
924
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 93%);
924
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 93%);
925
925
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
926
926
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
927
927
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 95%);
928
- --t-fill-color-button-neutral-outline-dim-default:hsla(0, 0%, 100%, 0);
928
+ --t-fill-color-button-neutral-outline-dim:hsla(0, 0%, 100%, 0);
929
929
  --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 95%);
930
930
  --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 93%);
931
931
  --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 98%);
932
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 100%, 0);
932
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 100%, 0);
933
933
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
934
934
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
935
935
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 100%, 0);
936
- --t-fill-color-button-neutral-responsive-header-default:hsla(0, 0%, 0%, 0.1);
936
+ --t-fill-color-button-neutral-responsive-header:hsla(0, 0%, 0%, 0.1);
937
937
  --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
938
938
  --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
939
939
  --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 0%, 0.05);
940
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 40%);
940
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 40%);
941
941
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
942
942
  --t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
943
943
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 95%);
944
- --t-fill-color-button-interaction-outline-dim-default:hsla(0, 0%, 100%, 0);
944
+ --t-fill-color-button-interaction-outline-dim:hsla(0, 0%, 100%, 0);
945
945
  --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 100%, 97%);
946
946
  --t-fill-color-button-interaction-outline-dim-active:hsl(203, 94%, 94%);
947
947
  --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 98%);
948
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 100%, 0);
948
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 100%, 0);
949
949
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
950
950
  --t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
951
951
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 100%, 0);
952
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 47%);
952
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 47%);
953
953
  --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
954
954
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
955
955
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 95%);
956
- --t-fill-color-button-delete-outline-dim-default:hsla(0, 0%, 100%, 0);
956
+ --t-fill-color-button-delete-outline-dim:hsla(0, 0%, 100%, 0);
957
957
  --t-fill-color-button-delete-outline-dim-hover:hsl(7, 60%, 97%);
958
958
  --t-fill-color-button-delete-outline-dim-active:hsl(9, 59%, 93%);
959
959
  --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 98%);
960
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 100%, 0);
960
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 100%, 0);
961
961
  --t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
962
962
  --t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
963
963
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
964
- --t-fill-color-button-pill-default:hsl(0, 0%, 93%);
964
+ --t-fill-color-button-pill:hsl(0, 0%, 93%);
965
965
  --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
966
966
  --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
967
967
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
@@ -994,13 +994,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
994
994
  --t-fill-color-transparency-dark-static-090:hsla(0, 0%, 0%, 0.9);
995
995
  --t-surface-color-card:hsl(0, 0%, 100%);
996
996
  --t-surface-color-canvas:hsl(0, 0%, 100%);
997
- --t-border-color-default-base:hsl(0, 0%, 88%);
998
- --t-border-color-default-dark:hsl(0, 0%, 81%);
999
- --t-border-color-default-darker:hsl(0, 0%, 68%);
1000
- --t-border-color-default-darkest:hsl(0, 0%, 58%);
1001
- --t-border-color-default-disabled:hsl(0, 0%, 88%);
1002
- --t-border-color-default-dim:hsl(0, 0%, 95%);
1003
- --t-border-color-default-white:hsl(0, 0%, 100%);
997
+ --t-border-color:hsl(0, 0%, 88%);
998
+ --t-border-color-dark:hsl(0, 0%, 81%);
999
+ --t-border-color-darker:hsl(0, 0%, 68%);
1000
+ --t-border-color-darkest:hsl(0, 0%, 58%);
1001
+ --t-border-color-disabled:hsl(0, 0%, 88%);
1002
+ --t-border-color-dim:hsl(0, 0%, 95%);
1003
+ --t-border-color-white:hsl(0, 0%, 100%);
1004
1004
  --t-border-color-status-neutral:hsl(0, 0%, 58%);
1005
1005
  --t-border-color-status-info:hsl(204, 100%, 40%);
1006
1006
  --t-border-color-status-success:hsl(97, 57%, 40%);
@@ -1021,21 +1021,21 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1021
1021
  --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
1022
1022
  --t-form-background-color-error:var(--t-fill-color-neutral-100);
1023
1023
  --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
1024
- --t-form-border-color:var(--t-border-color-default-base);
1025
- --t-form-border-color-disabled:var(--t-border-color-default-base);
1024
+ --t-form-border-color:var(--t-border-color);
1025
+ --t-form-border-color-disabled:var(--t-border-color);
1026
1026
  --t-form-border-color-error:var(--t-border-color-status-error);
1027
- --t-form-border-color-focus:var(--t-fill-color-interaction-default);
1028
- --t-form-border-color-hover:var(--t-border-color-default-dark);
1027
+ --t-form-border-color-focus:var(--t-fill-color-interaction);
1028
+ --t-form-border-color-hover:var(--t-border-color-dark);
1029
1029
  --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
1030
1030
  --t-form-border-radius:var(--t-border-radius-md);
1031
- --t-form-border-width:var(--t-border-width-default);
1032
- --t-form-font-color:var(--t-text-color-default-primary);
1033
- --t-form-font-color-disabled:var(--t-text-color-default-disabled);
1031
+ --t-form-border-width:var(--t-border-width);
1032
+ --t-form-font-color:var(--t-text-color);
1033
+ --t-form-font-color-disabled:var(--t-text-color-disabled);
1034
1034
  --t-form-font-color-error:var(--t-text-color-status-error);
1035
- --t-form-font-color-readonly:var(--t-text-color-default-primary);
1036
- --t-form-picker-icon-color:var(--t-icon-color-default-primary);
1037
- --t-form-placeholder-color:var(--t-text-color-default-placeholder);
1038
- --t-border-size-default:var(--t-border-width-default);
1035
+ --t-form-font-color-readonly:var(--t-text-color);
1036
+ --t-form-picker-icon-color:var(--t-icon-color);
1037
+ --t-form-placeholder-color:var(--t-text-color-placeholder);
1038
+ --t-border-size-default:var(--t-border-width);
1039
1039
  --t-border-size-thick:var(--t-border-width-thick);
1040
1040
  --t-font-weight-semi-bold:var(--t-font-weight-semibold);
1041
1041
  --t-icon-color-status-neutral-dark:hsl(0, 0%, 24%);
@@ -1054,16 +1054,57 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1054
1054
  --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
1055
1055
  --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
1056
1056
  --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
1057
+ --t-border-color-default-base:var(--t-border-color);
1058
+ --t-border-color-default-dark:var(--t-border-color-dark);
1059
+ --t-border-color-default-darker:var(--t-border-color-darker);
1060
+ --t-border-color-default-darkest:var(--t-border-color-darkest);
1061
+ --t-border-color-default-dim:var(--t-border-color-dim);
1062
+ --t-border-color-default-disabled:var(--t-border-color-disabled);
1063
+ --t-border-color-default-white:var(--t-border-color-white);
1064
+ --t-border-radius-default:var(--t-border-radius);
1065
+ --t-border-width-default:var(--t-border-width);
1066
+ --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
1067
+ --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline-dim);
1068
+ --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
1069
+ --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
1070
+ --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline-dim);
1071
+ --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
1072
+ --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
1073
+ --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline-dim);
1074
+ --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
1075
+ --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
1076
+ --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
1077
+ --t-fill-color-control-primary:var(--t-fill-color-control);
1078
+ --t-fill-color-interaction-default:var(--t-fill-color-interaction);
1079
+ --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
1080
+ --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
1081
+ --t-icon-color-default-dim:var(--t-icon-color-dim);
1082
+ --t-icon-color-default-disabled:var(--t-icon-color-disabled);
1083
+ --t-icon-color-default-inverted:var(--t-icon-color-inverted);
1084
+ --t-icon-color-default-primary:var(--t-icon-color);
1085
+ --t-icon-color-default-secondary:var(--t-icon-color-secondary);
1086
+ --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
1087
+ --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
1088
+ --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
1089
+ --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
1090
+ --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
1091
+ --t-text-color-default-disabled:var(--t-text-color-disabled);
1092
+ --t-text-color-default-headline:var(--t-text-color-headline);
1093
+ --t-text-color-default-inverted:var(--t-text-color-inverted);
1094
+ --t-text-color-default-placeholder:var(--t-text-color-placeholder);
1095
+ --t-text-color-default-primary:var(--t-text-color);
1096
+ --t-text-color-default-secondary:var(--t-text-color-secondary);
1097
+ --t-text-color-interaction-primary:var(--t-text-color-interaction);
1057
1098
  }
1058
1099
 
1059
1100
  :root[data-color-mode="dark"]{
1060
1101
  color-scheme:dark;
1061
- --t-text-color-default-headline:hsl(0, 0%, 94%);
1062
- --t-text-color-default-primary:hsl(0, 0%, 80%);
1063
- --t-text-color-default-secondary:hsl(0, 0%, 54%);
1064
- --t-text-color-default-disabled:hsl(0, 0%, 25%);
1065
- --t-text-color-default-placeholder:hsl(0, 0%, 38%);
1066
- --t-text-color-interaction-primary:hsl(204, 68%, 55%);
1102
+ --t-text-color-headline:hsl(0, 0%, 94%);
1103
+ --t-text-color:hsl(0, 0%, 80%);
1104
+ --t-text-color-secondary:hsl(0, 0%, 54%);
1105
+ --t-text-color-disabled:hsl(0, 0%, 25%);
1106
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
1107
+ --t-text-color-interaction:hsl(204, 68%, 55%);
1067
1108
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
1068
1109
  --t-text-color-interaction-active:hsl(204, 68%, 45%);
1069
1110
  --t-text-color-interaction-visited:hsl(204, 68%, 50%);
@@ -1094,15 +1135,15 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1094
1135
  --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
1095
1136
  --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
1096
1137
  --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
1097
- --t-icon-color-default-primary:hsl(0, 0%, 80%);
1098
- --t-icon-color-default-secondary:hsl(0, 0%, 54%);
1099
- --t-icon-color-default-dim:hsl(0, 0%, 38%);
1100
- --t-icon-color-default-disabled:hsl(0, 0%, 25%);
1101
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
1138
+ --t-icon-color:hsl(0, 0%, 80%);
1139
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
1140
+ --t-icon-color-dim:hsl(0, 0%, 38%);
1141
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
1142
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
1102
1143
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
1103
1144
  --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
1104
- --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
1105
- --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
1145
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
1146
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
1106
1147
  --t-fill-color-neutral-100:hsl(0, 0%, 10%);
1107
1148
  --t-fill-color-neutral-000:hsl(0, 0%, 98%);
1108
1149
  --t-fill-color-neutral-010:hsl(0, 0%, 88%);
@@ -1115,13 +1156,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1115
1156
  --t-fill-color-neutral-070:hsl(0, 0%, 17%);
1116
1157
  --t-fill-color-neutral-080:hsl(0, 0%, 15%);
1117
1158
  --t-fill-color-neutral-090:hsl(0, 0%, 12%);
1118
- --t-fill-color-interaction-default:hsl(204, 100%, 35%);
1159
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
1119
1160
  --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
1120
1161
  --t-fill-color-interaction-active:hsl(204, 80%, 45%);
1121
1162
  --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
1122
1163
  --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
1123
1164
  --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
1124
- --t-fill-color-control-primary:hsl(204, 100%, 35%);
1165
+ --t-fill-color-control:hsl(204, 100%, 35%);
1125
1166
  --t-fill-color-control-disabled:hsl(0, 0%, 20%);
1126
1167
  --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
1127
1168
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
@@ -1135,7 +1176,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1135
1176
  --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
1136
1177
  --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
1137
1178
  --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
1138
- --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
1179
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
1139
1180
  --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1140
1181
  --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1141
1182
  --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
@@ -1200,43 +1241,43 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1200
1241
  --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
1201
1242
  --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
1202
1243
  --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
1203
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
1244
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
1204
1245
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
1205
1246
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
1206
1247
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
1207
- --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
1248
+ --t-fill-color-button-neutral-outline-dim:hsl(0, 0%, 15%);
1208
1249
  --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
1209
1250
  --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
1210
1251
  --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
1211
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
1252
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
1212
1253
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
1213
1254
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
1214
1255
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
1215
1256
  --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
1216
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
1257
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
1217
1258
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
1218
1259
  --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
1219
1260
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
1220
- --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
1261
+ --t-fill-color-button-interaction-outline-dim:hsl(204, 32%, 15%);
1221
1262
  --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
1222
1263
  --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
1223
1264
  --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
1224
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
1265
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
1225
1266
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
1226
1267
  --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
1227
1268
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
1228
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
1269
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
1229
1270
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
1230
1271
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
1231
- --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
1272
+ --t-fill-color-button-delete-outline-dim:hsl(8, 20%, 16%);
1232
1273
  --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
1233
1274
  --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
1234
1275
  --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
1235
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
1276
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
1236
1277
  --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
1237
1278
  --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
1238
1279
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
1239
- --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
1280
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
1240
1281
  --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
1241
1282
  --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
1242
1283
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
@@ -1260,13 +1301,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1260
1301
  --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
1261
1302
  --t-surface-color-card:hsl(0, 0%, 12%);
1262
1303
  --t-surface-color-canvas:hsl(0, 0%, 10%);
1263
- --t-border-color-default-base:hsl(0, 0%, 21%);
1264
- --t-border-color-default-dark:hsl(0, 0%, 25%);
1265
- --t-border-color-default-darker:hsl(0, 0%, 33%);
1266
- --t-border-color-default-darkest:hsl(0, 0%, 38%);
1267
- --t-border-color-default-disabled:hsl(0, 0%, 21%);
1268
- --t-border-color-default-dim:hsl(0, 0%, 16%);
1269
- --t-border-color-default-white:hsl(0, 0%, 12%);
1304
+ --t-border-color:hsl(0, 0%, 21%);
1305
+ --t-border-color-dark:hsl(0, 0%, 25%);
1306
+ --t-border-color-darker:hsl(0, 0%, 33%);
1307
+ --t-border-color-darkest:hsl(0, 0%, 38%);
1308
+ --t-border-color-disabled:hsl(0, 0%, 21%);
1309
+ --t-border-color-dim:hsl(0, 0%, 16%);
1310
+ --t-border-color-white:hsl(0, 0%, 12%);
1270
1311
  --t-border-color-status-neutral:hsl(0, 0%, 38%);
1271
1312
  --t-border-color-status-info:hsl(204, 100%, 35%);
1272
1313
  --t-border-color-button-neutral:hsl(0, 0%, 19%);
@@ -1282,12 +1323,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1282
1323
  @media (prefers-color-scheme: dark){
1283
1324
  :root[data-color-mode="system"]{
1284
1325
  color-scheme:dark;
1285
- --t-text-color-default-headline:hsl(0, 0%, 94%);
1286
- --t-text-color-default-primary:hsl(0, 0%, 80%);
1287
- --t-text-color-default-secondary:hsl(0, 0%, 54%);
1288
- --t-text-color-default-disabled:hsl(0, 0%, 25%);
1289
- --t-text-color-default-placeholder:hsl(0, 0%, 38%);
1290
- --t-text-color-interaction-primary:hsl(204, 68%, 55%);
1326
+ --t-text-color-headline:hsl(0, 0%, 94%);
1327
+ --t-text-color:hsl(0, 0%, 80%);
1328
+ --t-text-color-secondary:hsl(0, 0%, 54%);
1329
+ --t-text-color-disabled:hsl(0, 0%, 25%);
1330
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
1331
+ --t-text-color-interaction:hsl(204, 68%, 55%);
1291
1332
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
1292
1333
  --t-text-color-interaction-active:hsl(204, 68%, 45%);
1293
1334
  --t-text-color-interaction-visited:hsl(204, 68%, 50%);
@@ -1318,15 +1359,15 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1318
1359
  --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
1319
1360
  --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
1320
1361
  --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
1321
- --t-icon-color-default-primary:hsl(0, 0%, 80%);
1322
- --t-icon-color-default-secondary:hsl(0, 0%, 54%);
1323
- --t-icon-color-default-dim:hsl(0, 0%, 38%);
1324
- --t-icon-color-default-disabled:hsl(0, 0%, 25%);
1325
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
1362
+ --t-icon-color:hsl(0, 0%, 80%);
1363
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
1364
+ --t-icon-color-dim:hsl(0, 0%, 38%);
1365
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
1366
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
1326
1367
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
1327
1368
  --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
1328
- --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
1329
- --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
1369
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
1370
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
1330
1371
  --t-fill-color-neutral-100:hsl(0, 0%, 10%);
1331
1372
  --t-fill-color-neutral-000:hsl(0, 0%, 98%);
1332
1373
  --t-fill-color-neutral-010:hsl(0, 0%, 88%);
@@ -1339,13 +1380,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1339
1380
  --t-fill-color-neutral-070:hsl(0, 0%, 17%);
1340
1381
  --t-fill-color-neutral-080:hsl(0, 0%, 15%);
1341
1382
  --t-fill-color-neutral-090:hsl(0, 0%, 12%);
1342
- --t-fill-color-interaction-default:hsl(204, 100%, 35%);
1383
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
1343
1384
  --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
1344
1385
  --t-fill-color-interaction-active:hsl(204, 80%, 45%);
1345
1386
  --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
1346
1387
  --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
1347
1388
  --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
1348
- --t-fill-color-control-primary:hsl(204, 100%, 35%);
1389
+ --t-fill-color-control:hsl(204, 100%, 35%);
1349
1390
  --t-fill-color-control-disabled:hsl(0, 0%, 20%);
1350
1391
  --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
1351
1392
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
@@ -1359,7 +1400,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1359
1400
  --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
1360
1401
  --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
1361
1402
  --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
1362
- --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
1403
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
1363
1404
  --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
1364
1405
  --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
1365
1406
  --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
@@ -1424,43 +1465,43 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1424
1465
  --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
1425
1466
  --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
1426
1467
  --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
1427
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
1468
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
1428
1469
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
1429
1470
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
1430
1471
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
1431
- --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
1472
+ --t-fill-color-button-neutral-outline-dim:hsl(0, 0%, 15%);
1432
1473
  --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
1433
1474
  --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
1434
1475
  --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
1435
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
1476
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
1436
1477
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
1437
1478
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
1438
1479
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
1439
1480
  --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
1440
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
1481
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
1441
1482
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
1442
1483
  --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
1443
1484
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
1444
- --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
1485
+ --t-fill-color-button-interaction-outline-dim:hsl(204, 32%, 15%);
1445
1486
  --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
1446
1487
  --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
1447
1488
  --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
1448
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
1489
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
1449
1490
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
1450
1491
  --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
1451
1492
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
1452
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
1493
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
1453
1494
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
1454
1495
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
1455
- --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
1496
+ --t-fill-color-button-delete-outline-dim:hsl(8, 20%, 16%);
1456
1497
  --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
1457
1498
  --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
1458
1499
  --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
1459
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
1500
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
1460
1501
  --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
1461
1502
  --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
1462
1503
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
1463
- --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
1504
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
1464
1505
  --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
1465
1506
  --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
1466
1507
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
@@ -1484,13 +1525,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1484
1525
  --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
1485
1526
  --t-surface-color-card:hsl(0, 0%, 12%);
1486
1527
  --t-surface-color-canvas:hsl(0, 0%, 10%);
1487
- --t-border-color-default-base:hsl(0, 0%, 21%);
1488
- --t-border-color-default-dark:hsl(0, 0%, 25%);
1489
- --t-border-color-default-darker:hsl(0, 0%, 33%);
1490
- --t-border-color-default-darkest:hsl(0, 0%, 38%);
1491
- --t-border-color-default-disabled:hsl(0, 0%, 21%);
1492
- --t-border-color-default-dim:hsl(0, 0%, 16%);
1493
- --t-border-color-default-white:hsl(0, 0%, 12%);
1528
+ --t-border-color:hsl(0, 0%, 21%);
1529
+ --t-border-color-dark:hsl(0, 0%, 25%);
1530
+ --t-border-color-darker:hsl(0, 0%, 33%);
1531
+ --t-border-color-darkest:hsl(0, 0%, 38%);
1532
+ --t-border-color-disabled:hsl(0, 0%, 21%);
1533
+ --t-border-color-dim:hsl(0, 0%, 16%);
1534
+ --t-border-color-white:hsl(0, 0%, 12%);
1494
1535
  --t-border-color-status-neutral:hsl(0, 0%, 38%);
1495
1536
  --t-border-color-status-info:hsl(204, 100%, 35%);
1496
1537
  --t-border-color-button-neutral:hsl(0, 0%, 19%);
@@ -2144,23 +2185,23 @@ a[class="tds-btn"]{
2144
2185
 
2145
2186
  .t-banner{
2146
2187
  --t-banner-font-size:var(--t-font-size-md);
2147
- --t-banner-font-color:var(--t-text-color-default-primary);
2188
+ --t-banner-font-color:var(--t-text-color);
2148
2189
  --t-banner-background-color:var(--t-fill-color-status-neutral-ghost);
2149
2190
  --t-banner-spacing:var(--t-spacing-2);
2150
2191
  --t-banner-border-radius:var(--t-border-radius-md);
2151
- --t-banner-title-font-color:var(--t-text-color-default-headline);
2192
+ --t-banner-title-font-color:var(--t-text-color-headline);
2152
2193
  --t-banner-title-font-size:var(--t-font-size-md);
2153
2194
  --t-banner-title-font-weight:var(--t-font-weight-semibold);
2154
2195
  --t-banner-icon-fill-color:hsla(0, 0%, 0%, 0);
2155
2196
  --t-banner-background-color-info:var(--t-fill-color-status-info-ghost);
2156
- --t-banner-icon-fill-color-info:var(--t-icon-color-status-info-primary);
2197
+ --t-banner-icon-fill-color-info:var(--t-icon-color-status-info);
2157
2198
  --t-banner-background-color-warning:var(--t-fill-color-status-warning-ghost);
2158
- --t-banner-icon-fill-color-warning:var(--t-icon-color-status-warning-primary);
2199
+ --t-banner-icon-fill-color-warning:var(--t-icon-color-status-warning);
2159
2200
  --t-banner-background-color-error:var(--t-fill-color-status-error-ghost);
2160
- --t-banner-icon-fill-color-error:var(--t-icon-color-status-error-primary);
2201
+ --t-banner-icon-fill-color-error:var(--t-icon-color-status-error);
2161
2202
  --t-banner-background-color-success:var(--t-fill-color-status-success-ghost);
2162
- --t-banner-icon-fill-color-success:var(--t-icon-color-status-success-primary);
2163
- --t-banner-link-font-color-hover:var(--t-text-color-default-headline);
2203
+ --t-banner-icon-fill-color-success:var(--t-icon-color-status-success);
2204
+ --t-banner-link-font-color-hover:var(--t-text-color-headline);
2164
2205
  display:flex;
2165
2206
  gap:var(--t-banner-spacing);
2166
2207
  padding:var(--t-banner-spacing);