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

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

@@ -0,0 +1,33 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, icon);
+
+/// Generates custom tokens for the mat-icon.
+/// @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-icon
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+    color: token-utils.hardcode(inherit, $exclude-hardcoded),
+  ), (
+    // Color variants:
+    surface: (), // Default, no overrides needed.
+    primary: (
+      color: map.get($systems, md-sys-color, primary),
+    ),
+    secondary: (
+      color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      color: map.get($systems, md-sys-color, error),
+    )
+  ));
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mat/_list.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, list);
+
+/// Generates custom tokens for the mat-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 custom tokens for the mat-list
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    active-indicator-color: map.get($systems, md-sys-color, secondary-container),
+    active-indicator-shape: map.get($systems, md-sys-shape, corner-full),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

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

@@ -0,0 +1,42 @@
+@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, menu);
+
+/// Generates custom tokens for the mat-menu.
+/// @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-menu
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: sass-utils.merge-all(
+    token-utils.generate-typography-tokens($systems, item-label-text, label-large),
+    (
+      container-shape: map.get($systems, md-sys-shape, corner-extra-small),
+      divider-color: map.get($systems, md-sys-color, surface-variant),
+      divider-bottom-spacing: token-utils.hardcode(8px, $exclude-hardcoded),
+      divider-top-spacing: token-utils.hardcode(8px, $exclude-hardcoded),
+      item-label-text-color: map.get($systems, md-sys-color, on-surface),
+      item-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+      item-icon-size: token-utils.hardcode(24px, $exclude-hardcoded),
+      item-hover-state-layer-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
+      ),
+      item-focus-state-layer-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
+      ),
+      item-spacing: token-utils.hardcode(12px, $exclude-hardcoded),
+      item-leading-spacing: token-utils.hardcode(12px, $exclude-hardcoded),
+      item-trailing-spacing: token-utils.hardcode(12px, $exclude-hardcoded),
+      item-with-icon-leading-spacing: token-utils.hardcode(12px, $exclude-hardcoded),
+      item-with-icon-trailing-spacing: token-utils.hardcode(12px, $exclude-hardcoded),
+      container-color: map.get($systems, md-sys-color, surface-container),
+    )
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mat/_minimal-pseudo-checkbox.scss

@@ -0,0 +1,33 @@
+@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, minimal-pseudo-checkbox);
+
+/// Generates custom tokens for the minimal 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 minimal variant of mat-pseudo-checkbox
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+    selected-checkmark-color: map.get($systems, md-sys-color, primary),
+    disabled-selected-checkmark-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      selected-checkmark-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      selected-checkmark-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      selected-checkmark-color: map.get($systems, md-sys-color, error),
+    )
+  ));
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

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

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

package/core/tokens/m3/mat/_option.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, option);
+
+/// Generates custom tokens for the mat-option.
+/// @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-option
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+      selected-state-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
+      label-text-color: map.get($systems, md-sys-color, on-surface),
+      hover-state-layer-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: map.get($systems, md-sys-state, hover-state-layer-opacity)
+      ),
+      focus-state-layer-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface),
+        $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
+      ),
+      selected-state-layer-color: map.get($systems, md-sys-color, secondary-container),
+
+      // According to the spec the options have to be `label-large` in all typography
+      // dimensions, however this is inconsistent with the designs and with MDC's
+      // own implementation. This appears to be a bug in the spec, because MDC overrides
+      // the font size and weight to be `body-large` (see b/261838263). We make the same
+      // override here so the label looks correct.
+      label-text-size: map.get($systems, md-sys-typescale, body-large-size),
+      label-text-weight: map.get($systems, md-sys-typescale, body-large-weight),
+      label-text-font: map.get($systems, md-sys-typescale, label-large-font),
+      label-text-line-height: map.get($systems, md-sys-typescale, label-large-line-height),
+      label-text-tracking: map.get($systems, md-sys-typescale, label-large-tracking),
+  ), (
+    // Color variants:
+    primary: (
+      selected-state-label-text-color: map.get($systems, md-sys-color, on-primary-container),
+      selected-state-layer-color: map.get($systems, md-sys-color, primary-container),
+    ),
+    secondary: (), // Default, no overrides needed
+    tertiary: (
+      selected-state-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-state-layer-color: map.get($systems, md-sys-color, tertiary-container),
+    ),
+    error: (
+      selected-state-label-text-color: map.get($systems, md-sys-color, on-error-container),
+      selected-state-layer-color: map.get($systems, md-sys-color, error-container),
+    )
+  ));
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

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

