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

package/autocomplete/_m2-autocomplete.scss

@@ -1,5 +1,6 @@
-@use '../core/theming/inspection';
 @use '../core/style/elevation';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -12,8 +13,10 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
-    autocomplete-background-color: inspection.get-theme-color($theme, system, surface)
+    autocomplete-background-color: map.get($system, surface)
   );
 }
 

package/bottom-sheet/_m2-bottom-sheet.scss

@@ -1,4 +1,6 @@
 @use '../core/theming/inspection';
+@use '../core/tokens/m2-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -11,9 +13,11 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   @return (
-    bottom-sheet-container-text-color: inspection.get-theme-color($theme, system, on-surface),
-    bottom-sheet-container-background-color: inspection.get-theme-color($theme, system, surface),
+    bottom-sheet-container-text-color: map.get($system, on-surface),
+    bottom-sheet-container-background-color: map.get($system, surface),
   );
 }
 

package/button/_m2-button.scss

@@ -44,7 +44,6 @@
 @function get-color-tokens($theme) {
   $system: m2-utils.get-system($theme);
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $outline: inspection.get-theme-color($theme, system, outline);
   $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
   $disabled-container : m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
 
@@ -52,55 +51,56 @@
     button-filled-container-color: map.get($system, surface),
     button-filled-disabled-container-color: $disabled-container,
     button-filled-disabled-label-text-color: $disabled,
-    button-filled-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    button-filled-disabled-state-layer-color: map.get($system, on-surface-variant),
     button-filled-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     button-filled-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
-    button-filled-label-text-color: inspection.get-theme-color($theme, foreground, base),
+    button-filled-label-text-color: map.get($system, on-surface),
     button-filled-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
-    button-filled-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    button-filled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    button-filled-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+    button-filled-state-layer-color: map.get($system, on-surface),
     button-outlined-disabled-label-text-color: $disabled,
-    button-outlined-disabled-outline-color: $outline,
-    button-outlined-disabled-state-layer-color:
-        inspection.get-theme-color($theme, foreground, base),
+    button-outlined-disabled-outline-color: map.get($system, outline),
+    button-outlined-disabled-state-layer-color: map.get($system, on-surface-variant),
     button-outlined-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     button-outlined-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
-    button-outlined-label-text-color: inspection.get-theme-color($theme, foreground, base),
-    button-outlined-outline-color: $outline,
-    button-outlined-pressed-state-layer-opacity:
-        map.get($system, pressed-state-layer-opacity),
-    button-outlined-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    button-outlined-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    button-outlined-label-text-color: map.get($system, on-surface),
+    button-outlined-outline-color: map.get($system, outline),
+    button-outlined-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+    button-outlined-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+    button-outlined-state-layer-color: map.get($system, on-surface),
     button-protected-container-color: map.get($system, surface),
     button-protected-disabled-container-color: $disabled-container,
     button-protected-disabled-label-text-color: $disabled,
-    button-protected-disabled-state-layer-color:
-        inspection.get-theme-color($theme, foreground, base),
+    button-protected-disabled-state-layer-color: map.get($system, on-surface-variant),
     button-protected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     button-protected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
-    button-protected-label-text-color: inspection.get-theme-color($theme, foreground, base),
-    button-protected-pressed-state-layer-opacity:
-        map.get($system, pressed-state-layer-opacity),
-    button-protected-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    button-protected-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    button-protected-label-text-color: map.get($system, on-surface),
+    button-protected-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
+    button-protected-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+    button-protected-state-layer-color: map.get($system, on-surface),
     button-text-disabled-label-text-color: $disabled,
-    button-text-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    button-text-disabled-state-layer-color: map.get($system, on-surface-variant),
     button-text-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     button-text-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
-    button-text-label-text-color: inspection.get-theme-color($theme, foreground, base),
+    button-text-label-text-color: map.get($system, on-surface),
     button-text-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
-    button-text-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    button-text-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    button-text-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+    button-text-state-layer-color: map.get($system, on-surface),
     button-tonal-container-color: map.get($system, surface),
     button-tonal-disabled-container-color: $disabled-container,
     button-tonal-disabled-label-text-color: $disabled,
-    button-tonal-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    button-tonal-disabled-state-layer-color: map.get($system, on-surface-variant),
     button-tonal-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     button-tonal-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
-    button-tonal-label-text-color: inspection.get-theme-color($theme, foreground, base),
+    button-tonal-label-text-color: map.get($system, on-surface),
     button-tonal-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
-    button-tonal-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    button-tonal-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    button-tonal-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+    button-tonal-state-layer-color: map.get($system, on-surface),
   );
 }
 
