@planningcenter/tapestry 3.0.0-rc.20 → 3.0.0-rc.21

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 (35) hide show
  1. package/dist/components/page-header/index.js +1 -1
  2. package/dist/components/sidenav/index.js +1 -1
  3. package/dist/index.css +88 -88
  4. package/dist/index.css.map +1 -1
  5. package/dist/print-no-media-queries.css +2 -0
  6. package/dist/print.css +2 -0
  7. package/dist/reactRender.css +520 -520
  8. package/dist/reactRender.css.map +1 -1
  9. package/dist/reactRenderLegacy.css +520 -520
  10. package/dist/reactRenderLegacy.css.map +1 -1
  11. package/dist/tapestry-wc/dist/components/{p-9PkglV2P.js → p-C5iSF06Y.js} +3 -3
  12. package/dist/tapestry-wc/dist/components/{p-9PkglV2P.js.map → p-C5iSF06Y.js.map} +1 -1
  13. package/dist/tapestry-wc/dist/components/{p-DxkrfsDr.js → p-COVN81zG.js} +3 -3
  14. package/dist/tapestry-wc/dist/components/{p-DxkrfsDr.js.map → p-COVN81zG.js.map} +1 -1
  15. package/dist/tapestry-wc/dist/components/{p-DntE3Ce_.js → p-CT_FL8wQ.js} +3 -3
  16. package/dist/tapestry-wc/dist/components/{p-DntE3Ce_.js.map → p-CT_FL8wQ.js.map} +1 -1
  17. package/dist/tapestry-wc/dist/components/{p-Cfwcrohl.js → p-CsShT-kz.js} +2 -2
  18. package/dist/tapestry-wc/dist/components/{p-Cfwcrohl.js.map → p-CsShT-kz.js.map} +1 -1
  19. package/dist/tapestry-wc/dist/components/{p-C4dGV2h9.js → p-f6le2JgV.js} +2 -2
  20. package/dist/tapestry-wc/dist/components/{p-C4dGV2h9.js.map → p-f6le2JgV.js.map} +1 -1
  21. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  22. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  23. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  24. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  25. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  26. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  27. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  28. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  29. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  30. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  31. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  32. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  33. package/dist/unstable.css +100 -100
  34. package/dist/unstable.css.map +1 -1
  35. package/package.json +3 -3
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
 
@@ -1155,8 +1155,8 @@
1155
1155
  .tds-page-header{
1156
1156
  --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1157
1157
  --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1158
- --tds-page-header-color:var(--t-text-color-default-primary);
1159
- --tds-page-header-headline-color:var(--t-text-color-default-headline);
1158
+ --tds-page-header-color:var(--t-text-color);
1159
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1160
1160
  --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1161
1161
  --tds-page-header-padding-x:var(--t-spacing-2);
1162
1162
  --tds-page-header-padding-y:var(--t-spacing-2);
@@ -1165,29 +1165,29 @@
1165
1165
  --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
1166
1166
  --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1167
1167
  --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1168
- --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
1168
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1169
1169
  --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
1170
1170
  --tds-page-header-nav-item-border-width:1px;
1171
1171
 
1172
1172
  --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1173
- --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
1173
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color);
1174
1174
 
1175
- --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
1175
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1176
1176
  --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
1177
1177
  --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1178
1178
 
1179
1179
  --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
1180
1180
  --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
1181
1181
 
1182
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
1182
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1183
1183
  --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1184
1184
  --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1185
1185
 
1186
- --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
1186
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1187
1187
  --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1188
1188
  --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1189
1189
  --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1190
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
1190
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1191
1191
  }
1192
1192
 
1193
1193
  .tds-page-header--profile{
@@ -1196,16 +1196,16 @@
1196
1196
  @media (min-width: 600px){
1197
1197
  .tds-page-header{
1198
1198
  --tds-page-header-background-color:var(--t-surface-color-canvas);
1199
- --tds-page-header-color:var(--t-text-color-default-secondary);
1199
+ --tds-page-header-color:var(--t-text-color-secondary);
1200
1200
  --tds-page-header-padding-x:var(--t-spacing-3);
1201
1201
  --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1202
1202
  --tds-page-header-nav-gap:var(--t-spacing-half);
1203
1203
  --tds-page-header-nav-background:transparent;
1204
1204
  --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1205
1205
  --tds-page-header-nav-item-border-width:1px;
1206
- --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
1206
+ --tds-page-header-nav-item-color:var(--t-text-color);
1207
1207
  --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1208
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
1208
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1209
1209
  }
1210
1210
  }
1211
1211
  }
