@planningcenter/tapestry 2.6.1-rc.2 → 2.7.1-qa-513.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (80) hide show
  1. package/dist/components/button/BaseButton.d.ts.map +1 -1
  2. package/dist/components/button/BaseButton.js +3 -2
  3. package/dist/components/button/BaseButton.js.map +1 -1
  4. package/dist/components/button/IconButton.js +1 -1
  5. package/dist/components/button/IconButton.js.map +1 -1
  6. package/dist/components/button/PageHeaderActionsDropdownButton.js +1 -1
  7. package/dist/components/button/PageHeaderActionsDropdownButton.js.map +1 -1
  8. package/dist/components/link/BaseLink.d.ts.map +1 -1
  9. package/dist/components/link/BaseLink.js +5 -5
  10. package/dist/components/link/BaseLink.js.map +1 -1
  11. package/dist/components/page-header/index.js +1 -1
  12. package/dist/components/sidenav/index.js +1 -1
  13. package/dist/index.css +124 -94
  14. package/dist/index.css.map +1 -1
  15. package/dist/index.d.ts +0 -1
  16. package/dist/index.d.ts.map +1 -1
  17. package/dist/jsTokens.d.ts +1 -1
  18. package/dist/jsTokens.d.ts.map +1 -1
  19. package/dist/jsTokens.js +1 -1
  20. package/dist/jsTokens.js.map +1 -1
  21. package/dist/print-no-media-queries.css +2 -2
  22. package/dist/print.css +2 -2
  23. package/dist/reactRender.css +1135 -1105
  24. package/dist/reactRender.css.map +1 -1
  25. package/dist/reactRenderLegacy.css +1135 -1105
  26. package/dist/reactRenderLegacy.css.map +1 -1
  27. package/dist/tapestry-wc/dist/components/{p-D0G2xpOq.js → p-BM4ymH3W.js} +3 -3
  28. package/dist/tapestry-wc/dist/components/{p-D0G2xpOq.js.map → p-BM4ymH3W.js.map} +1 -1
  29. package/dist/tapestry-wc/dist/components/{p-D1rzJeWl.js → p-CTvFafAw.js} +3 -3
  30. package/dist/tapestry-wc/dist/components/{p-D1rzJeWl.js.map → p-CTvFafAw.js.map} +1 -1
  31. package/dist/tapestry-wc/dist/components/{p-74Cc2nEh.js → p-Ccu14VWv.js} +2 -2
  32. package/dist/tapestry-wc/dist/components/{p-74Cc2nEh.js.map → p-Ccu14VWv.js.map} +1 -1
  33. package/dist/tapestry-wc/dist/components/{p-DmP02I4b.js → p-D5K9xK_N.js} +3 -3
  34. package/dist/tapestry-wc/dist/components/{p-DmP02I4b.js.map → p-D5K9xK_N.js.map} +1 -1
  35. package/dist/tapestry-wc/dist/components/{p-5-Cvrlgk.js → p-ksuK8bIM.js} +2 -2
  36. package/dist/tapestry-wc/dist/components/{p-5-Cvrlgk.js.map → p-ksuK8bIM.js.map} +1 -1
  37. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  38. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  39. package/dist/tapestry-wc/dist/components/tds-page-header.js +5 -5
  40. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  41. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  42. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  43. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  44. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  45. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  46. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  47. package/dist/tapestry-wc/dist/components/tds-sidenav.js +6 -6
  48. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  49. package/dist/tokens/tokens-deprecated.json +326 -0
  50. package/dist/tokens-dark.css +6 -4
  51. package/dist/tokens-dark.css.map +1 -0
  52. package/dist/tokens-deprecated.css +106 -0
  53. package/dist/tokens-deprecated.css.map +1 -0
  54. package/dist/tokens-deprecated.js +3 -0
  55. package/dist/tokens.css +17 -84
  56. package/dist/tokens.css.map +1 -1
  57. package/dist/tokens.js +2 -0
  58. package/dist/unstable.css +136 -106
  59. package/dist/unstable.css.map +1 -1
  60. package/dist/unstable.d.ts +1 -1
  61. package/dist/unstable.d.ts.map +1 -1
  62. package/dist/unstable.js +2 -1
  63. package/dist/unstable.js.map +1 -1
  64. package/dist/utilities/Icon.d.ts.map +1 -1
  65. package/dist/utilities/Icon.js +12 -19
  66. package/dist/utilities/Icon.js.map +1 -1
  67. package/package.json +19 -18
  68. package/react-types/index.d.ts +8 -8
  69. package/dist/deprecated.css +0 -84
  70. package/dist/tokens/ts/react-native-tokens.d.ts +0 -1629
  71. package/dist/tokens/ts/react-native-tokens.d.ts.map +0 -1
  72. package/dist/tokens/ts/react-native-tokens.js +0 -418
  73. package/dist/tokens/ts/react-native-tokens.js.map +0 -1
  74. package/dist/tokens/ts/tokens.d.ts +0 -452
  75. package/dist/tokens/ts/tokens.d.ts.map +0 -1
  76. package/dist/tokens/ts/tokens.js +0 -454
  77. package/dist/tokens/ts/tokens.js.map +0 -1
  78. package/dist/tokens.d.ts +0 -3
  79. package/dist/tokens.d.ts.map +0 -1
  80. /package/dist/{tokens-dark-combined.js → tokens-dark.js} +0 -0
