|
0
|
1 @charset "UTF-8";
|
|
|
2
|
|
|
3 /// Switches between two colors based on the lightness of a another color. Great
|
|
|
4 /// for building button styles.
|
|
|
5 ///
|
|
|
6 /// @argument {color} $base-color
|
|
|
7 /// The color to evaluate lightness against.
|
|
|
8 ///
|
|
|
9 /// @argument {color} $dark-color [#000]
|
|
|
10 /// The color to be output when `$base-color` is light.
|
|
|
11 ///
|
|
|
12 /// @argument {color} $light-color [#fff]
|
|
|
13 /// The color to be output when `$base-color` is dark.
|
|
|
14 ///
|
|
|
15 /// @return {color}
|
|
|
16 ///
|
|
|
17 /// @example scss
|
|
|
18 /// .element {
|
|
|
19 /// color: contrast-switch(#bae6e6);
|
|
|
20 /// }
|
|
|
21 ///
|
|
|
22 /// // CSS Output
|
|
|
23 /// .element {
|
|
|
24 /// color: #000;
|
|
|
25 /// }
|
|
|
26 ///
|
|
|
27 /// @example scss
|
|
|
28 /// .element {
|
|
|
29 /// $button-color: #2d72d9;
|
|
|
30 /// background-color: $button-color;
|
|
|
31 /// color: contrast-switch($button-color, #222, #eee);
|
|
|
32 /// }
|
|
|
33 ///
|
|
|
34 /// // CSS Output
|
|
|
35 /// .element {
|
|
|
36 /// background-color: #2d72d9;
|
|
|
37 /// color: #eee;
|
|
|
38 /// }
|
|
|
39 ///
|
|
|
40 /// @require {function} _is-light
|
|
|
41 ///
|
|
|
42 /// @since 5.0.0
|
|
|
43
|
|
|
44 @function contrast-switch(
|
|
|
45 $base-color,
|
|
|
46 $dark-color: _retrieve-bourbon-setting("contrast-switch-dark-color"),
|
|
|
47 $light-color: _retrieve-bourbon-setting("contrast-switch-light-color")
|
|
|
48 ) {
|
|
|
49
|
|
|
50 @if not _is-color($base-color) {
|
|
|
51 @error "`#{$base-color}` is not a valid color for the `$base-color` " +
|
|
|
52 "argument in the `contrast-switch` function.";
|
|
|
53 } @else if not _is-color($dark-color) {
|
|
|
54 @error "`#{$dark-color}` is not a valid color for the `$dark-color` " +
|
|
|
55 "argument in the `contrast-switch` function.";
|
|
|
56 } @else if not _is-color($light-color) {
|
|
|
57 @error "`#{$light-color}` is not a valid color for the `$light-color` " +
|
|
|
58 "argument in the `contrast-switch` function.";
|
|
|
59 } @else {
|
|
|
60 @return if(_is-light($base-color), $dark-color, $light-color);
|
|
|
61 }
|
|
|
62 }
|
