Skip to main content
Version: 1.0.x

Color

Because the sass:color module already, the namespace is prefixed with an underscore to avoid conflict or can named differentlt (like clr for example).

@use "@glsass/tools/tools.color" as _color;

tint() & shade()

These two functions allow to lighten or darken a color. Regarding the Sass documentation, it uses the color.shade() instead of the regular color.darken() and color.lighten() functions.

_color.tint($color, $level: 1, $interval: 8%);
_color.shade($color, $level: 1, $interval: 8%);

yiq-contrast()

This function in one of the most used inside this framework. It calculate the best color choice for the text from the background color given.

The text color is generally "black" or "white". In Glsass, the black color is the default text color (#212121) and the white is just white (#fff).

_color.yiq-contrast($color, $dark: colors.$g-color-text, $light: colors.$g-color-white);

color: _color.yiq-contrast(red);
// Returns #fff

color: _color.yiq-contrast(yellow);
// Returns #212121