refactor(material/theming): normalize config in all typography mixins (angular#21937)

for non-mdc components

This is split off of angular#21778 which covers MDC conmponents as well

Author: mmalerba

src/dev-app/theme.scss

@@ -15,56 +15,43 @@
 @use '../material/core/core';
 @use '../material/core/theming/palette';
 @use '../material/core/theming/theming';
-@use '../material/core/typography/typography';
 
 // Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// **Be sure that you only ever include this mixin once!**
-@include core.core();
-@include all-typography.angular-material-mdc-typography(all-typography.config());
-@include popover-edit.typography(typography.config());
-
-// Include base styles for strong focus indicators.
-.demo-strong-focus {
-  @include focus-indicators-focus-indicators.strong-focus-indicators();
-  @include focus-indicators.strong-focus-indicators();
-}
-
-// Define the default theme (same as the example above).
+// Define the default (light) theme.
 $candy-app-primary: theming.palette(palette.$indigo);
 $candy-app-accent: theming.palette(palette.$pink, A200, A100, A400);
 $candy-app-theme: theming.light-theme((
-  color: (
-    primary: $candy-app-primary,
-    accent: $candy-app-accent
-  )
+    // Define the default colors for our app.
+    color: (
+        primary: $candy-app-primary,
+        accent: $candy-app-accent
+    ),
+    // Define the default typography for our app.
+    typography: all-typography.config(),
+    // Define the default density level for our app.
+    density: 0,
 ));
 
+// Include the common styles for Angular Material. We include this here so that you only
+// have to load a single css file for Angular Material in your app.
+// **Be sure that you only ever include this mixin once!**
+@include core.core($candy-app-theme);
+
 // Include the default theme styles.
 @include theming-all-theme.angular-material-theme($candy-app-theme);
 @include all-theme.angular-material-mdc-theme($candy-app-theme);
 @include column-resize.theme($candy-app-theme);
 @include popover-edit.theme($candy-app-theme);
-
 // We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
 @include slider-theme.theme($candy-app-theme);
 
-// Define an alternate dark theme.
-$dark-primary: theming.palette(palette.$blue-grey);
-$dark-accent: theming.palette(palette.$amber, A200, A100, A400);
-$dark-warn: theming.palette(palette.$deep-orange);
-$dark-theme: theming.dark-theme((
-  color: (
-    primary: $dark-primary,
-    accent: $dark-accent,
-    warn: $dark-warn
-  )
-));
-
-// Include the default theme for focus indicators.
 .demo-strong-focus {
+  // Include base styles for strong focus indicators.
+  @include focus-indicators-focus-indicators.strong-focus-indicators();
+  @include focus-indicators.strong-focus-indicators();
+
+  // Include the default theme for focus indicators.
   @include focus-indicators-focus-indicators.strong-focus-indicators-theme($candy-app-theme);
   @include focus-indicators.strong-focus-indicators-theme($candy-app-theme);
 }
@@ -74,17 +61,25 @@ $dark-theme: theming.dark-theme((
 // `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
 // default theme.
 .demo-unicorn-dark-theme {
-  @include color-all-color.angular-material-color($dark-theme);
-  @include all-color.angular-material-mdc-color($dark-theme);
-  @include column-resize.color($dark-theme);
-  @include popover-edit.color($dark-theme);
-  @include slider-theme.color($dark-theme);
-}
+  // Create the color palettes used in our dark theme.
+  $dark-primary: theming.palette(palette.$blue-grey);
+  $dark-accent: theming.palette(palette.$amber, A200, A100, A400);
+  $dark-warn: theming.palette(palette.$deep-orange);
+  $dark-colors: theming.dark-theme($dark-primary, $dark-accent, $dark-warn);
 
-// Include the dark theme for focus indicators.
-.demo-unicorn-dark-theme.demo-strong-focus {
-  @include focus-indicators-focus-indicators.strong-focus-indicators-color($dark-theme);
-  @include focus-indicators.strong-focus-indicators-color($dark-theme);
+  // Include the dark theme color styles.
+  @include color-all-color.angular-material-color($dark-colors);
+  @include all-color.angular-material-mdc-color($dark-colors);
+  @include column-resize.color($dark-colors);
+  @include popover-edit.color($dark-colors);
+  // We add this in manually for now, because it isn't included in `angular-material-mdc-theme`.
+  @include slider-theme.color($dark-colors);
+
+  // Include the dark theme colors for focus indicators.
+  .demo-strong-focus {
+    @include focus-indicators-focus-indicators.strong-focus-indicators-color($dark-colors);
+    @include focus-indicators.strong-focus-indicators-color($dark-colors);
+  }
 }
 
 // Create classes for all density scales which are supported by all MDC-based components.

src/material-experimental/popover-edit/_popover-edit.scss

@@ -4,6 +4,7 @@
 @use '../../material/core/style/private';
 @use '../../material/core/theming/palette';
 @use '../../material/core/theming/theming';
+@use '../../material/core/typography/typography';
 @use '../../material/core/typography/typography-utils';
 
 @function mat-edit-hover-content-background($direction, $background-color) {
@@ -145,7 +146,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   [mat-edit-title] {
     @include typography-utils.level-to-styles($config, title);
   }

src/material/badge/_badge-theme.scss

@@ -6,6 +6,7 @@
 @use 'sass:meta';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 @use '../../cdk/a11y/a11y';
 
@@ -191,7 +192,7 @@ $large-size: $default-size + 6;
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-badge-content {
     font-weight: $font-weight;
     font-size: $font-size;

src/material/bottom-sheet/_bottom-sheet-theme.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../core/style/private';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
@@ -17,7 +18,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-bottom-sheet-container {
     @include typography-utils.level-to-styles($config, body-1);
   }

src/material/button-toggle/_button-toggle-theme.scss

@@ -3,6 +3,7 @@
 @use '../core/style/private';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 @use '../core/density/private/compatibility';
 @use './button-toggle-variables';
@@ -86,7 +87,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-button-toggle {
     font-family: typography-utils.font-family($config);
   }

src/material/button/_button-theme.scss

@@ -2,6 +2,7 @@
 @use 'sass:meta';
 @use '../core/theming/theming';
 @use '../core/style/private';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 $_mat-button-ripple-opacity: 0.1;
@@ -163,7 +164,7 @@ $_mat-button-ripple-opacity: 0.1;
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button,
   .mat-flat-button, .mat-fab, .mat-mini-fab {
     font: {

src/material/card/_card-theme.scss

@@ -2,6 +2,7 @@
 @use '../core/theming/palette';
 @use '../core/theming/theming';
 @use '../core/style/private';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 
@@ -27,7 +28,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-card {
     font-family: typography-utils.font-family($config);
   }

src/material/checkbox/_checkbox-theme.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 
@@ -97,7 +98,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-checkbox {
     font-family: typography-utils.font-family($config);
   }

src/material/chips/_chips-theme.scss

@@ -3,6 +3,7 @@
 @use '../core/style/private';
 @use '../core/theming/palette';
 @use '../core/theming/theming';
+@use '../core/typography/typography';
 @use '../core/typography/typography-utils';
 
 $chip-remove-font-size: 18px;
@@ -90,7 +91,7 @@ $chip-remove-font-size: 18px;
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-chip {
     font-size: typography-utils.font-size($config, body-2);
     font-weight: typography-utils.font-weight($config, body-2);

src/material/core/option/_optgroup-theme.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../theming/palette';
 @use '../theming/theming';
+@use '../typography/typography';
 @use '../typography/typography-utils';
 
 @mixin color($config-or-theme) {
@@ -17,7 +18,7 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: theming.get-typography-config($config-or-theme);
+  $config: typography.typography-to-2014-config(theming.get-typography-config($config-or-theme));
   .mat-optgroup-label {
     @include typography-utils.level-to-styles($config, body-2);
   }