feat: Added dark mode bias and better font sizes, b=no-bug, c=common, tabs, workspaces

prefs/theme.yaml

@@ -8,6 +8,9 @@
 - name: zen.theme.content-element-separation
   value: 8
 
+- name: zen.theme.dark-mode-bias
+  value: 0.25
+
 - name: zen.theme.gradient
   value: true
 

src/browser/themes/shared/preferences/zen-preferences.css

@@ -136,16 +136,6 @@ groupbox h2 {
   left: 0;
 }
 
-#searchInput {
-  width: 100% !important;
-  border: none;
-  outline: none;
-  min-height: 40px;
-  border-radius: 10px;
-  background: light-dark(rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1));
-  padding-inline: 15px;
-}
-
 .textbox-search-sign {
   margin-right: 15px;
 }

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

@@ -221,6 +221,10 @@
       Segoe UI Symbol,
       Noto Color Emoji;
   }
+
+  @media (-moz-platform: windows) {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  }
 }
 
 #main-window:not([chromehidden~='toolbar']) {

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

@@ -312,7 +312,11 @@
         /* Use an empty SVG as placeholder */
         content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3C/svg%3E") !important;
         /* Semi-transparent background based on primary color */
-        background: color-mix(in srgb, var(--zen-primary-color) 30%, transparent 70%);
+        background: color-mix(
+          in srgb,
+          var(--zen-primary-color) 80%,
+          light-dark(rgb(0, 0, 0), rgb(255, 255, 255))
+        );
       }
     }
 

src/zen/workspaces/ZenGradientGenerator.mjs

@@ -125,6 +125,8 @@
         2,
         darkModeChange
       );
+
+      XPCOMUtils.defineLazyPreferenceGetter(this, 'darkModeBias', 'zen.theme.dark-mode-bias', 0.25);
     }
 
     handleDarkModeChange(event) {
@@ -1209,7 +1211,7 @@
       let lightText = this.getToolbarColor(false); // e.g. [r, g, b, a]
 
       if (this.canBeTransparent) {
-        lightText[3] -= 0.25; // Reduce alpha for light text
+        lightText[3] -= this.darkModeBias; // Reduce alpha for light text
       }
 
       // Composite text color over background
@@ -1490,7 +1492,7 @@
       const rgb = this.hexToRgb(accentColor);
       if (this.isDarkMode) {
         // If the theme is dark, we want to use a lighter color
-        return this.blendColors(rgb, [0, 0, 0], 30);
+        return this.blendColors(rgb, [0, 0, 0], 60);
       }
       return rgb;
     }

src/zen/workspaces/zen-workspaces.css

@@ -308,6 +308,11 @@ zen-workspace {
   }
 }
 
+.workspace-arrowscrollbox {
+  font-size: 14px;
+  font-weight: 500;  
+}
+
 /** Customiable UI, this is an auto generated ID */
 #wrapper-zen-workspaces-button {
   width: 100%;