@planningcenter/tapestry 2.6.0-rc.1 → 2.6.1-rc.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 (20) hide show
  1. package/dist/deprecated.css +42 -1
  2. package/dist/index.css +159 -118
  3. package/dist/index.css.map +1 -1
  4. package/dist/reactRender.css +556 -515
  5. package/dist/reactRender.css.map +1 -1
  6. package/dist/reactRenderLegacy.css +556 -515
  7. package/dist/reactRenderLegacy.css.map +1 -1
  8. package/dist/tokens/ts/react-native-tokens.d.ts +41 -41
  9. package/dist/tokens/ts/react-native-tokens.d.ts.map +1 -1
  10. package/dist/tokens/ts/react-native-tokens.js +41 -41
  11. package/dist/tokens/ts/react-native-tokens.js.map +1 -1
  12. package/dist/tokens/ts/tokens.d.ts +41 -41
  13. package/dist/tokens/ts/tokens.js +41 -41
  14. package/dist/tokens/ts/tokens.js.map +1 -1
  15. package/dist/tokens-dark.css +66 -66
  16. package/dist/tokens.css +159 -118
  17. package/dist/tokens.css.map +1 -1
  18. package/dist/unstable.css +166 -125
  19. package/dist/unstable.css.map +1 -1
  20. package/package.json +3 -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;
@@ -224,13 +224,13 @@
224
224
  --t-avatar-size-48:48px;
225
225
  --t-avatar-size-72:72px;
226
226
  --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%);
227
+ --t-text-color-headline:hsl(0, 0%, 12%);
228
+ --t-text-color:hsl(0, 0%, 24%);
229
+ --t-text-color-secondary:hsl(0, 0%, 42%);
230
+ --t-text-color-disabled:hsl(0, 0%, 81%);
231
+ --t-text-color-placeholder:hsl(0, 0%, 58%);
232
+ --t-text-color-inverted:hsl(0, 0%, 100%);
233
+ --t-text-color-interaction:hsl(204, 100%, 40%);
234
234
  --t-text-color-interaction-hover:hsl(204, 100%, 35%);
235
235
  --t-text-color-interaction-active:hsl(204, 100%, 30%);
236
236
  --t-text-color-interaction-visited:hsl(204, 100%, 30%);
@@ -261,19 +261,19 @@
261
261
  --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
262
262
  --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
263
263
  --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%);
264
+ --t-icon-color:hsl(0, 0%, 24%);
265
+ --t-icon-color-secondary:hsl(0, 0%, 42%);
266
+ --t-icon-color-dim:hsl(0, 0%, 58%);
267
+ --t-icon-color-disabled:hsl(0, 0%, 81%);
268
+ --t-icon-color-inverted:hsl(0, 0%, 100%);
269
+ --t-icon-color-status-neutral:hsl(0, 0%, 42%);
270
270
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 58%);
271
271
  --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%);
272
+ --t-icon-color-status-info:hsl(204, 100%, 40%);
273
+ --t-icon-color-status-success:hsl(96, 57%, 33%);
274
274
  --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%);
275
+ --t-icon-color-status-warning:hsl(42, 84%, 49%);
276
+ --t-icon-color-status-error:hsl(8, 60%, 47%);
277
277
  --t-fill-color-neutral-100:hsl(0, 0%, 100%);
278
278
  --t-fill-color-neutral-000:hsl(0, 0%, 12%);
279
279
  --t-fill-color-neutral-010:hsl(0, 0%, 24%);
@@ -286,13 +286,13 @@
286
286
  --t-fill-color-neutral-070:hsl(0, 0%, 95%);
287
287
  --t-fill-color-neutral-080:hsl(0, 0%, 97%);
288
288
  --t-fill-color-neutral-090:hsl(0, 0%, 98%);
289
- --t-fill-color-interaction-default:hsl(204, 100%, 40%);
289
+ --t-fill-color-interaction:hsl(204, 100%, 40%);
290
290
  --t-fill-color-interaction-hover:hsl(204, 100%, 35%);
291
291
  --t-fill-color-interaction-active:hsl(204, 100%, 30%);
292
292
  --t-fill-color-interaction-disabled:hsl(0, 0%, 81%);
293
293
  --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
294
294
  --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
295
- --t-fill-color-control-primary:hsl(204, 100%, 40%);
295
+ --t-fill-color-control:hsl(204, 100%, 40%);
296
296
  --t-fill-color-control-secondary:hsl(97, 57%, 40%);
