libs/design/scss/theming/contrast/text-contrast/text-contrast.scss
@use '../contrast-ratio/contrast-ratio' as cr;
@use '../../get-color';
@use '../../color-palettes' as palette;
// @docs
//
// Given a color, get the font color that would be
// easily visible on top of that color
//
// For an interesting read, see more about the topic:
// https://robots.thoughtbot.com/closer-look-color-lightness
//
// Based on the code outlined by Sergio Gomes here:
// https://medium.com/dev-channel/using-sass-to-automatically-pick-text-colors-4ba7645d2796
//
// @usage
// ```
// daff-text-contrast("#777777")
// ```
@function daff-text-contrast(
$color,
$black: get-color.daff-color(palette.$daff-neutral, 110),
$white: palette.$daff-white
) {
$light-contrast: cr.daff-contrast-ratio($color, $white);
$dark-contrast: cr.daff-contrast-ratio($color, $black);
@if ($light-contrast > $dark-contrast) {
@return $white;
}
@else {
@return $black;
}
}