@@ -1216,7 +1216,7 @@
1216
1216
  padding-top:var(--tds-page-header-padding-y);
1217
1217
  color:var(--tds-page-header-color);
1218
1218
  background:var(--tds-page-header-background-color);
1219
- border-bottom:1px solid var(--t-border-color-default-base);
1219
+ border-bottom:1px solid var(--t-border-color);
1220
1220
  }
1221
1221
 
1222
1222
  .tds-page-header:not(.has-nav){
@@ -1444,8 +1444,8 @@
1444
1444
  --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1445
1445
  --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1446
1446
 
1447
- --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
1448
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
1447
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1448
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1449
1449
  }
1450
1450
 
1451
1451
  .tds-sidenav--theme-gray{
@@ -1486,7 +1486,7 @@
1486
1486
  font-size:var(--t-font-size-sm);
1487
1487
  font-weight:var(--t-font-weight-semibold);
1488
1488
  line-height:1.35;
1489
- color:var(--t-text-color-default-secondary);
1489
+ color:var(--t-text-color-secondary);
1490
1490
  text-transform:uppercase;
1491
1491
  }
1492
1492
 
@@ -1525,7 +1525,7 @@
1525
1525
  overflow:hidden;
1526
1526
  font-size:var(--t-font-size-sm);
1527
1527
  line-height:18px;
1528
- color:var(--t-text-color-default-headline);
1528
+ color:var(--t-text-color-headline);
1529
1529
  white-space:nowrap;
1530
1530
  text-decoration:none;
1531
1531
  -webkit-appearance:none;
@@ -1534,7 +1534,7 @@
1534
1534
  cursor:pointer;
1535
1535
  background-color:var(--tds-sidenav-item-background, transparent);
1536
1536
  border:0;
1537
- border-radius:var(--t-border-radius-default);
1537
+ border-radius:var(--t-border-radius);
1538
1538
  transition:var(--tds-sidenav-item-transition);
1539
1539
  }
1540
1540
 
@@ -1549,7 +1549,7 @@
1549
1549
 
1550
1550
  :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1551
1551
  --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1552
- color:var(--t-text-color-default-headline);
1552
+ color:var(--t-text-color-headline);
1553
1553
  text-decoration:none;
1554
1554
  }
1555
1555
 
@@ -1635,7 +1635,7 @@
1635
1635
  height:100%;
1636
1636
  content:"";
1637
1637
  background-color:var(--tds-sidenav-item-nested-background);
1638
- border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
1638
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1639
1639
  transition:var(--tds-sidenav-item-transition);
1640
1640
  }
1641
1641
 
@@ -1676,7 +1676,7 @@
1676
1676
  margin:0;
1677
1677
  font-size:var(--t-font-size-lg);
1678
1678
  font-weight:var(--t-font-weight-medium);
1679
- color:var(--t-text-color-default-headline);
1679
+ color:var(--t-text-color-headline);
1680
1680
  }
1681
1681
 
1682
1682
  @media (max-width: 719px){
@@ -1755,9 +1755,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1755
1755
  --tds-btn-font-size:16px;
1756
1756
  --tds-btn-font-weight:400;
1757
1757
  --tds-btn-line-height:1.5;
1758
- --tds-btn-color:var(--t-text-color-default-headline);
1758
+ --tds-btn-color:var(--t-text-color-headline);
1759
1759
  --tds-btn-bg:transparent;
1760
- --tds-btn-border-width:var(--t-border-width-default);
1760
+ --tds-btn-border-width:var(--t-border-width);
1761
1761
  --tds-btn-border-color:transparent;
1762
1762
  --tds-btn-border-radius:var(--t-border-radius-md);
1763
1763
  --tds-btn-border-color-hover:transparent;
@@ -1885,15 +1885,15 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1885
1885
 
1886
1886
  .tds-btn--neutral{
1887
1887
  --tds-btn-color:var(--t-text-color-status-neutral);
1888
- --tds-btn-bg:var(--t-fill-color-button-neutral-solid-default);
1889
- --tds-btn-border-color:var(--t-fill-color-button-neutral-solid-default);
1888
+ --tds-btn-bg:var(--t-fill-color-button-neutral-solid);
1889
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-solid);
1890
1890
  --tds-btn-color-hover:var(--t-text-color-status-neutral);
1891
1891
  --tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
1892
1892
  --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
1893
1893
  --tds-btn-color-active:var(--t-text-color-status-neutral);
1894
1894
  --tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
1895
1895
  --tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
1896
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1896
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1897
1897
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1898
1898
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1899
1899
  }
