feat: card styles

package.json

@@ -5,6 +5,7 @@
 	"scripts": {
 		"start": "npm run start:dev",
 		"start:dev": "vite dev",
+		"watch": "vite build --watch",
 		"build": "vite build && npm run package",
 		"preview": "vite preview",
 		"package": "npm run sync && svelte-package && publint",

src/docs/examples/ButtonExamples.svelte

@@ -17,7 +17,7 @@
 			<CardTitle>Shapes</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex gap-1">
+			<div class="flex flex-wrap gap-1">
 				{#each shapes as shape}
 					<Button {shape} class="capitalize">{shape}</Button>
 				{/each}
@@ -30,7 +30,7 @@
 			<CardTitle>Colors</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex gap-1">
+			<div class="flex flex-wrap gap-1">
 				{#each colors as color}
 					<Button {color} class="capitalize">{color}</Button>
 				{/each}
@@ -43,7 +43,7 @@
 			<CardTitle>Outline</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex gap-1">
+			<div class="flex flex-wrap gap-1">
 				{#each colors as color}
 					<Button variant="outline" {color}>Button</Button>
 				{/each}
@@ -56,7 +56,7 @@
 			<CardTitle>Ghost</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex gap-1">
+			<div class="flex flex-wrap gap-1">
 				{#each colors as color}
 					<Button variant="ghost" {color}>Button</Button>
 				{/each}
@@ -69,7 +69,7 @@
 			<CardTitle>Hero</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex gap-1">
+			<div class="flex flex-wrap gap-1">
 				{#each colors as color}
 					<Button variant="hero" {color}>Button</Button>
 				{/each}
@@ -82,7 +82,7 @@
 			<CardTitle>Disabled</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex gap-1">
+			<div class="flex flex-wrap gap-1">
 				{#each colors as color}
 					<Button {color} disabled>Button</Button>
 				{/each}
@@ -95,7 +95,7 @@
 			<CardTitle>Sizes</CardTitle>
 		</CardHeader>
 		<CardBody>
-			<div class="flex gap-1">
+			<div class="flex flex-wrap gap-1">
 				{#each sizes as size}
 					<div>
 						<Button {size} class="capitalize">{size}</Button>

src/lib/components/Card.svelte

@@ -10,7 +10,10 @@
 
 <div
 	bind:this={ref}
-	class={cleanClass('rounded-lg border bg-light text-dark shadow-lg', className)}
+	class={cleanClass(
+		'rounded-lg border border-gray-300 bg-light text-dark shadow-lg dark:border-gray-600',
+		className,
+	)}
 	{...restProps}
 >
 	{@render children?.()}

src/lib/components/Icon.svelte

@@ -29,7 +29,7 @@
 		spin = false,
 		role = 'img',
 		ariaLabelledby,
-		strokeColor = 'currentColor',
+		strokeColor = 'transparent',
 		strokeWidth = 2,
 		ariaLabel = '',
 		ariaHidden = false,

src/routes/+page.svelte

@@ -2,16 +2,16 @@
 	import { routes } from '$docs/routes.js';
 </script>
 
-<section class="m-4 h-screen overflow-y-scroll p-4">
-	<h1 class="text-4xl">@immich/ui</h1>
+<main>
+	<nav class="border-b border-gray-300 px-8 py-4">
+		<h1 class="text-4xl">@immich/ui</h1>
+	</nav>
 
-	<hr class="my-4" />
-
-	<div class="flex flex-col gap-2">
+	<div class="flex flex-col gap-2 px-8 py-4">
 		{#each routes as route}
 			<a href={route.link}>
 				<h3 class="text-xl underline">{route.name}</h3>
 			</a>
 		{/each}
 	</div>
-</section>
+</main>

src/routes/examples/[component]/+page.svelte

@@ -1,29 +1,53 @@
 <script lang="ts">
 	import { routes } from '$docs/routes.js';
+	import { Button, Icon } from '$lib/index.js';
+	import { mdiCompare } from '@mdi/js';
 
 	const { data } = $props();
 	const route = $derived(routes.find((route) => route.link === data.link));
+	let currentTheme = $state('both');
+	const currentThemes = $derived(currentTheme === 'both' ? ['light', 'dark'] : [currentTheme]);
+	const themes = ['both', 'light', 'dark'];
+
+	const handleClick = () => {
+		const currentIndex = themes.indexOf(currentTheme);
+		currentTheme = themes[(currentIndex + 1) % themes.length];
+	};
 </script>
 
-<div class="flex min-h-screen flex-col gap-4 bg-gray-200 p-8">
+<div class="flex min-h-screen flex-col overflow-y-auto">
 	<!-- TODO replace with breadcrumb component -->
-	<div class="flex gap-1 rounded-lg bg-light p-2 text-dark">
-		<a href="/" class="flex gap-2 underline">Home</a>
-		<span>></span>
-		<!-- <span>Components</span> -->
-		<!-- <span>></span> -->
-		<span class="capitalize">{data.component}</span>
-	</div>
+	<nav class="flex items-center justify-between gap-2 border-b border-gray-300 px-8 py-2">
+		<a href="/" class="flex gap-2 text-4xl">
+			<h1 class="text-2xl">@immich/ui</h1>
+		</a>
+		<div>
+			<button onclick={handleClick}>
+				<Icon path={mdiCompare} size="24" class="cursor" />
+			</button>
+		</div>
+	</nav>
+
+	<nav class="flex justify-between border-b border-gray-300 px-8 py-2">
+		<div class="flex items-center gap-2">
+			<a href="/" class="underline">Home</a>
+			<span>/</span>
+			<span class="capitalize">{data.component}</span>
+		</div>
+	</nav>
 
-	<div class="flex gap-2">
-		{#if route}
-			{#each ['light', 'dark'] as theme}
-				<div class="flex w-1/2 flex-col {theme} gap-2">
+	{#if route}
+		<div class="grid grow grid-cols-1 {currentThemes.length === 2 ? 'md:grid-cols-2' : ''}">
+			{#each currentThemes as theme}
+				<div class="flex flex-col gap-4 {theme} h-full bg-light p-8">
+					<h2 class="text-2xl capitalize text-dark">{theme}</h2>
 					<route.component></route.component>
 				</div>
 			{/each}
-		{:else}
+		</div>
+	{:else}
+		<div class="p-8">
 			<h2 class="text-xl">No examples found for {data.component}</h2>
-		{/if}
-	</div>
+		</div>
+	{/if}
 </div>

tailwind.config.ts

@@ -2,7 +2,7 @@ import type { Config } from 'tailwindcss';
 
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
-
+	darkMode: 'class',
 	theme: {
 		extend: {
 			colors: {