feat: Improved color choices for backgrounds and fixed opacity on tab titles, b=no-bug, c=common, tabs, workspaces

src/zen/common/styles/zen-browser-ui.css

@@ -11,7 +11,7 @@
 #navigator-toolbox {
   /* see issue #426 */
   background: var(--zen-navigator-toolbox-background, transparent) !important;
-  --inactive-titlebar-opacity: 1;
+  --inactive-titlebar-opacity: 0.8;
 }
 
 #nav-bar,

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

@@ -117,8 +117,8 @@
   --zen-button-padding: 0.6rem 1.2rem;
 
   --zen-toolbar-element-bg: light-dark(
-    color-mix(in oklch, var(--toolbox-textcolor) 8%, rgba(255, 255, 255, 0.01)),
-    color-mix(in oklch, var(--toolbox-textcolor) 15%, transparent 85%)
+    color-mix(in oklch, var(--toolbox-textcolor) 9%, transparent),
+    color-mix(in oklch, var(--toolbox-textcolor) 15%, transparent)
   );
 
   /* Toolbar */
@@ -139,6 +139,7 @@
   ) !important;
 
   --toolbar-color: light-dark(rgb(21, 20, 26, 0.7), rgb(251, 251, 254, 0.7)) !important;
+  --toolbox-textcolor-inactive: var(--toolbox-textcolor) !important;
 
   /* Other colors */
   --urlbar-box-bgcolor: var(--zen-urlbar-background) !important;

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

@@ -1298,11 +1298,14 @@
   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;
 
+  &:not(:empty) {
+    padding-top: 6px;
+  }
+
   &[hidden='true'] {
     --hidden-essentials-width: calc(var(--zen-sidebar-width) + var(--zen-toolbox-padding));
     max-width: var(

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -1451,16 +1451,9 @@
             browser.document.documentElement.removeAttribute('zen-should-be-dark-mode');
           }
           // Set `--toolbox-textcolor` to have a contrast with the primary color
-          await gZenUIManager.motion.animate(
-            browser.document.documentElement,
-            {
-              '--toolbox-textcolor': isDarkMode
-                ? 'rgba(255, 255, 255, 0.7)'
-                : 'rgba(23, 23, 23, 0.7)',
-            },
-            {
-              duration: 0.05,
-            }
+          document.documentElement.style.setProperty(
+            '--toolbox-textcolor',
+            isDarkMode ? 'rgba(255, 255, 255, 0.8)' : 'rgba(0, 0, 0, 0.8)'
           );
         }
 

src/zen/workspaces/zen-workspaces.css

@@ -34,8 +34,8 @@
 
   & toolbarbutton {
     margin: 0;
-    width: 28px;
-    height: 28px;
+    width: 30px;
+    height: 30px;
     display: flex;
     justify-content: center;
     padding: 0 !important;