@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/unstable.css CHANGED
@@ -181,8 +181,8 @@
181
181
  --t-border-radius-lg:8px;
182
182
  --t-border-radius-xl:16px;
183
183
  --t-border-radius-round:56px;
184
- --t-border-radius-default:4px;
185
- --t-border-width-default:1px;
184
+ --t-border-radius:4px;
185
+ --t-border-width:1px;
186
186
  --t-border-width-thick:2px;
187
187
  --t-spacing-1:8px;
188
188
  --t-spacing-2:16px;
@@ -193,6 +193,7 @@
193
193
  --t-spacing-7:56px;
194
194
  --t-spacing-fourth:2px;
195
195
  --t-spacing-half:4px;
196
+ --t-spacing-1-half:12px;
196
197
  --t-element-size-3xl:48px;
197
198
  --t-element-size-2xl:32px;
198
199
  --t-element-size-xl:24px;
@@ -224,13 +225,13 @@
224
225
  --t-avatar-size-48:48px;
225
226
  --t-avatar-size-72:72px;
226
227
  --t-avatar-size-112:112px;
227
- --t-text-color-default-headline:hsl(0, 0%, 12%);
228
- --t-text-color-default-primary:hsl(0, 0%, 24%);
229
- --t-text-color-default-secondary:hsl(0, 0%, 42%);
230
- --t-text-color-default-disabled:hsl(0, 0%, 81%);
231
- --t-text-color-default-placeholder:hsl(0, 0%, 58%);
232
- --t-text-color-default-inverted:hsl(0, 0%, 100%);
233
- --t-text-color-interaction-primary:hsl(204, 100%, 40%);
228
+ --t-text-color-headline:hsl(0, 0%, 12%);
229
+ --t-text-color:hsl(0, 0%, 24%);
230
+ --t-text-color-secondary:hsl(0, 0%, 42%);
231
+ --t-text-color-disabled:hsl(0, 0%, 81%);
232
+ --t-text-color-placeholder:hsl(0, 0%, 58%);
233
+ --t-text-color-inverted:hsl(0, 0%, 100%);
234
+ --t-text-color-interaction:hsl(204, 100%, 40%);
234
235
  --t-text-color-interaction-hover:hsl(204, 100%, 35%);
235
236
  --t-text-color-interaction-active:hsl(204, 100%, 30%);
236
237
  --t-text-color-interaction-visited:hsl(204, 100%, 30%);
@@ -261,19 +262,19 @@
261
262
  --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
262
263
  --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
263
264
  --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
264
- --t-icon-color-default-primary:hsl(0, 0%, 24%);
265
- --t-icon-color-default-secondary:hsl(0, 0%, 42%);
266
- --t-icon-color-default-dim:hsl(0, 0%, 58%);
267
- --t-icon-color-default-disabled:hsl(0, 0%, 81%);
268
- --t-icon-color-default-inverted:hsl(0, 0%, 100%);
269
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 42%);
265
+ --t-icon-color:hsl(0, 0%, 24%);
266
+ --t-icon-color-secondary:hsl(0, 0%, 42%);
267
+ --t-icon-color-dim:hsl(0, 0%, 58%);
268
+ --t-icon-color-disabled:hsl(0, 0%, 81%);
269
+ --t-icon-color-inverted:hsl(0, 0%, 100%);
270
+ --t-icon-color-status-neutral:hsl(0, 0%, 42%);
270
271
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 58%);
271
272
  --t-icon-color-status-neutral-bold:hsl(0, 0%, 24%);
272
- --t-icon-color-status-info-primary:hsl(204, 100%, 40%);
273
- --t-icon-color-status-success-primary:hsl(96, 57%, 33%);
273
+ --t-icon-color-status-info:hsl(204, 100%, 40%);
274
+ --t-icon-color-status-success:hsl(96, 57%, 33%);
274
275
  --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
275
- --t-icon-color-status-warning-primary:hsl(42, 84%, 49%);
276
- --t-icon-color-status-error-primary:hsl(8, 60%, 47%);
276
+ --t-icon-color-status-warning:hsl(42, 84%, 49%);
277
+ --t-icon-color-status-error:hsl(8, 60%, 47%);
277
278
  --t-fill-color-neutral-100:hsl(0, 0%, 100%);
278
279
  --t-fill-color-neutral-000:hsl(0, 0%, 12%);
279
280
  --t-fill-color-neutral-010:hsl(0, 0%, 24%);
@@ -286,32 +287,32 @@
286
287
  --t-fill-color-neutral-070:hsl(0, 0%, 95%);
287
288
  --t-fill-color-neutral-080:hsl(0, 0%, 97%);
288
289
  --t-fill-color-neutral-090:hsl(0, 0%, 98%);