@@ -116,22 +116,27 @@
   @return (
     button-filled-container-color: map.get($system, primary),
     button-filled-label-text-color: map.get($system, on-primary),
-    button-filled-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    button-filled-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
     button-filled-state-layer-color: map.get($system, on-primary),
     button-outlined-label-text-color: map.get($system, primary),
     button-outlined-outline-color: map.get(get-color-tokens($theme), button-outlined-outline-color),
-    button-outlined-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
+    button-outlined-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
     button-outlined-state-layer-color: map.get($system, primary),
     button-protected-container-color: map.get($system, primary),
     button-protected-label-text-color: map.get($system, on-primary),
-    button-protected-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    button-protected-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
     button-protected-state-layer-color: map.get($system, on-primary),
     button-text-label-text-color: map.get($system, primary),
-    button-text-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
+    button-text-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
     button-text-state-layer-color: map.get($system, primary),
     button-tonal-container-color: map.get($system, primary),
     button-tonal-label-text-color: map.get($system, on-primary),
-    button-tonal-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    button-tonal-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
     button-tonal-state-layer-color: map.get($system, on-primary),
   );
 }

package/button/_m2-fab.scss

@@ -39,23 +39,25 @@
     fab-container-color: map.get($system, surface),
     fab-disabled-state-container-color: $disabled-container,
     fab-disabled-state-foreground-color: $disabled,
-    fab-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    fab-disabled-state-layer-color: map.get($system, on-surface-variant),
     fab-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
-    fab-foreground-color: inspection.get-theme-color($theme, foreground, base),
+    fab-foreground-color: map.get($system, on-surface),
     fab-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     fab-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
-    fab-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
+    fab-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
     fab-small-container-color: map.get($system, surface),
     fab-small-disabled-state-container-color: $disabled-container,
     fab-small-disabled-state-foreground-color: $disabled,
-    fab-small-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    fab-small-disabled-state-layer-color: map.get($system, on-surface-variant),
     fab-small-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
-    fab-small-foreground-color: inspection.get-theme-color($theme, foreground, base),
+    fab-small-foreground-color: map.get($system, on-surface),
     fab-small-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     fab-small-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
-    fab-small-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    fab-small-state-layer-color: inspection.get-theme-color($theme, foreground, base),
-    fab-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    fab-small-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+    fab-small-state-layer-color: map.get($system, on-surface),
+    fab-state-layer-color: map.get($system, on-surface),
   );
 }
 
@@ -67,10 +69,12 @@
   @return (
     fab-container-color: map.get($system, primary),
     fab-foreground-color: map.get($system, on-primary),
-    fab-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    fab-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
     fab-small-container-color: map.get($system, primary),
     fab-small-foreground-color: map.get($system, on-primary),
-    fab-small-ripple-color: m3-utils.color-with-opacity(map.get($system, on-primary), 10%),
+    fab-small-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-primary), map.get($system, pressed-state-layer-opacity)),
     fab-small-state-layer-color: map.get($system, on-primary),
     fab-state-layer-color: map.get($system, on-primary),
   );

package/button/_m2-icon-button.scss

