svelte-focus

A svelte focus ring component.

Install:

npm i svelte-focus

Example usage:

<!-- App.svelte -->
<script>
  import Focus from 'svelte-focus'
</script>

<!-- Add the focus component in the root of your project. -->
<Focus/>

<!-- Add the focus-ring class to any focusable element. -->
<button class="svelte-focus">
    Button
</button>

<!-- Using the second focus ring. -->
<button class="svelte-focus focus-2">
    Button
</button>

<style global>
  /* Use CSS variables to override the default colors */
  :root {
    --focus-ring-color: #0EA5E9;
    /* dark colors are triggered by -                     */
    /* @media (prefers-color-scheme: dark) -              */
    /* or by adding a '.dark' class to the document body  */
    --focus-ring-dark-color: #FACC15;
    --focus-ring-2-color: #F43F5E;
    --focus-ring-2-dark-color: #A855F7;
    --focus-ring-3-color: #10B981;
    --focus-ring-width: 4px;
    --sf-transition-duration: 150ms;
  }
</style>