# Breaking Changes in 9.0.0

The Kendo UI for Vue 9.0.0 release narrows the supported `themeColor` values of several components and removes the `themeColor` property of the Dialog and the Window. Stale values are not always reported at runtime, and TypeScript flags them only where the type was narrowed, so review your code rather than rely on compilation errors.

## Buttons

* `Button`—The `themeColor` property no longer accepts the `'dark'` and `'light'` values. This also applies to `SmartPasteButton` and `SpeechToTextButton`, which extend the Button properties and pass `themeColor` to the `Button`.

  * Before: `<Button themeColor="dark" />` or `<Button :theme-color="'light'" />` was part of the `themeColor` type.
  * After: `themeColor` is `'base'`, `'primary'`, `'secondary'`, `'tertiary'`, `'info'`, `'success'`, `'warning'`, `'error'`, or `'inverse'`. The `Button` has no runtime validator, so an old value is not reported at runtime.
  * To migrate, replace the removed values and update the custom CSS and tests that target the buttons by their removed theme color, for example `k-button-solid-dark` or `k-button-outline-light`. There is no one-to-one replacement. The `'inverse'` value is the closest to the dark appearance, but choose the value that matches your design.

* `DropDownButton` and `SplitButton`—The `themeColor` property no longer accepts the `'dark'` and `'light'` values.

  * Before: `<DropDownButton themeColor="dark" />` or `<SplitButton :theme-color="'light'" />` was part of the `themeColor` type.
  * After: `themeColor` is `'base'`, `'primary'`, `'secondary'`, `'tertiary'`, `'info'`, `'success'`, `'warning'`, `'error'`, or `'inverse'`. The removed values fail the prop validator.
  * To migrate, replace the removed values and update the custom CSS and tests that target the buttons by their removed theme color. There is no one-to-one replacement. The `'inverse'` value is the closest to the dark appearance, but choose the value that matches your design.

* `FloatingActionButton`—The `themeColor` property (`FloatingActionButtonThemeColor`) now accepts only `'base'`, `'primary'`, `'secondary'`, and `'tertiary'`.

  * Before: `themeColor` also accepted `'info'`, `'success'`, `'warning'`, `'error'`, `'dark'`, `'light'`, and `'inverse'`.
  * After: The removed values are no longer supported. The component has no runtime validator, so an old value is not reported. It is still rendered as the `k-fab-<themeColor>` class, but it is no longer a supported theme color. The `FloatingActionButton` source applies no default `themeColor`. When the property is omitted, no `k-fab-<themeColor>` class is rendered, even though the API documentation lists `'base'` as the default.
  * To migrate, replace the removed values with a supported one, set `themeColor` explicitly if you depend on a color, and update the custom CSS and tests that target the removed `k-fab-<color>` classes. There is no one-to-one replacement.

## Common

* `FontIcon`, `Icon`, and `SvgIcon`—The `themeColor` property (`IconThemeColor`) no longer accepts the `'dark'` and `'light'` values.

  * Before: `<SvgIcon :icon="icon" themeColor="dark" />` was part of the `themeColor` type.
  * After: `themeColor` is `'inherit'`, `'primary'`, `'secondary'`, `'tertiary'`, `'info'`, `'success'`, `'warning'`, `'error'`, or `'inverse'`. The components have no runtime validator, so the removed values are not reported. They are still rendered as the `k-color-<themeColor>` class, but they are no longer supported theme colors.
  * To migrate, omit `themeColor` or set it to `'inherit'` and set the color on the parent element, or use a supported value. Update the CSS selectors and tests that depend on the `k-color-dark` and `k-color-light` classes of the icons. There is no one-to-one replacement.

## Dialogs

