@planningcenter/tapestry 2.6.0-rc.1 → 2.6.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 (77) 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/DropdownButton.js +1 -1
  5. package/dist/components/button/DropdownButton.js.map +1 -1
  6. package/dist/components/button/IconButton.js +1 -1
  7. package/dist/components/button/IconButton.js.map +1 -1
  8. package/dist/components/button/PageHeaderActionsDropdownButton.js +1 -1
  9. package/dist/components/button/PageHeaderActionsDropdownButton.js.map +1 -1
  10. package/dist/components/link/BaseLink.js +2 -2
  11. package/dist/components/link/BaseLink.js.map +1 -1
  12. package/dist/components/page-header/index.js +1 -1
  13. package/dist/components/sidenav/index.js +1 -1
  14. package/dist/index.css +264 -173
  15. package/dist/index.css.map +1 -1
  16. package/dist/index.d.ts +1 -0
  17. package/dist/index.d.ts.map +1 -1
  18. package/dist/reactRender.css +1238 -1147
  19. package/dist/reactRender.css.map +1 -1
  20. package/dist/reactRenderLegacy.css +1238 -1147
  21. package/dist/reactRenderLegacy.css.map +1 -1
  22. package/dist/tapestry-wc/dist/components/{p-5-Cvrlgk.js → p-BFofJs4X.js} +2 -2
  23. package/dist/tapestry-wc/dist/components/p-BFofJs4X.js.map +1 -0
  24. package/dist/tapestry-wc/dist/components/{p-D1rzJeWl.js → p-BeEJkvAo.js} +3 -3
  25. package/dist/tapestry-wc/dist/components/p-BeEJkvAo.js.map +1 -0
  26. package/dist/tapestry-wc/dist/components/{p-D0G2xpOq.js → p-DEm5QayP.js} +3 -3
  27. package/dist/tapestry-wc/dist/components/p-DEm5QayP.js.map +1 -0
  28. package/dist/tapestry-wc/dist/components/{p-DmP02I4b.js → p-W8KnNQAP.js} +3 -3
  29. package/dist/tapestry-wc/dist/components/p-W8KnNQAP.js.map +1 -0
  30. package/dist/tapestry-wc/dist/components/{p-74Cc2nEh.js → p-_HgLeFWa.js} +2 -2
  31. package/dist/tapestry-wc/dist/components/p-_HgLeFWa.js.map +1 -0
  32. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js +2 -2
  33. package/dist/tapestry-wc/dist/components/tds-page-header-nav.js.map +1 -1
  34. package/dist/tapestry-wc/dist/components/tds-page-header.js +3 -3
  35. package/dist/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  36. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js +3 -3
  37. package/dist/tapestry-wc/dist/components/tds-sidenav-item.js.map +1 -1
  38. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js +2 -2
  39. package/dist/tapestry-wc/dist/components/tds-sidenav-responsive-header.js.map +1 -1
  40. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js +3 -3
  41. package/dist/tapestry-wc/dist/components/tds-sidenav-section.js.map +1 -1
  42. package/dist/tapestry-wc/dist/components/tds-sidenav.js +5 -5
  43. package/dist/tapestry-wc/dist/components/tds-sidenav.js.map +1 -1
  44. package/dist/tokens/tokens-deprecated.json +158 -0
  45. package/dist/tokens/ts/react-native-tokens.d.ts +190 -54
  46. package/dist/tokens/ts/react-native-tokens.d.ts.map +1 -1
  47. package/dist/tokens/ts/react-native-tokens.js +92 -55
  48. package/dist/tokens/ts/react-native-tokens.js.map +1 -1
  49. package/dist/tokens/ts/tokens.d.ts +72 -54
  50. package/dist/tokens/ts/tokens.d.ts.map +1 -1
  51. package/dist/tokens/ts/tokens.js +72 -54
  52. package/dist/tokens/ts/tokens.js.map +1 -1
  53. package/dist/tokens-dark.css +90 -88
  54. package/dist/tokens-dark.css.map +1 -0
  55. package/dist/tokens-dark.js +1 -0
  56. package/dist/tokens-deprecated.css +109 -0
  57. package/dist/tokens-deprecated.css.map +1 -0
  58. package/dist/tokens-deprecated.d.ts +5 -0
  59. package/dist/tokens-deprecated.d.ts.map +1 -0
  60. package/dist/tokens-deprecated.js +1 -0
  61. package/dist/tokens.css +154 -172
  62. package/dist/tokens.css.map +1 -1
  63. package/dist/tokens.d.ts +3 -2
  64. package/dist/tokens.d.ts.map +1 -1
  65. package/dist/unstable.css +271 -180
  66. package/dist/unstable.css.map +1 -1
  67. package/dist/utilities/Icon.d.ts.map +1 -1
  68. package/dist/utilities/Icon.js +12 -19
  69. package/dist/utilities/Icon.js.map +1 -1
  70. package/package.json +7 -6
  71. package/dist/deprecated.css +0 -25
  72. package/dist/tapestry-wc/dist/components/p-5-Cvrlgk.js.map +0 -1
  73. package/dist/tapestry-wc/dist/components/p-74Cc2nEh.js.map +0 -1
  74. package/dist/tapestry-wc/dist/components/p-D0G2xpOq.js.map +0 -1
  75. package/dist/tapestry-wc/dist/components/p-D1rzJeWl.js.map +0 -1
  76. package/dist/tapestry-wc/dist/components/p-DmP02I4b.js.map +0 -1
  77. package/dist/tokens-dark-combined.js +0 -3
