search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
293 stars 76 forks source link

CSS Styling Best Practice Unclear #10074

Open cxkyros opened 3 months ago

cxkyros commented 3 months ago

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 commented 3 months ago

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: https://github.com/Esri/calcite-design-system/issues/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.