dark mode styles

Author: Rich Harris

content/tutorial/02-sveltekit/04-forms/01-the-form-element/app-a/src/routes/remove.svg

@@ -56,21 +56,6 @@
 		flex: 1;
 	}
 
-	button {
-		border: none;
-		background: url(./remove.svg) no-repeat 50% 50%;
-		background-size: 1rem 1rem;
-		cursor: pointer;
-		height: 100%;
-		aspect-ratio: 1;
-		opacity: 0.5;
-		transition: opacity 0.2s;
-	}
-
-	button:hover {
-		opacity: 1;
-	}
-
 	.saving {
 		opacity: 0.5;
 	}

content/tutorial/02-sveltekit/04-forms/04-progressive-enhancement/app-b/src/routes/+page.svelte

@@ -16,15 +16,16 @@ Open `TodoList.svelte`. First, import the `send` and `receive` transitions from
 	+++import { send, receive } from './transition.js';+++
 
 	export let store;
-	export let filter;
+	export let done;
 </script>
 ```
 
-Then, add them to the `<label>` element, using the `todo.id` property as a key to match the elements:
+Then, add them to the `<li>` element, using the `todo.id` property as a key to match the elements:
 
 ```svelte
 /// file: TodoList.svelte
-<label
+<li
+	class:done
 	+++in:receive={{ key: todo.id }}+++
 	+++out:send={{ key: todo.id }}+++
 >

content/tutorial/03-advanced-svelte/02-transitions/09-deferred-transitions/README.md

@@ -25,12 +25,12 @@
 
 	<div class="todo">
 		<h2>todo</h2>
-		<TodoList store={todos} filter={(t) => !t.done} />
+		<TodoList store={todos} done={false} />
 	</div>
 
 	<div class="done">
 		<h2>done</h2>
-		<TodoList store={todos} filter={(t) => t.done} />
+		<TodoList store={todos} done={true} />
 	</div>
 </div>
 

content/tutorial/03-advanced-svelte/02-transitions/09-deferred-transitions/app-a/src/lib/App.svelte

@@ -1,61 +1,44 @@
 <script>
 	export let store;
-	export let filter;
+	export let done;
 </script>
 