package/dist/index.css CHANGED
@@ -6,8 +6,8 @@
6
6
  --t-border-radius-lg:8px;
7
7
  --t-border-radius-xl:16px;
8
8
  --t-border-radius-round:56px;
9
- --t-border-radius-default:4px;
10
- --t-border-width-default:1px;
9
+ --t-border-radius:4px;
10
+ --t-border-width:1px;
11
11
  --t-border-width-thick:2px;
12
12
  --t-spacing-1:8px;
13
13
  --t-spacing-2:16px;
@@ -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;
@@ -49,13 +50,13 @@
49
50
  --t-avatar-size-48:48px;
50
51
  --t-avatar-size-72:72px;
51
52
  --t-avatar-size-112:112px;
52
- --t-text-color-default-headline:hsl(0, 0%, 12%);
53
- --t-text-color-default-primary:hsl(0, 0%, 24%);
54
- --t-text-color-default-secondary:hsl(0, 0%, 42%);
55
- --t-text-color-default-disabled:hsl(0, 0%, 81%);
56
- --t-text-color-default-placeholder:hsl(0, 0%, 58%);
57
- --t-text-color-default-inverted:hsl(0, 0%, 100%);
58
- --t-text-color-interaction-primary:hsl(204, 100%, 40%);
53
+ --t-text-color-headline:hsl(0, 0%, 12%);
54
+ --t-text-color:hsl(0, 0%, 24%);
55
+ --t-text-color-secondary:hsl(0, 0%, 42%);
56
+ --t-text-color-disabled:hsl(0, 0%, 81%);
57
+ --t-text-color-placeholder:hsl(0, 0%, 58%);
58
+ --t-text-color-inverted:hsl(0, 0%, 100%);
59
+ --t-text-color-interaction:hsl(204, 100%, 40%);
59
60
  --t-text-color-interaction-hover:hsl(204, 100%, 35%);
60
61
  --t-text-color-interaction-active:hsl(204, 100%, 30%);
61
62
  --t-text-color-interaction-visited:hsl(204, 100%, 30%);
@@ -86,19 +87,19 @@
86
87
  --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
87
88
  --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
88
89
  --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
89
- --t-icon-color-default-primary:hsl(0, 0%, 24%);
90
- --t-icon-color-default-secondary:hsl(0, 0%, 42%);
91
- --t-icon-color-default-dim:hsl(0, 0%, 58%);
92
- --t-icon-color-default-disabled:hsl(0, 0%, 81%);
93
- --t-icon-color-default-inverted:hsl(0, 0%, 100%);
94
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 42%);
90
+ --t-icon-color:hsl(0, 0%, 24%);
91
+ --t-icon-color-secondary:hsl(0, 0%, 42%);
92
+ --t-icon-color-dim:hsl(0, 0%, 58%);
93
+ --t-icon-color-disabled:hsl(0, 0%, 81%);
94
+ --t-icon-color-inverted:hsl(0, 0%, 100%);
95
+ --t-icon-color-status-neutral:hsl(0, 0%, 42%);
95
96
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 58%);
96
97
  --t-icon-color-status-neutral-bold:hsl(0, 0%, 24%);
97
- --t-icon-color-status-info-primary:hsl(204, 100%, 40%);
98
- --t-icon-color-status-success-primary:hsl(96, 57%, 33%);
98
+ --t-icon-color-status-info:hsl(204, 100%, 40%);
99
+ --t-icon-color-status-success:hsl(96, 57%, 33%);
99
100
  --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
