graycoreio/daffodil

View on GitHub
libs/design/scss/theming/contrast/text-contrast/text-contrast.scss

Summary

Maintainability
Test Coverage
@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;
    }
}