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

package/core/tokens/_custom-tokens.scss

@@ -1,1918 +0,0 @@
-@use 'sass:map';
-@use '../style/sass-utils';
-@use '@material/elevation/elevation-theme' as mdc-elevation;
-
-/// Hardcode the given value, or null if hardcoded values are excluded.
-@function _hardcode($value, $exclude-hardcoded) {
-  @return if($exclude-hardcoded, null, $value);
-}
-
-/// Sets all of the standard typography tokens for the given token base name to the given typography
-/// level.
-/// @param {Map} $systems The MDC system tokens
-/// @param {String} $base-name The token base name to get the typography tokens for
-/// @param {String} $typography-level The typography level to base the token values on
-/// @return {Map} A map containing the typography tokens for the given base token name
-@function _generate-typography-tokens($systems, $base-name, $typography-level) {
-  $result: ();
-  @each $prop in (font, line-height, size, tracking, weight) {
-    $result: map.set($result, #{$base-name}-#{$prop},
-      map.get($systems, md-sys-typescale, #{$typography-level}-#{$prop}));
-  }
-  @return $result;
-}
-
-/// Generates custom tokens for the mat-autocomplete.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-autocomplete
-@function autocomplete($systems, $exclude-hardcoded) {
-  @return (
-    background-color: map.get($systems, md-sys-color, surface-container),
-    container-shape: map.get($systems, md-sys-shape, corner-extra-small),
-    container-elevation-shadow:
-      _hardcode(mdc-elevation.elevation-box-shadow(2), $exclude-hardcoded),
-  );
-}
-
-/// Generates custom tokens for the app.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the app
-@function app($systems, $exclude-hardcoded) {
-  @return (
-    background-color: map.get($systems, md-sys-color, background),
-    text-color: map.get($systems, md-sys-color, on-background),
-  );
-}
-
-/// Generates custom tokens for the mat-badge.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-badge
-@function badge($systems, $exclude-hardcoded) {
-  @return ((
-    background-color: map.get($systems, md-sys-color, error),
-    text-color: map.get($systems, md-sys-color, on-error),
-    disabled-state-background-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, error),
-      $alpha: 0.38,
-    ),
-    disabled-state-text-color: map.get($systems, md-sys-color, on-error),
-    text-font: map.get($systems, md-sys-typescale, label-small-font),
-    text-size: map.get($systems, md-sys-typescale, label-small-size),
-    text-weight: map.get($systems, md-sys-typescale, label-small-weight),
-    small-size-text-size: _hardcode(0, $exclude-hardcoded),
-    container-shape: map.get($systems, md-sys-shape, corner-full),
-    container-size: _hardcode(16px, $exclude-hardcoded),
-    legacy-container-size: _hardcode(unset, $exclude-hardcoded),
-    legacy-small-size-container-size: _hardcode(unset, $exclude-hardcoded),
-    small-size-container-size: _hardcode(6px, $exclude-hardcoded),
-    container-padding: _hardcode(0 4px, $exclude-hardcoded),
-    small-size-container-padding: _hardcode(0, $exclude-hardcoded),
-    container-offset: _hardcode(-12px 0, $exclude-hardcoded),
-    small-size-container-offset: _hardcode(-6px 0, $exclude-hardcoded),
-    container-overlap-offset: _hardcode(-12px, $exclude-hardcoded),
-    small-size-container-overlap-offset: _hardcode(-6px, $exclude-hardcoded),
-
-    // This size isn't in the M3 spec so we emit the same values as for `medium`.
-    large-size-container-size: _hardcode(16px, $exclude-hardcoded),
-    large-size-container-offset: _hardcode(-12px 0, $exclude-hardcoded),
-    large-size-container-overlap-offset: _hardcode(-12px, $exclude-hardcoded),
-    large-size-text-size: map.get($systems, md-sys-typescale, label-small-size),
-    large-size-container-padding: _hardcode(0 4px, $exclude-hardcoded),
-    legacy-large-size-container-size: _hardcode(unset, $exclude-hardcoded),
-  ), (
-    primary: (
-      background-color: map.get($systems, md-sys-color, primary),
-      text-color: map.get($systems, md-sys-color, on-primary),
-      disabled-state-background-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, primary),
-        $alpha: 0.38,
-      ),
-      disabled-state-text-color: map.get($systems, md-sys-color, on-primary),
-    ),
-    secondary: (
-      background-color: map.get($systems, md-sys-color, secondary),
-      text-color: map.get($systems, md-sys-color, on-secondary),
-      disabled-state-background-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, secondary),
-        $alpha: 0.38,
-      ),
-      disabled-state-text-color: map.get($systems, md-sys-color, on-secondary),
-    ),
-    tertiary: (
-      background-color: map.get($systems, md-sys-color, tertiary),
-      text-color: map.get($systems, md-sys-color, on-tertiary),
-      disabled-state-background-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, tertiary),
-        $alpha: 0.38,
-      ),
-      disabled-state-text-color: map.get($systems, md-sys-color, on-tertiary),
-    ),
-    error: () // Default, no overrides needed
-  ));
-}
-
-/// 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
-/// @return {Map} A set of custom tokens for the mat-bottom-sheet
-@function bottom-sheet($systems, $exclude-hardcoded) {
-  @return sass-utils.merge-all(
-    _generate-typography-tokens($systems, container-text, body-large),
-    (
-      container-shape: _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),
-    ),
-  );
-}
-
-/// 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
-/// @return {Map} A set of custom tokens for the mat-button-toggle
-@function button-toggle($systems, $exclude-hardcoded) {
-  @return sass-utils.merge-all(
-    _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: _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: _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),
-    )
-  ));
-}
-
-/// Generates custom tokens for the mat-card.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-card
-@function card($systems, $exclude-hardcoded) {
-  @return sass-utils.merge-all(
-    _generate-typography-tokens($systems, title-text, title-large),
-    _generate-typography-tokens($systems, subtitle-text, title-medium),
-    (
-      subtitle-text-color: map.get($systems, md-sys-color, on-surface)
-    )
-  );
-}
-
-/// Generates custom tokens for the mat-chip.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-chip
-@function chip($systems, $exclude-hardcoded) {
-  @return ((
-    disabled-container-opacity: _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: _hardcode(1, $exclude-hardcoded),
-    trailing-action-focus-opacity: _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),
-    ),
-  ));
-}
-
-/// Generates custom tokens for the mdc-chip. (MDC has a chip component, but they
-/// seem to have made up the tokens rather than using ones generated from the token database,
-/// therefore we need a custom token function for it).
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mdc-chip
-@function mdc-chip($systems, $exclude-hardcoded) {
-  @return (sass-utils.merge-all(
-    _generate-typography-tokens($systems, label-text, label-large),
-    (
-      container-shape: _hardcode((
-        family: rounded,
-        radius: 8px,
-      ), $exclude-hardcoded),
-      with-avatar-avatar-size: _hardcode(24px, $exclude-hardcoded),
-      label-text-color: map.get($systems, md-sys-color, on-surface-variant),
-      disabled-label-text-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface),
-        $alpha: 0.38,
-      ),
-      with-icon-icon-size: _hardcode(18px, $exclude-hardcoded),
-      with-icon-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-      with-icon-disabled-icon-color: map.get($systems, md-sys-color, on-surface),
-      with-icon-selected-icon-color: map.get($systems, md-sys-color, on-secondary-container),
-      with-trailing-icon-trailing-icon-color: map.get($systems, md-sys-color, on-surface-variant),
-      with-trailing-icon-disabled-trailing-icon-color: map.get($systems, md-sys-color, on-surface),
-      focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
-      focus-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
-      outline-width: _hardcode(1px, $exclude-hardcoded),
-      outline-color: map.get($systems, md-sys-color, outline),
-      disabled-outline-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface),
-        $alpha: 0.12,
-      ),
-      focus-outline-color: map.get($systems, md-sys-color, on-surface-variant),
-      hover-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
-      hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-      with-avatar-disabled-avatar-opacity: _hardcode(0.38, $exclude-hardcoded),
-      elevated-selected-container-color: map.get($systems, md-sys-color, secondary-container),
-      flat-selected-outline-width: _hardcode(0, $exclude-hardcoded),
-      selected-label-text-color: map.get($systems, md-sys-color, on-secondary-container),
-      flat-disabled-selected-container-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, on-surface),
-        $alpha: 0.12,
-      ),
-      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
-      selected-hover-state-layer-opacity:
-        map.get($systems, md-sys-state, hover-state-layer-opacity),
-      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-secondary-container),
-      selected-focus-state-layer-opacity:
-        map.get($systems, md-sys-state, focus-state-layer-opacity),
-      with-icon-disabled-icon-opacity: _hardcode(0.38, $exclude-hardcoded),
-      with-trailing-icon-disabled-trailing-icon-opacity: _hardcode(0.38, $exclude-hardcoded),
-    ),
-  ), (
-    // Color variants:
-    primary: (
-      with-icon-selected-icon-color: map.get($systems, md-sys-color, on-primary-container),
-      elevated-selected-container-color: map.get($systems, md-sys-color, primary-container),
-      selected-label-text-color: map.get($systems, md-sys-color, on-primary-container),
-      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-primary-container),
-      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-primary-container),
-    ),
-    secondary: (), // Default, no overrides needed.
-    tertiary: (
-      with-icon-selected-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
-      elevated-selected-container-color: map.get($systems, md-sys-color, tertiary-container),
-      selected-label-text-color: map.get($systems, md-sys-color, on-tertiary-container),
-      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
-      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-tertiary-container),
-    ),
-    error: (
-      with-icon-selected-icon-color: map.get($systems, md-sys-color, on-error-container),
-      elevated-selected-container-color: map.get($systems, md-sys-color, error-container),
-      selected-label-text-color: map.get($systems, md-sys-color, on-error-container),
-      selected-hover-state-layer-color: map.get($systems, md-sys-color, on-error-container),
-      selected-focus-state-layer-color: map.get($systems, md-sys-color, on-error-container),
-    )
-  ));
-}
-
-/// Generates custom tokens for the mat-datepicker.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-datepicker
-@function datepicker($systems, $exclude-hardcoded) {
-  @return ((
-    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: _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: _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: _hardcode(mdc-elevation.elevation-box-shadow(0),
-      $exclude-hardcoded),
-    calendar-container-touch-elevation-shadow: _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),
-    )
-  ));
-}
-
-/// Generates custom tokens for the dialog.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the dialog
-@function dialog($systems, $exclude-hardcoded) {
-  @return (
-    container-max-width: _hardcode(560px, $exclude-hardcoded),
-    container-small-max-width: _hardcode(calc(100vw - 32px), $exclude-hardcoded),
-    container-min-width: _hardcode(280px, $exclude-hardcoded),
-    actions-alignment: _hardcode(flex-end, $exclude-hardcoded),
-    content-padding: _hardcode(20px 24px, $exclude-hardcoded),
-    with-actions-content-padding: _hardcode(20px 24px 0, $exclude-hardcoded),
-    actions-padding: _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: _hardcode(6px 24px 13px, $exclude-hardcoded),
-  );
-}
-
-/// Generates custom tokens for the mat-divider.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-divider
-@function divider($systems, $exclude-hardcoded) {
-  @return (
-    width: _hardcode(1px, $exclude-hardcoded),
-    color: map.get($systems, md-sys-color, outline-variant),
-  );
-}
-
-/// Generates custom tokens for the mat-expansion.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-expansion
-@function expansion($systems, $exclude-hardcoded) {
-  @return sass-utils.merge-all(
-    _generate-typography-tokens($systems, header-text, title-medium),
-    _generate-typography-tokens($systems, container-text, body-large),
-    (
-      container-shape: _hardcode(12px, $exclude-hardcoded),
-      legacy-header-indicator-display: _hardcode(none, $exclude-hardcoded),
-      header-indicator-display: _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),
-    )
-  );
-}
-
-/// Generates custom tokens for the mat-fab.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-fab
-@function fab($systems, $exclude-hardcoded) {
-  @return ((
-    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)
-      ),
-    )
-  ));
-}
-
-/// 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
-/// @return {Map} A set of custom tokens for the mat-mini-fab
-@function fab-small($systems, $exclude-hardcoded) {
-  @return ((
-    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)
-      ),
-    )
-  ));
-}
-
-/// 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
-/// @return {Map} A set of custom tokens for the mat-form-field
-@function form-field($systems, $exclude-hardcoded) {
-  @return (sass-utils.merge-all(
-    _generate-typography-tokens($systems, container-text, body-large),
-    _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: _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),
-    )
-  ));
-}
-
-/// 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
-/// @return {Map} A set of custom tokens for the mat-grid-list
-@function grid-list($systems, $exclude-hardcoded) {
-  @return (
-    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),
-  );
-}
-
-/// Generates custom tokens for the mat-icon.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-icon
-@function icon($systems, $exclude-hardcoded) {
-  @return ((
-    color: _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),
-    )
-  ));
-}
-
-/// Generates custom tokens for the mat-list.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-list
-@function list($systems, $exclude-hardcoded) {
-  @return (
-    active-indicator-color: map.get($systems, md-sys-color, secondary-container),
-    active-indicator-shape: map.get($systems, md-sys-shape, corner-full),
-  );
-}
-
-/// Generates custom tokens for the mat-button.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-button
-@function text-button($systems, $exclude-hardcoded) {
-  @return ((
-    horizontal-padding: _hardcode(12px, $exclude-hardcoded),
-    with-icon-horizontal-padding: _hardcode(16px, $exclude-hardcoded),
-    icon-spacing: _hardcode(8px, $exclude-hardcoded),
-    icon-offset: _hardcode(-4px, $exclude-hardcoded),
-    state-layer-color: map.get($systems, md-sys-color, primary),
-    disabled-state-layer-color: map.get($systems, md-sys-color, on-surface-variant),
-    ripple-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, primary),
-      $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-    ),
-    hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
-    focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
-    pressed-state-layer-opacity: map.get($systems, md-sys-state, pressed-state-layer-opacity),
-  ), (
-    // Color variants:
-    primary: (), // Default, no overrides needed.
-    secondary: (
-      state-layer-color: map.get($systems, md-sys-color, secondary),
-      ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, secondary),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      )
-    ),
-    tertiary: (
-      state-layer-color: map.get($systems, md-sys-color, tertiary),
-      ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, tertiary),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      )
-    ),
-    error: (
-      state-layer-color: map.get($systems, md-sys-color, error),
-      ripple-color: sass-utils.safe-color-change(
-        map.get($systems, md-sys-color, error),
-        $alpha: map.get($systems, md-sys-state, pressed-state-layer-opacity)
-      )
-    )
-  ));
-}
-
-/// 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
-/// @return {Map} A set of custom tokens for the mat-flat-button
-@function filled-button($systems, $exclude-hardcoded) {
-  @return ((
-    horizontal-padding: _hardcode(24px, $exclude-hardcoded),
-    icon-spacing: _hardcode(8px, $exclude-hardcoded),
-    icon-offset: _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)
-      ),
-    )
-  ));
-}
-
-/// 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
-/// @return {Map} A set of custom tokens for the mat-raised-button
-@function elevated-button($systems, $exclude-hardcoded) {
-  @return ((
-    horizontal-padding: _hardcode(24px, $exclude-hardcoded),
-    icon-spacing: _hardcode(8px, $exclude-hardcoded),
-    icon-offset: _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)
-      ),
-    )
-  ));
-}
-
-/// 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
-/// @return {Map} A set of custom tokens for the mat-outlined-button
-@function outlined-button($systems, $exclude-hardcoded) {
-  @return ((
-    horizontal-padding: _hardcode(24px, $exclude-hardcoded),
-    icon-spacing: _hardcode(8px, $exclude-hardcoded),
-    icon-offset: _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)
-      ),
-    )
-  ));
-}
-
-/// 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
-/// @return {Map} A set of custom tokens for the mat-icon-button
-@function icon-button($systems, $exclude-hardcoded) {
-  @return (
-    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),
-  );
-}
-
-/// Generates custom tokens for the mat-menu.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-menu
-@function menu($systems, $exclude-hardcoded) {
-  @return sass-utils.merge-all(
-    _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: _hardcode(8px, $exclude-hardcoded),
-      divider-top-spacing: _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: _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: _hardcode(12px, $exclude-hardcoded),
-      item-leading-spacing: _hardcode(12px, $exclude-hardcoded),
-      item-trailing-spacing: _hardcode(12px, $exclude-hardcoded),
-      item-with-icon-leading-spacing: _hardcode(12px, $exclude-hardcoded),
-      item-with-icon-trailing-spacing: _hardcode(12px, $exclude-hardcoded),
-      container-color: map.get($systems, md-sys-color, surface-container),
-    )
-  );
-}
-
-/// Generates custom tokens for the mat-optgroup.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-optgroup
-@function optgroup($systems, $exclude-hardcoded) {
-  @return sass-utils.merge-all(
-    _generate-typography-tokens($systems, label-text, title-small),
-    (
-      label-text-color: map.get($systems, md-sys-color, on-surface-variant),
-    )
-  );
-}
-
-/// Generates custom tokens for the mat-option.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-option
-@function option($systems, $exclude-hardcoded) {
-  @return ((
-      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),
-    )
-  ));
-}
-
-/// Generates custom tokens for the mat-paginator.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-paginator
-@function paginator($systems, $exclude-hardcoded) {
-  @return sass-utils.merge-all(
-    _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),
-    )
-  );
-}
-
-/// 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
-/// @return {Map} A set of custom tokens for the full variant of mat-pseudo-checkbox
-@function full-pseudo-checkbox($systems, $exclude-hardcoded) {
-  $disabled-color: sass-utils.safe-color-change(
-    map.get($systems, md-sys-color, on-surface), $alpha: 0.38);
-
-  @return ((
-    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),
-    )
-  ));
-}
-
-/// 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
-/// @return {Map} A set of custom tokens for the minimal variant of mat-pseudo-checkbox
-@function minimal-pseudo-checkbox($systems, $exclude-hardcoded) {
-  @return ((
-    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),
-    )
-  ));
-}
-
-/// Generates custom tokens for mat-checkbox.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for mat-checkbox
-@function checkbox($systems, $exclude-hardcoded) {
-  @return (
-    disabled-label-color: sass-utils.safe-color-change(
-      map.get($systems, md-sys-color, on-surface), $alpha: 0.38),
-  );
-}
-
-
-/// Generates custom tokens for the mat-radio.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-radio
-@function radio($systems, $exclude-hardcoded) {
-  @return ((
-    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),
-    ),
-  ));
-}
-
-/// Generates custom tokens for the mat-ripple.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-ripple
-@function ripple($systems, $exclude-hardcoded) {
-  @return (
-    color: sass-utils.safe-color-change(map.get($systems, md-sys-color, on-surface), $alpha: 0.1),
-  );
-}
-
-/// Generates custom tokens for the mat-select.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-select
-@function select($systems, $exclude-hardcoded) {
-  @return (sass-utils.merge-all(
-    _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:
-        _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),
-    )
-  ));
-}
-
-/// Generates custom tokens for the mat-sidenav.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-sidenav
-@function sidenav($systems, $exclude-hardcoded) {
-  @return (
-    container-elevation-shadow: _hardcode(none, $exclude-hardcoded),
-    container-divider-color: _hardcode(transparent, $exclude-hardcoded),
-    container-width: _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),
-  );
-}
-
-/// Generates custom tokens for the mat-slider.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-slider
-@function slider($systems, $exclude-hardcoded) {
-  @return ((
-    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: _hardcode(1, $exclude-hardcoded),
-    value-indicator-padding: _hardcode(0, $exclude-hardcoded),
-    value-indicator-width: _hardcode(28px, $exclude-hardcoded),
-    value-indicator-height: _hardcode(28px, $exclude-hardcoded),
-    value-indicator-caret-display: _hardcode(none, $exclude-hardcoded),
-    value-indicator-border-radius: _hardcode(50% 50% 50% 0, $exclude-hardcoded),
-    value-indicator-text-transform: _hardcode(rotate(45deg), $exclude-hardcoded),
-    value-indicator-container-transform:
-      _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),
-    ),
-  ));
-}
-
-/// 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
-/// @return {Map} A set of custom tokens for the mat-slide-toggle
-@function switch($systems, $exclude-hardcoded) {
-  @return (
-    disabled-selected-handle-opacity: _hardcode(1, $exclude-hardcoded),
-    disabled-unselected-handle-opacity: _hardcode(0.38, $exclude-hardcoded),
-    unselected-handle-size: _hardcode(16px, $exclude-hardcoded),
-    selected-handle-size: _hardcode(24px, $exclude-hardcoded),
-    with-icon-handle-size: _hardcode(24px, $exclude-hardcoded),
-    pressed-handle-size: _hardcode(28px, $exclude-hardcoded),
-    selected-handle-horizontal-margin: _hardcode(0 24px, $exclude-hardcoded),
-    selected-with-icon-handle-horizontal-margin: _hardcode(0 24px, $exclude-hardcoded),
-    selected-pressed-handle-horizontal-margin: _hardcode(0 22px, $exclude-hardcoded),
-    unselected-handle-horizontal-margin: _hardcode(0 8px, $exclude-hardcoded),
-    unselected-with-icon-handle-horizontal-margin: _hardcode(0 4px, $exclude-hardcoded),
-    unselected-pressed-handle-horizontal-margin: _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: _hardcode(1, $exclude-hardcoded),
-    hidden-track-opacity: _hardcode(0, $exclude-hardcoded),
-    visible-track-transition: _hardcode(opacity 75ms, $exclude-hardcoded),
-    hidden-track-transition: _hardcode(opacity 75ms, $exclude-hardcoded),
-    track-outline-width: _hardcode(2px, $exclude-hardcoded),
-    track-outline-color:  map.get($systems, md-sys-color, outline),
-    selected-track-outline-width: _hardcode(0, $exclude-hardcoded),
-    disabled-unselected-track-outline-width: _hardcode(2px, $exclude-hardcoded),
-    disabled-unselected-track-outline-color: map.get($systems, md-sys-color, on-surface),
-  ), ();
-}
-
-/// 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
-/// @return {Map} A set of custom tokens for the mat-snack-bar
-@function snack-bar($systems, $exclude-hardcoded) {
-  @return (
-    button-color: map.get($systems, md-sys-color, inverse-primary),
-  );
-}
-
-/// Generates custom tokens for the mat-sort.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-sort
-@function sort($systems, $exclude-hardcoded) {
-  @return (
-    arrow-color: map.get($systems, md-sys-color, on-surface),
-  );
-}
-
-/// Generates custom tokens for the mat-stepper.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-stepper
-@function stepper($systems, $exclude-hardcoded) {
-  @return (
-    (
-      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: _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),
-      )
-    )
-  );
-}
-
-/// Generates custom tokens for the mat-tab-header.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-tab-header
-@function tab-header($systems, $exclude-hardcoded) {
-  @return (sass-utils.merge-all(
-    _generate-typography-tokens($systems, label-text, title-small),
-    (
-      divider-color: map.get($systems, md-sys-color, surface-variant),
-      divider-height: _hardcode(1px, $exclude-hardcoded),
-      disabled-ripple-color: null, // TODO(mmalerba): Figure out correct value.
-      pagination-icon-color: map.get($systems, md-sys-color, on-surface),
-      inactive-label-text-color: map.get($systems, md-sys-color, on-surface),
-      active-label-text-color: map.get($systems, md-sys-color, on-surface),
-      active-ripple-color: map.get($systems, md-sys-color, on-surface),
-      inactive-ripple-color: map.get($systems, md-sys-color, on-surface),
-      inactive-focus-label-text-color: map.get($systems, md-sys-color, on-surface),
-      inactive-hover-label-text-color: map.get($systems, md-sys-color, on-surface),
-      active-focus-label-text-color: map.get($systems, md-sys-color, on-surface),
-      active-hover-label-text-color: map.get($systems, md-sys-color, on-surface),
-      active-focus-indicator-color: map.get($systems, md-sys-color, primary),
-      active-hover-indicator-color: map.get($systems, md-sys-color, primary),
-    ),
-  ), (
-    // Color variants
-    primary: (), // Default, no overrides needed
-    secondary: (
-      active-focus-indicator-color: map.get($systems, md-sys-color, secondary),
-      active-hover-indicator-color: map.get($systems, md-sys-color, secondary),
-    ),
-    tertiary: (
-      active-focus-indicator-color: map.get($systems, md-sys-color, tertiary),
-      active-hover-indicator-color: map.get($systems, md-sys-color, tertiary),
-    ),
-    error: (
-      active-focus-indicator-color: map.get($systems, md-sys-color, error),
-      active-hover-indicator-color: map.get($systems, md-sys-color, error),
-    )
-  ));
-}
-
-/// Generates custom tokens for the mdc-tab-indicator. (MDC has a tab-indicator component, but they
-/// seem to have made up the tokens rather than using ones generated from the token database,
-/// therefore we need a custom token function for it).
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mdc-tab-indicator
-@function tab-indicator($systems, $exclude-hardcoded) {
-  @return ((
-    active-indicator-height: _hardcode(2px, $exclude-hardcoded),
-    active-indicator-shape: _hardcode(0, $exclude-hardcoded),
-    active-indicator-color: map.get($systems, md-sys-color, primary),
-  ), (
-    // Color variants
-    primary: (), // Default, no overrides needed
-    secondary: (
-      active-indicator-color: map.get($systems, md-sys-color, secondary),
-    ),
-    tertiary: (
-      active-indicator-color: map.get($systems, md-sys-color, tertiary),
-    ),
-    error: (
-      active-indicator-color: map.get($systems, md-sys-color, error),
-    )
-  ));
-}
-
-/// Generates custom tokens for the mat-table.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-table
-@function table($systems, $exclude-hardcoded) {
-  @return sass-utils.merge-all(
-    _generate-typography-tokens($systems, header-headline, title-small),
-    _generate-typography-tokens($systems, row-item-label-text, body-medium),
-    _generate-typography-tokens($systems, footer-supporting-text, body-medium),
-    (
-      row-item-outline-width: _hardcode(1px, $exclude-hardcoded),
-      background-color: map.get($systems, md-sys-color, surface),
-      header-headline-color: map.get($systems, md-sys-color, on-surface),
-      row-item-label-text-color: map.get($systems, md-sys-color, on-surface),
-      row-item-outline-color: map.get($systems, md-sys-color, outline-variant),
-    ),
-  );
-}
-
-/// Generates custom tokens for the mat-toolbar.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-toolbar
-@function toolbar($systems, $exclude-hardcoded) {
-  @return sass-utils.merge-all(
-    _generate-typography-tokens($systems, title-text, title-large),
-    (
-      container-background-color: map.get($systems, md-sys-color, surface),
-      container-text-color: map.get($systems, md-sys-color, on-surface),
-    )
-  );
-}
-
-/// Generates custom tokens for the mat-tree.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of custom tokens for the mat-tree
-@function tree($systems, $exclude-hardcoded) {
-  @return (
-    container-background-color: map.get($systems, md-sys-color, surface),
-    node-text-color: map.get($systems, md-sys-color, on-surface),
-    node-text-font: map.get($systems, md-sys-typescale, body-large-font),
-    node-text-size: map.get($systems, md-sys-typescale, body-large-size),
-    node-text-weight: map.get($systems, md-sys-typescale, body-large-weight),
-  );
-}
-
-/// Generates custom token overrides for the mdc-checkbox color variants.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of color variant token overrides for the mdc-checkbox
-@function mdc-checkbox-color-variants($systems, $exclude-hardcoded) {
-  @return (
-    primary: (), // Default, no overrides needed
-    secondary: (
-      selected-container-color: map.get($systems, md-sys-color, secondary),
-      selected-focus-container-color: map.get($systems, md-sys-color, secondary),
-      selected-focus-icon-color: map.get($systems, md-sys-color, on-secondary),
-      selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
-      selected-hover-container-color: map.get($systems, md-sys-color, secondary),
-      selected-hover-icon-color: map.get($systems, md-sys-color, on-secondary),
-      selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
-      selected-icon-color: map.get($systems, md-sys-color, on-secondary),
-      selected-pressed-container-color: map.get($systems, md-sys-color, secondary),
-      selected-pressed-icon-color: map.get($systems, md-sys-color, on-secondary),
-      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
-    ),
-    tertiary: (
-      selected-container-color: map.get($systems, md-sys-color, tertiary),
-      selected-focus-container-color: map.get($systems, md-sys-color, tertiary),
-      selected-focus-icon-color: map.get($systems, md-sys-color, on-tertiary),
-      selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
-      selected-hover-container-color: map.get($systems, md-sys-color, tertiary),
-      selected-hover-icon-color: map.get($systems, md-sys-color, on-tertiary),
-      selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
-      selected-icon-color: map.get($systems, md-sys-color, on-tertiary),
-      selected-pressed-container-color: map.get($systems, md-sys-color, tertiary),
-      selected-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary),
-      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
-    ),
-    error: (
-      selected-container-color: map.get($systems, md-sys-color, error),
-      selected-focus-container-color: map.get($systems, md-sys-color, error),
-      selected-focus-icon-color: map.get($systems, md-sys-color, on-error),
-      selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
-      selected-hover-container-color: map.get($systems, md-sys-color, error),
-      selected-hover-icon-color: map.get($systems, md-sys-color, on-error),
-      selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
-      selected-icon-color: map.get($systems, md-sys-color, on-error),
-      selected-pressed-container-color: map.get($systems, md-sys-color, error),
-      selected-pressed-icon-color: map.get($systems, md-sys-color, on-error),
-      unselected-pressed-state-layer-color: map.get($systems, md-sys-color, error),
-    )
-  );
-}
-
-/// Generates custom token overrides for the mdc-slider color variants.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of color variant token overrides for the mdc-slider
-@function mdc-slider-color-variants($systems, $exclude-hardcoded) {
-  @return (
-    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),
-    ),
-  );
-}
-
-/// Generates custom token overrides for the mdc-switch color variants.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of color variant token overrides for the mdc-switch
-@function mdc-switch-color-variants($systems, $exclude-hardcoded) {
-  @return (
-    primary: (), // Default, no overrides needed
-    secondary: (
-      selected-focus-handle-color: map.get($systems, md-sys-color, secondary-container),
-      selected-focus-icon-color: map.get($systems, md-sys-color, on-secondary-container),
-      selected-focus-state-layer-color: map.get($systems, md-sys-color, secondary),
-      selected-focus-track-color: map.get($systems, md-sys-color, secondary),
-      selected-handle-color: map.get($systems, md-sys-color, on-secondary),
-      selected-hover-handle-color: map.get($systems, md-sys-color, secondary-container),
-      selected-hover-icon-color: map.get($systems, md-sys-color, on-secondary-container),
-      selected-hover-state-layer-color: map.get($systems, md-sys-color, secondary),
-      selected-hover-track-color: map.get($systems, md-sys-color, secondary),
-      selected-icon-color: map.get($systems, md-sys-color, on-secondary-container),
-      selected-pressed-handle-color: map.get($systems, md-sys-color, secondary-container),
-      selected-pressed-icon-color: map.get($systems, md-sys-color, on-secondary-container),
-      selected-pressed-state-layer-color: map.get($systems, md-sys-color, secondary),
-      selected-pressed-track-color: map.get($systems, md-sys-color, secondary),
-      selected-track-color: map.get($systems, md-sys-color, secondary),
-    ),
-    tertiary: (
-      selected-focus-handle-color: map.get($systems, md-sys-color, tertiary-container),
-      selected-focus-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
-      selected-focus-state-layer-color: map.get($systems, md-sys-color, tertiary),
-      selected-focus-track-color: map.get($systems, md-sys-color, tertiary),
-      selected-handle-color: map.get($systems, md-sys-color, on-tertiary),
-      selected-hover-handle-color: map.get($systems, md-sys-color, tertiary-container),
-      selected-hover-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
-      selected-hover-state-layer-color: map.get($systems, md-sys-color, tertiary),
-      selected-hover-track-color: map.get($systems, md-sys-color, tertiary),
-      selected-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
-      selected-pressed-handle-color: map.get($systems, md-sys-color, tertiary-container),
-      selected-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary-container),
-      selected-pressed-state-layer-color: map.get($systems, md-sys-color, tertiary),
-      selected-pressed-track-color: map.get($systems, md-sys-color, tertiary),
-      selected-track-color: map.get($systems, md-sys-color, tertiary),
-    ),
-    error: (
-      selected-focus-handle-color: map.get($systems, md-sys-color, error-container),
-      selected-focus-icon-color: map.get($systems, md-sys-color, on-error-container),
-      selected-focus-state-layer-color: map.get($systems, md-sys-color, error),
-      selected-focus-track-color: map.get($systems, md-sys-color, error),
-      selected-handle-color: map.get($systems, md-sys-color, on-error),
-      selected-hover-handle-color: map.get($systems, md-sys-color, error-container),
-      selected-hover-icon-color: map.get($systems, md-sys-color, on-error-container),
-      selected-hover-state-layer-color: map.get($systems, md-sys-color, error),
-      selected-hover-track-color: map.get($systems, md-sys-color, error),
-      selected-icon-color: map.get($systems, md-sys-color, on-error-container),
-      selected-pressed-handle-color: map.get($systems, md-sys-color, error-container),
-      selected-pressed-icon-color: map.get($systems, md-sys-color, on-error-container),
-      selected-pressed-state-layer-color: map.get($systems, md-sys-color, error),
-      selected-pressed-track-color: map.get($systems, md-sys-color, error),
-      selected-track-color: map.get($systems, md-sys-color, error),
-    ),
-  );
-}
-
-/// Generates custom token overrides for the mdc-radio color variants.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of color variant token overrides for the mdc-radio
-@function mdc-radio-color-variants($systems, $exclude-hardcoded) {
-  @return (
-    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),
-    ),
-  );
-}
-
-/// Generates custom token overrides for the mdc-circular-progress color variants.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of color variant token overrides for the mdc-circular-progress
-@function mdc-circular-progress-color-variants($systems, $exclude-hardcoded) {
-  @return (
-    primary: (), // Default, no overrides needed
-    secondary: (
-      active-indicator-color: map.get($systems, md-sys-color, secondary),
-    ),
-    tertiary: (
-      active-indicator-color: map.get($systems, md-sys-color, tertiary),
-    ),
-    error: (
-      active-indicator-color: map.get($systems, md-sys-color, error),
-    )
-  );
-}
-
-/// Generates custom token overrides for the mdc-linear-progress color variants.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of color variant token overrides for the mdc-linear-progress
-@function mdc-linear-progress-color-variants($systems, $exclude-hardcoded) {
-  @return (
-    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),
-    ),
-  );
-}
-
-/// Generates custom token overrides for the mdc-filled-form-field color variants.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of color variant token overrides for the mdc-filled-form-field
-@function mdc-filled-text-field-color-variants($systems, $exclude-hardcoded) {
-  @return (
-    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),
-    ),
-  );
-}
-
-/// Generates custom token overrides for the mdc-outlined-form-field color variants.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of color variant token overrides for the mdc-outlined-form-field
-@function mdc-outlined-text-field-color-variants($systems, $exclude-hardcoded) {
-  @return (
-    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),
-    ),
-  );
-}
-
-/// Generates custom token overrides for the mdc-text-button color variants.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of color variant token overrides for the mdc-text-button
-@function mdc-text-button-color-variants($systems, $exclude-hardcoded) {
-  @return (
-    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)
-    )
-  );
-}
-
-/// Generates custom token overrides for the mdc-elevated-button color variants.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of color variant token overrides for the mdc-elevated-button
-@function mdc-elevated-button-color-variants($systems, $exclude-hardcoded) {
-  @return (
-    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)
-    )
-  );
-}
-
-/// Generates custom token overrides for the mdc-filled-button color variants.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of color variant token overrides for the mdc-filled-button
-@function mdc-filled-button-color-variants($systems, $exclude-hardcoded) {
-  @return (
-    primary: (), // Default, no overrides needed.
-    secondary: (
-      container-color: map.get($systems, md-sys-color, secondary),
-      focus-label-text-color: map.get($systems, md-sys-color, on-secondary),
-      focus-state-layer-color: map.get($systems, md-sys-color, on-secondary),
-      hover-label-text-color: map.get($systems, md-sys-color, on-secondary),
-      hover-state-layer-color: map.get($systems, md-sys-color, on-secondary),
-      label-text-color: map.get($systems, md-sys-color, on-secondary),
-      pressed-label-text-color: map.get($systems, md-sys-color, on-secondary),
-      pressed-state-layer-color: map.get($systems, md-sys-color, on-secondary),
-      with-icon-focus-icon-color: map.get($systems, md-sys-color, on-secondary),
-      with-icon-hover-icon-color: map.get($systems, md-sys-color, on-secondary),
-      with-icon-icon-color: map.get($systems, md-sys-color, on-secondary),
-      with-icon-pressed-icon-color: map.get($systems, md-sys-color, on-secondary)
-    ),
-    tertiary: (
-      container-color: map.get($systems, md-sys-color, tertiary),
-      focus-label-text-color: map.get($systems, md-sys-color, on-tertiary),
-      focus-state-layer-color: map.get($systems, md-sys-color, on-tertiary),
-      hover-label-text-color: map.get($systems, md-sys-color, on-tertiary),
-      hover-state-layer-color: map.get($systems, md-sys-color, on-tertiary),
-      label-text-color: map.get($systems, md-sys-color, on-tertiary),
-      pressed-label-text-color: map.get($systems, md-sys-color, on-tertiary),
-      pressed-state-layer-color: map.get($systems, md-sys-color, on-tertiary),
-      with-icon-focus-icon-color: map.get($systems, md-sys-color, on-tertiary),
-      with-icon-hover-icon-color: map.get($systems, md-sys-color, on-tertiary),
-      with-icon-icon-color: map.get($systems, md-sys-color, on-tertiary),
-      with-icon-pressed-icon-color: map.get($systems, md-sys-color, on-tertiary)
-    ),
-    error: (
-      container-color: map.get($systems, md-sys-color, error),
-      focus-label-text-color: map.get($systems, md-sys-color, on-error),
-      focus-state-layer-color: map.get($systems, md-sys-color, on-error),
-      hover-label-text-color: map.get($systems, md-sys-color, on-error),
-      hover-state-layer-color: map.get($systems, md-sys-color, on-error),
-      label-text-color: map.get($systems, md-sys-color, on-error),
-      pressed-label-text-color: map.get($systems, md-sys-color, on-error),
-      pressed-state-layer-color: map.get($systems, md-sys-color, on-error),
-      with-icon-focus-icon-color: map.get($systems, md-sys-color, on-error),
-      with-icon-hover-icon-color: map.get($systems, md-sys-color, on-error),
-      with-icon-icon-color: map.get($systems, md-sys-color, on-error),
-      with-icon-pressed-icon-color: map.get($systems, md-sys-color, on-error)
-    )
-  );
-}
-
-/// Generates custom token overrides for the mdc-outlined-button color variants.
-/// @param {Map} $systems The MDC system tokens
-/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
-/// @return {Map} A set of color variant token overrides for the mdc-outlined-button
-@function mdc-outlined-button-color-variants($systems, $exclude-hardcoded) {
-  @return (
-    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)
-    )
-  );
-}
-