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

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);
+}

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);
+}