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

<Badge />

# Terra Clinical Data Grid Upgrade Guide
## Changes from version 1 to version 2
### Changes to CSS Custom Properties

#### Renamed
| Previous | New |
|-|-|
| --terra-clinical-data-grid-column-header-text-color | --terra-clinical-data-grid-column-header-sort-indicator-color |
| --terra-clinical-data-grid-row-selection-icon | --terra-clinical-data-grid-row-selection-icon-background |
| --terra-clinical-data-grid-selected-row-selection-icon | --terra-clinical-data-grid-selected-row-selection-icon-background |
| --terra-clinical-data-grid-scrollbar-color | --terra-clinical-data-grid-scrollbar-handle-background-color |
| --terra-clinical-data-grid-scrollbar-border-radius | --terra-clinical-data-grid-scrollbar-handle-border-radius |
| --terra-clinical-data-grid-scrollbar-active-color | --terra-clinical-data-grid-scrollbar-handle-active-background-color |

#### Added
* --terra-clinical-data-grid-cell-focus-background-color
* --terra-clinical-data-grid-cell-focus-box-shadow
* --terra-clinical-data-grid-cell-active-box-shadow
* --terra-clinical-data-grid-cell-selected-box-shadow
* --terra-clinical-data-grid-cell-selected-focus-background-color
* --terra-clinical-data-grid-cell-selected-focus-box-shadow
* --terra-clinical-data-grid-section-header-border-top
* --terra-clinical-data-grid-section-header-color
* --terra-clinical-data-grid-section-header-collapsible-icon-color
* --terra-clinical-data-grid-section-header-focus-box-shadow