Merge pull request xch-dev#657 from dkackman/theme-nft-prep

Theme nft prep

Author: Rigidity

src/components/ui/data-table.tsx

@@ -80,10 +80,7 @@ export function DataTable<TData, TValue>({
 
   return (
     <div>
-      <div
-        className='border'
-        style={{ borderRadius: 'var(--table-border-radius, 0.375rem)' }}
-      >
+      <div className='border rounded-lg table-theme'>
         <Table aria-label='Table' style={{ border: 'none' }}>
           <TableHeader>
             {table.getHeaderGroups().map((headerGroup) => (

src/components/ui/table.tsx

@@ -15,7 +15,7 @@ const Table = React.forwardRef<
     <table
       ref={ref}
       className={cn(
-        'w-full caption-bottom text-sm table-fixed table-theme',
+        'w-full caption-bottom text-md table-fixed table-theme',
         className,
       )}
       role='table'
@@ -105,7 +105,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      'py-2 px-1 md:px-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] overflow-hidden',
+      'py-2 px-1 md:px-2 align-middle text-lg [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] overflow-hidden',
       className,
     )}
     {...props}

src/index.css

@@ -817,7 +817,6 @@ body {
   .table-theme {
     background: var(--table-background);
     border: var(--table-border);
-    border-radius: var(--table-border-radius);
     box-shadow: var(--table-box-shadow);
     overflow: hidden;
     border-collapse: separate;

src/lib/theme.ts

@@ -196,10 +196,6 @@ export function applyTheme(theme: Theme, root: HTMLElement) {
   ].forEach((cssVar) => {
     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
@@ -332,15 +328,7 @@ export function applyTheme(theme: Theme, root: HTMLElement) {
       {
         obj: theme.tables.header,
         prefix: 'table-header',
-        properties: [
-          'background',
-          'color',
-          'border',
-          'fontWeight',
-          'fontSize',
-          'padding',
-          'backdropFilter',
-        ],
+        properties: ['background', 'color', 'border', 'backdropFilter'],
       },
       {
         obj: theme.tables.row,
@@ -360,7 +348,7 @@ export function applyTheme(theme: Theme, root: HTMLElement) {
       {
         obj: theme.tables.cell,
         prefix: 'table-cell',
-        properties: ['padding', 'border', 'fontSize'],
+        properties: ['border'],
       },
       {
         obj: theme.tables.footer,
@@ -542,14 +530,10 @@ const backgroundImageVariableNames = [
 const tableVariableNames = [
   '--table-background',
   '--table-border',
-  '--table-border-radius',
   '--table-box-shadow',
   '--table-header-background',
   '--table-header-color',
   '--table-header-border',
-  '--table-header-font-weight',
-  '--table-header-font-size',
-  '--table-header-padding',
   '--table-header-backdrop-filter',
   '--table-header-backdrop-filter-webkit',
   '--table-row-background',
@@ -561,9 +545,7 @@ const tableVariableNames = [
   '--table-row-hover-color',
   '--table-row-selected-background',
   '--table-row-selected-color',
-  '--table-cell-padding',
   '--table-cell-border',
-  '--table-cell-font-size',
   '--table-footer-background',
   '--table-footer-color',
   '--table-footer-border',

src/lib/theme.type.ts

@@ -75,15 +75,11 @@ export interface Theme {
   tables?: {
     background?: string;
     border?: string;
-    borderRadius?: string;
     boxShadow?: string;
     header?: {
       background?: string;
       color?: string;
       border?: string;
-      fontWeight?: string;
-      fontSize?: string;
-      padding?: string;
       backdropFilter?: string;
     };
     row?: {
@@ -101,9 +97,7 @@ export interface Theme {
       };
     };
     cell?: {
-      padding?: string;
       border?: string;
-      fontSize?: string;
     };
     footer?: {
       background?: string;

src/themes/amiga/theme.json

@@ -63,13 +63,10 @@
   "tables": {
     "background": "rgba(15, 23, 42, 0.85)",
     "border": "1px solid rgba(59, 130, 246, 0.3)",
-    "borderRadius": "8px",
-    "boxShadow": "0 4px 6px -1px rgba(14, 165, 233, 0.15)",
+    "boxShadow": "var(--shadow-lg)",
     "header": {
       "background": "rgba(14, 165, 233, 0.1)",
-      "color": "#e0f2fe",
-      "fontWeight": "600",
-      "fontSize": "14px"
+      "color": "#e0f2fe"
     },
     "row": {
       "background": "rgba(15, 23, 42, 0.7)",
@@ -84,9 +81,6 @@
         "color": "#ffffff"
       }
     },
-    "cell": {
-      "fontSize": "14px"
-    },
     "footer": {
       "background": "rgba(14, 165, 233, 0.05)",
       "color": "#93c5fd",

src/themes/circuit/theme.json

@@ -63,14 +63,11 @@
   "tables": {
     "background": "rgba(8, 8, 12, 0.25)",
     "border": "1px solid rgba(0,214,255,0.15)",
-    "borderRadius": "12px",
     "boxShadow": "0 12px 30px rgba(0,0,0,0.30)",
     "header": {
       "background": "rgba(0,0,0,0.85)",
       "color": "#cae1f2",
       "border": "1px solid rgba(0,214,255,0.15)",
-      "fontWeight": "600",
-      "fontSize": "14px",
       "backdropFilter": "blur(18px) saturate(160%) brightness(0.9)"
     },
     "row": {
@@ -87,10 +84,6 @@
         "color": "#cae1f2"
       }
     },
-    "cell": {
-      "padding": "12px 16px",
-      "fontSize": "14px"
-    },
     "footer": {
       "background": "rgba(0,0,0,0.85)",
       "color": "#e8e8ee",
@@ -192,9 +185,7 @@
       }
     }
   },
-  "buttonStyles": [
-    "rounded-buttons"
-  ],
+  "buttonStyles": ["rounded-buttons"],
   "switches": {
     "checked": {
       "background": "rgba(0,255,255,0.75)"
@@ -218,4 +209,4 @@
       "boxShadow": "0 24px 64px rgba(0,0,0,0.50), 0 0 0 1px rgba(10,132,255,0.20), 0 0 40px rgba(10,132,255,0.12)"
     }
   }
-}
+}

src/themes/glass-dark/theme.json

@@ -717,22 +717,13 @@
         "border": {
           "type": "string"
         },
-        "borderRadius": {
-          "type": "string"
-        },
         "boxShadow": {
           "type": "string"
         },
         "cell": {
           "properties": {
             "border": {
               "type": "string"
-            },
-            "fontSize": {
-              "type": "string"
-            },
-            "padding": {
-              "type": "string"
             }
           },
           "type": "object"
@@ -767,15 +758,6 @@
             },
             "color": {
               "type": "string"
-            },
-            "fontSize": {
-              "type": "string"
-            },
-            "fontWeight": {
-              "type": "string"
-            },
-            "padding": {
-              "type": "string"
             }
           },
           "type": "object"

src/themes/schema.json

@@ -97,8 +97,5 @@
       "color": "hsl(240 100% 50%)",
       "textShadow": "none"
     }
-  },
-  "tables": {
-    "borderRadius": "0px"
   }
 }