@angular/material 20.0.0-rc.1 → 20.0.0-rc.2

package/core/_core-theme.scss

@@ -1,6 +1,5 @@
 @use './theming/theming';
 @use './theming/inspection';
-@use './theming/validation';
 @use './ripple/ripple-theme';
 @use './option/option-theme';
 @use './option/optgroup-theme';
@@ -9,44 +8,57 @@
 @use './typography/typography';
 @use './tokens/token-utils';
 @use './m2-app';
-@use 'ripple/m2-ripple';
-@use 'option/m2-option';
-@use 'option/m2-optgroup';
-@use 'selection/pseudo-checkbox/m2-pseudo-checkbox';
+@use './m3-app';
+@use 'ripple/m3-ripple';
+@use 'option/m3-option';
+@use 'option/m3-optgroup';
+@use 'selection/pseudo-checkbox/m3-pseudo-checkbox';
+@use 'sass:map';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @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.$prefix, m2-app.get-unthemable-tokens());
+      @include token-utils.create-token-values-mixed(m2-app.get-unthemable-tokens());
     }
   }
 }
 
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @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.$prefix, m2-app.get-color-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-app.get-color-tokens($theme));
     }
   }
 }
 
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @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);
@@ -57,7 +69,12 @@
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    // There are no M3 density tokens for this component
+    @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);
@@ -67,37 +84,50 @@
 }
 
 @function _define-overrides() {
-  $app-tokens: m2-app.get-token-slots();
-  $ripple-tokens: m2-ripple.get-token-slots();
-  $option-tokens: m2-option.get-token-slots();
-  $optgroup-tokens: m2-optgroup.get-token-slots();
-  $pseudo-checkbox-tokens: m2-pseudo-checkbox.get-token-slots();
-
   @return (
-    (namespace: m2-app.$prefix, tokens: $app-tokens, prefix: 'app-'),
-    (namespace: m2-ripple.$prefix, tokens: $ripple-tokens, prefix: 'ripple-'),
-    (namespace: m2-option.$prefix, tokens: $option-tokens, prefix: 'option-'),
-    (namespace: m2-optgroup.$prefix, tokens: $optgroup-tokens, prefix: 'optgroup-'),
     (
-      namespace: m2-pseudo-checkbox.$prefix,
-      tokens: m2-pseudo-checkbox.get-token-slots(),
+      namespace: app,
+      tokens: token-utils.get-overrides(m3-app.get-tokens(), app),
+      prefix: 'app-'
+    ),
+    (
+      namespace: ripple,
+      tokens: token-utils.get-overrides(m3-ripple.get-tokens(), ripple),
+      prefix: 'ripple-'
+    ),
+    (
+      namespace: option,
+      tokens: token-utils.get-overrides(m3-option.get-tokens(), option),
+      prefix: 'option-'
+    ),
+    (
+      namespace: optgroup,
+      tokens: token-utils.get-overrides(m3-optgroup.get-tokens(), optgroup),
+      prefix: 'optgroup-'
+    ),
+    (
+      namespace: pseudo-checkbox,
+      tokens: token-utils.get-overrides(m3-pseudo-checkbox.get-tokens(), pseudo-checkbox),
       prefix: 'pseudo-checkbox-'
     ),
   );
 }
 
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+  @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
 // Mixin that renders all of the core styles that depend on the theme.
-@mixin theme($theme, $options...) {
+@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 _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @include base($theme);
+      @include color($theme);
+      @include density($theme);
+      @include typography($theme);
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -112,31 +142,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens, $options...) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
-  );
-  $mat-app-tokens: token-utils.get-tokens-for($tokens, m2-app.$prefix, $options...);
-  $mat-ripple-tokens: token-utils.get-tokens-for($tokens, m2-ripple.$prefix, $options...);
-  $mat-option-tokens: token-utils.get-tokens-for($tokens, m2-option.$prefix, $options...);
-  $mat-optgroup-tokens: token-utils.get-tokens-for(
-    $tokens,
-    m2-optgroup.$prefix,
-    $options...
-  );
-  $mat-pseudo-checkbox-tokens: token-utils.get-tokens-for(
-    $tokens,
-    m2-pseudo-checkbox.$prefix,
-    $options...
-  );
-
-  @include token-utils.create-token-values(m2-app.$prefix, $mat-app-tokens);
-  @include token-utils.create-token-values(m2-ripple.$prefix, $mat-ripple-tokens);
-  @include token-utils.create-token-values(m2-option.$prefix, $mat-option-tokens);
-  @include token-utils.create-token-values(m2-optgroup.$prefix, $mat-optgroup-tokens);
-  @include token-utils.create-token-values(
-    m2-pseudo-checkbox.$prefix,
-    $mat-pseudo-checkbox-tokens
-  );
-}

