Extend skin-aware styles across the component library
This commit is contained in:
@@ -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: "",
|
||||
|
||||
Reference in New Issue
Block a user