Changed light theme and added new split view icon

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

@@ -132,7 +132,7 @@ pref('zen.splitView.rearrange-hover-size', 24);
 
 // Zen Workspaces
 pref('zen.workspaces.enabled', true);
-pref('zen.workspaces.hide-deactivated-workspaces', true);
+pref('zen.workspaces.hide-deactivated-workspaces', false);
 pref('zen.workspaces.hide-default-container-indicator', true);
 pref('zen.workspaces.individual-pinned-tabs', true);
 pref('zen.workspaces.show-icon-strip', true);

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

@@ -85,7 +85,7 @@
     border-bottom: 0px solid transparent !important;
 
     --tab-block-margin: 2px;
-    --tab-selected-bgcolor: var(--zen-colors-primary);
+    --tab-selected-bgcolor: light-dark(color-mix(in srgb, var(--zen-colors-primary) 1%, white 99%), var(--zen-colors-secondary));
     grid-gap: 0 !important;
 
     & .tabbrowser-tab {
@@ -104,12 +104,6 @@
       & .tab-background {
         overflow: hidden;
 
-        &:is([selected], [multiselected]) {
-          @media not (prefers-color-scheme: dark) {
-            border: 1px solid color-mix(in srgb, var(--zen-colors-primary) 60%, transparent 40%) !important;
-          }
-        }
-
         & .tab-context-line {
           margin: 0 0px !important;
           width: 3px !important;
@@ -155,7 +149,7 @@
     & .tab-background:not(:hover):not([selected]):not([multiselected]) {
       --zen-pinned-tabs-bgcolor: color-mix(in srgb, var(--zen-colors-secondary) 10%, transparent 90%);
       @media not (prefers-color-scheme: dark) {
-        --zen-pinned-tabs-bgcolor: color-mix(in srgb, var(--zen-colors-secondary) 50%, transparent 50%);
+        --zen-pinned-tabs-bgcolor: color-mix(in srgb, var(--zen-colors-primary) 10%, transparent 90%);
       }
       background: var(--zen-pinned-tabs-bgcolor) !important;
       backdrop-filter: blur(5px);
@@ -281,8 +275,12 @@
       & .tabbrowser-tab {
         & .tab-background {
           @media not (prefers-color-scheme: dark) {
-            box-shadow: none !important;
+            &:is([selected], [multiselected]) {
+              box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1) !important;
+            }
           }
+          margin-inline: var(--tab-block-margin);
+          --border-radius-medium: 10px; /* Terrible, I know */
         }
 
         &:not([pinned]):is(:hover, [visuallyselected]) .tab-close-button {
@@ -407,7 +405,7 @@
 
         & .tab-background:is([selected], [multiselected]) {
           @media not (prefers-color-scheme: dark) {
-            box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.05) !important;
+            box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.12) !important;
           }
         }
 
@@ -631,7 +629,6 @@
 
       &[selected] .tab-background {
         border-color: transparent;
-        background: var(--zen-colors-secondary) !important;
       }
     }
   }

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

@@ -21,7 +21,7 @@
 
   --zen-colors-hover-bg: color-mix(in srgb, var(--zen-primary-color) 90%, white 10%);
   --zen-colors-primary-foreground: color-mix(in srgb, var(--zen-primary-color) 80%, black 20%);
-  --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 98%, black 2%);
+  --zen-colors-border: color-mix(in srgb, var(--zen-colors-secondary) 97%, black 3%);
 
   --zen-colors-input-bg: color-mix(in srgb, var(--zen-primary-color) 1%, var(--zen-colors-tertiary) 99%);
 
@@ -95,6 +95,7 @@
   --zen-panel-radius: var(--zen-border-radius);
 
   --toolbarbutton-border-radius: 6px;
+  --urlbar-margin-inline: 1px !important;
 
   --fp-contextmenu-border-radius: 8px;
   --fp-contextmenu-padding: calc(4px - var(--fp-contextmenu-menuitem-border-width)) 0;
@@ -115,7 +116,7 @@
 
   --input-bgcolor: var(--zen-colors-tertiary) !important;
   --input-border-color: var(--zen-input-border-color) !important;