@@ -19,14 +19,15 @@
   $is-dark: inspection.get-theme-type($theme) == dark;
 
   @return (
-    icon-button-disabled-icon-color: if($is-dark, rgba(#fff, 0.5), rgba(#000, 0.38)),
-    icon-button-disabled-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    icon-button-disabled-icon-color: m3-utils.color-with-opacity(map.get($system, on-surface), 38%),
+    icon-button-disabled-state-layer-color: map.get($system, on-surface-variant),
     icon-button-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     icon-button-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     icon-button-icon-color: inherit,
     icon-button-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
-    icon-button-ripple-color: inspection.get-theme-color($theme, foreground, base, 0.1),
-    icon-button-state-layer-color: inspection.get-theme-color($theme, foreground, base),
+    icon-button-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
+    icon-button-state-layer-color: map.get($system, on-surface),
   );
 }
 
@@ -38,7 +39,8 @@
   @return (
     icon-button-icon-color: map.get($system, primary),
     icon-button-state-layer-color: map.get($system, primary),
-    icon-button-ripple-color: m3-utils.color-with-opacity(map.get($system, primary), 10%),
+    icon-button-ripple-color: m3-utils.color-with-opacity(
+        map.get($system, primary), map.get($system, pressed-state-layer-opacity)),
   );
 }
 

package/card/_m2-card.scss

@@ -23,7 +23,7 @@
     card-elevated-container-elevation: elevation.get-box-shadow(1),
     card-outlined-container-color: map.get($system, surface),
     card-outlined-container-elevation: elevation.get-box-shadow(0),
-    card-outlined-outline-color: inspection.get-theme-color($theme, system, outline),
+    card-outlined-outline-color: map.get($system, outline),
     card-subtitle-text-color: map.get($system, on-surface-variant),
     card-filled-container-color: map.get($system, surface),
     card-filled-container-elevation: elevation.get-box-shadow(0)

package/checkbox/_m2-checkbox.scss

