Jake
aa1ba48e07
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.
36 lines
1.3 KiB
Svelte
36 lines
1.3 KiB
Svelte
<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="{toneClasses[tone as Tone]} {elevationClasses[elevation as Elevation]} rounded-2xl {classes}">
|
|
{@render children()}
|
|
</div>
|