@planningcenter/tapestry 1.0.0-rc.1 → 1.0.0-rc.3

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 (15) hide show
  1. package/dist/index.css +273 -144
  2. package/dist/index.css.map +1 -1
  3. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js +1 -1
  4. package/dist/packages/tapestry-wc/dist/components/tds-page-header.js.map +1 -1
  5. package/dist/tokens/ts/tokens.d.ts +224 -95
  6. package/dist/tokens/ts/tokens.d.ts.map +1 -1
  7. package/dist/tokens/ts/tokens.js +224 -95
  8. package/dist/tokens/ts/tokens.js.map +1 -1
  9. package/dist/tokens.css +273 -144
  10. package/dist/tokens.css.map +1 -1
  11. package/dist/unstable.css +273 -144
  12. package/dist/unstable.css.map +1 -1
  13. package/dist/webComponents.css +273 -144
  14. package/dist/webComponents.css.map +1 -1
  15. package/package.json +3 -3
package/dist/unstable.css CHANGED
@@ -311,9 +311,9 @@
311
311
  --t-avatar-size-112: 112px;
312
312
  --t-text-color-default-headline: hsl(0, 0%, 12%);
313
313
  --t-text-color-default-primary: hsl(0, 0%, 24%);
314
- --t-text-color-default-secondary: hsl(0, 0%, 45%);
314
+ --t-text-color-default-secondary: hsl(0, 0%, 42%);
315
315
  --t-text-color-default-disabled: hsl(0, 0%, 81%);
316
- --t-text-color-default-placeholder: hsl(0, 0%, 62%);
316
+ --t-text-color-default-placeholder: hsl(0, 0%, 58%);
317
317
  --t-text-color-default-inverted: hsl(0, 0%, 100%);
318
318
  --t-text-color-interaction-primary: hsl(204, 100%, 40%);
319
319
  --t-text-color-interaction-hover: hsl(204, 100%, 35%);
@@ -326,6 +326,7 @@
326
326
  --t-text-color-status-error: hsl(8, 60%, 45%);
327
327
  --t-text-color-tag-subtle-gray: hsl(0, 0%, 24%);
328
328
  --t-text-color-tag-subtle-blue: hsl(224, 47%, 31%);
329
+ --t-text-color-tag-subtle-indigo: hsl(241, 59%, 28%);
329
330
  --t-text-color-tag-subtle-aqua: hsl(209, 77%, 22%);
330
331
  --t-text-color-tag-subtle-teal: hsl(180, 95%, 15%);
331
332
  --t-text-color-tag-subtle-green: hsl(100, 93%, 17%);
@@ -335,6 +336,7 @@
335
336
  --t-text-color-tag-subtle-purple: hsl(268, 71%, 27%);
336
337
  --t-text-color-tag-subtle-magenta: hsl(285, 71%, 20%);
337
338
  --t-text-color-tag-bold-gray: hsl(0, 0%, 24%);
339
+ --t-text-color-tag-bold-indigo: hsl(241, 59%, 28%);
338
340
  --t-text-color-tag-bold-blue: hsl(224, 47%, 31%);
339
341
  --t-text-color-tag-bold-aqua: hsl(209, 77%, 22%);
340
342
  --t-text-color-tag-bold-teal: hsl(180, 95%, 15%);
@@ -345,12 +347,12 @@
345
347
  --t-text-color-tag-bold-purple: hsl(268, 71%, 27%);
346
348
  --t-text-color-tag-bold-magenta: hsl(285, 71%, 20%);
347
349
  --t-icon-color-default-primary: hsl(0, 0%, 24%);
348
- --t-icon-color-default-secondary: hsl(0, 0%, 45%);
349
- --t-icon-color-default-dim: hsl(0, 0%, 62%);
350
+ --t-icon-color-default-secondary: hsl(0, 0%, 42%);
351
+ --t-icon-color-default-dim: hsl(0, 0%, 58%);
350
352
  --t-icon-color-default-disabled: hsl(0, 0%, 81%);
351
353
  --t-icon-color-default-inverted: hsl(0, 0%, 100%);
352
- --t-icon-color-status-neutral-primary: hsl(0, 0%, 45%);
353
- --t-icon-color-status-neutral-secondary: hsl(0, 0%, 62%);
354
+ --t-icon-color-status-neutral-primary: hsl(0, 0%, 42%);
355
+ --t-icon-color-status-neutral-secondary: hsl(0, 0%, 58%);
354
356
  --t-icon-color-status-neutral-bold: hsl(0, 0%, 24%);
355
357
  --t-icon-color-status-info-primary: hsl(204, 100%, 40%);
356
358
  --t-icon-color-status-success-primary: hsl(96, 57%, 33%);
@@ -359,8 +361,9 @@
359
361
  --t-icon-color-status-error-primary: hsl(8, 60%, 47%);
360
362
  --t-fill-color-neutral-000: hsl(0, 0%, 12%);
361
363
  --t-fill-color-neutral-010: hsl(0, 0%, 24%);
362
- --t-fill-color-neutral-020: hsl(0, 0%, 45%);
363
- --t-fill-color-neutral-030: hsl(0, 0%, 62%);
364
+ --t-fill-color-neutral-020: hsl(0, 0%, 42%);
365
+ --t-fill-color-neutral-025: hsl(0, 0%, 50%);
366
+ --t-fill-color-neutral-030: hsl(0, 0%, 58%);
364
367
  --t-fill-color-neutral-040: hsl(0, 0%, 81%);
365
368
  --t-fill-color-neutral-050: hsl(0, 0%, 88%);
366
369
  --t-fill-color-neutral-060: hsl(0, 0%, 93%);
@@ -372,13 +375,13 @@
372
375
  --t-fill-color-interaction-hover: hsl(204, 100%, 35%);
373
376
  --t-fill-color-interaction-active: hsl(204, 100%, 30%);
374
377
  --t-fill-color-interaction-disabled: hsl(0, 0%, 81%);
