refactor(textarea): convert Light DOM LESS to SCSS

Author: BadeJaya

docs/components/_index.scss

@@ -5,4 +5,6 @@
 /// load styles needed to test component visuals
 @import "menu/spec";
 @import "popover/spec";
+@import "textarea/spec";
 @import "text-input/spec";
+

docs/components/textarea/_spec.scss

@@ -0,0 +1,27 @@
+@import "components/form/mixins/textControl";
+
+.textarea-spec {
+  hx-textarea-control {
+    // ----- Pristine ---------------
+    > textarea.mock-focus {
+      @include hxTextControl($focused: true);
+    }
+
+    // ----- Disabled ---------------
+    > textarea:disabled.mock-focus {
+      @include hxTextControl(disabled, $focused: true);
+    }
+
+    // ----- Changed / Touched ---------------
+    &[hx-dirty] {
+      > textarea:invalid.mock-focus {
+        @include hxTextControl(invalid, $focused: true);
+      }
+    }
+
+    // ----- Styled Invalid ---------------
+    &.hxInvalid > textarea:enabled.mock-focus {
+      @include hxTextControl(invalid, $focused: true);
+    }
+  }
+}

docs/docs.less

@@ -319,7 +319,6 @@ min-version {
 @import 'spec/file-input-spec';
 @import 'spec/panel-spec';
 @import 'spec/radio-spec';
-@import 'spec/textarea-spec';
 
 /* ---------------------------------------- *\
  * OVERRIDES (a.k.a. "shame")

docs/styles/spec/textarea-spec.less

@@ -29,4 +29,3 @@
 @import 'components/dropdown-select/index';
 @import 'components/file/index';
 @import 'components/form/index';
-@import 'components/textarea/index';

src/less/components.less

@@ -24,6 +24,7 @@
 @import "toast/index";
 @import "table/index";
 @import "tabset/index";
+@import "textarea/index";
 @import "text-input/index";
 @import "tooltip/index";
 @import "typography/index";

src/scss/components/_index.scss

@@ -1,14 +1,15 @@
-@import (reference) "mixins";
-@import (reference) "components/form/index";
+@import "mixins";
+@import "components/form/config";
+
+/// ----- LAYOUT ----------
+/// (flexbox - column layout)
+///  +-------------+
+///  | label       |
+///  +-------------+
+///  | textarea    |
+///  +-------------+
+///
 
-// ----- LAYOUT ----------
-/* (columnar-flexbox)
-  +-------------+
-  | label       |
-  +-------------+
-  | textarea    |
-  +-------------+
-*/
 hx-textarea-control {
   display: flex;
   flex-direction: column;
@@ -42,41 +43,42 @@ hx-textarea-control {
 // ----- PRISTINE ----------
 hx-textarea-control {
   > label {
-    .FieldName();
+    @include hxFieldName;
   }
 
   > textarea {
-    .TextControl(pristine);
+    @include hxTextControl;
 
     &:focus {
-      .TextControl(pristine-focus);
+      @include hxTextControl($focused: true);
     }
   }
-}//hx-textarea-control
+}
 
 // ----- INVALID ----------
-/*
-  1. Prevent IE from incorrectly matching textarea:disabled:invalid
-*/
+//
+// 1. Prevent IE from incorrectly matching textarea:disabled:invalid
+//
 hx-textarea-control[hx-dirty] > textarea:enabled:invalid, /* 1 */
 hx-textarea-control.hxInvalid > textarea:enabled {
-  .TextControl(invalid);
+  @include hxTextControl(invalid);
 
   &:focus {
-    .TextControl(invalid-focus);
+    @include hxTextControl(invalid, $focused: true);
   }
 }
 
 // ----- DISABLED ----------
 hx-textarea-control > textarea:disabled {
-  .TextControl(disabled);
+  @include hxTextControl(disabled);
+
   resize: none;
 
   ~ label {
-    .FieldName(disabled);
+    @include hxFieldName(disabled);
   }
 
   &:focus {
-    .TextControl(disabled-focus);
+    @include hxTextControl(disabled, $focused: true);
   }
 }