@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/components/page-header/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import '../../tapestry-wc/dist/components/p-Cfwcrohl.js';
1
+ import '../../tapestry-wc/dist/components/p-DIk76iNv.js';
2
2
  import { defineCustomElement } from '../../tapestry-wc/dist/components/tds-page-header.js';
3
3
  import { defineCustomElement as defineCustomElement$1 } from '../../tapestry-wc/dist/components/tds-page-header-nav.js';
4
4
 
package/dist/components/sidenav/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import '../../tapestry-wc/dist/components/p-Cfwcrohl.js';
1
+ import '../../tapestry-wc/dist/components/p-DIk76iNv.js';
2
2
  import { defineCustomElement } from '../../tapestry-wc/dist/components/tds-sidenav.js';
3
3
  import { defineCustomElement as defineCustomElement$1 } from '../../tapestry-wc/dist/components/tds-sidenav-item.js';
4
4
  import { defineCustomElement as defineCustomElement$3 } from '../../tapestry-wc/dist/components/tds-sidenav-responsive-header.js';
package/dist/index.css CHANGED
@@ -394,6 +394,8 @@
394
394
  --t-border-color-control-error:hsl(8, 60%, 47%);
395
395
  --t-border-color-control-disabled:hsl(0, 0%, 88%);
396
396
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.07);
397
+ --t-font-sans-serif:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
398
+ --t-font-monospace:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
397
399
  --t-form-background-color:var(--t-fill-color-neutral-100);
398
400
  --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
399
401
  --t-form-background-color-error:var(--t-fill-color-neutral-100);
@@ -980,8 +982,8 @@
980
982
  .tds-page-header{
981
983
  --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
982
984
  --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
983
- --tds-page-header-color:var(--t-text-color-default-primary);
984
- --tds-page-header-headline-color:var(--t-text-color-default-headline);
985
+ --tds-page-header-color:var(--t-text-color);
986
+ --tds-page-header-headline-color:var(--t-text-color-headline);
985
987
  --tds-page-header-headline-font-size:var(--t-font-size-2xl);
986
988
  --tds-page-header-padding-x:var(--t-spacing-2);
987
989
  --tds-page-header-padding-y:var(--t-spacing-2);
@@ -990,29 +992,29 @@
990
992
  --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
991
993
  --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
992
994
  --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
993
- --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
995
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
994
996
  --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
995
997
  --tds-page-header-nav-item-border-width:1px;
996
998
 
997
999
  --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
998
- --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
1000
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color);
999
1001
 
1000
- --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
1002
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1001
1003
  --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
1002
1004
  --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1003
1005
 
1004
1006
  --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
1005
1007
  --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
1006
1008
 
1007
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
1009
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1008
1010
  --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1009
1011
  --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1010
1012
 
1011
- --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
1013
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1012
1014
  --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1013
1015
  --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1014
1016
  --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1015
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
1017
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1016
1018
  }
1017
1019
 
1018
1020
  .tds-page-header--profile{
@@ -1021,16 +1023,16 @@
1021
1023
  @media (min-width: 600px){
1022
1024
  .tds-page-header{
1023
1025
  --tds-page-header-background-color:var(--t-surface-color-canvas);
1024
- --tds-page-header-color:var(--t-text-color-default-secondary);
1026
+ --tds-page-header-color:var(--t-text-color-secondary);
1025
1027
  --tds-page-header-padding-x:var(--t-spacing-3);
1026
1028
  --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1027
1029
  --tds-page-header-nav-gap:var(--t-spacing-half);
1028
1030
  --tds-page-header-nav-background:transparent;
1029
1031
  --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1030
1032
  --tds-page-header-nav-item-border-width:1px;
1031
- --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
1033
+ --tds-page-header-nav-item-color:var(--t-text-color);
1032
1034
  --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1033
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
1035
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1034
1036
  }
1035
1037
  }
1036
1038
  }
@@ -1041,7 +1043,7 @@
1041
1043
  padding-top:var(--tds-page-header-padding-y);
1042
1044
  color:var(--tds-page-header-color);
