@justeattakeaway/pie-css 0.24.0 → 0.25.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 (2) hide show
  1. package/dist/index.css +93 -82
  2. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -35,8 +35,8 @@
35
35
  --dt-color-charcoal-70: #3c4c4f;
36
36
  --dt-color-charcoal-75: #303d3f;
37
37
  --dt-color-charcoal-80: #242e30;
38
- --dt-color-cupcake-10: #e0ecee;
39
- --dt-color-cupcake-20: #d0e3e6;
38
+ --dt-color-cupcake-10: #e8f1f2;
39
+ --dt-color-cupcake-20: #dbe9eb;
40
40
  --dt-color-cupcake-30: #c1dade;
41
41
  --dt-color-cupcake-40: #b1cace;
42
42
  --dt-color-cupcake-70: #6a787a;
@@ -50,8 +50,8 @@
50
50
  --dt-color-green-90: #023d1c;
51
51
  --dt-color-green-dark-hc: #196634;
52
52
  --dt-color-green-light-hc: #26d46e;
53
- --dt-color-latte-10: #f2e6ce;
54
- --dt-color-latte-20: #eddbba;
53
+ --dt-color-latte-10: #f4ead7;
54
+ --dt-color-latte-20: #f0e2c7;
55
55
  --dt-color-latte-30: #e7cda2;
56
56
  --dt-color-latte-70: #81735b;
57
57
  --dt-color-latte-80: #5a503f;
@@ -171,6 +171,7 @@
171
171
  --dt-color-interactive-secondary: var(--dt-color-truffle-10);
172
172
  --dt-color-interactive-inverse: var(--dt-color-white);
173
173
  --dt-color-interactive-light: var(--dt-color-white);
174
+ --dt-color-interactive-dark: var(--dt-color-truffle-90);
174
175
  --dt-color-interactive-form: var(--dt-color-truffle-65);
175
176
  --dt-color-interactive-error: var(--dt-color-red);
176
177
  --dt-color-overlay: rgb(0,0,0,0.55);
@@ -318,33 +319,32 @@
318
319
  --dt-font-family-code: 'PTMono';
319
320
  --dt-font-family-primary: 'JetSansDigital';
320
321
  --dt-font-family-secondary: 'Arial';
322
+ --dt-font-line-height-16: 16;
323
+ --dt-font-line-height-20: 20;
324
+ --dt-font-line-height-24: 24;
325
+ --dt-font-line-height-28: 28;
326
+ --dt-font-line-height-32: 32;
327
+ --dt-font-line-height-36: 36;
328
+ --dt-font-line-height-52: 52;
321
329
  --dt-font-paragraph-spacing-01: 16;
322
330
  --dt-font-paragraph-spacing-02: 14;
323
331
  --dt-font-paragraph-spacing-03: 12;
324
- /* Size-12 font theme */
325
332
  --dt-font-size-12: 12;
326
333
  --dt-font-size-12-line-height: 16;
327
- /* Size-14 font theme */
328
334
  --dt-font-size-14: 14;
329
335
  --dt-font-size-14-line-height: 20;
330
- /* Size-16 font theme */
331
336
  --dt-font-size-16: 16;
332
337
  --dt-font-size-16-line-height: 24;
333
- /* Size-20 font theme */
334
338
  --dt-font-size-20: 20;
335
- --dt-font-size-20-line-height: 28;
336
- /* Size-24 font theme */
339
+ --dt-font-size-20-line-height: 24;
337
340
  --dt-font-size-24: 24;
338
- --dt-font-size-24-line-height: 32;
339
- /* Size-28 font theme */
341
+ --dt-font-size-24-line-height: 28;
340
342
  --dt-font-size-28: 28;
341
- --dt-font-size-28-line-height: 36;
342
- /* Size-32 font theme */
343
+ --dt-font-size-28-line-height: 32;
343
344
  --dt-font-size-32: 32;
344
- --dt-font-size-32-line-height: 40;
345
- /* Size-48 font theme */
345
+ --dt-font-size-32-line-height: 36;
346
346
  --dt-font-size-48: 48;
