@angular/material 20.0.4 → 20.1.0-next.1

package/chips/index.d.ts

@@ -21,12 +21,15 @@ declare class MatChipAction {
         _handlePrimaryActionInteraction(): void;
         remove(): void;
         disabled: boolean;
+        _edit(): void;
         _isEditing?: boolean;
     };
     /** Whether the action is interactive. */
     isInteractive: boolean;
     /** Whether this is the primary action in the chip. */
     _isPrimary: boolean;
+    /** Whether this is the leading action in the chip. */
+    _isLeading: boolean;
     /** Whether the action is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
@@ -71,6 +74,31 @@ declare class MatChipTrailingIcon extends MatChipAction {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipTrailingIcon, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipTrailingIcon, "mat-chip-trailing-icon, [matChipTrailingIcon]", never, {}, {}, never, never, true, never>;
 }
+/**
+ * Directive to edit the parent chip when the leading action icon is clicked or
+ * when the ENTER key is pressed on it.
+ *
+ * Recommended for use with the Material Design "edit" icon
+ * available at https://material.io/icons/#ic_edit.
+ *
+ * Example:
+ *
+ * ```
+ * <mat-chip>
+ *   <button matChipEdit aria-label="Edit">
+ *     <mat-icon>edit</mat-icon>
+ *   </button>
+ * </mat-chip>
+ * ```
+ */
+declare class MatChipEdit extends MatChipAction {
+    _isPrimary: boolean;
+    _isLeading: boolean;
+    _handleClick(event: MouseEvent): void;
+    _handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MatChipEdit, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<MatChipEdit, "[matChipEdit]", never, {}, {}, never, never, true, never>;
+}
 /**
  * Directive to remove the parent chip when the trailing icon is clicked or
  * when the ENTER key is pressed on it.
@@ -132,6 +160,8 @@ declare class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoChec
     protected _allLeadingIcons: QueryList<MatChipAvatar>;
     /** All trailing icons present in the chip. */
     protected _allTrailingIcons: QueryList<MatChipTrailingIcon>;
+    /** All edit icons present in the chip. */
+    protected _allEditIcons: QueryList<MatChipEdit>;
     /** All remove icons present in the chip. */
     protected _allRemoveIcons: QueryList<MatChipRemove>;
     _hasFocus(): boolean;
@@ -183,6 +213,8 @@ declare class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoChec
     protected basicChipAttrName: string;
     /** The chip's leading icon. */
     leadingIcon: MatChipAvatar;
+    /** The chip's leading edit icon. */
+    editIcon: MatChipEdit;
     /** The chip's trailing icon. */
     trailingIcon: MatChipTrailingIcon;
     /** The chip's trailing remove icon. */
@@ -221,10 +253,12 @@ declare class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoChec
     _getActions(): MatChipAction[];
     /** Handles interactions with the primary action of the chip. */
     _handlePrimaryActionInteraction(): void;
