@angular/material/core/_core-theme.scss

@use 'sass:map';
@use 'theming/theming';
@use './style/private';
@use './ripple/ripple-theme';
@use './option/option-theme';
@use './option/optgroup-theme';
@use './selection/pseudo-checkbox/pseudo-checkbox-theme';
@use './style/elevation';
@use './typography/typography';

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

  @include ripple-theme.color($config);
  @include option-theme.color($config);
  @include optgroup-theme.color($config);
  @include pseudo-checkbox-theme.color($config);

  // Wrapper element that provides the theme background when the user's content isn't
  // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand
  // selector in case the mixin is included at the top level.
  .mat-app-background#{if(&, ', &.mat-app-background', '')} {
    $background: map.get($config, background);
    $foreground: map.get($config, foreground);

    background-color: theming.get-color-from-palette($background, background);
    color: theming.get-color-from-palette($foreground, text);
  }

  // Provides external CSS classes for each elevation value. Each CSS class is formatted as
  // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
  // elevated.
  @for $zValue from 0 through 24 {
    $selector: elevation.$prefix + $zValue;
    // We need the `mat-mdc-elevation-specific`, because some MDC mixins
    // come with elevation baked in and we don't have a way of removing it.
    .#{$selector}, .mat-mdc-elevation-specific.#{$selector} {
      @include private.private-theme-elevation($zValue, $config);
    }
  }

  // Marker that is used to determine whether the user has added a theme to their page.
  @at-root {
    .mat-theme-loaded-marker {
      display: none;
    }
  }
}

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

  @include option-theme.typography($config);
  @include optgroup-theme.typography($config);
  @include pseudo-checkbox-theme.typography($config);
  // TODO(mmalerba): add typography mixin for this.
  // @include ripple-theme.typography($config);
}

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

  @include option-theme.density($density-scale);
  @include optgroup-theme.density($density-scale);
  // TODO(mmalerba): add density mixins for these.
  // @include ripple-theme.density($density-scale);
  // @include pseudo-checkbox-theme.density($density-scale);
}

// Mixin that renders all of the core styles that depend on the theme.
@mixin theme($theme-or-color-config) {
  $theme: theming.private-legacy-get-theme($theme-or-color-config);
  // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that
  // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then
  // the imported themes (such as `mat-ripple-theme`) should not report again.
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-core') {
    $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);
    }
  }
}