@planningcenter/tapestry 2.6.0 → 2.6.1-qa-522.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 (52) hide show
  1. package/dist/components/button/BaseButton.d.ts.map +1 -1
  2. package/dist/components/button/BaseButton.js +3 -2
  3. package/dist/components/button/BaseButton.js.map +1 -1
  4. package/dist/components/button/IconButton.js +1 -1
  5. package/dist/components/button/IconButton.js.map +1 -1
  6. package/dist/components/button/PageHeaderActionsDropdownButton.js +1 -1
  7. package/dist/components/button/PageHeaderActionsDropdownButton.js.map +1 -1
  8. package/dist/components/link/BaseLink.d.ts.map +1 -1
  9. package/dist/components/link/BaseLink.js +5 -5
  10. package/dist/components/link/BaseLink.js.map +1 -1
  11. package/dist/index.css +540 -248
  12. package/dist/index.css.map +1 -1
  13. package/dist/index.d.ts +0 -1
  14. package/dist/index.d.ts.map +1 -1
  15. package/dist/jsTokens.d.ts +1 -1
  16. package/dist/jsTokens.d.ts.map +1 -1
  17. package/dist/jsTokens.js +1 -1
  18. package/dist/jsTokens.js.map +1 -1
  19. package/dist/print-no-media-queries.css +2 -0
  20. package/dist/print.css +2 -0
  21. package/dist/reactRender.css +1239 -947
  22. package/dist/reactRender.css.map +1 -1
  23. package/dist/reactRenderLegacy.css +1239 -947
  24. package/dist/reactRenderLegacy.css.map +1 -1
  25. package/dist/tokens/tokens-deprecated.json +326 -0
  26. package/dist/tokens-dark.css +92 -90
  27. package/dist/tokens-dark.css.map +1 -0
  28. package/dist/tokens-deprecated.css +106 -0
  29. package/dist/tokens-deprecated.css.map +1 -0
  30. package/dist/tokens-deprecated.js +3 -0
  31. package/dist/tokens.css +167 -175
  32. package/dist/tokens.css.map +1 -1
  33. package/dist/tokens.js +2 -0
  34. package/dist/unstable.css +559 -267
  35. package/dist/unstable.css.map +1 -1
  36. package/dist/unstable.d.ts +1 -1
  37. package/dist/unstable.d.ts.map +1 -1
  38. package/dist/unstable.js +2 -1
  39. package/dist/unstable.js.map +1 -1
  40. package/package.json +10 -9
  41. package/dist/deprecated.css +0 -25
  42. package/dist/tokens/ts/react-native-tokens.d.ts +0 -1629
  43. package/dist/tokens/ts/react-native-tokens.d.ts.map +0 -1
  44. package/dist/tokens/ts/react-native-tokens.js +0 -418
  45. package/dist/tokens/ts/react-native-tokens.js.map +0 -1
  46. package/dist/tokens/ts/tokens.d.ts +0 -435
  47. package/dist/tokens/ts/tokens.d.ts.map +0 -1
  48. package/dist/tokens/ts/tokens.js +0 -437
  49. package/dist/tokens/ts/tokens.js.map +0 -1
  50. package/dist/tokens.d.ts +0 -3
  51. package/dist/tokens.d.ts.map +0 -1
  52. /package/dist/{tokens-dark-combined.js → tokens-dark.js} +0 -0
package/dist/unstable.css CHANGED
@@ -9,25 +9,25 @@
9
9
  --tds-checkbox-input-border-color:var(--t-border-color-control-neutral);
10
10
  --tds-checkbox-input-background-color:transparent;
11
11
  --tds-checkbox-input-border-color-hover:var(--t-border-color-button-info);
12
- --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
12
+ --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-interaction-outline-hover);
13
13
  --tds-checkbox-input-border-color-checked:var(--t-border-color-control-info);
14
- --tds-checkbox-input-background-color-checked:var(--t-fill-color-control-primary);
14
+ --tds-checkbox-input-background-color-checked:var(--t-fill-color-control);
15
15
  --tds-checkbox-input-border-color-disabled:var(--t-border-color-control-disabled);
16
16
  --tds-checkbox-input-background-color-disabled:var(--t-fill-color-neutral-070);
17
17
 
18
18
  --tds-checkbox-input-icon:none;
19
19
  --tds-checkbox-input-icon-visibility:hidden;
20
20
  --tds-checkbox-input-icon-opacity:0;
21
- --tds-checkbox-input-icon-fill:var(--t-icon-color-default-inverted);
21
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
22
22
  --tds-checkbox-input-icon-checked:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
23
23
  --tds-checkbox-input-icon-indeterminate:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
24
24
 
25
25
  --tds-checkbox-font-size:var(--t-font-size-md);
26
- --tds-checkbox-label-color:var(--t-text-color-default-primary);
26
+ --tds-checkbox-label-color:var(--t-text-color);
27
27
 
28
28
  --tds-checkbox-description-font-size:var(--t-font-size-sm);
29
29
  --tds-checkbox-description-line-height:1.35;
30
- --tds-checkbox-description-color:var(--t-text-color-default-secondary);
30
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
31
31
 
32
32
  position:relative;
33
33
  display:inline-grid;
@@ -61,7 +61,7 @@
61
61
  appearance:none;
62
62
  cursor:var(--tds-checkbox-cursor);
63
63
  background-color:var(--tds-checkbox-input-background-color);
64
- border:var(--t-border-width-default) solid var(--tds-checkbox-input-border-color);
64
+ border:var(--t-border-width) solid var(--tds-checkbox-input-border-color);
65
65
  border-radius:var(--tds-checkbox-input-border-radius);
66
66
  transition-timing-function:ease-in-out;
67
67
  transition-duration:180ms;
@@ -108,13 +108,13 @@
108
108
  :is(.tds-checkbox input[type="checkbox"]):disabled{
109
109
  --tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-disabled);
110
110
  --tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-disabled);
111
- --tds-checkbox-input-icon-fill:var(--t-icon-color-default-disabled);
111
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-disabled);
112
112
  pointer-events:none;
113
113
  }
114
114
 
115
115
  .tds-checkbox:has(input:disabled){
116
- --tds-checkbox-label-color:var(--t-text-color-default-disabled);
117
- --tds-checkbox-description-color:var(--t-text-color-default-disabled);
116
+ --tds-checkbox-label-color:var(--t-text-color-disabled);
117
+ --tds-checkbox-description-color:var(--t-text-color-disabled);
118
118
  --tds-checkbox-cursor:not-allowed;
119
119
  --tds-checkbox-input-background-color-checked:var(--t-fill-color-control-disabled);
120
120
  --tds-checkbox-input-border-color-checked:var(--tds-checkbox-input-border-color-disabled);
@@ -149,9 +149,9 @@
149
149
  .tds-checkbox:has(input:invalid){
150
150
  --tds-checkbox-input-border-color:var(--t-border-color-button-delete);
151
151
  --tds-checkbox-input-border-color-hover:var(--t-border-color-button-delete);
152
- --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-delete-outline-dim-hover);
153
- --tds-checkbox-input-border-color-checked:var(--t-fill-color-button-delete-solid-default);
154
- --tds-checkbox-input-background-color-checked:var(--t-fill-color-button-delete-solid-default);
152
+ --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-delete-outline-hover);
153
+ --tds-checkbox-input-border-color-checked:var(--t-fill-color-button-delete-solid);
154
+ --tds-checkbox-input-background-color-checked:var(--t-fill-color-button-delete-solid);
155
155
  --tds-checkbox-description-color:var(--t-text-color-status-error);
156
156
  }
157
157
 
@@ -181,8 +181,8 @@
181
181
  --t-border-radius-lg:8px;
182
182
  --t-border-radius-xl:16px;
183
183
  --t-border-radius-round:56px;
184
- --t-border-radius-default:4px;
185
- --t-border-width-default:1px;
184
+ --t-border-radius:4px;
185
+ --t-border-width:1px;
186
186
  --t-border-width-thick:2px;
187
187
  --t-spacing-1:8px;
188
188
  --t-spacing-2:16px;
@@ -193,6 +193,7 @@
193
193
  --t-spacing-7:56px;
194
194
  --t-spacing-fourth:2px;