375
- --t-fill-color-control-neutral-off: hsl(0, 0%, 62%);
378
+ --t-fill-color-control-neutral-off: hsl(0, 0%, 58%);
376
379
  --t-fill-color-control-neutral-on: hsl(0, 0%, 24%);
377
380
  --t-fill-color-control-primary: hsl(204, 100%, 40%);
378
381
  --t-fill-color-control-secondary: hsl(97, 57%, 40%);
379
382
  --t-fill-color-control-error: hsl(8, 60%, 47%);
380
383
  --t-fill-color-control-disabled: hsl(0, 0%, 81%);
381
- --t-fill-color-status-neutral-solid: hsl(0, 0%, 45%);
384
+ --t-fill-color-status-neutral-solid: hsl(0, 0%, 42%);
382
385
  --t-fill-color-status-neutral-ghost: hsl(0, 0%, 93%);
383
386
  --t-fill-color-status-neutral-dim: hsl(0, 0%, 97%);
384
387
  --t-fill-color-status-info-solid: hsl(204, 100%, 40%);
@@ -394,60 +397,145 @@
394
397
  --t-fill-color-status-error-ghost: hsl(9, 59%, 93%);
395
398
  --t-fill-color-status-error-dim: hsl(7, 60%, 97%);
396
399
  --t-fill-color-tooltip-primary: hsla(0, 0%, 12%, 0.77);
