@justeattakeaway/pie-css 0.12.0 → 0.12.1

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 +64 -10
  2. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -50,7 +50,8 @@
50
50
  --dt-color-red: #d50525;
51
51
  --dt-color-red-10: #ffe9ea;
52
52
  --dt-color-red-25: #f2a6b0;
53
- --dt-color-red-30: #ec556c;
53
+ --dt-color-red-30: #f68179;
54
+ --dt-color-red-40: #e22c3e;
54
55
  --dt-color-red-90: #491e24;
55
56
  --dt-color-red-dark-hc: #a4041f;
56
57
  --dt-color-red-light-hc: #ff7a80;
@@ -59,6 +60,7 @@
59
60
  --dt-color-tomato-5: #ffd3bf;
60
61
  --dt-color-tomato-90: #622b18;
61
62
  --dt-color-turmeric-5: #fff9de;
63
+ --dt-color-turmeric-60: #bf8b09;
62
64
  --dt-color-turmeric-80: #745300;
63
65
  --dt-color-white: #fff;
64
66
  --dt-color-yellow: #f6c243;
@@ -90,6 +92,7 @@
90
92
  --dt-color-interactive-inverse: var(--dt-color-white);
91
93
  --dt-color-interactive-light: var(--dt-color-white);
92
94
  --dt-color-interactive-form: var(--dt-color-mozzarella-60);
95
+ --dt-color-interactive-error: var(--dt-color-red);
93
96
  --dt-color-overlay: rgb(0,0,0,0.55);
94
97
  --dt-color-support-error: var(--dt-color-red);
95
98
  --dt-color-support-warning: var(--dt-color-yellow);
@@ -103,7 +106,8 @@
103
106
  --dt-color-support-info-inverse: var(--dt-color-blue-30);
104
107
  --dt-color-support-positive-inverse: var(--dt-color-green-30);
105
108
  --dt-color-support-neutral-persistent: var(--dt-color-mozzarella-20);
106
- --dt-color-support-error-inverse: var(--dt-color-red-30);
109
+ --dt-color-support-error-inverse: var(--dt-color-red-40);
110
+ --dt-color-support-warning-inverse: var(--dt-color-yellow);
107
111
  --dt-color-support-brand-01: var(--dt-color-orange-30);
108
112
  --dt-color-support-brand-02: var(--dt-color-orange-10);
109
113
  --dt-color-support-brand-03: var(--dt-color-blue-25);
@@ -156,6 +160,9 @@
156
160
  --dt-color-skeleton-01: var(--dt-color-mozzarella-10);
157
161
  --dt-color-skeleton-02: var(--dt-color-mozzarella-20);
158
162
  --dt-color-skeleton-03: var(--dt-color-white);
163
+ --dt-color-skeleton-shimmer-01: var(--dt-color-mozzarella-5);
164
+ --dt-color-skeleton-shimmer-02: var(--dt-color-mozzarella-5);
165
+ --dt-color-skeleton-shimmer-03: var(--dt-color-mozzarella-10);
159
166
  /* Highcontrast color theme */
160
167
  --dt-color-highcontrast-background-default: var(--dt-color-white);
161
168
  --dt-color-highcontrast-background-subtle: var(--dt-color-white);
@@ -180,6 +187,7 @@
180
187
  --dt-color-highcontrast-interactive-inverse: var(--dt-color-white);
181
188
  --dt-color-highcontrast-interactive-light: var(--dt-color-white);
182
189
  --dt-color-highcontrast-interactive-form: var(--dt-color-black);
190
+ --dt-color-highcontrast-interactive-error: var(--dt-color-red);
183
191
  --dt-color-highcontrast-overlay: rgb(0,0,0,0.55);
184
192
  --dt-color-highcontrast-support-error: var(--dt-color-red-dark-hc);
185
193
  --dt-color-highcontrast-support-warning: var(--dt-color-yellow-dark-hc);
@@ -194,6 +202,7 @@
194
202
  --dt-color-highcontrast-support-positive-inverse: var(--dt-color-green-light-hc);
195
203
  --dt-color-highcontrast-support-neutral-persistent: var(--dt-color-white);
196
204
  --dt-color-highcontrast-support-error-inverse: var(--dt-color-red-light-hc);