package/dist/index.css CHANGED
@@ -18,6 +18,7 @@
18
18
  --t-spacing-7:56px;
19
19
  --t-spacing-fourth:2px;
20
20
  --t-spacing-half:4px;
21
+ --t-spacing-1-half:12px;
21
22
  --t-element-size-3xl:48px;
22
23
  --t-element-size-2xl:32px;
23
24
  --t-element-size-xl:24px;
@@ -52,7 +53,7 @@
52
53
  --t-text-color-headline:hsl(0, 0%, 12%);
53
54
  --t-text-color:hsl(0, 0%, 24%);
54
55
  --t-text-color-secondary:hsl(0, 0%, 42%);
55
- --t-text-color-disabled:hsl(0, 0%, 81%);
56
+ --t-text-color-disabled:hsl(0, 0%, 68%);
56
57
  --t-text-color-placeholder:hsl(0, 0%, 58%);
57
58
  --t-text-color-inverted:hsl(0, 0%, 100%);
58
59
  --t-text-color-interaction:hsl(204, 100%, 40%);
@@ -185,6 +186,14 @@
185
186
  --t-fill-color-product-home-060:hsl(221, 90%, 50%);
186
187
  --t-fill-color-product-home-070:hsl(221, 90%, 45%);
187
188
  --t-fill-color-product-home-080:hsl(218, 84%, 25%);
189
+ --t-fill-color-product-musicstand-010:hsl(207, 61%, 93%);
190
+ --t-fill-color-product-musicstand-020:hsl(207, 61%, 90%);
191
+ --t-fill-color-product-musicstand-030:hsl(207, 58%, 85%);
192
+ --t-fill-color-product-musicstand-040:hsl(207, 59%, 60%);
193
+ --t-fill-color-product-musicstand-050:hsl(207, 59%, 50%);
194
+ --t-fill-color-product-musicstand-060:hsl(207, 59%, 40%);
195
+ --t-fill-color-product-musicstand-070:hsl(207, 59%, 35%);
196
+ --t-fill-color-product-musicstand-080:hsl(207, 59%, 25%);
188
197
  --t-fill-color-product-people-010:hsl(219, 73%, 91%);
189
198
  --t-fill-color-product-people-020:hsl(220, 69%, 81%);
190
199
  --t-fill-color-product-people-030:hsl(221, 73%, 71%);
@@ -391,8 +400,10 @@
391
400
  --t-border-color-control-success:hsl(97, 57%, 40%);
392
401
  --t-border-color-control-warning:hsl(42, 84%, 63%);
393
402
  --t-border-color-control-error:hsl(8, 60%, 47%);
394
- --t-border-color-control-disabled:hsl(0, 0%, 88%);
403
+ --t-border-color-control-disabled:hsl(0, 0%, 81%);
395
404
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.07);
405
+ --t-font-sans-serif:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
406
+ --t-font-monospace:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
396
407
  --t-form-background-color:var(--t-fill-color-neutral-100);
397
408
  --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
398
409
  --t-form-background-color-error:var(--t-fill-color-neutral-100);
