@planningcenter/tapestry 2.6.1-rc.1 → 2.7.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 (76) 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/components/page-header/index.js +1 -1
  12. package/dist/components/sidenav/index.js +1 -1
  13. package/dist/index.css +193 -145
  14. package/dist/index.css.map +1 -1
  15. package/dist/index.d.ts +0 -1
  16. package/dist/index.d.ts.map +1 -1
  17. package/dist/jsTokens.d.ts +1 -1
  18. package/dist/jsTokens.d.ts.map +1 -1
  19. package/dist/jsTokens.js +1 -1
  20. package/dist/jsTokens.js.map +1 -1
  21. package/dist/print-no-media-queries.css +2 -0
  22. package/dist/print.css +2 -0
  23. package/dist/reactRender.css +1135 -1087
  24. package/dist/reactRender.css.map +1 -1
  25. package/dist/reactRenderLegacy.css +1135 -1087
  26. package/dist/reactRenderLegacy.css.map +1 -1
  27. package/dist/tapestry-wc/dist/components/{p-D0G2xpOq.js → p-BM4ymH3W.js} +3 -3
  28. package/dist/tapestry-wc/dist/components/{p-D0G2xpOq.js.map → p-BM4ymH3W.js.map} +1 -1
  29. package/dist/tapestry-wc/dist/components/{p-D1rzJeWl.js → p-CTvFafAw.js} +3 -3
  30. package/dist/tapestry-wc/dist/components/{p-D1rzJeWl.js.map → p-CTvFafAw.js.map} +1 -1
  31. package/dist/tapestry-wc/dist/components/{p-74Cc2nEh.js → p-Ccu14VWv.js} +2 -2
  32. package/dist/tapestry-wc/dist/components/{p-74Cc2nEh.js.map → p-Ccu14VWv.js.map} +1 -1
  33. package/dist/tapestry-wc/dist/components/{p-DmP02I4b.js → p-D5K9xK_N.js} +3 -3
  34. package/dist/tapestry-wc/dist/components/{p-DmP02I4b.js.map → p-D5K9xK_N.js.map} +1 -1
  35. package/dist/tapestry-wc/dist/components/{p-5-Cvrlgk.js → p-ksuK8bIM.js} +2 -2
  36. package/dist/tapestry-wc/dist/components/{p-5-Cvrlgk.js.map → p-ksuK8bIM.js.map} +1 -1
  37. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  38. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  39. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  40. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  41. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  42. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  43. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  44. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  45. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  46. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  47. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  48. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  49. package/dist/tokens/tokens-deprecated.json +326 -0
  50. package/dist/tokens-dark.css +34 -32
  51. package/dist/tokens-dark.css.map +1 -0
  52. package/dist/tokens-deprecated.css +106 -0
  53. package/dist/tokens-deprecated.css.map +1 -0
  54. package/dist/tokens-deprecated.js +3 -0
  55. package/dist/tokens.css +62 -111
  56. package/dist/tokens.css.map +1 -1
  57. package/dist/tokens.js +2 -0
  58. package/dist/unstable.css +205 -157
  59. package/dist/unstable.css.map +1 -1
  60. package/dist/unstable.d.ts +1 -1
  61. package/dist/unstable.d.ts.map +1 -1
  62. package/dist/unstable.js +2 -1
  63. package/dist/unstable.js.map +1 -1
  64. package/package.json +18 -17
  65. package/dist/deprecated.css +0 -66
  66. package/dist/tokens/ts/react-native-tokens.d.ts +0 -1629
  67. package/dist/tokens/ts/react-native-tokens.d.ts.map +0 -1
  68. package/dist/tokens/ts/react-native-tokens.js +0 -418
  69. package/dist/tokens/ts/react-native-tokens.js.map +0 -1
  70. package/dist/tokens/ts/tokens.d.ts +0 -435
  71. package/dist/tokens/ts/tokens.d.ts.map +0 -1
  72. package/dist/tokens/ts/tokens.js +0 -437
  73. package/dist/tokens/ts/tokens.js.map +0 -1
  74. package/dist/tokens.d.ts +0 -3
  75. package/dist/tokens.d.ts.map +0 -1
  76. /package/dist/{tokens-dark-combined.js → tokens-dark.js} +0 -0
package/dist/index.css CHANGED
@@ -18,6 +18,7 @@
18
18
  --t-spacing-7:56px;
19
19
  --t-spacing-fourth:2px;
20
20
  --t-spacing-half:4px;
21
+ --t-spacing-1-half:12px;
21
22
  --t-element-size-3xl:48px;
22
23
  --t-element-size-2xl:32px;
23
24
  --t-element-size-xl:24px;