100
- --t-icon-color-status-warning-primary:hsl(42, 84%, 49%);
101
- --t-icon-color-status-error-primary:hsl(8, 60%, 47%);
101
+ --t-icon-color-status-warning:hsl(42, 84%, 49%);
102
+ --t-icon-color-status-error:hsl(8, 60%, 47%);
102
103
  --t-fill-color-neutral-100:hsl(0, 0%, 100%);
103
104
  --t-fill-color-neutral-000:hsl(0, 0%, 12%);
104
105
  --t-fill-color-neutral-010:hsl(0, 0%, 24%);
@@ -111,32 +112,32 @@
111
112
  --t-fill-color-neutral-070:hsl(0, 0%, 95%);
112
113
  --t-fill-color-neutral-080:hsl(0, 0%, 97%);
113
114
  --t-fill-color-neutral-090:hsl(0, 0%, 98%);
114
- --t-fill-color-interaction-default:hsl(204, 100%, 40%);
115
+ --t-fill-color-interaction:hsl(204, 100%, 40%);
115
116
  --t-fill-color-interaction-hover:hsl(204, 100%, 35%);
116
117
  --t-fill-color-interaction-active:hsl(204, 100%, 30%);
117
118
  --t-fill-color-interaction-disabled:hsl(0, 0%, 81%);
118
119
  --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
119
120
  --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
120
- --t-fill-color-control-primary:hsl(204, 100%, 40%);
121
+ --t-fill-color-control:hsl(204, 100%, 40%);
121
122
  --t-fill-color-control-secondary:hsl(97, 57%, 40%);
122
123
  --t-fill-color-control-error:hsl(8, 60%, 47%);
123
124
  --t-fill-color-control-disabled:hsl(0, 0%, 81%);
124
- --t-fill-color-status-neutral-solid:hsl(0, 0%, 42%);
125
+ --t-fill-color-status-neutral:hsl(0, 0%, 42%);
125
126
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 93%);
126
127
  --t-fill-color-status-neutral-dim:hsl(0, 0%, 97%);
127
- --t-fill-color-status-info-solid:hsl(204, 100%, 40%);
128
+ --t-fill-color-status-info:hsl(204, 100%, 40%);
128
129
  --t-fill-color-status-info-ghost:hsl(203, 94%, 94%);
129
130
  --t-fill-color-status-info-dim:hsl(204, 100%, 97%);
130
- --t-fill-color-status-success-solid:hsl(96, 57%, 33%);
131
+ --t-fill-color-status-success:hsl(96, 57%, 33%);
131
132
  --t-fill-color-status-success-ghost:hsl(97, 57%, 90%);
132
133
  --t-fill-color-status-success-dim:hsl(96, 60%, 95%);
133
- --t-fill-color-status-warning-solid:hsl(42, 84%, 63%);
134
+ --t-fill-color-status-warning:hsl(42, 84%, 63%);
134
135
  --t-fill-color-status-warning-ghost:hsl(42, 87%, 94%);
135
136
  --t-fill-color-status-warning-dim:hsl(42, 87%, 97%);
136
- --t-fill-color-status-error-solid:hsl(8, 60%, 47%);
137
+ --t-fill-color-status-error:hsl(8, 60%, 47%);
137
138
  --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
138
139
  --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
139
- --t-fill-color-tooltip-primary:hsla(0, 0%, 12%, 0.9);
140
+ --t-fill-color-tooltip:hsla(0, 0%, 12%, 0.9);
140
141
  --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
141
142
  --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
142
143
  --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
@@ -217,7 +218,7 @@
217
218
  --t-fill-color-product-services-060:hsl(89, 62%, 31%);
218
219
  --t-fill-color-product-services-070:hsl(89, 62%, 26%);
219
220
  --t-fill-color-product-services-080:hsl(89, 63%, 21%);
220
- --t-fill-color-product-staff-base:hsl(328, 100%, 45%);
221
+ --t-fill-color-product-staff:hsl(328, 100%, 45%);
221
222
  --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
222
223
  --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
223
224
  --t-fill-color-product-accounts-gradient-brand:linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
@@ -297,47 +298,47 @@
297
298
  --t-fill-color-tag-indigo-020:hsl(233, 79%, 87%);
298
299
  --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
299
300
  --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
