82 lines
2.5 KiB
SCSS
82 lines
2.5 KiB
SCSS
@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);
|
||
}
|
||
}
|