fix some more css (#758)

Rich-Harris · web-flow · commit 559f9109b720 · 2024-11-01T16:16:03.000-04:00
* fix some more css

* prettier
diff --git a/apps/svelte.dev/src/lib/components/Modal.svelte b/apps/svelte.dev/src/lib/components/Modal.svelte
@@ -67,7 +67,6 @@
 		width: calc(100vw - 2rem);
 		max-width: 56rem;
 		background: var(--sk-bg-2);
-		color: var(--sk-fg-2);
 		padding: 2rem;
 		border: none;
 		border-radius: 0.5rem;
diff --git a/apps/svelte.dev/src/lib/components/SecondaryNav.svelte b/apps/svelte.dev/src/lib/components/SecondaryNav.svelte
@@ -17,7 +17,6 @@
 		justify-content: space-between;
 		padding: 0.6rem var(--sk-page-padding-side);
 		background-color: var(--sk-bg-2);
-		color: var(--sk-fg-2);
 		white-space: nowrap;
 		flex: 0;
 		gap: 1rem;
diff --git a/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte b/apps/svelte.dev/src/routes/(authed)/apps/+page.svelte
@@ -156,7 +156,6 @@
 		padding: 0 0 0 3.2rem;
 		position: relative;
 		margin: 1rem 0;
-		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-medium);
 
 		.avatar {
diff --git a/apps/svelte.dev/src/routes/blog/+page.svelte b/apps/svelte.dev/src/routes/blog/+page.svelte
@@ -74,7 +74,7 @@
 
 	h2 {
 		display: inline-block;
-		color: var(--sk-fg-2);
+		color: var(--sk-fg-1);
 		font: var(--sk-font-h3);
 	}
 
@@ -87,14 +87,14 @@
 
 			h2 {
 				font: var(--sk-font-h1);
-				color: var(--sk-fg-2);
+				color: var(--sk-fg-1);
 			}
 		}
 
 		a {
 			display: block;
 			text-decoration: none;
-			color: var(--sk-fg-2);
+			color: inherit;
 
 			&:hover h2 {
 				text-decoration: underline;
@@ -163,7 +163,7 @@
 			a {
 				display: block;
 				font: var(--sk-font-body);
-				color: var(--sk-fg-2);
+				color: inherit;
 			}
 		}
 	}