@@ -52,7 +53,7 @@
52
53
  --t-text-color-headline:hsl(0, 0%, 12%);
53
54
  --t-text-color:hsl(0, 0%, 24%);
54
55
  --t-text-color-secondary:hsl(0, 0%, 42%);
55
- --t-text-color-disabled:hsl(0, 0%, 81%);
56
+ --t-text-color-disabled:hsl(0, 0%, 68%);
56
57
  --t-text-color-placeholder:hsl(0, 0%, 58%);
57
58
  --t-text-color-inverted:hsl(0, 0%, 100%);
58
59
  --t-text-color-interaction:hsl(204, 100%, 40%);
@@ -121,19 +122,19 @@
121
122
  --t-fill-color-control-secondary:hsl(97, 57%, 40%);
122
123
  --t-fill-color-control-error:hsl(8, 60%, 47%);
123
124
  --t-fill-color-control-disabled:hsl(0, 0%, 81%);
124
- --t-fill-color-status-neutral-solid:hsl(0, 0%, 42%);
125
+ --t-fill-color-status-neutral:hsl(0, 0%, 42%);
125
126
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 93%);
126
127
  --t-fill-color-status-neutral-dim:hsl(0, 0%, 97%);
127
- --t-fill-color-status-info-solid:hsl(204, 100%, 40%);
128
+ --t-fill-color-status-info:hsl(204, 100%, 40%);
128
129
  --t-fill-color-status-info-ghost:hsl(203, 94%, 94%);
129
130
  --t-fill-color-status-info-dim:hsl(204, 100%, 97%);
130
- --t-fill-color-status-success-solid:hsl(96, 57%, 33%);
131
+ --t-fill-color-status-success:hsl(96, 57%, 33%);
131
132
  --t-fill-color-status-success-ghost:hsl(97, 57%, 90%);
132
133
  --t-fill-color-status-success-dim:hsl(96, 60%, 95%);
133
- --t-fill-color-status-warning-solid:hsl(42, 84%, 63%);
134
+ --t-fill-color-status-warning:hsl(42, 84%, 63%);
134
135
  --t-fill-color-status-warning-ghost:hsl(42, 87%, 94%);
135
136
  --t-fill-color-status-warning-dim:hsl(42, 87%, 97%);
136
- --t-fill-color-status-error-solid:hsl(8, 60%, 47%);
137
+ --t-fill-color-status-error:hsl(8, 60%, 47%);
137
138
  --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
138
139
  --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
139
140
  --t-fill-color-tooltip:hsla(0, 0%, 12%, 0.9);
@@ -185,6 +186,14 @@
185
186
  --t-fill-color-product-home-060:hsl(221, 90%, 50%);
186
187
  --t-fill-color-product-home-070:hsl(221, 90%, 45%);
187
188
  --t-fill-color-product-home-080:hsl(218, 84%, 25%);
189
+ --t-fill-color-product-musicstand-010:hsl(207, 61%, 93%);
190
+ --t-fill-color-product-musicstand-020:hsl(207, 61%, 90%);
191
+ --t-fill-color-product-musicstand-030:hsl(207, 58%, 85%);
192
+ --t-fill-color-product-musicstand-040:hsl(207, 59%, 60%);
193
+ --t-fill-color-product-musicstand-050:hsl(207, 59%, 50%);
194
+ --t-fill-color-product-musicstand-060:hsl(207, 59%, 40%);
195
+ --t-fill-color-product-musicstand-070:hsl(207, 59%, 35%);
196
+ --t-fill-color-product-musicstand-080:hsl(207, 59%, 25%);
188
197
  --t-fill-color-product-people-010:hsl(219, 73%, 91%);
189
198
  --t-fill-color-product-people-020:hsl(220, 69%, 81%);
190
199
  --t-fill-color-product-people-030:hsl(221, 73%, 71%);
@@ -301,10 +310,10 @@
301
310
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
302
311
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
303
312
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 95%);
304
- --t-fill-color-button-neutral-outline-dim:hsla(0, 0%, 100%, 0);
305
- --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 95%);
306
- --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 93%);
307
- --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 98%);
313
+ --t-fill-color-button-neutral-outline:hsla(0, 0%, 100%, 0);
314
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 95%);
315
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 93%);
316
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 98%);
308
317
  --t-fill-color-button-neutral-ghost:hsla(0, 0%, 100%, 0);
309
318
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
310
319
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
@@ -317,10 +326,10 @@
317
326
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
318
327
  --t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