205
+ --dt-color-highcontrast-support-warning-inverse: var(--dt-color-yellow);
197
206
  --dt-color-highcontrast-support-brand-01: var(--dt-color-orange-30);
198
207
  --dt-color-highcontrast-support-brand-02: var(--dt-color-white);
199
208
  --dt-color-highcontrast-support-brand-03: var(--dt-color-white);
@@ -246,6 +255,9 @@
246
255
  --dt-color-highcontrast-skeleton-01: var(--dt-color-mozzarella-10);
247
256
  --dt-color-highcontrast-skeleton-02: var(--dt-color-mozzarella-20);
248
257
  --dt-color-highcontrast-skeleton-03: var(--dt-color-white);
258
+ --dt-color-highcontrast-skeleton-shimmer-01: var(--dt-color-mozzarella-5);
259
+ --dt-color-highcontrast-skeleton-shimmer-02: var(--dt-color-mozzarella-5);
260
+ --dt-color-highcontrast-skeleton-shimmer-03: var(--dt-color-mozzarella-10);
249
261
  /* Dark color theme */
250
262
  --dt-color-dark-background-default: var(--dt-color-mozzarella-100);
251
263
  --dt-color-dark-background-subtle: var(--dt-color-mozzarella-80);
@@ -270,8 +282,9 @@
270
282
  --dt-color-dark-interactive-inverse: var(--dt-color-mozzarella-90);
271
283
  --dt-color-dark-interactive-light: var(--dt-color-white);
272
284
  --dt-color-dark-interactive-form: var(--dt-color-mozzarella-50);
285
+ --dt-color-dark-interactive-error: var(--dt-color-red-40);
273
286
  --dt-color-dark-overlay: rgb(0,0,0,0.55);
274
- --dt-color-dark-support-error: var(--dt-color-red-30);
287
+ --dt-color-dark-support-error: var(--dt-color-red-40);
275
288
  --dt-color-dark-support-warning: var(--dt-color-yellow);
276
289
  --dt-color-dark-support-positive: var(--dt-color-green-30);
277
290
  --dt-color-dark-support-info: var(--dt-color-blue-30);
@@ -284,6 +297,7 @@
284
297
  --dt-color-dark-support-positive-inverse: var(--dt-color-green);
285
298
  --dt-color-dark-support-neutral-persistent: var(--dt-color-mozzarella-20);
286
299
  --dt-color-dark-support-error-inverse: var(--dt-color-red);
300
+ --dt-color-dark-support-warning-inverse: var(--dt-color-turmeric-60);
287
301
  --dt-color-dark-support-brand-01: var(--dt-color-orange-30);
288
302
  --dt-color-dark-support-brand-02: var(--dt-color-orange-90);
289
303
  --dt-color-dark-support-brand-03: var(--dt-color-blue-25);
@@ -334,8 +348,11 @@
334
348
  --dt-color-dark-disabled-01: var(--dt-color-mozzarella-80);
335
349
  --dt-color-dark-disabled-01-inverse: var(--dt-color-mozzarella-20);
336
350
  --dt-color-dark-skeleton-01: var(--dt-color-mozzarella-80);
337
- --dt-color-dark-skeleton-02: var(--dt-color-mozzarella-70);
351
+ --dt-color-dark-skeleton-02: var(--dt-color-mozzarella-75);
338
352
  --dt-color-dark-skeleton-03: var(--dt-color-mozzarella-90);
353
+ --dt-color-dark-skeleton-shimmer-01: var(--dt-color-mozzarella-75);
354
+ --dt-color-dark-skeleton-shimmer-02: var(--dt-color-mozzarella-70);
355
+ --dt-color-dark-skeleton-shimmer-03: var(--dt-color-mozzarella-80);
339
356
  /* Highcontrast-dark color theme */
340
357
  --dt-color-highcontrast-dark-background-default: var(--dt-color-black);
341
358
  --dt-color-highcontrast-dark-background-subtle: var(--dt-color-black);
@@ -360,6 +377,7 @@
360
377
  --dt-color-highcontrast-dark-interactive-inverse: var(--dt-color-black);
361
378
  --dt-color-highcontrast-dark-interactive-light: var(--dt-color-white);
362
379
  --dt-color-highcontrast-dark-interactive-form: var(--dt-color-white);
