@angular/material 17.0.0-next.0 → 17.0.0-next.1

package/card/_card-theme.scss

@@ -10,9 +10,9 @@
 @use '@material/card/elevated-card-theme' as mdc-elevated-card-theme;
 @use '@material/card/outlined-card-theme' as mdc-outlined-card-theme;
 
-@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() {
@@ -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() {
@@ -52,17 +50,14 @@
   }
 }
 
-@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 {
-    $mdc-elevated-card-typography-tokens: tokens-mdc-elevated-card.get-typography-tokens($config);
-    $mdc-outlined-card-typography-tokens: tokens-mdc-outlined-card.get-typography-tokens($config);
-    $mat-card-typography-tokens: tokens-mat-card.get-typography-tokens($config);
+    $mdc-elevated-card-typography-tokens: tokens-mdc-elevated-card.get-typography-tokens($theme);
+    $mdc-outlined-card-typography-tokens: tokens-mdc-outlined-card.get-typography-tokens($theme);
+    $mat-card-typography-tokens: tokens-mat-card.get-typography-tokens($theme);
 
     // Add values for card tokens.
     @include sass-utils.current-selector-or-root() {
@@ -74,16 +69,14 @@
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
-
-  @if inspection.get-theme-version($config-or-theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($config-or-theme, density));
+@mixin density($theme) {
+  @if inspection.get-theme-version($theme) == 1 {
+    @include _theme-from-tokens(inspection.get-theme-tokens($theme, density));
   }
   @else {
-    $mdc-elevated-card-density-tokens: tokens-mdc-elevated-card.get-density-tokens($density-scale);
-    $mdc-outlined-card-density-tokens: tokens-mdc-outlined-card.get-density-tokens($density-scale);
-    $mat-card-density-tokens: tokens-mat-card.get-density-tokens($density-scale);
+    $mdc-elevated-card-density-tokens: tokens-mdc-elevated-card.get-density-tokens($theme);
+    $mdc-outlined-card-density-tokens: tokens-mdc-outlined-card.get-density-tokens($theme);
+    $mat-card-density-tokens: tokens-mat-card.get-density-tokens($theme);
 
     // Add values for card tokens.
     @include sass-utils.current-selector-or-root() {
@@ -102,19 +95,15 @@
       @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);
       }
     }
   }

package/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,59 +19,48 @@
   }
 }
 
-@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);
       }
@@ -79,15 +68,15 @@
   }
 }
 
-@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);
       }
     }
   }

package/core/_core-theme.scss

@@ -1,5 +1,5 @@
-@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 +8,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 +30,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);
     }
   }
 
@@ -47,46 +42,36 @@
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-          theming.get-typography-config($config-or-theme));
-
-  @include option-theme.typography($config);
-  @include optgroup-theme.typography($config);
-  @include pseudo-checkbox-theme.typography($config);
+@mixin typography($theme) {
+  @include option-theme.typography($theme);
+  @include optgroup-theme.typography($theme);
+  @include pseudo-checkbox-theme.typography($theme);
   // TODO(mmalerba): add typography mixin for this.
   // @include ripple-theme.typography($config);
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
-
-  @include option-theme.density($density-scale);
-  @include optgroup-theme.density($density-scale);
+@mixin density($theme) {
+  @include option-theme.density($theme);
+  @include optgroup-theme.density($theme);
   // TODO(mmalerba): add density mixins for these.
   // @include ripple-theme.density($density-scale);
   // @include pseudo-checkbox-theme.density($density-scale);
 }
 
 // Mixin that renders all of the core styles that depend on the theme.
-@mixin theme($theme-or-color-config) {
-  $theme: theming.private-legacy-get-theme($theme-or-color-config);
+@mixin theme($theme) {
   // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that
   // 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);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }

package/core/mdc-helpers/_mdc-helpers.scss

@@ -1,9 +1,7 @@
 // TODO(mmalerba): this file should be split into separate cohesive partials for things like
 //  "theming", "typography", "core".
-
-@use '../theming/theming';
+@use '../theming/inspection';
 @use '../typography/typography';
-@use '../typography/typography-utils';
 @use '@material/feature-targeting' as mdc-feature-targeting;
 @use '@material/typography' as mdc-typography;
 @use '@material/theme/theme-color' as mdc-theme-color;
@@ -36,7 +34,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 +47,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 +69,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 +98,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 +123,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 +190,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.

package/core/option/_optgroup-theme.scss

@@ -3,46 +3,36 @@
 @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));
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
-
+@mixin typography($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-optgroup.$prefix,
-      tokens-mat-optgroup.get-typography-tokens($config));
+      tokens-mat-optgroup.get-typography-tokens($theme));
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+@mixin density($theme) {
 }
 
-@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-optgroup') {
-    $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);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }

package/core/option/_option-theme.scss

@@ -1,62 +1,48 @@
-@use 'sass:map';
 @use '../tokens/m2/mat/option' as tokens-mat-option;
 @use '../tokens/token-utils';
 @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));
   }
 }
 
-@mixin typography($config-or-theme) {
-  $config: typography.private-typography-to-2018-config(
-      theming.get-typography-config($config-or-theme));
-
+@mixin typography($theme) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values(tokens-mat-option.$prefix,
-      tokens-mat-option.get-typography-tokens($config));
+      tokens-mat-option.get-typography-tokens($theme));
   }
 }
 
-@mixin density($config-or-theme) {
-  $density-scale: theming.get-density-config($config-or-theme);
+@mixin density($theme) {
 }
 
-@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-option') {
-    $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);
+    @if inspection.theme-has($theme, density) {
+      @include density($theme);
     }
-    @if $typography != null {
-      @include typography($typography);
+    @if inspection.theme-has($theme, typography) {
+      @include typography($theme);
     }
   }
 }

package/core/ripple/_ripple-theme.scss

@@ -1,12 +1,10 @@
-@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 {
@@ -22,12 +20,10 @@
   }
 }
 
-@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-ripple') {
-    $color: theming.get-color-config($theme);
-    @if $color != null {
-      @include color($color);
+    @if inspection.theme-has($theme, color) {
+      @include color($theme);
     }
   }
 }