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

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

@@ -0,0 +1,79 @@
+@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, stepper);
+
+/// Generates custom tokens for the mat-stepper.
+/// @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-stepper
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    (
+      container-color: map.get($systems, md-sys-color, surface),
+      line-color: map.get($systems, md-sys-color, outline-variant),
+      header-hover-state-layer-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, inverse-surface),
+        $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
+      ),
+      header-focus-state-layer-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, inverse-surface),
+        $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
+      ),
+      header-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+      header-optional-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+      header-selected-state-label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+      header-icon-background-color: map.get($systems, md-sys-color, on-surface-variant),
+      header-icon-foreground-color: map.get($systems, md-sys-color, surface),
+      header-edit-state-icon-background-color: map.get($systems, md-sys-color, primary),
+      header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
+      header-error-state-label-text-color: map.get($systems, md-sys-color, error),
+      header-error-state-icon-foreground-color: map.get($systems, md-sys-color, error),
+      header-error-state-icon-background-color:
+        token-utils.hardcode(transparent, $exclude-hardcoded),
+      container-text-font: map.get($systems, md-sys-typescale, body-medium-font),
+      header-label-text-font: map.get($systems, md-sys-typescale, title-small-font),
+      header-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
+      header-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
+      header-error-state-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
+      header-focus-state-layer-shape: map.get($systems, md-sys-shape, corner-medium),
+      header-hover-state-layer-shape: map.get($systems, md-sys-shape, corner-medium),
+      header-selected-state-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
+      header-selected-state-label-text-weight: map.get(
+          $systems, md-sys-typescale, title-small-weight),
+      header-selected-state-icon-background-color: map.get($systems, md-sys-color, primary),
+      header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
+    ), (
+      // Color variants
+      primary: (
+        header-edit-state-icon-background-color: map.get($systems, md-sys-color, primary),
+        header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
+        header-selected-state-icon-background-color: map.get($systems, md-sys-color, primary),
+        header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-primary),
+      ),
+      secondary: (
+        header-edit-state-icon-background-color: map.get($systems, md-sys-color, secondary),
+        header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-secondary),
+        header-selected-state-icon-background-color: map.get($systems, md-sys-color, secondary),
+        header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-secondary),
+      ),
+      tertiary: (
+        header-edit-state-icon-background-color: map.get($systems, md-sys-color, tertiary),
+        header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-tertiary),
+        header-selected-state-icon-background-color: map.get($systems, md-sys-color, tertiary),
+        header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-tertiary),
+      ),
+      error: (
+        header-edit-state-icon-background-color: map.get($systems, md-sys-color, error),
+        header-edit-state-icon-foreground-color: map.get($systems, md-sys-color, on-error),
+        header-selected-state-icon-background-color: map.get($systems, md-sys-color, error),
+        header-selected-state-icon-foreground-color: map.get($systems, md-sys-color, on-error),
+      )
+    )
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

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

