remove tailwind focus outline

Author: kylecarbs

src/browser/components/ui/button.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/common/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {

src/browser/styles/globals.css

@@ -18,6 +18,15 @@
   font-display: swap;
 }
 
+:focus {
+  outline: none;
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-input-border-focus);
+  outline-offset: 2px;
+}
+
 :root {
   color-scheme: dark;
 
@@ -1019,7 +1028,6 @@ pre code {
 input[type="checkbox"] {
   @apply relative m-0 h-3 w-3 cursor-pointer appearance-none rounded-sm border border-border-light bg-dark;
   @apply hover:border-accent;
-  @apply focus-visible:outline focus-visible:outline-2 focus-visible:outline-accent focus-visible:outline-offset-2;
   @apply checked:bg-accent checked:border-accent;
   @apply checked:after:absolute checked:after:top-[2px] checked:after:left-[4px] checked:after:h-[6px] checked:after:w-[2.5px];
   @apply checked:after:rotate-45 checked:after:border-r-[1.5px] checked:after:border-b-[1.5px];