@angular/material 20.1.0-next.1 → 20.1.0-next.2

package/core/theming/_theming.scss

@@ -4,19 +4,16 @@
 @use 'sass:meta';
 @use 'sass:color';
 
+// Deprecated flag that is no longer used to control duplication warnings.
+// Remove in v22
+$theme-ignore-duplication-warnings: false;
+
 // Whether to enable compatibility with legacy methods for accessing theme information.
 $theme-legacy-inspection-api-compatibility: true !default;
 
-// Whether duplication warnings should be disabled. Warnings enabled by default.
-$theme-ignore-duplication-warnings: false !default;
-
 // Whether density should be generated by default.
 $_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.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 ' +
@@ -40,46 +37,6 @@ $_emitted-base: () !default;
 
 $private-internal-name: _mat-theming-internals-do-not-access;
 
-// Checks if configurations that have been declared in the given theme have been generated
-// before. If so, warnings will be reported. This should notify developers in case duplicate
-// styles are accidentally generated due to wrong usage of the all-theme mixins.
-//
-// Additionally, this mixin controls the default value for the density configuration. By
-// default, density styles are generated at scale zero. If the same density styles would be
-// generated a second time though, the default value will change to avoid duplicate styles.
-//
-// The mixin keeps track of all configurations in a list that is scoped to the specified
-// id. This is necessary because a given theme can be passed to multiple disjoint theme mixins
-// (e.g. `all-component-themes` and `all-legacy-component-themes`) without causing any
-// style duplication.
-@mixin private-check-duplicate-theme-styles($theme-or-color-config, $id) {
-  // TODO(mmalerba): use get-theme-version for this check when its moved out of experimental.
-  @if map.get($theme-or-color-config, $private-internal-name, theme-version) == 1 {
-    @include _check-duplicate-theme-styles-v1($theme-or-color-config, $id) {
-      // Optionally, consumers of this mixin can wrap contents inside so that nested
-      // duplicate style checks do not report another warning. e.g. if developers include
-      // the `all-component-themes` mixin twice, only the top-level duplicate styles check
-      // should report a warning. Not all individual components should report a warning too.
-      $orig-mat-theme-ignore-duplication-warnings: $theme-ignore-duplication-warnings;
-      $theme-ignore-duplication-warnings: true !global;
-      @content;
-      $theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global;
-    }
-  }
-  @else {
-    @include _check-duplicate-theme-styles-v0($theme-or-color-config, $id) {
-      // Optionally, consumers of this mixin can wrap contents inside so that nested
-      // duplicate style checks do not report another warning. e.g. if developers include
-      // the `all-component-themes` mixin twice, only the top-level duplicate styles check
-      // should report a warning. Not all individual components should report a warning too.
-      $orig-mat-theme-ignore-duplication-warnings: $theme-ignore-duplication-warnings;
-      $theme-ignore-duplication-warnings: true !global;
-      @content;
-      $theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global;
-    }
-  }
-}
-
 /// Strip out any settings map entries that have empty values (null or ()).
 @function _strip-empty-settings($settings) {
   $result: ();
@@ -91,131 +48,6 @@ $private-internal-name: _mat-theming-internals-do-not-access;
   @return if($result == (), null, $result);
 }
 
