@ng-matero/extensions 20.2.1 → 20.3.1

package/_index.scss

@@ -27,9 +27,9 @@ tooltip-color, tooltip-typography, tooltip-density, tooltip-base, tooltip-overri
 define-density;
 @forward './core/theming/color-api-backwards-compatibility' show color-variants-backwards-compatibility;
 
-@forward './core/tokens/m3-system' show system-level-colors,
+@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;
+system-level-motion, system-level-state, theme, theme-overrides, m2-theme;
 
 @forward './core/theming/all-theme' show all-component-themes, all-component-bases;
 @forward './core/color/all-color' show all-component-colors;

package/colorpicker/index.d.ts

@@ -45,7 +45,7 @@ declare class MtxColorpickerInput implements ControlValueAccessor, AfterViewInit
     set value(value: string | null);
     private _value;
     /** The input and output color format. */
-    format: ColorFormat;
+    format?: ColorFormat | null;
     /** Emits when a `change` event is fired on this `<input>`. */
     readonly colorChange: EventEmitter<MtxColorPickerInputEvent>;
     /** Emits when an `input` event is fired on this `<input>`. */
@@ -178,8 +178,8 @@ declare class MtxColorpicker implements OnChanges, OnDestroy {
     private _color;
     /** The input and output color format. */
     get format(): ColorFormat;
-    set format(value: ColorFormat);
-    _format: ColorFormat;
+    set format(value: ColorFormat | null | undefined);
+    private _format?;
     /** The currently selected color. */
     get selected(): string;
     set selected(value: string);
@@ -201,6 +201,7 @@ declare class MtxColorpicker implements OnChanges, OnDestroy {
     private _injector;
     ngOnChanges(): void;
     ngOnDestroy(): void;
+    getColorFormat(): "hex" | "rgb" | "hsl" | "hsv";
     /** Selects the given color. */
     select(nextVal: string): void;
     /**

package/core/m2/_typography.scss

@@ -156,6 +156,192 @@ $_mdc-levels: (
   );
 }
 
+/// Defines a collection of typography levels to configure typography for an application.
+/// Any level not specified defaults to the values defined in the Material Design specification:
+/// https://material.io/guidelines/style/typography.html.
+///
+/// Note that the Material Design specification does not describe explicit letter-spacing values.
+/// The values here come from reverse engineering the Material Design examples.
+/// @param {String} $font-family Default font-family for levels that don't specify font-family.
+/// @param {Map} $display-4 Configuration for the "display-4" typographic level.
+/// @param {Map} $display-3 Configuration for the "display-3" typographic level.
+/// @param {Map} $display-2 Configuration for the "display-2" typographic level.
+/// @param {Map} $display-1 Configuration for the "display-1" typographic level.
+/// @param {Map} $headline Configuration for the "headline" typographic level.
+/// @param {Map} $title Configuration for the "title" typographic level.
+/// @param {Map} $subheading-2 Configuration for the "subheading-2" typographic level.
+/// @param {Map} $subheading-1 Configuration for the "subheading-1" typographic level.
+/// @param {Map} $body-2 Configuration for the "body-2" typographic level.
+/// @param {Map} $body-1 Configuration for the "body-1" typographic level.
+/// @param {Map} $caption Configuration for the "caption" typographic level.
+/// @param {Map} $button Configuration for the "button" typographic level.
+/// @param {Map} $input Configuration for the "input" typographic level.
+/// @returns {Map} A typography config for the application.
+///
+/// @deprecated Use `mat.m2-define-typography-config` instead. See https://v17.material.angular.dev/guide/mdc-migration for information about migrating.
+/// @breaking-change 17.0.0
+@function define-legacy-typography-config(
+  $font-family:   'Roboto, "Helvetica Neue", sans-serif',
+  $display-4:     define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
+  $display-3:     define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
+  $display-2:     define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
+  $display-1:     define-typography-level(34px, 40px, 400),
+  $headline:      define-typography-level(24px, 32px, 400),
+  $title:         define-typography-level(20px, 32px, 500),
+  $subheading-2:  define-typography-level(16px, 28px, 400),
+  $subheading-1:  define-typography-level(15px, 24px, 400),
+  $body-2:        define-typography-level(14px, 24px, 500),
+  $body-1:        define-typography-level(14px, 20px, 400),
+  $caption:       define-typography-level(12px, 20px, 400),
+  $button:        define-typography-level(14px, 14px, 500),
+  // Line-height must be unit-less fraction of the font-size.
+  $input:         define-typography-level(inherit, 1.125, 400)
+) {
+
+  // Declare an initial map with all of the levels.
+  $config: (
+    display-4:      $display-4,
+    display-3:      $display-3,
+    display-2:      $display-2,
+    display-1:      $display-1,
+    headline:       $headline,
+    title:          $title,
+    subheading-2:   $subheading-2,
+    subheading-1:   $subheading-1,
+    body-2:         $body-2,
+    body-1:         $body-1,
+    caption:        $caption,
+    button:         $button,
+    input:          $input,
+  );
+
+  // Loop through the levels and set the `font-family` of the ones that don't have one to the base.
+  // Note that Sass can't modify maps in place, which means that we need to merge and re-assign.
+  @each $key, $level in $config {
+    @if map.get($level, font-family) == null {
+      $new-level: map.merge($level, (font-family: $font-family));
+      $config: map.merge($config, ($key: $new-level));
+    }
+  }
+
+  // Add the base font family to the config.
+  @return map.merge($config, (font-family: $font-family));
+}
+
+/// Generates an Angular Material typography config based on values from the official Material
+/// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override
+/// the default values. The `mat-typography-level` function can be used to generate a custom
+/// typography level map which can be passed to this function to override one of the default levels.
+/// All default typography sizing generated by this function is in `px` units.
+///
+/// @param {String} $font-family The font family to use for levels where it is not explicitly
+///     specified.
+/// @param {Map} $headline-1 The font settings for the headline-1 font level.
+/// @param {Map} $headline-2 The font settings for the headline-2 font level.
+/// @param {Map} $headline-3 The font settings for the headline-3 font level.
+/// @param {Map} $headline-4 The font settings for the headline-4 font level.
+/// @param {Map} $headline-5 The font settings for the headline-5 font level.
+/// @param {Map} $headline-6 The font settings for the headline-6 font level.
+/// @param {Map} $subtitle-1 The font settings for the subtitle-1 font level.
+/// @param {Map} $subtitle-2 The font settings for the subtitle-2 font level.
+/// @param {Map} $body-1 The font settings for the body-1 font level.
+/// @param {Map} $body-2 The font settings for the body-2 font level.
+/// @param {Map} $caption The font settings for the caption font level.
+/// @param {Map} $button The font settings for the button font level.
+/// @param {Map} $overline The font settings for the overline font level.
+/// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
+@function define-typography-config(
+  // TODO(mmalerba): rename this function to define-typography-config,
+  //  and create a predefined px based config for people that need it.
+  $font-family: $_default-font-family,
+  $headline-1: null,
+  $headline-2: null,
+  $headline-3: null,
+  $headline-4: null,
+  $headline-5: null,
+  $headline-6: null,
+  $subtitle-1: null,
+  $subtitle-2: null,
+  $body-1: null,
+  $body-2: null,
+  $caption: null,
+  $button: null,
+  $overline: null,
+) {
+  @return _apply-font-family($font-family, (
+    headline-1: $headline-1 or _rem-to-px(typography-config-level-from-mdc(headline1)),
+    headline-2: $headline-2 or _rem-to-px(typography-config-level-from-mdc(headline2)),
+    headline-3: $headline-3 or _rem-to-px(typography-config-level-from-mdc(headline3)),
+    headline-4: $headline-4 or _rem-to-px(typography-config-level-from-mdc(headline4)),
+    headline-5: $headline-5 or _rem-to-px(typography-config-level-from-mdc(headline5)),
+    headline-6: $headline-6 or _rem-to-px(typography-config-level-from-mdc(headline6)),
+    subtitle-1: $subtitle-1 or _rem-to-px(typography-config-level-from-mdc(subtitle1)),
+    subtitle-2: $subtitle-2 or _rem-to-px(typography-config-level-from-mdc(subtitle2)),
+    body-1: $body-1 or _rem-to-px(typography-config-level-from-mdc(body1)),
+    body-2: $body-2 or _rem-to-px(typography-config-level-from-mdc(body2)),
+    caption: $caption or _rem-to-px(typography-config-level-from-mdc(caption)),
+    button: $button or _rem-to-px(typography-config-level-from-mdc(button)),
+    overline: $overline or _rem-to-px(typography-config-level-from-mdc(overline)),
+  ));
+}
+
+/// Generates an Angular Material typography config based on values from the official Material
+/// Design spec implementation (MDC Web). All arguments are optional, but may be passed to override
+/// the default values. The `mat-typography-level` function can be used to generate a custom
+/// typography level map which can be passed to this function to override one of the default levels.
+/// All default typography sizing generated by this function is in `rem` units.
+///
+/// @param {String} $font-family The font family to use for levels where it is not explicitly
+///     specified.
+/// @param {Map} $headline-1 The font settings for the headline-1 font level.
+/// @param {Map} $headline-2 The font settings for the headline-2 font level.
+/// @param {Map} $headline-3 The font settings for the headline-3 font level.
+/// @param {Map} $headline-4 The font settings for the headline-4 font level.
+/// @param {Map} $headline-5 The font settings for the headline-5 font level.
+/// @param {Map} $headline-6 The font settings for the headline-6 font level.
+/// @param {Map} $subtitle-1 The font settings for the subtitle-1 font level.
+/// @param {Map} $subtitle-2 The font settings for the subtitle-2 font level.
+/// @param {Map} $body-1 The font settings for the body-1 font level.
+/// @param {Map} $body-2 The font settings for the body-2 font level.
+/// @param {Map} $caption The font settings for the caption font level.
+/// @param {Map} $button The font settings for the button font level.
+/// @param {Map} $overline The font settings for the overline font level.
+/// @return {Map} A map containing font settings for each of the levels in the Material Design spec.
+@function define-rem-typography-config(
+  // TODO(mmalerba): rename this function to define-typography-config,
+  //  and create a predefined px based config for people that need it.
+  $font-family: $_default-font-family,
+  $headline-1: null,
+  $headline-2: null,
+  $headline-3: null,
+  $headline-4: null,
+  $headline-5: null,
+  $headline-6: null,
+  $subtitle-1: null,
+  $subtitle-2: null,
+  $body-1: null,
+  $body-2: null,
+  $caption: null,
+  $button: null,
+  $overline: null,
+) {
+  @return _apply-font-family($font-family, (
+    headline-1: $headline-1 or typography-config-level-from-mdc(headline1),
+    headline-2: $headline-2 or typography-config-level-from-mdc(headline2),
+    headline-3: $headline-3 or typography-config-level-from-mdc(headline3),
+    headline-4: $headline-4 or typography-config-level-from-mdc(headline4),
+    headline-5: $headline-5 or typography-config-level-from-mdc(headline5),
+    headline-6: $headline-6 or typography-config-level-from-mdc(headline6),
+    subtitle-1: $subtitle-1 or typography-config-level-from-mdc(subtitle1),
+    subtitle-2: $subtitle-2 or typography-config-level-from-mdc(subtitle2),
+    body-1: $body-1 or typography-config-level-from-mdc(body1),
+    body-2: $body-2 or typography-config-level-from-mdc(body2),
+    caption: $caption or typography-config-level-from-mdc(caption),
+    button: $button or typography-config-level-from-mdc(button),
+    overline: $overline or typography-config-level-from-mdc(overline),
+  ));
+}
+
 // Converts an MDC typography level config to an Angular Material one.
 @function typography-config-level-from-mdc($mdc-level, $font-family: null) {
   $mdc-level-config: map.get($_mdc-levels, $mdc-level);
@@ -170,3 +356,33 @@ $_mdc-levels: (
     $letter-spacing: map.get($mdc-level-config, letter-spacing)
   );
 }
+
+// Converts a map containing rem values to a map containing px values.
+@function _rem-to-px($x, $px-per-rem: 16px) {
+  @if meta.type-of($x) == 'map' {
+    @each $key, $val in $x {
+      $x: map.merge($x, ($key: _rem-to-px($val)));
+    }
+    @return $x;
+  }
+  @if meta.type-of($x) == 'number' and math.unit($x) == 'rem' {
+    @return math.div($x, 1rem) * $px-per-rem;
+  }
+  @else {
+    @return $x;
+  }
+}
+
+// Applies the default font family to all levels in a typography config.
+@function _apply-font-family($font-family, $initial-config) {
+  $config: $initial-config;
+
+  @each $key, $level in $config {
+    @if map.get($level, 'font-family') == null {
+      // Sass maps are immutable so we have to re-assign the variable each time.
+      $config: map.set($config, $key, map.set($level, 'font-family', $font-family));
+    }
+  }
+
+  @return map.set($config, 'font-family', $font-family);
+}

package/core/theming/_definition.scss

@@ -76,7 +76,29 @@ $theme-version: 1;
   // density
   $density-scale: map.get($density-config, scale) or 0;
 
+  $system-maps: (
+    m3-tokens.get-sys-color($type, $palettes, $color-system-variables-prefix),
+    m3.md-sys-elevation-values(),
+    m3.md-sys-motion-values(),
+    m3.md-sys-shape-values(),
+    m3.md-sys-state-values(),
+    (
+      // Form field native select option text color
+      neutral10: map.get($palettes, neutral, 10),
+      // Sidenav scrim (container background shadow when opened),
+      neutral-variant20: map.get($palettes, neutral-variant, 20),
+    ),
+    m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix),
+  );
+  $system: (
+    density-scale: $density-scale,
+  );
+  @each $sys-map in $system-maps {
+    $system: map.merge($system, $sys-map);
+  }
+
   @return (
+    _mat-system: $system,
     $internals: (
       base-tokens: m3-tokens.generate-base-tokens(),
       color-system-variables-prefix: $color-system-variables-prefix,
@@ -84,19 +106,6 @@ $theme-version: 1;
         m3-tokens.generate-color-tokens($type, $palettes, $color-system-variables-prefix),
       density-scale: $density-scale,
       font-definition: $typography,
-      md-sys-color: m3-tokens.get-sys-color($type, $palettes, $color-system-variables-prefix),
-      md-sys-elevation: m3.md-sys-elevation-values(),
-      md-sys-motion: m3.md-sys-motion-values(),
-      md-sys-shape: m3.md-sys-shape-values(),
-      md-sys-state: m3.md-sys-state-values(),
-      md-ref-palette: (
-        // Form field native select option text color
-        neutral10: map.get($palettes, neutral, 10),
-        // Sidenav scrim (container background shadow when opened),
-        neutral-variant20: map.get($palettes, neutral-variant, 20),
-      ),
-      md-sys-typescale:
-        m3-tokens.get-sys-typeface($typography, $typography-system-variables-prefix),
       palettes: $palettes,
       theme-type: $type,
       theme-version: $theme-version,

package/core/theming/_m2-inspection.scss

@@ -0,0 +1,235 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use '@angular/material' as mat;
+@use '../typography/versioning' as typography-versioning;
+
+/// Key used to access the Angular Material theme internals.
+$_internals: _mat-theming-internals-do-not-access;
+
+/// Keys that indicate a config object is a color config.
+$_color-keys: (
+  primary,
+  accent,
+  warn,
+  foreground,
+  background,
+  is-dark,
+  color, /* included for themes that incorrectly nest the color config: (color: (color: (....))) */
+);
+
+/// Keys that indicate a config object is a typography config.
+$_typography-keys: (
+  headline-1,
+  headline-2,
+  headline-3,
+  headline-4,
+  headline-5,
+  headline-6,
+  subtitle-1,
+  font-family,
+  subtitle-2,
+  body-1,
+  body-2,
+  button,
+  caption,
+  overline,
+);
+
+/// The CSS typography properties supported by the inspection API.
+$_typography-properties: (font, font-family, line-height, font-size, letter-spacing, font-weight);
+
+/// Gets the m2-config from the theme.
+@function get-m2-config($theme) {
+  // It is possible for a user to pass a "density theme" that is just a number.
+  @if meta.type-of($theme) != 'map' {
+    @return $theme;
+  }
+  $internal: map.get($theme, $_internals, m2-config);
+  $theme: map.remove($theme, $_internals);
+  @return if(_is-error-theme($theme), $internal, $theme);
+}
+
+/// Checks whether the given theme contains error values.
+/// @param {*} $theme The theme to check.
+/// @return {Boolean} true if the theme contains error values, else false.
+@function _is-error-theme($theme) {
+  @if meta.type-of($theme) != 'map' {
+    @return false;
+  }
+  @if map.get($theme, ERROR) {
+    @return true;
+  }
+  @return _is-error-theme(list.nth(map.values($theme), 1));
+}
+
+/// Checks whether the given theme object has any of the given keys.
+/// @param {Map} $theme The theme to check
+/// @param {List} $keys The keys to check for
+/// @return {Boolean} Whether the theme has any of the given keys.
+@function _has-any-key($theme, $keys) {
+  @each $key in $keys {
+    @if map.has-key($theme, $key) {
+      @return true;
+    }
+  }
+  @return false;
+}
+
+/// Checks whether the given theme is a density scale value.
+/// @param {*} $theme The theme to check.
+/// @return {Boolean} true if the theme is a density scale value, else false.
+@function _is-density-value($theme) {
+  @return $theme == minimum or $theme == maximum or meta.type-of($theme) == 'number';
+}
+
+/// Gets the type of theme represented by a theme object (light or dark).
+/// @param {Map} $theme The theme
+/// @return {String} The type of theme (either `light` or `dark`).
+@function get-theme-type($theme) {
+  $theme: get-m2-config($theme);
+  @if not theme-has($theme, color) {
+    @error 'Color information is not available on this theme.';
+  }
+  $colors: mat.m2-get-color-config($theme);
+  // Some apps seem to have mistakenly created nested color themes that somehow work with our old
+  // theme normalization logic. This check allows those apps to keep working.
+  @if theme-has($colors, color) {
+    $colors: mat.m2-get-color-config($colors);
+  }
+  @return if(map.get($colors, is-dark), dark, light);
+}
+
+/// Gets a color from a theme object. This function can take between 2 and 4 arguments. The first
+/// argument is the theme, the second one is the palette from which to extract the color, the third
+/// one is the hue within the palette and the fourth is the opacity of the returned color.
+/// @param {Map} $theme The theme
+/// @param {String} $palette-name The name of a color palette.
+/// @param {Number} $hue The palette hue to get (passing this argument means the second argument is
+///   interpreted as a palette name).
+/// @param {Number} $opacity The alpha channel value for the color.
+/// @return {Color} The requested theme color.
+@function get-theme-color($theme, $palette-name, $args...) {
+  $theme: get-m2-config($theme);
+  @if not theme-has($theme, color) {
+    @error 'Color information is not available on this theme.';
+  }
+  $colors: mat.m2-get-color-config($theme);
+  // Some apps seem to have mistakenly created nested color themes that somehow work with our old
+  // theme normalization logic. This check allows those apps to keep working.
+  @if theme-has($colors, color) {
+    $colors: mat.m2-get-color-config($colors);
+  }
+  $palette: map.get($colors, $palette-name);
+  @if not $palette {
+    @error $palette-name $args $theme;
+    @error #{'Unrecognized palette name:'} $palette-name;
+  }
+  @return mat.m2-get-color-from-palette($palette, $args...);
+}
+
+/// Gets a typography value from a theme object.
+/// @param {Map} $theme The theme
+/// @param {String} $typescale The typescale name.
+/// @param {String} $property The CSS font property to get
+///   (font, font-family, font-size, font-weight, line-height, or letter-spacing).
+/// @return {*} The value of the requested font property.
+@function get-theme-typography($theme, $typescale, $property) {
+  $theme: get-m2-config($theme);
+  @if not theme-has($theme, typography) {
+    @error 'Typography information is not available on this theme.';
+  }
+  $typography: typography-versioning.private-typography-to-2018-config(
+      mat.m2-get-typography-config($theme));
+  @if $property == font {
+    $font-weight: mat.m2-font-weight($typography, $typescale);
+    $font-size: mat.m2-font-size($typography, $typescale);
+    $line-height: mat.m2-line-height($typography, $typescale);
+    $font-family: mat.m2-font-family($typography, $typescale);
+    @return ($font-weight list.slash($font-size, $line-height) $font-family);
+  }
+  @else if $property == font-family {
+    $result: mat.m2-font-family($typography, $typescale);
+    @return $result or mat.m2-font-family($typography);
+  }
+  @else if $property == font-size {
+    @return mat.m2-font-size($typography, $typescale);
+  }
+  @else if $property == font-weight {
+    @return mat.m2-font-weight($typography, $typescale);
+  }
+  @else if $property == line-height {
+    @return mat.m2-line-height($typography, $typescale);
+  }
+  @else if $property == letter-spacing {
+    @return mat.m2-letter-spacing($typography, $typescale);
+  }
+  @else {
+    @error #{'Valid typography properties are: #{$_typography-properties}. Got:'} $property;
+  }
+}
+
+/// Gets the density scale from a theme object.
+/// @param {Map} $theme The theme
+/// @return {Number} The density scale.
+@function get-theme-density($theme) {
+  $theme: get-m2-config($theme);
+  @if not theme-has($theme, density) {
+    @error 'Density information is not available on this theme.';
+  }
+  $scale: mat.m2-get-density-config($theme);
+  @return mat.private-clamp-density($scale, -5);
+}
+
+/// Checks whether the theme has information about given theming system.
+/// @param {Map} $theme The theme
+/// @param {String} $system The system to check
+/// @param {Boolean} Whether the theme has information about the system.
+@function theme-has($theme, $system) {
+  $theme: get-m2-config($theme);
+  @if $system == base {
+    @return true;
+  }
+  @if $system == color {
+    $color: mat.m2-get-color-config($theme);
+    @return $color != null and _has-any-key($color, $_color-keys);
+  }
+  @if $system == typography {
+    $typography: mat.m2-get-typography-config($theme);
+    @return $typography != null and _has-any-key($typography, $_typography-keys);
+  }
+  @if $system == density {
+    // Backwards compatibility for the case where an explicit, but invalid density is given
+    // (this was previously treated as density 0).
+    @if meta.type-of($theme) == 'map' and map.get($theme, density) {
+      @return true;
+    }
+    $density: mat.m2-get-density-config($theme);
+    @return $density != null and _is-density-value($density);
+  }
+  @error 'Valid systems are: base, color, typography, density. Got:' $system;
+}
+
+/// Removes the information about the given theming system(s) from the given theme.
+/// @param {Map} $theme The theme to remove information from
+/// @param {String...} $systems The systems to remove
+/// @return {Map} A version of the theme without the removed theming systems.
+@function theme-remove($theme, $systems...) {
+  $internal: map.get($theme, $_internals, m2-config);
+  @each $system in $systems {
+    @if $system == color {
+      $theme: map.set($theme, color, null);
+    }
+    @else if $system == typography {
+      $theme: map.set($theme, typography, null);
+    }
+    @else if $system == density {
+      $theme: map.set($theme, density, null);
+    }
+  }
+  @if $internal {
+    $internal: theme-remove($internal, $systems...);
+    $theme: map.set($theme, $_internals, m2-config, $internal);
+  }
+  @return $theme;
+}

package/core/theming/prebuilt/azure-blue.scss

@@ -1,8 +1,8 @@
 @use '@angular/material' as mat;
-@use '../../../core/tokens/m3-system';
+@use '../../../core/tokens/system';
 
 html {
-  @include m3-system.theme((
+  @include system.theme((
     color: (
       theme-type: light,
       primary: mat.$azure-palette,

package/core/theming/prebuilt/cyan-orange.scss

@@ -1,8 +1,8 @@
 @use '@angular/material' as mat;
-@use '../../../core/tokens/m3-system';
+@use '../../../core/tokens/system';
 
 html {
-  @include m3-system.theme((
+  @include system.theme((
     color: (
       theme-type: dark,
       primary: mat.$cyan-palette,

package/core/theming/prebuilt/magenta-violet.scss

@@ -1,8 +1,8 @@
 @use '@angular/material' as mat;
-@use '../../../core/tokens/m3-system';
+@use '../../../core/tokens/system';
 
 html {
-  @include m3-system.theme((
+  @include system.theme((
     color: (
       theme-type: dark,
       primary: mat.$magenta-palette,

package/core/theming/prebuilt/rose-red.scss

@@ -1,8 +1,8 @@
 @use '@angular/material' as mat;
-@use '../../../core/tokens/m3-system';
+@use '../../../core/tokens/system';
 
 html {
-  @include m3-system.theme((
+  @include system.theme((
     color: (
       theme-type: light,
       primary: mat.$rose-palette,

package/core/tokens/_m3-utils.scss

@@ -8,25 +8,13 @@
   $system: map.set($system, on-#{$color}-container, map.get($system, on-#{$variant}-container));
   $system: map.set($system, #{$color}, map.get($system, #{$variant}));
   $system: map.set($system, #{$color}-container, map.get($system, #{$variant}-container));
+  $system: map.set($system, inverse-#{$color}, map.get($system, inverse-#{$variant}));
   @return $system;
 }
 
 // Gets the theme's system values as a flat map.
 @function get-system($theme) {
-  $system: ();
-  $system: map.merge($system,
-      map.get($theme, _mat-theming-internals-do-not-access, md-sys-color));
-  $system: map.merge($system,
-      map.get($theme, _mat-theming-internals-do-not-access, md-sys-elevation));
-  $system: map.merge($system,
-      map.get($theme, _mat-theming-internals-do-not-access, md-sys-shape));
-  $system: map.merge($system,
-      map.get($theme, _mat-theming-internals-do-not-access, md-sys-state));
-  $system: map.merge($system,
-      map.get($theme, _mat-theming-internals-do-not-access, md-sys-typescale));
-  $system: map.merge($system,
-      map.get($theme, _mat-theming-internals-do-not-access, md-ref-palette));
-  @return $system;
+  @return map.get($theme, _mat-system);
 }
 
 // Returns the color with an opacity value using color-mix. If the color is a variable name, it