397
- --t-fill-color-tag-subtle-gray: hsl(0, 0%, 93%);
398
- --t-fill-color-tag-subtle-blue: hsl(220, 100%, 95%);
399
- --t-fill-color-tag-subtle-label-gray: hsl(0, 0%, 88%);
400
- --t-fill-color-tag-subtle-label-blue: hsl(221, 100%, 81%);
401
- --t-fill-color-tag-subtle-label-aqua: hsl(200, 82%, 82%);
402
- --t-fill-color-tag-subtle-label-teal: hsl(164, 52%, 76%);
403
- --t-fill-color-tag-subtle-label-green: hsl(99, 59%, 78%);
404
- --t-fill-color-tag-subtle-label-yellow: hsl(44, 78%, 77%);
405
- --t-fill-color-tag-subtle-label-orange: hsl(21, 89%, 82%);
406
- --t-fill-color-tag-subtle-label-pink: hsl(310, 64%, 85%);
407
- --t-fill-color-tag-subtle-label-purple: hsl(259, 74%, 85%);
408
- --t-fill-color-tag-subtle-label-magenta: hsl(291, 40%, 83%);
409
- --t-fill-color-tag-subtle-aqua: hsl(200, 82%, 89%);
410
- --t-fill-color-tag-subtle-teal: hsl(163, 53%, 83%);
411
- --t-fill-color-tag-subtle-green: hsl(98, 59%, 85%);
412
- --t-fill-color-tag-subtle-yellow: hsl(45, 77%, 85%);
413
- --t-fill-color-tag-subtle-orange: hsl(22, 89%, 89%);
414
- --t-fill-color-tag-subtle-pink: hsl(311, 66%, 92%);
415
- --t-fill-color-tag-subtle-purple: hsl(259, 74%, 93%);
416
- --t-fill-color-tag-subtle-magenta: hsl(294, 37%, 90%);
417
- --t-fill-color-tag-bold-gray: hsl(0, 0%, 88%);
418
- --t-fill-color-tag-bold-blue: hsl(220, 98%, 81%);
419
- --t-fill-color-tag-bold-aqua: hsl(201, 76%, 71%);
420
- --t-fill-color-tag-bold-teal: hsl(169, 62%, 64%);
421
- --t-fill-color-tag-bold-green: hsl(112, 57%, 65%);
422
- --t-fill-color-tag-bold-yellow: hsl(44, 92%, 69%);
423
- --t-fill-color-tag-bold-orange: hsl(21, 86%, 72%);
424
- --t-fill-color-tag-bold-pink: hsl(324, 78%, 77%);
425
- --t-fill-color-tag-bold-purple: hsl(273, 62%, 76%);
426
- --t-fill-color-tag-bold-magenta: hsl(291, 48%, 70%);
427
- --t-fill-color-tag-bold-label-gray: hsl(0, 0%, 81%);
428
- --t-fill-color-tag-bold-label-blue: hsl(220, 98%, 74%);
429
- --t-fill-color-tag-bold-label-aqua: hsl(200, 75%, 64%);
430
- --t-fill-color-tag-bold-label-teal: hsl(169, 62%, 56%);
431
- --t-fill-color-tag-bold-label-green: hsl(112, 57%, 57%);
432
- --t-fill-color-tag-bold-label-yellow: hsl(44, 93%, 61%);
433
- --t-fill-color-tag-bold-label-orange: hsl(21, 86%, 64%);
434
- --t-fill-color-tag-bold-label-pink: hsl(324, 76%, 70%);
435
- --t-fill-color-tag-bold-label-purple: hsl(273, 62%, 70%);
436
- --t-fill-color-tag-bold-label-magenta: hsl(292, 48%, 63%);
437
- --t-fill-color-button-neutral-solid-default: hsl(0, 0%, 45%);
400
+ --t-fill-color-product-accounts-010: hsl(212, 54%, 93%);
401
+ --t-fill-color-product-accounts-020: hsl(209, 53%, 90%);
402
+ --t-fill-color-product-accounts-030: hsl(210, 56%, 70%);
403
+ --t-fill-color-product-accounts-040: hsl(210, 54%, 60%);
404
+ --t-fill-color-product-accounts-050: hsl(210, 55%, 50%);
405
+ --t-fill-color-product-accounts-060: hsl(210, 65%, 40%);
406
+ --t-fill-color-product-accounts-070: hsl(211, 70%, 32%);
407
+ --t-fill-color-product-accounts-080: hsl(210, 75%, 25%);
408
+ --t-fill-color-product-calendar-010: hsl(8, 61%, 90%);
409
+ --t-fill-color-product-calendar-020: hsl(8, 61%, 70%);
410
+ --t-fill-color-product-calendar-030: hsl(8, 72%, 59%);
411
+ --t-fill-color-product-calendar-040: hsl(8, 65%, 55%);
412
+ --t-fill-color-product-calendar-050: hsl(9, 61%, 50%);
413
+ --t-fill-color-product-calendar-060: hsl(8, 65%, 42%);
414
+ --t-fill-color-product-calendar-070: hsl(7, 65%, 34%);
415
+ --t-fill-color-product-calendar-080: hsl(9, 61%, 27%);
416
+ --t-fill-color-product-checkins-010: hsl(285, 20%, 92%);
417
+ --t-fill-color-product-checkins-020: hsl(283, 22%, 75%);
418
+ --t-fill-color-product-checkins-030: hsl(284, 22%, 64%);
419
+ --t-fill-color-product-checkins-040: hsl(283, 22%, 55%);
420
+ --t-fill-color-product-checkins-050: hsl(283, 22%, 48%);
421
+ --t-fill-color-product-checkins-060: hsl(283, 27%, 42%);
422
+ --t-fill-color-product-checkins-070: hsl(284, 33%, 34%);
423
+ --t-fill-color-product-checkins-080: hsl(283, 33%, 27%);
424
+ --t-fill-color-product-giving-010: hsl(41, 95%, 93%);
425
+ --t-fill-color-product-giving-020: hsl(42, 95%, 83%);
426
+ --t-fill-color-product-giving-030: hsl(43, 95%, 75%);
427
+ --t-fill-color-product-giving-040: hsl(43, 88%, 70%);
428
+ --t-fill-color-product-giving-050: hsl(43, 88%, 64%);
429
+ --t-fill-color-product-giving-060: hsl(42, 84%, 55%);
430
+ --t-fill-color-product-giving-070: hsl(42, 84%, 48%);
431
+ --t-fill-color-product-giving-080: hsl(42, 100%, 40%);
432
+ --t-fill-color-product-groups-010: hsl(18, 95%, 92%);
433
+ --t-fill-color-product-groups-020: hsl(17, 96%, 80%);
434
+ --t-fill-color-product-groups-030: hsl(17, 96%, 70%);
435
+ --t-fill-color-product-groups-040: hsl(17, 96%, 63%);
436
+ --t-fill-color-product-groups-050: hsl(17, 88%, 55%);
437
+ --t-fill-color-product-groups-060: hsl(12, 70%, 48%);
438
+ --t-fill-color-product-groups-070: hsl(12, 70%, 40%);
439
+ --t-fill-color-product-groups-080: hsl(14, 70%, 34%);
440
+ --t-fill-color-product-home-010: hsl(221, 89%, 93%);
441
+ --t-fill-color-product-home-020: hsl(221, 91%, 91%);
442
+ --t-fill-color-product-home-030: hsl(221, 91%, 87%);
443
+ --t-fill-color-product-home-040: hsl(221, 91%, 62%);
444
+ --t-fill-color-product-home-050: hsl(221, 91%, 55%);
445
+ --t-fill-color-product-home-060: hsl(221, 90%, 50%);
446
+ --t-fill-color-product-home-070: hsl(221, 90%, 45%);
447
+ --t-fill-color-product-home-080: hsl(218, 84%, 25%);
448
+ --t-fill-color-product-people-010: hsl(219, 73%, 91%);
449
+ --t-fill-color-product-people-020: hsl(220, 69%, 81%);
450
+ --t-fill-color-product-people-030: hsl(221, 73%, 71%);
451
+ --t-fill-color-product-people-040: hsl(221, 73%, 65%);
452
+ --t-fill-color-product-people-050: hsl(220, 74%, 57%);
453
+ --t-fill-color-product-people-060: hsl(220, 68%, 51%);
454
+ --t-fill-color-product-people-070: hsl(220, 68%, 41%);
455
+ --t-fill-color-product-people-080: hsl(221, 68%, 31%);
456
+ --t-fill-color-product-publishing-010: hsl(220, 4%, 86%);
457
+ --t-fill-color-product-publishing-020: hsl(222, 10%, 60%);
458
+ --t-fill-color-product-publishing-030: hsl(221, 11%, 50%);
459
+ --t-fill-color-product-publishing-040: hsl(222, 12%, 39%);
460
+ --t-fill-color-product-publishing-050: hsl(220, 12%, 31%);
461
+ --t-fill-color-product-publishing-060: hsl(220, 11%, 26%);
462
+ --t-fill-color-product-publishing-070: hsl(217, 12%, 22%);
463
+ --t-fill-color-product-publishing-080: hsl(214, 11%, 12%);
464
+ --t-fill-color-product-registrations-010: hsl(173, 28%, 89%);
465
+ --t-fill-color-product-registrations-020: hsl(176, 38%, 78%);
466
+ --t-fill-color-product-registrations-030: hsl(176, 37%, 68%);
467
+ --t-fill-color-product-registrations-040: hsl(176, 37%, 60%);
468
+ --t-fill-color-product-registrations-050: hsl(175, 36%, 43%);
469
+ --t-fill-color-product-registrations-060: hsl(175, 51%, 34%);
470
+ --t-fill-color-product-registrations-070: hsl(174, 51%, 28%);
471
+ --t-fill-color-product-registrations-080: hsl(175, 52%, 22%);
472
+ --t-fill-color-product-services-010: hsl(88, 31%, 88%);
473
+ --t-fill-color-product-services-020: hsl(88, 39%, 75%);
474
+ --t-fill-color-product-services-030: hsl(88, 39%, 66%);
475
+ --t-fill-color-product-services-040: hsl(88, 40%, 54%);
476
+ --t-fill-color-product-services-050: hsl(88, 45%, 41%);
477
+ --t-fill-color-product-services-060: hsl(89, 62%, 31%);
478
+ --t-fill-color-product-services-070: hsl(89, 62%, 26%);
479
+ --t-fill-color-product-services-080: hsl(89, 63%, 21%);
480
+ --t-fill-color-product-staff-base: hsl(328, 100%, 45%);
481
+ --t-fill-color-product-staff-dark: hsl(328, 100%, 38%);
482
+ --t-fill-color-product-staff-darker: hsl(328, 100%, 33%);
483
+ --t-fill-color-tag-gray-010: hsl(0, 0%, 93%);
484
+ --t-fill-color-tag-gray-020: hsl(0, 0%, 88%);
485
+ --t-fill-color-tag-gray-030: hsl(0, 0%, 88%);
486
+ --t-fill-color-tag-gray-040: hsl(0, 0%, 81%);
487
+ --t-fill-color-tag-blue-010: hsl(220, 100%, 95%);
488
+ --t-fill-color-tag-blue-020: hsl(221, 100%, 88%);
489
+ --t-fill-color-tag-blue-030: hsl(220, 98%, 81%);
490
+ --t-fill-color-tag-blue-040: hsl(220, 98%, 74%);
491
+ --t-fill-color-tag-aqua-010: hsl(200, 82%, 89%);
492
+ --t-fill-color-tag-aqua-020: hsl(200, 82%, 82%);
493
+ --t-fill-color-tag-aqua-030: hsl(201, 76%, 71%);
494
+ --t-fill-color-tag-aqua-040: hsl(200, 75%, 64%);
495
+ --t-fill-color-tag-teal-010: hsl(163, 53%, 83%);
496
+ --t-fill-color-tag-teal-020: hsl(164, 52%, 76%);
497
+ --t-fill-color-tag-teal-030: hsl(169, 62%, 64%);
498
+ --t-fill-color-tag-teal-040: hsl(169, 62%, 56%);
499
+ --t-fill-color-tag-green-010: hsl(98, 59%, 85%);
500
+ --t-fill-color-tag-green-020: hsl(99, 59%, 78%);
501
+ --t-fill-color-tag-green-030: hsl(112, 57%, 65%);
502
+ --t-fill-color-tag-green-040: hsl(112, 57%, 57%);
503
+ --t-fill-color-tag-yellow-010: hsl(45, 77%, 85%);
504
+ --t-fill-color-tag-yellow-020: hsl(44, 78%, 77%);
505
+ --t-fill-color-tag-yellow-030: hsl(44, 92%, 69%);
506
+ --t-fill-color-tag-yellow-040: hsl(44, 93%, 61%);
507
+ --t-fill-color-tag-orange-010: hsl(22, 89%, 89%);
508
+ --t-fill-color-tag-orange-020: hsl(21, 89%, 82%);
509
+ --t-fill-color-tag-orange-030: hsl(21, 86%, 72%);
510
+ --t-fill-color-tag-orange-040: hsl(21, 86%, 64%);
511
+ --t-fill-color-tag-pink-010: hsl(311, 66%, 92%);
512
+ --t-fill-color-tag-pink-020: hsl(310, 64%, 85%);
513
+ --t-fill-color-tag-pink-030: hsl(324, 78%, 77%);
514
+ --t-fill-color-tag-pink-040: hsl(324, 76%, 70%);
515
+ --t-fill-color-tag-purple-010: hsl(259, 74%, 93%);
516
+ --t-fill-color-tag-purple-020: hsl(259, 74%, 85%);
517
+ --t-fill-color-tag-purple-030: hsl(273, 62%, 76%);
518
+ --t-fill-color-tag-purple-040: hsl(273, 62%, 70%);
519
+ --t-fill-color-tag-magenta-010: hsl(294, 37%, 90%);
520
+ --t-fill-color-tag-magenta-020: hsl(291, 40%, 83%);
521
+ --t-fill-color-tag-magenta-030: hsl(291, 48%, 70%);
522
+ --t-fill-color-tag-magenta-040: hsl(292, 48%, 63%);
523
+ --t-fill-color-tag-indigo-010: hsl(234, 78%, 93%);
524
+ --t-fill-color-tag-indigo-020: hsl(233, 79%, 87%);
525
+ --t-fill-color-tag-indigo-030: hsl(233, 77%, 81%);
526
+ --t-fill-color-tag-indigo-040: hsl(236, 79%, 74%);
527
+ --t-fill-color-button-neutral-solid-default: hsl(0, 0%, 42%);
438
528
  --t-fill-color-button-neutral-solid-hover: hsl(0, 0%, 24%);
