More css tweaks (#764)

* remove redundant style * various * prettier
sveltejs · Nov 2, 2024 · 5a635e6 · 5a635e6
1 parent 7d6fe75
commit 5a635e6
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 58 deletions.
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -96,11 +96,7 @@
 				padding: 0.2rem 0 0 3rem;
 				height: 3rem;
 				text-transform: uppercase;
-				color: var(--sk-fg-4);
-
-				&:hover {
-					color: var(--sk-fg-3);
-				}
+				user-select: none;
 
 				&::before,
 				&::after {
@@ -148,6 +144,10 @@
 					color: var(--sk-fg-4);
 					margin: 0;
 					display: block;
+
+					&:hover {
+						color: var(--sk-fg-3);
+					}
 				}
 			}
 

diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -223,7 +223,6 @@
 		height: 100%;
 		aspect-ratio: 1;
 		margin: 0;
-		color: var(--sk-fg-3);
 		border-radius: 0;
 		cursor: pointer;
 	}
@@ -261,11 +260,6 @@
 		line-height: 1;
 	}
 
-	.input-sizer {
-		display: flex;
-		color: var(--sk-fg-3, #ccc);
-	}
-
 	input {
 		position: absolute;
 		width: 100%;

diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -48,7 +48,6 @@
 		display: block;
 		padding: 0 0 0 1.25em;
 		white-space: nowrap;
-		color: var(--sk-fg-3);
 		user-select: none;
 	}
 

diff --git a/packages/site-kit/src/lib/nav/MobileMenu.svelte b/packages/site-kit/src/lib/nav/MobileMenu.svelte
@@ -265,7 +265,7 @@
 		& :global(a) {
 			position: relative;
 			padding: 0.3rem 0;
-			color: var(--sk-fg-3);
+			color: inherit;
 			font: var(--sk-font-ui-medium);
 			width: 100%;
 			height: 100%;

diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -212,7 +212,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 	.current-section {
 		display: flex;
 		align-items: center;
-		color: var(--sk-fg-3);
+		color: inherit;
 		margin-left: 0.4em;
 		font: var(--sk-font-ui-medium);
 	}
@@ -227,10 +227,6 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		}
 	}
 
-	button {
-		color: var(--sk-fg-3);
-	}
-
 	.links {
 		display: flex;
 		width: 100%;

diff --git a/packages/site-kit/src/lib/search/Search.svelte b/packages/site-kit/src/lib/search/Search.svelte
@@ -55,7 +55,7 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 		position: relative;
 		display: flex;
 		align-items: center;
-		width: 100%;
+		width: 11rem;
 		font-size: 1.4rem;
 	}
 
@@ -68,12 +68,11 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 		appearance: none;
 		-webkit-appearance: none;
 		width: 100%;
-		height: 4.2rem;
-		border-radius: 3.5rem;
+		height: 3.4rem;
+		border-radius: 5.6rem;
 		background:
 			no-repeat 0.6em 55% / 1.2em 1.2em url(../icons/search.svg),
 			var(--sk-bg-4);
-		color: var(--sk-fg-3);
 	}
 
 	input:focus + .shortcut {
@@ -82,14 +81,14 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 
 	input::placeholder {
 		text-transform: lowercase;
-		color: var(--sk-fg-3);
+		color: var(--sk-fg-4);
+		opacity: 0;
 	}
 
 	.shortcut {
-		color: var(--sk-fg-3);
 		position: absolute;
 		top: calc(50% - 0.9rem);
-		right: 0;
+		right: 1.6rem;
 		width: 100%;
 		text-align: right;
 		pointer-events: none;
@@ -99,36 +98,11 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 	}
 
 	kbd {
-		display: none;
-		color: var(--sk-fg-3);
+		color: var(--sk-fg-4);
 		font-size: inherit;
 		font-family: inherit;
 	}
 
-	@media (min-width: 800px) {
-		.search-container {
-			width: 11rem;
-		}
-
-		.shortcut {
-			padding: 0 1.6rem 0 0;
-		}
-
-		input {
-			height: 3.4rem;
-			border-radius: 5.6rem;
-		}
-
-		input::placeholder {
-			opacity: 0;
-		}
-
-		/* we're using media query as an imperfect proxy for mobile/desktop */
-		kbd {
-			display: inline;
-		}
-	}
-
 	@media (min-width: 960px) {
 		.search-container {
 			width: 19rem;
@@ -138,10 +112,4 @@ Renders a search widget which when clicked (or the corresponding keyboard shortc
 			opacity: 1;
 		}
 	}
-
-	@media (min-width: 1240px) {
-		.search-container {
-			width: 19rem;
-		}
-	}
 </style>
diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css
@@ -11,7 +11,7 @@
 	/* Foreground colours */
 	--sk-fg-1: hsl(0, 0%, 5%); /* for headings, and (very sparingly) as a highlight colour */
 	--sk-fg-2: hsl(0, 0%, 12%); /* most text should be this colour */
-	--sk-fg-3: hsl(0, 0%, 27%); /* secondary text (e.g. figcaptions) */
+	--sk-fg-3: hsl(0, 0%, 27%); /* secondary text (e.g. figcaptions) and icons */
 	--sk-fg-4: hsl(0, 0%, 45%); /* faded text (disabled buttons, comments etc) */
 	--sk-fg-accent: hsl(12, 93%, 43%);