# Color Functions

There are two main color functions we will be working with. The rest are variations. These functions are:

1. color()
2. text-color()

# color() Function

The color() function allows you to select a color from the $theme-colors variable that is set up in your 00_Abstracts/_variables.scss directory. This will allow you to maximize your reuse as well as provide some other cool features like theme chaining and dynamically generating components like buttons.

# Example:

h1 {
    color: color(primary);
}

/*  or  */

.alert {
    .warning {
        border: solid 1px color(warning);
    }

    .danger {
        border: solid 1px color(danger);
    }
}

Now, using the color() function and passing in the color name is only the most basic feature available. By default, passing in the name of the color you want as the only parameter will get the color value that you specified in the 00_Abstracts/_variables file. However, there are 3 possible parameters that can be passed into this function to produce different results:

# Variant

Behind the scenes, Clarion has constructed a color palette based on the colors you provided in your variable file. This is a huge time saver in terms of finding color variations as well as it keeps your code light and clean. Out of the box, the palette consists of 5 variations (lighter, light, base, dark, and darker).

Taking advantage of these variations is as simple as adding another value to your function:

.alert {
    &.warning {
        .header {
            background-color: color(warning, dark);
        }

        .body {
            background-color: color(warning, lighter);
        }
    }

    &.danger {
        .header {
            background-color: color(danger, darker);
        }

        .body {
            background-color: color(warning, light);
        }
    }
}

Once you have updated the $theme-colors variable in the _variables.scss file, Clarion will automatically build out your color palette for you.

# Color Palette:

# Opacity

The opacity parameter in the color() function controls the transparency of the color. The value must be between 0 and 1 (the closer to 0 it is the more transparent it is). This can be specified for the base and variation colors.

# Example

.modal-background {
    background-color: color(dark, 0.75);

    .modal {
        .head {
            background-color: color(light, darker, 0.2);
        }
    }
}

# Color Variation

With Clarion you also have the ability to control the difference in the color variations. If you want your darks to be darker and your lights to be lighter (or vice versa), you can update the $color-variation variable in the _variables.scss file. The value must be a percentage. The default value is 8%. Increasing the number will increase the difference in the variations and decreasing will do the opposite.

# text-color() Function

As users of the web and our applications become more and more diverse, inclusive design can be difficult and sometimes very daunting. The text-color() function helps find an appropriately contrasting color (black, or white) for your text based on a given background color. Simply pass the function color of the back (as you would with the color() function) and a contrasting color will be returned.

# Example:

blockquote {
    background-color: color(dark, lighter);
    color: text-color(dark, lighter); // returns white text
}

.button {
    .primary {
        background-color: color(primary);
        color: text-color(primary); // returns white text
    }
}

.modal {
    background-color: color(light, lighter);
    color: text-color(light, lighter); // returns black text
}

# Additional Functions

There are additional functions that run behind the scenes to make these two color functions work. We will not go into detail on what these do right now, but you should know what they are and what they do.

# Color Contrast

In the _color-contrast.scss are a number of functions that calculate the luminance and contrast ratios to get the contrasting colors for the text-color() function.

# Math

One downside to SASS is that its math functions are pretty basic. Unfortunately, there is no POW function to deal with exponents, so I had to write one to help calculate the color contrast.