@angular/material 18.0.0-next.5 → 18.0.0-next.6

package/_index.scss

@@ -1,20 +1,24 @@
-// Theming APIs
-@forward './core/theming/theming' show define-light-theme, define-dark-theme,
-  define-palette, get-contrast-color-from-palette, get-color-from-palette,
-  get-color-config, get-typography-config, get-density-config,
-  $theme-ignore-duplication-warnings, $theme-legacy-inspection-api-compatibility;
+// Expose the M2 APIs under an `m2-` prefix in order to distinguish them from the M3 APIs.
+@forward './core/m2' as m2-*;
+
+// New theming APIs
+@forward './core/theming/inspection' show get-theme-version, get-theme-type, get-theme-color,
+  get-theme-typography, get-theme-density, theme-has, theme-remove;
+@forward './core/theming/definition' show define-theme, define-colors, define-typography,
+  define-density;
+@forward './core/theming/palettes' show $red-palette, $green-palette, $blue-palette,
+  $yellow-palette, $cyan-palette, $magenta-palette, $orange-palette,
+  $chartreuse-palette, $azure-palette, $violet-palette, $rose-palette;
+@forward './core/theming/color-api-backwards-compatibility' show
+  color-variants-backwards-compatibility;
+
+@forward './core/theming/theming' show $theme-ignore-duplication-warnings,
+  $theme-legacy-inspection-api-compatibility;
 @forward './core/theming/theming' as private-* show private-clamp-density;
-@forward './core/theming/palette' show $red-palette, $pink-palette, $indigo-palette,
-  $purple-palette, $deep-purple-palette, $blue-palette, $light-blue-palette, $cyan-palette,
-  $teal-palette, $green-palette, $light-green-palette, $lime-palette, $yellow-palette,
-  $amber-palette, $orange-palette, $deep-orange-palette, $brown-palette, $grey-palette,
-  $gray-palette, $blue-grey-palette, $blue-gray-palette, $light-theme-background-palette,
-  $dark-theme-background-palette, $light-theme-foreground-palette, $dark-theme-foreground-palette;
-@forward './core/typography/typography' show define-typography-level, define-rem-typography-config,
-  define-typography-config, typography-hierarchy, define-legacy-typography-config;
-@forward './core/typography/typography-utils' show typography-level,
-  font-size, line-height, font-weight, letter-spacing, font-family, font-shorthand;
+@forward './core/typography/typography' show typography-hierarchy;
+@forward './core/typography/typography-utils' show font-shorthand;
 @forward './core/tokens/m2' show m2-tokens-from-theme;
+@forward './core/tokens/m3-tokens' show system-level-colors, system-level-typography;
 
 // Private/Internal
 @forward './core/density/private/all-density' show all-component-densities;
@@ -42,96 +46,99 @@
 
 // Component themes
 @forward './core/core-theme' as core-* show core-color, core-theme, core-typography, core-density,
-  core-base;
-@forward './core/ripple/ripple-theme' as ripple-* show ripple-color, ripple-theme, ripple-base;
+  core-base, core-overrides;
+@forward './core/ripple/ripple-theme' as ripple-* show ripple-color, ripple-theme, ripple-base,
+  ripple-overrides;
 @forward './core/option/option-theme' as option-* show option-color, option-typography,
-  option-theme, option-density, option-base;
+  option-theme, option-density, option-base, option-overrides;
 @forward './core/option/optgroup-theme' as optgroup-* show optgroup-color, optgroup-typography,
-  optgroup-theme, optgroup-density, optgroup-base;
+  optgroup-theme, optgroup-density, optgroup-base, optgroup-overrides;
 @forward './core/selection/pseudo-checkbox/pseudo-checkbox-theme' as pseudo-checkbox-* show
   pseudo-checkbox-color, pseudo-checkbox-typography, pseudo-checkbox-theme, pseudo-checkbox-density,
-  pseudo-checkbox-base;
+  pseudo-checkbox-base, pseudo-checkbox-overrides;
 @forward './core/selection/pseudo-checkbox/pseudo-checkbox-common' as pseudo-checkbox-* show
   pseudo-checkbox-legacy-size;
 @forward './core/focus-indicators/focus-indicators-theme' as strong-focus-indicators-* show
   strong-focus-indicators-color, strong-focus-indicators-theme;
 @forward './autocomplete/autocomplete-theme' as autocomplete-* show autocomplete-theme,
