Icon css (#344)

* centralise icon CSS

* fix some stuff

Author: Rich-Harris

apps/svelte.dev/src/routes/(authed)/playground/[id]/AppControls.svelte

@@ -357,8 +357,6 @@ export default app;`
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		width: 3.2rem;
-		height: 3.2rem;
 		user-select: none;
 	}
 
@@ -368,7 +366,6 @@ export default app;`
 		font-size: var(--sk-font-size-ui-small);
 		color: var(--sk-text-3);
 		line-height: 1;
-		background: 50% 50% no-repeat;
 		background-size: 1.8rem;
 		z-index: 999;
 

packages/site-kit/src/lib/components/Icon.svelte

@@ -13,12 +13,12 @@ use an svg icon that was provided through `Icons.svelte` from
 	} = $props();
 </script>
 
-<svg class="icon" width={size} height={size}>
+<svg width={size} height={size}>
 	<use xlink:href="#{name}" />
 </svg>
 
 <style>
-	.icon {
+	svg {
 		position: relative;
 		overflow: hidden;
 		vertical-align: middle;

packages/site-kit/src/lib/components/Text.svelte

@@ -404,7 +404,7 @@
 					content: none;
 				}
 
-				background: url($lib/icons/lightbulb.svg) no-repeat 0.5rem 0 / 3rem;
+				background: url($lib/icons/lightbulb.svg) no-repeat 0.5rem 0 / 2.6rem;
 			}
 
 			&:first-child {

packages/site-kit/src/lib/components/ThemeToggle.svelte

@@ -23,18 +23,15 @@
 
 <button
 	onclick={toggle}
-	class="raised"
+	class="raised icon"
 	type="button"
 	aria-pressed={$theme.current === 'dark'}
 	aria-label="Toggle dark mode"
 ></button>
 
 <style>
 	button {
-		width: 3.2rem;
-		aspect-ratio: 1;
-		background: red;
-		background: url($lib/icons/theme-light.svg) no-repeat 50% 50% / 2.3rem 2.3rem;
+		background-image: url($lib/icons/theme-light.svg);
 		margin-left: 1rem;
 
 		:global(.dark) & {

packages/site-kit/src/lib/nav/Menu.svelte

@@ -118,12 +118,12 @@
 	<button
 		aria-label="Toggle menu"
 		aria-expanded={$open_store}
-		class="menu-toggle"
+		class="menu-toggle raised icon"
 		class:open
 		bind:this={menu_button}
 		onclick={open_nav}
 	>
-		<Icon name={$open_store ? 'close' : 'menu'} size="1em" />
+		<Icon name={$open_store ? 'close' : 'menu'} size={16} />
 	</button>
 
 	{#if $open_store}
@@ -267,14 +267,8 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-
-		height: 100%;
-		width: var(--sk-nav-height);
-
 		display: flex;
 		gap: 1.5rem;
-
-		line-height: 1;
 	}
 
 	.menu-background {

packages/site-kit/src/lib/nav/Nav.svelte

@@ -105,12 +105,12 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	<div class="mobile mobile-menu">
 		<button
 			aria-label="Search"
-			class="search"
+			class="raised icon search"
 			onclick={() => {
 				$searching = true;
 			}}
 		>
-			<Icon name="search" size=".6em" />
+			<Icon name="search" size={16} />
 		</button>
 
 		<Menu bind:open={$nav_open} {links}>
@@ -137,6 +137,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		width: 100vw;
 		height: var(--sk-nav-height);
 		margin: 0 auto;
+		padding: 0 var(--sk-page-padding-side);
 		background-color: var(--sk-back-2);
 		font-family: var(--sk-font-body);
 		user-select: none;
@@ -208,10 +209,9 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 	.home-link {
 		--padding-right: 1rem;
-		width: 16rem;
+		width: 11.2rem;
 		height: 100%;
-		background: url(../branding/svelte.svg) no-repeat var(--sk-page-padding-side) 50% /
-			calc(100% - var(--sk-page-padding-side) - var(--padding-right)) auto;
+		background: url(../branding/svelte.svg) no-repeat 0 50% / calc(100% - var(--padding-right)) auto;
 		padding: 0 var(--padding-right) 0 calc(var(--sk-page-padding-side) + 0rem);
 
 		:global(.dark) & {
@@ -221,10 +221,10 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 	.mobile-menu {
 		display: flex;
-		position: absolute;
-		bottom: 0;
-		right: 0;
-		height: 100%;
+		flex: 1;
+		justify-content: end;
+		align-items: center;
+		gap: 0.5rem; /* TODO tokenize */
 	}
 
 	.desktop {
@@ -235,21 +235,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		display: block;
 	}
 
-	button {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		height: 100%;
-		display: flex;
-		gap: 1.5rem;
-		padding: 0 1rem;
-		line-height: 1;
-	}
-
-	.search {
-		padding-left: 2rem;
-	}
-
 	.appearance {
 		display: flex;
 		align-items: center;
@@ -297,7 +282,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	@media (min-width: 800px) {
 		.home-link {
 			--padding-right: 2rem;
-			width: 18rem;
+			width: 13.2rem;
 		}
 
 		nav {
@@ -316,7 +301,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			width: auto;
 			height: 100%;
 			align-items: center;
-			padding: 0 var(--sk-page-padding-side) 0 0;
 		}
 
 		.menu:last-child {

packages/site-kit/src/lib/styles/utils/buttons.css

@@ -18,3 +18,11 @@
 		border-width: 1px;
 	}
 }
+
+.icon {
+	width: 3.2rem;
+	height: 3.2rem;
+	background-repeat: no-repeat;
+	background-position: 50% 50%;
+	background-size: 2.3rem 2.3rem;
+}