289
- --t-fill-color-interaction-default:hsl(204, 100%, 40%);
290
+ --t-fill-color-interaction:hsl(204, 100%, 40%);
290
291
  --t-fill-color-interaction-hover:hsl(204, 100%, 35%);
291
292
  --t-fill-color-interaction-active:hsl(204, 100%, 30%);
292
293
  --t-fill-color-interaction-disabled:hsl(0, 0%, 81%);
293
294
  --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
294
295
  --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
295
- --t-fill-color-control-primary:hsl(204, 100%, 40%);
296
+ --t-fill-color-control:hsl(204, 100%, 40%);
296
297
  --t-fill-color-control-secondary:hsl(97, 57%, 40%);
297
298
  --t-fill-color-control-error:hsl(8, 60%, 47%);
298
299
  --t-fill-color-control-disabled:hsl(0, 0%, 81%);
299
- --t-fill-color-status-neutral-solid:hsl(0, 0%, 42%);
300
+ --t-fill-color-status-neutral:hsl(0, 0%, 42%);
300
301
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 93%);
301
302
  --t-fill-color-status-neutral-dim:hsl(0, 0%, 97%);
302
- --t-fill-color-status-info-solid:hsl(204, 100%, 40%);
303
+ --t-fill-color-status-info:hsl(204, 100%, 40%);
303
304
  --t-fill-color-status-info-ghost:hsl(203, 94%, 94%);
304
305
  --t-fill-color-status-info-dim:hsl(204, 100%, 97%);
305
- --t-fill-color-status-success-solid:hsl(96, 57%, 33%);
306
+ --t-fill-color-status-success:hsl(96, 57%, 33%);
306
307
  --t-fill-color-status-success-ghost:hsl(97, 57%, 90%);
307
308
  --t-fill-color-status-success-dim:hsl(96, 60%, 95%);
308
- --t-fill-color-status-warning-solid:hsl(42, 84%, 63%);
309
+ --t-fill-color-status-warning:hsl(42, 84%, 63%);
309
310
  --t-fill-color-status-warning-ghost:hsl(42, 87%, 94%);
310
311
  --t-fill-color-status-warning-dim:hsl(42, 87%, 97%);
311
- --t-fill-color-status-error-solid:hsl(8, 60%, 47%);
312
+ --t-fill-color-status-error:hsl(8, 60%, 47%);
312
313
  --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
313
314
  --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
314
- --t-fill-color-tooltip-primary:hsla(0, 0%, 12%, 0.9);
315
+ --t-fill-color-tooltip:hsla(0, 0%, 12%, 0.9);
315
316
  --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
316
317
  --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
317
318
  --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
@@ -392,7 +393,7 @@
392
393
  --t-fill-color-product-services-060:hsl(89, 62%, 31%);
393
394
  --t-fill-color-product-services-070:hsl(89, 62%, 26%);
394
395
  --t-fill-color-product-services-080:hsl(89, 63%, 21%);
395
- --t-fill-color-product-staff-base:hsl(328, 100%, 45%);
396
+ --t-fill-color-product-staff:hsl(328, 100%, 45%);
396
397
  --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
397
398
  --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
398
399
  --t-fill-color-product-accounts-gradient-brand:linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
@@ -472,47 +473,47 @@
472
473
  --t-fill-color-tag-indigo-020:hsl(233, 79%, 87%);
473
474
  --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
474
475
  --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
475
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 93%);
476
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 93%);
476
477
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
477
478
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
478
479
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 95%);
479
- --t-fill-color-button-neutral-outline-dim-default:hsla(0, 0%, 100%, 0);
480
- --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 95%);
481
- --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 93%);
482
- --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 98%);
483
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 100%, 0);
480
+ --t-fill-color-button-neutral-outline:hsla(0, 0%, 100%, 0);
481
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 95%);
482
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 93%);
483
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 98%);
484
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 100%, 0);
484
485
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
485
486
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
486
487
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 100%, 0);
487
- --t-fill-color-button-neutral-responsive-header-default:hsla(0, 0%, 0%, 0.1);
488
+ --t-fill-color-button-neutral-responsive-header:hsla(0, 0%, 0%, 0.1);
488
489
  --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
489
490
  --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
490
491
  --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 0%, 0.05);
491
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 40%);
492
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 40%);
492
493
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
493
494
  --t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
494
495
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 95%);
495
- --t-fill-color-button-interaction-outline-dim-default:hsla(0, 0%, 100%, 0);
496
- --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 100%, 97%);
497
- --t-fill-color-button-interaction-outline-dim-active:hsl(203, 94%, 94%);
498
- --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 98%);
499
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 100%, 0);
496
+ --t-fill-color-button-interaction-outline:hsla(0, 0%, 100%, 0);
497
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 100%, 97%);
498
+ --t-fill-color-button-interaction-outline-active:hsl(203, 94%, 94%);
499
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 98%);
500
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 100%, 0);
500
501
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
501
502
  --t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
