@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/tokens.css CHANGED
@@ -4,8 +4,8 @@
4
4
  --t-border-radius-lg:8px;
5
5
  --t-border-radius-xl:16px;
6
6
  --t-border-radius-round:56px;
7
- --t-border-radius-default:4px;
8
- --t-border-width-default:1px;
7
+ --t-border-radius:4px;
8
+ --t-border-width:1px;
9
9
  --t-border-width-thick:2px;
10
10
  --t-spacing-1:8px;
11
11
  --t-spacing-2:16px;
@@ -47,13 +47,13 @@
47
47
  --t-avatar-size-48:48px;
48
48
  --t-avatar-size-72:72px;
49
49
  --t-avatar-size-112:112px;
50
- --t-text-color-default-headline:hsl(0, 0%, 12%);
51
- --t-text-color-default-primary:hsl(0, 0%, 24%);
52
- --t-text-color-default-secondary:hsl(0, 0%, 42%);
53
- --t-text-color-default-disabled:hsl(0, 0%, 81%);
54
- --t-text-color-default-placeholder:hsl(0, 0%, 58%);
55
- --t-text-color-default-inverted:hsl(0, 0%, 100%);
56
- --t-text-color-interaction-primary:hsl(204, 100%, 40%);
50
+ --t-text-color-headline:hsl(0, 0%, 12%);
51
+ --t-text-color:hsl(0, 0%, 24%);
52
+ --t-text-color-secondary:hsl(0, 0%, 42%);
53
+ --t-text-color-disabled:hsl(0, 0%, 81%);
54
+ --t-text-color-placeholder:hsl(0, 0%, 58%);
55
+ --t-text-color-inverted:hsl(0, 0%, 100%);
56
+ --t-text-color-interaction:hsl(204, 100%, 40%);
57
57
  --t-text-color-interaction-hover:hsl(204, 100%, 35%);
58
58
  --t-text-color-interaction-active:hsl(204, 100%, 30%);
59
59
  --t-text-color-interaction-visited:hsl(204, 100%, 30%);
@@ -84,19 +84,19 @@
84
84
  --t-text-color-tag-bold-pink:hsl(327, 88%, 20%);
85
85
  --t-text-color-tag-bold-purple:hsl(268, 71%, 27%);
86
86
  --t-text-color-tag-bold-magenta:hsl(285, 71%, 20%);
87
- --t-icon-color-default-primary:hsl(0, 0%, 24%);
88
- --t-icon-color-default-secondary:hsl(0, 0%, 42%);
89
- --t-icon-color-default-dim:hsl(0, 0%, 58%);
90
- --t-icon-color-default-disabled:hsl(0, 0%, 81%);
91
- --t-icon-color-default-inverted:hsl(0, 0%, 100%);
92
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 42%);
87
+ --t-icon-color:hsl(0, 0%, 24%);
88
+ --t-icon-color-secondary:hsl(0, 0%, 42%);
89
+ --t-icon-color-dim:hsl(0, 0%, 58%);
90
+ --t-icon-color-disabled:hsl(0, 0%, 81%);
91
+ --t-icon-color-inverted:hsl(0, 0%, 100%);
92
+ --t-icon-color-status-neutral:hsl(0, 0%, 42%);
93
93
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 58%);
94
94
  --t-icon-color-status-neutral-bold:hsl(0, 0%, 24%);
95
- --t-icon-color-status-info-primary:hsl(204, 100%, 40%);
96
- --t-icon-color-status-success-primary:hsl(96, 57%, 33%);
95
+ --t-icon-color-status-info:hsl(204, 100%, 40%);
96
+ --t-icon-color-status-success:hsl(96, 57%, 33%);
97
97
  --t-icon-color-status-success-secondary:hsl(97, 57%, 40%);
98
- --t-icon-color-status-warning-primary:hsl(42, 84%, 49%);
99
- --t-icon-color-status-error-primary:hsl(8, 60%, 47%);
98
+ --t-icon-color-status-warning:hsl(42, 84%, 49%);
99
+ --t-icon-color-status-error:hsl(8, 60%, 47%);
100
100
  --t-fill-color-neutral-100:hsl(0, 0%, 100%);
101
101
  --t-fill-color-neutral-000:hsl(0, 0%, 12%);
102
102
  --t-fill-color-neutral-010:hsl(0, 0%, 24%);
@@ -109,13 +109,13 @@
109
109
  --t-fill-color-neutral-070:hsl(0, 0%, 95%);
110
110
  --t-fill-color-neutral-080:hsl(0, 0%, 97%);
111
111
  --t-fill-color-neutral-090:hsl(0, 0%, 98%);
