@justeattakeaway/pie-css 0.12.0 → 0.13.0

package/dist/index.css

@@ -16,6 +16,7 @@
     --dt-color-charcoal-30: #d7d9da;
     --dt-color-charcoal-40: #b7bdbe;
     --dt-color-charcoal-50: #8c999b;
+    --dt-color-charcoal-57: #68797d;
     --dt-color-charcoal-60: #5d7074;
     --dt-color-charcoal-70: #3c4c4f;
     --dt-color-charcoal-75: #303d3f;
@@ -50,7 +51,8 @@
     --dt-color-red: #d50525;
     --dt-color-red-10: #ffe9ea;
     --dt-color-red-25: #f2a6b0;
-    --dt-color-red-30: #ec556c;
+    --dt-color-red-30: #f68179;
+    --dt-color-red-40: #e22c3e;
     --dt-color-red-90: #491e24;
     --dt-color-red-dark-hc: #a4041f;
     --dt-color-red-light-hc: #ff7a80;
@@ -59,6 +61,7 @@
     --dt-color-tomato-5: #ffd3bf;
     --dt-color-tomato-90: #622b18;
     --dt-color-turmeric-5: #fff9de;
+    --dt-color-turmeric-60: #bf8b09;
     --dt-color-turmeric-80: #745300;
     --dt-color-white: #fff;
     --dt-color-yellow: #f6c243;
@@ -90,6 +93,7 @@
     --dt-color-interactive-inverse: var(--dt-color-white);
     --dt-color-interactive-light: var(--dt-color-white);
     --dt-color-interactive-form: var(--dt-color-mozzarella-60);
+    --dt-color-interactive-error: var(--dt-color-red);
     --dt-color-overlay: rgb(0,0,0,0.55);
     --dt-color-support-error: var(--dt-color-red);
     --dt-color-support-warning: var(--dt-color-yellow);
@@ -103,7 +107,8 @@
     --dt-color-support-info-inverse: var(--dt-color-blue-30);
     --dt-color-support-positive-inverse: var(--dt-color-green-30);
     --dt-color-support-neutral-persistent: var(--dt-color-mozzarella-20);
-    --dt-color-support-error-inverse: var(--dt-color-red-30);
+    --dt-color-support-error-inverse: var(--dt-color-red-40);
+    --dt-color-support-warning-inverse: var(--dt-color-yellow);
     --dt-color-support-brand-01: var(--dt-color-orange-30);
     --dt-color-support-brand-02: var(--dt-color-orange-10);
     --dt-color-support-brand-03: var(--dt-color-blue-25);
@@ -137,6 +142,7 @@
     --dt-color-content-link-visited: var(--dt-color-system-purple);
     --dt-color-content-link-visited-inverse: var(--dt-color-system-purple-10);
     --dt-color-content-error: var(--dt-color-red);
+    --dt-color-content-placeholder: var(--dt-color-charcoal-57);
     --dt-color-content-positive: var(--dt-color-green);
     --dt-color-content-disabled: var(--dt-color-charcoal-50);
     --dt-color-content-brand: var(--dt-color-orange);
@@ -156,6 +162,9 @@
     --dt-color-skeleton-01: var(--dt-color-mozzarella-10);
     --dt-color-skeleton-02: var(--dt-color-mozzarella-20);
     --dt-color-skeleton-03: var(--dt-color-white);
+    --dt-color-skeleton-shimmer-01: var(--dt-color-mozzarella-5);
+    --dt-color-skeleton-shimmer-02: var(--dt-color-mozzarella-5);
+    --dt-color-skeleton-shimmer-03: var(--dt-color-mozzarella-10);
     /* Highcontrast color theme */
     --dt-color-highcontrast-background-default: var(--dt-color-white);
     --dt-color-highcontrast-background-subtle: var(--dt-color-white);
@@ -180,6 +189,7 @@
     --dt-color-highcontrast-interactive-inverse: var(--dt-color-white);
     --dt-color-highcontrast-interactive-light: var(--dt-color-white);
     --dt-color-highcontrast-interactive-form: var(--dt-color-black);
+    --dt-color-highcontrast-interactive-error: var(--dt-color-red);
     --dt-color-highcontrast-overlay: rgb(0,0,0,0.55);
     --dt-color-highcontrast-support-error: var(--dt-color-red-dark-hc);
     --dt-color-highcontrast-support-warning: var(--dt-color-yellow-dark-hc);
@@ -194,6 +204,7 @@
     --dt-color-highcontrast-support-positive-inverse: var(--dt-color-green-light-hc);
     --dt-color-highcontrast-support-neutral-persistent: var(--dt-color-white);
     --dt-color-highcontrast-support-error-inverse: var(--dt-color-red-light-hc);
