feat: add settings and code dark mode

jesperorb · Mar 27, 2024 · 59f37da · 59f37da
1 parent 10753de
commit 59f37da
Show file tree

Hide file tree

Showing 17 changed files with 295 additions and 91 deletions.
diff --git a/src/lib/components/pages/PageLayout.svelte b/src/lib/components/pages/PageLayout.svelte
@@ -12,7 +12,7 @@
 	<h2>Input</h2>
 	<Spacing size={2} />
 	<hr />
-	<Spacing size={2} />
+	<Spacing />
 	<Grid>
 		<ComboBoxContext>
 			<ComboBox
@@ -31,10 +31,10 @@
 {#if $$slots.alternativeUse}
 	<Card>
 		<h2>Alternative use</h2>
+		<Spacing />
 		<slot name="alternativeUse" />
-		<Spacing size={2} />
+		<Spacing />
 		<slot name="alternativeCode" />
-		<Spacing size={2} />
 	</Card>
 	<Spacing />
 {/if}

diff --git a/src/lib/components/pages/Playground/Playground.svelte b/src/lib/components/pages/Playground/Playground.svelte
@@ -149,7 +149,7 @@
 	}
 	.output {
 		padding: var(--spacing-4);
-		padding-top: var(--spacing-6);
+		padding-top: var(--spacing-5);
 		border-top-left-radius: 4px;
 	}
 	.output-inner {

diff --git a/src/lib/components/pages/Playground/PlaygroundOptions.svelte b/src/lib/components/pages/Playground/PlaygroundOptions.svelte
@@ -10,7 +10,6 @@
 	import OptionCard from '$lib/components/ui/OptionCard.svelte';
 	import Details from '$lib/components/ui/details/Details.svelte';
 	import BrowserSupportGrid from '$lib/components/ui/BrowserSupport/BrowserSupportGrid.svelte';
-	import Fieldset from '$lib/components/ui/Fieldset.svelte';
 	import Radio from '$lib/components/ui/Radio.svelte';
 	import { optionIsActive } from '$lib/playground/validate';
 

diff --git a/src/lib/components/ui/CodeBlock.svelte b/src/lib/components/ui/CodeBlock.svelte
@@ -10,11 +10,12 @@
 		tab-size: 2;
 		display: block;
 		padding: var(--spacing-4);
-		background-color: #1b2b34;
+		background-color: var(--code-block-background);
 		font-size: 0.85rem;
-		border-radius: 0.5rem;
+		border-radius: 4px;
 		overflow-x: auto;
 		color: var(--code-text-color);
 		font-family: var(--font-family);
+		border: 1px solid var(--border-color);
 	}
 </style>
diff --git a/src/lib/components/ui/DarkModeToggle.svelte b/src/lib/components/ui/DarkModeToggle.svelte
@@ -1,27 +1,22 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
+	import { settings } from '$lib/store/settings';
 	import SrOnly from './SrOnly.svelte';
   import Moon from './icons/Moon.svelte';
 	import Sun from './icons/Sun.svelte';
 
   let checked = Boolean(
 		browser
-			? document?.querySelector('body')?.getAttribute('data-dark-mode') === 'true'
+			? $settings.theme === "dark"
 			: false
 	);
 
 	const change = (event: Event) => {
 		const target = event.target as HTMLInputElement;
-		const element = browser ? document.querySelector('html') : null;
-		if (element && browser) {
-			if (target.checked) {
-				localStorage.setItem("dark-mode", "1");
-				element.setAttribute('data-dark-mode', 'true');
-			} else {
-				localStorage.removeItem("dark-mode");
-				element.removeAttribute('data-dark-mode');
-			}
-		}
+		settings.update((s) => ({
+			...s,
+			theme: target.checked ? "dark" : "light",
+		}))
 	};
 </script>
 

diff --git a/src/lib/components/ui/Dialog.svelte b/src/lib/components/ui/Dialog.svelte
@@ -1,56 +1,47 @@
 <script lang="ts">
-	export let show = false;
-	export let showCloseButton: boolean = true;
+	import Spacing from "$lib/components/ui/Spacing.svelte";
+
+	export let show: boolean;
+	export let header: string;
 
 	let dialog: HTMLDialogElement;
 