-  --zen-themed-toolbar-bg: light-dark(#fdfdfd, var(--zen-colors-tertiary)) !important;
+  --zen-themed-toolbar-bg: light-dark(#f7f7f7, var(--zen-colors-tertiary)) !important;
 
   --toolbar-field-background-color: var(--zen-colors-input-bg) !important;
   --arrowpanel-background: var(--zen-dialog-background) !important;

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

@@ -27,6 +27,10 @@
   box-shadow: var(--panel-shadow) !important;
 }
 
+#urlbar-background {
+  background: transparent;
+}
+
 #urlbar[focused='true'] > #urlbar-background {
   background: var(--zen-dialog-background) !important;
 }

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

@@ -30,7 +30,7 @@
       }
 
       @media (-moz-bool-pref: 'zen.workspaces.hide-deactivated-workspaces') {
-        &:not([active='true']) {
+        &:not([active='true']):not(:hover) {
           &::after {
             content: '';
             position: absolute;
@@ -40,6 +40,7 @@
             background: color-mix(in srgb, var(--zen-primary-color) 10%, light-dark(rgba(0,0,0,.4), rgba(255,255,255,.4)) 90%);
             left: 50%;
             top: 50%;
+            filter: saturate(140%) brightness(110%) !important;
             transform: translate(-50%, -50%);
           }
 

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

@@ -448,15 +448,6 @@ var gZenLooksAndFeel = {
     window.addEventListener('unload', () => {
       window.matchMedia('(prefers-color-scheme: dark)').removeListener(onPreferColorSchemeChange);
     });
-    setTimeout(() => {
-      const group = document.getElementById('zenLooksAndFeelGroup');
-      const webGroup = document.getElementById('webAppearanceGroup');
-      webGroup.style.display = 'none';
-      // Iterate reverse to prepend the elements in the correct order.
-      for (let child of [...webGroup.children].reverse()) {
-        group.prepend(child);
-      }
-    }, 500);
     this.setDarkThemeListener();
     this.setCompactModeStyle();
   },

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

@@ -167,6 +167,9 @@
                   </label>
             </form>
       </html:div>
+      <html:div data-l10n-id="preferences-web-appearance-footer">
+            <html:a id="web-appearance-manage-themes-link" class="text-link" data-l10n-name="themes-link" href="about:addons" target="_blank" />
+        </html:div>
 </groupbox>
 
 <hbox id="zenThemeCategory"

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

@@ -238,6 +238,10 @@ groupbox h2 {
   border-color: var(--zen-primary-color);
 }
 
+#zenLooksAndFeelGroup > html|div:last-of-type {
+  margin-top: 15px;
+}
+
 .zen-compact-mode-styles-browser-wrapper {
   width: 55%;
   height: 60px;
@@ -246,7 +250,13 @@ groupbox h2 {
   border: 1px solid var(--zen-colors-border);
   background: var(--zen-colors-tertiary);
   position: relative;
-  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+  --zen-compact-mode-styles-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+
+  @media not (prefers-color-scheme: dark) {
+    --zen-compact-mode-styles-shadow: 0 0 .5px .5px rgba(0, 0, 0, 0.1);
+  }
+
+  box-shadow: var(--zen-compact-mode-styles-shadow);
 
   padding: 7px;
 
@@ -255,7 +265,7 @@ groupbox h2 {
     background: var(--zen-primary-color);
     border-radius: 5px;
     height: 18px;
-    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--zen-compact-mode-styles-shadow);
   }
 
   &[top] div {
@@ -263,7 +273,7 @@ groupbox h2 {
     background: var(--zen-primary-color);
     border-radius: 5px;
     height: 100%;
-    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--zen-compact-mode-styles-shadow);
   }
 
   &[both] div {
@@ -271,7 +281,7 @@ groupbox h2 {
     height: 100%;
     background: var(--zen-colors-secondary);
     border-radius: 5px;
-    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: var(--zen-compact-mode-styles-shadow);
   }
 }
 

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

@@ -62,7 +62,7 @@
 }
 
 #context-zenSplitLink {
-  --menu-image: url('link.svg') !important;
+  --menu-image: url('split.svg') !important;
 }
 
 #sidebar-button:-moz-locale-dir(ltr):not([positionend]),
@@ -404,7 +404,7 @@
 }
 
 #zen-split-views-button {
