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

package/core/theming/_palettes.scss

@@ -1,33 +1,4 @@
-@use 'sass:color';
 @use 'sass:map';
-@use 'sass:math';
-
-/// Estimate a hue using the given previous and next hues.
-@function _estimate-hue($hues, $hue, $prev-hue, $next-hue) {
-  $weight: math.div($next-hue - $hue, $next-hue - $prev-hue) * 100%;
-  @return color.mix(map.get($hues, $prev-hue), map.get($hues, $next-hue), $weight);
-}
-
-// TODO(mmalerba): Remove this and add correct values for these hues.
-/// The Material Design spec references some neutral hues that are not generated by
-/// https://m3.material.io/theme-builder. For now we use this function to estimate the missing hues
-/// by blending the nearest hues that are generated.
-/// Note: when updating, the corresponding logic in the theme generation schematic should be
-/// updated as well. See `src/material/schematics/ng-generate/m3-theme/index.ts#patchMissingHues`
-@function _patch-missing-hues($palette) {
-  $neutral: map.get($palette, neutral);
-  $palette: map.set($palette, neutral, 4, _estimate-hue($neutral, 4, 0, 10));
-  $palette: map.set($palette, neutral, 6, _estimate-hue($neutral, 6, 0, 10));
-  $palette: map.set($palette, neutral, 12, _estimate-hue($neutral, 12, 10, 20));
-  $palette: map.set($palette, neutral, 17, _estimate-hue($neutral, 17, 10, 20));
-  $palette: map.set($palette, neutral, 22, _estimate-hue($neutral, 22, 20, 25));
-  $palette: map.set($palette, neutral, 24, _estimate-hue($neutral, 24, 20, 25));
-  $palette: map.set($palette, neutral, 87, _estimate-hue($neutral, 87, 80, 90));
-  $palette: map.set($palette, neutral, 92, _estimate-hue($neutral, 92, 90, 95));
-  $palette: map.set($palette, neutral, 94, _estimate-hue($neutral, 94, 90, 95));
-  $palette: map.set($palette, neutral, 96, _estimate-hue($neutral, 96, 95, 98));
-  @return $palette;
-}
 
 /// Adds the error colors to the given palette.
 @function _patch-error-palette($palette) {
@@ -56,12 +27,8 @@
   );
 }
 
-@function _apply-patches($palette) {
-  @return _patch-missing-hues(_patch-error-palette($palette));
-}
-
 /// Red color palette to be used as primary or tertiary palette.
