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

docs/content/3.forms/2.textarea.md

@@ -12,6 +12,53 @@ baseProps:
 ---
 ::
 
+### Style
+
+Use the `color` and `variant` props to change the visual style of the Textarea.
+
+::component-card
+---
+baseProps:
+  name: 'textarea'
+  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: 'textarea'
+  placeholder: 'Search...'
+props:
+  color: 'white'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
+#### Gray
+
+::component-card
+---
+baseProps:
+  name: 'textarea'
+  placeholder: 'Search...'
+props:
+  color: 'gray'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
 ### Size
 
 Use the `size` prop to change the size of the Textarea.
@@ -38,20 +85,6 @@ props:
 ---
 ::
 
-### Appearance
-
-Use the `appearance` prop to change the style of the Textarea.
-
-::component-card
----
-baseProps:
-  name: 'textarea'
-  placeholder: 'Search...'
-props:
-  appearance: 'white'
----
-::
-
 ### Disabled
 
 Use the `disabled` prop to disable the Textarea.
@@ -62,7 +95,6 @@ baseProps:
   name: 'input'
   placeholder: 'Search...'
 props:
-  appearance: 'white'
   disabled: true
 ---
 ::