fix box variant text fuzziness

Author: mmalerba

src/lib/form-field/_form-field-box-theme.scss

@@ -33,4 +33,64 @@
   }
 }
 
-@mixin mat-form-field-box-typography($config) {}
+// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
+// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
+// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
+// an unknown pseudo-class it will discard the entire rule set.
+$mat-form-field-box-dedupe: 0;
+
+// Applies a floating label above the form field control itself.
+@mixin _mat-form-field-box-label-floating($font-scale, $infix-padding, $infix-margin-top) {
+  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-box-dedupe)
+             scale($font-scale);
+  width: 100% / $font-scale + $mat-form-field-box-dedupe;
+
+  // Prevent text bluriness when label is floating.
+  backface-visibility: initial;
+
+  $mat-form-field-box-dedupe: $mat-form-field-box-dedupe + 0.00001 !global;
+}
+
+@mixin mat-form-field-box-typography($config) {
+  // The unit-less line-height from the font config.
+  $line-height: mat-line-height($config, input);
+  // The amount to scale the font for the floating label and subscript.
+  $subscript-font-scale: 0.75;
+  // The padding on the infix. Mocks show half of the text size.
+  $infix-padding: 0.5em;
+  // The margin applied to the form-field-infix to reserve space for the floating label.
+  $infix-margin-top: 1em * $line-height * $subscript-font-scale;
+  // The amount we offset the label in the box variant.
+  $box-variant-label-offset: -0.5em * $line-height;
+
+  .mat-form-field-variant-box {
+    .mat-form-field-label {
+      margin-top: $box-variant-label-offset;
+    }
+
+    &.mat-form-field-can-float {
+      &.mat-form-field-should-float .mat-form-field-label,
+      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
+        @include _mat-form-field-label-floating(
+                $subscript-font-scale, $infix-padding + $box-variant-label-offset,
+                $infix-margin-top);
+      }
+
+      .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
+      .mat-form-field-label {
+        @include _mat-form-field-label-floating(
+                $subscript-font-scale, $infix-padding + $box-variant-label-offset,
+                $infix-margin-top);
+      }
+
+      // Server-side rendered matInput with a label attribute but label not shown
+      // (used as a pure CSS stand-in for mat-form-field-should-float).
+      .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
+      .mat-form-field-label {
+        @include _mat-form-field-label-floating(
+                $subscript-font-scale, $infix-padding + $box-variant-label-offset,
+                $infix-margin-top);
+      }
+    }
+  }
+}

src/lib/form-field/_form-field-theme.scss

@@ -124,9 +124,6 @@ $mat-form-field-dedupe: 0;
   // The amount to scale the font for the prefix and suffix icons.
   $prefix-suffix-icon-font-scale: 1.5;
 
-  // The amount of space between the top of the line and the top of the actual text
-  // (as a fraction of the font-size).
-  $line-spacing: ($line-height - 1) / 2;
   // The padding on the infix. Mocks show half of the text size.
   $infix-padding: 0.5em;
   // The margin applied to the form-field-infix to reserve space for the floating label.

src/lib/form-field/form-field-box.scss

@@ -27,10 +27,6 @@ $mat-form-field-box-subscript-padding:
              $mat-form-field-box-side-padding;
   }
 
-  .mat-form-field-label {
-    transform: translateY(-50%);
-  }
-
   .mat-form-field-underline {
     height: $mat-form-field-box-border-radius;
     border-radius: 0 0 $mat-form-field-box-border-radius $mat-form-field-box-border-radius;