195
195
  --t-spacing-half:4px;
196
+ --t-spacing-1-half:12px;
196
197
  --t-element-size-3xl:48px;
197
198
  --t-element-size-2xl:32px;
198
199
  --t-element-size-xl:24px;
@@ -224,13 +225,13 @@
224
225
  --t-avatar-size-48:48px;
225
226
  --t-avatar-size-72:72px;
226
227
  --t-avatar-size-112:112px;
227
- --t-text-color-default-headline:hsl(0, 0%, 12%);
228
- --t-text-color-default-primary:hsl(0, 0%, 24%);
229
- --t-text-color-default-secondary:hsl(0, 0%, 42%);
230
- --t-text-color-default-disabled:hsl(0, 0%, 81%);
231
- --t-text-color-default-placeholder:hsl(0, 0%, 58%);
232
- --t-text-color-default-inverted:hsl(0, 0%, 100%);
233
- --t-text-color-interaction-primary:hsl(204, 100%, 40%);
228
+ --t-text-color-headline:hsl(0, 0%, 12%);
229
+ --t-text-color:hsl(0, 0%, 24%);
230
+ --t-text-color-secondary:hsl(0, 0%, 42%);
231
+ --t-text-color-disabled:hsl(0, 0%, 68%);
232
+ --t-text-color-placeholder:hsl(0, 0%, 58%);
233
+ --t-text-color-inverted:hsl(0, 0%, 100%);
234
+ --t-text-color-interaction:hsl(204, 100%, 40%);
234
235
  --t-text-color-interaction-hover:hsl(204, 100%, 35%);
235
236
  --t-text-color-interaction-active:hsl(204, 100%, 30%);
236
237
  --t-text-color-interaction-visited:hsl(204, 100%, 30%);
@@ -261,19 +262,19 @@
261
262
  --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
262
263
  --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
263
264
  --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
264
- --t-icon-color-default-primary:hsl(0, 0%, 24%);
265
- --t-icon-color-default-secondary:hsl(0, 0%, 42%);
266
- --t-icon-color-default-dim:hsl(0, 0%, 58%);
267
- --t-icon-color-default-disabled:hsl(0, 0%, 81%);
268
- --t-icon-color-default-inverted:hsl(0, 0%, 100%);
269
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 42%);
265
+ --t-icon-color:hsl(0, 0%, 24%);
266
+ --t-icon-color-secondary:hsl(0, 0%, 42%);
267
+ --t-icon-color-dim:hsl(0, 0%, 58%);
268
+ --t-icon-color-disabled:hsl(0, 0%, 81%);
269
+ --t-icon-color-inverted:hsl(0, 0%, 100%);
270
+ --t-icon-color-status-neutral:hsl(0, 0%, 42%);
270
271
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 58%);
271
272
  --t-icon-color-status-neutral-bold:hsl(0, 0%, 24%);
272
- --t-icon-color-status-info-primary:hsl(204, 100%, 40%);
273
- --t-icon-color-status-success-primary:hsl(96, 57%, 33%);
273
+ --t-icon-color-status-info:hsl(204, 100%, 40%);
274
+ --t-icon-color-status-success:hsl(96, 57%, 33%);
274
275
  --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
275
- --t-icon-color-status-warning-primary:hsl(42, 84%, 49%);
276
- --t-icon-color-status-error-primary:hsl(8, 60%, 47%);
276
+ --t-icon-color-status-warning:hsl(42, 84%, 49%);
277
+ --t-icon-color-status-error:hsl(8, 60%, 47%);
277
278
  --t-fill-color-neutral-100:hsl(0, 0%, 100%);
278
279
  --t-fill-color-neutral-000:hsl(0, 0%, 12%);
279
280
  --t-fill-color-neutral-010:hsl(0, 0%, 24%);
@@ -286,32 +287,32 @@
286
287
  --t-fill-color-neutral-070:hsl(0, 0%, 95%);
287
288
  --t-fill-color-neutral-080:hsl(0, 0%, 97%);
288
289
  --t-fill-color-neutral-090:hsl(0, 0%, 98%);
289
- --t-fill-color-interaction-default:hsl(204, 100%, 40%);
290
+ --t-fill-color-interaction:hsl(204, 100%, 40%);
290
291
  --t-fill-color-interaction-hover:hsl(204, 100%, 35%);
291
292
  --t-fill-color-interaction-active:hsl(204, 100%, 30%);
292
293
  --t-fill-color-interaction-disabled:hsl(0, 0%, 81%);
293
294
  --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
294
295
  --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
295
- --t-fill-color-control-primary:hsl(204, 100%, 40%);
296
+ --t-fill-color-control:hsl(204, 100%, 40%);
296
297
  --t-fill-color-control-secondary:hsl(97, 57%, 40%);
297
298
  --t-fill-color-control-error:hsl(8, 60%, 47%);
298
299
  --t-fill-color-control-disabled:hsl(0, 0%, 81%);
299
- --t-fill-color-status-neutral-solid:hsl(0, 0%, 42%);
300
+ --t-fill-color-status-neutral:hsl(0, 0%, 42%);
300
301
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 93%);
301
302
  --t-fill-color-status-neutral-dim:hsl(0, 0%, 97%);
302
- --t-fill-color-status-info-solid:hsl(204, 100%, 40%);
303
+ --t-fill-color-status-info:hsl(204, 100%, 40%);
303
304
  --t-fill-color-status-info-ghost:hsl(203, 94%, 94%);
304
305
  --t-fill-color-status-info-dim:hsl(204, 100%, 97%);
305
- --t-fill-color-status-success-solid:hsl(96, 57%, 33%);
306
+ --t-fill-color-status-success:hsl(96, 57%, 33%);
306
307
  --t-fill-color-status-success-ghost:hsl(97, 57%, 90%);
307
308
  --t-fill-color-status-success-dim:hsl(96, 60%, 95%);
308
- --t-fill-color-status-warning-solid:hsl(42, 84%, 63%);
309
+ --t-fill-color-status-warning:hsl(42, 84%, 63%);
309
310
  --t-fill-color-status-warning-ghost:hsl(42, 87%, 94%);
310
311
  --t-fill-color-status-warning-dim:hsl(42, 87%, 97%);
311
- --t-fill-color-status-error-solid:hsl(8, 60%, 47%);
312
+ --t-fill-color-status-error:hsl(8, 60%, 47%);
312
313
  --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
313
314
  --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
314
- --t-fill-color-tooltip-primary:hsla(0, 0%, 12%, 0.9);
315
+ --t-fill-color-tooltip:hsla(0, 0%, 12%, 0.9);
315
316
  --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
316
317
  --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
317
318
  --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
@@ -360,6 +361,14 @@
360
361
  --t-fill-color-product-home-060:hsl(221, 90%, 50%);
361
362
  --t-fill-color-product-home-070:hsl(221, 90%, 45%);
362
363
  --t-fill-color-product-home-080:hsl(218, 84%, 25%);
364
+ --t-fill-color-product-musicstand-010:hsl(207, 61%, 93%);
365
+ --t-fill-color-product-musicstand-020:hsl(207, 61%, 90%);
366
+ --t-fill-color-product-musicstand-030:hsl(207, 58%, 85%);
367
+ --t-fill-color-product-musicstand-040:hsl(207, 59%, 60%);
368
+ --t-fill-color-product-musicstand-050:hsl(207, 59%, 50%);
369
+ --t-fill-color-product-musicstand-060:hsl(207, 59%, 40%);
370
+ --t-fill-color-product-musicstand-070:hsl(207, 59%, 35%);
371
+ --t-fill-color-product-musicstand-080:hsl(207, 59%, 25%);
363
372
  --t-fill-color-product-people-010:hsl(219, 73%, 91%);
364
373
  --t-fill-color-product-people-020:hsl(220, 69%, 81%);
365
374
  --t-fill-color-product-people-030:hsl(221, 73%, 71%);
@@ -392,7 +401,7 @@
392
401
  --t-fill-color-product-services-060:hsl(89, 62%, 31%);
393
402
  --t-fill-color-product-services-070:hsl(89, 62%, 26%);
394
403
  --t-fill-color-product-services-080:hsl(89, 63%, 21%);