347
- --dt-font-size-48-line-height: 56;
347
+ --dt-font-size-48-line-height: 52;
348
348
  --dt-font-style-italic: italic;
349
349
  --dt-font-style-underline: underline;
350
350
  --dt-font-weight-black: 900;
@@ -355,201 +355,201 @@
355
355
  /* Alias tokens - Font */
356
356
  /* Heading-xs font theme */
357
357
  --dt-font-heading-xs-size--wide: var(--dt-font-size-16);
358
+ --dt-font-heading-xs-line-height--wide: var(--dt-font-line-height-20);
358
359
  --dt-font-heading-xs-size--narrow: var(--dt-font-size-14);
360
+ --dt-font-heading-xs-line-height--narrow: var(--dt-font-line-height-20);
359
361
  --dt-font-heading-xs-family: var(--dt-font-family-primary);
360
- --dt-font-heading-xs-weight: var(--dt-font-weight-extrabold);
361
- --dt-font-heading-xs-line-height--wide: var(--dt-font-size-16-line-height);
362
- --dt-font-heading-xs-line-height--narrow: var(--dt-font-size-14-line-height);
362
+ --dt-font-heading-xs-weight: var(--dt-font-weight-black);
363
363
  /* Heading-s font theme */
364
364
  --dt-font-heading-s-size--wide: var(--dt-font-size-20);
365
+ --dt-font-heading-s-line-height--wide: var(--dt-font-line-height-24);
365
366
  --dt-font-heading-s-size--narrow: var(--dt-font-size-16);
367
+ --dt-font-heading-s-line-height--narrow: var(--dt-font-line-height-20);
366
368
  --dt-font-heading-s-family: var(--dt-font-family-primary);
367
- --dt-font-heading-s-weight: var(--dt-font-weight-extrabold);
368
- --dt-font-heading-s-line-height--wide: var(--dt-font-size-20-line-height);
369
- --dt-font-heading-s-line-height--narrow: var(--dt-font-size-16-line-height);
369
+ --dt-font-heading-s-weight: var(--dt-font-weight-black);
370
370
  /* Heading-m font theme */
371
371
  --dt-font-heading-m-size--wide: var(--dt-font-size-24);
372
+ --dt-font-heading-m-line-height--wide: var(--dt-font-line-height-28);
372
373
  --dt-font-heading-m-size--narrow: var(--dt-font-size-20);
374
+ --dt-font-heading-m-line-height--narrow: var(--dt-font-line-height-24);
373
375
  --dt-font-heading-m-family: var(--dt-font-family-primary);
374
- --dt-font-heading-m-weight: var(--dt-font-weight-extrabold);
375
- --dt-font-heading-m-line-height--wide: var(--dt-font-size-24-line-height);
376
- --dt-font-heading-m-line-height--narrow: var(--dt-font-size-20-line-height);
376
+ --dt-font-heading-m-weight: var(--dt-font-weight-black);
377
377
  /* Heading-l font theme */
378
378
  --dt-font-heading-l-size--wide: var(--dt-font-size-28);
379
+ --dt-font-heading-l-line-height--wide: var(--dt-font-line-height-32);
379
380
  --dt-font-heading-l-size--narrow: var(--dt-font-size-24);
381
+ --dt-font-heading-l-line-height--narrow: var(--dt-font-line-height-28);
380
382
  --dt-font-heading-l-family: var(--dt-font-family-primary);
381
- --dt-font-heading-l-weight: var(--dt-font-weight-extrabold);
382
- --dt-font-heading-l-line-height--wide: var(--dt-font-size-28-line-height);
383
- --dt-font-heading-l-line-height--narrow: var(--dt-font-size-24-line-height);
383
+ --dt-font-heading-l-weight: var(--dt-font-weight-black);
384
384
  /* Heading-xl font theme */
385
385
  --dt-font-heading-xl-size--wide: var(--dt-font-size-32);
386
+ --dt-font-heading-xl-line-height--wide: var(--dt-font-line-height-36);
386
387
  --dt-font-heading-xl-size--narrow: var(--dt-font-size-28);
388
+ --dt-font-heading-xl-line-height--narrow: var(--dt-font-line-height-32);
387
389
  --dt-font-heading-xl-family: var(--dt-font-family-primary);
