feat(pie-modal): DSW-2172 updates scss value for ::backbrop with css var

Author: dandel10n

packages/components/pie-lottie-player/vite.config.js.timestamp-1726579244860-147c50fac21e9.mjs

@@ -0,0 +1,7 @@
+// vite.config.js
+import viteConfig from "file:///Users/maryia.radchuk/Documents/work/pie/configs/pie-components-config/vite.config.js";
+var vite_config_default = viteConfig;
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvbWFyeWlhLnJhZGNodWsvRG9jdW1lbnRzL3dvcmsvcGllL3BhY2thZ2VzL2NvbXBvbmVudHMvcGllLWxvdHRpZS1wbGF5ZXJcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy9tYXJ5aWEucmFkY2h1ay9Eb2N1bWVudHMvd29yay9waWUvcGFja2FnZXMvY29tcG9uZW50cy9waWUtbG90dGllLXBsYXllci92aXRlLmNvbmZpZy5qc1wiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9pbXBvcnRfbWV0YV91cmwgPSBcImZpbGU6Ly8vVXNlcnMvbWFyeWlhLnJhZGNodWsvRG9jdW1lbnRzL3dvcmsvcGllL3BhY2thZ2VzL2NvbXBvbmVudHMvcGllLWxvdHRpZS1wbGF5ZXIvdml0ZS5jb25maWcuanNcIjtpbXBvcnQgdml0ZUNvbmZpZyBmcm9tICdAanVzdGVhdHRha2Vhd2F5L3BpZS1jb21wb25lbnRzLWNvbmZpZy92aXRlLmNvbmZpZyc7XG5cbmV4cG9ydCBkZWZhdWx0IHZpdGVDb25maWc7XG4iXSwKICAibWFwcGluZ3MiOiAiO0FBQTRaLE9BQU8sZ0JBQWdCO0FBRW5iLElBQU8sc0JBQVE7IiwKICAibmFtZXMiOiBbXQp9Cg==

packages/components/pie-modal/package.json

@@ -36,7 +36,6 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "0.9.0",
-    "@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,6 +1,4 @@
-@use '@justeattakeaway/pie-css/scss' as p;
 @use '@justeattakeaway/pie-css/scss/settings' as *;
-@use '@justeat/pie-design-tokens/dist/jet.scss' as dt;
 @use 'dialog-polyfill/dist/dialog-polyfill.css';
 
 .c-modal {
@@ -22,7 +20,6 @@
 
     // We need to override the icon sizes at different screen sizes regardless of size prop passed in
     pie-icon-button {
-
         @include media('<md') {
             --btn-dimension: 40px;
         }
@@ -117,10 +114,8 @@
         }
     }
 
-    // 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);
     }
 
     & .c-modal-footer {