395
- --t-fill-color-product-staff-base:hsl(328, 100%, 45%);
404
+ --t-fill-color-product-staff:hsl(328, 100%, 45%);
396
405
  --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
397
406
  --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
398
407
  --t-fill-color-product-accounts-gradient-brand:linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
@@ -472,47 +481,47 @@
472
481
  --t-fill-color-tag-indigo-020:hsl(233, 79%, 87%);
473
482
  --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
474
483
  --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
475
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 93%);
484
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 93%);
476
485
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
477
486
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
478
487
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 95%);
479
- --t-fill-color-button-neutral-outline-dim-default:hsla(0, 0%, 100%, 0);
480
- --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 95%);
481
- --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 93%);
482
- --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 98%);
483
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 100%, 0);
488
+ --t-fill-color-button-neutral-outline:hsla(0, 0%, 100%, 0);
489
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 95%);
490
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 93%);
491
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 98%);
492
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 100%, 0);
484
493
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
485
494
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
486
495
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 100%, 0);
487
- --t-fill-color-button-neutral-responsive-header-default:hsla(0, 0%, 0%, 0.1);
496
+ --t-fill-color-button-neutral-responsive-header:hsla(0, 0%, 0%, 0.1);
488
497
  --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
489
498
  --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
490
499
  --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 0%, 0.05);
491
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 40%);
500
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 40%);
492
501
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
493
502
  --t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
494
503
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 95%);
495
- --t-fill-color-button-interaction-outline-dim-default:hsla(0, 0%, 100%, 0);
496
- --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 100%, 97%);
497
- --t-fill-color-button-interaction-outline-dim-active:hsl(203, 94%, 94%);
498
- --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 98%);
499
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 100%, 0);
504
+ --t-fill-color-button-interaction-outline:hsla(0, 0%, 100%, 0);
505
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 100%, 97%);
506
+ --t-fill-color-button-interaction-outline-active:hsl(203, 94%, 94%);
507
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 98%);
508
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 100%, 0);
500
509
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
501
510
  --t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
502
511
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 100%, 0);
503
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 47%);
512
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 47%);
504
513
  --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
505
514
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
506
515
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 95%);
507
- --t-fill-color-button-delete-outline-dim-default:hsla(0, 0%, 100%, 0);
508
- --t-fill-color-button-delete-outline-dim-hover:hsl(7, 60%, 97%);
509
- --t-fill-color-button-delete-outline-dim-active:hsl(9, 59%, 93%);
510
- --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 98%);
511
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 100%, 0);
516
+ --t-fill-color-button-delete-outline:hsla(0, 0%, 100%, 0);
517
+ --t-fill-color-button-delete-outline-hover:hsl(7, 60%, 97%);
518
+ --t-fill-color-button-delete-outline-active:hsl(9, 59%, 93%);
519
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 98%);
520
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 100%, 0);
512
521
  --t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
513
522
  --t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
514
523
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
515
- --t-fill-color-button-pill-default:hsl(0, 0%, 93%);
524
+ --t-fill-color-button-pill:hsl(0, 0%, 93%);
516
525
  --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
517
526
  --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
518
527
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
@@ -545,13 +554,13 @@
545
554
  --t-fill-color-transparency-dark-static-090:hsla(0, 0%, 0%, 0.9);
546
555
  --t-surface-color-card:hsl(0, 0%, 100%);
547
556
  --t-surface-color-canvas:hsl(0, 0%, 100%);
548
- --t-border-color-default-base:hsl(0, 0%, 88%);
549
- --t-border-color-default-dark:hsl(0, 0%, 81%);
550
- --t-border-color-default-darker:hsl(0, 0%, 68%);
551
- --t-border-color-default-darkest:hsl(0, 0%, 58%);
552
- --t-border-color-default-disabled:hsl(0, 0%, 88%);
553
- --t-border-color-default-dim:hsl(0, 0%, 95%);
554
- --t-border-color-default-white:hsl(0, 0%, 100%);
557
+ --t-border-color:hsl(0, 0%, 88%);
558
+ --t-border-color-dark:hsl(0, 0%, 81%);
559
+ --t-border-color-darker:hsl(0, 0%, 68%);
560
+ --t-border-color-darkest:hsl(0, 0%, 58%);
561
+ --t-border-color-disabled:hsl(0, 0%, 88%);
562
+ --t-border-color-dim:hsl(0, 0%, 95%);
563
+ --t-border-color-white:hsl(0, 0%, 100%);
555
564
  --t-border-color-status-neutral:hsl(0, 0%, 58%);
556
565
  --t-border-color-status-info:hsl(204, 100%, 40%);
557
566
  --t-border-color-status-success:hsl(97, 57%, 40%);
@@ -566,37 +575,52 @@
566
575
  --t-border-color-control-success:hsl(97, 57%, 40%);
567
576
  --t-border-color-control-warning:hsl(42, 84%, 63%);
568
577
  --t-border-color-control-error:hsl(8, 60%, 47%);
569
- --t-border-color-control-disabled:hsl(0, 0%, 88%);
578
+ --t-border-color-control-disabled:hsl(0, 0%, 81%);
570
579
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.07);
580
+ --t-font-sans-serif:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
581
+ --t-font-monospace:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
571
582
  --t-form-background-color:var(--t-fill-color-neutral-100);
572
583
  --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
573
584
  --t-form-background-color-error:var(--t-fill-color-neutral-100);
574
585
  --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
575
- --t-form-border-color:var(--t-border-color-default-base);
576
- --t-form-border-color-disabled:var(--t-border-color-default-base);
586
+ --t-form-border-color:var(--t-border-color);
587
+ --t-form-border-color-disabled:var(--t-border-color);
577
588
  --t-form-border-color-error:var(--t-border-color-status-error);
578
- --t-form-border-color-focus:var(--t-fill-color-interaction-default);
579
- --t-form-border-color-hover:var(--t-border-color-default-dark);
589
+ --t-form-border-color-focus:var(--t-fill-color-interaction);
590
+ --t-form-border-color-hover:var(--t-border-color-dark);
580
591
  --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
581
592
  --t-form-border-radius:var(--t-border-radius-md);
582
- --t-form-border-width:var(--t-border-width-default);
583
- --t-form-font-color:var(--t-text-color-default-primary);
584
- --t-form-font-color-disabled:var(--t-text-color-default-disabled);
593
+ --t-form-border-width:var(--t-border-width);
594
+ --t-form-font-color:var(--t-text-color);
595
+ --t-form-font-color-disabled:var(--t-text-color-disabled);
585
596
  --t-form-font-color-error:var(--t-text-color-status-error);
586
- --t-form-font-color-readonly:var(--t-text-color-default-primary);
587
- --t-form-picker-icon-color:var(--t-icon-color-default-primary);
588
- --t-form-placeholder-color:var(--t-text-color-default-placeholder);
589
- --t-border-size-default:var(--t-border-width-default);
597
+ --t-form-font-color-readonly:var(--t-text-color);
598
+ --t-form-picker-icon-color:var(--t-icon-color);
599
+ --t-form-placeholder-color:var(--t-text-color-placeholder);
600
+ --t-border-size-default:var(--t-border-width);
590
601
  --t-border-size-thick:var(--t-border-width-thick);
591
602
  --t-font-weight-semi-bold:var(--t-font-weight-semibold);
592
- --t-icon-color-status-neutral-dark:hsl(0, 0%, 24%);
593
- --t-icon-color-status-info-secondary:hsl(204, 100%, 40%);
603
+ --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
604
+ --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
605
+ --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
606
+ --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
607
+ --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
608
+ --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
609
+ --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
594
610
  --t-fill-color-alert-info:hsl(204, 94%, 49%);
595
611
  --t-fill-color-alert-success:hsl(122, 60%, 41%);
596
612
  --t-fill-color-alert-warning:hsl(43, 96%, 58%);
597
613
  --t-fill-color-alert-error:hsl(4, 77%, 59%);
598
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
599
614
  --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
615
+ --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
616
+ --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
617
+ --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
618
+ --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
619
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
620
+ --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
621
+ --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
622
+ --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
623
+ --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
600
624
  --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
601
625
  --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
602
626
  --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