-{#each $store.filter(filter) as todo (todo.id)}
-	<label>
-		<input
-			type="checkbox"
-			checked={todo.done}
-			on:change={(e) => store.mark(todo, e.currentTarget.checked)}
-		/>
-
-		<span>{todo.description}</span>
-
-		<button on:click={() => store.remove(todo)} aria-label="Remove" />
-	</label>
-{/each}
+<ul class="todos">
+	{#each $store.filter((todo) => todo.done === done) as todo (todo.id)}
+		<li
+			class:done
+		>
+			<label>
+				<input
+					type="checkbox"
+					checked={todo.done}
+					on:change={(e) => store.mark(todo, e.currentTarget.checked)}
+				/>
+
+				<span>{todo.description}</span>
+
+				<button on:click={() => store.remove(todo)} aria-label="Remove" />
+			</label>
+		</li>
+	{/each}
+</ul>
 
 <style>
 	label {
-		position: relative;
+		width: 100%;
+		height: 100%;
 		display: flex;
-		align-items: center;
-		padding: 0.6em;
-		margin: 0 0 0.5em 0;
-		gap: 0.5em;
-		border-radius: 5px;
-		user-select: none;
-		background: white;
-		color: var(--label);
-		filter: var(--filter);
+	}
+
+	.done {
+		opacity: 0.5;
 	}
 
 	span {
 		flex: 1;
 	}
 
 	button {
-		width: 2em;
-		height: 2em;
-		border: none;
-		background: url(./remove.svg) no-repeat 50% 50%;
-		background-size: 75%;
-		opacity: 0;
-		transition: opacity 0.2s;
-		cursor: pointer;
-	}
-
-	label:hover {
-		background: #fafafa;
-	}
-
-	label:hover button {
-		opacity: 0.2;
-	}
-
-	label:hover button:hover {
-		opacity: 0.5;
+		background-image: url(./remove.svg);
 	}
 </style>

content/tutorial/03-advanced-svelte/02-transitions/09-deferred-transitions/app-a/src/lib/TodoList.svelte

@@ -2,65 +2,47 @@
 	import { send, receive } from './transition.js';
 
 	export let store;
-	export let filter;
+	export let done;
 </script>
 
-{#each $store.filter(filter) as todo (todo.id)}
-	<label
-		in:receive={{ key: todo.id }}
-		out:send={{ key: todo.id }}
-	>
-		<input
-			type="checkbox"
-			checked={todo.done}
-			on:change={(e) => store.mark(todo, e.currentTarget.checked)}
-		/>
-
-		<span>{todo.description}</span>
-
-		<button on:click={() => store.remove(todo)} aria-label="Remove" />
-	</label>
-{/each}
+<ul class="todos">
+	{#each $store.filter((todo) => todo.done === done) as todo (todo.id)}
+		<li
+			class:done
+			in:receive={{ key: todo.id }}
+			out:send={{ key: todo.id }}
+		>
+			<label>
+				<input
+					type="checkbox"
+					checked={todo.done}
+					on:change={(e) => store.mark(todo, e.currentTarget.checked)}
+				/>
+
+				<span>{todo.description}</span>
+
+				<button on:click={() => store.remove(todo)} aria-label="Remove" />
+			</label>
+		</li>
+	{/each}
+</ul>
 
 <style>
 	label {
-		position: relative;
+		width: 100%;
+		height: 100%;
 		display: flex;
-		align-items: center;
-		padding: 0.6em;
-		margin: 0 0 0.5em 0;
-		gap: 0.5em;
-		border-radius: 5px;
-		user-select: none;
-		background: white;
-		color: var(--label);
-		filter: var(--filter);
+	}
+
+	.done {
+		opacity: 0.5;
 	}
 
 	span {
 		flex: 1;
 	}
 
 	button {
-		width: 2em;
-		height: 2em;
-		border: none;
-		background: url(./remove.svg) no-repeat 50% 50%;
-		background-size: 75%;
-		opacity: 0;
-		transition: opacity 0.2s;
-		cursor: pointer;
-	}
-
-	label:hover {
-		background: #fafafa;
-	}
-
-	label:hover button {
-		opacity: 0.2;
-	}
-
-	label:hover button:hover {
-		opacity: 0.5;
+		background-image: url(./remove.svg);
 	}
 </style>

content/tutorial/03-advanced-svelte/02-transitions/09-deferred-transitions/app-a/src/lib/remove.svg

@@ -15,15 +15,16 @@ First, import the `flip` function — flip stands for ['First, Last, Invert, Pla
 	import { send, receive } from './transition.js';
 
 	export let store;
-	export let filter;
+	export let done;
 </script>
 ```
 
-Then add it to the `<label>` elements:
+Then add it to the `<li>` elements:
 
 ```svelte
 /// file: TodoList.svelte
-<label
+<li
+	class:done
 	in:receive={{ key: todo.id }}
 	out:send={{ key: todo.id }}
 	+++animate:flip+++
@@ -34,7 +35,8 @@ The movement is a little slow in this case, so we can add a `duration` parameter
 
 ```svelte
 /// file: TodoList.svelte
-<label
+<li
+	class:done
 	in:receive={{ key: todo.id }}
 	out:send={{ key: todo.id }}
 	animate:flip+++={{ duration: 200 }}+++

content/tutorial/03-advanced-svelte/02-transitions/09-deferred-transitions/app-b/src/lib/TodoList.svelte

@@ -3,66 +3,48 @@
 	import { send, receive } from './transition.js';
 
 	export let store;
-	export let filter;
+	export let done;
 </script>
 
-{#each $store.filter(filter) as todo (todo.id)}
-	<label
-		in:receive={{ key: todo.id }}
-		out:send={{ key: todo.id }}
-		animate:flip={{ duration: 200 }}
-	>
-		<input
-			type="checkbox"
-			checked={todo.done}
-			on:change={(e) => store.mark(todo, e.currentTarget.checked)}
-		/>
-
-		<span>{todo.description}</span>
-
-		<button on:click={() => store.remove(todo)} aria-label="Remove" />
-	</label>
-{/each}
+<ul class="todos">
+	{#each $store.filter((todo) => todo.done === done) as todo (todo.id)}
+		<li
+			class:done
+			in:receive={{ key: todo.id }}
+			out:send={{ key: todo.id }}
+			animate:flip={{ duration: 200 }}
+		>
+			<label>
+				<input
+					type="checkbox"
+					checked={todo.done}
+					on:change={(e) => store.mark(todo, e.currentTarget.checked)}
+				/>
+
+				<span>{todo.description}</span>
+
+				<button on:click={() => store.remove(todo)} aria-label="Remove" />
+			</label>
+		</li>
+	{/each}
+</ul>
 
 <style>
 	label {
-		position: relative;
+		width: 100%;
+		height: 100%;
 		display: flex;
-		align-items: center;
-		padding: 0.6em;
-		margin: 0 0 0.5em 0;
-		gap: 0.5em;
-		border-radius: 5px;
-		user-select: none;
-		background: white;
-		color: var(--label);
-		filter: var(--filter);
+	}
+
+	.done {
+		opacity: 0.5;
 	}
 
 	span {
 		flex: 1;
 	}
 
 	button {
-		width: 2em;
-		height: 2em;
-		border: none;
-		background: url(./remove.svg) no-repeat 50% 50%;
-		background-size: 75%;
-		opacity: 0;
-		transition: opacity 0.2s;
-		cursor: pointer;
-	}
-
-	label:hover {
-		background: #fafafa;
-	}
-
-	label:hover button {
-		opacity: 0.2;
-	}
-
-	label:hover button:hover {
-		opacity: 0.5;
+		background-image: url(./remove.svg);
 	}
 </style>