380
+ --dt-color-highcontrast-dark-interactive-error: var(--dt-color-red-40);
363
381
  --dt-color-highcontrast-dark-overlay: rgb(0,0,0,0.55);
364
382
  --dt-color-highcontrast-dark-support-error: var(--dt-color-red-light-hc);
365
383
  --dt-color-highcontrast-dark-support-warning: var(--dt-color-yellow);
@@ -374,6 +392,7 @@
374
392
  --dt-color-highcontrast-dark-support-positive-inverse: var(--dt-color-green-dark-hc);
375
393
  --dt-color-highcontrast-dark-support-neutral-persistent: var(--dt-color-black);
376
394
  --dt-color-highcontrast-dark-support-error-inverse: var(--dt-color-red-dark-hc);
395
+ --dt-color-highcontrast-dark-support-warning-inverse: var(--dt-color-turmeric-60);
377
396
  --dt-color-highcontrast-dark-support-brand-01: var(--dt-color-orange-30);
378
397
  --dt-color-highcontrast-dark-support-brand-02: var(--dt-color-black);
379
398
  --dt-color-highcontrast-dark-support-brand-03: var(--dt-color-black);
@@ -426,6 +445,9 @@
426
445
  --dt-color-highcontrast-dark-skeleton-01: var(--dt-color-mozzarella-80);
427
446
  --dt-color-highcontrast-dark-skeleton-02: var(--dt-color-mozzarella-100);
428
447
  --dt-color-highcontrast-dark-skeleton-03: var(--dt-color-mozzarella-90);
448
+ --dt-color-highcontrast-dark-skeleton-shimmer-01: var(--dt-color-mozzarella-75);
449
+ --dt-color-highcontrast-dark-skeleton-shimmer-02: var(--dt-color-mozzarella-70);
450
+ --dt-color-highcontrast-dark-skeleton-shimmer-03: var(--dt-color-mozzarella-80);
429
451
  /* Global tokens - Font */
430
452
  --dt-font-family-code: 'PTMono';
431
453
  --dt-font-family-primary: 'JetSansDigital';
@@ -618,6 +640,17 @@
618
640
  --dt-radius-rounded-c: var(--dt-radius-04);
619
641
  --dt-radius-rounded-d: var(--dt-radius-05);
620
642
  --dt-radius-rounded-e: var(--dt-radius-06);
643
+ /* Global tokens - Motion */
644
+ --dt-motion-easing-in: cubic-bezier(0.8, 0, 1, 1);
645
+ --dt-motion-easing-out: cubic-bezier(0, 0, 0.18, 0.99);
646
+ --dt-motion-easing-persistent-expressive: cubic-bezier(0.95, 0, 0, 0.95);
647
+ --dt-motion-easing-persistent-functional: cubic-bezier(0.45, 0, 0.55, 1);
648
+ --dt-motion-timing-100: 100ms;
649
+ --dt-motion-timing-150: 150ms;
650
+ --dt-motion-timing-200: 200ms;
651
+ --dt-motion-timing-250: 250ms;
652
+ --dt-motion-timing-300: 300ms;
653
+ --dt-motion-timing-350: 350ms;
621
654
  /* Global tokens - Spacing */
622
655
  --dt-spacing-10: 80px;
623
656
  --dt-spacing-00: 0;
@@ -832,9 +865,12 @@
832
865
  --dt-color-red-25-h: 352;
833
866
  --dt-color-red-25-s: 74.5%;
834
867
  --dt-color-red-25-l: 80%;
835
- --dt-color-red-30-h: 351;
836
- --dt-color-red-30-s: 79.9%;
837
- --dt-color-red-30-l: 62.9%;
868
+ --dt-color-red-30-h: 4;
869
+ --dt-color-red-30-s: 87.4%;
870
+ --dt-color-red-30-l: 72%;
871
+ --dt-color-red-40-h: 354;
872
+ --dt-color-red-40-s: 75.8%;
873
+ --dt-color-red-40-l: 52.9%;
838
874
  --dt-color-red-90-h: 352;
839
875
  --dt-color-red-90-s: 41.7%;
840
876
  --dt-color-red-90-l: 20.2%;
@@ -859,6 +895,9 @@
859
895
  --dt-color-turmeric-5-h: 49;
860
896
  --dt-color-turmeric-5-s: 100%;
