_checkbox-theme.scss

@use '@material/checkbox/checkbox' as mdc-checkbox;
@use '@material/checkbox/checkbox-theme' as mdc-checkbox-theme;
@use '@material/ripple/ripple-theme' as mdc-ripple-theme;
@use '@material/form-field' as mdc-form-field;
@use '@material/theme/theme-color' as mdc-theme-color;
@use '@material/theme/theme';
@use 'sass:map';
@use '../mdc-helpers/mdc-helpers';
@use '../../material/core/typography/typography';
@use '../../material/core/theming/theming';
@use '../../material/core/ripple/ripple-theme';


// Mixin that includes the checkbox theme styles with a given palette.
// By default, the MDC checkbox always uses the `secondary` palette.
@mixin private-checkbox-styles-with-color($color) {
  @include mdc-checkbox-theme.theme(
    (
      density-scale: null,
      checkmark-color: mdc-theme-color.prop-value(on-#{$color}),
      container-checked-color: $color,
      container-checked-hover-color: null,
      container-disabled-color: rgba(mdc-theme-color.prop-value(on-surface), 0.38),
      outline-color: rgba(mdc-theme-color.prop-value(on-surface), 0.54),
      outline-hover-color: null,
      ripple-color: mdc-theme-color.prop-value(on-surface),
      ripple-opacity: mdc-ripple-theme.$dark-ink-opacities,
      ripple-checked-color: $color,
      ripple-checked-opacity: mdc-ripple-theme.$dark-ink-opacities,
    )
  );
}

// Apply ripple colors to the MatRipple element and the MDC ripple element when the
// checkbox is selected.
@mixin _selected-ripple-colors($theme, $mdcColor) {
  .mdc-checkbox--selected ~ {
    .mat-mdc-checkbox-ripple {
      @include ripple-theme.theme((
          foreground: (
              base: mdc-theme-color.prop-value($mdcColor)
          ),
      ));
    }

    .mdc-checkbox__ripple {
      background: $theme;
    }
  }
}

@mixin color($config-or-theme) {
  $config: theming.get-color-config($config-or-theme);
  $primary: theming.get-color-from-palette(map.get($config, primary));
  $accent: theming.get-color-from-palette(map.get($config, accent));
  $warn: theming.get-color-from-palette(map.get($config, warn));

  // Save original values of MDC global variables. We need to save these so we can restore the
  // variables to their original values and prevent unintended side effects from using this mixin.
  $orig-border-color: mdc-checkbox-theme.$border-color;
  $orig-disabled-color: mdc-checkbox-theme.$disabled-color;

  @include mdc-helpers.mat-using-mdc-theme($config) {
    mdc-checkbox-theme.$border-color: rgba(
      mdc-theme-color.prop-value(on-surface),
      0.54
    );
    mdc-checkbox-theme.$disabled-color: rgba(
      mdc-theme-color.prop-value(on-surface),
      0.26
    );

    .mat-mdc-checkbox {
      @include private-checkbox-styles-with-color(primary);
      @include mdc-form-field.core-styles($query: mdc-helpers.$mat-theme-styles-query);
      @include ripple-theme.theme((
        foreground: (
          base: mdc-theme-color.prop-value(on-surface)
        ),
      ));

      .mdc-checkbox__ripple {
        background: mdc-theme-color.prop-value(on-surface);
      }

      // MDC's checkbox doesn't support a `color` property. We add support for it by adding a CSS
      // class for accent and warn style, and applying the appropriate overrides below. Since we
      // don't use MDC's ripple, we also need to set the color for our replacement ripple.
      &.mat-primary {
        @include private-checkbox-styles-with-color(primary);
        @include _selected-ripple-colors($primary, primary);
      }

      &.mat-accent {
        @include private-checkbox-styles-with-color(secondary);
        @include _selected-ripple-colors($accent, secondary);
      }

      &.mat-warn {
        @include private-checkbox-styles-with-color(error);
        @include _selected-ripple-colors($warn, error);
      }
    }
  }

  // Restore original values of MDC global variables.
  mdc-checkbox-theme.$border-color: $orig-border-color;
  mdc-checkbox-theme.$disabled-color: $orig-disabled-color;
}

@mixin typography($config-or-theme) {
  $config: typography.private-typography-to-2018-config(
      theming.get-typography-config($config-or-theme));
  @include mdc-helpers.mat-using-mdc-typography($config) {
    @include mdc-checkbox.without-ripple($query: mdc-helpers.$mat-typography-styles-query);
    @include mdc-form-field.core-styles($query: mdc-helpers.$mat-typography-styles-query);
  }
}

@mixin density($config-or-theme) {
  $density-scale: theming.get-density-config($config-or-theme);
  .mat-mdc-checkbox .mdc-checkbox {
    @include mdc-checkbox-theme.density(
      $density-scale,
      $query: mdc-helpers.$mat-base-styles-query
    );
  }

  @if ($density-scale == -2 or $density-scale == 'minimum') {
    .mat-mdc-checkbox-touch-target {
      display: none;
    }
  }
}

@mixin theme($theme-or-color-config) {
  $theme: theming.private-legacy-get-theme($theme-or-color-config);
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-checkbox') {
    $color: theming.get-color-config($theme);
    $density: theming.get-density-config($theme);
    $typography: theming.get-typography-config($theme);

    @if $color != null {
      @include color($color);
    }
    @if $density != null {
      @include density($density);
    }
    @if $typography != null {
      @include typography($typography);
    }
  }
}