refactor: realign changes with g3 (#31353)

Co-authored-by: Andrew Seguin <[email protected]>

Author: andrewseguin

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/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%)};