topic Re: Accordion Border Color when Selected? in Calcite Design System Questions

Accordion Border Color when Selected?

AaronKoelker — Wed, 19 Mar 2025 20:26:26 GMT

I'm trying to use the accordion component in an ArcGIS Hub page and have figured out how to change the colors for almost everything except this blue border that appears when you expand the component. I tried using --calcite-accordion-border-color per Accordion | Calcite Design System | Esri Developer , but that only adds a very thin border to the bottom of the accordion. Any ideas? It's obviously not an urgent need but the perfectionist in me wants it to match our branding.

<calcite-accordion appearance="transparent" icon-position="start" scale="l" selection-mode="single" icon-type="chevron" calcite-hydrated=""> <calcite-accordion-item heading="ArcMap Deprecation" style="background-color:#A2350A; color:#ffffff; border-bottom:5px solid #ffffff; --calcite-color-text-1:#fff; ;--calcite-color-text-2:#fff; --calcite-color-text-3:#fff; --calcite-accordion-border-color:#D07954;" calcite-hydrated=""> <div class="panel-body" style="background-color:#fff; color:#4c4c4c;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec ligula sed elit cursus cursus. In porttitor nunc varius, interdum nisl et, fermentum mi. Maecenas eget justo at magna varius interdum. Integer gravida ipsum in fringilla hendrerit. Praesent cursus ligula id volutpat fringilla. Vivamus vestibulum placerat risus non congue. Integer tempor cursus mauris, sit amet dictum eros feugiat in. Praesent facilisis, ante at rutrum blandit, tortor mi placerat massa, id posuere purus lacus vitae nulla. </div> </calcite-accordion-item> </calcite-accordion>

Re: Accordion Border Color when Selected?

KittyHurley — Thu, 20 Mar 2025 14:58:12 GMT

Hi @AaronKoelker it looks like the Accordion Item is in focus, so the focus ring color is displaying on the component. You can customize, or modify the variable --calcite-color-focus, and in the upcoming 3.1 release will also default to the --calcite-color-brand CSS variable.

For instance, and also in this Codepen:

#a-custom-accordion-item { --calcite-accordion-item-background-color: #a2350a; --calcite-accordion-item-heading-text-color: #fff; --calcite-accordion-item-text-color: #fff; --calcite-accordion-border-color: #d07954; --calcite-color-focus: #fff; }

Re: Accordion Border Color when Selected?

AaronKoelker — Thu, 20 Mar 2025 15:22:36 GMT

@KittyHurley Aha! I didn't know the "focus" was even a thing—am still learning. Thank you so much for the quick answer, that worked perfectly.