From 35a6c8bada525874dbcd4f6d025f993f124b6b49 Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 1 Apr 2024 17:06:48 +0200
Subject: [PATCH] Tab colors

---
 .../components/Header/Tab.tsx                 |  6 +++---
 .../components/Header/Tabs.tsx                | 10 +++++-----
 src/dashboardWebView/utils/index.ts           |  1 +
 src/dashboardWebView/utils/opacityColor.ts    | 19 +++++++++++++++++++
 .../utils/updateCssVariables.ts               | 14 ++++++++++++--
 5 files changed, 40 insertions(+), 10 deletions(-)
 create mode 100644 src/dashboardWebView/utils/opacityColor.ts

diff --git a/src/dashboardWebView/components/Header/Tab.tsx b/src/dashboardWebView/components/Header/Tab.tsx
index 70ba753f..6e5cc0e3 100644
--- a/src/dashboardWebView/components/Header/Tab.tsx
+++ b/src/dashboardWebView/components/Header/Tab.tsx
@@ -17,10 +17,10 @@ export const Tab: React.FunctionComponent<ITabProps> = ({
 
   return (
     <button
-      className={cn(`h-full flex items-center py-2 px-1 text-sm font-medium text-center border-b-2 border-transparent hover:border-[var(--vscode-tab-activeForeground)] hover:text-[var(--vscode-tab-activeForeground)] ${location.pathname === `/${navigationType}`
+      className={cn(`h-full flex items-center py-2 px-1 text-sm font-medium text-center border-b-2 border-transparent hover:text-[var(--vscode-tab-activeForeground)] ${location.pathname === `/${navigationType}`
         ?
-        `text-[var(--vscode-tab-activeForeground)] border-[var(--vscode-tab-activeForeground)]` :
-        `text-[var(--vscode-tab-inactiveForeground)]`
+        `text-[var(--frontmatter-nav-active)] border-[var(--frontmatter-nav-active)]` :
+        `text-[var(--frontmatter-nav-inactive)]`
         }`)}
       type="button"
       role="tab"
diff --git a/src/dashboardWebView/components/Header/Tabs.tsx b/src/dashboardWebView/components/Header/Tabs.tsx
index e7707f8f..15ee1f78 100644
--- a/src/dashboardWebView/components/Header/Tabs.tsx
+++ b/src/dashboardWebView/components/Header/Tabs.tsx
@@ -27,20 +27,20 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
     >
       <li role="presentation">
         <Tab navigationType={NavigationType.Contents} onNavigate={onNavigate}>
-          <PageIcon className={`h-4 w-auto mr-2 text-[var(--frontmatter-secondary-text)]`} />
+          <PageIcon className={`h-4 w-auto mr-2`} />
           <span>{l10n.t(LocalizationKey.dashboardHeaderTabsContents)}</span>
         </Tab>
       </li>
       <li role="presentation">
         <Tab navigationType={NavigationType.Media} onNavigate={onNavigate}>
-          <PhotoIcon className={`h-4 w-auto mr-2 text-[var(--frontmatter-secondary-text)]`} />
+          <PhotoIcon className={`h-4 w-auto mr-2`} />
           <span>{l10n.t(LocalizationKey.dashboardHeaderTabsMedia)}</span>
         </Tab>
       </li>
       <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.snippets.view}>
         <li role="presentation">
           <Tab navigationType={NavigationType.Snippets} onNavigate={onNavigate}>
-            <ScissorsIcon className={`h-4 w-auto mr-2 text-[var(--frontmatter-secondary-text)]`} />
+            <ScissorsIcon className={`h-4 w-auto mr-2`} />
             <span>{l10n.t(LocalizationKey.dashboardHeaderTabsSnippets)}</span>
           </Tab>
         </li>
@@ -48,7 +48,7 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
       <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.data.view}>
         <li role="presentation">
           <Tab navigationType={NavigationType.Data} onNavigate={onNavigate}>
-            <CircleStackIcon className={`h-4 w-auto mr-2 text-[var(--frontmatter-secondary-text)]`} />
+            <CircleStackIcon className={`h-4 w-auto mr-2`} />
             <span>{l10n.t(LocalizationKey.dashboardHeaderTabsData)}</span>
           </Tab>
         </li>
@@ -56,7 +56,7 @@ export const Tabs: React.FunctionComponent<ITabsProps> = ({
       <FeatureFlag features={mode?.features || []} flag={FEATURE_FLAG.dashboard.taxonomy.view}>
         <li role="presentation">
           <Tab navigationType={NavigationType.Taxonomy} onNavigate={onNavigate}>
-            <TagIcon className={`h-4 w-auto mr-2 text-[var(--frontmatter-secondary-text)]`} />
+            <TagIcon className={`h-4 w-auto mr-2`} />
             <span>{l10n.t(LocalizationKey.dashboardHeaderTabsTaxonomies)}</span>
           </Tab>
         </li>
diff --git a/src/dashboardWebView/utils/index.ts b/src/dashboardWebView/utils/index.ts
index fd12dd78..e8fd1757 100644
--- a/src/dashboardWebView/utils/index.ts
+++ b/src/dashboardWebView/utils/index.ts
@@ -1,5 +1,6 @@
 export * from './MessageHandlers';
 export * from './darkenColor';
 export * from './getRelPath';
+export * from './opacityColor';
 export * from './preserveColor';
 export * from './updateCssVariables';
diff --git a/src/dashboardWebView/utils/opacityColor.ts b/src/dashboardWebView/utils/opacityColor.ts
new file mode 100644
index 00000000..f5cd7978
--- /dev/null
+++ b/src/dashboardWebView/utils/opacityColor.ts
@@ -0,0 +1,19 @@
+export const opacityColor = (color: string | undefined, opacity: number) => {
+  if (color) {
+    if (color.startsWith('#')) {
+      return `${color}${Math.round(opacity * 255)
+        .toString(16)
+        .padStart(2, '0')}`;
+    } else if (color.startsWith('rgba')) {
+      const splits = color.split(',');
+      splits.pop();
+      return `${splits.join(', ')}, ${opacity})`;
+    } else if (color.startsWith('rgb')) {
+      return `${color.replace('rgb', 'rgba').replace(')', `, ${opacity})`)}`;
+    } else {
+      return color;
+    }
+  }
+
+  return color;
+};
diff --git a/src/dashboardWebView/utils/updateCssVariables.ts b/src/dashboardWebView/utils/updateCssVariables.ts
index df3aa2c0..e28d07c1 100644
--- a/src/dashboardWebView/utils/updateCssVariables.ts
+++ b/src/dashboardWebView/utils/updateCssVariables.ts
@@ -1,5 +1,4 @@
-import { darkenColor } from './darkenColor';
-import { preserveColor } from './preserveColor';
+import { darkenColor, opacityColor, preserveColor } from '.';
 
 export const updateCssVariables = (isDarkTheme: boolean = true) => {
   const styles = getComputedStyle(document.documentElement);
@@ -52,6 +51,17 @@ export const updateCssVariables = (isDarkTheme: boolean = true) => {
     'var(--vscode-list-activeSelectionForeground)'
   );
 
+  // Navigation
+  const tabActiveForeground = styles.getPropertyValue('--vscode-tab-activeForeground');
+  document.documentElement.style.setProperty(
+    '--frontmatter-nav-active',
+    preserveColor(tabActiveForeground) || 'var(--vscode-tab-activeForeground)'
+  );
+  document.documentElement.style.setProperty(
+    '--frontmatter-nav-inactive',
+    opacityColor(tabActiveForeground, 0.6) || 'var(--vscode-tab-inactiveForeground)'
+  );
+
   // Borders
   const borderColor = styles.getPropertyValue('--vscode-panel-border');
   document.documentElement.style.setProperty('--frontmatter-border', 'var(--vscode-panel-border)');