package/core/_core.scss

@@ -1,7 +1,9 @@
-@use './m2-app';
+@use './m3-app';
 @use './tokens/token-utils';
 @use './style/elevation';
 
+$fallbacks: m3-app.get-tokens();
+
 /// @deprecated This mixin is a no-op and is going to be removed in v21.
 @mixin core() {}
 
@@ -20,11 +22,9 @@
   // user's content isn't inside of a `mat-sidenav-container`.
   @at-root {
     // Note: we need to emit fallback values here to avoid errors in internal builds.
-    @include token-utils.use-tokens(m2-app.$prefix, m2-app.get-token-slots()) {
-      .mat-app-background {
-        background-color: token-utils.slot(background-color, transparent);
-        color: token-utils.slot(text-color, inherit);
-      }
+    .mat-app-background {
+      background-color: token-utils.slot(app-background-color, $fallbacks, transparent);
+      color: token-utils.slot(app-text-color, $fallbacks, inherit);
     }
   }
 }
@@ -35,18 +35,15 @@
 // Material Design specification.
 @mixin elevation-classes() {
   @at-root {
-    @include token-utils.use-tokens(m2-app.$prefix, m2-app.get-token-slots()) {
-      // Provides external CSS classes for each elevation value. Each CSS class is formatted as
-      // `mat-elevation-z$z-value` where `$z-value` corresponds to the z-space to which the element
-      // is elevated.
-      @for $z-value from 0 through 24 {
-        $selector: elevation.$prefix + $z-value;
-        // 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} {
-          box-shadow: token-utils.slot('elevation-shadow-level-#{$z-value}',
-            none);
-        }
+    // Provides external CSS classes for each elevation value. Each CSS class is formatted as
+    // `mat-elevation-z$z-value` where `$z-value` corresponds to the z-space to which the element
+    // is elevated.
+    @for $z-value from 0 through 24 {
+      $selector: elevation.$prefix + $z-value;
+      // 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} {
+        box-shadow: token-utils.slot('app-elevation-shadow-level-#{$z-value}', $fallbacks, none);
       }
     }
   }

package/core/_m2-app.scss

@@ -4,10 +4,6 @@
 @use './style/sass-utils';
 @use './style/elevation';
 
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, app);
-
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
@@ -17,15 +13,15 @@ $prefix: (mat, app);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   $tokens: (
-    background-color: inspection.get-theme-color($theme, background, background),
-    text-color: inspection.get-theme-color($theme, foreground, text),
+    app-background-color: inspection.get-theme-color($theme, background, background),
+    app-text-color: inspection.get-theme-color($theme, foreground, text),
   );
 
   @for $zValue from 0 through 24 {
     $elevation-color: inspection.get-theme-color($theme, foreground, elevation);
     $shadow: elevation.get-box-shadow($zValue,
       if($elevation-color == null, elevation.$color, $elevation-color));
-    $tokens: map.set($tokens, 'elevation-shadow-level-#{$zValue}', $shadow);
+    $tokens: map.set($tokens, 'app-elevation-shadow-level-#{$zValue}', $shadow);
   }
 
   @return $tokens;

package/core/_m3-app.scss

@@ -1,31 +1,44 @@
 @use 'sass:map';
-@use 'sass:meta';
 @use './style/elevation';
 @use './tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, app);
+@use '../core/tokens/m3';
 
 /// Generates custom tokens for the app.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the app
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    background-color: map.get($systems, md-sys-color, background),
-    text-color: map.get($systems, md-sys-color, on-background),
-  );
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
 
