desktop/src/browser/themes/shared/tabbrowser/tabs-css.patch

diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
index 203b546933842f4b0134188fda020c4db4dcd0d2..011bcfb023d0cabd55dfa7e49d3409383217e2ca 100644
--- a/browser/themes/shared/tabbrowser/tabs.css
+++ b/browser/themes/shared/tabbrowser/tabs.css
@@ -24,7 +24,7 @@
   --tab-group-line-thickness: 2px;
   --tab-group-line-toolbar-border-distance: 1px;
   /* Collapsed tabs should be square, so set width to match the min height */
-  --tab-collapsed-background-width: var(--tab-min-height);
+  --tab-collapsed-background-width: 48px;
   --tab-collapsed-width: calc(var(--tab-collapsed-background-width) + 2 * var(--tab-inner-inline-margin));
   --tab-inner-inline-margin: var(--space-medium);
   --tab-inline-padding: 8px;
@@ -38,9 +38,9 @@
   --tab-block-margin: 4px;
   --tab-icon-end-margin: 5.5px;
   --tab-label-line-height: 1.7;
-  --tab-loading-fill: #0a84ff;
+  --tab-loading-fill: var(--zen-primary-color);
   --tab-hover-background-color: color-mix(in srgb, currentColor 11%, transparent);
-  --tab-selected-textcolor: var(--toolbar-color);
+  --tab-selected-textcolor: currentColor;
   --tab-selected-bgcolor: var(--toolbar-bgcolor);
   --tab-selected-color-scheme: var(--toolbar-color-scheme);
   &[lwt-tab-selected="light"] {
@@ -298,7 +298,6 @@ tab-split-view-wrapper[dragtarget] {
   }
 
   :root:not([uidensity="compact"], [sidebar-expand-on-hover]) &[pinned] {
-    padding: 0 10px;
   }
 
   &:is([selected], [multiselected]) {
@@ -312,6 +311,7 @@ tab-split-view-wrapper[dragtarget] {
     border-radius: inherit;
     position: relative;
     overflow: hidden;
+    display: none;
 
     &::before {
       position: absolute;
@@ -511,10 +511,6 @@ tab-split-view-wrapper[dragtarget] {
   /* stylelint-disable-next-line media-query-no-invalid */
   @media -moz-pref("browser.tabs.fadeOutUnloadedTabs") {
     &[pending] {
-      filter: grayscale(100%);
-      @media (prefers-color-scheme: dark) {
-        filter: grayscale(100%) invert();
-      }
       opacity: 0.5;
       /* Fade the favicon out */
       transition-property: filter, opacity;
@@ -531,10 +527,6 @@ tab-split-view-wrapper[dragtarget] {
   /* stylelint-disable-next-line media-query-no-invalid */
   @media -moz-pref("browser.tabs.fadeOutExplicitlyUnloadedTabs") {
     &[pending][discarded] {
-      filter: grayscale(100%);
-      @media (prefers-color-scheme: dark) {
-        filter: grayscale(100%) invert();
-      }
       opacity: 0.5;
       /* Fade the favicon out */
       transition-property: filter, opacity;
@@ -603,7 +595,7 @@ tab-split-view-wrapper[dragtarget] {
   z-index: 1; /* Overlay tab title */
 
   #tabbrowser-tabs[orient="vertical"] & {
-    top: 7px;
+    top: -7px;
   }
 
   &[crashed] {
@@ -611,7 +603,7 @@ tab-split-view-wrapper[dragtarget] {
   }
 
   #tabbrowser-tabs[orient="vertical"]:not([expanded]) &:not([crashed]),
-  &[pinned]:not([crashed]) {
+  &:not([crashed]) {
     &[soundplaying] {
       list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
     }
@@ -666,7 +658,7 @@ tab-split-view-wrapper[dragtarget] {
     }
   }
 
-  &[pinned]:is([soundplaying], [muted], [activemedia-blocked]),
+  &[zen-essential]:is([soundplaying], [muted], [activemedia-blocked]),
   &[crashed] {
     display: revert;
   }
@@ -832,7 +824,7 @@ tab-split-view-wrapper[dragtarget] {
       has not been added to root. There are certain scenarios when that attribute is temporarily
       removed from root such as when toggling the sidebar to expand with the toolbar button. */
     #tabbrowser-tabs[orient="horizontal"] &:not([pinned]):not([crashed]),
-    :root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"][expanded] &:not([pinned]):not([crashed]) {
+    :root:not([sidebar-expand-on-hover]) #tabbrowser-tabs[orient="vertical"][expanded] &:not([zen-essential]):not([crashed]) {
       &:is([soundplaying], [muted], [activemedia-blocked]) {
         display: flex;
       }
@@ -1614,7 +1606,7 @@ tab-group {
 }
 
 #tabbrowser-tabs[orient="vertical"][expanded] {
-  tab-group > :is(.tab-group-label-container, .tabbrowser-tab),
+  tab-group > :is(.tab-group-label-container, .tab-group-container, .tabbrowser-tab),
   &[movingtab][movingtab-addToGroup]:not([movingtab-group], [movingtab-ungroup]) tab-group > .tabbrowser-tab:is(:active, [multiselected]) {
     margin-inline-start: var(--space-medium);
   }
@@ -2089,7 +2081,7 @@ tab-group {
   }
 }
 
-#tabbrowser-arrowscrollbox[orient="vertical"] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,
+#tabs-newtab-button,
 #vertical-tabs-newtab-button {
   appearance: none;
   min-height: var(--tab-min-height);
@@ -2100,7 +2092,7 @@ tab-group {
   margin-inline: var(--tab-inner-inline-margin);
 
   #tabbrowser-tabs[orient="vertical"]:not([expanded]) & > .toolbarbutton-text {
-    display: none;
+    display: flex;
   }
 
   &:hover {
@@ -2124,7 +2116,7 @@ tab-group {
  * flex container. #tabs-newtab-button is a child of the arrowscrollbox where
  * we don't want a gap (between tabs), so we have to add some margin.
  */
-#tabbrowser-arrowscrollbox[orient="vertical"] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
+#tabbrowser-arrowscrollbox[orient="vertical"] #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
   margin-block: var(--tab-block-margin);
 }
 
@@ -2312,7 +2304,6 @@ tab-group {
 
   &:not([expanded]) {
     .tabbrowser-tab[pinned] {
-      width: var(--tab-collapsed-width);
     }
 
     .tab-background {
@@ -2352,8 +2343,8 @@ tab-group {
       display: block;
       position: absolute;
       inset: auto;
-      top: -3px;
-      inset-inline-start: 2px;
+      top: -2px;
+      inset-inline-start: -2px;
 
       &:-moz-window-inactive {
         background-image:
@@ -2438,9 +2429,6 @@ tab-group {
 
 :root:not([privatebrowsingmode]) :is(toolbarbutton, toolbarpaletteitem) ~ #tabbrowser-tabs,
 :root[privatebrowsingmode] :is(toolbarbutton:not(#firefox-view-button), toolbarpaletteitem:not(#wrapper-firefox-view-button)) ~ #tabbrowser-tabs {
-  border-inline-start: var(--tabstrip-inner-border);
-  padding-inline-start: 2px;
-  margin-inline-start: 2px;
 }
 
 :root[privatebrowsingmode] :is(#firefox-view-button, #menu_openFirefoxView) {
@@ -2472,7 +2460,6 @@ toolbar:not(#TabsToolbar) #firefox-view-button {
   list-style-image: url(chrome://global/skin/icons/plus.svg);
 }
 
-#tabbrowser-tabs[hasadjacentnewtabbutton]:not([overflow]) ~ #new-tab-button,
 #tabbrowser-tabs[orient="horizontal"] > #vertical-tabs-newtab-button,
 #tabbrowser-tabs[orient="vertical"]:not([overflow]) > #vertical-tabs-newtab-button,
 #tabbrowser-arrowscrollbox[overflowing] > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button,