Style disabled & read only input (#180)

Author: Joozty

src/elements/forms/text-field.css

@@ -77,6 +77,18 @@ label {
   }
 }
 
+input:disabled,
+input:read-only,
+input:disabled + label,
+input:read-only + label {
+  --form-control-color: var(--gray-500);
+  --form-label-color: var(--gray-500);
+}
+
+input:disabled {
+  cursor: not-allowed;
+}
+
 /* Size variations */
 
 .small {

src/elements/forms/text-field.md

@@ -64,6 +64,19 @@ Example with success message:
 />
 ```
 
+Example with disabled input:
+
+```jsx
+<TextField
+  id="disabled-input"
+  name="disabled-input"
+  label="Disabled input"
+  value="Disabled input"
+  variant="success"
+  disabled
+/>
+```
+
 ### Size variations
 
 #### Small