Menu icon Foundation

Developer | San Francisco, CA

My Posts

No Content

My Comments

Osman Gormus commented on Dan Billinghan's post almost 2 years

Hey Dan,
I'd just check the function color-pick-contrast() for its usage. You can find it in util/_color.scss file.
 
I copied its documentation:
/// 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.
 
Seems like in your case all you need is providing the $base value which is actually the background color of the selector.
$colors argument already defaults to $black and $white colors.
... and lastly you can either change $global-color-pick-contrast-tolerance value in your global variables file _settings.scss or only in selector style.
 
Try these:
color: color-pick-contrast($your-choice-of-background-color);

// or set all params; $base, $colors, $tolerance)
color: color-pick-contrast($your-choice-of-background-color, ($white, $black), 0.1);
 
At the end, color would get a value from the color list ($white or $black) depending on contrast comparison.

Posts Followed



Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Dan Billinghan's post almost 2 years

Hey Dan,
I'd just check the function color-pick-contrast() for its usage. You can find it in util/_color.scss file.
 
I copied its documentation:
/// 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.
 
Seems like in your case all you need is providing the $base value which is actually the background color of the selector.
$colors argument already defaults to $black and $white colors.
... and lastly you can either change $global-color-pick-contrast-tolerance value in your global variables file _settings.scss or only in selector style.
 
Try these:
color: color-pick-contrast($your-choice-of-background-color);

// or set all params; $base, $colors, $tolerance)
color: color-pick-contrast($your-choice-of-background-color, ($white, $black), 0.1);
 
At the end, color would get a value from the color list ($white or $black) depending on contrast comparison.

Posts Followed

Following

  • No Content

Followers

  • No Content