297
297
  --t-fill-color-control-error:hsl(8, 60%, 47%);
298
298
  --t-fill-color-control-disabled:hsl(0, 0%, 81%);
@@ -311,7 +311,7 @@
311
311
  --t-fill-color-status-error-solid:hsl(8, 60%, 47%);
312
312
  --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
313
313
  --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
314
- --t-fill-color-tooltip-primary:hsla(0, 0%, 12%, 0.9);
314
+ --t-fill-color-tooltip:hsla(0, 0%, 12%, 0.9);
315
315
  --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
316
316
  --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
317
317
  --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
@@ -392,7 +392,7 @@
392
392
  --t-fill-color-product-services-060:hsl(89, 62%, 31%);
393
393
  --t-fill-color-product-services-070:hsl(89, 62%, 26%);
394
394
  --t-fill-color-product-services-080:hsl(89, 63%, 21%);
395
- --t-fill-color-product-staff-base:hsl(328, 100%, 45%);
395
+ --t-fill-color-product-staff:hsl(328, 100%, 45%);
396
396
  --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
397
397
  --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
398
398
  --t-fill-color-product-accounts-gradient-brand:linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
@@ -472,47 +472,47 @@
472
472
  --t-fill-color-tag-indigo-020:hsl(233, 79%, 87%);
473
473
  --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
474
474
  --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
475
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 93%);
475
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 93%);
476
476
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
477
477
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
478
478
  --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);
479
+ --t-fill-color-button-neutral-outline-dim:hsla(0, 0%, 100%, 0);
480
480
  --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 95%);
481
481
  --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 93%);
482
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);
483
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 100%, 0);
484
484
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
485
485
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
486
486
  --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);
487
+ --t-fill-color-button-neutral-responsive-header:hsla(0, 0%, 0%, 0.1);
488
488
  --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
489
489
  --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
490
490
  --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%);
491
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 40%);
492
492
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
493
493
  --t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
494
494
  --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);
495
+ --t-fill-color-button-interaction-outline-dim:hsla(0, 0%, 100%, 0);
496
496
  --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 100%, 97%);
497
497
  --t-fill-color-button-interaction-outline-dim-active:hsl(203, 94%, 94%);
498
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);
499
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 100%, 0);
500
500
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
501
501
  --t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
502
502
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 100%, 0);
503
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 47%);
503
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 47%);
504
504
  --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
505
505
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
506
506
  --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);
507
+ --t-fill-color-button-delete-outline-dim:hsla(0, 0%, 100%, 0);
508
508
  --t-fill-color-button-delete-outline-dim-hover:hsl(7, 60%, 97%);
509
509
  --t-fill-color-button-delete-outline-dim-active:hsl(9, 59%, 93%);
510
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);
511
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 100%, 0);
512
512
  --t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
513
513
  --t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
514
514
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
515
- --t-fill-color-button-pill-default:hsl(0, 0%, 93%);
515
+ --t-fill-color-button-pill:hsl(0, 0%, 93%);
516
516
  --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
517
517
  --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
518
518
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
@@ -545,13 +545,13 @@
545
545
  --t-fill-color-transparency-dark-static-090:hsla(0, 0%, 0%, 0.9);
546
546
  --t-surface-color-card:hsl(0, 0%, 100%);
547
547
  --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%);
548
+ --t-border-color:hsl(0, 0%, 88%);
549
+ --t-border-color-dark:hsl(0, 0%, 81%);
550
+ --t-border-color-darker:hsl(0, 0%, 68%);
551
+ --t-border-color-darkest:hsl(0, 0%, 58%);
552
+ --t-border-color-disabled:hsl(0, 0%, 88%);
553
+ --t-border-color-dim:hsl(0, 0%, 95%);
554
+ --t-border-color-white:hsl(0, 0%, 100%);
555
555
  --t-border-color-status-neutral:hsl(0, 0%, 58%);
556
556
  --t-border-color-status-info:hsl(204, 100%, 40%);
557
557
  --t-border-color-status-success:hsl(97, 57%, 40%);
@@ -572,21 +572,21 @@
572
572
  --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
573
573
  --t-form-background-color-error:var(--t-fill-color-neutral-100);
574
574
  --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);
575
+ --t-form-border-color:var(--t-border-color);
576
+ --t-form-border-color-disabled:var(--t-border-color);
577
577
  --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);
578
+ --t-form-border-color-focus:var(--t-fill-color-interaction);
579
+ --t-form-border-color-hover:var(--t-border-color-dark);
580
580
  --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
