From 1622da5db91a2aa978265266a8f6f61e8b75ec8d Mon Sep 17 00:00:00 2001
From: taskylizard <75871323+taskylizard@users.noreply.github.com>
Date: Thu, 27 Mar 2025 12:54:11 +0000
Subject: [PATCH] feat: improve feedback component, brand color picker

---
 docs/.vitepress/theme/Appearance.vue          |   4 +-
 .../theme/components/ColorPicker.vue          |  88 ++++++++++++
 docs/.vitepress/theme/components/Feedback.vue |  60 ++++++--
 .../theme/components/SidebarCard.vue          |  15 +-
 docs/.vitepress/theme/style.scss              |  65 +++++++++
 package.json                                  |   3 +
 pnpm-lock.yaml                                | 129 +++++++++++++++++-
 unocss.config.ts                              |  57 ++++++++
 8 files changed, 390 insertions(+), 31 deletions(-)
 create mode 100644 docs/.vitepress/theme/components/ColorPicker.vue

diff --git a/docs/.vitepress/theme/Appearance.vue b/docs/.vitepress/theme/Appearance.vue
index d2a81f015..6ea9f544c 100644
--- a/docs/.vitepress/theme/Appearance.vue
+++ b/docs/.vitepress/theme/Appearance.vue
@@ -29,8 +29,8 @@ onMounted(() => {
   >
     <ClientOnly>
       <Transition name="fade" mode="out-in">
-        <VPIconSun v-if="!isDark" class="sun" />
-        <VPIconMoon v-else class="moon" />
+        <div v-if="!isDark" class="sun text-xl i-ph-sun-duotone" />
+        <div v-else class="moon text-xl i-ph-moon-duotone" />
       </Transition>
     </ClientOnly>
   </button>
diff --git a/docs/.vitepress/theme/components/ColorPicker.vue b/docs/.vitepress/theme/components/ColorPicker.vue
new file mode 100644
index 000000000..3615c4821
--- /dev/null
+++ b/docs/.vitepress/theme/components/ColorPicker.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import { colors } from '@fmhy/colors'
+import { useStorage, useStyleTag } from '@vueuse/core'
+import { watch } from 'vue'
+
+const colorScales = [
+  '50',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+  '950'
+] as const
+
+type ColorNames = keyof typeof colors
+const selectedColor = useStorage<ColorNames>('preferred-color', 'swarm')
+
+const colorOptions = Object.keys(colors).filter(
+  (key) => typeof colors[key as keyof typeof colors] === 'object'
+) as Array<ColorNames>
+
+const { css } = useStyleTag('', { id: 'brand-color' })
+
+const updateThemeColor = (colorName: ColorNames) => {
+  const colorSet = colors[colorName]
+
+  const cssVars = colorScales
+    .map((scale) => `--vp-c-brand-${scale}: ${colorSet[scale]};`)
+    .join('\n    ')
+
+  css.value = `
+    :root {
+      ${cssVars}
+      --vp-c-brand-1: ${colorSet[500]};
+      --vp-c-brand-2: ${colorSet[600]};
+      --vp-c-brand-3: ${colorSet[800]};
+      --vp-c-brand-soft: ${colorSet[400]};
+    }
+
+    .dark {
+      ${cssVars}
+      --vp-c-brand-1: ${colorSet[400]};
+      --vp-c-brand-2: ${colorSet[500]};
+      --vp-c-brand-3: ${colorSet[700]};
+      --vp-c-brand-soft: ${colorSet[300]};
+    }
+  `
+}
+
+// Initialize theme color
+updateThemeColor(selectedColor.value)
+
+watch(selectedColor, updateThemeColor)
+
+const normalizeColorName = (colorName: string) =>
+  colorName.replaceAll(/-/g, ' ').charAt(0).toUpperCase() +
+  colorName.slice(1).replaceAll(/-/g, ' ')
+</script>
+
+<template>
+  <div>
+    <div class="flex flex-wrap gap-2">
+      <div v-for="color in colorOptions" :key="color">
+        <button
+          :class="[
+            'inline-block w-6 h-6 rounded-full transition-all duration-200'
+          ]"
+          @click="selectedColor = color"
+          :title="normalizeColorName(color)"
+        >
+          <span
+            class="inline-block w-6 h-6 rounded-full"
+            :style="{ backgroundColor: colors[color][500] }"
+          />
+        </button>
+      </div>
+    </div>
+
+    <div class="mt-2 text-sm text-$vp-c-text-2">
+      Selected: {{ normalizeColorName(selectedColor) }}
+    </div>
+  </div>
+</template>
diff --git a/docs/.vitepress/theme/components/Feedback.vue b/docs/.vitepress/theme/components/Feedback.vue
index 38a1c5dc5..847ba5e96 100644
--- a/docs/.vitepress/theme/components/Feedback.vue
+++ b/docs/.vitepress/theme/components/Feedback.vue
@@ -69,10 +69,12 @@ const isDisabled = computed(() => {
 })
 
 const router = useRouter()
-// prettier-ignore
-const feedback = reactive<
-  Pick<FeedbackType, 'message' | 'page'> & Partial<Pick<FeedbackType, 'type'>>
->({
+
+const feedback = reactive<{
+  message: string
+  page: string
+  type?: FeedbackType['type']
+}>({
   page: router.route.path,
   message: ''
 })
@@ -142,17 +144,45 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value)
     </button>
   </template>
   <template v-else>
-    <button
-      class="bg-$vp-c-default-soft text-primary px2 py1 border-$vp-c-default-soft hover:border-primary mt-2 select-none rounded border-2 border-solid font-bold transition-all duration-300"
-      @click="toggleCard()"
+    <div
+      class="mt-2 p-4 border-2 border-solid bg-brand-50 border-brand-300 dark:bg-brand-950 dark:border-brand-800 rounded-xl col-span-3 transition-colors duration-250"
     >
-      <span
-        :class="
-          isCardShown === false ? `i-lucide:mail mr-2` : `i-lucide:mail-x mr-2`
-        "
-      />
-      <span>Send Feedback</span>
-    </button>
+      <div class="flex items-start md:items-center gap-3">
+        <div class="pt-1 md:pt-0">
+          <div
+            class="w-10 h-10 rounded-full flex items-center justify-center bg-brand-500 dark:bg-brand-400"
+          >
+            <span
+              :class="
+                isCardShown === false
+                  ? `i-lucide:mail w-6 h-6 text-white dark:text-brand-950`
+                  : `i-lucide:mail-x w-6 h-6 text-white dark:text-brand-950`
+              "
+            />
+          </div>
+        </div>
+        <div
+          class="flex-grow flex items-start md:items-center gap-3 flex-col md:flex-row"
+        >
+          <div class="flex-grow">
+            <div class="font-semibold text-brand-950 dark:text-brand-50">
+              Got feedback?
+            </div>
+            <div class="text-sm text-brand-800 dark:text-brand-100">
+              We'd love to know what you think about this page.
+            </div>
+          </div>
+          <div>
+            <button
+              class="inline-block text-center rounded-full px-4 py-2.5 text-sm font-medium border-2 border-solid text-brand-700 border-brand-300 dark:text-brand-100 dark:border-brand-800"
+              @click="toggleCard()"
+            >
+              Share Feedback
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
   </template>
 
   <Transition name="fade" mode="out-in">
@@ -254,7 +284,7 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value)
             </button>
             <button
               type="submit"
-              class="border border-div rounded-lg transition-colors duration-250 inline-block text-14px font-500 leading-1.5 px-3 py-3 text-center align-middle whitespace-nowrap disabled:opacity-50 text-text-2 bg-swarm-100 dark:bg-swarm-700 border-swarm-800 dark:border-swarm-700 disabled:bg-swarm-100 dark:disabled:bg-swarm-900 hover:border-swarm-900 dark:hover:border-swarm-800 hover:bg-swarm-200 dark:hover:bg-swarm-800"
+              class="border border-div rounded-lg transition-colors duration-250 inline-block text-14px font-500 leading-1.5 px-3 py-3 text-center align-middle whitespace-nowrap disabled:opacity-50 text-text-2 bg-brand-100 dark:bg-brand-700 border-brand-800 dark:border-brand-700 disabled:bg-brand-100 dark:disabled:bg-brand-900 hover:border-brand-900 dark:hover:border-brand-800 hover:bg-brand-200 dark:hover:bg-brand-800"
               :disabled="isDisabled"
               @click="handleSubmit()"
             >
diff --git a/docs/.vitepress/theme/components/SidebarCard.vue b/docs/.vitepress/theme/components/SidebarCard.vue
index 6821f3590..48f0bb316 100644
--- a/docs/.vitepress/theme/components/SidebarCard.vue
+++ b/docs/.vitepress/theme/components/SidebarCard.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import Field from './CardField.vue'
+import ColorPicker from './ColorPicker.vue'
 import InputField from './InputField.vue'
 import ToggleStarred from './ToggleStarred.vue'
 </script>
@@ -16,7 +17,7 @@ import ToggleStarred from './ToggleStarred.vue'
     <Field icon="i-twemoji-globe-with-meridians">Indexes</Field>
     <Field icon="i-twemoji-repeat-button">Storage Links</Field>
     <Field icon="i-twemoji-star">Recommendations</Field>
-    <div class="align-center mb-4 flex justify-between">
+    <div class="align-center mb-4 mt-4 flex justify-between">
       <div class="text-$vp-c-text-1 lh-relaxed text-sm font-bold">Options</div>
     </div>
     <InputField id="toggle-starred" label="Toggle Starred">
@@ -25,16 +26,6 @@ import ToggleStarred from './ToggleStarred.vue'
       </template>
     </InputField>
 
-    <Field icon="i-lucide:github">
-      <a
-        href="https://github.com/fmhy/edit"
-        target="_blank"
-        rel="noopener noreferrer"
-        aria-label="Star FMHY on GitHub"
-        class="text-primary underline font-bold"
-      >
-        Star on GitHub
-      </a>
-    </Field>
+    <ColorPicker />
   </div>
 </template>
diff --git a/docs/.vitepress/theme/style.scss b/docs/.vitepress/theme/style.scss
index fcf538187..fe5d10206 100644
--- a/docs/.vitepress/theme/style.scss
+++ b/docs/.vitepress/theme/style.scss
@@ -257,6 +257,71 @@
   font-weight: bold;
 }
 
