More css tweaks (#753)

* tweaks

* various fixes

* more

* redundant

* accommodate prettier

* prettier

Author: Rich-Harris

apps/svelte.dev/src/lib/components/SecondaryNav.svelte

@@ -17,7 +17,7 @@
 		justify-content: space-between;
 		padding: 0.6rem var(--sk-page-padding-side);
 		background-color: var(--sk-bg-2);
-		color: var(--sk-fg-1);
+		color: var(--sk-fg-2);
 		white-space: nowrap;
 		flex: 0;
 		gap: 1rem;

apps/svelte.dev/src/routes/+page.svelte

@@ -1,12 +1,12 @@
 <script>
-	import { Footer } from '@sveltejs/site-kit/home';
 	import { Section } from '@sveltejs/site-kit/components';
 	import Hero from './_home/Hero.svelte';
 	import Supporters from './_home/Supporters/index.svelte';
 	import Testimonials from './_home/Testimonials.svelte';
 	import Companies from './_home/Companies.svelte';
 	import Video from './_home/Video.svelte';
 	import Community from './_home/Community.svelte';
+	import Footer from './_home/Footer.svelte';
 </script>
 
 <svelte:head>

packages/site-kit/src/lib/home/Footer.svelte renamed to apps/svelte.dev/src/routes/_home/Footer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Section from '../components/Section.svelte';
+	import { Section } from '@sveltejs/site-kit/components';
 </script>
 
 <Section>

apps/svelte.dev/src/routes/tutorial/[...slug]/Chrome.svelte

@@ -77,7 +77,7 @@
 		border: 1px solid var(--sk-border);
 		/* TODO this should apply to all buttons/inputs? */
 		border-radius: var(--sk-border-radius);
-		color: var(--sk-fg-1);
+		color: var(--sk-fg-2);
 		font: var(--sk-font-ui-medium);
 		height: 3.2rem;
 	}

apps/svelte.dev/src/routes/tutorial/[...slug]/Controls.svelte

@@ -97,9 +97,4 @@
 		padding: 0 1rem;
 		font: var(--sk-font-ui-small);
 	}
-
-	option:disabled {
-		color: var(--sk-fg-1);
-		font-weight: bold;
-	}
 </style>

apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Item.svelte

@@ -141,7 +141,7 @@
 
 	input {
 		background: var(--sk-bg-1);
-		color: var(--sk-fg-1) !important;
+		color: var(--sk-fg-2) !important;
 		margin: 0 0.5rem 0 calc(0.5rem + var(--inset));
 		border: 2px solid transparent;
 		padding: 0 0.5rem;

packages/editor/src/lib/codemirror.css

@@ -110,12 +110,12 @@
 	}
 
 	.cm-tooltip.cm-tooltip-autocomplete {
-		color: var(--sk-fg-2) !important;
+		color: var(--sk-fg-3) !important;
 		perspective: 1px;
 
 		& > ul > li[aria-selected] {
 			background-color: var(--sk-bg-4);
-			color: var(--sk-fg-1) !important;
+			color: var(--sk-fg-2) !important;
 		}
 
 		& > ul {
@@ -126,7 +126,7 @@
 	.cm-panels {
 		font: var(--sk-font-ui-small);
 		background: var(--sk-bg-2);
-		color: var(--sk-fg-1);
+		color: var(--sk-fg-2);
 
 		&.cm-panels-top,
 		&.cm-panels-bottom {
@@ -178,7 +178,7 @@
 			.cm-textfield {
 				font: inherit;
 				background: inherit;
-				color: var(--sk-fg-1);
+				color: inherit;
 				border: 1px solid var(--sk-border);
 				border-radius: var(--sk-border-radius);
 				margin: 0;

packages/repl/src/lib/Output/Output.svelte

@@ -87,10 +87,10 @@
 	{#if workspace.current.name.endsWith('.md')}
 		<button class="active">Markdown</button>
 	{:else}
-		<button class:active={view === 'result'} onclick={() => (view = 'result')}>Result</button>
-		<button class:active={view === 'js'} onclick={() => (view = 'js')}>JS output</button>
-		<button class:active={view === 'css'} onclick={() => (view = 'css')}>CSS output</button>
-		<button class:active={view === 'ast'} onclick={() => (view = 'ast')}>AST output</button>
+		<button aria-current={view === 'result'} onclick={() => (view = 'result')}>Result</button>
+		<button aria-current={view === 'js'} onclick={() => (view = 'js')}>JS output</button>
+		<button aria-current={view === 'css'} onclick={() => (view = 'css')}>CSS output</button>
+		<button aria-current={view === 'ast'} onclick={() => (view = 'ast')}>AST output</button>
 	{/if}
 </div>
 
@@ -170,13 +170,12 @@
 		border: none;
 		border-bottom: 1px solid transparent;
 		padding: 0 1rem;
-		color: var(--sk-fg-2, #999);
+		color: var(--sk-fg-2);
 		border-radius: 0;
-	}
 
-	button.active {
-		border-bottom: 1px solid var(--sk-fg-accent, --prime);
-		color: var(--sk-fg-1, #333);
+		&[aria-current='true'] {
+			border-bottom: 1px solid var(--sk-fg-accent);
+		}
 	}
 
 	div[slot] {

packages/repl/src/lib/Output/PaneWithPanel.svelte

@@ -60,7 +60,7 @@
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		padding: 0 0.5em;
+		padding: 0.5rem 0.5rem 0.5rem 1rem;
 		cursor: pointer;
 	}
 
@@ -71,7 +71,7 @@
 	.panel-heading {
 		font: var(--sk-font-ui-small);
 		text-transform: uppercase;
-		color: var(--sk-fg-1);
+		color: var(--sk-fg-2);
 		flex: 1;
 		text-align: left;
 	}

packages/repl/src/lib/Output/Viewer.svelte

@@ -301,7 +301,7 @@
 			</div>
 
 			<div slot="panel-header">
-				<button on:click|stopPropagation={clear_logs}>
+				<button class="raised" disabled={logs.length === 0} on:click|stopPropagation={clear_logs}>
 					{#if logs.length > 0}
 						({logs.length})
 					{/if}
@@ -347,14 +347,16 @@
 		opacity: 0.25;
 	}
 
+	/* 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;
+		padding: 0.3rem 0.8rem;
 
-		&:hover {
-			color: var(--sk-fg-1);
+		&:disabled {
+			color: var(--sk-fg-4);
 		}
 	}