@@ -0,0 +1,54 @@
+@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, outlined-button);
+
+/// Generates custom tokens for the mat-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 custom tokens for the mat-outlined-button
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+    horizontal-padding: token-utils.hardcode(24px, $exclude-hardcoded),
+    icon-spacing: token-utils.hardcode(8px, $exclude-hardcoded),
+    icon-offset: token-utils.hardcode(-8px, $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/_paginator.scss

@@ -0,0 +1,27 @@
+@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, paginator);
+
+/// Generates custom tokens for the mat-paginator.
+/// @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-paginator
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: sass-utils.merge-all(
+    token-utils.generate-typography-tokens($systems, container-text, body-small),
+    (
+      container-text-color: map.get($systems, md-sys-color, on-surface),
+      container-background-color: map.get($systems, md-sys-color, surface),
+      enabled-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+      disabled-icon-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      select-trigger-text-size: map.get($systems, md-sys-typescale, body-small-size),
+    )
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mat/_protected-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.
+// Note: in M3 the "protected" button is called "elevated".
+$prefix: (mat, protected-button);
+
+/// Generates custom tokens for the mat-raised-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-raised-button
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+    horizontal-padding: token-utils.hardcode(24px, $exclude-hardcoded),
+    icon-spacing: token-utils.hardcode(8px, $exclude-hardcoded),
+    icon-offset: token-utils.hardcode(-8px, $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/_radio.scss

@@ -0,0 +1,34 @@
+@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, radio);
+
+/// Generates custom tokens for the mat-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 custom tokens for the mat-radio
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+    ripple-color: map.get($systems, md-sys-color, on-surface),
+    checked-ripple-color: map.get($systems, md-sys-color, primary),
+    disabled-label-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed
+    secondary: (
+      checked-ripple-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      checked-ripple-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      checked-ripple-color: map.get($systems, md-sys-color, error),
+    ),
+  ));
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

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

@@ -0,0 +1,19 @@
+@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, ripple);
+
+/// Generates custom tokens for the mat-ripple.
+/// @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-ripple
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    color: sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.1),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

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

@@ -0,0 +1,46 @@
+@use 'sass:map';
+@use '../../../style/sass-utils';
+@use '../../token-utils';
+@use '@material/elevation' as mdc-elevation;
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, select);
+
+/// Generates custom tokens for the mat-select.
+/// @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-select
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: sass-utils.merge-all(
+    token-utils.generate-typography-tokens($systems, trigger-text, body-large),
+    (
+      panel-background-color: map.get($systems, md-sys-color, surface-container),
+      enabled-trigger-text-color: map.get($systems, md-sys-color, on-surface),
+      disabled-trigger-text-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      placeholder-text-color: map.get($systems, md-sys-color, on-surface-variant),
+      enabled-arrow-color: map.get($systems, md-sys-color, on-surface-variant),
+      disabled-arrow-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      focused-arrow-color: map.get($systems, md-sys-color, primary),
+      invalid-arrow-color: map.get($systems, md-sys-color, error),
+      container-elevation-shadow:
+        token-utils.hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
+    )
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed
+    secondary: (
+      focused-arrow-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      focused-arrow-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      focused-arrow-color: map.get($systems, md-sys-color, error),
+    )
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mat/_sidenav.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, sidenav);
+
+/// Generates custom tokens for the mat-sidenav.
+/// @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-sidenav
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    container-elevation-shadow: token-utils.hardcode(none, $exclude-hardcoded),
+    container-divider-color: token-utils.hardcode(transparent, $exclude-hardcoded),
+    container-width: token-utils.hardcode(360px, $exclude-hardcoded),
+    container-shape: map.get($systems, md-sys-shape, corner-large),
+    container-background-color: map.get($systems, md-sys-color, surface),
+    container-text-color: map.get($systems, md-sys-color, on-surface-variant),
+    content-background-color: map.get($systems, md-sys-color, background),
+    content-text-color: map.get($systems, md-sys-color, on-background),
+    scrim-color: sass-utils.safe-color-change(
+        map.get($systems, md-ref-palette, neutral-variant20), $alpha: 0.4),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

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

