minor updates

Author: nikoloza

lib/form/checkbox.css

@@ -39,7 +39,7 @@
     .icon {
       width: 0;
       font-size: var(--field-font-size-tiny);
-      margin-left: -calc(var(--field-height) - .85rem);
+      margin-left: -calc(var(--field-height) - .85var(--unit));
       margin-right: calc(1.4em + var(--checkbox-label-gutter));
       overflow: hidden;
       transition: ease var(--checkbox-transition-duration);

lib/form/config.css

@@ -1,9 +1,11 @@
 :root {
+  /* unit */
+  --field-unit: var(--unit);
+
   /* sequence */
-  --field-height-unit: var(--font-unit);
   --field-height-sequence: var(--minor-third);
   --field-height-base: 2.4;
-  --field-height: var(--field-height-base)var(--font-unit);
+  --field-height: var(--field-height-base)var(--field-unit);
 
   /* heighs */
   --field-height-tiny: calc(var(--field-height-small) /

lib/form/field.css

@@ -33,6 +33,11 @@
   /* placeholder */
   --field-placeholder-color: var(--lightgray);
   --field-placeholder-opacity: .1;
+
+  /* disabled */
+  --field-disabled-color: var(--lightgray);
+  --field-disabled-background: var(--whitegray);
+  --field-disabled-border-color: var(--lightengray);
 }
 
 .ui.form.field {
@@ -60,15 +65,23 @@
     )
   }
 
-  &:hover {
-    color: var(--field-color-hover);
-    background: var(--field-background-hover);
-    border-color: var(--field-border-color-hover);
+  &:not(:disabled) {
+    &:hover {
+      color: var(--field-color-hover);
+      background: var(--field-background-hover);
+      border-color: var(--field-border-color-hover);
+    }
+
+    &:focus {
+      color: var(--field-color-focus);
+      background: var(--field-background-focus);
+      border-color: var(--field-border-color-focus);
+    }
   }
 
-  &:focus {
-    color: var(--field-color-focus);
-    background: var(--field-background-focus);
-    border-color: var(--field-border-color-focus);
+  &:disabled {
+    color: var(--field-disabled-color);
+    background: var(--field-disabled-background);
+    border-color: var(--field-disabled-border-color);
   }
 }

lib/form/index.css

@@ -12,5 +12,5 @@
 /* sizes */
 @import './sizes.css';
 
-/* states */
+/* error states */
 @import './states.css';

lib/form/states.css

@@ -1,3 +1,52 @@
+:root {
+  /* field error state */
+  --field-error-color: var(--error);
+  --field-error-background-opacity: 10%;
+  --field-error-background: color(var(--error) alpha(var(--field-error-background-opacity)));
+  --field-error-border-color: var(--error);
+
+  /* field warning state */
+  --field-warning-color: var(--warning);
+  --field-warning-background-opacity: 10%;
+  --field-warning-background: color(var(--warning) alpha(var(--field-warning-background-opacity)));
+  --field-warning-border-color: var(--warning);
+}
+
 .ui.form.field:focus:invalid {
   border-color: var(--error);
+}
+
+.ui.form.field:invalid,
+.ui.form.field.error {
+  &,
+  &:hover,
+  &:focus {
+    color: var(--field-error-color);
+    background: var(--field-error-background);
+    border-color: var(--field-error-border-color);
+  }
+
+  &::placeholder {
+    color: color(
+      var(--field-error-color)
+      alpha(var(--field-placeholder-opacity))
+    )
+  }
+}
+
+.ui.form.field.warning {
+  &,
+  &:hover,
+  &:focus {
+    color: var(--field-warning-color);
+    background: var(--field-warning-background);
+    border-color: var(--field-warning-border-color);
+  }
+
+  &::placeholder {
+    color: color(
+      var(--field-warning-color)
+      alpha(var(--field-placeholder-opacity))
+    )
+  }
 }

lib/form/textarea.css

@@ -1,6 +1,9 @@
 :root {
-  --textarea-min-height: 18rem;
-  --textarea-min-width: 56rem;
+  --textarea-min-height-base: 18;
+  --textarea-min-height: var(--textarea-min-height-base)var(--unit);
+
+  --textarea-min-width-base: 56;
+  --textarea-min-width: var(--textarea-min-width-base)var(--unit);
 }
 
 .ui.flexible.form.field {