_functions.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 "./constants";

// Used by the functions below to shift a color's luminance by approximately
// one index within its tonal palette.
// E.g., shift from Red 500 to Red 400 or Red 600.
$_mdc-theme-tonal-offset: 7%;

// Calculate the luminance for a color.
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@function mdc-theme-luminance($color) {
  $red: nth($mdc-theme-linear-channel-values, red($color) + 1);
  $green: nth($mdc-theme-linear-channel-values, green($color) + 1);
  $blue: nth($mdc-theme-linear-channel-values, blue($color) + 1);

  @return .2126 * $red + .7152 * $green + .0722 * $blue;
}

// Calculate the contrast ratio between two colors.
// See https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
@function mdc-theme-contrast($back, $front) {
  $backLum: mdc-theme-luminance($back) + .05;
  $foreLum: mdc-theme-luminance($front) + .05;

  @return max($backLum, $foreLum) / min($backLum, $foreLum);
}

// Determine whether the color is "light" or "dark".
@function mdc-theme-tone($color) {
  @if $color == "dark" or $color == "light" {
    @return $color;
  }

  $minimumContrast: 3.1;

  $lightContrast: mdc-theme-contrast($color, white);
  $darkContrast: mdc-theme-contrast($color, rgba(black, .87));

  @if ($lightContrast < $minimumContrast) and ($darkContrast > $lightContrast) {
    @return "light";
  } @else {
    @return "dark";
  }
}

// Determine whether to use dark or light text on top of given color to meet accessibility standards for contrast.
// Returns "dark" if the given color is light and "light" if the given color is dark.
@function mdc-theme-contrast-tone($color) {
  @return if(mdc-theme-tone($color) == "dark", "light", "dark");
}

// lighten() and darken() require values to be between 0% and 100%.
@function mdc-theme-clamp-percentage_($percentage) {
  @return max(0%, min(100%, $percentage));
}

// Generate light and dark variants of the given color, offset by approximately
// the specified number of indexes within the color's tonal palette.
@function mdc-theme-tonal-variants_($color, $num-indexes: 2) {
  $luminance: mdc-theme-luminance($color) * 100%;
  $amount-1x: mdc-theme-clamp-percentage_($_mdc-theme-tonal-offset * $num-indexes);
  $amount-2x: mdc-theme-clamp-percentage_($_mdc-theme-tonal-offset * $num-indexes * 2);
  $lower-bound: $amount-1x;
  $upper-bound: 100% - $lower-bound;

  @if $luminance <= $lower-bound {
    @return (
      dark: lighten($color, $amount-1x),
      light: lighten($color, $amount-2x)
    );
  } @else if $luminance >= $upper-bound {
    @return (
      dark: darken($color, $amount-2x),
      light: darken($color, $amount-1x)
    );
  } @else {
    @return (
      dark: darken($color, $amount-1x),
      light: lighten($color, $amount-1x)
    );
  }
}

// Darken the given color by approximately the specified number of indexes
// within its tonal palette.
//
// If the color is already very dark, it will be lightened instead of darkened
// to ensure that the returned value is visually distinct from the input color.
//
// If the color is very light, it will be darkened twice as much as usual to
// ensure that the returned value is visually distinct from the light variant
// (which will actually end up being a dark shade).
@function mdc-theme-dark-variant($color, $num-indexes: 2) {
  @return map-get(mdc-theme-tonal-variants_($color, $num-indexes), dark);
}

// Lighten the given color by approximately the specified number of indexes
// within its tonal palette.
//
// If the color is already very light, it will be darkened instead of lightened
// to ensure that the returned value is visually distinct from the input color.
//
// If the color is very dark, it will be lightened twice as much as usual to
// ensure that the returned value is visually distinct from the dark variant
// (which will actually end up being a light tint).
@function mdc-theme-light-variant($color, $num-indexes: 2) {
  @return map-get(mdc-theme-tonal-variants_($color, $num-indexes), light);
}