From 2a0df8f1b5f6c7d180ce1cd14801cf994b7aa957 Mon Sep 17 00:00:00 2001
From: Severin Landolt <41927988+severinlandolt@users.noreply.github.com>
Date: Tue, 24 Oct 2023 01:09:52 +0200
Subject: [PATCH] fix: tab colors (#768)

---
 src/components/input-elements/Tabs/Tab.tsx      | 8 ++++++--
 src/stories/input-elements/TabGroup.stories.tsx | 5 ++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/input-elements/Tabs/Tab.tsx b/src/components/input-elements/Tabs/Tab.tsx
index cedcfcc91..ee198efdb 100644
--- a/src/components/input-elements/Tabs/Tab.tsx
+++ b/src/components/input-elements/Tabs/Tab.tsx
@@ -39,9 +39,13 @@ function getVariantStyles(tabVariant: TabVariant, color?: Color) {
         // common
         "border-transparent border rounded-tremor-small",
         // light
-        "ui-selected:border-tremor-border ui-selected:bg-tremor-background ui-selected:shadow-tremor-input hover:text-tremor-content-emphasis text-tremor-content",
+        "ui-selected:border-tremor-border ui-selected:bg-tremor-background ui-selected:shadow-tremor-input hover:text-tremor-content-emphasis ui-selected:text-tremor-brand",
         // dark
-        "dark:ui-selected:border-dark-tremor-border dark:ui-selected:bg-dark-tremor-background dark:ui-selected:shadow-dark-tremor-input dark:hover:text-dark-tremor-content-emphasis dark:text-dark-tremor-content",
+        "dark:ui-selected:border-dark-tremor-border dark:ui-selected:bg-dark-tremor-background dark:ui-selected:shadow-dark-tremor-input dark:hover:text-dark-tremor-content-emphasis dark:ui-selected:text-dark-tremor-brand",
+        // brand
+        color
+          ? getColorClassNames(color, colorPalette.text).selectTextColor
+          : "text-tremor-content dark:text-dark-tremor-content",
         spacing.md.paddingX,
         spacing.twoXs.paddingY,
       );
diff --git a/src/stories/input-elements/TabGroup.stories.tsx b/src/stories/input-elements/TabGroup.stories.tsx
index 06809fed3..9186a4c11 100644
--- a/src/stories/input-elements/TabGroup.stories.tsx
+++ b/src/stories/input-elements/TabGroup.stories.tsx
@@ -67,12 +67,11 @@ function WithControlledStateTemplate({ ...args }) {
 }
 
 function TabSet({ showText = true, ...args }) {
-  const { color } = args;
   return (
     <>
       <div className="space-y-4">
-        <MyTab variant="line" showText={showText} {...args} color={color} />
-        <MyTab variant="solid" showText={showText} {...args} color={color} />
+        <MyTab variant="line" showText={showText} {...args} color={args.color} />
+        <MyTab variant="solid" showText={showText} {...args} color={args.color} />
       </div>
     </>
   );