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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (64) 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.js +2 -2
  9. package/dist/components/link/BaseLink.js.map +1 -1
  10. package/dist/components/page-header/index.js +1 -1
  11. package/dist/components/sidenav/index.js +1 -1
  12. package/dist/index.css +116 -88
  13. package/dist/index.css.map +1 -1
  14. package/dist/print-no-media-queries.css +2 -0
  15. package/dist/print.css +2 -0
  16. package/dist/reactRender.css +212 -184
  17. package/dist/reactRender.css.map +1 -1
  18. package/dist/reactRenderLegacy.css +212 -184
  19. package/dist/reactRenderLegacy.css.map +1 -1
  20. package/dist/tapestry-wc/dist/components/{p-DmP02I4b.js → p-C5iSF06Y.js} +3 -3
  21. package/dist/tapestry-wc/dist/components/p-C5iSF06Y.js.map +1 -0
  22. package/dist/tapestry-wc/dist/components/{p-D1rzJeWl.js → p-COVN81zG.js} +3 -3
  23. package/dist/tapestry-wc/dist/components/p-COVN81zG.js.map +1 -0
  24. package/dist/tapestry-wc/dist/components/{p-D0G2xpOq.js → p-CT_FL8wQ.js} +3 -3
  25. package/dist/tapestry-wc/dist/components/p-CT_FL8wQ.js.map +1 -0
  26. package/dist/tapestry-wc/dist/components/{p-74Cc2nEh.js → p-CsShT-kz.js} +2 -2
  27. package/dist/tapestry-wc/dist/components/p-CsShT-kz.js.map +1 -0
  28. package/dist/tapestry-wc/dist/components/{p-5-Cvrlgk.js → p-f6le2JgV.js} +2 -2
  29. package/dist/tapestry-wc/dist/components/p-f6le2JgV.js.map +1 -0
  30. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  31. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  32. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  33. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  34. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  35. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  36. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  37. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  38. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  39. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  40. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  41. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  42. package/dist/tokens/tokens-deprecated.json +20 -39
  43. package/dist/tokens/ts/react-native-tokens.d.ts +1 -0
  44. package/dist/tokens/ts/react-native-tokens.d.ts.map +1 -1
  45. package/dist/tokens/ts/react-native-tokens.js +1 -0
  46. package/dist/tokens/ts/react-native-tokens.js.map +1 -1
  47. package/dist/tokens/ts/tokens.d.ts +1 -0
  48. package/dist/tokens/ts/tokens.d.ts.map +1 -1
  49. package/dist/tokens/ts/tokens.js +1 -0
  50. package/dist/tokens/ts/tokens.js.map +1 -1
  51. package/dist/tokens-deprecated.css +27 -0
  52. package/dist/tokens-deprecated.css.map +1 -1
  53. package/dist/tokens-deprecated.d.ts +3 -0
  54. package/dist/tokens-deprecated.d.ts.map +1 -1
  55. package/dist/tokens.css +1 -0
  56. package/dist/tokens.css.map +1 -1
  57. package/dist/unstable.css +128 -100
  58. package/dist/unstable.css.map +1 -1
  59. package/package.json +5 -5
  60. package/dist/tapestry-wc/dist/components/p-5-Cvrlgk.js.map +0 -1
  61. package/dist/tapestry-wc/dist/components/p-74Cc2nEh.js.map +0 -1
  62. package/dist/tapestry-wc/dist/components/p-D0G2xpOq.js.map +0 -1
  63. package/dist/tapestry-wc/dist/components/p-D1rzJeWl.js.map +0 -1
  64. package/dist/tapestry-wc/dist/components/p-DmP02I4b.js.map +0 -1
package/dist/reactRenderLegacy.css CHANGED
@@ -1,5 +1,29 @@
1
1
  @layer t-critical, t-component;
2
2
 
3
+ :root[data-color-mode="dark"]{
4
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
5
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
6
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
7
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
8
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
9
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
10
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
11
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
12
+ }
13
+
14
+ @media (prefers-color-scheme: dark){
15
+ :root[data-color-mode="system"]{
16
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
17
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
18
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
19
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
20
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
21
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
22
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
23
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
24
+ }
25
+ }
26
+
3
27
  :root{
4
28
  --t-border-radius-sm:2px;
5
29
  --t-border-radius-md:4px;
@@ -18,6 +42,7 @@
18
42
  --t-spacing-7:56px;
19
43
  --t-spacing-fourth:2px;
20
44
  --t-spacing-half:4px;
45
+ --t-spacing-1-half:12px;
21
46
  --t-element-size-3xl:48px;
22
47
  --t-element-size-2xl:32px;
23
48
  --t-element-size-xl:24px;
@@ -413,8 +438,7 @@
413
438
  --t-form-placeholder-color:var(--t-text-color-placeholder);
414
439
  }
415
440
 
