refactor(multiple): convert components to theme inspection API

Converts: input, list, radio, slide-toggle, slider.

See related PR #27688 for more context.

Author: mmalerba

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

@@ -148,10 +148,10 @@
 }
 
 @mixin typography($config-or-theme) {
-  $config: mat.private-typography-to-2014-config(
+  $config: mat.private-typography-to-2018-config(
       mat.get-typography-config($config-or-theme));
   [mat-edit-title] {
-    @include mat.typography-level($config, title);
+    @include mat.typography-level($config, headline-6);
   }
 }
 

src/material/checkbox/_checkbox-theme.scss

@@ -8,9 +8,9 @@
 @use '../core/mdc-helpers/mdc-helpers';
 @use '../core/tokens/m2/mdc/checkbox' as tokens-mdc-checkbox;
 
-@mixin base($config-or-theme) {
-  @if inspection.get-theme-version($config-or-theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($config-or-theme, base));
+@mixin base($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
   }
   @else {
     @include sass-utils.current-selector-or-root() {
@@ -19,75 +19,64 @@
   }
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
-  @if inspection.get-theme-version($config-or-theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($config-or-theme, color));
+@mixin color($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
   }
   @else {
-    $primary: map.get($config, primary);
-    $warn: map.get($config, warn);
-    $foreground: map.get($config, foreground);
-
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($config));
+      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme));
     }
 
     .mat-mdc-checkbox {
       &.mat-primary {
-        $primary-config: map.merge($config, (accent: $primary));
-        @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($primary-config));
+        @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, primary));
       }
 
       &.mat-warn {
-        $warn-config: map.merge($config, (accent: $warn));
-        @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($warn-config));
+        @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-color-tokens($theme, warn));
       }
 
