From dbd907693d8b8451eab739740fa5cd055084d755 Mon Sep 17 00:00:00 2001
From: Steven <steven@straatemans.nl>
Date: Fri, 6 Dec 2024 08:10:53 +0100
Subject: [PATCH] feat(ui): extra styling variant of the table component
 (#2715)

---
 .changeset/nervous-turtles-heal.md            |   5 +
 .../rwa-demo/src/app/(app)/assets/page.tsx    |   1 +
 .../src/components/AgentsList/AgentsList.tsx  |   1 +
 .../components/InvestorList/InvestorList.tsx  |   1 +
 .../kode-ui/src/components/Table/Body.tsx     |  32 ++-
 .../kode-ui/src/components/Table/Header.tsx   |  20 +-
 .../kode-ui/src/components/Table/Table.css.ts | 234 ++++++++++++++----
 .../src/components/Table/Table.stories.tsx    |  69 +++++-
 .../kode-ui/src/components/Table/Table.tsx    |  23 +-
 .../components/Table/TableSelectAllCell.tsx   |   5 +-
 .../components/Table/TableSelectionCell.tsx   |   3 +
 .../CompactTable/CompactTable.stories.tsx     |  63 ++++-
 .../patterns/CompactTable/CompactTable.tsx    |  11 +-
 .../CompactTableDesktop.tsx                   |  11 +-
 .../CompactTableDesktop/styles.css.ts         |  28 ++-
 .../CompactTableMobile/CompactTableMobile.tsx |   3 +-
 .../CompactTableMobile/styles.css.ts          |  35 ++-
 .../kode-ui/src/styles/tokens/contract.css.ts |  86 ++++---
 .../kode-ui/src/styles/tokens/dark.css.ts     |  32 ++-
 .../kode-ui/src/styles/tokens/light.css.ts    |  32 ++-
 20 files changed, 511 insertions(+), 184 deletions(-)
 create mode 100644 .changeset/nervous-turtles-heal.md

diff --git a/.changeset/nervous-turtles-heal.md b/.changeset/nervous-turtles-heal.md
new file mode 100644
index 0000000000..6bb663b972
--- /dev/null
+++ b/.changeset/nervous-turtles-heal.md
@@ -0,0 +1,5 @@
+---
+'@kadena/kode-ui': minor
+---
+
+add an extra styling variant to the table component
diff --git a/packages/apps/rwa-demo/src/app/(app)/assets/page.tsx b/packages/apps/rwa-demo/src/app/(app)/assets/page.tsx
index 75f529954b..d5f383a94e 100644
--- a/packages/apps/rwa-demo/src/app/(app)/assets/page.tsx
+++ b/packages/apps/rwa-demo/src/app/(app)/assets/page.tsx
@@ -10,6 +10,7 @@ const Assets = () => {
   return (
     <>
       <CompactTable
+        variant="open"
         fields={[
           {
             key: 'uuid',
diff --git a/packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx b/packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx
index 5d526e5221..81f6c7a975 100644
--- a/packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx
+++ b/packages/apps/rwa-demo/src/components/AgentsList/AgentsList.tsx
@@ -58,6 +58,7 @@ export const AgentsList: FC = () => {
           />
           <SectionCardBody>
             <CompactTable
+              variant="open"
               fields={[
                 {
                   label: 'Name',
diff --git a/packages/apps/rwa-demo/src/components/InvestorList/InvestorList.tsx b/packages/apps/rwa-demo/src/components/InvestorList/InvestorList.tsx
index 4039daa642..b84c24d637 100644
--- a/packages/apps/rwa-demo/src/components/InvestorList/InvestorList.tsx
+++ b/packages/apps/rwa-demo/src/components/InvestorList/InvestorList.tsx
@@ -53,6 +53,7 @@ export const InvestorList: FC = () => {
 
           <SectionCardBody>
             <CompactTable
+              variant="open"
               fields={[
                 {
                   label: 'Name',
diff --git a/packages/libs/kode-ui/src/components/Table/Body.tsx b/packages/libs/kode-ui/src/components/Table/Body.tsx
index 5b4aa3e2da..f6282cef60 100644
--- a/packages/libs/kode-ui/src/components/Table/Body.tsx
+++ b/packages/libs/kode-ui/src/components/Table/Body.tsx
@@ -10,19 +10,22 @@ import {
   useTableCell,
   useTableRow,
 } from 'react-aria';
-import { tableDataCell, tableRow } from './Table.css';
+import type { ITableProps } from './Table';
+import { spacerClass, tableDataCell, tableRow } from './Table.css';
 
 export interface ITableRowProps<T> {
   item: GridNode<T>;
   state: TableState<T> | TreeGridState<T>;
   children: ReactNode;
   selectionMode: TableProps<T>['selectionMode'];
+  variant: ITableProps<HTMLTableElement>['variant'];
 }
 
 export function TableRow<T extends object>({
   item,
   children,
   state,
+  variant,
 }: ITableRowProps<T>) {
   const ref = useRef(null);
   const { rowProps, isSelected } = useTableRow(
@@ -36,27 +39,32 @@ export function TableRow<T extends object>({
   const { isHovered, hoverProps } = useHover({ isDisabled: false });
 
   return (
-    <tr
-      className={tableRow}
-      {...mergeProps(rowProps, focusProps, hoverProps)}
-      data-focused={isFocusVisible || undefined}
-      data-hovered={isHovered || undefined}
-      data-selected={isSelected || undefined}
-      ref={ref}
-    >
-      {children}
-    </tr>
+    <>
+      {variant === 'open' && <tr className={spacerClass} />}
+      <tr
+        className={tableRow}
+        {...mergeProps(rowProps, focusProps, hoverProps)}
+        data-focused={isFocusVisible || undefined}
+        data-hovered={isHovered || undefined}
+        data-selected={isSelected || undefined}
+        ref={ref}
+      >
+        {children}
+      </tr>
+    </>
   );
 }
 
 interface ITableCellProps<T> {
   cell: GridNode<T>;
   state: TableState<T>;
+  variant: ITableProps<HTMLTableElement>['variant'];
 }
 
 export function TableCell<T extends object>({
   cell,
   state,
+  variant = 'default',
 }: ITableCellProps<T>) {
   const ref = useRef(null);
   const { gridCellProps } = useTableCell({ node: cell }, state, ref);
@@ -65,7 +73,7 @@ export function TableCell<T extends object>({
   return (
     <td
       {...mergeProps(gridCellProps, focusProps)}
-      className={tableDataCell}
+      className={tableDataCell({ variant })}
       data-focused={isFocusVisible || undefined}
       ref={ref}
     >
diff --git a/packages/libs/kode-ui/src/components/Table/Header.tsx b/packages/libs/kode-ui/src/components/Table/Header.tsx
index 45ed5cf785..d9caf882ce 100644
--- a/packages/libs/kode-ui/src/components/Table/Header.tsx
+++ b/packages/libs/kode-ui/src/components/Table/Header.tsx
@@ -8,22 +8,18 @@ import {
   useTableColumnHeader,
   useTableHeaderRow,
 } from 'react-aria';
+import type { ITableProps } from '..';
 import { Stack } from '..';
 
 import { MonoExpandLess, MonoExpandMore } from '@kadena/kode-icons/system';
-import classNames from 'classnames';
-import {
-  columnHeader,
-  defaultHeader,
-  headerBase,
-  subtleHeader,
-} from './Table.css';
+import { columnHeader, headerBase } from './Table.css';
 
 interface ITableHeaderRowProps<T> {
   item: GridNode<T>;
   state: TableState<T>;
   children: ReactNode;
   isSubtle?: boolean;
+  variant: ITableProps<HTMLTableElement>['variant'];
 }
 
 export function TableHeaderRow<T extends object>({
@@ -31,16 +27,14 @@ export function TableHeaderRow<T extends object>({
   state,
   children,
   isSubtle = false,
+  variant = 'default',
 }: ITableHeaderRowProps<T>) {
   const ref = useRef(null);
   const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
 
   return (
     <tr
-      className={classNames(headerBase, {
-        [subtleHeader]: isSubtle,
-        [defaultHeader]: !isSubtle,
-      })}
+      className={headerBase({ variant, subtleHeader: isSubtle })}
       {...rowProps}
       ref={ref}
     >
@@ -65,11 +59,13 @@ interface ITableColumnHeaderProps<T> {
   column: GridNode<T>;
   state: TableState<T>;
   isSubtle?: boolean;
+  variant: ITableProps<HTMLTableElement>['variant'];
 }
 
 export function TableColumnHeader<T extends object>({
   column,
   state,
+  variant,
 }: ITableColumnHeaderProps<T>) {
   const ref = useRef(null);
   const { columnHeaderProps } = useTableColumnHeader(
@@ -87,7 +83,7 @@ export function TableColumnHeader<T extends object>({
     <th
       {...mergeProps(columnHeaderProps, focusProps)}
       colSpan={column.colspan}
-      className={columnHeader}
+      className={columnHeader({ variant })}
       style={{
         width: getWidthStyle(column.props.width),
         minWidth: getWidthStyle(column.props.minWidth),
diff --git a/packages/libs/kode-ui/src/components/Table/Table.css.ts b/packages/libs/kode-ui/src/components/Table/Table.css.ts
index 3cf5b7d06d..bf59e11450 100644
--- a/packages/libs/kode-ui/src/components/Table/Table.css.ts
+++ b/packages/libs/kode-ui/src/components/Table/Table.css.ts
@@ -1,5 +1,7 @@
 import {
+  atoms,
   globalStyle,
+  recipe,
   style,
   styleVariants,
   token,
@@ -11,32 +13,80 @@ export const tableWrapper = style({
   overflowX: 'auto',
 });
 
-export const table = style([
-  {
-    color: token('color.text.base.default'),
-    borderCollapse: 'collapse',
-    borderSpacing: 0,
-  },
-]);
+export const table = style({
+  color: token('color.text.base.default'),
+  borderCollapse: 'collapse',
+  borderSpacing: 0,
+});
 
-export const headerBase = style([
-  {
-    borderRadius: token('radius.sm'),
-    borderBlockEnd: token('color.border.base.default'),
-    color: token('color.text.base.inverse.default'),
-    backgroundColor: token('color.background.base.inverse.default'),
+export const tableVariants = recipe({
+  base: {},
+  variants: {
+    variant: {
+      default: {},
+      open: {
+        borderCollapse: 'separate',
+      },
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
   },
-  uiSmallBold,
-]);
-
-export const subtleHeader = style({
-  color: token('color.text.base.default'),
-  backgroundColor: token('color.background.base.@hover'),
 });
 
-export const defaultHeader = style({
-  color: token('color.text.base.inverse.default'),
-  backgroundColor: token('color.background.base.inverse.default'),
+const openHeader = style([
+  atoms({
+    backgroundColor: 'transparent',
+  }),
+  {},
+]);
+
+export const headerBase = recipe({
+  defaultVariants: {
+    variant: 'default',
+  },
+  base: [
+    {
+      borderRadius: token('radius.sm'),
+      borderBlockEnd: token('color.border.base.default'),
+    },
+    uiSmallBold,
+  ],
+  variants: {
+    subtleHeader: {
+      false: {
+        color: token('color.text.base.default'),
+        backgroundColor: token('color.background.base.@hover'),
+      },
+      true: {
+        color: token('color.text.base.inverse.default'),
+        backgroundColor: token('color.background.base.inverse.default'),
+      },
+    },
+    variant: {
+      default: {
+        color: token('color.text.base.inverse.default'),
+        backgroundColor: token('color.background.base.inverse.default'),
+      },
+      open: [],
+    },
+  },
+  compoundVariants: [
+    {
+      variants: {
+        subtleHeader: true,
+        variant: 'open',
+      },
+      style: openHeader,
+    },
+    {
+      variants: {
+        subtleHeader: false,
+        variant: 'open',
+      },
+      style: openHeader,
+    },
+  ],
 });
 
 export const tableRow = style([
@@ -69,46 +119,90 @@ export const baseCell = style([
   },
 ]);
 
-export const columnHeader = style([
-  baseCell,
-  {
-    textAlign: 'left',
-    selectors: {
-      '&[data-multi-column]': {
-        textAlign: 'center',
-      },
-      '&[data-sortable]': {
-        cursor: 'pointer',
+export const columnHeader = recipe({
+  base: [
+    baseCell,
+
+    {
+      textAlign: 'left',
+      selectors: {
+        '&[data-multi-column]': {
+          textAlign: 'center',
+        },
+        '&[data-sortable]': {
+          cursor: 'pointer',
+        },
       },
     },
+  ],
+  variants: {
+    variant: {
+      default: {},
+      open: [
+        atoms({
+          backgroundColor: 'surface.default',
+          color: 'text.base.@init',
+          border: 'hairline',
+        }),
+        {
+          borderInlineWidth: '0!important',
+          paddingBlock: token('spacing.n3'),
+          paddingInline: token('spacing.n4'),
+          selectors: {
+            '&:first-child': {
+              borderStartStartRadius: `${token('radius.sm')}!important`,
+              borderEndStartRadius: `${token('radius.sm')}!important`,
+              borderInlineStartWidth: '1px!important',
+            },
+            '&:last-child': {
+              borderStartEndRadius: `${token('radius.sm')}!important`,
+              borderEndEndRadius: `${token('radius.sm')}!important`,
+              borderInlineEndWidth: '1px!important',
+            },
+          },
+        },
+      ],
+    },
   },
-]);
-
-globalStyle(`${headerBase} th:first-of-type `, {
-  borderTopLeftRadius: token('radius.sm'),
-  borderBottomLeftRadius: token('radius.sm'),
 });
 
-globalStyle(`${headerBase} th:last-of-type`, {
-  borderTopRightRadius: token('radius.sm'),
-  borderBottomRightRadius: token('radius.sm'),
-});
+globalStyle(
+  `${table}:not([data-variant="open"]) ${headerBase()} th:first-of-type `,
+  {
+    borderTopLeftRadius: token('radius.sm'),
+    borderBottomLeftRadius: token('radius.sm'),
+  },
+);
 
-globalStyle(`${tableRow} td:first-of-type`, {
-  borderInlineStart: '4px solid transparent',
-  borderTopLeftRadius: token('size.n2'),
-  borderBottomLeftRadius: token('size.n2'),
-});
+globalStyle(
+  `${table}:not([data-variant="open"]) ${headerBase()} th:last-of-type`,
+  {
+    borderTopRightRadius: token('radius.sm'),
+    borderBottomRightRadius: token('radius.sm'),
+  },
+);
 
-globalStyle(`${tableRow} td:last-of-type`, {
+globalStyle(
+  `${table}:not([data-variant="open"]) ${tableRow} td:first-of-type`,
+  {
+    borderInlineStart: '4px solid transparent',
+    borderTopLeftRadius: token('size.n2'),
+    borderBottomLeftRadius: token('size.n2'),
+  },
+);
+
+globalStyle(`${table}:not([data-variant="open"]) ${tableRow} td:last-of-type`, {
   borderInlineEnd: '4px solid transparent',
   borderTopRightRadius: token('size.n2'),
   borderBottomRightRadius: token('size.n2'),
 });
 
-globalStyle(`${table} tbody[data-isstriped="true"] tr:nth-child(even)`, {
-  backgroundColor: token('color.background.surface.default'),
-});
+globalStyle(
+  `${table}:not([data-variant="open"]) tbody[data-isstriped="true"] tr:nth-child(even)`,
+  {
+    backgroundColor: token('color.background.surface.default'),
+  },
+);
 
 export const tableRowContent = style({
   display: 'flex',
@@ -138,4 +232,42 @@ const dataCell = style({
   },
 });
 
-export const tableDataCell = style([baseCell, dataCell]);
+export const tableDataCell = recipe({
+  base: [baseCell, dataCell],
+  variants: {
+    variant: {
+      default: {},
+      open: [
+        atoms({
+          paddingBlock: 'n3',
+          paddingInline: 'n4',
+          border: 'hairline',
+        }),
+        {
+          backgroundColor: token('color.background.table.row.default'),
+          backdropFilter: 'blur(18px)',
+          borderInlineWidth: '0!important',
+          selectors: {
+            '&:first-child': {
+              borderStartStartRadius: `${token('radius.sm')}!important`,
+              borderEndStartRadius: `${token('radius.sm')}!important`,
+              borderInlineStartWidth: `${token('border.width.hairline')}!important`,
+            },
+            '&:last-child': {
+              borderStartEndRadius: `${token('radius.sm')}!important`,
+              borderEndEndRadius: `${token('radius.sm')}!important`,
+              borderInlineEndWidth: `${token('border.width.hairline')}!important`,
+            },
+            [`${tableRow}[data-hovered] &`]: {
+              backgroundColor: token('color.background.table.row.@hover'),
+            },
+          },
+        },
+      ],
+    },
+  },
+});
+
+export const spacerClass = style({
+  height: token('spacing.n2'),
+});
diff --git a/packages/libs/kode-ui/src/components/Table/Table.stories.tsx b/packages/libs/kode-ui/src/components/Table/Table.stories.tsx
index d283e2d107..4fa5c620f6 100644
--- a/packages/libs/kode-ui/src/components/Table/Table.stories.tsx
+++ b/packages/libs/kode-ui/src/components/Table/Table.stories.tsx
@@ -73,6 +73,12 @@ const meta: Meta<typeof Table> = {
       },
       options: ['single', 'multiple', 'none'],
     },
+    variant: {
+      control: {
+        type: 'radio',
+      },
+      options: ['default', 'open'],
+    },
   },
 };
 
@@ -109,11 +115,46 @@ export const Primary: Story = {
   },
 };
 
+export const OpenStyle: Story = {
+  name: 'Openstyle Table',
+  args: {
+    isStriped: false,
+    isCompact: false,
+    variant: 'open',
+  },
+  render: (args) => {
+    return (
+      <Table {...args} aria-label="Example static collection table">
+        <TableHeader>
+          {columns.map((column) => (
+            <Column key={column.key} isRowHeader={column.isRowHeader}>
+              {column.name}
+            </Column>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {rows.map((row) => (
+            <Row key={row.id}>
+              <Cell>{row.name}</Cell>
+              <Cell>{row.type}</Cell>
+              <Cell>{row.date}</Cell>
+            </Row>
+          ))}
+        </TableBody>
+      </Table>
+    );
+  },
+};
+
 export const Striped: Story = {
   name: 'Striped Table',
-  render: () => {
+  render: (args) => {
     return (
-      <Table aria-label="Example static striped collection table" isStriped>
+      <Table
+        {...args}
+        aria-label="Example static striped collection table"
+        isStriped
+      >
         <TableHeader columns={columns}>
           {(column) => (
             <Column isRowHeader={column.isRowHeader}>{column.name}</Column>
@@ -135,9 +176,14 @@ export const Striped: Story = {
 
 export const Compact: Story = {
   name: 'Compact Table',
-  render: () => {
+  render: (args) => {
     return (
-      <Table aria-label="Example compact data table" isStriped isCompact>
+      <Table
+        {...args}
+        aria-label="Example compact data table"
+        isStriped
+        isCompact
+      >
         <TableHeader columns={columns}>
           {(column) => (
             <Column isRowHeader={column.isRowHeader}>{column.name}</Column>
@@ -159,9 +205,9 @@ export const Compact: Story = {
 
 export const Link: Story = {
   name: 'Link Table',
-  render: () => {
+  render: (args) => {
     return (
-      <Table aria-label="Example link data table">
+      <Table {...args} aria-label="Example link data table">
         <TableHeader columns={columns}>
           {(column) => (
             <Column isRowHeader={column.isRowHeader}>{column.name}</Column>
@@ -187,7 +233,7 @@ export const Sorting: Story = {
    * feature. Reference react-aria docs for more advanced examples:
    * https://react-spectrum.adobe.com/react-aria/useTable.html#sorting.
    */
-  render: () => {
+  render: (args) => {
     const [items, setItems] = useState(rows);
     const [sortDescriptor, setSortDescriptor] = useState({});
 
@@ -212,6 +258,7 @@ export const Sorting: Story = {
 
     return (
       <Table
+        {...args}
         aria-label="Example sortable data table"
         sortDescriptor={sortDescriptor}
         onSortChange={sort}
@@ -239,9 +286,9 @@ export const Sorting: Story = {
 
 export const FixedWidth: Story = {
   name: 'Table with Fixed column width',
-  render: () => {
+  render: (args) => {
     return (
-      <Table aria-label="Example table with nested columns">
+      <Table {...args} aria-label="Example table with nested columns">
         <TableHeader>
           <Column isRowHeader width="100">
             100px
@@ -277,9 +324,9 @@ export const FixedWidth: Story = {
 
 export const NestedHeader: Story = {
   name: 'Table with Nested Columns',
-  render: () => {
+  render: (args) => {
     return (
-      <Table aria-label="Example table with nested columns">
+      <Table {...args} aria-label="Example table with nested columns">
         <TableHeader>
           <Column title="Name">
             <Column isRowHeader>First Name</Column>
diff --git a/packages/libs/kode-ui/src/components/Table/Table.tsx b/packages/libs/kode-ui/src/components/Table/Table.tsx
index b902c567b2..142a6340f1 100644
--- a/packages/libs/kode-ui/src/components/Table/Table.tsx
+++ b/packages/libs/kode-ui/src/components/Table/Table.tsx
@@ -8,7 +8,7 @@ import { useTableState } from 'react-stately';
 
 import { TableCell, TableRow } from './Body';
 import { TableColumnHeader, TableHeaderRow } from './Header';
-import { table, tableWrapper } from './Table.css';
+import { table, tableVariants, tableWrapper } from './Table.css';
 import { TableSelectAllCell } from './TableSelectAllCell';
 import { TableSelectionCell } from './TableSelectionCell';
 
@@ -18,6 +18,7 @@ export interface ITableProps<T>
     Omit<ComponentProps<'table'>, 'children'> {
   isStriped?: boolean;
   isCompact?: boolean;
+  variant?: 'default' | 'open';
 }
 
 export function Table<T extends object>(props: ITableProps<T>) {
@@ -37,10 +38,16 @@ export function Table<T extends object>(props: ITableProps<T>) {
     <div className={tableWrapper} ref={scrollRef}>
       <table
         {...gridProps}
-        className={classNames(table, props.className, {
-          striped: props.isStriped,
-          compact: props.isCompact,
-        })}
+        data-variant={props.variant}
+        className={classNames(
+          table,
+          tableVariants({ variant: props.variant }),
+          props.className,
+          {
+            striped: props.isStriped,
+            compact: props.isCompact,
+          },
+        )}
         ref={ref}
       >
         <TableRowGroup type="thead">
@@ -50,6 +57,7 @@ export function Table<T extends object>(props: ITableProps<T>) {
             return (
               <React.Fragment key={headerRow.key}>
                 <TableHeaderRow
+                  variant={props.variant}
                   key={headerRow.key}
                   item={headerRow}
                   state={state}
@@ -58,6 +66,7 @@ export function Table<T extends object>(props: ITableProps<T>) {
                   {[...headerRow.childNodes].map((column) =>
                     column.props?.isSelectionCell ? (
                       <TableSelectAllCell
+                        variant={props.variant}
                         key={column.key}
                         column={column}
                         state={state}
@@ -65,6 +74,7 @@ export function Table<T extends object>(props: ITableProps<T>) {
                       />
                     ) : (
                       <TableColumnHeader
+                        variant={props.variant}
                         key={column.key}
                         column={column}
                         state={state}
@@ -82,6 +92,7 @@ export function Table<T extends object>(props: ITableProps<T>) {
         <TableRowGroup isStriped={props.isStriped} type="tbody">
           {[...collection.body.childNodes].map((row) => (
             <TableRow
+              variant={props.variant}
               key={row.key}
               item={row}
               state={state}
@@ -90,6 +101,7 @@ export function Table<T extends object>(props: ITableProps<T>) {
               {[...row.childNodes].map((cell) =>
                 cell.props.isSelectionCell ? (
                   <TableSelectionCell
+                    variant={props.variant}
                     key={cell.key}
                     cell={cell}
                     state={state}
@@ -97,6 +109,7 @@ export function Table<T extends object>(props: ITableProps<T>) {
                   />
                 ) : (
                   <TableCell
+                    variant={props.variant}
                     key={cell.key}
                     cell={cell}
                     state={state}
diff --git a/packages/libs/kode-ui/src/components/Table/TableSelectAllCell.tsx b/packages/libs/kode-ui/src/components/Table/TableSelectAllCell.tsx
index c1b46f4264..5034b5ef85 100644
--- a/packages/libs/kode-ui/src/components/Table/TableSelectAllCell.tsx
+++ b/packages/libs/kode-ui/src/components/Table/TableSelectAllCell.tsx
@@ -9,18 +9,21 @@ import {
 import type { ICheckboxProps } from '../Form';
 import { Checkbox } from '../Form';
 import type { ITableRowProps } from './Body';
+import type { ITableProps } from './Table';
 import { selectorCell, tableDataCell } from './Table.css';
 
 interface ITableSelectAllCellProps<T> {
   column: GridNode<T>;
   state: ITableRowProps<T>['state'];
   inverse?: boolean;
+  variant: ITableProps<HTMLTableElement>['variant'];
 }
 
 export function TableSelectAllCell<T>({
   column,
   state,
   inverse = false,
+  variant,
 }: ITableSelectAllCellProps<T>) {
   const ref = useRef<HTMLTableCellElement | null>(null);
   const { columnHeaderProps } = useTableColumnHeader(
@@ -34,7 +37,7 @@ export function TableSelectAllCell<T>({
     <th
       {...columnHeaderProps}
       ref={ref}
-      className={classNames(selectorCell.header, tableDataCell)}
+      className={classNames(selectorCell.header, tableDataCell({ variant }))}
     >
       {state.selectionManager.selectionMode === 'single' ? (
         <VisuallyHidden>{checkboxProps['aria-label']}</VisuallyHidden>
diff --git a/packages/libs/kode-ui/src/components/Table/TableSelectionCell.tsx b/packages/libs/kode-ui/src/components/Table/TableSelectionCell.tsx
index faa4306a1c..7628d15619 100644
--- a/packages/libs/kode-ui/src/components/Table/TableSelectionCell.tsx
+++ b/packages/libs/kode-ui/src/components/Table/TableSelectionCell.tsx
@@ -8,12 +8,14 @@ import { Checkbox } from '../Form';
 import { boxClass, iconClass } from '../Form/RadioGroup/Radio.css';
 import { RadioGroup } from '../Form/RadioGroup/RadioGroup';
 import type { ITableRowProps } from './Body';
+import type { ITableProps } from './Table';
 import { selectorCell, tableDataCell } from './Table.css';
 
 interface ITableSelectionCell<T> {
   cell: GridNode<T>;
   state: ITableRowProps<T>['state'];
   selectionMode?: 'single' | 'multiple' | 'none';
+  variant: ITableProps<HTMLTableElement>['variant'];
 }
 
 const Dot = ({ className }: { className: string }) => (
@@ -41,6 +43,7 @@ export function TableSelectionCell<T>({
   cell,
   state,
   selectionMode,
+  variant,
 }: ITableSelectionCell<T>) {
   const ref = useRef<HTMLTableCellElement | null>(null);
   const { gridCellProps } = useTableCell({ node: cell }, state, ref);
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.stories.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.stories.tsx
index 32ce797d31..09de283f41 100644
--- a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.stories.tsx
+++ b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.stories.tsx
@@ -24,6 +24,12 @@ const meta: Meta<ICompactTableProps> = {
     isLoading: {
       type: 'boolean',
     },
+    variant: {
+      control: {
+        type: 'radio',
+      },
+      options: ['default', 'open'],
+    },
   },
 };
 
@@ -73,10 +79,11 @@ export const Primary: Story = {
   args: {
     isLoading: false,
   },
-  render: ({ isLoading }) => {
+  render: ({ isLoading, variant }) => {
     return (
       <MediaContextProvider>
         <CompactTable
+          variant={variant}
           isLoading={isLoading}
           fields={[
             {
@@ -107,10 +114,11 @@ export const FormatLink: Story = {
   args: {
     isLoading: false,
   },
-  render: ({ isLoading }) => {
+  render: ({ isLoading, variant }) => {
     return (
       <MediaContextProvider>
         <CompactTable
+          variant={variant}
           isLoading={isLoading}
           fields={[
             {
@@ -144,10 +152,11 @@ export const FormatStatus: Story = {
   args: {
     isLoading: false,
   },
-  render: ({ isLoading }) => {
+  render: ({ isLoading, variant }) => {
     return (
       <MediaContextProvider>
         <CompactTable
+          variant={variant}
           isLoading={isLoading}
           fields={[
             {
@@ -187,10 +196,11 @@ export const FormatMultiStepTx: Story = {
   args: {
     isLoading: false,
   },
-  render: ({ isLoading }) => {
+  render: ({ isLoading, variant }) => {
     return (
       <MediaContextProvider>
         <CompactTable
+          variant={variant}
           isLoading={isLoading}
           fields={[
             {
@@ -230,10 +240,11 @@ export const FormatAmount: Story = {
   args: {
     isLoading: false,
   },
-  render: ({ isLoading }) => {
+  render: ({ isLoading, variant }) => {
     return (
       <MediaContextProvider>
         <CompactTable
+          variant={variant}
           isLoading={isLoading}
           fields={[
             {
@@ -274,10 +285,11 @@ export const FormatWithkeyArray: Story = {
   args: {
     isLoading: false,
   },
-  render: ({ isLoading }) => {
+  render: ({ isLoading, variant }) => {
     return (
       <MediaContextProvider>
         <CompactTable
+          variant={variant}
           isLoading={isLoading}
           fields={[
             {
@@ -311,13 +323,14 @@ export const FormatWithAction: Story = {
   args: {
     isLoading: false,
   },
-  render: ({ isLoading }) => {
+  render: ({ isLoading, variant }) => {
     const callAction = (value: any) => {
       alert(value);
     };
     return (
       <MediaContextProvider>
         <CompactTable
+          variant={variant}
           isLoading={isLoading}
           fields={[
             {
@@ -350,3 +363,39 @@ export const FormatWithAction: Story = {
     );
   },
 };
+
+export const OpenStyle: Story = {
+  name: 'Open style variant',
+  args: {
+    variant: 'open',
+    isLoading: false,
+  },
+  render: ({ isLoading, variant }) => {
+    return (
+      <MediaContextProvider>
+        <CompactTable
+          variant={variant}
+          isLoading={isLoading}
+          fields={[
+            {
+              label: 'Height',
+              key: 'node.block.height',
+              width: '15%',
+            },
+            {
+              label: 'RequestKey',
+              key: 'node.requestKey',
+              width: '40%',
+            },
+            {
+              label: 'Parameters',
+              key: 'node.parameters',
+              width: '45%',
+            },
+          ]}
+          data={data}
+        />
+      </MediaContextProvider>
+    );
+  },
+};
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.tsx
index 63ef638d7e..3e80340caa 100644
--- a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.tsx
+++ b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTable.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type { ITableProps } from 'src/components';
 import { Media } from './../../components/Media';
 import { CompactTableDesktop } from './CompactTableDesktop/CompactTableDesktop';
 import { CompactTableMobile } from './CompactTableMobile/CompactTableMobile';
@@ -15,6 +16,7 @@ export interface ICompactTableProps {
   totalCount?: number;
   pageSize?: number;
   setPage?: (page: ITablePaginationPageOptions) => void;
+  variant?: ITableProps<HTMLTableElement>['variant'];
   pageInfo?: {
     endCursor?: string | null;
     startCursor?: string | null;
@@ -29,6 +31,7 @@ export const CompactTable: React.FC<ICompactTableProps> = ({
   label,
   isLoading = false,
   totalCount,
+  variant = 'default',
   pageSize,
   setPage,
   pageInfo,
@@ -36,10 +39,16 @@ export const CompactTable: React.FC<ICompactTableProps> = ({
   return (
     <>
       <Media lessThan="sm" className={fullWidthClass}>
-        <CompactTableMobile isLoading={isLoading} fields={fields} data={data} />
+        <CompactTableMobile
+          variant={variant}
+          isLoading={isLoading}
+          fields={fields}
+          data={data}
+        />
       </Media>
       <Media greaterThanOrEqual="sm" className={fullWidthClass}>
         <CompactTableDesktop
+          variant={variant}
           isLoading={isLoading}
           fields={fields}
           data={data}
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx
index fcaac262bc..7be5f91545 100644
--- a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx
+++ b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/CompactTableDesktop.tsx
@@ -24,16 +24,21 @@ export const CompactTableDesktop: FC<IProps> = ({
   fields,
   label = 'Table',
   isLoading = false,
+  variant = 'default',
 }) => {
   return (
     <Stack
-      padding="sm"
       width="100%"
       flexDirection="column"
       gap="sm"
-      className={tableBorderClass}
+      className={tableBorderClass({ variant })}
     >
-      <Table aria-label={label} isStriped className={tableClass}>
+      <Table
+        aria-label={label}
+        isStriped
+        className={tableClass}
+        variant={variant}
+      >
         <TableHeader>
           {fields.map((field, idx) => (
             <Column key={`${field.key.toString()}${idx}`} width={field.width}>
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/styles.css.ts b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/styles.css.ts
index 0f3a423682..53987b465d 100644
--- a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/styles.css.ts
+++ b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableDesktop/styles.css.ts
@@ -1,5 +1,5 @@
 import { globalStyle, style } from '@vanilla-extract/css';
-import { atoms } from './../../../styles';
+import { atoms, recipe } from './../../../styles';
 
 export const tableClass = style({
   width: '100%',
@@ -14,12 +14,20 @@ globalStyle(`${tableClass} td > span`, {
   whiteSpace: 'nowrap',
 });
 
-export const tableBorderClass = style([
-  atoms({
-    borderRadius: 'lg',
-    borderColor: 'base.subtle',
-    borderWidth: 'hairline',
-    borderStyle: 'solid',
-  }),
-  {},
-]);
+export const tableBorderClass = recipe({
+  base: {},
+  variants: {
+    variant: {
+      default: [
+        atoms({
+          padding: 'sm',
+          borderRadius: 'lg',
+          borderColor: 'base.subtle',
+          borderWidth: 'hairline',
+          borderStyle: 'solid',
+        }),
+      ],
+      open: {},
+    },
+  },
+});
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/CompactTableMobile.tsx b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/CompactTableMobile.tsx
index 1046857b4d..eef9620207 100644
--- a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/CompactTableMobile.tsx
+++ b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/CompactTableMobile.tsx
@@ -13,9 +13,10 @@ export const CompactTableMobile: FC<IProps> = ({
   data,
   fields,
   isLoading = false,
+  variant,
 }) => {
   return data.map((item, idx) => (
-    <section key={idx} className={sectionClass}>
+    <section key={idx} className={sectionClass({ variant })}>
       {fields.map((field, idx) => (
         <div key={`${field.key.toString()}${idx}`} className={rowClass}>
           <span className={headerClass}>{field.label}</span>
diff --git a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/styles.css.ts b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/styles.css.ts
index 47337910e5..ff4866e014 100644
--- a/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/styles.css.ts
+++ b/packages/libs/kode-ui/src/patterns/CompactTable/CompactTableMobile/styles.css.ts
@@ -1,12 +1,31 @@
-import { atoms, style, tokens } from './../../../styles';
+import { atoms, recipe, style, tokens } from './../../../styles';
 
-export const sectionClass = style([
-  atoms({
-    padding: 'n6',
-    backgroundColor: 'base.default',
-    marginBlockEnd: 'md',
-  }),
-]);
+export const sectionClass = recipe({
+  base: [
+    atoms({
+      marginBlockEnd: 'n2',
+    }),
+  ],
+  variants: {
+    variant: {
+      default: [
+        atoms({
+          padding: 'n6',
+          backgroundColor: 'base.default',
+        }),
+      ],
+      open: [
+        atoms({
+          paddingBlock: 'n3',
+          paddingInline: 'n4',
+          border: 'hairline',
+          borderRadius: 'sm',
+          backgroundColor: 'layer.default',
+        }),
+      ],
+    },
+  },
+});
 
 export const headerClass = style([
   atoms({
diff --git a/packages/libs/kode-ui/src/styles/tokens/contract.css.ts b/packages/libs/kode-ui/src/styles/tokens/contract.css.ts
index c1a4f516d3..274c689fd8 100644
--- a/packages/libs/kode-ui/src/styles/tokens/contract.css.ts
+++ b/packages/libs/kode-ui/src/styles/tokens/contract.css.ts
@@ -783,6 +783,42 @@ export const tokens = createThemeContract({
          */
         toast: '',
       },
+      effect: {
+        shadow: {
+          /**
+           * This is the shadow 1 description
+           * @light  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
+           * @dark  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
+           */
+          level1: '',
+          /**
+           * This is the shadow 2 description
+           * @light  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
+           * @dark  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
+           */
+          level2: '',
+          /**
+           * This is the shadow 3 description updated
+           * @light  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
+           * @dark  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
+           */
+          level3: '',
+        },
+      },
+      layout: {
+        content: {
+          /**
+           * @light  `"33.75rem"`
+           * @dark  `"33.75rem"`
+           */
+          minWidth: '',
+          /**
+           * @light  `"42.5rem"`
+           * @dark  `"42.5rem"`
+           */
+          maxWidth: '',
+        },
+      },
       color: {
         accent: {
           /**
@@ -1593,6 +1629,20 @@ export const tokens = createThemeContract({
              */
             default: '',
           },
+          table: {
+            row: {
+              /**
+               * @light {@link tokens.kda.foundation.color.background.layer.default}
+               * @dark {@link tokens.kda.foundation.color.background.layer.default}
+               */
+              default: '',
+              /**
+               * @light {@link tokens.kda.foundation.color.neutral.n1@alpha80}
+               * @dark {@link tokens.kda.foundation.color.neutral.n10@alpha80}
+               */
+              '@hover': '',
+            },
+          },
         },
         border: {
           base: {
@@ -5041,28 +5091,6 @@ export const tokens = createThemeContract({
           },
         },
       },
-      effect: {
-        shadow: {
-          /**
-           * This is the shadow 1 description
-           * @light  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
-           * @dark  `"4px 0.5rem tokens.kda.foundation.size.n2 4px #000000"`
-           */
-          level1: '',
-          /**
-           * This is the shadow 2 description
-           * @light  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
-           * @dark  `"4rem 4rem tokens.kda.foundation.size.n2 2rem #000000"`
-           */
-          level2: '',
-          /**
-           * This is the shadow 3 description updated
-           * @light  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
-           * @dark  `"0px 0px tokens.kda.foundation.size.n2 24px #000000"`
-           */
-          level3: '',
-        },
-      },
       icon: {
         size: {
           /**
@@ -5102,20 +5130,6 @@ export const tokens = createThemeContract({
           xxl: '',
         },
       },
-      layout: {
-        content: {
-          /**
-           * @light  `"33.75rem"`
-           * @dark  `"33.75rem"`
-           */
-          minWidth: '',
-          /**
-           * @light  `"42.5rem"`
-           * @dark  `"42.5rem"`
-           */
-          maxWidth: '',
-        },
-      },
       typography: {
         family: {
           /**
diff --git a/packages/libs/kode-ui/src/styles/tokens/dark.css.ts b/packages/libs/kode-ui/src/styles/tokens/dark.css.ts
index 90be2f4159..c746f9558e 100644
--- a/packages/libs/kode-ui/src/styles/tokens/dark.css.ts
+++ b/packages/libs/kode-ui/src/styles/tokens/dark.css.ts
@@ -207,6 +207,19 @@ export const darkThemeValues = {
         sticky: '100',
         toast: '10000',
       },
+      effect: {
+        shadow: {
+          level1: `4px 0.5rem ${tokens.kda.foundation.size.n2} 4px #000000`,
+          level2: `4rem 4rem ${tokens.kda.foundation.size.n2} 2rem #000000`,
+          level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
+        },
+      },
+      layout: {
+        content: {
+          minWidth: '33.75rem',
+          maxWidth: '42.5rem',
+        },
+      },
       color: {
         accent: {
           blue: tokens.kda.foundation.color.palette.blue.n50,
@@ -449,6 +462,12 @@ export const darkThemeValues = {
           skeleton: {
             default: tokens.kda.foundation.color.neutral['n20@alpha80'],
           },
+          table: {
+            row: {
+              default: tokens.kda.foundation.color.background.layer.default,
+              '@hover': tokens.kda.foundation.color.neutral['n10@alpha80'],
+            },
+          },
         },
         border: {
           base: {
@@ -1309,13 +1328,6 @@ export const darkThemeValues = {
           },
         },
       },
-      effect: {
-        shadow: {
-          level1: `4px 0.5rem ${tokens.kda.foundation.size.n2} 4px #000000`,
-          level2: `4rem 4rem ${tokens.kda.foundation.size.n2} 2rem #000000`,
-          level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
-        },
-      },
       icon: {
         size: {
           xxs: tokens.kda.foundation.size.n3,
@@ -1327,12 +1339,6 @@ export const darkThemeValues = {
           xxl: tokens.kda.foundation.size.n16,
         },
       },
-      layout: {
-        content: {
-          minWidth: '33.75rem',
-          maxWidth: '42.5rem',
-        },
-      },
       typography: {
         family: {
           primaryFont: 'Inter',
diff --git a/packages/libs/kode-ui/src/styles/tokens/light.css.ts b/packages/libs/kode-ui/src/styles/tokens/light.css.ts
index 35f731494d..f2dac26c73 100644
--- a/packages/libs/kode-ui/src/styles/tokens/light.css.ts
+++ b/packages/libs/kode-ui/src/styles/tokens/light.css.ts
@@ -207,6 +207,19 @@ export const lightThemeValues = {
         sticky: '100',
         toast: '10000',
       },
+      effect: {
+        shadow: {
+          level1: `4px 0.5rem ${tokens.kda.foundation.size.n2} 4px #000000`,
+          level2: `4rem 4rem ${tokens.kda.foundation.size.n2} 2rem #000000`,
+          level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
+        },
+      },
+      layout: {
+        content: {
+          minWidth: '33.75rem',
+          maxWidth: '42.5rem',
+        },
+      },
       color: {
         accent: {
           blue: tokens.kda.foundation.color.palette.blue.n50,
@@ -449,6 +462,12 @@ export const lightThemeValues = {
           skeleton: {
             default: tokens.kda.foundation.color.neutral.n10,
           },
+          table: {
+            row: {
+              default: tokens.kda.foundation.color.background.layer.default,
+              '@hover': tokens.kda.foundation.color.neutral['n1@alpha80'],
+            },
+          },
         },
         border: {
           base: {
@@ -1309,13 +1328,6 @@ export const lightThemeValues = {
           },
         },
       },
-      effect: {
-        shadow: {
-          level1: `4px 0.5rem ${tokens.kda.foundation.size.n2} 4px #000000`,
-          level2: `4rem 4rem ${tokens.kda.foundation.size.n2} 2rem #000000`,
-          level3: `0px 0px ${tokens.kda.foundation.size.n2} 24px #000000`,
-        },
-      },
       icon: {
         size: {
           xxs: tokens.kda.foundation.size.n3,
@@ -1327,12 +1339,6 @@ export const lightThemeValues = {
           xxl: tokens.kda.foundation.size.n16,
         },
       },
-      layout: {
-        content: {
-          minWidth: '33.75rem',
-          maxWidth: '42.5rem',
-        },
-      },
       typography: {
         family: {
           primaryFont: 'Inter',