861
897
  --dt-color-turmeric-5-l: 93.5%;
898
+ --dt-color-turmeric-60-h: 43;
899
+ --dt-color-turmeric-60-s: 91%;
900
+ --dt-color-turmeric-60-l: 39.2%;
862
901
  --dt-color-turmeric-80-h: 43;
863
902
  --dt-color-turmeric-80-s: 100%;
864
903
  --dt-color-turmeric-80-l: 22.7%;
@@ -940,6 +979,9 @@
940
979
  --dt-color-interactive-form-h: var(--dt-color-mozzarella-60-h);
941
980
  --dt-color-interactive-form-s: var(--dt-color-mozzarella-60-s);
942
981
  --dt-color-interactive-form-l: var(--dt-color-mozzarella-60-l);
982
+ --dt-color-interactive-error-h: var(--dt-color-red-h);
983
+ --dt-color-interactive-error-s: var(--dt-color-red-s);
984
+ --dt-color-interactive-error-l: var(--dt-color-red-l);
943
985
  --dt-color-support-error-h: var(--dt-color-red-h);
944
986
  --dt-color-support-error-s: var(--dt-color-red-s);
945
987
  --dt-color-support-error-l: var(--dt-color-red-l);
@@ -976,9 +1018,12 @@
976
1018
  --dt-color-support-neutral-persistent-h: var(--dt-color-mozzarella-20-h);
977
1019
  --dt-color-support-neutral-persistent-s: var(--dt-color-mozzarella-20-s);
978
1020
  --dt-color-support-neutral-persistent-l: var(--dt-color-mozzarella-20-l);
979
- --dt-color-support-error-inverse-h: var(--dt-color-red-30-h);
980
- --dt-color-support-error-inverse-s: var(--dt-color-red-30-s);
981
- --dt-color-support-error-inverse-l: var(--dt-color-red-30-l);
1021
+ --dt-color-support-error-inverse-h: var(--dt-color-red-40-h);
1022
+ --dt-color-support-error-inverse-s: var(--dt-color-red-40-s);
1023
+ --dt-color-support-error-inverse-l: var(--dt-color-red-40-l);
1024
+ --dt-color-support-warning-inverse-h: var(--dt-color-yellow-h);
1025
+ --dt-color-support-warning-inverse-s: var(--dt-color-yellow-s);
1026
+ --dt-color-support-warning-inverse-l: var(--dt-color-yellow-l);
982
1027
  --dt-color-support-brand-01-h: var(--dt-color-orange-30-h);
983
1028
  --dt-color-support-brand-01-s: var(--dt-color-orange-30-s);
984
1029
  --dt-color-support-brand-01-l: var(--dt-color-orange-30-l);
@@ -1108,6 +1153,15 @@
1108
1153
  --dt-color-skeleton-03-h: var(--dt-color-white-h);
1109
1154
  --dt-color-skeleton-03-s: var(--dt-color-white-s);
1110
1155
  --dt-color-skeleton-03-l: var(--dt-color-white-l);
1156
+ --dt-color-skeleton-shimmer-01-h: var(--dt-color-mozzarella-5-h);
1157
+ --dt-color-skeleton-shimmer-01-s: var(--dt-color-mozzarella-5-s);
1158
+ --dt-color-skeleton-shimmer-01-l: var(--dt-color-mozzarella-5-l);
1159
+ --dt-color-skeleton-shimmer-02-h: var(--dt-color-mozzarella-5-h);
1160
+ --dt-color-skeleton-shimmer-02-s: var(--dt-color-mozzarella-5-s);
1161
+ --dt-color-skeleton-shimmer-02-l: var(--dt-color-mozzarella-5-l);
1162
+ --dt-color-skeleton-shimmer-03-h: var(--dt-color-mozzarella-10-h);
1163
+ --dt-color-skeleton-shimmer-03-s: var(--dt-color-mozzarella-10-s);
1164
+ --dt-color-skeleton-shimmer-03-l: var(--dt-color-mozzarella-10-l);
1111
1165
  }
1112
1166
  html {
1113
1167
  box-sizing: border-box;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-css",
3
- "version": "0.12.0",
3
+ "version": "0.12.1",
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
  "author": "Just Eat Takeaway.com - Design System Team",
6
6
  "files": [