-// Checks for duplicate styles in a `theme-version: 1` style theme.
-@mixin _check-duplicate-theme-styles-v1($theme-or-color-config, $id) {
-  $color-settings: _strip-empty-settings((
-    theme-type: map.get($theme-or-color-config, $private-internal-name, theme-type),
-    color-tokens: map.get($theme-or-color-config, $private-internal-name, color-tokens),
-  ));
-  $typography-settings: _strip-empty-settings((
-    typography-tokens:
-      map.get($theme-or-color-config, $private-internal-name, typography-tokens),
-  ));
-  $density-settings: _strip-empty-settings((
-    density-scale:
-      map.get($theme-or-color-config, $private-internal-name, density-scale),
-    density-tokens:
-      map.get($theme-or-color-config, $private-internal-name, density-tokens),
-  ));
-  $base-settings: _strip-empty-settings((
-    base-tokens: map.get($theme-or-color-config, $private-internal-name, base-tokens),
-  ));
-  $previous-color-settings: map.get($_emitted-color, $id) or ();
-  $previous-typography-settings: map.get($_emitted-typography, $id) or ();
-  $previous-density-settings: map.get($_emitted-density, $id) or ();
-  $previous-base-settings: map.get($_emitted-base, $id) or ();
-
-  // Check if the color configuration has been generated before.
-  @if $color-settings != null {
-    @if list.index($previous-color-settings, $color-settings) != null and
-        not $theme-ignore-duplication-warnings {
-      @warn 'The same color styles are generated multiple times. ' + $_duplicate-warning;
-    }
-    $previous-color-settings: list.append($previous-color-settings, $color-settings);
-  }
-
-  // Check if the typography configuration has been generated before.
-  @if $typography-settings != null {
-    @if list.index($previous-typography-settings, $typography-settings) != null and
-        not $theme-ignore-duplication-warnings {
-      @warn 'The same typography styles are generated multiple times. ' + $_duplicate-warning;
-    }
-    $previous-typography-settings: list.append($previous-typography-settings, $typography-settings);
-  }
-
-  // Check if the density configuration has been generated before.
-  @if $density-settings != null {
-    @if list.index($previous-density-settings, $density-settings) != null and
-        not $theme-ignore-duplication-warnings {
-      @warn 'The same density styles are generated multiple times. ' + $_duplicate-warning;
-    }
-    $previous-density-settings: list.append($previous-density-settings, $density-settings);
-  }
-
-  // Check if the base configuration has been generated before.
-  @if $base-settings != null {
-    @if list.index($previous-base-settings, $base-settings) != null and
-        not $theme-ignore-duplication-warnings {
-      @warn 'The same base theme styles are generated multiple times. ' + $_duplicate-warning;
-    }
-    $previous-base-settings: list.append($previous-base-settings, $base-settings);
-  }
-
-  $_emitted-color: map.set($_emitted-color, $id, $previous-color-settings) !global;
-  $_emitted-density: map.set($_emitted-density, $id, $previous-density-settings) !global;
-  $_emitted-typography: map.set($_emitted-typography, $id, $previous-typography-settings) !global;
-  $_emitted-base: map.set($_emitted-base, $id, $previous-base-settings) !global;
-
-  @content;
-}
-
-// Checks for duplicate styles in a `theme-version: 0` style theme.
-@mixin _check-duplicate-theme-styles-v0($theme-or-color-config, $id) {
-  $theme: private-legacy-get-theme($theme-or-color-config);
-  $color-config: map.get($theme, $private-internal-name, m2-config, color) or
-    private-get-color-config($theme);
-  $density-config: map.get($theme, $private-internal-name, m2-config, density) or
-    private-get-density-config($theme);
-  $typography-config: map.get($theme, $private-internal-name, m2-config, typography) or
-    private-get-typography-config($theme);
-  // Lists of previous `color`, `density` and `typography` configurations.
-  $previous-color: map.get($_emitted-color, $id) or ();
-  $previous-typography: map.get($_emitted-typography, $id) or ();
-  $previous-density: map.get($_emitted-density, $id) or ();
-  // Whether duplicate legacy density styles would be generated.
-  $duplicate-legacy-density: false;
-
-  // Check if the color configuration has been generated before.
-  @if $color-config != null {
-    @if list.index($previous-color, $color-config) != null and
-        not $theme-ignore-duplication-warnings {
-      @warn 'The same color styles are generated multiple times. ' + $_duplicate-warning;
-    }
-    $previous-color: list.append($previous-color, $color-config);
-  }
-
-  // Check if the typography configuration has been generated before.
-  @if $typography-config != null {
-    @if list.index($previous-typography, $typography-config) != null and
-        not $theme-ignore-duplication-warnings {
-      @warn 'The same typography styles are generated multiple times. ' + $_duplicate-warning;
-    }
-    $previous-typography: list.append($previous-typography, $typography-config);
-  }
-
-  // Check if the density configuration has been generated before.
-  @if $density-config != null {
-    @if list.index($previous-density, $density-config) != null {
-      // Only report a warning if density styles would be duplicated for non-legacy theme
-      // definitions. For legacy themes, we have compatibility logic that avoids duplication
-      // of default density styles. We don't want to report a warning in those cases.
-      @if private-is-legacy-constructed-theme($theme) {
-        $duplicate-legacy-density: true;
-      }
-      @else if not $theme-ignore-duplication-warnings {
-        @warn 'The same density styles are generated multiple times. ' + $_duplicate-warning;
-      }
-    }
-    $previous-density: list.append($previous-density, $density-config);
-  }
-
-  $_emitted-color: map.merge($_emitted-color, ($id: $previous-color)) !global;
-  $_emitted-density: map.merge($_emitted-density, ($id: $previous-density)) !global;
-  $_emitted-typography: map.merge($_emitted-typography, ($id: $previous-typography)) !global;
-
-  @content;
-}
-
 // Checks whether the given value resolves to a theme object. Theme objects are always
 // of type `map` and can optionally only specify `color`, `density` or `typography`.
 @function private-is-theme-object($value) {

package/core/tokens/_m2-utils.scss

@@ -1,10 +1,5 @@
-@use 'sass:color';
-@use 'sass:math';
-@use 'sass:meta';
 @use 'sass:map';
-
-// Indicates whether we're building internally. Used for backwards compatibility.
-$private-is-internal-build: false;
+@use './m2';
 
 // Gets the theme's system values as a flat map.
 @function get-system($theme) {
@@ -13,65 +8,10 @@ $private-is-internal-build: false;
     @return $system;
   }
 
-  @return ();
-}
-
-/// Inherited function from MDC that computes which contrast tone to use on top of a color.
-/// This is used only in a narrow set of use cases when generating M2 button tokens to maintain
-/// backwards compatibility.
-/// @param {Color} $value Color for which we're calculating the contrast tone.
-/// @param {Boolean} $is-dark Whether the current theme is dark.
-/// @return {Map} Either `dark` or `light`.
-@function contrast-tone($value, $is-dark) {
-  @if ($value == 'dark') {
-    @return 'light';
-  }
-
-  @if ($value == 'light') {
-    @return 'dark';
+  // If the $theme is a typography-config, convert it to a system map.
+  @if map.has-key($theme, body-1) {
+    @return m2.md-sys-typescale-values($theme);
   }
 
-  // Fallback if the app is using a non-color palette (e.g. CSS variable based).
-  @if (meta.type-of($value) != 'color') {
-    @return if($is-dark, 'light', 'dark');
-  }
-
-  $minimum-contrast: 3.1;
-  $light-contrast: _contrast($value, #fff);
-  $dark-contrast: _contrast($value, rgba(0, 0, 0, 0.87));
-
-  @if ($light-contrast < $minimum-contrast) and ($dark-contrast > $light-contrast) {
-    @return 'dark';
-  }
-
-  @return 'light';
-}
-
-@function _linear-channel-value($channel-value) {
-  $normalized-channel-value: math.div($channel-value, 255);
-
-  @if ($normalized-channel-value < 0.03928) {
-    @return math.div($normalized-channel-value, 12.92);
-  }
-
-  @return math.pow(math.div($normalized-channel-value + 0.055, 1.055), 2.4);
-}
-
-// Calculate the luminance for a color.
-// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
-@function _luminance($color) {
-  $red: _linear-channel-value(color.red($color));
-  $green: _linear-channel-value(color.green($color));
-  $blue: _linear-channel-value(color.blue($color));
-
-  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
-}
-
-// Calculate the contrast ratio between two colors.
-// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
-@function _contrast($back, $front) {
-  $back-lum: _luminance($back) + 0.05;
-  $fore-lum: _luminance($front) + 0.05;
-
-  @return math.div(math.max($back-lum, $fore-lum), math.min($back-lum, $fore-lum));
+  @return ();
 }

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

package/core/tokens/_token-utils.scss

@@ -69,32 +69,12 @@
   @return _create-var(--mat-#{$token}, $sys-fallback);
 }
 
-// Outputs a map of tokens.
-@mixin create-token-values($tokens) {
-  @include _create-token-values-internal($tokens, false);
-}
-
-// Outputs a map of tokens under a specific prefix in scenarios where tokens may be mixed with
-// other declarations (e.g. M2 themes). Used to avoid https://sass-lang.com/documentation/breaking-changes/mixed-decls/
-@mixin create-token-values-mixed($tokens) {
-  @include _create-token-values-internal($tokens, true);
-}
-
-@mixin _create-token-values-internal($tokens, $in-place) {
-  @if ($tokens != null) {
-    @if ($in-place) {
-      & {
-        @each $key, $value in $tokens {
-          @if $value != null {
-            --mat-#{$key}: #{$value};
-          }
-        }
-      }
-    } @else {
-      @each $key, $value in $tokens {
-        @if $value != null {
-          --mat-#{$key}: #{$value};
-        }
+// Outputs a map of token values as CSS variable definitions.
+@mixin values($tokens) {
+  @include sass-utils.current-selector-or-root() {
+    @each $key, $value in $tokens {
+      @if $value != null {
+        --mat-#{$key}: #{$value};
       }
     }
   }
@@ -125,7 +105,7 @@
         $namespace: list.nth($data, 1);
         $name: list.nth($data, 2);
         $prefixed-name: $namespace + '-' + $name;
-        @include create-token-values(($prefixed-name: $value));
+        @include values(($prefixed-name: $value));
       } @else {
         @error #{'Invalid token name `'}#{$name}#{'`. '}#{'Valid tokens are: '}#{$all-names};
       }

package/core/tokens/m2/_index.scss

@@ -0,0 +1,6 @@
+@forward './md-sys-color';
+@forward './md-sys-elevation';
+@forward './md-sys-motion';
+@forward './md-sys-shape';
+@forward './md-sys-state';
+@forward './md-sys-typescale';

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

@@ -0,0 +1,123 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@use 'sass:map';
+@use '../../m2/palette';
+
+@function md-sys-color-values-dark($palettes) {
+  @return (
+    primary: map.get($palettes, primary, default),
+    on-primary: map.get($palettes, primary, default-contrast),
+    inverse-primary: map.get($palettes, primary, 600),
+    secondary: map.get($palettes, accent, default),
+    on-secondary: map.get($palettes, accent, default-contrast),
+    inverse-secondary: map.get($palettes, accent, 600),
+    error: map.get($palettes, warn, default),
+    on-error: map.get($palettes, warn, default-contrast),
+    inverse-error: map.get($palettes, warn, 600),
+    shadow: black,
+    surface: map.get(palette.$grey-palette, 800),
+    on-surface: white,
+    surface-variant: #4a4a4a,
+    on-surface-variant: rgba(white, 0.7),
+    background: #303030,
+    inverse-surface: white,
+    inverse-on-surface: rgba(black, 0.87),
+    outline: rgba(white, 0.12),
+    outline-variant: rgba(white, 0.38),
+
+    // TBD
+    error-container: null,
+    on-background: null,
+    on-error-container: null,
+    on-primary-container: null,
+    on-primary-fixed: null,
+    on-primary-fixed-variant: null,
+    on-secondary-container: null,
+    on-secondary-fixed: null,
+    on-secondary-fixed-variant: null,
+    on-tertiary: null,
+    on-tertiary-container: null,
+    on-tertiary-fixed: null,
+    on-tertiary-fixed-variant: null,
+    primary-container: null,
+    primary-fixed: null,
+    primary-fixed-dim: null,
+    scrim: null,
+    secondary-container: null,
+    secondary-fixed: null,
+    secondary-fixed-dim: null,
+    surface-bright: null,
+    surface-container: null,
+    surface-container-high: null,
+    surface-container-highest: null,
+    surface-container-low: null,
+    surface-container-lowest: null,
+    surface-dim: null,
+    surface-tint: null,
+    tertiary: null,
+    tertiary-container: null,
+    tertiary-fixed: null,
+    tertiary-fixed-dim: null,
+  );
+}
+
+@function md-sys-color-values-light($palettes) {
+  @return (
+    primary: map.get($palettes, primary, default),
+    on-primary: map.get($palettes, primary, default-contrast),
+    inverse-primary: map.get($palettes, primary, 300),
+    secondary: map.get($palettes, accent, default),
+    on-secondary: map.get($palettes, accent, default-contrast),
+    inverse-secondary: map.get($palettes, accent, 300),
+    error: map.get($palettes, warn, default),
+    on-error: map.get($palettes, warn, default-contrast),
+    inverse-error: map.get($palettes, warn, 300),
+    shadow: black,
+    surface: white,
+    on-surface: rgba(black, 0.87),
+    surface-variant: #f6f6f6,
+    on-surface-variant: rgba(black, 0.54),
+    background: map.get(palette.$grey-palette, 50),
+    inverse-surface: map.get(palette.$grey-palette, 800),
+    inverse-on-surface: white,
+    outline: rgba(black, 0.12),
+    outline-variant: rgba(black, 0.38),
+
+    // TBD
+    error-container: null,
+    on-background: null,
+    on-error-container: null,
+    on-primary-container: null,
+    on-primary-fixed: null,
+    on-primary-fixed-variant: null,
+    on-secondary-container: null,
+    on-secondary-fixed: null,
+    on-secondary-fixed-variant: null,
+    on-tertiary: null,
+    on-tertiary-container: null,
+    on-tertiary-fixed: null,
+    on-tertiary-fixed-variant: null,
+    primary-container: null,
+    primary-fixed: null,
+    primary-fixed-dim: null,
+    scrim: null,
+    secondary-container: null,
+    secondary-fixed: null,
+    secondary-fixed-dim: null,
+    surface-bright: null,
+    surface-container: null,
+    surface-container-high: null,
+    surface-container-highest: null,
+    surface-container-low: null,
+    surface-container-lowest: null,
+    surface-dim: null,
+    surface-tint: null,
+    tertiary: null,
+    tertiary-container: null,
+    tertiary-fixed: null,
+    tertiary-fixed-dim: null,
+  );
+}

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

@@ -0,0 +1,16 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function md-sys-elevation-values() {
+  @return (
+    // TBD
+    level0: null,
+    level1: null,
+    level2: null,
+    level3: null,
+    level4: null,
+    level5: null,
+  );
+}

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

@@ -0,0 +1,36 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function md-sys-motion-values() {
+  @return (
+    // TBD
+    duration-extra-long1: null,
+    duration-extra-long2: null,
+    duration-extra-long3: null,
+    duration-extra-long4: null,
+    duration-long1: null,
+    duration-long2: null,
+    duration-long3: null,
+    duration-long4: null,
+    duration-medium1: null,
+    duration-medium2: null,
+    duration-medium3: null,
+    duration-medium4: null,
+    duration-short1: null,
+    duration-short2: null,
+    duration-short3: null,
+    duration-short4: null,
+    easing-emphasized: null,
+    easing-emphasized-accelerate: null,
+    easing-emphasized-decelerate: null,
+    easing-legacy: null,
+    easing-legacy-accelerate: null,
+    easing-legacy-decelerate: null,
+    easing-linear: null,
+    easing-standard: null,
+    easing-standard-accelerate: null,
+    easing-standard-decelerate: null,
+  );
+}

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

@@ -0,0 +1,22 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function  md-sys-shape-values() {
+  @return (
+    // TBD
+    corner-extra-large: null,
+    corner-extra-large-top: null,
+    corner-extra-small: null,
+    corner-extra-small-top: null,
+    corner-full: null,
+    corner-large: null,
+    corner-large-end: null,
+    corner-large-start: null,
+    corner-large-top: null,
+    corner-medium: null,
+    corner-none: null,
+    corner-small: null,
+  );
+}

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

@@ -0,0 +1,15 @@
+//
+// Design system display name: Material 3
+// Design system version: v0.161
+//
+
+@function md-sys-state-values($exclude-hardcoded-values: false) {
+  @return (
+    focus-state-layer-opacity: 0.12,
+    hover-state-layer-opacity: 0.04,
+    pressed-state-layer-opacity: 0.12,
+
+    // TBD
+    dragged-state-layer-opacity: 0.16,
+  );
+}

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

@@ -0,0 +1,68 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'sass:meta';
+
+@function md-sys-typescale-values($config) {
+  // Mapping is according to the old 2014 version of the typography spec.
+  $sys-to-config: (
+    body-large: subheading-1,
+    body-medium: body-1,
+    body-small: caption,
+    display-large: display-4,
+    display-medium: display-4,
+    display-small: display-4,
+    headline-large: display-3,
+    headline-medium: display-2,
+    headline-small: display-1,
+    label-large: subheading-2,
+    label-medium: body-2,
+    label-small: button,
+    title-large: headline,
+    title-medium: headline,
+    title-small: title,
+  );
+
+  // If the config is based on the updated 2018 version of the typography spec, then
+  // use the correct config keys mapping.
+  @if (map.get($config, headline-1) != null) {
+    $sys-to-config: (
+      body-large: body-1,
+      body-medium: body-2,
+      body-small: caption,
+      label-large: subtitle-1,
+      label-medium: subtitle-2,
+      label-small: button,
+      display-large: headline-1,
+      display-medium: headline-1,
+      display-small: headline-1,
+      headline-large: headline-2,
+      headline-medium: headline-3,
+      headline-small: headline-4,
+      title-large: headline-5,
+      title-medium: headline-5,
+      title-small: headline-6,
+    );
+  }
+
+  $typography: ();
+  @each $sys-key, $config-key in $sys-to-config {
+    $font: map.get($config, $config-key, font-family);
+    @if (meta.type-of($font) == 'string') {
+      $font: string.unquote($font);
+    }
+    $line-height: map.get($config, $config-key, line-height);
+    $size: map.get($config, $config-key, font-size);
+    $tracking: map.get($config, $config-key, letter-spacing);
+    $weight: map.get($config, $config-key, font-weight);
+    $typography: map.merge($typography, (
+      #{$sys-key}: $weight $size #{'/'} $line-height $font,
+      #{$sys-key}-font: $font,
+      #{$sys-key}-line-height: $line-height,
+      #{$sys-key}-size: $size,
+      #{$sys-key}-tracking: $tracking,
+      #{$sys-key}-weight: $weight,
+    ));
+  }
+
+  @return $typography;
+}

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

@@ -8,7 +8,7 @@
 // Indicates whether alternative tokens should be used
 $_alternate-tokens: false;
 
-@function md-sys-color-values-dark($palettes) {
+@function md-sys-color-values-dark($palettes: ()) {
   $values: (
     background: map.get($palettes, neutral, 6),
     error: map.get($palettes, error, 80),
@@ -80,7 +80,7 @@ $_alternate-tokens: false;
   @return $values;
 }
 
-@function md-sys-color-values-light($palettes) {
+@function md-sys-color-values-light($palettes: ()) {
   $values: (
     background: map.get($palettes, neutral, 98),
     error: map.get($palettes, error, 40),

package/core/tokens/m3/_md-sys-typescale.scss

@@ -8,7 +8,7 @@
 // Indicates whether alternative tokens should be used
 $_alternate-tokens: false;
 
-@function md-sys-typescale-values($typography) {
+@function md-sys-typescale-values($typography: ()) {
   $plain: map.get($typography, plain);
   $brand: map.get($typography, brand);
   $bold: map.get($typography, bold);