112
- --t-fill-color-interaction-default:hsl(204, 100%, 40%);
112
+ --t-fill-color-interaction:hsl(204, 100%, 40%);
113
113
  --t-fill-color-interaction-hover:hsl(204, 100%, 35%);
114
114
  --t-fill-color-interaction-active:hsl(204, 100%, 30%);
115
115
  --t-fill-color-interaction-disabled:hsl(0, 0%, 81%);
116
116
  --t-fill-color-control-neutral-off:hsl(0, 0%, 58%);
117
117
  --t-fill-color-control-neutral-on:hsl(0, 0%, 24%);
118
- --t-fill-color-control-primary:hsl(204, 100%, 40%);
118
+ --t-fill-color-control:hsl(204, 100%, 40%);
119
119
  --t-fill-color-control-secondary:hsl(97, 57%, 40%);
120
120
  --t-fill-color-control-error:hsl(8, 60%, 47%);
121
121
  --t-fill-color-control-disabled:hsl(0, 0%, 81%);
@@ -134,7 +134,7 @@
134
134
  --t-fill-color-status-error-solid:hsl(8, 60%, 47%);
135
135
  --t-fill-color-status-error-ghost:hsl(9, 59%, 93%);
136
136
  --t-fill-color-status-error-dim:hsl(7, 60%, 97%);
137
- --t-fill-color-tooltip-primary:hsla(0, 0%, 12%, 0.9);
137
+ --t-fill-color-tooltip:hsla(0, 0%, 12%, 0.9);
138
138
  --t-fill-color-product-accounts-010:hsl(212, 54%, 93%);
139
139
  --t-fill-color-product-accounts-020:hsl(209, 53%, 90%);
140
140
  --t-fill-color-product-accounts-030:hsl(210, 56%, 70%);
@@ -215,7 +215,7 @@
215
215
  --t-fill-color-product-services-060:hsl(89, 62%, 31%);
216
216
  --t-fill-color-product-services-070:hsl(89, 62%, 26%);
217
217
  --t-fill-color-product-services-080:hsl(89, 63%, 21%);
218
- --t-fill-color-product-staff-base:hsl(328, 100%, 45%);
218
+ --t-fill-color-product-staff:hsl(328, 100%, 45%);
219
219
  --t-fill-color-product-staff-dark:hsl(328, 100%, 38%);
220
220
  --t-fill-color-product-staff-darker:hsl(328, 100%, 33%);
221
221
  --t-fill-color-product-accounts-gradient-brand:linear-gradient(135deg, hsl(203, 86%, 57%), hsl(220, 76%, 57%));
@@ -295,47 +295,47 @@
295
295
  --t-fill-color-tag-indigo-020:hsl(233, 79%, 87%);
296
296
  --t-fill-color-tag-indigo-030:hsl(233, 77%, 81%);
297
297
  --t-fill-color-tag-indigo-040:hsl(236, 79%, 74%);
298
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 93%);
298
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 93%);
299
299
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 88%);
300
300
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 81%);
301
301
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 95%);
302
- --t-fill-color-button-neutral-outline-dim-default:hsla(0, 0%, 100%, 0);
302
+ --t-fill-color-button-neutral-outline-dim:hsla(0, 0%, 100%, 0);
303
303
  --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 95%);
304
304
  --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 93%);
305
305
  --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 98%);
306
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 100%, 0);
306
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 100%, 0);
307
307
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 95%);
308
308
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 93%);
309
309
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 100%, 0);
310
- --t-fill-color-button-neutral-responsive-header-default:hsla(0, 0%, 0%, 0.1);
310
+ --t-fill-color-button-neutral-responsive-header:hsla(0, 0%, 0%, 0.1);
311
311
  --t-fill-color-button-neutral-responsive-header-hover:hsla(0, 0%, 0%, 0.2);
312
312
  --t-fill-color-button-neutral-responsive-header-active:hsla(0, 0%, 0%, 0.3);
313
313
  --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 0%, 0.05);
314
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 40%);
314
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 40%);
315
315
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 35%);
316
316
  --t-fill-color-button-interaction-solid-active:hsl(204, 100%, 30%);
317
317
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 95%);
318
- --t-fill-color-button-interaction-outline-dim-default:hsla(0, 0%, 100%, 0);
318
+ --t-fill-color-button-interaction-outline-dim:hsla(0, 0%, 100%, 0);
319
319
  --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 100%, 97%);
320
320
  --t-fill-color-button-interaction-outline-dim-active:hsl(203, 94%, 94%);
321
321
  --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 98%);