502
503
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 100%, 0);
503
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 47%);
504
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 47%);
504
505
  --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
505
506
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
506
507
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 95%);
507
- --t-fill-color-button-delete-outline-dim-default:hsla(0, 0%, 100%, 0);
508
- --t-fill-color-button-delete-outline-dim-hover:hsl(7, 60%, 97%);
509
- --t-fill-color-button-delete-outline-dim-active:hsl(9, 59%, 93%);
510
- --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 98%);
511
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 100%, 0);
508
+ --t-fill-color-button-delete-outline:hsla(0, 0%, 100%, 0);
509
+ --t-fill-color-button-delete-outline-hover:hsl(7, 60%, 97%);
510
+ --t-fill-color-button-delete-outline-active:hsl(9, 59%, 93%);
511
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 98%);
512
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 100%, 0);
512
513
  --t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
513
514
  --t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
514
515
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
515
- --t-fill-color-button-pill-default:hsl(0, 0%, 93%);
516
+ --t-fill-color-button-pill:hsl(0, 0%, 93%);
516
517
  --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
517
518
  --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
518
519
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
@@ -545,13 +546,13 @@
545
546
  --t-fill-color-transparency-dark-static-090:hsla(0, 0%, 0%, 0.9);
546
547
  --t-surface-color-card:hsl(0, 0%, 100%);
547
548
  --t-surface-color-canvas:hsl(0, 0%, 100%);
548
- --t-border-color-default-base:hsl(0, 0%, 88%);
549
- --t-border-color-default-dark:hsl(0, 0%, 81%);
550
- --t-border-color-default-darker:hsl(0, 0%, 68%);
551
- --t-border-color-default-darkest:hsl(0, 0%, 58%);
552
- --t-border-color-default-disabled:hsl(0, 0%, 88%);
553
- --t-border-color-default-dim:hsl(0, 0%, 95%);
554
- --t-border-color-default-white:hsl(0, 0%, 100%);
549
+ --t-border-color:hsl(0, 0%, 88%);
550
+ --t-border-color-dark:hsl(0, 0%, 81%);
551
+ --t-border-color-darker:hsl(0, 0%, 68%);
552
+ --t-border-color-darkest:hsl(0, 0%, 58%);
553
+ --t-border-color-disabled:hsl(0, 0%, 88%);
554
+ --t-border-color-dim:hsl(0, 0%, 95%);
555
+ --t-border-color-white:hsl(0, 0%, 100%);
555
556
  --t-border-color-status-neutral:hsl(0, 0%, 58%);
556
557
  --t-border-color-status-info:hsl(204, 100%, 40%);
557
558
  --t-border-color-status-success:hsl(97, 57%, 40%);
@@ -572,49 +573,30 @@
572
573
  --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
573
574
  --t-form-background-color-error:var(--t-fill-color-neutral-100);
574
575
  --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
575
- --t-form-border-color:var(--t-border-color-default-base);
576
- --t-form-border-color-disabled:var(--t-border-color-default-base);
576
+ --t-form-border-color:var(--t-border-color);
577
+ --t-form-border-color-disabled:var(--t-border-color);
577
578
  --t-form-border-color-error:var(--t-border-color-status-error);
578
- --t-form-border-color-focus:var(--t-fill-color-interaction-default);
579
- --t-form-border-color-hover:var(--t-border-color-default-dark);
579
+ --t-form-border-color-focus:var(--t-fill-color-interaction);
580
+ --t-form-border-color-hover:var(--t-border-color-dark);
580
581
  --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
581
582
  --t-form-border-radius:var(--t-border-radius-md);
582
- --t-form-border-width:var(--t-border-width-default);
583
- --t-form-font-color:var(--t-text-color-default-primary);
584
- --t-form-font-color-disabled:var(--t-text-color-default-disabled);
583
+ --t-form-border-width:var(--t-border-width);
584
+ --t-form-font-color:var(--t-text-color);
585
+ --t-form-font-color-disabled:var(--t-text-color-disabled);
585
586
  --t-form-font-color-error:var(--t-text-color-status-error);