@@ -605,16 +629,62 @@
605
629
  --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
606
630
  --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
607
631
  --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
632
+ --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
633
+ --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
634
+ --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
635
+ --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
636
+ --t-border-color-default-base:var(--t-border-color);
637
+ --t-border-color-default-dark:var(--t-border-color-dark);
638
+ --t-border-color-default-darker:var(--t-border-color-darker);
639
+ --t-border-color-default-darkest:var(--t-border-color-darkest);
640
+ --t-border-color-default-dim:var(--t-border-color-dim);
641
+ --t-border-color-default-disabled:var(--t-border-color-disabled);
642
+ --t-border-color-default-white:var(--t-border-color-white);
643
+ --t-border-radius-default:var(--t-border-radius);
644
+ --t-border-width-default:var(--t-border-width);
645
+ --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
646
+ --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
647
+ --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
648
+ --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
649
+ --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
650
+ --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
651
+ --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
652
+ --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
653
+ --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
654
+ --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
655
+ --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
656
+ --t-fill-color-control-primary:var(--t-fill-color-control);
657
+ --t-fill-color-interaction-default:var(--t-fill-color-interaction);
658
+ --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
659
+ --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
660
+ --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
661
+ --t-icon-color-default-dim:var(--t-icon-color-dim);
662
+ --t-icon-color-default-disabled:var(--t-icon-color-disabled);
663
+ --t-icon-color-default-inverted:var(--t-icon-color-inverted);
664
+ --t-icon-color-default-primary:var(--t-icon-color);
665
+ --t-icon-color-default-secondary:var(--t-icon-color-secondary);
666
+ --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
667
+ --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
668
+ --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
669
+ --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
670
+ --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
671
+ --t-text-color-default-disabled:var(--t-text-color-disabled);
672
+ --t-text-color-default-headline:var(--t-text-color-headline);
673
+ --t-text-color-default-inverted:var(--t-text-color-inverted);
674
+ --t-text-color-default-placeholder:var(--t-text-color-placeholder);
675
+ --t-text-color-default-primary:var(--t-text-color);
676
+ --t-text-color-default-secondary:var(--t-text-color-secondary);
677
+ --t-text-color-interaction-primary:var(--t-text-color-interaction);
608
678
  }
609
679
 
610
680
  :root[data-color-mode="dark"]{
611
681
  color-scheme:dark;
612
- --t-text-color-default-headline:hsl(0, 0%, 94%);
613
- --t-text-color-default-primary:hsl(0, 0%, 80%);
614
- --t-text-color-default-secondary:hsl(0, 0%, 54%);
615
- --t-text-color-default-disabled:hsl(0, 0%, 25%);
616
- --t-text-color-default-placeholder:hsl(0, 0%, 38%);
617
- --t-text-color-interaction-primary:hsl(204, 68%, 55%);
682
+ --t-text-color-headline:hsl(0, 0%, 94%);
683
+ --t-text-color:hsl(0, 0%, 80%);
684
+ --t-text-color-secondary:hsl(0, 0%, 54%);
685
+ --t-text-color-disabled:hsl(0, 0%, 32%);
686
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
687
+ --t-text-color-interaction:hsl(204, 68%, 55%);
618
688
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
619
689
  --t-text-color-interaction-active:hsl(204, 68%, 45%);
620
690
  --t-text-color-interaction-visited:hsl(204, 68%, 50%);
@@ -645,15 +715,15 @@
645
715
  --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
646
716
  --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
647
717
  --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
648
- --t-icon-color-default-primary:hsl(0, 0%, 80%);
649
- --t-icon-color-default-secondary:hsl(0, 0%, 54%);
650
- --t-icon-color-default-dim:hsl(0, 0%, 38%);
651
- --t-icon-color-default-disabled:hsl(0, 0%, 25%);
652
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
718
+ --t-icon-color:hsl(0, 0%, 80%);
719
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
720
+ --t-icon-color-dim:hsl(0, 0%, 38%);
721
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
722
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
653
723
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
654
724
  --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
655
- --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
656
- --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
725
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
726
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
657
727
  --t-fill-color-neutral-100:hsl(0, 0%, 10%);
658
728
  --t-fill-color-neutral-000:hsl(0, 0%, 98%);
659
729
  --t-fill-color-neutral-010:hsl(0, 0%, 88%);
@@ -666,18 +736,18 @@
666
736
  --t-fill-color-neutral-070:hsl(0, 0%, 17%);
667
737
  --t-fill-color-neutral-080:hsl(0, 0%, 15%);
668
738
  --t-fill-color-neutral-090:hsl(0, 0%, 12%);
669
- --t-fill-color-interaction-default:hsl(204, 100%, 35%);
739
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
670
740
  --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
671
741
  --t-fill-color-interaction-active:hsl(204, 80%, 45%);
672
742
  --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
673
743
  --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
674
744
  --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
675
- --t-fill-color-control-primary:hsl(204, 100%, 35%);
745
+ --t-fill-color-control:hsl(204, 100%, 35%);
676
746
  --t-fill-color-control-disabled:hsl(0, 0%, 20%);
677
- --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
747
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
678
748
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
679
749
  --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
680
- --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
750
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
681
751
  --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
682
752
  --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
683
753
  --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
@@ -686,7 +756,7 @@
686
756
  --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
687
757
  --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
688
758
  --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
689
- --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
759
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
690
760
  --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
691
761
  --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
692
762
  --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
@@ -751,43 +821,43 @@
751
821
  --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
752
822
  --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
753
823
  --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
754
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
824
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
755
825
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
756
826
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
757
827
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
758
- --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
759
- --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
760
- --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
761
- --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
762
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
828
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
829
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
830
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
831
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
832
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
763
833
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
764
834
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
765
835
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
766
836
  --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
767
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
837
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
768
838
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
769
839
  --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
770
840
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
771
- --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
772
- --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
773
- --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
774
- --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
775
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
841
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
842
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
843
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
844
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
845
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
776
846
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
777
847
  --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
778
848
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
779
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
849
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
780
850
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
781
851
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
782
- --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
783
- --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
784
- --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
785
- --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
786
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
852
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
853
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
854
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
855
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
856
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
787
857
  --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
788
858
  --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
789
859
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
790
- --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
860
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
791
861
  --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
792
862
  --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
793
863
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
@@ -811,13 +881,13 @@
811
881
  --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
812
882
  --t-surface-color-card:hsl(0, 0%, 12%);
813
883
  --t-surface-color-canvas:hsl(0, 0%, 10%);
814
- --t-border-color-default-base:hsl(0, 0%, 21%);
815
- --t-border-color-default-dark:hsl(0, 0%, 25%);
816
- --t-border-color-default-darker:hsl(0, 0%, 33%);
817
- --t-border-color-default-darkest:hsl(0, 0%, 38%);
818
- --t-border-color-default-disabled:hsl(0, 0%, 21%);
819
- --t-border-color-default-dim:hsl(0, 0%, 16%);
820
- --t-border-color-default-white:hsl(0, 0%, 12%);
884
+ --t-border-color:hsl(0, 0%, 21%);
885
+ --t-border-color-dark:hsl(0, 0%, 25%);
886
+ --t-border-color-darker:hsl(0, 0%, 33%);
887
+ --t-border-color-darkest:hsl(0, 0%, 38%);
888
+ --t-border-color-disabled:hsl(0, 0%, 21%);
889
+ --t-border-color-dim:hsl(0, 0%, 16%);
890
+ --t-border-color-white:hsl(0, 0%, 12%);
821
891
  --t-border-color-status-neutral:hsl(0, 0%, 38%);
822
892
  --t-border-color-status-info:hsl(204, 100%, 35%);
823
893
  --t-border-color-button-neutral:hsl(0, 0%, 19%);
@@ -826,19 +896,27 @@
826
896
  --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
827
897
  --t-border-color-control-neutral:hsl(0, 0%, 33%);
828
898
  --t-border-color-control-info:hsl(204, 100%, 35%);
829
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
899
+ --t-border-color-control-disabled:hsl(0, 0%, 24%);
830
900
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
901
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
902
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
903
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
904
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
905
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
906
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
907
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
908
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
831
909
  }
832
910
 