416
- @media (prefers-color-scheme: dark){
417
- :root[data-color-mode="system"]{
441
+ :root[data-color-mode="dark"]{
418
442
  color-scheme:dark;
419
443
  --t-text-color-headline:hsl(0, 0%, 94%);
420
444
  --t-text-color:hsl(0, 0%, 80%);
@@ -636,9 +660,9 @@
636
660
  --t-border-color-control-disabled:hsl(0, 0%, 21%);
637
661
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
638
662
  }
639
- }
640
663
 
641
- :root[data-color-mode="dark"]{
664
+ @media (prefers-color-scheme: dark){
665
+ :root[data-color-mode="system"]{
642
666
  color-scheme:dark;
643
667
  --t-text-color-headline:hsl(0, 0%, 94%);
644
668
  --t-text-color:hsl(0, 0%, 80%);
@@ -860,86 +884,6 @@
860
884
  --t-border-color-control-disabled:hsl(0, 0%, 21%);
861
885
  --t-shadow-overflow-color:hsla(0, 0%, 0%, 0.6);
862
886
  }
863
-
864
- :root{
865
- --t-border-size-default:var(--t-border-width);
866
- --t-border-size-thick:var(--t-border-width-thick);
867
- --t-font-weight-semi-bold:var(--t-font-weight-semibold);
868
- --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
869
- --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
870
- --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
871
- --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
872
- --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
873
- --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
874
- --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
875
- --t-fill-color-alert-info:hsl(204, 94%, 49%);
876
- --t-fill-color-alert-success:hsl(122, 60%, 41%);
877
- --t-fill-color-alert-warning:hsl(43, 96%, 58%);
878
- --t-fill-color-alert-error:hsl(4, 77%, 59%);
879
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
880
- --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
881
- --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
882
- --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
883
- --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
884
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
885
- --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
886
- --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
887
- --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
888
- --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
889
- --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
890
- --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
891
- --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
892
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
893
- --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
894
- --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
895
- --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
896
- --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
897
- --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
898
- --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
899
- --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
900
- --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
901
- --t-border-color-default-base:var(--t-border-color);
902
- --t-border-color-default-dark:var(--t-border-color-dark);
903
- --t-border-color-default-darker:var(--t-border-color-darker);
904
- --t-border-color-default-darkest:var(--t-border-color-darkest);
905
- --t-border-color-default-dim:var(--t-border-color-dim);
906
- --t-border-color-default-disabled:var(--t-border-color-disabled);
907
- --t-border-color-default-white:var(--t-border-color-white);
908
- --t-border-radius-default:var(--t-border-radius);
909
- --t-border-width-default:var(--t-border-width);
910
- --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
911
- --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
912
- --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
913
- --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
914
- --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
915
- --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
916
- --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
917
- --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
918
- --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
919
- --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
920
- --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
921
- --t-fill-color-control-primary:var(--t-fill-color-control);
922
- --t-fill-color-interaction-default:var(--t-fill-color-interaction);
923
- --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
924
- --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
925
- --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
926
- --t-icon-color-default-dim:var(--t-icon-color-dim);
927
- --t-icon-color-default-disabled:var(--t-icon-color-disabled);
928
- --t-icon-color-default-inverted:var(--t-icon-color-inverted);
929
- --t-icon-color-default-primary:var(--t-icon-color);
930
- --t-icon-color-default-secondary:var(--t-icon-color-secondary);
931
- --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
932
- --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
933
- --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
934
- --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
935
- --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
936
- --t-text-color-default-disabled:var(--t-text-color-disabled);
937
- --t-text-color-default-headline:var(--t-text-color-headline);
938
- --t-text-color-default-inverted:var(--t-text-color-inverted);
939
- --t-text-color-default-placeholder:var(--t-text-color-placeholder);
940
- --t-text-color-default-primary:var(--t-text-color);
941
- --t-text-color-default-secondary:var(--t-text-color-secondary);
942
- --t-text-color-interaction-primary:var(--t-text-color-interaction);
943
887
  }
944
888
 
945
889
 
@@ -970,8 +914,8 @@
970
914
  --tds-sidenav-item-nested-border-color-hover:var(--t-fill-color-neutral-050);
971
915
  --tds-sidenav-item-nested-border-color-selected:var(--t-border-color-status-info);
972
916
 
973
- --tds-sidenav-item-icon-color:var(--t-icon-color-default-secondary);
974
- --tds-sidenav-item-icon-color-selected:var(--t-icon-color-default-primary);
917
+ --tds-sidenav-item-icon-color:var(--t-icon-color-secondary);
918
+ --tds-sidenav-item-icon-color-selected:var(--t-icon-color);
975
919
  }
976
920
 
977
921
  .tds-sidenav--theme-gray{
@@ -1012,7 +956,7 @@
1012
956
  font-size:var(--t-font-size-sm);
1013
957
  font-weight:var(--t-font-weight-semibold);
1014
958
  line-height:1.35;
1015
- color:var(--t-text-color-default-secondary);
959
+ color:var(--t-text-color-secondary);
1016
960
  text-transform:uppercase;
1017
961
  }
1018
962
 
@@ -1051,7 +995,7 @@
1051
995
  overflow:hidden;
1052
996
  font-size:var(--t-font-size-sm);
1053
997
  line-height:18px;
1054
- color:var(--t-text-color-default-headline);
998
+ color:var(--t-text-color-headline);
1055
999
  white-space:nowrap;
1056
1000
  text-decoration:none;
1057
1001
  -webkit-appearance:none;
@@ -1060,7 +1004,7 @@
1060
1004
  cursor:pointer;
1061
1005
  background-color:var(--tds-sidenav-item-background, transparent);
1062
1006
  border:0;
1063
- border-radius:var(--t-border-radius-default);
1007
+ border-radius:var(--t-border-radius);
1064
1008
  transition:var(--tds-sidenav-item-transition);
1065
1009
  }
1066
1010
 
@@ -1075,7 +1019,7 @@
1075
1019
 
1076
1020
  :is(.tds-sidenav-item :is(a,button)):hover,:is(.tds-sidenav-item :is(a,button)):focus-visible{
1077
1021
  --tds-sidenav-item-background:var(--tds-sidenav-item-background-hover);
1078
- color:var(--t-text-color-default-headline);
1022
+ color:var(--t-text-color-headline);
1079
1023
  text-decoration:none;
1080
1024
  }
1081
1025
 
@@ -1161,7 +1105,7 @@
1161
1105
  height:100%;
1162
1106
  content:"";
1163
1107
  background-color:var(--tds-sidenav-item-nested-background);
1164
- border-radius:0 var(--t-border-radius-default) var(--t-border-radius-default) 0;
1108
+ border-radius:0 var(--t-border-radius) var(--t-border-radius) 0;
1165
1109
  transition:var(--tds-sidenav-item-transition);
1166
1110
  }