-  autocomplete-color, autocomplete-typography, autocomplete-density, autocomplete-base;
+  autocomplete-color, autocomplete-typography, autocomplete-density, autocomplete-base,
+  autocomplete-overrides;
 @forward './badge/badge-theme' as badge-* show badge-theme, badge-color, badge-typography,
-  badge-density, badge-base;
+  badge-density, badge-base, badge-overrides;
 @forward './bottom-sheet/bottom-sheet-theme' as bottom-sheet-* show bottom-sheet-theme,
-  bottom-sheet-color, bottom-sheet-typography, bottom-sheet-density, bottom-sheet-base;
+  bottom-sheet-color, bottom-sheet-typography, bottom-sheet-density, bottom-sheet-base,
+  bottom-sheet-overrides;
 @forward './button/button-theme' as button-* show button-theme, button-color, button-typography,
-  button-density, button-base;
+  button-density, button-base, button-overrides;
 @forward './button/fab-theme' as fab-* show fab-color, fab-typography,
-  fab-density, fab-theme, fab-base;
+  fab-density, fab-theme, fab-base, fab-overrides;
 @forward './button/icon-button-theme' as icon-button-* show icon-button-color,
-  icon-button-typography, icon-button-density, icon-button-theme, icon-button-base;
+  icon-button-typography, icon-button-density, icon-button-theme, icon-button-base,
+  icon-button-overrides;
 @forward './button-toggle/button-toggle-theme' as button-toggle-* show button-toggle-theme,
-  button-toggle-color, button-toggle-typography, button-toggle-density, button-toggle-base;
+  button-toggle-color, button-toggle-typography, button-toggle-density, button-toggle-base,
+  button-toggle-overrides;
 @forward './card/card-theme' as card-* show card-theme, card-color, card-typography, card-density,
-  card-base;
+  card-base, card-overrides;
 @forward './checkbox/checkbox-theme' as checkbox-* show checkbox-theme, checkbox-color,
-  checkbox-typography, checkbox-density, checkbox-base;
+  checkbox-typography, checkbox-density, checkbox-base, checkbox-overrides;
 @forward './chips/chips-theme' as chips-* show chips-theme, chips-color, chips-typography,
-  chips-density, chips-base;
+  chips-density, chips-base, chips-overrides;
 @forward './datepicker/datepicker-theme' as datepicker-* show datepicker-theme, datepicker-color,
-  datepicker-typography, datepicker-date-range-colors, datepicker-density, datepicker-base;
+  datepicker-typography, datepicker-date-range-colors, datepicker-density, datepicker-base,
+  datepicker-overrides;
 @forward './dialog/dialog-theme' as dialog-* show dialog-theme, dialog-color, dialog-typography,
-  dialog-density, dialog-base;
+  dialog-density, dialog-base, dialog-overrides;
 @forward './dialog/dialog-legacy-padding' as dialog-* show dialog-legacy-padding;
 @forward './divider/divider-theme' as divider-* show divider-theme, divider-color,
-  divider-typography, divider-density, divider-base;
+  divider-typography, divider-density, divider-base, divider-overrides;
 @forward './expansion/expansion-theme' as expansion-* show expansion-theme, expansion-color,
-  expansion-typography, expansion-density, expansion-base;
+  expansion-typography, expansion-density, expansion-base, expansion-overrides;
 @forward './form-field/form-field-theme' as form-field-* show form-field-theme,
-  form-field-color, form-field-typography, form-field-density, form-field-base;
+  form-field-color, form-field-typography, form-field-density, form-field-base,
+  form-field-overrides;
 @forward './grid-list/grid-list-theme' as grid-list-* show grid-list-theme, grid-list-color,
-  grid-list-typography, grid-list-density, grid-list-base;
+  grid-list-typography, grid-list-density, grid-list-base, grid-list-overrides;
 @forward './icon/icon-theme' as icon-* show icon-theme, icon-color, icon-typography, icon-density,
-  icon-base;
+  icon-base, icon-overrides;
 @forward './input/input-theme' as input-* show input-theme, input-color, input-typography,
-  input-density, input-base;
+  input-density, input-base, input-overrides;
 @forward './list/list-theme' as list-* show list-theme, list-color, list-typography,
-  list-density, list-base;
+  list-density, list-base, list-overrides;
 @forward './menu/menu-theme' as menu-* show menu-theme, menu-color, menu-typography, menu-density,
-  menu-base;
+  menu-base, menu-overrides;
 @forward './paginator/paginator-theme' as paginator-* show paginator-theme, paginator-color,
