@planningcenter/tapestry 3.0.0-rc.3 → 3.0.0-rc.30

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 (82) 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 +200 -173
  14. package/dist/index.css.map +1 -1
  15. package/dist/index.d.ts +0 -2
  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 +1164 -1137
  24. package/dist/reactRender.css.map +1 -1
  25. package/dist/reactRenderLegacy.css +1164 -1137
  26. package/dist/reactRenderLegacy.css.map +1 -1
  27. package/dist/tapestry-wc/dist/components/{p-5-Cvrlgk.js → p-Bppf6-_Y.js} +2 -2
  28. package/dist/tapestry-wc/dist/components/p-Bppf6-_Y.js.map +1 -0
  29. package/dist/tapestry-wc/dist/components/{p-74Cc2nEh.js → p-CNKVnlk4.js} +2 -2
  30. package/dist/tapestry-wc/dist/components/p-CNKVnlk4.js.map +1 -0
  31. package/dist/tapestry-wc/dist/components/{p-D0G2xpOq.js → p-D3WCVcDs.js} +3 -3
  32. package/dist/tapestry-wc/dist/components/p-D3WCVcDs.js.map +1 -0
  33. package/dist/tapestry-wc/dist/components/{p-DmP02I4b.js → p-D92vX5_2.js} +3 -3
  34. package/dist/tapestry-wc/dist/components/p-D92vX5_2.js.map +1 -0
  35. package/dist/tapestry-wc/dist/components/{p-D1rzJeWl.js → p-tlUYyCHS.js} +3 -3
  36. package/dist/tapestry-wc/dist/components/p-tlUYyCHS.js.map +1 -0
  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 +188 -39
  50. package/dist/tokens-dark.css +4 -4
  51. package/dist/tokens-dark.css.map +1 -1
  52. package/dist/tokens-dark.js +2 -0
  53. package/dist/tokens-deprecated.css +24 -0
  54. package/dist/tokens-deprecated.css.map +1 -1
  55. package/dist/tokens-deprecated.js +2 -0
  56. package/dist/tokens.css +17 -6
  57. package/dist/tokens.css.map +1 -1
  58. package/dist/tokens.js +2 -0
  59. package/dist/unstable.css +212 -185
  60. package/dist/unstable.css.map +1 -1
  61. package/dist/unstable.d.ts +1 -1
  62. package/dist/unstable.d.ts.map +1 -1
  63. package/dist/unstable.js +2 -1
  64. package/dist/unstable.js.map +1 -1
  65. package/package.json +17 -17
  66. package/dist/tapestry-wc/dist/components/p-5-Cvrlgk.js.map +0 -1
  67. package/dist/tapestry-wc/dist/components/p-74Cc2nEh.js.map +0 -1
  68. package/dist/tapestry-wc/dist/components/p-D0G2xpOq.js.map +0 -1
  69. package/dist/tapestry-wc/dist/components/p-D1rzJeWl.js.map +0 -1
  70. package/dist/tapestry-wc/dist/components/p-DmP02I4b.js.map +0 -1
  71. package/dist/tokens/ts/react-native-tokens.d.ts +0 -1764
  72. package/dist/tokens/ts/react-native-tokens.d.ts.map +0 -1
  73. package/dist/tokens/ts/react-native-tokens.js +0 -454
  74. package/dist/tokens/ts/react-native-tokens.js.map +0 -1
  75. package/dist/tokens/ts/tokens.d.ts +0 -452
  76. package/dist/tokens/ts/tokens.d.ts.map +0 -1
  77. package/dist/tokens/ts/tokens.js +0 -454
  78. package/dist/tokens/ts/tokens.js.map +0 -1
  79. package/dist/tokens-deprecated.d.ts +0 -2
  80. package/dist/tokens-deprecated.d.ts.map +0 -1
  81. package/dist/tokens.d.ts +0 -4
  82. package/dist/tokens.d.ts.map +0 -1
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
 
@@ -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;
@@ -227,7 +228,7 @@
227
228
  --t-text-color-headline:hsl(0, 0%, 12%);
228
229
  --t-text-color:hsl(0, 0%, 24%);
229
230
  --t-text-color-secondary:hsl(0, 0%, 42%);
