@ithaka/bonsai/documentation/pages/styles/colors.md

ITHAKA core styling

---
title: Colors
description: Registering your application's color palette with Bonsai allows you to fully customize your look and feel.
sass: ./scss/_colors.scss
foundation: http://foundation.zurb.com/sites/docs/global.html#colors
additionalJs: ./assets/js/colors.bundle.js
---

The basis for colors in Bonsai is a color palette which is used to create CSS classes based on keywords.


## Color Examples


### Color Palette

<div id="insert-all-colors"></div>

<br/>
### Gray Palette

<div id="insert-gray-colors"></div>

<br/>
### Theme Colors

The theme colors are a subset of the color palette that are
re-used across different components to communicate different states and concepts to the user.

<div id="insert-primary-colors"></div>

<br/>
### Secondary Theme Colors

<div id="insert-secondary-colors"></div>

<br/>
## Generated Classes

The colors in Bonsai are variables that are set to hex values. These color variables are then set to variables that
represent their functions inside the default Bonsai theme.

```scss
// Colors
$bonsai-dark-blue: #006179 !default;
$bonsai-red: #dc2a2a !default;

// Theme Colors
$bonsai-primary: $bonsai-dark-blue !default;
$bonsai-alert: $bonsai-red !default;
```

Every one of the above colors is inside the Bonsai Palette.
This palette of colors is a SASS map that is iterated through to
accomplish a variety of functions.

```scss
$bonsai-palette: (
  dark-blue: $bonsai-dark-blue,
  red: $bonsai-red,
  // ...
  primary: $bonsai-primary,
  alert: $bonsai-alert,
  // ...
) !default;
```

You are free to modify the above map or add new colors to it. Any changes you make will propagate to every component that uses
the palette to get its colors.

<div class="callout information">
    <i class="callout-icon icon-large icon-exclamation"></i>
    <span class="bold">The `$bonsai-palette` map is used to generate font and background color classes</span>
</div>

<br/>
#### Font Color

The classes `.red-color` and `.primary-color` are coloring these blocks of text. You can use any key
in the palette with a suffix of `-color` to achieve this effect.

```html_example
<p class="red-color">I'm red text</p>
<p class="primary-color">I'm primary text (aka "dark blue")</p>
```
<br/>
#### Background Color

The classes `.alert-background` and `.dark-blue-background` are coloring these squares. Same as above,
you can use any key in the palette with a suffix of `-background` to achieve this effect.

```html_example
<div class="alert-background pal"></div>
<div class="dark-blue-background pal"></div>
```
<br/>
## Using and Modifying the Palette

In the above cases the keywords `red` and `alert` as well as the keywords `dark-blue` and `primary` can be used interchangeably.
This is because they are pointing to the same values.

`$bonsai-red` equals `#dc2a2a` and `$bonsai-alert` equals `$bonsai-red`  
`$bonsai-dark-blue` equals `#006179` and `$bonsai-primary` equals `$bonsai-dark-blue`  

This added complexity gives you the ability to change the value of `primary` to a
different color, without having to override the value of `dark-blue`.
<br/>
## Accessibility

There are two vital accessibility points to remember when dealing with colors:

1. Always provide sufficient contrast.
1. Do not rely on color alone to convey a message to users.

#### Contrast

Make sure all text is always placed on a background that provides a good amount of contrast.
WCAG says that all text should have a contrast ratio of [at least 4.5:1](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html).
[This is a great tool for testing your contrast ratio](http://webaim.org/resources/contrastchecker/).

<div class="row">
    <div class="columns small-5">
        <div class="callout small">
            <i class="callout-icon icon-large yellow-green-color icon-check"></i>
            <span class="bold">Good contrast</span>
        </div>
        <div class="dark-gray-background">
            <p class="white-color pam">Some sample text</p>
        </div>
        <div class="light-blue-background">
            <p class="pam">Some sample text</p>
        </div>
    </div>
    <div class="columns small-5 vertical-rule-full-height">
        <div class="callout small">
            <i class="callout-icon icon-large alert-color icon-close"></i>
            <span class="bold">Bad contrast</span>
        </div>
        <div class="dark-gray-background">
            <p class="pam">Some sample text</p>
        </div>
        <div class="light-blue-background">
            <p class="pam white-color">Some sample text</p>
        </div>
    </div>
</div>

#### Messaging

Some users have difficulty differentiating color, or perhaps, cannot see colors at all. For this reason you do not want
to use color alone to communicate ideas. The classic example is using red and green to show bad and good, respectively.
While this works for many users, a user who is red/green color blind will not understand what is trying to be conveyed.

<div class="callout information mbxl">
    <i class="icon-exclamation icon-large callout-icon"></i>
    <span>Pro tip: Consider using an icon and descriptive text with color to adequately convey the state of the page to the user.</span>
</div>

<div class="row">
    <div class="columns small-5">
        <div class="callout small">
            <i class="callout-icon icon-large yellow-green-color icon-check"></i>
            <span class="bold">Good messaging</span>
        </div>
        <div class="callout alert">
            <i class="icon-exclamation-circle icon-large callout-icon"></i>
            <span class="bold">Alert - Something went wrong</span>
        </div>
        <div class="callout success">
            <i class="icon-check-circle-o icon-large callout-icon yellow-green-color"></i>
            <span>Success - Everything's good here!</span>
        </div>
    </div>
    <div class="columns small-5 vertical-rule-full-height">
        <div class="callout small">
            <i class="callout-icon icon-large alert-color icon-close"></i>
            <span class="bold">Bad messaging</span>
        </div>
        <div class="callout alert">
            <span class="bold">Something went wrong</span>
        </div>
        <div class="callout success">
            <span>Everything's good here!</span>
        </div>
    </div>
</div>

The first column has good messaging. It uses color, an icon, and the first word in the message all to communicate
the state.

The second column has poor messaging. It uses only color to communicate the state other than the message inside the
callout. To a user who is red/green color blind, this probably won't stick out at them. However that same user would
have a much easier time understanding the messages on the left, without having to take the time to notice it and read
the whole sentence.