Extend skin-aware styles across the component library

packages/ui/src/components/data-table.variants.ts

@@ -9,8 +9,7 @@ export const dataTableToolbarVariants = cva(
 
 export const dataTableContentVariants = cva(
   [
-    "overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)]",
-    "bg-[var(--color-card)] shadow-[var(--shadow-sm)]",
+    "overflow-hidden rounded-[var(--ui-card-radius)] border border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)] shadow-[var(--ui-card-default-shadow)] [border-width:var(--ui-card-border-width)]",
     getMotionRecipeClassNames("transition", "ring")
   ],
   {
@@ -29,7 +28,7 @@ export const dataTableContentVariants = cva(
 export const dataTableTableVariants = cva("min-w-full border-collapse align-middle");
 
 export const dataTableHeaderVariants = cva(
-  "bg-[color-mix(in_oklch,var(--color-surface)_74%,var(--color-card))]"
+  "bg-[color-mix(in_oklch,var(--ui-card-subtle-bg)_74%,var(--ui-card-default-bg))]"
 );
 
 export const dataTableHeaderCellVariants = cva(
@@ -60,18 +59,18 @@ export const dataTableBodyVariants = cva("");
 
 export const dataTableRowVariants = cva(
   [
-    "border-t border-[color-mix(in_oklch,var(--color-border)_88%,transparent)]",
+    "border-t border-[color-mix(in_oklch,var(--ui-card-default-border)_88%,transparent)]",
     "transition-colors duration-200"
   ],
   {
     variants: {
       interactive: {
         false: "",
-        true: "hover:bg-[color-mix(in_oklch,var(--color-surface)_72%,var(--color-card))]"
+        true: "hover:bg-[color-mix(in_oklch,var(--ui-card-subtle-bg)_72%,var(--ui-card-default-bg))]"
       },
       selected: {
         false: "",
-        true: "bg-[color-mix(in_oklch,var(--color-primary)_8%,var(--color-card))]"
+        true: "bg-[color-mix(in_oklch,var(--color-primary)_8%,var(--ui-card-default-bg))]"
       }
     },
     defaultVariants: {
@@ -107,10 +106,10 @@ export const dataTablePaginationVariants = cva(
 
 export const dataTableSelectionBarVariants = cva(
   [
-    "flex flex-wrap items-center justify-between gap-3 rounded-[var(--radius-md)]",
-    "border border-[color-mix(in_oklch,var(--color-primary)_24%,var(--color-border))]",
-    "bg-[color-mix(in_oklch,var(--color-primary)_7%,var(--color-card))] px-4 py-3",
-    "shadow-[var(--shadow-xs)]"
+    "flex flex-wrap items-center justify-between gap-3 rounded-[var(--ui-card-radius)]",
+    "border border-[color-mix(in_oklch,var(--color-primary)_24%,var(--ui-card-default-border))] [border-width:var(--ui-card-border-width)]",
+    "bg-[color-mix(in_oklch,var(--color-primary)_7%,var(--ui-card-default-bg))] px-4 py-3",
+    "shadow-[var(--ui-card-subtle-shadow)]"
   ]
 );