Adding color or background color to a Calcite list item

[MarceloRosensaft]

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

[FC_Basson]

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/

[KittyHurley]

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.

[MarceloRosensaft]

Thank you both for the assistance!

Where can I find the description of the "calcite-ui" options?

Thanks again,

Marcelo

[KittyHurley]

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:

• Core concepts: CSS variables
• Colors and theming
• Typography, and
• Some component samples, such as List
  • Select the "Theming" section, and experiment with some sample themes