-  list-style-image: url('link.svg') !important;
+  list-style-image: url('split.svg') !important;
   fill: var(--toolbarbutton-icon-fill-attention);
   fill-opacity: 1;
 }

src/browser/themes/shared/zen-icons/jar.inc.mn

@@ -113,6 +113,7 @@
   skin/classic/browser/zen-icons/sidebars.svg                      (../shared/zen-icons/sidebars.svg) 
   skin/classic/browser/zen-icons/source-code.svg                      (../shared/zen-icons/source-code.svg) 
   skin/classic/browser/zen-icons/spell-check.svg                      (../shared/zen-icons/spell-check.svg) 
+  skin/classic/browser/zen-icons/split.svg                      (../shared/zen-icons/split.svg) 
   skin/classic/browser/zen-icons/stop-to-reload.svg                      (../shared/zen-icons/stop-to-reload.svg) 
   skin/classic/browser/zen-icons/tab-audio-blocked-small.svg                      (../shared/zen-icons/tab-audio-blocked-small.svg) 
   skin/classic/browser/zen-icons/tab-audio-muted-small.svg                      (../shared/zen-icons/tab-audio-muted-small.svg) 

src/browser/themes/shared/zen-icons/sidebars.svg

@@ -1,8 +1,3 @@
-<!--
+<svg width="15" height="13" viewBox="0 0 15 11" fill="context-fill" fill-opacity="context-fill-opacity" xmlns="http://www.w3.org/2000/svg">
-   - This Source Code Form is subject to the terms of the Mozilla Public
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.13525 1.5824H12.7046C13.2569 1.5824 13.7046 2.03011 13.7046 2.5824V8.5824C13.7046 9.13468 13.2569 9.5824 12.7046 9.5824H6.13525V1.5824ZM5.13525 0.582397H6.13525H12.7046C13.8092 0.582397 14.7046 1.47783 14.7046 2.5824V8.5824C14.7046 9.68697 13.8092 10.5824 12.7046 10.5824L6.13525 10.5824H5.13525L2.70459 10.5824C1.60002 10.5824 0.70459 9.68697 0.70459 8.5824V2.5824C0.70459 1.47783 1.60002 0.582397 2.70459 0.582397H5.13525ZM5.13525 9.5824H2.70459C2.15231 9.5824 1.70459 9.13468 1.70459 8.5824V2.5824C1.70459 2.03011 2.15231 1.5824 2.70459 1.5824H5.13525V9.5824Z"/>
-   - License, v. 2.0. If a copy of the MPL was not distributed with this
+</svg>
-   - file, You can obtain one at http://mozilla.org/MPL/2.0/.
-   -->
-<svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" fill="context-fill" fill-opacity="context-fill-opacity">
-  <path d="M14 1c1.099 0 2 .901 2 2v10c0 1.099-.901 2-2 2H2c-1.099 0-2-.901-2-2V3c0-1.099.901-2 2-2zm0 1H7v12h7c.558 0 1-.442 1-1V3c0-.558-.442-1-1-1zM6 2H2c-.558 0-1 .442-1 1v10c0 .558.442 1 1 1h4zM4.5 4a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5zm0 3a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5zm0 3a.5.5 0 0 1 .5.5.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5.5.5 0 0 1 .5-.5z"/>
-</svg>

src/browser/themes/shared/zen-icons/split.svg

@@ -0,0 +1,11 @@
+<svg width="11" height="11" viewBox="0 0 11 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2002_244)">
+<path d="M5.20215 0.582397V10.5824" stroke="context-fill"></path>
+</g>
+<rect x="0.702148" y="1.0824" width="9" height="9" rx="1.5" stroke="context-fill"></rect>
+<defs>
+<clipPath id="clip0_2002_244">
+<rect x="0.202148" y="0.582397" width="10" height="10" rx="2" fill="context-fill" fill-opacity="context-fill-opacity" />
+</clipPath>
+</defs>
+</svg>