@angular/material 20.0.0-next.5 → 20.0.0-next.6

package/core/selection/pseudo-checkbox/_m3-pseudo-checkbox.scss

@@ -0,0 +1,49 @@
+@use 'sass:map';
+@use '../../style/sass-utils';
+@use '../../tokens/m3-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, pseudo-checkbox);
+
+/// Generates custom tokens for the full variant of mat-pseudo-checkbox.
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @param {Map} $token-slots Possible token slots
+/// @return {Map} A set of custom tokens for the full variant of mat-pseudo-checkbox
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    full-disabled-selected-checkmark-color: map.get($systems, md-sys-color, surface),
+    full-disabled-selected-icon-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    full-disabled-unselected-icon-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    full-selected-checkmark-color: map.get($systems, md-sys-color, on-primary),
+    full-selected-icon-color: map.get($systems, md-sys-color, primary),
+    full-unselected-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+    minimal-disabled-selected-checkmark-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+    minimal-selected-checkmark-color: map.get($systems, md-sys-color, primary),
+  );
+
+  $variant-tokens: (
+    // Color variants:
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      full-selected-checkmark-color: map.get($systems, md-sys-color, on-secondary),
+      full-selected-icon-color: map.get($systems, md-sys-color, secondary),
+      minimal-selected-checkmark-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      full-selected-checkmark-color: map.get($systems, md-sys-color, on-tertiary),
+      full-selected-icon-color: map.get($systems, md-sys-color, tertiary),
+      minimal-selected-checkmark-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      full-selected-checkmark-color: map.get($systems, md-sys-color, on-error),
+      full-selected-icon-color: map.get($systems, md-sys-color, error),
+      minimal-selected-checkmark-color: map.get($systems, md-sys-color, error),
+    )
+  );
+
+  @return m3-utils.namespace($prefix, ($tokens, $variant-tokens), $token-slots);
+}

package/core/selection/pseudo-checkbox/_pseudo-checkbox-theme.scss

@@ -3,18 +3,13 @@
 @use '../../theming/validation';
 @use '../../style/sass-utils';
 @use '../../tokens/token-utils';
-@use '../../tokens/m2/mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
-@use '../../tokens/m2/mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
+@use './m2-pseudo-checkbox';
 
 @mixin _palette-styles($theme, $palette-name) {
   @include sass-utils.current-selector-or-root() {
     @include token-utils.create-token-values-mixed(
-      tokens-mat-full-pseudo-checkbox.$prefix,
-      tokens-mat-full-pseudo-checkbox.get-color-tokens($theme, $palette-name)
-    );
-    @include token-utils.create-token-values-mixed(
-      tokens-mat-minimal-pseudo-checkbox.$prefix,
-      tokens-mat-minimal-pseudo-checkbox.get-color-tokens($theme, $palette-name)
+      m2-pseudo-checkbox.$prefix,
+      m2-pseudo-checkbox.get-color-tokens($theme, $palette-name)
     );
   }
 }
@@ -23,24 +18,10 @@
   @include validation.selector-defined(
     'Calls to Angular Material theme mixins with an M3 theme must be wrapped in a selector'
   );
-  $mat-full-pseudo-checkbox-tokens: token-utils.get-tokens-for(
-    $tokens,
-    tokens-mat-full-pseudo-checkbox.$prefix,
-    $options...
-  );
-  $mat-minimal-pseudo-checkbox-tokens: token-utils.get-tokens-for(
-    $tokens,
-    tokens-mat-minimal-pseudo-checkbox.$prefix,
-    $options...
-  );
-  @include token-utils.create-token-values-mixed(
-    tokens-mat-full-pseudo-checkbox.$prefix,
-    $mat-full-pseudo-checkbox-tokens
-  );
+  $mat-pseudo-checkbox-tokens: token-utils.get-tokens-for(
+    $tokens, m2-pseudo-checkbox.$prefix, $options...);
   @include token-utils.create-token-values-mixed(
-    tokens-mat-minimal-pseudo-checkbox.$prefix,
-    $mat-minimal-pseudo-checkbox-tokens
-  );
+      m2-pseudo-checkbox.$prefix, $mat-pseudo-checkbox-tokens);
 }
 
 /// Outputs base theme styles (styles not dependent on the color, typography, or density settings)
