@justeattakeaway/pie-css 1.1.3 → 1.3.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 (3) hide show
  1. package/dist/index.css +48 -20
  2. package/package.json +2 -2
  3. package/scss/mixins/_visuallyHidden.scss +11 -1
package/dist/index.css CHANGED
@@ -106,6 +106,8 @@
106
106
  --dt-color-thirdparty-microsoft-grey-60: #8c8c8c;
107
107
  --dt-color-thirdparty-microsoft-grey-70: #5e5e5e;
108
108
  --dt-color-thirdparty-microsoft-grey-80: #2f2f2f;
109
+ --dt-color-thirdparty-morrisons-green-05: #d1fae1;
110
+ --dt-color-thirdparty-morrisons-green-90: #004d1d;
109
111
  --dt-color-tomato-100: #31160d;
110
112
  --dt-color-tomato-30: #ff966d;
111
113
  --dt-color-tomato-5: #ffd3bf;
@@ -129,7 +131,8 @@
129
131
  --dt-color-turmeric-5: #fdf2d8;
130
132
  --dt-color-turmeric-60: #b48c32;
131
133
  --dt-color-turmeric-70: #917228;
132
- --dt-color-turmeric-80: #644f1c;
134
+ --dt-color-turmeric-75: #7A6122;
135
+ --dt-color-turmeric-80: #5D4918;
133
136
  --dt-color-turmeric-90: #443613;
134
137
  --dt-color-white: #fff;
135
138
  --dt-color-yellow: #ffd600;
@@ -316,6 +319,7 @@
316
319
  --dt-color-thirdparty-microsoft-border-secondary-bg: #fff;
317
320
  --dt-color-thirdparty-microsoft-border-secondary: 0%;
318
321
  --dt-color-thirdparty-coop-container-primary: var(--dt-color-thirdparty-coop-blue-05);
322
+ --dt-color-thirdparty-morrisons-container-primary: var(--dt-color-thirdparty-morrisons-green-05);
319
323
  /* Global tokens - Font */
320
324
  --dt-font-family-alternative: 'JETSansVF2';
321
325
  --dt-font-family-code: 'PTMono';
@@ -449,7 +453,7 @@
449
453
  --dt-font-subheading-s-size--wide: var(--dt-font-size-20);
450
454
  --dt-font-subheading-s-line-height--wide: var(--dt-font-line-height-24);
451
455
  --dt-font-subheading-s-size--narrow: var(--dt-font-size-16);
452
- --dt-font-subheading-s-line-height--narrow: var(--dt-font-line-height-24);
456
+ --dt-font-subheading-s-line-height--narrow: var(--dt-font-line-height-20);
453
457
  --dt-font-subheading-s-family: var(--dt-font-family-primary);
454
458
  --dt-font-subheading-s-weight: var(--dt-font-weight-regular);
455
459
  /* Subheading-l font theme */
@@ -562,6 +566,8 @@
562
566
  /* Global tokens - Radius */
563
567
  --dt-radius-12: 12px;
564
568
  --dt-radius-16: 16px;
569
+ --dt-radius-20: 20px;
570
+ --dt-radius-24: 24px;
565
571
  --dt-radius-00: 0;
566
572
  --dt-radius-04: 4px;
567
573
  --dt-radius-08: 8px;
@@ -573,6 +579,8 @@
573
579
  --dt-radius-rounded-c: var(--dt-radius-12);
574
580
  --dt-radius-rounded-d: var(--dt-radius-16);
575
581
  --dt-radius-rounded-e: var(--dt-radius-round);
582
+ --dt-radius-rounded-f: var(--dt-radius-20);
583
+ --dt-radius-rounded-g: var(--dt-radius-24);
576
584
  /* Global tokens - Motion */
577
585
  --dt-motion-easing-in: cubic-bezier(0.8, 0, 1, 1);
578
586
  --dt-motion-easing-out: cubic-bezier(0, 0, 0.18, 0.99);
