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

package/core/theming/_inspection.scss

@@ -3,7 +3,7 @@
 @use '../style/validation';
 @use './m2-inspection';
 
-$_internals: _mat-theming-internals-do-not-access;
+$internals: _mat-theming-internals-do-not-access;
 
 $_m3-typescales: (
   display-large,
@@ -30,7 +30,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @return {Boolean|Null} true if the theme has errors, else null.
 @function _validate-theme-object($theme) {
   $err: validation.validate-type($theme, 'map') or
-        map.get($theme, $_internals, theme-version) == null;
+        map.get($theme, $internals, theme-version) == null;
   @return if($err, true, null);
 }
 
@@ -40,7 +40,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
 /// @return {Number} The version number of the theme (0 if unknown).
 @function get-theme-version($theme) {
   $err: _validate-theme-object($theme);
-  @return if($err, 0, map.get($theme, $_internals, theme-version) or 0);
+  @return if($err, 0, map.get($theme, $internals, theme-version) or 0);
 }
 
 /// Gets the type of theme represented by a theme object (light or dark).
@@ -55,13 +55,15 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
     @if not theme-has($theme, color) {
       @error 'Color information is not available on this theme.';
     }
-    @return map.get($theme, $_internals, theme-type) or light;
+    @return map.get($theme, $internals, theme-type) or light;
   }
   @else {
     @error #{'Unrecognized theme version:'} $version;
   }
 }
 
+
+
 /// Gets a color from a theme object. This function take a different amount of arguments depending
 /// on if it's working with an M2 or M3 theme:
 /// - With an M3 theme it accepts either 2 or 3 arguments. If 2 arguments are passed, the second
@@ -119,7 +121,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   @if not theme-has($theme, color) {
     @error 'Color information is not available on this theme.';
   }
-  $color-roles: map.get($theme, $_internals, color-tokens, (mat, theme));
+  $color-roles: map.get($theme, $internals, color-tokens, (mat, theme));
   $result: map.get($color-roles, $color-role-name);
   @if not $result {
     @error #{'Valid color roles are: #{map.keys($color-roles)}. Got:'} $color-role-name;
@@ -141,7 +143,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   @if not theme-has($theme, color) {
     @error 'Color information is not available on this theme.';
   }
-  $palettes: map.get($theme, $_internals, palettes);
+  $palettes: map.get($theme, $internals, palettes);
   $palette: map.get($palettes, $palette-name);
   @if not $palette {
     $supported-palettes: map.keys($palettes);
@@ -185,7 +187,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
       font-weight: '-weight'
     ), $property);
     $token-name: '#{$typescale}#{$property-key}';
