@dxos/react-ui-table 0.4.9-main.a108ade → 0.4.9-main.c54559c

package/src/theme.ts

@@ -4,15 +4,7 @@
 
 import { type CellContext } from '@tanstack/react-table';
 
-import {
-  modalSurface,
-  fixedSurface,
-  focusRing,
-  ghostSelected,
-  ghostSelectedCurrent,
-  groupBorder,
-  mx,
-} from '@dxos/react-ui-theme';
+import { modalSurface, focusRing, ghostSelected, ghostSelectedCurrent, groupBorder, mx } from '@dxos/react-ui-theme';
 import { type ComponentFunction } from '@dxos/react-ui-types';
 
 import { type TableContextValue, type TableFlags } from './components';
@@ -21,7 +13,7 @@ export const currentRow = '!bg-neutral-75 !dark:bg-neutral-850';
 export const selectedRow = '!bg-primary-100 dark:!bg-primary-700';
 export const flushPadding = 'pli-0 plb-0';
 export const textPadding = 'pli-2 plb-0.5';
-export const headPadding = 'pli-2 plb-1.5';
+export const headPadding = 'pli-2 plb-1';
 
 export const gridCellFocusRing =
   'focus-within:z-[11] focus-within:outline outline-2 outline-primary-500 dark:outline-primary-400';
@@ -45,27 +37,36 @@ export const groupTh: ComponentFunction<TableStyleProps> = (_props, ...etc) =>
 export type TheadStyleProps = Partial<TableFlags>;
 
 export const theadRoot: ComponentFunction<TheadStyleProps> = ({ header, stickyHeader }, ...etc) =>
-  mx(header ? stickyHeader && 'sticky block-start-[--sticky-top] z-[1]' : 'collapse', header && fixedSurface, ...etc);
+  mx(
+    header ? stickyHeader && 'sticky block-start-[--sticky-top] z-[1]' : 'collapse',
+    header && 'base-surface',
+    'drop-shadow-sm',
+    ...etc,
+  );
 
 export const theadTr: ComponentFunction<TheadStyleProps> = (_props, ...etc) => mx('group', ...etc);
 
 export const theadTh: ComponentFunction<TheadStyleProps> = ({ border }, ...etc) =>
   mx(
-    'relative text-start font-medium select-none truncate',
+    'relative',
+    'text-start font-medium select-none truncate',
     headPadding,
-    border && 'border',
     border && groupBorder,
+    border && 'border border-t-0 border-b-0 border-neutral-200',
     ...etc,
   );
 
-export const theadResizeRoot: ComponentFunction<TheadStyleProps> = (_props, ...etc) =>
-  mx(
-    'absolute top-0 pis-1 h-full z-[10] w-[7px] -right-[5px] cursor-col-resize select-none touch-none opacity-20 hover:opacity-100',
-    ...etc,
+export const theadResizeRoot: ComponentFunction<{ isResizing: boolean }> = ({ isResizing }) => {
+  return mx(
+    'absolute h-full w-[4px] top-0 right-0',
+    'cursor-col-resize',
+    'user-select-none',
+    'touch-action-none',
+    !isResizing && 'group-hover:bg-neutral-100 dark:group-hover:bg-neutral-800',
+    'pointer-coarse:bg-neutral-100 dark:pointer-coarse:bg-neutral-800',
+    isResizing && 'bg-primary-500 dark:bg-primary-400',
   );
-
-export const theadResizeThumb: ComponentFunction<TheadStyleProps> = (_props, ...etc) =>
-  mx('flex group-hover:bg-neutral-700 -ml-[2px] w-[1px] h-full', ...etc);
+};
 
 //
 // tbody