@@ -10,7 +10,7 @@
   $system: m2-utils.get-system($theme);
 
   @return (
-    checkbox-disabled-selected-checkmark-color: #fff,
+    checkbox-disabled-selected-checkmark-color: map.get($system, surface),
     checkbox-selected-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
     checkbox-selected-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
     checkbox-selected-pressed-state-layer-opacity: map.get($system, pressed-state-layer-opacity),
@@ -25,7 +25,6 @@
   $system: m2-utils.get-system($theme);
   $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $foreground-base: inspection.get-theme-color($theme, foreground, base);
   $disabled: m3-utils.color-with-opacity(map.get($system, on-surface), 38%);
 
   $tokens: (
@@ -46,7 +45,7 @@
     checkbox-selected-pressed-state-layer-color: map.get($system, secondary),
     checkbox-unselected-focus-state-layer-color: map.get($system, on-surface),
     checkbox-unselected-hover-state-layer-color: map.get($system, on-surface),
-    checkbox-unselected-pressed-state-layer-color: $foreground-base,
+    checkbox-unselected-pressed-state-layer-color: map.get($system, on-surface),
   );
 
   @each $token in $exclude {

package/chips/_m2-chip.scss

@@ -1,8 +1,5 @@
 @use 'sass:map';
-@use 'sass:meta';
-@use 'sass:color';
 @use '../core/theming/inspection';
-@use '../core/m2/palette' as m2-palette;
 @use '../core/theming/theming';
 @use '../core/tokens/m2-utils';
 @use '../core/tokens/m3-utils';
@@ -40,38 +37,24 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme, $color-variant: null) {
   $system: m2-utils.get-system($theme);
-  $foreground: null;
-  $background: null;
-  $state-layer-color: inspection.get-theme-color($theme, foreground, base);
+  $background: m3-utils.color-with-opacity(map.get($system, on-surface), 12%);
+  $foreground: map.get($system, on-surface);
 
-  @if $color-variant == null {
-    $is-dark: inspection.get-theme-type($theme) == dark;
-    $grey-50: map.get(m2-palette.$grey-palette, 50);
-    $grey-900: map.get(m2-palette.$grey-palette, 900);
-    $foreground: if($is-dark, $grey-50, $grey-900);
-
-    $surface: map.get($system, surface);
-    $background: if(
-        meta.type-of($state-layer-color) == color and meta.type-of($surface) == color,
-        color.mix($state-layer-color, $surface, 12%),
-        $state-layer-color
-    );
-  }
-  @else {
+  @if $color-variant {
     $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
-
     $background: map.get($system, primary);
     $foreground: map.get($system, on-primary);
   }
+
   @return (
     chip-disabled-label-text-color: $foreground,
     chip-elevated-container-color: $background,
     chip-elevated-disabled-container-color: $background,
     chip-elevated-selected-container-color: $background,
     chip-flat-disabled-selected-container-color: $background,
-    chip-focus-state-layer-color: $state-layer-color,
+    chip-focus-state-layer-color: map.get($system, on-surface),
     chip-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
-    chip-hover-state-layer-color: $state-layer-color,
+    chip-hover-state-layer-color: map.get($system, on-surface),
     chip-label-text-color: $foreground,
     chip-selected-disabled-trailing-icon-color: $foreground,
     chip-selected-focus-state-layer-color: map.get($system, focus-state-layer-opacity),

package/core/m2/_theming.scss

@@ -113,18 +113,34 @@
   @return $theme;
 }
 
-// Creates a light-themed color configuration from the specified
-// primary, accent and warn palettes.
-@function _mat-create-light-color-config($primary, $accent, $warn: null) {
-  $warn: if($warn != null, $warn, define-palette(palette.$red-palette));
-  @return (
-    primary: $primary,
-    accent: $accent,
-    warn: $warn,
-    is-dark: false,
-    foreground: palette.$light-theme-foreground-palette,
-    background: palette.$light-theme-background-palette,
-    system: (
+@function _define-system($primary, $accent, $warn, $is-dark) {
+  $system: (
+    primary: map.get($primary, default),
+    on-primary: map.get($primary, default-contrast),
+    secondary: map.get($accent, default),
+    on-secondary: map.get($accent, default-contrast),
+    error: map.get($warn, default),
+    on-error: map.get($warn, default-contrast),
+    shadow: black,
+    hover-state-layer-opacity: 0.04,
+    focus-state-layer-opacity: 0.12,
+    pressed-state-layer-opacity: 0.12,
+  );
+
+  @if $is-dark {
+    @return map.merge($system, (
+      surface: map.get(palette.$grey-palette, 800),
+      surface-variant: #4a4a4a,
+      on-surface: white,
+      on-surface-variant: rgba(white, 0.7),
+      background: #303030,
+      inverse-surface: white,
+      inverse-on-surface: rgba(black, 0.87),
+      outline: rgba(white, 0.12),
+      outline-variant: rgba(white, 0.38),
+    ));
+  } @else {
+    @return map.merge($system, (
       surface: white,
       surface-variant: #f6f6f6,
       on-surface: rgba(black, 0.87),
@@ -134,62 +150,34 @@
       inverse-on-surface: white,
       outline: rgba(black, 0.12),
       outline-variant: rgba(black, 0.38),
-      hover-state-layer-opacity: 0.04,
-      focus-state-layer-opacity: 0.12,
-      pressed-state-layer-opacity: 0.12,
-      shadow: black,
-      primary: map.get($primary, default),
-      on-primary: map.get($primary, default-contrast),
-      secondary: map.get($accent, default),
-      on-secondary: map.get($accent, default-contrast),
-      error: map.get($warn, default),
-      on-error: map.get($warn, default-contrast),
-    ),
-  );
+    ));
+  }
 }
 
-// Creates a dark-themed color configuration from the specified
+// Creates a color configuration from the specified
 // primary, accent and warn palettes.
-@function _mat-create-dark-color-config($primary, $accent, $warn: null) {
+@function _mat-create-color-config($primary, $accent, $warn: null, $is-dark) {
   $warn: if($warn != null, $warn, define-palette(palette.$red-palette));
+  $foreground:
+      if($is-dark, palette.$dark-theme-foreground-palette, palette.$light-theme-foreground-palette);
+  $background:
+      if($is-dark, palette.$dark-theme-background-palette, palette.$light-theme-background-palette);
+
   @return (
     primary: $primary,
     accent: $accent,
     warn: $warn,
-    is-dark: true,
-    foreground: palette.$dark-theme-foreground-palette,
-    background: palette.$dark-theme-background-palette,
-    system: (
-      surface: map.get(palette.$grey-palette, 800),
-      surface-variant: #4a4a4a,
-      on-surface: white,
-      on-surface-variant: rgba(white, 0.7),
-      background: #303030,
-      inverse-surface: white,
-      inverse-on-surface: rgba(black, 0.87),
-      outline: rgba(white, 0.12),
-      outline-variant: rgba(white, 0.38),
-      hover-state-layer-opacity: 0.04,
-      focus-state-layer-opacity: 0.12,
-      pressed-state-layer-opacity: 0.12,
-      shadow: black,
-      primary: map.get($primary, default),
-      on-primary: map.get($primary, default-contrast),
-      secondary: map.get($accent, default),
-      on-secondary: map.get($accent, default-contrast),
-      error: map.get($warn, default),
-      on-error: map.get($warn, default-contrast),
-    ),
+    is-dark: $is-dark,
+    foreground: $foreground,
+    background: $background,
   );
 }
 
-// TODO: Remove legacy API and rename `$primary` below to `$config`. Currently it cannot be renamed
-// as it would break existing apps that set the parameter by name.
-
-/// Creates a container object for a light theme to be given to individual component theme mixins.
+/// Creates a container object for a theme to be given to individual component theme mixins.
 /// @param {Map} $primary The theme configuration object.
 /// @returns {Map} A complete Angular Material theme map.
-@function define-light-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) {
+@function _define-theme(
+    $primary, $accent: null, $warn: define-palette(palette.$red-palette), $is-dark) {
   // This function creates a container object for the individual component theme mixins. Consumers
   // can construct such an object by calling this function, or by building the object manually.
   // There are two possible ways to invoke this function in order to create such an object:
@@ -206,13 +194,15 @@
   @if $accent != null {
     @warn theming.$private-legacy-theme-warning;
     $theme: _mat-validate-theme(
-      (
-        _is-legacy-theme: true,
-        color: _mat-create-light-color-config($primary, $accent, $warn),
-      )
+        (
+          _is-legacy-theme: true,
+          color: _mat-create-color-config($primary, $accent, $warn, $is-dark),
+        )
     );
 
-    @return _internalize-theme(theming.private-create-backwards-compatibility-theme($theme));
+    $theme: _internalize-theme(theming.private-create-backwards-compatibility-theme($theme));
+    $theme: map.set($theme, _mat-system, _define-system($primary, $accent, $warn, $is-dark));
+    @return $theme;
   }
   // If the map pattern is used (1), we just pass-through the configurations for individual
   // parts of the theming system, but update the `color` configuration if set. As explained
@@ -224,15 +214,30 @@
     $accent: map.get($color-settings, accent);
     $warn: map.get($color-settings, warn);
     $result: map.merge(
-      $result,
-      (
-        color: _mat-create-light-color-config($primary, $accent, $warn),
-      )
+        $result,
+        (
+          color: _mat-create-color-config($primary, $accent, $warn, $is-dark),
+        )
     );
   }
-  @return _internalize-theme(
-    theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result))
+  $theme: _internalize-theme(
+      theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result))
   );
+  $primary: map.get($result, primary) or map.get($result, color, primary) or ();
+  $accent: map.get($result, accent) or map.get($result, color, accent) or ();
+  $warn: map.get($result, warn) or map.get($result, color, warn) or ();
+  $theme: map.set($theme, _mat-system, _define-system($primary, $accent, $warn, $is-dark));
+  @return $theme;
+}
+
+// TODO: Remove legacy API and rename `$primary` below to `$config`. Currently it cannot be renamed
+// as it would break existing apps that set the parameter by name.
+
+/// Creates a container object for a light theme to be given to individual component theme mixins.
+/// @param {Map} $primary The theme configuration object.
+/// @returns {Map} A complete Angular Material theme map.
+@function define-light-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) {
+  @return _define-theme($primary, $accent, $warn, false);
 }
 
 // TODO: Remove legacy API and rename below `$primary` to `$config`. Currently it cannot be renamed
