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
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)]"
]
);