refactor: use system-level typography

src/material/badge/_m2-badge.scss

@@ -1,6 +1,5 @@
 @use 'sass:map';
 @use 'sass:math';
-@use '../core/theming/inspection';
 @use '../core/tokens/m2-utils';
 @use '../core/tokens/m3-utils';
 
@@ -64,10 +63,12 @@ $_large-size: $_default-size + 6px;
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   $base-size: 12px;
 
   @return (
-    badge-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    badge-text-font: map.get($system, body-medium-font),
     badge-line-height: $_default-size,
     badge-text-size: $base-size,
     badge-text-weight: 600,

src/material/bottom-sheet/_m2-bottom-sheet.scss

@@ -1,4 +1,3 @@
-@use '../core/theming/inspection';
 @use '../core/tokens/m2-utils';
 @use 'sass:map';
 
@@ -23,15 +22,13 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    bottom-sheet-container-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    bottom-sheet-container-text-line-height:
-        inspection.get-theme-typography($theme, body-2, line-height),
-    bottom-sheet-container-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    bottom-sheet-container-text-tracking:
-        inspection.get-theme-typography($theme, body-2, letter-spacing),
-    bottom-sheet-container-text-weight:
-        inspection.get-theme-typography($theme, body-2, font-weight),
+    bottom-sheet-container-text-font: map.get($system, body-medium-font),
+    bottom-sheet-container-text-line-height: map.get($system, body-medium-line-height),
+    bottom-sheet-container-text-size: map.get($system, body-medium-size),
+    bottom-sheet-container-text-tracking: map.get($system, body-medium-tracking),
+    bottom-sheet-container-text-weight: map.get($system, body-medium-weight),
   );
 }
 

src/material/button-toggle/_m2-button-toggle.scss

@@ -53,24 +53,18 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    button-toggle-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    button-toggle-label-text-line-height:
-        inspection.get-theme-typography($theme, body-1, line-height),
-    button-toggle-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    button-toggle-label-text-tracking:
-        inspection.get-theme-typography($theme, body-1, letter-spacing),
-    button-toggle-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight),
-    button-toggle-legacy-label-text-font:
-        inspection.get-theme-typography($theme, body-1, font-family),
-    button-toggle-legacy-label-text-line-height:
-        inspection.get-theme-typography($theme, body-1, line-height),
-    button-toggle-legacy-label-text-size:
-        inspection.get-theme-typography($theme, body-1, font-size),
-    button-toggle-legacy-label-text-tracking:
-        inspection.get-theme-typography($theme, body-1, letter-spacing),
-    button-toggle-legacy-label-text-weight:
-        inspection.get-theme-typography($theme, body-1, font-weight),
+    button-toggle-label-text-font: map.get($system, body-large-font),
+    button-toggle-label-text-line-height: map.get($system, body-large-line-height),
+    button-toggle-label-text-size: map.get($system, body-large-size),
+    button-toggle-label-text-tracking: map.get($system, body-large-tracking),
+    button-toggle-label-text-weight: map.get($system, body-large-weight),
+    button-toggle-legacy-label-text-font: map.get($system, body-large-font),
+    button-toggle-legacy-label-text-line-height: map.get($system, body-large-line-height),
+    button-toggle-legacy-label-text-size: map.get($system, body-large-size),
+    button-toggle-legacy-label-text-tracking: map.get($system, body-large-tracking),
+    button-toggle-legacy-label-text-weight: map.get($system, body-large-weight),
   );
 }
 

src/material/button/_m2-button.scss

