comparison 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
comparison
equal deleted inserted replaced
-1:000000000000 0:1d038bc9b3d2
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 }