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

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