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

package/_index.scss

@@ -20,7 +20,7 @@
 @forward 'core/tokens/system' show system-level-colors,
     system-level-typography, system-level-elevation, system-level-shape,
     system-level-motion, system-level-state, theme, theme-overrides, m2-theme;
-@forward 'core/tokens/classes' show utility-classes;
+@forward 'core/tokens/classes' show system-classes;
 
 // Private/Internal
 @forward './core/density/private/all-density' show all-component-densities;

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,143 +1,117 @@
-// Utility classes that can be used to style elements with the most commonly used tokens in
-// Material Design. Includes color, typography, elevation, and shape.
-// This API is experimental and may not release. Implemented for prototyping and testing.
-// Use caution depending on this.
-@mixin utility-classes() {
+// Utility classes that can be used to style elements with the most commonly used system tokens in
+// 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.
@@ -146,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);
   }
@@ -159,19 +132,69 @@
   }
 
   // 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
   // Material, this is used for the subscript text in a form field and the text in a paginator.
-  .mat-font-body-small {
+  .mat-font-body-sm {
     font: var(--mat-sys-body-small);
     letter-spacing: var(--mat-sys-body-small-tracking);
   }
@@ -179,7 +202,7 @@
   // Sets the font to the body medium typeface. Use for medium body text, this is the default
   // body font. In Angular Material, this is used for the text in a table row and the supporting
   // text in a dialog.
-  .mat-font-body-medium {
+  .mat-font-body-md {
     font: var(--mat-sys-body-medium);
     letter-spacing: var(--mat-sys-body-medium-tracking);
   }
@@ -187,54 +210,74 @@
   // Sets the font to the body large typeface. Use for large body text, such as an introductory
   // paragraph. In Angular Material, this is used for the text in a list item and the text in a
   // select trigger.
-  .mat-font-body-large {
+  .mat-font-body-lg {
     font: var(--mat-sys-body-large);
     letter-spacing: var(--mat-sys-body-large-tracking);
   }
 
   // Sets the font to the display small typeface. Use for small display text, such as a date.
-  .mat-font-display-small {
+  .mat-font-display-sm {
     font: var(--mat-sys-display-small);
     letter-spacing: var(--mat-sys-display-small-tracking);
   }
 
   // Sets the font to the display medium typeface. Use for medium display text, such as a hero
   // title.
-  .mat-font-display-medium {
+  .mat-font-display-md {
     font: var(--mat-sys-display-medium);
     letter-spacing: var(--mat-sys-display-medium-tracking);
   }
 
   // Sets the font to the display large typeface. Use for large display text, such as a hero title.
-  .mat-font-display-large {
+  .mat-font-display-lg {
     font: var(--mat-sys-display-large);
     letter-spacing: var(--mat-sys-display-large-tracking);
   }
 
   // Sets the font to the headline small typeface. Use for small headlines, such as a page title. In
   // Angular Material, this is used for the headline in a dialog.
-  .mat-font-headline-small {
+  .mat-font-headline-sm {
     font: var(--mat-sys-headline-small);
     letter-spacing: var(--mat-sys-headline-small-tracking);
   }
 
   // Sets the font to the headline medium typeface. Use for medium headlines, such as a section
   // title.
-  .mat-font-headline-medium {
+  .mat-font-headline-md {
     font: var(--mat-sys-headline-medium);
     letter-spacing: var(--mat-sys-headline-medium-tracking);
   }
 
   // Sets the font to the headline large typeface. Use for large headlines, such as a page title on
   // a large screen.
-  .mat-font-headline-large {
+  .mat-font-headline-lg {
     font: var(--mat-sys-headline-large);
     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-small {
+  .mat-font-title-sm {
     font: var(--mat-sys-title-small);
     letter-spacing: var(--mat-sys-title-small-tracking);
   }
@@ -242,7 +285,7 @@
   // Sets the font to the title medium typeface. Use for medium titles, such as a dialog title
   // or the primary text in a list item. In Angular Material, this is used for the subtitle
   // of a card and the header of an expansion panel.
-  .mat-font-title-medium {
+  .mat-font-title-md {
     font: var(--mat-sys-title-medium);
     letter-spacing: var(--mat-sys-title-medium-tracking);
   }
@@ -250,45 +293,46 @@
   // Sets the font to the title large typeface. Use for large titles, such as a page title on a
   // small screen. In Angular Material, this is used for the title of a card and the title of a
   // toolbar.
-  .mat-font-title-large {
+  .mat-font-title-lg {
     font: var(--mat-sys-title-large);
     letter-spacing: var(--mat-sys-title-large-tracking);
   }
 
 
   // ***********************************************************************************************
-  // 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-corner-extra-small {
+  .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-corner-small {
+  .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-corner-medium {
+  .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-corner-large {
+  .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-corner-extra-large {
+  .mat-corner-xl {
     border-radius: var(--mat-sys-corner-extra-large);
   }
 
@@ -300,116 +344,55 @@
 
 
   // ***********************************************************************************************
-  // Border
+  // Border - Applies a 1px solid border
   // ***********************************************************************************************
 
   // Adds an outline to an element. Use for components that need a visible boundary. In Angular
   // Material, this is used for the outline of an outlined button.
-  .mat-outline {
+  .mat-border {
     border: 1px solid var(--mat-sys-outline);
   }
 
   // Adds a less prominent outline to an element. Use for components that need a less obvious
   // boundary. In Angular Material, this is used for the outline of an outlined card and the color
   // of the divider
-  .mat-outline-variant {
+  .mat-border-subtle {
     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
   // elevation of an elevated card and the handle of a slider.
-  .mat-shadow-level-1 {
+  .mat-shadow-1 {
     box-shadow: var(--mat-sys-level1);
   }
 
   // Use to raise the appearance of a surface. In Angular Material, this is used for the
   // elevation of a menu and a select panel.
-  .mat-shadow-level-2 {
+  .mat-shadow-2 {
     box-shadow: var(--mat-sys-level2);
   }
 
   // Used to raise the appearance of a surface. In Angular Material, this is used for the elevation
   // of a floating action button.
-  .mat-shadow-level-3 {
+  .mat-shadow-3 {
     box-shadow: var(--mat-sys-level3);
   }
 
   // Used to raise the appearance of a surface. This is generally reserved for elevation changes
   // due to interaction like focus and hover. In Angular Material, this is used for the elevation
   // of a hovered floating action button.
-  .mat-shadow-level-4 {
+  .mat-shadow-4 {
     box-shadow: var(--mat-sys-level4);
   }
 
   // Used to greatly raise the appearance of a surface. This is generally reserved for elevation
   // changes due to interaction like focus and hover.
-  .mat-shadow-level-5 {
+  .mat-shadow-5 {
     box-shadow: var(--mat-sys-level5);
   }
 }

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 ();
+}