1043
1045
  background:var(--tds-page-header-background-color);
1044
- border-bottom:1px solid var(--t-border-color-default-base);
1046
+ border-bottom:1px solid var(--t-border-color);
1045
1047
  }
1046
1048
 
1047
1049
  .tds-page-header:not(.has-nav){
@@ -1269,8 +1271,8 @@
1269
1271
  --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1270
1272
  --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1271
1273
 
1272
- --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
1273
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
1274
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1275
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1274
1276
  }
1275
1277
 
1276
1278
  .tds-sidenav--theme-gray{
@@ -1311,7 +1313,7 @@
1311
1313
  font-size:var(--t-font-size-sm);
1312
1314
  font-weight:var(--t-font-weight-semibold);
1313
1315
  line-height:1.35;
1314
- color:var(--t-text-color-default-secondary);
1316
+ color:var(--t-text-color-secondary);
1315
1317
  text-transform:uppercase;
1316
1318
  }
1317
1319
 
@@ -1350,7 +1352,7 @@
1350
1352
  overflow:hidden;
1351
1353
  font-size:var(--t-font-size-sm);
1352
1354
  line-height:18px;
1353
- color:var(--t-text-color-default-headline);
1355
+ color:var(--t-text-color-headline);
1354
1356
  white-space:nowrap;
1355
1357
  text-decoration:none;
1356
1358
  -webkit-appearance:none;
@@ -1359,7 +1361,7 @@
1359
1361
  cursor:pointer;
1360
1362
  background-color:var(--tds-sidenav-item-background, transparent);
1361
1363
  border:0;
1362
- border-radius:var(--t-border-radius-default);
1364
+ border-radius:var(--t-border-radius);
1363
1365
  transition:var(--tds-sidenav-item-transition);
1364
1366
  }
1365
1367
 
@@ -1374,7 +1376,7 @@
1374
1376
 
1375
1377
  :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1376
1378
  --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1377
- color:var(--t-text-color-default-headline);
1379
+ color:var(--t-text-color-headline);
1378
1380
  text-decoration:none;
1379
1381
  }
1380
1382
 
@@ -1460,7 +1462,7 @@
1460
1462
  height:100%;
1461
1463
  content:"";
1462
1464
  background-color:var(--tds-sidenav-item-nested-background);
1463
- border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
1465
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1464
1466
  transition:var(--tds-sidenav-item-transition);
1465
1467
  }
1466
1468
 
@@ -1501,7 +1503,7 @@
1501
1503
  margin:0;
1502
1504
  font-size:var(--t-font-size-lg);
1503
1505
  font-weight:var(--t-font-weight-medium);
1504
- color:var(--t-text-color-default-headline);
1506
+ color:var(--t-text-color-headline);
1505
1507
  }
1506
1508
 
1507
1509
  @media (max-width: 719px){
@@ -1580,9 +1582,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1580
1582
  --tds-btn-font-size:16px;
1581
1583
  --tds-btn-font-weight:400;
1582
1584
  --tds-btn-line-height:1.5;
1583
- --tds-btn-color:var(--t-text-color-default-headline);
1585
+ --tds-btn-color:var(--t-text-color-headline);
1584
1586
  --tds-btn-bg:transparent;
1585
- --tds-btn-border-width:var(--t-border-width-default);
1587
+ --tds-btn-border-width:var(--t-border-width);
1586
1588
  --tds-btn-border-color:transparent;
1587
1589
  --tds-btn-border-radius:var(--t-border-radius-md);
1588
1590
  --tds-btn-border-color-hover:transparent;
@@ -1710,15 +1712,15 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1710
1712
 
1711
1713
  .tds-btn--neutral{
1712
1714
  --tds-btn-color:var(--t-text-color-status-neutral);
1713
- --tds-btn-bg:var(--t-fill-color-button-neutral-solid-default);
1714
- --tds-btn-border-color:var(--t-fill-color-button-neutral-solid-default);
1715
+ --tds-btn-bg:var(--t-fill-color-button-neutral-solid);
1716
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-solid);
1715
1717
  --tds-btn-color-hover:var(--t-text-color-status-neutral);
1716
1718
  --tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
1717
1719
  --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
1718
1720
  --tds-btn-color-active:var(--t-text-color-status-neutral);
1719
1721
  --tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
1720
1722
  --tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
1721
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1723
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1722
1724
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1723
1725
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1724
1726
  }
