[Components] [Button] Support calculation of hover color

src/ui/button/button.vue

@@ -1,6 +1,6 @@
 <template>
   <Button :class="cn(computedSize,
-                     `bg-[${computedType}]`,
+                     `bg-[${computedType}] hover:bg-[${calculateHoverColor(computedType)}]`,
                      { 'rounded-full': round },
                      { 'rounded-full': circle })"
           :size="circle ? 'icon' : 'default'"
@@ -28,6 +28,7 @@ import { Button } from '@/components/ui/button'
 import { Type } from '@/ui/enum/Type.ts'
 import { cn } from '@/lib/utils.ts'
 import { Loader2 } from 'lucide-vue-next'
+import { calculateHoverColor } from '@/utils/Color.ts'
 
 export default defineComponent({
   name: 'IButton',
@@ -75,6 +76,7 @@ export default defineComponent({
 
     return {
       cn,
+      calculateHoverColor,
       computedSize,
       computedType
     }

src/utils/Color.ts

@@ -0,0 +1,12 @@
+export function calculateHoverColor(color: string): string
+{
+    const hex = color.replace('#', '')
+    const r = parseInt(hex.substring(0, 2), 16)
+    const g = parseInt(hex.substring(2, 4), 16)
+    const b = parseInt(hex.substring(4, 6), 16)
+    const hoverR = Math.max(0, r - 20)
+    const hoverG = Math.max(0, g - 20)
+    const hoverB = Math.max(0, b - 20)
+    const hoverHex = `#${hoverR.toString(16).padStart(2, '0')}${hoverG.toString(16).padStart(2, '0')}${hoverB.toString(16).padStart(2, '0')}`
+    return hoverHex
+}