@@ -1923,32 +1923,32 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1923
1923
  }
1924
1924
 
1925
1925
  .tds-btn--interaction{
1926
- --tds-btn-color:var(--t-text-color-default-inverted);
1927
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
1928
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
1929
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1926
+ --tds-btn-color:var(--t-text-color-inverted);
1927
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
1928
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
1929
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1930
1930
  --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
1931
1931
  --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
1932
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1932
+ --tds-btn-color-active:var(--t-text-color-inverted);
1933
1933
  --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
1934
1934
  --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
1935
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1935
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1936
1936
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1937
1937
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1938
1938
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
1939
1939
  }
1940
1940
 
1941
1941
  .tds-btn--delete{
1942
- --tds-btn-color:var(--t-text-color-default-inverted);
1943
- --tds-btn-bg:var(--t-fill-color-button-delete-solid-default);
1944
- --tds-btn-border-color:var(--t-fill-color-button-delete-solid-default);
1945
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1942
+ --tds-btn-color:var(--t-text-color-inverted);
1943
+ --tds-btn-bg:var(--t-fill-color-button-delete-solid);
1944
+ --tds-btn-border-color:var(--t-fill-color-button-delete-solid);
1945
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1946
1946
  --tds-btn-bg-hover:var(--t-fill-color-button-delete-solid-hover);
1947
1947
  --tds-btn-border-color-hover:var(--t-fill-color-button-delete-solid-hover);
1948
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1948
+ --tds-btn-color-active:var(--t-text-color-inverted);
1949
1949
  --tds-btn-bg-active:var(--t-fill-color-button-delete-solid-active);
1950
1950
  --tds-btn-border-color-active:var(--t-fill-color-button-delete-solid-active);
1951
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1951
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1952
1952
  --tds-btn-bg-disabled:var(--t-fill-color-button-delete-solid-disabled);
1953
1953
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1954
1954
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1958,27 +1958,27 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1958
1958
  --tds-btn-color:var(--t-text-color-status-neutral);
1959
1959
  --tds-btn-border-color:var(--t-border-color-button-neutral);
1960
1960
  --tds-btn-color-hover:var(--tds-btn-color);
1961
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1961
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1962
1962
  --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
1963
1963
  --tds-btn-color-active:var(--tds-btn-color);
1964
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1964
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1965
1965
  --tds-btn-border-color-active:var(--t-border-color-button-neutral);
1966
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1967
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
1966
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1967
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
1968
1968
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1969
1969
  }
1970
1970
 
1971
1971
  .tds-btn--outline-interaction{
1972
- --tds-btn-color:var(--t-text-color-interaction-primary);
1972
+ --tds-btn-color:var(--t-text-color-interaction);
1973
1973
  --tds-btn-border-color:var(--t-border-color-button-info);
1974
1974
  --tds-btn-color-hover:var(--tds-btn-color);
1975
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
1975
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
1976
1976
  --tds-btn-border-color-hover:var(--tds-btn-border-color);
1977
1977
  --tds-btn-color-active:var(--tds-btn-color);
1978
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
1978
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
1979
1979
  --tds-btn-border-color-active:var(--tds-btn-border-color);
1980
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1981
- --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-dim-disabled);
1980
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1981
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-disabled);
1982
1982
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1983
1983
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
1984
1984
  }
@@ -1987,13 +1987,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1987
1987
  --tds-btn-color:var(--t-text-color-status-error);
1988
1988
  --tds-btn-border-color:var(--t-border-color-button-delete);
1989
1989
  --tds-btn-color-hover:var(--tds-btn-color);