581
581
  --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);
582
+ --t-form-border-width:var(--t-border-width);
583
+ --t-form-font-color:var(--t-text-color);
584
+ --t-form-font-color-disabled:var(--t-text-color-disabled);
585
585
  --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);
586
+ --t-form-font-color-readonly:var(--t-text-color);
587
+ --t-form-picker-icon-color:var(--t-icon-color);
588
+ --t-form-placeholder-color:var(--t-text-color-placeholder);
589
+ --t-border-size-default:var(--t-border-width);
590
590
  --t-border-size-thick:var(--t-border-width-thick);
591
591
  --t-font-weight-semi-bold:var(--t-font-weight-semibold);
592
592
  --t-icon-color-status-neutral-dark:hsl(0, 0%, 24%);
@@ -605,16 +605,57 @@
605
605
  --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
606
606
  --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
607
607
  --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
608
+ --t-border-color-default-base:var(--t-border-color);
609
+ --t-border-color-default-dark:var(--t-border-color-dark);
610
+ --t-border-color-default-darker:var(--t-border-color-darker);
611
+ --t-border-color-default-darkest:var(--t-border-color-darkest);
612
+ --t-border-color-default-dim:var(--t-border-color-dim);
613
+ --t-border-color-default-disabled:var(--t-border-color-disabled);
614
+ --t-border-color-default-white:var(--t-border-color-white);
615
+ --t-border-radius-default:var(--t-border-radius);
616
+ --t-border-width-default:var(--t-border-width);
617
+ --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
618
+ --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline-dim);
619
+ --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
620
+ --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
621
+ --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline-dim);
622
+ --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
623
+ --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
624
+ --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline-dim);
625
+ --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
626
+ --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
627
+ --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
628
+ --t-fill-color-control-primary:var(--t-fill-color-control);
629
+ --t-fill-color-interaction-default:var(--t-fill-color-interaction);
630
+ --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
631
+ --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
632
+ --t-icon-color-default-dim:var(--t-icon-color-dim);
633
+ --t-icon-color-default-disabled:var(--t-icon-color-disabled);
634
+ --t-icon-color-default-inverted:var(--t-icon-color-inverted);
635
+ --t-icon-color-default-primary:var(--t-icon-color);
636
+ --t-icon-color-default-secondary:var(--t-icon-color-secondary);
637
+ --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
638
+ --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
639
+ --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
640
+ --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
641
+ --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
642
+ --t-text-color-default-disabled:var(--t-text-color-disabled);
643
+ --t-text-color-default-headline:var(--t-text-color-headline);
644
+ --t-text-color-default-inverted:var(--t-text-color-inverted);
645
+ --t-text-color-default-placeholder:var(--t-text-color-placeholder);
646
+ --t-text-color-default-primary:var(--t-text-color);
647
+ --t-text-color-default-secondary:var(--t-text-color-secondary);
648
+ --t-text-color-interaction-primary:var(--t-text-color-interaction);
608
649
  }
609
650
 
610
651
  :root[data-color-mode="dark"]{
611
652
  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%);
653
+ --t-text-color-headline:hsl(0, 0%, 94%);
654
+ --t-text-color:hsl(0, 0%, 80%);
655
+ --t-text-color-secondary:hsl(0, 0%, 54%);
656
+ --t-text-color-disabled:hsl(0, 0%, 25%);
657
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
658
+ --t-text-color-interaction:hsl(204, 68%, 55%);
618
659
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
619
660
  --t-text-color-interaction-active:hsl(204, 68%, 45%);
620
661
  --t-text-color-interaction-visited:hsl(204, 68%, 50%);
@@ -645,15 +686,15 @@
645
686
  --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
646
687
  --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
647
688
  --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%);
689
+ --t-icon-color:hsl(0, 0%, 80%);
690
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
691
+ --t-icon-color-dim:hsl(0, 0%, 38%);
692
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
693
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
653
694
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
654
695
  --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%);
696
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
697
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
657
698
  --t-fill-color-neutral-100:hsl(0, 0%, 10%);
658
699
  --t-fill-color-neutral-000:hsl(0, 0%, 98%);
659
700
  --t-fill-color-neutral-010:hsl(0, 0%, 88%);
@@ -666,13 +707,13 @@
666
707
  --t-fill-color-neutral-070:hsl(0, 0%, 17%);
667
708
  --t-fill-color-neutral-080:hsl(0, 0%, 15%);
668
709
  --t-fill-color-neutral-090:hsl(0, 0%, 12%);
