view default/assets/scss/vendors/bourbon/library/_contrast-switch.scss @ 0:1d038bc9b3d2 default tip

Up:default
author Liny <dev@neowd.com>
date Sat, 31 May 2025 09:21:51 +0800
parents
children
line wrap: on
line source

@charset "UTF-8";

/// Switches between two colors based on the lightness of a another color. Great
/// for building button styles.
///
/// @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.
///
/// @argument {color} $light-color [#fff]
///   The color to be output when `$base-color` is dark.
///
/// @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} _is-light
///
/// @since 5.0.0

@function contrast-switch(
    $base-color,
    $dark-color: _retrieve-bourbon-setting("contrast-switch-dark-color"),
    $light-color: _retrieve-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 {
    @return if(_is-light($base-color), $dark-color, $light-color);
  }
}