1990
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
1990
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
1991
1991
  --tds-btn-border-color-hover:var(--tds-btn-border-color);
1992
1992
  --tds-btn-color-active:var(--tds-btn-color);
1993
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
1993
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
1994
1994
  --tds-btn-border-color-active:var(--tds-btn-border-color);
1995
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1996
- --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-dim-disabled);
1995
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1996
+ --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-disabled);
1997
1997
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1998
1998
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
1999
1999
  }
@@ -2002,26 +2002,26 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2002
2002
  --tds-btn-color:var(--t-text-color-status-neutral);
2003
2003
  --tds-btn-border-color:transparent;
2004
2004
  --tds-btn-color-hover:var(--tds-btn-color);
2005
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
2005
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
2006
2006
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
2007
2007
  --tds-btn-color-active:var(--tds-btn-color);
2008
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
2008
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
2009
2009
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
2010
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2010
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2011
2011
  --tds-btn-bg-disabled:transparent;
2012
2012
  --tds-btn-border-color-disabled:transparent;
2013
2013
  }
2014
2014
 
2015
2015
  .tds-btn--ghost-interaction{
2016
- --tds-btn-color:var(--t-text-color-interaction-primary);
2016
+ --tds-btn-color:var(--t-text-color-interaction);
2017
2017
  --tds-btn-border-color:transparent;
2018
2018
  --tds-btn-color-hover:var(--tds-btn-color);
2019
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
2019
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
2020
2020
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
2021
2021
  --tds-btn-color-active:var(--tds-btn-color);
2022
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
2022
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
2023
2023
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
2024
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2024
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2025
2025
  --tds-btn-bg-disabled:transparent;
2026
2026
  --tds-btn-border-color-disabled:transparent;
2027
2027
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
@@ -2031,12 +2031,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2031
2031
  --tds-btn-color:var(--t-text-color-status-error);
2032
2032
  --tds-btn-border-color:transparent;
2033
2033
  --tds-btn-color-hover:var(--tds-btn-color);
2034
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
2034
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
2035
2035
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
2036
2036
  --tds-btn-color-active:var(--tds-btn-color);
2037
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
2037
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
2038
2038
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
2039
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2039
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2040
2040
  --tds-btn-bg-disabled:transparent;
2041
2041
  --tds-btn-border-color-disabled:transparent;
2042
2042
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
@@ -2044,7 +2044,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
2044
2044
 
2045
2045
  .tds-btn--inline-text,
2046
2046
  a[class="tds-btn"]{
2047
- --tds-btn-color:var(--t-text-color-interaction-primary);
2047
+ --tds-btn-color:var(--t-text-color-interaction);
2048
2048
  --tds-btn-color-hover:var(--t-text-color-interaction-hover);
2049
2049
  --tds-btn-color-active:var(--t-text-color-interaction-active);
2050
2050
  --tds-btn-bg:transparent;
@@ -2069,16 +2069,16 @@ a[class="tds-btn"]{
2069
2069
  }
2070
2070
 
2071
2071
  .tds-btn--primary-page-header{
2072
- --tds-btn-color:var(--t-text-color-default-inverted);
2073
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
2074
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
2075
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
2072
+ --tds-btn-color:var(--t-text-color-inverted);
2073
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
2074
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
2075
+ --tds-btn-color-hover:var(--t-text-color-inverted);
2076
2076
  --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
2077
2077
  --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
2078
- --tds-btn-color-active:var(--t-text-color-default-inverted);
2078
+ --tds-btn-color-active:var(--t-text-color-inverted);
2079
2079
  --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
2080
2080
  --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
2081
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2081
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2082
2082
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
2083
2083
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
2084
2084
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -2086,15 +2086,15 @@ a[class="tds-btn"]{
2086
2086
 
2087
2087
  .tds-btn--secondary-page-header{
2088
2088
  --tds-btn-color:var(--t-text-color-status-neutral);
2089
- --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header-default);
2090
- --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header-default);
2089
+ --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header);
2090
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header);
2091
2091
  --tds-btn-color-hover:var(--t-text-color-status-neutral);
2092
2092
  --tds-btn-bg-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
2093
2093
  --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
2094
2094
  --tds-btn-color-active:var(--t-text-color-status-neutral);
2095
2095
  --tds-btn-bg-active:var(--t-fill-color-button-neutral-responsive-header-active);
2096
2096
  --tds-btn-border-color-active:var(--t-fill-color-button-neutral-responsive-header-active);
2097
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2097
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2098
2098
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
2099
2099
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
2100
2100
  }