@@ -0,0 +1,45 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, switch);
+
+/// Generates custom tokens for the mat-slide-toggle.
+/// @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-slide-toggle
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    disabled-selected-handle-opacity: token-utils.hardcode(1, $exclude-hardcoded),
+    disabled-unselected-handle-opacity: token-utils.hardcode(0.38, $exclude-hardcoded),
+    unselected-handle-size: token-utils.hardcode(16px, $exclude-hardcoded),
+    selected-handle-size: token-utils.hardcode(24px, $exclude-hardcoded),
+    with-icon-handle-size: token-utils.hardcode(24px, $exclude-hardcoded),
+    pressed-handle-size: token-utils.hardcode(28px, $exclude-hardcoded),
+    selected-handle-horizontal-margin: token-utils.hardcode(0 24px, $exclude-hardcoded),
+    selected-with-icon-handle-horizontal-margin: token-utils.hardcode(0 24px, $exclude-hardcoded),
+    selected-pressed-handle-horizontal-margin: token-utils.hardcode(0 22px, $exclude-hardcoded),
+    unselected-handle-horizontal-margin: token-utils.hardcode(0 8px, $exclude-hardcoded),
+    unselected-with-icon-handle-horizontal-margin: token-utils.hardcode(0 4px, $exclude-hardcoded),
+    unselected-pressed-handle-horizontal-margin: token-utils.hardcode(0 2px, $exclude-hardcoded),
+    // The hidden and visible track represent whichever track is visible or
+    // hidden in the ui. This could be the .mdc-switch__track :before or
+    // :after depending on whether the switch is selected or unselected.
+    //
+    // The m2 slide-toggle uses transforms to hide & show the tracks while
+    // the m3 slide-toggle uses opacity.
+    visible-track-opacity: token-utils.hardcode(1, $exclude-hardcoded),
+    hidden-track-opacity: token-utils.hardcode(0, $exclude-hardcoded),
+    visible-track-transition: token-utils.hardcode(opacity 75ms, $exclude-hardcoded),
+    hidden-track-transition: token-utils.hardcode(opacity 75ms, $exclude-hardcoded),
+    track-outline-width: token-utils.hardcode(2px, $exclude-hardcoded),
+    track-outline-color:  map.get($systems, md-sys-color, outline),
+    selected-track-outline-width: token-utils.hardcode(2px, $exclude-hardcoded),
+    selected-track-outline-color: token-utils.hardcode(transparent, $exclude-hardcoded),
+    disabled-unselected-track-outline-width: token-utils.hardcode(2px, $exclude-hardcoded),
+    disabled-unselected-track-outline-color: map.get($systems, md-sys-color, on-surface),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mat/_tab-header.scss

@@ -0,0 +1,51 @@
+@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, tab-header);
+
+/// Generates custom tokens for the mat-tab-header.
+/// @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-tab-header
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: sass-utils.merge-all(
+    token-utils.generate-typography-tokens($systems, label-text, title-small),
+    (
+      divider-color: map.get($systems, md-sys-color, surface-variant),
+      divider-height: token-utils.hardcode(1px, $exclude-hardcoded),
+      disabled-ripple-color: null, // TODO(mmalerba): Figure out correct value.
+      pagination-icon-color: map.get($systems, md-sys-color, on-surface),
+      inactive-label-text-color: map.get($systems, md-sys-color, on-surface),
+      active-label-text-color: map.get($systems, md-sys-color, on-surface),
+      active-ripple-color: map.get($systems, md-sys-color, on-surface),
+      inactive-ripple-color: map.get($systems, md-sys-color, on-surface),
+      inactive-focus-label-text-color: map.get($systems, md-sys-color, on-surface),
+      inactive-hover-label-text-color: map.get($systems, md-sys-color, on-surface),
+      active-focus-label-text-color: map.get($systems, md-sys-color, on-surface),
+      active-hover-label-text-color: map.get($systems, md-sys-color, on-surface),
+      active-focus-indicator-color: map.get($systems, md-sys-color, primary),
+      active-hover-indicator-color: map.get($systems, md-sys-color, primary),
+    ),
+  ), (
+    // Color variants
+    primary: (), // Default, no overrides needed
+    secondary: (
+      active-focus-indicator-color: map.get($systems, md-sys-color, secondary),
+      active-hover-indicator-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      active-focus-indicator-color: map.get($systems, md-sys-color, tertiary),
+      active-hover-indicator-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      active-focus-indicator-color: map.get($systems, md-sys-color, error),
+      active-hover-indicator-color: map.get($systems, md-sys-color, error),
+    )
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}
+

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