+.info.custom-block a {
+  color: var(--vp-custom-block-info-text);
+  font-weight: 500;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: opacity 0.25s;
+}
+
+.info.custom-block a:hover {
+  opacity: 0.7;
+  color: var(--vp-custom-block-info-text-deep);
+}
+
+.note.custom-block a {
+  color: var(--vp-custom-block-info-text);
+  font-weight: 500;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: opacity 0.25s;
+}
+
+.note.custom-block a:hover {
+  opacity: 0.7;
+  color: var(--vp-custom-block-note-text-deep);
+}
+
+.tip.custom-block a {
+  color: var(--vp-custom-block-tip-text);
+  font-weight: 500;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: opacity 0.25s;
+}
+
+.tip.custom-block a:hover {
+  opacity: 0.7;
+  color: var(--vp-custom-block-tip-text-deep);
+}
+
+.warning.custom-block a {
+  color: var(--vp-custom-block-warning-text);
+  font-weight: 500;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: opacity 0.25s;
+}
+
+.warning.custom-block a:hover {
+  opacity: 0.7;
+  color: var(--vp-custom-block-warning-text-deep);
+}
+
+.danger.custom-block a {
+  color: var(--vp-custom-block-danger-text);
+  font-weight: 500;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  transition: opacity 0.25s;
+}
+
+.danger.custom-block a:hover {
+  opacity: 0.7;
+  color: var(--vp-custom-block-danger-text-deep);
+}
+
 .info.custom-block {
   --icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWluZm8iPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTEyIDE2di00Ii8+PHBhdGggZD0iTTEyIDhoLjAxIi8+PC9zdmc+');
 }
