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

package/core/tokens/m3/mat/_bottom-sheet.scss

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

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

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

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

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

package/core/tokens/m3/mat/_chip.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: (mat, chip);
+
+/// Generates custom tokens for the mat-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 custom tokens for the mat-chip
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+    disabled-container-opacity: token-utils.hardcode(1, $exclude-hardcoded),
+    selected-trailing-icon-color: map.get($systems, md-sys-color, on-secondary-container),
+    selected-disabled-trailing-icon-color: map.get($systems, md-sys-color, on-surface),
+    trailing-action-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    selected-trailing-action-state-layer-color:
+        map.get($systems, md-sys-color, on-secondary-container),
+    trailing-action-hover-state-layer-opacity:
+        map.get($systems, md-sys-state, hover-state-layer-opacity),
+    trailing-action-focus-state-layer-opacity:
+        map.get($systems, md-sys-state, focus-state-layer-opacity),
+    trailing-action-opacity: token-utils.hardcode(1, $exclude-hardcoded),
+    trailing-action-focus-opacity: token-utils.hardcode(1, $exclude-hardcoded),
+  ), (
+    primary: (
+      selected-trailing-icon-color: map.get($systems, md-sys-color, on-primary-container),
+      selected-trailing-action-state-layer-color:
+          map.get($systems, md-sys-color, on-primary-container),
+    ),
+    secondary: (), // Default, no overrides needed.
+    tertiary: (
+      selected-trailing-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
+      selected-trailing-action-state-layer-color:
+          map.get($systems, md-sys-color, on-tertiary-container),
+    ),
+    error: (
+      selected-trailing-icon-color: map.get($systems, md-sys-color, on-error-container),
+      selected-trailing-action-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/mat/_datepicker.scss

@@ -0,0 +1,123 @@
+@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, datepicker);
+
+/// Generates custom tokens for the mat-datepicker.
+/// @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-datepicker
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+    calendar-date-in-range-state-background-color:
+      map.get($systems, md-sys-color, primary-container),
+    calendar-date-in-comparison-range-state-background-color:
+      map.get($systems, md-sys-color, tertiary-container),
+    calendar-date-in-overlap-range-state-background-color:
+      map.get($systems, md-sys-color, secondary-container),
+    calendar-date-in-overlap-range-selected-state-background-color:
+      map.get($systems, md-sys-color, secondary),
+    calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-primary),
+    calendar-date-selected-state-background-color: map.get($systems, md-sys-color, primary),
+    calendar-date-selected-disabled-state-background-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+    calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, primary),
+    calendar-date-focus-state-background-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)
+    ),
+    calendar-date-hover-state-background-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)
+    ),
+    toggle-active-state-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+    toggle-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+    calendar-body-label-text-color: map.get($systems, md-sys-color, on-surface),
+    calendar-period-button-text-color: map.get($systems, md-sys-color, on-surface-variant),
+    calendar-period-button-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+    calendar-navigation-button-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+    calendar-header-divider-color: token-utils.hardcode(transparent, $exclude-hardcoded),
+    calendar-header-text-color: map.get($systems, md-sys-color, on-surface-variant),
+    calendar-date-today-outline-color: map.get($systems, md-sys-color, primary),
+    calendar-date-today-disabled-state-outline-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+    calendar-date-text-color: map.get($systems, md-sys-color, on-surface),
+    calendar-date-outline-color: token-utils.hardcode(transparent, $exclude-hardcoded),
+    calendar-date-disabled-state-text-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+    calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, primary),
+    range-input-separator-color: map.get($systems, md-sys-color, on-surface),
+    range-input-disabled-state-separator-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+    range-input-disabled-state-text-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, on-surface),
+      $alpha: 0.38
+    ),
+    calendar-container-background-color: map.get($systems, md-sys-color, surface-container-high),
+    calendar-container-text-color: map.get($systems, md-sys-color, on-surface),
+    calendar-container-elevation-shadow: token-utils.hardcode(mdc-elevation.elevation-box-shadow(0),
+      $exclude-hardcoded),
+    calendar-container-touch-elevation-shadow:
+      token-utils.hardcode(mdc-elevation.elevation-box-shadow(0), $exclude-hardcoded),
+    calendar-container-shape: map.get($systems, md-sys-shape, corner-large),
+    calendar-container-touch-shape: map.get($systems, md-sys-shape, corner-extra-large),
+    calendar-text-font: map.get($systems, md-sys-typescale, body-large-font),
+    calendar-text-size: map.get($systems, md-sys-typescale, body-large-size),
+    calendar-body-label-text-size: map.get($systems, md-sys-typescale, title-small-size),
+    calendar-body-label-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
+    calendar-period-button-text-size: map.get($systems, md-sys-typescale, title-small-size),
+    calendar-period-button-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
+    calendar-header-text-size: map.get($systems, md-sys-typescale, title-small-size),
+    calendar-header-text-weight: map.get($systems, md-sys-typescale, title-small-weight),
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      calendar-date-in-range-state-background-color:
+          map.get($systems, md-sys-color, secondary-container),
+      calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-secondary),
+      calendar-date-selected-state-background-color: map.get($systems, md-sys-color, secondary),
+      calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, secondary),
+      calendar-date-today-outline-color: map.get($systems, md-sys-color, secondary),
+      calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, secondary),
+      calendar-date-in-overlap-range-state-background-color:
+          map.get($systems, md-sys-color, primary-container),
+      calendar-date-in-overlap-range-selected-state-background-color:
+          map.get($systems, md-sys-color, primary),
+    ),
+    tertiary: (
+      calendar-date-in-range-state-background-color:
+          map.get($systems, md-sys-color, tertiary-container),
+      calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-tertiary),
+      calendar-date-selected-state-background-color: map.get($systems, md-sys-color, tertiary),
+      calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, tertiary),
+      calendar-date-today-outline-color: map.get($systems, md-sys-color, tertiary),
+      calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, tertiary),
+      calendar-date-in-comparison-range-state-background-color:
+          map.get($systems, md-sys-color, primary-container),
+    ),
+    error: (
+      calendar-date-in-range-state-background-color:
+          map.get($systems, md-sys-color, error-container),
+      calendar-date-selected-state-text-color: map.get($systems, md-sys-color, on-error),
+      calendar-date-selected-state-background-color: map.get($systems, md-sys-color, error),
+      calendar-date-today-selected-state-outline-color: map.get($systems, md-sys-color, error),
+      calendar-date-today-outline-color: map.get($systems, md-sys-color, error),
+      calendar-date-preview-state-outline-color: map.get($systems, md-sys-color, error),
+    )
+  ));
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

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

