fix(style): switch, radio, checkbox hover style

packages/devtools-ui-kit/src/components/NDarkToggle.vue

@@ -14,8 +14,9 @@ const isDark = computed<boolean>({
   },
 })
 
-// @ts-expect-error: Transition API
-const isAppearanceTransition = document.startViewTransition
+const isAppearanceTransition = typeof document !== 'undefined'
+  // @ts-expect-error: Transition API
+  && document.startViewTransition
   && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
 
 /**

packages/devtools-ui-kit/src/components/NSwitch.vue

@@ -16,7 +16,7 @@ const checked = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <label
-    class="n-switch n-switch-base n-disabled:n-disabled"
+    class="n-switch n-switch-base hover:n-switch-hover n-disabled:n-disabled"
     :checked="checked || null"
     :disabled="disabled || null"
   >

packages/devtools-ui-kit/src/unocss.ts

@@ -113,19 +113,22 @@ export function unocssPreset(): Preset {
       'n-button-icon': '-ml-0.2em mr-0.2em text-1.1em',
 
       // checkbox
-      'n-checkbox': 'inline-flex gap-1 items-center',
+      'n-checkbox': 'inline-flex gap-1 items-center rounded',
+      'n-checkbox-hover': 'op100 n-bg-hover cursor-pointer',
       'n-checkbox-box': 'border n-border-base w-1.1em h-1.1em mr-1 text-white flex flex-none items-center rounded-sm overflow-visible',
       'n-checkbox-box-checked': 'bg-context border-context',
       'n-checkbox-icon': 'carbon-checkmark w-1em h-1em m-auto',
 
       // radio
-      'n-radio-box': 'border n-border-base w-1.2em h-1.2em mr-1 text-white flex flex-none rounded-full overflow-visible',
+      'n-radio-box': 'border rounded n-border-base w-1.2em h-1.2em mr-1 text-white flex flex-none rounded-full overflow-visible',
+      'n-radio-hover': 'op100 n-bg-hover cursor-pointer',
       'n-radio-box-checked': 'border-context',
       'n-radio-inner': 'bg-context rounded-1/2 w-0 h-0 m-auto',
       'n-radio-inner-checked': 'w-0.8em h-0.8em',
 
       // switch
-      'n-switch-base': 'inline-flex items-center select-none',
+      'n-switch-base': 'inline-flex items-center select-none rounded-full pe-2',
+      'n-switch-hover': 'op100 n-bg-hover cursor-pointer',
       'n-switch-slider': 'mr-1 rounded-full border n-border-base relative p-2px',
       'n-switch-slider-checked': 'border-context/20 bg-context/10',
       'n-switch-thumb': 'h-1em w-1em rounded-1/2 border n-border-base ml-0 mr-0.8em',

packages/devtools/client/pages/settings.vue

@@ -67,7 +67,7 @@
             <div flex="~ col gap-1" border="~ base rounded" py3 pl4 pr2>
               <template v-for="tab of tabs" :key="tab.name">
                 <NSwitch
-                  flex="~ row-reverse" py1 n-primary
+                  flex="~ row-reverse" py1 pl2 pr1 n-primary
                   :model-value="!hiddenTabs.includes(tab.name)"
                   @update:model-value="v => toggleTab(tab.name, v)"
                 >
@@ -89,7 +89,7 @@
           <div>
             <NDarkToggle v-slot="{ toggle, isDark }">
               <NButton n="primary" @click="toggle">
                 <div carbon-sun dark:carbon-moon translate-y--1px /> {{ isDark.value ? 'Dark' : 'Light' }}
               </NButton>
             </NDarkToggle>
           </div>