@@ -496,7 +507,7 @@
496
507
  --t-text-color-headline:hsl(0, 0%, 94%);
497
508
  --t-text-color:hsl(0, 0%, 80%);
498
509
  --t-text-color-secondary:hsl(0, 0%, 54%);
499
- --t-text-color-disabled:hsl(0, 0%, 25%);
510
+ --t-text-color-disabled:hsl(0, 0%, 32%);
500
511
  --t-text-color-placeholder:hsl(0, 0%, 38%);
501
512
  --t-text-color-interaction:hsl(204, 68%, 55%);
502
513
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
@@ -710,8 +721,16 @@
710
721
  --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
711
722
  --t-border-color-control-neutral:hsl(0, 0%, 33%);
712
723
  --t-border-color-control-info:hsl(204, 100%, 35%);
713
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
724
+ --t-border-color-control-disabled:hsl(0, 0%, 24%);
714
725
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
726
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
727
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
728
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
729
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
730
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
731
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
732
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
733
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
715
734
  }
716
735
 
717
736
  @media (prefers-color-scheme: dark){
@@ -720,7 +739,7 @@
720
739
  --t-text-color-headline:hsl(0, 0%, 94%);
721
740
  --t-text-color:hsl(0, 0%, 80%);
722
741
  --t-text-color-secondary:hsl(0, 0%, 54%);
723
- --t-text-color-disabled:hsl(0, 0%, 25%);
742
+ --t-text-color-disabled:hsl(0, 0%, 32%);
724
743
  --t-text-color-placeholder:hsl(0, 0%, 38%);
725
744
  --t-text-color-interaction:hsl(204, 68%, 55%);
726
745
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
@@ -934,11 +953,22 @@
934
953
  --t-border-color-button-delete:hsla(8, 60%, 47%, 0.25);
935
954
  --t-border-color-control-neutral:hsl(0, 0%, 33%);
936
955
  --t-border-color-control-info:hsl(204, 100%, 35%);
937
- --t-border-color-control-disabled:hsl(0, 0%, 21%);
956
+ --t-border-color-control-disabled:hsl(0, 0%, 24%);
938
957
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
958
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
959
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
960
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
961
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
962
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
963
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
964
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
965
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
939
966
  }
940
967
  }
941
968
 
969
+ @media (prefers-color-scheme: dark){
970
+ }
971
+
942
972
  @layer t-critical{
943
973
  tds-page-header:not(.hydrated){
944
974
  display:none;
@@ -949,8 +979,8 @@
949
979
  .tds-page-header{
950
980
  --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
951
981
  --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
952
- --tds-page-header-color:var(--t-text-color-default-primary);
953
- --tds-page-header-headline-color:var(--t-text-color-default-headline);
982
+ --tds-page-header-color:var(--t-text-color);
983
+ --tds-page-header-headline-color:var(--t-text-color-headline);
954
984
  --tds-page-header-headline-font-size:var(--t-font-size-2xl);
955
985
  --tds-page-header-padding-x:var(--t-spacing-2);
956
986
  --tds-page-header-padding-y:var(--t-spacing-2);
@@ -959,29 +989,29 @@
959
989
  --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
960
990
  --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
961
991
  --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
962
- --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
992
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
963
993
  --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
964
994
  --tds-page-header-nav-item-border-width:1px;
965
995
 
966
996
  --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
967
- --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
997
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color);
968
998
 
969
- --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
999
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
970
1000
  --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
971
1001
  --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
972
1002
 
973
1003
  --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
974
1004
  --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
975
1005
 
976
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
1006
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
977
1007
  --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
978
1008
  --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
979
1009
 
980
- --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
1010
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
981
1011
  --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
982
1012
  --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
983
1013
  --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
984
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
1014
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
985
1015
  }
986
1016
 
987
1017
  .tds-page-header--profile{
@@ -990,16 +1020,16 @@
990
1020
  @media (min-width: 600px){
991
1021
  .tds-page-header{
992
1022
  --tds-page-header-background-color:var(--t-surface-color-canvas);
993
- --tds-page-header-color:var(--t-text-color-default-secondary);
1023
+ --tds-page-header-color:var(--t-text-color-secondary);
994
1024
  --tds-page-header-padding-x:var(--t-spacing-3);
995
1025
  --tds-page-header-headline-font-size:var(--t-font-size-3xl);
996
1026
  --tds-page-header-nav-gap:var(--t-spacing-half);
997
1027
  --tds-page-header-nav-background:transparent;
998
1028
  --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
999
1029
  --tds-page-header-nav-item-border-width:1px;
1000
- --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
1030
+ --tds-page-header-nav-item-color:var(--t-text-color);
1001
1031
  --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1002
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
1032
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1003
1033
  }
1004
1034
  }
1005
1035
  }
@@ -1010,7 +1040,7 @@
1010
1040
  padding-top:var(--tds-page-header-padding-y);
1011
1041
  color:var(--tds-page-header-color);
1012
1042
  background:var(--tds-page-header-background-color);
1013
- border-bottom:1px solid var(--t-border-color-default-base);
1043
+ border-bottom:1px solid var(--t-border-color);
1014
1044
  }
