@simplysm/solid 13.0.75 → 13.0.77

package/src/components/data/sheet/DataSheet.styles.ts

@@ -1,5 +1,6 @@
 import clsx from "clsx";
-import { borderDefault, borderSubtle } from "../../../styles/tokens.styles";
+import { border } from "../../../styles/base.styles";
+import { pad } from "../../../styles/control.styles";
 
 export const dataSheetContainerClass = clsx(
   "relative",
@@ -20,12 +21,12 @@ export const thClass = clsx(
   "align-middle",
 );
 
-export const thContentClass = clsx("px-2 py-1");
+export const thContentClass = clsx(pad.default);
 
 export const tdClass = clsx(
   "bg-white dark:bg-base-950",
   "border-b border-r",
-  borderSubtle,
+  border.subtle,
   "truncate",
   "p-0",
   "align-top",
@@ -42,7 +43,7 @@ export const insetTableClass = clsx(
   "[&_tbody>tr:last-child>td]:border-b-0",
 );
 
-export const defaultContainerClass = clsx("border", borderDefault, "rounded");
+export const defaultContainerClass = clsx("border", border.default, "rounded");
 
 // Sortable header — shows clickable indicator
 export const sortableThClass = clsx("cursor-pointer", "hover:underline");
@@ -51,10 +52,15 @@ export const sortableThClass = clsx("cursor-pointer", "hover:underline");
 export const sortIconClass = clsx("bg-base-100 dark:bg-base-900");
 
 // Top toolbar (settings button + pagination)
-export const toolbarClass = clsx("flex items-center gap-2", "px-2 py-1", "border-b", borderDefault);
+export const toolbarClass = clsx(
+  "flex items-center gap-2",
+  pad.default,
+  "border-b",
+  border.default,
+);
 
 // Fixed column base (sticky)
-export const fixedClass = "sticky";
+export const fixedClass = clsx`sticky`;
 
 // Visual effect for fixed/unfixed boundary — applied to last cell of fixed column
 export const fixedLastClass = clsx("border-r border-r-base-400", "dark:border-r-base-600");
@@ -80,7 +86,7 @@ export const resizeIndicatorClass = clsx(
 export const featureThClass = clsx(
   "bg-base-100 dark:bg-base-800",
   "border-b border-r",
-  borderDefault,
+  border.default,
   "p-0",
   "align-middle",
 );
@@ -88,7 +94,7 @@ export const featureThClass = clsx(
 export const featureTdClass = clsx(
   "bg-base-50 dark:bg-base-900",
   "border-b border-r",
-  borderSubtle,
+  border.subtle,
   "p-0",
   "align-middle",
   "h-px",
@@ -98,7 +104,7 @@ export const featureTdClass = clsx(
 export const expandIndentGuideClass = clsx("mr-0.5 w-3 self-stretch", "flex justify-end");
 
 // Expand column depth guide — vertical line
-export const expandIndentGuideLineClass = clsx("w-0 self-stretch", "border-r", borderDefault);
+export const expandIndentGuideLineClass = clsx("w-0 self-stretch", "border-r", border.default);
 
 // Expand toggle button
 export const expandToggleClass = clsx(
@@ -172,3 +178,20 @@ export const configButtonClass = clsx(
   "hover:bg-base-200 dark:hover:bg-base-700",
   "cursor-pointer",
 );
+
+// Body row — hover/selected/drag overlay via ::after pseudo-element
+export const trRowClass = clsx(
+  "relative",
+  // ::after base positioning (content is set per-state so it only renders when needed)
+  "after:pointer-events-none after:absolute after:inset-0 after:z-10",
+  // hover overlay
+  "hover:after:bg-black/[0.03] hover:after:content-['']",
+  "dark:hover:after:bg-white/[0.04]",
+  // selected row overlay
+  "[&[data-selected]]:after:bg-black/[0.05] [&[data-selected]]:after:content-['']",
+  "dark:[&[data-selected]]:after:bg-white/[0.06]",
+  // dragging row
+  "[&[data-dragging]>td]:opacity-50",
+  // drop target (inside) overlay
+  "[&[data-drag-over=inside]]:after:bg-blue-500/10 [&[data-drag-over=inside]]:after:content-['']",
+);