319
328
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 95%);
320
- --t-fill-color-button-interaction-outline-dim:hsla(0, 0%, 100%, 0);
321
- --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 100%, 97%);
322
- --t-fill-color-button-interaction-outline-dim-active:hsl(203, 94%, 94%);
323
- --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 98%);
329
+ --t-fill-color-button-interaction-outline:hsla(0, 0%, 100%, 0);
330
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 100%, 97%);
331
+ --t-fill-color-button-interaction-outline-active:hsl(203, 94%, 94%);
332
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 98%);
324
333
  --t-fill-color-button-interaction-ghost:hsla(0, 0%, 100%, 0);
325
334
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
326
335
  --t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
@@ -329,10 +338,10 @@
329
338
  --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
330
339
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
331
340
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 95%);
332
- --t-fill-color-button-delete-outline-dim:hsla(0, 0%, 100%, 0);
333
- --t-fill-color-button-delete-outline-dim-hover:hsl(7, 60%, 97%);
334
- --t-fill-color-button-delete-outline-dim-active:hsl(9, 59%, 93%);
335
- --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 98%);
341
+ --t-fill-color-button-delete-outline:hsla(0, 0%, 100%, 0);
342
+ --t-fill-color-button-delete-outline-hover:hsl(7, 60%, 97%);
343
+ --t-fill-color-button-delete-outline-active:hsl(9, 59%, 93%);
344
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 98%);
336
345
  --t-fill-color-button-delete-ghost:hsla(0, 0%, 100%, 0);
337
346
  --t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
338
347
  --t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
@@ -391,8 +400,10 @@
391
400
  --t-border-color-control-success:hsl(97, 57%, 40%);
392
401
  --t-border-color-control-warning:hsl(42, 84%, 63%);
393
402
  --t-border-color-control-error:hsl(8, 60%, 47%);
394
- --t-border-color-control-disabled:hsl(0, 0%, 88%);
403
+ --t-border-color-control-disabled:hsl(0, 0%, 81%);
395
404
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.07);
405
+ --t-font-sans-serif:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
406
+ --t-font-monospace:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
396
407
  --t-form-background-color:var(--t-fill-color-neutral-100);
397
408
  --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
398
409
  --t-form-background-color-error:var(--t-fill-color-neutral-100);
@@ -414,14 +425,27 @@
414
425
  --t-border-size-default:var(--t-border-width);
415
426
  --t-border-size-thick:var(--t-border-width-thick);
416
427
  --t-font-weight-semi-bold:var(--t-font-weight-semibold);
417
- --t-icon-color-status-neutral-dark:hsl(0, 0%, 24%);
418
- --t-icon-color-status-info-secondary:hsl(204, 100%, 40%);
428
+ --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
429
+ --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
430
+ --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
431
+ --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
432
+ --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
433
+ --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
434
+ --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
419
435
  --t-fill-color-alert-info:hsl(204, 94%, 49%);
420
436
  --t-fill-color-alert-success:hsl(122, 60%, 41%);
421
437
  --t-fill-color-alert-warning:hsl(43, 96%, 58%);
422
438
  --t-fill-color-alert-error:hsl(4, 77%, 59%);
423
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
424
439
  --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
440
+ --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
441
+ --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
442
+ --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
443
+ --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
444
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
445
+ --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
446
+ --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
447
+ --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
448
+ --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
425
449
  --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
426
450
  --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
427
451
  --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
@@ -430,6 +454,10 @@
430
454
  --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
431
455
  --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
432
456
  --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
457
+ --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
458
+ --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
459
+ --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
460
+ --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
433
461
  --t-border-color-default-base:var(--t-border-color);
434
462
  --t-border-color-default-dark:var(--t-border-color-dark);
435
463
  --t-border-color-default-darker:var(--t-border-color-darker);
@@ -440,19 +468,20 @@
440
468
  --t-border-radius-default:var(--t-border-radius);
441
469
  --t-border-width-default:var(--t-border-width);
442
470
  --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
443
- --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline-dim);
471
+ --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
444
472
  --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
445
473
  --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
446
- --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline-dim);
474
+ --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
447
475
  --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
448
476
  --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
449
- --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline-dim);
477
+ --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
450
478
  --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
451
479
  --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
452
480
  --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
453
481
  --t-fill-color-control-primary:var(--t-fill-color-control);
454
482
  --t-fill-color-interaction-default:var(--t-fill-color-interaction);
455
483
  --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
484
+ --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
456
485
  --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
457
486
  --t-icon-color-default-dim:var(--t-icon-color-dim);
458
487
  --t-icon-color-default-disabled:var(--t-icon-color-disabled);
@@ -478,7 +507,7 @@
478
507
  --t-text-color-headline:hsl(0, 0%, 94%);
479
508
  --t-text-color:hsl(0, 0%, 80%);