1167
1111
 
@@ -1202,7 +1146,7 @@
1202
1146
  margin:0;
1203
1147
  font-size:var(--t-font-size-lg);
1204
1148
  font-weight:var(--t-font-weight-medium);
1205
- color:var(--t-text-color-default-headline);
1149
+ color:var(--t-text-color-headline);
1206
1150
  }
1207
1151
 
1208
1152
  @media (max-width: 719px){
@@ -1266,6 +1210,90 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1266
1210
  flex-direction:column;
1267
1211
  }
1268
1212
 
1213
+ :root{
1214
+ --t-border-size-default:var(--t-border-width);
1215
+ --t-border-size-thick:var(--t-border-width-thick);
1216
+ --t-font-weight-semi-bold:var(--t-font-weight-semibold);
1217
+ --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
1218
+ --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
1219
+ --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
1220
+ --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
1221
+ --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
1222
+ --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
1223
+ --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
1224
+ --t-fill-color-alert-info:hsl(204, 94%, 49%);
1225
+ --t-fill-color-alert-success:hsl(122, 60%, 41%);
1226
+ --t-fill-color-alert-warning:hsl(43, 96%, 58%);
1227
+ --t-fill-color-alert-error:hsl(4, 77%, 59%);
1228
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
1229
+ --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
1230
+ --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
1231
+ --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
1232
+ --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
1233
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
1234
+ --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
1235
+ --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
1236
+ --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
1237
+ --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
1238
+ --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
1239
+ --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
1240
+ --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
1241
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
1242
+ --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
1243
+ --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
1244
+ --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
1245
+ --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
1246
+ --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
1247
+ --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
1248
+ --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
1249
+ --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
1250
+ }
1251
+
1252
+ :root{
1253
+ --t-border-color-default-base:var(--t-border-color);
1254
+ --t-border-color-default-dark:var(--t-border-color-dark);
1255
+ --t-border-color-default-darker:var(--t-border-color-darker);
1256
+ --t-border-color-default-darkest:var(--t-border-color-darkest);
1257
+ --t-border-color-default-dim:var(--t-border-color-dim);
1258
+ --t-border-color-default-disabled:var(--t-border-color-disabled);
1259
+ --t-border-color-default-white:var(--t-border-color-white);
1260
+ --t-border-radius-default:var(--t-border-radius);
1261
+ --t-border-width-default:var(--t-border-width);
1262
+ --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
1263
+ --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
1264
+ --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
1265
+ --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
1266
+ --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
1267
+ --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
1268
+ --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
1269
+ --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
1270
+ --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
1271
+ --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
1272
+ --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
1273
+ --t-fill-color-control-primary:var(--t-fill-color-control);
1274
+ --t-fill-color-interaction-default:var(--t-fill-color-interaction);
1275
+ --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
1276
+ --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
1277
+ --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
1278
+ --t-icon-color-default-dim:var(--t-icon-color-dim);
1279
+ --t-icon-color-default-disabled:var(--t-icon-color-disabled);
1280
+ --t-icon-color-default-inverted:var(--t-icon-color-inverted);
1281
+ --t-icon-color-default-primary:var(--t-icon-color);
1282
+ --t-icon-color-default-secondary:var(--t-icon-color-secondary);
1283
+ --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
1284
+ --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
1285
+ --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
1286
+ --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
1287
+ --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
1288
+ --t-text-color-default-disabled:var(--t-text-color-disabled);
1289
+ --t-text-color-default-headline:var(--t-text-color-headline);
1290
+ --t-text-color-default-inverted:var(--t-text-color-inverted);
1291
+ --t-text-color-default-placeholder:var(--t-text-color-placeholder);
1292
+ --t-text-color-default-primary:var(--t-text-color);
1293
+ --t-text-color-default-secondary:var(--t-text-color-secondary);
1294
+ --t-text-color-interaction-primary:var(--t-text-color-interaction);
1295
+ }
1296
+
1269
1297
  @layer t-critical{
1270
1298
  tds-page-header:not(.hydrated){
1271
1299
  display:none;
@@ -1276,8 +1304,8 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1276
1304
  .tds-page-header{
1277
1305
  --tds-page-header-background-color:var(--t-fill-color-product-current-gradient-tint, var(--t-surface-color-canvas));
1278
1306
  --tds-page-header-background-color-inactive:var(--t-fill-color-neutral-090);
1279
- --tds-page-header-color:var(--t-text-color-default-primary);
1280
- --tds-page-header-headline-color:var(--t-text-color-default-headline);
1307
+ --tds-page-header-color:var(--t-text-color);
1308
+ --tds-page-header-headline-color:var(--t-text-color-headline);
1281
1309
  --tds-page-header-headline-font-size:var(--t-font-size-2xl);
1282
1310
  --tds-page-header-padding-x:var(--t-spacing-2);
1283
1311
  --tds-page-header-padding-y:var(--t-spacing-2);
@@ -1286,29 +1314,29 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1286
1314
  --tds-page-header-nav-background:linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .1) 100%);
1287
1315
  --tds-page-header-nav-item-padding-x:var(--t-spacing-1);
1288
1316
  --tds-page-header-nav-item-padding-y:var(--t-spacing-1);
1289
- --tds-page-header-nav-item-color:var(--t-text-color-default-secondary);
1317
+ --tds-page-header-nav-item-color:var(--t-text-color-secondary);
1290
1318
  --tds-page-header-nav-item-background-color:var(--t-fill-color-transparency-light-060);
1291
1319
  --tds-page-header-nav-item-border-width:1px;
1292
1320
 
1293
1321
  --tds-page-header-nav-item-border-color:var(--tds-page-header-nav-item-background-color);
1294
- --tds-page-header-nav-item-border-bottom-color:var(--t-border-color-default-base);
1322
+ --tds-page-header-nav-item-border-bottom-color:var(--t-border-color);
1295
1323
 
1296
- --tds-page-header-nav-item-color-hover:var(--t-text-color-default-primary);
1324
+ --tds-page-header-nav-item-color-hover:var(--t-text-color);
1297
1325
  --tds-page-header-nav-item-background-color-hover:var(--t-fill-color-neutral-080);
1298
1326
  --tds-page-header-nav-item-border-color-hover:var(--tds-page-header-nav-item-background-color-hover);
1299
1327
 
1300
1328
  --tds-page-header-nav-item-background-color-active:var(--t-fill-color-neutral-060);
1301
1329
  --tds-page-header-nav-item-border-color-active:var(--tds-page-header-nav-item-background-color-hover);
1302
1330
 
1303
- --tds-page-header-nav-item-color-disabled:var(--t-text-color-default-disabled);
1331
+ --tds-page-header-nav-item-color-disabled:var(--t-text-color-disabled);
1304
1332
  --tds-page-header-nav-item-background-color-disabled:var(--t-fill-color-neutral-080);
1305
1333
  --tds-page-header-nav-item-border-color-disabled:var(--tds-page-header-nav-item-background-color-disabled);
1306
1334
 
1307
- --tds-page-header-nav-item-color-selected:var(--t-text-color-default-primary);
1335
+ --tds-page-header-nav-item-color-selected:var(--t-text-color);
1308
1336
  --tds-page-header-nav-item-background-color-selected:var(--t-surface-color-canvas);
1309
1337
  --tds-page-header-nav-item-border-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1310
1338
  --tds-page-header-nav-item-border-bottom-color-selected:var(--tds-page-header-nav-item-background-color-selected);
1311
- --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning-primary);
1339
+ --tds-page-header-nav-item-indicator-color:var(--t-icon-color-status-warning);
1312
1340
  }
