@angular/material 20.0.0-next.9 → 20.0.0-rc.1

package/badge/_badge-theme.scss

@@ -1,18 +1,22 @@
-@use 'sass:color';
-@use '../core/theming/theming';
+@use '../core/style/sass-utils';
 @use '../core/theming/inspection';
+@use '../core/theming/theming';
 @use '../core/theming/validation';
+@use '../core/tokens/token-utils';
 @use '../core/typography/typography';
 @use './m2-badge';
-@use '../core/tokens/token-utils';
-@use '../core/style/sass-utils';
+@use './m3-badge';
+@use 'sass:color';
+@use 'sass:map';
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
 /// for the mat-badge.
 /// @param {Map} $theme The theme to generate base styles for.
 @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(
+        m3-badge.$prefix,
+        map.get(m3-badge.get-tokens($theme), base));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -25,12 +29,14 @@
 
 /// Outputs color theme styles for the mat-badge.
 /// @param {Map} $theme The theme to generate color styles for.
-/// @param {ArgList} Additional optional arguments (only supported for M3 themes):
-///   $color-variant: The color variant to use for the badge: primary, secondary, tertiary,
-///      or error (If not specified, default error color will be used).
-@mixin color($theme, $options...) {
+/// @param {String} $color-variant The color variant to use for
+///     the badge: primary, secondary, tertiary, or error (If not specified,
+///     default error color will be used).
+@mixin color($theme, $color-variant: null) {
   @if inspection.get-theme-version($theme) == 1 {
-    @include _theme-from-tokens(inspection.get-theme-tokens($theme, color), $options...);
+    @include token-utils.create-token-values(
+        m3-badge.$prefix,
+        map.get(m3-badge.get-tokens($theme, $color-variant), color));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -59,7 +65,9 @@
 /// @param {Map} $theme The theme to generate typography styles for.
 @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(
+        m3-badge.$prefix,
+        map.get(m3-badge.get-tokens($theme), typography));
   } @else {
     @include sass-utils.current-selector-or-root() {
       @include token-utils.create-token-values-mixed(
@@ -74,7 +82,9 @@
 /// @param {Map} $theme The theme to generate density styles for.
 @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(
+        m3-badge.$prefix,
+        map.get(m3-badge.get-tokens($theme), density));
   } @else {
   }
 }
@@ -100,10 +110,13 @@
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):
 ///   $color-variant: The color variant to use for the badge: primary, secondary, tertiary,
 ///      or error (If not specified, default error color will be used).
-@mixin theme($theme, $options...) {
+@mixin theme($theme, $color-variant: null) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {
     @if inspection.get-theme-version($theme) == 1 {
-      @include _theme-from-tokens(inspection.get-theme-tokens($theme), $options...);
+      @include base($theme);
+      @include color($theme, $color-variant);
+      @include density($theme);
+      @include typography($theme);
     } @else {
       @include base($theme);
       @if inspection.theme-has($theme, color) {

package/badge/_m3-badge.scss

@@ -1,81 +1,53 @@
 @use 'sass:map';
-@use '../core/style/sass-utils';
 @use '../core/tokens/m3-utils';
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, badge);
 
 /// Generates custom tokens for the mat-badge.
-/// @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-badge
-@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
-  $tokens: (
-    background-color: map.get($systems, md-sys-color, error),
-    text-color: map.get($systems, md-sys-color, on-error),
-    disabled-state-background-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, error),
-      $alpha: 0.38),
-    disabled-state-text-color: map.get($systems, md-sys-color, on-error),
-    text-font: map.get($systems, md-sys-typescale, label-small-font),
-    text-size: map.get($systems, md-sys-typescale, label-small-size),
-    text-weight: map.get($systems, md-sys-typescale, label-small-weight),
-    small-size-text-size: m3-utils.hardcode(0, $exclude-hardcoded),
-    container-shape: map.get($systems, md-sys-shape, corner-full),
-    container-size: m3-utils.hardcode(16px, $exclude-hardcoded),
-    line-height: m3-utils.hardcode(16px, $exclude-hardcoded),
-    legacy-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
-    legacy-small-size-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
-    small-size-container-size: m3-utils.hardcode(6px, $exclude-hardcoded),
-    small-size-line-height: m3-utils.hardcode(6px, $exclude-hardcoded),
-    container-padding: m3-utils.hardcode(0 4px, $exclude-hardcoded),
-    small-size-container-padding: m3-utils.hardcode(0, $exclude-hardcoded),
-    container-offset: m3-utils.hardcode(-12px 0, $exclude-hardcoded),
-    small-size-container-offset: m3-utils.hardcode(-6px 0, $exclude-hardcoded),
-    container-overlap-offset: m3-utils.hardcode(-12px, $exclude-hardcoded),
-    small-size-container-overlap-offset: m3-utils.hardcode(-6px, $exclude-hardcoded),
-
-    // This size isn't in the M3 spec so we emit the same values as for `medium`.
-    large-size-container-size: m3-utils.hardcode(16px, $exclude-hardcoded),
-    large-size-line-height: m3-utils.hardcode(16px, $exclude-hardcoded),
-    large-size-container-offset: m3-utils.hardcode(-12px 0, $exclude-hardcoded),
-    large-size-container-overlap-offset: m3-utils.hardcode(-12px, $exclude-hardcoded),
-    large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
-    large-size-container-padding: m3-utils.hardcode(0 4px, $exclude-hardcoded),
-    legacy-large-size-container-size: m3-utils.hardcode(unset, $exclude-hardcoded),
-  );
+@function get-tokens($theme, $color-variant: null) {
+  $system: m3-utils.get-system($theme);
+  @if $color-variant {
+    $system: m3-utils.replace-colors-with-variant($system, error, $color-variant);
+  }
 
-  $variant-tokens: (
-    primary: (
-      background-color: map.get($systems, md-sys-color, primary),
-      text-color: map.get($systems, md-sys-color, on-primary),
-      disabled-state-background-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, primary),
-        $alpha: 0.38,
-      ),
-      disabled-state-text-color: map.get($systems, md-sys-color, on-primary),
+  $tokens: (
+    base: (
+      container-shape: map.get($system, corner-full),
+      container-size: 16px,
+      legacy-container-size: unset,
+      legacy-small-size-container-size: unset,
+      small-size-container-size: 6px,
+      container-padding: 0 4px,
+      small-size-container-padding: 0,
+      container-offset: -12px 0,
+      small-size-container-offset: -6px 0,
+      container-overlap-offset: -12px,
+      small-size-container-overlap-offset: -6px,
+      large-size-container-size: 16px,
+      large-size-container-offset: -12px 0,
+      large-size-container-overlap-offset: -12px,
+      large-size-container-padding: 0 4px,
+      legacy-large-size-container-size: unset,
     ),
-    secondary: (
-      background-color: map.get($systems, md-sys-color, secondary),
-      text-color: map.get($systems, md-sys-color, on-secondary),
-      disabled-state-background-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, secondary),
-        $alpha: 0.38,
-      ),
-      disabled-state-text-color: map.get($systems, md-sys-color, on-secondary),
+    color: (
+      background-color: map.get($system, error),
+      text-color: map.get($system, on-error),
+      disabled-state-background-color: m3-utils.color-with-opacity(map.get($system, error), 38%),
+      disabled-state-text-color: map.get($system, on-error),
     ),
-    tertiary: (
-      background-color: map.get($systems, md-sys-color, tertiary),
-      text-color: map.get($systems, md-sys-color, on-tertiary),
-      disabled-state-background-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, tertiary),
-        $alpha: 0.38,
-      ),
-      disabled-state-text-color: map.get($systems, md-sys-color, on-tertiary),
+    typography: (
+      text-font: map.get($system, label-small-font),
+      text-size: map.get($system, label-small-size),
+      text-weight: map.get($system, label-small-weight),
+      large-size-text-size: map.get($system, label-small-size),
+      small-size-text-size: 0,
+      line-height: 16px,
+      small-size-line-height: 6px,
+      large-size-line-height: 16px,
     ),
-    error: () // Default, no overrides needed
+    density: (),
   );
 
-  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
+  @return $tokens;
 }

package/badge/index.d.ts

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
 import * as i1 from '@angular/cdk/a11y';
 import { M as MatCommonModule } from '../common-module.d-C8xzHJDr.js';
-import { M as MatBadge, _ as _MatBadgeStyleLoader } from '../badge.d-D0iThVg0.js';
-export { a as MatBadgePosition, b as MatBadgeSize } from '../badge.d-D0iThVg0.js';
+import { M as MatBadge, _ as _MatBadgeStyleLoader } from '../badge.d-Cn81aRz4.js';
+export { a as MatBadgePosition, b as MatBadgeSize } from '../badge.d-Cn81aRz4.js';
 import '@angular/cdk/bidi';
 import '../palette.d-BSSFKjO6.js';
 

package/badge/testing/index.d.ts

@@ -1,5 +1,5 @@
 import { BaseHarnessFilters, ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
-import { a as MatBadgePosition, b as MatBadgeSize } from '../../badge.d-D0iThVg0.js';
+import { a as MatBadgePosition, b as MatBadgeSize } from '../../badge.d-Cn81aRz4.js';
 import '@angular/core';
 import '../../palette.d-BSSFKjO6.js';
 

package/{badge.d-D0iThVg0.d.ts → badge.d-Cn81aRz4.d.ts}

@@ -24,10 +24,10 @@ declare class MatBadge implements OnInit, OnDestroy {
     private _idGenerator;
     /**
      * Theme color of the badge. This API is supported in M2 themes only, it
-     * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/badge/styling.
+     * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/badge/styling.
      *
      * For information on applying color variants in M3, see
-     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+     * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
      */
     get color(): ThemePalette;
     set color(value: ThemePalette);

package/button/index.d.ts

@@ -45,10 +45,10 @@ declare class MatButtonBase implements AfterViewInit, OnDestroy {
     protected _isFab: boolean;
     /**
      * Theme color of the button. This API is supported in M2 themes only, it has
-     * no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.
+     * no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/button/styling.
      *
      * For information on applying color variants in M3, see
-     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+     * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
      */
     color?: string | null;
     /** Whether the ripple effect is disabled or not. */
@@ -129,10 +129,10 @@ type MatAnchor = MatButton;
 interface MatFabDefaultOptions {
     /**
      * Default theme color of the button. This API is supported in M2 themes
-     * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/button/styling.
+     * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/button/styling.
      *
      * For information on applying color variants in M3, see
-     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants.
+     * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants.
      */
     color?: ThemePalette;
 }

package/button-toggle/_m3-button-toggle.scss

@@ -17,7 +17,7 @@ $prefix: (mat, button-toggle);
   $tokens: sass-utils.merge-all(
     m3-utils.generate-typography-tokens($systems, label-text, label-large),
   (
-    shape: map.get($systems, md-sys-shape, corner-full),
+    shape: map.get($systems, md-sys-shape, corner-extra-large),
     hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
     focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
     text-color: map.get($systems, md-sys-color, on-surface),

package/checkbox/index.d.ts

@@ -96,10 +96,10 @@ declare class MatCheckbox implements AfterViewInit, OnChanges, ControlValueAcces
     tabIndex: number;
     /**
      * Theme color of the checkbox. This API is supported in M2 themes only, it
-     * has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/checkbox/styling.
+     * has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/checkbox/styling.
      *
      * For information on applying color variants in M3, see
-     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+     * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
      */
     color: string | undefined;
     /** Whether the checkbox should remain interactive when it is disabled. */
@@ -185,10 +185,10 @@ declare class MatCheckbox implements AfterViewInit, OnChanges, ControlValueAcces
 interface MatCheckboxDefaultOptions {
     /**
      * Default theme color of the checkbox. This API is supported in M2 themes
-     * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.io/components/checkbox/styling.
+     * only, it has no effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/checkbox/styling.
      *
      * For information on applying color variants in M3, see
-     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+     * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
      */
     color?: ThemePalette;
     /** Default checkbox click action for checkboxes. */

package/checkbox/testing/index.d.ts

@@ -16,7 +16,7 @@ interface CheckboxHarnessFilters extends BaseHarnessFilters {
 /** Harness for interacting with a mat-checkbox in tests. */
 declare class MatCheckboxHarness extends ComponentHarness {
     static hostSelector: string;
-    _input: _angular_cdk_testing.AsyncFactoryFn<_angular_cdk_testing.TestElement>;
+    _input: () => Promise<_angular_cdk_testing.TestElement>;
     private _label;
     private _inputContainer;
     /**

package/chips/index.d.ts

@@ -155,10 +155,10 @@ declare class MatChip implements OnInit, AfterViewInit, AfterContentInit, DoChec
     protected _value: any;
     /**
      * Theme color of the chip. This API is supported in M2 themes only, it has no
-     * effect in M3 themes. For color customization in M3, see https://material.angular.io/components/chips/styling.
+     * effect in M3 themes. For color customization in M3, see https://material.angular.dev/components/chips/styling.
      *
      * For information on applying color variants in M3, see
-     * https://material.angular.io/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
+     * https://material.angular.dev/guide/material-2-theming#optional-add-backwards-compatibility-styles-for-color-variants
      */
     color?: string | null;
     /**

package/chips/testing/index.d.ts

@@ -66,7 +66,7 @@ declare class MatChipRemoveHarness extends ComponentHarness {
 
 /** Harness for interacting with a mat-chip in tests. */
 declare class MatChipHarness extends ContentContainerComponentHarness {
-    protected _primaryAction: _angular_cdk_testing.AsyncFactoryFn<_angular_cdk_testing.TestElement>;
+    protected _primaryAction: () => Promise<_angular_cdk_testing.TestElement>;
     static hostSelector: string;
     /**
      * Gets a `HarnessPredicate` that can be used to search for a chip with specific attributes.

package/core/color/_all-color.scss

@@ -7,7 +7,7 @@
     @error 'No color configuration specified.';
   }
 
-  @include all-theme.all-component-themes(
+  @include all-theme.all-component-colors(
       inspection.theme-remove($theme, base, typography, density));
 }
 

package/core/m2/_typography.scss

@@ -178,7 +178,7 @@ $_mdc-levels: (
 /// @param {Map} $input Configuration for the "input" typographic level.
 /// @returns {Map} A typography config for the application.
 ///
-/// @deprecated Use `mat.m2-define-typography-config` instead. See https://v17.material.angular.io/guide/mdc-migration for information about migrating.
+/// @deprecated Use `mat.m2-define-typography-config` instead. See https://v17.material.angular.dev/guide/mdc-migration for information about migrating.
 /// @breaking-change 17.0.0
 @function define-legacy-typography-config(
   $font-family:   'Roboto, "Helvetica Neue", sans-serif',

package/core/theming/_all-theme.scss

@@ -125,6 +125,47 @@
   @include timepicker-theme.base($theme);
 }
 
+@mixin all-component-colors($theme) {
+  @include core-theme.color($theme);
+  @include card-theme.color($theme);
+  @include progress-bar-theme.color($theme);
+  @include tooltip-theme.color($theme);
+  @include form-field-theme.color($theme);
+  @include input-theme.color($theme);
+  @include select-theme.color($theme);
+  @include autocomplete-theme.color($theme);
+  @include dialog-theme.color($theme);
+  @include chips-theme.color($theme);
+  @include slide-toggle-theme.color($theme);
+  @include radio-theme.color($theme);
+  @include slider-theme.color($theme);
+  @include menu-theme.color($theme);
+  @include list-theme.color($theme);
+  @include paginator-theme.color($theme);
+  @include tabs-theme.color($theme);
+  @include checkbox-theme.color($theme);
+  @include button-theme.color($theme);
+  @include icon-button-theme.color($theme);
+  @include fab-theme.color($theme);
+  @include snack-bar-theme.color($theme);
+  @include table-theme.color($theme);
+  @include progress-spinner-theme.color($theme);
+  @include badge-theme.color($theme);
+  @include bottom-sheet-theme.color($theme);
+  @include button-toggle-theme.color($theme);
+  @include datepicker-theme.color($theme);
+  @include divider-theme.color($theme);
+  @include expansion-theme.color($theme);
+  @include grid-list-theme.color($theme);
+  @include icon-theme.color($theme);
+  @include sidenav-theme.color($theme);
+  @include stepper-theme.color($theme);
+  @include sort-theme.color($theme);
+  @include toolbar-theme.color($theme);
+  @include tree-theme.color($theme);
+  @include timepicker-theme.color($theme);
+}
+
 // @deprecated Use `all-component-themes`.
 @mixin angular-material-theme($theme) {
   @include all-component-themes($theme);

package/core/theming/_color-api-backwards-compatibility.scss

@@ -119,23 +119,20 @@ $_overrides-only: true;
     @include _color-variant-styles($theme, primary);
   }
   .mat-badge {
-    @include badge-theme.color($theme, $color-variant: primary,
-      $emit-overrides-only: $_overrides-only);
+    @include badge-theme.color($theme, $color-variant: primary);
   }
 
   .mat-accent {
     @include _color-variant-styles($theme, tertiary);
   }
   .mat-badge-accent {
-    @include badge-theme.color($theme, $color-variant: tertiary,
-      $emit-overrides-only: $_overrides-only);
+    @include badge-theme.color($theme, $color-variant: tertiary);
   }
 
   .mat-warn {
     @include _color-variant-styles($theme, error);
   }
   .mat-badge-warn {
-    @include badge-theme.color($theme, $color-variant: error,
-      $emit-overrides-only: $_overrides-only);
+    @include badge-theme.color($theme, $color-variant: error);
   }
 }

package/core/theming/_definition.scss

@@ -5,6 +5,7 @@
 @use './palettes';
 @use '../tokens/m3-tokens';
 @use './config-validation';
+@use '../tokens/m3';
 
 // Prefix used for component token fallback variables, e.g.
 // `color: var(--mat-text-button-label-text-color, var(--mat-sys-primary));`
@@ -18,6 +19,7 @@ $system-level-prefix: mat-sys;
 
 /// Map key used to store internals of theme config.
 $internals: _mat-theming-internals-do-not-access;
+
 /// The theme version of generated themes.
 $theme-version: 1;
 
@@ -30,97 +32,95 @@ $theme-version: 1;
     @error $err;
   }
 
-  @return sass-utils.deep-merge-all(
-      define-colors(map.get($config, color) or ()),
-      define-typography(map.get($config, typography) or ()),
-      define-density(map.get($config, density) or ()),
-      ($internals: (base-tokens: m3-tokens.generate-base-tokens())),
+  $color-config: map.get($config, color) or ();
+  $typography-config: map.get($config, typography) or ();
+  $density-config: map.get($config, density) or ();
+
+  // colors
+  $type: map.get($color-config, theme-type) or light;
+  $primary: map.get($color-config, primary) or palettes.$violet-palette;
+  $tertiary: map.get($color-config, tertiary) or $primary;
+  $color-system-variables-prefix:
+    map.get($color-config, system-variables-prefix) or $system-level-prefix;
+  sass-utils.$use-system-color-variables: map.get($color-config, use-system-variables) or false;
+
+  $palettes: (
+    primary: map.remove($primary, neutral, neutral-variant, secondary),
+    secondary: map.get($primary, secondary),
+    tertiary: map.remove($tertiary, neutral, neutral-variant, secondary, error),
+    neutral: map.get($primary, neutral),
+    neutral-variant: map.get($primary, neutral-variant),
+    error: map.get($primary, error),
   );
-}
 
-/// Defines an Angular Material theme object with color settings.
-/// @param {Map} $config The color configuration
-/// @return {Map} A theme object
-@function define-colors($config: ()) {
-  $err: config-validation.validate-color-config($config);
-  @if $err {
-    @error $err;
-  }
+  // typography
+  $default-plain: (Roboto, sans-serif);
+  $default-brand: $default-plain;
+  $plain: map.get($typography-config, plain-family) or $default-plain;
+  $brand: map.get($typography-config, brand-family) or $default-brand;
+  $bold: map.get($typography-config, bold-weight) or 700;
+  $medium: map.get($typography-config, medium-weight) or 500;
+  $regular: map.get($typography-config, regular-weight) or 400;
+  $typography-system-variables-prefix: map.get($typography-config, system-variables-prefix) or
+    $system-level-prefix;
+  sass-utils.$use-system-typography-variables:
+    map.get($typography-config, use-system-variables) or false;
+  $typography: (
+    plain: $plain,
+    brand: $brand,
+    bold: $bold,
+    medium: $medium,
+    regular: $regular,
+  );
 
-  $type: map.get($config, theme-type) or light;
-  $primary: map.get($config, primary) or palettes.$violet-palette;
-  $tertiary: map.get($config, tertiary) or $primary;
-  $system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix;
-  sass-utils.$use-system-color-variables: map.get($config, use-system-variables) or false;
+  // density
+  $density-scale: map.get($density-config, scale) or 0;
 
   @return (
     $internals: (
-      theme-version: $theme-version,
+      base-tokens: m3-tokens.generate-base-tokens(),
+      color-system-variables-prefix: $color-system-variables-prefix,
+      color-tokens:
+        m3-tokens.generate-color-tokens($type, $palettes, $color-system-variables-prefix),
+      density-scale: $density-scale,
+      font-definition: $typography,
+      md-sys-color: m3-tokens.get-sys-color($type, $palettes, $color-system-variables-prefix),
+      md-sys-elevation: m3.md-sys-elevation-values(),
+      md-sys-motion: m3.md-sys-motion-values(),
+      md-sys-shape: m3.md-sys-shape-values(),
+      md-sys-state: m3.md-sys-state-values(),
+      md-sys-typescale:
+        m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix),
+      palettes: $palettes,
       theme-type: $type,
-      palettes: (
-        primary: map.remove($primary, neutral, neutral-variant, secondary),
-        secondary: map.get($primary, secondary),
-        tertiary: map.remove($tertiary, neutral, neutral-variant, secondary),
-        neutral: map.get($primary, neutral),
-        neutral-variant: map.get($primary, neutral-variant),
-        error: map.get($primary, error),
-      ),
-      color-system-variables-prefix: $system-variables-prefix,
-      color-tokens: m3-tokens.generate-color-tokens(
-          $type, $primary, $tertiary, map.get($primary, error), $system-variables-prefix)
+      theme-version: $theme-version,
+      typography-system-variables-prefix: $typography-system-variables-prefix,
+      typography-tokens:
+          m3-tokens.generate-typography-tokens($typography, $typography-system-variables-prefix),
     )
   );
 }
 
+/// Defines an Angular Material theme object with color settings.
+/// @param {Map} $config The color configuration
+/// @return {Map} A theme object
+/// @deprecated Use define-theme with a map using the "color" key
+@function define-colors($config: ()) {
+  @return define-theme((color: $config));
+}
+
 /// Defines an Angular Material theme object with typography settings.
 /// @param {Map} $config The typography configuration
 /// @return {Map} A theme object
+/// @deprecated Use define-theme with a map using the "typography" key
 @function define-typography($config: ()) {
-  $err: config-validation.validate-typography-config($config);
-  @if $err {
-    @error $err;
-  }
-
-  $plain: map.get($config, plain-family) or (Roboto, sans-serif);
-  $brand: map.get($config, brand-family) or $plain;
-  $bold: map.get($config, bold-weight) or 700;
-  $medium: map.get($config, medium-weight) or 500;
-  $regular: map.get($config, regular-weight) or 400;
-  $system-variables-prefix: map.get($config, system-variables-prefix) or $system-level-prefix;
-  sass-utils.$use-system-typography-variables: map.get($config, use-system-variables) or false;
-
-  @return (
-    $internals: (
-      theme-version: $theme-version,
-      font-definition: (
-        plain: $plain,
-        brand: $brand,
-        bold: $bold,
-        medium: $medium,
-        regular: $regular,
-      ),
-      typography-system-variables-prefix: $system-variables-prefix,
-      typography-tokens: m3-tokens.generate-typography-tokens(
-          $brand, $plain, $bold, $medium, $regular, $system-variables-prefix)
-    )
-  );
+  @return define-theme((typography: $config));
 }
 
 /// Defines an Angular Material theme object with density settings.
 /// @param {Map} $config The density configuration
 /// @return {Map} A theme object
+/// @deprecated Use define-theme with a map using the "density" key
 @function define-density($config: ()) {
-  $err: config-validation.validate-density-config($config);
-  @if $err {
-    @error $err;
-  }
-
-  $density-scale: map.get($config, scale) or 0;
-
-  @return (
-    $internals: (
-      theme-version: $theme-version,
-      density-scale: $density-scale,
-    )
-  );
+  @return define-theme((density: $config));
 }