From b4c046fe8ba7b26d60e6b1463101e35f3f9f1ce8 Mon Sep 17 00:00:00 2001
From: Sjoerd van Bommel <sjoerd.van.bommel@Hotmail.com>
Date: Sat, 6 Jul 2024 10:00:57 +0200
Subject: [PATCH] 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 <wingkwong.code@gmail.com>
---
 .changeset/beige-ears-laugh.md              |  5 +++
 packages/core/theme/src/components/table.ts | 48 ++++++++++++++++++++-
 2 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/beige-ears-laugh.md

diff --git a/.changeset/beige-ears-laugh.md b/.changeset/beige-ears-laugh.md
new file mode 100644
index 0000000000..09d58c7425
--- /dev/null
+++ 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
index a4e387a482..fb83d551f3 100644
--- 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>;