Colour utility classes to change any components colour property.

Usage

Place the colour utility class on an element that you want to change the colour property for.

Adding -hover to any of the below modifiers will change the colour on the hover state only, for example slb-colour-black-hover.

Each colour has a breakpoint variation of small, medium, large, extra large, this is used to remove or change the colour at different breakpoints, e.g. slb-colour-blue slb-colour-md-blue-alt will display colour blue for screens up to the medium breakpoint and blue alt for screen sizes above the medium breakpoint.

Adding slb-colour-inherit will inherit the value from its parent element. This is useful when nesting icons, text, buttons, etc.

Modifier selectors