All files / src/lib/components Card.svelte

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script lang="ts">
	import type { Snippet } from 'svelte';
	import type { HTMLAttributes } from 'svelte/elements';
 
	type Tone = 'default' | 'primary' | 'coral' | 'mint';
 
	interface Props extends HTMLAttributes<HTMLDivElement> {
		/** Soft accent background; defaults to neutral surface. */
		tone?: Tone;
		/**
		 * Caller-owned classes merged onto the wrapper. Lets routes attach
		 * their own modifiers (e.g. `card--narrow`) without `:global(.card)`
		 * piercing.
		 */
		class?: string;
		children: Snippet;
	}
 
	let { tone = 'default', children, class: className = '', ...rest }: Props = $props();
</script>
 
<div class="card card--{tone} {className}" {...rest}>
	{@render children()}
</div>
 
<style>
	.card {
		display: block;
		background: var(--surface);
		color: var(--ink);
		border: 1px solid var(--line);
		border-radius: var(--radius-lg);
		padding: var(--space-5);
	}
 
	.card--primary {
		background: var(--primary-soft);
		color: var(--on-primary-soft);
		border-color: transparent;
	}
 
	.card--coral {
		background: var(--coral-soft);
		color: var(--on-coral-soft);
		border-color: transparent;
	}
 
	.card--mint {
		background: var(--mint-soft);
		color: var(--on-mint-soft);
		border-color: transparent;
	}
</style>