@@ -1748,32 +1750,32 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1748
1750
  }
1749
1751
 
1750
1752
  .tds-btn--interaction{
1751
- --tds-btn-color:var(--t-text-color-default-inverted);
1752
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
1753
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
1754
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1753
+ --tds-btn-color:var(--t-text-color-inverted);
1754
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
1755
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
1756
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1755
1757
  --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
1756
1758
  --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
1757
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1759
+ --tds-btn-color-active:var(--t-text-color-inverted);
1758
1760
  --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
1759
1761
  --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
1760
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1762
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1761
1763
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1762
1764
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1763
1765
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
1764
1766
  }
1765
1767
 
1766
1768
  .tds-btn--delete{
1767
- --tds-btn-color:var(--t-text-color-default-inverted);
1768
- --tds-btn-bg:var(--t-fill-color-button-delete-solid-default);
1769
- --tds-btn-border-color:var(--t-fill-color-button-delete-solid-default);
1770
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1769
+ --tds-btn-color:var(--t-text-color-inverted);
1770
+ --tds-btn-bg:var(--t-fill-color-button-delete-solid);
1771
+ --tds-btn-border-color:var(--t-fill-color-button-delete-solid);
1772
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1771
1773
  --tds-btn-bg-hover:var(--t-fill-color-button-delete-solid-hover);
1772
1774
  --tds-btn-border-color-hover:var(--t-fill-color-button-delete-solid-hover);
1773
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1775
+ --tds-btn-color-active:var(--t-text-color-inverted);
1774
1776
  --tds-btn-bg-active:var(--t-fill-color-button-delete-solid-active);
1775
1777
  --tds-btn-border-color-active:var(--t-fill-color-button-delete-solid-active);
1776
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1778
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1777
1779
  --tds-btn-bg-disabled:var(--t-fill-color-button-delete-solid-disabled);
1778
1780
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1779
1781
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1783,27 +1785,27 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1783
1785
  --tds-btn-color:var(--t-text-color-status-neutral);
1784
1786
  --tds-btn-border-color:var(--t-border-color-button-neutral);
1785
1787
  --tds-btn-color-hover:var(--tds-btn-color);
1786
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1788
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1787
1789
  --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
1788
1790
  --tds-btn-color-active:var(--tds-btn-color);
1789
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1791
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1790
1792
  --tds-btn-border-color-active:var(--t-border-color-button-neutral);
1791
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1792
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
1793
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1794
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
1793
1795
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1794
1796
  }
1795
1797
 
1796
1798
  .tds-btn--outline-interaction{
1797
- --tds-btn-color:var(--t-text-color-interaction-primary);
1799
+ --tds-btn-color:var(--t-text-color-interaction);
1798
1800
  --tds-btn-border-color:var(--t-border-color-button-info);
1799
1801
  --tds-btn-color-hover:var(--tds-btn-color);
1800
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
1802
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
1801
1803
  --tds-btn-border-color-hover:var(--tds-btn-border-color);
1802
1804
  --tds-btn-color-active:var(--tds-btn-color);
1803
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
1805
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
1804
1806
  --tds-btn-border-color-active:var(--tds-btn-border-color);
1805
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1806
- --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-dim-disabled);
1807
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1808
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-disabled);
1807
1809
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1808
1810
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
1809
1811
  }
@@ -1812,13 +1814,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1812
1814
  --tds-btn-color:var(--t-text-color-status-error);
1813
1815
  --tds-btn-border-color:var(--t-border-color-button-delete);
1814
1816
  --tds-btn-color-hover:var(--tds-btn-color);
1815
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
1817
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
1816
1818
  --tds-btn-border-color-hover:var(--tds-btn-border-color);
