neumorphic buttons

sveltejs · Oct 3, 2024 · badf5bf · badf5bf
1 parent 960c2c1
commit badf5bf
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 16 deletions.
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte
@@ -215,27 +215,27 @@ export default app;`
 	/>
 
 	<div class="buttons">
-		<button class="icon" onclick={() => (zen_mode = !zen_mode)} title="fullscreen editor">
+		<button class="raised icon" onclick={() => (zen_mode = !zen_mode)} title="fullscreen editor">
 			{#if zen_mode}
 				<Icon name="close" />
 			{:else}
 				<Icon name="maximize" />
 			{/if}
 		</button>
 
-		<button class="icon" disabled={downloading} onclick={download} title="download zip file">
+		<button class="raised icon" disabled={downloading} onclick={download} title="download zip file">
 			<Icon name="download" />
 		</button>
 
-		<button class="icon" disabled={saving || !user} onclick={() => fork(false)} title="fork">
+		<button class="raised icon" disabled={saving || !user} onclick={() => fork(false)} title="fork">
 			{#if justForked}
 				<Icon name="check" />
 			{:else}
 				<Icon name="git-branch" />
 			{/if}
 		</button>
 
-		<button class="icon" disabled={saving || !user} onclick={save} title="save">
+		<button class="raised icon" disabled={saving || !user} onclick={save} title="save">
 			{#if justSaved}
 				<Icon name="check" />
 			{:else}
@@ -249,7 +249,7 @@ export default app;`
 		{#if user}
 			<UserMenu {user} />
 		{:else}
-			<button class="icon" onclick={(e) => (e.preventDefault(), login())}>
+			<button class="raised icon" onclick={(e) => (e.preventDefault(), login())}>
 				<Icon name="log-in" />
 				<span>&nbsp;Log in to save</span>
 			</button>
@@ -285,7 +285,7 @@ export default app;`
 	.icon {
 		transform: translateY(0.1rem);
 		display: inline-block;
-		padding: 0.2em;
+		padding: 0.4em;
 		opacity: 0.7;
 		transition: opacity 0.3s;
 		font-family: var(--sk-font-ui);

diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte
@@ -38,24 +38,56 @@
 	onDestroy(() => query?.removeEventListener('change', cb));
 </script>
 
-<button
-	onclick={toggle}
-	type="button"
-	aria-pressed={$theme.current === 'dark' ? 'true' : 'false'}
-	aria-label={label}
-></button>
+<div class="appearance">
+	<span class="caption">Theme</span>
+	<button
+		onclick={toggle}
+		class="raised"
+		type="button"
+		aria-pressed={$theme.current === 'dark' ? 'true' : 'false'}
+		aria-label={label}
+	></button>
+</div>
 
 <style>
 	button {
-		width: 2.3rem;
-		height: 2.3rem;
+		width: 4rem;
+		height: 4rem;
 		background: red;
-		background: url($lib/icons/theme-light.svg) no-repeat 50% 50% / contain;
+		background: url($lib/icons/theme-light.svg) no-repeat 50% 50% / 2.3rem 2.3rem;
 		opacity: 0.6;
 
 		:global(.dark) & {
-			background: url($lib/icons/theme-dark.svg);
+			background-image: url($lib/icons/theme-dark.svg);
 			opacity: 0.8;
 		}
 	}
+
+	.appearance {
+		display: flex;
+		align-items: center;
+		margin-left: 1.5rem;
+
+		.caption {
+			display: none;
+			font-size: var(--sk-text-xs);
+			line-height: 1;
+			margin-right: 0rem;
+		}
+	}
+
+	@media (max-width: 799px) {
+		.appearance {
+			position: relative;
+			display: flex;
+			padding: 1.5rem 0;
+			justify-content: space-between;
+		}
+
+		.appearance .caption {
+			display: block;
+
+			font-size: var(--sk-text-s);
+		}
+	}
 </style>
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
@@ -171,6 +171,36 @@ button > svg {
 	stroke: currentColor !important;
 }
 
+.raised {
+	--highlight: hsl(0 0 100 / 0.8);
+	--highlight-active: hsl(0 0 100 / 1);
+	--shadow: hsl(0 0 0 / 0.1);
+	--shadow-active: hsl(0 0 0 / 0.15);
+
+	.dark & {
+		--highlight: hsl(0 0 100 / 0.15);
+		--highlight-active: hsl(0 0 100 / 0.15);
+		--shadow: hsl(0 0 0 / 0.2);
+		--shadow-active: hsl(0 0 0 / 0.3);
+	}
+
+
+	border-radius: var(--sk-border-radius);
+	box-shadow: 2px 2px 4px var(--shadow), -1px -1px 3px var(--highlight);
+
+	&:hover {
+		box-shadow: 2px 2px 5px var(--shadow-active), -1px -1px 4px var(--highlight-active);
+	}
+
+	&:active {
+		box-shadow: inset -1px -1px 3px var(--highlight-active), inset 1px 1px 3px var(--shadow-active);
+	}
+
+	&:disabled {
+		box-shadow: none;
+	}
+}
+
 /*  links ------------------------------------- */
 a {
 	color: var(--sk-theme-1);