1313
1341
 
1314
1342
  .tds-page-header--profile{
@@ -1317,16 +1345,16 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1317
1345
  @media (min-width: 600px){
1318
1346
  .tds-page-header{
1319
1347
  --tds-page-header-background-color:var(--t-surface-color-canvas);
1320
- --tds-page-header-color:var(--t-text-color-default-secondary);
1348
+ --tds-page-header-color:var(--t-text-color-secondary);
1321
1349
  --tds-page-header-padding-x:var(--t-spacing-3);
1322
1350
  --tds-page-header-headline-font-size:var(--t-font-size-3xl);
1323
1351
  --tds-page-header-nav-gap:var(--t-spacing-half);
1324
1352
  --tds-page-header-nav-background:transparent;
1325
1353
  --tds-page-header-nav-item-padding-x:var(--t-spacing-2);
1326
1354
  --tds-page-header-nav-item-border-width:1px;
1327
- --tds-page-header-nav-item-color:var(--t-text-color-default-primary);
1355
+ --tds-page-header-nav-item-color:var(--t-text-color);
1328
1356
  --tds-page-header-nav-item-background-color:var(--t-fill-color-neutral-070);
1329
- --tds-page-header-nav-item-border-color-selected:var(--t-border-color-default-base);
1357
+ --tds-page-header-nav-item-border-color-selected:var(--t-border-color);
1330
1358
  }
1331
1359
  }
1332
1360
  }
@@ -1337,7 +1365,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1337
1365
  padding-top:var(--tds-page-header-padding-y);
1338
1366
  color:var(--tds-page-header-color);
1339
1367
  background:var(--tds-page-header-background-color);
1340
- border-bottom:1px solid var(--t-border-color-default-base);
1368
+ border-bottom:1px solid var(--t-border-color);
1341
1369
  }
1342
1370
 
1343
1371
  .tds-page-header:not(.has-nav){
@@ -1581,9 +1609,9 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1581
1609
  --tds-btn-font-size:16px;
1582
1610
  --tds-btn-font-weight:400;
1583
1611
  --tds-btn-line-height:1.5;
1584
- --tds-btn-color:var(--t-text-color-default-headline);
1612
+ --tds-btn-color:var(--t-text-color-headline);
1585
1613
  --tds-btn-bg:transparent;
1586
- --tds-btn-border-width:var(--t-border-width-default);
1614
+ --tds-btn-border-width:var(--t-border-width);
1587
1615
  --tds-btn-border-color:transparent;
1588
1616
  --tds-btn-border-radius:var(--t-border-radius-md);
1589
1617
  --tds-btn-border-color-hover:transparent;
@@ -1711,15 +1739,15 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1711
1739
 
1712
1740
  .tds-btn--neutral{
1713
1741
  --tds-btn-color:var(--t-text-color-status-neutral);
1714
- --tds-btn-bg:var(--t-fill-color-button-neutral-solid-default);
1715
- --tds-btn-border-color:var(--t-fill-color-button-neutral-solid-default);
1742
+ --tds-btn-bg:var(--t-fill-color-button-neutral-solid);
1743
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-solid);
1716
1744
  --tds-btn-color-hover:var(--t-text-color-status-neutral);
1717
1745
  --tds-btn-bg-hover:var(--t-fill-color-button-neutral-solid-hover);
1718
1746
  --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-solid-hover);
