feat: Disable light weight themes and use our own ones, b=no-bug, c=common, tabs, workspaces

src/browser/app/profile/features/theme.inc

@@ -21,3 +21,5 @@ pref('zen.theme.window.scheme', 'auto'); // auto, light, dark
   pref('zen.theme.acrylic-elements', false);
 #endif
 
+// Light weight themes
+pref('zen.theme.disable-lightweight', false);

src/toolkit/modules/LightweightThemeConsumer-sys-mjs.patch

@@ -1,5 +1,5 @@
 diff --git a/toolkit/modules/LightweightThemeConsumer.sys.mjs b/toolkit/modules/LightweightThemeConsumer.sys.mjs
-index d8c79cbae4de3ebfc5dc62f3597c7be4965a5429..4398108bd6d74aa8b6689baaf5334d8ba9a26c4e 100644
+index fe01b25c520d1be71224b136b1ce46e9577e11a1..e5501590f3695ed4c2e19be5c104958b497c886e 100644
 --- a/toolkit/modules/LightweightThemeConsumer.sys.mjs
 +++ b/toolkit/modules/LightweightThemeConsumer.sys.mjs
 @@ -31,7 +31,7 @@ const toolkitVariableMap = [
@@ -11,3 +11,12 @@ index d8c79cbae4de3ebfc5dc62f3597c7be4965a5429..4398108bd6d74aa8b6689baaf5334d8b
          }
          // Remove the alpha channel
          const { r, g, b } = rgbaChannels;
+@@ -317,7 +317,7 @@ LightweightThemeConsumer.prototype = {
+     }
+ 
+     let theme = useDarkTheme ? themeData.darkTheme : themeData.theme;
+-    if (!theme) {
++    if (!theme || Services.prefs.getBoolPref("zen.theme.disable-lightweight")) {
+       theme = { id: DEFAULT_THEME_ID };
+     }
+     let hasTheme = theme.id != DEFAULT_THEME_ID || useDarkTheme;

src/zen/common/styles/zen-single-components.css

@@ -103,7 +103,7 @@ body > #confetti {
   :root:is([zen-single-toolbar='true'], :not([zen-sidebar-expanded='true']))
     #zen-sidebar-top-buttons-customization-target
     &,
-  #zen-sidebar-foot-buttons {
+  #zen-sidebar-foot-buttons & {
     --tab-border-radius: 6px;
     --toolbarbutton-border-radius: var(--tab-border-radius);
     --toolbarbutton-inner-padding: 7px;

src/zen/tabs/zen-tabs/vertical-tabs.css

@@ -136,9 +136,6 @@
   }
 
   & #nav-bar {
-    /* Add bottom margin */
-    margin-bottom: var(--zen-toolbox-padding);
-
     /* Hide flexible spaces */
     & toolbarspring {
       display: none;
@@ -1275,7 +1272,6 @@
 .zen-essentials-container {
   will-change: transform;
 
-  padding-bottom: var(--zen-toolbox-padding);
   overflow: hidden;
   gap: 4px;
   transition:
@@ -1299,6 +1295,7 @@
   min-width: calc(100% + var(--zen-toolbox-padding) * 2);
   width: calc(100% + var(--zen-toolbox-padding) * 2);
   padding: 0 var(--zen-toolbox-padding);
+  padding-top: 6px;
   display: grid;
 
   position: absolute;

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -1091,8 +1091,8 @@
         }
         if (themedColors.length === 2) {
           return [
-            `linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[1], forToolbar)} -25%, transparent 100%)`,
-            `linear-gradient(${rotation + 180}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} -25%, transparent 100%)`,
+            `linear-gradient(${rotation}deg, ${this.getSingleRGBColor(themedColors[1], forToolbar)} 0%, transparent 100%)`,
+            `linear-gradient(${rotation + 180}deg, ${this.getSingleRGBColor(themedColors[0], forToolbar)} 0%, transparent 100%)`,
           ].join(', ');
         } else if (themedColors.length === 3) {
           let color1 = this.getSingleRGBColor(themedColors[2], forToolbar);
@@ -1100,9 +1100,9 @@
           let color3 = this.getSingleRGBColor(themedColors[1], forToolbar);
           if (!forToolbar) {
             return [
-              `radial-gradient(circle at -30% -30%, ${color2}, transparent 100%)`,
-              `radial-gradient(circle at 130% -30%, ${color3}, transparent 100%)`,
-              `linear-gradient(to top, ${color1} -30%, transparent 60%)`,
+              `radial-gradient(circle at 0% 0%, ${color2}, transparent 100%)`,
+              `radial-gradient(circle at 100% 0%, ${color3}, transparent 100%)`,
+              `linear-gradient(to top, ${color1} 0%, transparent 60%)`,
             ].join(', ');
           }
           return [`linear-gradient(120deg, ${color1} -30%, ${color3} 100%)`].join(', ');
@@ -1250,19 +1250,7 @@
     };
 
     getMostDominantColor(allColors) {
-      const dominantColor = this.getPrimaryColor(allColors);
-      if (!dominantColor) {
-        return this.hexToRgb(this.getNativeAccentColor());
-      }
-      const result = this.pSBC(
-        this.isDarkMode ? 0.2 : -0.5,
-        `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
-      );
-      const color = result?.match(/\d+/g)?.map(Number);
-      if (!color || color.length !== 3) {
-        return this.hexToRgb(this.getNativeAccentColor());
-      }
-      return color;
+      return this.getPrimaryColor(allColors);
     }
 
     blendColors(rgb1, rgb2, percentage) {
@@ -1359,9 +1347,11 @@
         browser.gZenThemePicker.currentOpacity = workspaceTheme.opacity ?? 0.5;
         browser.gZenThemePicker.currentTexture = workspaceTheme.texture ?? 0;
 
-        const dominantColor = this.getMostDominantColor(workspaceTheme.gradientColors);
-        const isDefaultTheme =
-          dominantColor?.toString() === this.hexToRgb(this.getNativeAccentColor()).toString();
+        let dominantColor = this.getMostDominantColor(workspaceTheme.gradientColors);
+        const isDefaultTheme = !dominantColor;
+        if (isDefaultTheme) {
+          dominantColor = this.hexToRgb(this.getNativeAccentColor());
+        }
 
         const opacitySlider = browser.document.getElementById(
           'PanelUI-zen-gradient-generator-opacity'
@@ -1472,9 +1462,10 @@
         if (dominantColor) {
           browser.document.documentElement.style.setProperty(
             '--zen-primary-color',
-            typeof dominantColor === 'string'
-              ? dominantColor
-              : `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
+            this.pSBC(
+              this.isDarkMode ? 0.2 : -0.5,
+              `rgb(${dominantColor[0]}, ${dominantColor[1]}, ${dominantColor[2]})`
+            )
           );
           let isDarkMode = this.isDarkMode;
           if (!isDefaultTheme) {

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

@@ -192,14 +192,14 @@
   &::before {
     content: '';
     position: absolute;
-    width: 100%;
+    width: calc(100% - 8px);
     height: 16px;
     background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
     border-radius: 999px;
     pointer-events: none;
     z-index: -1;
     top: 50%;
-    left: 4px;
+    left: 8px;
     transform: translateY(-50%);
   }
 
@@ -215,6 +215,7 @@
   margin: 0 !important;
   background: transparent;
   z-index: 2;
+  padding: 0 5px;
 
   &::-moz-range-thumb {
     background: light-dark(black, white);