@@ -0,0 +1,28 @@
+@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, table);
+
+/// Generates custom tokens for the mat-table.
+/// @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-table
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: sass-utils.merge-all(
+    token-utils.generate-typography-tokens($systems, header-headline, title-small),
+    token-utils.generate-typography-tokens($systems, row-item-label-text, body-medium),
+    token-utils.generate-typography-tokens($systems, footer-supporting-text, body-medium),
+    (
+      row-item-outline-width: token-utils.hardcode(1px, $exclude-hardcoded),
+      background-color: map.get($systems, md-sys-color, surface),
+      header-headline-color: map.get($systems, md-sys-color, on-surface),
+      row-item-label-text-color: map.get($systems, md-sys-color, on-surface),
+      row-item-outline-color: map.get($systems, md-sys-color, outline-variant),
+    ),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mat/_text-button.scss

@@ -0,0 +1,55 @@
+@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, text-button);
+
+/// Generates custom tokens for the mat-button.
+/// @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-button
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+    horizontal-padding: token-utils.hardcode(12px, $exclude-hardcoded),
+    with-icon-horizontal-padding: token-utils.hardcode(16px, $exclude-hardcoded),
+    icon-spacing: token-utils.hardcode(8px, $exclude-hardcoded),
+    icon-offset: token-utils.hardcode(-4px, $exclude-hardcoded),
+    state-layer-color: map.get($systems, md-sys-color, primary),
+    disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    ripple-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, primary),
+      $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+    ),
+    hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+    focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+    pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      state-layer-color: map.get($systems, md-sys-color, secondary),
+      ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, secondary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      )
+    ),
+    tertiary: (
+      state-layer-color: map.get($systems, md-sys-color, tertiary),
+      ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, tertiary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      )
+    ),
+    error: (
+      state-layer-color: map.get($systems, md-sys-color, error),
+      ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, error),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      )
+    )
+  ));
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

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

@@ -0,0 +1,23 @@
+@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, toolbar);
+
+/// Generates custom tokens for the mat-toolbar.
+/// @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-toolbar
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: sass-utils.merge-all(
+    token-utils.generate-typography-tokens($systems, title-text, title-large),
+    (
+      container-background-color: map.get($systems, md-sys-color, surface),
+      container-text-color: map.get($systems, md-sys-color, on-surface),
+    )
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

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

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

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

@@ -0,0 +1,110 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, checkbox);
+
+/// Generates the tokens for MDC 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 tokens for the MDC checkbox
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('checkbox', $systems, $exclude-hardcoded);
+  $variant-tokens: (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      selected-container-color: map.get($systems, md-sys-color, secondary),
+      selected-focus-container-color: map.get($systems, md-sys-color, secondary),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-secondary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-container-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-secondary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-icon-color: map.get($systems, md-sys-color, on-secondary),
+      selected-pressed-container-color: map.get($systems, md-sys-color, secondary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-secondary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      selected-container-color: map.get($systems, md-sys-color, tertiary),
+      selected-focus-container-color: map.get($systems, md-sys-color, tertiary),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-container-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      selected-pressed-container-color: map.get($systems, md-sys-color, tertiary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      selected-container-color: map.get($systems, md-sys-color, error),
+      selected-focus-container-color: map.get($systems, md-sys-color, error),
+      selected-focus-icon-color: map.get($systems, md-sys-color, on-error),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-hover-container-color: map.get($systems, md-sys-color, error),
+      selected-hover-icon-color: map.get($systems, md-sys-color, on-error),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-icon-color: map.get($systems, md-sys-color, on-error),
+      selected-pressed-container-color: map.get($systems, md-sys-color, error),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, on-error),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, error),
+    )
+  );
+
+  @return token-utils.namespace-tokens(
+    $prefix,
+    (
+      _fix-tokens($mdc-tokens),
+      token-utils.map-values($variant-tokens, meta.get-function(_fix-tokens))
+    ),
+    $token-slots
+  );
+}
+
+/// Renames the official checkbox tokens to match the names actually used in MDC's code (which are
+/// different). This is a temporary workaround until MDC updates to use the correct names for the
+/// tokens.
+/// @param {Map} $tokens The map of checkbox tokens with the official tokens names
+/// @param {Map} $all-tokens Map of all checkbox tokens, including hardcoded values.
+/// This is necessary in order to do opacity lookups.
+/// @return {Map} The given tokens, renamed to be compatible with MDC's token implementation.
+@function _fix-tokens($tokens) {
+  // Need to get the hardcoded values, because they include opacities that are used for the disabled
+  // state.
+  $hardcoded-tokens: token-utils.get-mdc-tokens('checkbox', (), false);
+
+  $rename-keys: (
+    selected-icon-color: selected-checkmark-color,
+    selected-disabled-icon-color: disabled-selected-checkmark-color,
+    selected-container-color: selected-icon-color,
+    selected-hover-container-color: selected-hover-icon-color,
+    selected-disabled-container-color: disabled-selected-icon-color,
+    selected-disabled-container-opacity: disabled-selected-icon-opacity,
+    selected-focus-container-color: selected-focus-icon-color,
+    selected-pressed-container-color: selected-pressed-icon-color,
+    unselected-disabled-outline-color: disabled-unselected-icon-color,
+    unselected-disabled-container-opacity: disabled-unselected-icon-opacity,
+    unselected-focus-outline-color: unselected-focus-icon-color,
+    unselected-hover-outline-color: unselected-hover-icon-color,
+    unselected-outline-color: unselected-icon-color,
+    unselected-pressed-outline-color: unselected-pressed-icon-color
+  );
+
+  $remapped-tokens: token-utils.rename-map-keys($tokens, $rename-keys);
+  $remapped-hardcoded-tokens: token-utils.rename-map-keys($hardcoded-tokens, $rename-keys);
+
+  @return token-utils.combine-color-tokens($remapped-tokens, $remapped-hardcoded-tokens, (
+    (
+      color: disabled-selected-icon-color,
+      opacity: disabled-selected-icon-opacity,
+    ),
+    (
+      color: disabled-unselected-icon-color,
+      opacity: disabled-unselected-icon-opacity,
+    ),
+  ));
+}

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