1719
1747
  --tds-btn-color-active:var(--t-text-color-status-neutral);
1720
1748
  --tds-btn-bg-active:var(--t-fill-color-button-neutral-solid-active);
1721
1749
  --tds-btn-border-color-active:var(--t-fill-color-button-neutral-solid-active);
1722
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1750
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1723
1751
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1724
1752
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1725
1753
  }
@@ -1749,32 +1777,32 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1749
1777
  }
1750
1778
 
1751
1779
  .tds-btn--interaction{
1752
- --tds-btn-color:var(--t-text-color-default-inverted);
1753
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
1754
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
1755
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1780
+ --tds-btn-color:var(--t-text-color-inverted);
1781
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
1782
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
1783
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1756
1784
  --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
1757
1785
  --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
1758
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1786
+ --tds-btn-color-active:var(--t-text-color-inverted);
1759
1787
  --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
1760
1788
  --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
1761
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1789
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1762
1790
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1763
1791
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1764
1792
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
1765
1793
  }
1766
1794
 
1767
1795
  .tds-btn--delete{
1768
- --tds-btn-color:var(--t-text-color-default-inverted);
1769
- --tds-btn-bg:var(--t-fill-color-button-delete-solid-default);
1770
- --tds-btn-border-color:var(--t-fill-color-button-delete-solid-default);
1771
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1796
+ --tds-btn-color:var(--t-text-color-inverted);
1797
+ --tds-btn-bg:var(--t-fill-color-button-delete-solid);
1798
+ --tds-btn-border-color:var(--t-fill-color-button-delete-solid);
1799
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1772
1800
  --tds-btn-bg-hover:var(--t-fill-color-button-delete-solid-hover);
1773
1801
  --tds-btn-border-color-hover:var(--t-fill-color-button-delete-solid-hover);
1774
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1802
+ --tds-btn-color-active:var(--t-text-color-inverted);
1775
1803
  --tds-btn-bg-active:var(--t-fill-color-button-delete-solid-active);
1776
1804
  --tds-btn-border-color-active:var(--t-fill-color-button-delete-solid-active);
1777
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1805
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1778
1806
  --tds-btn-bg-disabled:var(--t-fill-color-button-delete-solid-disabled);
1779
1807
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1780
1808
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1784,27 +1812,27 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1784
1812
  --tds-btn-color:var(--t-text-color-status-neutral);
1785
1813
  --tds-btn-border-color:var(--t-border-color-button-neutral);
1786
1814
  --tds-btn-color-hover:var(--tds-btn-color);
1787
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1815
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1788
1816
  --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
1789
1817
  --tds-btn-color-active:var(--tds-btn-color);
1790
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1818
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1791
1819
  --tds-btn-border-color-active:var(--t-border-color-button-neutral);
1792
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1793
- --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-dim-disabled);
1820
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1821
+ --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-outline-disabled);
1794
1822
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1795
1823
  }
1796
1824
 
1797
1825
  .tds-btn--outline-interaction{
1798
- --tds-btn-color:var(--t-text-color-interaction-primary);
1826
+ --tds-btn-color:var(--t-text-color-interaction);
1799
1827
  --tds-btn-border-color:var(--t-border-color-button-info);
1800
1828
  --tds-btn-color-hover:var(--tds-btn-color);
1801
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
1829
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
1802
1830
  --tds-btn-border-color-hover:var(--tds-btn-border-color);
1803
1831
  --tds-btn-color-active:var(--tds-btn-color);
1804
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
1832
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
1805
1833
  --tds-btn-border-color-active:var(--tds-btn-border-color);
1806
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1807
- --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-dim-disabled);
1834
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1835
+ --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-outline-disabled);
1808
1836
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1809
1837
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
1810
1838
  }
@@ -1813,13 +1841,13 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1813
1841
  --tds-btn-color:var(--t-text-color-status-error);
1814
1842
  --tds-btn-border-color:var(--t-border-color-button-delete);
1815
1843
  --tds-btn-color-hover:var(--tds-btn-color);
1816
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
1844
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
1817
1845
  --tds-btn-border-color-hover:var(--tds-btn-border-color);
1818
1846
  --tds-btn-color-active:var(--tds-btn-color);
1819
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
1847
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
1820
1848
  --tds-btn-border-color-active:var(--tds-btn-border-color);
1821
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1822
- --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-dim-disabled);
1849
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1850
+ --tds-btn-bg-disabled:var(--t-fill-color-button-delete-outline-disabled);
1823
1851
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1824
1852
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
1825
1853
  }
@@ -1828,26 +1856,26 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1828
1856
  --tds-btn-color:var(--t-text-color-status-neutral);
1829
1857
  --tds-btn-border-color:transparent;
1830
1858
  --tds-btn-color-hover:var(--tds-btn-color);
