fix(tabs): improve focus ring and hover styling (#204)

Author: mattrothenberg

.changeset/tabs-focus-ring.md

@@ -0,0 +1,10 @@
+---
+"@cloudflare/kumo": patch
+---
+
+fix(tabs): improve focus ring and hover styling
+
+- Fixed focus ring to use proper `ring-kumo-ring` token instead of browser default blue
+- Segmented variant: inset focus ring to avoid overlap with adjacent tabs, hidden on active tab
+- Underline variant: added padding for better focus ring spacing around text
+- Added subtle hover states for both variants

packages/kumo/src/components/tabs/tabs.tsx

@@ -168,11 +168,11 @@ export function Tabs({
             value={tab.value}
             render={tab.render}
             className={cn(
-              "relative z-2 flex cursor-pointer items-center rounded bg-transparent text-base whitespace-nowrap hover:border-kumo-tint focus-visible:rounded-none focus-visible:ring-kumo-ring focus-visible:outline-offset-3",
+              "relative z-2 flex cursor-pointer items-center rounded bg-transparent text-base whitespace-nowrap focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-kumo-ring",
               isSegmented &&
-                "my-px rounded-lg px-2.5 text-kumo-strong aria-selected:text-kumo-default",
+                "my-px rounded-lg px-2.5 text-kumo-strong hover:text-kumo-default aria-selected:text-kumo-default focus-visible:ring-inset",
               isUnderline &&
-                "mb-2 text-kumo-strong hover:text-kumo-subtle aria-selected:font-medium aria-selected:text-kumo-default",
+                "px-2 py-2.5 text-kumo-strong hover:bg-kumo-tint/50 hover:text-kumo-subtle aria-selected:hover:bg-transparent aria-selected:font-medium aria-selected:text-kumo-default",
               tab.className,
             )}
           >