Extend skin-aware styles across the component library

docs/rfcs/multi-style-architecture.md

@@ -529,7 +529,7 @@ Priority order:
 
 Status:
 
-- not started
+- completed
 
 ### Phase 5: Packaging and Consumer Ergonomics
 
@@ -607,7 +607,8 @@ As of 2026-03-20, the project is at this point:
   and `Skeleton`
 - screenshot-friendly validation surface added in `Foundation/Style Matrix`
 - scoped `data-motion="reduced"` now works for nested docs wrappers
-- broader component-library rollout still pending
+- shared skin-aware treatment now extends across the broader component library surface,
+  including controls, menus, overlays, feedback, and data-heavy patterns
 
-The next implementation task should be Phase 4: expand the skin-aware pattern across the
+The next implementation task should be Phase 5: improve packaging and consumer
-broader component library.
+ergonomics for style consumption.

packages/ui/src/components/alert.variants.ts

@@ -3,7 +3,7 @@ import { getMotionRecipeClassNames } from "../lib/motion";
 
 export const alertVariants = cva(
   [
-    "relative grid gap-x-3 gap-y-1 rounded-[var(--radius-lg)] border p-4 shadow-[var(--shadow-xs)]",
+    "relative grid gap-x-3 gap-y-1 rounded-[var(--ui-card-radius)] border p-4 shadow-[var(--ui-card-subtle-shadow)] [border-width:var(--ui-card-border-width)]",
     "text-[var(--color-foreground)]",
     getMotionRecipeClassNames("transition", "ring")
   ],
@@ -11,13 +11,13 @@ export const alertVariants = cva(
     variants: {
       variant: {
         default:
-          "border-[var(--color-border)] bg-[var(--color-card)]",
+          "border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)]",
         success:
-          "border-[color-mix(in_oklch,var(--color-success)_34%,var(--color-border))] bg-[color-mix(in_oklch,var(--color-success)_10%,var(--color-card))]",
+          "border-[color-mix(in_oklch,var(--color-success)_34%,var(--ui-card-default-border))] bg-[color-mix(in_oklch,var(--color-success)_10%,var(--ui-card-default-bg))]",
         warning:
-          "border-[color-mix(in_oklch,var(--color-warning)_34%,var(--color-border))] bg-[color-mix(in_oklch,var(--color-warning)_12%,var(--color-card))]",
+          "border-[color-mix(in_oklch,var(--color-warning)_34%,var(--ui-card-default-border))] bg-[color-mix(in_oklch,var(--color-warning)_12%,var(--ui-card-default-bg))]",
         destructive:
-          "border-[color-mix(in_oklch,var(--color-destructive)_38%,var(--color-border))] bg-[color-mix(in_oklch,var(--color-destructive)_10%,var(--color-card))]"
+          "border-[color-mix(in_oklch,var(--color-destructive)_38%,var(--ui-card-default-border))] bg-[color-mix(in_oklch,var(--color-destructive)_10%,var(--ui-card-default-bg))]"
       },
       hasIcon: {
         false: "",

packages/ui/src/components/avatar.variants.ts

@@ -3,8 +3,8 @@ import { getMotionRecipeClassNames } from "../lib/motion";
 
 export const avatarVariants = cva(
   [
-    "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden border shadow-[var(--shadow-xs)]",
+    "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden border shadow-[var(--ui-control-shadow)]",
-    "bg-[var(--color-card)] text-[var(--color-foreground)]",
+    "bg-[var(--ui-control-bg)] text-[var(--color-foreground)] [border-width:var(--ui-input-border-width)]",
     getMotionRecipeClassNames("transition", "ring")
   ],
   {
@@ -17,13 +17,13 @@ export const avatarVariants = cva(
       },
       shape: {
         circle: "rounded-full",
-        rounded: "rounded-[var(--radius-md)]"
+        rounded: "rounded-[var(--ui-control-radius)]"
       },
       tone: {
-        default: "border-[var(--color-border)] bg-[var(--color-card)]",
+        default: "border-[var(--ui-control-border)] bg-[var(--ui-control-bg)]",
-        subtle: "border-[var(--color-border)] bg-[var(--color-surface)]",
+        subtle: "border-[var(--ui-card-subtle-border)] bg-[var(--ui-card-subtle-bg)]",
         accent:
-          "border-[color-mix(in_oklch,var(--color-accent)_28%,var(--color-border))] bg-[color-mix(in_oklch,var(--color-accent)_14%,var(--color-card))]"
+          "border-[color-mix(in_oklch,var(--color-accent)_28%,var(--ui-control-border))] bg-[color-mix(in_oklch,var(--color-accent)_14%,var(--ui-control-bg))]"
       }
     },
     defaultVariants: {

packages/ui/src/components/badge.variants.ts

@@ -3,7 +3,7 @@ import { getMotionRecipeClassNames } from "../lib/motion";
 
 export const badgeVariants = cva(
   [
-    "inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-[var(--radius-full)] border font-medium",
+    "inline-flex shrink-0 items-center justify-center gap-1 whitespace-nowrap rounded-[var(--ui-control-radius)] border font-medium [border-width:var(--ui-input-border-width)]",
     "outline-none select-none",
     getMotionRecipeClassNames("transition", "ring")
   ],
@@ -15,11 +15,11 @@ export const badgeVariants = cva(
       },
       variant: {
         subtle:
-          "border-[var(--color-border)] bg-[var(--color-card)] text-[var(--color-foreground)]",
+          "border-[var(--ui-control-border)] bg-[var(--ui-control-bg)] text-[var(--color-foreground)] shadow-[var(--ui-control-shadow)]",
         solid:
           "border-transparent bg-[var(--color-foreground)] text-[var(--color-background)]",
         outline:
-          "border-[var(--color-border-strong)] bg-transparent text-[var(--color-foreground)]"
+          "border-[var(--ui-control-border)] bg-transparent text-[var(--color-foreground)]"
       },
       tone: {
         neutral: "",

packages/ui/src/components/checkbox.variants.ts

@@ -3,7 +3,8 @@ import { getMotionRecipeClassNames } from "../lib/motion";
 
 export const checkboxVariants = cva(
   [
-    "inline-flex size-5 shrink-0 items-center justify-center rounded-[calc(var(--radius-sm)-4px)] border border-[var(--color-border-strong)] bg-[var(--color-card)] shadow-[var(--shadow-xs)] outline-none",
+    "inline-flex size-5 shrink-0 items-center justify-center rounded-[var(--ui-control-radius)] border bg-[var(--ui-control-bg)] shadow-[var(--ui-control-shadow)] outline-none",
+    "[border-width:var(--ui-input-border-width)] border-[var(--ui-control-border)]",
     "text-[var(--color-primary-foreground)] transition-[background-color,border-color,box-shadow,transform] duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
     "focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
     "data-[state=checked]:border-[var(--color-primary)] data-[state=checked]:bg-[var(--color-primary)]",

packages/ui/src/components/combobox.variants.ts

@@ -3,9 +3,10 @@ import { getMotionRecipeClassNames } from "../lib/motion";
 
 export const comboboxTriggerVariants = cva(
   [
-    "inline-flex h-11 w-full items-center justify-between gap-3 rounded-[var(--radius-md)] border border-[var(--color-input)] bg-[var(--color-card)] px-4 text-left text-sm text-[var(--color-foreground)] shadow-[var(--shadow-xs)] outline-none",
+    "inline-flex h-11 w-full items-center justify-between gap-3 rounded-[var(--ui-input-radius)] border bg-[var(--ui-input-bg)] px-4 text-left text-sm text-[var(--ui-input-fg)] shadow-[var(--ui-input-shadow)] outline-none",
+    "[border-width:var(--ui-input-border-width)] border-[var(--ui-input-border)] backdrop-blur-[var(--ui-input-backdrop-blur)]",
     "focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
-    "data-[placeholder]:text-[var(--color-muted-foreground)] data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--color-surface)] data-[disabled]:text-[var(--color-muted-foreground)] data-[disabled]:opacity-100",
+    "data-[placeholder]:text-[var(--color-muted-foreground)] data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--ui-input-disabled-bg)] data-[disabled]:text-[var(--color-muted-foreground)] data-[disabled]:opacity-100",
     "aria-[invalid=true]:border-[color-mix(in_oklch,var(--color-destructive)_42%,var(--color-border-strong))]",
     "aria-[invalid=true]:shadow-[0_0_0_1px_color-mix(in_oklch,var(--color-destructive)_28%,transparent)]",
     getMotionRecipeClassNames("ring")
@@ -13,12 +14,13 @@ export const comboboxTriggerVariants = cva(
 );
 
 export const comboboxContentVariants = cva([
-  "relative z-50 min-w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-card)] p-0 text-[var(--color-card-foreground)] shadow-[var(--shadow-md)] outline-none",
+  "relative z-50 min-w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-[var(--ui-panel-radius)] border border-[var(--ui-panel-border)] bg-[var(--ui-panel-bg)] p-0 text-[var(--color-card-foreground)] shadow-[var(--ui-panel-shadow)] outline-none",
+  "[border-width:var(--ui-panel-border-width)] backdrop-blur-[var(--ui-panel-backdrop-blur)]",
   "data-[state=open]:motion-enter-rise data-[state=closed]:motion-exit-drop"
 ]);
 
 export const comboboxSearchVariants = cva([
-  "h-11 w-full border-b border-[var(--color-border)] bg-transparent px-3.5 text-sm text-[var(--color-foreground)] outline-none",
+  "h-11 w-full border-b border-[var(--ui-panel-border)] bg-transparent px-3.5 text-sm text-[var(--color-foreground)] outline-none",
   "placeholder:text-[var(--color-muted-foreground)]"
 ]);
 
@@ -35,9 +37,9 @@ export const comboboxLabelVariants = cva([
 ]);
 
 export const comboboxItemVariants = cva([
-  "relative flex w-full cursor-default select-none items-start gap-3 rounded-[calc(var(--radius-sm)-4px)] px-3 py-2 text-left text-sm text-[var(--color-foreground)] outline-none",
+  "relative flex w-full cursor-default select-none items-start gap-3 rounded-[var(--ui-control-radius)] px-3 py-2 text-left text-sm text-[var(--color-foreground)] outline-none",
   "transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
-  "data-[active=true]:bg-[var(--color-surface)] data-[selected=true]:bg-[color-mix(in_oklch,var(--color-primary)_10%,var(--color-card))]",
+  "data-[active=true]:bg-[var(--ui-control-bg)] data-[selected=true]:bg-[color-mix(in_oklch,var(--color-primary)_10%,var(--ui-panel-bg))]",
   "data-[selected=true]:text-[var(--color-foreground)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45"
 ]);
 

packages/ui/src/components/command.variants.ts

@@ -2,8 +2,8 @@ import { cva } from "../lib/cva";
 import { getMotionRecipeClassNames } from "../lib/motion";
 
 export const commandVariants = cva([
-  "flex h-full w-full flex-col overflow-hidden rounded-[var(--radius-lg)] border border-[var(--color-border)]",
+  "flex h-full w-full flex-col overflow-hidden rounded-[var(--ui-panel-radius)] border border-[var(--ui-panel-border)]",
-  "bg-[var(--color-card)] text-[var(--color-card-foreground)] shadow-[var(--shadow-sm)]",
+  "bg-[var(--ui-panel-bg)] text-[var(--color-card-foreground)] shadow-[var(--ui-panel-shadow)] [border-width:var(--ui-panel-border-width)] backdrop-blur-[var(--ui-panel-backdrop-blur)]",
   getMotionRecipeClassNames("transition", "ring")
 ]);
 
@@ -13,7 +13,7 @@ export const commandDialogContentVariants = cva([
 ]);
 
 export const commandInputWrapperVariants = cva([
-  "flex items-center gap-3 border-b border-[var(--color-border)] px-4"
+  "flex items-center gap-3 border-b border-[var(--ui-panel-border)] px-4"
 ]);
 
 export const commandInputVariants = cva([
@@ -38,9 +38,9 @@ export const commandGroupVariants = cva([
 ]);
 
 export const commandItemVariants = cva([
-  "relative flex cursor-default select-none items-center gap-3 rounded-[calc(var(--radius-sm)-4px)] px-3 py-2 text-sm outline-none",
+  "relative flex cursor-default select-none items-center gap-3 rounded-[var(--ui-control-radius)] px-3 py-2 text-sm outline-none",
   "text-[var(--color-foreground)] transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
-  "data-[selected=true]:bg-[var(--color-surface)] data-[selected=true]:text-[var(--color-foreground)]",
+  "data-[selected=true]:bg-[var(--ui-control-bg)] data-[selected=true]:text-[var(--color-foreground)]",
   "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-45"
 ]);
 

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)]",
+    "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)]",
-    "bg-[var(--color-card)] shadow-[var(--shadow-sm)]",
     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)]",
+    "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(--color-border))]",
+    "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(--color-card))] px-4 py-3",
+    "bg-[color-mix(in_oklch,var(--color-primary)_7%,var(--ui-card-default-bg))] px-4 py-3",
-    "shadow-[var(--shadow-xs)]"
+    "shadow-[var(--ui-card-subtle-shadow)]"
   ]
 );
 

packages/ui/src/components/dropdown-menu.variants.ts

@@ -2,7 +2,8 @@ import { cva } from "../lib/cva";
 
 export const dropdownMenuContentVariants = cva(
   [
-    "z-50 min-w-[12rem] overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-card)] p-1.5 text-[var(--color-card-foreground)] shadow-[var(--shadow-md)] outline-none",
+    "z-50 min-w-[12rem] overflow-hidden rounded-[var(--ui-panel-radius)] border border-[var(--ui-panel-border)] bg-[var(--ui-panel-bg)] p-1.5 text-[var(--color-card-foreground)] shadow-[var(--ui-panel-shadow)] outline-none",
+    "[border-width:var(--ui-panel-border-width)] backdrop-blur-[var(--ui-panel-backdrop-blur)]",
     "data-[state=open]:motion-enter-rise data-[state=closed]:motion-exit-drop",
     "data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom"
   ],
@@ -22,9 +23,9 @@ export const dropdownMenuContentVariants = cva(
 
 export const dropdownMenuItemVariants = cva(
   [
-    "relative flex cursor-default select-none items-center gap-2 rounded-[calc(var(--radius-sm)-4px)] px-2.5 py-2 text-sm outline-none",
+    "relative flex cursor-default select-none items-center gap-2 rounded-[var(--ui-control-radius)] px-2.5 py-2 text-sm outline-none",
     "text-[var(--color-foreground)] transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
-    "focus:bg-[var(--color-surface)] focus:text-[var(--color-foreground)] data-[highlighted]:bg-[var(--color-surface)] data-[highlighted]:text-[var(--color-foreground)]",
+    "focus:bg-[var(--ui-control-bg)] focus:text-[var(--color-foreground)] data-[highlighted]:bg-[var(--ui-control-bg)] data-[highlighted]:text-[var(--color-foreground)]",
     "data-[disabled]:pointer-events-none data-[disabled]:opacity-45"
   ],
   {

packages/ui/src/components/empty-state.variants.ts

@@ -3,18 +3,18 @@ import { getMotionRecipeClassNames } from "../lib/motion";
 
 export const emptyStateVariants = cva(
   [
-    "grid gap-6 rounded-[var(--radius-lg)] border p-8 shadow-[var(--shadow-sm)] sm:p-10",
+    "grid gap-6 rounded-[var(--ui-card-radius)] border p-8 shadow-[var(--ui-card-default-shadow)] sm:p-10 [border-width:var(--ui-card-border-width)]",
     "justify-items-center text-center text-[var(--color-card-foreground)]",
     getMotionRecipeClassNames("transition", "ring")
   ],
   {
     variants: {
       tone: {
-        default: "border-[var(--color-border)] bg-[var(--color-card)]",
+        default: "border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)]",
         subtle:
-          "border-[color-mix(in_oklch,var(--color-border)_82%,transparent)] bg-[var(--color-surface)] shadow-[var(--shadow-xs)]",
+          "border-[var(--ui-card-subtle-border)] bg-[var(--ui-card-subtle-bg)] shadow-[var(--ui-card-subtle-shadow)]",
         accent:
-          "border-[color-mix(in_oklch,var(--color-primary)_24%,var(--color-border))] bg-[color-mix(in_oklch,var(--color-primary)_8%,var(--color-card))]"
+          "border-[var(--ui-card-accent-border)] bg-[var(--ui-card-accent-bg)] shadow-[var(--ui-card-accent-shadow)]"
       }
     },
     defaultVariants: {
@@ -25,9 +25,9 @@ export const emptyStateVariants = cva(
 
 export const emptyStateMediaVariants = cva(
   [
-    "grid min-h-20 min-w-20 place-items-center rounded-[var(--radius-lg)] border p-4",
+    "grid min-h-20 min-w-20 place-items-center rounded-[var(--ui-card-radius)] border p-4 [border-width:var(--ui-card-border-width)]",
-    "border-[color-mix(in_oklch,var(--color-border)_88%,transparent)] bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-background)_72%,white_28%),var(--color-surface))]",
+    "border-[var(--ui-card-subtle-border)] bg-[linear-gradient(180deg,color-mix(in_oklch,var(--color-background)_72%,white_28%),var(--ui-card-subtle-bg))]",
-    "text-[var(--color-foreground)] shadow-[var(--shadow-xs)]"
+    "text-[var(--color-foreground)] shadow-[var(--ui-card-subtle-shadow)]"
   ]
 );
 

packages/ui/src/components/popover.variants.ts

@@ -2,7 +2,8 @@ import { cva } from "../lib/cva";
 
 export const popoverContentVariants = cva(
   [
-    "z-50 rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-card)] p-4 text-[var(--color-card-foreground)] shadow-[var(--shadow-md)] outline-none",
+    "z-50 rounded-[var(--ui-panel-radius)] border border-[var(--ui-panel-border)] bg-[var(--ui-panel-bg)] p-4 text-[var(--color-card-foreground)] shadow-[var(--ui-panel-shadow)] outline-none",
+    "[border-width:var(--ui-panel-border-width)] backdrop-blur-[var(--ui-panel-backdrop-blur)]",
     "data-[state=open]:motion-enter-rise data-[state=closed]:motion-exit-drop",
     "data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom"
   ],

packages/ui/src/components/radio-group.variants.ts

@@ -15,7 +15,8 @@ export const radioGroupVariants = cva(["grid gap-3"], {
 
 export const radioGroupItemVariants = cva(
   [
-    "inline-flex size-5 shrink-0 items-center justify-center rounded-full border border-[var(--color-border-strong)] bg-[var(--color-card)] shadow-[var(--shadow-xs)] outline-none",
+    "inline-flex size-5 shrink-0 items-center justify-center rounded-[var(--ui-control-radius)] border bg-[var(--ui-control-bg)] shadow-[var(--ui-control-shadow)] outline-none",
+    "[border-width:var(--ui-input-border-width)] border-[var(--ui-control-border)]",
     "text-[var(--color-primary)] transition-[background-color,border-color,box-shadow,transform] duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
     "focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
     "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45",

packages/ui/src/components/select.variants.ts

@@ -3,10 +3,11 @@ import { getMotionRecipeClassNames } from "../lib/motion";
 
 export const selectTriggerVariants = cva(
   [
-    "inline-flex h-11 w-full items-center justify-between gap-3 rounded-[var(--radius-md)] border border-[var(--color-input)] bg-[var(--color-card)] px-4 text-left text-sm text-[var(--color-foreground)] shadow-[var(--shadow-xs)] outline-none",
+    "inline-flex h-11 w-full items-center justify-between gap-3 rounded-[var(--ui-input-radius)] border bg-[var(--ui-input-bg)] px-4 text-left text-sm text-[var(--ui-input-fg)] shadow-[var(--ui-input-shadow)] outline-none",
+    "[border-width:var(--ui-input-border-width)] border-[var(--ui-input-border)] backdrop-blur-[var(--ui-input-backdrop-blur)]",
     "placeholder:text-[var(--color-muted-foreground)]",
     "focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
-    "data-[placeholder]:text-[var(--color-muted-foreground)] data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--color-surface)] data-[disabled]:text-[var(--color-muted-foreground)] data-[disabled]:opacity-100",
+    "data-[placeholder]:text-[var(--color-muted-foreground)] data-[disabled]:cursor-not-allowed data-[disabled]:bg-[var(--ui-input-disabled-bg)] data-[disabled]:text-[var(--color-muted-foreground)] data-[disabled]:opacity-100",
     "aria-[invalid=true]:border-[color-mix(in_oklch,var(--color-destructive)_42%,var(--color-border-strong))]",
     "aria-[invalid=true]:shadow-[0_0_0_1px_color-mix(in_oklch,var(--color-destructive)_28%,transparent)]",
     getMotionRecipeClassNames("ring")
@@ -14,7 +15,8 @@ export const selectTriggerVariants = cva(
 );
 
 export const selectContentVariants = cva([
-  "relative z-50 min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-[var(--radius-md)] border border-[var(--color-border)] bg-[var(--color-card)] p-1.5 text-[var(--color-card-foreground)] shadow-[var(--shadow-md)] outline-none",
+  "relative z-50 min-w-[var(--radix-select-trigger-width)] overflow-hidden rounded-[var(--ui-panel-radius)] border border-[var(--ui-panel-border)] bg-[var(--ui-panel-bg)] p-1.5 text-[var(--color-card-foreground)] shadow-[var(--ui-panel-shadow)] outline-none",
+  "[border-width:var(--ui-panel-border-width)] backdrop-blur-[var(--ui-panel-backdrop-blur)]",
   "data-[state=open]:motion-enter-rise data-[state=closed]:motion-exit-drop"
 ]);
 
@@ -23,9 +25,9 @@ export const selectViewportVariants = cva([
 ]);
 
 export const selectItemVariants = cva([
-  "relative flex w-full cursor-default select-none items-center gap-2 rounded-[calc(var(--radius-sm)-4px)] px-8 py-2 text-sm text-[var(--color-foreground)] outline-none",
+  "relative flex w-full cursor-default select-none items-center gap-2 rounded-[var(--ui-control-radius)] px-8 py-2 text-sm text-[var(--color-foreground)] outline-none",
   "transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
-  "focus:bg-[var(--color-surface)] focus:text-[var(--color-foreground)] data-[highlighted]:bg-[var(--color-surface)] data-[highlighted]:text-[var(--color-foreground)]",
+  "focus:bg-[var(--ui-control-bg)] focus:text-[var(--color-foreground)] data-[highlighted]:bg-[var(--ui-control-bg)] data-[highlighted]:text-[var(--color-foreground)]",
   "data-[disabled]:pointer-events-none data-[disabled]:opacity-45"
 ]);
 

packages/ui/src/components/sheet.tsx

@@ -62,7 +62,7 @@ export const SheetContent = forwardRef<
         {children}
         <DialogPrimitive.Close
           aria-label="Close sheet"
-          className="absolute right-4 top-4 inline-flex size-9 items-center justify-center rounded-[var(--radius-full)] text-[var(--color-muted-foreground)] outline-none transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)] hover:bg-[var(--color-surface)] hover:text-[var(--color-foreground)] focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-card)]"
+          className="absolute right-4 top-4 inline-flex size-9 items-center justify-center rounded-[var(--ui-control-radius)] border border-transparent text-[var(--color-muted-foreground)] outline-none transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)] hover:border-[var(--ui-control-border)] hover:bg-[var(--ui-control-bg)] hover:text-[var(--color-foreground)] hover:shadow-[var(--ui-control-shadow)] focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-panel-bg)]"
         >
           <span aria-hidden="true" className="text-lg leading-none">
             ×

packages/ui/src/components/sheet.variants.ts

@@ -6,7 +6,8 @@ export const sheetOverlayVariants = dialogOverlayVariants;
 export const sheetContentVariants = cva(
   [
     "fixed z-50 grid gap-5 overflow-y-auto",
-    "border bg-[var(--color-card)] text-[var(--color-card-foreground)] shadow-[var(--shadow-md)] outline-none",
+    "border bg-[var(--ui-panel-bg)] text-[var(--color-card-foreground)] shadow-[var(--ui-panel-shadow)] outline-none",
+    "[border-width:var(--ui-panel-border-width)] border-[var(--ui-panel-border)] backdrop-blur-[var(--ui-panel-backdrop-blur)]",
     "px-5 py-6 sm:px-6",
     "transition-[transform,opacity,box-shadow] duration-[var(--dur-slow)] ease-[var(--ease-emphasized)]",
     "data-[state=open]:opacity-100 data-[state=closed]:opacity-0"
@@ -15,16 +16,16 @@ export const sheetContentVariants = cva(
     variants: {
       side: {
         right: [
-          "inset-y-0 right-0 h-full rounded-l-[var(--radius-lg)] border-l border-y-0 border-r-0",
+          "inset-y-0 right-0 h-full rounded-l-[var(--ui-panel-radius)] border-l border-y-0 border-r-0",
           "data-[state=open]:translate-x-0 data-[state=closed]:translate-x-full"
         ],
         left: [
-          "inset-y-0 left-0 h-full rounded-r-[var(--radius-lg)] border-r border-y-0 border-l-0",
+          "inset-y-0 left-0 h-full rounded-r-[var(--ui-panel-radius)] border-r border-y-0 border-l-0",
           "data-[state=open]:translate-x-0 data-[state=closed]:-translate-x-full"
         ],
         bottom: [
           "bottom-0 left-1/2 max-h-[min(85vh,42rem)] w-[min(calc(100vw-1rem),52rem)] -translate-x-1/2",
-          "rounded-t-[var(--radius-lg)] border-b-0",
+          "rounded-t-[var(--ui-panel-radius)] border-b-0",
           "data-[state=open]:translate-y-0 data-[state=closed]:translate-y-full"
         ]
       },

packages/ui/src/components/tabs.variants.ts

@@ -2,19 +2,19 @@ import { cva } from "../lib/cva";
 import { getMotionRecipeClassNames } from "../lib/motion";
 
 export const tabsListVariants = cva([
-  "inline-flex h-12 items-center gap-1 rounded-[var(--radius-full)] border border-[var(--color-border)] bg-[var(--color-surface)] p-1 shadow-[var(--shadow-xs)]"
+  "inline-flex h-12 items-center gap-1 rounded-[var(--ui-control-radius)] border border-[var(--ui-control-border)] bg-[var(--ui-control-bg)] p-1 shadow-[var(--ui-control-shadow)] [border-width:var(--ui-input-border-width)]"
 ]);
 
 export const tabsTriggerVariants = cva([
-  "inline-flex min-w-[7rem] items-center justify-center rounded-[var(--radius-full)] px-4 py-2.5 text-sm font-medium outline-none",
+  "inline-flex min-w-[7rem] items-center justify-center rounded-[var(--ui-control-radius)] px-4 py-2.5 text-sm font-medium outline-none",
   "text-[var(--color-muted-foreground)] transition-[color,background-color,box-shadow,transform] duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
   "focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
   "data-[disabled]:pointer-events-none data-[disabled]:opacity-45",
-  "data-[state=active]:bg-[var(--color-card)] data-[state=active]:text-[var(--color-foreground)] data-[state=active]:shadow-[var(--shadow-xs)]",
+  "data-[state=active]:bg-[var(--ui-panel-bg)] data-[state=active]:text-[var(--color-foreground)] data-[state=active]:shadow-[var(--ui-control-shadow)]",
   getMotionRecipeClassNames("ring")
 ]);
 
 export const tabsContentVariants = cva([
-  "mt-4 rounded-[var(--radius-lg)] border border-[var(--color-border)] bg-[var(--color-card)] p-6 text-[var(--color-card-foreground)] shadow-[var(--shadow-sm)] outline-none",
+  "mt-4 rounded-[var(--ui-card-radius)] border border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)] p-6 text-[var(--color-card-foreground)] shadow-[var(--ui-card-default-shadow)] outline-none [border-width:var(--ui-card-border-width)]",
   "data-[state=active]:motion-enter-rise"
 ]);

packages/ui/src/components/textarea.variants.ts

@@ -3,12 +3,13 @@ import { getMotionRecipeClassNames } from "../lib/motion";
 
 export const textareaVariants = cva(
   [
-    "flex min-h-[8.75rem] w-full min-w-0 resize-y rounded-[var(--radius-md)] border border-[var(--color-input)] bg-[var(--color-card)] px-4 py-3",
+    "flex min-h-[8.75rem] w-full min-w-0 resize-y rounded-[var(--ui-input-radius)] border bg-[var(--ui-input-bg)] px-4 py-3",
-    "text-[var(--color-foreground)] shadow-[var(--shadow-xs)] outline-none",
+    "text-[var(--ui-input-fg)] shadow-[var(--ui-input-shadow)] outline-none",
+    "[border-width:var(--ui-input-border-width)] border-[var(--ui-input-border)] backdrop-blur-[var(--ui-input-backdrop-blur)]",
     "placeholder:text-[var(--color-muted-foreground)]",
     "focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
-    "disabled:cursor-not-allowed disabled:bg-[var(--color-surface)] disabled:text-[var(--color-muted-foreground)] disabled:opacity-100",
+    "disabled:cursor-not-allowed disabled:bg-[var(--ui-input-disabled-bg)] disabled:text-[var(--color-muted-foreground)] disabled:opacity-100",
-    "read-only:bg-[var(--color-surface)] read-only:text-[var(--color-muted-foreground)]",
+    "read-only:bg-[var(--ui-input-readonly-bg)] read-only:text-[var(--color-muted-foreground)]",
     "aria-[invalid=true]:border-[color-mix(in_oklch,var(--color-destructive)_42%,var(--color-border-strong))]",
     "aria-[invalid=true]:shadow-[0_0_0_1px_color-mix(in_oklch,var(--color-destructive)_28%,transparent)]",
     getMotionRecipeClassNames("ring")

packages/ui/src/components/toast.variants.ts

@@ -7,8 +7,8 @@ export const toastViewportVariants = cva([
 
 export const toastVariants = cva(
   [
-    "group pointer-events-auto relative grid grid-cols-[1fr_auto] items-start gap-x-4 gap-y-2 overflow-hidden rounded-[var(--radius-lg)] border p-4 pr-12 shadow-[var(--shadow-md)]",
+    "group pointer-events-auto relative grid grid-cols-[1fr_auto] items-start gap-x-4 gap-y-2 overflow-hidden rounded-[var(--ui-panel-radius)] border p-4 pr-12 shadow-[var(--ui-panel-shadow)]",
-    "bg-[var(--color-card)] text-[var(--color-card-foreground)]",
+    "bg-[var(--ui-panel-bg)] text-[var(--color-card-foreground)] [border-width:var(--ui-panel-border-width)] backdrop-blur-[var(--ui-panel-backdrop-blur)]",
     "data-[state=open]:motion-enter-rise data-[state=closed]:motion-exit-drop",
     "data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none",
     "data-[swipe=cancel]:translate-x-0 data-[swipe=cancel]:transition-[transform] data-[swipe=cancel]:duration-[var(--dur-fast)]",
@@ -18,11 +18,11 @@ export const toastVariants = cva(
   {
     variants: {
       variant: {
-        default: "border-[var(--color-border)]",
+        default: "border-[var(--ui-panel-border)]",
         success:
-          "border-[color-mix(in_oklch,var(--color-success)_32%,var(--color-border))] bg-[color-mix(in_oklch,var(--color-success)_10%,var(--color-card))]",
+          "border-[color-mix(in_oklch,var(--color-success)_32%,var(--ui-panel-border))] bg-[color-mix(in_oklch,var(--color-success)_10%,var(--ui-panel-bg))]",
         destructive:
-          "border-[color-mix(in_oklch,var(--color-destructive)_38%,var(--color-border))] bg-[color-mix(in_oklch,var(--color-destructive)_10%,var(--color-card))]"
+          "border-[color-mix(in_oklch,var(--color-destructive)_38%,var(--ui-panel-border))] bg-[color-mix(in_oklch,var(--color-destructive)_10%,var(--ui-panel-bg))]"
       }
     },
     defaultVariants: {
@@ -32,11 +32,11 @@ export const toastVariants = cva(
 );
 
 export const toastActionVariants = cva([
-  "col-start-2 row-span-2 row-start-1 inline-flex h-9 shrink-0 items-center justify-center self-start rounded-[var(--radius-full)] border border-[var(--color-border-strong)] px-3 text-sm font-medium text-[var(--color-foreground)]",
+  "col-start-2 row-span-2 row-start-1 inline-flex h-9 shrink-0 items-center justify-center self-start rounded-[var(--ui-control-radius)] border border-[var(--ui-control-border)] px-3 text-sm font-medium text-[var(--color-foreground)] shadow-[var(--ui-control-shadow)] [border-width:var(--ui-input-border-width)]",
-  "transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)] hover:bg-[var(--color-surface)] focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-card)]"
+  "transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)] hover:bg-[var(--ui-control-bg)] focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-panel-bg)]"
 ]);
 
 export const toastCloseVariants = cva([
-  "absolute top-3 right-3 inline-flex size-8 items-center justify-center rounded-[var(--radius-full)] text-[var(--color-muted-foreground)] outline-none",
+  "absolute top-3 right-3 inline-flex size-8 items-center justify-center rounded-[var(--ui-control-radius)] text-[var(--color-muted-foreground)] outline-none",
-  "transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)] hover:bg-[var(--color-surface)] hover:text-[var(--color-foreground)] focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-card)]"
+  "transition-colors duration-[var(--dur-fast)] ease-[var(--ease-standard)] hover:bg-[var(--ui-control-bg)] hover:text-[var(--color-foreground)] focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--ui-panel-bg)]"
 ]);