230
- --t-text-color-disabled:hsl(0, 0%, 81%);
231
+ --t-text-color-disabled:hsl(0, 0%, 68%);
231
232
  --t-text-color-placeholder:hsl(0, 0%, 58%);
232
233
  --t-text-color-inverted:hsl(0, 0%, 100%);
233
234
  --t-text-color-interaction:hsl(204, 100%, 40%);
@@ -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%);
@@ -566,8 +575,10 @@
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);
@@ -586,6 +597,84 @@
586
597
  --t-form-font-color-readonly:var(--t-text-color);
587
598
  --t-form-picker-icon-color:var(--t-icon-color);
588
599
  --t-form-placeholder-color:var(--t-text-color-placeholder);
600
+ --t-border-size-default:var(--t-border-width);
601
+ --t-border-size-thick:var(--t-border-width-thick);
602
+ --t-font-weight-semi-bold:var(--t-font-weight-semibold);
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);
610
+ --t-fill-color-alert-info:hsl(204, 94%, 49%);
611
+ --t-fill-color-alert-success:hsl(122, 60%, 41%);
612
+ --t-fill-color-alert-warning:hsl(43, 96%, 58%);
613
+ --t-fill-color-alert-error:hsl(4, 77%, 59%);
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);
624
+ --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
625
+ --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
626
+ --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
627
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
628
+ --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
629
+ --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
630
+ --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
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);
589
678
  }
590
679
 
591
680
  :root[data-color-mode="dark"]{
@@ -593,7 +682,7 @@
593
682
  --t-text-color-headline:hsl(0, 0%, 94%);
594
683
  --t-text-color:hsl(0, 0%, 80%);
595
684
  --t-text-color-secondary:hsl(0, 0%, 54%);
596
- --t-text-color-disabled:hsl(0, 0%, 25%);
685
+ --t-text-color-disabled:hsl(0, 0%, 32%);
597
686
  --t-text-color-placeholder:hsl(0, 0%, 38%);
598
687
  --t-text-color-interaction:hsl(204, 68%, 55%);
599
688
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
@@ -807,8 +896,16 @@
807
896
  --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
808
897
  --t-border-color-control-neutral:hsl(0, 0%, 33%);
809
898
  --t-border-color-control-info:hsl(204, 100%, 35%);
810
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
899
+ --t-border-color-control-disabled:hsl(0, 0%, 24%);
811
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);
812
909
  }
813
910
 
814
911
  @media (prefers-color-scheme: dark){
@@ -817,7 +914,7 @@
817
914
  --t-text-color-headline:hsl(0, 0%, 94%);
818
915
  --t-text-color:hsl(0, 0%, 80%);
819
916
  --t-text-color-secondary:hsl(0, 0%, 54%);
820
- --t-text-color-disabled:hsl(0, 0%, 25%);
917
+ --t-text-color-disabled:hsl(0, 0%, 32%);
821
918
  --t-text-color-placeholder:hsl(0, 0%, 38%);
822
919
  --t-text-color-interaction:hsl(204, 68%, 55%);
823
920
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
@@ -1031,90 +1128,20 @@
1031
1128
  --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
1032
1129
  --t-border-color-control-neutral:hsl(0, 0%, 33%);
1033
1130
  --t-border-color-control-info:hsl(204, 100%, 35%);
1034
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
1131
+ --t-border-color-control-disabled:hsl(0, 0%, 24%);
1035
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);
1036
1141
  }
1037
1142
  }
1038
1143
 
