frontend: Improve highlighting of current focusHEADtrunk

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.

1 files changed, 37 insertions, 3 deletions

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 {