Hello,
I have the following block:
<a id="href_RDG_activeSheet">
<calcite-list-item id="listItem_RDG_activeSheet">
<calcite-action slot="actions-end" icon="download-to"></calcite-action>
</calcite-list-item>
</a>
Where I set the Label of the list-item in the JS script.
I'd like to be able to set the background color and the text color of the list item label but I cannot find how to do that.
Thank you in advance,
Marcelo
The font color of the "label" attribute of the calcite-list-item is specified by the --calcite-ui-text-1 CSS root variable color.
Try setting the calcite-list-item label like this:
calcite-list-item{
--calcite-ui-text-1: #f00;
}
You can also set the global color property for the framework colors:
:root{
--calcite-ui-text-1: #f00 !important;
}
"!important" is required to overwrite the default theme colors.
More info here: https://developers.arcgis.com/calcite-design-system/core-concepts/
Thanks for the above, @FC_Basson! Small clarification that the "!important" tag shouldn't be needed to achieve the above.
Also of note, just launched this week - component samples now include example themes to experiment with custom themes, including List. To enable in the sample, visit the sample's "Theming" section.
Thank you both for the assistance!
Where can I find the description of the "calcite-ui" options?
Thanks again,
Marcelo
Calcite will be enhancing the documentation pages with design token integration in the coming weeks. In the meantime, there are a few resources available, including the page mentioned above by @FC_Basson:
@KittyHurley Is it possible to apply style to just one of the list items?
Never mind. I figured it out.
Please tell us more, I have been struggling with it: HERE