@angular/material 21.0.0-next.1 → 21.0.0-next.10

package/chips/_m3-chip.scss

@@ -49,11 +49,8 @@
       chip-selected-label-text-color: map.get($system, on-secondary-container),
       chip-selected-trailing-action-state-layer-color: map.get($system, on-secondary-container),
       chip-selected-trailing-icon-color: map.get($system, on-secondary-container),
-      // Parent chips will show focus/hover state as well so need stronger focus/hover styling here
-      chip-trailing-action-focus-state-layer-opacity:
-        calc(map.get($system, focus-state-layer-opacity) * 2),
-      chip-trailing-action-hover-state-layer-opacity:
-        calc(map.get($system, hover-state-layer-opacity) * 2),
+      chip-trailing-action-focus-state-layer-opacity: map.get($system, focus-state-layer-opacity),
+      chip-trailing-action-hover-state-layer-opacity: map.get($system, hover-state-layer-opacity),
       chip-trailing-action-state-layer-color: map.get($system, on-surface-variant),
       chip-with-icon-disabled-icon-color: map.get($system, on-surface),
       chip-with-icon-icon-color: map.get($system, on-surface-variant),

package/core/focus-indicators/_private.scss

@@ -86,6 +86,10 @@ $default-border-radius: 4px;
   $config: map.merge($default-config, $config);
 
   @include _customize-focus-indicators($config);
+
+  // Strong focus indicators currently need chip labels to have overflow visible.
+  // TODO(b/446709063) revisit the structure to find a way to remove this dependency.
+  @include _chip-label-overflow-visible();
 }
 
 @mixin strong-focus-indicators-color($theme-or-color) {
@@ -108,3 +112,15 @@ $default-border-radius: 4px;
     }
   }
 }
+
+@mixin _chip-label-overflow-visible {
+  .mat-mdc-standard-chip {
+    // MDC sets `overflow: hidden` on these elements in order to truncate the text. This conflicts
+    // with how we structure and style the strong focus indicators so we need to override it.
+    .mdc-evolution-chip__cell--primary,
+    .mdc-evolution-chip__action--primary,
+    .mat-mdc-chip-action-label {
+      overflow: visible;
+    }
+  }
+}

package/core/tokens/_classes.scss

@@ -1,141 +1,117 @@
 // Utility classes that can be used to style elements with the most commonly used system tokens in