439
529
  --t-fill-color-button-neutral-solid-active: hsl(0, 0%, 12%);
440
530
  --t-fill-color-button-neutral-solid-disabled: hsl(0, 0%, 95%);
441
531
  --t-fill-color-button-neutral-outline-dim-default: hsla(0, 0%, 100%, 0);
442
532
  --t-fill-color-button-neutral-outline-dim-hover: hsl(0, 0%, 95%);
443
533
  --t-fill-color-button-neutral-outline-dim-active: hsl(0, 0%, 93%);
444
- --t-fill-color-button-neutral-outline-dim-disabled: hsla(0, 0%, 100%, 0);
445
- --t-fill-color-button-neutral-outline-dim-disabled-solid: hsl(0, 0%, 98%);
534
+ --t-fill-color-button-neutral-outline-dim-disabled: hsl(0, 0%, 98%);
446
535
  --t-fill-color-button-neutral-ghost-default: hsla(0, 0%, 100%, 0);
447
536
  --t-fill-color-button-neutral-ghost-hover: hsl(0, 0%, 95%);
448
537
  --t-fill-color-button-neutral-ghost-active: hsl(0, 0%, 93%);
449
- --t-fill-color-button-neutral-ghost-disabled: hsla(0, 0%, 100%, 0);
450
- --t-fill-color-button-neutral-ghost-disabled-solid: hsl(0, 0%, 98%);
538
+ --t-fill-color-button-neutral-ghost-disabled: hsl(0, 0%, 98%);
451
539
  --t-fill-color-button-interaction-solid-default: hsl(204, 100%, 40%);
452
540
  --t-fill-color-button-interaction-solid-hover: hsl(204, 100%, 35%);
453
541
  --t-fill-color-button-interaction-solid-active: hsl(204, 100%, 30%);
