From aa1ba48e078ab8ec29d847d15976580677695326 Mon Sep 17 00:00:00 2001
From: Jake <jake@corbel.consulting>
Date: Thu, 7 May 2026 10:09:14 +0100
Subject: [PATCH] feat(card): add tone (subtle, danger) and elevation (raised)
 variant props

Both props default to current behaviour, so all existing call sites render
unchanged. Subtle uses bg-bg-elevated for quieter empty-state contexts;
danger uses bg-danger/5 + border-danger/30 for calm caution panels (not
red-alert loud, matching brand). Raised layers shadow-md on top of the
existing low-contrast shadow for floating or detached surfaces.
---
 src/lib/components/Card.svelte | 34 +++++++++++++++++++++++++++++++---
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Card.svelte b/src/lib/components/Card.svelte
index 0468ba5..7053e2a 100644
--- a/src/lib/components/Card.svelte
+++ b/src/lib/components/Card.svelte
@@ -1,7 +1,35 @@
-<script>
-  let { children, classes = "" } = $props();
+<script lang="ts">
+  // Card variants:
+  //   tone      — visual register of the surface (default | subtle | danger)
+  //   elevation — depth cue via shadow (flat | raised)
+  // Both default to the historical card look so existing call sites render
+  // identically without passing the new props. Brand keeps shadows quiet
+  // and the danger tint deliberately calm, never red-alert loud.
+  type Tone = "default" | "subtle" | "danger";
+  type Elevation = "flat" | "raised";
+
+  let {
+    children,
+    classes = "",
+    tone = "default" as Tone,
+    elevation = "flat" as Elevation,
+  } = $props();
+
+  const toneClasses: Record<Tone, string> = {
+    default: "bg-bg-card border border-border-subtle",
+    subtle: "bg-bg-elevated border border-border-subtle/60",
+    danger: "bg-danger/5 border border-danger/30",
+  };
+
+  // flat preserves the historical low-contrast shadow (matches --shadow-sm).
+  // raised layers on Tailwind's shadow-md, the closest stock match to the
+  // existing token style used by other raised surfaces in the app.
+  const elevationClasses: Record<Elevation, string> = {
+    flat: "shadow-[0_1px_3px_rgba(0,0,0,0.2)]",
+    raised: "shadow-[0_1px_3px_rgba(0,0,0,0.2)] shadow-md",
+  };
 </script>
 
-<div class="bg-bg-card border border-border-subtle rounded-2xl shadow-[0_1px_3px_rgba(0,0,0,0.2)] {classes}">
+<div class="{toneClasses[tone as Tone]} {elevationClasses[elevation as Elevation]} rounded-2xl {classes}">
   {@render children()}
 </div>