@app-studio/web 0.9.77 → 0.9.78

package/dist/web.cjs.development.js

@@ -25633,7 +25633,7 @@ var _excluded$1o = ["children", "showRadialGradient", "views", "themeMode"],
   _excluded7 = ["children", "src", "backgroundSize", "backgroundPosition", "backgroundRepeat", "backgroundAttachment", "imageOpacity", "overlay", "blendMode", "views", "themeMode"],
   _excluded8 = ["children", "src", "autoPlay", "loop", "muted", "playsInline", "overlay", "blendMode", "views", "themeMode"],
   _excluded9 = ["children"],
-  _excluded10 = ["contentPosition"],
+  _excluded10 = ["contentPosition", "backgroundColor"],
   _excluded11 = ["children", "views"],
   _excluded12 = ["children", "designProps", "shape", "decorationRotation", "decorationScale", "decorationOpacity", "views"];
 // Background Context
@@ -26088,23 +26088,34 @@ var BackgroundGradient = _ref9 => {
  */
 var BackgroundOverlay = _ref10 => {
   var {
-      contentPosition
+      contentPosition,
+      backgroundColor = 'color.black.900'
     } = _ref10,
     props = _objectWithoutPropertiesLoose(_ref10, _excluded10);
   var getDefaultOverlay = () => {
+    var ligthBackground = backgroundColor + ".100";
+    var darkBackground = backgroundColor + ".900";
+    var midBackground = backgroundColor + ".600";
+    var midDarkBackground = backgroundColor + ".400";
+    if (backgroundColor.indexOf('.') === -1) {
+      ligthBackground = "color-mix(in srgb, " + backgroundColor + " 10%, transparent)";
+      darkBackground = "color-mix(in srgb, " + backgroundColor + " 90%, transparent)";
+      midBackground = "color-mix(in srgb, " + backgroundColor + " 70%, transparent)";
+      midDarkBackground = "color-mix(in srgb, " + backgroundColor + " 50%, transparent)";
+    }
     switch (contentPosition) {
       case 'left':
-        return 'radial-gradient(circle at 80% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to right, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.2) 100%)';
+        return "radial-gradient(circle at 70% 50%, " + ligthBackground + " 0%, " + ligthBackground + " 100%), linear-gradient(to right, " + darkBackground + " 0%, " + midBackground + " 65%, " + ligthBackground + " 100%)";
       case 'right':
-        return 'radial-gradient(circle at 20% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to left, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.2) 100%)';
+        return "radial-gradient(circle at 30% 50%, " + ligthBackground + " 0%, " + ligthBackground + " 100%), linear-gradient(to left, " + darkBackground + " 0%, " + midBackground + " 65%, " + ligthBackground + " 100%)";
       case 'top':
-        return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.1) 100%)';
+        return "radial-gradient(circle at 50% 40%, " + ligthBackground + " 0%, " + ligthBackground + " 100%), linear-gradient(to bottom, " + darkBackground + " 0%, " + midBackground + " 60%, " + ligthBackground + " 100%)";
       case 'bottom':
-        return 'radial-gradient(circle at 50% 80%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.1) 100%), linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.6) 80%, rgba(0,0,0,0.1) 100%)';
+        return "radial-gradient(circle at 50% 60%, " + ligthBackground + " 0%, " + ligthBackground + " 100%), linear-gradient(to top, " + darkBackground + " 0%, " + midBackground + " 60%, " + ligthBackground + " 100%)";
       case 'center':
-        return 'radial-gradient(circle at 50% 70%, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%)';
+        return "radial-gradient(circle at 50% 70%, " + darkBackground + " 0%, " + ligthBackground + " 100%)";
       default:
-        return 'rgba(0,0,0,0.5)';
+        return midDarkBackground;
     }
   };
   var background = getDefaultOverlay();