feat: improve focus visible ring

packages/theme/src/colors/semantic.ts

@@ -52,7 +52,7 @@ const base: SemanticBaseColors = {
       DEFAULT: gray[200]
     },
     focus: {
-      DEFAULT: blue[500]
+      DEFAULT: blue[400]
     },
     overlay: {
       DEFAULT: '#000000'

packages/theme/src/components/button.ts

@@ -1,4 +1,5 @@
 import { tv } from '../tw';
+import { focusVisibleRing } from './shared.ts';
 
 const baseButton = tv({
   base: [
@@ -10,7 +11,7 @@ const baseButton = tv({
     'rounded',
     'disabled:cursor-not-allowed',
     'disabled:opacity-40',
-    'focus-visible:ring'
+    ...focusVisibleRing
   ],
   variants: {
     appearance: {
@@ -25,10 +26,10 @@ const baseButton = tv({
     },
     intent: {
       default: '',
-      primary: '',
-      success: '',
-      warning: '',
-      danger: ''
+      primary: 'focus-visible:ring-primary-500',
+      success: 'focus-visible:ring-success-500',
+      warning: 'focus-visible:ring-warning',
+      danger: 'focus-visible:ring-danger'
     },
     size: {
       xs: 'text-sm px-2 py-1',

packages/theme/src/components/chip.ts

@@ -37,20 +37,36 @@ const chip = tv({
         closeButton: [
           'bg-primary-700',
           'text-background',
-          'hover:bg-primary-700/60'
+          'hover:bg-primary-700/60',
+          'focus-visible:ring-primary-700'
         ]
       },
       success: {
         dot: 'bg-success',
-        closeButton: ['bg-success', 'text-background', 'hover:bg-success/60']
+        closeButton: [
+          'bg-success',
+          'text-background',
+          'hover:bg-success/60',
+          'focus-visible:ring-success'
+        ]
       },
       warning: {
         dot: 'bg-warning',
-        closeButton: ['bg-warning', 'text-background', 'hover:bg-warning/60']
+        closeButton: [
+          'bg-warning',
+          'text-background',
+          'hover:bg-warning/60',
+          'focus-visible:ring-warning'
+        ]
       },
       danger: {
         dot: 'bg-danger',
-        closeButton: ['bg-danger', 'text-background', 'hover:bg-danger/60']
+        closeButton: [
+          'bg-danger',
+          'text-background',
+          'hover:bg-danger/60',
+          'focus-visible:ring-danger'
+        ]
       }
     },
     size: {

packages/theme/src/components/close-button.ts

@@ -1,8 +1,12 @@
 import { tv, type VariantProps } from '../tw';
+import { focusVisibleRing } from './shared';
 
 const closeButton = tv({
   slots: {
-    base: 'rounded-full transition transition-200 focus-visible:ring text-inherit',
+    base: [
+      'rounded-full transition transition-200 text-inherit',
+      ...focusVisibleRing
+    ],
     icon: 'size-[1em]'
   },
 

packages/theme/src/components/forms/forms.ts

@@ -1,4 +1,5 @@
 import { tv, type VariantProps } from '../../tw';
+import { focusVisibleRing, focusVisibleWithinRing } from '../shared';
 
 const label = tv({
   slots: {
@@ -135,7 +136,8 @@ const checkboxRadioBase = tv({
       'text-primary',
       'border border-default-400',
       'bg-white dark:bg-default-100',
-      'checked:bg-origin-border checked:border-transparent dark:checked:bg-current checked:bg-current checked:bg-center checked:bg-no-repeat checked:disabled:bg-default-300'
+      'checked:bg-origin-border checked:border-transparent dark:checked:bg-current checked:bg-current checked:bg-center checked:bg-no-repeat checked:disabled:bg-default-300',
+      ...focusVisibleRing
     ],
     labelContainer: ['flex flex-col ml-2'],
     label: 'font-normal pb-0'
@@ -265,7 +267,8 @@ const switchInput = tv({
       'bg-default-300',
       'rounded-full',
       'cursor-pointer touch-none tap-highlight-transparent select-none',
-      'transition-background'
+      'transition-background',
+      ...focusVisibleWithinRing
     ],
     hiddenInput: [
       'font-inherit',

packages/theme/src/components/notification-card.ts

@@ -1,15 +1,18 @@
 import { tv } from '../tw';
+import { focusVisibleRing } from './shared';
 
-const btn = 'transition transition-200 focus-visible:ring';
+const btn = ['transition transition-200', ...focusVisibleRing];
 
 const notificationCard = tv({
   slots: {
     base: 'py-3 px-4 overflow-hidden flex items-center justify-between relative min-h-16 text-sm rounded shadow transition-all transition-200 ease-in-out',
     message: 'grow',
     customActions: 'flex flex-nowrap',
-    customActionButton:
-      btn + ' first:ml-4 last:-mr-2 font-semibold py-1 px-2 rounded',
-    closeButton: btn + ' inline-block p-2 ml-2 -mr-2 rounded-full'
+    customActionButton: [
+      ...btn,
+      'first:ml-4 last:-mr-2 font-semibold py-1 px-2 rounded'
+    ],
+    closeButton: [...btn, 'inline-block p-2 ml-2 -mr-2 rounded-full']
   },
 
   variants: {

packages/theme/src/components/overlays.ts

@@ -54,7 +54,7 @@ const modal = tv({
 
 const drawer = tv({
   slots: {
-    base: 'flex flex-col absolute text-content1-foreground bg-content1 w-full h-full shadow',
+    base: 'flex flex-col absolute text-content1-foreground bg-content1 w-full h-full shadow outline-none',
     closeButton: 'absolute top-2 right-2 dark:hover:bg-content2',
     header: 'font-bold text-xl p-4 rounded-tl rounded-tr',
     body: 'p-4 grow overflow-y-auto',

packages/theme/src/components/shared.ts

@@ -0,0 +1,17 @@
+export const focusVisibleRing = [
+  'outline-none',
+  'focus-visible:z-10',
+  'focus-visible:ring',
+  'focus-visible:ring-focus',
+  'focus-visible:ring-offset-2',
+  'focus-visible:ring-offset-background'
+];
+
+export const focusVisibleWithinRing = [
+  'outline-none',
+  'has-[:focus-visible]:z-10',
+  'has-[:focus-visible]:ring',
+  'has-[:focus-visible]:ring-focus',
+  'has-[:focus-visible]:ring-offset-2',
+  'has-[:focus-visible]:ring-offset-background'
+];