833
911
  @media (prefers-color-scheme: dark){
834
912
  :root[data-color-mode="system"]{
835
913
  color-scheme:dark;
836
- --t-text-color-default-headline:hsl(0, 0%, 94%);
837
- --t-text-color-default-primary:hsl(0, 0%, 80%);
838
- --t-text-color-default-secondary:hsl(0, 0%, 54%);
839
- --t-text-color-default-disabled:hsl(0, 0%, 25%);
840
- --t-text-color-default-placeholder:hsl(0, 0%, 38%);
841
- --t-text-color-interaction-primary:hsl(204, 68%, 55%);
914
+ --t-text-color-headline:hsl(0, 0%, 94%);
915
+ --t-text-color:hsl(0, 0%, 80%);
916
+ --t-text-color-secondary:hsl(0, 0%, 54%);
917
+ --t-text-color-disabled:hsl(0, 0%, 32%);
918
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
919
+ --t-text-color-interaction:hsl(204, 68%, 55%);
842
920
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
843
921
  --t-text-color-interaction-active:hsl(204, 68%, 45%);
844
922
  --t-text-color-interaction-visited:hsl(204, 68%, 50%);
@@ -869,15 +947,15 @@
869
947
  --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
870
948
  --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
871
949
  --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
872
- --t-icon-color-default-primary:hsl(0, 0%, 80%);
873
- --t-icon-color-default-secondary:hsl(0, 0%, 54%);
874
- --t-icon-color-default-dim:hsl(0, 0%, 38%);
875
- --t-icon-color-default-disabled:hsl(0, 0%, 25%);
876
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
950
+ --t-icon-color:hsl(0, 0%, 80%);
951
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
952
+ --t-icon-color-dim:hsl(0, 0%, 38%);
953
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
954
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
877
955
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
878
956
  --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
879
- --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
880
- --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
957
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
958
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
881
959
  --t-fill-color-neutral-100:hsl(0, 0%, 10%);
882
960
  --t-fill-color-neutral-000:hsl(0, 0%, 98%);
883
961
  --t-fill-color-neutral-010:hsl(0, 0%, 88%);
@@ -890,18 +968,18 @@
890
968
  --t-fill-color-neutral-070:hsl(0, 0%, 17%);
891
969
  --t-fill-color-neutral-080:hsl(0, 0%, 15%);
892
970
  --t-fill-color-neutral-090:hsl(0, 0%, 12%);
893
- --t-fill-color-interaction-default:hsl(204, 100%, 35%);
971
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
894
972
  --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
895
973
  --t-fill-color-interaction-active:hsl(204, 80%, 45%);
896
974
  --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
897
975
  --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
898
976
  --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
899
- --t-fill-color-control-primary:hsl(204, 100%, 35%);
977
+ --t-fill-color-control:hsl(204, 100%, 35%);
900
978
  --t-fill-color-control-disabled:hsl(0, 0%, 20%);
901
- --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
979
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
902
980
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
903
981
  --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
904
- --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
982
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
905
983
  --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
906
984
  --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
907
985
  --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
@@ -910,7 +988,7 @@
910
988
  --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
911
989
  --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
912
990
  --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
913
- --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
991
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
914
992
  --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
915
993
  --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
916
994
  --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
@@ -975,43 +1053,43 @@
975
1053
  --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
976
1054
  --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
977
1055
  --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
978
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
1056
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
979
1057
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
980
1058
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
981
1059
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
982
- --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
983
- --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
984
- --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
985
- --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
986
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
1060
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
1061
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
1062
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
1063
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
1064
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
987
1065
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
988
1066
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
989
1067
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
990
1068
  --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
991
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
1069
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
992
1070
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
993
1071
  --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
994
1072
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
995
- --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
996
- --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
997
- --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
998
- --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
999
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
1073
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
1074
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
1075
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
1076
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
1077
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
1000
1078
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
1001
1079
  --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
1002
1080
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
1003
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
1081
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
1004
1082
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
1005
1083
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
1006
- --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
1007
- --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
1008
- --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
1009
- --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
1010
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
1084
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
1085
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
1086
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
1087
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
1088
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
1011
1089
  --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
1012
1090
  --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
1013
1091
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
1014
- --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
1092
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
1015
1093
  --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
1016
1094
  --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
1017
1095
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
@@ -1035,13 +1113,13 @@
1035
1113
  --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
1036
1114
  --t-surface-color-card:hsl(0, 0%, 12%);
1037
1115
  --t-surface-color-canvas:hsl(0, 0%, 10%);
1038
- --t-border-color-default-base:hsl(0, 0%, 21%);
1039
- --t-border-color-default-dark:hsl(0, 0%, 25%);
1040
- --t-border-color-default-darker:hsl(0, 0%, 33%);
1041
- --t-border-color-default-darkest:hsl(0, 0%, 38%);
1042
- --t-border-color-default-disabled:hsl(0, 0%, 21%);
1043
- --t-border-color-default-dim:hsl(0, 0%, 16%);
1044
- --t-border-color-default-white:hsl(0, 0%, 12%);
1116
+ --t-border-color:hsl(0, 0%, 21%);
1117
+ --t-border-color-dark:hsl(0, 0%, 25%);
1118
+ --t-border-color-darker:hsl(0, 0%, 33%);
1119
+ --t-border-color-darkest:hsl(0, 0%, 38%);
1120
+ --t-border-color-disabled:hsl(0, 0%, 21%);
1121
+ --t-border-color-dim:hsl(0, 0%, 16%);
1122
+ --t-border-color-white:hsl(0, 0%, 12%);
1045
1123
  --t-border-color-status-neutral:hsl(0, 0%, 38%);
1046
1124
  --t-border-color-status-info:hsl(204, 100%, 35%);
1047
1125
  --t-border-color-button-neutral:hsl(0, 0%, 19%);
@@ -1050,9 +1128,223 @@
1050
1128
  --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
1051
1129
  --t-border-color-control-neutral:hsl(0, 0%, 33%);
1052
1130
  --t-border-color-control-info:hsl(204, 100%, 35%);
1053
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
1131
+ --t-border-color-control-disabled:hsl(0, 0%, 24%);
1054
1132
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
1133
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
1134
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
1135
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
1136
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
1137
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
1138
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
1139
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
1140
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
1141
+ }
1142
+ }
1143
+
1144
+ @media (prefers-color-scheme: dark){
1145
+ }
1146
+
1147
+ /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */
1148
+
1149
+ *,
1150
+ ::before,
1151
+ ::after{
1152
+ box-sizing:border-box;
1153
+ }
1154
+
1155
+ html{
1156
+ font-family:var(--t-font-sans-serif);
1157
+ line-height:1.15;
1158
+ color:var(--t-text-color);
1159
+ -moz-tab-size:4;
1160
+ -o-tab-size:4;
1161
+ tab-size:4;
1162
+ accent-color:var(--t-fill-color-interaction);
1163
+ caret-color:var(--t-text-color);
1164
+ background-color:var(--t-surface-color-card);
1165
+ interpolate-size:allow-keywords;
1166
+ -webkit-text-size-adjust:100%;
1167
+ -moz-text-size-adjust:100%;
1168
+ text-size-adjust:100%;
1169
+ -webkit-tap-highlight-color:transparent;
1170
+ }
1171
+
1172
+ body{
1173
+ margin:0;
1174
+ font-size:var(--t-font-size-md);
1175
+ font-weight:var(--t-font-weight-normal);
1176
+ -moz-osx-font-smoothing:grayscale;
1177
+ -webkit-font-smoothing:antialiased;
1178
+ container-type:inline-size;
1179
+ }
1180
+
1181
+ b,
1182
+ strong{
1183
+ font-weight:bolder;
1184
+ }
1185
+
1186
+ code,
1187
+ kbd,
1188
+ samp,
1189
+ pre{
1190
+ font-family:var(--t-font-monospace);
1191
+ font-size:1em;
1192
+ }
1193
+
1194
+ small{
1195
+ font-size:80%;
1196
+ }
1197
+
1198
+ sub,
1199
+ sup{
1200
+ position:relative;
1201
+ font-size:75%;
1202
+ line-height:0;
1203
+ vertical-align:baseline;
1204
+ }
1205
+
1206
+ sub{
1207
+ bottom:-.25em;
1208
+ }
1209
+
1210
+ sup{
1211
+ top:-.5em;
1212
+ }
1213
+
1214
+ a{
1215
+ color:var(--t-fill-color-interaction);
1216
+ }
1217
+
1218
+ a:hover{
1219
+ color:var(--t-fill-color-interaction-hover);
1220
+ }
1221
+
1222
+ a:active{
1223
+ color:var(--t-fill-color-interaction-active);
1224
+ }
1225
+
1226
+ h1,
1227
+ h2,
1228
+ h3,
1229
+ h4,
1230
+ h5,
1231
+ h6{
1232
+ color:var(--t-text-color-headline);
1233
+ text-wrap:balance;
1234
+ overflow-wrap:break-word;
1235
+ }
1236
+
1237
+ p{
1238
+ text-wrap:pretty;
1239
+ overflow-wrap:break-word;
1240
+ }
1241
+
1242
+ table{
1243
+ text-indent:0;
1244
+ border-collapse:collapse;
1245
+ border-color:currentcolor;
1246
+ }
1247
+
1248
+ button,
1249
+ input,
1250
+ optgroup,
1251
+ select,
1252
+ textarea{
1253
+ margin:0;
1254
+ font-family:inherit;
1255
+ font-size:100%;
1256
+ line-height:1.15;
1257
+ }
1258
+
1259
+ textarea{
1260
+ resize:vertical;
1261
+ }
1262
+
1263
+ select{
1264
+ word-wrap:normal;
1265
+ }
1266
+
1267
+ select:disabled{
1268
+ opacity:1;
1269
+ }
1270
+
1271
+ ::-moz-placeholder{
1272
+ color:var(--t-text-color-placeholder);
1273
+ opacity:1;
1274
+ }
1275
+
1276
+ ::placeholder{
1277
+ color:var(--t-text-color-placeholder);
1278
+ opacity:1;
1279
+ }
1280
+
1281
+ button,
1282
+ [type="button"],
1283
+ [type="reset"],
1284
+ [type="submit"]{
1285
+ -webkit-appearance:auto;
1286
+ -moz-appearance:auto;
1287
+ appearance:auto;
1288
+ }
1289
+
1290
+ legend{
1291
+ padding:0;
1292
+ }
1293
+
1294
+ progress{
1295
+ vertical-align:baseline;
1055
1296
  }