@@ -242,48 +247,7 @@
 /// @param {Map} $primary The theme configuration object.
 /// @returns {Map} A complete Angular Material theme map.
 @function define-dark-theme($primary, $accent: null, $warn: define-palette(palette.$red-palette)) {
-  // This function creates a container object for the individual component theme mixins. Consumers
-  // can construct such an object by calling this function, or by building the object manually.
-  // There are two possible ways to invoke this function in order to create such an object:
-  //
-  //    (1) Passing in a map that holds optional configurations for individual parts of the
-  //        theming system. For `color` configurations, the function only expects the palettes
-  //        for `primary` and `accent` (and optionally `warn`). The function will expand the
-  //        shorthand into an actual configuration that can be consumed in `-color` mixins.
-  //    (2) Legacy pattern: Passing in the palettes as parameters. This is not as flexible
-  //        as passing in a configuration map because only the `color` system can be configured.
-  //
-  // If the legacy pattern is used, we generate a container object only with a dark-themed
-  // configuration for the `color` theming part.
-  @if $accent != null {
-    @warn theming.$private-legacy-theme-warning;
-    $theme: _mat-validate-theme(
-      (
-        _is-legacy-theme: true,
-        color: _mat-create-dark-color-config($primary, $accent, $warn),
-      )
-    );
-    @return _internalize-theme(theming.private-create-backwards-compatibility-theme($theme));
-  }
-  // If the map pattern is used (1), we just pass-through the configurations for individual
-  // parts of the theming system, but update the `color` configuration if set. As explained
-  // above, the color shorthand will be expanded to an actual dark-themed color configuration.
-  $result: $primary;
-  @if map.get($primary, color) {
-    $color-settings: map.get($primary, color);
-    $primary: map.get($color-settings, primary);
-    $accent: map.get($color-settings, accent);
-    $warn: map.get($color-settings, warn);
-    $result: map.merge(
-      $result,
-      (
-        color: _mat-create-dark-color-config($primary, $accent, $warn),
-      )
-    );
-  }
-  @return _internalize-theme(
-    theming.private-create-backwards-compatibility-theme(_mat-validate-theme($result))
-  );
+  @return _define-theme($primary, $accent, $warn, true);
 }
 
 /// Gets the color configuration from the given theme or configuration.