480
509
  --t-text-color-secondary:hsl(0, 0%, 54%);
481
- --t-text-color-disabled:hsl(0, 0%, 25%);
510
+ --t-text-color-disabled:hsl(0, 0%, 32%);
482
511
  --t-text-color-placeholder:hsl(0, 0%, 38%);
483
512
  --t-text-color-interaction:hsl(204, 68%, 55%);
484
513
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
@@ -540,10 +569,10 @@
540
569
  --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
541
570
  --t-fill-color-control:hsl(204, 100%, 35%);
542
571
  --t-fill-color-control-disabled:hsl(0, 0%, 20%);
543
- --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
572
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
544
573
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
545
574
  --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
546
- --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
575
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
547
576
  --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
548
577
  --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
549
578
  --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
@@ -621,10 +650,10 @@
621
650
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
622
651
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
623
652
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
624
- --t-fill-color-button-neutral-outline-dim:hsl(0, 0%, 15%);
625
- --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
626
- --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
627
- --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
653
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
654
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
655
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
656
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
628
657
  --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
629
658
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
630
659
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
@@ -634,10 +663,10 @@
634
663
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
635
664
  --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
636
665
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
637
- --t-fill-color-button-interaction-outline-dim:hsl(204, 32%, 15%);
638
- --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
639
- --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
640
- --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
666
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
667
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
668
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
669
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
641
670
  --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
642
671
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
643
672
  --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
@@ -645,10 +674,10 @@
645
674
  --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
646
675
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
647
676
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
648
- --t-fill-color-button-delete-outline-dim:hsl(8, 20%, 16%);
649
- --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
650
- --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
651
- --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
677
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
678
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
679
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
680
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
652
681
  --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
653
682
  --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
654
683
  --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
@@ -692,8 +721,16 @@
692
721
  --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
693
722
  --t-border-color-control-neutral:hsl(0, 0%, 33%);
694
723
  --t-border-color-control-info:hsl(204, 100%, 35%);
695
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
724
+ --t-border-color-control-disabled:hsl(0, 0%, 24%);
696
725
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
726
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
727
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
728
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
729
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
730
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
731
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
732
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
733
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
697
734
  }
698
735
 
699
736
  @media (prefers-color-scheme: dark){
@@ -702,7 +739,7 @@
702
739
  --t-text-color-headline:hsl(0, 0%, 94%);
703
740
  --t-text-color:hsl(0, 0%, 80%);
704
741
  --t-text-color-secondary:hsl(0, 0%, 54%);
705
- --t-text-color-disabled:hsl(0, 0%, 25%);
742
+ --t-text-color-disabled:hsl(0, 0%, 32%);
706
743
  --t-text-color-placeholder:hsl(0, 0%, 38%);
707
744
  --t-text-color-interaction:hsl(204, 68%, 55%);
708
745
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
@@ -764,10 +801,10 @@
764
801
  --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
765
802
  --t-fill-color-control:hsl(204, 100%, 35%);
766
803
  --t-fill-color-control-disabled:hsl(0, 0%, 20%);
767
- --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
804
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
768
805
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
769
806
  --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
770
- --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
807
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
771
808
  --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
772
809
  --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
773
810
  --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
@@ -845,10 +882,10 @@
845
882
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
846
883
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
847
884
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
848
- --t-fill-color-button-neutral-outline-dim:hsl(0, 0%, 15%);
849
- --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
850
- --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
851
- --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
885
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
886
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
887
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
888
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
852
889
  --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
853
890
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
854
891
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
@@ -858,10 +895,10 @@
858
895
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
859
896
  --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
860
897
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
861
- --t-fill-color-button-interaction-outline-dim:hsl(204, 32%, 15%);
862
- --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
863
- --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
864
- --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
898
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
899
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
900
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
901
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
865
902
  --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
866
903
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
867
904
  --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
@@ -869,10 +906,10 @@
869
906
  --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
870
907
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
871
908
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
872
- --t-fill-color-button-delete-outline-dim:hsl(8, 20%, 16%);
873
- --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
874
- --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
875
- --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
909
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
910
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
911
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
912
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
876
913
  --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
877
914
  --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
878
915
  --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
@@ -916,9 +953,20 @@
916
953
  --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
917
954
  --t-border-color-control-neutral:hsl(0, 0%, 33%);
918
955
  --t-border-color-control-info:hsl(204, 100%, 35%);
919
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
956
+ --t-border-color-control-disabled:hsl(0, 0%, 24%);
920
957
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
958
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
959
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
960
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
961
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
962
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
963
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
964
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
965
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
966
+ }
921
967
  }
968
+
969
+ @media (prefers-color-scheme: dark){
922
970
  }
