added bourbon to the source files and included in the main scss
[theme-danix.xyz.git] / assets / sass / bourbon / bourbon / library / _contrast-switch.scss
diff --git a/assets/sass/bourbon/bourbon/library/_contrast-switch.scss b/assets/sass/bourbon/bourbon/library/_contrast-switch.scss
new file mode 100644 (file)
index 0000000..4545be3
--- /dev/null
@@ -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);
+  }
+}