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 ( <>
- - + +
);