923
971
 
924
972
  @layer t-critical{
@@ -931,8 +979,8 @@
931
979
  .tds-page-header{
932
980
  --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
933
981
  --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
934
- --tds-page-header-color:var(--t-text-color-default-primary);
935
- --tds-page-header-headline-color:var(--t-text-color-default-headline);
982
+ --tds-page-header-color:var(--t-text-color);
983
+ --tds-page-header-headline-color:var(--t-text-color-headline);
936
984
  --tds-page-header-headline-font-size:var(--t-font-size-2xl);
937
985
  --tds-page-header-padding-x:var(--t-spacing-2);
938
986
  --tds-page-header-padding-y:var(--t-spacing-2);
@@ -941,29 +989,29 @@
941
989
  --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
942
990
  --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
943
991
  --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
944
- --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
992
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
945
993
  --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
946
994
  --tds-page-header-nav-item-border-width:1px;
947
995
 
948
996
  --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
949
- --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
997
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color);
950
998
 
951
- --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
999
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
952
1000
  --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
953
1001
  --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
954
1002
 
955
1003
  --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
956
1004
  --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
957
1005
 
958
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
1006
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
959
1007
  --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
960
1008
  --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
961
1009
 
962
- --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
1010
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
963
1011
  --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
964
1012
  --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
965
1013
  --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
966
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
1014
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
967
1015
  }
968
1016
 
969
1017
  .tds-page-header--profile{
@@ -972,16 +1020,16 @@
972
1020
  @media (min-width: 600px){
973
1021
  .tds-page-header{
974
1022
  --tds-page-header-background-color:var(--t-surface-color-canvas);
975
- --tds-page-header-color:var(--t-text-color-default-secondary);
1023
+ --tds-page-header-color:var(--t-text-color-secondary);
976
1024
  --tds-page-header-padding-x:var(--t-spacing-3);
977
1025
  --tds-page-header-headline-font-size:var(--t-font-size-3xl);
978
1026
  --tds-page-header-nav-gap:var(--t-spacing-half);
979
1027
  --tds-page-header-nav-background:transparent;
980
1028
  --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
981
1029
  --tds-page-header-nav-item-border-width:1px;
982
- --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
1030
+ --tds-page-header-nav-item-color:var(--t-text-color);
983
1031
  --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
984
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
1032
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
985
1033
  }
986
1034
  }
987
1035
  }
@@ -992,7 +1040,7 @@
992
1040
  padding-top:var(--tds-page-header-padding-y);
993
1041
  color:var(--tds-page-header-color);
994
1042
  background:var(--tds-page-header-background-color);
995
- border-bottom:1px solid var(--t-border-color-default-base);
1043
+ border-bottom:1px solid var(--t-border-color);
996
1044
  }
997
1045
 
998
1046
  .tds-page-header:not(.has-nav){
@@ -1220,8 +1268,8 @@
1220
1268
  --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1221
1269
  --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1222
1270
 
1223
- --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
1224
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
1271
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1272
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1225
1273
  }
1226
1274
 
1227
1275
  .tds-sidenav--theme-gray{
@@ -1262,7 +1310,7 @@
1262
1310
  font-size:var(--t-font-size-sm);
1263
1311
  font-weight:var(--t-font-weight-semibold);
1264
1312
  line-height:1.35;
1265
- color:var(--t-text-color-default-secondary);
1313
+ color:var(--t-text-color-secondary);
1266
1314
  text-transform:uppercase;
1267
1315
  }
1268
1316
 
@@ -1301,7 +1349,7 @@
1301
1349
  overflow:hidden;
1302
1350
  font-size:var(--t-font-size-sm);
1303
1351
  line-height:18px;
1304
- color:var(--t-text-color-default-headline);
1352
+ color:var(--t-text-color-headline);
1305
1353
  white-space:nowrap;
1306
1354
  text-decoration:none;
1307
1355
  -webkit-appearance:none;
@@ -1310,7 +1358,7 @@
1310
1358
  cursor:pointer;
1311
1359
  background-color:var(--tds-sidenav-item-background, transparent);
1312
1360
  border:0;
1313
- border-radius:var(--t-border-radius-default);
1361
+ border-radius:var(--t-border-radius);
1314
1362
  transition:var(--tds-sidenav-item-transition);
1315
1363
  }
1316
1364
 
@@ -1325,7 +1373,7 @@
1325
1373
 
1326
1374
  :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1327
1375
  --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1328
- color:var(--t-text-color-default-headline);
1376
+ color:var(--t-text-color-headline);
1329
1377
  text-decoration:none;
1330
1378
  }
1331
1379
 