388
- --dt-font-heading-xl-weight: var(--dt-font-weight-extrabold);
389
- --dt-font-heading-xl-line-height--wide: var(--dt-font-size-32-line-height);
390
- --dt-font-heading-xl-line-height--narrow: var(--dt-font-size-28-line-height);
390
+ --dt-font-heading-xl-weight: var(--dt-font-weight-extrablack);
391
391
  /* Heading-xxl font theme */
392
392
  --dt-font-heading-xxl-size--wide: var(--dt-font-size-48);
393
+ --dt-font-heading-xxl-line-height--wide: var(--dt-font-line-height-52);
393
394
  --dt-font-heading-xxl-size--narrow: var(--dt-font-size-32);
395
+ --dt-font-heading-xxl-line-height--narrow: var(--dt-font-line-height-36);
394
396
  --dt-font-heading-xxl-family: var(--dt-font-family-primary);
395
- --dt-font-heading-xxl-weight: var(--dt-font-weight-extrabold);
396
- --dt-font-heading-xxl-line-height--wide: var(--dt-font-size-48-line-height);
397
- --dt-font-heading-xxl-line-height--narrow: var(--dt-font-size-32-line-height);
397
+ --dt-font-heading-xxl-weight: var(--dt-font-weight-extrablack);
398
398
  /* Heading-xs-italic font theme */
399
399
  --dt-font-heading-xs-italic-size--wide: var(--dt-font-size-16);
400
+ --dt-font-heading-xs-italic-line-height--wide: var(--dt-font-line-height-20);
400
401
  --dt-font-heading-xs-italic-size--narrow: var(--dt-font-size-14);
402
+ --dt-font-heading-xs-italic-line-height--narrow: var(--dt-font-line-height-20);
401
403
  --dt-font-heading-xs-italic-family: var(--dt-font-family-primary);
402
- --dt-font-heading-xs-italic-weight: var(--dt-font-weight-extrabold);
404
+ --dt-font-heading-xs-italic-weight: var(--dt-font-weight-black);
403
405
  --dt-font-heading-xs-italic-font-style: var(--dt-font-style-italic);
404
- --dt-font-heading-xs-italic-line-height--wide: var(--dt-font-size-16-line-height);
405
- --dt-font-heading-xs-italic-line-height--narrow: var(--dt-font-size-14-line-height);
406
406
  /* Heading-s-italic font theme */
407
407
  --dt-font-heading-s-italic-size--wide: var(--dt-font-size-20);
408
+ --dt-font-heading-s-italic-line-height--wide: var(--dt-font-line-height-24);
408
409
  --dt-font-heading-s-italic-size--narrow: var(--dt-font-size-16);
410
+ --dt-font-heading-s-italic-line-height--narrow: var(--dt-font-line-height-20);
409
411
  --dt-font-heading-s-italic-family: var(--dt-font-family-primary);
410
- --dt-font-heading-s-italic-weight: var(--dt-font-weight-extrabold);
412
+ --dt-font-heading-s-italic-weight: var(--dt-font-weight-black);
411
413
  --dt-font-heading-s-italic-font-style: var(--dt-font-style-italic);
412
- --dt-font-heading-s-italic-line-height--wide: var(--dt-font-size-20-line-height);
413
- --dt-font-heading-s-italic-line-height--narrow: var(--dt-font-size-16-line-height);
414
414
  /* Heading-m-italic font theme */
415
415
  --dt-font-heading-m-italic-size--wide: var(--dt-font-size-24);
416
+ --dt-font-heading-m-italic-line-height--wide: var(--dt-font-line-height-28);
416
417
  --dt-font-heading-m-italic-size--narrow: var(--dt-font-size-20);
418
+ --dt-font-heading-m-italic-line-height--narrow: var(--dt-font-line-height-24);
417
419
  --dt-font-heading-m-italic-family: var(--dt-font-family-primary);
418
420
  --dt-font-heading-m-italic-weight: var(--dt-font-weight-black);
419
421
  --dt-font-heading-m-italic-font-style: var(--dt-font-style-italic);