@@ -746,8 +754,8 @@ html[data-color-mode="dark"] {
746
754
  --dt-color-support-brand-04-subtle: var(--dt-color-berry-80);
747
755
  --dt-color-support-brand-04-tonal: var(--dt-color-berry-90);
748
756
  --dt-color-support-brand-05: var(--dt-color-turmeric-40);
749
- --dt-color-support-brand-05-subtle: var(--dt-color-turmeric-80);
750
- --dt-color-support-brand-05-tonal: var(--dt-color-turmeric-90);
757
+ --dt-color-support-brand-05-subtle: var(--dt-color-turmeric-75);
758
+ --dt-color-support-brand-05-tonal: var(--dt-color-turmeric-80);
751
759
  --dt-color-support-brand-06: var(--dt-color-aubergine-70);
752
760
  --dt-color-support-brand-06-subtle: var(--dt-color-aubergine-90);
753
761
  --dt-color-support-brand-06-tonal: var(--dt-color-aubergine-100);
@@ -857,6 +865,7 @@ html[data-color-mode="dark"] {
857
865
  --dt-color-thirdparty-microsoft-content-secondary: var(--dt-color-thirdparty-microsoft-grey-70);
858
866
  --dt-color-thirdparty-microsoft-border-secondary: var(--dt-color-thirdparty-microsoft-grey-60);
859
867
  --dt-color-thirdparty-coop-container-primary: var(--dt-color-thirdparty-coop-blue-90);
868
+ --dt-color-thirdparty-morrisons-container-primary: var(--dt-color-thirdparty-morrisons-green-90);
860
869
  }
861
870
  @media (prefers-color-scheme: dark) {
862
871
  html[data-darkmode-system]:not([data-color-mode]) {
@@ -923,8 +932,8 @@ html[data-color-mode="dark"] {
923
932
  --dt-color-support-brand-04-subtle: var(--dt-color-berry-80);
924
933
  --dt-color-support-brand-04-tonal: var(--dt-color-berry-90);
925
934
  --dt-color-support-brand-05: var(--dt-color-turmeric-40);
926
- --dt-color-support-brand-05-subtle: var(--dt-color-turmeric-80);
927
- --dt-color-support-brand-05-tonal: var(--dt-color-turmeric-90);
935
+ --dt-color-support-brand-05-subtle: var(--dt-color-turmeric-75);
936
+ --dt-color-support-brand-05-tonal: var(--dt-color-turmeric-80);
928
937
  --dt-color-support-brand-06: var(--dt-color-aubergine-70);
929
938
  --dt-color-support-brand-06-subtle: var(--dt-color-aubergine-90);
930
939
  --dt-color-support-brand-06-tonal: var(--dt-color-aubergine-100);
@@ -1034,6 +1043,7 @@ html[data-color-mode="dark"] {
1034
1043
  --dt-color-thirdparty-microsoft-content-secondary: var(--dt-color-thirdparty-microsoft-grey-70);
1035
1044
  --dt-color-thirdparty-microsoft-border-secondary: var(--dt-color-thirdparty-microsoft-grey-60);
1036
1045
  --dt-color-thirdparty-coop-container-primary: var(--dt-color-thirdparty-coop-blue-90);
1046
+ --dt-color-thirdparty-morrisons-container-primary: var(--dt-color-thirdparty-morrisons-green-90);
1037
1047
  }
1038
1048
  }
1039
1049
  /* Dark elevation theme */
@@ -1419,6 +1429,12 @@ html[data-color-mode="dark"] {
1419
1429
  --dt-color-thirdparty-microsoft-grey-80-h: 0;
1420
1430
  --dt-color-thirdparty-microsoft-grey-80-s: 0%;
1421
1431
  --dt-color-thirdparty-microsoft-grey-80-l: 18.4%;
1432
+ --dt-color-thirdparty-morrisons-green-05-h: 143;
1433
+ --dt-color-thirdparty-morrisons-green-05-s: 80.4%;
1434
+ --dt-color-thirdparty-morrisons-green-05-l: 90%;
1435
+ --dt-color-thirdparty-morrisons-green-90-h: 143;
1436
+ --dt-color-thirdparty-morrisons-green-90-s: 100%;
1437
+ --dt-color-thirdparty-morrisons-green-90-l: 15.1%;
1422
1438
  --dt-color-tomato-100-h: 15;
1423
1439
  --dt-color-tomato-100-s: 58.1%;
1424
1440
  --dt-color-tomato-100-l: 12.2%;
@@ -1488,9 +1504,12 @@ html[data-color-mode="dark"] {
1488
1504
  --dt-color-turmeric-70-h: 42;
1489
1505
  --dt-color-turmeric-70-s: 56.8%;
1490
1506
  --dt-color-turmeric-70-l: 36.3%;
1507
+ --dt-color-turmeric-75-h: 43;
1508
+ --dt-color-turmeric-75-s: 56.4%;
1509
+ --dt-color-turmeric-75-l: 30.6%;
1491
1510
  --dt-color-turmeric-80-h: 43;
1492
- --dt-color-turmeric-80-s: 56.3%;
1493
- --dt-color-turmeric-80-l: 25.1%;
1511
+ --dt-color-turmeric-80-s: 59%;
1512
+ --dt-color-turmeric-80-l: 22.9%;
1494
1513
  --dt-color-turmeric-90-h: 43;
1495
1514
  --dt-color-turmeric-90-s: 56.3%;
1496
1515
  --dt-color-turmeric-90-l: 17.1%;
@@ -1920,6 +1939,9 @@ html[data-color-mode="dark"] {
1920
1939
  --dt-color-thirdparty-coop-container-primary-h: var(--dt-color-thirdparty-coop-blue-05-h);
1921
1940
  --dt-color-thirdparty-coop-container-primary-s: var(--dt-color-thirdparty-coop-blue-05-s);
1922
1941
  --dt-color-thirdparty-coop-container-primary-l: var(--dt-color-thirdparty-coop-blue-05-l);
1942
+ --dt-color-thirdparty-morrisons-container-primary-h: var(--dt-color-thirdparty-morrisons-green-05-h);
1943
+ --dt-color-thirdparty-morrisons-container-primary-s: var(--dt-color-thirdparty-morrisons-green-05-s);
1944
+ --dt-color-thirdparty-morrisons-container-primary-l: var(--dt-color-thirdparty-morrisons-green-05-l);
1923
1945
  }
1924
1946
  html[data-color-mode="dark"] {
1925
1947
  --dt-color-background-default-h: var(--dt-color-truffle-100-h);
@@ -2087,12 +2109,12 @@ html[data-color-mode="dark"] {
2087
2109
  --dt-color-support-brand-05-h: var(--dt-color-turmeric-40-h);
2088
2110
  --dt-color-support-brand-05-s: var(--dt-color-turmeric-40-s);
2089
2111
  --dt-color-support-brand-05-l: var(--dt-color-turmeric-40-l);
2090
- --dt-color-support-brand-05-subtle-h: var(--dt-color-turmeric-80-h);
2091
- --dt-color-support-brand-05-subtle-s: var(--dt-color-turmeric-80-s);
2092
- --dt-color-support-brand-05-subtle-l: var(--dt-color-turmeric-80-l);
2093
- --dt-color-support-brand-05-tonal-h: var(--dt-color-turmeric-90-h);
2094
- --dt-color-support-brand-05-tonal-s: var(--dt-color-turmeric-90-s);
2095
- --dt-color-support-brand-05-tonal-l: var(--dt-color-turmeric-90-l);
2112
+ --dt-color-support-brand-05-subtle-h: var(--dt-color-turmeric-75-h);
2113
+ --dt-color-support-brand-05-subtle-s: var(--dt-color-turmeric-75-s);
2114
+ --dt-color-support-brand-05-subtle-l: var(--dt-color-turmeric-75-l);
2115
+ --dt-color-support-brand-05-tonal-h: var(--dt-color-turmeric-80-h);
2116
+ --dt-color-support-brand-05-tonal-s: var(--dt-color-turmeric-80-s);
2117
+ --dt-color-support-brand-05-tonal-l: var(--dt-color-turmeric-80-l);
2096
2118
  --dt-color-support-brand-06-h: var(--dt-color-aubergine-70-h);
2097
2119
  --dt-color-support-brand-06-s: var(--dt-color-aubergine-70-s);
2098
2120
  --dt-color-support-brand-06-l: var(--dt-color-aubergine-70-l);
@@ -2321,6 +2343,9 @@ html[data-color-mode="dark"] {
2321
2343
  --dt-color-thirdparty-coop-container-primary-h: var(--dt-color-thirdparty-coop-blue-90-h);
2322
2344
  --dt-color-thirdparty-coop-container-primary-s: var(--dt-color-thirdparty-coop-blue-90-s);
2323
2345
  --dt-color-thirdparty-coop-container-primary-l: var(--dt-color-thirdparty-coop-blue-90-l);
2346
+ --dt-color-thirdparty-morrisons-container-primary-h: var(--dt-color-thirdparty-morrisons-green-90-h);
2347
+ --dt-color-thirdparty-morrisons-container-primary-s: var(--dt-color-thirdparty-morrisons-green-90-s);
2348
+ --dt-color-thirdparty-morrisons-container-primary-l: var(--dt-color-thirdparty-morrisons-green-90-l);
2324
2349
  }
2325
2350
  @media (prefers-color-scheme: dark) {
2326
2351
  html[data-darkmode-system]:not([data-color-mode]) {
@@ -2489,12 +2514,12 @@ html[data-color-mode="dark"] {
2489
2514
  --dt-color-support-brand-05-h: var(--dt-color-turmeric-40-h);
2490
2515
  --dt-color-support-brand-05-s: var(--dt-color-turmeric-40-s);
2491
2516
  --dt-color-support-brand-05-l: var(--dt-color-turmeric-40-l);
2492
- --dt-color-support-brand-05-subtle-h: var(--dt-color-turmeric-80-h);
2493
- --dt-color-support-brand-05-subtle-s: var(--dt-color-turmeric-80-s);
2494
- --dt-color-support-brand-05-subtle-l: var(--dt-color-turmeric-80-l);
2495
- --dt-color-support-brand-05-tonal-h: var(--dt-color-turmeric-90-h);
2496
- --dt-color-support-brand-05-tonal-s: var(--dt-color-turmeric-90-s);
2497
- --dt-color-support-brand-05-tonal-l: var(--dt-color-turmeric-90-l);
2517
+ --dt-color-support-brand-05-subtle-h: var(--dt-color-turmeric-75-h);
2518
+ --dt-color-support-brand-05-subtle-s: var(--dt-color-turmeric-75-s);
2519
+ --dt-color-support-brand-05-subtle-l: var(--dt-color-turmeric-75-l);
2520
+ --dt-color-support-brand-05-tonal-h: var(--dt-color-turmeric-80-h);
2521
+ --dt-color-support-brand-05-tonal-s: var(--dt-color-turmeric-80-s);
2522
+ --dt-color-support-brand-05-tonal-l: var(--dt-color-turmeric-80-l);
2498
2523
  --dt-color-support-brand-06-h: var(--dt-color-aubergine-70-h);
2499
2524
  --dt-color-support-brand-06-s: var(--dt-color-aubergine-70-s);
2500
2525
  --dt-color-support-brand-06-l: var(--dt-color-aubergine-70-l);
@@ -2723,6 +2748,9 @@ html[data-color-mode="dark"] {
2723
2748
  --dt-color-thirdparty-coop-container-primary-h: var(--dt-color-thirdparty-coop-blue-90-h);
2724
2749
  --dt-color-thirdparty-coop-container-primary-s: var(--dt-color-thirdparty-coop-blue-90-s);
2725
2750
  --dt-color-thirdparty-coop-container-primary-l: var(--dt-color-thirdparty-coop-blue-90-l);
2751
+ --dt-color-thirdparty-morrisons-container-primary-h: var(--dt-color-thirdparty-morrisons-green-90-h);
2752
+ --dt-color-thirdparty-morrisons-container-primary-s: var(--dt-color-thirdparty-morrisons-green-90-s);
2753
+ --dt-color-thirdparty-morrisons-container-primary-l: var(--dt-color-thirdparty-morrisons-green-90-l);
2726
2754
  }
2727
2755
  }
2728
2756
  :root {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-css",
3
- "version": "1.1.3",
3
+ "version": "1.3.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",
@@ -46,7 +46,7 @@
46
46
  ],
47
47
  "license": "Apache-2.0",
48
48
  "dependencies": {
49
- "@justeat/pie-design-tokens": "7.11.1"
49
+ "@justeat/pie-design-tokens": "7.14.1"
50
50
  },
51
51
  "devDependencies": {
52
52
  "@types/postcss-import": "14.0.3",
package/scss/mixins/_visuallyHidden.scss CHANGED
@@ -4,7 +4,17 @@
4
4
  display: block;
5
5
  height: 1px;
6
6
  width: 1px;
7
+ border: 0;
8
+ padding: 0;
9
+ margin: -1px;
7
10
  overflow: hidden;
8
- padding: 1px;
9
11
  white-space: nowrap;
12
+
13
+ clip: rect(0, 0, 0, 0);
14
+ clip-path: inset(50%);
15
+
16
+ // Fix to prevent overflowing children to become focusable
17
+ * {
18
+ overflow: hidden;
19
+ }
10
20
  }