@@ -1411,7 +1459,7 @@
1411
1459
  height:100%;
1412
1460
  content:"";
1413
1461
  background-color:var(--tds-sidenav-item-nested-background);
1414
- border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
1462
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1415
1463
  transition:var(--tds-sidenav-item-transition);
1416
1464
  }
1417
1465
 
@@ -1452,7 +1500,7 @@
1452
1500
  margin:0;
1453
1501
  font-size:var(--t-font-size-lg);
1454
1502
  font-weight:var(--t-font-weight-medium);
1455
- color:var(--t-text-color-default-headline);
1503
+ color:var(--t-text-color-headline);
1456
1504
  }
1457
1505
 
1458
1506
  @media (max-width: 719px){
@@ -1531,9 +1579,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1531
1579
  --tds-btn-font-size:16px;
1532
1580
  --tds-btn-font-weight:400;
1533
1581
  --tds-btn-line-height:1.5;
1534
- --tds-btn-color:var(--t-text-color-default-headline);
1582
+ --tds-btn-color:var(--t-text-color-headline);
1535
1583
  --tds-btn-bg:transparent;
1536
- --tds-btn-border-width:var(--t-border-width-default);
1584
+ --tds-btn-border-width:var(--t-border-width);
1537
1585
  --tds-btn-border-color:transparent;
1538
1586
  --tds-btn-border-radius:var(--t-border-radius-md);
1539
1587
  --tds-btn-border-color-hover:transparent;
@@ -1661,15 +1709,15 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1661
1709
 
1662
1710
  .tds-btn--neutral{
1663
1711
  --tds-btn-color:var(--t-text-color-status-neutral);
1664
- --tds-btn-bg:var(--t-fill-color-button-neutral-solid-default);
1665
- --tds-btn-border-color:var(--t-fill-color-button-neutral-solid-default);
1712
+ --tds-btn-bg:var(--t-fill-color-button-neutral-solid);
1713
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-solid);
1666
1714
  --tds-btn-color-hover:var(--t-text-color-status-neutral);
1667
1715
  --tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
1668
1716
  --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
1669
1717
  --tds-btn-color-active:var(--t-text-color-status-neutral);
1670
1718
  --tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
1671
1719
  --tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
1672
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1720
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1673
1721
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1674
1722
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1675
1723
  }
@@ -1699,32 +1747,32 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1699
1747
  }
1700
1748
 
1701
1749
  .tds-btn--interaction{
1702
- --tds-btn-color:var(--t-text-color-default-inverted);
1703
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
1704
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
1705
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1750
+ --tds-btn-color:var(--t-text-color-inverted);
1751
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
1752
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
1753
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1706
1754
  --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
1707
1755
  --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
1708
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1756
+ --tds-btn-color-active:var(--t-text-color-inverted);
1709
1757
  --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
1710
1758
  --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
1711
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1759
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1712
1760
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1713
1761
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1714
1762
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
1715
1763
  }
1716
1764
 
1717
1765
  .tds-btn--delete{
1718
- --tds-btn-color:var(--t-text-color-default-inverted);
1719
- --tds-btn-bg:var(--t-fill-color-button-delete-solid-default);
1720
- --tds-btn-border-color:var(--t-fill-color-button-delete-solid-default);
1721
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1766
+ --tds-btn-color:var(--t-text-color-inverted);
1767
+ --tds-btn-bg:var(--t-fill-color-button-delete-solid);
1768
+ --tds-btn-border-color:var(--t-fill-color-button-delete-solid);
1769
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1722
1770
  --tds-btn-bg-hover:var(--t-fill-color-button-delete-solid-hover);
1723
1771
  --tds-btn-border-color-hover:var(--t-fill-color-button-delete-solid-hover);
1724
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1772
+ --tds-btn-color-active:var(--t-text-color-inverted);
1725
1773
  --tds-btn-bg-active:var(--t-fill-color-button-delete-solid-active);
1726
1774
  --tds-btn-border-color-active:var(--t-fill-color-button-delete-solid-active);
1727
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1775
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1728
1776
  --tds-btn-bg-disabled:var(--t-fill-color-button-delete-solid-disabled);
1729
1777
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1730
1778
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1734,27 +1782,27 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1734
1782
  --tds-btn-color:var(--t-text-color-status-neutral);
1735
1783
  --tds-btn-border-color:var(--t-border-color-button-neutral);
1736
1784
  --tds-btn-color-hover:var(--tds-btn-color);
1737
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1785
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1738
1786
  --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
1739
1787
  --tds-btn-color-active:var(--tds-btn-color);
1740
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1788
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1741
1789
  --tds-btn-border-color-active:var(--t-border-color-button-neutral);
1742
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1743
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
1790
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1791
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
1744
1792
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1745
1793
  }
