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

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),
@@ -89,12 +72,13 @@
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    chip-label-text-font: inspection.get-theme-typography($theme, body-2, font-family),
-    chip-label-text-line-height: inspection.get-theme-typography($theme, body-2, line-height),
-    chip-label-text-size: inspection.get-theme-typography($theme, body-2, font-size),
-    chip-label-text-tracking: inspection.get-theme-typography($theme, body-2, letter-spacing),
-    chip-label-text-weight: inspection.get-theme-typography($theme, body-2, font-weight)
+    chip-label-text-font: map.get($system, body-medium-font),
+    chip-label-text-line-height: map.get($system, body-medium-line-height),
+    chip-label-text-size: map.get($system, body-medium-size),
+    chip-label-text-tracking: map.get($system, body-medium-tracking),
+    chip-label-text-weight: map.get($system, body-medium-weight)
   );
 }
 

package/core/_core-theme.scss

@@ -1,10 +1,8 @@
-@use './theming/theming';
 @use './theming/inspection';
 @use './ripple/ripple-theme';
 @use './option/option-theme';
 @use './option/optgroup-theme';
 @use './selection/pseudo-checkbox/pseudo-checkbox-theme';
-@use './style/sass-utils';
 @use './typography/typography';
 @use './tokens/token-utils';
 @use './m2-app';
@@ -16,71 +14,59 @@
 @use 'sass:map';
 
 @mixin base($theme) {
+  $tokens: m2-app.get-unthemable-tokens();
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-app.get-tokens($theme), base));
-    @include token-utils.create-token-values(map.get(m3-ripple.get-tokens($theme), base));
-    @include token-utils.create-token-values(map.get(m3-option.get-tokens($theme), base));
-    @include token-utils.create-token-values(map.get(m3-optgroup.get-tokens($theme), base));
-    @include token-utils.create-token-values(map.get(m3-pseudo-checkbox.get-tokens($theme), base));
-  } @else {
-    @include ripple-theme.base($theme);
-    @include option-theme.base($theme);
-    @include optgroup-theme.base($theme);
-    @include pseudo-checkbox-theme.base($theme);
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-app.get-unthemable-tokens());
-    }
+    $tokens: map.get(m3-app.get-tokens($theme), base);
   }
+
+  @include token-utils.values($tokens);
+
+  @include ripple-theme.base($theme);
+  @include option-theme.base($theme);
+  @include optgroup-theme.base($theme);
+  @include pseudo-checkbox-theme.base($theme);
 }
 
 @mixin color($theme) {
+  $tokens: m2-app.get-color-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-app.get-tokens($theme), color));
-    @include token-utils.create-token-values(map.get(m3-ripple.get-tokens($theme), color));
-    @include token-utils.create-token-values(map.get(m3-option.get-tokens($theme), color));
-    @include token-utils.create-token-values(map.get(m3-optgroup.get-tokens($theme), color));
-    @include token-utils.create-token-values(map.get(m3-pseudo-checkbox.get-tokens($theme), color));
-  } @else {
-    @include ripple-theme.color($theme);
-    @include option-theme.color($theme);
-    @include optgroup-theme.color($theme);
-    @include pseudo-checkbox-theme.color($theme);
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-app.get-color-tokens($theme));
-    }
+    $tokens: map.get(m3-app.get-tokens($theme), color);
   }