586
- --t-form-font-color-readonly:var(--t-text-color-default-primary);
587
- --t-form-picker-icon-color:var(--t-icon-color-default-primary);
588
- --t-form-placeholder-color:var(--t-text-color-default-placeholder);
589
- --t-border-size-default:var(--t-border-width-default);
590
- --t-border-size-thick:var(--t-border-width-thick);
591
- --t-font-weight-semi-bold:var(--t-font-weight-semibold);
592
- --t-icon-color-status-neutral-dark:hsl(0, 0%, 24%);
593
- --t-icon-color-status-info-secondary:hsl(204, 100%, 40%);
594
- --t-fill-color-alert-info:hsl(204, 94%, 49%);
595
- --t-fill-color-alert-success:hsl(122, 60%, 41%);
596
- --t-fill-color-alert-warning:hsl(43, 96%, 58%);
597
- --t-fill-color-alert-error:hsl(4, 77%, 59%);
598
- --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
599
- --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
600
- --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
601
- --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
602
- --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
603
- --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
604
- --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
605
- --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
606
- --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
607
- --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
587
+ --t-form-font-color-readonly:var(--t-text-color);
588
+ --t-form-picker-icon-color:var(--t-icon-color);
589
+ --t-form-placeholder-color:var(--t-text-color-placeholder);
608
590
  }
609
591
 