package/core/option/_m2-optgroup.scss

@@ -1,4 +1,6 @@
 @use '../theming/inspection';
+@use '../tokens/m2-utils';
+@use 'sass:map';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -8,8 +10,9 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    optgroup-label-text-color: inspection.get-theme-color($theme, system, on-surface),
+    optgroup-label-text-color: map.get($system, on-surface),
   );
 }
 

package/core/option/_m2-option.scss

@@ -12,17 +12,18 @@
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme, $color-variant) {
   $is-dark: inspection.get-theme-type($theme) == dark;
-  $active-state-layer-color: inspection.get-theme-color($theme, foreground, base,
-    if($is-dark, 0.08, 0.04));
   $system: m2-utils.get-system($theme);
   $system: m3-utils.replace-colors-with-variant($system, primary, $color-variant);
 
   @return (
     option-selected-state-label-text-color: map.get($system, primary),
-    option-label-text-color: inspection.get-theme-color($theme, system, on-surface),
-    option-hover-state-layer-color: $active-state-layer-color,
-    option-focus-state-layer-color: $active-state-layer-color,
-    option-selected-state-layer-color: $active-state-layer-color,
+    option-label-text-color: map.get($system, on-surface),
+    option-hover-state-layer-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
+    option-focus-state-layer-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, focus-state-layer-opacity)),
+    option-selected-state-layer-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
   );
 }
 

package/core/ripple/_m2-ripple.scss

@@ -1,5 +1,6 @@
-@use 'sass:meta';
-@use '../theming/inspection';
+@use 'sass:map';
+@use '../tokens/m2-utils';
+@use '../tokens/m3-utils';
 
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
@@ -9,16 +10,11 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
-  $is-dark: inspection.get-theme-type($theme) == dark;
-  $base: inspection.get-theme-color($theme, foreground, base);
-
-  // If the base is a color *type* we can use it directly in the `rgba` call below.
-  // If it's anything else (e.g. a CSS variable) we fall back to using static colors
-  // since we don't have a way of adjusting the opacity.
-  $color: if(meta.type-of($base) == color, $base, if($is-dark, #fff, #000));
+  $system: m2-utils.get-system($theme);
 
   @return (
-    ripple-color: rgba($color, 0.1),
+    ripple-color: m3-utils.color-with-opacity(
+        map.get($system, on-surface), map.get($system, pressed-state-layer-opacity)),
   );
 }