420
- --dt-font-heading-m-italic-line-height--wide: var(--dt-font-size-24-line-height);
421
- --dt-font-heading-m-italic-line-height--narrow: var(--dt-font-size-20-line-height);
422
422
  /* Heading-l-italic font theme */
423
423
  --dt-font-heading-l-italic-size--wide: var(--dt-font-size-28);
424
+ --dt-font-heading-l-italic-line-height--wide: var(--dt-font-line-height-32);
424
425
  --dt-font-heading-l-italic-size--narrow: var(--dt-font-size-24);
426
+ --dt-font-heading-l-italic-line-height--narrow: var(--dt-font-line-height-28);
425
427
  --dt-font-heading-l-italic-family: var(--dt-font-family-primary);
426
428
  --dt-font-heading-l-italic-weight: var(--dt-font-weight-black);
427
429
  --dt-font-heading-l-italic-font-style: var(--dt-font-style-italic);
428
- --dt-font-heading-l-italic-line-height--wide: var(--dt-font-size-28-line-height);
429
- --dt-font-heading-l-italic-line-height--narrow: var(--dt-font-size-24-line-height);
430
430
  /* Heading-xl-italic font theme */
431
431
  --dt-font-heading-xl-italic-size--wide: var(--dt-font-size-32);
432
+ --dt-font-heading-xl-italic-line-height--wide: var(--dt-font-line-height-36);
432
433
  --dt-font-heading-xl-italic-size--narrow: var(--dt-font-size-28);
434
+ --dt-font-heading-xl-italic-line-height--narrow: var(--dt-font-line-height-32);
433
435
  --dt-font-heading-xl-italic-family: var(--dt-font-family-primary);
434
436
  --dt-font-heading-xl-italic-weight: var(--dt-font-weight-extrablack);
435
437
  --dt-font-heading-xl-italic-font-style: var(--dt-font-style-italic);
436
- --dt-font-heading-xl-italic-line-height--wide: var(--dt-font-size-32-line-height);
437
- --dt-font-heading-xl-italic-line-height--narrow: var(--dt-font-size-28-line-height);
438
438
  /* Heading-xxl-italic font theme */
439
439
  --dt-font-heading-xxl-italic-size--wide: var(--dt-font-size-48);
440
+ --dt-font-heading-xxl-italic-line-height--wide: var(--dt-font-line-height-52);
440
441
  --dt-font-heading-xxl-italic-size--narrow: var(--dt-font-size-32);
442
+ --dt-font-heading-xxl-italic-line-height--narrow: var(--dt-font-line-height-36);
441
443
  --dt-font-heading-xxl-italic-family: var(--dt-font-family-primary);
442
444
  --dt-font-heading-xxl-italic-weight: var(--dt-font-weight-extrablack);
443
445
  --dt-font-heading-xxl-italic-font-style: var(--dt-font-style-italic);
444
- --dt-font-heading-xxl-italic-line-height--wide: var(--dt-font-size-48-line-height);
445
- --dt-font-heading-xxl-italic-line-height--narrow: var(--dt-font-size-32-line-height);
446
446
  /* Subheading-s font theme */
447
447
  --dt-font-subheading-s-size--wide: var(--dt-font-size-20);
448
+ --dt-font-subheading-s-line-height--wide: var(--dt-font-line-height-24);
448
449
  --dt-font-subheading-s-size--narrow: var(--dt-font-size-16);
450
+ --dt-font-subheading-s-line-height--narrow: var(--dt-font-line-height-24);
449
451
  --dt-font-subheading-s-family: var(--dt-font-family-primary);
450
452
  --dt-font-subheading-s-weight: var(--dt-font-weight-regular);
451
- --dt-font-subheading-s-line-height--wide: var(--dt-font-size-20-line-height);
452
- --dt-font-subheading-s-line-height--narrow: var(--dt-font-size-16-line-height);
453
453
  /* Subheading-l font theme */
454
454
  --dt-font-subheading-l-size--wide: var(--dt-font-size-24);
455
+ --dt-font-subheading-l-line-height--wide: var(--dt-font-line-height-28);
455
456
  --dt-font-subheading-l-size--narrow: var(--dt-font-size-20);