-    @return map.get($theme, $_internals, typography-tokens, (mat, typography), $token-name);
+    @return map.get($theme, $internals, typography-tokens, (mat, typography), $token-name);
   }
   @else {
     @error #{'Unrecognized theme version:'} $version;
@@ -204,7 +206,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
     @if not theme-has($theme, density) {
       @error 'Density information is not available on this theme.';
     }
-    @return map.get($theme, $_internals, density-scale);
+    @return map.get($theme, $internals, density-scale);
   }
   @else {
     @error #{'Unrecognized theme version:'} $version;
@@ -222,18 +224,18 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
   @else if $version == 1 {
     @if $system == base {
-      @return map.get($theme, $_internals, base-tokens) != null;
+      @return map.get($theme, $internals, base-tokens) != null;
     }
     @if $system == color {
-      @return map.get($theme, $_internals, color-tokens) != null and
-        map.get($theme, $_internals, theme-type) != null and
-        map.get($theme, $_internals, palettes) != null;
+      @return map.get($theme, $internals, color-tokens) != null and
+        map.get($theme, $internals, theme-type) != null and
+        map.get($theme, $internals, palettes) != null;
     }
     @if $system == typography {
-      @return map.get($theme, $_internals, typography-tokens) != null;
+      @return map.get($theme, $internals, typography-tokens) != null;
     }
     @if $system == density {
-      @return map.get($theme, $_internals, density-scale) != null;
+      @return map.get($theme, $internals, density-scale) != null;
     }
     @error 'Valid systems are: base, color, typography, density. Got:' $system;
   }
@@ -259,19 +261,19 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   @else if $version == 1 {
     @each $system in $systems {
       @if $system == base {
-        $theme: map.deep-remove($theme, $_internals, base-tokens);
+        $theme: map.deep-remove($theme, $internals, base-tokens);
       }
       @else if $system == color {
-        $theme: map.deep-remove($theme, $_internals, color-tokens);
-        $theme: map.deep-remove($theme, $_internals, theme-type);
-        $theme: map.deep-remove($theme, $_internals, palettes);
+        $theme: map.deep-remove($theme, $internals, color-tokens);
+        $theme: map.deep-remove($theme, $internals, theme-type);
+        $theme: map.deep-remove($theme, $internals, palettes);
       }
       @else if $system == typography {
-        $theme: map.deep-remove($theme, $_internals, typography-tokens);
+        $theme: map.deep-remove($theme, $internals, typography-tokens);
       }
       @else if $system == density {
-        $theme: map.deep-remove($theme, $_internals, density-scale);
-        $theme: map.deep-remove($theme, $_internals, density-tokens);
+        $theme: map.deep-remove($theme, $internals, density-scale);
+        $theme: map.deep-remove($theme, $internals, density-tokens);
       }
     }
     @return $theme;
@@ -297,7 +299,7 @@ $_typography-properties: (font, font-family, line-height, font-size, letter-spac
   }
   $result: ();
   @each $system in $systems {
-    $result: map.deep-merge($result, map.get($theme, $_internals, '#{$system}-tokens') or ());
+    $result: map.deep-merge($result, map.get($theme, $internals, '#{$system}-tokens') or ());
   }
 
   @return $result;

package/core/theming/_theming.scss

@@ -15,13 +15,13 @@ $_generate-default-density: true !default;
 
 // Warning that will be printed if duplicated styles are generated by a theme.
 $_duplicate-warning: 'Read more about how style duplication can be avoided in a dedicated ' +
-  'guide. https://v18.material.angular.io/guide/duplicate-theming-styles';
+  'guide. https://v18.material.angular.dev/guide/duplicate-theming-styles';
 
 // Warning that will be printed if the legacy theming API is used.
 $private-legacy-theme-warning: 'Angular Material themes should be created from a map containing ' +
   'the keys "color", "typography", and "density". The color value should be a map containing the ' +
   'palette values for "primary", "accent", and "warn". ' +
-  'See https://material.angular.io/guide/theming for more information.';
+  'See https://material.angular.dev/guide/theming for more information.';
 
 // Flag whether to disable theme definitions copying color values to the top-level theme config.
 // This copy is to preserve backwards compatibility.

package/core/tokens/_m3-system.scss

@@ -19,6 +19,7 @@
 @use '../style/sass-utils';
 @use '../theming/config-validation';
 @use '../theming/definition';
+@use '../theming/palettes';
 @use './m3';
 @use './m3-tokens';
 @use 'sass:list';
@@ -63,9 +64,40 @@
       $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));
+    $color-config: $color;
+    @if ($is-palette) {
+      $color: map.set($color, tertiary, $color);
+      $color-config: (
+        definition.$internals: (
+          palettes: (
+            primary: map.remove($color, neutral, neutral-variant, secondary),
+            secondary: map.get($color, secondary),
+            tertiary: map.remove($color, neutral, neutral-variant, secondary, error),
+            neutral: map.get($color, neutral),
+            neutral-variant: map.get($color, neutral-variant),
+            error: map.get($color, error),
+          ),
+          theme-type: color-scheme,
+        )
+      );
+    } @else {
+      $primary: map.get($color, primary) or palettes.$violet-palette;
+      $tertiary: map.get($color, tertiary) or $primary;
+      $color-config: (
+        definition.$internals: (
+          palettes: (
+            primary: map.remove($primary, neutral, neutral-variant, secondary),
+            secondary: map.get($primary, secondary),
+            tertiary: map.remove($tertiary, neutral, neutral-variant, secondary, error),
+            neutral: map.get($primary, neutral),
+            neutral-variant: map.get($primary, neutral-variant),
+            error: map.get($primary, error),
+          ),
+          theme-type: map.get($color, theme-type),
+        )
+      );
+    }
+
     @include system-level-colors($color-config, $overrides, definition.$system-fallback-prefix);
     @include system-level-elevation($color-config, $overrides, definition.$system-fallback-prefix);
   }