-  paginator-typography, paginator-density, paginator-base;
+  paginator-typography, paginator-density, paginator-base, paginator-overrides;
 @forward './progress-bar/progress-bar-theme' as progress-bar-* show
   progress-bar-theme, progress-bar-color, progress-bar-typography,
-  progress-bar-density, progress-bar-base;
+  progress-bar-density, progress-bar-base, progress-bar-overrides;
 @forward './progress-spinner/progress-spinner-theme' as progress-spinner-* show
   progress-spinner-theme, progress-spinner-color, progress-spinner-typography,
-  progress-spinner-density, progress-spinner-base;
+  progress-spinner-density, progress-spinner-base, progress-spinner-overrides;
 @forward './radio/radio-theme' as radio-* show radio-theme, radio-color, radio-typography,
-  radio-density, radio-base;
+  radio-density, radio-base, radio-overrides;
 @forward './select/select-theme' as select-* show select-theme, select-color, select-typography,
-  select-density, select-base;
+  select-density, select-base, select-overrides;
 @forward './sidenav/sidenav-theme' as sidenav-* show sidenav-theme, sidenav-color,
-  sidenav-typography, sidenav-density, sidenav-base;
+  sidenav-typography, sidenav-density, sidenav-base, sidenav-overrides;
 @forward './slide-toggle/slide-toggle-theme' as slide-toggle-* show
   slide-toggle-theme, slide-toggle-color, slide-toggle-typography, slide-toggle-density,
-  slide-toggle-base;
+  slide-toggle-base, slide-toggle-overrides;
 @forward './slider/slider-theme' as slider-* show slider-theme, slider-color, slider-typography,
-  slider-density, slider-base;
+  slider-density, slider-base, slider-overrides;
 @forward './snack-bar/snack-bar-theme' as snack-bar-* show snack-bar-theme, snack-bar-color,
-  snack-bar-typography, snack-bar-density, snack-bar-base;
+  snack-bar-typography, snack-bar-density, snack-bar-base, bar-overrides;
 @forward './sort/sort-theme' as sort-* show sort-theme, sort-color, sort-typography, sort-density,
-  sort-base;
+  sort-base, sort-overrides;
 @forward './stepper/stepper-theme' as stepper-* show stepper-theme, stepper-color,
-  stepper-typography, stepper-density, stepper-base;
+  stepper-typography, stepper-density, stepper-base, stepper-overrides;
 @forward './table/table-theme' as table-* show table-theme, table-color, table-typography,
-  table-density, table-base;
+  table-density, table-base, table-overrides;
 @forward './tabs/tabs-theme' as tabs-* show tabs-theme, tabs-color, tabs-typography, tabs-density,
-  tabs-base;
+  tabs-base, tabs-overrides;
 @forward './toolbar/toolbar-theme' as toolbar-* show toolbar-theme, toolbar-color,
-  toolbar-typography, toolbar-density, toolbar-base;
+  toolbar-typography, toolbar-density, toolbar-base, toolbar-overrides;
 @forward './tooltip/tooltip-theme' as tooltip-* show tooltip-theme, tooltip-color,
-  tooltip-typography, tooltip-density, tooltip-base;
+  tooltip-typography, tooltip-density, tooltip-base, tooltip-overrides;
 @forward './tree/tree-theme' as tree-* show tree-theme, tree-color, tree-typography, tree-density,
-  tree-base;
-
-// New theming APIs
-@forward './core/theming/inspection' show get-theme-version, get-theme-type, get-theme-color,
-  get-theme-typography, get-theme-density, theme-has, theme-remove;
+  tree-base, tree-overrides;

package/autocomplete/_autocomplete-theme.scss

@@ -55,6 +55,13 @@
   }
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mat-autocomplete.$prefix, tokens: tokens-mat-autocomplete.get-token-slots()),
+  );
+}
+
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
     @if inspection.get-theme-version($theme) == 1 {

package/badge/_badge-theme.scss

@@ -72,6 +72,15 @@
   @else {}
 }
 
+/// Outputs the CSS variable values for the given tokens.
+/// @param {Map} $tokens The token values to emit.
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mat-badge.$prefix, tokens: tokens-mat-badge.get-token-slots()),
+  );
+}
+
 /// Outputs all (base, color, typography, and density) theme styles for the mat-badge.
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):

package/bottom-sheet/_bottom-sheet-theme.scss

@@ -50,6 +50,13 @@
   @else {}
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mat-bottom-sheet.$prefix, tokens: tokens-mat-bottom-sheet.get-token-slots()),
+  );
+}
+
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
     @if inspection.get-theme-version($theme) == 1 {

package/button/_button-theme.scss

@@ -273,6 +273,31 @@
   }
 }
 
