_m3-button-toggle.scss

@use 'sass:map';
@use 'sass:list';
@use '../core/style/sass-utils';
@use '../core/tokens/m3-utils';
@use '../core/theming/theming';
@use '../core/theming/inspection';

// The prefix used to generate the fully qualified name for tokens in this file.
$prefix: (mat, button-toggle);

/// Generates custom tokens for the mat-button-toggle.
/// @param {Map} $systems The MDC system tokens
/// @param {Boolean} $exclude-hardcoded Whether to exclude hardcoded token values
/// @param {Map} $token-slots Possible token slots
/// @return {Map} A set of custom tokens for the mat-button-toggle
@function get-tokens($systems, $exclude-hardcoded, $token-slots) {
  $tokens: sass-utils.merge-all(
    m3-utils.generate-typography-tokens($systems, label-text, label-large),
  (
    shape: map.get($systems, md-sys-shape, corner-full),
    hover-state-layer-opacity: map.get($systems, md-sys-state, hover-state-layer-opacity),
    focus-state-layer-opacity: map.get($systems, md-sys-state, focus-state-layer-opacity),
    text-color: map.get($systems, md-sys-color, on-surface),
    background-color: m3-utils.hardcode(transparent, $exclude-hardcoded),
    state-layer-color: map.get($systems, md-sys-color, on-surface),
    selected-state-background-color: map.get($systems, md-sys-color, secondary-container),
    selected-state-text-color: map.get($systems, md-sys-color, on-secondary-container),
    disabled-state-text-color: sass-utils.safe-color-change(
      map.get($systems, md-sys-color, on-surface),
      $alpha: 0.38,
    ),
    disabled-state-background-color:
        m3-utils.hardcode(transparent, $exclude-hardcoded),
    disabled-selected-state-text-color: sass-utils.safe-color-change(
      map.get($systems, md-sys-color, on-surface),
      $alpha: 0.38,
    ),
    disabled-selected-state-background-color: sass-utils.safe-color-change(
      map.get($systems, md-sys-color, on-surface),
      $alpha: 0.12,
    ),
    divider-color: map.get($systems, md-sys-color, outline),
  ));

  $color-variants: (
    // Color variants:
    primary: (
      selected-state-background-color: map.get($systems, md-sys-color, primary-container),
      selected-state-text-color: map.get($systems, md-sys-color, on-primary-container),
    ),
    secondary: (), // Default, no overrides needed
    tertiary: (
      selected-state-background-color: map.get($systems, md-sys-color, tertiary-container),
      selected-state-text-color: map.get($systems, md-sys-color, on-tertiary-container),
    ),
    error: (
      selected-state-background-color: map.get($systems, md-sys-color, error-container),
      selected-state-text-color: map.get($systems, md-sys-color, on-error-container),
    )
  );

  @return m3-utils.namespace($prefix, ($tokens, $color-variants), $token-slots);
}

// Tokens that can be configured through Angular Material's density theming API.
@function get-density-tokens($theme) {
  $scale: theming.clamp-density(inspection.get-theme-density($theme), -4);
  $index: ($scale * -1) + 1;

  @return (
    height: list.nth((40px, 40px, 40px, 36px, 24px), $index),
  );
}