feat(Badge)!: add colors and variants (solid has changed)

docs/content/2.elements/2.badge.md

@@ -41,6 +41,60 @@ props:
 Badge
 ::
 
+Besides all the colors from the `ui.colors` object, you can also use the `white` and `black` colors with their pre-defined variants.
+
+#### White
+
+::component-card
+---
+props:
+  color: 'white'
+  variant: 'solid'
+ui:
+  variant:
+    solid: 1
+excludedProps:
+  - color
+---
+
+Badge
+::
+
+#### Gray
+
+::component-card
+---
+props:
+  color: 'gray'
+  variant: 'solid'
+ui:
+  variant:
+    solid: 1
+excludedProps:
+  - color
+---
+
+Badge
+::
+
+#### Black
+
+::component-card
+---
+props:
+  color: 'black'
+  variant: 'solid'
+ui:
+  variant:
+    solid: 1
+    link: 1
+excludedProps:
+  - color
+---
+
+Badge
+::
+
 ### Size
 
 Use the `size` prop to change the size of the Badge.
@@ -54,6 +108,26 @@ props:
 Badge
 ::
 
+### Rounded
+
+To customize the border radius of the Badge, you can use the `ui` prop.
+
+::component-card
+---
+props:
+  ui:
+    rounded: 'rounded-full'
+excludedProps:
+  - ui
+---
+
+Badge
+::
+
+::callout{icon="i-heroicons-light-bulb"}
+You can customize the whole [preset](#preset) by using the `ui` prop.
+::
+
 ## Props
 
 :component-props

src/runtime/app.config.ts

@@ -119,9 +119,20 @@ const badge = {
     md: 'text-sm px-2 py-1',
     lg: 'text-sm px-2.5 py-1.5'
   },
-  color: {},
+  color: {
+    white: {
+      solid: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-900 dark:text-white bg-white dark:bg-gray-900'
+    },
+    gray: {
+      solid: 'ring-1 ring-inset ring-gray-300 dark:ring-gray-700 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-800'
+    },
+    black: {
+      solid: 'text-white dark:text-gray-900 bg-gray-900 dark:bg-white'
+    }
+  },
   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'
+    solid: 'bg-{color}-500 dark:bg-{color}-400 text-white dark:text-gray-900',
+    outline: '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'
   },
   default: {
     size: 'sm',