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

package/core/tokens/m3/mdc/_filled-text-field.scss

@@ -0,0 +1,92 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, filled-text-field);
+
+/// Generates the tokens for MDC filled-text-field
+/// @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 filled-text-field
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('filled-text-field', $systems, $exclude-hardcoded);
+  $variant-tokens: (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      caret-color: map.get($systems, md-sys-color, secondary),
+      focus-active-indicator-color: map.get($systems, md-sys-color, secondary),
+      focus-label-text-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      caret-color: map.get($systems, md-sys-color, tertiary),
+      focus-active-indicator-color: map.get($systems, md-sys-color, tertiary),
+      focus-label-text-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      caret-color: map.get($systems, md-sys-color, error),
+      focus-active-indicator-color: map.get($systems, md-sys-color, error),
+      focus-label-text-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);
+}
+
+
+/// Fixes inconsistent values in the filled text field tokens so that they can produce valid
+/// styles.
+/// @param {Map} $initial-tokens Map of filled text field tokens currently being generated.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-tokens($initial-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('filled-text-field', (), false);
+
+  $tokens: token-utils.combine-color-tokens($initial-tokens, $hardcoded-tokens, (
+    (
+      color: disabled-active-indicator-color,
+      opacity: disabled-active-indicator-opacity
+    ),
+    (
+      color: disabled-container-color,
+      opacity: disabled-container-opacity
+    ),
+    (
+      color: disabled-input-text-color,
+      opacity: disabled-input-text-opacity
+    ),
+    (
+      color: disabled-label-text-color,
+      opacity: disabled-label-text-opacity
+    ),
+    (
+      color: disabled-leading-icon-color,
+      opacity: disabled-leading-icon-opacity
+    ),
+    (
+      color: disabled-supporting-text-color,
+      opacity: disabled-supporting-text-opacity
+    ),
+    (
+      color: disabled-trailing-icon-color,
+      opacity: disabled-trailing-icon-opacity
+    )
+  ));
+
+  $container-shape: map.get($tokens, container-shape);
+
+  // The M2 token slots define a single `container-shape` slot while the M3 tokens provide a list
+  // of shapes (e.g. top/bottom/left/right). Extract the first value so it matches the expected
+  // token slot in M2.
+  @if meta.type-of($container-shape) == 'list' {
+    $tokens: map.set($tokens, container-shape, list.nth($container-shape, 1));
+  }
+
+  @return $tokens;
+}

package/core/tokens/m3/mdc/_form-field.scss

@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, form-field);
+
+/// Generates the tokens for MDC form-field
+/// @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 form-field
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    // TODO: MDC currently doesn't provide tokens for the form field so we need to
+    // define them ourselves. Clean this up once b/246297033 is resolved.
+    label-text-color: map.get($systems, md-sys-color, on-surface),
+    label-text-font: map.get($systems, md-sys-typescale, body-medium-font),
+    label-text-line-height: map.get($systems, md-sys-typescale, body-medium-line-height),
+    label-text-size: map.get($systems, md-sys-typescale, body-medium-size),
+    label-text-tracking: map.get($systems, md-sys-typescale, body-medium-tracking),
+    label-text-weight: map.get($systems, md-sys-typescale, body-medium-weight),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mdc/_icon-button.scss

@@ -0,0 +1,39 @@
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, icon-button);
+
+/// Generates the tokens for MDC icon-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 tokens for the MDC icon-button
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('icon-button', $systems, $exclude-hardcoded);
+
+  @return token-utils.namespace-tokens($prefix, _fix-tokens($mdc-tokens), $token-slots);
+}
+
+/// Fixes inconsistent values in the icon button tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of icon button tokens currently being generated.
+/// @param {Map} $all-tokens Map of all icon button tokens, including hardcoded values.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@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('icon-button', (), false);
+
+  $rename-keys: (
+    unselected-icon-color: 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-icon-color,
+      opacity: disabled-icon-opacity,
+    ),
+  ));
+}

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

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

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