-$red-palette: _apply-patches((
+$red-palette: _patch-error-palette((
   0: #000000,
   10: #410000,
   20: #690100,
@@ -113,6 +80,16 @@ $red-palette: _apply-patches((
     98: #fff8f6,
     99: #fffbff,
     100: #ffffff,
+    4: #130d0c,
+    6: #181211,
+    12: #251e1d,
+    17: #302828,
+    22: #3b3332,
+    24: #3f3737,
+    87: #e4d7d6,
+    92: #f3e5e4,
+    94: #f9ebe9,
+    96: #fef1ef,
   ),
   neutral-variant: (
     0: #000000,
@@ -135,7 +112,7 @@ $red-palette: _apply-patches((
 ));
 
 /// Green color palette to be used as primary or tertiary palette.
-$green-palette: _apply-patches((
+$green-palette: _patch-error-palette((
   0: #000000,
   10: #002200,
   20: #013a00,
@@ -187,6 +164,16 @@ $green-palette: _apply-patches((
     98: #f9faf3,
     99: #fcfdf6,
     100: #ffffff,
+    4: #0c0f0b,
+    6: #121410,
+    12: #1e201c,
+    17: #282b26,
+    22: #333531,
+    24: #383a35,
+    87: #dadbd3,
+    92: #e8e9e1,
+    94: #eeeee7,
+    96: #f3f4ed,
   ),
   neutral-variant: (
     0: #000000,
@@ -209,7 +196,7 @@ $green-palette: _apply-patches((
 ));
 
 /// Blue color palette to be used as primary or tertiary palette.
-$blue-palette: _apply-patches((
+$blue-palette: _patch-error-palette((
   0: #000000,
   10: #00006e,
   20: #0001ac,
@@ -261,6 +248,16 @@ $blue-palette: _apply-patches((
     98: #fcf8fd,
     99: #fffbff,
     100: #ffffff,
+    4: #0e0e11,
+    6: #131316,
+    12: #201f22,
+    17: #2a292d,
+    22: #353438,
+    24: #3a393c,
+    87: #dcd9dd,
+    92: #ebe7eb,
+    94: #f0edf1,
+    96: #f6f2f7,
   ),
   neutral-variant: (
     0: #000000,
@@ -283,7 +280,7 @@ $blue-palette: _apply-patches((
 ));
 
 /// Yellow color palette to be used as primary or tertiary palette.
-$yellow-palette: _apply-patches((
+$yellow-palette: _patch-error-palette((
   0: #000000,
   10: #1d1d00,
   20: #323200,
@@ -335,6 +332,16 @@ $yellow-palette: _apply-patches((
     98: #fdf9f0,
     99: #fffbff,
     100: #ffffff,
+    4: #0f0e0a,
+    6: #14140f,
+    12: #20201b,
+    17: #2b2a25,
+    22: #36352f,
+    24: #3a3933,
+    87: #dddad1,
+    92: #ece8df,
+    94: #f1ede5,
+    96: #f7f3ea,
   ),
   neutral-variant: (
     0: #000000,
@@ -357,7 +364,7 @@ $yellow-palette: _apply-patches((
 ));
 
 /// Cyan color palette to be used as primary or tertiary palette.
-$cyan-palette: _apply-patches((
+$cyan-palette: _patch-error-palette((
   0: #000000,
   10: #002020,
   20: #003737,
@@ -409,6 +416,16 @@ $cyan-palette: _apply-patches((
     98: #f7faf9,
     99: #fafdfc,
     100: #ffffff,
+    4: #0b0f0e,
+    6: #101414,
+    12: #1c2020,
+    17: #272b2a,
+    22: #313635,
+    24: #363a39,
+    87: #d7dbd9,
+    92: #e6e9e7,
+    94: #ebefed,
+    96: #f1f4f3,
   ),
   neutral-variant: (
     0: #000000,
@@ -431,7 +448,7 @@ $cyan-palette: _apply-patches((
 ));
 
 /// Magenta color palette to be used as primary or tertiary palette.
-$magenta-palette: _apply-patches((
+$magenta-palette: _patch-error-palette((
   0: #000000,
   10: #380038,
   20: #5b005b,
@@ -483,6 +500,16 @@ $magenta-palette: _apply-patches((
     98: #fff7f9,
     99: #fffbff,
     100: #ffffff,
+    4: #110d10,
+    6: #161215,
+    12: #231e22,
+    17: #2d292c,
+    22: #383337,
+    24: #3d383b,
+    87: #e1d7dc,
+    92: #efe6ea,
+    94: #f5ebf0,
+    96: #fbf1f5,
   ),
   neutral-variant: (
     0: #000000,
@@ -505,7 +532,7 @@ $magenta-palette: _apply-patches((
 ));
 
 /// Orange color palette to be used as primary or tertiary palette.
-$orange-palette: _apply-patches((
+$orange-palette: _patch-error-palette((
   0: #000000,
   10: #311300,
   20: #502400,
@@ -557,6 +584,16 @@ $orange-palette: _apply-patches((
     98: #fff8f5,
     99: #fffbff,
     100: #ffffff,
+    4: #120d0b,
+    6: #181210,
+    12: #241e1b,
+    17: #2f2926,
+    22: #3a3330,
+    24: #3f3834,
+    87: #e3d8d3,
+    92: #f2e6e1,
+    94: #f8ebe6,
+    96: #fef1ec,
   ),
   neutral-variant: (
     0: #000000,
@@ -579,7 +616,7 @@ $orange-palette: _apply-patches((
 ));
 
 /// Chartreuse color palette to be used as primary or tertiary palette.
-$chartreuse-palette: _apply-patches((
+$chartreuse-palette: _patch-error-palette((
   0: #000000,
   10: #0b2000,
   20: #173800,
@@ -631,6 +668,16 @@ $chartreuse-palette: _apply-patches((
     98: #fafaf2,
     99: #fdfdf5,
     100: #ffffff,
+    4: #0c0f0b,
+    6: #121410,
+    12: #1e201c,
+    17: #282b26,
+    22: #333531,
+    24: #383a35,
+    87: #dadbd3,
+    92: #e8e9e1,
+    94: #eeeee7,
+    96: #f3f4ed,
   ),
   neutral-variant: (
     0: #000000,
@@ -653,7 +700,7 @@ $chartreuse-palette: _apply-patches((
 ));
 
 /// Spring Green color palette to be used as primary or tertiary palette.
-$spring-green-palette: _apply-patches((
+$spring-green-palette: _patch-error-palette((
   0: #000000,
   10: #00210b,
   20: #003917,
@@ -705,6 +752,16 @@ $spring-green-palette: _apply-patches((
     98: #f9faf4,
     99: #fcfdf7,
     100: #ffffff,
+    4: #0c0f0c,
+    6: #111411,
+    12: #1d201d,
+    17: #282b27,
+    22: #323632,
+    24: #373a36,
+    87: #d9dbd5,
+    92: #e7e9e3,
+    94: #edefe8,
+    96: #f2f4ee,
   ),
   neutral-variant: (
     0: #000000,
@@ -727,7 +784,7 @@ $spring-green-palette: _apply-patches((
 ));
 
 /// Azure color palette to be used as primary or tertiary palette.
-$azure-palette: _apply-patches((
+$azure-palette: _patch-error-palette((
   0: #000000,
   10: #001b3f,
   20: #002f65,
@@ -779,6 +836,16 @@ $azure-palette: _apply-patches((
     98: #faf9fd,
     99: #fdfbff,
     100: #ffffff,
+    4: #0d0e11,
+    6: #121316,
+    12: #1f2022,
+    17: #292a2c,
+    22: #343537,
+    24: #38393c,
+    87: #dbd9dd,
+    92: #e9e7eb,
+    94: #efedf0,
+    96: #f4f3f6,
   ),
   neutral-variant: (
     0: #000000,
@@ -801,7 +868,7 @@ $azure-palette: _apply-patches((
 ));
 
 /// Violet color palette to be used as primary or tertiary palette.
-$violet-palette: _apply-patches((
+$violet-palette: _patch-error-palette((
   0: #000000,
   10: #270057,
   20: #42008a,
@@ -853,6 +920,16 @@ $violet-palette: _apply-patches((
     98: #fef8fc,
     99: #fffbff,
     100: #ffffff,
+    4: #0f0d11,
+    6: #151316,
+    12: #211f22,
+    17: #2b292d,
+    22: #363437,
+    24: #3b383c,
+    87: #ded8dd,
+    92: #ede6eb,
+    94: #f2ecf1,
+    96: #f8f2f6,
   ),
   neutral-variant: (
     0: #000000,
@@ -875,7 +952,7 @@ $violet-palette: _apply-patches((
 ));
 
 /// Rose color palette to be used as primary or tertiary palette.
-$rose-palette: _apply-patches((
+$rose-palette: _patch-error-palette((
   0: #000000,
   10: #3f001b,
   20: #65002f,
@@ -927,6 +1004,16 @@ $rose-palette: _apply-patches((
     98: #fff8f8,
     99: #fffbff,
     100: #ffffff,
+    4: #120d0e,
+    6: #171213,
+    12: #241e1f,
+    17: #2f2829,
+    22: #3a3334,
+    24: #3e3738,
+    87: #e3d7d8,
+    92: #f1e5e6,
+    94: #f7ebec,
+    96: #fdf1f2,
   ),
   neutral-variant: (
     0: #000000,

package/core/tokens/_density.scss

@@ -138,6 +138,7 @@ $_density-tokens: (
   (mat, slider): (),
   (mat, snack-bar): (),
   (mat, sort): (),
+  (mat, timepicker): (),
   (mat, standard-button-toggle): (
     height: (40px, 40px, 40px, 36px, 24px),
   ),

package/core/tokens/_m3-system.scss

@@ -1,26 +1,109 @@
 @use '../style/elevation';
 @use '../style/sass-utils';
-@use './m3-tokens';
+@use '../theming/config-validation';
+@use '../theming/definition';
 @use './m3/definitions';
 @use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+@use './m3-tokens';
+
+/// Emits necessary CSS variables for Material's system level values for the values defined in the
+/// config map. The config map can have values color, typography, and/or density.
+///
+/// If the config map's color value is an Angular Material color palette, it will be used as the
+/// primary and tertiary colors with a `color-scheme` theme type. Otherwise if the color value is a
+/// map, it must have a `primary` value containing an Angular Material color palette, and
+/// optionally a different `tertiary` palette (defaults to primary palette) and `theme-type` that
+/// is either `light`, `dark`, or 'color-scheme` (defaults to `color-scheme`). Color variable
+/// definitions will not be emitted if there are no color values in the config.
+///
+/// If the config map's typography value is a font family string, it will be used as the
+/// plain and brand font family with default bold, medium, and regular weights of 700, 500, and 400,
+/// respectfully. Otherwise if the typography value is a map, it must have a `plain-family` font
+/// family value, and optionally a different `brand-family` font family (defaults to the plain
+/// value) and weights for `bold-weight` (default: 700), `bold-weight` (default: 500), and
+/// `bold-weight` (default: 400). Typography variable definitions will not be emitted if there are
+/// no typography values in the config.
+///
+/// If the config map's density value is a number, it will be used as the density scale. Otherwise
+/// if the density value is a map, it must have a `scale` value. Density variable definitions will
+/// not be emitted if there are no density values in the config.
+///
+/// The application variables emitted use the namespace prefix "--mat-sys".
+/// e.g. --mat-sys-surface: #E5E5E5
+///
+/// @param {Map} $config The color configuration with optional keys color, typography, or density.
+@mixin theme($config, $overrides: ()) {
+  $color: map.get($config, color);
+  $color-config: null;
+  @if ($color) {
+    // validate-palette returns null if it is a valid M3 palette
+    $is-palette: config-validation.validate-palette($color) == null;
+
+    // Default to "color-scheme" theme type if the config's color does not provide one.
+    @if (not $is-palette and not map.has-key($color, theme-type)) {
+      $color: map.set($color, theme-type, color-scheme);
+    }
+
+    $color-config: if($is-palette,
+            definition.define-colors((primary: $color, theme-type: color-scheme)),
+            definition.define-colors($color));
+    @include system-level-colors($color-config, $overrides, definition.$system-fallback-prefix);
+    @include system-level-elevation($color-config, $overrides, definition.$system-fallback-prefix);
+  }
+
+  $typography: map.get($config, typography);
+  $typography-config: null;
+  @if ($typography) {
+    $typography-config: if(meta.type-of($typography) == 'map',
+      definition.define-typography($typography),
+      definition.define-typography((plain-family: $typography)));
+    @include system-level-typography(
+        $typography-config, $overrides, definition.$system-fallback-prefix);
+  }
 
-// Prefix used for component token fallback variables, e.g.
-// `color: var(--mdc-text-button-label-text-color, var(--mat-app-primary));`
-$_system-fallback-prefix: mat-app;
-
-// Default system level prefix to use when directly calling the `system-level-*` mixins
-$_system-level-prefix: sys;
-
-// Emits CSS variables for Material's system level values. Uses the
-// namespace prefix in $_system-fallback-prefix.
-// e.g. --mat-app-surface: #E5E5E5
-@mixin theme($theme, $overrides: ()) {
-  @include system-level-colors($theme, $overrides, $_system-fallback-prefix);
-  @include system-level-typography($theme, $overrides, $_system-fallback-prefix);
-  @include system-level-elevation($theme, $overrides, $_system-fallback-prefix);
-  @include system-level-shape($theme, $overrides, $_system-fallback-prefix);
-  @include system-level-motion($theme, $overrides, $_system-fallback-prefix);
-  @include system-level-state($theme, $overrides, $_system-fallback-prefix);
+  $density: map.get($config, density);
+  $density-config: null;
+  @if ($density) {
+    $density-config: if(meta.type-of($density) == 'map',
+      definition.define-density($density),
+      definition.define-density((scale: $density)));
+    $scale: map.get($density-config, _mat-theming-internals-do-not-access, density-scale);
+    @if ($scale != 0) {
+      $all-tokens: m3-tokens.generate-density-tokens($scale);
+      @each $component-tokens in $all-tokens {
+        $namespace: list.nth($component-tokens, 1);
+        @each $tokens in list.nth($component-tokens, 2) {
+          --#{list.nth($namespace, 1)}-#{list.nth($namespace, 2)}-#{
+              list.nth($tokens, 1)}: #{list.nth($tokens, 2)};
+        }
+      }
+    }
+  }
+
+  @include system-level-shape($overrides: $overrides, $prefix: definition.$system-fallback-prefix);
+  @include system-level-motion($overrides:$overrides, $prefix: definition.$system-fallback-prefix);
+  @include system-level-state($overrides: $overrides, $prefix: definition.$system-fallback-prefix);
+}
+
+/// Emits the system-level CSS variables for each of the provided override values. E.g. to
+/// change the primary color to red, use `mat.theme-overrides((primary: red));`
+@mixin theme-overrides($overrides, $prefix: definition.$system-fallback-prefix) {
+  $sys-names: map-merge-all(
+      definitions.md-sys-color-values-light(),
+      definitions.md-sys-typescale-values(),
+      definitions.md-sys-elevation-values(),
+      definitions.md-sys-shape-values(),
+      definitions.md-sys-state-values());
+
+  & {
+    @each $name, $value in $overrides {
+      @if (map.has-key($sys-names, $name)) {
+        --#{$prefix}-#{$name}: #{map.get($overrides, $name)};
+      }
+    }
+  }
 }
 
 @mixin system-level-colors($theme, $overrides: (), $prefix: null) {
@@ -39,16 +122,21 @@ $_system-level-prefix: sys;
 
   @if (not $prefix) {
     $prefix: map.get($theme, _mat-theming-internals-do-not-access,
-        color-system-variables-prefix) or $_system-level-prefix;
+        color-system-variables-prefix) or definition.$system-level-prefix;
   }
 
   $ref: (
     md-ref-palette: m3-tokens.generate-ref-palette-tokens($primary, $tertiary, $error)
   );
 
-  $sys-colors: if($type == dark,
-    definitions.md-sys-color-values-dark($ref),
-    definitions.md-sys-color-values-light($ref));
+  $sys-colors: _generate-sys-colors($ref, $type);
+
+  // Manually insert a subset of palette values that are used directly by components
+  // instead of system variables.
+  $sys-colors: map.set($sys-colors,
+    'neutral-variant20', map.get($ref, md-ref-palette, neutral-variant20));
+  $sys-colors: map.set($sys-colors,
+    'neutral10', map.get($ref, md-ref-palette, neutral10));
 
   & {
     @each $name, $value in $sys-colors {
@@ -57,6 +145,30 @@ $_system-level-prefix: sys;
   }
 }
 
+@function _generate-sys-colors($ref, $type) {
+  $light-sys-colors: definitions.md-sys-color-values-light($ref);
+  @if ($type == light) {
+    @return $light-sys-colors;
+  }
+
+  $dark-sys-colors: definitions.md-sys-color-values-dark($ref);
+  @if ($type == dark) {
+    @return $dark-sys-colors;
+  }
+
+  @if ($type == color-scheme) {
+    $light-dark-sys-colors: ();
+    @each $name, $light-value in $light-sys-colors {
+      $dark-value: map.get($dark-sys-colors, $name);
+      $light-dark-sys-colors:
+          map.set($light-dark-sys-colors, $name, light-dark($light-value, $dark-value));
+    }
+    @return $light-dark-sys-colors;
+  }
+
+  @error 'Unknown theme-type provided: #{$type}';
+}
+
 @mixin system-level-typography($theme, $overrides: (), $prefix: null) {
   $font-definition: map.get($theme, _mat-theming-internals-do-not-access, font-definition);
   $brand: map.get($font-definition, brand);
@@ -70,7 +182,7 @@ $_system-level-prefix: sys;
 
   @if (not $prefix) {
     $prefix: map.get($theme, _mat-theming-internals-do-not-access,
-        typography-system-variables-prefix) or $_system-level-prefix;
+        typography-system-variables-prefix) or definition.$system-level-prefix;
   }
 
   & {
@@ -80,23 +192,20 @@ $_system-level-prefix: sys;
   }
 }
 
-@mixin system-level-elevation($theme, $overrides: (), $prefix: $_system-level-prefix) {
+@mixin system-level-elevation($theme, $overrides: (), $prefix: definition.$system-level-prefix) {
   $shadow-color: map.get(
       $theme, _mat-theming-internals-do-not-access, color-tokens, (mdc, theme), shadow);
 
-  @for $level from 0 through 24 {
-    $value: elevation.get-box-shadow($level, $shadow-color);
-    --#{$prefix}-elevation-shadow-level-#{$level}: #{$value};
-  }
-
   @each $name, $value in definitions.md-sys-elevation-values() {
     $level: map.get($overrides, $name) or $value;
     $value: elevation.get-box-shadow($level, $shadow-color);
-    --#{$prefix}-#{$name}: #{$value};
+    & {
+      --#{$prefix}-#{$name}: #{$value};
+    }
   }
 }
 
-@mixin system-level-shape($theme, $overrides: (), $prefix: $_system-level-prefix) {
+@mixin system-level-shape($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
     @each $name, $value in definitions.md-sys-shape-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
@@ -104,7 +213,7 @@ $_system-level-prefix: sys;
   }
 }
 
-@mixin system-level-state($theme, $overrides: (), $prefix: $_system-level-prefix) {
+@mixin system-level-state($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
     @each $name, $value in definitions.md-sys-state-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
@@ -112,7 +221,7 @@ $_system-level-prefix: sys;
   }
 }
 
-@mixin system-level-motion($theme, $overrides: (), $prefix: $_system-level-prefix) {
+@mixin system-level-motion($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
     @each $name, $value in definitions.md-sys-motion-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
@@ -121,12 +230,12 @@ $_system-level-prefix: sys;
 }
 
 // Return a new map where the values are the same as the provided map's
-// keys, prefixed with "--mat-app-". For example:
-// (key1: '', key2: '') --> (key1: --mat-app-key1, key2: --mat-app-key2)
+// keys, prefixed with "--mat-sys-". For example:
+// (key1: '', key2: '') --> (key1: --mat-sys-key1, key2: --mat-sys-key2)
 @function _create-system-app-vars-map($map) {
   $new-map: ();
   @each $key, $value in $map {
-    $new-map: map.set($new-map, $key, --#{$_system-fallback-prefix}-#{$key});
+    $new-map: map.set($new-map, $key, --#{definition.$system-fallback-prefix}-#{$key});
   }
   @return $new-map;
 }
@@ -146,6 +255,14 @@ $_system-level-prefix: sys;
         _create-system-app-vars-map(definitions.md-sys-state-values()),
     'md-sys-shape':
         _create-system-app-vars-map(definitions.md-sys-shape-values()),
+    // Add a subset of palette-specific colors used by components instead of system values
+    'md-ref-palette':
+        _create-system-app-vars-map(
+          (
+            neutral10: '', // Form field native select option text color
+            neutral-variant20: '', // Sidenav scrim (container background shadow when opened),
+          )
+        ),
   );
 
   @return sass-utils.deep-merge-all(
@@ -153,3 +270,12 @@ $_system-level-prefix: sys;
       m3-tokens.generate-density-tokens(0)
   );
 }
+
+/// Creates a single merged map from the provided variable-length map arguments
+@function map-merge-all($maps...) {
+  $result: ();
+  @each $map in $maps {
+    $result: map.merge($result, $map);
+  }
+  @return $result;
+}