-  // If the shadow-color is an actual color, convert it to a box-shadow value. Otherwise
-  // use the token value as itself (e,g. as a CSS var name).
-  $shadow-color: map.get($systems, md-sys-color, shadow);
-  @if (meta.type-of($shadow-color) == color) {
-    @for $zValue from 0 through 24 {
-      $shadow: elevation.get-box-shadow($zValue, $shadow-color);
-      $tokens: map.set($tokens, 'elevation-shadow-level-#{$zValue}', $shadow);
-    }
-  }
-
-  @return m3-utils.namespace($prefix, $tokens, $token-slots);
+  @return (
+    base: (),
+    color: (
+      app-background-color: map.get($system, background),
+      app-text-color: map.get($system, on-background),
+      app-elevation-shadow-level-0: elevation.get-box-shadow(0, map.get($system, shadow)),
+      app-elevation-shadow-level-1: elevation.get-box-shadow(1, map.get($system, shadow)),
+      app-elevation-shadow-level-2: elevation.get-box-shadow(2, map.get($system, shadow)),
+      app-elevation-shadow-level-3: elevation.get-box-shadow(3, map.get($system, shadow)),
+      app-elevation-shadow-level-4: elevation.get-box-shadow(4, map.get($system, shadow)),
+      app-elevation-shadow-level-5: elevation.get-box-shadow(5, map.get($system, shadow)),
+      app-elevation-shadow-level-6: elevation.get-box-shadow(6, map.get($system, shadow)),
+      app-elevation-shadow-level-7: elevation.get-box-shadow(7, map.get($system, shadow)),
+      app-elevation-shadow-level-8: elevation.get-box-shadow(8, map.get($system, shadow)),
+      app-elevation-shadow-level-9: elevation.get-box-shadow(9, map.get($system, shadow)),
+      app-elevation-shadow-level-10: elevation.get-box-shadow(10, map.get($system, shadow)),
+      app-elevation-shadow-level-11: elevation.get-box-shadow(11, map.get($system, shadow)),
+      app-elevation-shadow-level-12: elevation.get-box-shadow(12, map.get($system, shadow)),
+      app-elevation-shadow-level-13: elevation.get-box-shadow(13, map.get($system, shadow)),
+      app-elevation-shadow-level-14: elevation.get-box-shadow(14, map.get($system, shadow)),
+      app-elevation-shadow-level-15: elevation.get-box-shadow(15, map.get($system, shadow)),
+      app-elevation-shadow-level-16: elevation.get-box-shadow(16, map.get($system, shadow)),
+      app-elevation-shadow-level-17: elevation.get-box-shadow(17, map.get($system, shadow)),
+      app-elevation-shadow-level-18: elevation.get-box-shadow(18, map.get($system, shadow)),
+      app-elevation-shadow-level-19: elevation.get-box-shadow(19, map.get($system, shadow)),
+      app-elevation-shadow-level-20: elevation.get-box-shadow(20, map.get($system, shadow)),
+      app-elevation-shadow-level-21: elevation.get-box-shadow(21, map.get($system, shadow)),
+      app-elevation-shadow-level-22: elevation.get-box-shadow(22, map.get($system, shadow)),
+      app-elevation-shadow-level-23: elevation.get-box-shadow(23, map.get($system, shadow)),
+      app-elevation-shadow-level-24: elevation.get-box-shadow(24, map.get($system, shadow)),
+    ),
+    typography: (),
+    density: (),
+  );
 }

package/core/option/_m2-optgroup.scss

@@ -2,9 +2,6 @@
 @use '../theming/inspection';
 @use '../tokens/m2-utils';
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, optgroup);
-
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
@@ -14,18 +11,18 @@ $prefix: (mat, optgroup);
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
   @return (
-    label-text-color: inspection.get-theme-color($theme, foreground, text),
+    optgroup-label-text-color: inspection.get-theme-color($theme, foreground, text),
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
-    label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
-    label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight)
+    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)
   );
 }
 

package/core/option/_m2-option.scss