@@ -476,77 +564,6 @@
476
564
  --t-fill-color-button-pill-hover: hsl(0, 0%, 88%);
477
565
  --t-fill-color-button-pill-active: hsl(0, 0%, 88%);
478
566
  --t-fill-color-button-pill-disabled: hsl(0, 0%, 93%);
479
- --t-fill-color-product-accounts-base: hsl(210, 55%, 50%);
480
- --t-fill-color-product-accounts-light: hsl(210, 54%, 60%);
481
- --t-fill-color-product-accounts-lighter: hsl(209, 53%, 90%);
482
- --t-fill-color-product-accounts-lightest: hsl(212, 54%, 93%);
483
- --t-fill-color-product-accounts-dark: hsl(210, 65%, 40%);
484
- --t-fill-color-product-accounts-darker: hsl(211, 70%, 32%);
485
- --t-fill-color-product-accounts-darkest: hsl(210, 75%, 25%);
486
- --t-fill-color-product-calendar-base: hsl(9, 61%, 50%);
487
- --t-fill-color-product-calendar-light: hsl(8, 65%, 55%);
488
- --t-fill-color-product-calendar-lighter: hsl(8, 72%, 59%);
489
- --t-fill-color-product-calendar-lightest: hsl(8, 61%, 70%);
490
- --t-fill-color-product-calendar-dark: hsl(8, 65%, 42%);
491
- --t-fill-color-product-calendar-darker: hsl(7, 65%, 34%);
492
- --t-fill-color-product-calendar-darkest: hsl(9, 61%, 27%);
493
- --t-fill-color-product-checkins-base: hsl(283, 22%, 48%);
494
- --t-fill-color-product-checkins-light: hsl(283, 22%, 55%);
495
- --t-fill-color-product-checkins-lighter: hsl(284, 22%, 64%);
496
- --t-fill-color-product-checkins-lightest: hsl(283, 22%, 75%);
497
- --t-fill-color-product-checkins-dark: hsl(283, 27%, 42%);
498
- --t-fill-color-product-checkins-darker: hsl(284, 33%, 34%);
499
- --t-fill-color-product-checkins-darkest: hsl(283, 33%, 27%);
500
- --t-fill-color-product-giving-base: hsl(43, 88%, 64%);
501
- --t-fill-color-product-giving-light: hsl(43, 88%, 70%);
502
- --t-fill-color-product-giving-lighter: hsl(43, 95%, 75%);
503
- --t-fill-color-product-giving-lightest: hsl(42, 95%, 83%);
504
- --t-fill-color-product-giving-dark: hsl(42, 84%, 55%);
505
- --t-fill-color-product-giving-darker: hsl(42, 84%, 48%);
506
- --t-fill-color-product-giving-darkest: hsl(42, 100%, 40%);
507
- --t-fill-color-product-groups-base: hsl(17, 88%, 55%);
508
- --t-fill-color-product-groups-light: hsl(17, 96%, 63%);
509
- --t-fill-color-product-groups-lighter: hsl(17, 96%, 70%);
510
- --t-fill-color-product-groups-lightest: hsl(17, 96%, 80%);
511
- --t-fill-color-product-groups-dark: hsl(12, 70%, 48%);
512
- --t-fill-color-product-groups-darker: hsl(12, 70%, 40%);
513
- --t-fill-color-product-groups-darkest: hsl(14, 70%, 34%);
514
- --t-fill-color-product-home-base: hsl(221, 91%, 55%);
515
- --t-fill-color-product-home-light: hsl(221, 91%, 62%);
516
- --t-fill-color-product-home-lighter: hsl(221, 91%, 87%);
517
- --t-fill-color-product-home-lightest: hsl(221, 91%, 91%);
518
- --t-fill-color-product-home-dark: hsl(221, 90%, 50%);
519
- --t-fill-color-product-home-darker: hsl(221, 90%, 45%);
520
- --t-fill-color-product-home-darkest: hsl(218, 84%, 25%);
521
- --t-fill-color-product-people-base: hsl(220, 74%, 57%);
522
- --t-fill-color-product-people-light: hsl(221, 73%, 65%);
523
- --t-fill-color-product-people-lighter: hsl(221, 73%, 71%);
524
- --t-fill-color-product-people-lightest: hsl(220, 69%, 81%);
525
- --t-fill-color-product-people-dark: hsl(220, 68%, 51%);
526
- --t-fill-color-product-people-darker: hsl(220, 68%, 41%);
527
- --t-fill-color-product-people-darkest: hsl(221, 68%, 31%);
528
- --t-fill-color-product-publishing-base: hsl(220, 12%, 31%);
529
- --t-fill-color-product-publishing-light: hsl(222, 12%, 39%);
530
- --t-fill-color-product-publishing-lighter: hsl(221, 11%, 50%);
531
- --t-fill-color-product-publishing-lightest: hsl(222, 10%, 60%);
532
- --t-fill-color-product-publishing-dark: hsl(220, 11%, 26%);
533
- --t-fill-color-product-publishing-darker: hsl(217, 12%, 22%);
534
- --t-fill-color-product-publishing-darkest: hsl(214, 11%, 12%);
535
- --t-fill-color-product-registrations-base: hsl(175, 36%, 43%);
536
- --t-fill-color-product-registrations-light: hsl(176, 37%, 60%);
537
- --t-fill-color-product-registrations-lighter: hsl(176, 37%, 68%);
538
- --t-fill-color-product-registrations-lightest: hsl(176, 38%, 78%);
539
- --t-fill-color-product-registrations-dark: hsl(175, 51%, 34%);
540
- --t-fill-color-product-registrations-darker: hsl(174, 51%, 28%);
541
- --t-fill-color-product-registrations-darkest: hsl(175, 52%, 22%);
542
- --t-fill-color-product-services-base: hsl(88, 45%, 41%);
543
- --t-fill-color-product-services-light: hsl(88, 40%, 54%);
544
- --t-fill-color-product-services-lighter: hsl(88, 39%, 66%);
545
- --t-fill-color-product-services-lightest: hsl(88, 39%, 75%);
546
- --t-fill-color-product-services-dark: hsl(89, 62%, 32%);
547
- --t-fill-color-product-services-darker: hsl(89, 62%, 26%);
548
- --t-fill-color-product-services-darkest: hsl(89, 63%, 21%);
549
- --t-fill-color-product-staff-base: hsl(328, 100%, 45%);
550
567
  --t-fill-color-transparency-light-010: hsla(0, 0%, 100%, 0.1);