1297
+
1298
+ ::-webkit-inner-spin-button,
1299
+ ::-webkit-outer-spin-button{
1300
+ height:auto;
1301
+ }
1302
+
1303
+ [type="search"]{
1304
+ -webkit-appearance:textfield;
1305
+ -moz-appearance:textfield;
1306
+ appearance:textfield;
1307
+ outline-offset:-2px;
1308
+ }
1309
+
1310
+ ::-webkit-search-decoration{
1311
+ -webkit-appearance:none;
1312
+ appearance:none;
1313
+ }
1314
+
1315
+ ::-webkit-file-upload-button{
1316
+ font:inherit;
1317
+ -webkit-appearance:auto;
1318
+ appearance:auto;
1319
+ }
1320
+
1321
+ summary{
1322
+ display:list-item;
1323
+ }
1324
+
1325
+ ::-webkit-date-and-time-value{
1326
+ min-height:1lh;
1327
+ text-align:inherit;
1328
+ }
1329
+
1330
+ ::-webkit-datetime-edit{
1331
+ display:inline-flex;
1332
+ }
1333
+
1334
+ ::-webkit-datetime-edit-fields-wrapper{
1335
+ padding:0;
1336
+ }
1337
+
1338
+ ::-webkit-datetime-edit,
1339
+ ::-webkit-datetime-edit-year-field,
1340
+ ::-webkit-datetime-edit-month-field,
1341
+ ::-webkit-datetime-edit-day-field,
1342
+ ::-webkit-datetime-edit-hour-field,
1343
+ ::-webkit-datetime-edit-minute-field,
1344
+ ::-webkit-datetime-edit-second-field,
1345
+ ::-webkit-datetime-edit-millisecond-field,
1346
+ ::-webkit-datetime-edit-meridiem-field{
1347
+ padding-block:0;
1056
1348
  }
1057
1349
 
1058
1350
  @layer t-critical{
@@ -1065,8 +1357,8 @@
1065
1357
  .tds-page-header{
1066
1358
  --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1067
1359
  --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1068
- --tds-page-header-color:var(--t-text-color-default-primary);
1069
- --tds-page-header-headline-color:var(--t-text-color-default-headline);
1360
+ --tds-page-header-color:var(--t-text-color);
1361
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1070
1362
  --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1071
1363
  --tds-page-header-padding-x:var(--t-spacing-2);
1072
1364
  --tds-page-header-padding-y:var(--t-spacing-2);
@@ -1075,29 +1367,29 @@
1075
1367
  --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
1076
1368
  --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1077
1369
  --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1078
- --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
1370
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1079
1371
  --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
1080
1372
  --tds-page-header-nav-item-border-width:1px;
1081
1373
 
1082
1374
  --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1083
- --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
1375
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color);
1084
1376
 
1085
- --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
1377
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1086
1378
  --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
1087
1379
  --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1088
1380
 
1089
1381
  --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
1090
1382
  --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
1091
1383
 
1092
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
1384
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1093
1385
  --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1094
1386
  --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1095
1387
 
1096
- --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
1388
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1097
1389
  --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1098
1390
  --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1099
1391
  --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1100
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
1392
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1101
1393
  }
1102
1394
 
1103
1395
  .tds-page-header--profile{
@@ -1106,16 +1398,16 @@
1106
1398
  @media (min-width: 600px){
1107
1399
  .tds-page-header{
1108
1400
  --tds-page-header-background-color:var(--t-surface-color-canvas);
1109
- --tds-page-header-color:var(--t-text-color-default-secondary);
1401
+ --tds-page-header-color:var(--t-text-color-secondary);
1110
1402
  --tds-page-header-padding-x:var(--t-spacing-3);
1111
1403
  --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1112
1404
  --tds-page-header-nav-gap:var(--t-spacing-half);
1113
1405
  --tds-page-header-nav-background:transparent;
1114
1406
  --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1115
1407
  --tds-page-header-nav-item-border-width:1px;
1116
- --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
1408
+ --tds-page-header-nav-item-color:var(--t-text-color);
1117
1409
  --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1118
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
1410
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1119
1411
  }
1120
1412
  }
1121
1413
  }
@@ -1126,7 +1418,7 @@
1126
1418
  padding-top:var(--tds-page-header-padding-y);
1127
1419
  color:var(--tds-page-header-color);
1128
1420
  background:var(--tds-page-header-background-color);
1129
- border-bottom:1px solid var(--t-border-color-default-base);
1421
+ border-bottom:1px solid var(--t-border-color);
1130
1422
  }
1131
1423
 
1132
1424
  .tds-page-header:not(.has-nav){
@@ -1354,8 +1646,8 @@
1354
1646
  --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1355
1647
  --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1356
1648
 
1357
- --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
1358
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
1649
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1650
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1359
1651
  }
1360
1652
 
1361
1653
  .tds-sidenav--theme-gray{
@@ -1396,7 +1688,7 @@
1396
1688
  font-size:var(--t-font-size-sm);
1397
1689
  font-weight:var(--t-font-weight-semibold);
1398
1690
  line-height:1.35;
1399
- color:var(--t-text-color-default-secondary);
1691
+ color:var(--t-text-color-secondary);
1400
1692
  text-transform:uppercase;
1401
1693
  }
1402
1694
 
@@ -1435,7 +1727,7 @@
1435
1727
  overflow:hidden;
1436
1728
  font-size:var(--t-font-size-sm);
1437
1729
  line-height:18px;
1438
- color:var(--t-text-color-default-headline);
1730
+ color:var(--t-text-color-headline);
1439
1731
  white-space:nowrap;
1440
1732
  text-decoration:none;
1441
1733
  -webkit-appearance:none;
@@ -1444,7 +1736,7 @@
1444
1736
  cursor:pointer;
1445
1737
  background-color:var(--tds-sidenav-item-background, transparent);
1446
1738
  border:0;