diff --git a/apps/svelte.dev/src/routes/docs/+page.svelte b/apps/svelte.dev/src/routes/docs/+page.svelte
@@ -111,7 +111,7 @@
 
 	.options a {
 		display: block;
-		color: var(--sk-fg-2);
+		color: inherit;
 		margin: 1em -1.6rem;
 		padding: 1.6rem;
 		background-color: var(--sk-bg-1);
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte
@@ -77,7 +77,6 @@
 		border: 1px solid var(--sk-border);
 		/* TODO this should apply to all buttons/inputs? */
 		border-radius: var(--sk-border-radius);
-		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-medium);
 		height: 3.2rem;
 	}
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/ContextMenu.svelte
@@ -23,7 +23,7 @@
 
 {#if $menu_items}
 	<nav style="position: fixed; z-index: 5; top:{$menu_items.y}px; left:{$menu_items.x}px">
-		<div class="navbar" id="navbar">
+		<div class="context-menu">
 			<ul>
 				{#each $menu_items.items as item}
 					<li>
@@ -38,50 +38,39 @@
 <svelte:window on:click={() => menu_items.set(null)} />
 
 <style>
-	.navbar {
+	.context-menu {
 		display: inline-flex;
-		border: 1px solid rgba(0, 0, 0, 0.1);
-		background-color: var(--back);
+		background-color: var(--sk-bg-2);
 		border-radius: var(--sk-border-radius);
 		overflow: hidden;
 		flex-direction: column;
-		filter: drop-shadow(1px 1px 4px rgba(0, 0, 0, 0.1));
+		filter: var(--sk-shadow);
 	}
 
 	ul {
 		margin: 0;
-		padding: 0;
-		background-color: var(--sk-bg-3);
-		border: 1px solid var(--sk-fg-accent);
+		padding: 0.5rem;
+		background-color: var(--sk-bg-2);
 	}
 
 	li {
 		display: block;
 		list-style-type: none;
-		width: 1fr;
-	}
-	li:hover {
-		background-color: var(--sk-bg-accent);
+
+		&:hover {
+			background-color: var(--sk-bg-4);
+		}
 	}
 
 	button {
-		color: var(--sk-fg-2);
+		display: block;
 		width: 100%;
+		height: 100%;
 		text-align: left;
 		border: 0px;
-		padding: 0.4rem 1rem 0.2rem 1rem;
+		padding: 1rem;
 		font: var(--sk-font-ui-small);
-	}
-
-	li:first-child button {
-		padding-top: 0.5rem;
-	}
-
-	li:last-child button {
-		padding-bottom: 0.4rem;
-	}
-
-	button:hover {
-		background-color: var(--back-api);
+		line-height: 1;
+		border-radius: var(--sk-border-radius);
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte b/apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte
@@ -121,11 +121,6 @@
 		background: var(--bg) var(--icon) no-repeat;
 		background-position: calc(var(--inset) - 0.5rem) 50%;
 		background-size: 1.2rem;
-		color: var(--sk-fg-2);
-	}
-
-	li:hover {
-		--bg: var(--sk-bg-3);
 	}
 
 	button,
@@ -141,7 +136,6 @@
 
 	input {
 		background: var(--sk-bg-1);
-		color: var(--sk-fg-2) !important;
 		margin: 0 0.5rem 0 calc(0.5rem + var(--inset));
 		border: 2px solid transparent;
 		padding: 0 0.5rem;
diff --git a/packages/editor/src/lib/codemirror.css b/packages/editor/src/lib/codemirror.css
@@ -126,7 +126,6 @@
 	.cm-panels {
 		font: var(--sk-font-ui-small);
 		background: var(--sk-bg-2);
-		color: var(--sk-fg-2);
 
 		&.cm-panels-top,
 		&.cm-panels-bottom {
diff --git a/packages/repl/src/lib/Input/ComponentSelector.svelte b/packages/repl/src/lib/Input/ComponentSelector.svelte
@@ -248,7 +248,6 @@
 		}
 
 		&.active {
-			color: var(--sk-fg-2, #333);
 			border-bottom: 1px solid var(--sk-fg-accent);
 		}
 	}
diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -40,11 +40,8 @@
 
 <style>
 	.options {
-		padding: 0 10px;
-		font-family: var(--sk-font-family-mono);
-		font-size: 13px;
-		color: var(--sk-fg-2);
-		line-height: 1.8;
+		padding: 0 1rem;
+		font: var(--sk-font-mono);
 	}
 
 	.option {
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
@@ -170,7 +170,6 @@
 		border: none;
 		border-bottom: 1px solid transparent;
 		padding: 0 1rem;
-		color: var(--sk-fg-2);
 		border-radius: 0;
 
 		&[aria-current='true'] {
diff --git a/packages/repl/src/lib/Output/PaneWithPanel.svelte b/packages/repl/src/lib/Output/PaneWithPanel.svelte
@@ -71,7 +71,6 @@
 	.panel-heading {
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
-		color: var(--sk-fg-2);
 		flex: 1;
 		text-align: left;
 	}
diff --git a/packages/repl/src/lib/Output/Viewer.svelte b/packages/repl/src/lib/Output/Viewer.svelte
@@ -349,7 +349,6 @@
 
 	/* TODO this stuff should live in global styles */
 	button {
-		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
 		display: block;
diff --git a/packages/repl/src/lib/Output/console/ConsoleLine.svelte b/packages/repl/src/lib/Output/console/ConsoleLine.svelte
@@ -166,6 +166,7 @@
 	.line {
 		--bg: var(--sk-bg-1);
 		--border: var(--sk-bg-3);
+		font: var(--sk-font-mono);
 		display: block;
 		position: relative;
 		width: 100%;
@@ -201,7 +202,6 @@
 		gap: 1rem;
 		width: 100%;
 		font-size: 1.2rem;
-		font-family: var(--sk-font-family-mono);
 		align-items: center;
 	}
 
@@ -219,7 +219,6 @@
 		grid-template-columns: minmax(0, auto) minmax(auto, 1fr);
 		grid-gap: 0 2rem;
 		font-size: 1.2rem;
-		font-family: var(--sk-font-family-mono);
 		margin: 0 1rem 0.4rem calc(1em + var(--indent));
 		overflow: hidden;
 
@@ -247,15 +246,14 @@
 		height: 1.4em;
 		padding: 0.5em;
 		border-radius: 0.4rem;
-		background-color: var(--sk-fg-3, #777);
+		background-color: var(--sk-fg-3);
 		color: var(--sk-bg-1);
 		font-size: 1rem;
 	}
 
 	.meta {
-		color: var(--sk-fg-2, #666);
-		font-family: var(--sk-font-family-body) !important;
-		font-size: 12px;
+		color: var(--sk-fg-4);
+		font: var(--sk-font-ui-small);
 	}
 
 	.meta-error {
diff --git a/packages/site-kit/src/lib/components/HoverMenu.svelte b/packages/site-kit/src/lib/components/HoverMenu.svelte
@@ -15,7 +15,7 @@
 		:global {
 			a,
 			button {
-				color: var(--sk-fg-2);
+				color: inherit;
 				padding: 1rem;
 				display: block;
 				font: var(--sk-font-ui-medium);
diff --git a/packages/site-kit/src/lib/components/ScreenToggle.svelte b/packages/site-kit/src/lib/components/ScreenToggle.svelte
@@ -16,7 +16,7 @@
 
 <!-- svelte-ignore a11y_label_has_associated_control -->
 <label class="input-output-toggle">
-	<span class:active={!checked} style="text-align: right">{left}</span>
+	<span aria-current={!checked} style="text-align: right">{left}</span>
 	<span style="display:grid; place-items: center">
 		<Checkbox
 			{checked}
@@ -26,7 +26,7 @@
 			}}
 		/>
 	</span>
-	<span class:active={checked}>{right}</span>
+	<span aria-current={checked}>{right}</span>
 </label>
 
 <style>
@@ -46,11 +46,7 @@
 		z-index: 2;
 	}
 
-	span {
+	span[aria-current='false'] {
 		color: var(--sk-fg-4);
 	}
-
-	.active {
-		color: var(--sk-fg-2);
-	}
 </style>
diff --git a/packages/site-kit/src/lib/components/Text.svelte b/packages/site-kit/src/lib/components/Text.svelte
@@ -186,7 +186,7 @@
 						align-items: center;
 						font-size: 1.2rem;
 						font-family: var(--sk-font-family-mono);
-						color: var(--sk-fg-2);
+						color: inherit;
 					}
 
 					&::before {
diff --git a/packages/site-kit/src/lib/docs/DocsContents.svelte b/packages/site-kit/src/lib/docs/DocsContents.svelte
@@ -86,7 +86,7 @@
 		transition: color 0.2s;
 		border-bottom: none;
 		padding: 0;
-		color: var(--sk-fg-2);
+		color: inherit;
 		user-select: none;
 	}
 
diff --git a/packages/site-kit/src/lib/nav/MobileSubMenu.svelte b/packages/site-kit/src/lib/nav/MobileSubMenu.svelte
@@ -107,7 +107,6 @@
 	a {
 		display: flex;
 		align-items: center;
-		color: var(--sk-fg-2);
 
 		&[aria-current='page'] {
 			color: var(--sk-fg-accent) !important;
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -237,7 +237,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 		align-items: center;
 
 		a {
-			color: var(--sk-fg-2);
+			color: inherit;
 			font: var(--sk-font-ui-medium);
 
 			white-space: nowrap;
diff --git a/packages/site-kit/src/lib/nav/SkipLink.svelte b/packages/site-kit/src/lib/nav/SkipLink.svelte
@@ -16,7 +16,7 @@ Accessibility helper component to skip to the main content
 		display: flex;
 		align-items: center;
 		background: var(--sk-bg-1);
-		color: var(--sk-fg-2);
+		color: inherit;
 		height: calc(var(--sk-nav-height) - 2rem);
 		padding: 0 1rem;
 		position: absolute;
diff --git a/packages/site-kit/src/lib/search/SearchBox.svelte b/packages/site-kit/src/lib/search/SearchBox.svelte
@@ -340,8 +340,8 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			background: inherit;
 
 			&::placeholder {
-				color: var(--sk-fg-2);
-				opacity: 0.3;
+				color: var(--sk-fg-4);
+				opacity: 0.5;
 			}
 
 			&:focus-visible {
@@ -420,7 +420,7 @@ It appears when the user clicks on the `Search` component or presses the corresp
 			}
 
 			a {
-				color: var(--sk-fg-2);
+				color: inherit;
 				display: block;
 				text-decoration: none;
 				margin: 0 -0.5rem;
diff --git a/packages/site-kit/src/lib/search/SearchResultList.svelte b/packages/site-kit/src/lib/search/SearchResultList.svelte
@@ -122,6 +122,7 @@
 		overflow: hidden;
 		background: var(--background);
 		font: var(--sk-font-ui-medium);
+		color: inherit;
 
 		&::before {
 			content: '';
@@ -169,7 +170,6 @@
 			width: 100%;
 			overflow: hidden;
 			font: var(--sk-font-ui-medium);
-			color: var(--sk-fg-2);
 
 			span {
 				display: inline;
diff --git a/packages/site-kit/src/lib/styles/base.css b/packages/site-kit/src/lib/styles/base.css
@@ -96,7 +96,6 @@ kbd {
 	position: relative;
 	border-radius: var(--sk-border-radius);
 	white-space: nowrap;
-	color: var(--sk-fg-2);
 	background: var(--sk-bg-4);
 	line-height: 1.7;
 }

Original file line number	Diff line number	Diff line change
`@@ -74,7 +74,7 @@`
`74`	`74`
`75`	`75`	`h2 {`
`76`	`76`	`display: inline-block;`
`77`		`- color: var(--sk-fg-2);`
	`77`	`+ color: var(--sk-fg-1);`
`78`	`78`	`font: var(--sk-font-h3);`
`79`	`79`	`}`
`80`	`80`
`@@ -87,14 +87,14 @@`
`87`	`87`
`88`	`88`	`h2 {`
`89`	`89`	`font: var(--sk-font-h1);`
`90`		`- color: var(--sk-fg-2);`
	`90`	`+ color: var(--sk-fg-1);`
`91`	`91`	`}`
`92`	`92`	`}`
`93`	`93`
`94`	`94`	`a {`
`95`	`95`	`display: block;`
`96`	`96`	`text-decoration: none;`
`97`		`- color: var(--sk-fg-2);`
	`97`	`+ color: inherit;`
`98`	`98`
`99`	`99`	`&:hover h2 {`
`100`	`100`	`text-decoration: underline;`
`@@ -163,7 +163,7 @@`
`163`	`163`	`a {`
`164`	`164`	`display: block;`
`165`	`165`	`font: var(--sk-font-body);`
`166`		`- color: var(--sk-fg-2);`
	`166`	`+ color: inherit;`
`167`	`167`	`}`
`168`	`168`	`}`
`169`	`169`	`}`
Original file line number	Diff line number	Diff line change
`@@ -77,7 +77,6 @@`
`77`	`77`	`border: 1px solid var(--sk-border);`
`78`	`78`	`/* TODO this should apply to all buttons/inputs? */`
`79`	`79`	`border-radius: var(--sk-border-radius);`
`80`		`- color: var(--sk-fg-2);`
`81`	`80`	`font: var(--sk-font-ui-medium);`
`82`	`81`	`height: 3.2rem;`
`83`	`82`	`}`
Original file line number	Diff line number	Diff line change
`@@ -248,7 +248,6 @@`
`248`	`248`	`}`
`249`	`249`
`250`	`250`	`&.active {`
`251`		`- color: var(--sk-fg-2, #333);`
`252`	`251`	`border-bottom: 1px solid var(--sk-fg-accent);`
`253`	`252`	`}`
`254`	`253`	`}`