Color
These guidelines are the framework upon which we have built our system for how color is used in Vanilla, we use a fairly neutral color palette along with a traffic light palette.
$color-x-light
#fff
$color-light
#f7f7f7
$color-mid-x-light
#e5e5e5
$color-mid-light
#d9d9d9
$color-mid-dark
#666
$color-dark
#111
$color-x-dark
#000
$color-brand
#e95420
$color-negative
#c7162b
$color-caution
#f99b11
$color-positive
#0e8420
$color-information
#24598f
$color-link
#06c
$color-accent
#0f95a1
Accessibility
It’s important for us to meet all web accessibility standards. Vanilla encourages meeting the minimum contrast ratios specified by WCAG 2.1 Level AA for text, icons and background colors.
Do:
Don't:
Color theming
Starting with the 2.3.0 release, Vanilla framework introduces a theming mechanism. The current default for all components is referred to as the light theme. A subset of elements and components now offer a dark theme:
- Checkbox and radio form inputs
- Horizontal rule element
<hr /> - Contextual menu
- Lists / Divider
- Lists / Middot
- Navigation
- Side navigation
- Search box
| Element / Component | Variable | Default value |
|---|---|---|
| checkbox | $theme-default-forms |
light |
| radio | $theme-default-forms |
light |
| hr | $theme-default-hr |
light |
| Contextual menu | $theme-default-p-contextual-menu |
light |
| Lists / Divider | $theme-default-p-divider |
light |
| Lists / Middot | $theme-default-p-inline-list--middot |
light |
| Navigation | $theme-default-nav |
light |
| Side navigation | $theme-default-p-side-navigation |
light |
| Search box | $theme-default-p-search-box |
light |
Future releases will expand this list to include all elements and components.
Setting the default color theme per element / component
To set the default theme to dark on any of the elements / components listed above:
- Go to
_settings_themes.scss - Set the value of the respective variable in the table above to 'dark'
Invoking a theme that is not currently a default
Besides setting the default, you can invoke the non-default theme by adding a class to your markup. For the list of themed elements above, add is-dark (if the default for the respective element or component is light, or is-light if the default is dark.