feat(pie-monorepo): DSW-2172 pie-design-tokens update

.changeset/chatty-hotels-reflect.md

@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-cookie-banner": patch
+---
+
+[Removed] - pie-design-tokens dependency.

.changeset/nasty-garlics-thank.md

@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-css": minor
+---
+
+[Changed] - replaces hardcoded breakpoint values with PIE tokens.

.changeset/sweet-planes-clap.md

@@ -0,0 +1,6 @@
+---
+"@justeattakeaway/pie-notification": minor
+"@justeattakeaway/pie-modal": minor
+---
+
+[Changed] - replaces media with include-media with pie breakpoints tokens.

.changeset/wise-ants-reflect.md

@@ -0,0 +1,8 @@
+---
+"wc-vanilla": minor
+"pie-storybook": minor
+"pie-docs": minor
+"pie-monorepo": minor
+---
+
+[Changed] - pie-design-tokens version bump to 6.5.0.

apps/examples/wc-vanilla/package.json

@@ -12,7 +12,7 @@
     "vite": "5.3.6"
   },
   "dependencies": {
-    "@justeat/pie-design-tokens": "6.3.1",
+    "@justeat/pie-design-tokens": "6.5.0",
     "@justeattakeaway/pie-css": "0.12.1",
     "@justeattakeaway/pie-icons-webc": "0.25.1",
     "@justeattakeaway/pie-webc": "0.5.35"

apps/pie-docs/package.json

@@ -40,7 +40,7 @@
     "@docsearch/css": "3.5.2",
     "@docsearch/js": "3.5.2",
     "@justeat/fozzie": "11.0.2",
-    "@justeat/pie-design-tokens": "6.3.1",
+    "@justeat/pie-design-tokens": "6.5.0",
     "@justeattakeaway/browserslist-config-pie": "0.2.0",
     "@justeattakeaway/pie-css": "0.12.1",
     "@justeattakeaway/pie-icons": "4.19.1",

apps/pie-docs/src/assets/styles/components/_indexPage.scss

@@ -6,6 +6,7 @@
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+    gap: var(--dt-spacing-g) var(--dt-spacing-e);
 
     @include f.media('>=mid') {
         justify-content: flex-start;
@@ -18,8 +19,6 @@
         }
     }
 