@@ -2,9 +2,6 @@
 @use '../theming/inspection';
 @use '../style/sass-utils';
 
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, option);
-
 // Tokens that can't be configured through Angular Material's current theming API,
 // but may be in a future version of the theming API.
 @function get-unthemable-tokens() {
@@ -18,22 +15,22 @@ $prefix: (mat, option);
     if($is-dark, 0.08, 0.04));
 
   @return (
-    selected-state-label-text-color: inspection.get-theme-color($theme, $palette-name),
-    label-text-color: inspection.get-theme-color($theme, foreground, text),
-    hover-state-layer-color: $active-state-layer-color,
-    focus-state-layer-color: $active-state-layer-color,
-    selected-state-layer-color: $active-state-layer-color,
+    option-selected-state-label-text-color: inspection.get-theme-color($theme, $palette-name),
+    option-label-text-color: inspection.get-theme-color($theme, foreground, text),
+    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,
   );
 }
 
 // Tokens that can be configured through Angular Material's typography theming API.
 @function get-typography-tokens($theme) {
   @return (
-    label-text-font: inspection.get-theme-typography($theme, body-1, font-family),
-    label-text-line-height: inspection.get-theme-typography($theme, body-1, line-height),
-    label-text-size: inspection.get-theme-typography($theme, body-1, font-size),
-    label-text-tracking: inspection.get-theme-typography($theme, body-1, letter-spacing),
-    label-text-weight: inspection.get-theme-typography($theme, body-1, font-weight)
+    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)
   );
 }
 

package/core/option/_m3-optgroup.scss

@@ -1,22 +1,25 @@
 @use 'sass:map';
-@use '../style/sass-utils';
 @use '../tokens/m3-utils';
+@use '../tokens/m3';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, optgroup);
 
 /// Generates custom tokens for the mat-optgroup.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-optgroup
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: sass-utils.merge-all(
-    m3-utils.generate-typography-tokens($systems, label-text, title-small),
-    (
-      label-text-color: map.get($systems, md-sys-color, on-surface-variant),
-    )
+@function get-tokens($theme: m3.$sys-theme) {
+  $system: m3-utils.get-system($theme);
+  @return (
+    base: (),
+    color: (
+      optgroup-label-text-color: map.get($system, on-surface-variant),
+    ),
+    typography: (
+      optgroup-label-text-font: map.get($system, title-small-font),
+      optgroup-label-text-line-height: map.get($system, title-small-line-height),
+      optgroup-label-text-size: map.get($system, title-small-size),
+      optgroup-label-text-tracking: map.get($system, title-small-tracking),
+      optgroup-label-text-weight: map.get($system, title-small-weight),
+    ),
+    density: (),
   );
-
-  @return m3-utils.namespace($prefix, $tokens, $token-slots);
 }

package/core/option/_m3-option.scss

@@ -1,57 +1,37 @@
 @use 'sass:map';
-@use '../style/sass-utils';
 @use '../tokens/m3-utils';
-
-// The prefix used to generate the fully qualified name for tokens in this file.
-$prefix: (mat, option);
+@use '../tokens/m3';
 
 /// Generates custom tokens for the mat-option.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @param {Map} $token-slots Possible token slots
-/// @return {Map} A set of custom tokens for the mat-option
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    selected-state-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
-    label-text-color: map.get($systems, md-sys-color, on-surface),
-    hover-state-layer-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, on-surface),
-      $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
-    ),
-    focus-state-layer-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, on-surface),
-      $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
-    ),
-    selected-state-layer-color: map.get($systems, md-sys-color, secondary-container),
+@function get-tokens($theme: m3.$sys-theme, $color-variant: null) {
+  $system: m3-utils.get-system($theme);
+  @if $color-variant {
+    $system: m3-utils.replace-colors-with-variant($system, secondary, $color-variant);
+  }
 
-    // According to the spec the options have to be `label-large` in all typography
-    // dimensions, however this is inconsistent with the designs and with MDC's
-    // own implementation. This appears to be a bug in the spec, because MDC overrides
-    // the font size and weight to be `body-large` (see b/261838263). We make the same
-    // override here so the label looks correct.
-    label-text-size: map.get($systems, md-sys-typescale, body-large-size),
-    label-text-weight: map.get($systems, md-sys-typescale, body-large-weight),
-    label-text-font: map.get($systems, md-sys-typescale, label-large-font),
-    label-text-line-height: map.get($systems, md-sys-typescale, label-large-line-height),
-    label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
-  );
-
-  $variant-tokens: (
-    // Color variants:
-    primary: (
-      selected-state-label-text-color: map.get($systems, md-sys-color, on-primary-container),
-      selected-state-layer-color: map.get($systems, md-sys-color, primary-container),
+  // According to the spec the options have to be `label-large` in all typography
+  // dimensions, however this is inconsistent with the designs and with MDC's
+  // own implementation. This appears to be a bug in the spec, because MDC overrides
+  // the font size and weight to be `body-large` (see b/261838263). We make the same
+  // override here so the label looks correct.
+  @return (
+    base: (),
+    color: (
+      option-focus-state-layer-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, focus-state-layer-opacity)),
+      option-hover-state-layer-color: m3-utils.color-with-opacity(
+          map.get($system, on-surface), map.get($system, hover-state-layer-opacity)),
+      option-label-text-color: map.get($system, on-surface),
+      option-selected-state-label-text-color: map.get($system, on-secondary-container),
+      option-selected-state-layer-color: map.get($system, secondary-container),
     ),
-    secondary: (), // Default, no overrides needed
-    tertiary: (
-      selected-state-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
-      selected-state-layer-color: map.get($systems, md-sys-color, tertiary-container),
+    typography: (
+      option-label-text-size: map.get($system, body-large-size),
+      option-label-text-weight: map.get($system, body-large-weight),
+      option-label-text-font: map.get($system, label-large-font),
+      option-label-text-line-height: map.get($system, label-large-line-height),
+      option-label-text-tracking: map.get($system, label-large-tracking),
     ),
-    error: (
-      selected-state-label-text-color: map.get($systems, md-sys-color, on-error-container),
-      selected-state-layer-color: map.get($systems, md-sys-color, error-container),
-    )
+    density: (),
   );
-
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
 }