@@ -0,0 +1,37 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, list);
+
+/// Generates the tokens for MDC list
+/// @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 list
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('list', $systems, $exclude-hardcoded);
+
+  @return token-utils.namespace-tokens($prefix, _fix-tokens($mdc-tokens), $token-slots);
+}
+
+/// Fixes values in the list tokens that are inconsistent with its usage.
+/// @param {Map} $initial-tokens Map of list tokens currently being generated.
+/// @return {Map} The given tokens, with the inconsistent values replaced with valid ones.
+@function _fix-tokens($tokens) {
+  // This does not match the spec, which defines this to be `md.sys.color.surface`.
+  // However, this interferes with the use case of placing a list on other components. For example,
+  // the bottom sheet's container color is `md.sys.color.surface-container-low`. Instead, allow the
+  // list to just display the colors for its background.
+  @if map.get($tokens, list-item-container-color) != null {
+    $tokens: map.set($tokens, list-item-container-color, transparent);
+  }
+
+  // Match spec, which has list-item-leading-icon-size of 24px.
+  // Current version of tokens (0_161) has 18px.
+  @if map.get($tokens, list-item-leading-icon-size) != null {
+    $tokens: map.set($tokens, list-item-leading-icon-size, 24px);
+  }
+
+  @return $tokens;
+}

package/core/tokens/m3/mdc/_outlined-button.scss

@@ -0,0 +1,83 @@
+@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, outlined-button);
+
+/// Generates the tokens for MDC outlined-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 tokens for the MDC outlined-button
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('outlined-button', $systems, $exclude-hardcoded);
+  $variant-tokens: (
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      focus-label-text-color: map.get($systems, md-sys-color, secondary),
+      focus-outline-color: map.get($systems, md-sys-color, secondary),
+      focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      hover-label-text-color: map.get($systems, md-sys-color, secondary),
+      hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      label-text-color: map.get($systems, md-sys-color, secondary),
+      pressed-label-text-color: map.get($systems, md-sys-color, secondary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, secondary)
+    ),
+    tertiary: (
+      focus-label-text-color: map.get($systems, md-sys-color, tertiary),
+      focus-outline-color: map.get($systems, md-sys-color, tertiary),
+      focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      hover-label-text-color: map.get($systems, md-sys-color, tertiary),
+      hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      label-text-color: map.get($systems, md-sys-color, tertiary),
+      pressed-label-text-color: map.get($systems, md-sys-color, tertiary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, tertiary)
+    ),
+    error: (
+      focus-label-text-color: map.get($systems, md-sys-color, error),
+      focus-outline-color: map.get($systems, md-sys-color, error),
+      focus-state-layer-color: map.get($systems, md-sys-color, error),
+      hover-label-text-color: map.get($systems, md-sys-color, error),
+      hover-state-layer-color: map.get($systems, md-sys-color, error),
+      label-text-color: map.get($systems, md-sys-color, error),
+      pressed-label-text-color: map.get($systems, md-sys-color, error),
+      pressed-state-layer-color: map.get($systems, md-sys-color, error),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-pressed-icon-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);
+}
+
+/// Fixes inconsistent values in the outlined button tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of outlined button tokens currently being generated.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-tokens($initial-tokens) {
+  $hardcoded-tokens: token-utils.get-mdc-tokens('outlined-button', (), false);
+
+  @return token-utils.combine-color-tokens($initial-tokens, $hardcoded-tokens, (
+    (
+      color: disabled-label-text-color,
+      opacity: disabled-label-text-opacity,
+    ),
+    (
+      color: disabled-outline-color,
+      opacity: disabled-outline-opacity,
+    )
+  ));
+}

package/core/tokens/m3/mdc/_outlined-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, outlined-card);
+
+/// Generates the tokens for MDC outlined-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 outlined-card
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('outlined-card', $systems, $exclude-hardcoded);
+
+  @return token-utils.namespace-tokens($prefix, $mdc-tokens, $token-slots);
+}

package/core/tokens/m3/mdc/_outlined-text-field.scss

