topic Styling the Selected Tab Title selected-indicator in Calcite Design System Questions

Styling the Selected Tab Title selected-indicator

Dirk_Vandervoort — Thu, 12 Dec 2024 22:27:38 GMT

I would like to style this, the line selected-indicated under my tab title : It's the selected-indicator (available in the shadow DOM of a calcite-tab-title). I'd sure like to get that to be the same color as the table tile background color. Here is one of my attempts:

Calcite Tab Selected Indicator

As near as I can tell it's --calcite-color-brand, but I gat figure out how to override it.

Can you help please?

Re: Styling the Selected Tab Title selected-indicator

KittyHurley — Fri, 13 Dec 2024 16:37:13 GMT

Hi @Dirk_Vandervoort it looks like you are using a beta version of Calcite, but in the latest 2.13 version you can alter the --calcite-color-brand variable on the component like so: https://codepen.io/geospatialem/pen/WbeoGBw

In Calcite's upcoming 3.0 release in early 2025 the team is introducing the --calcite-color-focus variable, so you can adjust the focus color in coordination with the component's coloring.

#custom-tab-nav { --calcite-color-brand: #FF0000; }