Iterate on styles of Tables

Author: viktorrenkema

packages/gitbook/src/components/DocumentView/Table/ViewGrid.tsx

@@ -34,8 +34,15 @@ export function ViewGrid(props: TableViewProps<DocumentTableViewGrid>) {
             <div role="table" className={tcls('flex', 'flex-col')}>
                 {/* Header */}
                 {withHeader && (
-                    <div role="rowgroup" className={tcls('flex flex-col', tableWidth)}>
-                        <div role="row" className={tcls('flex', 'w-full', '[&>*+*]:border-l')}>
+                    <div
+                        role="rowgroup"
+                        className={tcls(
+                            tableWidth,
+                            styles.rowGroup,
+                            'straight-corners:rounded-none',
+                        )}
+                    >
+                        <div role="row" className={tcls('flex', 'w-full')}>
                             {view.columns.map((column) => {
                                 const alignment = getColumnAlignment(block.data.definition[column]);
                                 return (

packages/gitbook/src/components/DocumentView/Table/table.module.css

@@ -23,21 +23,37 @@
 }
 
 :global(.dark) .tableWrapper {
-    @apply border-light/2;
+    @apply border-tint-50;
+}
+
+.columnHeader {
+    @apply text-sm font-medium py-3 px-4 text-tint-900;
+}
+
+:global(.dark) .columnHeader {
+    @apply text-white;
 }
 
 .row {
-    @apply flex border-dark/3 dark:border-light/2;
+    @apply flex border-tint-700/2;
 }
 
-.row > * + * {
-    @apply border-l;
+:global(.dark) .row {
+    @apply border-tint-300/3;
+}
+
+.rowGroup {
+    @apply flex flex-col border rounded-lg bg-tint-800/1 border-tint-700/2;
+}
+
+:global(.dark) .rowGroup {
+    @apply bg-tint-300/2 border-tint-300/3;
 }
 
 .cell {
-    @apply flex-1 align-middle border-dark/2 py-2 px-3 text-sm lg:text-base dark:border-light/2;
+    @apply flex-1 align-middle border-dark/2 py-2 px-4 text-sm;
 }
 
-.columnHeader {
-    @apply align-middle text-left text-base font-medium border-b dark:border-l-light/2 dark:border-b-light/4 py-2 px-3;
+:global(.dark) .cell {
+    @apply border-light/2;
 }