@@ -73,9 +105,31 @@
   $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)));
+    $plain: (Roboto, sans-serif);
+    $brand: $plain;
+    $bold: 700;
+    $medium: 500;
+    $regular: 400;
+    @if (meta.type-of($typography) == map) {
+      $plain: map.get($typography, plain-family);
+      $brand: map.get($typography, brand-family) or $plain;
+      $bold: map.get($typography, bold-weight) or $bold;
+      $medium: map.get($typography, medium-weight) or $medium;
+      $regular: map.get($typography, regular-weight) or $regular;
+    } @else {
+      $plain: $typography;
+    }
+    $typography-config: (
+      definition.$internals: (
+        font-definition: (
+          plain: $plain,
+          brand: $brand,
+          bold: $bold,
+          medium: $medium,
+          regular: $regular,
+        )
+      )
+    );
     @include system-level-typography(
         $typography-config, $overrides, definition.$system-fallback-prefix);
   }
@@ -83,10 +137,12 @@
   $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);
+    $scale: 0;
+    @if (meta.type-of($density) == map) {
+      $scale: map.get($density, scale);
+    } @else {
+      $scale: $density;
+    }
     @if ($scale != 0) {
       // Emit component-level density tokens if the scale is lower than 0. The density tokens
       // do not fallback to any system-level values and must be defined if the scale is different.
@@ -130,8 +186,14 @@
 /// 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(
-      m3.md-sys-color-values-light(),
-      m3.md-sys-typescale-values(),
+      m3.md-sys-color-values-light(palettes.$blue-palette),
+      m3.md-sys-typescale-values((
+        brand: (Roboto),
+        plain: (Roboto),
+        bold: 700,
+        medium: 500,
+        regular: 400
+      )),
       m3.md-sys-elevation-values(),
       m3.md-sys-shape-values(),
       m3.md-sys-state-values());