1015
1045
 
1016
1046
  .tds-page-header:not(.has-nav){
@@ -1238,8 +1268,8 @@
1238
1268
  --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
1239
1269
  --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
1240
1270
 
1241
- --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
1242
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
1271
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
1272
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
1243
1273
  }
1244
1274
 
1245
1275
  .tds-sidenav--theme-gray{
@@ -1280,7 +1310,7 @@
1280
1310
  font-size:var(--t-font-size-sm);
1281
1311
  font-weight:var(--t-font-weight-semibold);
1282
1312
  line-height:1.35;
1283
- color:var(--t-text-color-default-secondary);
1313
+ color:var(--t-text-color-secondary);
1284
1314
  text-transform:uppercase;
1285
1315
  }
1286
1316
 
@@ -1319,7 +1349,7 @@
1319
1349
  overflow:hidden;
1320
1350
  font-size:var(--t-font-size-sm);
1321
1351
  line-height:18px;
1322
- color:var(--t-text-color-default-headline);
1352
+ color:var(--t-text-color-headline);
1323
1353
  white-space:nowrap;
1324
1354
  text-decoration:none;
1325
1355
  -webkit-appearance:none;
@@ -1328,7 +1358,7 @@
1328
1358
  cursor:pointer;
1329
1359
  background-color:var(--tds-sidenav-item-background, transparent);
1330
1360
  border:0;
1331
- border-radius:var(--t-border-radius-default);
1361
+ border-radius:var(--t-border-radius);
1332
1362
  transition:var(--tds-sidenav-item-transition);
1333
1363
  }
1334
1364
 
@@ -1343,7 +1373,7 @@
1343
1373
 
1344
1374
  :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1345
1375
  --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1346
- color:var(--t-text-color-default-headline);
1376
+ color:var(--t-text-color-headline);
1347
1377
  text-decoration:none;
1348
1378
  }
1349
1379
 
@@ -1429,7 +1459,7 @@
1429
1459
  height:100%;
1430
1460
  content:"";
1431
1461
  background-color:var(--tds-sidenav-item-nested-background);
1432
- border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
1462
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1433
1463
  transition:var(--tds-sidenav-item-transition);
1434
1464
  }
1435
1465
 
@@ -1470,7 +1500,7 @@
1470
1500
  margin:0;
1471
1501
  font-size:var(--t-font-size-lg);
1472
1502
  font-weight:var(--t-font-weight-medium);
1473
- color:var(--t-text-color-default-headline);
1503
+ color:var(--t-text-color-headline);
1474
1504
  }
1475
1505
 