@@ -2106,28 +2106,28 @@ a[class="tds-btn"]{
2106
2106
  --tds-btn-bg:transparent;
2107
2107
  --tds-btn-border-color:var(--t-border-color-button-neutral);
2108
2108
  --tds-btn-color-hover:var(--tds-btn-color);
2109
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
2109
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
2110
2110
  --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
2111
2111
  --tds-btn-color-active:var(--tds-btn-color);
2112
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
2112
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
2113
2113
  --tds-btn-border-color-active:var(--t-border-color-button-neutral);
2114
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2115
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
2114
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2115
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
2116
2116
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
2117
2117
  }
2118
2118
  }
2119
2119
 
2120
2120
  .tds-btn--staff-only{
2121
- --tds-btn-color:var(--t-text-color-default-inverted);
2122
- --tds-btn-bg:var(--t-fill-color-product-staff-base);
2123
- --tds-btn-border-color:var(--t-border-color-default-white);
2124
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
2121
+ --tds-btn-color:var(--t-text-color-inverted);
2122
+ --tds-btn-bg:var(--t-fill-color-product-staff);
2123
+ --tds-btn-border-color:var(--t-border-color-white);
2124
+ --tds-btn-color-hover:var(--t-text-color-inverted);
2125
2125
  --tds-btn-bg-hover:var(--t-fill-color-product-staff-dark);
2126
- --tds-btn-border-color-hover:var(--t-border-color-default-white);
2127
- --tds-btn-color-active:var(--t-text-color-default-inverted);
2126
+ --tds-btn-border-color-hover:var(--t-border-color-white);
2127
+ --tds-btn-color-active:var(--t-text-color-inverted);
2128
2128
  --tds-btn-bg-active:var(--t-fill-color-product-staff-darker);
2129
- --tds-btn-border-color-active:var(--t-border-color-default-white);
2130
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2129
+ --tds-btn-border-color-active:var(--t-border-color-white);
2130
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2131
2131
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
2132
2132
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
2133
2133
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -2138,8 +2138,8 @@ a[class="tds-btn"]{
2138
2138
  --tds-btn-padding-y:4px;
2139
2139
  --tds-btn-padding-x:13px;
2140
2140
 
2141
- --tds-btn-color:var(--t-text-color-default-primary);
2142
- --tds-btn-bg:var(--t-fill-color-button-pill-default);
2141
+ --tds-btn-color:var(--t-text-color);
2142
+ --tds-btn-bg:var(--t-fill-color-button-pill);
2143
2143
  --tds-btn-border-color:var(--tds-btn-bg);
2144
2144
  --tds-btn-color-hover:var(--tds-btn-color);
2145
2145
  --tds-btn-bg-hover:var(--t-fill-color-button-pill-hover);
@@ -2148,10 +2148,10 @@ a[class="tds-btn"]{
2148
2148
  --tds-btn-color-active:var(--tds-btn-color);
2149
2149
  --tds-btn-bg-active:var(--t-fill-color-button-pill-active);
2150
2150
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
2151
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2151
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
2152
2152
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
2153
2153
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
2154
- --tds-btn-icon-color:var(--t-icon-color-default-secondary);
2154
+ --tds-btn-icon-color:var(--t-icon-color-secondary);
2155
2155
  --tds-btn-min-height:32px;
2156
2156
  }
2157
2157
 
@@ -2198,8 +2198,8 @@ a[class="tds-btn"]{
2198
2198
  display:inline-block;
2199
2199
  width:var(--tds-btn-attention-icon-size);
2200
2200
  height:var(--tds-btn-attention-icon-size);
2201
- background-color:var(--t-icon-color-status-warning-primary);
2202
- border:.125em solid var(--t-border-color-default-white);
2201
+ background-color:var(--t-icon-color-status-warning);
2202
+ border:.125em solid var(--t-border-color-white);
2203
2203
  border-radius:var(--t-border-radius-round);
2204
2204
  }
2205
2205