@@ -143,38 +143,34 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  $font-family: inspection.get-theme-typography($theme, button, font-family);
-  $font-size: inspection.get-theme-typography($theme, button, font-size);
-  $font-weight: inspection.get-theme-typography($theme, button, font-weight);
-  $letter-spacing: inspection.get-theme-typography($theme, button, letter-spacing);
-  $text-transform: none;
+  $system: m2-utils.get-system($theme);
 
   @return (
-    button-filled-label-text-font: $font-family,
-    button-filled-label-text-size: $font-size,
-    button-filled-label-text-tracking: $letter-spacing,
+    button-filled-label-text-font: map.get($system, label-small-font),
+    button-filled-label-text-size: map.get($system, label-small-size),
+    button-filled-label-text-tracking: map.get($system, label-small-tracking),
     button-filled-label-text-transform: none,
-    button-filled-label-text-weight: $font-weight,
-    button-outlined-label-text-font: $font-family,
-    button-outlined-label-text-size: $font-size,
-    button-outlined-label-text-tracking: $letter-spacing,
+    button-filled-label-text-weight: map.get($system, label-small-weight),
+    button-outlined-label-text-font: map.get($system, label-small-font),
+    button-outlined-label-text-size: map.get($system, label-small-size),
+    button-outlined-label-text-tracking: map.get($system, label-small-tracking),
     button-outlined-label-text-transform: none,
-    button-outlined-label-text-weight: $font-weight,
-    button-protected-label-text-font: $font-family,
-    button-protected-label-text-size: $font-size,
-    button-protected-label-text-tracking: $letter-spacing,
+    button-outlined-label-text-weight: map.get($system, label-small-weight),
+    button-protected-label-text-font: map.get($system, label-small-font),
+    button-protected-label-text-size: map.get($system, label-small-size),
+    button-protected-label-text-tracking: map.get($system, label-small-tracking),
     button-protected-label-text-transform: none,
-    button-protected-label-text-weight: $font-weight,
-    button-text-label-text-font: $font-family,
-    button-text-label-text-size: $font-size,
-    button-text-label-text-tracking: $letter-spacing,
+    button-protected-label-text-weight: map.get($system, label-small-weight),
+    button-text-label-text-font: map.get($system, label-small-font),
+    button-text-label-text-size: map.get($system, label-small-size),
+    button-text-label-text-tracking: map.get($system, label-small-tracking),
     button-text-label-text-transform: none,
-    button-text-label-text-weight: $font-weight,
-    button-tonal-label-text-font: $font-family,
-    button-tonal-label-text-size: $font-size,
-    button-tonal-label-text-tracking: $letter-spacing,
+    button-text-label-text-weight: map.get($system, label-small-weight),
+    button-tonal-label-text-font: map.get($system, label-small-font),
+    button-tonal-label-text-size: map.get($system, label-small-size),
+    button-tonal-label-text-tracking: map.get($system, label-small-tracking),
     button-tonal-label-text-transform: none,
-    button-tonal-label-text-weight: $font-weight,
+    button-tonal-label-text-weight: map.get($system, label-small-weight),
   );
 }
 

src/material/button/_m2-fab.scss

@@ -82,12 +82,12 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    fab-extended-label-text-font: inspection.get-theme-typography($theme, button, font-family),
-    fab-extended-label-text-size: inspection.get-theme-typography($theme, button, font-size),
-    fab-extended-label-text-tracking:
-        inspection.get-theme-typography($theme, button, letter-spacing),
-    fab-extended-label-text-weight: inspection.get-theme-typography($theme, button, font-weight)
+    fab-extended-label-text-font: map.get($system, label-small-font),
+    fab-extended-label-text-size: map.get($system, label-small-size),
+    fab-extended-label-text-tracking: map.get($system, label-small-tracking),
+    fab-extended-label-text-weight: map.get($system, label-small-weight)
   );
 }
 

src/material/card/_m2-card.scss

@@ -1,4 +1,3 @@
-@use '../core/theming/inspection';
 @use '../core/style/elevation';
 @use '../core/tokens/m2-utils';
 @use 'sass:map';
@@ -32,19 +31,18 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    card-title-text-font: inspection.get-theme-typography($theme, headline-6, font-family),
-    card-title-text-line-height: inspection.get-theme-typography($theme, headline-6, line-height),
-    card-title-text-size: inspection.get-theme-typography($theme, headline-6, font-size),
-    card-title-text-tracking: inspection.get-theme-typography($theme, headline-6, letter-spacing),
-    card-title-text-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
-    card-subtitle-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
-    card-subtitle-text-line-height:
-        inspection.get-theme-typography($theme, subtitle-2, line-height),
-    card-subtitle-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
-    card-subtitle-text-tracking:
-        inspection.get-theme-typography($theme, subtitle-2, letter-spacing),
-    card-subtitle-text-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight),
+    card-title-text-font: map.get($system, title-small-font),
+    card-title-text-line-height: map.get($system, title-small-line-height),
+    card-title-text-size: map.get($system, title-small-size),
+    card-title-text-tracking: map.get($system, title-small-tracking),
+    card-title-text-weight: map.get($system, title-small-weight),
+    card-subtitle-text-font: map.get($system, label-medium-font),
+    card-subtitle-text-line-height: map.get($system, label-medium-line-height),
+    card-subtitle-text-size: map.get($system, label-medium-size),
+    card-subtitle-text-tracking: map.get($system, label-medium-tracking),
+    card-subtitle-text-weight: map.get($system, label-medium-weight),
   );
 }
 

src/material/checkbox/_m2-checkbox.scss

@@ -57,12 +57,13 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    checkbox-label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    checkbox-label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
-    checkbox-label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    checkbox-label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
-    checkbox-label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
+    checkbox-label-text-font: map.get($system, body-medium-font),
+    checkbox-label-text-line-height: map.get($system, body-medium-line-height),
+    checkbox-label-text-size: map.get($system, body-medium-size),
+    checkbox-label-text-tracking: map.get($system, body-medium-tracking),
+    checkbox-label-text-weight: map.get($system, body-medium-weight)
   );
 }
 