457
+ --dt-font-subheading-l-line-height--narrow: var(--dt-font-line-height-24);
456
458
  --dt-font-subheading-l-family: var(--dt-font-family-primary);
457
459
  --dt-font-subheading-l-weight: var(--dt-font-weight-regular);
458
- --dt-font-subheading-l-line-height--wide: var(--dt-font-size-24-line-height);
459
- --dt-font-subheading-l-line-height--narrow: var(--dt-font-size-20-line-height);
460
460
  /* Interactive-xs font theme */
461
461
  --dt-font-interactive-xs-size: var(--dt-font-size-14);
462
+ --dt-font-interactive-xs-line-height: var(--dt-font-line-height-20);
462
463
  --dt-font-interactive-xs-family: var(--dt-font-family-primary);
463
464
  --dt-font-interactive-xs-weight: var(--dt-font-weight-bold);
464
- --dt-font-interactive-xs-line-height: var(--dt-font-size-14-line-height);
465
465
  /* Interactive-s font theme */
466
466
  --dt-font-interactive-s-size: var(--dt-font-size-16);
467
+ --dt-font-interactive-s-line-height: var(--dt-font-line-height-20);
467
468
  --dt-font-interactive-s-family: var(--dt-font-family-primary);
468
- --dt-font-interactive-s-weight: var(--dt-font-weight-bold);
469
- --dt-font-interactive-s-line-height: var(--dt-font-size-16-line-height);
469
+ --dt-font-interactive-s-weight: var(--dt-font-weight-extrabold);
470
470
  /* Interactive-l font theme */
471
471
  --dt-font-interactive-l-size: var(--dt-font-size-20);
472
+ --dt-font-interactive-l-line-height: var(--dt-font-line-height-24);
472
473
  --dt-font-interactive-l-family: var(--dt-font-family-primary);
473
- --dt-font-interactive-l-weight: var(--dt-font-weight-bold);
474
- --dt-font-interactive-l-line-height: var(--dt-font-size-20-line-height);
474
+ --dt-font-interactive-l-weight: var(--dt-font-weight-extrabold);
475
475
  /* Body-s font theme */
476
476
  --dt-font-body-s-size: var(--dt-font-size-14);
477
+ --dt-font-body-s-line-height: var(--dt-font-line-height-20);
477
478
  --dt-font-body-s-family: var(--dt-font-family-primary);
478
479
  --dt-font-body-s-weight: var(--dt-font-weight-regular);
479
480
  --dt-font-body-s-paragraph: var(--dt-font-paragraph-spacing-02);
480
- --dt-font-body-s-line-height: var(--dt-font-size-14-line-height);
481
481
  /* Body-s-link font theme */
482
482
  --dt-font-body-s-link-size: var(--dt-font-size-14);
483
+ --dt-font-body-s-link-line-height: var(--dt-font-line-height-20);
483
484
  --dt-font-body-s-link-family: var(--dt-font-family-primary);
484
485
  --dt-font-body-s-link-weight: var(--dt-font-weight-regular);
485
486
  --dt-font-body-s-link-paragraph: var(--dt-font-paragraph-spacing-02);
486
487
  --dt-font-body-s-link-text-decoration: var(--dt-font-style-underline);
487
- --dt-font-body-s-link-line-height: var(--dt-font-size-14-line-height);
488
488
  /* Body-l font theme */
489
489
  --dt-font-body-l-size: var(--dt-font-size-16);
490
+ --dt-font-body-l-line-height: var(--dt-font-line-height-24);
490
491
  --dt-font-body-l-family: var(--dt-font-family-primary);
491
492
  --dt-font-body-l-weight: var(--dt-font-weight-regular);
492
493
  --dt-font-body-l-paragraph: var(--dt-font-paragraph-spacing-01);
493
- --dt-font-body-l-line-height: var(--dt-font-size-16-line-height);
494
494
  /* Body-l-link font theme */
495
495
  --dt-font-body-l-link-size: var(--dt-font-size-16);
496
+ --dt-font-body-l-link-line-height: var(--dt-font-line-height-24);
496
497
  --dt-font-body-l-link-family: var(--dt-font-family-primary);