1817
1819
  --tds-btn-color-active:var(--tds-btn-color);
1818
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
1820
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
1819
1821
  --tds-btn-border-color-active:var(--tds-btn-border-color);
1820
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1821
- --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-dim-disabled);
1822
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1823
+ --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-disabled);
1822
1824
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1823
1825
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
1824
1826
  }
@@ -1827,26 +1829,26 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1827
1829
  --tds-btn-color:var(--t-text-color-status-neutral);
1828
1830
  --tds-btn-border-color:transparent;
1829
1831
  --tds-btn-color-hover:var(--tds-btn-color);
1830
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1832
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1831
1833
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1832
1834
  --tds-btn-color-active:var(--tds-btn-color);
1833
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1835
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1834
1836
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1835
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1837
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1836
1838
  --tds-btn-bg-disabled:transparent;
1837
1839
  --tds-btn-border-color-disabled:transparent;
1838
1840
  }
1839
1841
 
1840
1842
  .tds-btn--ghost-interaction{
1841
- --tds-btn-color:var(--t-text-color-interaction-primary);
1843
+ --tds-btn-color:var(--t-text-color-interaction);
1842
1844
  --tds-btn-border-color:transparent;
1843
1845
  --tds-btn-color-hover:var(--tds-btn-color);
1844
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
1846
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
1845
1847
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1846
1848
  --tds-btn-color-active:var(--tds-btn-color);
1847
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
1849
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
1848
1850
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1849
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1851
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1850
1852
  --tds-btn-bg-disabled:transparent;
1851
1853
  --tds-btn-border-color-disabled:transparent;
1852
1854
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
@@ -1856,12 +1858,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1856
1858
  --tds-btn-color:var(--t-text-color-status-error);
1857
1859
  --tds-btn-border-color:transparent;
1858
1860
  --tds-btn-color-hover:var(--tds-btn-color);
1859
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
1861
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
1860
1862
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1861
1863
  --tds-btn-color-active:var(--tds-btn-color);
1862
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
1864
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
1863
1865
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1864
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1866
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1865
1867
  --tds-btn-bg-disabled:transparent;
1866
1868
  --tds-btn-border-color-disabled:transparent;
1867
1869
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
@@ -1869,7 +1871,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1869
1871
 
1870
1872
  .tds-btn--inline-text,
1871
1873
  a[class="tds-btn"]{
1872
- --tds-btn-color:var(--t-text-color-interaction-primary);
1874
+ --tds-btn-color:var(--t-text-color-interaction);
1873
1875
  --tds-btn-color-hover:var(--t-text-color-interaction-hover);
1874
1876
  --tds-btn-color-active:var(--t-text-color-interaction-active);
1875
1877
  --tds-btn-bg:transparent;
@@ -1894,16 +1896,16 @@ a[class="tds-btn"]{
1894
1896
  }
1895
1897
 
1896
1898
  .tds-btn--primary-page-header{
1897
- --tds-btn-color:var(--t-text-color-default-inverted);
1898
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
1899
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
1900
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1899
+ --tds-btn-color:var(--t-text-color-inverted);
1900
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
1901
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
1902
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1901
1903
  --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
1902
1904
  --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
1903
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1905
+ --tds-btn-color-active:var(--t-text-color-inverted);
1904
1906
  --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
1905
1907
  --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
1906
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1908
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1907
1909
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1908
1910
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1909
1911
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1911,15 +1913,15 @@ a[class="tds-btn"]{
1911
1913
 
1912
1914
  .tds-btn--secondary-page-header{
1913
1915
  --tds-btn-color:var(--t-text-color-status-neutral);
1914
- --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header-default);
1915
- --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header-default);
1916
+ --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header);
1917
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header);
1916
1918
  --tds-btn-color-hover:var(--t-text-color-status-neutral);
1917
1919
  --tds-btn-bg-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
1918
1920
  --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
1919
1921
  --tds-btn-color-active:var(--t-text-color-status-neutral);
1920
1922
  --tds-btn-bg-active:var(--t-fill-color-button-neutral-responsive-header-active);
1921
1923
  --tds-btn-border-color-active:var(--t-fill-color-button-neutral-responsive-header-active);
1922
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1924
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1923
1925
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
1924
1926
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
1925
1927
  }
