From b4a35e4ac095a708c584aa062f4a258222be2426 Mon Sep 17 00:00:00 2001
From: Neko Ayaka <neko@ayaka.moe>
Date: Sat, 2 May 2026 21:17:03 +0800
Subject: [PATCH] chore(docs): more style and readability update

---
 docs/.vitepress/components/DocFooter.vue      |  8 ++--
 docs/.vitepress/components/DocSidebarItem.vue |  4 +-
 docs/.vitepress/theme/theme-kbd.css           |  4 +-
 docs/.vitepress/theme/theme-vitepress.css     | 37 +++++++++++++------
 docs/uno.config.ts                            |  2 +-
 5 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/docs/.vitepress/components/DocFooter.vue b/docs/.vitepress/components/DocFooter.vue
index 36808b4b4..af3f2f060 100644
--- a/docs/.vitepress/components/DocFooter.vue
+++ b/docs/.vitepress/components/DocFooter.vue
@@ -86,10 +86,10 @@ const showFooter = computed(
           :class="[
             'shadow-md shadow-transparent dark:shadow-none hover:shadow-black/5',
             'border-2 border-solid border-neutral-100 hover:border-primary/10 dark:border-neutral-800/40',
-            'bg-white/30 dark:bg-neutral-800/30 hover:bg-primary/10 dark:hover:bg-neutral-800/50',
+            'bg-white/30 dark:bg-neutral-800/30 hover:bg-primary/10 dark:hover:bg-primary/10',
             'active:scale-98',
             'transition-all duration-200 ease-in-out',
-            '[&_span,_&_p]:transition-all [&_span,_&_p]:duration-200 [&_span,_&_p]:ease-in-out [&_span,_&_p]:hover:text-primary',
+            '[&_span,_&_p]:transition-all [&_span,_&_p]:duration-200 [&_span,_&_p]:ease-in-out [&_span,_&_p]:hover:text-primary-600 dark:[&_span,_&_p]:hover:text-primary-400',
           ]"
           :href="control.prev.link"
         >
@@ -113,10 +113,10 @@ const showFooter = computed(
           :class="[
             'shadow-md shadow-transparent dark:shadow-none hover:shadow-black/5',
             'border-2 border-solid border-neutral-100 hover:border-primary/10 dark:border-neutral-800/40',
-            'bg-white/30 dark:bg-neutral-800/30 hover:bg-primary/10 dark:hover:bg-neutral-800/50',
+            'bg-white/30 dark:bg-neutral-800/30 hover:bg-primary/10 dark:hover:bg-primary/10',
             'active:scale-98',
             'transition-all duration-200 ease-in-out',
-            '[&_span,_&_p]:transition-all [&_span,_&_p]:duration-200 [&_span,_&_p]:ease-in-out [&_span,_&_p]:hover:text-primary',
+            '[&_span,_&_p]:transition-all [&_span,_&_p]:duration-200 [&_span,_&_p]:ease-in-out [&_span,_&_p]:hover:text-primary-600 dark:[&_span,_&_p]:hover:text-primary-400',
           ]"
           :href="control.next.link"
         >