-// Material Design. Includes color, typography, elevation, and shape.
+// Material Design. Includes color, typography, elevation, state, and shape.
 @mixin system-classes() {
 
   // ***********************************************************************************************
-  // Background
+  // Background - Applies background colors defined by Material Design.
+  // See https://m3.material.io/styles/color/roles for detailed guidance.
   // ***********************************************************************************************
 
-  // Styles an element with a primary color background and applies an accessible contrasting
-  // color for text and icons. Use for key components across the UI, such as buttons that
-  // have greater importance on the page. In Angular Material, this is used for the selected
-  // date in a datepicker, the handle of a slider, and the background of a checkbox.
+  // Styles an element with a primary color background. Use for key components across the UI, such
+  // as buttons that have greater importance on the page. In Angular Material, this is used for the
+  // selected date in a datepicker, the handle of a slider, and the background of a checkbox.
   .mat-bg-primary {
     background-color: var(--mat-sys-primary);
-    color: var(--mat-sys-on-primary);
   }
 
-  // Styles an element with a primary container color background and applies an accessible
-  // contrasting color for text and icons. Use for filling components that should stand out
-  // on a surface. In Angular Material, this is used for
-  // the container of a floating action button.
+  // Styles an element with a primary container color background. Use for filling components that
+  // should stand out on a surface. In Angular Material, this is used for the container of a
+  // floating action button.
   .mat-bg-primary-container {
     background-color: var(--mat-sys-primary-container);
-    color: var(--mat-sys-on-primary-container);
   }
 
-  // Styles an element with a secondary color background and applies an accessible contrasting
-  // color for text and icons. Use for less prominent components in the UI that have a different
-  // color scheme than the primary.
+  // Styles an element with a secondary color background. Use for less prominent components in the
+  // UI that have a different color scheme than the primary.
   .mat-bg-secondary {
     background-color: var(--mat-sys-secondary);
-    color: var(--mat-sys-on-secondary);
   }
 
-  // Styles an element with a secondary container color background and applies an accessible
-  // contrasting color for text and icons. Use for components that need less emphasis than
-  // secondary, such as filter chips. In Angular Material, this is used for selected items
-  // in a list and the container of a tonal button.
+  // Styles an element with a secondary container color background. Use for components that need
+  // less emphasis than secondary, such as filter chips. In Angular Material, this is used for
+  // selected items in a list and the container of a tonal button.
   .mat-bg-secondary-container {
     background-color: var(--mat-sys-secondary-container);
-    color: var(--mat-sys-on-secondary-container);
   }
 
-  // Styles an element with an error color background and applies an accessible contrasting
-  // color for text and icons. Use for indicating an error state, such as an invalid text field, or
-  // for the background of an important notification. In Angular Material, this is used for the
-  // background of a badge.
+  // Styles an element with an error color background. Use for indicating an error state, such as
+  // an invalid text field, or for the background of an important notification. In Angular
+  // Material, this is used for the background of a badge.
   .mat-bg-error {
     background-color: var(--mat-sys-error);
-    color: var(--mat-sys-on-error);
   }
 
-  // Styles an element with an error container color background and applies an accessible
-  // contrasting color for text and icons. Use for components that need less emphasis than
-  // error, such as a container for error text.
+  // Styles an element with an error container color background. Use for components that need less
+  // emphasis than error, such as a container for error text.
   .mat-bg-error-container {
     background-color: var(--mat-sys-error-container);
-    color: var(--mat-sys-on-error-container);
   }
 
-  // Styles an element with a surface color background and applies an accessible contrasting
-  // color for text and icons. Use for general surfaces of components. In Angular Material, this is
-  // used for the background of many components, like tables, dialogs, menus, and toolbars.
+  // Styles an element with a surface color background. Use for general surfaces of components. In
+  // Angular Material, this is used for the background of many components, like tables, dialogs,
+  // menus, and toolbars.
   .mat-bg-surface {
     background-color: var(--mat-sys-surface);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with a surface variant color background and applies an accessible
-  // contrasting color for text and icons. Use for surfaces that need to stand out from the
-  // main surface color. In Angular Material, this is used for the background of a filled
-  // form field and the track of a progress bar.
+  // Styles an element with a surface variant color background. Use for surfaces that need to stand
+  // out from the main surface color. In Angular Material, this is used for the background of a
+  // filled form field and the track of a progress bar.
   .mat-bg-surface-variant {
     background-color: var(--mat-sys-surface-variant);
-    color: var(--mat-sys-on-surface-variant);
   }
 
-  // Styles an element with the "highest" surface container color background and applies an
-  // accessible contrasting color for text and icons. Use for surfaces that need the most
-  // emphasis against the main surface color. In Angular Material, this is used for the
-  // background of a filled card.
+  // Styles an element with the "highest" surface container color background. Use for surfaces that
+  // need the most emphasis against the main surface color. In Angular Material, this is used for
+  // the background of a filled card.
   .mat-bg-surface-container-highest {
     background-color: var(--mat-sys-surface-container-highest);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with a "high" surface container color background and applies an accessible
-  // contrasting color for text and icons. Use for surfaces that need more emphasis against
-  // the main surface color. In Angular Material, this is used for the background of a datepicker.
+  // Styles an element with a "high" surface container color background. Use for surfaces that need
+  // more emphasis against the main surface color. In Angular Material, this is used for the
+  // background of a datepicker.
   .mat-bg-surface-container-high {
     background-color: var(--mat-sys-surface-container-high);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with a surface container color background and applies an accessible
-  // contrasting color for text and icons. Use for surfaces that need to stand out from the
-  // main surface color. In Angular Material, this is used for the background of a menu.
+  // Styles an element with a surface container color background. Use for surfaces that need to
+  // stand out from the main surface color. In Angular Material, this is used for the background
+  // of a menu.
   .mat-bg-surface-container {
     background-color: var(--mat-sys-surface-container);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with a "low" surface container color background and applies an accessible
-  // contrasting color for text and icons. Use for surfaces that need less emphasis against
-  // the main surface color. In Angular Material, this is used for the background of a bottom sheet.
+  // Styles an element with a "low" surface container color background. Use for surfaces that need
+  // less emphasis against the main surface color. In Angular Material, this is used for the
+  // background of a bottom sheet.
   .mat-bg-surface-container-low {
     background-color: var(--mat-sys-surface-container-low);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with the "lowest" surface container color background and applies an
-  // accessible contrasting color for text and icons. Use for surfaces that need the least
-  // emphasis against the main surface color.
+  // Styles an element with the "lowest" surface container color background. Use for surfaces that
+  // need the least emphasis against the main surface color.
   .mat-bg-surface-container-lowest {
     background-color: var(--mat-sys-surface-container-lowest);
-    color: var(--mat-sys-on-surface);
   }
 
-  // Styles an element with an inverse surface color background and applies an accessible
-  // contrasting color for text and icons. Use for making elements stand out against the
-  // default color scheme. Good for temporary notifications. In Angular Material, this is used for
-  // the background of a snackbar and a tooltip.
+  // Styles an element with an inverse surface color background. Use for making elements stand out
+  // against the default color scheme. Good for temporary notifications. In Angular Material, this
+  // is used for the background of a snackbar and a tooltip.
   .mat-bg-inverse-surface {
     background-color: var(--mat-sys-inverse-surface);
-    color: var(--mat-sys-inverse-on-surface);
   }
 
-  // Styles an element with a disabled color background and applies an accessible contrasting
-  // color for text and icons. Use for disabled components. In Angular Material, this is used
-  // for components generally filled with the primary color but are currently disabled.
+  // Styles an element with a disabled color background. Use for disabled components. In Angular
+  // Material, this is used for components generally filled with the primary color but are
+  // currently disabled.
   .mat-bg-disabled {
-    color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);
     background-color: color-mix(in srgb, var(--mat-sys-on-surface) 12%, transparent);
   }
 
 
   // ***********************************************************************************************
-  // Text
+  // Text - Apply colors to text
   // ***********************************************************************************************
 
   // Styles the text of an element with the primary color. Use for text that needs to stand out.
@@ -144,8 +120,7 @@
     color: var(--mat-sys-primary);
   }
 
-  // Styles the text of an element with the secondary color. Use for text that needs less emphasis
-  // than primary text.
+  // Styles the text of an element with the secondary color. Use for text that needs to stand out.
   .mat-text-secondary {
     color: var(--mat-sys-secondary);
   }
@@ -157,14 +132,64 @@
   }
 
   // Styles the text of an element with the disabled color. Use for text in disabled components.
-  // In Angular Material this is used to show text is disabled, generally on a "surface" background.
   .mat-text-disabled {
     color: color-mix(in srgb, var(--mat-sys-on-surface) 38%, transparent);
   }
 
+  // Styles the text of an element with the on-surface-variant color. Use for text that should have
+  // a lower emphasis than the surrounding text. This can include subheading, captions, and hint
+  // text.
+  .mat-text-on-surface-variant {
+    color: var(--mat-sys-on-surface-variant);
+  }
+
+  // Styles the text of an element with a color that contrasts well against a primary background.
+  .mat-text-on-primary {
+    color: var(--mat-sys-on-primary);
+  }
+
+  // Styles the text of an element with a color that contrasts well against a primary-container
+  // background.
+  .mat-text-on-primary-container {
+    color: var(--mat-sys-on-primary-container);
+  }
+
+  // Styles the text of an element with a color that contrasts well against a secondary background.
+  .mat-text-on-secondary {
+    color: var(--mat-sys-on-secondary);
+  }
+
+  // Styles the text of an element with a color that contrasts well against a secondary-container
+  // background.
+  .mat-text-on-secondary-container {
+    color: var(--mat-sys-on-secondary-container);
+  }
+
+  // Styles the text of an element with a color that contrasts well against an error background.
+  .mat-text-on-error {
+    color: var(--mat-sys-on-error);
+  }
+
+  // Styles the text of an element with a color that contrasts well against an error-container
+  // background.
+  .mat-text-on-error-container {
+    color: var(--mat-sys-on-error-container);
+  }
+
+  // Styles the text of an element with a color that contrasts well against a surface background.
+  .mat-text-on-surface {
+    color: var(--mat-sys-on-surface);
+  }
+
+  // Styles the text of an element with a color that contrasts well against an inverse-surface
+  // background.
+  .mat-text-inverse-on-surface {
+    color: var(--mat-sys-inverse-on-surface);
+  }
 
   // ***********************************************************************************************
-  // Font
+  // Font - Apply typography styles
+  // See https://m3.material.io/styles/typography/applying-type for guidance.
   // ***********************************************************************************************
 
   // Sets the font to the body small typeface. Use for small body text, such as captions. In Angular
@@ -230,6 +255,26 @@
     letter-spacing: var(--mat-sys-headline-large-tracking);
   }
 
+  // Sets the font to the label small typeface. Use for small labels, such as text in a badge.
+  .mat-font-label-sm {
+    font: var(--mat-sys-label-small);
+    letter-spacing: var(--mat-sys-label-small-tracking);
+  }
+
+  // Sets the font to the label medium typeface. Use for medium labels. In Angular Material, this
+  // is used for the slider label.
+  .mat-font-label-md {
+    font: var(--mat-sys-label-medium);
+    letter-spacing: var(--mat-sys-label-medium-tracking);
+  }
+
+  // Sets the font to the label large typeface. Use for large labels. In Angular Material, this is
+  // used for buttons, chips, and menu labels.
+  .mat-font-label-lg {
+    font: var(--mat-sys-label-large);
+    letter-spacing: var(--mat-sys-label-large-tracking);
+  }
+
   // Sets the font to the title small typeface. Use for small titles, such as a card title. In
   // Angular Material, this is used for the header of a table and the label of an option group.
   .mat-font-title-sm {
@@ -255,50 +300,51 @@
 
 
   // ***********************************************************************************************
-  // Corner
+  // Corner - Apply varying amounts of a border radius
+  // See https://m3.material.io/styles/shape/corner-radius-scale for guidance.
   // ***********************************************************************************************
 
   // Sets the border radius to extra small. Use for components that need a small amount of rounding,
   // such as a chip. In Angular Material, this is used for the shape of a snackbar and a tooltip.
-  .mat-rounded-extra-sm {
+  .mat-corner-xs {
     border-radius: var(--mat-sys-corner-extra-small);
   }
 
   // Sets the border radius to small. Use for components that need a small amount of rounding, such
   // as a text field.
-  .mat-rounded-sm {
+  .mat-corner-sm {
     border-radius: var(--mat-sys-corner-small);
   }
 
   // Sets the border radius to medium. Use for components that need a medium amount of rounding,
   // such as a button. In Angular Material, this is used for the shape of a card.
-  .mat-rounded-md {
+  .mat-corner-md {
     border-radius: var(--mat-sys-corner-medium);
   }
 
   // Sets the border radius to large. Use for components that need a large amount of rounding, such
   // as a card. In Angular Material, this is used for the shape of a floating action button and a
   // datepicker.
-  .mat-rounded-lg {
+  .mat-corner-lg {
     border-radius: var(--mat-sys-corner-large);
   }
 
   // Sets the border radius to extra large. Use for components that need a large amount of
   // rounding. In Angular Material, this is used for the shape of a button toggle and the shape of
   // a dialog.
-  .mat-rounded-xl {
+  .mat-corner-xl {
     border-radius: var(--mat-sys-corner-extra-large);
   }
 
   // Sets the border radius to full. Use for components that are circular, such as a user avatar.
   // In Angular Material, this is used for the shape of a badge and the shape of a button.
-  .mat-rounded-full {
+  .mat-corner-full {
     border-radius: var(--mat-sys-corner-full);
   }
 
 
   // ***********************************************************************************************
-  // Border
+  // Border - Applies a 1px solid border
   // ***********************************************************************************************
 
   // Adds an outline to an element. Use for components that need a visible boundary. In Angular
@@ -314,70 +360,9 @@
     border: 1px solid var(--mat-sys-outline-variant);
   }
 
-
-  // ***********************************************************************************************
-  // State
-  // ***********************************************************************************************
-
-  // Adds hover, focus, and active states to an element by applying varying shades of the surface
-  // color. Use for interactive components that are not based on a primary color.
-  .mat-stateful {
-    &:hover {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-on-surface) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-
-    &:focus {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-on-surface) calc(var(--mat-sys-focus-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-
-    &:active {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-on-surface) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-  }
-
-  // Adds hover, focus, and active states to an element by applying varying shades of the primary
-  // color. Use for interactive components that are not based on a primary color.
-  .mat-stateful-primary {
-    &:hover {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-primary) calc(var(--mat-sys-hover-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-
-    &:focus {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-primary) calc(var(--mat-sys-focus-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-
-    &:active {
-      background: color-mix(
-        in srgb,
-        var(--mat-sys-primary) calc(var(--mat-sys-pressed-state-layer-opacity) * 100%),
-        transparent
-      );
-    }
-  }
-
-
   // ***********************************************************************************************
-  // Elevation
+  // Shadow - Applies elevation levels through box-shadow
+  // See https://m3.material.io/styles/elevation/applying-elevation for guidance.
   // ***********************************************************************************************
 
   // Use to slightly raise the appearance of a surface. In Angular Material, this is used for the

package/core/tokens/m2/_md-sys-color-internal.scss

@@ -0,0 +1,11 @@
+// Dark system color values that are google3-internal and diverge from the
+// external Material Design spec.
+@function values-dark($palettes) {
+  @return ();
+}
+
+// Light system color values that are google3-internal and diverge from the
+// external Material Design spec.
+@function values-light($palettes) {
+  @return ();
+}

package/core/tokens/m2/_md-sys-color.scss

@@ -1,8 +1,9 @@
-@use 'sass:map';
 @use '../../m2/palette';
+@use './md-sys-color-internal';
+@use 'sass:map';
 
 @function md-sys-color-values-dark($palettes) {
-  @return (
+  $values: (
     primary: map.get($palettes, primary, default),
     on-primary: map.get($palettes, primary, default-contrast),
     inverse-primary: map.get($palettes, primary, 600),
@@ -22,24 +23,24 @@
     inverse-on-surface: rgba(black, 0.87),
     outline: rgba(white, 0.12),
     outline-variant: rgba(white, 0.38),
-    error-container: map.get($palettes, warn, default),
+    error-container: map.get($palettes, warn, 900),
     on-background: white,
-    on-error-container: map.get($palettes, warn, default-contrast),
-    on-primary-container: map.get($palettes, primary, default-contrast),
+    on-error-container: map.get($palettes, warn, 50),
+    on-primary-container: map.get($palettes, primary, 50),
     on-primary-fixed: map.get($palettes, primary, default-contrast),
     on-primary-fixed-variant: map.get($palettes, primary, default-contrast),
-    on-secondary-container: map.get($palettes, accent, default-contrast),
+    on-secondary-container: map.get($palettes, accent, 50),
     on-secondary-fixed: map.get($palettes, accent, default-contrast),
     on-secondary-fixed-variant: map.get($palettes, accent, default-contrast),
     on-tertiary: map.get($palettes, accent, default-contrast),
-    on-tertiary-container: map.get($palettes, accent, default-contrast),
+    on-tertiary-container: map.get($palettes, accent, 50),
     on-tertiary-fixed: map.get($palettes, accent, default-contrast),
     on-tertiary-fixed-variant: map.get($palettes, accent, default-contrast),
-    primary-container: map.get($palettes, primary, default),
+    primary-container: map.get($palettes, primary, 900),
     primary-fixed: map.get($palettes, primary, default),
     primary-fixed-dim: map.get($palettes, primary, default),
     scrim: black,
-    secondary-container: map.get($palettes, accent, default),
+    secondary-container: map.get($palettes, accent, 900),
     secondary-fixed: map.get($palettes, accent, default),
     secondary-fixed-dim: map.get($palettes, accent, default),
     surface-bright: map.get(palette.$grey-palette, 800),
@@ -51,14 +52,18 @@
     surface-dim: map.get(palette.$grey-palette, 800),
     surface-tint: map.get(palette.$grey-palette, 800),
     tertiary: map.get($palettes, accent, default),
-    tertiary-container: map.get($palettes, accent, default),
+    tertiary-container: map.get($palettes, accent, 900),
     tertiary-fixed: map.get($palettes, accent, default),
     tertiary-fixed-dim: map.get($palettes, accent, default),
   );
+
+  $values: map.merge($values, md-sys-color-internal.values-dark($palettes));
+
+  @return $values;
 }
 
 @function md-sys-color-values-light($palettes) {
-  @return (
+  $values: (
     primary: map.get($palettes, primary, default),
     on-primary: map.get($palettes, primary, default-contrast),
     inverse-primary: map.get($palettes, primary, 300),
@@ -78,24 +83,24 @@
     inverse-on-surface: white,
     outline: rgba(black, 0.12),
     outline-variant: rgba(black, 0.38),
-    error-container: map.get($palettes, warn, default),
+    error-container: map.get($palettes, warn, 50),
     on-background: rgba(black, 0.87),
-    on-error-container: map.get($palettes, warn, default-contrast),
-    on-primary-container: map.get($palettes, primary, default-contrast),
+    on-error-container: map.get($palettes, warn, 700),
+    on-primary-container: map.get($palettes, primary, 700),
     on-primary-fixed: map.get($palettes, primary, default-contrast),
     on-primary-fixed-variant: map.get($palettes, primary, default-contrast),
-    on-secondary-container: map.get($palettes, accent, default-contrast),
+    on-secondary-container: map.get($palettes, accent, 700),
     on-secondary-fixed: map.get($palettes, accent, default-contrast),
     on-secondary-fixed-variant: map.get($palettes, accent, default-contrast),
     on-tertiary: map.get($palettes, accent, default-contrast),
-    on-tertiary-container: map.get($palettes, accent, default-contrast),
+    on-tertiary-container: map.get($palettes, accent, 700),
     on-tertiary-fixed: map.get($palettes, accent, default-contrast),
     on-tertiary-fixed-variant: map.get($palettes, accent, default-contrast),
-    primary-container: map.get($palettes, primary, default),
+    primary-container: map.get($palettes, primary, 50),
     primary-fixed: map.get($palettes, primary, default),
     primary-fixed-dim: map.get($palettes, primary, default),
     scrim: black,
-    secondary-container: map.get($palettes, accent, default),
+    secondary-container: map.get($palettes, accent, 50),
     secondary-fixed: map.get($palettes, accent, default),
     secondary-fixed-dim: map.get($palettes, accent, default),
     surface-bright: white,
@@ -107,8 +112,12 @@
     surface-dim: white,
     surface-tint: white,
     tertiary: map.get($palettes, accent, default),
-    tertiary-container: map.get($palettes, accent, default),
+    tertiary-container: map.get($palettes, accent, 50),
     tertiary-fixed: map.get($palettes, accent, default),
     tertiary-fixed-dim: map.get($palettes, accent, default),
   );
+
+  $values: map.merge($values, md-sys-color-internal.values-light($palettes));
+
+  @return $values;
 }

package/core/tokens/m3/_md-sys-color-internal.scss

@@ -0,0 +1,11 @@
+// Dark system color values that are internal-only and diverge from the
+// external Material Design spec.
+@function values-dark($palettes) {
+  @return ();
+}
+
+// Light system color values that are internal-only and diverge from the
+// external Material Design spec.
+@function values-light($palettes) {
+  @return ();
+}