docs(components): split color and variant into two sections

docs/content/3.components/alert.md

@@ -64,9 +64,9 @@ props:
 ---
 ::
 
-### Style
+### Color
 
-Use the `color` and `variant` props to change the style of the Alert.
+Use the `color` prop to change the color of the Alert.
 
 ::component-code
 ---
@@ -77,7 +77,26 @@ ignore:
   - icon
 props:
   color: gray
-  variant: outline
+  title: 'Heads up!'
+  description: 'You can change the primary color in your app config.'
+  icon: 'i-heroicons-command-line'
+---
+::
+
+### Variant
+
+Use the `variant` prop to change the variant of the Alert.
+
+::component-code
+---
+prettier: true
+ignore:
+  - title
+  - description
+  - icon
+props:
+  color: gray
+  variant: solid
   title: 'Heads up!'
   description: 'You can change the primary color in your app config.'
   icon: 'i-heroicons-command-line'

docs/content/3.components/badge.md

@@ -28,15 +28,28 @@ props:
 ---
 ::
 
-### Style
+### Color
 
-Use the `color` and `variant` props to change the style of the Badge.
+Use the `color` prop to change the color of the Badge.
 
 ::component-code
 ---
 props:
   color: gray
-  variant: solid
+slots:
+  default: Badge
+---
+::
+
+### Variant
+
+Use the `variant` props to change the variant of the Badge.
+
+::component-code
+---
+props:
+  color: gray
+  variant: outline
 slots:
   default: Badge
 ---

docs/content/3.components/button.md

@@ -45,15 +45,28 @@ slots:
 ---
 ::
 
-### Style
+### Color
 
-Use the `color` and `variant` props to change the style of the Button.
+Use the `color` prop to change the color of the Button.
 
 ::component-code
 ---
 props:
   color: gray
-  variant: solid
+slots:
+  default: Button
+---
+::
+
+### Variant
+
+Use the `variant` prop to change the variant of the Button.
+
+::component-code
+---
+props:
+  color: gray
+  variant: outline
 slots:
   default: Button
 ---

docs/content/3.components/checkbox.md

@@ -103,9 +103,9 @@ props:
 You can customize this icon globally in your `app.config.ts` under `ui.icons.check` key.
 ::
 
-### Style
+### Color
 
-Use the `color` prop to change the style of the Checkbox.
+Use the `color` prop to change the color of the Checkbox.
 
 ::component-code
 ---

docs/content/3.components/kbd.md

@@ -62,9 +62,9 @@ items:
 ---
 ::
 
-### Style
+### Variant
 
-Use the `variant` prop to change the style of the Kbd.
+Use the `variant` prop to change the variant of the Kbd.
 
 ::component-code
 ---

docs/content/3.components/tabs.md

@@ -97,9 +97,31 @@ props:
 You can inspect the DOM to see that the content of the inactive tab is not rendered.
 ::
 
-### Style
+### Color
 
-Use the `color` and `variant` props to change the style of the Tabs.
+Use the `color` prop to change the color of the Tabs.
+
+::component-code
+---
+ignore:
+  - content
+external:
+  - items
+hide:
+  - class
+props:
+  color: gray
+  class: 'w-full'
+  content: false
+  items:
+    - label: Account
+    - label: Password
+---
+::
+
+### Variant
+
+Use the `variant` prop to change the variant of the Tabs.
 
 ::component-code
 ---