497
498
  --dt-font-body-l-link-weight: var(--dt-font-weight-regular);
498
499
  --dt-font-body-l-link-paragraph: var(--dt-font-paragraph-spacing-01);
499
500
  --dt-font-body-l-link-text-decoration: var(--dt-font-style-underline);
500
- --dt-font-body-l-link-line-height: var(--dt-font-size-16-line-height);
501
501
  /* Body-strong-s font theme */
502
502
  --dt-font-body-strong-s-size: var(--dt-font-size-14);
503
+ --dt-font-body-strong-s-line-height: var(--dt-font-line-height-20);
503
504
  --dt-font-body-strong-s-family: var(--dt-font-family-primary);
504
505
  --dt-font-body-strong-s-weight: var(--dt-font-weight-bold);
505
506
  --dt-font-body-strong-s-paragraph: var(--dt-font-paragraph-spacing-02);
506
- --dt-font-body-strong-s-line-height: var(--dt-font-size-14-line-height);
507
507
  /* Body-strong-s-link font theme */
508
508
  --dt-font-body-strong-s-link-size: var(--dt-font-size-14);
509
+ --dt-font-body-strong-s-link-line-height: var(--dt-font-line-height-20);
509
510
  --dt-font-body-strong-s-link-family: var(--dt-font-family-primary);
510
511
  --dt-font-body-strong-s-link-weight: var(--dt-font-weight-bold);
511
512
  --dt-font-body-strong-s-link-paragraph: var(--dt-font-paragraph-spacing-02);
512
513
  --dt-font-body-strong-s-link-text-decoration: var(--dt-font-style-underline);
513
- --dt-font-body-strong-s-link-line-height: var(--dt-font-size-14-line-height);
514
514
  /* Body-strong-l font theme */
515
515
  --dt-font-body-strong-l-size: var(--dt-font-size-16);
516
+ --dt-font-body-strong-l-line-height: var(--dt-font-line-height-24);
516
517
  --dt-font-body-strong-l-family: var(--dt-font-family-primary);
517
518
  --dt-font-body-strong-l-weight: var(--dt-font-weight-bold);
518
519
  --dt-font-body-strong-l-paragraph: var(--dt-font-paragraph-spacing-01);
519
- --dt-font-body-strong-l-line-height: var(--dt-font-size-16-line-height);
520
520
  /* Body-strong-l-link font theme */
521
521
  --dt-font-body-strong-l-link-size: var(--dt-font-size-16);
522
+ --dt-font-body-strong-l-link-line-height: var(--dt-font-line-height-24);
522
523
  --dt-font-body-strong-l-link-family: var(--dt-font-family-primary);
523
524
  --dt-font-body-strong-l-link-weight: var(--dt-font-weight-bold);
524
525
  --dt-font-body-strong-l-link-paragraph: var(--dt-font-paragraph-spacing-01);
525
526
  --dt-font-body-strong-l-link-text-decoration: var(--dt-font-style-underline);
526
- --dt-font-body-strong-l-link-line-height: var(--dt-font-size-16-line-height);
527
527
  /* Caption font theme */
528
528
  --dt-font-caption-size: var(--dt-font-size-12);
529
+ --dt-font-caption-line-height: var(--dt-font-line-height-16);
529
530
  --dt-font-caption-family: var(--dt-font-family-primary);
530
531
  --dt-font-caption-weight: var(--dt-font-weight-regular);
531
532
  --dt-font-caption-paragraph: var(--dt-font-paragraph-spacing-03);
532
- --dt-font-caption-line-height: var(--dt-font-size-12-line-height);
533
533
  /* Caption-link font theme */
534
534
  --dt-font-caption-link-size: var(--dt-font-size-12);
535
+ --dt-font-caption-link-line-height: var(--dt-font-line-height-16);
535
536
  --dt-font-caption-link-family: var(--dt-font-family-primary);
536
537
  --dt-font-caption-link-weight: var(--dt-font-weight-regular);
537
538
  --dt-font-caption-link-paragraph: var(--dt-font-paragraph-spacing-03);
538
539
  --dt-font-caption-link-text-decoration: var(--dt-font-style-underline);
