fix(textarea): make sure line height is the same for input and textarea and reflects the design in the ui kit

Author: desig9stein

src/components/input/themes/shared/input.fluent.scss

@@ -48,10 +48,13 @@ $focused-height: calc(var-get($theme, 'size') - #{($focused-border-width * 2)});
     }
 
     [part='label'] {
-        @include type-style('subtitle-2');
+        @include type-style('subtitle-2') {
+            --ig-subtitle-2-line-height: #{rem(16px)};
+
+            margin-block: 0 rem(5px);
+        };
 
         color: var-get($theme, 'idle-secondary-color');
-        margin-block-end: rem(5px);
     }
 
     [part^='container'] {

src/components/input/themes/shared/input.material.scss

@@ -72,7 +72,6 @@ input:placeholder-shown + [part='notch'] [part='label'],
         transform 150ms cubic-bezier(0.4, 0, 0.2, 1),
         color 150ms cubic-bezier(0.4, 0, 0.2, 1),
         font-size 150ms cubic-bezier(0.4, 0, 0.2, 1);
-    line-height: normal;
     text-overflow: ellipsis;
     overflow: hidden;
     will-change: font-size, color, transform;

src/components/textarea/themes/shared/textarea.bootstrap.scss

@@ -26,7 +26,6 @@ $theme: $bootstrap;
     margin-block: 0 rem(4px);
     height: auto;
     font-size: rem(16px);
-    line-height: normal;
 }
 
 [part~='prefixed'] {

src/components/textarea/themes/shared/textarea.fluent.scss

@@ -56,16 +56,19 @@ $theme: $fluent;
 }
 
 [part~='label'] {
+    @include type-style('subtitle-2') {
+        --ig-subtitle-2-line-height: #{rem(16px)};
+
+        margin-block: 0 rem(5px);
+    };
+
     display: block;
-    font-size: rem(14px);
-    font-weight: 600;
     position: static;
     transform: translateY(0);
     transform-origin: top left;
-    margin-top: 0;
     height: auto;
-    margin-block-end: rem(5px);
-    line-height: normal;
+
+
 }
 
 :host([invalid]) {

src/components/textarea/themes/shared/textarea.material.scss

@@ -43,23 +43,25 @@ textarea {
         color 150ms cubic-bezier(.4, 0, .2, 1),
         font-size 150ms cubic-bezier(.4, 0, .2, 1);
     will-change: transform;
-    line-height: normal;
 }
 
 %label-filled {
+    @include type-style('caption');
+
     transform: translateY(0);
     inset-block-start: calc(#{$input-top-padding} / 4);
-    font-size: rem(12px);
 }
 
 %label-outlined-filled {
+    @include type-style('caption') {
+        margin-block-end: auto;
+    };
+
     display: inline-block;
     position: relative;
     inset-block: 0;
     transform: translateY(-50%);
-    margin-block-end: auto;
     padding-inline-end: 0;
-    font-size: rem(12px);
 }
 
 :host(:not([outlined])) {