1746
1794
 
1747
1795
  .tds-btn--outline-interaction{
1748
- --tds-btn-color:var(--t-text-color-interaction-primary);
1796
+ --tds-btn-color:var(--t-text-color-interaction);
1749
1797
  --tds-btn-border-color:var(--t-border-color-button-info);
1750
1798
  --tds-btn-color-hover:var(--tds-btn-color);
1751
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
1799
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
1752
1800
  --tds-btn-border-color-hover:var(--tds-btn-border-color);
1753
1801
  --tds-btn-color-active:var(--tds-btn-color);
1754
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
1802
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
1755
1803
  --tds-btn-border-color-active:var(--tds-btn-border-color);
1756
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1757
- --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-dim-disabled);
1804
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1805
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-disabled);
1758
1806
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1759
1807
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
1760
1808
  }
@@ -1763,13 +1811,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1763
1811
  --tds-btn-color:var(--t-text-color-status-error);
1764
1812
  --tds-btn-border-color:var(--t-border-color-button-delete);
1765
1813
  --tds-btn-color-hover:var(--tds-btn-color);
1766
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
1814
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
1767
1815
  --tds-btn-border-color-hover:var(--tds-btn-border-color);
1768
1816
  --tds-btn-color-active:var(--tds-btn-color);
1769
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
1817
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
1770
1818
  --tds-btn-border-color-active:var(--tds-btn-border-color);
1771
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1772
- --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-dim-disabled);
1819
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1820
+ --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-disabled);
1773
1821
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1774
1822
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
1775
1823
  }
@@ -1778,26 +1826,26 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1778
1826
  --tds-btn-color:var(--t-text-color-status-neutral);
1779
1827
  --tds-btn-border-color:transparent;
1780
1828
  --tds-btn-color-hover:var(--tds-btn-color);
1781
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1829
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1782
1830
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1783
1831
  --tds-btn-color-active:var(--tds-btn-color);
1784
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1832
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1785
1833
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1786
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1834
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1787
1835
  --tds-btn-bg-disabled:transparent;
1788
1836
  --tds-btn-border-color-disabled:transparent;
1789
1837
  }
1790
1838
 
1791
1839
  .tds-btn--ghost-interaction{
1792
- --tds-btn-color:var(--t-text-color-interaction-primary);
1840
+ --tds-btn-color:var(--t-text-color-interaction);
1793
1841
  --tds-btn-border-color:transparent;
1794
1842
  --tds-btn-color-hover:var(--tds-btn-color);
1795
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
1843
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
1796
1844
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1797
1845
  --tds-btn-color-active:var(--tds-btn-color);
1798
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
1846
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
1799
1847
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1800
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1848
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1801
1849
  --tds-btn-bg-disabled:transparent;
1802
1850
  --tds-btn-border-color-disabled:transparent;
1803
1851
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
@@ -1807,12 +1855,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1807
1855
  --tds-btn-color:var(--t-text-color-status-error);
1808
1856
  --tds-btn-border-color:transparent;
1809
1857
  --tds-btn-color-hover:var(--tds-btn-color);
1810
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
1858
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
1811
1859
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1812
1860
  --tds-btn-color-active:var(--tds-btn-color);
1813
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
1861
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
1814
1862
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1815
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1863
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1816
1864
  --tds-btn-bg-disabled:transparent;
1817
1865
  --tds-btn-border-color-disabled:transparent;
1818
1866
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
@@ -1820,7 +1868,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1820
1868
 
1821
1869
  .tds-btn--inline-text,
1822
1870
  a[class="tds-btn"]{
1823
- --tds-btn-color:var(--t-text-color-interaction-primary);
1871
+ --tds-btn-color:var(--t-text-color-interaction);
1824
1872
  --tds-btn-color-hover:var(--t-text-color-interaction-hover);
1825
1873
  --tds-btn-color-active:var(--t-text-color-interaction-active);
1826
1874
  --tds-btn-bg:transparent;
@@ -1845,16 +1893,16 @@ a[class="tds-btn"]{
1845
1893
  }
1846
1894
 
1847
1895
  .tds-btn--primary-page-header{
1848
- --tds-btn-color:var(--t-text-color-default-inverted);
1849
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
1850
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
1851
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1896
+ --tds-btn-color:var(--t-text-color-inverted);
1897
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
1898
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
1899
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1852
1900
  --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
1853
1901
  --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
1854
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1902
+ --tds-btn-color-active:var(--t-text-color-inverted);
1855
1903
  --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
1856
1904
  --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
1857
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1905
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1858
1906
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1859
1907
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1860
1908
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1862,15 +1910,15 @@ a[class="tds-btn"]{
1862
1910
 
1863
1911
  .tds-btn--secondary-page-header{
1864
1912
  --tds-btn-color:var(--t-text-color-status-neutral);
1865
- --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header-default);
1866
- --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header-default);
1913
+ --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header);
1914
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header);
1867
1915
  --tds-btn-color-hover:var(--t-text-color-status-neutral);
1868
1916
  --tds-btn-bg-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
1869
1917
  --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
1870
1918
  --tds-btn-color-active:var(--t-text-color-status-neutral);
1871
1919
  --tds-btn-bg-active:var(--t-fill-color-button-neutral-responsive-header-active);
1872
1920
  --tds-btn-border-color-active:var(--t-fill-color-button-neutral-responsive-header-active);
1873
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1921
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1874
1922
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
1875
1923
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
1876
1924
  }
