org.eclipse.osbp.themes/valo/util/_color.scss

// "Photoshop" blend modes
@import "blend-modes";

/**
 * Returns the luminance of a color (0-255), i.e. the perceived brightness, rather than
 * the absolute mathematical lightness value.
 *
 * "The luminance calculation is a weighted average of the color channels that approximates
 * how humans perceive brightness, while lightness is just an average of the largest and
 * smallest channels without regard to perception."
 *
 * Source: http://en.wikipedia.org/wiki/Luminance_(relative)
 *
 * @group color
 *
 * @param {color} $color - the color whose luminance value to get
 *
 * @return {number} the luminance value of the color, in the range of 0-255
 *
 */
@function color-luminance ($color) {
  @return 0.2126 * red($color) + 0.7152 * green($color) + 0.0722 * blue($color);
}


/**
 * Luminance value after which colors will be considered light (i.e. not dark).
 *
 * @group color
 */
$v-luminance-threshold: 150 !default;


/**
 * Contrast default value for valo-font-color function.
 *
 * @group color
 * @type number
 */
$v-font-color-contrast: 0.72 !default;

/**
 * Checks whether the color is considered dark or light, according to it's luminance and saturation.
 *
 * @group color
 *
 * @param {color} $color - the color to check
 *
 * @return {bool} true if the color is considered dark, false if considered light
 */
@function is-dark-color($color) {
  $luminance: color-luminance($color);
  @if $luminance < $v-luminance-threshold or (saturation($color) > 80% and ($luminance < $v-luminance-threshold + 20)) {
    @return true;
  } @else {
    @return false;
  }
}


/**
 * Get the darkest color (by luminance) from a list of colors.
 *
 * @group color
 *
 * @param {list} $colors - a list of CSS colors
 *
 * @return {color} darkest color (by luminance) from a list of colors
 */
@function darkest-color($colors...) {
  $darkest: first($colors);
  @each $color in $colors {
    @if color-luminance($color) < color-luminance($darkest) {
      $darkest: $color;
    }
  }
  @return $darkest;
}


/**
 * Returns a font color with enough contrast for the given background color.
 *
 * @group color
 *
 * @param {color} $bg-color - the background color for which to compute a suitable font color
 * @param {number} $contrast (0.8) - the contrast of the font color compared to the background color
 *
 * @return {color} a suitable font color for the given background color
 */
@function valo-font-color ($bg-color, $contrast: $v-font-color-contrast) {
  @if type-of($bg-color) == color {
    @if is-dark-color($bg-color) {
      @return scale-color($bg-color, $lightness: min(100%, 100% * $contrast), $saturation: max(-100%, -50% * $contrast));
    } @else {
      @return scale-color($bg-color, $lightness: max(-100%, -100% * $contrast), $saturation: max(-100%, -50% * $contrast));
    }
  }
  @return null;
}


/**
 * Returns a suitable focus color for the given background color.
 *
 * @group color
 *
 * @param {color} $context ($v-app-background-color) - the background color for which to compute a suitable focus color
 *
 * @return {color} a suitable focus color for the given background color
 */
@function valo-focus-color ($context: $v-app-background-color) {
  $color: $context;
  @if is-dark-color($context) {
    $color: scale-color($color, $lightness: 40%, $saturation: 80%);
  } @else {
    $color: scale-color($color, $lightness: -50%, $saturation: 80%);
  }
  @return $color;
}


/**
 * Output the default focus styles (border-color and box-shadow).
 *
 * @group style
 */
@mixin valo-focus-style {
  @if type-of($v-focus-style) == list {
    @include box-shadow($v-focus-style);
  } @else if type-of($v-focus-style) == color {
    border-color: $v-focus-style;
  }
}