thoughtbot/bourbon

View on GitHub
core/bourbon/library/_contrast-switch.scss

Summary

Maintainability
Test Coverage
@charset "UTF-8";

/// Switches between two colors based on the contrast to another color. It’s
/// like a [ternary operator] for color contrast and can be useful for building
/// a button system.
///
/// The calculation of the contrast ratio is based on the [WCAG 2.0
/// specification]. However, we cannot guarantee full compliance, though all of
/// our manual testing passed.
///
///   [ternary operator]: https://goo.gl/ccfLqi
///   [WCAG 2.0 specification]: https://goo.gl/zhQuYA
///
/// @argument {color} $base-color
///   The color to evaluate lightness against.
///
/// @argument {color} $dark-color [#000]
///   The color to be output when `$base-color` is light. Can also be set
///   globally using the `contrast-switch-dark-color` key in the
///   Bourbon settings.
///
/// @argument {color} $light-color [#fff]
///   The color to be output when `$base-color` is dark. Can also be set
///   globally using the `contrast-switch-light-color` key in the
///   Bourbon settings.
///
/// @return {color}
///
/// @example scss
///   .element {
///     color: contrast-switch(#bae6e6);
///   }
///
///   // CSS Output
///   .element {
///     color: #000;
///   }
///
/// @example scss
///   .element {
///     $button-color: #2d72d9;
///     background-color: $button-color;
///     color: contrast-switch($button-color, #222, #eee);
///   }
///
///   // CSS Output
///   .element {
///     background-color: #2d72d9;
///     color: #eee;
///   }
///
/// @require {function} _fetch-bourbon-setting
///
/// @require {function} _is-color
///
/// @require {function} _contrast-ratio
///
/// @since 5.0.0

@function contrast-switch(
  $base-color,
  $dark-color: _fetch-bourbon-setting("contrast-switch-dark-color"),
  $light-color: _fetch-bourbon-setting("contrast-switch-light-color")
) {
  @if not _is-color($base-color) {
    @error "`#{$base-color}` is not a valid color for the `$base-color` " +
      "argument in the `contrast-switch` function.";
  } @else if not _is-color($dark-color) {
    @error "`#{$dark-color}` is not a valid color for the `$dark-color` " +
      "argument in the `contrast-switch` function.";
  } @else if not _is-color($light-color) {
    @error "`#{$light-color}` is not a valid color for the `$light-color` " +
      "argument in the `contrast-switch` function.";
  } @else {
    $-contrast-to-dark: _contrast-ratio($base-color, $dark-color);
    $-contrast-to-light: _contrast-ratio($base-color, $light-color);
    $-prefer-dark: $-contrast-to-dark >= $-contrast-to-light;

    @return if($-prefer-dark, $dark-color, $light-color);
  }
}