CSS Variables

CSS Variables can be used to insert the value of a custom property. You can use these anywhere in your custom styling. Some examples:

:root {
    // margin between items in digital labels (use at own discretion)
    --margin-dl-items: 30px;  
    --dynamic-margin-dl-items: 30px;
    
    //
    --blue: #004FA3;
    --pink: #E4017E;
    --green: #124F3E;
    --grey: #D4D4D5;
    --lightgrey: #F4F4F4;
}

Base Color

In Themes it is possible to use a Base Color. We made it very easy to access that colour in your custom CSS. Some examples below:

.selector {
  color: var(--c-accent);
  background-color: var(--green);
  border-color: var(--pink);
}

Base Color - Blend

Besides the Base Color variable, it is possible to use the variable --c-accent-blend. This color is based on the Base Color and is an 'inverse' color.

When your Base Color is a darker color, the blend will show white.

When your Base Color is a lighter color, the blend will show black.

See the example below.

.selector {
  fill: var(--c-accent-blend);
}

Other variables

:root {
  --margin-dl-items: 42px; // change the spacing between  
  --dynamic-margin-dl-items: 42px;
}

We made a variable for the margin between grid items in the Digital Label module.

Before:

After: