enhance(docs): update props table styling

telekom · Apr 17, 2024 · 5f9443f · 5f9443f
1 parent 60ad910
commit 5f9443f
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 23 deletions.
diff --git a/apps/docs/src/components/props-table.tsx b/apps/docs/src/components/props-table.tsx
@@ -52,7 +52,7 @@ export const PropsTable = ({ slug }: PropsTableProps) => {
 							}}
 						</If>
 					</Typography>
-					<Table className="w-full" aria-label={prop.displayName}>
+					<Table className="w-full bg-subtle/10" aria-label={prop.displayName}>
 						<TableHeader>
 							<TableColumn isRowHeader>Name</TableColumn>
 							<TableColumn>Type</TableColumn>

diff --git a/packages/styles/src/components/table/variants.ts b/packages/styles/src/components/table/variants.ts
@@ -6,7 +6,7 @@ export const tableVariants = tv({
 		column: "border-b-2 border-border px-4 py-1 text-left outline-none",
 		header: "text-fg after:table-row after:h-[2px]",
 		label: "text-subtle-foreground",
-		row: "relative cursor-default rounded-xl text-fg outline-none ring-focus data-[focus-visible]:ring-2",
+		row: "relative cursor-default rounded-xl text-foreground outline-none ring-focus data-[focus-visible]:ring-2",
 		cell: "px-4 py-2 outline-none ring-focus data-[focus-visible]:ring-2",
 	},
 })
diff --git a/packages/ui/src/components/ui/table/table.tsx b/packages/ui/src/components/ui/table/table.tsx
@@ -1,11 +1,11 @@
 import {
+	Cell as AriaCell,
+	type CellProps as AriaCellProps,
 	Column as AriaColumn,
 	Table as AriaTable,
 	TableBody as AriaTableBody,
 	type TableProps as AriaTableProps,
 	TableHeader as AriaTableheader,
-	Cell,
-	type CellProps,
 	Collection,
 	type ColumnProps,
 	Row,
@@ -16,28 +16,23 @@ import {
 
 import { tableVariants } from "@dv/styles/components/table"
 import { ChevronDown, ChevronUp, Menu } from "lucide-react"
+import { createStyleContext } from "../../../utils/create-style-context"
 import { Button } from "../button"
 import { Checkbox } from "../checkbox"
 
-const { root, header, column, row, cell } = tableVariants()
+const { header, column, row } = tableVariants()
+
+const { withContext, withProvider } = createStyleContext(tableVariants)
 
 const TableBody = AriaTableBody
 
-export type TableProps = AriaTableProps & {
-	className?: string
-}
+export type TableProps = AriaTableProps
 
-const Table = ({ children, className, ...props }: TableProps) => (
-	<AriaTable {...props} className={root({ className })}>
-		{children}
-	</AriaTable>
-)
+const Table = withProvider(AriaTable, "root")
 
-const TableCell = ({ children, className, ...props }: CellProps & { className?: string }) => (
-	<Cell {...props} className={cell({ className })}>
-		{children}
-	</Cell>
-)
+export type TableCellProps = AriaCellProps
+
+const TableCell = withContext(AriaCell, "cell")
 
 const TableColumn = ({ children, className, ...props }: ColumnProps & { className?: string }) => (
 	<AriaColumn {...props} className={column({ className })}>
@@ -89,16 +84,16 @@ const TableRow = <T extends object>({
 	return (
 		<Row id={id} {...props} className={row({ className })}>
 			{allowsDragging && (
-				<Cell className="ring-focus data-[focus-visible]:ring-2">
+				<AriaCell className="ring-focus data-[focus-visible]:ring-2">
 					<Button className="bg-transparent" slot="drag">
-						<Menu className="h-4 w-4 text-fg" />
+						<Menu className="size-4 text-foreground" />
 					</Button>
-				</Cell>
+				</AriaCell>
 			)}
 			{selectionBehavior === "toggle" && (
-				<Cell className="">
+				<AriaCell>
 					<Checkbox slot="selection" />
-				</Cell>
+				</AriaCell>
 			)}
 			<Collection items={columns}>{children}</Collection>
 		</Row>