551
568
  --t-fill-color-transparency-light-020: hsla(0, 0%, 100%, 0.2);
552
569
  --t-fill-color-transparency-light-030: hsla(0, 0%, 100%, 0.3);
@@ -570,11 +587,11 @@
570
587
  --t-border-color-default-base: hsl(0, 0%, 88%);
571
588
  --t-border-color-default-dark: hsl(0, 0%, 81%);
572
589
  --t-border-color-default-darker: hsl(0, 0%, 68%);
573
- --t-border-color-default-darkest: hsl(0, 0%, 62%);
590
+ --t-border-color-default-darkest: hsl(0, 0%, 58%);
574
591
  --t-border-color-default-disabled: hsl(0, 0%, 88%);
575
592
  --t-border-color-default-dim: hsl(0, 0%, 95%);
576
593
  --t-border-color-default-white: hsl(0, 0%, 100%);
577
- --t-border-color-status-neutral: hsl(0, 0%, 62%);
594
+ --t-border-color-status-neutral: hsl(0, 0%, 58%);
578
595
  --t-border-color-status-info: hsl(204, 100%, 40%);
579
596
  --t-border-color-status-success: hsl(97, 57%, 40%);
580
597
  --t-border-color-status-warning: hsl(42, 84%, 63%);
@@ -589,42 +606,154 @@
589
606
  --t-border-color-control-warning: hsl(42, 84%, 63%);
590
607
  --t-border-color-control-error: hsl(8, 60%, 47%);
591
608
  --t-border-color-control-disabled: hsl(0, 0%, 88%);
592
- --t-text-color-tag-gray: hsl(0, 0%, 24%);
593
- --t-text-color-tag-magenta: hsl(285, 71%, 20%);
594
- --t-text-color-tag-blue: hsl(224, 47%, 31%);
595
- --t-text-color-tag-aqua: hsl(209, 77%, 22%);
596
- --t-text-color-tag-teal: hsl(180, 95%, 15%);
597
- --t-text-color-tag-green: hsl(100, 93%, 17%);
598
- --t-text-color-tag-yellow: hsl(29, 100%, 23%);
599
- --t-text-color-tag-orange: hsl(18, 100%, 18%);
600
- --t-text-color-tag-pink: hsl(327, 88%, 20%);
601
- --t-text-color-tag-purple: hsl(268, 71%, 27%);
609
+ --t-text-color-tag-gray: var(--t-text-color-tag-bold-gray);
610
+ --t-text-color-tag-magenta: var(--t-text-color-tag-bold-magenta);
611
+ --t-text-color-tag-blue: var(--t-text-color-tag-bold-blue);
612
+ --t-text-color-tag-aqua: var(--t-text-color-tag-bold-aqua);
613
+ --t-text-color-tag-teal: var(--t-text-color-tag-bold-teal);
614
+ --t-text-color-tag-green: var(--t-text-color-tag-bold-green);
615
+ --t-text-color-tag-yellow: var(--t-text-color-tag-bold-yellow);
616
+ --t-text-color-tag-orange: var(--t-text-color-tag-bold-orange);
617
+ --t-text-color-tag-pink: var(--t-text-color-tag-bold-pink);
618
+ --t-text-color-tag-purple: var(--t-text-color-tag-bold-purple);
602
619
  --t-icon-color-status-neutral-dark: hsl(0, 0%, 24%);
603
620
  --t-icon-color-status-info-secondary: hsl(204, 100%, 40%);
604
621
  --t-fill-color-alert-info: hsl(204, 94%, 49%);
605
622
  --t-fill-color-alert-success: hsl(122, 60%, 41%);
606
623
  --t-fill-color-alert-warning: hsl(43, 96%, 58%);
607
624
  --t-fill-color-alert-error: hsl(4, 77%, 59%);