1831
- --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-dim-hover);
1859
+ --tds-btn-bg-hover:var(--t-fill-color-button-neutral-outline-hover);
1832
1860
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1833
1861
  --tds-btn-color-active:var(--tds-btn-color);
1834
- --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-dim-active);
1862
+ --tds-btn-bg-active:var(--t-fill-color-button-neutral-outline-active);
1835
1863
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1836
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1864
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1837
1865
  --tds-btn-bg-disabled:transparent;
1838
1866
  --tds-btn-border-color-disabled:transparent;
1839
1867
  }
1840
1868
 
1841
1869
  .tds-btn--ghost-interaction{
1842
- --tds-btn-color:var(--t-text-color-interaction-primary);
1870
+ --tds-btn-color:var(--t-text-color-interaction);
1843
1871
  --tds-btn-border-color:transparent;
1844
1872
  --tds-btn-color-hover:var(--tds-btn-color);
1845
- --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
1873
+ --tds-btn-bg-hover:var(--t-fill-color-button-interaction-outline-hover);
1846
1874
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1847
1875
  --tds-btn-color-active:var(--tds-btn-color);
1848
- --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-dim-active);
1876
+ --tds-btn-bg-active:var(--t-fill-color-button-interaction-outline-active);
1849
1877
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1850
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1878
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1851
1879
  --tds-btn-bg-disabled:transparent;
1852
1880
  --tds-btn-border-color-disabled:transparent;
1853
1881
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-info-ghost);
@@ -1857,12 +1885,12 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1857
1885
  --tds-btn-color:var(--t-text-color-status-error);
1858
1886
  --tds-btn-border-color:transparent;
1859
1887
  --tds-btn-color-hover:var(--tds-btn-color);
1860
- --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-dim-hover);
1888
+ --tds-btn-bg-hover:var(--t-fill-color-button-delete-outline-hover);
1861
1889
  --tds-btn-border-color-hover:var(--tds-btn-bg-hover);
1862
1890
  --tds-btn-color-active:var(--tds-btn-color);
1863
- --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-dim-active);
1891
+ --tds-btn-bg-active:var(--t-fill-color-button-delete-outline-active);
1864
1892
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1865
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1893
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1866
1894
  --tds-btn-bg-disabled:transparent;
1867
1895
  --tds-btn-border-color-disabled:transparent;
1868
1896
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-status-error-ghost);
@@ -1870,7 +1898,7 @@ tds-sidenav-section:not(.hydrated) > [slot="ssr"]{
1870
1898
 
1871
1899
  .tds-btn--inline-text,
1872
1900
  a[class="tds-btn"]{
1873
- --tds-btn-color:var(--t-text-color-interaction-primary);
1901
+ --tds-btn-color:var(--t-text-color-interaction);
1874
1902
  --tds-btn-color-hover:var(--t-text-color-interaction-hover);
1875
1903
  --tds-btn-color-active:var(--t-text-color-interaction-active);
1876
1904
  --tds-btn-bg:transparent;
@@ -1895,16 +1923,16 @@ a[class="tds-btn"]{
1895
1923
  }
1896
1924
 
1897
1925
  .tds-btn--primary-page-header{
1898
- --tds-btn-color:var(--t-text-color-default-inverted);
1899
- --tds-btn-bg:var(--t-fill-color-button-interaction-solid-default);
1900
- --tds-btn-border-color:var(--t-fill-color-button-interaction-solid-default);
1901
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1926
+ --tds-btn-color:var(--t-text-color-inverted);
1927
+ --tds-btn-bg:var(--t-fill-color-button-interaction-solid);
1928
+ --tds-btn-border-color:var(--t-fill-color-button-interaction-solid);
1929
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1902
1930
  --tds-btn-bg-hover:var(--t-fill-color-button-interaction-solid-hover);
1903
1931
  --tds-btn-border-color-hover:var(--t-fill-color-button-interaction-solid-hover);
1904
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1932
+ --tds-btn-color-active:var(--t-text-color-inverted);
1905
1933
  --tds-btn-bg-active:var(--t-fill-color-button-interaction-solid-active);
1906
1934
  --tds-btn-border-color-active:var(--t-fill-color-button-interaction-solid-active);
1907
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1935
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1908
1936
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1909
1937
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1910
1938
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1912,15 +1940,15 @@ a[class="tds-btn"]{
1912
1940
 
1913
1941
  .tds-btn--secondary-page-header{
1914
1942
  --tds-btn-color:var(--t-text-color-status-neutral);
1915
- --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header-default);
1916
- --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header-default);
1943
+ --tds-btn-bg:var(--t-fill-color-button-neutral-responsive-header);
1944
+ --tds-btn-border-color:var(--t-fill-color-button-neutral-responsive-header);
1917
1945
  --tds-btn-color-hover:var(--t-text-color-status-neutral);
1918
1946
  --tds-btn-bg-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
1919
1947
  --tds-btn-border-color-hover:var(--t-fill-color-button-neutral-responsive-header-hover);
1920
1948
  --tds-btn-color-active:var(--t-text-color-status-neutral);
1921
1949
  --tds-btn-bg-active:var(--t-fill-color-button-neutral-responsive-header-active);
1922
1950
  --tds-btn-border-color-active:var(--t-fill-color-button-neutral-responsive-header-active);
1923
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1951
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1924
1952
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
1925
1953
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-responsive-header-disabled);
1926
1954
  }
@@ -1932,28 +1960,28 @@ a[class="tds-btn"]{
1932
1960
  --tds-btn-bg:transparent;
1933
1961
  --tds-btn-border-color:var(--t-border-color-button-neutral);
1934
1962
  --tds-btn-color-hover:var(--tds-btn-color);
1935
- --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);
1936
1964
  --tds-btn-border-color-hover:var(--t-border-color-button-neutral);
1937
1965
  --tds-btn-color-active:var(--tds-btn-color);
1938
- --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);
1939
1967
  --tds-btn-border-color-active:var(--t-border-color-button-neutral);