+    --dt-color-highcontrast-support-warning-inverse: var(--dt-color-yellow);
     --dt-color-highcontrast-support-brand-01: var(--dt-color-orange-30);
     --dt-color-highcontrast-support-brand-02: var(--dt-color-white);
     --dt-color-highcontrast-support-brand-03: var(--dt-color-white);
@@ -227,6 +238,7 @@
     --dt-color-highcontrast-content-link-visited: var(--dt-color-system-purple);
     --dt-color-highcontrast-content-link-visited-inverse: var(--dt-color-system-purple-10);
     --dt-color-highcontrast-content-error: var(--dt-color-red-dark-hc);
+    --dt-color-highcontrast-content-placeholder: var(--dt-color-charcoal-57);
     --dt-color-highcontrast-content-positive: var(--dt-color-green-dark-hc);
     --dt-color-highcontrast-content-disabled: var(--dt-color-charcoal-50);
     --dt-color-highcontrast-content-brand: var(--dt-color-orange-dark-hc);
@@ -246,6 +258,9 @@
     --dt-color-highcontrast-skeleton-01: var(--dt-color-mozzarella-10);
     --dt-color-highcontrast-skeleton-02: var(--dt-color-mozzarella-20);
     --dt-color-highcontrast-skeleton-03: var(--dt-color-white);
+    --dt-color-highcontrast-skeleton-shimmer-01: var(--dt-color-mozzarella-5);
+    --dt-color-highcontrast-skeleton-shimmer-02: var(--dt-color-mozzarella-5);
+    --dt-color-highcontrast-skeleton-shimmer-03: var(--dt-color-mozzarella-10);
     /* Dark color theme */
     --dt-color-dark-background-default: var(--dt-color-mozzarella-100);
     --dt-color-dark-background-subtle: var(--dt-color-mozzarella-80);
@@ -270,8 +285,9 @@
     --dt-color-dark-interactive-inverse: var(--dt-color-mozzarella-90);
     --dt-color-dark-interactive-light: var(--dt-color-white);
     --dt-color-dark-interactive-form: var(--dt-color-mozzarella-50);
+    --dt-color-dark-interactive-error: var(--dt-color-red-40);
     --dt-color-dark-overlay: rgb(0,0,0,0.55);
-    --dt-color-dark-support-error: var(--dt-color-red-30);
+    --dt-color-dark-support-error: var(--dt-color-red-40);
     --dt-color-dark-support-warning: var(--dt-color-yellow);
     --dt-color-dark-support-positive: var(--dt-color-green-30);
     --dt-color-dark-support-info: var(--dt-color-blue-30);
@@ -284,6 +300,7 @@
     --dt-color-dark-support-positive-inverse: var(--dt-color-green);
     --dt-color-dark-support-neutral-persistent: var(--dt-color-mozzarella-20);
     --dt-color-dark-support-error-inverse: var(--dt-color-red);
+    --dt-color-dark-support-warning-inverse: var(--dt-color-turmeric-60);
     --dt-color-dark-support-brand-01: var(--dt-color-orange-30);
     --dt-color-dark-support-brand-02: var(--dt-color-orange-90);
     --dt-color-dark-support-brand-03: var(--dt-color-blue-25);
@@ -317,6 +334,7 @@
     --dt-color-dark-content-link-visited: var(--dt-color-system-purple-10);
     --dt-color-dark-content-link-visited-inverse: var(--dt-color-system-purple);
     --dt-color-dark-content-error: var(--dt-color-red-30);
+    --dt-color-dark-content-placeholder: var(--dt-color-charcoal-50);
     --dt-color-dark-content-positive: var(--dt-color-green-30);
     --dt-color-dark-content-disabled: var(--dt-color-charcoal-50);
     --dt-color-dark-content-brand: var(--dt-color-orange-30);
@@ -334,8 +352,11 @@
     --dt-color-dark-disabled-01: var(--dt-color-mozzarella-80);
     --dt-color-dark-disabled-01-inverse: var(--dt-color-mozzarella-20);
     --dt-color-dark-skeleton-01: var(--dt-color-mozzarella-80);
-    --dt-color-dark-skeleton-02: var(--dt-color-mozzarella-70);
+    --dt-color-dark-skeleton-02: var(--dt-color-mozzarella-75);
     --dt-color-dark-skeleton-03: var(--dt-color-mozzarella-90);
