Color theming relies on CSS Variables that change based on multiple factors.
The following css variables are available for use:
| CSS Variable | SASS Variable | Description |
|---|---|---|
| var(–ct-bkg) | $ct-bkg | The default background color for body. Value can be changed with js per component via the data-bkg-theme attribute. |
| var(–ct-txt) | $ct-txt | The default color for text. Value can be changed with js per component via the data-bkg-theme attribute. |
| var(–ct-dark) | $ct-dark | The dark color of the current color theme |
| var(–ct-light) | $ct-light | The light color of the current color theme |
| var(–ct-text-on-light) | $ct-text-on-light | The text color appropriate for the dark color theme |
| var(–ct-text-on-dark) | $ct-text-on-dark | The text color appropriate for the light color theme |
CSS variable defaults are defined in src/scss/02-Generic/_root.scss. The default color is the brand “teal” color.
CSS variables are updated based on a class name applied to body, where the class name is set to one of the following allowed names:
.c-color-theme--reef.c-color-theme--teal.c-color-theme--plum.c-color-theme--ocean.c-color-theme--navy.c-color-theme--charcoalAll pages under a route should use the color theme of that route. For example, “Plan your visit” is a child of “Visit”, so it should take on the ocean theme of “Visit”.
| Route | Color Theme | Body Class |
|---|---|---|
/visit |
Ocean | .c-color-theme--ocean |
/experience |
Reef | .c-color-theme--reef |
/learn |
Teal | .c-color-theme--teal |
/impact |
Plum | .c-color-theme--plum |
/support |
Color Theme | .c-color-theme--navy |
By default, any other page routes (/press, /about, etc) should use the Charcoal theme (.c-color-theme--charcoal).
Each component should have the attribute data-bkg-theme. It can have a value of dark, light, or base:
dark sets the dark version of the color theme: --ct-bkg to the --ct-dark variable and --ct-txt to the --ct-text-on-dark variablelight sets the light version of the color theme: --ct-bkg to the --ct-light variable and --ct-txt to the --ct-text-on-light variablebase sets everything to initial values (white background, black text).Note: some components have base set by default, as it should always have a white background.
The following classes are available for use:
| Class Name | CSS Variable | Description |
|---|---|---|
.u-c-ct-bkg |
var(–ct-bkg) | Sets color attribute |
.u-c-ct-txt |
var(–ct-txt) | Sets color attribute |
.u-c-ct-dark |
var(–ct-dark) | Sets color attribute |
.u-c-ct-light |
var(–ct-light) | Sets color attribute |
.u-c-ct-text-on-light |
var(–ct-text-on-light) | Sets color attribute |
.u-c-ct-text-on-dark |
var(–ct-text-on-dark) | Sets color attribute |
.u-bg-ct-bkg |
var(–ct-bkg) | Sets background-color attribute |
.u-bg-ct-txt |
var(–ct-txt) | Sets background-color attribute |
.u-bg-ct-dark |
var(–ct-dark) | Sets background-color attribute |
.u-bg-ct-light |
var(–ct-light) | Sets background-color attribute |
.u-bg-ct-text-on-light |
var(–ct-text-on-light) | Sets background-color attribute |
.u-bg-ct-text-on-dark |
var(–ct-text-on-dark) | Sets background-color attribute |