1476
1506
  @media (max-width: 719px){
@@ -1549,9 +1579,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1549
1579
  --tds-btn-font-size:16px;
1550
1580
  --tds-btn-font-weight:400;
1551
1581
  --tds-btn-line-height:1.5;
1552
- --tds-btn-color:var(--t-text-color-default-headline);
1582
+ --tds-btn-color:var(--t-text-color-headline);
1553
1583
  --tds-btn-bg:transparent;
1554
- --tds-btn-border-width:var(--t-border-width-default);
1584
+ --tds-btn-border-width:var(--t-border-width);
1555
1585
  --tds-btn-border-color:transparent;
1556
1586
  --tds-btn-border-radius:var(--t-border-radius-md);
1557
1587
  --tds-btn-border-color-hover:transparent;
@@ -1679,15 +1709,15 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1679
1709
 
1680
1710
  .tds-btn--neutral{
1681
1711
  --tds-btn-color:var(--t-text-color-status-neutral);
1682
- --tds-btn-bg:var(--t-fill-color-button-neutral-solid-default);
1683
- --tds-btn-border-color:var(--t-fill-color-button-neutral-solid-default);
1712
+ --tds-btn-bg:var(--t-fill-color-button-neutral-solid);
1713
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-solid);
1684
1714
  --tds-btn-color-hover:var(--t-text-color-status-neutral);
1685
1715
  --tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
1686
1716
  --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
1687
1717
  --tds-btn-color-active:var(--t-text-color-status-neutral);
1688
1718
  --tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
1689
1719
  --tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
1690
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1720
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1691
1721
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1692
1722
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1693
1723
  }
@@ -1717,32 +1747,32 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1717
1747
  }
1718
1748
 
1719
1749
  .tds-btn--interaction{
1720
- --tds-btn-color:var(--t-text-color-default-inverted);
1721
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
1722
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
1723
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1750
+ --tds-btn-color:var(--t-text-color-inverted);
1751
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
1752
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
1753
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1724
1754
  --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
1725
1755
  --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
1726
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1756
+ --tds-btn-color-active:var(--t-text-color-inverted);
1727
1757
  --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
1728
1758
  --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
1729
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1759
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1730
1760
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1731
1761
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1732
1762
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
1733
1763
  }
1734
1764
 
1735
1765
  .tds-btn--delete{
1736
- --tds-btn-color:var(--t-text-color-default-inverted);
1737
- --tds-btn-bg:var(--t-fill-color-button-delete-solid-default);
1738
- --tds-btn-border-color:var(--t-fill-color-button-delete-solid-default);
1739
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1766
+ --tds-btn-color:var(--t-text-color-inverted);
1767
+ --tds-btn-bg:var(--t-fill-color-button-delete-solid);
1768
+ --tds-btn-border-color:var(--t-fill-color-button-delete-solid);
1769
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1740
1770
  --tds-btn-bg-hover:var(--t-fill-color-button-delete-solid-hover);
1741
1771
  --tds-btn-border-color-hover:var(--t-fill-color-button-delete-solid-hover);
1742
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1772
+ --tds-btn-color-active:var(--t-text-color-inverted);
1743
1773
  --tds-btn-bg-active:var(--t-fill-color-button-delete-solid-active);
1744
1774
  --tds-btn-border-color-active:var(--t-fill-color-button-delete-solid-active);
1745
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1775
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1746
1776
  --tds-btn-bg-disabled:var(--t-fill-color-button-delete-solid-disabled);
1747
1777
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1748
1778
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1752,27 +1782,27 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1752
1782
  --tds-btn-color:var(--t-text-color-status-neutral);
1753
1783
  --tds-btn-border-color:var(--t-border-color-button-neutral);
1754
1784
  --tds-btn-color-hover:var(--tds-btn-color);
1755
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1785
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1756
1786
  --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
1757
1787
  --tds-btn-color-active:var(--tds-btn-color);
1758
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1788
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1759
1789
  --tds-btn-border-color-active:var(--t-border-color-button-neutral);
1760
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1761
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
1790
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1791
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
1762
1792
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1763
1793
  }
1764
1794
 
1765
1795
  .tds-btn--outline-interaction{
1766
- --tds-btn-color:var(--t-text-color-interaction-primary);
1796
+ --tds-btn-color:var(--t-text-color-interaction);
1767
1797
  --tds-btn-border-color:var(--t-border-color-button-info);
1768
1798
  --tds-btn-color-hover:var(--tds-btn-color);
1769
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
1799
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
1770
1800
  --tds-btn-border-color-hover:var(--tds-btn-border-color);
1771
1801
  --tds-btn-color-active:var(--tds-btn-color);
1772
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
1802
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
1773
1803
  --tds-btn-border-color-active:var(--tds-btn-border-color);
1774
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1775
- --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-dim-disabled);
1804
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1805
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-disabled);
1776
1806
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1777
1807
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
1778
1808
  }