+    --dt-color-dark-skeleton-shimmer-01: var(--dt-color-mozzarella-75);
+    --dt-color-dark-skeleton-shimmer-02: var(--dt-color-mozzarella-70);
+    --dt-color-dark-skeleton-shimmer-03: var(--dt-color-mozzarella-80);
     /* Highcontrast-dark color theme */
     --dt-color-highcontrast-dark-background-default: var(--dt-color-black);
     --dt-color-highcontrast-dark-background-subtle: var(--dt-color-black);
@@ -360,6 +381,7 @@
     --dt-color-highcontrast-dark-interactive-inverse: var(--dt-color-black);
     --dt-color-highcontrast-dark-interactive-light: var(--dt-color-white);
     --dt-color-highcontrast-dark-interactive-form: var(--dt-color-white);
+    --dt-color-highcontrast-dark-interactive-error: var(--dt-color-red-40);
     --dt-color-highcontrast-dark-overlay: rgb(0,0,0,0.55);
     --dt-color-highcontrast-dark-support-error: var(--dt-color-red-light-hc);
     --dt-color-highcontrast-dark-support-warning: var(--dt-color-yellow);
@@ -374,6 +396,7 @@
     --dt-color-highcontrast-dark-support-positive-inverse: var(--dt-color-green-dark-hc);
     --dt-color-highcontrast-dark-support-neutral-persistent: var(--dt-color-black);
     --dt-color-highcontrast-dark-support-error-inverse: var(--dt-color-red-dark-hc);
+    --dt-color-highcontrast-dark-support-warning-inverse: var(--dt-color-turmeric-60);
     --dt-color-highcontrast-dark-support-brand-01: var(--dt-color-orange-30);
     --dt-color-highcontrast-dark-support-brand-02: var(--dt-color-black);
     --dt-color-highcontrast-dark-support-brand-03: var(--dt-color-black);
@@ -407,6 +430,7 @@
     --dt-color-highcontrast-dark-content-link-visited: var(--dt-color-system-purple-10);
     --dt-color-highcontrast-dark-content-link-visited-inverse: var(--dt-color-system-purple);
     --dt-color-highcontrast-dark-content-error: var(--dt-color-red-light-hc);
+    --dt-color-highcontrast-dark-content-placeholder: var(--dt-color-charcoal-50);
     --dt-color-highcontrast-dark-content-positive: var(--dt-color-green-light-hc);
     --dt-color-highcontrast-dark-content-disabled: var(--dt-color-charcoal-50);
     --dt-color-highcontrast-dark-content-brand: var(--dt-color-orange-30);
@@ -426,6 +450,9 @@
     --dt-color-highcontrast-dark-skeleton-01: var(--dt-color-mozzarella-80);
     --dt-color-highcontrast-dark-skeleton-02: var(--dt-color-mozzarella-100);
     --dt-color-highcontrast-dark-skeleton-03: var(--dt-color-mozzarella-90);
+    --dt-color-highcontrast-dark-skeleton-shimmer-01: var(--dt-color-mozzarella-75);
+    --dt-color-highcontrast-dark-skeleton-shimmer-02: var(--dt-color-mozzarella-70);
+    --dt-color-highcontrast-dark-skeleton-shimmer-03: var(--dt-color-mozzarella-80);
     /* Global tokens - Font */
     --dt-font-family-code: 'PTMono';
     --dt-font-family-primary: 'JetSansDigital';
@@ -618,6 +645,17 @@
     --dt-radius-rounded-c: var(--dt-radius-04);
     --dt-radius-rounded-d: var(--dt-radius-05);
     --dt-radius-rounded-e: var(--dt-radius-06);
+    /* Global tokens - Motion */
+    --dt-motion-easing-in: cubic-bezier(0.8, 0, 1, 1);
+    --dt-motion-easing-out: cubic-bezier(0, 0, 0.18, 0.99);
+    --dt-motion-easing-persistent-expressive: cubic-bezier(0.95, 0, 0, 0.95);
+    --dt-motion-easing-persistent-functional: cubic-bezier(0.45, 0, 0.55, 1);
+    --dt-motion-timing-100: 100ms;
+    --dt-motion-timing-150: 150ms;
+    --dt-motion-timing-200: 200ms;
+    --dt-motion-timing-250: 250ms;
+    --dt-motion-timing-300: 300ms;
+    --dt-motion-timing-350: 350ms;
     /* Global tokens - Spacing */
     --dt-spacing-10: 80px;
     --dt-spacing-00: 0;
@@ -642,6 +680,20 @@
     --dt-spacing-h: var(--dt-spacing-08);
     --dt-spacing-i: var(--dt-spacing-09);
     --dt-spacing-j: var(--dt-spacing-10);