1039
- :root{
1040
- --t-border-size-default:var(--t-border-width);
1041
- --t-border-size-thick:var(--t-border-width-thick);
1042
- --t-font-weight-semi-bold:var(--t-font-weight-semibold);
1043
- --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
1044
- --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
1045
- --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
1046
- --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
1047
- --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
1048
- --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
1049
- --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
1050
- --t-fill-color-alert-info:hsl(204, 94%, 49%);
1051
- --t-fill-color-alert-success:hsl(122, 60%, 41%);
1052
- --t-fill-color-alert-warning:hsl(43, 96%, 58%);
1053
- --t-fill-color-alert-error:hsl(4, 77%, 59%);
1054
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
1055
- --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
1056
- --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
1057
- --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
1058
- --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
1059
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
1060
- --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
1061
- --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
1062
- --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
1063
- --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
1064
- --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
1065
- --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
1066
- --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
1067
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
1068
- --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
1069
- --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
1070
- --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
1071
- --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
1072
- --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
1073
- --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
1074
- --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
1075
- --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
1076
- --t-border-color-default-base:var(--t-border-color);
1077
- --t-border-color-default-dark:var(--t-border-color-dark);
1078
- --t-border-color-default-darker:var(--t-border-color-darker);
1079
- --t-border-color-default-darkest:var(--t-border-color-darkest);
1080
- --t-border-color-default-dim:var(--t-border-color-dim);
1081
- --t-border-color-default-disabled:var(--t-border-color-disabled);
1082
- --t-border-color-default-white:var(--t-border-color-white);
1083
- --t-border-radius-default:var(--t-border-radius);
1084
- --t-border-width-default:var(--t-border-width);
1085
- --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
1086
- --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
1087
- --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
1088
- --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
1089
- --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
1090
- --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
1091
- --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
1092
- --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
1093
- --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
1094
- --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
1095
- --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
1096
- --t-fill-color-control-primary:var(--t-fill-color-control);
1097
- --t-fill-color-interaction-default:var(--t-fill-color-interaction);
1098
- --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
1099
- --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
1100
- --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
1101
- --t-icon-color-default-dim:var(--t-icon-color-dim);
1102
- --t-icon-color-default-disabled:var(--t-icon-color-disabled);
1103
- --t-icon-color-default-inverted:var(--t-icon-color-inverted);
1104
- --t-icon-color-default-primary:var(--t-icon-color);
1105
- --t-icon-color-default-secondary:var(--t-icon-color-secondary);
1106
- --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
1107
- --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
1108
- --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
1109
- --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
1110
- --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
1111
- --t-text-color-default-disabled:var(--t-text-color-disabled);
1112
- --t-text-color-default-headline:var(--t-text-color-headline);
1113
- --t-text-color-default-inverted:var(--t-text-color-inverted);
1114
- --t-text-color-default-placeholder:var(--t-text-color-placeholder);
1115
- --t-text-color-default-primary:var(--t-text-color);
1116
- --t-text-color-default-secondary:var(--t-text-color-secondary);
1117
- --t-text-color-interaction-primary:var(--t-text-color-interaction);
1144
+ @media (prefers-color-scheme: dark){
1118
1145
  }
1119
1146
 
1120
1147
  @layer t-critical{
@@ -1127,8 +1154,8 @@
1127
1154
  .tds-page-header{
1128
1155
  --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1129
1156
  --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1130
- --tds-page-header-color:var(--t-text-color-default-primary);
1131
- --tds-page-header-headline-color:var(--t-text-color-default-headline);
1157
+ --tds-page-header-color:var(--t-text-color);
1158
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1132
1159
  --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1133
1160
  --tds-page-header-padding-x:var(--t-spacing-2);
1134
1161
  --tds-page-header-padding-y:var(--t-spacing-2);
@@ -1137,29 +1164,29 @@
1137
1164
  --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
1138
1165
  --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1139
1166
  --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1140
- --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
1167
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1141
1168
  --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
1142
1169
  --tds-page-header-nav-item-border-width:1px;
1143
1170
 
1144
1171
  --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1145
- --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
1172
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color);
1146
1173
 
1147
- --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
1174
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1148
1175
  --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
1149
1176
  --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1150
1177
 
1151
1178
  --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
1152
1179
  --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
1153
1180
 
1154
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
1181
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1155
1182
  --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1156
1183
  --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1157
1184
 
1158
- --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
1185
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1159
1186
  --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1160
1187
  --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1161
1188
  --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1162
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
1189
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1163
1190
  }
1164
1191
 
1165
1192
  .tds-page-header--profile{
@@ -1168,16 +1195,16 @@
1168
1195
  @media (min-width: 600px){
1169
1196
  .tds-page-header{
1170
1197
  --tds-page-header-background-color:var(--t-surface-color-canvas);
1171
- --tds-page-header-color:var(--t-text-color-default-secondary);
1198
+ --tds-page-header-color:var(--t-text-color-secondary);
1172
1199
  --tds-page-header-padding-x:var(--t-spacing-3);
1173
1200
  --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1174
1201
  --tds-page-header-nav-gap:var(--t-spacing-half);
1175
1202
  --tds-page-header-nav-background:transparent;
1176
1203
  --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1177
1204
  --tds-page-header-nav-item-border-width:1px;
1178
- --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
1205
+ --tds-page-header-nav-item-color:var(--t-text-color);
1179
1206
  --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1180
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
1207
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1181
1208
  }
1182
1209
  }
1183
1210
  }
@@ -1188,7 +1215,7 @@
1188
1215
  padding-top:var(--tds-page-header-padding-y);
1189
1216
  color:var(--tds-page-header-color);
1190
1217
  background:var(--tds-page-header-background-color);
1191
- border-bottom:1px solid var(--t-border-color-default-base);
1218
+ border-bottom:1px solid var(--t-border-color);
1192
1219
  }