@@ -0,0 +1,91 @@
+@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: (mdc, chip);
+
+/// Generates the tokens for MDC chip
+/// @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 tokens for the MDC chip
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  // MDC has a chip component, but they seem to have made up the tokens rather than using ones
+  // generated from the token database, therefore we need a custom token function for it.
+  $tokens: sass-utils.merge-all(
+    token-utils.generate-typography-tokens($systems, label-text, label-large),
+    (
+      container-shape: token-utils.hardcode((
+        family: rounded,
+        radius: 8px,
+      ), $exclude-hardcoded),
+      with-avatar-avatar-size: token-utils.hardcode(24px, $exclude-hardcoded),
+      label-text-color: map.get($systems, md-sys-color, on-surface-variant),
+      disabled-label-text-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: 0.38,
+      ),
+      with-icon-icon-size: token-utils.hardcode(18px, $exclude-hardcoded),
+      with-icon-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+      with-icon-disabled-icon-color: map.get($systems, md-sys-color, on-surface),
+      with-icon-selected-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+      with-trailing-icon-trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+      with-trailing-icon-disabled-trailing-icon-color: map.get($systems, md-sys-color, on-surface),
+      focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
+      focus-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+      outline-width: token-utils.hardcode(1px, $exclude-hardcoded),
+      outline-color: map.get($systems, md-sys-color, outline),
+      disabled-outline-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: 0.12,
+      ),
+      focus-outline-color: map.get($systems, md-sys-color, on-surface-variant),
+      hover-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+      hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+      with-avatar-disabled-avatar-opacity: token-utils.hardcode(0.38, $exclude-hardcoded),
+      elevated-selected-container-color: map.get($systems, md-sys-color, secondary-container),
+      flat-selected-outline-width: token-utils.hardcode(0, $exclude-hardcoded),
+      selected-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
+      flat-disabled-selected-container-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: 0.12,
+      ),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-hover-state-layer-opacity:
+        map.get($systems, md-sys-state, hover-state-layer-opacity),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+      selected-focus-state-layer-opacity:
+        map.get($systems, md-sys-state, focus-state-layer-opacity),
+      with-icon-disabled-icon-opacity: token-utils.hardcode(0.38, $exclude-hardcoded),
+      with-trailing-icon-disabled-trailing-icon-opacity:
+        token-utils.hardcode(0.38, $exclude-hardcoded),
+    ),
+  ), (
+    // Color variants:
+    primary: (
+      with-icon-selected-icon-color: map.get($systems, md-sys-color, on-primary-container),
+      elevated-selected-container-color: map.get($systems, md-sys-color, primary-container),
+      selected-label-text-color: map.get($systems, md-sys-color, on-primary-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-primary-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-primary-container),
+    ),
+    secondary: (), // Default, no overrides needed.
+    tertiary: (
+      with-icon-selected-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      elevated-selected-container-color: map.get($systems, md-sys-color, tertiary-container),
+      selected-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+    ),
+    error: (
+      with-icon-selected-icon-color: map.get($systems, md-sys-color, on-error-container),
+      elevated-selected-container-color: map.get($systems, md-sys-color, error-container),
+      selected-label-text-color: map.get($systems, md-sys-color, on-error-container),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-error-container),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-error-container),
+    )
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mdc/_circular-progress.scss