@@ -0,0 +1,56 @@
+@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, slider);
+
+/// Generates custom tokens for the mat-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 custom tokens for the mat-slider
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+    ripple-color: map.get($systems, md-sys-color, primary),
+    hover-state-layer-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, primary), $alpha: 0.05),
+    focus-state-layer-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, primary), $alpha: 0.2),
+    value-indicator-opacity: token-utils.hardcode(1, $exclude-hardcoded),
+    value-indicator-padding: token-utils.hardcode(0, $exclude-hardcoded),
+    value-indicator-width: token-utils.hardcode(28px, $exclude-hardcoded),
+    value-indicator-height: token-utils.hardcode(28px, $exclude-hardcoded),
+    value-indicator-caret-display: token-utils.hardcode(none, $exclude-hardcoded),
+    value-indicator-border-radius: token-utils.hardcode(50% 50% 50% 0, $exclude-hardcoded),
+    value-indicator-text-transform: token-utils.hardcode(rotate(45deg), $exclude-hardcoded),
+    value-indicator-container-transform:
+      token-utils.hardcode(translateX(-50%) rotate(-45deg), $exclude-hardcoded)
+  ), (
+    // Color variants
+    primary: (), // Default, no overrides needed
+    secondary: (
+      ripple-color: map.get($systems, md-sys-color, secondary),
+      hover-state-layer-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, secondary), $alpha: 0.05),
+      focus-state-layer-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, secondary), $alpha: 0.2),
+    ),
+    tertiary: (
+      ripple-color: map.get($systems, md-sys-color, tertiary),
+      hover-state-layer-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, tertiary), $alpha: 0.05),
+      focus-state-layer-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, tertiary), $alpha: 0.2),
+    ),
+    error: (
+      ripple-color: map.get($systems, md-sys-color, error),
+      hover-state-layer-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, error), $alpha: 0.05),
+      focus-state-layer-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, error), $alpha: 0.2),
+    ),
+  ));
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

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

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

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

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

package/core/tokens/m3/mat/_standard-button-toggle.scss

@@ -0,0 +1,57 @@
+@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, standard-button-toggle);
+
+/// Generates custom tokens for the mat-button-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-button-toggle
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: sass-utils.merge-all(
+    token-utils.generate-typography-tokens($systems, label-text, label-large),
+  (
+    shape: map.get($systems, md-sys-shape, corner-full),
+    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),
+    text-color: map.get($systems, md-sys-color, on-surface),
+    background-color: token-utils.hardcode(transparent, $exclude-hardcoded),
+    state-layer-color: map.get($systems, md-sys-color, on-surface),
+    selected-state-background-color: map.get($systems, md-sys-color, secondary-container),
+    selected-state-text-color: map.get($systems, md-sys-color, on-secondary-container),
+    disabled-state-text-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38,
+    ),
+    disabled-state-background-color: token-utils.hardcode(transparent, $exclude-hardcoded),
+    disabled-selected-state-text-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38,
+    ),
+    disabled-selected-state-background-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.12,
+    ),
+    divider-color: map.get($systems, md-sys-color, outline),
+  ), (
+    // Color variants:
+    primary: (
+      selected-state-background-color: map.get($systems, md-sys-color, primary-container),
+      selected-state-text-color: map.get($systems, md-sys-color, on-primary-container),
+    ),
+    secondary: (), // Default, no overrides needed
+    tertiary: (
+      selected-state-background-color: map.get($systems, md-sys-color, tertiary-container),
+      selected-state-text-color: map.get($systems, md-sys-color, on-tertiary-container),
+    ),
+    error: (
+      selected-state-background-color: map.get($systems, md-sys-color, error-container),
+      selected-state-text-color: map.get($systems, md-sys-color, on-error-container),
+    )
+  ));
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}