Merge pull request #47 from Atnic/feature/table

fix: remove spacer between table header and body, readjust color
Atnic · Mar 22, 2024 · 899fa69 · 899fa69
2 parents a908bd6 + 7aaa47e
commit 899fa69
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git 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
@@ -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: {},
     },