Skip to main content

Migration - 3.x to 4.0

4.0 includes a major change to use CSS Custom Variables to define the colours of page components. Where previously the LESS build would have generated large numbers of overrides to implement a theme, it now only needs to generate a list of colour variants as custom variables.

This change has been made to support continued updates to the brand, but it makes managing and overriding colours easier and more consistent. It also reduces the size of the CSS files.

Below are the instructions for keeping your application looking as it did before. See the migration guide for the evolved brand for information about that.

  • The apply-brand mixin is no longer defined. If you want to override the theme to a custom colour, call brand-css-variables:
    :where(:root) {
      .brand-css-variables(@my-lovely-colour);
    }
    

    Using :where(:root) is recommended when defining the default document-level styles, to give it a lower precedence than the id7-brand-COLOURNAME classes. If you use plain :root then you will find these classes don’t work if applied to the html element.

  • If your custom style is one of the new brand colours, you can choose to instead add the id7-brand-COLOURNAME class to your html element and skip generating your own brand variables.