300
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 93%);
301
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 93%);
301
302
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
302
303
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
303
304
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 95%);
304
- --t-fill-color-button-neutral-outline-dim-default:hsla(0, 0%, 100%, 0);
305
- --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 95%);
306
- --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 93%);
307
- --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 98%);
308
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 100%, 0);
305
+ --t-fill-color-button-neutral-outline:hsla(0, 0%, 100%, 0);
306
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 95%);
307
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 93%);
308
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 98%);
309
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 100%, 0);
309
310
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
310
311
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
311
312
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 100%, 0);
312
- --t-fill-color-button-neutral-responsive-header-default:hsla(0, 0%, 0%, 0.1);
313
+ --t-fill-color-button-neutral-responsive-header:hsla(0, 0%, 0%, 0.1);
313
314
  --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
314
315
  --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
315
316
  --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 0%, 0.05);
316
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 40%);
317
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 40%);
317
318
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
318
319
  --t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
319
320
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 95%);
320
- --t-fill-color-button-interaction-outline-dim-default:hsla(0, 0%, 100%, 0);
321
- --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 100%, 97%);
322
- --t-fill-color-button-interaction-outline-dim-active:hsl(203, 94%, 94%);
323
- --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 98%);
324
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 100%, 0);
321
+ --t-fill-color-button-interaction-outline:hsla(0, 0%, 100%, 0);
322
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 100%, 97%);
323
+ --t-fill-color-button-interaction-outline-active:hsl(203, 94%, 94%);
324
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 98%);
325
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 100%, 0);
325
326
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
326
327
  --t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
327
328
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 100%, 0);
328
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 47%);
329
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 47%);
329
330
  --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
330
331
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
331
332
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 95%);
332
- --t-fill-color-button-delete-outline-dim-default:hsla(0, 0%, 100%, 0);
333
- --t-fill-color-button-delete-outline-dim-hover:hsl(7, 60%, 97%);
334
- --t-fill-color-button-delete-outline-dim-active:hsl(9, 59%, 93%);
335
- --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 98%);
336
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 100%, 0);
333
+ --t-fill-color-button-delete-outline:hsla(0, 0%, 100%, 0);
334
+ --t-fill-color-button-delete-outline-hover:hsl(7, 60%, 97%);
335
+ --t-fill-color-button-delete-outline-active:hsl(9, 59%, 93%);
336
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 98%);
337
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 100%, 0);
337
338
  --t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
338
339
  --t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
339
340
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
340
- --t-fill-color-button-pill-default:hsl(0, 0%, 93%);
341
+ --t-fill-color-button-pill:hsl(0, 0%, 93%);
341
342
  --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
342
343
  --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
343
344
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
@@ -370,13 +371,13 @@
370
371
  --t-fill-color-transparency-dark-static-090:hsla(0, 0%, 0%, 0.9);
371
372
  --t-surface-color-card:hsl(0, 0%, 100%);
372
373
  --t-surface-color-canvas:hsl(0, 0%, 100%);
373
- --t-border-color-default-base:hsl(0, 0%, 88%);
374
- --t-border-color-default-dark:hsl(0, 0%, 81%);
375
- --t-border-color-default-darker:hsl(0, 0%, 68%);
376
- --t-border-color-default-darkest:hsl(0, 0%, 58%);
377
- --t-border-color-default-disabled:hsl(0, 0%, 88%);
378
- --t-border-color-default-dim:hsl(0, 0%, 95%);
379
- --t-border-color-default-white:hsl(0, 0%, 100%);
374
+ --t-border-color:hsl(0, 0%, 88%);
375
+ --t-border-color-dark:hsl(0, 0%, 81%);
376
+ --t-border-color-darker:hsl(0, 0%, 68%);
377
+ --t-border-color-darkest:hsl(0, 0%, 58%);
378
+ --t-border-color-disabled:hsl(0, 0%, 88%);
379
+ --t-border-color-dim:hsl(0, 0%, 95%);
380
+ --t-border-color-white:hsl(0, 0%, 100%);
380
381
  --t-border-color-status-neutral:hsl(0, 0%, 58%);
381
382
  --t-border-color-status-info:hsl(204, 100%, 40%);
382
383
  --t-border-color-status-success:hsl(97, 57%, 40%);
@@ -397,49 +398,30 @@
397
398
  --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
398
399
  --t-form-background-color-error:var(--t-fill-color-neutral-100);
399
400
  --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
400
- --t-form-border-color:var(--t-border-color-default-base);
401
- --t-form-border-color-disabled:var(--t-border-color-default-base);
401
+ --t-form-border-color:var(--t-border-color);
402
+ --t-form-border-color-disabled:var(--t-border-color);
402
403
  --t-form-border-color-error:var(--t-border-color-status-error);