@@ -1781,13 +1811,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1781
1811
  --tds-btn-color:var(--t-text-color-status-error);
1782
1812
  --tds-btn-border-color:var(--t-border-color-button-delete);
1783
1813
  --tds-btn-color-hover:var(--tds-btn-color);
1784
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
1814
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
1785
1815
  --tds-btn-border-color-hover:var(--tds-btn-border-color);
1786
1816
  --tds-btn-color-active:var(--tds-btn-color);
1787
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
1817
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
1788
1818
  --tds-btn-border-color-active:var(--tds-btn-border-color);
1789
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1790
- --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-dim-disabled);
1819
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1820
+ --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-disabled);
1791
1821
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1792
1822
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
1793
1823
  }
@@ -1796,26 +1826,26 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1796
1826
  --tds-btn-color:var(--t-text-color-status-neutral);
1797
1827
  --tds-btn-border-color:transparent;
1798
1828
  --tds-btn-color-hover:var(--tds-btn-color);
1799
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1829
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1800
1830
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1801
1831
  --tds-btn-color-active:var(--tds-btn-color);
1802
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1832
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1803
1833
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1804
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1834
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1805
1835
  --tds-btn-bg-disabled:transparent;
1806
1836
  --tds-btn-border-color-disabled:transparent;
1807
1837
  }
1808
1838
 
1809
1839
  .tds-btn--ghost-interaction{
1810
- --tds-btn-color:var(--t-text-color-interaction-primary);
1840
+ --tds-btn-color:var(--t-text-color-interaction);
1811
1841
  --tds-btn-border-color:transparent;
1812
1842
  --tds-btn-color-hover:var(--tds-btn-color);
1813
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
1843
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
1814
1844
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1815
1845
  --tds-btn-color-active:var(--tds-btn-color);
1816
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
1846
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
1817
1847
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1818
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1848
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1819
1849
  --tds-btn-bg-disabled:transparent;
1820
1850
  --tds-btn-border-color-disabled:transparent;
1821
1851
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
@@ -1825,12 +1855,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1825
1855
  --tds-btn-color:var(--t-text-color-status-error);
1826
1856
  --tds-btn-border-color:transparent;
1827
1857
  --tds-btn-color-hover:var(--tds-btn-color);
1828
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
1858
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
1829
1859
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1830
1860
  --tds-btn-color-active:var(--tds-btn-color);
1831
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
1861
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
1832
1862
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1833
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1863
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1834
1864
  --tds-btn-bg-disabled:transparent;
1835
1865
  --tds-btn-border-color-disabled:transparent;
1836
1866
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
@@ -1838,7 +1868,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1838
1868
 
1839
1869
  .tds-btn--inline-text,
1840
1870
  a[class="tds-btn"]{
1841
- --tds-btn-color:var(--t-text-color-interaction-primary);
1871
+ --tds-btn-color:var(--t-text-color-interaction);
1842
1872
  --tds-btn-color-hover:var(--t-text-color-interaction-hover);
1843
1873
  --tds-btn-color-active:var(--t-text-color-interaction-active);
1844
1874
  --tds-btn-bg:transparent;
@@ -1863,16 +1893,16 @@ a[class="tds-btn"]{
1863
1893
  }
1864
1894
 
1865
1895
  .tds-btn--primary-page-header{
1866
- --tds-btn-color:var(--t-text-color-default-inverted);
1867
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
1868
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
1869
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1896
+ --tds-btn-color:var(--t-text-color-inverted);
1897
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
1898
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
1899
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1870
1900
  --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
1871
1901
  --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
1872
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1902
+ --tds-btn-color-active:var(--t-text-color-inverted);
1873
1903
  --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
1874
1904
  --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
1875
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1905
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1876
1906
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1877
1907
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1878
1908
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1880,15 +1910,15 @@ a[class="tds-btn"]{
1880
1910
 
1881
1911
  .tds-btn--secondary-page-header{
1882
1912
  --tds-btn-color:var(--t-text-color-status-neutral);
1883
- --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header-default);
1884
- --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header-default);
1913
+ --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header);
1914
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header);
1885
1915
  --tds-btn-color-hover:var(--t-text-color-status-neutral);
1886
1916
  --tds-btn-bg-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
1887
1917
  --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
1888
1918
  --tds-btn-color-active:var(--t-text-color-status-neutral);
1889
1919
  --tds-btn-bg-active:var(--t-fill-color-button-neutral-responsive-header-active);
1890
1920
  --tds-btn-border-color-active:var(--t-fill-color-button-neutral-responsive-header-active);
1891
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1921
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1892
1922
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
1893
1923
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
1894
1924
  }
