docs: redesign tables (#8653)

* docs: redesign tables

* fixes

www/packages/docs-ui/src/components/Table/index.tsx

@@ -11,7 +11,24 @@ const Root = ({ className, ...props }: RootProps) => {
         className,
         "table-fixed mb-docs_1",
         "[&_pre_span]:!max-w-full [&_pre_span]:!break-words [&_pre_span]:!whitespace-break-spaces",
-        "[&_pre>div]:mt-docs_1"
+        "[&_pre>div]:mt-docs_1",
+        "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+        "rounded-docs_DEFAULT"
+      )}
+      {...props}
+    />
+  )
+}
+
+type HeaderProps = React.HTMLAttributes<HTMLTableSectionElement>
+
+const Header = ({ className, ...props }: HeaderProps) => {
+  return (
+    <UiTable.Header
+      className={clsx(
+        className,
+        "!border-0 bg-medusa-bg-component [&_tr]:!bg-medusa-bg-component",
+        "rounded-docs_DEFAULT [&_tr]:rounded-docs_DEFAULT"
       )}
       {...props}
     />
@@ -23,20 +40,11 @@ type HeaderCellProps = React.HTMLAttributes<HTMLTableCellElement>
 const HeaderCell = ({ className, ...props }: HeaderCellProps) => {
   return (
     <UiTable.HeaderCell
-      className={clsx(className, "text-left pr-docs_1.5 h-docs_3 break-words")}
-      {...props}
-    />
-  )
-}
-
-type RowProps = React.HTMLAttributes<HTMLTableRowElement>
-
-const Row = ({ className, ...props }: RowProps) => {
-  return (
-    <UiTable.Row
       className={clsx(
         className,
-        "[&_td:last-child]:pr-docs_1.5 [&_th:last-child]:pr-docs_1.5 [&_td:first-child]:pl-docs_1.5 [&_th:first-child]:pl-docs_1.5"
+        "text-left px-docs_0.75 py-docs_0.5 break-words",
+        "!text-compact-small-plus text-medusa-fg-subtle",
+        "first:rounded-tl-docs_DEFAULT last:rounded-tr-docs_DEFAULT"
       )}
       {...props}
     />
@@ -48,18 +56,32 @@ type CellProps = React.HTMLAttributes<HTMLTableCellElement>
 const Cell = ({ className, ...props }: CellProps) => {
   return (
     <UiTable.Cell
-      className={clsx(className, "pr-docs_1.5 h-docs_3 break-words")}
+      className={clsx(
+        className,
+        "px-docs_0.75 py-docs_0.5 break-words align-top"
+      )}
+      {...props}
+    />
+  )
+}
+
+type BodyProps = React.HTMLAttributes<HTMLTableSectionElement>
+
+const Body = ({ className, ...props }: BodyProps) => {
+  return (
+    <UiTable.Body
+      className={clsx(className, "[&_tr:last-child]:border-b-0 border-b-0")}
       {...props}
     />
   )
 }
 
 const Table = Object.assign(Root, {
-  Row,
+  Row: UiTable.Row,
   Cell,
-  Header: UiTable.Header,
+  Header,
   HeaderCell,
-  Body: UiTable.Body,
+  Body,
 })
 
 export { Table }