1193
1220
 
1194
1221
  .tds-page-header:not(.has-nav){
@@ -1416,8 +1443,8 @@
1416
1443
  --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1417
1444
  --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1418
1445
 
1419
- --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
1420
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
1446
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1447
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1421
1448
  }
1422
1449
 
1423
1450
  .tds-sidenav--theme-gray{
@@ -1458,7 +1485,7 @@
1458
1485
  font-size:var(--t-font-size-sm);
1459
1486
  font-weight:var(--t-font-weight-semibold);
1460
1487
  line-height:1.35;
1461
- color:var(--t-text-color-default-secondary);
1488
+ color:var(--t-text-color-secondary);
1462
1489
  text-transform:uppercase;
1463
1490
  }
1464
1491
 
@@ -1497,7 +1524,7 @@
1497
1524
  overflow:hidden;
1498
1525
  font-size:var(--t-font-size-sm);
1499
1526
  line-height:18px;
1500
- color:var(--t-text-color-default-headline);
1527
+ color:var(--t-text-color-headline);
1501
1528
  white-space:nowrap;
1502
1529
  text-decoration:none;
1503
1530
  -webkit-appearance:none;
@@ -1506,7 +1533,7 @@
1506
1533
  cursor:pointer;
1507
1534
  background-color:var(--tds-sidenav-item-background, transparent);
1508
1535
  border:0;
1509
- border-radius:var(--t-border-radius-default);
1536
+ border-radius:var(--t-border-radius);
1510
1537
  transition:var(--tds-sidenav-item-transition);
1511
1538
  }
1512
1539
 
@@ -1521,7 +1548,7 @@
1521
1548
 
1522
1549
  :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1523
1550
  --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1524
- color:var(--t-text-color-default-headline);
1551
+ color:var(--t-text-color-headline);
1525
1552
  text-decoration:none;
1526
1553
  }
1527
1554
 
@@ -1607,7 +1634,7 @@
1607
1634
  height:100%;
1608
1635
  content:"";
1609
1636
  background-color:var(--tds-sidenav-item-nested-background);
1610
- border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
1637
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1611
1638
  transition:var(--tds-sidenav-item-transition);
1612
1639
  }
1613
1640
 
@@ -1648,7 +1675,7 @@
1648
1675
  margin:0;
1649
1676
  font-size:var(--t-font-size-lg);
1650
1677
  font-weight:var(--t-font-weight-medium);
1651
- color:var(--t-text-color-default-headline);
1678
+ color:var(--t-text-color-headline);
1652
1679
  }
1653
1680
 
1654
1681
  @media (max-width: 719px){
@@ -1727,9 +1754,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1727
1754
  --tds-btn-font-size:16px;
1728
1755
  --tds-btn-font-weight:400;
1729
1756
  --tds-btn-line-height:1.5;
1730
- --tds-btn-color:var(--t-text-color-default-headline);
1757
+ --tds-btn-color:var(--t-text-color-headline);
1731
1758
  --tds-btn-bg:transparent;
1732
- --tds-btn-border-width:var(--t-border-width-default);
1759
+ --tds-btn-border-width:var(--t-border-width);
1733
1760
  --tds-btn-border-color:transparent;
1734
1761
  --tds-btn-border-radius:var(--t-border-radius-md);
1735
1762
  --tds-btn-border-color-hover:transparent;
@@ -1857,15 +1884,15 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1857
1884
 
1858
1885
  .tds-btn--neutral{
1859
1886
  --tds-btn-color:var(--t-text-color-status-neutral);
1860
- --tds-btn-bg:var(--t-fill-color-button-neutral-solid-default);
1861
- --tds-btn-border-color:var(--t-fill-color-button-neutral-solid-default);
1887
+ --tds-btn-bg:var(--t-fill-color-button-neutral-solid);
1888
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-solid);
1862
1889
  --tds-btn-color-hover:var(--t-text-color-status-neutral);
1863
1890
  --tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
1864
1891
  --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
1865
1892
  --tds-btn-color-active:var(--t-text-color-status-neutral);
1866
1893
  --tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
1867
1894
  --tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
1868
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1895
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1869
1896
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1870
1897
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1871
1898
  }