-    gap: var(--dt-spacing-g) var(--dt-spacing-e);
-
     .c-indexPage-menu-item {
         display: flex;
         flex-direction: column;

apps/pie-storybook/package.json

@@ -13,7 +13,7 @@
   "author": "Just Eat Takeaway.com - Design System Team",
   "license": "Apache-2.0",
   "dependencies": {
-    "@justeat/pie-design-tokens": "6.3.1",
+    "@justeat/pie-design-tokens": "6.5.0",
     "@justeattakeaway/pie-assistive-text": "0.7.1",
     "@justeattakeaway/pie-button": "0.49.1",
     "@justeattakeaway/pie-card": "0.20.1",

package.json

@@ -73,7 +73,7 @@
     "@changesets/cli": "2.26.2",
     "@commitlint/cli": "17.5.1",
     "@commitlint/config-conventional": "17.4.4",
-    "@justeat/pie-design-tokens": "6.4.0",
+    "@justeat/pie-design-tokens": "6.5.0",
     "@justeattakeaway/browserslist-config-pie": "0.2.0",
     "@justeattakeaway/generator-pie-component": "0.22.2",
     "@justeattakeaway/pie-icons": "4.19.1",

packages/components/pie-cookie-banner/package.json

@@ -37,7 +37,6 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeat/pie-design-tokens": "6.3.1",
     "@justeattakeaway/pie-components-config": "0.18.0",
     "@justeattakeaway/pie-css": "0.12.1",
     "@justeattakeaway/pie-wrapper-react": "0.14.1",

packages/components/pie-modal/package.json

@@ -36,7 +36,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@justeat/pie-design-tokens": "6.3.1",
+    "@justeat/pie-design-tokens": "6.5.0",
     "@justeattakeaway/pie-components-config": "0.18.0",
     "@justeattakeaway/pie-css": "0.12.1",
     "@justeattakeaway/pie-wrapper-react": "0.14.1",

packages/components/pie-modal/src/modal.scss

@@ -1,12 +1,11 @@
 @use '@justeattakeaway/pie-css/scss' as p;
 @use '@justeat/pie-design-tokens/dist/jet.scss' as dt;
+@use '@justeattakeaway/pie-css/scss/settings' as *;
 @use 'dialog-polyfill/dist/dialog-polyfill.css';
 
 .c-modal {
     // Custom Property Declarations
     // These are defined here instead of :host to encapsulate them inside Shadow DOM
-    $breakpoint-wide: 768px;
-
     --modal-size-s: 450px;
     --modal-size-m: 600px;
     --modal-size-l: 1080px;
@@ -23,7 +22,7 @@
 
     // We need to override the icon sizes at different screen sizes regardless of size prop passed in
     pie-icon-button {
-        @media (width < $breakpoint-wide) {
+        @include media('<md') {
             --btn-dimension: 40px;
         }
     }
@@ -50,7 +49,7 @@
     --modal-margin-large: var(--dt-spacing-j);
     --modal-margin-block: var(--modal-margin-small);
 
-    @media (min-width: $breakpoint-wide) {
+    @include media('>md') {
         --modal-margin-block: var(--modal-margin-large);
     }
 
@@ -69,7 +68,7 @@
     &.c-modal--small {
         --modal-max-inline-size: var(--modal-size-s);
 
-        @media (min-width: $breakpoint-wide) {
+        @include media('>md') {
             --modal-margin-block: var(--modal-margin-large);
         }
     }
@@ -87,7 +86,7 @@
     // Fullscreen styles
     &.c-modal--large,
     &.c-modal--medium.c-modal--fullWidthBelowMid {
-        @media (width < $breakpoint-wide) {
+        @include media('<md') {
             --modal-margin-block: var(--modal-margin-none);
             --modal-border-radius: var(--dt-radius-rounded-none);
             --modal-block-size: 100%;
@@ -110,17 +109,25 @@
 
         &.c-modal--large,
         &.c-modal--fullWidthBelowMid.c-modal--medium {
-            @media (width < $breakpoint-wide) {
+            @include media('<md') {
                 margin-block-start: var(--dt-spacing-none);
                 max-block-size: 100%;
             }
         }
     }
 
-    // We need to pull in the token directly here because the
-    // pseudo element `::backdrop` doesn't seem to pick up custom css properties.
     &::backdrop {
-        background: #{dt.$color-overlay};
+        background: var(--dt-color-overlay);
+    }
+
+    // TODO: Can be removed along with pie-design-tokens dependency
+    // after v17.6 becomes the last we support, currently it is v16+
+    // where css vars are not working on ::backdrop
+    // Safari >= 16
+    @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
+        &::backdrop {
+            background: #{dt.$color-overlay};
+        }
     }
 
     & .c-modal-footer {
@@ -133,13 +140,13 @@
         gap: var(--modal-button-spacing);
         padding: var(--modal-footer-padding);
 
-        @media (min-width: $breakpoint-wide) {
+        @include media('>md') {
             --modal-footer-padding: var(--dt-spacing-e);
         }
 
         &.c-modal-footer--stackedActions {
             // TODO: Move breakpoint sizes into shared CSS component utilities
-            @media (width < $breakpoint-wide) {
+            @include media('<md') {
                 flex-direction: column;
             }
         }
@@ -167,7 +174,7 @@
         margin-inline-end: var(--dt-spacing-d);
         margin-block: 14px; // This is deliberately not a custom property
 
-        @media (min-width: $breakpoint-wide) {
+        @include media('>md') {
             --modal-header-font-size: calc(var(--dt-font-heading-m-size--wide) * 1px);
             --modal-header-font-line-height: calc(var(--dt-font-heading-m-line-height--wide) * 1px);
             margin-inline-start: var(--dt-spacing-e);
@@ -180,15 +187,15 @@
     .c-modal-backBtn + .c-modal-heading {
         margin-inline-start: var(--dt-spacing-b);
 
-        @media (min-width: $breakpoint-wide) {
+        @include media('>md') {
             margin-inline-start: var(--dt-spacing-c);
         }
     }
 
     &.c-modal--dismissible .c-modal-heading {
         margin-inline-end: var(--dt-spacing-d);
 
-        @media (min-width: $breakpoint-wide) {
+        @include media('>md') {
             margin-inline-end: var(--dt-spacing-e);
         }
     }
@@ -200,7 +207,7 @@
         margin-inline-start: var(--dt-spacing-b);
         margin-inline-end: var(--dt-spacing-none);
 
-        @media (min-width: $breakpoint-wide) {
+        @include media('>md') {
             margin-block-start: var(--dt-spacing-c);
             margin-block-end: var(--dt-spacing-c);
             margin-inline-start: var(--dt-spacing-c);
@@ -215,7 +222,7 @@
         margin-inline-start: var(--dt-spacing-none);
         margin-inline-end: var(--dt-spacing-b);
 
-        @media (min-width: $breakpoint-wide) {
+        @include media('>md') {
             margin-block-start: var(--dt-spacing-c);
             margin-block-end: var(--dt-spacing-c);
             margin-inline-start: var(--dt-spacing-none);
@@ -234,7 +241,7 @@
         --modal-content-min-block-size: var(--dt-spacing-j);
 
 
-        @media (min-width: $breakpoint-wide) {
+        @include media('>md') {
             --modal-content-padding-inline: var(--dt-spacing-e);
         }
 

packages/components/pie-notification/src/notification.scss

@@ -1,6 +1,5 @@
 @use '@justeattakeaway/pie-css/scss' as p;
-
-$breakpoint-wide: 768px;
+@use '@justeattakeaway/pie-css/scss/settings' as *;
 
 .c-notification {
     --notification-border-radius: var(--dt-radius-rounded-c);
@@ -63,7 +62,7 @@ $breakpoint-wide: 768px;
         font-size: var(--notification-heading-font-size);
         line-height: var(--notification-heading-line-height);
 
-        @media (min-width: $breakpoint-wide) {
+        @include media('>md') {
             --notification-heading-font-size: #{p.font-size(--dt-font-heading-s-size--wide)};
             --notification-heading-line-height: #{p.line-height(--dt-font-heading-s-line-height--wide)};
         }
@@ -95,7 +94,7 @@ $breakpoint-wide: 768px;
             align-self: flex-end;
         }
 
-        @media (max-width: $breakpoint-wide) {
+        @include media('<md') {
             &.c-notification-footer--stacked {
                 flex-direction: column-reverse;
             }
@@ -109,7 +108,7 @@ $breakpoint-wide: 768px;
     color: var(--notification-icon-fill);
     margin-block-start: var(--notification-icon-offset);
 
-    @media (max-width: $breakpoint-wide) {
+    @include media('<md') {
         margin-block-start: 0;
     }
 }

packages/tools/pie-css/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
 );

packages/tools/pie-css/test/css/__snapshots__/css.spec.ts.snap

@@ -683,6 +683,20 @@ exports[`index.css > should render the expected CSS content 1`] = `
     --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);

packages/tools/pie-css/utilities/compileCss.ts

@@ -15,7 +15,8 @@ import sass from 'sass';
  */
 export function compileCss (scss: string): string {
     const result = sass.compileString(scss, {
-        loadPaths: ['scss'],
+        // root level node_modules are here for external dependencies imports like pie-design-tokens
+        loadPaths: ['scss', '../../../node_modules'],
     });
 
     return result.css;