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

dandel10n · dandel10n · commit dd86ec7d7379 · 2024-09-17T15:46:24.000+02:00
diff --git a/packages/components/pie-modal/package.json b/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",
diff --git a/packages/components/pie-modal/src/modal.scss b/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 {
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,4 @@`
`1`		`-@use '@justeattakeaway/pie-css/scss' as p;`
`2`	`1`	`@use '@justeattakeaway/pie-css/scss/settings' as *;`
`3`		`-@use '@justeat/pie-design-tokens/dist/jet.scss' as dt;`
`4`	`2`	`@use 'dialog-polyfill/dist/dialog-polyfill.css';`
`5`	`3`
`6`	`4`	`.c-modal {`
`@@ -22,7 +20,6 @@`
`22`	`20`
`23`	`21`	`// We need to override the icon sizes at different screen sizes regardless of size prop passed in`
`24`	`22`	`pie-icon-button {`
`25`		`-`
`26`	`23`	`@include media('<md') {`
`27`	`24`	`--btn-dimension: 40px;`
`28`	`25`	`}`
`@@ -117,10 +114,8 @@`
`117`	`114`	`}`
`118`	`115`	`}`
`119`	`116`
`120`		`- // We need to pull in the token directly here because the`
`121`		- // pseudo element `::backdrop` doesn't seem to pick up custom css properties.
`122`	`117`	`&::backdrop {`
`123`		`- background: #{dt.$color-overlay};`
	`118`	`+ background: var(--dt-color-overlay);`
`124`	`119`	`}`
`125`	`120`
`126`	`121`	`& .c-modal-footer {`