-      @include mdc-helpers.using-mdc-theme($config) {
+      @include mdc-helpers.using-mdc-theme($theme) {
         // TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
         @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-theme-styles-query);
       }
 
       &.mat-mdc-checkbox-disabled label {
         // MDC should set the disabled color on the label, but doesn't, so we do it here instead.
-        color: theming.get-color-from-palette($foreground, disabled-text);
+        color: inspection.get-theme-color($theme, foreground, disabled-text);
       }
     }
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-          theming.get-typography-config($config-or-theme));
-
-  @if inspection.get-theme-version($config-or-theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($config-or-theme, typography));
+@mixin typography($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($config));
+      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-typography-tokens($theme));
     }
 
     .mat-mdc-checkbox {
-      @include mdc-helpers.using-mdc-typography($config) {
+      @include mdc-helpers.using-mdc-typography($theme) {
         // TODO(mmalerba): Switch to static-styles, theme-styles, and theme once they're available.
         @include mdc-form-field.core-styles($query: mdc-helpers.$mdc-typography-styles-query);
       }
     }
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+@mixin density($theme) {
+  $density-scale: inspection.get-theme-density($theme);
 
-  @if inspection.get-theme-version($config-or-theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($config-or-theme, density));
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
     @include sass-utils.current-selector-or-root() {
-      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($density-scale));
+      @include mdc-checkbox-theme.theme(tokens-mdc-checkbox.get-density-tokens($theme));
     }
 
     @include mdc-helpers.if-touch-targets-unsupported($density-scale) {
@@ -98,27 +87,21 @@
   }
 }
 
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
-
+@mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-checkbox') {
     @if inspection.get-theme-version($theme) == 1 {
       @include _theme-from-tokens(inspection.get-theme-tokens($theme));
     }
     @else {
-      $color: theming.get-color-config($theme);
-      $density: theming.get-density-config($theme);
-      $typography: theming.get-typography-config($theme);
-
       @include base($theme);
-      @if $color != null {
-        @include color($color);
+      @if inspection.theme-has($theme, color) {
+        @include color($theme);
       }
-      @if $density != null {
-        @include density($density);
+      @if inspection.theme-has($theme, density) {
+        @include density($theme);
       }
-      @if $typography != null {
-        @include typography($typography);
+      @if inspection.theme-has($theme, typography) {
+        @include typography($theme);
       }
     }
   }

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

@@ -2,6 +2,7 @@
 //  "theming", "typography", "core".
 
 @use '../theming/theming';
+@use '../theming/inspection';
 @use '../typography/typography';
 @use '../typography/typography-utils';
 @use '@material/feature-targeting' as mdc-feature-targeting;
@@ -36,7 +37,7 @@ $mat-typography-mdc-level-mappings: (
 );
 
 // Converts an Angular Material typography level config to an MDC one.
-@function typography-level-config-to-mdc($mat-config, $mat-level) {
+@function typography-level-config-to-mdc($theme, $mat-level) {
   $mdc-level: map.get($mat-typography-mdc-level-mappings, $mat-level);
 
   $result-with-nulls: map.merge(
@@ -49,11 +50,11 @@ $mat-typography-mdc-level-mappings: (
           )),
       if($mat-level,
           (
-            font-size: typography-utils.font-size($mat-config, $mat-level),
-            line-height: typography-utils.line-height($mat-config, $mat-level),
-            font-weight: typography-utils.font-weight($mat-config, $mat-level),
-            letter-spacing: typography-utils.letter-spacing($mat-config, $mat-level),
-            font-family: typography-utils.font-family($mat-config, $mat-level),
+            font-size: inspection.get-theme-typography($theme, $mat-level, font-size),
+            line-height: inspection.get-theme-typography($theme, $mat-level, line-height),
+            font-weight: inspection.get-theme-typography($theme, $mat-level, font-weight),
+            letter-spacing: inspection.get-theme-typography($theme, $mat-level, letter-spacing),
+            font-family: inspection.get-theme-typography($theme, $mat-level, font-family),
             // Angular Material doesn't use text-transform, so disable it.
             text-transform: none,
           ),
@@ -71,13 +72,13 @@ $mat-typography-mdc-level-mappings: (
 }
 
 // Converts an Angular Material typography config to an MDC one.
-@function typography-config-to-mdc($mat-config) {
+@function typography-config-to-mdc($theme) {
   $mdc-config: ();
 
   @each $mat-level, $mdc-level in $mat-typography-mdc-level-mappings {
     $mdc-config: map.merge(
         $mdc-config,
-        ($mdc-level: typography-level-config-to-mdc($mat-config, $mat-level)));
+        ($mdc-level: typography-level-config-to-mdc($theme, $mat-level)));
   }
 
   @return $mdc-config;
@@ -100,12 +101,11 @@ $mat-typography-mdc-level-mappings: (
 
 // Configures MDC's global variables to reflect the given theme, applies the given styles,
 // then resets the global variables to prevent unintended side effects.
-@mixin using-mdc-theme($config) {
-  $primary: theming.get-color-from-palette(map.get($config, primary));
-  $accent: theming.get-color-from-palette(map.get($config, accent));
-  $warn: theming.get-color-from-palette(map.get($config, warn));
-  $background-palette: map.get($config, background);
-  $is-dark: map.get($config, is-dark);
+@mixin using-mdc-theme($theme) {
+  $primary: inspection.get-theme-color($theme, primary);
+  $accent: inspection.get-theme-color($theme, accent);
+  $warn: inspection.get-theme-color($theme, warn);
+  $is-dark: inspection.get-theme-type($theme) == dark;
 
   // Save the original values.
   $orig-primary: mdc-theme-color.$primary;
@@ -126,8 +126,8 @@ $mat-typography-mdc-level-mappings: (
   mdc-theme-color.$secondary: $accent;
   mdc-theme-color.$on-secondary:
       if(variable-safe-contrast-tone(mdc-theme-color.$secondary, $is-dark) == 'dark', #000, #fff);
-  mdc-theme-color.$background: theming.get-color-from-palette($background-palette, background);
-  mdc-theme-color.$surface: theming.get-color-from-palette($background-palette, card);
+  mdc-theme-color.$background: inspection.get-theme-color($theme, background, background);
+  mdc-theme-color.$surface: inspection.get-theme-color($theme, background, card);
   mdc-theme-color.$on-surface:
       if(variable-safe-contrast-tone(mdc-theme-color.$surface, $is-dark) == 'dark', #000, #fff);
   mdc-theme-color.$error: $warn;
@@ -193,13 +193,13 @@ $mat-typography-mdc-level-mappings: (
 
 // Configures MDC's global variables to reflect the given typography config,
 // applies the given styles, then resets the global variables to prevent unintended side effects.
-@mixin using-mdc-typography($config) {
+@mixin using-mdc-typography($theme) {
   // Save the original values.
   $orig-mdc-typography-styles: mdc-typography.$styles;
 
   // Set new values based on the given Angular Material typography configuration.
-  @if $config {
-    mdc-typography.$styles: typography-config-to-mdc($config);
+  @if inspection.theme-has($theme, typography) {
+    mdc-typography.$styles: typography-config-to-mdc($theme);
   }
 
   // Apply given rules.

src/material/core/theming/_m2-inspection.scss

@@ -2,11 +2,11 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use './theming';
-@use '../typography/typography-utils';
-@use '../typography/typography';
+@use '../typography/property-getters' as typography-getters;
+@use '../typography/versioning' as typography-versioning;
 
 /// Key used to access the Angular Material theme internals.
-$_internals: _mat-theming-internals-do-not-access;
+$_internals: _mat-theming-internals-do-not-accesst;
 
 /// Keys that indicate a config object is a color config.
 $_color-keys: (
@@ -139,29 +139,30 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   @if not theme-has($theme, typography) {
     @error 'Typography information is not available on this theme.';
   }
-  $typography: typography.private-typography-to-2018-config(theming.get-typography-config($theme));
+  $typography: typography-versioning.private-typography-to-2018-config(
+      theming.get-typography-config($theme));
   @if $property == font {
-    $font-weight: typography-utils.font-weight($typography, $typescale);
-    $font-size: typography-utils.font-size($typography, $typescale);
-    $line-height: typography-utils.line-height($typography, $typescale);
-    $font-family: typography-utils.font-family($typography, $typescale);
+    $font-weight: typography-getters.font-weight($typography, $typescale);
+    $font-size: typography-getters.font-size($typography, $typescale);
+    $line-height: typography-getters.line-height($typography, $typescale);
+    $font-family: typography-getters.font-family($typography, $typescale);
     @return ($font-weight list.slash($font-size, $line-height) $font-family);
   }
   @else if $property == font-family {
-    $result: typography-utils.font-family($typography, $typescale);
-    @return $result or typography-utils.font-family($typography);
+    $result: typography-getters.font-family($typography, $typescale);
+    @return $result or typography-getters.font-family($typography);
   }
   @else if $property == font-size {
-    @return typography-utils.font-size($typography, $typescale);
+    @return typography-getters.font-size($typography, $typescale);
   }
   @else if $property == font-weight {
-    @return typography-utils.font-weight($typography, $typescale);
+    @return typography-getters.font-weight($typography, $typescale);
   }
   @else if $property == line-height {
-    @return typography-utils.line-height($typography, $typescale);
+    @return typography-getters.line-height($typography, $typescale);
   }
   @else if $property == letter-spacing {
-    @return typography-utils.letter-spacing($typography, $typescale);
+    @return typography-getters.letter-spacing($typography, $typescale);
   }
   @else {
     @error #{'Valid typography properties are: #{$_typography-properties}. Got:'} $property;

src/material/core/tokens/m2/mat/_radio.scss

@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../../token-utils';
 @use '../../../theming/theming';
+@use '../../../theming/inspection';
 @use '../../../style/sass-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -13,25 +14,23 @@ $prefix: (mat, radio);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
-  $foreground: map.get($config, foreground);
-  $is-dark: map.get($config, is-dark);
-  $accent: map.get($config, accent);
+@function get-color-tokens($theme, $palette-name: accent) {
+  $is-dark: inspection.get-theme-type($theme) == dark;
 
   @return (
     ripple-color: if($is-dark, #fff, #000),
-    checked-ripple-color: theming.get-color-from-palette($accent, default),
-    disabled-label-color: theming.get-color-from-palette($foreground, disabled-text),
+    checked-ripple-color: inspection.get-theme-color($theme, $palette-name, default),
+    disabled-label-color: inspection.get-theme-color($theme, foreground, disabled-text),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
+@function get-typography-tokens($theme) {
   @return ();
 }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }
 

src/material/core/tokens/m2/mat/_slide-toggle.scss

@@ -1,5 +1,6 @@
 @use '../../token-utils';
 @use '../../../style/sass-utils';
+@use '../../../theming/inspection';
 @use '../../../typography/typography-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
@@ -12,31 +13,23 @@ $prefix: (mat, slide-toggle);
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($config) {
+@function get-color-tokens($theme) {
   @return ();
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
-@function get-typography-tokens($config) {
-  // TODO(amysorto): The earlier implementation of the slide-toggle used MDC's APIs to create the
-  // typography tokens. As a result, we unintentionally allowed `null` typography configs to be
-  // passed in. Since there a lot of apps that now depend on this pattern, we need this temporary
-  // fallback.
-  @if ($config == null) {
-    $config: mdc-helpers.private-fallback-typography-from-mdc();
-  }
-
+@function get-typography-tokens($theme) {
   @return (
-    label-text-font: typography-utils.font-family($config),
-    label-text-size: typography-utils.font-size($config, body-2),
-    label-text-tracking: typography-utils.letter-spacing($config, body-2),
-    label-text-line-height: typography-utils.line-height($config, body-2),
-    label-text-weight: typography-utils.font-weight($config, body-2),
+    label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
+    label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
+    label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
+    label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
+    label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight),
   );
  }
 
 // Tokens that can be configured through Angular Material's density theming API.
-@function get-density-tokens($config) {
+@function get-density-tokens($theme) {
   @return ();
 }