Widget colors

Widgets should always use the widget color palette variables. In cases where using a variable is not possible, for example in an image, the HEX values from the palette should be used.

Color palette

Make sure color combinations are used that meets the WCAG 2 AA requirements. If unsure about a certain combination, please use a color contrast checker to validate.

= The color will pass WCAG 2 level AA contrast requirements as text on white (widget wrapper) background.

* = The color also passes contrast requirements if used as text on gray-05 (theme body) background.

Color palette CSS variable names

Color variables are named --env-dashboard-color-white, --env-dashboard-color-black and --env-dashboard-color-{colorName}-{variant}.

Available color names: red, pink,purple,deep-purple,indigo,blue,light-blue,cyan,teal,green,light-green,lime,yellow,orange,brown,gray

Available variants: 05, 20, 50, 90,

Color palette utility classes

Simple decoration of areas may be done using CSS classes. Each palette color has a background and a foreground classname.

Available classnames are env-dashboard-bg-color-{colorName}-{variant} where colorName and variant follow the same patterns as CSS variable names.

<div
   class="env-dashboard-color-bg-purple-20 env-p-around--medium env-m-bottom--medium"
>
   This is a purple-20 area with default font color.
</div>
<div
   class="env-dashboard-color-bg-purple-50 env-dashboard-color-txt-white env-p-around--medium"
>
   This is a purple-50 area with white font color.
</div>