feat(web): bootstrap cadence ui foundation

2026-03-20 11:22:42 +08:00
parent a7ef1e0154
commit ce9061ca54
35 changed files with 2945 additions and 7 deletions
@@ -0,0 +1,43 @@
+import { cva } from "../lib/cva";
+import { getMotionRecipeClassNames } from "../lib/motion";
+
+export const cardVariants = cva(
+  [
+    "rounded-[var(--radius-lg)] border text-[var(--color-card-foreground)]",
+    "bg-[var(--color-card)] shadow-[var(--shadow-sm)]",
+    getMotionRecipeClassNames("transition", "ring")
+  ],
+  {
+    variants: {
+      tone: {
+        default: "border-[var(--color-border)]",
+        subtle:
+          "border-[color-mix(in_oklch,var(--color-border)_86%,transparent)] bg-[var(--color-surface)] shadow-[var(--shadow-xs)]",
+        accent:
+          "border-[color-mix(in_oklch,var(--color-primary)_26%,var(--color-border))] bg-[color-mix(in_oklch,var(--color-primary)_8%,var(--color-card))]"
+      },
+      interactive: {
+        false: "",
+        true: "hover:-translate-y-[2px] hover:shadow-[var(--shadow-md)]"
+      }
+    },
+    defaultVariants: {
+      tone: "default",
+      interactive: false
+    }
+  }
+);
+
+export const cardHeaderVariants = cva("grid gap-2 p-6 pb-0");
+
+export const cardTitleVariants = cva(
+  "text-lg font-semibold tracking-[var(--tracking-tight)] text-[var(--color-foreground)]"
+);
+
+export const cardDescriptionVariants = cva(
+  "text-sm leading-6 text-[var(--color-muted-foreground)]"
+);
+
+export const cardContentVariants = cva("p-6");
+
+export const cardFooterVariants = cva("flex flex-wrap items-center gap-3 p-6 pt-0");