625
+ --t-fill-color-product-accounts-lightest: var(--t-fill-color-product-accounts-010);
626
+ --t-fill-color-product-accounts-lighter: var(--t-fill-color-product-accounts-020);
627
+ --t-fill-color-product-accounts-light: var(--t-fill-color-product-accounts-040);
628
+ --t-fill-color-product-accounts-base: var(--t-fill-color-product-accounts-050);
629
+ --t-fill-color-product-accounts-dark: var(--t-fill-color-product-accounts-060);
630
+ --t-fill-color-product-accounts-darker: var(--t-fill-color-product-accounts-070);
631
+ --t-fill-color-product-accounts-darkest: var(--t-fill-color-product-accounts-080);
632
+ --t-fill-color-product-calendar-lightest: var(--t-fill-color-product-calendar-020);
633
+ --t-fill-color-product-calendar-lighter: var(--t-fill-color-product-calendar-030);
634
+ --t-fill-color-product-calendar-light: var(--t-fill-color-product-calendar-040);
635
+ --t-fill-color-product-calendar-base: var(--t-fill-color-product-calendar-050);
636
+ --t-fill-color-product-calendar-dark: var(--t-fill-color-product-calendar-060);
637
+ --t-fill-color-product-calendar-darker: var(--t-fill-color-product-calendar-070);
638
+ --t-fill-color-product-calendar-darkest: var(--t-fill-color-product-calendar-080);
639
+ --t-fill-color-product-checkins-lightest: var(--t-fill-color-product-checkins-020);
640
+ --t-fill-color-product-checkins-lighter: var(--t-fill-color-product-checkins-030);
641
+ --t-fill-color-product-checkins-light: var(--t-fill-color-product-checkins-040);
642
+ --t-fill-color-product-checkins-base: var(--t-fill-color-product-checkins-050);
643
+ --t-fill-color-product-checkins-dark: var(--t-fill-color-product-checkins-060);
644
+ --t-fill-color-product-checkins-darker: var(--t-fill-color-product-checkins-070);
645
+ --t-fill-color-product-checkins-darkest: var(--t-fill-color-product-checkins-080);
646
+ --t-fill-color-product-giving-lightest: var(--t-fill-color-product-giving-020);
647
+ --t-fill-color-product-giving-lighter: var(--t-fill-color-product-giving-030);
648
+ --t-fill-color-product-giving-light: var(--t-fill-color-product-giving-040);
649
+ --t-fill-color-product-giving-base: var(--t-fill-color-product-giving-050);
650
+ --t-fill-color-product-giving-dark: var(--t-fill-color-product-giving-060);
651
+ --t-fill-color-product-giving-darker: var(--t-fill-color-product-giving-070);
652
+ --t-fill-color-product-giving-darkest: var(--t-fill-color-product-giving-080);
653
+ --t-fill-color-product-groups-lightest: var(--t-fill-color-product-groups-020);
654
+ --t-fill-color-product-groups-lighter: var(--t-fill-color-product-groups-030);
655
+ --t-fill-color-product-groups-light: var(--t-fill-color-product-groups-040);
656
+ --t-fill-color-product-groups-base: var(--t-fill-color-product-groups-050);
657
+ --t-fill-color-product-groups-dark: var(--t-fill-color-product-groups-060);
658
+ --t-fill-color-product-groups-darker: var(--t-fill-color-product-groups-070);
659
+ --t-fill-color-product-groups-darkest: var(--t-fill-color-product-groups-080);
660
+ --t-fill-color-product-home-lightest: var(--t-fill-color-product-home-020);
661
+ --t-fill-color-product-home-lighter: var(--t-fill-color-product-home-030);
662
+ --t-fill-color-product-home-light: var(--t-fill-color-product-home-040);
663
+ --t-fill-color-product-home-base: var(--t-fill-color-product-home-050);
664
+ --t-fill-color-product-home-dark: var(--t-fill-color-product-home-060);
665
+ --t-fill-color-product-home-darker: var(--t-fill-color-product-home-070);
666
+ --t-fill-color-product-home-darkest: var(--t-fill-color-product-home-080);
667
+ --t-fill-color-product-people-lightest: var(--t-fill-color-product-people-020);
668
+ --t-fill-color-product-people-lighter: var(--t-fill-color-product-people-030);
669
+ --t-fill-color-product-people-light: var(--t-fill-color-product-people-040);
670
+ --t-fill-color-product-people-base: var(--t-fill-color-product-people-050);
671
+ --t-fill-color-product-people-dark: var(--t-fill-color-product-people-060);
672
+ --t-fill-color-product-people-darker: var(--t-fill-color-product-people-070);
673
+ --t-fill-color-product-people-darkest: var(--t-fill-color-product-people-080);
674
+ --t-fill-color-product-publishing-lightest: var(--t-fill-color-product-publishing-020);
675
+ --t-fill-color-product-publishing-lighter: var(--t-fill-color-product-publishing-030);
676
+ --t-fill-color-product-publishing-light: var(--t-fill-color-product-publishing-040);
677
+ --t-fill-color-product-publishing-base: var(--t-fill-color-product-publishing-050);
678
+ --t-fill-color-product-publishing-dark: var(--t-fill-color-product-publishing-060);
679
+ --t-fill-color-product-publishing-darker: var(--t-fill-color-product-publishing-070);
680
+ --t-fill-color-product-publishing-darkest: var(--t-fill-color-product-publishing-080);
681
+ --t-fill-color-product-registrations-lightest: var(--t-fill-color-product-registrations-020);
682
+ --t-fill-color-product-registrations-lighter: var(--t-fill-color-product-registrations-030);
683
+ --t-fill-color-product-registrations-light: var(--t-fill-color-product-registrations-040);
684
+ --t-fill-color-product-registrations-base: var(--t-fill-color-product-registrations-050);
685
+ --t-fill-color-product-registrations-dark: var(--t-fill-color-product-registrations-060);
686
+ --t-fill-color-product-registrations-darker: var(--t-fill-color-product-registrations-070);
687
+ --t-fill-color-product-registrations-darkest: var(--t-fill-color-product-registrations-080);
688
+ --t-fill-color-product-services-lightest: var(--t-fill-color-product-services-020);
689
+ --t-fill-color-product-services-lighter: var(--t-fill-color-product-services-030);
690
+ --t-fill-color-product-services-light: var(--t-fill-color-product-services-040);
691
+ --t-fill-color-product-services-base: var(--t-fill-color-product-services-050);
692
+ --t-fill-color-product-services-dark: var(--t-fill-color-product-services-060);
693
+ --t-fill-color-product-services-darker: var(--t-fill-color-product-services-070);
694
+ --t-fill-color-product-services-darkest: var(--t-fill-color-product-services-080);
695
+ --t-fill-color-tag-subtle-gray: var(--t-fill-color-tag-gray-010);
696
+ --t-fill-color-tag-subtle-blue: var(--t-fill-color-tag-blue-010);
697
+ --t-fill-color-tag-subtle-aqua: var(--t-fill-color-tag-aqua-010);
698
+ --t-fill-color-tag-subtle-teal: var(--t-fill-color-tag-teal-010);
699
+ --t-fill-color-tag-subtle-green: var(--t-fill-color-tag-green-010);
700
+ --t-fill-color-tag-subtle-yellow: var(--t-fill-color-tag-yellow-010);
701
+ --t-fill-color-tag-subtle-orange: var(--t-fill-color-tag-orange-010);
702
+ --t-fill-color-tag-subtle-pink: var(--t-fill-color-tag-pink-010);
703
+ --t-fill-color-tag-subtle-purple: var(--t-fill-color-tag-purple-010);
704
+ --t-fill-color-tag-subtle-magenta: var(--t-fill-color-tag-magenta-010);
705
+ --t-fill-color-tag-subtle-label-gray: var(--t-fill-color-tag-gray-020);
706
+ --t-fill-color-tag-subtle-label-blue: var(--t-fill-color-tag-blue-020);
707
+ --t-fill-color-tag-subtle-label-aqua: var(--t-fill-color-tag-aqua-020);
708
+ --t-fill-color-tag-subtle-label-teal: var(--t-fill-color-tag-teal-020);
709
+ --t-fill-color-tag-subtle-label-green: var(--t-fill-color-tag-green-020);
710
+ --t-fill-color-tag-subtle-label-yellow: var(--t-fill-color-tag-yellow-020);
711
+ --t-fill-color-tag-subtle-label-orange: var(--t-fill-color-tag-orange-020);
712
+ --t-fill-color-tag-subtle-label-pink: var(--t-fill-color-tag-pink-020);
713
+ --t-fill-color-tag-subtle-label-purple: var(--t-fill-color-tag-purple-020);
714
+ --t-fill-color-tag-subtle-label-magenta: var(--t-fill-color-tag-magenta-020);
715
+ --t-fill-color-tag-bold-gray: var(--t-fill-color-tag-gray-030);
716
+ --t-fill-color-tag-bold-blue: var(--t-fill-color-tag-blue-030);
717
+ --t-fill-color-tag-bold-aqua: var(--t-fill-color-tag-aqua-030);
718
+ --t-fill-color-tag-bold-teal: var(--t-fill-color-tag-teal-030);
719
+ --t-fill-color-tag-bold-green: var(--t-fill-color-tag-green-030);
720
+ --t-fill-color-tag-bold-yellow: var(--t-fill-color-tag-yellow-030);
721
+ --t-fill-color-tag-bold-orange: var(--t-fill-color-tag-orange-030);
722
+ --t-fill-color-tag-bold-pink: var(--t-fill-color-tag-pink-030);
723
+ --t-fill-color-tag-bold-purple: var(--t-fill-color-tag-purple-030);
724
+ --t-fill-color-tag-bold-magenta: var(--t-fill-color-tag-magenta-030);
725
+ --t-fill-color-tag-bold-label-gray: var(--t-fill-color-tag-gray-040);
726
+ --t-fill-color-tag-bold-label-blue: var(--t-fill-color-tag-blue-040);
727
+ --t-fill-color-tag-bold-label-aqua: var(--t-fill-color-tag-aqua-040);
728
+ --t-fill-color-tag-bold-label-teal: var(--t-fill-color-tag-teal-040);
729
+ --t-fill-color-tag-bold-label-green: var(--t-fill-color-tag-green-040);
730
+ --t-fill-color-tag-bold-label-yellow: var(--t-fill-color-tag-yellow-040);
731
+ --t-fill-color-tag-bold-label-orange: var(--t-fill-color-tag-orange-040);
732
+ --t-fill-color-tag-bold-label-pink: var(--t-fill-color-tag-pink-040);
733
+ --t-fill-color-tag-bold-label-purple: var(--t-fill-color-tag-purple-040);
734
+ --t-fill-color-tag-bold-label-magenta: var(--t-fill-color-tag-magenta-040);
735
+ --t-fill-color-button-neutral-outline-dim-disabled-solid: hsl(0, 0%, 98%);
736
+ --t-fill-color-button-neutral-ghost-disabled-solid: hsl(0, 0%, 98%);
608
737
  --t-fill-color-button-default-info-solid-default: hsl(204, 100%, 40%);
