From 4d0c422b216e44f1dc92f8aca79a6548655dbceb Mon Sep 17 00:00:00 2001
From: zuixinwang <59717852+zuixinwang@users.noreply.github.com>
Date: Thu, 11 May 2023 11:16:34 +0800
Subject: [PATCH 1/2] fix(style): switch, radio, checkbox hover style

close #221
---
 packages/devtools-ui-kit/src/components/NSwitch.vue | 2 +-
 packages/devtools-ui-kit/src/unocss.ts              | 3 +++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/devtools-ui-kit/src/components/NSwitch.vue b/packages/devtools-ui-kit/src/components/NSwitch.vue
index 459f248d2..644f1b77e 100644
--- a/packages/devtools-ui-kit/src/components/NSwitch.vue
+++ b/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"
   >
diff --git a/packages/devtools-ui-kit/src/unocss.ts b/packages/devtools-ui-kit/src/unocss.ts
index b1cd955a9..153243fd8 100644
--- a/packages/devtools-ui-kit/src/unocss.ts
+++ b/packages/devtools-ui-kit/src/unocss.ts
@@ -114,18 +114,21 @@ export function unocssPreset(): Preset {
 
       // checkbox
       'n-checkbox': 'inline-flex gap-1 items-center',
+      'n-checkbox-hover': 'op100 text-context 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-hover': 'op100 text-context 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-hover': 'op100 text-context 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',

From 4aad06b679bc4f37fd63791f93c400abef005386 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Thu, 11 May 2023 06:29:37 +0200
Subject: [PATCH 2/2] fix: update

---
 .../devtools-ui-kit/src/components/NDarkToggle.vue   |  5 +++--
 packages/devtools-ui-kit/src/unocss.ts               | 12 ++++++------
 packages/devtools/client/pages/settings.vue          |  2 +-
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/packages/devtools-ui-kit/src/components/NDarkToggle.vue b/packages/devtools-ui-kit/src/components/NDarkToggle.vue
index a5049855f..c40448ab3 100644
--- a/packages/devtools-ui-kit/src/components/NDarkToggle.vue
+++ b/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
 
 /**
diff --git a/packages/devtools-ui-kit/src/unocss.ts b/packages/devtools-ui-kit/src/unocss.ts
index 153243fd8..cbff99fc2 100644
--- a/packages/devtools-ui-kit/src/unocss.ts
+++ b/packages/devtools-ui-kit/src/unocss.ts
@@ -113,22 +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-hover': 'op100 text-context cursor-pointer',
+      '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-hover': 'op100 text-context cursor-pointer',
+      '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-hover': 'op100 text-context cursor-pointer',
+      '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',
diff --git a/packages/devtools/client/pages/settings.vue b/packages/devtools/client/pages/settings.vue
index 124f03081..8b9d1b012 100644
--- a/packages/devtools/client/pages/settings.vue
+++ b/packages/devtools/client/pages/settings.vue
@@ -67,7 +67,7 @@ function toggleTabCategory(name: string, v: boolean) {
             <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)"
                 >