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);
|
|||
|
|
}
|
|||
|
|
}
|