@widergy/energy-ui 3.68.2 → 3.68.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.68.3](https://github.com/widergy/energy-ui/compare/v3.68.2...v3.68.3) (2025-04-07)
+
+
+### Bug Fixes
+
+* [UGC-1266] backdrop resolve css fixes ([#596](https://github.com/widergy/energy-ui/issues/596)) ([e0ff417](https://github.com/widergy/energy-ui/commit/e0ff417df199f70533c213eb39e999c104b30ebf))
+
 ## [3.68.2](https://github.com/widergy/energy-ui/compare/v3.68.1...v3.68.2) (2025-04-03)
 
 

package/dist/components/UTModal/theme.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.retrieveStyle = void 0;
+var _classesUtils = require("../../utils/classesUtils");
 var _shadowUtils = require("../../utils/shadowUtils");
 const retrieveStyle = _ref => {
   var _theme$Palette$shadow;
@@ -18,10 +19,7 @@ const retrieveStyle = _ref => {
         level: 2
       }),
       '&::backdrop': {
-        // Esto debería tomarse de la paleta (dark05), pero el pseudo-elemento backdrop
-        // no hereda las variables seteadas en html/:root.
-        // backgroundColor: theme.Palette.dark['05']
-        backgroundColor: '#091E42',
+        backgroundColor: (0, _classesUtils.resolveCssValue)(theme.Palette.dark['05']),
         opacity: '0.25'
       }
     },

package/dist/components/UTPanel/versions/V1/index.js

@@ -34,9 +34,10 @@ const {
 } = _testIds.COMPONENT_IDS.panelIds;
 const UTPanel = _ref => {
   let {
+    BackdropProps = {},
     children,
-    classNames,
     classes: theme,
+    classNames,
     closeButtonDataTestId = closeButtonId,
     collapsableHeader = false,
     currentStep = 1,
@@ -96,7 +97,14 @@ const UTPanel = _ref => {
     onClose: onClose,
     onOpen: onOpen,
     open: open,
-    swipeAreaWidth: 0
+    swipeAreaWidth: 0,
+    BackdropProps: {
+      ...BackdropProps,
+      classes: {
+        root: drawerClasses.backdrop,
+        ...(BackdropProps === null || BackdropProps === void 0 ? void 0 : BackdropProps.classes)
+      }
+    }
   }, props), /*#__PURE__*/_react.default.createElement("div", {
     className: _stylesModule.default.controlAreaContainer
   }, /*#__PURE__*/_react.default.createElement("div", {
@@ -177,8 +185,9 @@ const UTPanel = _ref => {
   }, mainButton), (mainButton === null || mainButton === void 0 ? void 0 : mainButton.text) || _constants.ACCEPT_BUTTON_TEXT));
 };
 UTPanel.propTypes = {
-  classNames: _propTypes.object,
+  BackdropProps: _propTypes.object,
   classes: (0, _propTypes.objectOf)(_propTypes.string),
+  classNames: _propTypes.object,
   closeButtonDataTestId: _propTypes.string,
   collapsableHeader: _propTypes.bool,
   currentStep: _propTypes.number,

package/dist/components/UTPanel/versions/V1/theme.js

@@ -15,6 +15,10 @@ const retrieveStyle = _ref => {
     },
     colorPrimary: {
       backgroundColor: (0, _seamlessImmutable.getIn)(theme, ['UTPanel', 'progressBar', 'colorPrimary', 'backgroundColor'], "".concat(theme.Palette.light['04'], " !important"))
+    },
+    backdrop: {
+      backgroundColor: theme.Palette.dark['05'],
+      opacity: '0.25 !important'
     }
   };
 };

package/dist/utils/classesUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withImportant = exports.mergeClasses = void 0;
+exports.withImportant = exports.resolveCssValue = exports.mergeClasses = void 0;
 const mergeClasses = (themeClasses, classNames) => {
   if (!classNames) return themeClasses;
   const classes = {};
@@ -15,4 +15,15 @@ const mergeClasses = (themeClasses, classNames) => {
 };
 exports.mergeClasses = mergeClasses;
 const withImportant = style => style && "".concat(style, " !important");
-exports.withImportant = withImportant;
+exports.withImportant = withImportant;
+const resolveCssValue = value => {
+  if (typeof value === 'string' && value.startsWith('var(')) {
+    const variableName = value.slice(4, -1).trim();
+    if (typeof window !== 'undefined' && window.getComputedStyle) {
+      const computedValue = window.getComputedStyle(document.documentElement).getPropertyValue(variableName).trim();
+      return computedValue || value;
+    }
+  }
+  return value;
+};
+exports.resolveCssValue = resolveCssValue;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@widergy/energy-ui",
-  "version": "3.68.2",
+  "version": "3.68.3",
   "description": "Widergy Web Components",
   "author": "widergy",
   "license": "MIT",