refactor(multiple): remove dependency on external typography utilities

Reduces our reliance on external typography utilities.

Author: crisbeto

src/material/button/button.scss

@@ -5,7 +5,6 @@
 @use '@material/button/button-filled-theme' as mdc-button-filled-theme;
 @use '@material/button/button-protected-theme' as mdc-button-protected-theme;
 @use '@material/button/button-outlined-theme' as mdc-button-outlined-theme;
-@use '@material/typography/typography' as mdc-typography;
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 
 @use './button-base';
@@ -155,7 +154,7 @@
   // Similar to MDC's `_icon-structure`, apart from the margin which we
   // handle via custom tokens in `mat-private-button-horizontal-layout`.
   & > .mat-icon {
-    $icon-size: mdc-typography.px-to-rem(18px);
+    $icon-size: 1.125rem;
     display: inline-block;
     position: relative;
     vertical-align: top;

src/material/core/internal-form-field/internal-form-field.scss

@@ -1,12 +1,12 @@
 @use '@material/form-field/form-field' as mdc-form-field;
-@use '@material/typography/typography' as mdc-typography;
 @use '@material/theme/custom-properties' as mdc-custom-properties;
+@use '../style/vendor-prefixes';
 @use '../mdc-helpers/mdc-helpers';
 
 @include mdc-custom-properties.configure($emit-fallback-values: false, $emit-fallback-vars: false) {
   @include mdc-form-field.static-styles($query: mdc-helpers.$mdc-base-styles-query);
 }
 
 .mat-internal-form-field {
-  @include mdc-typography.smooth-font();
+  @include vendor-prefixes.smooth-font();
 }

src/material/core/m2/_typography.scss

@@ -1,8 +1,11 @@
 @use 'sass:map';
 @use 'sass:math';
 @use 'sass:meta';
+@use 'sass:string';
 @use '@material/typography' as mdc-typography;
 
+$_default-font-family: string.unquote('Roboto, sans-serif');
+
 /// Defines a typography level from the Material Design spec.
 /// @param {String} $font-size The font-size for this level.
 /// @param {String | Number} $line-height The line-height for this level.
@@ -123,7 +126,7 @@
 @function define-typography-config(
   // TODO(mmalerba): rename this function to define-typography-config,
   //  and create a predefined px based config for people that need it.
-  $font-family: mdc-typography.$font-family,
+  $font-family: $_default-font-family,
   $headline-1: null,
   $headline-2: null,
   $headline-3: null,
@@ -180,7 +183,7 @@
 @function define-rem-typography-config(
   // TODO(mmalerba): rename this function to define-typography-config,
   //  and create a predefined px based config for people that need it.
-  $font-family: mdc-typography.$font-family,
+  $font-family: $_default-font-family,
   $headline-1: null,
   $headline-2: null,
   $headline-3: null,

src/material/core/mdc-helpers/_mdc-helpers.scss

@@ -1,8 +1,8 @@
 // TODO(mmalerba): this file should be split into separate cohesive partials for things like
 //  "theming", "typography", "core".
+@use 'sass:string';
 @use '../typography/typography';
 @use '@material/feature-targeting' as mdc-feature-targeting;
-@use '@material/typography' as mdc-typography;
 @use '@material/theme/theme-color' as mdc-theme-color;
 @use '@material/theme/css' as mdc-theme-css;
 
@@ -32,7 +32,7 @@ $mdc-typography-styles-query: typography;
 @function private-fallback-typography-from-mdc() {
   // This is very close to what we have in `define-typography-config`, but we can't use it here,
   // because it would cause a circular import and moving it here doesn't make sense.
-  $font-family: mdc-typography.$font-family;
+  $font-family: string.unquote('Roboto, sans-serif');
   @return (
     font-family: $font-family,
     headline-1: typography.typography-config-level-from-mdc(headline1, $font-family),

src/material/core/theming/tests/test-typography-font-family.scss

@@ -1,7 +1,9 @@
-@use '@material/typography' as mdc-typography;
-@use '../../m2/typography' as m2-typography;
+@use 'sass:string';
 @use 'sass:map';
 @use 'sass:meta';
+@use '../../m2/typography' as m2-typography;
+
+$_font-family: string.unquote('Roboto, sans-serif');
 
 @function assert-font-family($test-name, $obj, $expected) {
   @each $level-name, $level in $obj {
@@ -16,7 +18,7 @@
 $no-font-family: assert-font-family(
   'should take default MDC font family if none is specified',
   m2-typography.define-typography-config(),
-  mdc-typography.$font-family);
+  $_font-family);
 
 $only-top-level-font-family: assert-font-family(
   'should take custom font family if specified at top level',
@@ -40,7 +42,7 @@ $individual-levels-without-font-families: assert-font-family(
     $button: m2-typography.define-typography-level($font-size: 1px),
     $overline: m2-typography.define-typography-level($font-size: 1px),
   ),
-  mdc-typography.$font-family
+  $_font-family
 );
 
 $individual-levels-without-font-families-with-top-level-family: assert-font-family(

src/material/dialog/dialog.scss

@@ -1,5 +1,4 @@
 @use '@angular/cdk';
-@use '@material/typography/typography' as mdc-typography;
 @use '../core/tokens/m2/mdc/dialog' as tokens-mdc-dialog;
 @use '../core/tokens/m2/mat/dialog' as tokens-mat-dialog;
 @use '../core/mdc-helpers/mdc-helpers';
@@ -153,12 +152,23 @@ $_emit-fallbacks: true;
 }
 
 .mat-mdc-dialog-title {
-  @include mdc-typography.text-baseline($top: 40px, $display: block, $lineHeight: null);
+  display: block;
   position: relative;
   flex-shrink: 0;
   box-sizing: border-box;
   margin: 0 0 1px;
 
+  // This was used by MDC to set the text baseline. We should figure out a way to
+  // remove it, because it can introduce unnecessary whitespace at the beginning
+  // of the element.
+  &::before {
+    display: inline-block;
+    width: 0;
+    height: 40px;
+    content: '';
+    vertical-align: 0;
+  }
+
   [dir='rtl'] & {
     text-align: right;
   }

src/material/form-field/_form-field-subscript.scss

@@ -1,7 +1,7 @@
-@use '@material/typography' as mdc-typography;
 @use '@material/textfield/variables' as mdc-textfield-variables;
 
 @use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
+@use '../core/style/vendor-prefixes';
 @use '../core/tokens/token-utils';
 
 @mixin private-form-field-subscript() {
@@ -68,7 +68,7 @@
   .mat-mdc-form-field-bottom-align::before {
     @include token-utils.use-tokens(tokens-mat-form-field.$prefix,
       tokens-mat-form-field.get-token-slots()) {
-      @include mdc-typography.smooth-font();
+      @include vendor-prefixes.smooth-font();
       @include token-utils.create-token-slot(font-family, subscript-text-font);
       @include token-utils.create-token-slot(line-height, subscript-text-line-height);
       @include token-utils.create-token-slot(font-size, subscript-text-size);

src/material/form-field/_mdc-text-field-structure-overrides.scss

@@ -1,5 +1,4 @@
 @use '@material/textfield/variables' as mdc-textfield-variables;
-@use '@material/typography/typography' as mdc-typography;
 @use '../core/tokens/m2/mat/form-field' as tokens-mat-form-field;
 @use '../core/tokens/token-utils';
 @use '../core/style/vendor-prefixes';
@@ -25,7 +24,7 @@ $_enable-form-field-will-change-reset: true;
   // Note: We increase specificity here because the MDC textfield seems to override this,
   // depending on the CSS order, with an affix selector joint with the input.
   .mat-mdc-form-field-input-control.mat-mdc-form-field-input-control {
-    @include mdc-typography.smooth-font();
+    @include vendor-prefixes.smooth-font();
     font: inherit;
     letter-spacing: inherit;
     text-decoration: inherit;
@@ -34,7 +33,7 @@ $_enable-form-field-will-change-reset: true;
   }
 
   .mat-mdc-form-field .mat-mdc-floating-label.mdc-floating-label {
-    @include mdc-typography.smooth-font();
+    @include vendor-prefixes.smooth-font();
 
     // In order to ensure proper alignment of the floating label, we reset its line-height.
     // The line-height is not important as the element is absolutely positioned and only has one

src/material/form-field/form-field.scss

@@ -8,7 +8,6 @@
 @use '@material/line-ripple/line-ripple' as mdc-line-ripple;
 @use '@material/line-ripple/line-ripple-theme' as mdc-line-ripple-theme;
 @use '@material/theme/custom-properties' as mdc-custom-properties;
-@use '@material/typography' as mdc-typography;
 @use '../core/tokens/token-utils';
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/style/vendor-prefixes';
@@ -91,7 +90,7 @@ $_icon-prefix-infix-padding: 4px;
 
   @include token-utils.use-tokens(tokens-mat-form-field.$prefix,
     tokens-mat-form-field.get-token-slots()) {
-    @include mdc-typography.smooth-font();
+    @include vendor-prefixes.smooth-font();
     @include token-utils.create-token-slot(font-family, container-text-font);
     @include token-utils.create-token-slot(line-height, container-text-line-height);
     @include token-utils.create-token-slot(font-size, container-text-size);

src/material/list/_list-option-trailing-avatar-compat.scss

@@ -1,4 +1,3 @@
-@use '@material/typography/typography';
 @use '@material/feature-targeting/feature-targeting';
 @use '@material/density/functions' as density-functions;
 @use '@material/list/evolution-mixins' as mdc-list;
@@ -22,8 +21,33 @@
       @include mdc-list.item-end-size(40px, $query: $query);
 
       &.mdc-list-item--with-two-lines {
+        $top: 32px;
+        $bottom: 20px;
+
         .mdc-list-item__primary-text {
-          @include typography.text-baseline($top: 32px, $bottom: 20px, $query: $query);
+          display: block;
+          margin-top: 0;
+          line-height: normal;
+          margin-bottom: $bottom * -1;
+
+          // This was used by MDC to set the text baseline. We should figure out a way to
+          // remove it, because it can introduce unnecessary whitespace at the beginning
+          // of the element.
+          &::before {
+            display: inline-block;
+            width: 0;
+            height: $top;
+            content: '';
+            vertical-align: 0;
+          }
+
+          &::after {
+            display: inline-block;
+            width: 0;
+            height: $bottom;
+            content: '';
+            vertical-align: $bottom * -1;
+          }
         }
       }
 

src/material/paginator/paginator.scss

@@ -1,7 +1,7 @@
 @use '@angular/cdk';
-@use '@material/typography/typography' as mdc-typography;
 @use '../core/tokens/m2/mat/paginator' as tokens-mat-paginator;
 @use '../core/tokens/token-utils';
+@use '../core/style/vendor-prefixes';
 
 $padding: 0 8px;
 $page-size-margin-right: 8px;
@@ -21,7 +21,7 @@ $button-icon-size: 28px;
     tokens-mat-paginator.$prefix,
     tokens-mat-paginator.get-token-slots()
   ) {
-    @include mdc-typography.smooth-font();
+    @include vendor-prefixes.smooth-font();
     @include token-utils.create-token-slot(color, container-text-color);
     @include token-utils.create-token-slot(background-color, container-background-color);
     @include token-utils.create-token-slot(font-family, container-text-font);

src/material/select/select.scss

@@ -1,6 +1,5 @@
 @use 'sass:math';
 @use '@angular/cdk';
-@use '@material/typography/typography' as mdc-typography;
 @use '../core/style/vendor-prefixes';
 @use '../core/style/variables';
 @use '../core/tokens/token-utils';
@@ -22,7 +21,7 @@ $scale: 0.75 !default;
 
   @include token-utils.use-tokens(
     tokens-mat-select.$prefix, tokens-mat-select.get-token-slots()) {
-    @include mdc-typography.smooth-font();
+    @include vendor-prefixes.smooth-font();
     @include token-utils.create-token-slot(color, enabled-trigger-text-color);
     @include token-utils.create-token-slot(font-family, trigger-text-font);
     @include token-utils.create-token-slot(line-height, trigger-text-line-height);