From 7aaa47ec7d1f353edb7b0a91047c4c54f18ffbed Mon Sep 17 00:00:00 2001
From: Dika Mahendra <dkmhndrworks@gmail.com>
Date: Fri, 22 Mar 2024 08:02:32 +0700
Subject: [PATCH] fix: remove spacer between  table header and body, readjust
 color

---
 packages/components/table/src/table.tsx     |  2 --
 packages/core/theme/src/components/table.ts | 20 +++++++++++---------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/components/table/src/table.tsx b/packages/components/table/src/table.tsx
index 69d774f7..5ada93ff 100644
--- a/packages/components/table/src/table.tsx
+++ b/packages/components/table/src/table.tsx
@@ -1,5 +1,4 @@
 import {useCallback} from "react";
-import {Spacer} from "@jala-banyu/spacer";
 import {forwardRef} from "@jala-banyu/system";
 
 import {UseTableProps, useTable} from "./use-table";
@@ -82,7 +81,6 @@ const Table = forwardRef<"table", TableProps>((props, ref) => {
                   )}
                 </TableHeaderRow>
               ))}
-              <Spacer as="tr" tabIndex={-1} y={1} />
             </TableRowGroup>
             <TableBody
               checkboxesProps={values.checkboxesProps}
diff --git a/packages/core/theme/src/components/table.ts b/packages/core/theme/src/components/table.ts
index 5de64a87..a4fcb8db 100644
--- a/packages/core/theme/src/components/table.ts
+++ b/packages/core/theme/src/components/table.ts
@@ -108,30 +108,30 @@ const table = tv({
   variants: {
     color: {
       primary: {
-        td: "before:bg-brand/20 data-[selected=true]:text-brand",
+        td: "data-[selected=true]:bg-neutral-100 data-[selected=true]:text-neutral-800",
       },
       success: {
-        td: "before:bg-success/20 data-[selected=true]:text-success-600 dark:data-[selected=true]:text-success",
+        td: "data-[selected=true]:bg-neutral-100 data-[selected=true]:text-neutral-800",
       },
       warning: {
-        td: "before:bg-warning/20 data-[selected=true]:text-warning-600 dark:data-[selected=true]:text-warning",
+        td: "data-[selected=true]:bg-neutral-100 data-[selected=true]:text-neutral-800",
       },
       danger: {
-        td: "before:bg-danger/20 data-[selected=true]:text-danger dark:data-[selected=true]:text-danger-500",
+        td: "data-[selected=true]:bg-neutral-100 data-[selected=true]:text-neutral-800",
       },
       basic: {
-        td: "before:bg-neutral/20 data-[selected=true]:text-neutral-800 dark:data-[selected=true]:text-neutral-200",
+        td: "data-[selected=true]:bg-neutral-100 data-[selected=true]:text-neutral-800",
       },
       white: {
-        td: "before:bg-brand/20 data-[selected=true]:text-brand dark:data-[selected=true]:text-brand-200",
+        td: "data-[selected=true]:bg-neutral-100 data-[selected=true]:text-neutral-800",
       },
       transparent: {
-        td: "before:bg-transparent data-[selected=true]:text-neutral-800 dark:data-[selected=true]:text-neutral-200",
+        td: "data-[selected=true]:bg-neutral-100 data-[selected=true]:text-neutral-800",
       },
     },
     headerColor: {
       default: {
-        th: "bg-neutral-200",
+        th: "bg-neutral-100",
       },
       white: {
         th: "bg-white",
@@ -183,6 +183,8 @@ const table = tv({
         td: [
           "group-data-[odd=true]:before:bg-neutral-50",
           "group-data-[odd=true]:before:opacity-50",
+          "group-data-[odd=true]:data-[selected=true]:before:bg-neutral-100",
+          "group-data-[odd=true]:data-[selected=true]:before:text-neutral-800",
         ],
       },
       false: {
@@ -194,7 +196,7 @@ const table = tv({
     },
     isCompact: {
       true: {
-        td: "py-1",
+        td: "",
       },
       false: {},
     },