322
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 100%, 0);
322
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 100%, 0);
323
323
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 100%, 97%);
324
324
  --t-fill-color-button-interaction-ghost-active:hsl(203, 94%, 94%);
325
325
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 100%, 0);
326
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 47%);
326
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 47%);
327
327
  --t-fill-color-button-delete-solid-hover:hsl(8, 60%, 45%);
328
328
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 40%);
329
329
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 95%);
330
- --t-fill-color-button-delete-outline-dim-default:hsla(0, 0%, 100%, 0);
330
+ --t-fill-color-button-delete-outline-dim:hsla(0, 0%, 100%, 0);
331
331
  --t-fill-color-button-delete-outline-dim-hover:hsl(7, 60%, 97%);
332
332
  --t-fill-color-button-delete-outline-dim-active:hsl(9, 59%, 93%);
333
333
  --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 98%);
334
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 100%, 0);
334
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 100%, 0);
335
335
  --t-fill-color-button-delete-ghost-hover:hsl(7, 60%, 97%);
336
336
  --t-fill-color-button-delete-ghost-active:hsl(9, 59%, 93%);
337
337
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 100%, 0);
338
- --t-fill-color-button-pill-default:hsl(0, 0%, 93%);
338
+ --t-fill-color-button-pill:hsl(0, 0%, 93%);
339
339
  --t-fill-color-button-pill-hover:hsl(0, 0%, 88%);
340
340
  --t-fill-color-button-pill-active:hsl(0, 0%, 88%);
341
341
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 93%);
@@ -368,13 +368,13 @@
368
368
  --t-fill-color-transparency-dark-static-090:hsla(0, 0%, 0%, 0.9);
369
369
  --t-surface-color-card:hsl(0, 0%, 100%);
370
370
  --t-surface-color-canvas:hsl(0, 0%, 100%);
371
- --t-border-color-default-base:hsl(0, 0%, 88%);
372
- --t-border-color-default-dark:hsl(0, 0%, 81%);
373
- --t-border-color-default-darker:hsl(0, 0%, 68%);
374
- --t-border-color-default-darkest:hsl(0, 0%, 58%);
375
- --t-border-color-default-disabled:hsl(0, 0%, 88%);
376
- --t-border-color-default-dim:hsl(0, 0%, 95%);
377
- --t-border-color-default-white:hsl(0, 0%, 100%);
371
+ --t-border-color:hsl(0, 0%, 88%);
372
+ --t-border-color-dark:hsl(0, 0%, 81%);
373
+ --t-border-color-darker:hsl(0, 0%, 68%);
374
+ --t-border-color-darkest:hsl(0, 0%, 58%);
375
+ --t-border-color-disabled:hsl(0, 0%, 88%);
376
+ --t-border-color-dim:hsl(0, 0%, 95%);
377
+ --t-border-color-white:hsl(0, 0%, 100%);
378
378
  --t-border-color-status-neutral:hsl(0, 0%, 58%);
379
379
  --t-border-color-status-info:hsl(204, 100%, 40%);
380
380
  --t-border-color-status-success:hsl(97, 57%, 40%);
@@ -395,21 +395,21 @@
395
395
  --t-form-background-color-disabled:var(--t-fill-color-neutral-070);
396
396
  --t-form-background-color-error:var(--t-fill-color-neutral-100);
397
397
  --t-form-background-color-readonly:var(--t-fill-color-neutral-070);
398
- --t-form-border-color:var(--t-border-color-default-base);
399
- --t-form-border-color-disabled:var(--t-border-color-default-base);
398
+ --t-form-border-color:var(--t-border-color);
399
+ --t-form-border-color-disabled:var(--t-border-color);
400
400
  --t-form-border-color-error:var(--t-border-color-status-error);
401
- --t-form-border-color-focus:var(--t-fill-color-interaction-default);
402
- --t-form-border-color-hover:var(--t-border-color-default-dark);
401
+ --t-form-border-color-focus:var(--t-fill-color-interaction);
402
+ --t-form-border-color-hover:var(--t-border-color-dark);
403
403
  --t-form-border-color-readonly:hsla(0, 0%, 100%, 0);
404
404
  --t-form-border-radius:var(--t-border-radius-md);
405
- --t-form-border-width:var(--t-border-width-default);
406
- --t-form-font-color:var(--t-text-color-default-primary);
407
- --t-form-font-color-disabled:var(--t-text-color-default-disabled);
405
+ --t-form-border-width:var(--t-border-width);
406
+ --t-form-font-color:var(--t-text-color);
407
+ --t-form-font-color-disabled:var(--t-text-color-disabled);
408
408
  --t-form-font-color-error:var(--t-text-color-status-error);
