In the next release, scheduled for October 25th, we will introduce changes to the internal organization of template styles. No action on your part should be required. This is just a heads up.
We will start using CSS variables in template stylesheets. For example, instead of the literal value of the primary color, you will see var(--color-primary). The styling of components (including specificity) will remain unchanged, so no action should be necessary. Changes will first be introduced to the 3rd gen templates (from Techno to Samba), with other templates to follow.
In addition to using existing CSS variables, we will be adding a few new ones. Each of the six basic colors will be accompanied by its HSL (hue-saturation-lightness) channel variables. For example:
--color-primary: #0b0b65;
--color-primary-h: 240;
--color-primary-s: 80%;
--color-primary-l: 22%;
There will also be other CSS helper variables specific to each template (not all templates will have the same variable names). Rely on these variables at your own risk. These will be prefixed with an underscore. For example, var(--_color-header-mobile-text).
Using the CSS variables mentioned above opens up new possibilities for template customization.
You can change the headings font to, say, Impact by simply redefining the CSS variable:
--template-headings-font: "Impact";
You can create a darker version of the primary color with pure CSS:
--my-color-primary-darker: hsl(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) - 10%));
You can also make a color transparent by choosing how much opacity is right for you:
--my-color-primary-alpha: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 0.5);