1447
- border-radius:var(--t-border-radius-default);
1739
+ border-radius:var(--t-border-radius);
1448
1740
  transition:var(--tds-sidenav-item-transition);
1449
1741
  }
1450
1742
 
@@ -1459,7 +1751,7 @@
1459
1751
 
1460
1752
  :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1461
1753
  --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1462
- color:var(--t-text-color-default-headline);
1754
+ color:var(--t-text-color-headline);
1463
1755
  text-decoration:none;
1464
1756
  }
1465
1757
 
@@ -1545,7 +1837,7 @@
1545
1837
  height:100%;
1546
1838
  content:"";
1547
1839
  background-color:var(--tds-sidenav-item-nested-background);
1548
- border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
1840
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1549
1841
  transition:var(--tds-sidenav-item-transition);
1550
1842
  }
1551
1843
 
@@ -1586,7 +1878,7 @@
1586
1878
  margin:0;
1587
1879
  font-size:var(--t-font-size-lg);
1588
1880
  font-weight:var(--t-font-weight-medium);
1589
- color:var(--t-text-color-default-headline);
1881
+ color:var(--t-text-color-headline);
1590
1882
  }
1591
1883
 
1592
1884
  @media (max-width: 719px){
@@ -1665,9 +1957,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1665
1957
  --tds-btn-font-size:16px;
1666
1958
  --tds-btn-font-weight:400;
1667
1959
  --tds-btn-line-height:1.5;
1668
- --tds-btn-color:var(--t-text-color-default-headline);
1960
+ --tds-btn-color:var(--t-text-color-headline);
1669
1961
  --tds-btn-bg:transparent;
1670
- --tds-btn-border-width:var(--t-border-width-default);
1962
+ --tds-btn-border-width:var(--t-border-width);
1671
1963
  --tds-btn-border-color:transparent;
1672
1964
  --tds-btn-border-radius:var(--t-border-radius-md);
1673
1965
  --tds-btn-border-color-hover:transparent;
@@ -1795,15 +2087,15 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1795
2087
 
1796
2088
  .tds-btn--neutral{
1797
2089
  --tds-btn-color:var(--t-text-color-status-neutral);
1798
- --tds-btn-bg:var(--t-fill-color-button-neutral-solid-default);
1799
- --tds-btn-border-color:var(--t-fill-color-button-neutral-solid-default);
2090
+ --tds-btn-bg:var(--t-fill-color-button-neutral-solid);
2091
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-solid);
1800
2092
  --tds-btn-color-hover:var(--t-text-color-status-neutral);
1801
2093
  --tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
1802
2094
  --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
1803
2095
  --tds-btn-color-active:var(--t-text-color-status-neutral);
1804
2096
  --tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
1805
2097
  --tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
1806
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2098
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1807
2099
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1808
2100
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1809
2101
  }
@@ -1833,32 +2125,32 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1833
2125
  }
1834
2126
 
1835
2127
  .tds-btn--interaction{
1836
- --tds-btn-color:var(--t-text-color-default-inverted);
1837
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
1838
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
1839
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
2128
+ --tds-btn-color:var(--t-text-color-inverted);
2129
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
2130
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
2131
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1840
2132
  --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
1841
2133
  --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
1842
- --tds-btn-color-active:var(--t-text-color-default-inverted);
2134
+ --tds-btn-color-active:var(--t-text-color-inverted);
1843
2135
  --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
1844
2136
  --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
1845
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2137
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1846
2138
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1847
2139
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1848
2140
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
1849
2141
  }
1850
2142
 
1851
2143
  .tds-btn--delete{
1852
- --tds-btn-color:var(--t-text-color-default-inverted);
1853
- --tds-btn-bg:var(--t-fill-color-button-delete-solid-default);
1854
- --tds-btn-border-color:var(--t-fill-color-button-delete-solid-default);
1855
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
2144
+ --tds-btn-color:var(--t-text-color-inverted);
2145
+ --tds-btn-bg:var(--t-fill-color-button-delete-solid);
2146
+ --tds-btn-border-color:var(--t-fill-color-button-delete-solid);
2147
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1856
2148
  --tds-btn-bg-hover:var(--t-fill-color-button-delete-solid-hover);
1857
2149
  --tds-btn-border-color-hover:var(--t-fill-color-button-delete-solid-hover);
1858
- --tds-btn-color-active:var(--t-text-color-default-inverted);
2150
+ --tds-btn-color-active:var(--t-text-color-inverted);
1859
2151
  --tds-btn-bg-active:var(--t-fill-color-button-delete-solid-active);
1860
2152
  --tds-btn-border-color-active:var(--t-fill-color-button-delete-solid-active);
1861
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2153
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1862
2154
  --tds-btn-bg-disabled:var(--t-fill-color-button-delete-solid-disabled);
1863
2155
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1864
2156
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1868,27 +2160,27 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1868
2160
  --tds-btn-color:var(--t-text-color-status-neutral);
1869
2161
  --tds-btn-border-color:var(--t-border-color-button-neutral);
1870
2162
  --tds-btn-color-hover:var(--tds-btn-color);
1871
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
2163
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1872
2164
  --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
1873
2165
  --tds-btn-color-active:var(--tds-btn-color);
1874
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
2166
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1875
2167
  --tds-btn-border-color-active:var(--t-border-color-button-neutral);
1876
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1877
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
2168
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2169
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
1878
2170
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1879
2171
  }
1880
2172
 
1881
2173
  .tds-btn--outline-interaction{
1882
- --tds-btn-color:var(--t-text-color-interaction-primary);
2174
+ --tds-btn-color:var(--t-text-color-interaction);
1883
2175
  --tds-btn-border-color:var(--t-border-color-button-info);
1884
2176
  --tds-btn-color-hover:var(--tds-btn-color);
1885
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
2177
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
1886
2178
  --tds-btn-border-color-hover:var(--tds-btn-border-color);
1887
2179
  --tds-btn-color-active:var(--tds-btn-color);
1888
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
2180
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
1889
2181
  --tds-btn-border-color-active:var(--tds-btn-border-color);
1890
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1891
- --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-dim-disabled);
2182
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2183
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-disabled);
1892
2184
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1893
2185
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
1894
2186
  }
@@ -1897,13 +2189,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1897
2189
  --tds-btn-color:var(--t-text-color-status-error);
1898
2190
  --tds-btn-border-color:var(--t-border-color-button-delete);
1899
2191
  --tds-btn-color-hover:var(--tds-btn-color);
1900
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
2192
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
1901
2193
  --tds-btn-border-color-hover:var(--tds-btn-border-color);
1902
2194
  --tds-btn-color-active:var(--tds-btn-color);
1903
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
2195
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
1904
2196
  --tds-btn-border-color-active:var(--tds-btn-border-color);
1905
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1906
- --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-dim-disabled);
2197
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2198
+ --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-disabled);
1907
2199
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1908
2200
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
1909
2201
  }
@@ -1912,26 +2204,26 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1912
2204
  --tds-btn-color:var(--t-text-color-status-neutral);
1913
2205
  --tds-btn-border-color:transparent;
1914
2206
  --tds-btn-color-hover:var(--tds-btn-color);
1915
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
2207
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1916
2208
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1917
2209
  --tds-btn-color-active:var(--tds-btn-color);
1918
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
2210
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1919
2211
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1920
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2212
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1921
2213
  --tds-btn-bg-disabled:transparent;
1922
2214
  --tds-btn-border-color-disabled:transparent;
1923
2215
  }
1924
2216
 
