fix: tab colors (#1013)

* fix: tab colors * edit class (#1009) * fix: ring focus visible * fix: update color classNames --------- Co-authored-by: Andrew Njoo <[email protected]>
tremorlabs · Apr 12, 2024 · f4f0b2d · f4f0b2d
1 parent 685b0c2
commit f4f0b2d
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 33 deletions.
diff --git a/src/components/input-elements/Tabs/Tab.tsx b/src/components/input-elements/Tabs/Tab.tsx
@@ -18,7 +18,7 @@ function getVariantStyles(tabVariant: TabVariant, color?: Color) {
         // light
         "hover:border-tremor-content hover:text-tremor-content-emphasis text-tremor-content",
         // dark
-        "dark:hover:border-dark-tremor-content-emphasis dark:hover:text-dark-tremor-content-emphasis dark:text-dark-tremor-content",
+        "ui-not-selected:dark:hover:border-dark-tremor-content-emphasis ui-not-selected:dark:hover:text-dark-tremor-content-emphasis ui-not-selected:dark:text-dark-tremor-content",
         // brand
         color
           ? getColorClassNames(color, colorPalette.border).selectBorderColor
@@ -29,9 +29,9 @@ function getVariantStyles(tabVariant: TabVariant, color?: Color) {
         // common
         "border-transparent border rounded-tremor-small px-2.5 py-1",
         // light
-        "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",
+        "ui-selected:border-tremor-border ui-selected:bg-tremor-background ui-selected:shadow-tremor-input ui-not-selected:hover:text-tremor-content-emphasis ui-selected:text-tremor-brand ui-not-selected:text-tremor-content",
         // 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:ui-selected:text-dark-tremor-brand",
+        "dark:ui-selected:border-dark-tremor-border dark:ui-selected:bg-dark-tremor-background dark:ui-selected:shadow-dark-tremor-input dark:ui-not-selected:hover:text-dark-tremor-content-emphasis dark:ui-selected:text-dark-tremor-brand dark:ui-not-selected:text-dark-tremor-content",
         // brand
         color
           ? getColorClassNames(color, colorPalette.text).selectTextColor
@@ -56,13 +56,11 @@ const Tab = React.forwardRef<HTMLButtonElement, TabProps>((props, ref) => {
       className={tremorTwMerge(
         makeTabClassName("root"),
         // common
-        "flex whitespace-nowrap truncate max-w-xs outline-none focus:ring-0 text-tremor-default transition duration-100",
+        "flex whitespace-nowrap truncate max-w-xs outline-none ui-focus-visible:ring text-tremor-default transition duration-100",
         // brand
-        color
-          ? getColorClassNames(color, colorPalette.text).selectTextColor
-          : variant === "solid"
-          ? "ui-selected:text-tremor-content-emphasis dark:ui-selected:text-dark-tremor-content-emphasis"
-          : "ui-selected:text-tremor-brand dark:ui-selected:text-dark-tremor-brand",
+        color && getColorClassNames(color, colorPalette.text).selectTextColor,
+        // solid ? "ui-selected:text-tremor-content-emphasis dark:ui-selected:text-dark-tremor-content-emphasis"
+        // : "ui-selected:text-tremor-brand dark:ui-selected:text-dark-tremor-brand",
         getVariantStyles(variant, color),
         className,
       )}

diff --git a/src/lib/utils.tsx b/src/lib/utils.tsx
@@ -83,32 +83,32 @@ export function getColorClassNames(color: Color | string, shade?: number): Color
   if (color === "white" || color === "black" || color === "transparent" || !shade || !isBaseColor) {
     const unshadedColor = !getIsArbitraryColor(color) ? color : `[${color}]`;
     return {
-      bgColor: `bg-${unshadedColor}`,
-      hoverBgColor: `hover:bg-${unshadedColor}`,
-      selectBgColor: `ui-selected:bg-${unshadedColor}`,
-      textColor: `text-${unshadedColor}`,
-      selectTextColor: `ui-selected:text-${unshadedColor}`,
-      hoverTextColor: `hover:text-${unshadedColor}`,
-      borderColor: `border-${unshadedColor}`,
-      selectBorderColor: `ui-selected:border-${unshadedColor}`,
-      hoverBorderColor: `hover:border-${unshadedColor}`,
-      ringColor: `ring-${unshadedColor}`,
-      strokeColor: `stroke-${unshadedColor}`,
-      fillColor: `fill-${unshadedColor}`,
+      bgColor: `bg-${unshadedColor} dark:bg-${unshadedColor}`,
+      hoverBgColor: `hover:bg-${unshadedColor} dark:hover:bg-${unshadedColor}`,
+      selectBgColor: `ui-selected:bg-${unshadedColor} dark:ui-selected:bg-${unshadedColor}`,
+      textColor: `text-${unshadedColor} dark:text-${unshadedColor}`,
+      selectTextColor: `ui-selected:text-${unshadedColor} dark:ui-selected:text-${unshadedColor}`,
+      hoverTextColor: `hover:text-${unshadedColor} dark:hover:text-${unshadedColor}`,
+      borderColor: `border-${unshadedColor} dark:border-${unshadedColor}`,
+      selectBorderColor: `ui-selected:border-${unshadedColor} dark:ui-selected:border-${unshadedColor}`,
+      hoverBorderColor: `hover:border-${unshadedColor} dark:hover:border-${unshadedColor}`,
+      ringColor: `ring-${unshadedColor} dark:ring-${unshadedColor}`,
+      strokeColor: `stroke-${unshadedColor} dark:stroke-${unshadedColor}`,
+      fillColor: `fill-${unshadedColor} dark:fill-${unshadedColor}`,
     };
   }
   return {
-    bgColor: `bg-${color}-${shade}`,
-    selectBgColor: `ui-selected:bg-${color}-${shade}`,
-    hoverBgColor: `hover:bg-${color}-${shade}`,
-    textColor: `text-${color}-${shade}`,
-    selectTextColor: `ui-selected:text-${color}-${shade}`,
-    hoverTextColor: `hover:text-${color}-${shade}`,
-    borderColor: `border-${color}-${shade}`,
-    selectBorderColor: `ui-selected:border-${color}-${shade}`,
-    hoverBorderColor: `hover:border-${color}-${shade}`,
-    ringColor: `ring-${color}-${shade}`,
-    strokeColor: `stroke-${color}-${shade}`,
-    fillColor: `fill-${color}-${shade}`,
+    bgColor: `bg-${color}-${shade} dark:bg-${color}-${shade}`,
+    selectBgColor: `ui-selected:bg-${color}-${shade} dark:ui-selected:bg-${color}-${shade}`,
+    hoverBgColor: `hover:bg-${color}-${shade} dark:hover:bg-${color}-${shade}`,
+    textColor: `text-${color}-${shade} dark:text-${color}-${shade}`,
+    selectTextColor: `ui-selected:text-${color}-${shade} dark:ui-selected:text-${color}-${shade}`,
+    hoverTextColor: `hover:text-${color}-${shade} dark:hover:text-${color}-${shade}`,
+    borderColor: `border-${color}-${shade} dark:border-${color}-${shade}`,
+    selectBorderColor: `ui-selected:border-${color}-${shade} dark:ui-selected:border-${color}-${shade}`,
+    hoverBorderColor: `hover:border-${color}-${shade} dark:hover:border-${color}-${shade}`,
+    ringColor: `ring-${color}-${shade} dark:ring-${color}-${shade}`,
+    strokeColor: `stroke-${color}-${shade} dark:stroke-${color}-${shade}`,
+    fillColor: `fill-${color}-${shade} dark:fill-${color}-${shade}`,
   };
 }