@@ -0,0 +1,85 @@
+@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, outlined-text-field);
+
+/// Generates the tokens for MDC outlined-text-field
+/// @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 outlined-text-field
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('outlined-text-field', $systems, $exclude-hardcoded);
+  $variant-tokens: (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      caret-color: map.get($systems, md-sys-color, secondary),
+      focus-label-text-color: map.get($systems, md-sys-color, secondary),
+      focus-outline-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      caret-color: map.get($systems, md-sys-color, tertiary),
+      focus-label-text-color: map.get($systems, md-sys-color, tertiary),
+      focus-outline-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      caret-color: map.get($systems, md-sys-color, error),
+      focus-label-text-color: map.get($systems, md-sys-color, error),
+      focus-outline-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);
+}
+
+/// Fixes inconsistent values in the outlined text field tokens so that they can produce valid
+/// styles.
+/// @param {Map} $initial-tokens Map of outlined text field tokens currently being generated.
+/// @param {Map} $all-tokens Map of all outlined text field tokens, including hardcoded values.
+/// This is necessary in order to do opacity lookups.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-tokens($initial-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('outlined-text-field', (), false);
+
+  @return token-utils.combine-color-tokens($initial-tokens, $hardcoded-tokens, (
+    (
+      color: disabled-outline-color,
+      opacity: disabled-outline-opacity
+    ),
+    (
+      color: disabled-active-indicator-color,
+      opacity: disabled-active-indicator-opacity
+    ),
+    (
+      color: disabled-container-color,
+      opacity: disabled-container-opacity
+    ),
+    (
+      color: disabled-input-text-color,
+      opacity: disabled-input-text-opacity
+    ),
+    (
+      color: disabled-label-text-color,
+      opacity: disabled-label-text-opacity
+    ),
+    (
+      color: disabled-leading-icon-color,
+      opacity: disabled-leading-icon-opacity
+    ),
+    (
+      color: disabled-supporting-text-color,
+      opacity: disabled-supporting-text-opacity
+    ),
+    (
+      color: disabled-trailing-icon-color,
+      opacity: disabled-trailing-icon-opacity
+    )
+  ));
+}

package/core/tokens/m3/mdc/_plain-tooltip.scss

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

package/core/tokens/m3/mdc/_protected-button.scss

@@ -0,0 +1,84 @@
+@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, protected-button);
+
+/// Generates the tokens for MDC protected-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 tokens for the MDC protected-button
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  // Note: in M3 the "protected" button is called "elevated".
+  $mdc-tokens: token-utils.get-mdc-tokens('elevated-button', $systems, $exclude-hardcoded);
+  $variant-tokens: (
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      focus-label-text-color: map.get($systems, md-sys-color, secondary),
+      focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      hover-label-text-color: map.get($systems, md-sys-color, secondary),
+      hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      label-text-color: map.get($systems, md-sys-color, secondary),
+      pressed-label-text-color: map.get($systems, md-sys-color, secondary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-icon-color: map.get($systems, md-sys-color, secondary),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, secondary)
+    ),
+    tertiary: (
+      focus-label-text-color: map.get($systems, md-sys-color, tertiary),
+      focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      hover-label-text-color: map.get($systems, md-sys-color, tertiary),
+      hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      label-text-color: map.get($systems, md-sys-color, tertiary),
+      pressed-label-text-color: map.get($systems, md-sys-color, tertiary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-icon-color: map.get($systems, md-sys-color, tertiary),
+      with-icon-pressed-icon-color: map.get($systems, md-sys-color, tertiary)
+    ),
+    error: (
+      focus-label-text-color: map.get($systems, md-sys-color, error),
+      focus-state-layer-color: map.get($systems, md-sys-color, error),
+      hover-label-text-color: map.get($systems, md-sys-color, error),
+      hover-state-layer-color: map.get($systems, md-sys-color, error),
+      label-text-color: map.get($systems, md-sys-color, error),
+      pressed-label-text-color: map.get($systems, md-sys-color, error),
+      pressed-state-layer-color: map.get($systems, md-sys-color, error),
+      with-icon-focus-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-hover-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-icon-color: map.get($systems, md-sys-color, error),
+      with-icon-pressed-icon-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);
+}
+
+
+/// Fixes inconsistent values in the protected button tokens so that they can produce valid styles.
+/// @param {Map} $initial-tokens Map of protected button tokens currently being generated.
+/// @return {Map} The given tokens, with the invalid values replaced with valid ones.
+@function _fix-tokens($initial-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('elevated-button', (), false);
+
+  @return token-utils.combine-color-tokens($initial-tokens, $hardcoded-tokens, (
+    (
+      color: disabled-label-text-color,
+      opacity: disabled-label-text-opacity,
+    ),
+    (
+      color: disabled-container-color,
+      opacity: disabled-container-opacity,
+    )
+  ));
+}

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