src/material/chips/_m2-chip.scss

@@ -72,12 +72,13 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    chip-label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    chip-label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
-    chip-label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    chip-label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
-    chip-label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
+    chip-label-text-font: map.get($system, body-medium-font),
+    chip-label-text-line-height: map.get($system, body-medium-line-height),
+    chip-label-text-size: map.get($system, body-medium-size),
+    chip-label-text-tracking: map.get($system, body-medium-tracking),
+    chip-label-text-weight: map.get($system, body-medium-weight)
   );
 }
 

src/material/core/m2/_theming.scss

@@ -114,20 +114,26 @@
   @return $theme;
 }
 
-@function _define-system($primary, $accent, $warn, $is-dark) {
+@function _define-system($primary, $accent, $warn, $is-dark, $typography) {
   $palettes: (
     primary: $primary,
     accent: $accent,
     warn: $warn,
   );
 
-  $color: if(
+  $sys-color: if(
       $is-dark,
       m2.md-sys-color-values-dark($palettes),
       m2.md-sys-color-values-light($palettes));
-  $state: m2.md-sys-state-values();
+  $sys-state: m2.md-sys-state-values();
+  $sys-typography: m2.md-sys-typescale-values($typography);
 
-  @return map.merge($color, $state);
+  $system: ();
+  @each $map in ($sys-color, $sys-state, $sys-typography) {
+    $system: map.merge($system, $map);
+  }
+
+  @return $system;
 }
 
 // Creates a color configuration from the specified
@@ -177,7 +183,13 @@
     );
 
     $theme: _internalize-theme(theming.private-create-backwards-compatibility-theme($theme));
-    $theme: map.set($theme, _mat-system, _define-system($primary, $accent, $warn, $is-dark));
+    $system: _define-system(
+        $primary: $primary,
+        $accent: $accent,
+        $warn: $warn,
+        $is-dark: $is-dark,
+        $typography: ());
+    $theme: map.set($theme, _mat-system, $system);
     @return $theme;
   }
   // If the map pattern is used (1), we just pass-through the configurations for individual
@@ -199,10 +211,13 @@
   $theme: _internalize-theme(
       theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result))
   );
-  $primary: map.get($result, primary) or map.get($result, color, primary) or ();
-  $accent: map.get($result, accent) or map.get($result, color, accent) or ();
-  $warn: map.get($result, warn) or map.get($result, color, warn) or ();
-  $theme: map.set($theme, _mat-system, _define-system($primary, $accent, $warn, $is-dark));
+  $system: _define-system(
+      $primary: map.get($result, primary) or map.get($result, color, primary) or (),
+      $accent: map.get($result, accent) or map.get($result, color, accent) or (),
+      $warn: map.get($result, warn) or map.get($result, color, warn) or (),
+      $is-dark: $is-dark,
+      $typography: map.get($result, typography) or ());
+  $theme: map.set($theme, _mat-system, $system);
   @return $theme;
 }
 

src/material/core/option/_m2-optgroup.scss

@@ -1,4 +1,3 @@
-@use '../theming/inspection';
 @use '../tokens/m2-utils';
 @use 'sass:map';
 
@@ -18,12 +17,13 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    optgroup-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    optgroup-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
-    optgroup-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    optgroup-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
-    optgroup-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight)
+    optgroup-label-text-font: map.get($system, body-large-font),
+    optgroup-label-text-line-height: map.get($system, body-large-line-height),
+    optgroup-label-text-size: map.get($system, body-large-size),
+    optgroup-label-text-tracking: map.get($system, body-large-tracking),
+    optgroup-label-text-weight: map.get($system, body-large-weight)
   );
 }
 

src/material/core/option/_m2-option.scss

@@ -29,12 +29,13 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    option-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    option-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
-    option-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    option-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
-    option-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight)
+    option-label-text-font: map.get($system, body-large-font),
+    option-label-text-line-height: map.get($system, body-large-line-height),
+    option-label-text-size: map.get($system, body-large-size),
+    option-label-text-tracking: map.get($system, body-large-tracking),
+    option-label-text-weight: map.get($system, body-large-weight)
   );
 }
 

src/material/core/tokens/_m2-utils.scss

@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use './m2';
 
 // Gets the theme's system values as a flat map.
 @function get-system($theme) {
@@ -7,5 +8,10 @@
     @return $system;
   }
 
+  // If the $theme is a typography-config, convert it to a system map.
+  @if map.has-key($theme, body-1) {
+    @return m2.md-sys-typescale-values($theme);
+  }
+
   @return ();
 }