* `Dialog` and `Window`—The `themeColor` property is removed, and the `k-window-primary`, `k-window-dark`, and `k-window-light` theme classes are no longer rendered.

  * Before: `<Dialog themeColor="dark" />` or `<Window :theme-color="color" />` rendered the `k-window-<themeColor>` class.
  * After: The property does not exist, and no theme class is rendered.
  * To migrate, remove the `themeColor` (`theme-color`) attribute and style the component through the `dialogClass` property of the `Dialog` or the `windowClass` property of the `Window`. Update the custom CSS and tests that depend on the removed `k-window-<themeColor>` classes. The `dialog-window-theme-color-removed` codemod removes the attribute wherever it can locate it statically. Review the places it cannot reach, such as properties passed through `v-bind="obj"` or JSX spreads, dynamic components, and wrapper components that forward `themeColor` to a `Dialog` or a `Window`, together with the types of those wrappers.

## Indicators

* `Badge`—The `themeColor` property no longer accepts the `'dark'` and `'light'` values. They are removed from `BadgeProps` and `BadgeThemeColor`.

  * Before: `<Badge themeColor="dark" />` was part of the `themeColor` type.
  * After: The prop validator accepts only `'base'`, `'primary'`, `'secondary'`, `'tertiary'`, `'info'`, `'success'`, `'warning'`, and `'error'`. As a result, `'inverse'` and `'inherit'` are also rejected, and the `BadgeThemeColor` type no longer includes `'inherit'`, `'dark'`, `'light'`, or `'inverse'`.
  * To migrate, replace the removed values and update the CSS selectors and tests that depend on the removed `k-badge-dark` and `k-badge-light` classes. There is no one-to-one replacement for `'dark'` and `'light'`.

* `BadgeContainer`—The `themeColor` property no longer accepts the `'dark'` and `'light'` values, and its default changed from `'primary'` to `'base'`.

  * Before: `<BadgeContainer />` rendered `k-badge-primary`.
  * After: The validator accepts `'base'`, `'primary'`, `'secondary'`, `'tertiary'`, `'info'`, `'success'`, `'warning'`, `'error'`, and `'inverse'`. `<BadgeContainer />` renders `k-badge-base` and `k-badge-<fillMode>-base` instead of `k-badge-primary` and `k-badge-<fillMode>-primary`.
  * To migrate, set `themeColor="primary"` to keep the previous default appearance, replace the removed values, and update the CSS selectors and tests that depend on the removed classes or on the previous default.

* `Loader`—The `themeColor` property (`LoaderThemeColor`) now accepts only `'base'`, `'primary'`, `'secondary'`, and `'tertiary'`, and the default changed from `'primary'` to no value.

  * Before: `<Loader />` rendered `k-loader-primary`, and `<Loader themeColor="success" />` rendered `k-loader-success`. The `'info'`, `'success'`, `'warning'`, `'error'`, `'dark'`, `'light'`, and `'inverse'` values were supported.
  * After: `<Loader />` renders no `k-loader-<color>` class. The `k-loader-info`, `k-loader-success`, `k-loader-warning`, `k-loader-error`, `k-loader-dark`, `k-loader-light`, and `k-loader-inverse` classes are removed, and the new `k-loader-base` class is added.
  * To migrate, set `themeColor="primary"` explicitly to keep the previous default appearance, replace the removed values, and update the CSS selectors and tests that depend on the removed classes or on the previous default. There is no one-to-one replacement for the removed values.

## Layout

* `AppBar`—The `themeColor` property (`AppBarThemeColor`) changed from `'light'`, `'dark'`, and `'inherit'` to `'base'`, `'primary'`, `'secondary'`, `'tertiary'`, and `'inverse'`, and the default changed from `'light'` to `'base'`.

  * Before: `<AppBar />` rendered `k-appbar-light`, and `<AppBar themeColor="dark" />` rendered `k-appbar-dark`.
  * After: `<AppBar />` renders `k-appbar-base`. The `k-appbar-light`, `k-appbar-dark`, and `k-appbar-inherit` classes are no longer rendered. A prop validator rejects any other value. The property type still allows any string, so TypeScript does not flag stale values.
  * To migrate, replace `'inherit'` with a supported value, and update the CSS selectors and tests that depend on the removed classes or on the previous default. There is no one-to-one replacement for `'inherit'`. The `app-bar-theme-color-values` codemod replaces the static `'light'` values with `'base'` and the static `'dark'` values with `'inverse'` automatically.