@@ -1900,28 +1930,28 @@ a[class="tds-btn"]{
1900
1930
  --tds-btn-bg:transparent;
1901
1931
  --tds-btn-border-color:var(--t-border-color-button-neutral);
1902
1932
  --tds-btn-color-hover:var(--tds-btn-color);
1903
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1933
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1904
1934
  --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
1905
1935
  --tds-btn-color-active:var(--tds-btn-color);
1906
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1936
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1907
1937
  --tds-btn-border-color-active:var(--t-border-color-button-neutral);
1908
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1909
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
1938
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1939
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
1910
1940
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1911
1941
  }
1912
1942
  }
1913
1943
 
1914
1944
  .tds-btn--staff-only{
1915
- --tds-btn-color:var(--t-text-color-default-inverted);
1916
- --tds-btn-bg:var(--t-fill-color-product-staff-base);
1917
- --tds-btn-border-color:var(--t-border-color-default-white);
1918
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1945
+ --tds-btn-color:var(--t-text-color-inverted);
1946
+ --tds-btn-bg:var(--t-fill-color-product-staff);
1947
+ --tds-btn-border-color:var(--t-border-color-white);
1948
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1919
1949
  --tds-btn-bg-hover:var(--t-fill-color-product-staff-dark);
1920
- --tds-btn-border-color-hover:var(--t-border-color-default-white);
1921
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1950
+ --tds-btn-border-color-hover:var(--t-border-color-white);
1951
+ --tds-btn-color-active:var(--t-text-color-inverted);
1922
1952
  --tds-btn-bg-active:var(--t-fill-color-product-staff-darker);
1923
- --tds-btn-border-color-active:var(--t-border-color-default-white);
1924
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1953
+ --tds-btn-border-color-active:var(--t-border-color-white);
1954
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1925
1955
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1926
1956
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1927
1957
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1932,8 +1962,8 @@ a[class="tds-btn"]{
1932
1962
  --tds-btn-padding-y:4px;
1933
1963
  --tds-btn-padding-x:13px;
1934
1964
 
1935
- --tds-btn-color:var(--t-text-color-default-primary);
1936
- --tds-btn-bg:var(--t-fill-color-button-pill-default);
1965
+ --tds-btn-color:var(--t-text-color);
1966
+ --tds-btn-bg:var(--t-fill-color-button-pill);
1937
1967
  --tds-btn-border-color:var(--tds-btn-bg);
1938
1968
  --tds-btn-color-hover:var(--tds-btn-color);
1939
1969
  --tds-btn-bg-hover:var(--t-fill-color-button-pill-hover);
@@ -1942,10 +1972,10 @@ a[class="tds-btn"]{
1942
1972
  --tds-btn-color-active:var(--tds-btn-color);
1943
1973
  --tds-btn-bg-active:var(--t-fill-color-button-pill-active);
1944
1974
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1945
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1975
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1946
1976
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1947
1977
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1948
- --tds-btn-icon-color:var(--t-icon-color-default-secondary);
1978
+ --tds-btn-icon-color:var(--t-icon-color-secondary);
1949
1979
  --tds-btn-min-height:32px;
1950
1980
  }
1951
1981
 
@@ -1992,8 +2022,8 @@ a[class="tds-btn"]{
1992
2022
  display:inline-block;
1993
2023
  width:var(--tds-btn-attention-icon-size);
1994
2024
  height:var(--tds-btn-attention-icon-size);
1995
- background-color:var(--t-icon-color-status-warning-primary);
1996
- border:.125em solid var(--t-border-color-default-white);
2025
+ background-color:var(--t-icon-color-status-warning);
2026
+ border:.125em solid var(--t-border-color-white);
1997
2027
  border-radius:var(--t-border-radius-round);
1998
2028
  }
1999
2029