I'm using the ESRI Design System Components in an ArcGIS for Javascript 4.19 application. I'm returning an entirely Calcite Components UI for a custom widget. I can't seem to set custom
style="color:#FCF"
attributes on the Calcite Components in the widget code itself, and because they are rendered in a shadow DOM, I also can't programmatically access these nodes to modify them later. Is there a recommended way to override '--calcite-ui-text-1' with a custom brand color, for example?
Ideally I would like to apply this override to Accordion headers (.accordion-item-title) only, leaving child button labels and all other Calcite text as they are by default.
Solved! Go to Solution.
Hi Anthony! I'm not sure what your code looks like exactly, but here's an option to override that CSS property from a container node:
<div style="--calcite-ui-text-1: #FCF;">
<calcite-accordion>
<calcite-accordion-item item-title="Accordion Item">Accordion Section Content </calcite-accordion-item>
<calcite-accordion-item item-title="Accordion Item 2" active>Accordion Section Content </calcite-accordion-item>
<calcite-accordion-item item-title="Accordion Item 3">Accordion Section Content </calcite-accordion-item>
</calcite-accordion>
</div>
It follows the same approach we have in our Storybook docs here, which shows how you can override theme colors:
https://esri.github.io/calcite-components/?path=/story/theming-custom-theme--interactive
If you want to programmatically update the font color, you can query the target nodes' shadow roots, in order to style the CSS custom property for that class only:
document.querySelectorAll("calcite-accordion-item").forEach(node => node.shadowRoot.querySelector(".accordion-item-title").style.setProperty("--calcite-ui-text-1", "#FCF"));
Hi Anthony! I'm not sure what your code looks like exactly, but here's an option to override that CSS property from a container node:
<div style="--calcite-ui-text-1: #FCF;">
<calcite-accordion>
<calcite-accordion-item item-title="Accordion Item">Accordion Section Content </calcite-accordion-item>
<calcite-accordion-item item-title="Accordion Item 2" active>Accordion Section Content </calcite-accordion-item>
<calcite-accordion-item item-title="Accordion Item 3">Accordion Section Content </calcite-accordion-item>
</calcite-accordion>
</div>
It follows the same approach we have in our Storybook docs here, which shows how you can override theme colors:
https://esri.github.io/calcite-components/?path=/story/theming-custom-theme--interactive
If you want to programmatically update the font color, you can query the target nodes' shadow roots, in order to style the CSS custom property for that class only:
document.querySelectorAll("calcite-accordion-item").forEach(node => node.shadowRoot.querySelector(".accordion-item-title").style.setProperty("--calcite-ui-text-1", "#FCF"));
Thank you so much! After quick tests both methods look great places to start. Much appreciated.