Merge pull request xch-dev#654 from dkackman/fix-table-borders

Fix table borders

Author: Rigidity

src/components/ui/data-table.tsx

@@ -84,7 +84,7 @@ export function DataTable<TData, TValue>({
         className='border'
         style={{ borderRadius: 'var(--table-border-radius, 0.375rem)' }}
       >
-        <Table aria-label='Table'>
+        <Table aria-label='Table' style={{ border: 'none' }}>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (
               <TableRow key={headerGroup.id}>

src/index.css

@@ -236,7 +236,6 @@ body {
     /* Table styling variables with defaults */
     --table-background: transparent;
     --table-border: 1px solid var(--border);
-    --table-border-radius: var(--radius);
     --table-box-shadow: var(--shadow-sm);
     --table-header-background: transparent;
     --table-header-color: var(--muted-foreground);
@@ -820,6 +819,9 @@ body {
     border: var(--table-border);
     border-radius: var(--table-border-radius);
     box-shadow: var(--table-box-shadow);
+    overflow: hidden;
+    border-collapse: separate;
+    border-spacing: 0;
   }
 
   .table-theme thead th {
@@ -830,15 +832,15 @@ body {
     font-size: var(--table-header-font-size);
     padding: var(--table-header-padding);
     backdrop-filter: var(--table-header-backdrop-filter);
-    -webkit-backdrop-filter: var(--table-header-backdrop-filter);
+    -webkit-backdrop-filter: var(--table-header-backdrop-filter-webkit);
   }
 
   .table-theme tbody tr {
     background: var(--table-row-background);
     color: var(--table-row-color);
     border: var(--table-row-border);
     backdrop-filter: var(--table-row-backdrop-filter);
-    -webkit-backdrop-filter: var(--table-row-backdrop-filter);
+    -webkit-backdrop-filter: var(--table-row-backdrop-filter-webkit);
   }
 
   .table-theme tbody tr:hover {
@@ -862,7 +864,7 @@ body {
     color: var(--table-footer-color);
     border: var(--table-footer-border);
     backdrop-filter: var(--table-footer-backdrop-filter);
-    -webkit-backdrop-filter: var(--table-footer-backdrop-filter);
+    -webkit-backdrop-filter: var(--table-footer-backdrop-filter-webkit);
   }
 
   /* Backdrop filter utility classes */
@@ -907,12 +909,13 @@ body {
 
   .table-theme thead th {
     backdrop-filter: var(--table-header-backdrop-filter);
-    -webkit-backdrop-filter: var(--table-header-backdrop-filter);
+    -webkit-backdrop-filter: var(--table-header-backdrop-filter-webkit);
   }
 
-  .table-theme tfoot th {
+  .table-theme tfoot th,
+  .table-theme tfoot td {
     backdrop-filter: var(--table-footer-backdrop-filter);
-    -webkit-backdrop-filter: var(--table-footer-backdrop-filter);
+    -webkit-backdrop-filter: var(--table-footer-backdrop-filter-webkit);
   }
 }
 

src/lib/theme.ts

@@ -197,6 +197,9 @@ export function applyTheme(theme: Theme, root: HTMLElement) {
     root.style.removeProperty(cssVar);
   });
 
+  // Set default table border radius if not specified by theme
+  root.style.setProperty('--table-border-radius', 'var(--radius)', 'important');
+
   applyThemeVariables(theme, root);
 
   // Apply backdrop-filter variables if defined in colors object
@@ -373,6 +376,12 @@ export function applyTheme(theme: Theme, root: HTMLElement) {
           if (value && typeof value === 'string') {
             const cssVar = `--${prefix}-${property.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
             root.style.setProperty(cssVar, value, 'important');
+
+            // For backdropFilter properties, also set the webkit version
+            if (property === 'backdropFilter') {
+              const webkitCssVar = `${cssVar}-webkit`;
+              root.style.setProperty(webkitCssVar, value, 'important');
+            }
           }
         });
       }
@@ -541,9 +550,13 @@ const tableVariableNames = [
   '--table-header-font-weight',
   '--table-header-font-size',
   '--table-header-padding',
+  '--table-header-backdrop-filter',
+  '--table-header-backdrop-filter-webkit',
   '--table-row-background',
   '--table-row-color',
   '--table-row-border',
+  '--table-row-backdrop-filter',
+  '--table-row-backdrop-filter-webkit',
   '--table-row-hover-background',
   '--table-row-hover-color',
   '--table-row-selected-background',
@@ -554,6 +567,8 @@ const tableVariableNames = [
   '--table-footer-background',
   '--table-footer-color',
   '--table-footer-border',
+  '--table-footer-backdrop-filter',
+  '--table-footer-backdrop-filter-webkit',
 ];
 
 const switchVariableNames = [

src/pages/Themes.tsx

@@ -248,14 +248,12 @@ export default function Themes() {
                       <Label className='text-base font-semibold block'>
                         <Trans>Tables</Trans>
                       </Label>
-                      <div className='rounded-md border'>
-                        <DataTable
-                          columns={demoColumns}
-                          data={demoTableData}
-                          rowLabel='item'
-                          rowLabelPlural='items'
-                        />
-                      </div>
+                      <DataTable
+                        columns={demoColumns}
+                        data={demoTableData}
+                        rowLabel='item'
+                        rowLabelPlural='items'
+                      />
                     </div>
                   </div>
                 </div>

src/themes/amiga/theme.json

@@ -49,5 +49,8 @@
     "card": "inset -1px -1px 0 0 rgb(85 85 85), inset 1px 1px 0 0 rgb(255 255 255)",
     "button": "inset -1px -1px 0 0 rgb(85 85 85), inset 1px 1px 0 0 rgb(255 255 255)",
     "dropdown": "inset -1px -1px 0 0 rgb(85 85 85), inset 1px 1px 0 0 rgb(255 255 255)"
+  },
+  "tables": {
+    "borderRadius": "0px"
   }
 }

src/themes/xch-dark/theme.json

@@ -10,12 +10,10 @@
     "foreground": "#edffb3",
     "card": "#171d26",
     "cardForeground": "#e8f3fc",
-	"cardBackdropFilter": "blur(7px) saturate(150%) brightness(0.9)",
-	"cardBackdropFilterWebkit": "blur(7px) saturate(150%) brightness(0.9)",
+    "cardBackdropFilter": "blur(7px) saturate(150%) brightness(0.9)",
     "popover": "#171d26",
     "popoverForeground": "#e8f3fc",
-	"popoverBackdropFilter": "blur(7px) saturate(150%) brightness(0.9)",
-	"popoverBackdropFilterWebkit": "blur(7px) saturate(150%) brightness(0.9)",
+    "popoverBackdropFilter": "blur(7px) saturate(150%) brightness(0.9)",
     "primary": "#dfff75",
     "primaryForeground": "#1d2530",
     "secondary": "#222c39",
@@ -28,9 +26,18 @@
     "destructiveForeground": "#fafafa",
     "border": "#263140",
     "input": "#1d2530",
-    "ring": "#dfff75",
-  	"tableBackdropFilter": "blur(7px) saturate(150%) brightness(0.9)",
-	"tableBackdropFilterWebkit": "blur(7px) saturate(150%) brightness(0.9)"
+    "ring": "#dfff75"
+  },
+  "tables": {
+    "header": {
+      "backdropFilter": "blur(7px) saturate(150%) brightness(0.9)"
+    },
+    "row": {
+      "backdropFilter": "blur(7px) saturate(150%) brightness(0.9)"
+    },
+    "footer": {
+      "backdropFilter": "blur(7px) saturate(150%) brightness(0.9)"
+    }
   },
   "fonts": {
     "heading": "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
@@ -47,8 +54,7 @@
     "full": "9999px"
   },
   "sidebar": {
-	  "backdropFilter": "blur(7px) saturate(150%) brightness(0.9)",
-	  "backdropFilterWebkit": "blur(7px) saturate(150%) brightness(0.9)"
+    "backdropFilter": "blur(7px) saturate(150%) brightness(0.9)"
   },
   "buttons": {
     "outline": {
@@ -104,4 +110,4 @@
     "button": "0 0 10px rgba(223, 255, 117, 0.2)",
     "input": "0 2px 4px rgba(10, 12, 16, 0.2)"
   }
-}
+}

src/themes/xch-light/theme.json

@@ -10,12 +10,10 @@
     "foreground": "#2C323C",
     "card": "#f6fafe",
     "cardForeground": "#2C323C",
-	"cardBackdropFilter": "blur(7px) saturate(150%) brightness(0.9)",
-	"cardBackdropFilterWebkit": "blur(7px) saturate(150%) brightness(0.9)",
+    "cardBackdropFilter": "blur(7px) saturate(150%) brightness(0.9)",
     "popover": "#f6fafe",
     "popoverForeground": "#2C323C",
-	"popoverBackdropFilter": "blur(7px) saturate(150%) brightness(0.9)",
-	"popoverBackdropFilterWebkit": "blur(7px) saturate(150%) brightness(0.9)",
+    "popoverBackdropFilter": "blur(7px) saturate(150%) brightness(0.9)",
     "primary": "#324053",
     "primaryForeground": "#dfff75",
     "secondary": "#b4bfdf",
@@ -28,9 +26,18 @@
     "destructiveForeground": "#fafafa",
     "border": "#c9d2e8",
     "input": "#edf6fd",
-    "ring": "#dfff75",
-  	"tableBackdropFilter": "blur(7px) saturate(150%) brightness(0.9)",
-	"tableBackdropFilterWebkit": "blur(7px) saturate(150%) brightness(0.9)"
+    "ring": "#dfff75"
+  },
+  "tables": {
+    "header": {
+      "backdropFilter": "blur(7px) saturate(150%) brightness(0.9)"
+    },
+    "row": {
+      "backdropFilter": "blur(7px) saturate(150%) brightness(0.9)"
+    },
+    "footer": {
+      "backdropFilter": "blur(7px) saturate(150%) brightness(0.9)"
+    }
   },
   "fonts": {
     "heading": "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
@@ -47,8 +54,7 @@
     "full": "9999px"
   },
   "sidebar": {
-	  "backdropFilter": "blur(7px) saturate(150%) brightness(0.9)",
-	  "backdropFilterWebkit": "blur(7px) saturate(150%) brightness(0.9)"
+    "backdropFilter": "blur(7px) saturate(150%) brightness(0.9)"
   },
   "buttons": {
     "outline": {
@@ -104,4 +110,4 @@
     "button": "0 1px 3px rgba(223, 255, 117, 0.2)",
     "input": "0 1px 2px rgba(201, 210, 232, 0.1)"
   }
-}
+}