@@ -1895,32 +1922,32 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1895
1922
  }
1896
1923
 
1897
1924
  .tds-btn--interaction{
1898
- --tds-btn-color:var(--t-text-color-default-inverted);
1899
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
1900
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
1901
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1925
+ --tds-btn-color:var(--t-text-color-inverted);
1926
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
1927
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
1928
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1902
1929
  --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
1903
1930
  --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
1904
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1931
+ --tds-btn-color-active:var(--t-text-color-inverted);
1905
1932
  --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
1906
1933
  --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
1907
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1934
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1908
1935
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1909
1936
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1910
1937
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
1911
1938
  }
1912
1939
 
1913
1940
  .tds-btn--delete{
1914
- --tds-btn-color:var(--t-text-color-default-inverted);
1915
- --tds-btn-bg:var(--t-fill-color-button-delete-solid-default);
1916
- --tds-btn-border-color:var(--t-fill-color-button-delete-solid-default);
1917
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1941
+ --tds-btn-color:var(--t-text-color-inverted);
1942
+ --tds-btn-bg:var(--t-fill-color-button-delete-solid);
1943
+ --tds-btn-border-color:var(--t-fill-color-button-delete-solid);
1944
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1918
1945
  --tds-btn-bg-hover:var(--t-fill-color-button-delete-solid-hover);
1919
1946
  --tds-btn-border-color-hover:var(--t-fill-color-button-delete-solid-hover);
1920
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1947
+ --tds-btn-color-active:var(--t-text-color-inverted);
1921
1948
  --tds-btn-bg-active:var(--t-fill-color-button-delete-solid-active);
1922
1949
  --tds-btn-border-color-active:var(--t-fill-color-button-delete-solid-active);
1923
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1950
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1924
1951
  --tds-btn-bg-disabled:var(--t-fill-color-button-delete-solid-disabled);
1925
1952
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1926
1953
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1930,27 +1957,27 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1930
1957
  --tds-btn-color:var(--t-text-color-status-neutral);
1931
1958
  --tds-btn-border-color:var(--t-border-color-button-neutral);
1932
1959
  --tds-btn-color-hover:var(--tds-btn-color);
1933
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1960
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1934
1961
  --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
1935
1962
  --tds-btn-color-active:var(--tds-btn-color);
1936
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1963
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1937
1964
  --tds-btn-border-color-active:var(--t-border-color-button-neutral);
1938
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1939
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
1965
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1966
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
1940
1967
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1941
1968
  }
1942
1969
 
1943
1970
  .tds-btn--outline-interaction{
1944
- --tds-btn-color:var(--t-text-color-interaction-primary);
1971
+ --tds-btn-color:var(--t-text-color-interaction);
1945
1972
  --tds-btn-border-color:var(--t-border-color-button-info);
1946
1973
  --tds-btn-color-hover:var(--tds-btn-color);
1947
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
1974
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
1948
1975
  --tds-btn-border-color-hover:var(--tds-btn-border-color);
1949
1976
  --tds-btn-color-active:var(--tds-btn-color);
1950
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
1977
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
1951
1978
  --tds-btn-border-color-active:var(--tds-btn-border-color);
1952
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1953
- --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-dim-disabled);
1979
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1980
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-disabled);
1954
1981
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1955
1982
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
1956
1983
  }
@@ -1959,13 +1986,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1959
1986
  --tds-btn-color:var(--t-text-color-status-error);
1960
1987
  --tds-btn-border-color:var(--t-border-color-button-delete);
