import { Badge } from 'terra-list/package.json?dev-site-package';

<Badge />

# Terra List Theme Upgrade Guide

## Changes from version 3 to version 4

### Changes to CSS Custom Properties

#### Renamed
| Previous | New |
|-|-|
| --terra-list-divider-border-top | --terra-list-item-divider-border-top |
| --terra-list-last-divider-border-bottom | --terra-list-item-last-divider-border-bottom |

#### Removed
* --terra-list-item-chevron-margin-bottom
* --terra-list-item-chevron-margin-left
* --terra-list-item-chevron-margin-right
* --terra-list-item-chevron-margin-top

#### Added
* --terra-list-item-min-height
* --terra-list-item-chevron-padding-right
* --terra-list-item-focus-outline
* --terra-list-item-focus-border-color
* --terra-list-item-focus-box-shadow
* --terra-list-section-header-background-color
* --terra-list-section-header-border-bottom
* --terra-list-section-header-padding-bottom
* --terra-list-section-header-padding-left
* --terra-list-section-header-padding-top
* --terra-list-section-header-title-color
* --terra-list-section-header-title-font-size
* --terra-list-section-header-title-line-height
* --terra-list-section-header-collapsible-padding-left
* --terra-list-section-header-focus-background-color
* --terra-list-section-header-focus-box-shadow
* --terra-list-section-header-focus-outline
* --terra-list-section-header-hover-active-background-color
* --terra-list-section-header-start-padding-right
* --terra-list-subsection-header-background-color
* --terra-list-subsection-header-border-bottom
* --terra-list-subsection-header-padding-bottom
* --terra-list-subsection-header-padding-left
* --terra-list-subsection-header-padding-top
* --terra-list-subsection-header-title-color
* --terra-list-subsection-header-padding-top
* --terra-list-subsection-header-title-font-size
* --terra-list-subsection-header-title-line-height
* --terra-list-subsection-header-collapsible-padding-left
* --terra-list-subsection-header-focus-background-color
* --terra-list-subsection-header-focus-box-shadow
* --terra-list-subsection-header-focus-outline
* --terra-list-subsection-header-hover-active-background-color
* --terra-list-subsection-header-start-padding-right
* --terra-list-standard-item-fill-line-height
* --terra-list-standard-item-fill-padding-bottom
* --terra-list-standard-item-fill-padding-left
* --terra-list-standard-item-fill-padding-right
* --terra-list-standard-item-fill-padding-top
* --terra-list-compact-item-fill-line-height
* --terra-list-compact-item-fill-padding-bottom
* --terra-list-compact-item-fill-padding-left
* --terra-list-compact-item-fill-padding-right
* --terra-list-compact-item-fill-padding-top

## Changes from version 2 to version 3

### Changes to CSS Custom Properties

#### Renamed
| Previous | New |
|-|-|
| --terra-list-chevron-color | --terra-list-item-chevron-color |
| --terra-list-item-selected-divider-color | --terra-list-item-selected-divider-border-color |
| --terra-list-item-selected-divider-color | --terra-list-item-selected-divider-border-top-color |
| --terra-list-item-selected-hover-background-color | --terra-list-item-selected-focus-background-color |

#### Removed
* --terra-list-divider-border

#### Added
* --terra-list-divider-border-top
* --terra-list-last-divider-border-bottom
* --terra-list-item-chevron-margin-bottom
* --terra-list-item-chevron-margin-left
* --terra-list-item-chevron-margin-right
* --terra-list-item-chevron-margin-top
* --terra-list-item-chevron-height
* --terra-list-item-chevron-width
* --terra-list-item-selected-chevron-color