+
+  @include token-utils.values($tokens);
+
+  @include ripple-theme.color($theme);
+  @include option-theme.color($theme);
+  @include optgroup-theme.color($theme);
+  @include pseudo-checkbox-theme.color($theme);
 }
 
 @mixin typography($theme) {
+  $tokens: m2-app.get-typography-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-app.get-tokens($theme), typography));
-    @include token-utils.create-token-values(map.get(m3-ripple.get-tokens($theme), typography));
-    @include token-utils.create-token-values(map.get(m3-option.get-tokens($theme), typography));
-    @include token-utils.create-token-values(map.get(m3-optgroup.get-tokens($theme), typography));
-    @include token-utils.create-token-values(
-        map.get(m3-pseudo-checkbox.get-tokens($theme), typography));
-  } @else {
-    @include option-theme.typography($theme);
-    @include optgroup-theme.typography($theme);
-    @include pseudo-checkbox-theme.typography($theme);
-    @include ripple-theme.typography($theme);
+    $tokens: map.get(m3-app.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
+
+  @include ripple-theme.typography($theme);
+  @include option-theme.typography($theme);
+  @include optgroup-theme.typography($theme);
+  @include pseudo-checkbox-theme.typography($theme);
 }
 
 @mixin density($theme) {
+  $tokens: m2-app.get-density-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-app.get-tokens($theme), density));
-    @include token-utils.create-token-values(map.get(m3-ripple.get-tokens($theme), density));
-    @include token-utils.create-token-values(map.get(m3-option.get-tokens($theme), density));
-    @include token-utils.create-token-values(map.get(m3-optgroup.get-tokens($theme), density));
-    @include token-utils.create-token-values(
-        map.get(m3-pseudo-checkbox.get-tokens($theme), density));
-  } @else {
-    @include option-theme.density($theme);
-    @include optgroup-theme.density($theme);
-    @include pseudo-checkbox-theme.density($theme);
-    @include ripple-theme.density($theme);
+    $tokens: map.get(m3-app.get-tokens($theme), density);
   }
+
+  @include token-utils.values($tokens);
+
+  @include ripple-theme.density($theme);
+  @include option-theme.density($theme);
+  @include optgroup-theme.density($theme);
+  @include pseudo-checkbox-theme.density($theme);
 }
 
 @function _define-overrides() {
@@ -119,26 +105,21 @@
 
 // Mixin that renders all of the core styles that depend on the theme.
 @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') {
-    @if inspection.get-theme-version($theme) == 1 {
-      @include base($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if inspection.theme-has($theme, color) {
       @include color($theme);
+    }
+    @if inspection.theme-has($theme, density) {
       @include density($theme);
+    }
+    @if inspection.theme-has($theme, typography) {
       @include typography($theme);
-    } @else {
-      @include base($theme);
-      @if inspection.theme-has($theme, color) {
-        @include color($theme);
-      }
-      @if inspection.theme-has($theme, density) {
-        @include density($theme);
-      }
-      @if inspection.theme-has($theme, typography) {
-        @include typography($theme);
-      }
     }
   }
 }

package/core/focus-indicators/_private.scss

@@ -2,7 +2,6 @@
 @use 'sass:meta';
 @use '@angular/cdk';
 @use '../style/layout-common';
-@use '../theming/theming';
 @use '../theming/inspection';
 
 // Private sass variables that will be used as reference throughout component stylesheets.
@@ -104,10 +103,8 @@ $default-border-radius: 4px;
     @include _customize-focus-indicators((border-color: $theme-or-color));
   }
   @else {
-    @include theming.private-check-duplicate-theme-styles($theme-or-color, 'mat-focus-indicators') {
-      @if inspection.theme-has($theme-or-color, color) {
-        @include strong-focus-indicators-color($theme-or-color);
-      }
+    @if inspection.theme-has($theme-or-color, color) {
+      @include strong-focus-indicators-color($theme-or-color);
     }
   }
 }

package/core/m2/_theming.scss

@@ -3,6 +3,7 @@
 @use 'sass:meta';
 @use 'sass:color';
 @use '../theming/theming';
+@use '../tokens/m2';
 @use './palette';
 
 /// Extracts a color from a palette or throws an error if it doesn't exist.
@@ -113,83 +114,52 @@
   @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 (
+@function _define-system($primary, $accent, $warn, $is-dark, $typography) {
+  $palettes: (
     primary: $primary,
     accent: $accent,
     warn: $warn,
-    is-dark: false,
-    foreground: palette.$light-theme-foreground-palette,
-    background: palette.$light-theme-background-palette,
-    system: (
-      surface: white,
-      surface-variant: #f6f6f6,
-      on-surface: rgba(black, 0.87),
-      on-surface-variant: rgba(black, 0.54),
-      background: map.get(palette.$grey-palette, 50),
-      inverse-surface: map.get(palette.$grey-palette, 800),
-      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),
-    ),
   );
+
+  $sys-color: if(
+      $is-dark,
+      m2.md-sys-color-values-dark($palettes),
+      m2.md-sys-color-values-light($palettes));
+  $sys-state: m2.md-sys-state-values();
+  $sys-typography: m2.md-sys-typescale-values($typography);
+
+  $system: ();
+  @each $map in ($sys-color, $sys-state, $sys-typography) {
+    $system: map.merge($system, $map);
+  }
+
+  @return $system;
 }
 