@@ -51,19 +32,10 @@
 
 /// Defines the tokens that will be available in the `overrides` mixin and for docs extraction.
 @function _define-overrides() {
-  $full-pseudo-checkbox-tokens: tokens-mat-full-pseudo-checkbox.get-token-slots();
-  $minimal-pseudo-checkbox-tokens: tokens-mat-minimal-pseudo-checkbox.get-token-slots();
-
   @return (
     (
-      namespace: tokens-mat-full-pseudo-checkbox.$prefix,
-      tokens: $full-pseudo-checkbox-tokens,
-      prefix: 'full-',
-    ),
-    (
-      namespace: tokens-mat-minimal-pseudo-checkbox.$prefix,
-      tokens: $minimal-pseudo-checkbox-tokens,
-      prefix: 'minimal-',
+      namespace: m2-pseudo-checkbox.$prefix,
+      tokens: m2-pseudo-checkbox.get-token-slots(),
     ),
   );
 }

package/core/testing/index.d.ts

@@ -1,3 +1,3 @@
-export { M as MatOptionHarness, O as OptionHarnessFilters } from '../../option-harness.d-047df5c5.js';
-export { M as MatOptgroupHarness, O as OptgroupHarnessFilters } from '../../optgroup-harness.d-fc22ca1c.js';
+export { M as MatOptionHarness, O as OptionHarnessFilters } from '../../option-harness.d-4f143bc0.js';
+export { M as MatOptgroupHarness, O as OptgroupHarnessFilters } from '../../optgroup-harness.d-c52f5a8b.js';
 import '@angular/cdk/testing';

package/core/tokens/_density.scss

