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-brandmixin is no longer defined. If you want to override the theme to a custom colour, callbrand-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 theid7-brand-COLOURNAMEclasses. If you use plain:rootthen you will find these classes don’t work if applied to thehtmlelement. - If your custom style is one of the new brand colours, you can choose to instead add the
id7-brand-COLOURNAMEclass to yourhtmlelement and skip generating your own brand variables.