chore(Badge): handle color override like buttons

src/runtime/app.config.ts

@@ -109,6 +109,7 @@ const badge = {
     md: 'text-sm px-2 py-1',
     lg: 'text-sm px-2.5 py-1.5'
   },
+  color: {},
   variant: {
     solid: 'bg-{color}-50 dark:bg-{color}-400 dark:bg-opacity-10 text-{color}-500 dark:text-{color}-400 ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 ring-opacity-10 dark:ring-opacity-20'
   },

src/runtime/components/elements/Badge.vue

@@ -29,14 +29,18 @@ export default defineComponent({
       type: String,
       default: () => appConfig.ui.badge.default.color,
       validator (value: string) {
-        return appConfig.ui.colors.includes(value)
+        console.log('Object.keys(appConfig.ui.badge.color)', Object.keys(appConfig.ui.badge.color))
+        return [...appConfig.ui.colors, ...Object.keys(appConfig.ui.badge.color)].includes(value)
       }
     },
     variant: {
       type: String,
       default: () => appConfig.ui.badge.default.variant,
       validator (value: string) {
-        return Object.keys(appConfig.ui.badge.variant).includes(value)
+        return [
+          ...Object.keys(appConfig.ui.badge.variant),
+          ...Object.values(appConfig.ui.badge.color).flatMap(value => Object.keys(value))
+        ].includes(value)
       }
     },
     label: {
@@ -55,12 +59,14 @@ export default defineComponent({
     const ui = computed<Partial<typeof appConfig.ui.badge>>(() => defu({}, props.ui, appConfig.ui.badge))
 
     const badgeClass = computed(() => {
+      const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
+
       return classNames(
         ui.value.base,
         ui.value.font,
         ui.value.rounded,
         ui.value.size[props.size],
-        ui.value.variant[props.variant]?.replaceAll('{color}', props.color)
+        variant?.replaceAll('{color}', props.color)
       )
     })