539
- --dt-font-caption-link-line-height: var(--dt-font-size-12-line-height);
540
540
  /* Caption-strong font theme */
541
541
  --dt-font-caption-strong-size: var(--dt-font-size-12);
542
+ --dt-font-caption-strong-line-height: var(--dt-font-line-height-16);
542
543
  --dt-font-caption-strong-family: var(--dt-font-family-primary);
543
544
  --dt-font-caption-strong-weight: var(--dt-font-weight-bold);
544
545
  --dt-font-caption-strong-paragraph: var(--dt-font-paragraph-spacing-03);
545
- --dt-font-caption-strong-line-height: var(--dt-font-size-12-line-height);
546
546
  /* Caption-strong-link font theme */
547
547
  --dt-font-caption-strong-link-size: var(--dt-font-size-12);
548
+ --dt-font-caption-strong-link-line-height: var(--dt-font-line-height-16);
548
549
  --dt-font-caption-strong-link-family: var(--dt-font-family-primary);
549
550
  --dt-font-caption-strong-link-weight: var(--dt-font-weight-bold);
550
551
  --dt-font-caption-strong-link-paragraph: var(--dt-font-paragraph-spacing-03);
551
552
  --dt-font-caption-strong-link-text-decoration: var(--dt-font-style-underline);
552
- --dt-font-caption-strong-link-line-height: var(--dt-font-size-12-line-height);
553
553
  /* Global tokens - Radius */
554
554
  --dt-radius-12: 12px;
555
555
  --dt-radius-16: 16px;