+/// Outputs the CSS variable values for the given tokens.
+/// @param {Map} $tokens The token values to emit.
+@mixin overrides($tokens: ()) {
+  $mdc-filled-button-tokens: tokens-mdc-filled-button.get-token-slots();
+  $mat-filled-button-tokens: tokens-mat-filled-button.get-token-slots();
+  $mdc-outlined-button-tokens: tokens-mdc-outlined-button.get-token-slots();
+  $mat-outlined-button-tokens: tokens-mat-outlined-button.get-token-slots();
+  $mdc-protected-button-tokens: tokens-mdc-protected-button.get-token-slots();
+  $mat-protected-button-tokens: tokens-mat-protected-button.get-token-slots();
+  $mdc-text-button-tokens: tokens-mdc-text-button.get-token-slots();
+  $mat-text-button-tokens: tokens-mat-text-button.get-token-slots();
+
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mdc-filled-button.$prefix, tokens: $mdc-filled-button-tokens),
+    (prefix: tokens-mat-filled-button.$prefix, tokens: $mat-filled-button-tokens),
+    (prefix: tokens-mdc-outlined-button.$prefix, tokens: $mdc-outlined-button-tokens),
+    (prefix: tokens-mat-outlined-button.$prefix, tokens: $mat-outlined-button-tokens),
+    (prefix: tokens-mdc-protected-button.$prefix, tokens: $mdc-protected-button-tokens),
+    (prefix: tokens-mat-protected-button.$prefix, tokens: $mat-protected-button-tokens),
+    (prefix: tokens-mdc-text-button.$prefix, tokens: $mdc-text-button-tokens),
+    (prefix: tokens-mat-text-button.$prefix, tokens: $mat-text-button-tokens),
+  );
+}
+
 /// Outputs all (base, color, typography, and density) theme styles for the mat-button.
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):

package/button/_fab-theme.scss

@@ -141,6 +141,19 @@
   }
 }
 
+/// Outputs the CSS variable values for the given tokens.
+/// @param {Map} $tokens The token values to emit.
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mdc-fab.$prefix, tokens: tokens-mdc-fab.get-token-slots()),
+    (prefix: tokens-mdc-fab-small.$prefix, tokens: tokens-mdc-fab-small.get-token-slots()),
+    (prefix: tokens-mdc-extended-fab.$prefix, tokens: tokens-mdc-extended-fab.get-token-slots()),
+    (prefix: tokens-mat-fab.$prefix, tokens: tokens-mat-fab.get-token-slots()),
+    (prefix: tokens-mat-fab-small.$prefix, tokens: tokens-mat-fab-small.get-token-slots()),
+  );
+}
+
 /// Outputs all (base, color, typography, and density) theme styles for the mat-checkbox.
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):

package/button/_icon-button-theme.scss

@@ -121,6 +121,14 @@
   }
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mdc-icon-button.$prefix, tokens: tokens-mdc-icon-button.get-token-slots()),
+    (prefix: tokens-mat-icon-button.$prefix, tokens: tokens-mat-icon-button.get-token-slots()),
+  );
+}
+
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-icon-button') {
     @if inspection.get-theme-version($theme) == 1 {

package/button-toggle/_button-toggle-theme.scss

@@ -79,6 +79,18 @@
   }
 }
 
+/// Outputs the CSS variable values for the given tokens.
+/// @param {Map} $tokens The token values to emit.
+@mixin overrides($tokens: ()) {
+  $legacy-tokens: tokens-mat-legacy-button-toggle.get-token-slots();
+  $standard-tokens: tokens-mat-standard-button-toggle.get-token-slots();
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mat-legacy-button-toggle.$prefix, tokens: $legacy-tokens),
+    (prefix: tokens-mat-standard-button-toggle.$prefix, tokens: $standard-tokens),
+  );
+}
+
 /// Outputs all (base, color, typography, and density) theme styles for the mat-button-toggle.
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):

package/card/_card-theme.scss