609
738
  --t-fill-color-button-default-info-solid-hover: hsl(204, 100%, 35%);
610
739
  --t-fill-color-button-default-info-solid-active: hsl(204, 100%, 30%);
611
740
  --t-fill-color-button-default-info-solid-disabled: hsl(0, 0%, 81%);
612
- --t-fill-color-button-default-info-outline-dim-default: hsla(0, 0%, 100%, 0);
741
+ --t-fill-color-button-default-info-outline-dim-default: #ffffff00;
613
742
  --t-fill-color-button-default-info-outline-dim-hover: hsl(204, 100%, 97%);
614
743
  --t-fill-color-button-default-info-outline-dim-active: hsl(203, 94%, 94%);
615
- --t-fill-color-button-default-info-outline-dim-disabled: hsla(0, 0%, 100%, 0);
616
- --t-fill-color-button-default-info-ghost-default: hsla(0, 0%, 100%, 0);
744
+ --t-fill-color-button-default-info-outline-dim-disabled: #ffffff00;
745
+ --t-fill-color-button-default-info-ghost-default: #ffffff00;
617
746
  --t-fill-color-button-default-info-ghost-hover: hsl(204, 100%, 97%);
618
747
  --t-fill-color-button-default-info-ghost-active: hsl(203, 94%, 94%);
619
- --t-fill-color-button-default-info-ghost-disabled: hsla(0, 0%, 100%, 0);
748
+ --t-fill-color-button-default-info-ghost-disabled: #ffffff00;
620
749
  --t-fill-color-button-create-solid-default: hsl(96, 57%, 33%);
621
750
  --t-fill-color-button-create-solid-hover: hsl(97, 57%, 28%);
622
751
  --t-fill-color-button-create-solid-active: hsl(97, 57%, 23%);
623
752
  --t-fill-color-button-create-solid-disabled: hsl(0, 0%, 81%);
624
- --t-fill-color-button-create-ghost-default: hsla(0, 0%, 100%, 0);
753
+ --t-fill-color-button-create-ghost-default: #ffffff00;
625
754
  --t-fill-color-button-create-ghost-hover: hsl(96, 60%, 95%);
626
755
  --t-fill-color-button-create-ghost-active: hsl(97, 57%, 90%);
627
- --t-fill-color-button-create-ghost-disabled: hsla(0, 0%, 100%, 0);
756
+ --t-fill-color-button-create-ghost-disabled: #ffffff00;
628
757
  }
629
758
 
630
759
  /**