669
- --t-fill-color-interaction-default:hsl(204, 100%, 35%);
710
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
670
711
  --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
671
712
  --t-fill-color-interaction-active:hsl(204, 80%, 45%);
672
713
  --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
673
714
  --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
674
715
  --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
675
- --t-fill-color-control-primary:hsl(204, 100%, 35%);
716
+ --t-fill-color-control:hsl(204, 100%, 35%);
676
717
  --t-fill-color-control-disabled:hsl(0, 0%, 20%);
677
718
  --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
678
719
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
@@ -686,7 +727,7 @@
686
727
  --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
687
728
  --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
688
729
  --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
689
- --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
730
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
690
731
  --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
691
732
  --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
692
733
  --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 +792,43 @@
751
792
  --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
752
793
  --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
753
794
  --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
754
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
795
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
755
796
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
756
797
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
757
798
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
758
- --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
799
+ --t-fill-color-button-neutral-outline-dim:hsl(0, 0%, 15%);
759
800
  --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
760
801
  --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
761
802
  --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);
803
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
763
804
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
764
805
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
765
806
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
766
807
  --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%);
808
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
768
809
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
769
810
  --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
770
811
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
771
- --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
812
+ --t-fill-color-button-interaction-outline-dim:hsl(204, 32%, 15%);
772
813
  --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
773
814
  --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
774
815
  --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);
816
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
776
817
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
777
818
  --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
778
819
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
779
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
820
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
780
821
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
781
822
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
782
- --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
823
+ --t-fill-color-button-delete-outline-dim:hsl(8, 20%, 16%);
783
824
  --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
784
825
  --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
785
826
  --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);
827
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
787
828
  --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
788
829
  --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
789
830
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
790
- --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
831
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
791
832
  --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
792
833
  --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
793
834
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
@@ -811,13 +852,13 @@
811
852
  --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
812
853
  --t-surface-color-card:hsl(0, 0%, 12%);
813
854
  --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%);
855
+ --t-border-color:hsl(0, 0%, 21%);
856
+ --t-border-color-dark:hsl(0, 0%, 25%);
857
+ --t-border-color-darker:hsl(0, 0%, 33%);
858
+ --t-border-color-darkest:hsl(0, 0%, 38%);
859
+ --t-border-color-disabled:hsl(0, 0%, 21%);
860
+ --t-border-color-dim:hsl(0, 0%, 16%);
861
+ --t-border-color-white:hsl(0, 0%, 12%);
821
862
  --t-border-color-status-neutral:hsl(0, 0%, 38%);
822
863
  --t-border-color-status-info:hsl(204, 100%, 35%);
823
864
  --t-border-color-button-neutral:hsl(0, 0%, 19%);
@@ -833,12 +874,12 @@
833
874
  @media (prefers-color-scheme: dark){
834
875
  :root[data-color-mode="system"]{
835
876
  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%);
877
+ --t-text-color-headline:hsl(0, 0%, 94%);
878
+ --t-text-color:hsl(0, 0%, 80%);
879
+ --t-text-color-secondary:hsl(0, 0%, 54%);
880
+ --t-text-color-disabled:hsl(0, 0%, 25%);
881
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
882
+ --t-text-color-interaction:hsl(204, 68%, 55%);
842
883
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
843
884
  --t-text-color-interaction-active:hsl(204, 68%, 45%);
844
885
  --t-text-color-interaction-visited:hsl(204, 68%, 50%);
@@ -869,15 +910,15 @@
869
910
  --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
870
911
  --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
871
912
  --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%);
913
+ --t-icon-color:hsl(0, 0%, 80%);
914
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
915
+ --t-icon-color-dim:hsl(0, 0%, 38%);
916
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
917
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
877
918
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
878
919
  --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%);
920
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
921
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
881
922
  --t-fill-color-neutral-100:hsl(0, 0%, 10%);
882
923
  --t-fill-color-neutral-000:hsl(0, 0%, 98%);
883
924
  --t-fill-color-neutral-010:hsl(0, 0%, 88%);
@@ -890,13 +931,13 @@
890
931
  --t-fill-color-neutral-070:hsl(0, 0%, 17%);
891
932
  --t-fill-color-neutral-080:hsl(0, 0%, 15%);
892
933
  --t-fill-color-neutral-090:hsl(0, 0%, 12%);
893
- --t-fill-color-interaction-default:hsl(204, 100%, 35%);
934
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
894
935
  --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
