@descope/web-components-ui 1.0.238 → 1.0.239

package/dist/umd/descope-modal-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4641],{958:(e,t,o)=>{o.r(t),o.d(t,{ModalClass:()=>n}),o(1932);var s=o(2061),a=o(4567),r=o(1e3);const l=(0,a.iY)("modal"),n=(0,s.qC)((0,r.yk)({mappings:{overlayBackgroundColor:{property:()=>n.cssVarList.overlay.backgroundColor},overlayShadow:{property:()=>n.cssVarList.overlay.shadow},overlayWidth:{property:()=>n.cssVarList.overlay.width}}}),(0,r.Iw)({name:"overlay",selector:"",mappings:{hostDisplay:{selector:()=>":host(.descope-modal)",property:"display",important:!0},backgroundColor:{selector:()=>"::part(content)",property:"background-color"},width:{selector:()=>"::part(overlay)",property:"width"},shadow:{selector:()=>"::part(overlay)",property:"box-shadow"}},forward:{include:!1,attributes:["opened"]}}),r.e4,r.Ae,(e=>class extends e{get opened(){return"true"===this.getAttribute("opened")}handleOpened(){(0,a.oP)(this,this.baseElement,{includeAttrs:["opened"]}),this.opened?this.style.display="":this.style.display="none"}init(){super.init?.(),this.style.display="none",setTimeout((()=>{this.baseElement.shadowRoot.querySelector("vaadin-dialog-overlay").appendChild(document.createElement("slot")),this.#e(),this.handleOpened()}))}#e(){const e=this.baseElement.shadowRoot.querySelector("vaadin-dialog-overlay");e._attachOverlay=()=>{e.bringToFront(),this.baseElement.setAttribute("style","display:flex!important;")},e._detachOverlay=()=>{this.baseElement.style.display="none"},e._enterModalState=()=>{},e.close=()=>!1}}))((0,r.DM)({slots:[""],wrappedEleName:"vaadin-dialog",style:()=>"",excludeAttrsSync:["tabindex","opened"],componentName:l}));customElements.define(l,n)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[4641],{958:(e,t,o)=>{o.r(t),o.d(t,{ModalClass:()=>n}),o(1932);var r=o(2061),s=o(4567),a=o(1e3);const l=(0,s.iY)("modal"),n=(0,r.qC)((0,a.yk)({mappings:{overlayBackgroundColor:{property:()=>n.cssVarList.overlay.backgroundColor},overlayShadow:{property:()=>n.cssVarList.overlay.shadow},overlayWidth:{property:()=>n.cssVarList.overlay.width}}}),(0,a.Iw)({name:"overlay",selector:"",mappings:{hostDisplay:{selector:()=>":host(.descope-modal)",property:"display",important:!0},backgroundColor:[{selector:()=>"::part(content)",property:"background-color"},{selector:()=>"::part(overlay)",property:"background-color"}],width:{selector:()=>"::part(overlay)",property:"width"},shadow:{selector:()=>"::part(overlay)",property:"box-shadow"}},forward:{include:!1,attributes:["opened"]}}),a.e4,a.Ae,(e=>class extends e{get opened(){return"true"===this.getAttribute("opened")}handleOpened(){(0,s.oP)(this,this.baseElement,{includeAttrs:["opened"]}),this.opened?this.style.display="":this.style.display="none"}init(){super.init?.(),this.style.display="none",setTimeout((()=>{this.baseElement.shadowRoot.querySelector("vaadin-dialog-overlay").appendChild(document.createElement("slot")),this.#e(),this.handleOpened()}))}#e(){const e=this.baseElement.shadowRoot.querySelector("vaadin-dialog-overlay");e._attachOverlay=()=>{e.bringToFront(),this.baseElement.setAttribute("style","display:flex!important;")},e._detachOverlay=()=>{this.baseElement.style.display="none"},e._enterModalState=()=>{},e.close=()=>!1}}))((0,a.DM)({slots:[""],wrappedEleName:"vaadin-dialog",style:()=>"",excludeAttrsSync:["tabindex","opened"],componentName:l}));customElements.define(l,n)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.238",
+  "version": "1.0.239",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/descope-modal/ModalClass.js

@@ -86,7 +86,10 @@ export const ModalClass = compose(
         property: 'display',
         important: true,
       },
-      backgroundColor: { selector: () => '::part(content)', property: 'background-color' },
+      backgroundColor: [
+        { selector: () => '::part(content)', property: 'background-color' },
+        { selector: () => '::part(overlay)', property: 'background-color' },
+      ],
       width: { selector: () => '::part(overlay)', property: 'width' },
       shadow: { selector: () => '::part(overlay)', property: 'box-shadow' },
     },

package/src/theme/components/modal.js

@@ -1,8 +1,13 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
 import { ModalClass } from '../../components/descope-modal/ModalClass';
 
+const globalRefs = getThemeRefs(globals);
+
 const compVars = ModalClass.cssVarList;
 
 const modal = {
+  [compVars.overlayBackgroundColor]: globalRefs.colors.surface.light,
   [compVars.overlayShadow]: 'none',
   [compVars.overlayWidth]: '700px',
 };