1940
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1941
- --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);
1942
1970
  --tds-btn-border-color-disabled:var(--t-border-color-button-neutral);
1943
1971
  }
1944
1972
  }
1945
1973
 
1946
1974
  .tds-btn--staff-only{
1947
- --tds-btn-color:var(--t-text-color-default-inverted);
1948
- --tds-btn-bg:var(--t-fill-color-product-staff-base);
1949
- --tds-btn-border-color:var(--t-border-color-default-white);
1950
- --tds-btn-color-hover:var(--t-text-color-default-inverted);
1975
+ --tds-btn-color:var(--t-text-color-inverted);
1976
+ --tds-btn-bg:var(--t-fill-color-product-staff);
1977
+ --tds-btn-border-color:var(--t-border-color-white);
1978
+ --tds-btn-color-hover:var(--t-text-color-inverted);
1951
1979
  --tds-btn-bg-hover:var(--t-fill-color-product-staff-dark);
1952
- --tds-btn-border-color-hover:var(--t-border-color-default-white);
1953
- --tds-btn-color-active:var(--t-text-color-default-inverted);
1980
+ --tds-btn-border-color-hover:var(--t-border-color-white);
1981
+ --tds-btn-color-active:var(--t-text-color-inverted);
1954
1982
  --tds-btn-bg-active:var(--t-fill-color-product-staff-darker);
1955
- --tds-btn-border-color-active:var(--t-border-color-default-white);
1956
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
1983
+ --tds-btn-border-color-active:var(--t-border-color-white);
1984
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1957
1985
  --tds-btn-bg-disabled:var(--t-fill-color-button-interaction-solid-disabled);
1958
1986
  --tds-btn-border-color-disabled:var(--tds-btn-bg-disabled);
1959
1987
  --tds-btn-loading-spinner-track-color:var(--t-fill-color-transparency-light-020);
@@ -1964,8 +1992,8 @@ a[class="tds-btn"]{
1964
1992
  --tds-btn-padding-y:4px;
1965
1993
  --tds-btn-padding-x:13px;
1966
1994
 
1967
- --tds-btn-color:var(--t-text-color-default-primary);
1968
- --tds-btn-bg:var(--t-fill-color-button-pill-default);
1995
+ --tds-btn-color:var(--t-text-color);
1996
+ --tds-btn-bg:var(--t-fill-color-button-pill);
1969
1997
  --tds-btn-border-color:var(--tds-btn-bg);
1970
1998
  --tds-btn-color-hover:var(--tds-btn-color);
1971
1999
  --tds-btn-bg-hover:var(--t-fill-color-button-pill-hover);
@@ -1974,10 +2002,10 @@ a[class="tds-btn"]{
1974
2002
  --tds-btn-color-active:var(--tds-btn-color);
1975
2003
  --tds-btn-bg-active:var(--t-fill-color-button-pill-active);
1976
2004
  --tds-btn-border-color-active:var(--tds-btn-bg-active);
1977
- --tds-btn-color-disabled:var(--t-text-color-default-disabled);
2005
+ --tds-btn-color-disabled:var(--t-text-color-disabled);
1978
2006
  --tds-btn-bg-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1979
2007
  --tds-btn-border-color-disabled:var(--t-fill-color-button-neutral-solid-disabled);
1980
- --tds-btn-icon-color:var(--t-icon-color-default-secondary);
2008
+ --tds-btn-icon-color:var(--t-icon-color-secondary);
1981
2009
  --tds-btn-min-height:32px;
1982
2010
  }
1983
2011
 
@@ -2024,8 +2052,8 @@ a[class="tds-btn"]{
2024
2052
  display:inline-block;
2025
2053
  width:var(--tds-btn-attention-icon-size);
2026
2054
  height:var(--tds-btn-attention-icon-size);
2027
- background-color:var(--t-icon-color-status-warning-primary);
2028
- border:.125em solid var(--t-border-color-default-white);
2055
+ background-color:var(--t-icon-color-status-warning);
2056
+ border:.125em solid var(--t-border-color-white);
2029
2057
  border-radius:var(--t-border-radius-round);
2030
2058
  }
2031
2059
 
@@ -2040,25 +2068,25 @@ a[class="tds-btn"]{
2040
2068
  --tds-checkbox-input-border-color:var(--t-border-color-control-neutral);
2041
2069
  --tds-checkbox-input-background-color:transparent;
2042
2070
  --tds-checkbox-input-border-color-hover:var(--t-border-color-button-info);
2043
- --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-interaction-outline-dim-hover);
2071
+ --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-interaction-outline-hover);
2044
2072
  --tds-checkbox-input-border-color-checked:var(--t-border-color-control-info);
2045
- --tds-checkbox-input-background-color-checked:var(--t-fill-color-control-primary);
2073
+ --tds-checkbox-input-background-color-checked:var(--t-fill-color-control);
2046
2074
  --tds-checkbox-input-border-color-disabled:var(--t-border-color-control-disabled);
2047
2075
  --tds-checkbox-input-background-color-disabled:var(--t-fill-color-neutral-070);
2048
2076
 
2049
2077
  --tds-checkbox-input-icon:none;
2050
2078
  --tds-checkbox-input-icon-visibility:hidden;
2051
2079
  --tds-checkbox-input-icon-opacity:0;
2052
- --tds-checkbox-input-icon-fill:var(--t-icon-color-default-inverted);
2080
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-inverted);
2053
2081
  --tds-checkbox-input-icon-checked:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik02LjUwMjAxIDExLjQyOTNMMy42NzM3NCA4LjM5MkMzLjUxNjE2IDguMjI0ODkgMy41MTYxNiA3Ljk1Mjg5IDMuNjczNzQgNy43ODRMNC4yNDUwNSA3LjE3Njg5QzQuNDAyNjIgNy4wMDk3OCA0LjY1ODc4IDcuMDA5NzggNC44MTYzNiA3LjE3Njg5TDYuNzg4MDcgOS4zMDMxMUwxMS4xODMyIDQuNTY5NzhDMTEuMzQwOCA0LjQwMjY2IDExLjU5NjkgNC40MDI2NiAxMS43NTQ1IDQuNTY5NzhMMTIuMzI1OCA1LjE3Nzc4QzEyLjQ4MzQgNS4zNDQ4OSAxMi40ODM0IDUuNjE3NzggMTIuMzI1OCA1Ljc4NEw3LjA3MzMyIDExLjQyOTNDNi45MTU3NCAxMS41OTY0IDYuNjU5NTggMTEuNTk2NCA2LjUwMjAxIDExLjQyOTNaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2054
