svelte-kit-vice/web/routes/active/_components/Callout.svelte

<script lang="ts">
	import type { Snippet } from 'svelte';

	type Variant = 'info' | 'warn' | 'success' | 'tip' | 'danger';

	let {
		variant = 'info',
		title,
		children
	}: { variant?: Variant; title?: string; children: Snippet } = $props();

	const labels: Record<Variant, string> = {
		info: 'Note',
		warn: 'Caution',
		success: 'Good practice',
		tip: 'Tip',
		danger: 'Important'
	};
</script>

<div class="callout" data-variant={variant} role="note">
	<div class="icon" aria-hidden="true">
		{#if variant === 'info'}
			<svg viewBox="0 0 16 16" width="14" height="14">
				<circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.5" />
				<circle cx="8" cy="4.5" r="0.9" fill="currentColor" />
				<path d="M8 7v5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
			</svg>
		{:else if variant === 'warn' || variant === 'danger'}
			<svg viewBox="0 0 16 16" width="14" height="14">
				<path
					d="M8 1.5 1.5 13.5h13z"
					fill="none"
					stroke="currentColor"
					stroke-width="1.5"
					stroke-linejoin="round"
				/>
				<path d="M8 6v3.5" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" />
				<circle cx="8" cy="11.5" r="0.9" fill="currentColor" />
			</svg>
		{:else if variant === 'success'}
			<svg viewBox="0 0 16 16" width="14" height="14">
				<circle cx="8" cy="8" r="7" fill="none" stroke="currentColor" stroke-width="1.5" />
				<path
					d="m4.5 8.5 2.5 2.5 4.5-5.5"
					fill="none"
					stroke="currentColor"
					stroke-width="1.7"
					stroke-linecap="round"
					stroke-linejoin="round"
				/>
			</svg>
		{:else if variant === 'tip'}
			<svg viewBox="0 0 16 16" width="14" height="14">
				<path
					d="M5.5 11h5M6 13.5h4M8 1.5a4.5 4.5 0 0 1 2.5 8.3v.7h-5v-.7A4.5 4.5 0 0 1 8 1.5Z"
					fill="none"
					stroke="currentColor"
					stroke-width="1.5"
					stroke-linecap="round"
					stroke-linejoin="round"
				/>
			</svg>
		{/if}
	</div>
	<div class="content">
		<strong class="title">{title ?? labels[variant]}</strong>
		<div class="body">
			{@render children()}
		</div>
	</div>
</div>

<style>
	.callout {
		display: grid;
		grid-template-columns: 28px 1fr;
		gap: 0.65rem 0.85rem;
		margin: 1.5rem 0;
		padding: 0.95rem 1.1rem;
		border: 1px solid var(--c-border);
		border-radius: var(--r-lg);
		background: var(--c-bg-subtle);
	}

	.icon {
		grid-column: 1;
		grid-row: 1 / span 2;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 28px;
		height: 28px;
		border-radius: var(--r-md);
		background: var(--c-bg);
		color: currentColor;
	}

	.title {
		display: block;
		font-size: 0.875rem;
		font-weight: 650;
		letter-spacing: -0.005em;
		margin-bottom: 0.15rem;
	}

	.body :global(p) {
		font-size: 0.9rem;
		color: var(--c-fg-muted);
		margin: 0 0 0.5rem;
		line-height: 1.6;
	}

	.body :global(p:last-child) {
		margin-bottom: 0;
	}

	.body :global(ul),
	.body :global(ol) {
		font-size: 0.9rem;
		color: var(--c-fg-muted);
		margin: 0;
		padding-left: 1.25rem;
	}

	.body :global(code) {
		background: var(--c-bg-muted);
		border-color: var(--c-border);
	}

	.callout[data-variant='info'] {
		border-color: #bae6fd;
		background: linear-gradient(180deg, #f0f9ff, #f8fafc);
		color: #0369a1;
	}

	.callout[data-variant='warn'] {
		border-color: #fcd34d;
		background: linear-gradient(180deg, #fffbeb, #fefce8);
		color: #b45309;
	}

	.callout[data-variant='success'] {
		border-color: #bbf7d0;
		background: linear-gradient(180deg, #f0fdf4, #f7fee7);
		color: #166534;
	}

	.callout[data-variant='tip'] {
		border-color: #ddd6fe;
		background: linear-gradient(180deg, #f5f3ff, #faf5ff);
		color: #6d28d9;
	}

	.callout[data-variant='danger'] {
		border-color: var(--c-accent-subtle);
		background: linear-gradient(180deg, var(--c-accent-muted), #fff1f2);
		color: var(--c-accent-emphasized);
	}

	.callout[data-variant='info'] .icon {
		background: #e0f2fe;
	}
	.callout[data-variant='warn'] .icon {
		background: #fef3c7;
	}
	.callout[data-variant='success'] .icon {
		background: #dcfce7;
	}
	.callout[data-variant='tip'] .icon {
		background: #ede9fe;
	}
	.callout[data-variant='danger'] .icon {
		background: var(--c-accent-subtle);
	}

	:global([data-theme='dark']) .callout {
		background: var(--c-bg-subtle);
	}

	:global([data-theme='dark']) .callout[data-variant='info'] {
		border-color: #075985;
		background: linear-gradient(180deg, #082f49, #0c1a2b);
		color: #7dd3fc;
	}
	:global([data-theme='dark']) .callout[data-variant='info'] .icon {
		background: #0c4a6e;
	}

	:global([data-theme='dark']) .callout[data-variant='warn'] {
		border-color: #78350f;
		background: linear-gradient(180deg, #422006, #1c1408);
		color: #fbbf24;
	}
	:global([data-theme='dark']) .callout[data-variant='warn'] .icon {
		background: #78350f;
	}

	:global([data-theme='dark']) .callout[data-variant='success'] {
		border-color: #14532d;
		background: linear-gradient(180deg, #052e16, #0a1c10);
		color: #86efac;
	}
	:global([data-theme='dark']) .callout[data-variant='success'] .icon {
		background: #14532d;
	}

	:global([data-theme='dark']) .callout[data-variant='tip'] {
		border-color: #4c1d95;
		background: linear-gradient(180deg, #2e1065, #18102e);
		color: #c4b5fd;
	}
	:global([data-theme='dark']) .callout[data-variant='tip'] .icon {
		background: #4c1d95;
	}

	:global([data-theme='dark']) .callout[data-variant='danger'] {
		border-color: var(--c-accent-subtle);
		background: linear-gradient(180deg, var(--c-accent-muted), #1c0808);
		color: var(--c-accent-emphasized);
	}
	:global([data-theme='dark']) .callout[data-variant='danger'] .icon {
		background: var(--c-accent-subtle);
	}
</style>