1961
1988
  --tds-btn-color-hover:var(--tds-btn-color);
1962
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
1989
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
1963
1990
  --tds-btn-border-color-hover:var(--tds-btn-border-color);
1964
1991
  --tds-btn-color-active:var(--tds-btn-color);
1965
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
1992
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
1966
1993
  --tds-btn-border-color-active:var(--tds-btn-border-color);
1967
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1968
- --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-dim-disabled);
1994
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1995
+ --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-disabled);
1969
1996
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1970
1997
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
1971
1998
  }
@@ -1974,26 +2001,26 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1974
2001
  --tds-btn-color:var(--t-text-color-status-neutral);
1975
2002
  --tds-btn-border-color:transparent;
1976
2003
  --tds-btn-color-hover:var(--tds-btn-color);
1977
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
2004
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1978
2005
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1979
2006
  --tds-btn-color-active:var(--tds-btn-color);
1980
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
2007
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1981
2008
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1982
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2009
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1983
2010
  --tds-btn-bg-disabled:transparent;
1984
2011
  --tds-btn-border-color-disabled:transparent;
1985
2012
  }
1986
2013
 
1987
2014
  .tds-btn--ghost-interaction{
1988
- --tds-btn-color:var(--t-text-color-interaction-primary);
2015
+ --tds-btn-color:var(--t-text-color-interaction);
1989
2016
  --tds-btn-border-color:transparent;
1990
2017
  --tds-btn-color-hover:var(--tds-btn-color);
1991
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
2018
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
1992
2019
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1993
2020
  --tds-btn-color-active:var(--tds-btn-color);
1994
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
2021
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
1995
2022
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1996
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2023
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1997
2024
  --tds-btn-bg-disabled:transparent;
1998
2025
  --tds-btn-border-color-disabled:transparent;
1999
2026
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
@@ -2003,12 +2030,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2003
2030
  --tds-btn-color:var(--t-text-color-status-error);
2004
2031
  --tds-btn-border-color:transparent;
2005
2032
  --tds-btn-color-hover:var(--tds-btn-color);
2006
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
2033
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
2007
2034
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
2008
2035
  --tds-btn-color-active:var(--tds-btn-color);
2009
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
2036
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
2010
2037
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
2011
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2038
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2012
2039
  --tds-btn-bg-disabled:transparent;
2013
2040
  --tds-btn-border-color-disabled:transparent;
2014
2041
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
@@ -2016,7 +2043,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2016
2043
 
2017
2044
  .tds-btn--inline-text,
2018
2045
  a[class="tds-btn"]{
2019
- --tds-btn-color:var(--t-text-color-interaction-primary);
2046
+ --tds-btn-color:var(--t-text-color-interaction);
2020
2047
  --tds-btn-color-hover:var(--t-text-color-interaction-hover);
2021
2048
  --tds-btn-color-active:var(--t-text-color-interaction-active);
2022
2049
  --tds-btn-bg:transparent;
@@ -2041,16 +2068,16 @@ a[class="tds-btn"]{
2041
2068
  }
2042
2069
 
2043
2070
  .tds-btn--primary-page-header{
2044
- --tds-btn-color:var(--t-text-color-default-inverted);
2045
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
2046
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
2047
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
2071
+ --tds-btn-color:var(--t-text-color-inverted);
2072
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
2073
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
2074
+ --tds-btn-color-hover:var(--t-text-color-inverted);
2048
2075
  --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
2049
2076
  --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
2050
- --tds-btn-color-active:var(--t-text-color-default-inverted);
2077
+ --tds-btn-color-active:var(--t-text-color-inverted);
2051
2078
  --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
2052
2079
  --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
2053
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2080
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2054
2081
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
2055
2082
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
2056
2083
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -2058,15 +2085,15 @@ a[class="tds-btn"]{
2058
2085
 
2059
2086
  .tds-btn--secondary-page-header{
2060
2087
  --tds-btn-color:var(--t-text-color-status-neutral);
2061
- --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header-default);
2062
- --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header-default);
2088
+ --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header);
2089
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header);
2063
2090
  --tds-btn-color-hover:var(--t-text-color-status-neutral);
2064
2091
  --tds-btn-bg-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
2065
2092
  --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
2066
2093
  --tds-btn-color-active:var(--t-text-color-status-neutral);
2067
2094
  --tds-btn-bg-active:var(--t-fill-color-button-neutral-responsive-header-active);
2068
2095
  --tds-btn-border-color-active:var(--t-fill-color-button-neutral-responsive-header-active);
2069
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2096
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2070
2097
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
2071
2098
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
2072
2099
  }