-// 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 +176,21 @@
   @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));
+    $system: _define-system(
+        $primary: $primary,
+        $accent: $accent,
+        $warn: $warn,
+        $is-dark: $is-dark,
+        $typography: ());
+    $theme: map.set($theme, _mat-system, $system);
+    @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 +202,33 @@
     $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))
   );
+  $system: _define-system(
+      $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 (),
+      $is-dark: $is-dark,
+      $typography: map.get($result, typography) or ());
+  $theme: map.set($theme, _mat-system, $system);
+  @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 +238,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,5 @@
-@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,19 +9,21 @@
 
 // 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),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    optgroup-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    optgroup-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
-    optgroup-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    optgroup-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
-    optgroup-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight)
+    optgroup-label-text-font: map.get($system, body-large-font),
+    optgroup-label-text-line-height: map.get($system, body-large-line-height),
+    optgroup-label-text-size: map.get($system, body-large-size),
+    optgroup-label-text-tracking: map.get($system, body-large-tracking),
+    optgroup-label-text-weight: map.get($system, body-large-weight)
   );
 }
 

package/core/option/_m2-option.scss

@@ -12,28 +12,30 @@
 // 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)),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
+  $system: m2-utils.get-system($theme);
   @return (
-    option-label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    option-label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
-    option-label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    option-label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
-    option-label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight)
+    option-label-text-font: map.get($system, body-large-font),
+    option-label-text-line-height: map.get($system, body-large-line-height),
+    option-label-text-size: map.get($system, body-large-size),
+    option-label-text-tracking: map.get($system, body-large-tracking),
+    option-label-text-weight: map.get($system, body-large-weight)
   );
 }
 

package/core/option/_optgroup-theme.scss

@@ -2,43 +2,43 @@
 @use './m2-optgroup';
 @use './m3-optgroup';
 @use '../tokens/token-utils';
-@use '../style/sass-utils';
-@use '../theming/theming';
 @use '../theming/inspection';
 @use '../typography/typography';
 
 @mixin base($theme) {
+  $tokens: m2-optgroup.get-unthemable-tokens();
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-optgroup.get-tokens($theme), base));
-  } @else {
+    $tokens: map.get(m3-optgroup.get-tokens($theme), base);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin color($theme) {
+  $tokens: m2-optgroup.get-color-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-optgroup.get-tokens($theme), color));
-  } @else {
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-optgroup.get-color-tokens($theme));
-    }
+    $tokens: map.get(m3-optgroup.get-tokens($theme), color);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin typography($theme) {
+  $tokens: m2-optgroup.get-typography-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-optgroup.get-tokens($theme), typography));
-  } @else {
-    @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-optgroup.get-typography-tokens($theme));
-    }
+    $tokens: map.get(m3-optgroup.get-tokens($theme), typography);
   }
+
+  @include token-utils.values($tokens);
 }
 
 @mixin density($theme) {
+  $tokens: m2-optgroup.get-density-tokens($theme);
   @if inspection.get-theme-version($theme) == 1 {
-    @include token-utils.create-token-values(map.get(m3-optgroup.get-tokens($theme), base));
-  } @else {
+    $tokens: map.get(m3-optgroup.get-tokens($theme), density);
   }
+
+  @include token-utils.values($tokens);
 }
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
@@ -56,23 +56,21 @@
 }
 
 @mixin theme($theme) {
-  @include theming.private-check-duplicate-theme-styles($theme, 'mat-optgroup') {
-    @if inspection.get-theme-version($theme) == 1 {
-      @include base($theme);
+  @if inspection.get-theme-version($theme) == 1 {
+    @include base($theme);
+    @include color($theme);
+    @include density($theme);
+    @include typography($theme);
+  } @else {
+    @include base($theme);
+    @if inspection.theme-has($theme, color) {
       @include color($theme);
+    }
+    @if inspection.theme-has($theme, density) {
       @include density($theme);
+    }
+    @if inspection.theme-has($theme, typography) {
       @include typography($theme);
-    } @else {
-      @include base($theme);
-      @if inspection.theme-has($theme, color) {
-        @include color($theme);
-      }
-      @if inspection.theme-has($theme, density) {
-        @include density($theme);
-      }
-      @if inspection.theme-has($theme, typography) {
-        @include typography($theme);
-      }
     }
   }
 }