@@ -0,0 +1,46 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, radio);
+
+/// Generates the tokens for MDC radio
+/// @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 radio
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('radio-button', $systems, $exclude-hardcoded);
+  $variant-tokens: (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      selected-icon-color: map.get($systems, md-sys-color, secondary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, secondary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      selected-icon-color: map.get($systems, md-sys-color, tertiary),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, tertiary),
+      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      selected-focus-icon-color: map.get($systems, md-sys-color, error),
+      selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-hover-icon-color: map.get($systems, md-sys-color, error),
+      selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
+      selected-icon-color: map.get($systems, md-sys-color, error),
+      selected-pressed-icon-color: map.get($systems, md-sys-color, error),
+      unselected-pressed-state-layer-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/_slider.scss

@@ -0,0 +1,61 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mdc, slider);
+
+/// Generates the tokens for MDC slider
+/// @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 slider
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $mdc-tokens: token-utils.get-mdc-tokens('slider', $systems, $exclude-hardcoded);
+  $variant-tokens: (
+    primary: (), // Default, no overrides needed
+    secondary: (
+      active-track-color: map.get($systems, md-sys-color, secondary),
+      focus-handle-color: map.get($systems, md-sys-color, secondary),
+      focus-state-layer-color: map.get($systems, md-sys-color, secondary),
+      handle-color: map.get($systems, md-sys-color, secondary),
+      hover-handle-color: map.get($systems, md-sys-color, secondary),
+      hover-state-layer-color: map.get($systems, md-sys-color, secondary),
+      label-container-color: map.get($systems, md-sys-color, secondary),
+      label-label-text-color: map.get($systems, md-sys-color, on-secondary),
+      pressed-handle-color: map.get($systems, md-sys-color, secondary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
+      with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-secondary),
+      with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-secondary),
+    ),
+    tertiary: (
+      active-track-color: map.get($systems, md-sys-color, tertiary),
+      focus-handle-color: map.get($systems, md-sys-color, tertiary),
+      focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      handle-color: map.get($systems, md-sys-color, tertiary),
+      hover-handle-color: map.get($systems, md-sys-color, tertiary),
+      hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      label-container-color: map.get($systems, md-sys-color, tertiary),
+      label-label-text-color: map.get($systems, md-sys-color, on-tertiary),
+      pressed-handle-color: map.get($systems, md-sys-color, tertiary),
+      pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
+      with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-tertiary),
+      with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-tertiary),
+    ),
+    error: (
+      active-track-color: map.get($systems, md-sys-color, error),
+      focus-handle-color: map.get($systems, md-sys-color, error),
+      focus-state-layer-color: map.get($systems, md-sys-color, error),
+      handle-color: map.get($systems, md-sys-color, error),
+      hover-handle-color: map.get($systems, md-sys-color, error),
+      hover-state-layer-color: map.get($systems, md-sys-color, error),
+      label-container-color: map.get($systems, md-sys-color, error),
+      label-label-text-color: map.get($systems, md-sys-color, on-error),
+      pressed-handle-color: map.get($systems, md-sys-color, error),
+      pressed-state-layer-color: map.get($systems, md-sys-color, error),
+      with-overlap-handle-outline-color: map.get($systems, md-sys-color, on-error),
+      with-tick-marks-active-container-color: map.get($systems, md-sys-color, on-error),
+    ),
+  );
+
+  @return token-utils.namespace-tokens($prefix, ($mdc-tokens, $variant-tokens), $token-slots);
+}

package/core/tokens/m3/mdc/_snack-bar.scss

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