kurihada/cadence-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extend skin-aware styles across the component library

Browse Source
This commit is contained in:
kurihada
2026-03-20 11:39:11 +08:00
parent 84c185a8d7
commit 1958fd3686
18 changed files with 89 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/rfcs/multi-style-architecture.md
+5 -4
View File
@@ -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
broader component library.
The next implementation task should be Phase 5: improve packaging and consumer
ergonomics for style consumption.
packages/ui/src/components/alert.variants.ts
+5 -5
View File
@@ -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
+6 -6
View File
@@ -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)]",
"bg-[var(--color-card)] text-[var(--color-foreground)]",
"relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden border shadow-[var(--ui-control-shadow)]",
"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)]",
subtle: "border-[var(--color-border)] bg-[var(--color-surface)]",
default: "border-[var(--ui-control-border)] bg-[var(--ui-control-bg)]",
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 -3
View File
@@ -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
+2 -1
View File
@@ -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
+8 -6
View File
@@ -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
+5 -5
View File
@@ -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)]",
"bg-[var(--color-card)] text-[var(--color-card-foreground)] shadow-[var(--shadow-sm)]",
"flex h-full w-full flex-col overflow-hidden rounded-[var(--ui-panel-radius)] border border-[var(--ui-panel-border)]",
"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 -10
View File
@@ -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)]"
]
);
packages/ui/src/components/dropdown-menu.variants.ts
+4 -3
View File
@@ -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
+7 -7
View File
@@ -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",
"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))]",
"text-[var(--color-foreground)] shadow-[var(--shadow-xs)]"
"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-[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(--ui-card-subtle-shadow)]"
]
);
packages/ui/src/components/popover.variants.ts
+2 -1
View File
@@ -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
+2 -1
View File
@@ -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
+7 -5
View File
@@ -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
+1 -1
View File
@@ -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
+5 -4
View File
@@ -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
+4 -4
View File
@@ -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
+5 -4
View File
@@ -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",
"text-[var(--color-foreground)] shadow-[var(--shadow-xs)] outline-none",
"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(--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",
"read-only:bg-[var(--color-surface)] read-only:text-[var(--color-muted-foreground)]",
"disabled:cursor-not-allowed disabled:bg-[var(--ui-input-disabled-bg)] disabled:text-[var(--color-muted-foreground)] disabled:opacity-100",
"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
+9 -9
View File
@@ -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)]",
"bg-[var(--color-card)] text-[var(--color-card-foreground)]",
"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(--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)]",
"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)]"
"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(--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",
"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)]"
"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(--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)]"
]);