@@ -1882,28 +1930,28 @@ a[class="tds-btn"]{
1882
1930
  --tds-btn-bg:transparent;
1883
1931
  --tds-btn-border-color:var(--t-border-color-button-neutral);
1884
1932
  --tds-btn-color-hover:var(--tds-btn-color);
1885
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1933
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1886
1934
  --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
1887
1935
  --tds-btn-color-active:var(--tds-btn-color);
1888
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1936
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1889
1937
  --tds-btn-border-color-active:var(--t-border-color-button-neutral);
1890
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1891
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
1938
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1939
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
1892
1940
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1893
1941
  }
1894
1942
  }
1895
1943
 
1896
1944
  .tds-btn--staff-only{
1897
- --tds-btn-color:var(--t-text-color-default-inverted);
1898
- --tds-btn-bg:var(--t-fill-color-product-staff-base);
1899
- --tds-btn-border-color:var(--t-border-color-default-white);
1900
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1945
+ --tds-btn-color:var(--t-text-color-inverted);
1946
+ --tds-btn-bg:var(--t-fill-color-product-staff);
1947
+ --tds-btn-border-color:var(--t-border-color-white);
1948
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1901
1949
  --tds-btn-bg-hover:var(--t-fill-color-product-staff-dark);
1902
- --tds-btn-border-color-hover:var(--t-border-color-default-white);
1903
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1950
+ --tds-btn-border-color-hover:var(--t-border-color-white);
1951
+ --tds-btn-color-active:var(--t-text-color-inverted);
1904
1952
  --tds-btn-bg-active:var(--t-fill-color-product-staff-darker);
1905
- --tds-btn-border-color-active:var(--t-border-color-default-white);
1906
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1953
+ --tds-btn-border-color-active:var(--t-border-color-white);
1954
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1907
1955
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1908
1956
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1909
1957
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1914,8 +1962,8 @@ a[class="tds-btn"]{
1914
1962
  --tds-btn-padding-y:4px;
1915
1963
  --tds-btn-padding-x:13px;
1916
1964
 
1917
- --tds-btn-color:var(--t-text-color-default-primary);
1918
- --tds-btn-bg:var(--t-fill-color-button-pill-default);
1965
+ --tds-btn-color:var(--t-text-color);
1966
+ --tds-btn-bg:var(--t-fill-color-button-pill);
1919
1967
  --tds-btn-border-color:var(--tds-btn-bg);
1920
1968
  --tds-btn-color-hover:var(--tds-btn-color);
1921
1969
  --tds-btn-bg-hover:var(--t-fill-color-button-pill-hover);
@@ -1924,10 +1972,10 @@ a[class="tds-btn"]{
1924
1972
  --tds-btn-color-active:var(--tds-btn-color);
1925
1973
  --tds-btn-bg-active:var(--t-fill-color-button-pill-active);
1926
1974
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1927
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1975
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1928
1976
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1929
1977
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1930
- --tds-btn-icon-color:var(--t-icon-color-default-secondary);
1978
+ --tds-btn-icon-color:var(--t-icon-color-secondary);
1931
1979
  --tds-btn-min-height:32px;
1932
1980
  }
1933
1981
 
@@ -1974,8 +2022,8 @@ a[class="tds-btn"]{
1974
2022
  display:inline-block;
1975
2023
  width:var(--tds-btn-attention-icon-size);
1976
2024
  height:var(--tds-btn-attention-icon-size);
1977
- background-color:var(--t-icon-color-status-warning-primary);
1978
- border:.125em solid var(--t-border-color-default-white);
2025
+ background-color:var(--t-icon-color-status-warning);
2026
+ border:.125em solid var(--t-border-color-white);
1979
2027
  border-radius:var(--t-border-radius-round);
1980
2028
  }
1981
2029