_mixins.scss

//
// Copyright 2017 Google Inc. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//      http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
//

@import "./variables";

/**
 * Applies the correct theme color style to the specified property.
 * $property is typically color or background-color, but can be any CSS property that accepts color values.
 * $style should be one of the map keys in $mdc-theme-property-values (_variables.scss).
 */
@mixin mdc-theme-prop($property, $style, $important: false) {
  @if not map-has-key($mdc-theme-property-values, $style) {
    @error "Invalid style specified! Choose one of #{map-keys($mdc-theme-property-values)}";
  }

  @if $important {
    #{$property}: map-get($mdc-theme-property-values, $style) !important;
    #{$property}: var(--mdc-theme-#{$style}, map-get($mdc-theme-property-values, $style)) !important;
  }

  @else {
    #{$property}: map-get($mdc-theme-property-values, $style);
    #{$property}: var(--mdc-theme-#{$style}, map-get($mdc-theme-property-values, $style));
  }
}

/**
 * Creates a rule to be used in MDC-Web components for dark theming, and applies the provided contents.
 * Should provide the $root-selector option if applied to anything other than the root selector.
 * When used with a modifier class, provide a second argument of `true` for the $compound parameter
 * to specify that this should be attached as a compound class.
 *
 * Usage example:
 *
 * ```scss
 * .mdc-foo {
 *   color: black;
 *
 *   @include mdc-theme-dark {
 *     color: white;
 *   }
 *
 *   &__bar {
 *     background: black;
 *
 *     @include mdc-theme-dark(".mdc-foo") {
 *       background: white;
 *     }
 *   }
 * }
 *
 * .mdc-foo--disabled {
 *   opacity: .38;
 *
 *   @include mdc-theme-dark(".mdc-foo", true) {
 *     opacity: .5;
 *   }
 * }
 * ```
 */
@mixin mdc-theme-dark($root-selector: null, $compound: false) {
  @if ($root-selector) {
    @at-root {
      @if ($compound) {
        #{$root-selector}--theme-dark#{&},
        .mdc-theme--dark & {
          @content;
        }
      }

      @else {
        #{$root-selector}--theme-dark &,
        .mdc-theme--dark & {
          @content;
        }
      }
    }
  }

  @else {
    &--theme-dark,
    .mdc-theme--dark & {
      @content;
    }
  }
}