@@ -703,6 +703,7 @@ html[data-color-mode="dark"] {
703
703
  --dt-color-interactive-secondary: var(--dt-color-truffle-75);
704
704
  --dt-color-interactive-inverse: var(--dt-color-truffle-90);
705
705
  --dt-color-interactive-light: var(--dt-color-white);
706
+ --dt-color-interactive-dark: var(--dt-color-truffle-90);
706
707
  --dt-color-interactive-form: var(--dt-color-truffle-55);
707
708
  --dt-color-interactive-error: var(--dt-color-red-50);
708
709
  --dt-color-overlay: rgb(0,0,0,0.55);
@@ -877,6 +878,7 @@ html[data-color-mode="dark"] {
877
878
  --dt-color-interactive-secondary: var(--dt-color-truffle-75);
878
879
  --dt-color-interactive-inverse: var(--dt-color-truffle-90);
879
880
  --dt-color-interactive-light: var(--dt-color-white);
881
+ --dt-color-interactive-dark: var(--dt-color-truffle-90);
880
882
  --dt-color-interactive-form: var(--dt-color-truffle-55);
881
883
  --dt-color-interactive-error: var(--dt-color-red-50);
882
884
  --dt-color-overlay: rgb(0,0,0,0.55);
@@ -1191,12 +1193,12 @@ html[data-color-mode="dark"] {
1191
1193
  --dt-color-charcoal-80-h: 190;
1192
1194
  --dt-color-charcoal-80-s: 14.3%;
1193
1195
  --dt-color-charcoal-80-l: 16.5%;
1194
- --dt-color-cupcake-10-h: 189;
1195
- --dt-color-cupcake-10-s: 29.2%;
1196
- --dt-color-cupcake-10-l: 90.6%;
1197
- --dt-color-cupcake-20-h: 188;
1198
- --dt-color-cupcake-20-s: 30.6%;
1199
- --dt-color-cupcake-20-l: 85.9%;
1196
+ --dt-color-cupcake-10-h: 186;
1197
+ --dt-color-cupcake-10-s: 27.8%;
1198
+ --dt-color-cupcake-10-l: 92.9%;
1199
+ --dt-color-cupcake-20-h: 187;
1200
+ --dt-color-cupcake-20-s: 28.6%;
1201
+ --dt-color-cupcake-20-l: 89%;
1200
1202
  --dt-color-cupcake-30-h: 188;
1201
1203
  --dt-color-cupcake-30-s: 30.5%;
1202
1204
  --dt-color-cupcake-30-l: 81.4%;
@@ -1236,12 +1238,12 @@ html[data-color-mode="dark"] {
1236
1238
  --dt-color-green-light-hc-h: 145;
1237
1239
  --dt-color-green-light-hc-s: 69.6%;
1238
1240
  --dt-color-green-light-hc-l: 49%;
1239
- --dt-color-latte-10-h: 40;
1240
- --dt-color-latte-10-s: 58.1%;
1241
- --dt-color-latte-10-l: 87.8%;
1242
- --dt-color-latte-20-h: 39;
1243
- --dt-color-latte-20-s: 58.6%;
1244
- --dt-color-latte-20-l: 82.9%;
1241
+ --dt-color-latte-10-h: 39;
1242
+ --dt-color-latte-10-s: 56.9%;
1243
+ --dt-color-latte-10-l: 90%;
1244
+ --dt-color-latte-20-h: 40;
1245
+ --dt-color-latte-20-s: 57.7%;
1246
+ --dt-color-latte-20-l: 86.1%;
1245
1247
  --dt-color-latte-30-h: 37;
1246
1248
  --dt-color-latte-30-s: 59%;
1247
1249
  --dt-color-latte-30-l: 77.1%;
@@ -1578,6 +1580,9 @@ html[data-color-mode="dark"] {
1578
1580
  --dt-color-interactive-light-h: var(--dt-color-white-h);
1579
1581
  --dt-color-interactive-light-s: var(--dt-color-white-s);
1580
1582
  --dt-color-interactive-light-l: var(--dt-color-white-l);
1583
+ --dt-color-interactive-dark-h: var(--dt-color-truffle-90-h);
1584
+ --dt-color-interactive-dark-s: var(--dt-color-truffle-90-s);
1585
+ --dt-color-interactive-dark-l: var(--dt-color-truffle-90-l);
1581
1586
  --dt-color-interactive-form-h: var(--dt-color-truffle-65-h);
1582
1587
  --dt-color-interactive-form-s: var(--dt-color-truffle-65-s);
1583
1588
  --dt-color-interactive-form-l: var(--dt-color-truffle-65-l);
@@ -1973,6 +1978,9 @@ html[data-color-mode="dark"] {
1973
1978
  --dt-color-interactive-light-h: var(--dt-color-white-h);
1974
1979
  --dt-color-interactive-light-s: var(--dt-color-white-s);
1975
1980
  --dt-color-interactive-light-l: var(--dt-color-white-l);
1981
+ --dt-color-interactive-dark-h: var(--dt-color-truffle-90-h);
1982
+ --dt-color-interactive-dark-s: var(--dt-color-truffle-90-s);
1983
+ --dt-color-interactive-dark-l: var(--dt-color-truffle-90-l);
1976
1984
  --dt-color-interactive-form-h: var(--dt-color-truffle-55-h);
1977
1985
  --dt-color-interactive-form-s: var(--dt-color-truffle-55-s);
1978
1986
  --dt-color-interactive-form-l: var(--dt-color-truffle-55-l);
@@ -2369,6 +2377,9 @@ html[data-color-mode="dark"] {
2369
2377
  --dt-color-interactive-light-h: var(--dt-color-white-h);
2370
2378
  --dt-color-interactive-light-s: var(--dt-color-white-s);
2371
2379
  --dt-color-interactive-light-l: var(--dt-color-white-l);
2380
+ --dt-color-interactive-dark-h: var(--dt-color-truffle-90-h);
2381
+ --dt-color-interactive-dark-s: var(--dt-color-truffle-90-s);
2382
+ --dt-color-interactive-dark-l: var(--dt-color-truffle-90-l);
2372
2383
  --dt-color-interactive-form-h: var(--dt-color-truffle-55-h);
2373
2384
  --dt-color-interactive-form-s: var(--dt-color-truffle-55-s);
2374
2385
  --dt-color-interactive-form-l: var(--dt-color-truffle-55-l);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-css",
3
- "version": "0.24.0",
3
+ "version": "0.25.0",
4
4
  "description": "A styling library that provides both a shared collection of ready to use CSS styles to be used across JET web front-ends, and SCSS-based style helpers for our PIE Web Component library.",
5
5
  "repository": {
6
6
  "type": "git",