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

docs/content/3.forms/3.select.md

@@ -22,9 +22,65 @@ excludedProps:
 ---
 ::
 
+### Style
+
+Use the `color` and `variant` props to change the visual style of the Select.
+
+::component-card
+---
+baseProps:
+  name: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+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: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+props:
+  color: 'white'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
+#### Gray
+
+::component-card
+---
+baseProps:
+  name: 'select'
+  options:
+    - 'United States'
+    - 'Canada'
+    - 'Mexico'
+props:
+  color: 'gray'
+  variant: 'outline'
+excludedProps:
+  - color
+---
+::
+
 ### Size
 
-Use the `size` prop to change the size of the Input.
+Use the `size` prop to change the size of the Select.
 
 ::component-card
 ---
@@ -56,24 +112,6 @@ props:
 ---
 ::
 
-### Appearance
-
-Use the `appearance` prop to change the style of the Select.
-
-::component-card
----
-baseProps:
-  name: 'select'
-  options:
-    - 'United States'
-    - 'Canada'
-    - 'Mexico'
-  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}`.
@@ -91,8 +129,11 @@ baseProps:
   placeholder: 'Search...'
 props:
   icon: 'i-heroicons-magnifying-glass-20-solid'
-  appearance: 'white'
+  color: 'white'
   size: 'sm'
+extraColors:
+  - white
+  - gray
 excludedProps:
   - icon
 ---
@@ -100,7 +141,7 @@ excludedProps:
 
 ### Disabled
 
-Use the `disabled` prop to disable the Input.
+Use the `disabled` prop to disable the Select.
 
 ::component-card
 ---
@@ -112,7 +153,6 @@ baseProps:
     - 'Mexico'
   placeholder: 'Search...'
 props:
-  appearance: 'white'
   disabled: true
 ---
 ::