A creeping contagion is taking over the ESRI ecosystem. Every update it swallows a little more. Soon, it will devour everything leaving nothing in its wake. The name of this virus is Calcite and it is coming for your CSS. Once Calcite swallows something all your CSS hacks will break as the Shadow DOM and infinite wrappers surround and subsume your target. Calcite will infest everything. We are powerless to stop it. It is different and I am instinctually fearful of change. However, hope is not yet lost, we may not be able to stop Calcite, but we can adapt it.
(Actually, there are two creeping contagions taking over ESRI, but Components are a problem for next year.)
As I upgraded to Developer Edition 1.17, I found that the Map Layers Widget was the latest victim of Calcite and my custom font added in the Theme was no longer being respected. The Map Layers Widget occupies a very prominent space in my overall design, so the font change was very noticeable and distracting. And Calcite was blocking my typical CSS targeting attacks. So, I did something unthinkable. Something I hoped I would never have to do. I learned about Calcite and CSS variables.
First, I will show you my solution. Then, I will explain why it works. In the style.scss of my Theme, I added this...
:root {
--calcite-font-family: Relish Pro Medium,"Avenir Next",Avenir,"Helvetica Neue",sans-serif;
}
The :root CSS selector is the default CSS settings of the page, so altering :root will change everything. Using -- is how you declare or alter a CSS variable. Calcite variables are written like --calcite-variableName, with font-family being the specific variable I am changing. After the colon is a list of fonts that the page will attempt to use in order. I've put my custom font, Relish Pro Medium, at the start of this list making it the default Calcite font for my application. For the rest of the list, I used my browser's Dev Tools to find and copy the Calcite defaults, so if Relish fails for some reason, it will follow the standard Calcite backups.
That's all it took. Fight Calcite with Calcite and change the Calcite variables to better fit your needs.
