CSS Styling Best Practice Unclear

[cxkyros]

Description

I am attempting to adjust the styling of a calciteListItem without altering the behavior of a calciteAction which is inside the list item. In particular, the I want to turn the hover color for the outside item off, but keep the inner item as the default value. I can set these using the "--calcite-color-foreground-2" property, and overriding it separately on each component. However, this is not specified in the style list for the components, and it creates a somewhat ugly css document with a hard coded reference to a value.

My question is: What is the correct approach to overriding styling in a case like this, and are there best practices documented about how to override styling like this - it seemed as though this type of styling was not being encouraged by the documentation.

Which Component

CalciteListItem, CalciteAction

Resources

No response

[macandcheese]

Hi @cxkyros - we are actively working on delivering support for component-specific css properties, to satisfy the use case you mention.

This effort is being tracked here: #7180 - When they are released, we will document the component-specific css properties and add guidance about their use.

The existing global css properties (like --calcite-color-foreground-2) will continue to be supported to support high level theming decisions that affect entire applications or portions of applications.

[DitwanP]

Closing as this should be addressed in the design effort mentioned above.