refactor: outline styling consistency across controls

kripod · Jul 11, 2024 · 67e6724 · 67e6724
1 parent 240c0cf
commit 67e6724
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -30,7 +30,7 @@ export const Button = forwardRef(function Button(
       "select-none",
       size !== "auto" &&
         clsx(
-          "inline-flex items-center justify-center text-center focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ui-primary-600",
+          "inline-flex items-center justify-center text-center",
           size === "sm" && "px-2.5",
           size === "md" && "px-4",
           size === "lg" && "px-6",

diff --git a/src/components/Input.tsx b/src/components/Input.tsx
@@ -18,7 +18,7 @@ export const Input = forwardRef(function Input(
       className={clsx(
         className,
         controlClassName({ size }),
-        "bg-ui-neutral-50 text-ui-neutral-800 ring-1 ring-inset ring-ui-neutral-600 placeholder:text-ui-neutral-500 focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ui-primary-600",
+        "bg-ui-neutral-50 text-ui-neutral-800 ring-1 ring-inset ring-ui-neutral-600 placeholder:text-ui-neutral-500",
         size === "sm" && "px-2.5",
         size === "md" && "px-3",
         size === "lg" && "px-4 font-medium",

diff --git a/src/utils/controlClassName.ts b/src/utils/controlClassName.ts
@@ -6,7 +6,7 @@ interface ControlProps {
 
 export function controlClassName({ size }: ControlProps) {
   return clsx(
-    "transition disabled:pointer-events-none disabled:opacity-40",
+    "transition focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-ui-primary-600 disabled:pointer-events-none disabled:opacity-40",
     size === "sm" && "h-8 rounded-md text-base/none",
     size === "md" && "h-10 rounded-lg text-base/none",
     size === "lg" && "h-14 rounded-xl text-xl/none",