@@ -26,25 +26,29 @@ $_density-tokens: (
     (mat, chip): (
       container-height: (32px, 28px, 24px),
     ),
-    (mat, circular-progress): (),
+    (mat, progress-spinner): (),
     (mat, datepicker): (),
     (mat, dialog): (),
     (mat, divider): (),
-    (mat, elevated-card): (),
     (mat, expansion): (
       header-collapsed-state-height: (48px, 44px, 40px, 36px),
       header-expanded-state-height: (64px, 60px, 56px, 48px),
     ),
-    (mat, extended-fab): (),
     (mat, fab): (
       touch-target-display: (block, block, none, none),
     ),
-    (mat, fab-small): (),
-    (mat, filled-button): (
-      touch-target-display: (block, block, none, none),
-      container-height: (40px, 36px, 32px, 28px),
+    (mat, button): (
+      filled-touch-target-display: (block, block, none, none),
+      filled-container-height: (40px, 36px, 32px, 28px),
+      outlined-container-height: (40px, 36px, 32px, 28px),
+      outlined-touch-target-display: (block, block, none, none),
+      protected-touch-target-display: (block, block, none, none),
+      protected-container-height: (40px, 36px, 32px, 28px),
+      text-touch-target-display: (block, block, none, none),
+      text-container-height: (40px, 36px, 32px, 28px),
+      tonal-container-height: (40px, 36px, 32px, 28px),
+      tonal-touch-target-display: (block, block, none, none),
     ),
-    (mat, filled-text-field): (),
     (mat, form-field): (
       container-height: (56px, 52px, 48px, 44px, 40px, 36px),
       filled-label-display: (block, block, none, none, none, none),
@@ -52,7 +56,6 @@ $_density-tokens: (
       filled-with-label-container-padding-top: (24px, 22px, 12px, 10px, 8px, 6px),
       filled-with-label-container-padding-bottom: (8px, 6px, 12px, 10px, 8px, 6px),
     ),
-    (mat, full-pseudo-checkbox): (),
     (mat, grid-list): (),
     (mat, icon): (),
     (mat, icon-button): (
@@ -60,7 +63,7 @@ $_density-tokens: (
       // The size caps out at 24px, because anything lower will be smaller than the icon.
       state-layer-size: (40px, 36px, 32px, 28px, 24px, 24px),
     ),
-    (mat, linear-progress): (),
+    (mat, progress-bar): (),
     (mat, list): (
       list-item-leading-icon-start-space: (16px, 12px, 8px, 4px),
       list-item-leading-icon-end-space: (16px, 12px, 8px, 4px),
@@ -69,65 +72,43 @@ $_density-tokens: (
       list-item-three-line-container-height: (88px, 84px, 80px, 76px, 72px, 56px),
     ),
     (mat, menu): (),
-    (mat, minimal-pseudo-checkbox): (),
     (mat, optgroup): (),
     (mat, option): (),
-    (mat, outlined-button): (
-      container-height: (40px, 36px, 32px, 28px),
-      touch-target-display: (block, block, none, none),
-    ),
-    (mat, outlined-card): (),
-    (mat, outlined-text-field): (),
     (mat, paginator): (
       container-size: (56px, 52px, 48px, 40px),
       form-field-container-height: (40px, 40px, 40px, 40px, 40px, 36px),
       form-field-container-vertical-padding: (8px, 8px, 8px, 8px, 8px, 6px),
       touch-target-display: (block, block, none, none),
     ),
-    (mat, plain-tooltip): (),
-    (mat, protected-button): (
-      touch-target-display: (block, block, none, none),
-      container-height: (40px, 36px, 32px, 28px),
-    ),
+    (mat, tooltip): (),
     (mat, radio): (
       touch-target-display: (block, block, none, none),
       state-layer-size: (40px, 36px, 32px, 28px),
     ),
     (mat, ripple): (),
-    (mat, secondary-navigation-tab): (
+    (mat, tab): (
       container-height: (48px, 44px, 40px, 36px, 32px),
     ),
     (mat, select): (
       arrow-transform: (translateY(-8px), translateY(-8px), none),
     ),
     (mat, sidenav): (),
-    (mat, slide-toggle): (),
     (mat, slider): (),
     (mat, snack-bar): (),
     (mat, sort): (),
-    (mat, standard-button-toggle): (
+    (mat, button-toggle): (
       height: (40px, 40px, 40px, 36px, 24px),
     ),
     (mat, stepper): (
       header-height: (72px, 68px, 64px, 60px, 42px),
     ),
-    (mat, switch): (),
-    (mat, tab-header): (),
-    (mat, tab-indicator): (),
+    (mat, slide-toggle): (),
     (mat, table): (
       header-container-height: (56px, 52px, 48px, 44px, 40px),
       footer-container-height: (52px, 48px, 44px, 40px, 36px),
       row-item-container-height: (52px, 48px, 44px, 40px, 36px),
     ),
-    (mat, text-button): (
-      touch-target-display: (block, block, none, none),
-      container-height: (40px, 36px, 32px, 28px),
-    ),
     (mat, timepicker): (),
-    (mat, tonal-button): (
-      container-height: (40px, 36px, 32px, 28px),
-      touch-target-display: (block, block, none, none),
-    ),
     (mat, toolbar): (
       standard-height: (64px, 60px, 56px, 52px),
       mobile-height: (56px, 52px, 48px, 44px),

package/core/tokens/_m2-tokens.scss

@@ -0,0 +1,131 @@
+@use '../../autocomplete/m2-autocomplete';
+@use '../../badge/m2-badge';
+@use '../../bottom-sheet/m2-bottom-sheet';
+@use '../../button-toggle/m2-button-toggle';
+@use '../../button/m2-button';
+@use '../../button/m2-fab';
+@use '../../button/m2-icon-button';
+@use '../../card/m2-card';
+@use '../../checkbox/m2-checkbox';
+@use '../../chips/m2-chip';
+@use '../../datepicker/m2-datepicker';
+@use '../../dialog/m2-dialog';
+@use '../../divider/m2-divider';
+@use '../../expansion/m2-expansion';
+@use '../../form-field/m2-form-field';
+@use '../../grid-list/m2-grid-list';
+@use '../../icon/m2-icon';
+@use '../../list/m2-list';
+@use '../../menu/m2-menu';
+@use '../../paginator/m2-paginator';
+@use '../../progress-bar/m2-progress-bar';
+@use '../../progress-spinner/m2-progress-spinner';
+@use '../../radio/m2-radio';
+@use '../../select/m2-select';
+@use '../../sidenav/m2-sidenav';
+@use '../../slide-toggle/m2-slide-toggle';
+@use '../../slider/m2-slider';
+@use '../../snack-bar/m2-snack-bar';
+@use '../../sort/m2-sort';
+@use '../../stepper/m2-stepper';
+@use '../../table/m2-table';
+@use '../../tabs/m2-tabs';
+@use '../../timepicker/m2-timepicker';
+@use '../../toolbar/m2-toolbar';
+@use '../../tooltip/m2-tooltip';
+@use '../../tree/m2-tree';
+@use '../m2-app';
+@use '../option/m2-optgroup';
+@use '../option/m2-option';
+@use '../ripple/m2-ripple';
+@use '../selection/pseudo-checkbox/m2-pseudo-checkbox';
+@use '../style/sass-utils';
+@use '../theming/inspection';
+@use 'sass:map';
+@use 'sass:meta';
+
+/// Gets the tokens for the given theme, m2 tokens module, and theming system.
+/// @param {Map} $theme The Angular Material theme object to generate token values from.
+/// @param {String} $module The Sass module containing the token getter functions.
+/// @param {String} $system The theming system to get tokens for. Valid values are: unthemable,
+///     color, typography, density.
+/// @return {Map} The token map by calling the token getter for the given system in the given module
+///    with the given Angular Material theme. Token names are not fully-qualified.
+@function _get-tokens-for-module-and-system($theme, $module, $system) {
+  @if $system == unthemable {
+    @return meta.call(meta.get-function(get-#{$system}-tokens, $module: $module));
+  }
+  @if not inspection.theme-has($theme, $system) {
+    @return ();
+  }
+  @return meta.call(meta.get-function(get-#{$system}-tokens, $module: $module), $theme);
+}
+
+/// Gets the fully qualified tokens map for the given theme and m2 tokens module.
+/// @param {Map} $theme The Angular Material theme object to generate token values from.
+/// @param {String} $module The Sass module containing the token getter functions.
+/// @return {Map} The token map by calling the token getters in the given module with the given
+///     Angular Material theme. Token names are fully-qualified.
+@function _get-tokens-for-module($theme, $module) {
+  $tokens: sass-utils.deep-merge-all(
+    _get-tokens-for-module-and-system($theme, $module, unthemable),
+    _get-tokens-for-module-and-system($theme, $module, color),
+    _get-tokens-for-module-and-system($theme, $module, typography),
+    _get-tokens-for-module-and-system($theme, $module, density)
+  );
+  @return map.set((), map.get(meta.module-variables($module), prefix), $tokens);
+}
+
+/// Gets the full set of M2 tokens for the given theme object.
+/// @param {Map} $theme The Angular Material theme object to generate token values from.
+/// @return {Map} The token map for the given Angular Material theme. Returned format:
+///     (
+///       (fully, qualified, namespace): (
+///         token: value
+///       )
+///     )
+@function m2-tokens-from-theme($theme) {
+  @return sass-utils.deep-merge-all(
+    _get-tokens-for-module($theme, m2-app),
+    _get-tokens-for-module($theme, m2-autocomplete),
+    _get-tokens-for-module($theme, m2-badge),
+    _get-tokens-for-module($theme, m2-bottom-sheet),
+    _get-tokens-for-module($theme, m2-button),
+    _get-tokens-for-module($theme, m2-button-toggle),
+    _get-tokens-for-module($theme, m2-card),
+    _get-tokens-for-module($theme, m2-checkbox),
+    _get-tokens-for-module($theme, m2-chip),
+    _get-tokens-for-module($theme, m2-datepicker),
+    _get-tokens-for-module($theme, m2-dialog),
+    _get-tokens-for-module($theme, m2-divider),
+    _get-tokens-for-module($theme, m2-expansion),
+    _get-tokens-for-module($theme, m2-fab),
+    _get-tokens-for-module($theme, m2-form-field),
+    _get-tokens-for-module($theme, m2-grid-list),
+    _get-tokens-for-module($theme, m2-icon),
+    _get-tokens-for-module($theme, m2-icon-button),
+    _get-tokens-for-module($theme, m2-list),
+    _get-tokens-for-module($theme, m2-menu),
+    _get-tokens-for-module($theme, m2-optgroup),
+    _get-tokens-for-module($theme, m2-option),
+    _get-tokens-for-module($theme, m2-paginator),
+    _get-tokens-for-module($theme, m2-progress-bar),
+    _get-tokens-for-module($theme, m2-progress-spinner),
+    _get-tokens-for-module($theme, m2-pseudo-checkbox),
+    _get-tokens-for-module($theme, m2-radio),
+    _get-tokens-for-module($theme, m2-ripple),
+    _get-tokens-for-module($theme, m2-select),
+    _get-tokens-for-module($theme, m2-sidenav),
+    _get-tokens-for-module($theme, m2-slide-toggle),
+    _get-tokens-for-module($theme, m2-slider),
+    _get-tokens-for-module($theme, m2-snack-bar),
+    _get-tokens-for-module($theme, m2-sort),
+    _get-tokens-for-module($theme, m2-stepper),
+    _get-tokens-for-module($theme, m2-tabs),
+    _get-tokens-for-module($theme, m2-table),
+    _get-tokens-for-module($theme, m2-timepicker),
+    _get-tokens-for-module($theme, m2-toolbar),
+    _get-tokens-for-module($theme, m2-tooltip),
+    _get-tokens-for-module($theme, m2-tree),
+  );
+}

package/core/tokens/_m2-utils.scss

@@ -0,0 +1,109 @@
+@use '../m2/palette';
+@use '../m2/theming';
+@use '../m2/typography';
+@use 'sass:color';
+@use 'sass:math';
+@use 'sass:meta';
+
+$_placeholder-color-palette: theming.define-palette(palette.$red-palette);
+
+// Indicates whether we're building internally. Used for backwards compatibility.
+$private-is-internal-build: false;
+
+// Placeholder color config that can be passed to token getter functions when generating token
+// slots.
+$placeholder-color-config: (
+  primary: $_placeholder-color-palette,
+  accent: $_placeholder-color-palette,
+  warn: $_placeholder-color-palette,
+  is-dark: false,
+  foreground: palette.$light-theme-foreground-palette,
+  background: palette.$light-theme-background-palette,
+);
+
+$_placeholder-typography-level-config: typography.typography-config-level-from-mdc(body1);
+
+// Placeholder typography config that can be passed to token getter functions when generating token
+// slots.
+$placeholder-typography-config: (
+  font-family: 'Roboto, sans-serif',
+  headline-1: $_placeholder-typography-level-config,
+  headline-2: $_placeholder-typography-level-config,
+  headline-3: $_placeholder-typography-level-config,
+  headline-4: $_placeholder-typography-level-config,
+  headline-5: $_placeholder-typography-level-config,
+  headline-6: $_placeholder-typography-level-config,
+  subtitle-1: $_placeholder-typography-level-config,
+  subtitle-2: $_placeholder-typography-level-config,
+  body-1: $_placeholder-typography-level-config,
+  body-2: $_placeholder-typography-level-config,
+  caption: $_placeholder-typography-level-config,
+  button: $_placeholder-typography-level-config,
+  overline: $_placeholder-typography-level-config,
+  subheading-1: $_placeholder-typography-level-config,
+  title: $_placeholder-typography-level-config,
+);
+
+// Placeholder density config that can be passed to token getter functions when generating token
+// slots.
+$placeholder-density-config: 0;
+
+/// 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';
+  }
+
+  // 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));
+}

package/core/tokens/_m3-system.scss

@@ -2,7 +2,7 @@
 @use '../style/sass-utils';
 @use '../theming/config-validation';
 @use '../theming/definition';
-@use './m3/definitions';
+@use './m3';
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:list';
@@ -90,11 +90,11 @@
 /// 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());
+      m3.md-sys-color-values-light(),
+      m3.md-sys-typescale-values(),
+      m3.md-sys-elevation-values(),
+      m3.md-sys-shape-values(),
+      m3.md-sys-state-values());
 
   & {
     @each $name, $value in $overrides {
@@ -145,12 +145,12 @@
 }
 
 @function _generate-sys-colors($ref, $type) {
-  $light-sys-colors: definitions.md-sys-color-values-light($ref);
+  $light-sys-colors: m3.md-sys-color-values-light($ref);
   @if ($type == light) {
     @return $light-sys-colors;
   }
 
-  $dark-sys-colors: definitions.md-sys-color-values-dark($ref);
+  $dark-sys-colors: m3.md-sys-color-values-dark($ref);
   @if ($type == dark) {
     @return $dark-sys-colors;
   }
@@ -185,7 +185,7 @@
   }
 
   & {
-    @each $name, $value in definitions.md-sys-typescale-values($ref) {
+    @each $name, $value in m3.md-sys-typescale-values($ref) {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
   }
@@ -195,7 +195,7 @@
   $shadow-color: map.get(
       $theme, _mat-theming-internals-do-not-access, color-tokens, (mat, theme), shadow);
 
-  @each $name, $value in definitions.md-sys-elevation-values() {
+  @each $name, $value in m3.md-sys-elevation-values() {
     $level: map.get($overrides, $name) or $value;
     $value: elevation.get-box-shadow($level, $shadow-color);
     & {
@@ -206,7 +206,7 @@
 
 @mixin system-level-shape($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
-    @each $name, $value in definitions.md-sys-shape-values() {
+    @each $name, $value in m3.md-sys-shape-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
   }
@@ -214,7 +214,7 @@
 
 @mixin system-level-state($theme: (), $overrides: (), $prefix: definition.$system-level-prefix) {
   & {
-    @each $name, $value in definitions.md-sys-state-values() {
+    @each $name, $value in m3.md-sys-state-values() {
       --#{$prefix}-#{$name}: #{map.get($overrides, $name) or $value};
     }
   }
@@ -237,15 +237,15 @@
 @function create-system-fallbacks() {
   $app-vars: (
     'md-sys-color':
-        _create-system-app-vars-map(definitions.md-sys-color-values-light()),
+        _create-system-app-vars-map(m3.md-sys-color-values-light()),
     'md-sys-typescale':
-        _create-system-app-vars-map(definitions.md-sys-typescale-values()),
+        _create-system-app-vars-map(m3.md-sys-typescale-values()),
     'md-sys-elevation':
-        _create-system-app-vars-map(definitions.md-sys-elevation-values()),
+        _create-system-app-vars-map(m3.md-sys-elevation-values()),
     'md-sys-state':
-        _create-system-app-vars-map(definitions.md-sys-state-values()),
+        _create-system-app-vars-map(m3.md-sys-state-values()),
     'md-sys-shape':
-        _create-system-app-vars-map(definitions.md-sys-shape-values()),
+        _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(