2082
  --tds-checkbox-input-icon-indeterminate:url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3QgeD0iMy41NTU1NiIgeT0iNy4xMTExMSIgd2lkdGg9IjguODg4ODkiIGhlaWdodD0iMS43Nzc3OCIgcng9IjAuODg4ODg5IiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
2055
2083
 
2056
2084
  --tds-checkbox-font-size:var(--t-font-size-md);
2057
- --tds-checkbox-label-color:var(--t-text-color-default-primary);
2085
+ --tds-checkbox-label-color:var(--t-text-color);
2058
2086
 
2059
2087
  --tds-checkbox-description-font-size:var(--t-font-size-sm);
2060
2088
  --tds-checkbox-description-line-height:1.35;
2061
- --tds-checkbox-description-color:var(--t-text-color-default-secondary);
2089
+ --tds-checkbox-description-color:var(--t-text-color-secondary);
2062
2090
 
2063
2091
  position:relative;
2064
2092
  display:inline-grid;
@@ -2092,7 +2120,7 @@ a[class="tds-btn"]{
2092
2120
  appearance:none;
2093
2121
  cursor:var(--tds-checkbox-cursor);
2094
2122
  background-color:var(--tds-checkbox-input-background-color);
2095
- border:var(--t-border-width-default) solid var(--tds-checkbox-input-border-color);
2123
+ border:var(--t-border-width) solid var(--tds-checkbox-input-border-color);
2096
2124
  border-radius:var(--tds-checkbox-input-border-radius);
2097
2125
  transition-timing-function:ease-in-out;
2098
2126
  transition-duration:180ms;
@@ -2139,13 +2167,13 @@ a[class="tds-btn"]{
2139
2167
  :is(.tds-checkbox input[type="checkbox"]):disabled{
2140
2168
  --tds-checkbox-input-background-color:var(--tds-checkbox-input-background-color-disabled);
2141
2169
  --tds-checkbox-input-border-color:var(--tds-checkbox-input-border-color-disabled);
2142
- --tds-checkbox-input-icon-fill:var(--t-icon-color-default-disabled);
2170
+ --tds-checkbox-input-icon-fill:var(--t-icon-color-disabled);
2143
2171
  pointer-events:none;
2144
2172
  }
2145
2173
 
2146
2174
  .tds-checkbox:has(input:disabled){
2147
- --tds-checkbox-label-color:var(--t-text-color-default-disabled);
2148
- --tds-checkbox-description-color:var(--t-text-color-default-disabled);
2175
+ --tds-checkbox-label-color:var(--t-text-color-disabled);
2176
+ --tds-checkbox-description-color:var(--t-text-color-disabled);
2149
2177
  --tds-checkbox-cursor:not-allowed;
2150
2178
  --tds-checkbox-input-background-color-checked:var(--t-fill-color-control-disabled);
2151
2179
  --tds-checkbox-input-border-color-checked:var(--tds-checkbox-input-border-color-disabled);
@@ -2180,9 +2208,9 @@ a[class="tds-btn"]{
2180
2208
  .tds-checkbox:has(input:invalid){
2181
2209
  --tds-checkbox-input-border-color:var(--t-border-color-button-delete);
2182
2210
  --tds-checkbox-input-border-color-hover:var(--t-border-color-button-delete);
2183
- --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-delete-outline-dim-hover);
2184
- --tds-checkbox-input-border-color-checked:var(--t-fill-color-button-delete-solid-default);
2185
- --tds-checkbox-input-background-color-checked:var(--t-fill-color-button-delete-solid-default);
2211
+ --tds-checkbox-input-background-color-hover:var(--t-fill-color-button-delete-outline-hover);
2212
+ --tds-checkbox-input-border-color-checked:var(--t-fill-color-button-delete-solid);
2213
+ --tds-checkbox-input-background-color-checked:var(--t-fill-color-button-delete-solid);
2186
2214
  --tds-checkbox-description-color:var(--t-text-color-status-error);
2187
2215
  }
2188
2216