@@ -88,6 +88,15 @@
   }
 }
 
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mat-card.$prefix, tokens: tokens-mat-card.get-token-slots()),
+    (prefix: tokens-mdc-elevated-card.$prefix, tokens: tokens-mdc-elevated-card.get-token-slots()),
+    (prefix: tokens-mdc-outlined-card.$prefix, tokens: tokens-mdc-outlined-card.get-token-slots()),
+  );
+}
+
 @mixin theme($theme) {
   @include theming.private-check-duplicate-theme-styles($theme, 'mat-card') {
     @if inspection.get-theme-version($theme) == 1 {

package/checkbox/_checkbox-theme.scss

@@ -97,10 +97,8 @@
 @mixin overrides($tokens: ()) {
   @include token-utils.batch-create-token-values(
     $tokens,
-    $mat-prefix: tokens-mat-checkbox.$prefix,
-    $mdc-prefix: tokens-mdc-checkbox.$prefix,
-    $mat-tokens: tokens-mat-checkbox.get-token-slots(),
-    $mdc-tokens: tokens-mdc-checkbox.get-token-slots(),
+    (prefix: tokens-mat-checkbox.$prefix, tokens: tokens-mat-checkbox.get-token-slots()),
+    (prefix: tokens-mdc-checkbox.$prefix, tokens: tokens-mdc-checkbox.get-token-slots()),
   );
 }
 

package/chips/_chips-theme.scss

@@ -101,6 +101,16 @@
   }
 }
 
+/// Outputs the CSS variable values for the given tokens.
+/// @param {Map} $tokens The token values to emit.
+@mixin overrides($tokens: ()) {
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mdc-chip.$prefix, tokens: tokens-mdc-chip.get-token-slots()),
+    (prefix: tokens-mat-chip.$prefix, tokens: tokens-mat-chip.get-token-slots()),
+  );
+}
+
 /// Outputs all (base, color, typography, and density) theme styles for the mat-chips.
 /// @param {Map} $theme The theme to generate styles for.
 /// @param {ArgList} Additional optional arguments (only supported for M3 themes):

package/core/_core-theme.scss

@@ -88,6 +88,23 @@
   }
 }
 
+@mixin overrides($tokens: ()) {
+  $app-tokens: tokens-mat-app.get-token-slots();
+  $ripple-tokens: tokens-mat-ripple.get-token-slots();
+  $option-tokens: tokens-mat-option.get-token-slots();
+  $full-pseudo-checkbox-tokens: tokens-mat-full-pseudo-checkbox.get-token-slots();
+  $minimal-pseudo-checkbox-tokens: tokens-mat-minimal-pseudo-checkbox.get-token-slots();
+
+  @include token-utils.batch-create-token-values(
+    $tokens,
+    (prefix: tokens-mat-app.$prefix, tokens: $app-tokens),
+    (prefix: tokens-mat-ripple.$prefix, tokens: $ripple-tokens),
+    (prefix: tokens-mat-option.$prefix, tokens: $option-tokens),
+    (prefix: tokens-mat-full-pseudo-checkbox.$prefix, tokens: $full-pseudo-checkbox-tokens),
+    (prefix: tokens-mat-minimal-pseudo-checkbox.$prefix, tokens: $minimal-pseudo-checkbox-tokens),
+  );
+}
+
 // Mixin that renders all of the core styles that depend on the theme.
 @mixin theme($theme, $options...) {
   // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that

package/core/m2/_index.scss

@@ -0,0 +1,52 @@
+// M2-specific theming APIs which are separated out into this file so they
+// can be renamed conditionally depending on whether we're in 1P or 3P.
+@forward './theming' show
+  define-light-theme,
+  define-dark-theme,
+  define-palette,
+  get-contrast-color-from-palette,
+  get-color-from-palette,
+  get-color-config,
+  get-typography-config,
+  get-density-config;
+
+@forward './palette' show
+  $red-palette,
+  $pink-palette,
+  $indigo-palette,
+  $purple-palette,
+  $deep-purple-palette,
+  $blue-palette,
+  $light-blue-palette,
+  $cyan-palette,
+  $teal-palette,
+  $green-palette,
+  $light-green-palette,
+  $lime-palette,
+  $yellow-palette,
+  $amber-palette,
+  $orange-palette,
+  $deep-orange-palette,
+  $brown-palette,
+  $grey-palette,
+  $gray-palette,
+  $blue-grey-palette,
+  $blue-gray-palette,
+  $light-theme-background-palette,
+  $dark-theme-background-palette,
+  $light-theme-foreground-palette,
+  $dark-theme-foreground-palette;
+
+@forward './typography' show
+  define-typography-level,
+  define-rem-typography-config,
+  define-typography-config,
+  define-legacy-typography-config;
+
+@forward './typography-utils' show
+  typography-level,
+  font-size,
+  line-height,
+  font-weight,
+  letter-spacing,
+  font-family;