@angular/material 18.0.0-next.5 → 18.0.0-rc.0

package/core/tokens/_token-utils.scss

@@ -1,18 +1,20 @@
 @use 'sass:list';
 @use 'sass:map';
+@use 'sass:meta';
 @use '@material/elevation/elevation-theme' as mdc-elevation-theme;
 @use '@material/theme/custom-properties' as mdc-custom-properties;
 @use '@material/theme/theme' as mdc-theme;
 @use '@material/theme/keys' as mdc-keys;
+@use '@material/tokens/v0_161' as mdc-tokens;
 @use '../style/sass-utils';
-@use '../theming/palette';
-@use '../theming/theming';
-@use '../typography/typography';
+@use '../m2/palette' as m2-palette;
+@use '../m2/theming' as m2-theming;
+@use '../m2/typography' as m2-typography;
 
 // Indicates whether we're building internally. Used for backwards compatibility.
 $private-is-internal-build: false;
 
-$_placeholder-color-palette: theming.define-palette(palette.$red-palette);
+$_placeholder-color-palette: m2-theming.define-palette(m2-palette.$red-palette);
 
 // Placeholder color config that can be passed to token getter functions when generating token
 // slots.
@@ -21,11 +23,11 @@ $placeholder-color-config: (
   accent: $_placeholder-color-palette,
   warn: $_placeholder-color-palette,
   is-dark: false,
-  foreground: palette.$light-theme-foreground-palette,
-  background: palette.$light-theme-background-palette,
+  foreground: m2-palette.$light-theme-foreground-palette,
+  background: m2-palette.$light-theme-background-palette,
 );
 
-$_placeholder-typography-level-config: typography.typography-config-level-from-mdc(body1);
+$_placeholder-typography-level-config: m2-typography.typography-config-level-from-mdc(body1);
 
 // Placeholder typography config that can be passed to token getter functions when generating token
 // slots.
@@ -141,6 +143,17 @@ $_component-prefix: null;
   }
 }
 
+/// Gets all the MDC token values for a specific component. This function serves as single
+/// point at which we directly reference a specific version of the MDC tokens.
+/// @param {String} $component Name of the component for which to get the tokens
+/// @param {Map} $systems The MDC system tokens
+/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
+/// @return {List} Map of token names to values
+@function get-mdc-tokens($component, $systems, $exclude-hardcoded) {
+  $fn: meta.get-function($name: 'md-comp-' + $component + '-values', $module: 'mdc-tokens');
+  @return meta.call($fn, $systems, $exclude-hardcoded);
+}
+
 // MDC doesn't currently handle elevation tokens properly. As a temporary workaround we can combine
 // the elevation and shadow-color tokens into a full box-shadow and use it as the value for the
 // elevation token.
@@ -214,35 +227,149 @@ $_component-prefix: null;
   @return if($emit-overrides-only, $overrides, map.merge($values, $overrides));
 }
 
-/// Emits new token values for the given tokens.
-/// Verifies that the tokens passed in are valid tokens.
+/// Emits new token values for the given token overrides.
+/// Verifies that the overrides passed in are valid tokens.
 /// New token values are emitted under the current selector or root.