@@ -0,0 +1,29 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, circular-progress);
+
+/// Generates the tokens for MDC circular-progress
+/// @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 tokens for the MDC circular-progress
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens:
+    token-utils.get-mdc-tokens('circular-progress-indicator', $systems, $exclude-hardcoded);
+  $variant-tokens: (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      active-indicator-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      active-indicator-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      active-indicator-color: map.get($systems, md-sys-color, error),
+    )
+  );
+
+  @return token-utils.namespace-tokens($prefix, ($mdc-tokens, $variant-tokens), $token-slots);
+}

package/core/tokens/m3/mdc/_dialog.scss

@@ -0,0 +1,39 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, dialog);
+
+/// Generates the tokens for MDC dialog
+/// @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 tokens for the MDC dialog
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: token-utils.get-mdc-tokens('dialog', $systems, $exclude-hardcoded);
+  $tokens: token-utils.rename-map-keys($tokens, (
+    headline-color: subhead-color,
+    headline-font: subhead-font,
+    headline-line-height: subhead-line-height,
+    headline-size: subhead-size,
+    headline-tracking: subhead-tracking,
+    headline-weight: subhead-weight,
+  ));
+
+  @if map.get($tokens, container-elevation) != null {
+    $tokens: map.merge($tokens, (
+      // The spec has the dialog at an elevation of 3 which is consistent with the current
+      // version of the tokens (0_161), however both the designs and MDC's implementation
+      // have the elevation set to 0. Set it manually to 0 here since the value in the
+      // exported tokens is likely outdated.
+      container-elevation: 0,
+
+      // This color needs to be supplied for MDC to produce the shadow. Technically we don't
+      // have to provide it since the elevation is set to 0 above, but we do it in case
+      // the value changes in the future.
+      container-shadow-color: #000,
+    ));
+  }
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mdc/_elevated-card.scss

@@ -0,0 +1,15 @@
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, elevated-card);
+
+/// Generates the tokens for MDC elevated-card
+/// @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 tokens for the MDC elevated-card
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('elevated-card', $systems, $exclude-hardcoded);
+
+  @return token-utils.namespace-tokens($prefix, $mdc-tokens, $token-slots);
+}

package/core/tokens/m3/mdc/_extended-fab.scss

@@ -0,0 +1,21 @@
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, extended-fab);
+
+/// Generates the tokens for MDC extended-fab
+/// @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 tokens for the MDC extended-fab
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('extended-fab-primary', $systems, $exclude-hardcoded);
+  $variant-tokens: (
+    // Color variants
+    primary: (), // Default, no overrides needed.
+    secondary: token-utils.get-mdc-tokens('extended-fab-secondary', $systems, $exclude-hardcoded),
+    tertiary: token-utils.get-mdc-tokens('extended-fab-tertiary', $systems, $exclude-hardcoded)
+  );
+
+  @return token-utils.namespace-tokens($prefix, ($mdc-tokens, $variant-tokens), $token-slots);
+}

package/core/tokens/m3/mdc/_fab-small.scss

@@ -0,0 +1,21 @@
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, fab-small);
+
+/// Generates the tokens for MDC fab-small
+/// @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 tokens for the MDC fab-small
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('fab-primary-small', $systems, $exclude-hardcoded);
+  $variant-tokens: (
+    // Color variants
+    primary: (), // Default, no overrides needed.
+    secondary: token-utils.get-mdc-tokens('fab-secondary-small', $systems, $exclude-hardcoded),
+    tertiary: token-utils.get-mdc-tokens('fab-tertiary-small', $systems, $exclude-hardcoded)
+  );
+
+  @return token-utils.namespace-tokens($prefix, ($mdc-tokens, $variant-tokens), $token-slots);
+}