feat(ui): implement focus styles for link+btn

beat-forge · Aug 10, 2023 · 4bde5ba · 4bde5ba
1 parent 713c4d6
commit 4bde5ba
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/apps/web/src/lib/components/layout/NavBar.svelte b/apps/web/src/lib/components/layout/NavBar.svelte
@@ -3,9 +3,9 @@
 </script>
 
 <div class="beatforge-page-navbar flex w-full items-center py-8 px-4 mx-auto max-w-7xl z-[100] text-sm font-bold">
-	<a href="/" class="flex items-center">
+	<Link variant="ghost" focusRing={false}>
 		<img src="/images/logo.svg" draggable="false" alt="logo" class="h-12 p-3" />
-	</a>
+	</Link>
 
 	<div class="ml-auto mr-4 flex flex-row gap-8 items-center">
 		<Link variant="text" href="https://discord.gg/HTVrjFENaZ" external>

diff --git a/packages/ui/button/Button.svelte b/packages/ui/button/Button.svelte
@@ -16,7 +16,7 @@
     pill: 'text-xs bg-primary-700 w-fit px-2 p-1 text-fore-base whitespace-nowrap',
   };
 
-  let buttonClasses = `disabled:opacity-50 flex flex-row items-center justify-center transition-all duration-[80ms] rounded-full gap-2 font-bold text-sm ${variantClasses[variant]} ${customClasses}`;
+  let buttonClasses = `outline-none focus:shadow-none focus-visible:ring-4 focus-visible:ring-[#00a8fc] disabled:opacity-50 flex flex-row items-center justify-center transition-all duration-[80ms] rounded-full gap-2 font-bold text-sm ${variantClasses[variant]} ${customClasses}`;
 </script>
 
 <button {disabled} class={buttonClasses}>

diff --git a/packages/ui/link/Link.svelte b/packages/ui/link/Link.svelte
@@ -5,18 +5,20 @@
   export let customClasses = '';
   // Boolean
   export let external = false;
+  export let focusRing = true;
   export let href = '';
 
   const variantClasses = {
+    ghost: 'outline-none',
     underlined: 'underline',
-    text: 'hover:underline',
+    text: 'hover:underline focus-visible:underline',
     primary: 'flex flex-row items-center justify-center transition-all duration-[80ms] rounded-full gap-2 font-bold text-sm px-4 py-2 bg-primary-50 hover:bg-primary-100 text-primary-950',
     secondary: 'flex flex-row items-center justify-center transition-all duration-[80ms] rounded-full gap-2 font-bold text-sm px-4 py-2 bg-primary-800 hover:bg-primary-700 text-white'
   };
 
-  let linkClasses = `${variantClasses[variant]} ${customClasses}`
+  let linkClasses = `${focusRing ? 'outline-none focus:shadow-none focus-visible:ring-4 focus-visible:ring-[#00a8fc]' : ''}  ${variantClasses[variant]} ${customClasses}`
 </script>
 
-<a href={href ?? ''} class={linkClasses} target={`${external ? '_blank' : ''}`} rel={`${external ? 'noopener noreferrer' : ''}`}>
+<a tabindex="0" href={href ?? ''} class={linkClasses} target={`${external ? '_blank' : ''}`} rel={`${external ? 'noopener noreferrer' : ''}`}>
   <slot />
 </a>