409
- --t-form-font-color-readonly:var(--t-text-color-default-primary);
410
- --t-form-picker-icon-color:var(--t-icon-color-default-primary);
411
- --t-form-placeholder-color:var(--t-text-color-default-placeholder);
412
- --t-border-size-default:var(--t-border-width-default);
409
+ --t-form-font-color-readonly:var(--t-text-color);
410
+ --t-form-picker-icon-color:var(--t-icon-color);
411
+ --t-form-placeholder-color:var(--t-text-color-placeholder);
412
+ --t-border-size-default:var(--t-border-width);
413
413
  --t-border-size-thick:var(--t-border-width-thick);
414
414
  --t-font-weight-semi-bold:var(--t-font-weight-semibold);
415
415
  --t-icon-color-status-neutral-dark:hsl(0, 0%, 24%);
@@ -428,16 +428,57 @@
428
428
  --t-fill-color-button-create-ghost-hover:hsl(96, 60%, 95%);
429
429
  --t-fill-color-button-create-ghost-active:hsl(97, 57%, 90%);
430
430
  --t-fill-color-button-create-ghost-disabled:hsla(0, 0%, 100%, 0);
431
+ --t-border-color-default-base:var(--t-border-color);
432
+ --t-border-color-default-dark:var(--t-border-color-dark);
433
+ --t-border-color-default-darker:var(--t-border-color-darker);
434
+ --t-border-color-default-darkest:var(--t-border-color-darkest);
435
+ --t-border-color-default-dim:var(--t-border-color-dim);
436
+ --t-border-color-default-disabled:var(--t-border-color-disabled);
437
+ --t-border-color-default-white:var(--t-border-color-white);
438
+ --t-border-radius-default:var(--t-border-radius);
439
+ --t-border-width-default:var(--t-border-width);
440
+ --t-fill-color-button-delete-ghost-default:var(--t-fill-color-button-delete-ghost);
441
+ --t-fill-color-button-delete-outline-dim-default:var(--t-fill-color-button-delete-outline-dim);
442
+ --t-fill-color-button-delete-solid-default:var(--t-fill-color-button-delete-solid);
443
+ --t-fill-color-button-interaction-ghost-default:var(--t-fill-color-button-interaction-ghost);
444
+ --t-fill-color-button-interaction-outline-dim-default:var(--t-fill-color-button-interaction-outline-dim);
445
+ --t-fill-color-button-interaction-solid-default:var(--t-fill-color-button-interaction-solid);
446
+ --t-fill-color-button-neutral-ghost-default:var(--t-fill-color-button-neutral-ghost);
447
+ --t-fill-color-button-neutral-outline-dim-default:var(--t-fill-color-button-neutral-outline-dim);
448
+ --t-fill-color-button-neutral-responsive-header-default:var(--t-fill-color-button-neutral-responsive-header);
449
+ --t-fill-color-button-neutral-solid-default:var(--t-fill-color-button-neutral-solid);
450
+ --t-fill-color-button-pill-default:var(--t-fill-color-button-pill);
451
+ --t-fill-color-control-primary:var(--t-fill-color-control);
452
+ --t-fill-color-interaction-default:var(--t-fill-color-interaction);
453
+ --t-fill-color-product-staff-base:var(--t-fill-color-product-staff);
454
+ --t-fill-color-tooltip-primary:var(--t-fill-color-tooltip);
455
+ --t-icon-color-default-dim:var(--t-icon-color-dim);
456
+ --t-icon-color-default-disabled:var(--t-icon-color-disabled);
457
+ --t-icon-color-default-inverted:var(--t-icon-color-inverted);
458
+ --t-icon-color-default-primary:var(--t-icon-color);
459
+ --t-icon-color-default-secondary:var(--t-icon-color-secondary);
460
+ --t-icon-color-status-error-primary:var(--t-icon-color-status-error);
461
+ --t-icon-color-status-info-primary:var(--t-icon-color-status-info);
462
+ --t-icon-color-status-neutral-primary:var(--t-icon-color-status-neutral);
463
+ --t-icon-color-status-success-primary:var(--t-icon-color-status-success);
464
+ --t-icon-color-status-warning-primary:var(--t-icon-color-status-warning);
465
+ --t-text-color-default-disabled:var(--t-text-color-disabled);
466
+ --t-text-color-default-headline:var(--t-text-color-headline);
467
+ --t-text-color-default-inverted:var(--t-text-color-inverted);
468
+ --t-text-color-default-placeholder:var(--t-text-color-placeholder);
469
+ --t-text-color-default-primary:var(--t-text-color);
470
+ --t-text-color-default-secondary:var(--t-text-color-secondary);
471
+ --t-text-color-interaction-primary:var(--t-text-color-interaction);
431
472
  }
