From 1d545c10c41700338df8b1e1f18aca4d7d76d9a0 Mon Sep 17 00:00:00 2001
From: "mr. M" <mauro.balades@tutanota.com>
Date: Wed, 1 Jan 2025 19:19:14 +0100
Subject: [PATCH] Refactor tab animations and update theme colors for improved
 UI consistency

---
 .../zen-styles/zen-tabs/vertical-tabs.css        |  6 +++---
 .../base/content/zen-styles/zen-theme.css        |  5 +++--
 .../base/content/zen-styles/zen-workspaces.css   | 16 ++++++++--------
 .../base/zen-components/ZenWorkspaces.mjs        |  4 ++++
 4 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
index 0a98a0590..c20e19b4f 100644
--- a/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
+++ b/src/browser/base/content/zen-styles/zen-tabs/vertical-tabs.css
@@ -237,13 +237,13 @@
 
   & .tabbrowser-tab {
     transition: scale 0.07s ease;
-    &[fadein='true']:not([zen-essential='true']) {
+    #tabbrowser-tabs:not([dont-animate-tabs='true']) &[fadein='true']:not([zen-essential='true']) {
       #tabbrowser-tabs[zen-workspace-animation='previous'] & {
-        animation: zen-slide-in 0.3s ease-out;
+        animation: zen-slide-in 0.3s ease;
       }
 
       #tabbrowser-tabs[zen-workspace-animation='next'] & {
-        animation: zen-slide-in-reverse 0.3s ease-out;
+        animation: zen-slide-in-reverse 0.3s ease;
       }
     }
 
diff --git a/src/browser/base/content/zen-styles/zen-theme.css b/src/browser/base/content/zen-styles/zen-theme.css
index 2ee45623d..8274f85f5 100644
--- a/src/browser/base/content/zen-styles/zen-theme.css
+++ b/src/browser/base/content/zen-styles/zen-theme.css
@@ -78,11 +78,12 @@
   --button-background-color-active: var(--in-content-primary-button-background-active) !important;
 
   --color-accent-primary: var(--button-primary-bgcolor) !important;
-  --color-accent-primary-hover: var(--zen-colors-primary-foreground) !important;
+  --color-accent-primary-hover: var(--button-primary-hover-bgcolor) !important;
   --color-accent-primary-active: var(--button-primary-active-bgcolor) !important;
 
   --link-color: var(--zen-branding-bg-reverse) !important;
-  --link-color-hover: var(--zen-branding-bg-reverse) !important;
+  --link-color-hover: var(--zen-colors-primary-foreground) !important;
+  --link-color-active: color-mix(in srgb, var(--zen-colors-primary-foreground) 80%, transparent 20%) !important;
 
   --in-content-page-background: var(--zen-colors-tertiary) !important;
   --zen-in-content-dialog-background: var(--zen-colors-tertiary);
diff --git a/src/browser/base/content/zen-styles/zen-workspaces.css b/src/browser/base/content/zen-styles/zen-workspaces.css
index 8e1611460..c9ee2be91 100644
--- a/src/browser/base/content/zen-styles/zen-workspaces.css
+++ b/src/browser/base/content/zen-styles/zen-workspaces.css
@@ -215,6 +215,14 @@
   justify-content: space-between;
   align-content: space-between;
   max-height: 250px;
+
+  .workspace-icon-button {
+    min-width: 24px;
+    min-height: 24px;
+    font-size: 16px;
+    margin: 2px;
+    padding: 4px;
+  }
 }
 
 #PanelUI-zen-workspaces-list {
@@ -279,14 +287,6 @@
   box-sizing: border-box;
 }
 
-.workspace-icon-button {
-  min-width: 24px;
-  min-height: 24px;
-  font-size: 16px;
-  margin: 2px;
-  padding: 4px;
-}
-
 #PanelUI-zen-workspaces-icon-search-input {
   width: 100%;
   padding: 8px 12px;
diff --git a/src/browser/base/zen-components/ZenWorkspaces.mjs b/src/browser/base/zen-components/ZenWorkspaces.mjs
index 65407a30c..b699c14b7 100644
--- a/src/browser/base/zen-components/ZenWorkspaces.mjs
+++ b/src/browser/base/zen-components/ZenWorkspaces.mjs
@@ -1320,6 +1320,7 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
     const visibleTabs = new Set();
     const lastSelectedTab = this._lastSelectedWorkspaceTabs[workspaceUuid];
 
+    this.tabContainer.setAttribute('dont-animate-tabs', 'true');
     for (const tab of gBrowser.tabs) {
       const tabWorkspaceId = tab.getAttribute('zen-workspace-id');
       const isEssential = tab.getAttribute("zen-essential") === "true";
@@ -1343,6 +1344,9 @@ var ZenWorkspaces = new (class extends ZenMultiWindowFeature {
         gBrowser.hideTab(tab, undefined, true);
       }
     }
+    window.requestAnimationFrame(() => {
+      this.tabContainer.removeAttribute('dont-animate-tabs');
+    });
 
     return visibleTabs;
   }