Altering the Calcite Root

479
3
04-23-2025 08:16 AM
JeffreyThompson2
MVP Frequent Contributor
0 3 479

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.

3 Comments
Ian-Horn
Emerging Contributor

What is the other creeping contagion?

JeffreyThompson2
MVP Frequent Contributor

@Ian-Horn ESRI is replacing the Widgets in the JavaScript API with Components. (These are similar and related to, but distinct from Experience Builder Widgets.) Many Custom Widgets will break as a result of this change.

Ian-Horn
Emerging Contributor

Yikes, that is bad.  This is so frustrating.  We are finding changes all over the place that are breaking all kinds of stuff.  

Contributors
About the Author
A frequently confused rock-hound that writes ugly, but usually functional code.