-	$: if (dialog && show) dialog.show();
+	$: if (dialog && show) dialog.showModal();
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
-<dialog bind:this={dialog} on:close={() => (show = false)} on:click|self={() => dialog.close()}>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
+<dialog
+	bind:this={dialog}
+	on:close={() => (show = false)}
+	on:click|self={() => dialog.close()}
+>
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div on:click|stopPropagation>
-		{#if showCloseButton}
-			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<!-- svelte-ignore a11y-autofocus -->
-			<button aria-label="Close dialog" autofocus on:click={() => dialog.close()}>X</button>
-		{/if}
-		<slot name="header" />
+		<!-- svelte-ignore a11y-autofocus -->
+		<h2 tabindex="-1" autofocus>{header}</h2>
+		<Spacing />
 		<slot />
+		<button on:click={() => dialog.close()}>Close</button>
 	</div>
 </dialog>
 
 <style>
 	dialog {
-		margin: var(--spacing-10) auto 0 auto;
-		border-radius: 4px;
+		border-radius: 8px;
+		border: none;
+		background: var(--background-color);
 		border: 1px solid var(--border-color);
-		background-color: var(--card-color);
-		color: var(--text-color);
-		padding: 0;
-		z-index: 999999;
 	}
 	dialog::backdrop {
 		background: rgba(0, 0, 0, 0.3);
 	}
 	dialog > div {
-		padding: var(--spacing-2);
-	}
-	dialog[open] {
-		animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
-	}
-	button {
-		background: none;
-		background-color: var(--background-color);
-		border: 1px solid var(--border-color);
-		padding: 0.5rem 1rem;
+		border-radius: 8px;
+		display: flex;
+		flex-direction: column;
+		padding: var(--spacing-6);
+		background: var(--background-color);
 		color: var(--text-color);
-		font-weight: 700;
-		border-radius: 4px;
-		cursor: pointer;
 	}
 	@keyframes zoom {
 		from {
@@ -60,9 +51,6 @@
 			transform: scale(1);
 		}
 	}
-	dialog[open]::backdrop {
-		animation: fade 0.2s ease-out;
-	}
 	@keyframes fade {
 		from {
 			opacity: 0;
@@ -71,7 +59,26 @@
 			opacity: 1;
 		}
 	}
+	dialog[open]::backdrop {
+		animation: fade 0.2s ease-out;
+	}
+
+	dialog[open] {
+		animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+	}
 	button {
-		display: block;
+		border: none;
+		background: none;
+		text-transform: uppercase;
+		font-weight: bold;
+		cursor: pointer;
+		margin-left: auto;
+		padding: var(--spacing-2) var(--spacing-3);
+		border-radius: 4px;
+		color: var(--text-color);
+	}
+
+	button:hover {
+    outline: 1px solid var(--text-color);
 	}
 </style>
diff --git a/src/lib/components/ui/Fieldset.svelte b/src/lib/components/ui/Fieldset.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-	import Spacing from "./Spacing.svelte";
-
   export let legend: string;
   export let role: string | undefined = undefined;
   export let name: string | undefined = undefined;
+  export let capitalize: boolean = false;
 </script>
 
 <fieldset {role} {name}>
-  <legend>{legend}</legend>
+  <legend class:capitalize={capitalize}>{legend}</legend>
   <slot />
 </fieldset>
 
@@ -23,4 +22,7 @@
   legend {
     margin-bottom: var(--spacing-2);
   }
+  .capitalize {
+    text-transform: capitalize;
+  }
 </style>
diff --git a/src/lib/components/ui/Highlight/Token.svelte b/src/lib/components/ui/Highlight/Token.svelte
@@ -19,37 +19,37 @@
 		white-space: nowrap;
 	}
 	.token.comment {
-		color: var(--gray);
+		color: var(--comment);
 	}
 
 	.token.punctuation {
-		color: var(--purple);
+		color: var(--punctuation);
 	}
 
 	.token.operator {
-		color: var(--teal);
+		color: var(--operator);
 	}
 
 	.token.key {
-		color: var(--white);
+		color: var(--key);
 	}
 
 	.token.function {
-		color: var(--light-blue);
+		color: var(--function);
 	}
 
 	.token.boolean {
-		color: var(--red);
+		color: var(--boolean);
 	}
 
 	.token.number {
-		color: var(--orange);
+		color: var(--number);
 	}
 
 	.token.string {
-		color: var(--green);
+		color: var(--string);
 	}
 	.token.class {
-		color: #fac863;
+		color: var(--class);
 	}
 </style>