@@ -2078,28 +2105,28 @@ a[class="tds-btn"]{
2078
2105
  --tds-btn-bg:transparent;
2079
2106
  --tds-btn-border-color:var(--t-border-color-button-neutral);
2080
2107
  --tds-btn-color-hover:var(--tds-btn-color);
2081
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
2108
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
2082
2109
  --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
2083
2110
  --tds-btn-color-active:var(--tds-btn-color);
2084
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
2111
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
2085
2112
  --tds-btn-border-color-active:var(--t-border-color-button-neutral);
2086
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2087
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
2113
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2114
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
2088
2115
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
2089
2116
  }
2090
2117
  }
2091
2118
 
2092
2119
  .tds-btn--staff-only{
2093
- --tds-btn-color:var(--t-text-color-default-inverted);
2094
- --tds-btn-bg:var(--t-fill-color-product-staff-base);
2095
- --tds-btn-border-color:var(--t-border-color-default-white);
2096
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
2120
+ --tds-btn-color:var(--t-text-color-inverted);
2121
+ --tds-btn-bg:var(--t-fill-color-product-staff);
2122
+ --tds-btn-border-color:var(--t-border-color-white);
2123
+ --tds-btn-color-hover:var(--t-text-color-inverted);
2097
2124
  --tds-btn-bg-hover:var(--t-fill-color-product-staff-dark);
2098
- --tds-btn-border-color-hover:var(--t-border-color-default-white);
2099
- --tds-btn-color-active:var(--t-text-color-default-inverted);
2125
+ --tds-btn-border-color-hover:var(--t-border-color-white);
2126
+ --tds-btn-color-active:var(--t-text-color-inverted);
2100
2127
  --tds-btn-bg-active:var(--t-fill-color-product-staff-darker);
2101
- --tds-btn-border-color-active:var(--t-border-color-default-white);
2102
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2128
+ --tds-btn-border-color-active:var(--t-border-color-white);
2129
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2103
2130
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
2104
2131
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
2105
2132
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -2110,8 +2137,8 @@ a[class="tds-btn"]{
2110
2137
  --tds-btn-padding-y:4px;
2111
2138
  --tds-btn-padding-x:13px;
2112
2139
 
2113
- --tds-btn-color:var(--t-text-color-default-primary);
2114
- --tds-btn-bg:var(--t-fill-color-button-pill-default);
2140
+ --tds-btn-color:var(--t-text-color);
2141
+ --tds-btn-bg:var(--t-fill-color-button-pill);
2115
2142
  --tds-btn-border-color:var(--tds-btn-bg);
2116
2143
  --tds-btn-color-hover:var(--tds-btn-color);
2117
2144
  --tds-btn-bg-hover:var(--t-fill-color-button-pill-hover);
@@ -2120,10 +2147,10 @@ a[class="tds-btn"]{
2120
2147
  --tds-btn-color-active:var(--tds-btn-color);
2121
2148
  --tds-btn-bg-active:var(--t-fill-color-button-pill-active);
2122
2149
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
2123
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2150
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2124
2151
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
2125
2152
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
2126
- --tds-btn-icon-color:var(--t-icon-color-default-secondary);
2153
+ --tds-btn-icon-color:var(--t-icon-color-secondary);
2127
2154
  --tds-btn-min-height:32px;
2128
2155
  }
2129
2156
 
@@ -2170,8 +2197,8 @@ a[class="tds-btn"]{
2170
2197
  display:inline-block;
2171
2198
  width:var(--tds-btn-attention-icon-size);
2172
2199
  height:var(--tds-btn-attention-icon-size);
2173
- background-color:var(--t-icon-color-status-warning-primary);
2174
- border:.125em solid var(--t-border-color-default-white);
2200
+ background-color:var(--t-icon-color-status-warning);
2201
+ border:.125em solid var(--t-border-color-white);
2175
2202
  border-radius:var(--t-border-radius-round);
2176
2203
  }
2177
2204