more css tweaks (#765)

Rich-Harris · web-flow · commit 8d761206efdc · 2024-11-04T15:02:33.000-05:00
* more css tweaks

* tweak background colours

* reduce fg saturation

* bump --sk-fg-4 brightness to meet accessibility guidelines

* use fg-2 for on-this-page

* darker sidebar
diff --git a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
@@ -16,7 +16,7 @@
 		align-items: center;
 		justify-content: space-between;
 		padding: 0.6rem var(--sk-page-padding-side);
-		background-color: var(--sk-bg-2);
+		background-color: var(--sk-bg-1);
 		white-space: nowrap;
 		flex: 0;
 		gap: 1rem;
diff --git a/apps/svelte.dev/src/routes/+page.svelte b/apps/svelte.dev/src/routes/+page.svelte
@@ -46,7 +46,7 @@
 
 <style>
 	figcaption {
-		font: var(--sk-font-body-small);
+		font: var(--sk-font-ui-medium);
 	}
 
 	.home :global {
diff --git a/apps/svelte.dev/src/routes/_home/Community.svelte b/apps/svelte.dev/src/routes/_home/Community.svelte
@@ -27,10 +27,10 @@
 	figcaption {
 		position: relative;
 		top: max(-2vw, calc(-0.02 * (120rem + 2 * var(--sk-page-padding-side))));
-		font: var(--sk-font-body-small);
+		font: var(--sk-font-ui-medium);
 		margin: 0 auto;
 		padding: 0 var(--sk-page-padding-side);
-		color: var(--sk-fg-4);
+		color: var(--sk-fg-3);
 		text-align: center;
 
 		a {
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -129,7 +129,7 @@
 				top: 0;
 				font: var(--sk-font-ui-medium);
 				text-transform: uppercase;
-				color: var(--sk-fg-4);
+				color: var(--sk-fg-3);
 			}
 		}
 
diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte b/apps/svelte.dev/src/routes/blog/[slug]/+page.svelte
@@ -45,11 +45,6 @@
 				img {
 					max-width: 100%;
 				}
-
-				figcaption {
-					color: var(--sk-fg-4);
-					font: var(--sk-font-body-small);
-				}
 			}
 
 			video {
@@ -65,7 +60,7 @@
 				font: var(--sk-font-body-small);
 
 				p {
-					color: var(--sk-fg-4);
+					color: inherit;
 					font: inherit;
 				}
 			}
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte b/apps/svelte.dev/src/routes/docs/[...path]/+layout.svelte
@@ -40,8 +40,12 @@
 	}
 
 	.toc-container {
-		background: var(--sk-bg-3);
+		background: var(--sk-bg-2);
 		display: none;
+
+		:root.dark & {
+			background: var(--sk-bg-0);
+		}
 	}
 
 	@media (min-width: 832px) {
diff --git a/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte b/apps/svelte.dev/src/routes/docs/[...path]/OnThisPage.svelte
@@ -74,7 +74,7 @@
 			}
 
 			a {
-				color: var(--sk-fg-3);
+				color: var(--sk-fg-2);
 			}
 		}
 
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte
@@ -191,7 +191,7 @@
 		height: 80%;
 		font: var(--sk-font-mono);
 		padding: 1rem;
-		border-top: 1px solid var(--sk-fg-4);
+		border-top: 1px solid var(--sk-border);
 		background: rgba(255, 255, 255, 0.5);
 		transform: translate(0, 100%);
 		-webkit-transform: translate3d(0, 100%, 0.01);
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/OutputRollup.svelte
@@ -76,7 +76,7 @@
 		font: var(--sk-font-mono);
 		padding: 1rem;
 		background: var(--sk-bg-1);
-		border-top: 1px solid var(--sk-fg-4);
+		border-top: 1px solid var(--sk-border);
 		transform: translate(0, 100%);
 		-webkit-transform: translate3d(0, 100%, 0.01);
 		transition: transform 0.3s;
diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -27,12 +27,14 @@
 	<!-- svelte-ignore a11y_label_has_associated_control (TODO this warning should probably be disabled if there's a component)-->
 	<label class="option">
 		<span class="key">dev:</span>
-		<Checkbox
-			checked={workspace.compiler_options.dev!}
-			onchange={(dev) => {
-				workspace.update_compiler_options({ dev });
-			}}
-		/>
+		<span style="font-size: 1.2rem">
+			<Checkbox
+				checked={workspace.compiler_options.dev!}
+				onchange={(dev) => {
+					workspace.update_compiler_options({ dev });
+				}}
+			/>
+		</span>
 		<span class="boolean">{workspace.compiler_options.dev}</span>
 	</label>
 	});
@@ -94,31 +96,27 @@
 
 	input[type='radio'] + label:before {
 		content: '';
-		background: #eee;
 		display: block;
 		box-sizing: border-box;
 		float: left;
-		width: 15px;
-		height: 15px;
+		width: 1.6rem;
+		height: 1.6rem;
 		margin-left: -21px;
 		margin-top: 4px;
 		/* vertical-align: top; */
 		cursor: pointer;
 		text-align: center;
-		transition: box-shadow 0.1s ease-out;
-	}
-
-	input[type='radio'] + label:before {
+		transition: box-shadow 0.05s ease-out;
 		background-color: var(--sk-fg-4);
 		border-radius: 100%;
-		box-shadow: inset 0 0 0 0.5em rgba(255, 255, 255, 0.95);
-		border: 1px solid var(--sk-fg-4);
+		box-shadow: inset 0 0 0 0.5em var(--sk-bg-2);
+		border: 1px solid var(--sk-border);
 	}
 
 	input[type='radio']:checked + label:before {
 		background-color: var(--sk-fg-accent);
-		box-shadow: inset 0 0 0 0.15em rgba(255, 255, 255, 0.95);
-		border: 1px solid var(--sk-fg-4);
+		box-shadow: inset 0 0 0 0.15em var(--sk-bg-2);
+		border: 1px solid var(--sk-fg-accent);
 		transition: box-shadow 0.2s ease-out;
 	}
 </style>
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
@@ -166,7 +166,6 @@
 <div class="container" class:embedded class:toggleable={$toggleable} bind:clientWidth={width}>
 	<div class="viewport" class:output={show_output}>
 		<SplitPane
-			--color="var(--sk-fg-4)"
 			id="main"
 			type={orientation === 'rows' ? 'vertical' : 'horizontal'}
 			pos="{mobile || fixed ? fixedPos : orientation === 'rows' ? 60 : 50}%"
diff --git a/packages/site-kit/src/lib/components/Checkbox.svelte b/packages/site-kit/src/lib/components/Checkbox.svelte
@@ -49,7 +49,7 @@
 		top: 2px;
 		left: 2px;
 		border-radius: 1em;
-		background: white;
+		background: var(--sk-bg-1);
 		box-shadow:
 			0 0px 1px rgba(0, 0, 0, 0.4),
 			0 4px 2px rgba(0, 0, 0, 0.1);
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
@@ -512,14 +512,10 @@
 				display: flex;
 				align-items: center;
 				height: 3rem;
-				color: var(--sk-fg-4);
+				color: var(--sk-fg-3);
 				font: var(--sk-font-body-small);
 				user-select: none;
 
-				&:hover {
-					color: var(--sk-fg-3);
-				}
-
 				.legacy &::after {
 					position: absolute;
 					display: flex;
@@ -550,5 +546,10 @@
 				margin-bottom: 0;
 			}
 		}
+
+		figcaption {
+			font: var(--sk-font-ui-medium);
+			color: var(--sk-fg-3);
+		}
 	}
 </style>
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -58,7 +58,7 @@
 	nav {
 		top: 0;
 		left: 0;
-		color: var(--sk-fg-3);
+		color: var(--sk-fg-2);
 		position: relative;
 	}
 
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -185,7 +185,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		height: var(--sk-nav-height);
 		margin: 0 auto;
 		padding: 0 var(--sk-page-padding-side);