432
473
 
433
474
  :root[data-color-mode="dark"]{
434
475
  color-scheme:dark;
435
- --t-text-color-default-headline:hsl(0, 0%, 94%);
436
- --t-text-color-default-primary:hsl(0, 0%, 80%);
437
- --t-text-color-default-secondary:hsl(0, 0%, 54%);
438
- --t-text-color-default-disabled:hsl(0, 0%, 25%);
439
- --t-text-color-default-placeholder:hsl(0, 0%, 38%);
440
- --t-text-color-interaction-primary:hsl(204, 68%, 55%);
476
+ --t-text-color-headline:hsl(0, 0%, 94%);
477
+ --t-text-color:hsl(0, 0%, 80%);
478
+ --t-text-color-secondary:hsl(0, 0%, 54%);
479
+ --t-text-color-disabled:hsl(0, 0%, 25%);
480
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
481
+ --t-text-color-interaction:hsl(204, 68%, 55%);
441
482
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
442
483
  --t-text-color-interaction-active:hsl(204, 68%, 45%);
443
484
  --t-text-color-interaction-visited:hsl(204, 68%, 50%);
@@ -468,15 +509,15 @@
468
509
  --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
469
510
  --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
470
511
  --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
471
- --t-icon-color-default-primary:hsl(0, 0%, 80%);
472
- --t-icon-color-default-secondary:hsl(0, 0%, 54%);
473
- --t-icon-color-default-dim:hsl(0, 0%, 38%);
474
- --t-icon-color-default-disabled:hsl(0, 0%, 25%);
475
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
512
+ --t-icon-color:hsl(0, 0%, 80%);
513
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
514
+ --t-icon-color-dim:hsl(0, 0%, 38%);
515
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
516
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
476
517
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
477
518
  --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
478
- --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
479
- --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
519
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
520
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
480
521
  --t-fill-color-neutral-100:hsl(0, 0%, 10%);
481
522
  --t-fill-color-neutral-000:hsl(0, 0%, 98%);
482
523
  --t-fill-color-neutral-010:hsl(0, 0%, 88%);
@@ -489,13 +530,13 @@
489
530
  --t-fill-color-neutral-070:hsl(0, 0%, 17%);
490
531
  --t-fill-color-neutral-080:hsl(0, 0%, 15%);
491
532
  --t-fill-color-neutral-090:hsl(0, 0%, 12%);
492
- --t-fill-color-interaction-default:hsl(204, 100%, 35%);
533
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
493
534
  --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
494
535
  --t-fill-color-interaction-active:hsl(204, 80%, 45%);
495
536
  --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
496
537
  --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
497
538
  --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
498
- --t-fill-color-control-primary:hsl(204, 100%, 35%);
539
+ --t-fill-color-control:hsl(204, 100%, 35%);
499
540
  --t-fill-color-control-disabled:hsl(0, 0%, 20%);
500
541
  --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
501
542
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
@@ -509,7 +550,7 @@
509
550
  --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
510
551
  --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
511
552
  --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
512
- --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
553
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
513
554
  --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
514
555
  --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
515
556
  --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
@@ -574,43 +615,43 @@
574
615
  --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
575
616
  --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
576
617
  --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
577
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
618
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
578
619
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
579
620
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
580
621
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
581
- --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
622
+ --t-fill-color-button-neutral-outline-dim:hsl(0, 0%, 15%);
582
623
  --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
583
624
  --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
584
625
  --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
585
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
626
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
586
627
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
587
628
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
588
629
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
589
630
  --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
590
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
631
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
591
632
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
592
633
  --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
593
634
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
594
- --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
635
+ --t-fill-color-button-interaction-outline-dim:hsl(204, 32%, 15%);
595
636
  --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
596
637
  --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
597
638
  --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
598
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
639
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
599
640
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
600
641
  --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
601
642
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
602
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
643
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
603
644
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
604
645
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
605
- --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
646
+ --t-fill-color-button-delete-outline-dim:hsl(8, 20%, 16%);
606
647
  --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
607
648
  --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
608
649
  --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
609
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
650
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
610
651
  --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
611
652
  --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
612
653
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
613
- --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
654
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
614
655
  --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
615
656
  --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
616
657
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
@@ -634,13 +675,13 @@
634
675
  --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
635
676
  --t-surface-color-card:hsl(0, 0%, 12%);
636
677
  --t-surface-color-canvas:hsl(0, 0%, 10%);
637
- --t-border-color-default-base:hsl(0, 0%, 21%);
638
- --t-border-color-default-dark:hsl(0, 0%, 25%);
639
- --t-border-color-default-darker:hsl(0, 0%, 33%);
640
- --t-border-color-default-darkest:hsl(0, 0%, 38%);
641
- --t-border-color-default-disabled:hsl(0, 0%, 21%);
642
- --t-border-color-default-dim:hsl(0, 0%, 16%);
643
- --t-border-color-default-white:hsl(0, 0%, 12%);
678
+ --t-border-color:hsl(0, 0%, 21%);
679
+ --t-border-color-dark:hsl(0, 0%, 25%);
680
+ --t-border-color-darker:hsl(0, 0%, 33%);
681
+ --t-border-color-darkest:hsl(0, 0%, 38%);
682
+ --t-border-color-disabled:hsl(0, 0%, 21%);
683
+ --t-border-color-dim:hsl(0, 0%, 16%);
684
+ --t-border-color-white:hsl(0, 0%, 12%);
644
685
  --t-border-color-status-neutral:hsl(0, 0%, 38%);
645
686
  --t-border-color-status-info:hsl(204, 100%, 35%);
646
687
  --t-border-color-button-neutral:hsl(0, 0%, 19%);
@@ -656,12 +697,12 @@
656
697
  @media (prefers-color-scheme: dark){
657
698
  :root[data-color-mode="system"]{
658
699
  color-scheme:dark;
659
- --t-text-color-default-headline:hsl(0, 0%, 94%);
660
- --t-text-color-default-primary:hsl(0, 0%, 80%);
661
- --t-text-color-default-secondary:hsl(0, 0%, 54%);
662
- --t-text-color-default-disabled:hsl(0, 0%, 25%);
663
- --t-text-color-default-placeholder:hsl(0, 0%, 38%);
664
- --t-text-color-interaction-primary:hsl(204, 68%, 55%);
700
+ --t-text-color-headline:hsl(0, 0%, 94%);
701
+ --t-text-color:hsl(0, 0%, 80%);
702
+ --t-text-color-secondary:hsl(0, 0%, 54%);
703
+ --t-text-color-disabled:hsl(0, 0%, 25%);
704
+ --t-text-color-placeholder:hsl(0, 0%, 38%);
705
+ --t-text-color-interaction:hsl(204, 68%, 55%);
665
706
  --t-text-color-interaction-hover:hsl(204, 68%, 50%);
666
707
  --t-text-color-interaction-active:hsl(204, 68%, 45%);
667
708
  --t-text-color-interaction-visited:hsl(204, 68%, 50%);
@@ -692,15 +733,15 @@
692
733
  --t-text-color-tag-bold-pink:hsl(0, 0%, 100%);
693
734
  --t-text-color-tag-bold-purple:hsl(0, 0%, 100%);
694
735
  --t-text-color-tag-bold-magenta:hsl(0, 0%, 100%);
695
- --t-icon-color-default-primary:hsl(0, 0%, 80%);
696
- --t-icon-color-default-secondary:hsl(0, 0%, 54%);
697
- --t-icon-color-default-dim:hsl(0, 0%, 38%);
698
- --t-icon-color-default-disabled:hsl(0, 0%, 25%);
699
- --t-icon-color-status-neutral-primary:hsl(0, 0%, 54%);
736
+ --t-icon-color:hsl(0, 0%, 80%);
737
+ --t-icon-color-secondary:hsl(0, 0%, 54%);
738
+ --t-icon-color-dim:hsl(0, 0%, 38%);
739
+ --t-icon-color-disabled:hsl(0, 0%, 25%);
740
+ --t-icon-color-status-neutral:hsl(0, 0%, 54%);
700
741
  --t-icon-color-status-neutral-secondary:hsl(0, 0%, 38%);
701
742
  --t-icon-color-status-neutral-bold:hsl(0, 0%, 80%);
702
- --t-icon-color-status-info-primary:hsl(204, 68%, 55%);
703
- --t-icon-color-status-error-primary:hsl(8, 61%, 61%);
743
+ --t-icon-color-status-info:hsl(204, 68%, 55%);
744
+ --t-icon-color-status-error:hsl(8, 61%, 61%);
704
745
  --t-fill-color-neutral-100:hsl(0, 0%, 10%);
705
746
  --t-fill-color-neutral-000:hsl(0, 0%, 98%);
706
747
  --t-fill-color-neutral-010:hsl(0, 0%, 88%);
@@ -713,13 +754,13 @@
713
754
  --t-fill-color-neutral-070:hsl(0, 0%, 17%);
714
755
  --t-fill-color-neutral-080:hsl(0, 0%, 15%);
715
756
  --t-fill-color-neutral-090:hsl(0, 0%, 12%);
716
- --t-fill-color-interaction-default:hsl(204, 100%, 35%);
757
+ --t-fill-color-interaction:hsl(204, 100%, 35%);
717
758
  --t-fill-color-interaction-hover:hsl(204, 100%, 40%);
718
759
  --t-fill-color-interaction-active:hsl(204, 80%, 45%);
719
760
  --t-fill-color-interaction-disabled:hsl(0, 0%, 25%);
720
761
  --t-fill-color-control-neutral-off:hsl(0, 0%, 32%);
721
762
  --t-fill-color-control-neutral-on:hsl(0, 0%, 50%);
722
- --t-fill-color-control-primary:hsl(204, 100%, 35%);
763
+ --t-fill-color-control:hsl(204, 100%, 35%);
723
764
  --t-fill-color-control-disabled:hsl(0, 0%, 20%);
724
765
  --t-fill-color-status-neutral-solid:hsl(0, 0%, 24%);
725
766
  --t-fill-color-status-neutral-ghost:hsl(0, 0%, 18%);
@@ -733,7 +774,7 @@
733
774
  --t-fill-color-status-warning-dim:hsl(42, 13%, 15%);
734
775
  --t-fill-color-status-error-ghost:hsl(8, 20%, 16%);
735
776
  --t-fill-color-status-error-dim:hsl(10, 16%, 15%);
736
- --t-fill-color-tooltip-primary:hsla(0, 0%, 24%, 0.9);
777
+ --t-fill-color-tooltip:hsla(0, 0%, 24%, 0.9);
737
778
  --t-fill-color-product-accounts-gradient-page:linear-gradient(111.72deg, hsl(220, 30%, 21%), hsl(220, 48%, 17%), hsl(204, 70%, 12%));
738
779
  --t-fill-color-product-accounts-gradient-tint:linear-gradient(111.72deg, hsl(219, 21%, 16%), hsl(220, 30%, 14%), hsl(203, 37%, 11%));
739
780
  --t-fill-color-product-calendar-gradient-page:linear-gradient(111.72deg, hsl(8, 48%, 15%), hsl(278, 13%, 17%), hsl(204, 70%, 12%));
@@ -798,43 +839,43 @@
798
839
  --t-fill-color-tag-indigo-020:hsl(236, 22%, 29%);
799
840
  --t-fill-color-tag-indigo-030:hsl(236, 26%, 50%);
800
841
  --t-fill-color-tag-indigo-040:hsl(236, 34%, 56%);
801
- --t-fill-color-button-neutral-solid-default:hsl(0, 0%, 19%);
842
+ --t-fill-color-button-neutral-solid:hsl(0, 0%, 19%);
802
843
  --t-fill-color-button-neutral-solid-hover:hsl(0, 0%, 24%);
803
844
  --t-fill-color-button-neutral-solid-active:hsl(0, 0%, 32%);
804
845
  --t-fill-color-button-neutral-solid-disabled:hsl(0, 0%, 12%);
805
- --t-fill-color-button-neutral-outline-dim-default:hsl(0, 0%, 15%);
846
+ --t-fill-color-button-neutral-outline-dim:hsl(0, 0%, 15%);
806
847
  --t-fill-color-button-neutral-outline-dim-hover:hsl(0, 0%, 17%);
807
848
  --t-fill-color-button-neutral-outline-dim-active:hsl(0, 0%, 19%);
808
849
  --t-fill-color-button-neutral-outline-dim-disabled:hsl(0, 0%, 12%);
809
- --t-fill-color-button-neutral-ghost-default:hsla(0, 0%, 0%, 0);
850
+ --t-fill-color-button-neutral-ghost:hsla(0, 0%, 0%, 0);
810
851
  --t-fill-color-button-neutral-ghost-hover:hsl(0, 0%, 17%);
811
852
  --t-fill-color-button-neutral-ghost-active:hsl(0, 0%, 19%);
812
853
  --t-fill-color-button-neutral-ghost-disabled:hsla(0, 0%, 0%, 0);
813
854
  --t-fill-color-button-neutral-responsive-header-disabled:hsla(0, 0%, 100%, 0.05);
814
- --t-fill-color-button-interaction-solid-default:hsl(204, 100%, 35%);
855
+ --t-fill-color-button-interaction-solid:hsl(204, 100%, 35%);
815
856
  --t-fill-color-button-interaction-solid-hover:hsl(204, 100%, 40%);
816
857
  --t-fill-color-button-interaction-solid-active:hsl(204, 80%, 45%);
817
858
  --t-fill-color-button-interaction-solid-disabled:hsl(0, 0%, 12%);
818
- --t-fill-color-button-interaction-outline-dim-default:hsl(204, 32%, 15%);
859
+ --t-fill-color-button-interaction-outline-dim:hsl(204, 32%, 15%);
819
860
  --t-fill-color-button-interaction-outline-dim-hover:hsl(204, 39%, 17%);
820
861
  --t-fill-color-button-interaction-outline-dim-active:hsl(205, 45%, 18%);
821
862
  --t-fill-color-button-interaction-outline-dim-disabled:hsl(0, 0%, 12%);
822
- --t-fill-color-button-interaction-ghost-default:hsla(0, 0%, 0%, 0);
863
+ --t-fill-color-button-interaction-ghost:hsla(0, 0%, 0%, 0);
823
864
  --t-fill-color-button-interaction-ghost-hover:hsl(204, 32%, 15%);
824
865
  --t-fill-color-button-interaction-ghost-active:hsl(204, 39%, 17%);
825
866
  --t-fill-color-button-interaction-ghost-disabled:hsla(0, 0%, 0%, 0);
826
- --t-fill-color-button-delete-solid-default:hsl(8, 60%, 40%);
867
+ --t-fill-color-button-delete-solid:hsl(8, 60%, 40%);
827
868
  --t-fill-color-button-delete-solid-active:hsl(8, 60%, 47%);
828
869
  --t-fill-color-button-delete-solid-disabled:hsl(0, 0%, 12%);
829
- --t-fill-color-button-delete-outline-dim-default:hsl(8, 20%, 16%);
870
+ --t-fill-color-button-delete-outline-dim:hsl(8, 20%, 16%);
830
871
  --t-fill-color-button-delete-outline-dim-hover:hsl(9, 24%, 17%);
831
872
  --t-fill-color-button-delete-outline-dim-active:hsl(9, 29%, 19%);
832
873
  --t-fill-color-button-delete-outline-dim-disabled:hsl(0, 0%, 12%);
833
- --t-fill-color-button-delete-ghost-default:hsla(0, 0%, 0%, 0);
874
+ --t-fill-color-button-delete-ghost:hsla(0, 0%, 0%, 0);
834
875
  --t-fill-color-button-delete-ghost-hover:hsl(8, 20%, 16%);
835
876
  --t-fill-color-button-delete-ghost-active:hsl(9, 24%, 17%);
836
877
  --t-fill-color-button-delete-ghost-disabled:hsla(0, 0%, 0%, 0);
837
- --t-fill-color-button-pill-default:hsl(0, 0%, 18%);
878
+ --t-fill-color-button-pill:hsl(0, 0%, 18%);
838
879
  --t-fill-color-button-pill-hover:hsl(0, 0%, 21%);
839
880
  --t-fill-color-button-pill-active:hsl(0, 0%, 21%);
840
881
  --t-fill-color-button-pill-disabled:hsl(0, 0%, 18%);
@@ -858,13 +899,13 @@
858
899
  --t-fill-color-transparency-dark-090:hsla(0, 0%, 100%, 0.9);
859
900
  --t-surface-color-card:hsl(0, 0%, 12%);
860
901
  --t-surface-color-canvas:hsl(0, 0%, 10%);
861
- --t-border-color-default-base:hsl(0, 0%, 21%);
862
- --t-border-color-default-dark:hsl(0, 0%, 25%);
863
- --t-border-color-default-darker:hsl(0, 0%, 33%);
864
- --t-border-color-default-darkest:hsl(0, 0%, 38%);
865
- --t-border-color-default-disabled:hsl(0, 0%, 21%);
866
- --t-border-color-default-dim:hsl(0, 0%, 16%);
867
- --t-border-color-default-white:hsl(0, 0%, 12%);
902
+ --t-border-color:hsl(0, 0%, 21%);
903
+ --t-border-color-dark:hsl(0, 0%, 25%);
904
+ --t-border-color-darker:hsl(0, 0%, 33%);
905
+ --t-border-color-darkest:hsl(0, 0%, 38%);
906
+ --t-border-color-disabled:hsl(0, 0%, 21%);
907
+ --t-border-color-dim:hsl(0, 0%, 16%);
908
+ --t-border-color-white:hsl(0, 0%, 12%);
868
909
  --t-border-color-status-neutral:hsl(0, 0%, 38%);
869
910
  --t-border-color-status-info:hsl(204, 100%, 35%);
870
911
  --t-border-color-button-neutral:hsl(0, 0%, 19%);