@@ -0,0 +1,30 @@
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, dialog);
+
+/// Generates custom tokens for the 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 custom tokens for the dialog
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    container-max-width: token-utils.hardcode(560px, $exclude-hardcoded),
+    container-small-max-width: token-utils.hardcode(calc(100vw - 32px), $exclude-hardcoded),
+    container-min-width: token-utils.hardcode(280px, $exclude-hardcoded),
+    actions-alignment: token-utils.hardcode(flex-end, $exclude-hardcoded),
+    content-padding: token-utils.hardcode(20px 24px, $exclude-hardcoded),
+    with-actions-content-padding: token-utils.hardcode(20px 24px 0, $exclude-hardcoded),
+    actions-padding: token-utils.hardcode(16px 24px, $exclude-hardcoded),
+
+    // The vertical padding values are a bit weird, because MDC uses a `::before` pseudo
+    // element to size the title which in turn means that we can't set a specific padding
+    // and get the exact same space out of it. These values were determined through
+    // trial and error so that the first line of text is 24px from the top and the bottom
+    // of the text is 16px from the content under it.
+    headline-padding: token-utils.hardcode(6px 24px 13px, $exclude-hardcoded),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mat/_divider.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, divider);
+
+/// Generates custom tokens for the mat-divider.
+/// @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-divider
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    width: token-utils.hardcode(1px, $exclude-hardcoded),
+    color: map.get($systems, md-sys-color, outline-variant),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

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

@@ -0,0 +1,41 @@
+@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, expansion);
+
+/// Generates custom tokens for the mat-expansion.
+/// @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-expansion
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: sass-utils.merge-all(
+    token-utils.generate-typography-tokens($systems, header-text, title-medium),
+    token-utils.generate-typography-tokens($systems, container-text, body-large),
+    (
+      container-shape: token-utils.hardcode(12px, $exclude-hardcoded),
+      legacy-header-indicator-display: token-utils.hardcode(none, $exclude-hardcoded),
+      header-indicator-display: token-utils.hardcode(inline-block, $exclude-hardcoded),
+      container-background-color: map.get($systems, md-sys-color, surface),
+      container-text-color: map.get($systems, md-sys-color, on-surface),
+      actions-divider-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, on-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, on-surface),
+        $alpha: map.get($systems, md-sys-state, focus-state-layer-opacity)
+      ),
+      header-disabled-state-text-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      header-text-color: map.get($systems, md-sys-color, on-surface),
+      header-description-color: map.get($systems, md-sys-color, on-surface-variant),
+      header-indicator-color: map.get($systems, md-sys-color, on-surface-variant),
+    )
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

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