-@mixin batch-create-token-values(
-  $tokens: (),
-  $mat-prefix: '',
-  $mdc-prefix: '',
-  $mat-tokens: (),
-  $mdc-tokens: ()
-) {
-  $custom-mat-tokens: ();
-  $custom-mdc-tokens: ();
-
-  $mat-token-names: map.keys($mat-tokens);
-  $mdc-token-names: map.keys($mdc-tokens);
-  $valid-token-names: _get-valid-token-names($mat-tokens, $mdc-tokens);
-
-  @each $name, $value in $tokens {
-    $is-mat-token: list.index($mat-token-names, $name) != null;
-    $is-mdc-token: list.index($mdc-token-names, $name) != null;
-
-    @if ($is-mat-token) {
-      $custom-mat-tokens: map.set($custom-mat-tokens, $name, $value);
+@mixin batch-create-token-values($overrides: (), $token-maps...) {
+  @include _validate-token-overrides($overrides, $token-maps);
+
+  @each $token-map in $token-maps {
+    $prefix: map.get($token-map, prefix);
+    $tokens: map.get($token-map, tokens);
+
+    @each $name, $value in $tokens {
+      $tokens: map.set($tokens, $name, map.get($overrides, $name));
+    }
+
+    @include sass-utils.current-selector-or-root() {
+      @include create-token-values($prefix, $tokens);
+    }
+  }
+}
+
+/// Gets the MDC tokens for the given prefix, M3 token values, and supported token slots.
+/// @param {List} $prefix The token prefix for the given tokens.
+/// @param {Map|(Map, Map)} $values A map of M3 token values for the given prefix.
+///  This param may also be a tuple of maps, the first one representing the default M3 token values,
+//   and the second containing overrides for different color variants.
+//   Single map example:
+//     (token1: green, token2: 2px)
+//   Tuple example:
+//     (
+//       (token1: green, token2: 2px),
+//       (
+//         secondary: (token1: blue),
+//         error: (token1: red),
+//       )
+//     )
+/// @param {Map} $slots A map of token slots, with null value indicating the token is not supported.
+/// @param {String|null} $variant The name of the variant the token values are for.
+/// @return {Map} A map of fully qualified token names to values, for only the supported tokens.
+@function namespace-tokens($prefix, $values, $slots, $variant: null) {
+  $result: ();
+  @if $variant == null and meta.type-of($values) == 'list' and list.length($values == 2) {
+    $variants: list.nth($values, 2);
+    $values: list.nth($values, 1);
+    @each $variant, $overrides in $variants {
+      $result: map.merge($result, namespace-tokens($prefix, $overrides, $slots, $variant));
+    }
+  }
+  $used-token-names: map.keys(_filter-nulls(map.get($slots, $prefix)));
+  $used-m3-tokens: _pick(_filter-nulls($values), $used-token-names);
+  $prefix: if($variant == null, $prefix, list.append($prefix, $variant));
+  @return map.merge($result, ($prefix: $used-m3-tokens));
+}
+
+/// Hardcode the given value, or null if hardcoded values are excluded.
+@function hardcode($value, $exclude-hardcoded) {
+  @return if($exclude-hardcoded, null, $value);
+}
+
+/// Sets all of the standard typography tokens for the given token base name to the given typography
+/// level.
+/// @param {Map} $systems The MDC system tokens
+/// @param {String} $base-name The token base name to get the typography tokens for
+/// @param {String} $typography-level The typography level to base the token values on
+/// @return {Map} A map containing the typography tokens for the given base token name
+@function generate-typography-tokens($systems, $base-name, $typography-level) {
+  $result: ();
+  @each $prop in (font, line-height, size, tracking, weight) {
+    $result: map.set($result, #{$base-name}-#{$prop},
+      map.get($systems, md-sys-typescale, #{$typography-level}-#{$prop}));
+  }
+  @return $result;
+}
+
+/// Maps the values in a map to new values using the given mapping function
+/// @param {Map} $map The maps whose values will be mapped to new values.
+/// @param {Function} $fn The value mapping function.
+/// @param {Map} A new map with its values updated using the mapping function.
+@function map-values($map, $fn) {
+  $result: ();
+  @each $key, $value in $map {
+    $result: map.set($result, $key, meta.call($fn, $value));
+  }
+  @return $result;
+}
+
+/// Renames the keys in a map
+/// @param {Map} $map The map whose keys should be renamed
+/// @param {Map} $rename-keys A map of original key to renamed key to apply to $map
+/// @return {Map} The result of applying the given key renames to the given map.
+@function rename-map-keys($map, $rename-keys) {
+  $result: $map;
+  @each $old-key-name, $new-key-name in $rename-keys {
+    @if map.has-key($map, $old-key-name) {
+      $result: map.set($result, $new-key-name, map.get($map, $old-key-name));
     }
+  }
+  @return $result;
+}
 
-    @if ($is-mdc-token) {
-      $custom-mdc-tokens: map.set($custom-mdc-tokens, $name, $value);
+/// At the time of writing, some color tokens (e.g. disabled state) are defined as a solid color
+/// token and a separate opacity token. This function applies the opacity to the color and drops the
+/// opacity key from the map. Can be removed once b/213331407 is resolved.
+/// @param {Map} $tokens The map of tokens currently being generated
+/// @param {Map} $all-tokens A map of all tokens, including hardcoded values
+/// @param {List} $pairs Pairs of color token names and their opacities. Should be in the shape of
+/// `((color: 'color-key', opacity: 'opacity-key'))`.
+/// @return {Map} The initial tokens with the combined color values.
+@function combine-color-tokens($tokens, $opacity-lookup, $pairs) {
+  $result: $tokens;
+
+  @each $pair in $pairs {
+    $color-key: map.get($pair, color);
+    $opacity-key: map.get($pair, opacity);
+    $color: map.get($tokens, $color-key);
+    $opacity: map.get($opacity-lookup, $opacity-key);
+
+    @if(meta.type-of($color) == 'color') {
+      $result: map.remove($result, $opacity-key);
+      $result: map.set($result, $color-key, rgba($color, $opacity));
+    }
+    @else if($color != null) {
+      $result: map.remove($result, $opacity-key);
+      $combined-color: #{color-mix(in srgb, #{$color} #{($opacity * 100) + '%'}, transparent)};
+      $result: map.set($result, $color-key, $combined-color);
     }
+  }
+
+  @return $result;
+}
 
+/// Verifies that the token overrides exist and are used in one of the given token maps.
+@mixin _validate-token-overrides($overrides: (), $token-maps) {
+  $valid-token-names: ();
+
+  @each $token-map in $token-maps {
+    @each $name, $value in map.get($token-map, tokens) {
+      @if ($value != null and list.index($valid-token-names, $name) == null) {
+        $valid-token-names: list.append($valid-token-names, $name);
+      }
+    }
+  }
+
+  @each $name in map.keys($overrides) {
     @if (list.index($valid-token-names, $name) == null) {
       @error (
         'Invalid token: "' + $name + '"'
@@ -250,22 +377,32 @@ $_component-prefix: null;
       );
     }
   }
+}
 
-  @include sass-utils.current-selector-or-root() {
-    @include create-token-values($mat-prefix, $custom-mat-tokens);
-    @include create-token-values($mdc-prefix, $custom-mdc-tokens);
+/// Picks a submap containing only the given keys out the given map.
+/// @param {Map} $map The map to pick from.
+/// @param {List} $keys The map keys to pick.
+/// @return {Map} A submap containing only the given keys.
+@function _pick($map, $keys) {
+  $result: ();
+  @each $key in $keys {
+    @if map.has-key($map, $key) {
+      $result: map.set($result, $key, map.get($map, $key));
+    }
   }
+  @return $result;
 }
 
-/// Returns the union of token names whose values are not null.
-@function _get-valid-token-names($mat-tokens, $mdc-tokens) {
-  $mat-and-mdc-tokens: map.merge($mat-tokens, $mdc-tokens);
 
-  @each $name, $value in $mat-and-mdc-tokens {
-    @if ($value == null) {
-      $mat-and-mdc-tokens: map.remove($mat-and-mdc-tokens, $name);
+/// Filters keys with a null value out of the map.
+/// @param {Map} $map The map to filter.
+/// @return {Map} The given map with all of the null keys filtered out.
+@function _filter-nulls($map) {
+  $result: ();
+  @each $key, $val in $map {
+    @if $val != null {
+      $result: map.set($result, $key, $val);
     }
   }
-
-  @return map.keys($mat-and-mdc-tokens);
+  @return $result;
 }

package/core/tokens/m2/mat/_chip.scss

@@ -2,7 +2,7 @@
 @use '../../token-utils';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
-@use '../../../theming/palette';
+@use '../../../m2/palette' as m2-palette;
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, chip);
@@ -26,8 +26,8 @@ $prefix: (mat, chip);
   $foreground: null;
   @if $palette-name == null {
     $is-dark: inspection.get-theme-type($theme) == dark;
-    $grey-50: map.get(palette.$grey-palette, 50);
-    $grey-900: map.get(palette.$grey-palette, 900);
+    $grey-50: map.get(m2-palette.$grey-palette, 50);
+    $grey-900: map.get(m2-palette.$grey-palette, 900);
     $foreground: if($is-dark, $grey-50, $grey-900);
   }
   @else {

package/core/tokens/m2/mat/_form-field.scss

@@ -6,7 +6,7 @@
 @use '../../../style/sass-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
-@use '../../../theming/palette';
+@use '../../../m2/palette' as m2-palette;
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mat, form-field);
@@ -34,10 +34,10 @@ $prefix: (mat, form-field);
     // always on a white background inside the dropdown, causing them to blend in.
     // Since we can't change background of the dropdown, we need to explicitly
     // reset the color of the options to something dark.
-    select-option-text-color: if($is-dark, palette.$dark-primary-text, inherit),
+    select-option-text-color: if($is-dark, m2-palette.$dark-primary-text, inherit),
     // Note the spelling of the `GrayText` here which is a system color. See:
     // https://developer.mozilla.org/en-US/docs/Web/CSS/system-color
-    select-disabled-option-text-color: if($is-dark, palette.$dark-disabled-text, GrayText),
+    select-disabled-option-text-color: if($is-dark, m2-palette.$dark-disabled-text, GrayText),
 
     // These tokens are necessary for M3. MDC has them built in already, but:
     // 1. They are too specific, breaking a lot of internal clients.

package/core/tokens/m2/mat/_switch.scss

@@ -38,6 +38,7 @@ $prefix: (mat, switch);
     track-outline-width: 1px,
     track-outline-color: transparent,
     selected-track-outline-width: 1px,
+    selected-track-outline-color: transparent,
     disabled-unselected-track-outline-width: 1px,
     disabled-unselected-track-outline-color: transparent,
   );

package/core/tokens/m2/mdc/_checkbox.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
-@use '../../../theming/palette';
+@use '../../../m2/palette' as m2-palette;
+@use '../../../m2/theming' as m2-theming;
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
@@ -51,7 +52,7 @@ $prefix: (mdc, checkbox);
   $border-color: sass-utils.safe-color-change(
       inspection.get-theme-color($theme, foreground, base), $alpha: 0.54);
   $active-border-color:
-    theming.get-color-from-palette(palette.$gray-palette, if($is-dark, 200, 900));
+    m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
   $selected-checkmark-color: null;
 
   // Ideally we would derive all values directly from the theme, but it causes a lot of regressions

package/core/tokens/m2/mdc/_chip.scss

@@ -5,7 +5,7 @@
 @use '../../../style/sass-utils';
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
-@use '../../../theming/palette';
+@use '../../../m2/palette' as m2-palette;
 
 // The prefix used to generate the fully qualified name for tokens in this file.
 $prefix: (mdc, chip);
@@ -224,8 +224,8 @@ $prefix: (mdc, chip);
 
   @if $palette-name == null {
     $is-dark: inspection.get-theme-type($theme) == dark;
-    $grey-50: map.get(palette.$grey-palette, 50);
-    $grey-900: map.get(palette.$grey-palette, 900);
+    $grey-50: map.get(m2-palette.$grey-palette, 50);
+    $grey-900: map.get(m2-palette.$grey-palette, 900);
     $foreground: if($is-dark, $grey-50, $grey-900);
 
     $surface: inspection.get-theme-color($theme, background, card);

package/core/tokens/m2/mdc/_radio.scss

@@ -1,5 +1,6 @@
 @use 'sass:map';
-@use '../../../theming/palette';
+@use '../../../m2/palette' as m2-palette;
+@use '../../../m2/theming' as m2-theming;
 @use '../../../theming/theming';
 @use '../../../theming/inspection';
 @use '../../../style/sass-utils';
@@ -45,7 +46,7 @@ $prefix: (mdc, radio);
 @function get-color-tokens($theme, $palette-name: accent) {
   $is-dark: inspection.get-theme-type($theme) == dark;
   $palette-color: inspection.get-theme-color($theme, $palette-name, default);
-  $icon-color: theming.get-color-from-palette(palette.$gray-palette, if($is-dark, 200, 900));
+  $icon-color: m2-theming.get-color-from-palette(m2-palette.$gray-palette, if($is-dark, 200, 900));
 
   @return (
     disabled-selected-icon-color: inspection.get-theme-color($theme, foreground, icon, 1),

package/core/tokens/m3/_index.scss

@@ -0,0 +1,161 @@
+@use 'sass:meta';
+@use 'sass:map';
+@use './mat/app' as tokens-mat-app;
+@use './mat/autocomplete' as tokens-mat-autocomplete;
+@use './mat/badge' as tokens-mat-badge;
+@use './mat/text-button' as tokens-mat-text-button;
+@use './mat/protected-button' as tokens-mat-protected-button;
+@use './mat/filled-button' as tokens-mat-filled-button;
+@use './mat/outlined-button' as tokens-mat-outlined-button;
+@use './mat/dialog' as tokens-mat-dialog;
+@use './mat/bottom-sheet' as tokens-mat-bottom-sheet;
+@use './mat/card' as tokens-mat-card;
+@use './mat/chip' as tokens-mat-chip;
+@use './mat/datepicker' as tokens-mat-datepicker;
+@use './mat/divider' as tokens-mat-divider;
+@use './mat/expansion' as tokens-mat-expansion;
+@use './mat/fab' as tokens-mat-fab;
+@use './mat/fab-small' as tokens-mat-fab-small;
+@use './mat/form-field' as tokens-mat-form-field;
+@use './mat/grid-list' as tokens-mat-grid-list;
+@use './mat/icon' as tokens-mat-icon;
+@use './mat/icon-button' as tokens-mat-icon-button;
+@use './mat/list' as tokens-mat-list;
+@use './mat/menu' as tokens-mat-menu;
+@use './mat/option' as tokens-mat-option;
+@use './mat/optgroup' as tokens-mat-optgroup;
+@use './mat/paginator' as tokens-mat-paginator;
+@use './mat/checkbox' as tokens-mat-checkbox;
+@use './mat/full-pseudo-checkbox' as tokens-mat-full-pseudo-checkbox;
+@use './mat/minimal-pseudo-checkbox' as tokens-mat-minimal-pseudo-checkbox;
+@use './mat/radio' as tokens-mat-radio;
+@use './mat/ripple' as tokens-mat-ripple;
+@use './mat/select' as tokens-mat-select;
+@use './mat/sidenav' as tokens-mat-sidenav;
+@use './mat/slider' as tokens-mat-slider;
+@use './mat/switch' as tokens-mat-switch;
+@use './mat/snack-bar' as tokens-mat-snack-bar;
+@use './mat/sort' as tokens-mat-sort;
+@use './mat/standard-button-toggle' as tokens-mat-button-toggle;
+@use './mat/stepper' as tokens-mat-stepper;
+@use './mat/tab-header' as tokens-mat-tab-header;
+@use './mat/table' as tokens-mat-table;
+@use './mat/toolbar' as tokens-mat-toolbar;
+@use './mat/tree' as tokens-mat-tree;
+@use './mdc/checkbox' as tokens-mdc-checkbox;
+@use './mdc/text-button' as tokens-mdc-text-button;
+@use './mdc/protected-button' as tokens-mdc-protected-button;
+@use './mdc/filled-button' as tokens-mdc-filled-button;
+@use './mdc/outlined-button' as tokens-mdc-outlined-button;
+@use './mdc/chip' as tokens-mdc-chip;
+@use './mdc/circular-progress' as tokens-mdc-circular-progress;
+@use './mdc/dialog' as tokens-mdc-dialog;
+@use './mdc/elevated-card' as tokens-mdc-elevated-card;
+@use './mdc/extended-fab' as tokens-mdc-extended-fab;
+@use './mdc/fab' as tokens-mdc-fab;
+@use './mdc/fab-small' as tokens-mdc-fab-small;
+@use './mdc/form-field' as tokens-mdc-form-field;
+@use './mdc/filled-text-field' as tokens-mdc-filled-text-field;
+@use './mdc/icon-button' as tokens-mdc-icon-button;
+@use './mdc/linear-progress' as tokens-mdc-linear-progress;
+@use './mdc/list' as tokens-mdc-list;
+@use './mdc/outlined-card' as tokens-mdc-outlined-card;
+@use './mdc/outlined-text-field' as tokens-mdc-outlined-text-field;
+@use './mdc/plain-tooltip' as tokens-mdc-plain-tooltip;
+@use './mdc/radio' as tokens-mdc-radio;
+@use './mdc/slider' as tokens-mdc-slider;
+@use './mdc/snack-bar' as tokens-mdc-snack-bar;
+@use './mdc/switch' as tokens-mdc-switch;
+@use './mdc/tab' as tokens-mdc-tab;
+@use './mdc/tab-indicator' as tokens-mdc-tab-indicator;
+
+$_module-names: (
+  // Custom tokens
+  tokens-mat-app,
+  tokens-mat-autocomplete,
+  tokens-mat-badge,
+  tokens-mat-bottom-sheet,
+  tokens-mat-button-toggle,
+  tokens-mat-card,
+  tokens-mat-chip,
+  tokens-mat-datepicker,
+  tokens-mat-dialog,
+  tokens-mat-divider,
+  tokens-mat-expansion,
+  tokens-mat-fab,
+  tokens-mat-fab-small,
+  tokens-mat-filled-button,
+  tokens-mat-form-field,
+  tokens-mat-grid-list,
+  tokens-mat-icon-button,
+  tokens-mat-icon,
+  tokens-mat-menu,
+  tokens-mat-optgroup,
+  tokens-mat-option,
+  tokens-mat-outlined-button,
+  tokens-mat-paginator,
+  tokens-mat-checkbox,
+  tokens-mat-full-pseudo-checkbox,
+  tokens-mat-list,
+  tokens-mat-minimal-pseudo-checkbox,
+  tokens-mat-protected-button,
+  tokens-mat-radio,
+  tokens-mat-ripple,
+  tokens-mat-select,
+  tokens-mat-sidenav,
+  tokens-mat-slider,
+  tokens-mat-switch,
+  tokens-mat-snack-bar,
+  tokens-mat-sort,
+  tokens-mat-stepper,
+  tokens-mat-tab-header,
+  tokens-mat-table,
+  tokens-mat-text-button,
+  tokens-mat-toolbar,
+  tokens-mat-tree,
+
+  // MDC tokens
+  tokens-mdc-checkbox,
+  tokens-mdc-chip,
+  tokens-mdc-text-button,
+  tokens-mdc-protected-button,
+  tokens-mdc-filled-button,
+  tokens-mdc-outlined-button,
+  tokens-mdc-chip,
+  tokens-mdc-circular-progress,
+  tokens-mdc-dialog,
+  tokens-mdc-elevated-card,
+  tokens-mdc-extended-fab,
+  tokens-mdc-fab,
+  tokens-mdc-fab-small,
+  tokens-mdc-form-field,
+  tokens-mdc-filled-text-field,
+  tokens-mdc-icon-button,
+  tokens-mdc-linear-progress,
+  tokens-mdc-list,
+  tokens-mdc-outlined-card,
+  tokens-mdc-outlined-text-field,
+  tokens-mdc-plain-tooltip,
+  tokens-mdc-radio,
+  tokens-mdc-slider,
+  tokens-mdc-snack-bar,
+  tokens-mdc-switch,
+  tokens-mdc-tab,
+  tokens-mdc-tab-indicator,
+);
+
+/// Gets the full set of M3 tokens for the given theme object.
+/// @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} Full set of M3 tokens
+@function get-m3-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ();
+
+  @each $module-name in $_module-names {
+    $fn: meta.get-function($name: 'get-tokens', $module: $module-name);
+    $tokens: map.merge($tokens, meta.call($fn, $systems, $exclude-hardcoded, $token-slots));
+  }
+
+  @return $tokens;
+}

package/core/tokens/m3/mat/_app.scss

@@ -0,0 +1,19 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, app);
+
+/// Generates custom tokens for the app.
+/// @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 app
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    background-color: map.get($systems, md-sys-color, background),
+    text-color: map.get($systems, md-sys-color, on-background),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mat/_autocomplete.scss

@@ -0,0 +1,22 @@
+@use 'sass:map';
+@use '@material/elevation/elevation-theme' as mdc-elevation;
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, autocomplete);
+
+/// Generates custom tokens for the mat-autocomplete.
+/// @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 mat-autocomplete
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    background-color: map.get($systems, md-sys-color, surface-container),
+    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+    container-elevation-shadow:
+      token-utils.hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mat/_badge.scss

@@ -0,0 +1,77 @@
+@use 'sass:map';
+@use '../../../style/sass-utils';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, badge);
+
+/// Generates custom tokens for the mat-badge.
+/// @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 mat-badge
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+    background-color: map.get($systems, md-sys-color, error),
+    text-color: map.get($systems, md-sys-color, on-error),
+    disabled-state-background-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, error),
+      $alpha: 0.38,
+    ),
+    disabled-state-text-color: map.get($systems, md-sys-color, on-error),
+    text-font: map.get($systems, md-sys-typescale, label-small-font),
+    text-size: map.get($systems, md-sys-typescale, label-small-size),
+    text-weight: map.get($systems, md-sys-typescale, label-small-weight),
+    small-size-text-size: token-utils.hardcode(0, $exclude-hardcoded),
+    container-shape: map.get($systems, md-sys-shape, corner-full),
+    container-size: token-utils.hardcode(16px, $exclude-hardcoded),
+    legacy-container-size: token-utils.hardcode(unset, $exclude-hardcoded),
+    legacy-small-size-container-size: token-utils.hardcode(unset, $exclude-hardcoded),
+    small-size-container-size: token-utils.hardcode(6px, $exclude-hardcoded),
+    container-padding: token-utils.hardcode(0 4px, $exclude-hardcoded),
+    small-size-container-padding: token-utils.hardcode(0, $exclude-hardcoded),
+    container-offset: token-utils.hardcode(-12px 0, $exclude-hardcoded),
+    small-size-container-offset: token-utils.hardcode(-6px 0, $exclude-hardcoded),
+    container-overlap-offset: token-utils.hardcode(-12px, $exclude-hardcoded),
+    small-size-container-overlap-offset: token-utils.hardcode(-6px, $exclude-hardcoded),
+
+    // This size isn't in the M3 spec so we emit the same values as for `medium`.
+    large-size-container-size: token-utils.hardcode(16px, $exclude-hardcoded),
+    large-size-container-offset: token-utils.hardcode(-12px 0, $exclude-hardcoded),
+    large-size-container-overlap-offset: token-utils.hardcode(-12px, $exclude-hardcoded),
+    large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
+    large-size-container-padding: token-utils.hardcode(0 4px, $exclude-hardcoded),
+    legacy-large-size-container-size: token-utils.hardcode(unset, $exclude-hardcoded),
+  ), (
+    primary: (
+      background-color: map.get($systems, md-sys-color, primary),
+      text-color: map.get($systems, md-sys-color, on-primary),
+      disabled-state-background-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, primary),
+        $alpha: 0.38,
+      ),
+      disabled-state-text-color: map.get($systems, md-sys-color, on-primary),
+    ),
+    secondary: (
+      background-color: map.get($systems, md-sys-color, secondary),
+      text-color: map.get($systems, md-sys-color, on-secondary),
+      disabled-state-background-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, secondary),
+        $alpha: 0.38,
+      ),
+      disabled-state-text-color: map.get($systems, md-sys-color, on-secondary),
+    ),
+    tertiary: (
+      background-color: map.get($systems, md-sys-color, tertiary),
+      text-color: map.get($systems, md-sys-color, on-tertiary),
+      disabled-state-background-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, tertiary),
+        $alpha: 0.38,
+      ),
+      disabled-state-text-color: map.get($systems, md-sys-color, on-tertiary),
+    ),
+    error: () // Default, no overrides needed
+  ));
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}