From 387550086a00b5a1b8221c1528e6f616430e7b3c Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Fri, 22 Nov 2024 18:17:57 +0100
Subject: frontend: Improve highlighting of current focus

Elements now have a consistent style applied to them when in focus.
Additionally, select elements will now have an outline when focused,
making it easier to notice the currently selected element.
---
 frontend/src/app.css                               | 40 ++++++++++++++++++++--
 frontend/src/lib/components/Card.svelte            |  2 +-
 frontend/src/lib/components/Titlebar.svelte        |  2 +-
 frontend/src/lib/gallery/GalleryPage.svelte        |  2 +-
 frontend/src/lib/navigation/Link.svelte            |  2 +-
 .../lib/scraper/components/SelectorGroup.svelte    |  2 +-
 frontend/src/lib/tabs/Tab.svelte                   |  2 +-
 frontend/src/lib/tabs/Tabs.svelte                  |  4 +--
 8 files changed, 45 insertions(+), 11 deletions(-)

(limited to 'frontend')

diff --git a/frontend/src/app.css b/frontend/src/app.css
index e1b6ca0..07939f6 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -12,7 +12,21 @@
 
 	input,
 	textarea {
-		@apply w-full rounded bg-slate-900 p-[.4rem] focus:outline focus:outline-1 focus:outline-slate-500;
+		@apply w-full rounded bg-slate-900 p-[.4rem];
+	}
+
+	input,
+	textarea,
+	select {
+		@apply focus-thin focus-slate;
+	}
+
+	button {
+		@apply focus-thick focus-slate;
+	}
+
+	a {
+		@apply focus-thick focus-blue;
 	}
 
 	label {
@@ -56,7 +70,7 @@
 
 @layer components {
 	.btn {
-		@apply flex items-center justify-center rounded-sm p-2 text-white transition-colors disabled:opacity-40;
+		@apply focus-thick focus-slate flex items-center justify-center rounded-sm p-2 text-white transition-colors disabled:opacity-40;
 	}
 
 	.btn-xs {
@@ -146,6 +160,26 @@
 		grid-template-columns: 1fr;
 		grid-template-rows: 500px 1fr;
 	}
+
+	.focus-thin {
+		@apply focus:isolate focus:outline focus:outline-1;
+	}
+
+	.focus-thick {
+		@apply focus-visible:isolate focus-visible:outline;
+	}
+
+	.focus-background {
+		@apply focus-visible:bg-indigo-600 focus-visible:outline-none;
+	}
+
+	.focus-slate {
+		@apply focus:outline-slate-400 focus-visible:outline-slate-400;
+	}
+
+	.focus-blue {
+		@apply focus:outline-blue-600 focus-visible:outline-blue-600;
+	}
 }
 
 .svelecte {
@@ -162,7 +196,7 @@
 }
 
 .svelecte.is-focused {
-	--sv-border: 1px solid theme(colors.slate.500);
+	--sv-border: 1px solid theme(colors.slate.400);
 }
 
 .svelecte input::placeholder {
diff --git a/frontend/src/lib/components/Card.svelte b/frontend/src/lib/components/Card.svelte
index 2384799..d209517 100644
--- a/frontend/src/lib/components/Card.svelte
+++ b/frontend/src/lib/components/Card.svelte
@@ -34,7 +34,7 @@
 
 <a
 	{href}
-	class="grid-card-v sm:grid-card-h relative grid overflow-hidden rounded bg-slate-900 shadow-md shadow-slate-950/30"
+	class="grid-card-v sm:grid-card-h focus-thick focus-blue relative grid overflow-hidden rounded bg-slate-900 shadow-md shadow-slate-950/30"
 	class:compact
 	class:grid-card-cover-only={coverOnly}
 	on:click
diff --git a/frontend/src/lib/components/Titlebar.svelte b/frontend/src/lib/components/Titlebar.svelte
index 8aab2dd..2cdfa70 100644
--- a/frontend/src/lib/components/Titlebar.svelte
+++ b/frontend/src/lib/components/Titlebar.svelte
@@ -14,7 +14,7 @@
 		{#if favourite !== undefined}
 			<button
 				type="button"
-				class="mr-1 flex items-center"
+				class="focus-background mr-1 flex items-center"
 				title="Toggle favourite"
 				on:click={() => dispatch('favourite')}
 			>
diff --git a/frontend/src/lib/gallery/GalleryPage.svelte b/frontend/src/lib/gallery/GalleryPage.svelte
index 449321c..f40b889 100644
--- a/frontend/src/lib/gallery/GalleryPage.svelte
+++ b/frontend/src/lib/gallery/GalleryPage.svelte
@@ -57,7 +57,7 @@
 	class:dim
 	role="button"
 	tabindex="0"
-	class="{span} relative overflow-hidden rounded"
+	class="{span} focus-thick focus-blue relative overflow-hidden rounded"
 	on:click={press}
 	on:keydown={press}
 >
diff --git a/frontend/src/lib/navigation/Link.svelte b/frontend/src/lib/navigation/Link.svelte
index 7297a69..be09a36 100644
--- a/frontend/src/lib/navigation/Link.svelte
+++ b/frontend/src/lib/navigation/Link.svelte
@@ -12,7 +12,7 @@
 </script>
 
 <li class:active class="items-center hover:bg-indigo-700 [&.active]:bg-indigo-700">
-	<a class="flex items-center" {target} {title} {href} use:accelerator={accel}>
+	<a class="focus-background flex items-center" {target} {title} {href} use:accelerator={accel}>
 		<div class="flex p-3">
 			<slot />
 		</div>
diff --git a/frontend/src/lib/scraper/components/SelectorGroup.svelte b/frontend/src/lib/scraper/components/SelectorGroup.svelte
index ae7287a..1fdb8f2 100644
--- a/frontend/src/lib/scraper/components/SelectorGroup.svelte
+++ b/frontend/src/lib/scraper/components/SelectorGroup.svelte
@@ -19,7 +19,7 @@
 			<h2>{title}</h2>
 			<button
 				type="button"
-				class="flex items-end opacity-0 brightness-75 transition-opacity hover:brightness-110 group-hover:opacity-100"
+				class="flex items-end opacity-75 brightness-75 transition-opacity hover:opacity-100 hover:brightness-110 focus-visible:opacity-100"
 				on:click={invert}
 				title="Invert selection"
 			>
diff --git a/frontend/src/lib/tabs/Tab.svelte b/frontend/src/lib/tabs/Tab.svelte
index 0a6be57..cddd072 100644
--- a/frontend/src/lib/tabs/Tab.svelte
+++ b/frontend/src/lib/tabs/Tab.svelte
@@ -8,7 +8,7 @@
 </script>
 
 {#if $context.current === id}
-	<div class="h-full overflow-auto py-2 pe-3" in:fade={fadeDefault}>
+	<div class="h-full overflow-auto py-2 pe-3 ps-1" in:fade={fadeDefault}>
 		<slot />
 	</div>
 {/if}
diff --git a/frontend/src/lib/tabs/Tabs.svelte b/frontend/src/lib/tabs/Tabs.svelte
index 09cdbdd..fd5d08e 100644
--- a/frontend/src/lib/tabs/Tabs.svelte
+++ b/frontend/src/lib/tabs/Tabs.svelte
@@ -8,13 +8,13 @@
 
 <div class="flex h-full max-h-full flex-col">
 	<nav>
-		<ul class="me-3 flex border-b-2 border-slate-700 text-sm">
+		<ul class="me-3 ms-1 flex border-b-2 border-slate-700 text-sm">
 			{#each Object.entries($context.tabs) as [id, { title, badge }]}
 				<li class="-mb-0.5">
 					<button
 						type="button"
 						class:active={$context.current === id}
-						class="relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200"
+						class="focus-background relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200"
 						on:click={() => ($context.current = id)}
 					>
 						{#if badge}
-- 
cgit v1.2.3-2-gb3c3