@justeattakeaway/pie-css 0.23.1 → 0.24.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 +33 -25
  2. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -1,12 +1,14 @@
1
1
  :root {
2
2
  /* Global tokens - Color */
3
3
  --dt-color-aubergine-10: #e3cfe3;
4
+ --dt-color-aubergine-100: #241e24;
4
5
  --dt-color-aubergine-20: #d0b2d0;
5
6
  --dt-color-aubergine-30: #b993b8;
6
7
  --dt-color-aubergine-5: #f3e7f3;
7
8
  --dt-color-aubergine-70: #5b3d5b;
8
9
  --dt-color-aubergine-75: #493949;
9
10
  --dt-color-aubergine-80: #3c313c;
11
+ --dt-color-aubergine-90: #322932;
10
12
  --dt-color-berry-10: #fbdfe3;
11
13
  --dt-color-berry-20: #f9d2d7;
12
14
  --dt-color-berry-40: #f2a6b0;
@@ -132,7 +134,7 @@
132
134
  --dt-color-white: #fff;
133
135
  --dt-color-yellow: #ffd600;
134
136
  --dt-color-yellow-10: #fff8d6;
135
- --dt-color-yellow-30: #ffeb80;
137
+ --dt-color-yellow-30: #ffee94;
136
138
  --dt-color-yellow-40: #ffde33;
137
139
  --dt-color-yellow-75: #a38900;
138
140
  --dt-color-yellow-80: #6b5a00;
@@ -396,7 +398,7 @@
396
398
  /* Heading-xs-italic font theme */
397
399
  --dt-font-heading-xs-italic-size--wide: var(--dt-font-size-16);
398
400
  --dt-font-heading-xs-italic-size--narrow: var(--dt-font-size-14);
399
- --dt-font-heading-xs-italic-family: var(--dt-font-family-alternative);
401
+ --dt-font-heading-xs-italic-family: var(--dt-font-family-primary);
400
402
  --dt-font-heading-xs-italic-weight: var(--dt-font-weight-extrabold);
401
403
  --dt-font-heading-xs-italic-font-style: var(--dt-font-style-italic);
402
404
  --dt-font-heading-xs-italic-line-height--wide: var(--dt-font-size-16-line-height);
@@ -404,7 +406,7 @@
404
406
  /* Heading-s-italic font theme */
405
407
  --dt-font-heading-s-italic-size--wide: var(--dt-font-size-20);
406
408
  --dt-font-heading-s-italic-size--narrow: var(--dt-font-size-16);
407
- --dt-font-heading-s-italic-family: var(--dt-font-family-alternative);
409
+ --dt-font-heading-s-italic-family: var(--dt-font-family-primary);
408
410
  --dt-font-heading-s-italic-weight: var(--dt-font-weight-extrabold);
409
411
  --dt-font-heading-s-italic-font-style: var(--dt-font-style-italic);
410
412
  --dt-font-heading-s-italic-line-height--wide: var(--dt-font-size-20-line-height);
@@ -412,7 +414,7 @@
412
414
  /* Heading-m-italic font theme */
413
415
  --dt-font-heading-m-italic-size--wide: var(--dt-font-size-24);
414
416
  --dt-font-heading-m-italic-size--narrow: var(--dt-font-size-20);
415
- --dt-font-heading-m-italic-family: var(--dt-font-family-alternative);
417
+ --dt-font-heading-m-italic-family: var(--dt-font-family-primary);
416
418
  --dt-font-heading-m-italic-weight: var(--dt-font-weight-black);
417
419
  --dt-font-heading-m-italic-font-style: var(--dt-font-style-italic);
418
420
  --dt-font-heading-m-italic-line-height--wide: var(--dt-font-size-24-line-height);
@@ -420,7 +422,7 @@
420
422
  /* Heading-l-italic font theme */
421
423
  --dt-font-heading-l-italic-size--wide: var(--dt-font-size-28);
422
424
  --dt-font-heading-l-italic-size--narrow: var(--dt-font-size-24);
423
- --dt-font-heading-l-italic-family: var(--dt-font-family-alternative);
425
+ --dt-font-heading-l-italic-family: var(--dt-font-family-primary);
424
426
  --dt-font-heading-l-italic-weight: var(--dt-font-weight-black);
425
427
  --dt-font-heading-l-italic-font-style: var(--dt-font-style-italic);
426
428
  --dt-font-heading-l-italic-line-height--wide: var(--dt-font-size-28-line-height);
@@ -428,7 +430,7 @@
428
430
  /* Heading-xl-italic font theme */
429
431
  --dt-font-heading-xl-italic-size--wide: var(--dt-font-size-32);
430
432
  --dt-font-heading-xl-italic-size--narrow: var(--dt-font-size-28);
431
- --dt-font-heading-xl-italic-family: var(--dt-font-family-alternative);
433
+ --dt-font-heading-xl-italic-family: var(--dt-font-family-primary);
432
434
  --dt-font-heading-xl-italic-weight: var(--dt-font-weight-extrablack);
433
435
  --dt-font-heading-xl-italic-font-style: var(--dt-font-style-italic);
434
436
  --dt-font-heading-xl-italic-line-height--wide: var(--dt-font-size-32-line-height);
@@ -436,7 +438,7 @@
436
438
  /* Heading-xxl-italic font theme */
437
439
  --dt-font-heading-xxl-italic-size--wide: var(--dt-font-size-48);
438
440
  --dt-font-heading-xxl-italic-size--narrow: var(--dt-font-size-32);
439
- --dt-font-heading-xxl-italic-family: var(--dt-font-family-alternative);
441
+ --dt-font-heading-xxl-italic-family: var(--dt-font-family-primary);
440
442
  --dt-font-heading-xxl-italic-weight: var(--dt-font-weight-extrablack);
441
443
  --dt-font-heading-xxl-italic-font-style: var(--dt-font-style-italic);
442
444
  --dt-font-heading-xxl-italic-line-height--wide: var(--dt-font-size-48-line-height);
@@ -736,8 +738,8 @@ html[data-color-mode="dark"] {
736
738
  --dt-color-support-brand-05-subtle: var(--dt-color-turmeric-80);
737
739
  --dt-color-support-brand-05-tonal: var(--dt-color-turmeric-90);
738
740
  --dt-color-support-brand-06: var(--dt-color-aubergine-70);
739
- --dt-color-support-brand-06-subtle: var(--dt-color-aubergine-75);
740
- --dt-color-support-brand-06-tonal: var(--dt-color-aubergine-80);
741
+ --dt-color-support-brand-06-subtle: var(--dt-color-aubergine-90);
742
+ --dt-color-support-brand-06-tonal: var(--dt-color-aubergine-100);
741
743
  --dt-color-support-brand-07: var(--dt-color-tomato-50);
742
744
  --dt-color-support-brand-07-subtle: var(--dt-color-tomato-90);
743
745
  --dt-color-support-brand-08: var(--dt-color-latte-30);
@@ -910,8 +912,8 @@ html[data-color-mode="dark"] {
910
912
  --dt-color-support-brand-05-subtle: var(--dt-color-turmeric-80);
911
913
  --dt-color-support-brand-05-tonal: var(--dt-color-turmeric-90);
912
914
  --dt-color-support-brand-06: var(--dt-color-aubergine-70);
913
- --dt-color-support-brand-06-subtle: var(--dt-color-aubergine-75);
914
- --dt-color-support-brand-06-tonal: var(--dt-color-aubergine-80);
915
+ --dt-color-support-brand-06-subtle: var(--dt-color-aubergine-90);
916
+ --dt-color-support-brand-06-tonal: var(--dt-color-aubergine-100);
915
917
  --dt-color-support-brand-07: var(--dt-color-tomato-50);
916
918
  --dt-color-support-brand-07-subtle: var(--dt-color-tomato-90);
917
919
  --dt-color-support-brand-08: var(--dt-color-latte-30);
@@ -1087,6 +1089,9 @@ html[data-color-mode="dark"] {
1087
1089
  --dt-color-aubergine-10-h: 300;
1088
1090
  --dt-color-aubergine-10-s: 26.3%;
1089
1091
  --dt-color-aubergine-10-l: 85.1%;
1092
+ --dt-color-aubergine-100-h: 300;
1093
+ --dt-color-aubergine-100-s: 9.1%;
1094
+ --dt-color-aubergine-100-l: 12.9%;
1090
1095
  --dt-color-aubergine-20-h: 300;
1091
1096
  --dt-color-aubergine-20-s: 24.2%;
1092
1097
  --dt-color-aubergine-20-l: 75.7%;
@@ -1105,6 +1110,9 @@ html[data-color-mode="dark"] {
1105
1110
  --dt-color-aubergine-80-h: 300;
1106
1111
  --dt-color-aubergine-80-s: 10.1%;
1107
1112
  --dt-color-aubergine-80-l: 21.4%;
1113
+ --dt-color-aubergine-90-h: 300;
1114
+ --dt-color-aubergine-90-s: 9.9%;
1115
+ --dt-color-aubergine-90-l: 17.8%;
1108
1116
  --dt-color-berry-10-h: 351;
1109
1117
  --dt-color-berry-10-s: 77.8%;
1110
1118
  --dt-color-berry-10-l: 92.9%;
@@ -1480,9 +1488,9 @@ html[data-color-mode="dark"] {
1480
1488
  --dt-color-yellow-10-h: 50;
1481
1489
  --dt-color-yellow-10-s: 100%;
1482
1490
  --dt-color-yellow-10-l: 92%;
1483
- --dt-color-yellow-30-h: 51;
1491
+ --dt-color-yellow-30-h: 50;
1484
1492
  --dt-color-yellow-30-s: 100%;
1485
- --dt-color-yellow-30-l: 75.1%;
1493
+ --dt-color-yellow-30-l: 79%;
1486
1494
  --dt-color-yellow-40-h: 50;
1487
1495
  --dt-color-yellow-40-s: 100%;
1488
1496
  --dt-color-yellow-40-l: 60%;
@@ -2064,12 +2072,12 @@ html[data-color-mode="dark"] {
2064
2072
  --dt-color-support-brand-06-h: var(--dt-color-aubergine-70-h);
2065
2073
  --dt-color-support-brand-06-s: var(--dt-color-aubergine-70-s);
2066
2074
  --dt-color-support-brand-06-l: var(--dt-color-aubergine-70-l);
2067
- --dt-color-support-brand-06-subtle-h: var(--dt-color-aubergine-75-h);
2068
- --dt-color-support-brand-06-subtle-s: var(--dt-color-aubergine-75-s);
2069
- --dt-color-support-brand-06-subtle-l: var(--dt-color-aubergine-75-l);
2070
- --dt-color-support-brand-06-tonal-h: var(--dt-color-aubergine-80-h);
2071
- --dt-color-support-brand-06-tonal-s: var(--dt-color-aubergine-80-s);
2072
- --dt-color-support-brand-06-tonal-l: var(--dt-color-aubergine-80-l);
2075
+ --dt-color-support-brand-06-subtle-h: var(--dt-color-aubergine-90-h);
2076
+ --dt-color-support-brand-06-subtle-s: var(--dt-color-aubergine-90-s);
2077
+ --dt-color-support-brand-06-subtle-l: var(--dt-color-aubergine-90-l);
2078
+ --dt-color-support-brand-06-tonal-h: var(--dt-color-aubergine-100-h);
2079
+ --dt-color-support-brand-06-tonal-s: var(--dt-color-aubergine-100-s);
2080
+ --dt-color-support-brand-06-tonal-l: var(--dt-color-aubergine-100-l);
2073
2081
  --dt-color-support-brand-07-h: var(--dt-color-tomato-50-h);
2074
2082
  --dt-color-support-brand-07-s: var(--dt-color-tomato-50-s);
2075
2083
  --dt-color-support-brand-07-l: var(--dt-color-tomato-50-l);
@@ -2460,12 +2468,12 @@ html[data-color-mode="dark"] {
2460
2468
  --dt-color-support-brand-06-h: var(--dt-color-aubergine-70-h);
2461
2469
  --dt-color-support-brand-06-s: var(--dt-color-aubergine-70-s);
2462
2470
  --dt-color-support-brand-06-l: var(--dt-color-aubergine-70-l);
2463
- --dt-color-support-brand-06-subtle-h: var(--dt-color-aubergine-75-h);
2464
- --dt-color-support-brand-06-subtle-s: var(--dt-color-aubergine-75-s);
2465
- --dt-color-support-brand-06-subtle-l: var(--dt-color-aubergine-75-l);
2466
- --dt-color-support-brand-06-tonal-h: var(--dt-color-aubergine-80-h);
2467
- --dt-color-support-brand-06-tonal-s: var(--dt-color-aubergine-80-s);
2468
- --dt-color-support-brand-06-tonal-l: var(--dt-color-aubergine-80-l);
2471
+ --dt-color-support-brand-06-subtle-h: var(--dt-color-aubergine-90-h);
2472
+ --dt-color-support-brand-06-subtle-s: var(--dt-color-aubergine-90-s);
2473
+ --dt-color-support-brand-06-subtle-l: var(--dt-color-aubergine-90-l);
2474
+ --dt-color-support-brand-06-tonal-h: var(--dt-color-aubergine-100-h);
2475
+ --dt-color-support-brand-06-tonal-s: var(--dt-color-aubergine-100-s);
2476
+ --dt-color-support-brand-06-tonal-l: var(--dt-color-aubergine-100-l);
2469
2477
  --dt-color-support-brand-07-h: var(--dt-color-tomato-50-h);
2470
2478
  --dt-color-support-brand-07-s: var(--dt-color-tomato-50-s);
2471
2479
  --dt-color-support-brand-07-l: var(--dt-color-tomato-50-l);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-css",
3
- "version": "0.23.1",
3
+ "version": "0.24.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",