fix: update button component styles

web/src/lib/components/kit/Button.svelte

@@ -1,69 +0,0 @@
-<script lang="ts">
-	import type { Component, Snippet } from "svelte";
-	import Icon from "./Icon.svelte";
-
-	interface Props {
-		children: Snippet;
-		onclick?: () => void;
-		type?: "button" | "submit";
-		variant?: "primary" | "ghost" | "accent" | "danger";
-		icon?: Component<{ size?: number; class?: string }>;
-		disabled?: boolean;
-	}
-	let {
-		children,
-		onclick,
-		type = "button",
-		variant = "primary",
-		icon,
-		disabled = false,
-	}: Props = $props();
-</script>
-
-<button
-	{type}
-	class="btn btn--{variant}"
-	{disabled}
-	onclick={() => onclick?.()}
->
-	{#if icon}<Icon {icon} size={14} />{/if}
-	<span class="btn-label">{@render children()}</span>
-</button>
-
-<style>
-	.btn {
-		display: inline-flex;
-		align-items: center;
-		gap: 0.4rem;
-		padding: 0.4rem 0.8rem;
-		border: 1px solid var(--line);
-		border-radius: var(--radius);
-		background: transparent;
-		color: var(--foreground);
-		font: inherit;
-		font-size: 0.85rem;
-		cursor: pointer;
-	}
-	.btn--primary {
-		background: var(--blue);
-		color: #fff;
-		border-color: var(--blue);
-	}
-	.btn--ghost:hover:not(:disabled) {
-		border-color: var(--blue);
-	}
-	.btn--accent {
-		background: var(--cyan);
-		color: #042;
-		border-color: var(--cyan);
-	}
-	.btn--danger {
-		background: var(--danger);
-		color: #fff;
-		border-color: var(--danger);
-	}
-	.btn:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-</style>

web/src/lib/components/kit/PreviewTile.svelte

@@ -4,11 +4,11 @@
 	interface Props {
 		label: string;
 		caption: string;
-		active: boolean;
+		active?: boolean;
 		children: Snippet;
 	}
 
-	let { label, caption, active, children }: Props = $props();
+	let { label, caption, active = false, children }: Props = $props();
 </script>
 
 <div class="preview-tile" class:active>

web/src/lib/components/kit/ui/Button.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import type { Component, Snippet } from "svelte";
+	import Icon from "../Icon.svelte";
+
+	const ButtonVariantDefine = {
+		PRIMARY: "primary",
+		OUTLINE: "outline",
+		ACCENT: "accent",
+		DANGER: "danger",
+	} as const;
+
+	type ButtonVariant =
+		(typeof ButtonVariantDefine)[keyof typeof ButtonVariantDefine];
+
+	interface Props {
+		children: Snippet;
+		onclick?: () => void;
+		variant?: ButtonVariant;
+		icon?: Component<{ size?: number; class?: string }>;
+		disabled?: boolean;
+	}
+	let {
+		children,
+		onclick,
+		variant = ButtonVariantDefine.PRIMARY,
+		icon,
+		disabled = false,
+	}: Props = $props();
+</script>
+
+<button class="btn btn--{variant}" {disabled} onclick={() => onclick?.()}>
+	{#if icon}<Icon {icon} size={14} />{/if}
+	<span class="btn-label">{@render children()}</span>
+</button>
+
+<style>
+	.btn {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-m);
+		padding: var(--space-m) var(--space-xl);
+		border-color: var(--color-main);
+		border-width: var(--size-border-thick);
+		border-radius: var(--radius-s);
+		font-size: var(--font-button);
+		font-weight: bold;
+		cursor: pointer;
+		background: var(--color-main);
+		color: var(--color-background);
+	}
+
+	.btn--outline {
+		background: transparent;
+		color: var(--color-main-tint);
+		border-color: var(--color-main-tint);
+	}
+
+	.btn--accent {
+		background: var(--color-accent);
+		color: var(--color-background);
+		border-color: var(--color-accent);
+	}
+
+	.btn--danger {
+		background: var(--color-danger);
+		color: var(--color-background);
+		border-color: var(--color-danger);
+	}
+
+	.btn:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+</style>