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