@justeattakeaway/pie-css 0.12.1 → 0.13.1

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;
@@ -141,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);
@@ -236,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);
@@ -331,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);
@@ -426,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);
@@ -675,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);
@@ -763,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%;
@@ -1123,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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-css",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "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
 );