-		background-color: var(--sk-bg-2);
+		background-color: var(--sk-bg-1);
 		font-family: var(--sk-font-family-body);
 		user-select: none;
 		isolation: isolate;
@@ -200,6 +200,10 @@ Top navigation bar for the application. It provides a slot for the left side, th
 			height: 4px;
 			background: linear-gradient(to top, rgba(0, 0, 0, 0.05), transparent);
 		}
+
+		:root.dark & {
+			background-color: var(--sk-bg-3);
+		}
 	}
 
 	a {
diff --git a/packages/site-kit/src/lib/styles/tokens/colours.css b/packages/site-kit/src/lib/styles/tokens/colours.css
@@ -9,17 +9,17 @@
 	color-scheme: light;
 
 	/* 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) and icons */
-	--sk-fg-4: hsl(0, 0%, 45%); /* faded text (disabled buttons, comments etc) */
+	--sk-fg-1: hsl(0, 0%, 8%); /* for headings, and (very sparingly) as a highlight colour */
+	--sk-fg-2: hsl(0, 0%, 15%); /* most text should be this colour */
+	--sk-fg-3: hsl(0, 0%, 40%); /* secondary text (e.g. figcaptions) and icons */
+	--sk-fg-4: hsl(0, 0%, 50%); /* faded text (disabled buttons, comments etc) */
 	--sk-fg-accent: hsl(12, 93%, 43%);
 
 	/* Background colours */
 	--sk-bg-1: hsl(0, 0%, 100%);
-	--sk-bg-2: hsl(0, 0%, 100%);
-	--sk-bg-3: hsl(0, 0%, 99%);
-	--sk-bg-4: hsl(0, 0%, 95%);
+	--sk-bg-2: hsl(0, 0%, 99.3%);
+	--sk-bg-3: hsl(0, 0%, 98.2%);
+	--sk-bg-4: hsl(0, 0%, 95%); /* hover states and highlights */
 	--sk-bg-accent: var(--sk-fg-accent);
 	--sk-bg-selection: hsla(204, 100%, 63%, 0.3);
 
@@ -49,21 +49,22 @@
 	--sk-bg-hue: 220;
 
 	/* Foreground colours */
-	--sk-fg-1: hsl(var(--sk-bg-hue), 10%, 90%);
-	--sk-fg-2: hsl(var(--sk-bg-hue), 10%, 80%);
-	--sk-fg-3: hsl(var(--sk-bg-hue), 10%, 65%);
-	--sk-fg-4: hsl(var(--sk-bg-hue), 10%, 45%);
+	--sk-fg-1: hsl(var(--sk-bg-hue), 2%, 90%);
+	--sk-fg-2: hsl(var(--sk-bg-hue), 3%, 80%);
+	--sk-fg-3: hsl(var(--sk-bg-hue), 5%, 65%);
+	--sk-fg-4: hsl(var(--sk-bg-hue), 5%, 55%);
 	--sk-fg-accent: hsl(12, 94%, 62%);
 
 	/* Background colours */
-	--sk-bg-1: hsl(var(--sk-bg-hue), 15%, 8%);
-	--sk-bg-2: hsl(var(--sk-bg-hue), 15%, 15%);
-	--sk-bg-3: hsl(var(--sk-bg-hue), 15%, 12%);
-	--sk-bg-4: hsl(var(--sk-bg-hue), 15%, 22%);
+	--sk-bg-0: hsl(var(--sk-bg-hue), 8%, 10%); /* docs sidebar (dark mode only) */
+	--sk-bg-1: hsl(var(--sk-bg-hue), 10%, 12%);
+	--sk-bg-2: hsl(var(--sk-bg-hue), 12%, 14%);
+	--sk-bg-3: hsl(var(--sk-bg-hue), 14%, 16%);
+	--sk-bg-4: hsl(var(--sk-bg-hue), 15%, 21%);
 	--sk-bg-accent: hsl(15, 100%, 35%);
 
 	/* Border colour */
-	--sk-border: hsl(var(--sk-bg-hue), 15%, 25%);
+	--sk-border: hsl(var(--sk-bg-hue), 15%, 22%);
 
 	/* Syntax highlighting */
 	--shiki-color-text: hsl(45, 7%, 75%);
diff --git a/packages/site-kit/src/lib/styles/tokens/typography.css b/packages/site-kit/src/lib/styles/tokens/typography.css
@@ -25,7 +25,7 @@
 	--sk-font-h3: 500 var(--sk-font-size-h3) / 1.2 var(--sk-font-family-heading);
 	--sk-font-body: 400 var(--sk-font-size-body) / var(--sk-line-height-body)
 		var(--sk-font-family-body);
-	--sk-font-body-small: 400 var(--sk-font-size-body-small) / var(--sk-line-height-body)
+	--sk-font-body-small: 400 var(--sk-font-size-body-small) / var(--sk-line-height-body-small)
 		var(--sk-font-family-body);
 	--sk-font-ui-small: 400 var(--sk-font-size-ui-small) / 1.5 var(--sk-font-family-ui);
 	--sk-font-ui-medium: 400 var(--sk-font-size-ui-medium) / 1.5 var(--sk-font-family-ui);

Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@`
`46`	`46`
`47`	`47`	`<style>`
`48`	`48`	`figcaption {`
`49`		`- font: var(--sk-font-body-small);`
	`49`	`+ font: var(--sk-font-ui-medium);`
`50`	`50`	`}`
`51`	`51`
`52`	`52`	`.home :global {`
Original file line number	Diff line number	Diff line change
`@@ -129,7 +129,7 @@`
`129`	`129`	`top: 0;`
`130`	`130`	`font: var(--sk-font-ui-medium);`
`131`	`131`	`text-transform: uppercase;`
`132`		`- color: var(--sk-fg-4);`
	`132`	`+ color: var(--sk-fg-3);`
`133`	`133`	`}`
`134`	`134`	`}`
`135`	`135`
Original file line number	Diff line number	Diff line change
`@@ -45,11 +45,6 @@`
`45`	`45`	`img {`
`46`	`46`	`max-width: 100%;`
`47`	`47`	`}`
`48`		`-`
`49`		`- figcaption {`
`50`		`- color: var(--sk-fg-4);`
`51`		`- font: var(--sk-font-body-small);`
`52`		`- }`
`53`	`48`	`}`
`54`	`49`
`55`	`50`	`video {`
`@@ -65,7 +60,7 @@`
`65`	`60`	`font: var(--sk-font-body-small);`
`66`	`61`
`67`	`62`	`p {`
`68`		`- color: var(--sk-fg-4);`
	`63`	`+ color: inherit;`
`69`	`64`	`font: inherit;`
`70`	`65`	`}`
`71`	`66`	`}`
Original file line number	Diff line number	Diff line change
`@@ -40,8 +40,12 @@`
`40`	`40`	`}`
`41`	`41`
`42`	`42`	`.toc-container {`
`43`		`- background: var(--sk-bg-3);`
	`43`	`+ background: var(--sk-bg-2);`
`44`	`44`	`display: none;`
	`45`	`+`
	`46`	`+ :root.dark & {`
	`47`	`+ background: var(--sk-bg-0);`
	`48`	`+ }`
`45`	`49`	`}`
`46`	`50`
`47`	`51`	`@media (min-width: 832px) {`
Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,7 @@`
`74`	`74`	`}`
`75`	`75`
`76`	`76`	`a {`
`77`		`- color: var(--sk-fg-3);`
	`77`	`+ color: var(--sk-fg-2);`
`78`	`78`	`}`
`79`	`79`	`}`
`80`	`80`