package/core/option/_optgroup-theme.scss

@@ -1,44 +1,42 @@
 @use 'sass:map';
 @use './m2-optgroup';
+@use './m3-optgroup';
 @use '../tokens/token-utils';
 @use '../style/sass-utils';
 @use '../theming/theming';
-@use '../theming/validation';
 @use '../theming/inspection';
 @use '../typography/typography';
 
 @mixin base($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, base));
+    @include token-utils.create-token-values(map.get(m3-optgroup.get-tokens($theme), base));
   } @else {
   }
 }
 
 @mixin color($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color));
+    @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.$prefix, m2-optgroup.get-color-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-optgroup.get-color-tokens($theme));
     }
   }
 }
 
 @mixin typography($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, typography));
+    @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.$prefix, m2-optgroup.get-typography-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-optgroup.get-typography-tokens($theme));
     }
   }
 }
 
 @mixin density($theme) {
   @if inspection.get-theme-version($theme) == 1 {
-    // There are no M3 density tokens for this component
+    @include token-utils.create-token-values(map.get(m3-optgroup.get-tokens($theme), base));
   } @else {
   }
 }
@@ -47,20 +45,23 @@
 @function _define-overrides() {
   @return (
     (
-      namespace: m2-optgroup.$prefix,
-      tokens: m2-optgroup.get-token-slots(),
+      namespace: optgroup,
+      tokens: token-utils.get-overrides(m3-optgroup.get-tokens(), optgroup)
     ),
   );
 }
 
 @mixin overrides($tokens: ()) {
-  @include token-utils.batch-create-token-values($tokens, _define-overrides()...);
+    @include token-utils.batch-create-token-values($tokens, _define-overrides());
 }
 
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-optgroup') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme));
+      @include base($theme);
+      @include color($theme);
+      @include density($theme);
+      @include typography($theme);
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {
@@ -75,15 +76,3 @@
     }
   }
 }
-
-@mixin _theme-from-tokens($tokens) {
-  @include validation.selector-defined(
-    'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
-  );
-  @if ($tokens != ()) {
-    @include token-utils.create-token-values(
-      m2-optgroup.$prefix,
-      map.get($tokens, m2-optgroup.$prefix)
-    );
-  }
-}