403
- --t-form-border-color-focus:var(--t-fill-color-interaction-default);
404
- --t-form-border-color-hover:var(--t-border-color-default-dark);
404
+ --t-form-border-color-focus:var(--t-fill-color-interaction);
405
+ --t-form-border-color-hover:var(--t-border-color-dark);
405
406
  --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
406
407
  --t-form-border-radius:var(--t-border-radius-md);
407
- --t-form-border-width:var(--t-border-width-default);
408
- --t-form-font-color:var(--t-text-color-default-primary);
409
- --t-form-font-color-disabled:var(--t-text-color-default-disabled);
408
+ --t-form-border-width:var(--t-border-width);
409
+ --t-form-font-color:var(--t-text-color);
410
+ --t-form-font-color-disabled:var(--t-text-color-disabled);
410
411
  --t-form-font-color-error:var(--t-text-color-status-error);
411
- --t-form-font-color-readonly:var(--t-text-color-default-primary);
412
- --t-form-picker-icon-color:var(--t-icon-color-default-primary);
413
- --t-form-placeholder-color:var(--t-text-color-default-placeholder);
414
- --t-border-size-default:var(--t-border-width-default);
415
- --t-border-size-thick:var(--t-border-width-thick);
416
- --t-font-weight-semi-bold:var(--t-font-weight-semibold);
417
- --t-icon-color-status-neutral-dark:hsl(0, 0%, 24%);
418
- --t-icon-color-status-info-secondary:hsl(204, 100%, 40%);
419
- --t-fill-color-alert-info:hsl(204, 94%, 49%);
420
- --t-fill-color-alert-success:hsl(122, 60%, 41%);
421
- --t-fill-color-alert-warning:hsl(43, 96%, 58%);
422
- --t-fill-color-alert-error:hsl(4, 77%, 59%);
423
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
424
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
425
- --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
426
- --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
427
- --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
428
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
429
- --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
430
- --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
431
- --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
432
- --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
412
+ --t-form-font-color-readonly:var(--t-text-color);
413
+ --t-form-picker-icon-color:var(--t-icon-color);
414
+ --t-form-placeholder-color:var(--t-text-color-placeholder);
433
415
  }
434
416
 