diff --git a/src/lib/components/ui/Navigation.svelte b/src/lib/components/ui/Navigation.svelte
@@ -9,13 +9,15 @@
 	import { selectedLocale } from '$lib/store/selected-locale';
 	import { testIds } from '$lib/utils/dom-utils';
 	import OpenInNewTab from '$lib/components/ui/icons/OpenInNewTab.svelte';
-	import DarkModeToggle from './DarkModeToggle.svelte';
 	import Spacing from './Spacing.svelte';
+	import Settings from './icons/Settings.svelte';
+	import SettingsDialog from './SettingsDialog.svelte';
 
 	const locale = browser ? $selectedLocale : getLocaleForSSR($page);
 
 	let path: string;
 	let open = false;
+	let showSettings = false;
 	let closeButton: HTMLButtonElement;
 	let openButton: HTMLButtonElement;
 	let lastItem: HTMLAnchorElement;
@@ -71,6 +73,8 @@
 	}
 </script>
 
+<SettingsDialog bind:show={showSettings} />
+
 <nav aria-label="Main Menu" data-testid={testIds.navigation}>
 	<div class="actions">
 		<button
@@ -86,7 +90,9 @@
 			Menu
 		</button>
 		<div class="settings">
-			<DarkModeToggle />
+			<button on:click={() => (showSettings = true)} aria-label="Settings" class="settings-button">
+				<span>Settings</span> <Settings />
+			</button>
 		</div>
 	</div>
 	<!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -96,12 +102,11 @@
 				type="button"
 				id="closeMenuButton"
 				class="close-button"
-				aria-label="Close navigation"
 				on:click={closeDrawer}
 				bind:this={closeButton}
 				on:keydown={onCloseButtonShiftTab}
 			>
-				&times;
+				Close
 			</button>
 		</div>
 		<Spacing />
@@ -150,7 +155,7 @@
 		top: 0;
 		left: -250px;
 		width: 250px;
-		background-color: var(--card-color);
+		background-color: var(--background-color);
 		height: 100%;
 		padding: var(--spacing-4);
 		z-index: 1;
@@ -189,7 +194,7 @@
 		font-size: 1.25rem;
 		color: var(--text-color);
 	}
-	.nav-button:hover, .close-button:hover {
+	.nav-button:hover, .close-button:hover, .settings-button:hover {
 		border-radius: 4px;
     outline: 1px solid var(--text-color);
 	}
@@ -204,6 +209,22 @@
 		border-radius: 4px;
 		color: var(--text-color);
 	}
+	.settings-button {
+		border: none;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: none;
+		text-transform: uppercase;
+		font-weight: bold;
+		cursor: pointer;
+		font-size: 1.25rem;
+		color: var(--text-color);
+		padding: var(--spacing-2) var(--spacing-3);
+	}
+	.settings-button span {
+		margin-right: var(--spacing-2);
+	}
 	.menu-heading, .route {
 		margin-bottom: var(--spacing-1);
 	}

diff --git a/src/lib/components/ui/OptionSection.svelte b/src/lib/components/ui/OptionSection.svelte
@@ -35,7 +35,6 @@
 	@media screen and (min-width: 500px) {
     .header {
 			flex-direction: row;
-			align-items: center;
     }
   }
 </style>
diff --git a/src/lib/components/ui/Radio.svelte b/src/lib/components/ui/Radio.svelte
@@ -71,13 +71,13 @@
   @media (hover: hover) {
     input[type="radio"]:not(:disabled):hover {
       background-color: var(--radio-hover-color);
-      outline: 6px solid var(--radio-hover-color);
+      outline: 2px solid var(--highlight);
     }
   }
 
   input[type="radio"]:focus-visible {
     background-color: var(--radio-hover-color);
-    outline: 6px solid var(--radio-hover-color);
+    outline: 2px solid var(--highlight);
   }
   @media (prefers-reduced-motion: reduce) {
     input[type="radio"] {