Use theme-aware background in DataViews

src/components/wordpress/DataViews.stories.tsx

@@ -959,80 +959,24 @@ FullFeatured.storyName = "Full Featured";
  */
 function PosterGrid({ items }: { items: User[] }) {
   return (
-    <div
-      style={{
-        display: "grid",
-        gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
-        gap: "16px",
-        padding: "16px 0",
-      }}
-    >
+    <div className="grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 py-4">
       {items.map((item) => (
         <div
           key={item.id}
-          style={{
-            position: "relative",
-            aspectRatio: "4 / 3",
-            borderRadius: "8px",
-            overflow: "hidden",
-            backgroundColor: "#cbd5e1", // Placeholder background
-          }}
+          className="relative aspect-4/3 rounded-lg overflow-hidden bg-slate-300"
         >
-          <div
-            style={{
-              position: "absolute",
-              bottom: 0,
-              left: 0,
-              right: 0,
-              padding: "48px 16px 16px",
-              background:
-                "linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, transparent 100%)",
-              color: "white",
-            }}
-          >
-            <h3
-              style={{
-                margin: "0 0 4px",
-                fontSize: "18px",
-                fontWeight: 600,
-                textShadow: "0 1px 2px rgba(0,0,0,0.5)",
-              }}
-            >
+          <div className="absolute bottom-0 left-0 right-0 pt-12 px-4 pb-4 bg-linear-to-t from-black/80 via-black/40 to-transparent text-white">
+            <h3 className="mb-1 text-lg font-semibold drop-shadow-[0_1px_2px_rgba(0,0,0,0.5)]">
               {item.name}
             </h3>
-            <p
-              style={{
-                margin: "0 0 8px",
-                fontSize: "13px",
-                opacity: 0.9,
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-              }}
-            >
+            <p className="mb-2 text-[13px] opacity-90 overflow-hidden text-ellipsis whitespace-nowrap">
               {item.email}
             </p>
-            <div style={{ display: "flex", gap: "6px" }}>
-              <span
-                style={{
-                  fontSize: "11px",
-                  padding: "2px 8px",
-                  borderRadius: "4px",
-                  backgroundColor: "rgba(255,255,255,0.2)",
-                  textTransform: "capitalize",
-                }}
-              >
+            <div className="flex gap-1.5">
+              <span className="text-[11px] px-2 py-0.5 rounded bg-white/20 capitalize">
                 {item.role}
               </span>
-              <span
-                style={{
-                  fontSize: "11px",
-                  padding: "2px 8px",
-                  borderRadius: "4px",
-                  backgroundColor: "rgba(255,255,255,0.2)",
-                  textTransform: "capitalize",
-                }}
-              >
+              <span className="text-[11px] px-2 py-0.5 rounded bg-white/20 capitalize">
                 {item.status}
               </span>
             </div>
@@ -1083,9 +1027,8 @@ export const LayoutCustomComponent: StoryFn = () => {
         view={view}
         fields={fields}
         onChangeView={setView}
-        defaultLayouts={{ table: {} }}
       >
-        <div style={{ padding: "2px" }}>
+        <div className="p-0.5">
           {DataViews.Search && <DataViews.Search />}
           <PosterGrid items={paginatedData} />
         </div>

src/components/wordpress/dataviews.tsx

@@ -81,7 +81,7 @@
  */
 function getQueryParamsFromView(view: View, tabViewKey: string): Record<string, string | number | null | undefined> {
     const v = view as View & {
         [key: string]: any;
     };
 
     const perPage = v.perPage ?? v.per_page;
@@ -90,7 +90,7 @@
         typeof v.filters === 'object' && Object.keys(v.filters).length > 0 ? JSON.stringify(v.filters) : null;
 
     // Start with the core pieces of state we always want in the URL.
     const params: Record<string, any> = {
         // Use `current_page` instead of `page` so we don't conflict with
         // WordPress admin's own `page` query param (e.g. ?page=plugin-ui-test).
         current_page: v.page ?? null,
@@ -386,9 +386,9 @@
     return (
         <table className="w-full text-sm border-collapse">
             <thead>
-                <tr className="border-b border-border">
+                <tr className="bg-background border-b border-border">
                     {hasBulkActions && (
-                        <th className="h-12 bg-white w-12 px-5 align-middle">
+                        <th className="h-12 bg-background w-12 px-5 align-middle">
                             <Skeleton className="h-4 w-4 rounded-sm" />
                         </th>
                     )}
@@ -398,7 +398,7 @@
                             <th
                                 key={colIdx}
                                 className={cn(
-                                    'h-12 bg-white px-5 align-middle text-[11px] font-medium text-foreground uppercase tracking-normal',
+                                    'h-12 bg-background px-5 align-middle text-[11px] font-medium text-foreground uppercase tracking-normal',
                                     isActions ? 'text-right' : 'text-left'
                                 )}>
                                 {label}
@@ -409,7 +409,7 @@
             </thead>
             <tbody>
                 {Array.from({ length: rows }, (_, rowIdx) => (
-                    <tr key={rowIdx} className="border-b border-border last:border-b-0">
+                    <tr key={rowIdx} className="bg-background border-b border-border last:border-b-0">
                         {hasBulkActions && (
                             <td className="h-12 w-12 px-5 align-middle">
                                 <Skeleton className="h-4 w-4 rounded-sm" />
@@ -460,9 +460,9 @@
 
     // --- Destructive action confirmation via AlertDialog ---
     const [pendingDestructiveAction, setPendingDestructiveAction] = useState<{
         action: DataViewAction<Item> & { callback: (...args: any[]) => void };
         items: Item[];
         context: any;
     } | null>(null);
 
     const handleDestructiveConfirm = useCallback(() => {

src/components/wordpress/style.css

@@ -3,15 +3,19 @@
 @import "@wordpress/dataviews/build-style/style.css";
 @import '@wordpress/theme/design-tokens.css';
 
+.pui-root-dataviews,
+.pui-root-dataviews .dataviews-wrapper {
+    background-color: var(--background, #FFFFFF);
+}
 .pui-root-dataviews:not(.custom-layout) {
     border-radius: 6px;
     border: 1px solid var(--border, #E7E7E7);
     box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1019607843);
-    background-color: var(--background, #FFFFFF);
     color: var(--foreground, #1D1D1D);
   }
   .pui-root-dataviews .dataviews-no-results {
       border-top: 1px solid var(--border, #E7E7E7);
+      background-color: var(--background, #FFFFFF);
   }
   .pui-root-dataviews:not(.custom-layout) .dataviews-wrapper {
     border-radius: 6px;
@@ -65,6 +69,7 @@
     display: flex;
     justify-content: space-between !important;
     padding: 16px;
+    background-color: var(--background, #FFFFFF);
   }
   .pui-root-dataviews .dataviews-wrapper .dataviews-view-table tr td:first-child,
   .pui-root-dataviews .dataviews-wrapper .dataviews-view-table tr th:first-child {