diff --git a/docs/.vitepress/components/DocSidebarItem.vue b/docs/.vitepress/components/DocSidebarItem.vue
index 2100d9791..8fb05693c 100644
--- a/docs/.vitepress/components/DocSidebarItem.vue
+++ b/docs/.vitepress/components/DocSidebarItem.vue
@@ -45,7 +45,7 @@ watch(isActiveLink, () => {
   >
     <CollapsibleTrigger
       :class="[
-        'group w-full inline-flex items-center justify-between rounded-lg py-1 pr-3 text-sm transition-colors duration-150 ease-in-out mb-0.5',
+        'group w-full inline-flex items-center justify-between rounded-lg py-1 pr-3 text-sm transition-colors duration-100 ease-out mb-0.5',
         hasActiveLink ? 'text-foreground' : 'text-muted-foreground',
         'hover:bg-primary/10 hover:text-primary',
       ]"
@@ -78,7 +78,7 @@ watch(isActiveLink, () => {
   <div
     v-else
     :class="[
-      'flex w-full items-center rounded-lg text-sm transition-colors duration-150 ease-in-out hover:bg-card',
+      'flex w-full items-center rounded-lg text-sm transition-colors duration-100 ease-out hover:bg-card',
       isActiveLink ? 'is-active !bg-primary/10 !text-primary font-semibold' : '',
       'hover:bg-primary/10 hover:text-primary',
     ]"
diff --git a/docs/.vitepress/theme/theme-kbd.css b/docs/.vitepress/theme/theme-kbd.css
index f03e132aa..b1740b870 100644
--- a/docs/.vitepress/theme/theme-kbd.css
+++ b/docs/.vitepress/theme/theme-kbd.css
@@ -4,8 +4,8 @@
 .prose kbd,
 .custom-block kbd {
   color: inherit;
-  padding: 4px 8px;
-  font-size: 0.8rem;
+  padding: 3px 6px;
+  font-size: 0.75rem;
   cursor: pointer;
   user-select: none;
   position: relative;
diff --git a/docs/.vitepress/theme/theme-vitepress.css b/docs/.vitepress/theme/theme-vitepress.css
index ba566551e..32b2c9250 100644
--- a/docs/.vitepress/theme/theme-vitepress.css
+++ b/docs/.vitepress/theme/theme-vitepress.css
@@ -88,46 +88,54 @@
 }
 
 .custom-block.info {
-  @apply bg-slate-200/20 dark:bg-slate-900/80 border-none;
+  @apply bg-slate-200/20 dark:bg-slate-900/80 border-none text-sm;
 
   &::before {
     @apply bg-slate-500/20 dark:bg-slate-400/20;
   }
 
   & .custom-block-title {
-    @apply text-slate-800 dark:text-slate-300 font-semibold;
+    @apply text-slate-800 dark:text-slate-300 font-semibold text-base;
+  }
+
+  & ul ::marker {
+    @apply text-slate-700;
   }
 
   &> :not(p:nth-child(1)) {
-    @apply dark:text-slate-50;
+    @apply text-slate-950 dark:text-slate-50 leading-snug;
   }
 }
 
 .custom-block.tip {
-  @apply bg-violet-50 dark:bg-violet-900/20 border-none;
+  @apply bg-violet-50 dark:bg-violet-900/20 border-none text-sm;
 
   &::before {
     @apply bg-violet-500/20 dark:bg-violet-400/20;
   }
 
   & .custom-block-title {
-    @apply text-violet-800 dark:text-violet-300 font-semibold;
+    @apply text-violet-800 dark:text-violet-300 font-semibold text-base;
+  }
+
+  & ul ::marker {
+    @apply text-violet-700;
   }
 
   &> :not(p:nth-child(1)) {
-    @apply dark:text-violet-50;
+    @apply text-violet-950 dark:text-violet-50 leading-snug;
   }
 }
 
 .custom-block.warning {
-  @apply bg-yellow-50 dark:bg-yellow-900/20 border-none;
+  @apply bg-yellow-50 dark:bg-yellow-900/20 border-none text-sm;
 
   &::before {
     @apply bg-yellow-500/20 dark:bg-yellow-400/20;
   }
 
   & .custom-block-title {
-    @apply text-yellow-700 dark:text-yellow-300 font-semibold;
+    @apply text-yellow-700 dark:text-yellow-300 font-semibold text-base;
   }
 
   & ul ::marker {
@@ -135,19 +143,19 @@
   }
 
   &> :not(p:nth-child(1)) {
-    @apply text-yellow-950 dark:text-yellow-50 leading-tight;
+    @apply text-yellow-950 dark:text-yellow-50 leading-snug;
   }
 }
 
 .custom-block.danger {
-  @apply bg-red-100 dark:bg-red-900/20 border-none;
+  @apply bg-red-100 dark:bg-red-900/20 border-none text-sm;
 
   &::before {
     @apply bg-red-500/20 dark:bg-red-400/20;
   }
 
   & .custom-block-title {
-    @apply text-red-800 dark:text-red-300 font-semibold;
+    @apply text-red-800 dark:text-red-300 font-semibold text-base;
   }
 
   & ul ::marker {
@@ -155,10 +163,15 @@
   }
 
   &> :not(p:nth-child(1)) {
-    @apply dark:text-red-50;
+    @apply text-red-950 dark:text-red-50 leading-snug;
   }
 }
 
+article.docs-article .custom-block {
+  margin-top: 0.75rem;
+  margin-bottom: 0.75rem;
+}
+
 pre.shiki.shiki-themes.catppuccin-latte.catppuccin-mocha {
   background-color: #f6f9ff;
 }
diff --git a/docs/uno.config.ts b/docs/uno.config.ts
index f2b1e51fd..3e5909850 100644
--- a/docs/uno.config.ts
+++ b/docs/uno.config.ts
@@ -39,7 +39,7 @@ export default defineConfig({
         'details': {
           'margin-top': '0.5rem',
           'margin-bottom': '0.5rem',
-          'padding': '1rem 1.5rem',
+          'padding': '0.5rem 1rem',
           'background-color': '#a6ceef1a',
         },
         '.dark details': {