@app-studio/web 0.9.77 → 0.9.78

package/dist/web.umd.development.js

@@ -25593,7 +25593,7 @@
     _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
@@ -26048,23 +26048,34 @@
    */
   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();