Improve styles of Tables (#2623)

Author: viktorrenkema

packages/gitbook/e2e/pages.spec.ts

@@ -1018,6 +1018,90 @@ const testCases: TestsCase[] = [
             },
         ],
     },
+    {
+        name: 'Tables',
+        baseUrl: 'https://gitbook.gitbook.io/test-gitbook-open/',
+        tests: [
+            {
+                name: 'Default table',
+                url: 'blocks/tables',
+                run: waitForCookiesDialog,
+                fullPage: true,
+            },
+            {
+                name: 'Table with straight corners',
+                url:
+                    'blocks/tables' +
+                    getCustomizationURL({
+                        styling: {
+                            corners: CustomizationCorners.Straight,
+                        },
+                    }),
+                run: waitForCookiesDialog,
+                fullPage: true,
+            },
+            {
+                name: 'Table with primary color',
+                url:
+                    'blocks/tables' +
+                    getCustomizationURL({
+                        styling: {
+                            tint: { color: { light: '#346DDB', dark: '#346DDB' } },
+                        },
+                    }),
+                run: waitForCookiesDialog,
+                fullPage: true,
+            },
+            // Test dark mode for each variant
+            ...allThemeModes.flatMap((theme) => [
+                {
+                    name: `Table in ${theme} mode`,
+                    url:
+                        'blocks/tables' +
+                        getCustomizationURL({
+                            themes: {
+                                default: theme,
+                                toggeable: false,
+                            },
+                        }),
+                    run: waitForCookiesDialog,
+                    fullPage: true,
+                },
+                {
+                    name: `Table with straight corners in ${theme} mode`,
+                    url:
+                        'blocks/tables' +
+                        getCustomizationURL({
+                            styling: {
+                                corners: CustomizationCorners.Straight,
+                            },
+                            themes: {
+                                default: theme,
+                                toggeable: false,
+                            },
+                        }),
+                    run: waitForCookiesDialog,
+                    fullPage: true,
+                },
+                {
+                    name: `Table with primary color in ${theme} mode`,
+                    url:
+                        'blocks/tables' +
+                        getCustomizationURL({
+                            styling: {
+                                tint: { color: { light: '#346DDB', dark: '#346DDB' } },
+                            },
+                            themes: {
+                                default: theme,
+                                toggeable: false,
+                            },
+                        }),
+                    run: waitForCookiesDialog,
+                    fullPage: true,
+                },
+            ]),
+        ],
+    },
 ];
 
 for (const testCase of testCases) {

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;
 }