fix(table): differentiate selected bg color from striped bg color (#3221

) * fix: override bg color when selecting striped row * chore(style): differentiate selected bg color from striped row * chore: changeset * chore(changeset): add issue number --------- Co-authored-by: WK Wong <[email protected]>
heroui-inc · Jul 6, 2024 · b4c046f · b4c046f
1 parent 57f7c95
commit b4c046f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 2 deletions.
diff --git a/.changeset/beige-ears-laugh.md b/.changeset/beige-ears-laugh.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+Differentiate selected bg color from striped bg color (#1602)
diff --git a/packages/core/theme/src/components/table.ts b/packages/core/theme/src/components/table.ts
@@ -1,7 +1,7 @@
 import type {VariantProps} from "tailwind-variants";
 
-import {tv} from "../utils/tv";
 import {dataFocusVisibleClasses} from "../utils";
+import {tv} from "../utils/tv";
 
 /**
  * Table **Tailwind Variants** component
@@ -120,7 +120,7 @@ const table = tv({
   variants: {
     color: {
       default: {
-        td: "before:bg-default/40 data-[selected=true]:text-default-foreground",
+        td: "before:bg-default/60 data-[selected=true]:text-default-foreground",
       },
       primary: {
         td: "before:bg-primary/20 data-[selected=true]:text-primary",
@@ -273,6 +273,50 @@ const table = tv({
     fullWidth: true,
     align: "start",
   },
+  compoundVariants: [
+    {
+      isStriped: true,
+      color: "default",
+      class: {
+        td: "group-data-[odd=true]:data-[selected=true]:before:bg-default/60",
+      },
+    },
+    {
+      isStriped: true,
+      color: "primary",
+      class: {
+        td: "group-data-[odd=true]:data-[selected=true]:before:bg-primary/20",
+      },
+    },
+    {
+      isStriped: true,
+      color: "secondary",
+      class: {
+        td: "group-data-[odd=true]:data-[selected=true]:before:bg-secondary/20",
+      },
+    },
+    {
+      isStriped: true,
+      color: "success",
+      class: {
+        td: "group-data-[odd=true]:data-[selected=true]:before:bg-success/20",
+      },
+    },
+    {
+      isStriped: true,
+      color: "warning",
+      class: {
+        td: "group-data-[odd=true]:data-[selected=true]:before:bg-warning/20",
+      },
+    },
+    {
+      isStriped: true,
+      color: "danger",
+      class: {
+        td: "group-data-[odd=true]:data-[selected=true]:before:bg-danger/20",
+      },
+    },
+  ],
 });
 
 export type TableVariantProps = VariantProps<typeof table>;