435
417
  :root[data-color-mode="dark"]{
436
418
  color-scheme:dark;
437
- --t-text-color-default-headline:hsl(0, 0%, 94%);
438
- --t-text-color-default-primary:hsl(0, 0%, 80%);
439
- --t-text-color-default-secondary:hsl(0, 0%, 54%);
440
- --t-text-color-default-disabled:hsl(0, 0%, 25%);
441
- --t-text-color-default-placeholder:hsl(0, 0%, 38%);
442
- --t-text-color-interaction-primary:hsl(204, 68%, 55%);
419
+ --t-text-color-headline:hsl(0, 0%, 94%);
420
+ --t-text-color:hsl(0, 0%, 80%);
421
+ --t-text-color-secondary:hsl(0, 0%, 54%);
422
+ --t-text-color-disabled:hsl(0, 0%, 25%);
423
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
424
+ --t-text-color-interaction:hsl(204, 68%, 55%);
443
425
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
444
426
  --t-text-color-interaction-active:hsl(204, 68%, 45%);
445
427
  --t-text-color-interaction-visited:hsl(204, 68%, 50%);
@@ -470,15 +452,15 @@
470
452
  --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
471
453
  --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
472
454
  --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
473
- --t-icon-color-default-primary:hsl(0, 0%, 80%);
474
- --t-icon-color-default-secondary:hsl(0, 0%, 54%);
475
- --t-icon-color-default-dim:hsl(0, 0%, 38%);
476
- --t-icon-color-default-disabled:hsl(0, 0%, 25%);
477
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
455
+ --t-icon-color:hsl(0, 0%, 80%);
456
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
457
+ --t-icon-color-dim:hsl(0, 0%, 38%);
458
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
459
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
478
460
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
479
461
  --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
480
- --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
481
- --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
462
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
463
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
482
464
  --t-fill-color-neutral-100:hsl(0, 0%, 10%);
483
465
  --t-fill-color-neutral-000:hsl(0, 0%, 98%);
484
466
  --t-fill-color-neutral-010:hsl(0, 0%, 88%);
@@ -491,18 +473,18 @@
491
473
  --t-fill-color-neutral-070:hsl(0, 0%, 17%);
492
474
  --t-fill-color-neutral-080:hsl(0, 0%, 15%);
493
475
  --t-fill-color-neutral-090:hsl(0, 0%, 12%);
494
- --t-fill-color-interaction-default:hsl(204, 100%, 35%);
476
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
495
477
  --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
496
478
  --t-fill-color-interaction-active:hsl(204, 80%, 45%);
497
479
  --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
498
480
  --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
499
481
  --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
500
- --t-fill-color-control-primary:hsl(204, 100%, 35%);
482
+ --t-fill-color-control:hsl(204, 100%, 35%);
501
483
  --t-fill-color-control-disabled:hsl(0, 0%, 20%);
502
- --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
484
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
503
485
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
504
486
  --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
505
- --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
487
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
506
488
  --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
507
489
  --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
508
490
  --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
@@ -511,7 +493,7 @@
511
493
  --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
512
494
  --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
513
495
  --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
514
- --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
496
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
515
497
  --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
516
498
  --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
517
499
  --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
@@ -576,43 +558,43 @@
576
558
  --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
577
559
  --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
578
560
  --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
579
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
561
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
580
562
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
581
563
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
582
564
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
583
- --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
584
- --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
585
- --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
586
- --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
587
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
565
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
566
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
567
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
568
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
569
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
588
570
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
589
571
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
590
572
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
591
573
  --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
592
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
574
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
593
575
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
594
576
  --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
595
577
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
596
- --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
597
- --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
598
- --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
599
- --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
600
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
578
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
579
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
580
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
581
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
582
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
601
583
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
602
584
  --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
603
585
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
604
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
586
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
605
587
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
606
588
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
607
- --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
608
- --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
609
- --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
610
- --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
611
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
589
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
590
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
591
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
592
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
593
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
612
594
  --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
613
595
  --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
614
596
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
615
- --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
597
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
616
598
  --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
617
599
  --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
618
600
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
@@ -636,13 +618,13 @@
636
618
  --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
637
619
  --t-surface-color-card:hsl(0, 0%, 12%);
638
620
  --t-surface-color-canvas:hsl(0, 0%, 10%);
639
- --t-border-color-default-base:hsl(0, 0%, 21%);
640
- --t-border-color-default-dark:hsl(0, 0%, 25%);
641
- --t-border-color-default-darker:hsl(0, 0%, 33%);
642
- --t-border-color-default-darkest:hsl(0, 0%, 38%);
643
- --t-border-color-default-disabled:hsl(0, 0%, 21%);
644
- --t-border-color-default-dim:hsl(0, 0%, 16%);
645
- --t-border-color-default-white:hsl(0, 0%, 12%);
621
+ --t-border-color:hsl(0, 0%, 21%);
622
+ --t-border-color-dark:hsl(0, 0%, 25%);
623
+ --t-border-color-darker:hsl(0, 0%, 33%);
624
+ --t-border-color-darkest:hsl(0, 0%, 38%);
625
+ --t-border-color-disabled:hsl(0, 0%, 21%);
626
+ --t-border-color-dim:hsl(0, 0%, 16%);
627
+ --t-border-color-white:hsl(0, 0%, 12%);
646
628
  --t-border-color-status-neutral:hsl(0, 0%, 38%);
647
629
  --t-border-color-status-info:hsl(204, 100%, 35%);
648
630
  --t-border-color-button-neutral:hsl(0, 0%, 19%);
@@ -658,12 +640,12 @@
658
640
  @media (prefers-color-scheme: dark){
659
641
  :root[data-color-mode="system"]{
660
642
  color-scheme:dark;
661
- --t-text-color-default-headline:hsl(0, 0%, 94%);
662
- --t-text-color-default-primary:hsl(0, 0%, 80%);
663
- --t-text-color-default-secondary:hsl(0, 0%, 54%);
664
- --t-text-color-default-disabled:hsl(0, 0%, 25%);
665
- --t-text-color-default-placeholder:hsl(0, 0%, 38%);
666
- --t-text-color-interaction-primary:hsl(204, 68%, 55%);
643
+ --t-text-color-headline:hsl(0, 0%, 94%);
644
+ --t-text-color:hsl(0, 0%, 80%);
645
+ --t-text-color-secondary:hsl(0, 0%, 54%);
646
+ --t-text-color-disabled:hsl(0, 0%, 25%);
647
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
648
+ --t-text-color-interaction:hsl(204, 68%, 55%);
667
649
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
668
650
  --t-text-color-interaction-active:hsl(204, 68%, 45%);
669
651
  --t-text-color-interaction-visited:hsl(204, 68%, 50%);
@@ -694,15 +676,15 @@
694
676
  --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
695
677
  --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
696
678
  --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
697
- --t-icon-color-default-primary:hsl(0, 0%, 80%);
698
- --t-icon-color-default-secondary:hsl(0, 0%, 54%);
699
- --t-icon-color-default-dim:hsl(0, 0%, 38%);
700
- --t-icon-color-default-disabled:hsl(0, 0%, 25%);
701
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
679
+ --t-icon-color:hsl(0, 0%, 80%);
680
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
681
+ --t-icon-color-dim:hsl(0, 0%, 38%);
682
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
683
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
702
684
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
703
685
  --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
704
- --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
705
- --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
686
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
687
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
706
688
  --t-fill-color-neutral-100:hsl(0, 0%, 10%);
707
689
  --t-fill-color-neutral-000:hsl(0, 0%, 98%);
708
690
  --t-fill-color-neutral-010:hsl(0, 0%, 88%);
@@ -715,18 +697,18 @@
715
697
  --t-fill-color-neutral-070:hsl(0, 0%, 17%);
716
698
  --t-fill-color-neutral-080:hsl(0, 0%, 15%);
717
699
  --t-fill-color-neutral-090:hsl(0, 0%, 12%);
718
- --t-fill-color-interaction-default:hsl(204, 100%, 35%);
700
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
719
701
  --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
720
702
  --t-fill-color-interaction-active:hsl(204, 80%, 45%);
721
703
  --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
722
704
  --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
723
705
  --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
724
- --t-fill-color-control-primary:hsl(204, 100%, 35%);
706
+ --t-fill-color-control:hsl(204, 100%, 35%);
725
707
  --t-fill-color-control-disabled:hsl(0, 0%, 20%);
726
- --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
708
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
727
709
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
728
710
  --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
729
- --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
711
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
730
712
  --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
731
713
  --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
732
714
  --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
@@ -735,7 +717,7 @@
735
717
  --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
736
718
  --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
737
719
  --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
738
- --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
720
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
739
721
  --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
740
722
  --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
741
723
  --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
@@ -800,43 +782,43 @@
800
782
  --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
801
783
  --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
802
784
  --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
803
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
785
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
804
786
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
805
787
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
806
788
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
807
- --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
808
- --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
809
- --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
810
- --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
811
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
789
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
790
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
791
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
792
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
793
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
812
794
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
813
795
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
814
796
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
815
797
  --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
816
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
798
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
817
799
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
818
800
  --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
819
801
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
820
- --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
821
- --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
822
- --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
823
- --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
824
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
802
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
803
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
804
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
805
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
806
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
825
807
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
826
808
  --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
827
809
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
828
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
810
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
829
811
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
830
812
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
831
- --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
832
- --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
833
- --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
834
- --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
835
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
813
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
814
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
815
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
816
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
817
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
836
818
  --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
837
819
  --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
838
820
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
839
- --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
821
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
840
822
  --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
841
823
  --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
842
824
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
@@ -860,13 +842,13 @@
860
842
  --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
861
843
  --t-surface-color-card:hsl(0, 0%, 12%);
862
844
  --t-surface-color-canvas:hsl(0, 0%, 10%);
863
- --t-border-color-default-base:hsl(0, 0%, 21%);
864
- --t-border-color-default-dark:hsl(0, 0%, 25%);
865
- --t-border-color-default-darker:hsl(0, 0%, 33%);
866
- --t-border-color-default-darkest:hsl(0, 0%, 38%);
867
- --t-border-color-default-disabled:hsl(0, 0%, 21%);
868
- --t-border-color-default-dim:hsl(0, 0%, 16%);
869
- --t-border-color-default-white:hsl(0, 0%, 12%);
845
+ --t-border-color:hsl(0, 0%, 21%);
846
+ --t-border-color-dark:hsl(0, 0%, 25%);
847
+ --t-border-color-darker:hsl(0, 0%, 33%);
848
+ --t-border-color-darkest:hsl(0, 0%, 38%);
849
+ --t-border-color-disabled:hsl(0, 0%, 21%);
850
+ --t-border-color-dim:hsl(0, 0%, 16%);
851
+ --t-border-color-white:hsl(0, 0%, 12%);
870
852
  --t-border-color-status-neutral:hsl(0, 0%, 38%);
871
853
  --t-border-color-status-info:hsl(204, 100%, 35%);
872
854
  --t-border-color-button-neutral:hsl(0, 0%, 19%);
@@ -880,6 +862,114 @@
880
862
  }
881
863
  }
882
864
 
865
+ :root{
866
+ --t-border-size-default:var(--t-border-width);
867
+ --t-border-size-thick:var(--t-border-width-thick);
868
+ --t-font-weight-semi-bold:var(--t-font-weight-semibold);
869
+ --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
870
+ --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
871
+ --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
872
+ --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
873
+ --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
874
+ --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
875
+ --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
876
+ --t-fill-color-alert-info:hsl(204, 94%, 49%);
877
+ --t-fill-color-alert-success:hsl(122, 60%, 41%);
878
+ --t-fill-color-alert-warning:hsl(43, 96%, 58%);
879
+ --t-fill-color-alert-error:hsl(4, 77%, 59%);
880
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
881
+ --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
882
+ --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
883
+ --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
884
+ --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
885
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
886
+ --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
887
+ --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
888
+ --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
889
+ --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
890
+ --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
891
+ --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
892
+ --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
893
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
894
+ --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
895
+ --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
896
+ --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
897
+ --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
898
+ --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
899
+ --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
900
+ --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
901
+ --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
902
+ }
903
+
904
+ :root{
905
+ --t-border-color-default-base:var(--t-border-color);
906
+ --t-border-color-default-dark:var(--t-border-color-dark);
907
+ --t-border-color-default-darker:var(--t-border-color-darker);
908
+ --t-border-color-default-darkest:var(--t-border-color-darkest);
909
+ --t-border-color-default-dim:var(--t-border-color-dim);
910
+ --t-border-color-default-disabled:var(--t-border-color-disabled);
911
+ --t-border-color-default-white:var(--t-border-color-white);
912
+ --t-border-radius-default:var(--t-border-radius);
913
+ --t-border-width-default:var(--t-border-width);
914
+ --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
915
+ --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
916
+ --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
917
+ --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
918
+ --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
919
+ --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
920
+ --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
921
+ --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
922
+ --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
923
+ --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
924
+ --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
925
+ --t-fill-color-control-primary:var(--t-fill-color-control);
926
+ --t-fill-color-interaction-default:var(--t-fill-color-interaction);
927
+ --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
928
+ --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
929
+ --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
930
+ --t-icon-color-default-dim:var(--t-icon-color-dim);
931
+ --t-icon-color-default-disabled:var(--t-icon-color-disabled);
932
+ --t-icon-color-default-inverted:var(--t-icon-color-inverted);
933
+ --t-icon-color-default-primary:var(--t-icon-color);
934
+ --t-icon-color-default-secondary:var(--t-icon-color-secondary);
935
+ --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
936
+ --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
937
+ --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
938
+ --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
939
+ --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
940
+ --t-text-color-default-disabled:var(--t-text-color-disabled);
941
+ --t-text-color-default-headline:var(--t-text-color-headline);
942
+ --t-text-color-default-inverted:var(--t-text-color-inverted);
943
+ --t-text-color-default-placeholder:var(--t-text-color-placeholder);
944
+ --t-text-color-default-primary:var(--t-text-color);
945
+ --t-text-color-default-secondary:var(--t-text-color-secondary);
946
+ --t-text-color-interaction-primary:var(--t-text-color-interaction);
947
+ }
948
+
949
+ :root[data-color-mode="dark"]{
950
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
951
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
952
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
953
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
954
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
955
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
956
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
957
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
958
+ }
959
+
960
+ @media (prefers-color-scheme: dark){
961
+ :root[data-color-mode="system"]{
962
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
963
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
964
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
965
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
966
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
967
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
968
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
969
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
970
+ }
971
+ }
972
+
883
973
  @layer t-critical{
884
974
  tds-page-header:not(.hydrated){
885
975
  display:none;
@@ -1907,11 +1997,12 @@ a[class="tds-btn"]{
1907
1997
  }
1908
1998
 
1909
1999
  .tds-btn--dropdown .suffix{
2000
+ transform:rotate(180deg);
1910
2001
  transition:transform .2s ease-in-out;
1911
2002
  }
1912
2003
 
1913
2004
  .tds-btn--dropdown[aria-expanded="true"] .suffix{
1914
- transform:rotate(-180deg);
2005
+ transform:rotate(0deg);
1915
2006
  }
1916
2007
 
1917
2008
  .tds-btn--full-width{