sveltejs · rafaelcamaram · Apr 13, 2021 · Apr 13, 2021 · Apr 13, 2021
diff --git a/.changeset/itchy-beers-burn.md b/.changeset/itchy-beers-burn.md
@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Adding new Hello World templates (default with enhanced style and skeleton) to create-svelte
diff --git a/packages/create-svelte/cli/index.js b/packages/create-svelte/cli/index.js
@@ -37,6 +37,15 @@ async function main() {
 	}
 
 	const options = /** @type {import('./types').Options} */ (await prompts([
+		{
+			type: 'select',
+			name: 'template',
+			message: 'Which app Svelte template?',
+			choices: [
+				{ title: 'Default App (Counter + Route)', value: 'default' },
+				{ title: 'Skeleton App', value: 'skeleton' }
+			]
+		},
 		{
 			type: 'confirm',
 			name: 'typescript',
@@ -59,7 +68,7 @@ async function main() {
 
 	const name = path.basename(path.resolve(cwd));
 
-	write_template_files(`default-${options.typescript ? 'ts' : 'js'}`, name, cwd);
+	write_template_files(`${options.template}-${options.typescript ? 'ts' : 'js'}`, name, cwd);
 	write_common_files(cwd, options);
 
 	console.log(bold(green('✔ Copied project files')));

diff --git a/packages/create-svelte/cli/types.d.ts b/packages/create-svelte/cli/types.d.ts
@@ -1,4 +1,5 @@
 export type Options = {
+	template: 'default' | 'skeleton';
 	typescript: boolean;
 	prettier: boolean;
 	eslint: boolean;

diff --git a/packages/create-svelte/templates/default/src/app.css b/packages/create-svelte/templates/default/src/app.css
@@ -1,4 +1,79 @@
 :root {
-	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
-		'Open Sans', 'Helvetica Neue', sans-serif;
+	font-family: Arial, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+		Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+	--pure-white: #ffffff;
+	--primary-color: #b9c6d2;
+	--secondary-color: #d0dde9;
+	--tertiary-color: #edf0f8;
+	--accent-color: #ff3e00;
+	--heading-color: rgba(0, 0, 0, 0.7);
+	--text-color: #444444;
+	--background-without-opacity: rgba(255, 255, 255, 0.7);
+}
+
+:root[data-theme='dark'] {
+	--primary-color: #1f272e;
+	--secondary-color: #2e3a44;
+	--tertiary-color: #393d45;
+	--heading-color: #ffffff;
+	--text-color: #ffffff;
+	--secondary-text-color: #676778;
+	--background-without-opacity: rgba(255, 255, 255, 0.2);
+}
+
+body {
+	min-height: 100vh;
+	margin: 0;
+	background-color: var(--primary-color);
+	background: linear-gradient(
+		180deg,
+		var(--primary-color) 0%,
+		var(--secondary-color) 10.45%,
+		var(--tertiary-color) 41.35%
+	);
+}
+
+body::before {
+	content: '';
+	width: 80vw;
+	height: 100vh;
+	position: absolute;
+	top: 0;
+	left: 10vw;
+	z-index: -1;
+	background: radial-gradient(
+		50% 50% at 50% 50%,
+		var(--pure-white) 0%,
+		rgba(255, 255, 255, 0) 100%
+	);
+	opacity: 0.05;
+}
+
+#svelte {
+	min-height: 100vh;
+	display: flex;
+	flex-direction: column;
+}
+
+h1,
+h2,
+p {
+	font-weight: 400;
+	text-align: center;
+	color: var(--heading-color);
+}
+
+h1 {
+	font-size: 2rem;
+	margin-bottom: 0;
+}
+
+h2 {
+	font-size: 1rem;
+}
+
+@media (min-width: 480px) {
+	h1 {
+		font-size: 3rem;
+	}
 }
diff --git a/packages/create-svelte/templates/default/src/lib/Counter.svelte b/packages/create-svelte/templates/default/src/lib/Counter.svelte
@@ -1,36 +1,145 @@
 <script lang="ts">
+	import { backIn } from 'svelte/easing';
+
+	const action: { operation?: 'ADD' | 'REMOVE' } = { operation: undefined };
 	let count = 0;
 
-	const increment = () => {
-		count += 1;
+	$: isDeniedOperation = !action.operation || (action.operation === 'REMOVE' && count === 0);
+
+	const updateCountValue = () => {
+		if (isDeniedOperation) return;
+
+		count += action.operation === 'ADD' ? 1 : -1;
+	};
+
+	const counterTransition = (_, { duration }: { duration: number }) => {
+		return {
+			duration,
+			delay: 300,
+			tick: (t) => {
+				if (t === 1 && !isDeniedOperation) updateCountValue();
+			},
+			css: (t) => {
+				if (isDeniedOperation) return '';
+
+				const easedDistance = backIn(t) * 74;
+
+				return `
+					transform: translateY(${
+						action.operation === 'REMOVE' ? `-${easedDistance}px` : `${easedDistance}px`
+					});
+				`;
+			}
+		};
 	};
 </script>
 
-<button on:click={increment}>
-	Clicks: {count}
-</button>
+<div class="counter-container">
+	{#key action}
+		<div in:counterTransition={{ duration: 500 }}>
+			<h1>{count + 1}</h1>
+			<h1>{count}</h1>
+			<h1>{count - 1}</h1>
+		</div>
+	{/key}
+</div>
+
+<p>Counts so far</p>
+
+<div class="counter-controls">
+	<button
+		class:disabled={count === 0}
+		on:click={() => (action.operation = 'REMOVE')}
+		aria-label="Decrease the counter by one"
+	>
+		<svg width="16" height="2" viewBox="0 0 16 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+			<path d="M1.25 1H15.25" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+		</svg>
+	</button>
+	<div>{count}</div>
+	<button on:click={() => (action.operation = 'ADD')} aria-label="Increase the counter by one">
+		<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22">
+			<path
+				fill-rule="evenodd"
+				d="M9,0 L9,8 L16,8 L16,9 L9,9 L9,17 L8,17 L8,9 L0,9 L0,8 L8,8 L8,0 L9,0 Z"
+				transform="translate(3 3)"
+			/>
+		</svg>
+	</button>
+</div>
 
 <style>
-	button {
-		font-family: inherit;
-		font-size: inherit;
-		padding: 1em 2em;
-		color: #ff3e00;
-		background-color: rgba(255, 62, 0, 0.1);
-		border-radius: 2em;
-		border: 2px solid #ff3e00;
-		outline: none;
-		width: 200px;
-		height: 60px;
-		font-variant-numeric: tabular-nums;
-	}
-
-	button:focus,
-	button:hover {
-		border: 3px solid #ff3e00;
-	}
-
-	button:active {
-		background-color: rgba(255, 62, 0, 0.2);
+	.counter-controls {
+		display: flex;
+	}
+
+	.counter-controls button.disabled {
+		opacity: 0.3;
+	}
+
+	.counter-controls button {
+		width: 36px;
+		margin: 0 6px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border: 0;
+		border-radius: 4px;
+		background-color: transparent;
+		color: var(--text-color);
+		font-size: 2rem;
+		transition: background-color 0.2s linear;
+	}
+
+	.counter-controls button:hover {
+		background-color: var(--secondary-color);
+	}
+
+	.counter-controls button svg path {
+		stroke: var(--text-color);
+		fill: var(--text-color);
+	}
+
+	.counter-controls div {
+		min-width: 32px;
+		padding: 8px 16px;
+		border-radius: 4px;
+		background-color: var(--pure-white);
+		font-weight: bold;
+		text-align: center;
+		color: var(--secondary-text-color);
+	}
+
+	p {
+		font-size: 0.75rem;
+		color: var(--text-color);
+		text-transform: uppercase;
+		font-weight: 700;
+		letter-spacing: 0.1em;
+	}
+
+	.counter-container {
+		width: 100%;
+		height: 90px;
+		overflow: hidden;
+		text-align: center;
+		position: relative;
+	}
+
+	.counter-container h1 {
+		font-weight: 400;
+		transform: translateY(-60px);
+		color: var(--accent-color);
+		font-size: 4rem;
+		margin: 0;
+	}
+
+	.counter-container:after {
+		content: '';
+		width: 100%;
+		height: 140px;
+		position: absolute;
+		top: -25px;
+		left: 0;
 	}
 </style>
diff --git a/packages/create-svelte/templates/default/src/lib/DarkModeToggle.svelte b/packages/create-svelte/templates/default/src/lib/DarkModeToggle.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { afterUpdate } from 'svelte';
+	import { isDarkModeStore } from '../stores';
+
+	let isDarkMode = false;
+
+	afterUpdate(() => {
+		window.document.documentElement.setAttribute('data-theme', isDarkMode ? 'dark' : 'light');
+	});
+
+	$: {
+		isDarkModeStore.set(isDarkMode);
+	}
+
+	const toggleMode = () => {
+		isDarkMode = !isDarkMode;
+	};
+</script>
+
+<button on:click={toggleMode} aria-label="Toggle theme mode between light and dark">
+	{#if isDarkMode}
+		<img src="sun-icon.svg" alt="Toggle theme mode to light" />
+	{:else}
+		<img src="moon-icon.svg" alt="Toggle theme mode to dark" />
+	{/if}
+</button>
+
+<style>
+	button {
+		background-color: transparent;
+		border: 0;
+		position: absolute;
+		top: 16px;
+		right: 10px;
+	}
+
+	@media (min-width: 480px) {
+		button {
+			top: 24px;
+			right: 32px;
+		}
+	}
+</style>