All files / src/lib/components Button.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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<script lang="ts">
	import type { Snippet } from 'svelte';
	import type { HTMLButtonAttributes } from 'svelte/elements';
 
	// Coastal v2 button vocabulary — direction spec:
	// design/coastal-v2/project/directions/coastal-v2.jsx (XBtn, lines 130-146).
	// Five kinds (primary / secondary / ghost / accent / ink) × three sizes.
	// `primary` + `md` stay the defaults so existing call-sites are unchanged.
	type Variant = 'primary' | 'secondary' | 'ghost' | 'accent' | 'ink';
	type Size = 'sm' | 'md' | 'lg';
 
	interface Props extends HTMLButtonAttributes {
		variant?: Variant;
		size?: Size;
		children: Snippet;
	}
 
	let { variant = 'primary', size = 'md', children, class: className, ...rest }: Props = $props();
</script>
 
<button class="btn btn--{variant} btn--{size} {className ?? ''}" {...rest}>
	{@render children()}
</button>
 
<style>
	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-2);
		font-family: var(--font-sans);
		font-weight: 500;
		letter-spacing: -0.005em;
		border-radius: var(--radius-md);
		border: 1px solid transparent;
		cursor: pointer;
		text-align: center;
		min-height: 44px; /* tap target floor */
	}
 
	.btn:disabled {
		opacity: 0.55;
		cursor: not-allowed;
	}
 
	.btn--sm {
		padding: 8px 14px;
		font-size: 13px;
		min-height: 36px;
	}
 
	.btn--md {
		padding: 11px 18px;
		font-size: 14px;
	}
 
	.btn--lg {
		padding: 14px 24px;
		font-size: 16px;
	}
 
	.btn--primary {
		background: var(--primary);
		color: #fff;
		border-color: var(--primary);
	}
 
	.btn--primary:not(:disabled):hover {
		background: var(--primary-hover);
		border-color: var(--primary-hover);
	}
 
	.btn--secondary {
		background: var(--surface);
		color: var(--ink);
		border-color: var(--line);
	}
 
	.btn--secondary:not(:disabled):hover {
		background: var(--surface-alt);
	}
 
	/* Ghost — chromeless until hover; for tertiary / inline actions. */
	.btn--ghost {
		background: transparent;
		color: var(--ink-soft);
		border-color: transparent;
	}
 
	.btn--ghost:not(:disabled):hover {
		background: var(--surface-alt);
		color: var(--ink);
	}
 
	/* Accent — honey; for warm, celebratory moments. Used sparingly. */
	.btn--accent {
		background: var(--accent);
		color: var(--ink);
		border-color: var(--accent);
	}
 
	.btn--accent:not(:disabled):hover {
		filter: brightness(0.96);
	}
 
	/* Ink — high-contrast dark fill; the single strongest CTA on a surface. */
	.btn--ink {
		background: var(--ink);
		color: var(--surface);
		border-color: var(--ink);
	}
 
	.btn--ink:not(:disabled):hover {
		filter: brightness(1.15);
	}
</style>