_datepicker-theme.scss

@use 'sass:color';
@use 'sass:map';
@use '../core/tokens/m2/mat/datepicker' as tokens-mat-datepicker;
@use '../core/theming/theming';
@use '../core/tokens/token-utils';
@use '../core/style/sass-utils';
@use '../core/typography/typography';
@use '../button/icon-button-theme';

// TODO(crisbeto): these variables aren't used anymore and should be removed.
$selected-today-box-shadow-width: 1px;
$selected-fade-amount: 0.6;
$range-fade-amount: 0.2;
$today-fade-amount: 0.2;
$calendar-body-font-size: 13px !default;
$calendar-weekday-table-font-size: 11px !default;

@mixin _calendar-color($config, $palette) {
  $palette-color: theming.get-color-from-palette(map.get($config, $palette));
  $range-color: tokens-mat-datepicker.private-get-range-background-color($palette-color);
  $range-tokens: tokens-mat-datepicker.get-range-color-tokens($range-color);
  $calendar-tokens:
    tokens-mat-datepicker.private-get-calendar-color-palette-color-tokens($config, $palette);

  @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
    map.merge($calendar-tokens, $range-tokens));
}

@mixin color($config-or-theme) {
  $config: theming.get-color-config($config-or-theme);
  $foreground: map.get($config, foreground);
  $background: map.get($config, background);
  $disabled-color: theming.get-color-from-palette($foreground, disabled-text);

  @include sass-utils.current-selector-or-root() {
    @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
      tokens-mat-datepicker.get-color-tokens($config));
  }

  .mat-datepicker-content {
    &.mat-accent {
      @include _calendar-color($config, accent);
    }

    &.mat-warn {
      @include _calendar-color($config, warn);
    }
  }

  .mat-datepicker-toggle-active {
    &.mat-accent {
      $accent-tokens:
        tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($config, accent);
      @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $accent-tokens);
    }

    &.mat-warn {
      $warn-tokens:
        tokens-mat-datepicker.private-get-toggle-color-palette-color-tokens($config, warn);
      @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $warn-tokens);
    }
  }
}

@mixin typography($config-or-theme) {
  $config: typography.private-typography-to-2014-config(
      theming.get-typography-config($config-or-theme));

  @include sass-utils.current-selector-or-root() {
    @include token-utils.create-token-values(tokens-mat-datepicker.$prefix,
      tokens-mat-datepicker.get-typography-tokens($config));
  }
}

@mixin date-range-colors(
  $range-color,
  $comparison-color: tokens-mat-datepicker.$private-default-comparison-color,
  $overlap-color: tokens-mat-datepicker.$private-default-overlap-color,
  $overlap-selected-color:
    tokens-mat-datepicker.private-get-default-overlap-selected-color($overlap-color)) {
  $tokens: tokens-mat-datepicker.get-range-color-tokens(
    $range-color: $range-color,
    $comparison-color: $comparison-color,
    $overlap-color: $overlap-color,
    $overlap-selected-color: $overlap-selected-color,
  );

  @include sass-utils.current-selector-or-root() {
    @include token-utils.create-token-values(tokens-mat-datepicker.$prefix, $tokens);
  }
}

@mixin density($config-or-theme) {
  $density-scale: theming.get-density-config($config-or-theme);

  // TODO(crisbeto): move this into the structural styles
  // once the icon button density is switched to tokens.

  // Regardless of the user-passed density, we want the calendar
  // previous/next buttons to remain at density -2
  .mat-calendar-controls {
    @include icon-button-theme.density(-2);
  }
}

@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-datepicker') {
    $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);
    }
  }
}