feat: improve feedback component, brand color picker

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(),