+    /* Global tokens - Breakpoint */
+    --dt-breakpoint-size-1024: 1024px;
+    --dt-breakpoint-size-1280: 1280px;
+    --dt-breakpoint-size-1440: 1440px;
+    --dt-breakpoint-size-320: 320px;
+    --dt-breakpoint-size-600: 600px;
+    --dt-breakpoint-size-768: 768px;
+    /* Alias tokens - Breakpoint */
+    --dt-breakpoint-xs: var(--dt-breakpoint-size-320);
+    --dt-breakpoint-sm: var(--dt-breakpoint-size-600);
+    --dt-breakpoint-md: var(--dt-breakpoint-size-768);
+    --dt-breakpoint-lg: var(--dt-breakpoint-size-1024);
+    --dt-breakpoint-xl: var(--dt-breakpoint-size-1280);
+    --dt-breakpoint-xxl: var(--dt-breakpoint-size-1440);
     /* Global tokens - Elevation */
     --dt-elevation-box-shadow-01: 0px 2px 2px 0px rgba(0, 0, 0, 0.03),0px 3px 1px -2px rgba(0, 0, 0, 0.07),0px 1px 5px 0px rgba(0, 0, 0, 0.06);
     --dt-elevation-box-shadow-02: 0px 4px 6px 0px rgba(0, 0, 0, 0.02),0px 2px 12px -2px rgba(0, 0, 0, 0.08),0px 3px 6px 0px rgba(0, 0, 0, 0.06);
@@ -730,6 +782,9 @@
     --dt-color-charcoal-50-h: 188;
     --dt-color-charcoal-50-s: 7%;
     --dt-color-charcoal-50-l: 57.8%;
+    --dt-color-charcoal-57-h: 191;
+    --dt-color-charcoal-57-s: 9.2%;
+    --dt-color-charcoal-57-l: 44.9%;
     --dt-color-charcoal-60-h: 190;
     --dt-color-charcoal-60-s: 11%;
     --dt-color-charcoal-60-l: 41%;
@@ -832,9 +887,12 @@
     --dt-color-red-25-h: 352;
     --dt-color-red-25-s: 74.5%;
     --dt-color-red-25-l: 80%;
-    --dt-color-red-30-h: 351;
-    --dt-color-red-30-s: 79.9%;
-    --dt-color-red-30-l: 62.9%;
+    --dt-color-red-30-h: 4;
+    --dt-color-red-30-s: 87.4%;
+    --dt-color-red-30-l: 72%;
+    --dt-color-red-40-h: 354;
+    --dt-color-red-40-s: 75.8%;
+    --dt-color-red-40-l: 52.9%;
     --dt-color-red-90-h: 352;
     --dt-color-red-90-s: 41.7%;
     --dt-color-red-90-l: 20.2%;
@@ -859,6 +917,9 @@
     --dt-color-turmeric-5-h: 49;
     --dt-color-turmeric-5-s: 100%;
     --dt-color-turmeric-5-l: 93.5%;
+    --dt-color-turmeric-60-h: 43;
+    --dt-color-turmeric-60-s: 91%;
+    --dt-color-turmeric-60-l: 39.2%;
     --dt-color-turmeric-80-h: 43;
     --dt-color-turmeric-80-s: 100%;
     --dt-color-turmeric-80-l: 22.7%;
@@ -940,6 +1001,9 @@
     --dt-color-interactive-form-h: var(--dt-color-mozzarella-60-h);
     --dt-color-interactive-form-s: var(--dt-color-mozzarella-60-s);
     --dt-color-interactive-form-l: var(--dt-color-mozzarella-60-l);
+    --dt-color-interactive-error-h: var(--dt-color-red-h);
+    --dt-color-interactive-error-s: var(--dt-color-red-s);
+    --dt-color-interactive-error-l: var(--dt-color-red-l);
     --dt-color-support-error-h: var(--dt-color-red-h);
     --dt-color-support-error-s: var(--dt-color-red-s);
     --dt-color-support-error-l: var(--dt-color-red-l);
@@ -976,9 +1040,12 @@
     --dt-color-support-neutral-persistent-h: var(--dt-color-mozzarella-20-h);
     --dt-color-support-neutral-persistent-s: var(--dt-color-mozzarella-20-s);
     --dt-color-support-neutral-persistent-l: var(--dt-color-mozzarella-20-l);
