X-Git-Url: https://git.danix.xyz/?a=blobdiff_plain;f=assets%2Fsass%2Fbourbon%2Fbourbon%2Flibrary%2F_contrast-switch.scss;fp=assets%2Fsass%2Fbourbon%2Fbourbon%2Flibrary%2F_contrast-switch.scss;h=4545be319ecc615d6470438dfcb8c9d348fdb84e;hb=2d3ca553a3d3345ec8ecdf0faedc6924cd0e2f5d;hp=0000000000000000000000000000000000000000;hpb=2ae9d02fd007f6d0bab6576f8f26d66570358605;p=theme-danix.xyz.git diff --git a/assets/sass/bourbon/bourbon/library/_contrast-switch.scss b/assets/sass/bourbon/bourbon/library/_contrast-switch.scss new file mode 100644 index 0000000..4545be3 --- /dev/null +++ b/assets/sass/bourbon/bourbon/library/_contrast-switch.scss @@ -0,0 +1,81 @@ +@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); + } +}