* `Avatar`—The `themeColor` property now accepts only `null`, `'base'`, `'primary'`, `'secondary'`, and `'tertiary'`, and its default of `'primary'` is removed.

  * Before: `<Avatar fillMode="solid" />` rendered `k-avatar-solid-primary`, and `<Avatar fillMode="solid" themeColor="info" />` rendered `k-avatar-solid-info`. The `k-avatar-<fillMode>-<themeColor>` class was rendered only when both `fillMode` and `themeColor` were set.
  * After: The property type no longer allows other strings, and the validator rejects them. The `'info'`, `'success'`, `'error'`, `'warning'`, `'dark'`, `'light'`, and `'inverse'` values are removed, and `'inherit'` is also rejected. The Avatar renders `k-avatar-<themeColor>` whenever `themeColor` is set and no color class when it is not. `<Avatar fillMode="solid" />` renders no color class, and `<Avatar fillMode="solid" themeColor="primary" />` renders `k-avatar-solid` and `k-avatar-primary`.
  * To migrate, set `themeColor="primary"` explicitly to keep a primary color, replace the removed values, and update the CSS selectors and tests that depend on the `k-avatar-<fillMode>-<color>` classes or on the previous default. There is no one-to-one replacement for the removed values.

* `BottomNavigation`—The `themeColor` property (`BottomNavigationThemeColor`) now accepts only `'base'`, `'primary'`, `'secondary'`, `'tertiary'`, and `'inverse'`, and the default changed from `'primary'` to `'base'`.

  * Before: `<BottomNavigation />` rendered `k-bottom-nav-primary` and `k-bottom-nav-flat-primary`, and `<BottomNavigation themeColor="info" />` rendered `k-bottom-nav-info`.
  * After: `<BottomNavigation />` renders `k-bottom-nav-base` and `k-bottom-nav-flat-base`. The validator rejects `'info'`, `'success'`, `'warning'`, `'error'`, `'dark'`, and `'light'`. The `k-bottom-nav-<color>` classes of these values, together with their `k-bottom-nav-flat-<color>` and `k-bottom-nav-solid-<color>` variants, are no longer rendered, and `k-bottom-nav-base` is added.
  * To migrate, set `themeColor="primary"` explicitly to keep the previous default appearance, replace the removed values, and update the CSS selectors and tests that depend on the removed classes or on the previous default. There is no one-to-one replacement for the removed values.

For the changes in the generated markup, the icons, and the CSS classes, see [Rendering Changes in 9.0.0](https://www.telerik.com/kendo-vue-ui-develop/components/updates/rendering-changes/9-0-0).

## Other Changes

The following changes are not breaking, but you may need to take them into account when you upgrade:

* The Upload no longer depends on `axios` and sends its requests through `XMLHttpRequest`. The `axios` peer dependency is removed, and the `@progress/kendo-svg-icons` peer dependency range of `@progress/kendo-vue-upload` is now `^4.9.0 || ^5.0.0`.
* The documentation and the getting-started guides use the Meridian theme (`@progress/kendo-theme-meridian`), and the Kendo UI themes moved from the 13.x to the 14.x line. For more information, see [Styling Overview](https://www.telerik.com/kendo-vue-ui-develop/components/styling).
* The `size` property of `Button`, `DropDownButton`, and `SplitButton` accepts the new `'xs'` value.
* The Grid supports exporting its data to CSV. For more information, see [CSV Export](https://www.telerik.com/kendo-vue-ui-develop/components/grid/csv-export).