WIP: convert components to theme inspection API

Author: mmalerba

src/dev-app/theme.scss

@@ -3,6 +3,10 @@
 
 // Plus imports for other components in your app.
 
+// Disable legacy API compatibility.
+// TODO: uncomment once conversion to inspection API is complete.
+//mat.$theme-legacy-inspection-api-compatibility: false;
+
 // Define the default (light) theme.
 $candy-app-primary: mat.define-palette(mat.$indigo-palette);
 $candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

src/material/card/_card-theme.scss

@@ -24,24 +24,22 @@
   }
 }
 
-@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 {
     $mdc-elevated-card-color-tokens: token-utils.resolve-elevation(
-        tokens-mdc-elevated-card.get-color-tokens($config),
+        tokens-mdc-elevated-card.get-color-tokens($theme),
         container-elevation,
         container-shadow-color
     );
     $mdc-outlined-card-color-tokens: token-utils.resolve-elevation(
-        tokens-mdc-outlined-card.get-color-tokens($config),
+        tokens-mdc-outlined-card.get-color-tokens($theme),
         container-elevation,
         container-shadow-color,
     );
-    $mat-card-color-tokens: tokens-mat-card.get-color-tokens($config);
+    $mat-card-color-tokens: tokens-mat-card.get-color-tokens($theme);
 
     // Add values for card tokens.
     @include sass-utils.current-selector-or-root() {
@@ -102,13 +100,12 @@
       @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);

src/material/core/_core-theme.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
-@use 'theming/theming';
+@use './theming/theming';
+@use './theming/inspection';
 @use './style/private';
 @use './ripple/ripple-theme';
 @use './option/option-theme';
@@ -8,23 +9,18 @@
 @use './style/elevation';
 @use './typography/typography';
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
-  @include ripple-theme.color($config);
-  @include option-theme.color($config);
-  @include optgroup-theme.color($config);
-  @include pseudo-checkbox-theme.color($config);
+@mixin color($theme) {
+  @include ripple-theme.color($theme);
+  @include option-theme.color($theme);
+  @include optgroup-theme.color($theme);
+  @include pseudo-checkbox-theme.color($theme);
 
   // Wrapper element that provides the theme background when the user's content isn't
   // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand
   // selector in case the mixin is included at the top level.
   .mat-app-background#{if(&, ', &.mat-app-background', '')} {
-    $background: map.get($config, background);
-    $foreground: map.get($config, foreground);
-
-    background-color: theming.get-color-from-palette($background, background);
-    color: theming.get-color-from-palette($foreground, text);
+    background-color: inspection.get-theme-color($theme, background, background);
+    color: inspection.get-theme-color($theme, foreground, text);
   }
 
   // Provides external CSS classes for each elevation value. Each CSS class is formatted as
@@ -35,7 +31,7 @@
     // We need the `mat-mdc-elevation-specific`, because some MDC mixins
     // come with elevation baked in and we don't have a way of removing it.
     .#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
-      @include private.private-theme-elevation($zValue, $config);
+      @include private.private-theme-elevation($zValue, $theme);
     }
   }
 
@@ -75,12 +71,11 @@
   // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then
   // the imported themes (such as `mat-ripple-theme`) should not report again.
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-core') {
-    $color: theming.get-color-config($theme);
     $density: theming.get-density-config($theme);
     $typography: theming.get-typography-config($theme);
 
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
     @if $density != null {
       @include density($density);

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

@@ -3,14 +3,13 @@
 @use '../style/sass-utils';
 
 @use '../theming/theming';
+@use '../theming/inspection';
 @use '../typography/typography';
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
+@mixin color($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-optgroup.$prefix,
-      tokens-mat-optgroup.get-color-tokens($config));
+      tokens-mat-optgroup.get-color-tokens($theme));
   }
 }
 
@@ -35,7 +34,7 @@
     $density: theming.get-density-config($theme);
     $typography: theming.get-typography-config($theme);
 
