feat: Improved color blending for transparent systems, b=no-bug, c=common, workspaces

Author: mr-cheffy

src/zen/common/styles/zen-popup.css

@@ -40,8 +40,13 @@
 menupopup,
 panel {
   --panel-background: var(--arrowpanel-background);
-  --panel-border-radius: var(--zen-native-inner-radius);
   --menuitem-padding: 6px !important;
+  --panel-shadow-margin: 10px;
+
+  /* This should match GetMenuMaskImage() on macOS, or be overridden below */
+  @media (-moz-platform: macos) {
+    --panel-border-radius: 10px;
+  }
 }
 
 /* split-view popup */

src/zen/common/styles/zen-theme.css

@@ -228,15 +228,6 @@
   @media (-moz-windows-mica) or (-moz-platform: macos) or ((-moz-platform: linux) and -moz-pref('zen.widget.linux.transparency')) {
     background: transparent;
     --zen-themed-toolbar-bg-transparent: transparent;
-    @media -moz-pref('widget.windows.mica.toplevel-backdrop', 2) {
-      --zen-themed-toolbar-bg-transparent: light-dark(
-        rgba(0, 0, 0, 0.2),
-        rgba(255, 255, 255, 0.35)
-      );
-    }
-    @media (-moz-platform: macos) {
-      --zen-themed-toolbar-bg-transparent: rgba(255, 255, 255, 0.3);
-    }
   }
 
   &[zen-should-be-dark-mode='true'] #browser {

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -1048,6 +1048,23 @@
     }
 
     blendWithWhiteOverlay(baseColor, opacity) {
+      let colorToBlend;
+      let colorToBlendOpacity;
+      if (this.isMica) {
+        colorToBlend = !this.isDarkMode ? [0, 0, 0] : [255, 255, 255];
+        colorToBlendOpacity = !this.isDarkMode ? 0.2 : 0.3;
+      } else if (AppConstants.platform === 'macosx') {
+        colorToBlend = [255, 255, 255];
+        colorToBlendOpacity = 0.3;
+      }
+      if (colorToBlend) {
+        const blendedAlpha = Math.min(
+          1,
+          opacity + MIN_OPACITY + colorToBlendOpacity * (1 - (opacity + MIN_OPACITY))
+        );
+        baseColor = this.blendColors(baseColor, colorToBlend, blendedAlpha * 100);
+        opacity += colorToBlendOpacity * (1 - opacity);
+      }
       return `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${opacity})`;
     }
 
@@ -1110,7 +1127,7 @@
         return forToolbar
           ? this.getToolbarModifiedBase()
           : this.isDarkMode
-            ? 'rgba(0, 0, 0, 0.45)'
+            ? 'rgba(0, 0, 0, 0.25)'
             : 'transparent';
       } else if (themedColors.length === 1) {
         return this.getSingleRGBColor(themedColors[0], forToolbar);

src/zen/workspaces/zen-gradient-generator.css

@@ -235,15 +235,15 @@
 .zen-theme-picker-gradient {
   position: relative;
   overflow: hidden;
-  border-radius: calc(var(--zen-native-content-radius) - 4px);
+  border-radius: calc(var(--arrowpanel-border-radius) - 4px);
 
   min-height: calc(var(--panel-width) - var(--panel-padding) * 2 - 2px);
   background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.03));
   background-image: radial-gradient(
     light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1)) 1px,
     transparent 0
   );
-  background-position: -20px -20px;
+  background-position: -23px -23px;
   background-size: 6px 6px;
 
   & .zen-theme-picker-dot {