895
936
  --t-fill-color-interaction-active:hsl(204, 80%, 45%);
896
937
  --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
897
938
  --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
898
939
  --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
899
- --t-fill-color-control-primary:hsl(204, 100%, 35%);
940
+ --t-fill-color-control:hsl(204, 100%, 35%);
900
941
  --t-fill-color-control-disabled:hsl(0, 0%, 20%);
901
942
  --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
902
943
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
@@ -910,7 +951,7 @@
910
951
  --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
911
952
  --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
912
953
  --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
913
- --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
954
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
914
955
  --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
915
956
  --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
916
957
  --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 +1016,43 @@
975
1016
  --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
976
1017
  --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
977
1018
  --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
978
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
1019
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
979
1020
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
980
1021
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
981
1022
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
982
- --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
1023
+ --t-fill-color-button-neutral-outline-dim:hsl(0, 0%, 15%);
983
1024
  --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
984
1025
  --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
985
1026
  --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);
1027
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
987
1028
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
988
1029
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
989
1030
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
990
1031
  --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%);
1032
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
992
1033
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
993
1034
  --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
994
1035
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
995
- --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
1036
+ --t-fill-color-button-interaction-outline-dim:hsl(204, 32%, 15%);
996
1037
  --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
997
1038
  --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
998
1039
  --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);
1040
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
1000
1041
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
1001
1042
  --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
1002
1043
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
1003
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
1044
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
1004
1045
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
1005
1046
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
1006
- --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
1047
+ --t-fill-color-button-delete-outline-dim:hsl(8, 20%, 16%);
1007
1048
  --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
1008
1049
  --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
1009
1050
  --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);
1051
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
1011
1052
  --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
1012
1053
  --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
1013
1054
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
1014
- --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
1055
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
1015
1056
  --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
1016
1057
  --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
1017
1058
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
@@ -1035,13 +1076,13 @@
1035
1076
  --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
1036
1077
  --t-surface-color-card:hsl(0, 0%, 12%);
1037
1078
  --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%);
1079
+ --t-border-color:hsl(0, 0%, 21%);
1080
+ --t-border-color-dark:hsl(0, 0%, 25%);
1081
+ --t-border-color-darker:hsl(0, 0%, 33%);
1082
+ --t-border-color-darkest:hsl(0, 0%, 38%);
1083
+ --t-border-color-disabled:hsl(0, 0%, 21%);
1084
+ --t-border-color-dim:hsl(0, 0%, 16%);
1085
+ --t-border-color-white:hsl(0, 0%, 12%);
1045
1086
  --t-border-color-status-neutral:hsl(0, 0%, 38%);
1046
1087
  --t-border-color-status-info:hsl(204, 100%, 35%);
1047
1088
  --t-border-color-button-neutral:hsl(0, 0%, 19%);
@@ -2144,23 +2185,23 @@ a[class="tds-btn"]{
2144
2185
 
2145
2186
  .t-banner{
2146
2187
  --t-banner-font-size:var(--t-font-size-md);
2147
- --t-banner-font-color:var(--t-text-color-default-primary);
2188
+ --t-banner-font-color:var(--t-text-color);
2148
2189
  --t-banner-background-color:var(--t-fill-color-status-neutral-ghost);
2149
2190
  --t-banner-spacing:var(--t-spacing-2);
2150
2191
  --t-banner-border-radius:var(--t-border-radius-md);
2151
- --t-banner-title-font-color:var(--t-text-color-default-headline);
2192
+ --t-banner-title-font-color:var(--t-text-color-headline);
2152
2193
  --t-banner-title-font-size:var(--t-font-size-md);
2153
2194
  --t-banner-title-font-weight:var(--t-font-weight-semibold);
2154
2195
  --t-banner-icon-fill-color:hsla(0, 0%, 0%, 0);
2155
2196
  --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);
2197
+ --t-banner-icon-fill-color-info:var(--t-icon-color-status-info);
2157
2198
  --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);
2199
+ --t-banner-icon-fill-color-warning:var(--t-icon-color-status-warning);
2159
2200
  --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);
2201
+ --t-banner-icon-fill-color-error:var(--t-icon-color-status-error);
2161
2202
  --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);
2203
+ --t-banner-icon-fill-color-success:var(--t-icon-color-status-success);
2204
+ --t-banner-link-font-color-hover:var(--t-text-color-headline);
2164
2205
  display:flex;
2165
2206
  gap:var(--t-banner-spacing);
2166
2207
  padding:var(--t-banner-spacing);