@@ -1931,28 +1933,28 @@ a[class="tds-btn"]{
1931
1933
  --tds-btn-bg:transparent;
1932
1934
  --tds-btn-border-color:var(--t-border-color-button-neutral);
1933
1935
  --tds-btn-color-hover:var(--tds-btn-color);
1934
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1936
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1935
1937
  --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
1936
1938
  --tds-btn-color-active:var(--tds-btn-color);
1937
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1939
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1938
1940
  --tds-btn-border-color-active:var(--t-border-color-button-neutral);
1939
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1940
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
1941
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1942
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
1941
1943
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1942
1944
  }
1943
1945
  }
1944
1946
 
1945
1947
  .tds-btn--staff-only{
1946
- --tds-btn-color:var(--t-text-color-default-inverted);
1947
- --tds-btn-bg:var(--t-fill-color-product-staff-base);
1948
- --tds-btn-border-color:var(--t-border-color-default-white);
1949
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1948
+ --tds-btn-color:var(--t-text-color-inverted);
1949
+ --tds-btn-bg:var(--t-fill-color-product-staff);
1950
+ --tds-btn-border-color:var(--t-border-color-white);
1951
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1950
1952
  --tds-btn-bg-hover:var(--t-fill-color-product-staff-dark);
1951
- --tds-btn-border-color-hover:var(--t-border-color-default-white);
1952
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1953
+ --tds-btn-border-color-hover:var(--t-border-color-white);
1954
+ --tds-btn-color-active:var(--t-text-color-inverted);
1953
1955
  --tds-btn-bg-active:var(--t-fill-color-product-staff-darker);
1954
- --tds-btn-border-color-active:var(--t-border-color-default-white);
1955
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1956
+ --tds-btn-border-color-active:var(--t-border-color-white);
1957
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1956
1958
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1957
1959
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1958
1960
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1963,8 +1965,8 @@ a[class="tds-btn"]{
1963
1965
  --tds-btn-padding-y:4px;
1964
1966
  --tds-btn-padding-x:13px;
1965
1967
 
1966
- --tds-btn-color:var(--t-text-color-default-primary);
1967
- --tds-btn-bg:var(--t-fill-color-button-pill-default);
1968
+ --tds-btn-color:var(--t-text-color);
1969
+ --tds-btn-bg:var(--t-fill-color-button-pill);
1968
1970
  --tds-btn-border-color:var(--tds-btn-bg);
1969
1971
  --tds-btn-color-hover:var(--tds-btn-color);
1970
1972
  --tds-btn-bg-hover:var(--t-fill-color-button-pill-hover);
@@ -1973,10 +1975,10 @@ a[class="tds-btn"]{
1973
1975
  --tds-btn-color-active:var(--tds-btn-color);
1974
1976
  --tds-btn-bg-active:var(--t-fill-color-button-pill-active);
1975
1977
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1976
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1978
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1977
1979
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1978
1980
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1979
- --tds-btn-icon-color:var(--t-icon-color-default-secondary);
1981
+ --tds-btn-icon-color:var(--t-icon-color-secondary);
1980
1982
  --tds-btn-min-height:32px;
1981
1983
  }
1982
1984
 
@@ -2023,8 +2025,8 @@ a[class="tds-btn"]{
2023
2025
  display:inline-block;
2024
2026
  width:var(--tds-btn-attention-icon-size);
2025
2027
  height:var(--tds-btn-attention-icon-size);
2026
- background-color:var(--t-icon-color-status-warning-primary);
2027
- border:.125em solid var(--t-border-color-default-white);
2028
+ background-color:var(--t-icon-color-status-warning);
2029
+ border:.125em solid var(--t-border-color-white);
2028
2030
  border-radius:var(--t-border-radius-round);
2029
2031
  }
2030
2032