@@ -0,0 +1,50 @@
+@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, fab-small);
+
+/// Generates custom tokens for the mat-mini-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 custom tokens for the mat-mini-fab
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+    foreground-color: map.get($systems, md-sys-color, on-primary-container),
+    state-layer-color: map.get($systems, md-sys-color, on-primary-container),
+    ripple-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, on-primary-container),
+      $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),
+    disabled-state-container-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
+    disabled-state-foreground-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: (
+      foreground-color: map.get($systems, md-sys-color, on-secondary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+      ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-secondary-container),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    tertiary: (
+      foreground-color: map.get($systems, md-sys-color, on-tertiary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-tertiary-container),
+        $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/_fab.scss

@@ -0,0 +1,50 @@
+@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, fab);
+
+/// Generates custom tokens for the mat-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 custom tokens for the mat-fab
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: ((
+    foreground-color: map.get($systems, md-sys-color, on-primary-container),
+    state-layer-color: map.get($systems, md-sys-color, on-primary-container),
+    ripple-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, on-primary-container),
+      $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),
+    disabled-state-container-color: sass-utils.safe-color-change(
+      map.get($systems, md-sys-color, on-surface), $alpha: 0.12),
+    disabled-state-foreground-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: (
+      foreground-color: map.get($systems, md-sys-color, on-secondary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
+      ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-secondary-container),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    tertiary: (
+      foreground-color: map.get($systems, md-sys-color, on-tertiary-container),
+      state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
+      ripple-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-tertiary-container),
+        $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/_filled-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, filled-button);
+
+/// Generates custom tokens for the mat-flat-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-flat-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, on-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, on-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, on-secondary),
+      ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-secondary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    tertiary: (
+      state-layer-color: map.get($systems, md-sys-color, on-tertiary),
+      ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-tertiary),
+        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
+      ),
+    ),
+    error: (
+      state-layer-color: map.get($systems, md-sys-color, on-error),
+      ripple-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-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/_form-field.scss

@@ -0,0 +1,59 @@
+@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, form-field);
+
+/// Generates custom tokens for the mat-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 custom tokens for the mat-form-field
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: sass-utils.merge-all(
+    token-utils.generate-typography-tokens($systems, container-text, body-large),
+    token-utils.generate-typography-tokens($systems, subscript-text, body-small),
+    (
+      disabled-input-text-placeholder-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      state-layer-color: map.get($systems, md-sys-color, on-surface),
+      error-text-color: map.get($systems, md-sys-color, error),
+      select-option-text-color: map.get($systems, md-ref-palette, neutral10),
+      select-disabled-option-text-color: sass-utils.safe-color-change(
+          map.get($systems, md-ref-palette, neutral10), $alpha: 0.38),
+      enabled-select-arrow-color: map.get($systems, md-sys-color, on-surface-variant),
+      disabled-select-arrow-color: sass-utils.safe-color-change(
+          map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
+      focus-state-layer-opacity: token-utils.hardcode(0, $exclude-hardcoded),
+      focus-select-arrow-color: map.get($systems, md-sys-color, primary),
+      outlined-label-text-populated-size: map.get($systems, md-sys-typeface, body-large-size),
+
+      leading-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+      disabled-leading-icon-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+
+      trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant),
+      disabled-trailing-icon-color: sass-utils.safe-color-change(
+        map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
+      error-focus-trailing-icon-color: map.get($systems, md-sys-color, error),
+      error-hover-trailing-icon-color: map.get($systems, md-sys-color, on-error-container),
+      error-trailing-icon-color: map.get($systems, md-sys-color, error),
+    )
+  ), (
+    // Color variants:
+    primary: (), // Default, no overrides needed.
+    secondary: (
+      focus-select-arrow-color: map.get($systems, md-sys-color, secondary),
+    ),
+    tertiary: (
+      focus-select-arrow-color: map.get($systems, md-sys-color, tertiary),
+    ),
+    error: (
+      focus-select-arrow-color: map.get($systems, md-sys-color, error),
+    )
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

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

package/core/tokens/m3/mat/_grid-list.scss

@@ -0,0 +1,21 @@
+@use 'sass:map';
+@use '../../token-utils';
+
+// The prefix used to generate the fully qualified name for tokens in this file.
+$prefix: (mat, grid-list);
+
+/// Generates custom tokens for the mat-grid-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-grid-list
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    tile-header-primary-text-size: map.get($systems, md-sys-typescale, body-large),
+    tile-header-secondary-text-size: map.get($systems, md-sys-typescale, body-medium),
+    tile-footer-primary-text-size: map.get($systems, md-sys-typescale, body-large),
+    tile-footer-secondary-text-size: map.get($systems, md-sys-typescale, body-medium),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}

package/core/tokens/m3/mat/_icon-button.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, icon-button);
+
+/// Generates custom tokens for the mat-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 custom tokens for the mat-icon-button
+@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
+  $tokens: (
+    state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
+    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, on-surface-variant),
+      $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),
+  );
+
+  @return token-utils.namespace-tokens($prefix, $tokens, $token-slots);
+}