+    /** Handles interactions with the edit action of the chip. */
+    _edit(event: Event): void;
     /** Starts the focus monitoring process on the chip. */
     private _monitorFocus;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChip, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "role": { "alias": "role"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaDescription": { "alias": "aria-description"; "required": false; }; "value": { "alias": "value"; "required": false; }; "color": { "alias": "color"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "highlighted": { "alias": "highlighted"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "trailingIcon", "removeIcon", "_allLeadingIcons", "_allTrailingIcons", "_allRemoveIcons"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChip, "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", ["matChip"], { "role": { "alias": "role"; "required": false; }; "id": { "alias": "id"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaDescription": { "alias": "aria-description"; "required": false; }; "value": { "alias": "value"; "required": false; }; "color": { "alias": "color"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "highlighted": { "alias": "highlighted"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "editIcon", "trailingIcon", "removeIcon", "_allLeadingIcons", "_allTrailingIcons", "_allEditIcons", "_allRemoveIcons"], ["mat-chip-avatar, [matChipAvatar]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], true, never>;
     static ngAcceptInputType_removable: unknown;
     static ngAcceptInputType_highlighted: unknown;
     static ngAcceptInputType_disableRipple: unknown;
@@ -353,13 +387,25 @@ declare class MatChipRow extends MatChip implements AfterViewInit {
     defaultEditInput?: MatChipEditInput;
     /** The projected chip edit input. */
     contentEditInput?: MatChipEditInput;
+    /**
+     * Set on a mousedown when the chip is already focused via mouse or keyboard.
+     *
+     * This allows us to ensure chip is already focused when deciding whether to enter the
+     * edit mode on a subsequent click. Otherwise, the chip appears focused when handling the
+     * first click event.
+     */
+    private _alreadyFocused;
     _isEditing: boolean;
     constructor(...args: unknown[]);
+    ngAfterViewInit(): void;
+    protected _hasLeadingActionIcon(): boolean;
     _hasTrailingIcon(): boolean;
     /** Sends focus to the first gridcell when the user clicks anywhere inside the chip. */
     _handleFocus(): void;
     _handleKeydown(event: KeyboardEvent): void;
+    _handleClick(event: MouseEvent): void;
     _handleDoubleclick(event: MouseEvent): void;
+    _edit(): void;
     private _startEditing;
     private _onEditFinish;
     _isRippleDisabled(): boolean;
@@ -369,7 +415,7 @@ declare class MatChipRow extends MatChip implements AfterViewInit {
      */
     private _getEditInput;
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipRow, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", never, { "editable": { "alias": "editable"; "required": false; }; }, { "edited": "edited"; }, ["contentEditInput"], ["mat-chip-avatar, [matChipAvatar]", "[matChipEditInput]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatChipRow, "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", never, { "editable": { "alias": "editable"; "required": false; }; }, { "edited": "edited"; }, ["contentEditInput"], ["[matChipEdit]", "mat-chip-avatar, [matChipAvatar]", "[matChipEditInput]", "*", "mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"], true, never>;
 }
 
 /**
@@ -888,7 +934,7 @@ declare class MatChipInput implements MatChipTextControl, OnChanges, OnDestroy {
 
 declare class MatChipsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<MatChipsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<MatChipsModule, never, [typeof MatCommonModule, typeof MatRippleModule, typeof MatChipAction, typeof MatChip, typeof MatChipAvatar, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon], [typeof MatCommonModule, typeof MatChip, typeof MatChipAvatar, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<MatChipsModule, never, [typeof MatCommonModule, typeof MatRippleModule, typeof MatChipAction, typeof MatChip, typeof MatChipAvatar, typeof MatChipEdit, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon], [typeof MatCommonModule, typeof MatChip, typeof MatChipAvatar, typeof MatChipEdit, typeof MatChipEditInput, typeof MatChipGrid, typeof MatChipInput, typeof MatChipListbox, typeof MatChipOption, typeof MatChipRemove, typeof MatChipRow, typeof MatChipSet, typeof MatChipTrailingIcon]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<MatChipsModule>;
 }
 
@@ -915,6 +961,12 @@ declare const MAT_CHIP_AVATAR: InjectionToken<unknown>;
  * retention of the class and its directive metadata.
  */
 declare const MAT_CHIP_TRAILING_ICON: InjectionToken<unknown>;
+/**
+ * Injection token that can be used to reference instances of `MatChipEdit`. It serves as
+ * alternative token to the actual `MatChipEdit` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+declare const MAT_CHIP_EDIT: InjectionToken<unknown>;
 /**
  * Injection token that can be used to reference instances of `MatChipRemove`. It serves as
  * alternative token to the actual `MatChipRemove` class which could cause unnecessary
@@ -926,5 +978,5 @@ declare const MAT_CHIP_REMOVE: InjectionToken<unknown>;
  */
 declare const MAT_CHIP: InjectionToken<unknown>;
 
-export { MAT_CHIP, MAT_CHIPS_DEFAULT_OPTIONS, MAT_CHIP_AVATAR, MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON, MatChip, MatChipAvatar, MatChipEditInput, MatChipGrid, MatChipGridChange, MatChipInput, MatChipListbox, MatChipListboxChange, MatChipOption, MatChipRemove, MatChipRow, MatChipSelectionChange, MatChipSet, MatChipTrailingIcon, MatChipsModule };
+export { MAT_CHIP, MAT_CHIPS_DEFAULT_OPTIONS, MAT_CHIP_AVATAR, MAT_CHIP_EDIT, MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR, MAT_CHIP_REMOVE, MAT_CHIP_TRAILING_ICON, MatChip, MatChipAvatar, MatChipEdit, MatChipEditInput, MatChipGrid, MatChipGridChange, MatChipInput, MatChipListbox, MatChipListboxChange, MatChipOption, MatChipRemove, MatChipRow, MatChipSelectionChange, MatChipSet, MatChipTrailingIcon, MatChipsModule };
 export type { MatChipEditedEvent, MatChipEvent, MatChipInputEvent, MatChipTextControl, MatChipsDefaultOptions };

package/chips/testing/index.d.ts

@@ -31,6 +31,8 @@ interface ChipRowHarnessFilters extends ChipHarnessFilters {
 }
 interface ChipSetHarnessFilters extends BaseHarnessFilters {
 }
+interface ChipEditHarnessFilters extends BaseHarnessFilters {
+}
 interface ChipRemoveHarnessFilters extends BaseHarnessFilters {
 }
 interface ChipAvatarHarnessFilters extends BaseHarnessFilters {
@@ -50,6 +52,20 @@ declare class MatChipAvatarHarness extends ComponentHarness {
     static with<T extends MatChipAvatarHarness>(this: ComponentHarnessConstructor<T>, options?: ChipAvatarHarnessFilters): HarnessPredicate<T>;
 }
 
+/** Harness for interacting with a standard Material chip edit button in tests. */
+declare class MatChipEditHarness extends ComponentHarness {
+    static hostSelector: string;
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a chip edit with specific
+     * attributes.
+     * @param options Options for filtering which input instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with<T extends MatChipEditHarness>(this: ComponentHarnessConstructor<T>, options?: ChipEditHarnessFilters): HarnessPredicate<T>;
+    /** Clicks the edit button. */
+    click(): Promise<void>;
+}
+
 /** Harness for interacting with a standard Material chip remove button in tests. */
 declare class MatChipRemoveHarness extends ComponentHarness {
     static hostSelector: string;
@@ -80,6 +96,11 @@ declare class MatChipHarness extends ContentContainerComponentHarness {
     isDisabled(): Promise<boolean>;
     /** Delete a chip from the set. */
     remove(): Promise<void>;
+    /**
+     * Gets the edit button inside of a chip.
+     * @param filter Optionally filters which chips are included.
+     */
+    geEditButton(filter?: ChipEditHarnessFilters): Promise<MatChipEditHarness>;
     /**
      * Gets the remove button inside of a chip.
      * @param filter Optionally filters which chips are included.
@@ -245,5 +266,5 @@ declare class MatChipSetHarness extends ComponentHarness {
     getChips(filter?: ChipHarnessFilters): Promise<MatChipHarness[]>;
 }
 
-export { MatChipAvatarHarness, MatChipEditInputHarness, MatChipGridHarness, MatChipHarness, MatChipInputHarness, MatChipListboxHarness, MatChipOptionHarness, MatChipRemoveHarness, MatChipRowHarness, MatChipSetHarness };
-export type { ChipAvatarHarnessFilters, ChipEditInputHarnessFilters, ChipGridHarnessFilters, ChipHarnessFilters, ChipInputHarnessFilters, ChipListboxHarnessFilters, ChipOptionHarnessFilters, ChipRemoveHarnessFilters, ChipRowHarnessFilters, ChipSetHarnessFilters };
+export { MatChipAvatarHarness, MatChipEditHarness, MatChipEditInputHarness, MatChipGridHarness, MatChipHarness, MatChipInputHarness, MatChipListboxHarness, MatChipOptionHarness, MatChipRemoveHarness, MatChipRowHarness, MatChipSetHarness };
+export type { ChipAvatarHarnessFilters, ChipEditHarnessFilters, ChipEditInputHarnessFilters, ChipGridHarnessFilters, ChipHarnessFilters, ChipInputHarnessFilters, ChipListboxHarnessFilters, ChipOptionHarnessFilters, ChipRemoveHarnessFilters, ChipRowHarnessFilters, ChipSetHarnessFilters };

package/core/_m2-app.scss

@@ -1,8 +1,6 @@
 @use 'sass:map';
-@use './tokens/m2-utils';
-@use './theming/inspection';
-@use './style/sass-utils';
 @use './style/elevation';
+@use '../core/tokens/m2-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.
@@ -12,15 +10,15 @@
 
 // Tokens that can be configured through Angular Material's color theming API.
 @function get-color-tokens($theme) {
+  $system: m2-utils.get-system($theme);
+
   $tokens: (
-    app-background-color: inspection.get-theme-color($theme, background, background),
-    app-text-color: inspection.get-theme-color($theme, foreground, text),
+    app-background-color: map.get($system, background),
+    app-text-color: map.get($system, on-surface),
   );
 
   @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));
+    $shadow: elevation.get-box-shadow($zValue, map.get($system, shadow));
     $tokens: map.set($tokens, 'app-elevation-shadow-level-#{$zValue}', $shadow);
   }
 
@@ -36,14 +34,3 @@
 @function get-density-tokens($theme) {
   @return ();
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/core/m2/_theming.scss

@@ -85,14 +85,16 @@
   // might be inferred as numbers by Sass. Casting them to string fixes the map lookup.
   $color: if(map.has-key($palette, $hue), map.get($palette, $hue), map.get($palette, $hue + ''));
 
-  @if (meta.type-of($color) != color) {
-    // If the $color resolved to something different from a color (e.g. a CSS variable),
-    // we can't apply the opacity anyway so we return the value as is, otherwise Sass can
-    // throw an error or output something invalid.
+  @if ($opacity == null) {
     @return $color;
   }
 
-  @return rgba($color, if($opacity == null, color.opacity($color), $opacity));
+  @if (meta.type-of($color) != color) {
+    $opacity: ($opacity * 100) + '%';
+    @return #{color-mix(in srgb, #{$color} #{$opacity}, transparent)};
+  }
+
+  @return rgba($color, $opacity);
 }
 
 // Validates the specified theme by ensuring that the optional color config defines
@@ -111,39 +113,71 @@
   @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) {
-  @return (
-    primary: $primary,
-    accent: $accent,
-    warn: if($warn != null, $warn, define-palette(palette.$red-palette)),
-    is-dark: false,
-    foreground: palette.$light-theme-foreground-palette,
-    background: palette.$light-theme-background-palette
+@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),
+      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),
+    ));
+  }
 }
 
-// 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: if($warn != null, $warn, define-palette(palette.$red-palette)),
-    is-dark: true,
-    foreground: palette.$dark-theme-foreground-palette,
-    background: palette.$dark-theme-background-palette
+    warn: $warn,
+    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:
@@ -160,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
@@ -178,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
@@ -196,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,6 +1,6 @@
-@use '../style/sass-utils';
 @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.
@@ -10,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, foreground, text),
+    optgroup-label-text-color: map.get($system, on-surface),
   );
 }
 
@@ -30,14 +31,3 @@
 @function get-density-tokens($theme) {
   @return ();
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/core/option/_m2-option.scss

@@ -1,6 +1,7 @@
-@use '../tokens/m2-utils';
 @use '../theming/inspection';
-@use '../style/sass-utils';
+@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,17 +10,20 @@
 }
 
 // Tokens that can be configured through Angular Material's color theming API.
-@function get-color-tokens($theme, $palette-name: primary) {
+@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: 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,
+    option-selected-state-label-text-color: map.get($system, primary),
+    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)),
   );
 }
 
@@ -38,14 +42,3 @@
 @function get-density-tokens($theme) {
   @return ();
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}

package/core/option/_option-theme.scss

@@ -26,15 +26,15 @@
         map.get(m3-option.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
-      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme));
+      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, primary));
     }
 
     .mat-accent {
-      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, accent));
+      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, secondary));
     }
 
     .mat-warn {
-      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, warn));
+      @include token-utils.create-token-values-mixed(m2-option.get-color-tokens($theme, error));
     }
   }
 }

package/core/ripple/_m2-ripple.scss

@@ -1,7 +1,6 @@
-@use 'sass:meta';
+@use 'sass:map';
 @use '../tokens/m2-utils';
-@use '../theming/inspection';
-@use '../style/sass-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.
@@ -11,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)),
   );
 }
 
@@ -33,14 +27,3 @@
 @function get-density-tokens($theme) {
   @return ();
 }
-
-// Combines the tokens generated by the above functions into a single map with placeholder values.
-// This is used to create token slots.
-@function get-token-slots() {
-  @return sass-utils.deep-merge-all(
-      get-unthemable-tokens(),
-      get-color-tokens(m2-utils.$placeholder-color-config),
-      get-typography-tokens(m2-utils.$placeholder-typography-config),
-      get-density-tokens(m2-utils.$placeholder-density-config)
-  );
-}