-    @if $color != null {
+    @if inspection.theme-has($theme, color) {
       @include color($color);
     }
     @if $density != null {

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

@@ -4,27 +4,24 @@
 @use '../style/sass-utils';
 
 @use '../theming/theming';
+@use '../theming/inspection';
 @use '../typography/typography';
 @use '../mdc-helpers/mdc-helpers';
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-
-  @include mdc-helpers.using-mdc-theme($config) {
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values(tokens-mat-option.$prefix,
-        tokens-mat-option.get-color-tokens($config));
-    }
+@mixin color($theme) {
+  @include sass-utils.current-selector-or-root() {
+    @include token-utils.create-token-values(tokens-mat-option.$prefix,
+      tokens-mat-option.get-color-tokens($theme));
+  }
 
-    .mat-accent {
-      @include token-utils.create-token-values(tokens-mat-option.$prefix,
-        tokens-mat-option.private-get-color-palette-color-tokens(map.get($config, accent)));
-    }
+  .mat-accent {
+    @include token-utils.create-token-values(tokens-mat-option.$prefix,
+      tokens-mat-option.get-color-tokens($theme, accent));
+  }
 
-    .mat-warn {
-      @include token-utils.create-token-values(tokens-mat-option.$prefix,
-        tokens-mat-option.private-get-color-palette-color-tokens(map.get($config, warn)));
-    }
+  .mat-warn {
+    @include token-utils.create-token-values(tokens-mat-option.$prefix,
+      tokens-mat-option.get-color-tokens($theme, warn));
   }
 }
 
@@ -49,8 +46,8 @@
     $density: theming.get-density-config($theme);
     $typography: theming.get-typography-config($theme);
 
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
     @if $density != null {
       @include density($density);

src/material/core/ripple/_ripple-theme.scss

@@ -1,12 +1,11 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use '../theming/theming';
+@use '../theming/inspection';
 
 // Colors for the ripple elements.
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $foreground: map.get($config, foreground);
-  $foreground-base: map.get($foreground, base);
+@mixin color($theme) {
+  $foreground-base: inspection.get-theme-color($theme, foreground, base);
   $color-opacity: 0.1;
 
   .mat-ripple-element {
@@ -26,8 +25,8 @@
   $theme: theming.private-legacy-get-theme($theme-or-color-config);
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-ripple') {
     $color: theming.get-color-config($theme);
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
   }
 }

src/material/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
 @use '../../theming/theming';
+@use '../../theming/inspection';
 
 @mixin _psuedo-checkbox-styles-with-color($text-color, $background) {
   .mat-pseudo-checkbox-checked,
@@ -19,15 +20,13 @@
   }
 }
 
-@mixin color($config-or-theme) {
-  $config: theming.get-color-config($config-or-theme);
-  $is-dark-theme: map.get($config, is-dark);
-
-  $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: theming.get-color-from-palette(map.get($config, background), background);
-  $secondary-text: theming.get-color-from-palette(map.get($config, foreground), secondary-text);
+@mixin color($theme) {
+  $is-dark-theme: inspection.get-theme-type($theme) == dark;
+  $primary: inspection.get-theme-color($theme, primary);
+  $accent: inspection.get-theme-color($theme, accent);
+  $warn: inspection.get-theme-color($theme, warn);
+  $background: inspection.get-theme-color($theme, background, background);
+  $secondary-text: inspection.get-theme-color($theme, foreground, secondary-text);
 
   // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
   // this does not work well with elements layered on top of one another. To get around this we

src/material/core/style/_private.scss

@@ -1,9 +1,9 @@
 @use 'sass:map';
 @use './elevation';
+@use '../theming/inspection';
 
-@mixin private-theme-elevation($zValue, $config) {
-  $foreground: map.get($config, foreground);
-  $elevation-color: map.get($foreground, elevation);
+@mixin private-theme-elevation($zValue, $theme) {
+  $elevation-color: inspection.get-theme-color($theme, foreground, elevation);
   $elevation-color-or-default: if($elevation-color == null, elevation.$color, $elevation-color);
 
   @include elevation.elevation($zValue, $elevation-color-or-default);

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

@@ -20,6 +20,11 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
     @error 'Color information is not available on this theme.';
   }
   $colors: theming.get-color-config($theme);
+  // Some apps seem to have mistakenly created nested color themes that somehow work with our old
+  // theme normalization logic. This check allows those apps to keep working.
+  @if theme-has($colors, color) {
+    $colors: theming.get-color-config($colors);
+  }
   @return if(map.get($colors, is-dark), dark, light);
 }
 
@@ -38,6 +43,11 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
     @error 'Color information is not available on this theme.';
   }
   $colors: theming.get-color-config($theme);
+  // Some apps seem to have mistakenly created nested color themes that somehow work with our old
+  // theme normalization logic. This check allows those apps to keep working.
+  @if theme-has($colors, color) {
+    $colors: theming.get-color-config($colors);
+  }
   $palette: map.get($colors, $palette-name);
   @if not $palette {
     @error 'Unrecognized palette name:' $palette-name;
@@ -102,7 +112,6 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @param {Boolean} Whether the theme has information about the system.
 @function theme-has($theme, $system) {
   $theme: _get-m2-config($theme);
-  $theme: theming.private-legacy-get-theme($theme);
   @if $system == base {
     @return true;
   }