calcite-design-system icon indicating copy to clipboard operation
calcite-design-system copied to clipboard

Published 20 hours ago • verified publisher icon Esri

feat(list, list-item-group, list-item): Add component tokens

Open driskull opened this issue 1 year ago • 0 comments

Related Issue: #7180

Summary

List

 * @prop --calcite-list-background-color: Specifies the background color of the component.
 * @prop --calcite-list-border-color: Specifies the border color of the component.
 * @prop --calcite-list-header-z-index: Specifies the component header's z-index.

ListItem

 * @prop --calcite-list-item-background-color: Specifies the background color of the component.
 * @prop --calcite-list-item-border-color: Specifies the border color of the component.
 * @prop --calcite-list-item-content-text-color: Specifies the text color of the component's content.
 * @prop --calcite-list-item-description-text-color: Specifies the text color of the component's description.
 * @prop --calcite-list-item-focus-color: Specifies the focus color of the component.
 * @prop --calcite-list-item-hover-background-color: Specifies the hover background color of the component.
 * @prop --calcite-list-item-label-text-color: Specifies the text color of the component's label.
 * @prop --calcite-list-item-open-icon-color: Specifies the icon color of the component's open icon.
 * @prop --calcite-list-item-open-icon-hover-color: Specifies the icon color of the component's open icon when hovered.
 * @prop --calcite-list-item-selected-border-color: Specifies the border color of the component when selected.
 * @prop --calcite-list-item-selected-description-text-color: Specifies the text color of the component's description when selected.
 * @prop --calcite-list-item-selected-icon-color: Specifies the color of the component's selected icon when selected.
 * @prop --calcite-list-item-selected-label-text-color: Specifies the color of the component's label text when selected.
 * @prop --calcite-list-item-unselected-icon-color: Specifies the color of the component's selected icon when unselected.
 * @prop --calcite-list-item-unselected-icon-hover-color: Specifies the color of the component's selected icon when unselected and hovered.

ListItemGroup

 * @prop --calcite-list-item-group-background-color: Specifies the background color of the component.
 * @prop --calcite-list-item-group-border-color: Specifies the border color of the component.
 * @prop --calcite-list-item-heading-text-color: Specifies the text color of the component's heading.

driskull avatar Feb 16 '24 23:02 driskull