diff --git a/package.json b/package.json
index 4670a4b44..50d366f33 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "docs:dev": "vitepress dev docs/",
     "docs:preview": "vitepress preview docs/",
     "format": "prettier -w --cache --check .",
+    "licenser": "deno run --allow-read jsr:@kt3k/license-checker@3.3.1/main",
     "og:dev": "x-satori -t ./docs/.vitepress/hooks/Template.vue -c ./.vitepress/hooks/satoriConfig.ts --dev"
   },
   "dependencies": {
@@ -31,6 +32,7 @@
     "nitropack": "^2.11.6",
     "nprogress": "^0.2.0",
     "pathe": "^2.0.1",
+    "reka-ui": "^2.1.1",
     "unocss": "66.1.0-beta.3",
     "vitepress": "^1.6.3",
     "vue": "^3.5.13",
@@ -44,6 +46,7 @@
     "@iconify-json/heroicons-solid": "^1.2.0",
     "@iconify-json/lucide": "^1.2.10",
     "@iconify-json/mdi": "^1.2.1",
+    "@iconify-json/ph": "^1.2.2",
     "@iconify-json/simple-icons": "^1.2.12",
     "@iconify-json/twemoji": "^1.2.1",
     "@iconify/utils": "^2.3.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 578334592..195c6da8f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,9 @@ importers:
       pathe:
         specifier: ^2.0.1
         version: 2.0.1
+      reka-ui:
+        specifier: ^2.1.1
+        version: 2.1.1(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
       unocss:
         specifier: 66.1.0-beta.3
         version: 66.1.0-beta.3(vite@5.4.14(@types/node@20.16.12)(sass@1.85.1)(terser@5.39.0))(vue@3.5.13(typescript@5.8.2))
@@ -78,6 +81,9 @@ importers:
       '@iconify-json/mdi':
         specifier: ^1.2.1
         version: 1.2.1
+      '@iconify-json/ph':
+        specifier: ^1.2.2
+        version: 1.2.2
       '@iconify-json/simple-icons':
         specifier: ^1.2.12
         version: 1.2.12
@@ -973,6 +979,18 @@ packages:
     resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
     engines: {node: '>=14'}
 
+  '@floating-ui/core@1.6.9':
+    resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==}
+
+  '@floating-ui/dom@1.6.13':
+    resolution: {integrity: sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==}
+
+  '@floating-ui/utils@0.2.9':
+    resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
+
+  '@floating-ui/vue@1.1.6':
+    resolution: {integrity: sha512-XFlUzGHGv12zbgHNk5FN2mUB7ROul3oG2ENdTpWdE+qMFxyNxWSRmsoyhiEnpmabNm6WnUvR1OvJfUfN4ojC1A==}
+
   '@fmhy/colors@0.0.11':
     resolution: {integrity: sha512-sNwSoifyPi+9s/wOXXl9B3qpcfMDNj4HtNlxtf6FQs2LUshcxx226KIJgnxRwawGmQq26Vck1dcJESC6s4QwiA==}
     engines: {node: '>=18.16.1'}
@@ -1012,6 +1030,9 @@ packages:
   '@iconify-json/mdi@1.2.1':
     resolution: {integrity: sha512-dSkQU78gsZV6Yxnq78+LuX7jzeFC/5NAmz7O3rh558GimGFcwMVY/OtqRowIzjqJBmMmWZft7wkFV4TrwRXjlg==}
 
+  '@iconify-json/ph@1.2.2':
+    resolution: {integrity: sha512-PgkEZNtqa8hBGjHXQa4pMwZa93hmfu8FUSjs/nv4oUU6yLsgv+gh9nu28Kqi8Fz9CCVu4hj1MZs9/60J57IzFw==}
+
   '@iconify-json/simple-icons@1.2.12':
     resolution: {integrity: sha512-lRNORrIdeLStShxAjN6FgXE1iMkaAgiAHZdP0P0GZecX91FVYW58uZnRSlXLlSx5cxMoELulkAAixybPA2g52g==}
 
@@ -1132,6 +1153,12 @@ packages:
     cpu: [x64]
     os: [win32]
 
+  '@internationalized/date@3.7.0':
+    resolution: {integrity: sha512-VJ5WS3fcVx0bejE/YHfbDKR/yawZgKqn/if+oEeLqNwBtPzVB06olkfcnojTmEMX+gTpH+FlQ69SHNitJ8/erQ==}
+
+  '@internationalized/number@3.6.0':
+    resolution: {integrity: sha512-PtrRcJVy7nw++wn4W2OuePQQfTqDzfusSuY1QTtui4wa7r+rGVtR75pO8CyKvHvzyQYi3Q1uO5sY0AsB4e65Bw==}
+
   '@ioredis/commands@1.2.0':
     resolution: {integrity: sha512-Sx1pU8EM64o2BrqNpEO1CNLtKQwyhuXuqyfH7oGKCk+1a33d2r5saW8zNwm3j6BTExtjrv2BxTgzzkMwts6vGg==}
 
@@ -1633,14 +1660,25 @@ packages:
   '@speed-highlight/core@1.2.7':
     resolution: {integrity: sha512-0dxmVj4gxg3Jg879kvFS/msl4s9F3T9UXC1InxgOf7t5NvcPD97u/WTA5vL/IxWHMn7qSxBozqrnnE2wvl1m8g==}
 
+  '@swc/helpers@0.5.15':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
   '@tanstack/virtual-core@3.0.0':
     resolution: {integrity: sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg==}
 
+  '@tanstack/virtual-core@3.13.5':
+    resolution: {integrity: sha512-gMLNylxhJdUlfRR1G3U9rtuwUh2IjdrrniJIDcekVJN3/3i+bluvdMi3+eodnxzJq5nKnxnigo9h0lIpaqV6HQ==}
+
   '@tanstack/vue-virtual@3.0.2':
     resolution: {integrity: sha512-1iFpX+yZswHuf4wrA6GU9yJ/YzQ/8SacABwqghwCkcwrkZbOPLlRSdOAqZ1WQ50SftmfhZpaiZl2KmpV7cgfMQ==}
     peerDependencies:
       vue: ^2.7.0 || ^3.0.0
 
+  '@tanstack/vue-virtual@3.13.5':
+    resolution: {integrity: sha512-1hhUA6CUjmKc5JDyKLcYOV6mI631FaKKxXh77Ja4UtIy6EOofYaLPk8vVgvK6vLMUSfHR2vI3ZpPY9ibyX60SA==}
+    peerDependencies:
+      vue: ^2.7.0 || ^3.0.0
+
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
@@ -1965,6 +2003,10 @@ packages:
   argparse@2.0.1:
     resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
 
+  aria-hidden@1.2.4:
+    resolution: {integrity: sha512-y+CcFFwelSXpLZk/7fMB2mUbGtX9lKycf1MWJ7CaTIERyitVlyQx6C+sxcROU2BAJ24OiZyK+8wj2i8AlBoS3A==}
+    engines: {node: '>=10'}
+
   as-table@1.0.55:
     resolution: {integrity: sha512-xvsWESUJn0JN421Xb9MQw6AsMHRCUknCe0Wjlxvjud80mU4E6hQf1A6NzQKcYNmYw62MfzEtXc+badstZP3JpQ==}
 
@@ -3343,6 +3385,11 @@ packages:
   regex@6.0.1:
     resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
 
+  reka-ui@2.1.1:
+    resolution: {integrity: sha512-awvpQ041LPXAvf2uRVFwedsyz9SwsuoWlRql1fg4XimUCxEI2GOfHo6FIdL44dSPb/eG/gWbdGhoGHLlbX5gPA==}
+    peerDependencies:
+      vue: '>= 3.2.0'
+
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -3934,6 +3981,17 @@ packages:
       postcss:
         optional: true
 
+  vue-demi@0.14.10:
+    resolution: {integrity: sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-flow-layout@0.1.1:
     resolution: {integrity: sha512-JdgRRUVrN0Y2GosA0M68DEbKlXMqJ7FQgsK8CjQD2vxvNSqAU6PZEpi4cfcTVtfM2GVOMjHo7GKKLbXxOBqDqA==}
     peerDependencies:
@@ -4688,6 +4746,26 @@ snapshots:
 
   '@fastify/busboy@2.1.1': {}
 
+  '@floating-ui/core@1.6.9':
+    dependencies:
+      '@floating-ui/utils': 0.2.9
+
+  '@floating-ui/dom@1.6.13':
+    dependencies:
+      '@floating-ui/core': 1.6.9
+      '@floating-ui/utils': 0.2.9
+
+  '@floating-ui/utils@0.2.9': {}
+
+  '@floating-ui/vue@1.1.6(vue@3.5.13(typescript@5.8.2))':
+    dependencies:
+      '@floating-ui/dom': 1.6.13
+      '@floating-ui/utils': 0.2.9
+      vue-demi: 0.14.10(vue@3.5.13(typescript@5.8.2))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - vue
+
   '@fmhy/colors@0.0.11': {}
 
   '@fmhy/components@0.0.3(typescript@5.8.2)(vitepress@1.6.3(@algolia/client-search@5.21.0)(@types/node@20.16.12)(change-case@5.4.4)(nprogress@0.2.0)(postcss@8.5.3)(sass@1.85.1)(terser@5.39.0)(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))':
@@ -4731,6 +4809,10 @@ snapshots:
     dependencies:
       '@iconify/types': 2.0.0
 
+  '@iconify-json/ph@1.2.2':
+    dependencies:
+      '@iconify/types': 2.0.0
+
   '@iconify-json/simple-icons@1.2.12':
     dependencies:
       '@iconify/types': 2.0.0
@@ -4833,6 +4915,14 @@ snapshots:
   '@img/sharp-win32-x64@0.33.5':
     optional: true
 
+  '@internationalized/date@3.7.0':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
+  '@internationalized/number@3.6.0':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
   '@ioredis/commands@1.2.0': {}
 
   '@isaacs/cliui@8.0.2':
@@ -5272,13 +5362,24 @@ snapshots:
 
   '@speed-highlight/core@1.2.7': {}
 
+  '@swc/helpers@0.5.15':
+    dependencies:
+      tslib: 2.8.1
+
   '@tanstack/virtual-core@3.0.0': {}
 
+  '@tanstack/virtual-core@3.13.5': {}
+
   '@tanstack/vue-virtual@3.0.2(vue@3.5.13(typescript@5.8.2))':
     dependencies:
       '@tanstack/virtual-core': 3.0.0
       vue: 3.5.13(typescript@5.8.2)
 
+  '@tanstack/vue-virtual@3.13.5(vue@3.5.13(typescript@5.8.2))':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.5
+      vue: 3.5.13(typescript@5.8.2)
+
   '@types/estree@1.0.5': {}
 
   '@types/estree@1.0.6': {}
@@ -5690,6 +5791,10 @@ snapshots:
 
   argparse@2.0.1: {}
 
+  aria-hidden@1.2.4:
+    dependencies:
+      tslib: 2.8.1
+
   as-table@1.0.55:
     dependencies:
       printable-characters: 1.0.42
@@ -7126,6 +7231,23 @@ snapshots:
     dependencies:
       regex-utilities: 2.3.0
 
+  reka-ui@2.1.1(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2)):
+    dependencies:
+      '@floating-ui/dom': 1.6.13
+      '@floating-ui/vue': 1.1.6(vue@3.5.13(typescript@5.8.2))
+      '@internationalized/date': 3.7.0
+      '@internationalized/number': 3.6.0
+      '@tanstack/vue-virtual': 3.13.5(vue@3.5.13(typescript@5.8.2))
+      '@vueuse/core': 12.8.2(typescript@5.8.2)
+      '@vueuse/shared': 12.8.2(typescript@5.8.2)
+      aria-hidden: 1.2.4
+      defu: 6.1.4
+      ohash: 2.0.11
+      vue: 3.5.13(typescript@5.8.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+      - typescript
+
   require-directory@2.1.1: {}
 
   require-from-string@2.0.2: {}
@@ -7498,8 +7620,7 @@ snapshots:
 
   trim-lines@3.0.1: {}
 
-  tslib@2.8.1:
-    optional: true
+  tslib@2.8.1: {}
 
   type-fest@4.37.0: {}
 
@@ -7818,6 +7939,10 @@ snapshots:
       - typescript
       - universal-cookie
 
+  vue-demi@0.14.10(vue@3.5.13(typescript@5.8.2)):
+    dependencies:
+      vue: 3.5.13(typescript@5.8.2)
+
   vue-flow-layout@0.1.1(vue@3.5.13(typescript@5.8.2)):
     dependencies:
       vue: 3.5.13(typescript@5.8.2)
diff --git a/unocss.config.ts b/unocss.config.ts
index acf972b30..c95ff78e3 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -14,6 +14,7 @@
  *  limitations under the License.
  */
 
+import type { Rule } from 'unocss'
 import { colors, shortcuts } from '@fmhy/colors'
 import {
   defineConfig,
@@ -23,6 +24,38 @@ import {
   transformerDirectives
 } from 'unocss'
 
+const colorScales = [
+  '50',
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+  '950'
+] as const
+
+const colorPattern = Object.keys(colors).join('|')
+const createColorRules = (type: 'text' | 'bg' | 'border'): Rule[] => {
+  const property =
+    type === 'text'
+      ? 'color'
+      : type === 'bg'
+        ? 'background-color'
+        : 'border-color'
+
+  return colorScales.map(
+    (scale) =>
+      [
+        new RegExp(`^${type}-(${colorPattern})-${scale}$`),
+        ([, color]) => ({ [property]: colors[color][scale] })
+      ] as const
+  )
+}
+
 export default defineConfig({
   content: {
     filesystem: ['.vitepress/config.mts', '.vitepress/constants.ts']
@@ -39,6 +72,30 @@ export default defineConfig({
       div: 'var(--vp-c-divider)'
     }
   },
+  rules: [
+    // Brand color utilities
+    [
+      /^brand-(\d+)$/,
+      ([, d]) => ({ color: `var(--vp-c-brand-${d})` })
+    ] as const,
+    [
+      /^bg-brand-(\d+)$/,
+      ([, d]) => ({ 'background-color': `var(--vp-c-brand-${d})` })
+    ] as const,
+    [
+      /^border-brand-(\d+)$/,
+      ([, d]) => ({ 'border-color': `var(--vp-c-brand-${d})` })
+    ] as const,
+    [
+      /^text-brand-(\d+)$/,
+      ([, d]) => ({ color: `var(--vp-c-brand-${d})` })
+    ] as const,
+
+    // Color scale utilities
+    ...createColorRules('text'),
+    ...createColorRules('bg'),
+    ...createColorRules('border')
+  ],
   presets: [
     presetUno(),
     presetAttributify(),