fix: tab colors (#768)

tremorlabs · Oct 23, 2023 · 2a0df8f · 2a0df8f
1 parent bfe64c3
commit 2a0df8f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 5 deletions.
diff --git 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
@@ -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>
     </>
   );