140 lines
4.5 KiB
SCSS
140 lines
4.5 KiB
SCSS
// Foundation for Sites by ZURB
|
|
// foundation.zurb.com
|
|
// Licensed under MIT Open Source
|
|
|
|
@import 'math';
|
|
|
|
$contrast-warnings: true !default;
|
|
|
|
////
|
|
/// @group functions
|
|
////
|
|
|
|
/// Checks the luminance of `$color`.
|
|
///
|
|
/// @param {Color} $color - Color to check the luminance of.
|
|
///
|
|
/// @returns {Number} The luminance of `$color`.
|
|
@function color-luminance($color) {
|
|
// Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
|
|
// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
|
|
$rgba: red($color), green($color), blue($color);
|
|
$rgba2: ();
|
|
|
|
@for $i from 1 through 3 {
|
|
$rgb: nth($rgba, $i);
|
|
$rgb: $rgb / 255;
|
|
|
|
$rgb: if($rgb < 0.03928, $rgb / 12.92, pow(($rgb + 0.055) / 1.055, 2.4));
|
|
|
|
$rgba2: append($rgba2, $rgb);
|
|
}
|
|
|
|
@return 0.2126 * nth($rgba2, 1) + 0.7152 * nth($rgba2, 2) + 0.0722 * nth($rgba2, 3);
|
|
}
|
|
|
|
/// Checks the contrast ratio of two colors.
|
|
///
|
|
/// @param {Color} $color1 - First color to compare.
|
|
/// @param {Color} $color2 - Second color to compare.
|
|
///
|
|
/// @returns {Number} The contrast ratio of the compared colors.
|
|
@function color-contrast($color1, $color2) {
|
|
// Adapted from: https://github.com/LeaVerou/contrast-ratio/blob/gh-pages/color.js
|
|
// Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
|
|
$luminance1: color-luminance($color1) + 0.05;
|
|
$luminance2: color-luminance($color2) + 0.05;
|
|
$ratio: $luminance1 / $luminance2;
|
|
|
|
@if $luminance2 > $luminance1 {
|
|
$ratio: 1 / $ratio;
|
|
}
|
|
|
|
$ratio: round($ratio * 10) / 10;
|
|
|
|
@return $ratio;
|
|
}
|
|
|
|
/// Checks the luminance of `$base`, and returns the color from `$colors` (list of colors) that has the most contrast.
|
|
///
|
|
/// @param {Color} $base - Color to check luminance.
|
|
/// @param {List} $colors [($white, $black)] - Colors to compare.
|
|
/// @param {Number} $tolerance [$global-color-pick-contrast-tolerance] - Contrast tolerance.
|
|
///
|
|
/// @returns {Color} the color from `$colors` (list of colors) that has the most contrast.
|
|
@function color-pick-contrast($base, $colors: ($white, $black), $tolerance: $global-color-pick-contrast-tolerance) {
|
|
$contrast: color-contrast($base, nth($colors, 1));
|
|
$best: nth($colors, 1);
|
|
|
|
@for $i from 2 through length($colors) {
|
|
$current-contrast: color-contrast($base, nth($colors, $i));
|
|
@if ($current-contrast - $contrast > $tolerance) {
|
|
$contrast: color-contrast($base, nth($colors, $i));
|
|
$best: nth($colors, $i);
|
|
}
|
|
}
|
|
|
|
@if ($contrast-warnings and $contrast < 3) {
|
|
@warn "Contrast ratio of #{$best} on #{$base} is pretty bad, just #{$contrast}";
|
|
}
|
|
|
|
@return $best;
|
|
}
|
|
|
|
/// Scales a color to be darker if it's light, or lighter if it's dark. Use this function to tint a color appropriate to its lightness.
|
|
///
|
|
/// @param {Color} $color - Color to scale.
|
|
/// @param {Percentage} $scale [5%] - Amount to scale up or down.
|
|
/// @param {Percentage} $threshold [40%] - Threshold of lightness to check against.
|
|
///
|
|
/// @returns {Color} A scaled color.
|
|
@function smart-scale($color, $scale: 5%, $threshold: 40%) {
|
|
@if lightness($color) > $threshold {
|
|
$scale: -$scale;
|
|
}
|
|
@return scale-color($color, $lightness: $scale);
|
|
}
|
|
|
|
/// Get color from foundation-palette
|
|
///
|
|
/// @param {key} color key from foundation-palette
|
|
///
|
|
/// @returns {Color} color from foundation-palette
|
|
@function get-color($key) {
|
|
@if map-has-key($foundation-palette, $key) {
|
|
@return map-get($foundation-palette, $key);
|
|
}
|
|
@else {
|
|
@error 'given $key is not available in $foundation-palette';
|
|
}
|
|
}
|
|
|
|
/// Transfers the colors in the `$foundation-palette` map into variables, such as `$primary-color` and `$secondary-color`. Call this mixin below the Global section of your settings file to properly migrate your codebase.
|
|
@mixin add-foundation-colors() {
|
|
@if map-has-key($foundation-palette, primary) {
|
|
$primary-color: map-get($foundation-palette, primary) !global;
|
|
} @else {
|
|
$primary-color: #1779ba !global;
|
|
}
|
|
@if map-has-key($foundation-palette, secondary) {
|
|
$secondary-color: map-get($foundation-palette, secondary) !global;
|
|
} @else {
|
|
$secondary-color: #767676 !global;
|
|
}
|
|
@if map-has-key($foundation-palette, success) {
|
|
$success-color: map-get($foundation-palette, success) !global;
|
|
} @else {
|
|
$success-color: #3adb76 !global;
|
|
}
|
|
@if map-has-key($foundation-palette, warning) {
|
|
$warning-color: map-get($foundation-palette, warning) !global;
|
|
} @else {
|
|
$warning-color: #ffae00 !global;
|
|
}
|
|
@if map-has-key($foundation-palette, alert) {
|
|
$alert-color: map-get($foundation-palette, alert) !global;
|
|
} @else {
|
|
$alert-color: #cc4b37 !global;
|
|
}
|
|
}
|