Added theme color deduction for workspace gradients and fixed macos titlebar buttons display

src/browser/app/profile/zen-browser.js

@@ -79,12 +79,12 @@ pref('zen.tabs.show-newtab-under', false);
 pref('zen.theme.accent-color', "#aac7ff");
 pref('zen.theme.border-radius', 8); // In pixels
 pref('zen.theme.content-element-separation', 6); // In pixels
-pref('zen.theme.toolbar-themed', true);
 pref('zen.theme.pill-button', false);
 pref('zen.theme.gradient', true);
 pref('zen.view.compact', false);
 pref('zen.view.experimental-rounded-view', true);
 
+pref('zen.theme.color-prefs.use-workspace-colors', true);
 pref('zen.theme.color-prefs.amoled', false);
 pref('zen.theme.color-prefs.colorful', false);
 

src/browser/base/content/zen-styles/zen-browser-ui.css

@@ -82,3 +82,9 @@
 .titlebar-buttonbox-container {
   height: 100%;
 }
+
+@media (-moz-platform: macos) {
+  .titlebar-buttonbox-container {
+    margin-inline-end: 8px;
+  }
+}

src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css

@@ -98,7 +98,7 @@
     & .tabbrowser-tab {
       animation: zen-slide-in 0.2s ease-in-out;
 
-      max-width: unset !important;
+      max-width: unset;
       padding: 0 !important;
 
       position: relative;
@@ -406,6 +406,10 @@
         transform: translateX(-50%);
         position: absolute;
       }
+
+      & .tabbrowser-tab {
+        max-width: var(--tab-min-width);
+      }
     }
 
     & #TabsToolbar-customization-target {
@@ -417,7 +421,7 @@
     }
 
     & #tabbrowser-tabs {
-      margin-top: -3px;
+      margin-top: -2px;
       --tab-min-width: 36px !important;
 
       & .tabbrowser-tab {
@@ -427,6 +431,8 @@
           margin-inline: auto !important;
 
           &:is([selected], [multiselected]) {
+            box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
+            
             @media not (prefers-color-scheme: dark) {
               box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.12) !important;
             }
@@ -571,7 +577,6 @@
 
         position: absolute;
         padding: var(--zen-toolbox-padding);
-        padding-top: 0;
         transition: 0 !important;
         /*animation: zen-vtabs-animation 0.3s ease-in-out;*/
         -moz-window-dragging: no-drag;

src/browser/base/content/zen-styles/zen-theme.css

@@ -183,10 +183,3 @@
     }
   }
 }
-
-@media not (-moz-bool-pref: 'zen.theme.toolbar-themed') {
-  :root {
-    --toolbar-bgcolor: light-dark(#e6e6e6, #1b1b1b) !important;
-    --zen-themed-toolbar-bg: var(--toolbar-bgcolor);
-  }
-}

src/browser/base/content/zen-styles/zen-urlbar.css

@@ -36,7 +36,7 @@
 }
 
 #urlbar:not([focused='true']):not([breakout-extend="true"]) > #urlbar-background {
-  background: color-mix(in srgb, light-dark(#fff, var(--zen-colors-secondary)) 50%, transparent 50%) !important;
+  background: color-mix(in srgb, light-dark(#fff, var(--zen-colors-tertiary)) 60%, transparent 40%) !important;
   backdrop-filter: blur(10px);
 }
 

src/browser/components/preferences/zen-settings.js

@@ -645,6 +645,7 @@ var gZenLooksAndFeel = {
         colorElemParen.setAttribute('selected', 'true');
       }
       colorElemParen.addEventListener('click', () => {
+        Services.prefs.setBoolPref('zen.theme.color-prefs.use-workspace-colors', false);
         Services.prefs.setStringPref('zen.theme.accent-color', color);
       });
       colorElemParen.appendChild(colorElem);
@@ -967,11 +968,6 @@ var gZenCKSSettings = {
 };
 
 Preferences.addAll([
-  {
-    id: 'zen.theme.toolbar-themed',
-    type: 'bool',
-    default: true,
-  },
   {
     id: 'zen.sidebar.enabled',
     type: 'bool',
@@ -1086,5 +1082,10 @@ Preferences.addAll([
     id: "zen.glance.enabled",
     type: "bool",
     default: true,
-  }
+  },
+  {
+    id: "zen.theme.color-prefs.use-workspace-colors",
+    type: "bool",
+    default: false,
+  },
 ]);

src/browser/components/preferences/zenLooksAndFeel.inc.xhtml

@@ -18,9 +18,9 @@
       <html:div id="zen-theme-builder-wrapper"></html:div>
 
       <box class="indent">
-            <checkbox id="zenLooksAndFeelUseThemedToolbar"
+            <checkbox id="zenLooksAndFeelUseWorkspaceColors"
-            data-l10n-id="zen-look-and-feel-themed-toolbar"
+                  data-l10n-id="zen-look-and-feel-use-workspace-colors"
-            preference="zen.theme.toolbar-themed"/>
+                  preference="zen.theme.color-prefs.use-workspace-colors"/>
       </box>
 
       <hbox id="zenLooksAndFeelGradientPickerParent"></hbox>