3 /// Switches between two colors based on the contrast to another color. It’s
4 /// like a [ternary operator] for color contrast and can be useful for building
7 /// The calculation of the contrast ratio is based on the [WCAG 2.0
8 /// specification]. However, we cannot guarantee full compliance, though all of
9 /// our manual testing passed.
11 /// [ternary operator]: https://goo.gl/ccfLqi
12 /// [WCAG 2.0 specification]: https://goo.gl/zhQuYA
14 /// @argument {color} $base-color
15 /// The color to evaluate lightness against.
17 /// @argument {color} $dark-color [#000]
18 /// The color to be output when `$base-color` is light. Can also be set
19 /// globally using the `contrast-switch-dark-color` key in the
22 /// @argument {color} $light-color [#fff]
23 /// The color to be output when `$base-color` is dark. Can also be set
24 /// globally using the `contrast-switch-light-color` key in the
31 /// color: contrast-switch(#bae6e6);
41 /// $button-color: #2d72d9;
42 /// background-color: $button-color;
43 /// color: contrast-switch($button-color, #222, #eee);
48 /// background-color: #2d72d9;
52 /// @require {function} _fetch-bourbon-setting
54 /// @require {function} _is-color
56 /// @require {function} _contrast-ratio
60 @function contrast-switch(
62 $dark-color: _fetch-bourbon-setting("contrast-switch-dark-color"),
63 $light-color: _fetch-bourbon-setting("contrast-switch-light-color")
65 @if not _is-color($base-color) {
66 @error "`#{$base-color}` is not a valid color for the `$base-color` " +
67 "argument in the `contrast-switch` function.";
68 } @else if not _is-color($dark-color) {
69 @error "`#{$dark-color}` is not a valid color for the `$dark-color` " +
70 "argument in the `contrast-switch` function.";
71 } @else if not _is-color($light-color) {
72 @error "`#{$light-color}` is not a valid color for the `$light-color` " +
73 "argument in the `contrast-switch` function.";
75 $-contrast-to-dark: _contrast-ratio($base-color, $dark-color);
76 $-contrast-to-light: _contrast-ratio($base-color, $light-color);
77 $-prefer-dark: $-contrast-to-dark >= $-contrast-to-light;
79 @return if($-prefer-dark, $dark-color, $light-color);