@@ -146,36 +208,21 @@
 }
 
 @mixin system-level-colors($theme, $overrides: (), $prefix: null) {
-  $palettes: map.get($theme, _mat-theming-internals-do-not-access, palettes);
-  $base-palettes: (
-    neutral: map.get($palettes, neutral),
-    neutral-variant: map.get($palettes, neutral-variant),
-    secondary: map.get($palettes, secondary),
-    error: map.get($palettes, error),
-  );
-
-  $type: map.get($theme, _mat-theming-internals-do-not-access, theme-type);
-  $primary: map.merge(map.get($palettes, primary), $base-palettes);
-  $tertiary: map.merge(map.get($palettes, tertiary), $base-palettes);
-  $error: map.get($palettes, error);
+  $palettes: map.get($theme, definition.$internals, palettes);
+  $type: map.get($theme, definition.$internals, theme-type);
 
   @if (not $prefix) {
-    $prefix: map.get($theme, _mat-theming-internals-do-not-access,
+    $prefix: map.get($theme, definition.$internals,
         color-system-variables-prefix) or definition.$system-level-prefix;
   }
 
-  $ref: (
-    md-ref-palette: m3-tokens.generate-ref-palette-tokens($primary, $tertiary, $error)
-  );
 
-  $sys-colors: _generate-sys-colors($ref, $type);
+  $sys-colors: _generate-sys-colors($palettes, $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));
+  $sys-colors: map.set($sys-colors, neutral-variant20, map.get($palettes, neutral-variant, 20));
+  $sys-colors: map.set($sys-colors, neutral10, map.get($palettes, neutral, 10));
 
   & {
     @each $name, $value in $sys-colors {
@@ -184,13 +231,13 @@
   }
 }
 
-@function _generate-sys-colors($ref, $type) {
-  $light-sys-colors: m3.md-sys-color-values-light($ref);
+@function _generate-sys-colors($palettes, $type) {
+  $light-sys-colors: m3.md-sys-color-values-light($palettes);
   @if ($type == light) {
     @return $light-sys-colors;
   }
 
-  $dark-sys-colors: m3.md-sys-color-values-dark($ref);
+  $dark-sys-colors: m3.md-sys-color-values-dark($palettes);
   @if ($type == dark) {
     @return $dark-sys-colors;
   }
@@ -209,23 +256,15 @@
 }
 
 @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);
-  $plain: map.get($font-definition, plain);
-  $bold: map.get($font-definition, bold);
-  $medium: map.get($font-definition, medium);
-  $regular: map.get($font-definition, regular);
-  $ref: (md-ref-typeface:
-      m3-tokens.generate-ref-typeface-tokens($brand, $plain, $bold, $medium, $regular)
-  );
+  $font-definition: map.get($theme, definition.$internals, font-definition);
 
   @if (not $prefix) {
-    $prefix: map.get($theme, _mat-theming-internals-do-not-access,
+    $prefix: map.get($theme, definition.$internals,
         typography-system-variables-prefix) or definition.$system-level-prefix;
   }
 
   & {
-    @each $name, $value in m3.md-sys-typescale-values($ref) {
+    @each $name, $value in m3.md-sys-typescale-values($font-definition) {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
   }
@@ -233,7 +272,7 @@
 
 @mixin system-level-elevation($theme, $overrides: (), $prefix: definition.$system-level-prefix) {
   $shadow-color: map.get(
-      $theme, _mat-theming-internals-do-not-access, color-tokens, (mat, theme), shadow);
+      $theme, definition.$internals, palettes, neutral, 0);
 
   @each $name, $value in m3.md-sys-elevation-values() {
     $level: map.get($overrides, $name) or $value;
@@ -275,27 +314,6 @@
 // system fallback variables referencing Material's system keys.
 // Includes density token fallbacks where density is 0.
 @function create-system-fallbacks() {
-  $app-vars: (
-    'md-sys-color':
-        _create-system-app-vars-map(m3.md-sys-color-values-light()),
-    'md-sys-typescale':
-        _create-system-app-vars-map(m3.md-sys-typescale-values()),
-    'md-sys-elevation':
-        _create-system-app-vars-map(m3.md-sys-elevation-values()),
-    'md-sys-state':
-        _create-system-app-vars-map(m3.md-sys-state-values()),
-    'md-sys-shape':
-        _create-system-app-vars-map(m3.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(
       m3-tokens.generate-tokens($app-vars, true, true),
       get-density-tokens(0),
@@ -310,3 +328,28 @@
   }
   @return $result;
 }
+
+$placeholder-palettes: m3.md-sys-color-values-light(palettes.$blue-palette);
+$placeholder-palettes: map.set($placeholder-palettes, primary, palettes.$blue-palette);
+$app-vars: (
+  'md-sys-color': _create-system-app-vars-map(m3.md-sys-color-values-light($placeholder-palettes)),
+  'md-sys-typescale': _create-system-app-vars-map(m3.md-sys-typescale-values((
+    brand: (Roboto),
+    plain: (Roboto),
+    bold: 700,
+    medium: 500,
+    regular: 400
+  ))),
+  'md-sys-elevation': _create-system-app-vars-map(m3.md-sys-elevation-values()),
+  'md-sys-state': _create-system-app-vars-map(m3.md-sys-state-values()),
+  'md-sys-shape': _create-system-app-vars-map(m3.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),
+      )
+  ),
+);
+
+$theme-with-system-vars: (definition.$internals: $app-vars);