refactor: realign changes with g3

Author: Andrew Seguin

src/material/core/tokens/m2/_md-sys-typescale.scss

@@ -3,43 +3,44 @@
 @use 'sass:meta';
 
 @function md-sys-typescale-values($config) {
+  // Mapping is according to the old 2014 version of the typography spec.
   $sys-to-config: (
-    body-large: body-1,
-    body-medium: body-2,
+    body-large: subheading-1,
+    body-medium: body-1,
     body-small: caption,
-    label-large: subtitle-1,
-    label-medium: subtitle-2,
+    display-large: display-4,
+    display-medium: display-4,
+    display-small: display-4,
+    headline-large: display-3,
+    headline-medium: display-2,
+    headline-small: display-1,
+    label-large: subheading-2,
+    label-medium: body-2,
     label-small: button,
-    display-large: headline-1,
-    display-medium: headline-1,
-    display-small: headline-1,
-    headline-large: headline-2,
-    headline-medium: headline-3,
-    headline-small: headline-4,
-    title-large: headline-5,
-    title-medium: headline-5,
-    title-small: headline-6,
+    title-large: headline,
+    title-medium: headline,
+    title-small: title,
   );
 
-  // If the config is based on an old 2014 version of the typography spec, then
-  // use the old config keys to map to the new system tokens.
-  @if (map.get($config, headline) != null) {
+  // If the config is based on the updated 2018 version of the typography spec, then
+  // use the correct config keys mapping.
+  @if (map.get($config, headline-1) != null) {
     $sys-to-config: (
-      body-large: subheading-1,
-      body-medium: body-1,
+      body-large: body-1,
+      body-medium: body-2,
       body-small: caption,
-      display-large: display-4,
-      display-medium: display-4,
-      display-small: display-4,
-      headline-large: display-3,
-      headline-medium: display-2,
-      headline-small: display-1,
-      label-large: subheading-2,
-      label-medium: body-2,
+      label-large: subtitle-1,
+      label-medium: subtitle-2,
       label-small: button,
-      title-large: headline,
-      title-medium: headline,
-      title-small: title,
+      display-large: headline-1,
+      display-medium: headline-1,
+      display-small: headline-1,
+      headline-large: headline-2,
+      headline-medium: headline-3,
+      headline-small: headline-4,
+      title-large: headline-5,
+      title-medium: headline-5,
+      title-small: headline-6,
     );
   }
 

src/material/expansion/_m2-expansion.scss

@@ -37,23 +37,24 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  $system: m2-utils.get-system($theme);
   @return (
-    expansion-header-text-font: map.get($system, label-medium-font),
-    expansion-header-text-size: map.get($system, label-medium-size),
-    expansion-header-text-weight: map.get($system, label-medium-weight),
+    expansion-header-text-font: inspection.get-theme-typography($theme, subtitle-2, font-family),
+    expansion-header-text-size: inspection.get-theme-typography($theme, subtitle-2, font-size),
+    expansion-header-text-weight: inspection.get-theme-typography($theme, subtitle-2, font-weight),
 
     // TODO(crisbeto): these two properties weren't set at all before the introduction of tokens,
     // but it's inconsistent not to provide them since the container sets all of them. Eventually
     // we should change the values to use come from `subtitle-2`.
     expansion-header-text-line-height: inherit,
     expansion-header-text-tracking: inherit,
 
-    expansion-container-text-font: map.get($system, body-medium-font),
-    expansion-container-text-line-height: map.get($system, body-medium-line-height),
-    expansion-container-text-size: map.get($system, body-medium-size),
-    expansion-container-text-tracking: map.get($system, body-medium-tracking),
-    expansion-container-text-weight: map.get($system, body-medium-weight),
+    expansion-container-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    expansion-container-text-line-height:
+    inspection.get-theme-typography($theme, body-2, line-height),
+    expansion-container-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    expansion-container-text-tracking:
+    inspection.get-theme-typography($theme, body-2, letter-spacing),
+    expansion-container-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
   );
 }
 

src/material/slide-toggle/_slide-toggle-theme.scss

@@ -44,6 +44,10 @@
       $system: m2-utils.get-system($theme);
 
       & {
+        // TODO(andrewjs): Remove this once all tokens are migrated to
+        // mat internally.
+        --mdc-slide-toggle-disabled-label-text-color: #{
+            m3-utils.color-with-opacity(map.get($system, on-surface), 38%)};
         // TODO(wagnermaciel): Use our token system to define this css variable.
         --mat-slide-toggle-disabled-label-text-color: #{
             m3-utils.color-with-opacity(map.get($system, on-surface), 38%)};

src/material/toolbar/_m2-toolbar.scss

@@ -20,16 +20,16 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  $system: m2-utils.get-system($theme);
   @return (
-    toolbar-title-text-font: map.get($system, title-small-font),
-    toolbar-title-text-line-height: map.get($system, title-small-line-height),
-    toolbar-title-text-size: map.get($system, title-small-size),
-    toolbar-title-text-tracking: map.get($system, title-small-tracking),
-    toolbar-title-text-weight: map.get($system, title-small-weight),
+    toolbar-title-text-font: inspection.get-theme-typography($theme, headline-6, font-family),
+    toolbar-title-text-line-height:
+        inspection.get-theme-typography($theme, headline-6, line-height),
+    toolbar-title-text-size: inspection.get-theme-typography($theme, headline-6, font-size),
+    toolbar-title-text-tracking:
+        inspection.get-theme-typography($theme, headline-6, letter-spacing),
+    toolbar-title-text-weight: inspection.get-theme-typography($theme, headline-6, font-weight),
   );
 }
-
 // Tokens that can be configured through Angular Material's density theming API.
 @function get-density-tokens($theme) {
   $density-scale: theming.clamp-density(inspection.get-theme-density($theme), -3);

src/material/tree/_m2-tree.scss

@@ -21,11 +21,10 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
-  $system: m2-utils.get-system($theme);
   @return (
-    tree-node-text-font: map.get($system, body-medium-font),
-    tree-node-text-size: map.get($system, body-medium-size),
-    tree-node-text-weight: map.get($system, body-medium-weight),
+    tree-node-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    tree-node-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    tree-node-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
 
     // TODO(crisbeto): provide tokens for line height and letter spacing to match other components.
   );