-    --dt-color-support-error-inverse-h: var(--dt-color-red-30-h);
-    --dt-color-support-error-inverse-s: var(--dt-color-red-30-s);
-    --dt-color-support-error-inverse-l: var(--dt-color-red-30-l);
+    --dt-color-support-error-inverse-h: var(--dt-color-red-40-h);
+    --dt-color-support-error-inverse-s: var(--dt-color-red-40-s);
+    --dt-color-support-error-inverse-l: var(--dt-color-red-40-l);
+    --dt-color-support-warning-inverse-h: var(--dt-color-yellow-h);
+    --dt-color-support-warning-inverse-s: var(--dt-color-yellow-s);
+    --dt-color-support-warning-inverse-l: var(--dt-color-yellow-l);
     --dt-color-support-brand-01-h: var(--dt-color-orange-30-h);
     --dt-color-support-brand-01-s: var(--dt-color-orange-30-s);
     --dt-color-support-brand-01-l: var(--dt-color-orange-30-l);
@@ -1078,6 +1145,9 @@
     --dt-color-content-error-h: var(--dt-color-red-h);
     --dt-color-content-error-s: var(--dt-color-red-s);
     --dt-color-content-error-l: var(--dt-color-red-l);
+    --dt-color-content-placeholder-h: var(--dt-color-charcoal-57-h);
+    --dt-color-content-placeholder-s: var(--dt-color-charcoal-57-s);
+    --dt-color-content-placeholder-l: var(--dt-color-charcoal-57-l);
     --dt-color-content-positive-h: var(--dt-color-green-h);
     --dt-color-content-positive-s: var(--dt-color-green-s);
     --dt-color-content-positive-l: var(--dt-color-green-l);
@@ -1108,6 +1178,15 @@
     --dt-color-skeleton-03-h: var(--dt-color-white-h);
     --dt-color-skeleton-03-s: var(--dt-color-white-s);
     --dt-color-skeleton-03-l: var(--dt-color-white-l);
+    --dt-color-skeleton-shimmer-01-h: var(--dt-color-mozzarella-5-h);
+    --dt-color-skeleton-shimmer-01-s: var(--dt-color-mozzarella-5-s);
+    --dt-color-skeleton-shimmer-01-l: var(--dt-color-mozzarella-5-l);
+    --dt-color-skeleton-shimmer-02-h: var(--dt-color-mozzarella-5-h);
+    --dt-color-skeleton-shimmer-02-s: var(--dt-color-mozzarella-5-s);
+    --dt-color-skeleton-shimmer-02-l: var(--dt-color-mozzarella-5-l);
+    --dt-color-skeleton-shimmer-03-h: var(--dt-color-mozzarella-10-h);
+    --dt-color-skeleton-shimmer-03-s: var(--dt-color-mozzarella-10-s);
+    --dt-color-skeleton-shimmer-03-l: var(--dt-color-mozzarella-10-l);
 }
 html {
     box-sizing: border-box;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-css",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "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.",
   "author": "Just Eat Takeaway.com - Design System Team",
   "files": [
@@ -31,6 +31,6 @@
     "include-media": "2.0.0",
     "postcss": "8.4.32",
     "postcss-import": "15.1.0",
-    "w3c-css-validator": "1.3.1"
+    "w3c-css-validator": "1.3.2"
   }
 }

package/scss/mixins/_buttonInteractiveStates.scss

@@ -28,7 +28,7 @@
     }
 
     &:active:not(:disabled),
-    &[isLoading]:not(:disabled) {
+    &.is-loading:not(:disabled) {
         @if $mode == 'alt' {
             --active-modifier: calc(-1 * var(--dt-color-active-02));
         } @else if $mode == 'inverse' {

package/scss/settings/_breakpoints.scss

@@ -1,3 +1,5 @@
+@use '@justeat/pie-design-tokens/dist/jet.scss' as dt;
+
 // Interval settings to be used by @include-media Sass library
 // https://eduardoboucas.github.io/include-media/documentation/#variable-unit-intervals
 $unit-intervals: (
@@ -10,10 +12,10 @@ $unit-intervals: (
 // Breakpoints to be used by @include-media Sass library
 // https://eduardoboucas.github.io/include-media/documentation/#variable-breakpoints
 $breakpoints: (
-    xs: 320px,
-    sm: 600px,
-    md: 768px,
-    lg: 1024px,
-    xl: 1280px,
-    xxl: 1440px
+    xs: dt.$breakpoint-xs,
+    sm: dt.$breakpoint-sm,
+    md: dt.$breakpoint-md,
+    lg: dt.$breakpoint-lg,
+    xl: dt.$breakpoint-xl,
+    xxl: dt.$breakpoint-xxl
 );