1925
2217
  .tds-btn--ghost-interaction{
1926
- --tds-btn-color:var(--t-text-color-interaction-primary);
2218
+ --tds-btn-color:var(--t-text-color-interaction);
1927
2219
  --tds-btn-border-color:transparent;
1928
2220
  --tds-btn-color-hover:var(--tds-btn-color);
1929
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
2221
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
1930
2222
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1931
2223
  --tds-btn-color-active:var(--tds-btn-color);
1932
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
2224
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
1933
2225
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1934
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2226
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1935
2227
  --tds-btn-bg-disabled:transparent;
1936
2228
  --tds-btn-border-color-disabled:transparent;
1937
2229
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
@@ -1941,12 +2233,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1941
2233
  --tds-btn-color:var(--t-text-color-status-error);
1942
2234
  --tds-btn-border-color:transparent;
1943
2235
  --tds-btn-color-hover:var(--tds-btn-color);
1944
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
2236
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
1945
2237
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1946
2238
  --tds-btn-color-active:var(--tds-btn-color);
1947
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
2239
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
1948
2240
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1949
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2241
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1950
2242
  --tds-btn-bg-disabled:transparent;
1951
2243
  --tds-btn-border-color-disabled:transparent;
1952
2244
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
@@ -1954,7 +2246,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1954
2246
 
1955
2247
  .tds-btn--inline-text,
1956
2248
  a[class="tds-btn"]{
1957
- --tds-btn-color:var(--t-text-color-interaction-primary);
2249
+ --tds-btn-color:var(--t-text-color-interaction);
1958
2250
  --tds-btn-color-hover:var(--t-text-color-interaction-hover);
1959
2251
  --tds-btn-color-active:var(--t-text-color-interaction-active);
1960
2252
  --tds-btn-bg:transparent;
@@ -1979,16 +2271,16 @@ a[class="tds-btn"]{
1979
2271
  }
1980
2272
 
1981
2273
  .tds-btn--primary-page-header{
1982
- --tds-btn-color:var(--t-text-color-default-inverted);
1983
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
1984
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
1985
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
2274
+ --tds-btn-color:var(--t-text-color-inverted);
2275
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
2276
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
2277
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1986
2278
  --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
1987
2279
  --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
1988
- --tds-btn-color-active:var(--t-text-color-default-inverted);
2280
+ --tds-btn-color-active:var(--t-text-color-inverted);
1989
2281
  --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
1990
2282
  --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
1991
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2283
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1992
2284
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1993
2285
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1994
2286
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1996,15 +2288,15 @@ a[class="tds-btn"]{
1996
2288
 
1997
2289
  .tds-btn--secondary-page-header{
1998
2290
  --tds-btn-color:var(--t-text-color-status-neutral);
1999
- --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header-default);
2000
- --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header-default);
2291
+ --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header);
2292
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header);
2001
2293
  --tds-btn-color-hover:var(--t-text-color-status-neutral);
2002
2294
  --tds-btn-bg-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
2003
2295
  --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
2004
2296
  --tds-btn-color-active:var(--t-text-color-status-neutral);
2005
2297
  --tds-btn-bg-active:var(--t-fill-color-button-neutral-responsive-header-active);
2006
2298
  --tds-btn-border-color-active:var(--t-fill-color-button-neutral-responsive-header-active);
2007
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2299
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2008
2300
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
2009
2301
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
2010
2302
  }
@@ -2016,28 +2308,28 @@ a[class="tds-btn"]{
2016
2308
  --tds-btn-bg:transparent;
2017
2309
  --tds-btn-border-color:var(--t-border-color-button-neutral);
2018
2310
  --tds-btn-color-hover:var(--tds-btn-color);
2019
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
2311
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
2020
2312
  --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
2021
2313
  --tds-btn-color-active:var(--tds-btn-color);
2022
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
2314
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
2023
2315
  --tds-btn-border-color-active:var(--t-border-color-button-neutral);
2024
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2025
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
2316
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2317
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
2026
2318
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
2027
2319
  }
2028
2320
  }
2029
2321
 
2030
2322
  .tds-btn--staff-only{
2031
- --tds-btn-color:var(--t-text-color-default-inverted);
2032
- --tds-btn-bg:var(--t-fill-color-product-staff-base);
2033
- --tds-btn-border-color:var(--t-border-color-default-white);
2034
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
2323
+ --tds-btn-color:var(--t-text-color-inverted);
2324
+ --tds-btn-bg:var(--t-fill-color-product-staff);
2325
+ --tds-btn-border-color:var(--t-border-color-white);
2326
+ --tds-btn-color-hover:var(--t-text-color-inverted);
2035
2327
  --tds-btn-bg-hover:var(--t-fill-color-product-staff-dark);
2036
- --tds-btn-border-color-hover:var(--t-border-color-default-white);
2037
- --tds-btn-color-active:var(--t-text-color-default-inverted);
2328
+ --tds-btn-border-color-hover:var(--t-border-color-white);
2329
+ --tds-btn-color-active:var(--t-text-color-inverted);
2038
2330
  --tds-btn-bg-active:var(--t-fill-color-product-staff-darker);
2039
- --tds-btn-border-color-active:var(--t-border-color-default-white);
2040
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2331
+ --tds-btn-border-color-active:var(--t-border-color-white);
2332
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2041
2333
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
2042
2334
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
2043
2335
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -2048,8 +2340,8 @@ a[class="tds-btn"]{
2048
2340
  --tds-btn-padding-y:4px;
2049
2341
  --tds-btn-padding-x:13px;
2050
2342
 
2051
- --tds-btn-color:var(--t-text-color-default-primary);
2052
- --tds-btn-bg:var(--t-fill-color-button-pill-default);
2343
+ --tds-btn-color:var(--t-text-color);
2344
+ --tds-btn-bg:var(--t-fill-color-button-pill);
2053
2345
  --tds-btn-border-color:var(--tds-btn-bg);
2054
2346
  --tds-btn-color-hover:var(--tds-btn-color);
2055
2347
  --tds-btn-bg-hover:var(--t-fill-color-button-pill-hover);
@@ -2058,10 +2350,10 @@ a[class="tds-btn"]{
2058
2350
  --tds-btn-color-active:var(--tds-btn-color);
2059
2351
  --tds-btn-bg-active:var(--t-fill-color-button-pill-active);
2060
2352
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
2061
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2353
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2062
2354
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
2063
2355
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
2064
- --tds-btn-icon-color:var(--t-icon-color-default-secondary);
2356
+ --tds-btn-icon-color:var(--t-icon-color-secondary);
2065
2357
  --tds-btn-min-height:32px;
2066
2358
  }
2067
2359
 
@@ -2108,8 +2400,8 @@ a[class="tds-btn"]{
2108
2400
  display:inline-block;
2109
2401
  width:var(--tds-btn-attention-icon-size);
2110
2402
  height:var(--tds-btn-attention-icon-size);
2111
- background-color:var(--t-icon-color-status-warning-primary);
2112
- border:.125em solid var(--t-border-color-default-white);
2403
+ background-color:var(--t-icon-color-status-warning);
2404
+ border:.125em solid var(--t-border-color-white);
2113
2405
  border-radius:var(--t-border-radius-round);
2114
2406
  }
2115
2407
 
@@ -2144,23 +2436,23 @@ a[class="tds-btn"]{
2144
2436
 
2145
2437
  .t-banner{
2146
2438
  --t-banner-font-size:var(--t-font-size-md);
2147
- --t-banner-font-color:var(--t-text-color-default-primary);
2439
+ --t-banner-font-color:var(--t-text-color);
2148
2440
  --t-banner-background-color:var(--t-fill-color-status-neutral-ghost);
2149
2441
  --t-banner-spacing:var(--t-spacing-2);
2150
2442
  --t-banner-border-radius:var(--t-border-radius-md);
2151
- --t-banner-title-font-color:var(--t-text-color-default-headline);
2443
+ --t-banner-title-font-color:var(--t-text-color-headline);
2152
2444
  --t-banner-title-font-size:var(--t-font-size-md);
2153
2445
  --t-banner-title-font-weight:var(--t-font-weight-semibold);
2154
2446
  --t-banner-icon-fill-color:hsla(0, 0%, 0%, 0);
2155
2447
  --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);
2448
+ --t-banner-icon-fill-color-info:var(--t-icon-color-status-info);
2157
2449
  --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);
2450
+ --t-banner-icon-fill-color-warning:var(--t-icon-color-status-warning);
2159
2451
  --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);
2452
+ --t-banner-icon-fill-color-error:var(--t-icon-color-status-error);
2161
2453
  --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);
2454
+ --t-banner-icon-fill-color-success:var(--t-icon-color-status-success);
2455
+ --t-banner-link-font-color-hover:var(--t-text-color-headline);
2164
2456
  display:flex;
2165
2457
  gap:var(--t-banner-spacing);
2166
2458
  padding:var(--t-banner-spacing);