610
592
  :root[data-color-mode="dark"]{
611
593
  color-scheme:dark;
612
- --t-text-color-default-headline:hsl(0, 0%, 94%);
613
- --t-text-color-default-primary:hsl(0, 0%, 80%);
614
- --t-text-color-default-secondary:hsl(0, 0%, 54%);
615
- --t-text-color-default-disabled:hsl(0, 0%, 25%);
616
- --t-text-color-default-placeholder:hsl(0, 0%, 38%);
617
- --t-text-color-interaction-primary:hsl(204, 68%, 55%);
594
+ --t-text-color-headline:hsl(0, 0%, 94%);
595
+ --t-text-color:hsl(0, 0%, 80%);
596
+ --t-text-color-secondary:hsl(0, 0%, 54%);
597
+ --t-text-color-disabled:hsl(0, 0%, 25%);
598
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
599
+ --t-text-color-interaction:hsl(204, 68%, 55%);
618
600
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
619
601
  --t-text-color-interaction-active:hsl(204, 68%, 45%);
620
602
  --t-text-color-interaction-visited:hsl(204, 68%, 50%);
@@ -645,15 +627,15 @@
645
627
  --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
646
628
  --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
647
629
  --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
648
- --t-icon-color-default-primary:hsl(0, 0%, 80%);
649
- --t-icon-color-default-secondary:hsl(0, 0%, 54%);
650
- --t-icon-color-default-dim:hsl(0, 0%, 38%);
651
- --t-icon-color-default-disabled:hsl(0, 0%, 25%);
652
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
630
+ --t-icon-color:hsl(0, 0%, 80%);
631
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
632
+ --t-icon-color-dim:hsl(0, 0%, 38%);
633
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
634
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
653
635
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
654
636
  --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
655
- --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
656
- --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
637
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
638
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
657
639
  --t-fill-color-neutral-100:hsl(0, 0%, 10%);
658
640
  --t-fill-color-neutral-000:hsl(0, 0%, 98%);
659
641
  --t-fill-color-neutral-010:hsl(0, 0%, 88%);
@@ -666,18 +648,18 @@
666
648
  --t-fill-color-neutral-070:hsl(0, 0%, 17%);
667
649
  --t-fill-color-neutral-080:hsl(0, 0%, 15%);
668
650
  --t-fill-color-neutral-090:hsl(0, 0%, 12%);
669
- --t-fill-color-interaction-default:hsl(204, 100%, 35%);
651
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
670
652
  --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
671
653
  --t-fill-color-interaction-active:hsl(204, 80%, 45%);
672
654
  --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
673
655
  --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
674
656
  --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
675
- --t-fill-color-control-primary:hsl(204, 100%, 35%);
657
+ --t-fill-color-control:hsl(204, 100%, 35%);
676
658
  --t-fill-color-control-disabled:hsl(0, 0%, 20%);
677
- --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
659
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
678
660
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
679
661
  --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
680
- --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
662
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
681
663
  --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
682
664
  --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
683
665
  --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
@@ -686,7 +668,7 @@
686
668
  --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
687
669
  --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
688
670
  --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
689
- --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
671
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
690
672
  --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
691
673
  --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
692
674
  --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
@@ -751,43 +733,43 @@
751
733
  --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
752
734
  --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
753
735
  --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
754
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
736
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
755
737
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
756
738
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
757
739
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
758
- --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
759
- --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
760
- --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
761
- --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
762
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
740
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
741
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
742
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
743
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
744
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
763
745
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
764
746
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
765
747
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
766
748
  --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
767
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
749
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
768
750
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
769
751
  --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
770
752
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
771
- --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
772
- --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
773
- --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
774
- --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
775
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
753
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
754
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
755
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
756
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
757
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
776
758
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
777
759
  --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
778
760
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
779
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
761
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
780
762
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
781
763
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
782
- --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
783
- --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
784
- --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
785
- --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
786
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
764
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
765
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
766
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
767
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
768
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
787
769
  --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
788
770
  --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
789
771
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
790
- --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
772
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
791
773
  --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
792
774
  --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
793
775
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
@@ -811,13 +793,13 @@
811
793
  --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
812
794
  --t-surface-color-card:hsl(0, 0%, 12%);
813
795
  --t-surface-color-canvas:hsl(0, 0%, 10%);
814
- --t-border-color-default-base:hsl(0, 0%, 21%);
815
- --t-border-color-default-dark:hsl(0, 0%, 25%);
816
- --t-border-color-default-darker:hsl(0, 0%, 33%);
817
- --t-border-color-default-darkest:hsl(0, 0%, 38%);
818
- --t-border-color-default-disabled:hsl(0, 0%, 21%);
819
- --t-border-color-default-dim:hsl(0, 0%, 16%);
820
- --t-border-color-default-white:hsl(0, 0%, 12%);
796
+ --t-border-color:hsl(0, 0%, 21%);
797
+ --t-border-color-dark:hsl(0, 0%, 25%);
798
+ --t-border-color-darker:hsl(0, 0%, 33%);
799
+ --t-border-color-darkest:hsl(0, 0%, 38%);
800
+ --t-border-color-disabled:hsl(0, 0%, 21%);
801
+ --t-border-color-dim:hsl(0, 0%, 16%);
802
+ --t-border-color-white:hsl(0, 0%, 12%);
821
803
  --t-border-color-status-neutral:hsl(0, 0%, 38%);
822
804
  --t-border-color-status-info:hsl(204, 100%, 35%);
823
805
  --t-border-color-button-neutral:hsl(0, 0%, 19%);
@@ -833,12 +815,12 @@
833
815
  @media (prefers-color-scheme: dark){
834
816
  :root[data-color-mode="system"]{
835
817
  color-scheme:dark;
836
- --t-text-color-default-headline:hsl(0, 0%, 94%);
837
- --t-text-color-default-primary:hsl(0, 0%, 80%);
838
- --t-text-color-default-secondary:hsl(0, 0%, 54%);
839
- --t-text-color-default-disabled:hsl(0, 0%, 25%);
840
- --t-text-color-default-placeholder:hsl(0, 0%, 38%);
841
- --t-text-color-interaction-primary:hsl(204, 68%, 55%);
818
+ --t-text-color-headline:hsl(0, 0%, 94%);
819
+ --t-text-color:hsl(0, 0%, 80%);
820
+ --t-text-color-secondary:hsl(0, 0%, 54%);
821
+ --t-text-color-disabled:hsl(0, 0%, 25%);
822
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
823
+ --t-text-color-interaction:hsl(204, 68%, 55%);
842
824
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
843
825
  --t-text-color-interaction-active:hsl(204, 68%, 45%);
844
826
  --t-text-color-interaction-visited:hsl(204, 68%, 50%);
@@ -869,15 +851,15 @@
869
851
  --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
870
852
  --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
871
853
  --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
872
- --t-icon-color-default-primary:hsl(0, 0%, 80%);
873
- --t-icon-color-default-secondary:hsl(0, 0%, 54%);
874
- --t-icon-color-default-dim:hsl(0, 0%, 38%);
875
- --t-icon-color-default-disabled:hsl(0, 0%, 25%);
876
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
854
+ --t-icon-color:hsl(0, 0%, 80%);
855
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
856
+ --t-icon-color-dim:hsl(0, 0%, 38%);
857
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
858
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
877
859
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
878
860
  --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
879
- --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
880
- --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
861
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
862
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
881
863
  --t-fill-color-neutral-100:hsl(0, 0%, 10%);
882
864
  --t-fill-color-neutral-000:hsl(0, 0%, 98%);
883
865
  --t-fill-color-neutral-010:hsl(0, 0%, 88%);
@@ -890,18 +872,18 @@
890
872
  --t-fill-color-neutral-070:hsl(0, 0%, 17%);
891
873
  --t-fill-color-neutral-080:hsl(0, 0%, 15%);
892
874
  --t-fill-color-neutral-090:hsl(0, 0%, 12%);
893
- --t-fill-color-interaction-default:hsl(204, 100%, 35%);
875
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
894
876
  --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
895
877
  --t-fill-color-interaction-active:hsl(204, 80%, 45%);
896
878
  --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
897
879
  --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
898
880
  --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
899
- --t-fill-color-control-primary:hsl(204, 100%, 35%);
881
+ --t-fill-color-control:hsl(204, 100%, 35%);
900
882
  --t-fill-color-control-disabled:hsl(0, 0%, 20%);
901
- --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
883
+ --t-fill-color-status-neutral:hsl(0, 0%, 24%);
902
884
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
903
885
  --t-fill-color-status-neutral-dim:hsl(0, 0%, 15%);
904
- --t-fill-color-status-info-solid:hsl(204, 100%, 35%);
886
+ --t-fill-color-status-info:hsl(204, 100%, 35%);
905
887
  --t-fill-color-status-info-ghost:hsl(204, 32%, 15%);
906
888
  --t-fill-color-status-info-dim:hsl(206, 22%, 15%);
907
889
  --t-fill-color-status-success-ghost:hsl(125, 17%, 15%);
@@ -910,7 +892,7 @@
910
892
  --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
911
893
  --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
912
894
  --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
913
- --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
895
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
914
896
  --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
915
897
  --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
916
898
  --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
@@ -975,43 +957,43 @@
975
957
  --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
976
958
  --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
977
959
  --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
978
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
960
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
979
961
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
980
962
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
981
963
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
982
- --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
983
- --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
984
- --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
985
- --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
986
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
964
+ --t-fill-color-button-neutral-outline:hsl(0, 0%, 15%);
965
+ --t-fill-color-button-neutral-outline-hover:hsl(0, 0%, 17%);
966
+ --t-fill-color-button-neutral-outline-active:hsl(0, 0%, 19%);
967
+ --t-fill-color-button-neutral-outline-disabled:hsl(0, 0%, 12%);
968
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
987
969
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
988
970
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
989
971
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
990
972
  --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
991
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
973
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
992
974
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
993
975
  --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
994
976
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
995
- --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
996
- --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
997
- --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
998
- --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
999
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
977
+ --t-fill-color-button-interaction-outline:hsl(204, 32%, 15%);
978
+ --t-fill-color-button-interaction-outline-hover:hsl(204, 39%, 17%);
979
+ --t-fill-color-button-interaction-outline-active:hsl(205, 45%, 18%);
980
+ --t-fill-color-button-interaction-outline-disabled:hsl(0, 0%, 12%);
981
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
1000
982
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
1001
983
  --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
1002
984
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
1003
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
985
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
1004
986
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
1005
987
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
1006
- --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
1007
- --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
1008
- --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
1009
- --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
1010
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
988
+ --t-fill-color-button-delete-outline:hsl(8, 20%, 16%);
989
+ --t-fill-color-button-delete-outline-hover:hsl(9, 24%, 17%);
990
+ --t-fill-color-button-delete-outline-active:hsl(9, 29%, 19%);
991
+ --t-fill-color-button-delete-outline-disabled:hsl(0, 0%, 12%);
992
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
1011
993
  --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
1012
994
  --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
1013
995
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
1014
- --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
996
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
1015
997
  --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
1016
998
  --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
1017
999
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
@@ -1035,13 +1017,13 @@
1035
1017
  --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
1036
1018
  --t-surface-color-card:hsl(0, 0%, 12%);
1037
1019
  --t-surface-color-canvas:hsl(0, 0%, 10%);
1038
- --t-border-color-default-base:hsl(0, 0%, 21%);
1039
- --t-border-color-default-dark:hsl(0, 0%, 25%);
1040
- --t-border-color-default-darker:hsl(0, 0%, 33%);
1041
- --t-border-color-default-darkest:hsl(0, 0%, 38%);
1042
- --t-border-color-default-disabled:hsl(0, 0%, 21%);
1043
- --t-border-color-default-dim:hsl(0, 0%, 16%);
1044
- --t-border-color-default-white:hsl(0, 0%, 12%);
1020
+ --t-border-color:hsl(0, 0%, 21%);
1021
+ --t-border-color-dark:hsl(0, 0%, 25%);
1022
+ --t-border-color-darker:hsl(0, 0%, 33%);
1023
+ --t-border-color-darkest:hsl(0, 0%, 38%);
1024
+ --t-border-color-disabled:hsl(0, 0%, 21%);
1025
+ --t-border-color-dim:hsl(0, 0%, 16%);
1026
+ --t-border-color-white:hsl(0, 0%, 12%);
1045
1027
  --t-border-color-status-neutral:hsl(0, 0%, 38%);
1046
1028
  --t-border-color-status-info:hsl(204, 100%, 35%);
1047
1029
  --t-border-color-button-neutral:hsl(0, 0%, 19%);
@@ -1055,6 +1037,114 @@
1055
1037
  }
1056
1038
  }
1057
1039
 
1040
+ :root{
1041
+ --t-border-size-default:var(--t-border-width);
1042
+ --t-border-size-thick:var(--t-border-width-thick);
1043
+ --t-font-weight-semi-bold:var(--t-font-weight-semibold);
1044
+ --t-icon-color-status-neutral-dark:var(--t-icon-color-status-neutral-bold);
1045
+ --t-icon-color-status-info-secondary:var(--t-icon-color-status-info);
1046
+ --t-fill-color-status-neutral-solid:var(--t-fill-color-status-neutral);
1047
+ --t-fill-color-status-info-solid:var(--t-fill-color-status-info);
1048
+ --t-fill-color-status-success-solid:var(--t-fill-color-status-success);
1049
+ --t-fill-color-status-warning-solid:var(--t-fill-color-status-warning);
1050
+ --t-fill-color-status-error-solid:var(--t-fill-color-status-error);
1051
+ --t-fill-color-alert-info:hsl(204, 94%, 49%);
1052
+ --t-fill-color-alert-success:hsl(122, 60%, 41%);
1053
+ --t-fill-color-alert-warning:hsl(43, 96%, 58%);
1054
+ --t-fill-color-alert-error:hsl(4, 77%, 59%);
1055
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 98%);
1056
+ --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline);
1057
+ --t-fill-color-button-neutral-outline-dim-hover:var(--t-fill-color-button-neutral-outline-hover);
1058
+ --t-fill-color-button-neutral-outline-dim-active:var(--t-fill-color-button-neutral-outline-active);
1059
+ --t-fill-color-button-neutral-outline-dim-disabled:var(--t-fill-color-button-neutral-outline-disabled);
1060
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 98%);
1061
+ --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline);
1062
+ --t-fill-color-button-interaction-outline-dim-hover:var(--t-fill-color-button-interaction-outline-hover);
1063
+ --t-fill-color-button-interaction-outline-dim-active:var(--t-fill-color-button-interaction-outline-active);
1064
+ --t-fill-color-button-interaction-outline-dim-disabled:var(--t-fill-color-button-interaction-outline-disabled);
1065
+ --t-fill-color-button-create-solid-default:hsl(96, 57%, 33%);
1066
+ --t-fill-color-button-create-solid-hover:hsl(97, 57%, 28%);
1067
+ --t-fill-color-button-create-solid-active:hsl(97, 57%, 23%);
1068
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 81%);
1069
+ --t-fill-color-button-create-ghost-default:hsla(0, 0%, 100%, 0);
1070
+ --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
1071
+ --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
1072
+ --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
1073
+ --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline);
1074
+ --t-fill-color-button-delete-outline-dim-hover:var(--t-fill-color-button-delete-outline-hover);
1075
+ --t-fill-color-button-delete-outline-dim-active:var(--t-fill-color-button-delete-outline-active);
1076
+ --t-fill-color-button-delete-outline-dim-disabled:var(--t-fill-color-button-delete-outline-disabled);
1077
+ }
1078
+
1079
+ :root{
1080
+ --t-border-color-default-base:var(--t-border-color);
1081
+ --t-border-color-default-dark:var(--t-border-color-dark);
1082
+ --t-border-color-default-darker:var(--t-border-color-darker);
1083
+ --t-border-color-default-darkest:var(--t-border-color-darkest);
1084
+ --t-border-color-default-dim:var(--t-border-color-dim);
1085
+ --t-border-color-default-disabled:var(--t-border-color-disabled);
1086
+ --t-border-color-default-white:var(--t-border-color-white);
1087
+ --t-border-radius-default:var(--t-border-radius);
1088
+ --t-border-width-default:var(--t-border-width);
1089
+ --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
1090
+ --t-fill-color-button-delete-outline-default:var(--t-fill-color-button-delete-outline);
1091
+ --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
1092
+ --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
1093
+ --t-fill-color-button-interaction-outline-default:var(--t-fill-color-button-interaction-outline);
1094
+ --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
1095
+ --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
1096
+ --t-fill-color-button-neutral-outline-default:var(--t-fill-color-button-neutral-outline);
1097
+ --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
1098
+ --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
1099
+ --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
1100
+ --t-fill-color-control-primary:var(--t-fill-color-control);
1101
+ --t-fill-color-interaction-default:var(--t-fill-color-interaction);
1102
+ --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
1103
+ --t-fill-color-status-error-primary:var(--t-fill-color-status-error);
1104
+ --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
1105
+ --t-icon-color-default-dim:var(--t-icon-color-dim);
1106
+ --t-icon-color-default-disabled:var(--t-icon-color-disabled);
1107
+ --t-icon-color-default-inverted:var(--t-icon-color-inverted);
1108
+ --t-icon-color-default-primary:var(--t-icon-color);
1109
+ --t-icon-color-default-secondary:var(--t-icon-color-secondary);
1110
+ --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
1111
+ --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
1112
+ --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
1113
+ --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
1114
+ --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
1115
+ --t-text-color-default-disabled:var(--t-text-color-disabled);
1116
+ --t-text-color-default-headline:var(--t-text-color-headline);
1117
+ --t-text-color-default-inverted:var(--t-text-color-inverted);
1118
+ --t-text-color-default-placeholder:var(--t-text-color-placeholder);
1119
+ --t-text-color-default-primary:var(--t-text-color);
1120
+ --t-text-color-default-secondary:var(--t-text-color-secondary);
1121
+ --t-text-color-interaction-primary:var(--t-text-color-interaction);
1122
+ }
1123
+
1124
+ :root[data-color-mode="dark"]{
1125
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
1126
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
1127
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
1128
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
1129
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
1130
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
1131
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
1132
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
1133
+ }
1134
+
1135
+ @media (prefers-color-scheme: dark){
1136
+ :root[data-color-mode="system"]{
1137
+ --t-fill-color-button-neutral-ghost-disabled-solid:hsl(0, 0%, 100%);
1138
+ --t-fill-color-button-neutral-outline-dim-disabled-solid:hsl(0, 0%, 100%);
1139
+ --t-fill-color-button-create-solid-default:hsl(0, 0%, 25%);
1140
+ --t-fill-color-button-create-solid-hover:hsl(0, 0%, 25%);
1141
+ --t-fill-color-button-create-solid-active:hsl(0, 0%, 25%);
1142
+ --t-fill-color-button-create-solid-disabled:hsl(0, 0%, 25%);
1143
+ --t-fill-color-button-create-ghost-hover:hsla(0, 0%, 100%, 0);
1144
+ --t-fill-color-button-create-ghost-active:hsla(0, 0%, 100%, 0);
1145
+ }
1146
+ }
1147
+
1058
1148
  @layer t-critical{
1059
1149
  tds-page-header:not(.hydrated){
1060
1150
  display:none;
@@ -2082,11 +2172,12 @@ a[class="tds-btn"]{
2082
2172
  }
2083
2173
 
2084
2174
  .tds-btn--dropdown .suffix{
2175
+ transform:rotate(180deg);
2085
2176
  transition:transform .2s ease-in-out;
2086
2177
  }
2087
2178
 
2088
2179
  .tds-btn--dropdown[aria-expanded="true"] .suffix{
2089
- transform:rotate(-180deg);
2180
+ transform:rotate(0deg);
2090
2181
  }
2091
2182
 
2092
2183
  .tds-btn--full-width{
@@ -2144,23 +2235,23 @@ a[class="tds-btn"]{
2144
2235
 
2145
2236
  .t-banner{
2146
2237
  --t-banner-font-size:var(--t-font-size-md);
2147
- --t-banner-font-color:var(--t-text-color-default-primary);
2238
+ --t-banner-font-color:var(--t-text-color);
2148
2239
  --t-banner-background-color:var(--t-fill-color-status-neutral-ghost);
2149
2240
  --t-banner-spacing:var(--t-spacing-2);
2150
2241
  --t-banner-border-radius:var(--t-border-radius-md);
2151
- --t-banner-title-font-color:var(--t-text-color-default-headline);
2242
+ --t-banner-title-font-color:var(--t-text-color-headline);
2152
2243
  --t-banner-title-font-size:var(--t-font-size-md);
2153
2244
  --t-banner-title-font-weight:var(--t-font-weight-semibold);
2154
2245
  --t-banner-icon-fill-color:hsla(0, 0%, 0%, 0);
2155
2246
  --t-banner-background-color-info:var(--t-fill-color-status-info-ghost);
2156
- --t-banner-icon-fill-color-info:var(--t-icon-color-status-info-primary);
2247
+ --t-banner-icon-fill-color-info:var(--t-icon-color-status-info);
2157
2248
  --t-banner-background-color-warning:var(--t-fill-color-status-warning-ghost);
2158
- --t-banner-icon-fill-color-warning:var(--t-icon-color-status-warning-primary);
2249
+ --t-banner-icon-fill-color-warning:var(--t-icon-color-status-warning);
2159
2250
  --t-banner-background-color-error:var(--t-fill-color-status-error-ghost);
2160
- --t-banner-icon-fill-color-error:var(--t-icon-color-status-error-primary);
2251
+ --t-banner-icon-fill-color-error:var(--t-icon-color-status-error);
2161
2252
  --t-banner-background-color-success:var(--t-fill-color-status-success-ghost);
2162
- --t-banner-icon-fill-color-success:var(--t-icon-color-status-success-primary);
2163
- --t-banner-link-font-color-hover:var(--t-text-color-default-headline);
2253
+ --t-banner-icon-fill-color-success:var(--t-icon-color-status-success);
2254
+ --t-banner-link-font-color-hover:var(--t-text-color-headline);
2164
2255
  display:flex;
2165
2256
  gap:var(--t-banner-spacing);
2166
2257
  padding:var(--t-banner-spacing);