feat!: handle color states on form elements (#234)

docs/content/3.forms/1.input.md

@@ -12,6 +12,53 @@ baseProps:
 ---
 ::
 
+### Style
+
+Use the `color` and `variant` props to change the visual style of the Input.
+
+::component-card
+---
+baseProps:
+  name: 'input'
+  placeholder: 'Search...'
+props:
+  color: 'primary'
+  variant: 'outline'
+---
+::
+
+Besides all the colors from the `ui.colors` object, you can also use the `white` (default) and `gray` colors with their pre-defined variants.
+
+#### White
+
+::component-card
+---
+baseProps:
+  name: 'input'
+  placeholder: 'Search...'
+props:
+  color: 'white'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
+#### Gray
+
+::component-card
+---
+baseProps:
+  name: 'input'
+  placeholder: 'Search...'
+props:
+  color: 'gray'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
 ### Size
 
 Use the `size` prop to change the size of the Input.
@@ -38,20 +85,6 @@ props:
 ---
 ::
 
-### Appearance
-
-Use the `appearance` prop to change the style of the Input.
-
-::component-card
----
-baseProps:
-  name: 'input'
-  placeholder: 'Search...'
-props:
-  appearance: 'white'
----
-::
-
 ### Icon
 
 Use any icon from [Iconify](https://icones.js.org) by setting the `icon` prop by using this pattern: `i-{collection_name}-{icon_name}`.
@@ -65,9 +98,12 @@ baseProps:
   placeholder: 'Search...'
 props:
   icon: 'i-heroicons-magnifying-glass-20-solid'
-  appearance: 'white'
   size: 'sm'
+  color: 'white'
   trailing: false
+extraColors:
+  - white
+  - gray
 excludedProps:
   - icon
 ---
@@ -81,12 +117,9 @@ Use the `disabled` prop to disable the Input.
 ---
 baseProps:
   name: 'input'
-props:
   placeholder: 'Search...'
-  appearance: 'white'
+props:
   disabled: true
-excludedProps:
-  - placeholder
 ---
 ::
 
@@ -109,32 +142,6 @@ excludedProps:
 ---
 ::
 
-### Group
-
-You can use the `InputGroup` component to add a label and additional informations to a form element.
-
-::component-card{slug="InputGroup"}
----
-baseProps:
-  name: 'group'
-props:
-  label: 'Email'
-  help: "We'll only use this for spam."
-  hint: 'Required'
-  required: true
-code: >-
-
-  <UInput placeholder="you@example.com" icon="i-heroicons-envelope" />
----
-
-#default
-:u-input{name="group" placeholder="you@example.com" icon="i-heroicons-envelope"}
-::
-
-::alert{icon="i-heroicons-light-bulb"}
-This also works with `Textarea`, `Select` and `SelectMenu` components.
-::
-
 ## Props
 
 :component-props