From 7ee994f843770de7bb3241ff3e1b2b12fe67c81e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Mon, 3 May 2021 09:45:54 +0200
Subject: [PATCH] Theme: Renames new theme model from GrafanaThemeV2 to just
 GrafanaTheme (#33619)

---
 packages/grafana-data/src/field/displayProcessor.ts  |  4 ++--
 packages/grafana-data/src/field/fieldColor.ts        | 12 ++++++------
 packages/grafana-data/src/field/fieldDisplay.ts      |  4 ++--
 packages/grafana-data/src/field/scale.ts             |  4 ++--
 packages/grafana-data/src/themes/createTheme.ts      |  4 ++--
 packages/grafana-data/src/themes/createV1Theme.ts    |  4 ++--
 packages/grafana-data/src/themes/index.ts            |  2 +-
 packages/grafana-data/src/themes/types.ts            |  7 +++++--
 packages/grafana-data/src/types/config.ts            |  4 ++--
 packages/grafana-data/src/types/fieldOverrides.ts    |  4 ++--
 packages/grafana-runtime/src/config.ts               |  4 ++--
 packages/grafana-ui/.storybook/storybookTheme.ts     |  4 ++--
 packages/grafana-ui/src/components/Alert/Alert.tsx   |  4 ++--
 packages/grafana-ui/src/components/BarChart/utils.ts |  4 ++--
 packages/grafana-ui/src/components/Button/Button.tsx | 10 +++++-----
 .../grafana-ui/src/components/Button/ButtonGroup.tsx |  4 ++--
 .../src/components/Button/ToolbarButton.tsx          |  4 ++--
 .../src/components/Button/ToolbarButtonRow.tsx       |  4 ++--
 .../src/components/ButtonCascader/ButtonCascader.tsx |  4 ++--
 .../components/CallToActionCard/CallToActionCard.tsx |  4 ++--
 packages/grafana-ui/src/components/Card/Card.tsx     |  4 ++--
 .../grafana-ui/src/components/Card/CardContainer.tsx |  4 ++--
 .../src/components/Collapse/CollapsableSection.tsx   |  4 ++--
 .../grafana-ui/src/components/Collapse/Collapse.tsx  |  4 ++--
 .../src/components/ColorPicker/ColorInput.tsx        |  4 ++--
 .../src/components/ConfirmModal/ConfirmModal.tsx     |  4 ++--
 .../components/CustomScrollbar/CustomScrollbar.tsx   |  4 ++--
 .../src/components/DataLinks/DataLinkEditor.tsx      |  4 ++--
 .../src/components/DataLinks/DataLinkInput.tsx       |  4 ++--
 .../src/components/DataLinks/DataLinkSuggestions.tsx |  4 ++--
 .../DataLinksInlineEditor/DataLinksInlineEditor.tsx  |  4 ++--
 .../DataLinksInlineEditor/DataLinksListItem.tsx      |  4 ++--
 packages/grafana-ui/src/components/Drawer/Drawer.tsx |  4 ++--
 .../src/components/Dropdown/ButtonSelect.tsx         |  4 ++--
 .../EmptySearchResult/EmptySearchResult.tsx          |  4 ++--
 .../src/components/FileUpload/FileUpload.tsx         |  4 ++--
 .../grafana-ui/src/components/Forms/Checkbox.tsx     |  4 ++--
 packages/grafana-ui/src/components/Forms/Label.tsx   |  4 ++--
 .../Forms/RadioButtonGroup/RadioButton.tsx           |  4 ++--
 .../Forms/RadioButtonGroup/RadioButtonGroup.tsx      |  4 ++--
 .../grafana-ui/src/components/Forms/commonStyles.ts  |  6 +++---
 .../grafana-ui/src/components/Forms/getFormStyles.ts |  4 ++--
 packages/grafana-ui/src/components/GraphNG/utils.ts  |  4 ++--
 .../src/components/IconButton/IconButton.tsx         |  4 ++--
 .../grafana-ui/src/components/InfoBox/InfoBox.tsx    |  4 ++--
 packages/grafana-ui/src/components/Input/Input.tsx   |  4 ++--
 packages/grafana-ui/src/components/Menu/Menu.tsx     |  4 ++--
 .../grafana-ui/src/components/Menu/MenuGroup.tsx     |  4 ++--
 packages/grafana-ui/src/components/Menu/MenuItem.tsx |  4 ++--
 .../src/components/Modal/getModalStyles.ts           |  4 ++--
 .../src/components/NodeGraph/EdgeLabel.tsx           |  4 ++--
 .../src/components/NodeGraph/NodeGraph.tsx           |  4 ++--
 .../grafana-ui/src/components/NodeGraph/utils.ts     |  6 +++---
 .../src/components/PageLayout/PageToolbar.tsx        |  4 ++--
 .../grafana-ui/src/components/PieChart/PieChart.tsx  |  8 ++++----
 .../src/components/Select/InputControl.tsx           |  4 ++--
 .../grafana-ui/src/components/Select/SingleValue.tsx |  4 ++--
 .../src/components/Select/getSelectStyles.ts         |  4 ++--
 packages/grafana-ui/src/components/Slider/styles.ts  |  4 ++--
 packages/grafana-ui/src/components/Switch/Switch.tsx |  4 ++--
 .../components/TabbedContainer/TabbedContainer.tsx   |  4 ++--
 .../grafana-ui/src/components/Table/FilterList.tsx   |  4 ++--
 .../grafana-ui/src/components/Table/Table.story.tsx  |  4 ++--
 packages/grafana-ui/src/components/Table/styles.ts   |  4 ++--
 packages/grafana-ui/src/components/Tabs/Counter.tsx  |  4 ++--
 packages/grafana-ui/src/components/Tabs/Tab.tsx      |  4 ++--
 .../grafana-ui/src/components/Tabs/TabContent.tsx    |  4 ++--
 packages/grafana-ui/src/components/Tabs/TabsBar.tsx  |  4 ++--
 .../grafana-ui/src/components/TextArea/TextArea.tsx  |  4 ++--
 .../src/components/ThemeDemos/EmotionPerfTest.tsx    | 10 +++++-----
 .../src/components/ThemeDemos/ThemeDemo.tsx          |  6 +++---
 .../src/components/TimePicker/TimeRangeInput.tsx     |  4 ++--
 .../TimeRangePicker/TimePickerCalendar.tsx           | 10 +++++-----
 .../TimePicker/TimeRangePicker/TimePickerContent.tsx | 10 +++++-----
 .../TimePicker/TimeRangePicker/TimePickerFooter.tsx  |  4 ++--
 .../TimePicker/TimeRangePicker/TimeRangeOption.tsx   |  4 ++--
 .../TimePicker/TimeZonePicker/TimeZoneOption.tsx     |  4 ++--
 packages/grafana-ui/src/components/Timeline/utils.ts |  6 +++---
 .../components/VizTooltip/VizTooltipContainer.tsx    |  4 ++--
 .../src/components/uPlot/config/UPlotAxisBuilder.ts  |  4 ++--
 .../components/uPlot/config/UPlotSeriesBuilder.ts    |  4 ++--
 .../src/components/uPlot/config/gradientFills.ts     |  4 ++--
 .../src/themes/GlobalStyles/angularPanelStyles.ts    |  4 ++--
 packages/grafana-ui/src/themes/GlobalStyles/card.ts  |  4 ++--
 .../grafana-ui/src/themes/GlobalStyles/elements.ts   |  4 ++--
 packages/grafana-ui/src/themes/GlobalStyles/page.ts  |  4 ++--
 packages/grafana-ui/src/themes/ThemeContext.tsx      | 12 ++++++------
 .../src/themes/_variables.dark.scss.tmpl.ts          |  4 ++--
 .../src/themes/_variables.light.scss.tmpl.ts         |  4 ++--
 .../grafana-ui/src/themes/_variables.scss.tmpl.ts    |  4 ++--
 packages/grafana-ui/src/themes/mixins.ts             |  8 ++++----
 packages/grafana-ui/src/types/theme.ts               |  4 ++--
 packages/grafana-ui/src/utils/storybook/data.ts      |  4 ++--
 .../grafana-ui/src/utils/storybook/withTheme.tsx     |  4 ++--
 .../app/core/components/CloseButton/CloseButton.tsx  |  4 ++--
 .../core/components/Login/LoginServiceButtons.tsx    |  4 ++--
 public/app/core/components/Page/Page.tsx             |  4 ++--
 public/app/core/components/PageHeader/PageHeader.tsx |  4 ++--
 .../components/PanelTypeFilter/PanelTypeFilter.tsx   |  4 ++--
 public/app/core/components/help/HelpModal.tsx        |  4 ++--
 public/app/features/alerting/NextGenAlertingPage.tsx |  4 ++--
 .../unified/components/receivers/TemplateForm.tsx    |  4 ++--
 .../components/receivers/form/ChannelSubForm.tsx     |  4 ++--
 .../components/receivers/form/CollapsibleSection.tsx |  4 ++--
 .../components/receivers/form/ReceiverForm.tsx       |  4 ++--
 .../unified/components/rule-editor/AlertRuleForm.tsx |  4 ++--
 public/app/features/api-keys/ApiKeysAddedModal.tsx   |  4 ++--
 .../DashboardSettings/DashboardSettings.tsx          |  4 ++--
 .../DashboardSettings/JsonEditorSettings.tsx         |  4 ++--
 .../components/PanelEditor/OptionsPaneCategory.tsx   |  4 ++--
 .../components/PanelEditor/OptionsPaneOptions.tsx    |  4 ++--
 .../components/PanelEditor/PanelEditorTabs.tsx       |  4 ++--
 .../components/SubMenu/AnnotationPicker.tsx          |  4 ++--
 .../TransformationsEditor/TransformationsEditor.tsx  |  4 ++--
 .../components/VersionHistory/DiffValues.tsx         |  4 ++--
 .../components/VizTypePicker/PanelTypeCard.tsx       |  4 ++--
 .../features/dashboard/containers/DashboardPage.tsx  |  4 ++--
 public/app/features/explore/ExploreDrawer.tsx        |  4 ++--
 public/app/features/inspector/InspectStatsTable.tsx  |  6 +++---
 .../LibraryPanelsSearch/LibraryPanelsSearch.tsx      |  4 ++--
 .../OpenLibraryPanelModal/OpenLibraryPanelModal.tsx  |  4 ++--
 .../PanelLibraryOptionsGroup.tsx                     |  4 ++--
 .../manage-dashboards/DashboardImportPage.tsx        |  4 ++--
 public/app/features/playlist/styles.ts               |  4 ++--
 public/app/features/plugins/PluginPage.tsx           |  4 ++--
 public/app/features/plugins/UpdatePluginModal.tsx    |  4 ++--
 public/app/features/users/TokenRevokedModal.tsx      |  4 ++--
 .../plugins/datasource/loki/components/LokiLabel.tsx |  4 ++--
 .../panel/timeseries/plugins/AnnotationMarker.tsx    |  4 ++--
 public/app/types/events.ts                           |  4 ++--
 130 files changed, 291 insertions(+), 288 deletions(-)

diff --git a/packages/grafana-data/src/field/displayProcessor.ts b/packages/grafana-data/src/field/displayProcessor.ts
index 08a180af03c..b43e05ed53a 100644
--- a/packages/grafana-data/src/field/displayProcessor.ts
+++ b/packages/grafana-data/src/field/displayProcessor.ts
@@ -9,7 +9,7 @@ import { getMappedValue } from '../utils/valueMappings';
 import { dateTime } from '../datetime';
 import { KeyValue, TimeZone } from '../types';
 import { getScaleCalculator } from './scale';
-import { GrafanaThemeV2 } from '../themes/types';
+import { GrafanaTheme2 } from '../themes/types';
 
 interface DisplayProcessorOptions {
   field: Partial<Field>;
@@ -20,7 +20,7 @@ interface DisplayProcessorOptions {
   /**
    * Will pick 'dark' if not defined
    */
-  theme: GrafanaThemeV2;
+  theme: GrafanaTheme2;
 }
 
 // Reasonable units for time
diff --git a/packages/grafana-data/src/field/fieldColor.ts b/packages/grafana-data/src/field/fieldColor.ts
index fb1514d2be4..e8d956350e4 100644
--- a/packages/grafana-data/src/field/fieldColor.ts
+++ b/packages/grafana-data/src/field/fieldColor.ts
@@ -5,14 +5,14 @@ import { interpolateRgbBasis } from 'd3-interpolate';
 import { fallBackTreshold } from './thresholds';
 import { getScaleCalculator, ColorScaleValue } from './scale';
 import { reduceField } from '../transformations/fieldReducer';
-import { GrafanaThemeV2 } from '../themes/types';
+import { GrafanaTheme2 } from '../themes/types';
 
 /** @beta */
 export type FieldValueColorCalculator = (value: number, percent: number, Threshold?: Threshold) => string;
 
 /** @beta */
 export interface FieldColorMode extends RegistryItem {
-  getCalculator: (field: Field, theme: GrafanaThemeV2) => FieldValueColorCalculator;
+  getCalculator: (field: Field, theme: GrafanaTheme2) => FieldValueColorCalculator;
   colors?: string[];
   isContinuous?: boolean;
   isByValue?: boolean;
@@ -167,7 +167,7 @@ export class FieldColorSchemeMode implements FieldColorMode {
     this.isByValue = options.isByValue;
   }
 
-  private getColors(theme: GrafanaThemeV2) {
+  private getColors(theme: GrafanaTheme2) {
     if (this.colorCache) {
       return this.colorCache;
     }
@@ -184,7 +184,7 @@ export class FieldColorSchemeMode implements FieldColorMode {
     return this.interpolator;
   }
 
-  getCalculator(field: Field, theme: GrafanaThemeV2) {
+  getCalculator(field: Field, theme: GrafanaTheme2) {
     const colors = this.getColors(theme);
 
     if (this.isByValue) {
@@ -222,7 +222,7 @@ export function getFieldColorMode(mode?: FieldColorModeId | string): FieldColorM
  * Function that will return a series color for any given color mode. If the color mode is a by value color
  * mode it will use the field.config.color.seriesBy property to figure out which value to use
  */
-export function getFieldSeriesColor(field: Field, theme: GrafanaThemeV2): ColorScaleValue {
+export function getFieldSeriesColor(field: Field, theme: GrafanaTheme2): ColorScaleValue {
   const mode = getFieldColorModeForField(field);
 
   if (!mode.isByValue) {
@@ -241,7 +241,7 @@ export function getFieldSeriesColor(field: Field, theme: GrafanaThemeV2): ColorS
   return scale(value);
 }
 
-function getFixedColor(field: Field, theme: GrafanaThemeV2) {
+function getFixedColor(field: Field, theme: GrafanaTheme2) {
   return () => {
     return getColorForTheme(field.config.color?.fixedColor ?? FALLBACK_COLOR, theme.v1);
   };
diff --git a/packages/grafana-data/src/field/fieldDisplay.ts b/packages/grafana-data/src/field/fieldDisplay.ts
index 69de42e46cd..9f0b2bb4e25 100644
--- a/packages/grafana-data/src/field/fieldDisplay.ts
+++ b/packages/grafana-data/src/field/fieldDisplay.ts
@@ -15,7 +15,7 @@ import {
   TimeZone,
 } from '../types';
 import { DataFrameView } from '../dataframe/DataFrameView';
-import { GrafanaThemeV2 } from '../themes';
+import { GrafanaTheme2 } from '../themes';
 import { reduceField, ReducerID } from '../transformations/fieldReducer';
 import { ScopedVars } from '../types/ScopedVars';
 import { getTimeField } from '../dataframe/processDataFrame';
@@ -71,7 +71,7 @@ export interface GetFieldDisplayValuesOptions {
   fieldConfig: FieldConfigSource;
   replaceVariables: InterpolateFunction;
   sparkline?: boolean; // Calculate the sparkline
-  theme: GrafanaThemeV2;
+  theme: GrafanaTheme2;
   timeZone?: TimeZone;
 }
 
diff --git a/packages/grafana-data/src/field/scale.ts b/packages/grafana-data/src/field/scale.ts
index 0bb5d3a6702..8c916168bdf 100644
--- a/packages/grafana-data/src/field/scale.ts
+++ b/packages/grafana-data/src/field/scale.ts
@@ -1,5 +1,5 @@
 import { isNumber } from 'lodash';
-import { GrafanaThemeV2 } from '../themes/types';
+import { GrafanaTheme2 } from '../themes/types';
 import { reduceField, ReducerID } from '../transformations/fieldReducer';
 import { Field, FieldConfig, FieldType, NumericRange, Threshold } from '../types';
 import { getFieldColorModeForField } from './fieldColor';
@@ -13,7 +13,7 @@ export interface ColorScaleValue {
 
 export type ScaleCalculator = (value: number) => ColorScaleValue;
 
-export function getScaleCalculator(field: Field, theme: GrafanaThemeV2): ScaleCalculator {
+export function getScaleCalculator(field: Field, theme: GrafanaTheme2): ScaleCalculator {
   const mode = getFieldColorModeForField(field);
   const getColor = mode.getCalculator(field, theme);
   const info = field.state?.range ?? getMinMaxAndDelta(field);
diff --git a/packages/grafana-data/src/themes/createTheme.ts b/packages/grafana-data/src/themes/createTheme.ts
index 352c39e8332..194b8dec5c4 100644
--- a/packages/grafana-data/src/themes/createTheme.ts
+++ b/packages/grafana-data/src/themes/createTheme.ts
@@ -7,7 +7,7 @@ import { createSpacing, ThemeSpacingOptions } from './createSpacing';
 import { createTransitions } from './createTransitions';
 import { createTypography, ThemeTypographyInput } from './createTypography';
 import { createV1Theme } from './createV1Theme';
-import { GrafanaThemeV2 } from './types';
+import { GrafanaTheme2 } from './types';
 import { zIndex } from './zIndex';
 
 /** @internal */
@@ -20,7 +20,7 @@ export interface NewThemeOptions {
 }
 
 /** @internal */
-export function createTheme(options: NewThemeOptions = {}): GrafanaThemeV2 {
+export function createTheme(options: NewThemeOptions = {}): GrafanaTheme2 {
   const {
     name = 'Dark',
     colors: colorsInput = {},
diff --git a/packages/grafana-data/src/themes/createV1Theme.ts b/packages/grafana-data/src/themes/createV1Theme.ts
index 8d5ffa42375..b24a3c2dfea 100644
--- a/packages/grafana-data/src/themes/createV1Theme.ts
+++ b/packages/grafana-data/src/themes/createV1Theme.ts
@@ -1,7 +1,7 @@
 import { GrafanaTheme, GrafanaThemeCommons, GrafanaThemeType } from '../types';
-import { GrafanaThemeV2 } from './types';
+import { GrafanaTheme2 } from './types';
 
-export function createV1Theme(theme: Omit<GrafanaThemeV2, 'v1'>): GrafanaTheme {
+export function createV1Theme(theme: Omit<GrafanaTheme2, 'v1'>): GrafanaTheme {
   const oldCommon: GrafanaThemeCommons = {
     name: 'Grafana Default',
     typography: {
diff --git a/packages/grafana-data/src/themes/index.ts b/packages/grafana-data/src/themes/index.ts
index 2899f55acee..b49fecd0e05 100644
--- a/packages/grafana-data/src/themes/index.ts
+++ b/packages/grafana-data/src/themes/index.ts
@@ -1,5 +1,5 @@
 export { createTheme } from './createTheme';
-export { ThemeRichColor, GrafanaThemeV2 } from './types';
+export { ThemeRichColor, GrafanaTheme2 } from './types';
 export { ThemeColors } from './createColors';
 export { ThemeBreakpoints, ThemeBreakpointsKey } from './breakpoints';
 export { ThemeShadows } from './createShadows';
diff --git a/packages/grafana-data/src/themes/types.ts b/packages/grafana-data/src/themes/types.ts
index c53cb74fb00..b62317ecfaa 100644
--- a/packages/grafana-data/src/themes/types.ts
+++ b/packages/grafana-data/src/themes/types.ts
@@ -9,8 +9,11 @@ import { ThemeTransitions } from './createTransitions';
 import { ThemeTypography } from './createTypography';
 import { ThemeZIndices } from './zIndex';
 
-/** @beta */
-export interface GrafanaThemeV2 {
+/**
+ * @beta
+ * Next gen theme model introduced in Grafana v8.
+ */
+export interface GrafanaTheme2 {
   name: string;
   isDark: boolean;
   isLight: boolean;
diff --git a/packages/grafana-data/src/types/config.ts b/packages/grafana-data/src/types/config.ts
index 84b7ff0905b..870128e9745 100644
--- a/packages/grafana-data/src/types/config.ts
+++ b/packages/grafana-data/src/types/config.ts
@@ -2,7 +2,7 @@ import { DataSourceInstanceSettings } from './datasource';
 import { PanelPluginMeta } from './panel';
 import { GrafanaTheme } from './theme';
 import { SystemDateFormatSettings } from '../datetime';
-import { GrafanaThemeV2 } from '../themes';
+import { GrafanaTheme2 } from '../themes';
 
 /**
  * Describes the build information that will be available via the Grafana configuration.
@@ -124,7 +124,7 @@ export interface GrafanaConfig {
   editorsCanAdmin: boolean;
   disableSanitizeHtml: boolean;
   theme: GrafanaTheme;
-  theme2: GrafanaThemeV2;
+  theme2: GrafanaTheme2;
   pluginsToPreload: string[];
   featureToggles: FeatureToggles;
   licenseInfo: LicenseInfo;
diff --git a/packages/grafana-data/src/types/fieldOverrides.ts b/packages/grafana-data/src/types/fieldOverrides.ts
index 9027c746fe9..2407e452fee 100644
--- a/packages/grafana-data/src/types/fieldOverrides.ts
+++ b/packages/grafana-data/src/types/fieldOverrides.ts
@@ -4,7 +4,7 @@ import { InterpolateFunction } from './panel';
 import { StandardEditorProps, FieldConfigOptionsRegistry, StandardEditorContext } from '../field';
 import { OptionsEditorItem } from './OptionsUIRegistryBuilder';
 import { OptionEditorConfig } from './options';
-import { GrafanaThemeV2 } from '../themes';
+import { GrafanaTheme2 } from '../themes';
 
 export interface DynamicConfigValue {
   id: string;
@@ -114,7 +114,7 @@ export interface ApplyFieldOverrideOptions {
   fieldConfig: FieldConfigSource;
   fieldConfigRegistry?: FieldConfigOptionsRegistry;
   replaceVariables: InterpolateFunction;
-  theme: GrafanaThemeV2;
+  theme: GrafanaTheme2;
   timeZone?: TimeZone;
 }
 
diff --git a/packages/grafana-runtime/src/config.ts b/packages/grafana-runtime/src/config.ts
index 295710b530d..af410e6c234 100644
--- a/packages/grafana-runtime/src/config.ts
+++ b/packages/grafana-runtime/src/config.ts
@@ -6,7 +6,7 @@ import {
   FeatureToggles,
   GrafanaConfig,
   GrafanaTheme,
-  GrafanaThemeV2,
+  GrafanaTheme2,
   LicenseInfo,
   PanelPluginMeta,
   systemDateFormats,
@@ -50,7 +50,7 @@ export class GrafanaBootConfig implements GrafanaConfig {
   editorsCanAdmin = false;
   disableSanitizeHtml = false;
   theme: GrafanaTheme;
-  theme2: GrafanaThemeV2;
+  theme2: GrafanaTheme2;
   pluginsToPreload: string[] = [];
   featureToggles: FeatureToggles = {
     live: false,
diff --git a/packages/grafana-ui/.storybook/storybookTheme.ts b/packages/grafana-ui/.storybook/storybookTheme.ts
index 4d1d661b352..e57efc4614b 100644
--- a/packages/grafana-ui/.storybook/storybookTheme.ts
+++ b/packages/grafana-ui/.storybook/storybookTheme.ts
@@ -1,9 +1,9 @@
-import { GrafanaThemeV2, createTheme } from '@grafana/data';
+import { GrafanaTheme2, createTheme } from '@grafana/data';
 //@ts-ignore
 import { create } from '@storybook/theming/create';
 import '../src/components/Icon/iconBundle';
 
-const createStorybookTheme = (theme: GrafanaThemeV2) => {
+const createStorybookTheme = (theme: GrafanaTheme2) => {
   return create({
     base: theme.name.includes('Light') ? 'light' : 'dark',
 
diff --git a/packages/grafana-ui/src/components/Alert/Alert.tsx b/packages/grafana-ui/src/components/Alert/Alert.tsx
index d3e4bc0c368..44df6ba255a 100644
--- a/packages/grafana-ui/src/components/Alert/Alert.tsx
+++ b/packages/grafana-ui/src/components/Alert/Alert.tsx
@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, ReactNode } from 'react';
 import { css, cx } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { useTheme2 } from '../../themes';
 import { Icon } from '../Icon/Icon';
@@ -77,7 +77,7 @@ export const Alert = React.forwardRef<HTMLDivElement, Props>(
 
 Alert.displayName = 'Alert';
 
-const getStyles = (theme: GrafanaThemeV2, severity: AlertVariant, elevated?: boolean, bottomSpacing?: number) => {
+const getStyles = (theme: GrafanaTheme2, severity: AlertVariant, elevated?: boolean, bottomSpacing?: number) => {
   const color = theme.colors[severity];
   const borderRadius = theme.shape.borderRadius();
 
diff --git a/packages/grafana-ui/src/components/BarChart/utils.ts b/packages/grafana-ui/src/components/BarChart/utils.ts
index d8a917e9000..fa79ca9a145 100644
--- a/packages/grafana-ui/src/components/BarChart/utils.ts
+++ b/packages/grafana-ui/src/components/BarChart/utils.ts
@@ -6,7 +6,7 @@ import {
   getFieldColorModeForField,
   getFieldDisplayName,
   getFieldSeriesColor,
-  GrafanaThemeV2,
+  GrafanaTheme2,
   MutableDataFrame,
   VizOrientation,
 } from '@grafana/data';
@@ -18,7 +18,7 @@ import { FIXED_UNIT } from '../GraphNG/GraphNG';
 /** @alpha */
 export function preparePlotConfigBuilder(
   data: DataFrame,
-  theme: GrafanaThemeV2,
+  theme: GrafanaTheme2,
   { orientation, showValue, groupWidth, barWidth }: BarChartOptions
 ) {
   const builder = new UPlotConfigBuilder();
diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx
index d2db93e8234..2f0090caaab 100644
--- a/packages/grafana-ui/src/components/Button/Button.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.tsx
@@ -3,7 +3,7 @@ import { css, CSSObject, cx } from '@emotion/css';
 import { useTheme2 } from '../../themes';
 import { IconName } from '../../types/icon';
 import { getPropertiesForButtonSize } from '../Forms/commonStyles';
-import { colorManipulator, GrafanaThemeV2, ThemeRichColor } from '@grafana/data';
+import { colorManipulator, GrafanaTheme2, ThemeRichColor } from '@grafana/data';
 import { ComponentSize } from '../../types/size';
 import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
 import { Icon } from '../Icon/Icon';
@@ -105,7 +105,7 @@ export interface StyleProps {
   variant: ButtonVariant;
   fill?: ButtonFill;
   iconOnly?: boolean;
-  theme: GrafanaThemeV2;
+  theme: GrafanaTheme2;
   fullWidth?: boolean;
   narrow?: boolean;
 }
@@ -163,7 +163,7 @@ export const getButtonStyles = (props: StyleProps) => {
   };
 };
 
-function getButtonVariantStyles(theme: GrafanaThemeV2, color: ThemeRichColor, fill: ButtonFill): CSSObject {
+function getButtonVariantStyles(theme: GrafanaTheme2, color: ThemeRichColor, fill: ButtonFill): CSSObject {
   if (fill === 'outline') {
     return {
       background: 'transparent',
@@ -218,7 +218,7 @@ function getButtonVariantStyles(theme: GrafanaThemeV2, color: ThemeRichColor, fi
   };
 }
 
-function getPropertiesForDisabled(theme: GrafanaThemeV2, variant: ButtonVariant, fill: ButtonFill) {
+function getPropertiesForDisabled(theme: GrafanaTheme2, variant: ButtonVariant, fill: ButtonFill) {
   const disabledStyles: CSSObject = {
     cursor: 'not-allowed',
     boxShadow: 'none',
@@ -250,7 +250,7 @@ function getPropertiesForDisabled(theme: GrafanaThemeV2, variant: ButtonVariant,
   };
 }
 
-export function getPropertiesForVariant(theme: GrafanaThemeV2, variant: ButtonVariant, fill: ButtonFill) {
+export function getPropertiesForVariant(theme: GrafanaTheme2, variant: ButtonVariant, fill: ButtonFill) {
   const buttonVariant = variant === 'link' ? 'primary' : variant;
   const buttonFill = variant === 'link' ? 'text' : fill;
 
diff --git a/packages/grafana-ui/src/components/Button/ButtonGroup.tsx b/packages/grafana-ui/src/components/Button/ButtonGroup.tsx
index c10d42b345a..62a1484912e 100644
--- a/packages/grafana-ui/src/components/Button/ButtonGroup.tsx
+++ b/packages/grafana-ui/src/components/Button/ButtonGroup.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import { useStyles2 } from '../../themes';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
   className?: string;
@@ -19,7 +19,7 @@ export const ButtonGroup = forwardRef<HTMLDivElement, Props>(({ className, child
 
 ButtonGroup.displayName = 'ButtonGroup';
 
-const getStyles = (theme: GrafanaThemeV2) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css`
     display: flex;
 
diff --git a/packages/grafana-ui/src/components/Button/ToolbarButton.tsx b/packages/grafana-ui/src/components/Button/ToolbarButton.tsx
index 74ba6177958..ca77b32cb9c 100644
--- a/packages/grafana-ui/src/components/Button/ToolbarButton.tsx
+++ b/packages/grafana-ui/src/components/Button/ToolbarButton.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef, ButtonHTMLAttributes } from 'react';
 import { cx, css } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { styleMixins, useStyles2 } from '../../themes';
 import { IconName } from '../../types/icon';
 import { Tooltip } from '../Tooltip/Tooltip';
@@ -104,7 +104,7 @@ function renderIcon(icon: IconName | React.ReactNode) {
   return icon;
 }
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   const primaryVariant = getPropertiesForVariant(theme, 'primary', 'solid');
   const destructiveVariant = getPropertiesForVariant(theme, 'destructive', 'solid');
 
diff --git a/packages/grafana-ui/src/components/Button/ToolbarButtonRow.tsx b/packages/grafana-ui/src/components/Button/ToolbarButtonRow.tsx
index ce7f69b9830..359fb7f1192 100644
--- a/packages/grafana-ui/src/components/Button/ToolbarButtonRow.tsx
+++ b/packages/grafana-ui/src/components/Button/ToolbarButtonRow.tsx
@@ -1,7 +1,7 @@
 import React, { forwardRef, HTMLAttributes } from 'react';
 import { css, cx } from '@emotion/css';
 import { useStyles2 } from '../../themes';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
 export interface Props extends HTMLAttributes<HTMLDivElement> {
   className?: string;
@@ -19,7 +19,7 @@ export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(({ className,
 
 ToolbarButtonRow.displayName = 'ToolbarButtonRow';
 
-const getStyles = (theme: GrafanaThemeV2) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css`
     display: flex;
 
diff --git a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
index a7574346ad2..a485813bfcf 100644
--- a/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
+++ b/packages/grafana-ui/src/components/ButtonCascader/ButtonCascader.tsx
@@ -8,7 +8,7 @@ import RCCascader from 'rc-cascader';
 import { CascaderOption } from '../Cascader/Cascader';
 import { onChangeCascader, onLoadDataCascader } from '../Cascader/optionMappings';
 import { stylesFactory, useTheme2 } from '../../themes';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
 export interface ButtonCascaderProps {
   options: CascaderOption[];
@@ -23,7 +23,7 @@ export interface ButtonCascaderProps {
   className?: string;
 }
 
-const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     popup: css`
       label: popup;
diff --git a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
index 784e27bd0b1..d566a866d79 100644
--- a/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
+++ b/packages/grafana-ui/src/components/CallToActionCard/CallToActionCard.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { css, cx } from '@emotion/css';
 import { useStyles2 } from '../../themes/ThemeContext';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
 export interface CallToActionCardProps {
   message?: string | JSX.Element;
@@ -27,7 +27,7 @@ export const CallToActionCard: React.FunctionComponent<CallToActionCardProps> =
   );
 };
 
-const getStyles = (theme: GrafanaThemeV2) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css`
     label: call-to-action-card;
     padding: ${theme.spacing(3)};
diff --git a/packages/grafana-ui/src/components/Card/Card.tsx b/packages/grafana-ui/src/components/Card/Card.tsx
index 3338f94d155..c991ab20ed7 100644
--- a/packages/grafana-ui/src/components/Card/Card.tsx
+++ b/packages/grafana-ui/src/components/Card/Card.tsx
@@ -1,6 +1,6 @@
 import React, { memo, cloneElement, FC, ReactNode, useCallback } from 'react';
 import { css, cx } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { useTheme2, stylesFactory } from '../../themes';
 import { CardContainer, CardContainerProps } from './CardContainer';
 
@@ -99,7 +99,7 @@ export const Card: CardInterface = ({
 /**
  * @public
  */
-export const getCardStyles = stylesFactory((theme: GrafanaThemeV2) => {
+export const getCardStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     inner: css`
       display: flex;
diff --git a/packages/grafana-ui/src/components/Card/CardContainer.tsx b/packages/grafana-ui/src/components/Card/CardContainer.tsx
index 0cfbba39358..2ec56242040 100644
--- a/packages/grafana-ui/src/components/Card/CardContainer.tsx
+++ b/packages/grafana-ui/src/components/Card/CardContainer.tsx
@@ -1,6 +1,6 @@
 import React, { HTMLAttributes, ReactNode } from 'react';
 import { css, cx } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { styleMixins, stylesFactory, useTheme2 } from '../../themes';
 
 /**
@@ -52,7 +52,7 @@ export const CardContainer = ({
   );
 };
 
-const getCardContainerStyles = stylesFactory((theme: GrafanaThemeV2, disabled = false, disableHover = false) => {
+const getCardContainerStyles = stylesFactory((theme: GrafanaTheme2, disabled = false, disableHover = false) => {
   return {
     container: css({
       display: 'flex',
diff --git a/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx b/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
index 98a341bc188..1ef09c8ff7b 100644
--- a/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
+++ b/packages/grafana-ui/src/components/Collapse/CollapsableSection.tsx
@@ -2,7 +2,7 @@ import React, { FC, ReactNode, useState } from 'react';
 import { css } from '@emotion/css';
 import { useStyles2 } from '../../themes';
 import { Icon } from '..';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
 export interface Props {
   label: string;
@@ -27,7 +27,7 @@ export const CollapsableSection: FC<Props> = ({ label, isOpen, children }) => {
   );
 };
 
-const collapsableSectionStyles = (theme: GrafanaThemeV2) => {
+const collapsableSectionStyles = (theme: GrafanaTheme2) => {
   const header = css({
     display: 'flex',
     justifyContent: 'space-between',
diff --git a/packages/grafana-ui/src/components/Collapse/Collapse.tsx b/packages/grafana-ui/src/components/Collapse/Collapse.tsx
index acd44e8ea9f..727270b419e 100644
--- a/packages/grafana-ui/src/components/Collapse/Collapse.tsx
+++ b/packages/grafana-ui/src/components/Collapse/Collapse.tsx
@@ -3,9 +3,9 @@ import { css, cx } from '@emotion/css';
 
 import { useStyles2 } from '../../themes/ThemeContext';
 import { Icon } from '../Icon/Icon';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
-const getStyles = (theme: GrafanaThemeV2) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   collapse: css`
     label: collapse;
     margin-bottom: ${theme.spacing(1)};
diff --git a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx
index 7ef2fc2719f..684dd41c53b 100644
--- a/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx
+++ b/packages/grafana-ui/src/components/ColorPicker/ColorInput.tsx
@@ -5,7 +5,7 @@ import { debounce } from 'lodash';
 import { ColorPickerProps } from './ColorPickerPopover';
 import { Input } from '../Input/Input';
 import { useStyles2 } from '../../themes';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { cx, css } from '@emotion/css';
 
 interface ColorInputState {
@@ -102,7 +102,7 @@ const ColorPreview = ({ color }: ColorPreviewProps) => {
   );
 };
 
-const getColorPreviewStyles = (theme: GrafanaThemeV2) => css`
+const getColorPreviewStyles = (theme: GrafanaTheme2) => css`
   height: 100%;
   width: ${theme.spacing.gridSize * 4}px;
   border-radius: ${theme.shape.borderRadius()} 0 0 ${theme.shape.borderRadius()};
diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
index c70146cb196..a9324058e8f 100644
--- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
+++ b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
@@ -4,7 +4,7 @@ import { Modal } from '../Modal/Modal';
 import { IconName } from '../../types/icon';
 import { Button } from '../Button';
 import { useStyles2 } from '../../themes';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { HorizontalGroup, Input } from '..';
 import { selectors } from '@grafana/e2e-selectors';
 
@@ -90,7 +90,7 @@ export const ConfirmModal = ({
   );
 };
 
-const getStyles = (theme: GrafanaThemeV2) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   modal: css`
     width: 500px;
   `,
diff --git a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
index 76a40651543..15f23febba1 100644
--- a/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
+++ b/packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import { css } from '@emotion/css';
 import Scrollbars from 'react-custom-scrollbars';
 import { useStyles2 } from '../../themes';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
 interface Props {
   className?: string;
@@ -127,7 +127,7 @@ export const CustomScrollbar: FC<Props> = ({
 
 export default CustomScrollbar;
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     customScrollbar: css`
       // Fix for Firefox. For some reason sometimes .view container gets a height of its content, but in order to
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
index 3bd2ebcc594..b433d029a7f 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkEditor.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEvent } from 'react';
-import { VariableSuggestion, GrafanaThemeV2, DataLink } from '@grafana/data';
+import { VariableSuggestion, GrafanaTheme2, DataLink } from '@grafana/data';
 import { Switch } from '../Switch/Switch';
 import { css } from '@emotion/css';
 import { useStyles2 } from '../../themes/index';
@@ -15,7 +15,7 @@ interface DataLinkEditorProps {
   onChange: (index: number, link: DataLink, callback?: () => void) => void;
 }
 
-const getStyles = (theme: GrafanaThemeV2) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   listItem: css`
     margin-bottom: ${theme.spacing()};
   `,
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
index 2472573fcf9..387358c2990 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
@@ -16,7 +16,7 @@ import { css, cx } from '@emotion/css';
 import { SlatePrism } from '../../slate-plugins';
 import { SCHEMA } from '../../utils/slate';
 import { useStyles2 } from '../../themes';
-import { DataLinkBuiltInVars, GrafanaThemeV2, VariableOrigin, VariableSuggestion } from '@grafana/data';
+import { DataLinkBuiltInVars, GrafanaTheme2, VariableOrigin, VariableSuggestion } from '@grafana/data';
 import { getInputStyles } from '../Input/Input';
 import CustomScrollbar from '../CustomScrollbar/CustomScrollbar';
 
@@ -45,7 +45,7 @@ const plugins = [
   ),
 ];
 
-const getStyles = (theme: GrafanaThemeV2) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   input: getInputStyles({ theme, invalid: false }).input,
   editor: css`
     .token.builtInVariable {
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
index b104309964f..91100d26bb8 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
@@ -1,4 +1,4 @@
-import { VariableSuggestion, GrafanaThemeV2 } from '@grafana/data';
+import { VariableSuggestion, GrafanaTheme2 } from '@grafana/data';
 import { css, cx } from '@emotion/css';
 import { groupBy, capitalize } from 'lodash';
 import React, { useRef, useMemo } from 'react';
@@ -14,7 +14,7 @@ interface DataLinkSuggestionsProps {
   onClose?: () => void;
 }
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     list: css`
       border-bottom: 1px solid ${theme.colors.border.weak};
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
index 007ff6c3a69..fa616844cb7 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
@@ -1,4 +1,4 @@
-import { DataFrame, DataLink, GrafanaThemeV2, VariableSuggestion } from '@grafana/data';
+import { DataFrame, DataLink, GrafanaTheme2, VariableSuggestion } from '@grafana/data';
 import React, { useState } from 'react';
 import { css } from '@emotion/css';
 import { Button } from '../../Button/Button';
@@ -111,7 +111,7 @@ export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({
   );
 };
 
-const getDataLinksInlineEditorStyles = stylesFactory((theme: GrafanaThemeV2) => {
+const getDataLinksInlineEditorStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     wrapper: css`
       margin-bottom: ${theme.spacing(2)};
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
index 3f56f651e7b..5fc55c310a2 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksListItem.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { css, cx } from '@emotion/css';
-import { DataFrame, DataLink, GrafanaThemeV2 } from '@grafana/data';
+import { DataFrame, DataLink, GrafanaTheme2 } from '@grafana/data';
 import { stylesFactory, useTheme2 } from '../../../themes';
 import { HorizontalGroup, VerticalGroup } from '../../Layout/Layout';
 import { IconButton } from '../../IconButton/IconButton';
@@ -43,7 +43,7 @@ export const DataLinksListItem: FC<DataLinksListItemProps> = ({ link, onEdit, on
   );
 };
 
-const getDataLinkListItemStyles = stylesFactory((theme: GrafanaThemeV2) => {
+const getDataLinkListItemStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     wrapper: css`
       margin-bottom: ${theme.spacing(2)};
diff --git a/packages/grafana-ui/src/components/Drawer/Drawer.tsx b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
index ec1dbcdbc7d..f67ec82f646 100644
--- a/packages/grafana-ui/src/components/Drawer/Drawer.tsx
+++ b/packages/grafana-ui/src/components/Drawer/Drawer.tsx
@@ -1,5 +1,5 @@
 import React, { CSSProperties, FC, ReactNode, useState } from 'react';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import RcDrawer from 'rc-drawer';
 import { css } from '@emotion/css';
 import { selectors } from '@grafana/e2e-selectors';
@@ -30,7 +30,7 @@ export interface Props {
   onClose: () => void;
 }
 
-const getStyles = stylesFactory((theme: GrafanaThemeV2, scrollableContent: boolean) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2, scrollableContent: boolean) => {
   return {
     drawer: css`
       .drawer-content {
diff --git a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
index 26512bd3cac..dcf83f30318 100644
--- a/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
+++ b/packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx
@@ -1,6 +1,6 @@
 import React, { useState, HTMLAttributes } from 'react';
 import { PopoverContent } from '../Tooltip/Tooltip';
-import { GrafanaThemeV2, SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { ToolbarButtonVariant, ToolbarButton } from '../Button';
 import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper';
 import { css } from '@emotion/css';
@@ -77,7 +77,7 @@ export const ButtonSelect = React.memo(<T,>(props: Props<T>) => {
 
 ButtonSelect.displayName = 'ButtonSelect';
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     wrapper: css`
       position: relative;
diff --git a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
index 489feb368e8..6c1490351f0 100644
--- a/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
+++ b/packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { css } from '@emotion/css';
 import { useStyles2 } from '../../themes';
 
@@ -12,7 +12,7 @@ const EmptySearchResult: FC<Props> = ({ children }) => {
   return <div className={styles.container}>{children}</div>;
 };
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     container: css`
       border-left: 3px solid ${theme.colors.info.main};
diff --git a/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx b/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
index 79918ebcd3b..0dea0661c2c 100644
--- a/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
+++ b/packages/grafana-ui/src/components/FileUpload/FileUpload.tsx
@@ -1,5 +1,5 @@
 import React, { FC, FormEvent, useCallback, useState } from 'react';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { css, cx } from '@emotion/css';
 import { Icon } from '../index';
 import { stylesFactory, useTheme2 } from '../../themes';
@@ -75,7 +75,7 @@ export const FileUpload: FC<Props> = ({
   );
 };
 
-const getStyles = stylesFactory((theme: GrafanaThemeV2, size: ComponentSize) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2, size: ComponentSize) => {
   const buttonStyles = getButtonStyles({ theme, variant: 'primary', size, iconOnly: false });
   return {
     fileUpload: css`
diff --git a/packages/grafana-ui/src/components/Forms/Checkbox.tsx b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
index eb1c1829827..5073b186859 100644
--- a/packages/grafana-ui/src/components/Forms/Checkbox.tsx
+++ b/packages/grafana-ui/src/components/Forms/Checkbox.tsx
@@ -1,5 +1,5 @@
 import React, { HTMLProps, useCallback } from 'react';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { getLabelStyles } from './Label';
 import { useTheme2, stylesFactory } from '../../themes';
 import { css, cx } from '@emotion/css';
@@ -11,7 +11,7 @@ export interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, 'value'
   value?: boolean;
 }
 
-export const getCheckboxStyles = stylesFactory((theme: GrafanaThemeV2) => {
+export const getCheckboxStyles = stylesFactory((theme: GrafanaTheme2) => {
   const labelStyles = getLabelStyles(theme);
   const checkboxSize = '16px';
   return {
diff --git a/packages/grafana-ui/src/components/Forms/Label.tsx b/packages/grafana-ui/src/components/Forms/Label.tsx
index 9eb4ea61a1b..ace084e48ad 100644
--- a/packages/grafana-ui/src/components/Forms/Label.tsx
+++ b/packages/grafana-ui/src/components/Forms/Label.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTheme2, stylesFactory } from '../../themes';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { css, cx } from '@emotion/css';
 import { Icon } from '../Icon/Icon';
 
@@ -10,7 +10,7 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
   category?: string[];
 }
 
-export const getLabelStyles = stylesFactory((theme: GrafanaThemeV2) => {
+export const getLabelStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     label: css`
       label: Label;
diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
index ad09dbd182b..d5edc6a3854 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButton.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTheme2, stylesFactory } from '../../../themes';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { css, cx } from '@emotion/css';
 import { getPropertiesForButtonSize } from '../commonStyles';
 import { getFocusStyles, getMouseFocusStyles } from '../../../themes/mixins';
@@ -52,7 +52,7 @@ export const RadioButton: React.FC<RadioButtonProps> = ({
 
 RadioButton.displayName = 'RadioButton';
 
-const getRadioButtonStyles = stylesFactory((theme: GrafanaThemeV2, size: RadioButtonSize, fullWidth?: boolean) => {
+const getRadioButtonStyles = stylesFactory((theme: GrafanaTheme2, size: RadioButtonSize, fullWidth?: boolean) => {
   const { fontSize, height, padding } = getPropertiesForButtonSize(size, theme);
 
   const textColor = theme.colors.text.secondary;
diff --git a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
index 8c170185ebe..34cd4743866 100644
--- a/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
+++ b/packages/grafana-ui/src/components/Forms/RadioButtonGroup/RadioButtonGroup.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useRef } from 'react';
 import { css, cx } from '@emotion/css';
 import { uniqueId } from 'lodash';
-import { GrafanaThemeV2, SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { RadioButtonSize, RadioButton } from './RadioButton';
 import { Icon } from '../../Icon/Icon';
 import { IconName } from '../../../types/icon';
@@ -69,7 +69,7 @@ export function RadioButtonGroup<T>({
 
 RadioButtonGroup.displayName = 'RadioButtonGroup';
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     radioGroup: css({
       display: 'inline-flex',
diff --git a/packages/grafana-ui/src/components/Forms/commonStyles.ts b/packages/grafana-ui/src/components/Forms/commonStyles.ts
index 3fbe74bc5fb..8338a072044 100644
--- a/packages/grafana-ui/src/components/Forms/commonStyles.ts
+++ b/packages/grafana-ui/src/components/Forms/commonStyles.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { GrafanaTheme, GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme, GrafanaTheme2 } from '@grafana/data';
 import { focusCss } from '../../themes/mixins';
 import { ComponentSize } from '../../types/size';
 
@@ -9,7 +9,7 @@ export const getFocusStyle = (theme: GrafanaTheme) => css`
   }
 `;
 
-export const sharedInputStyle = (theme: GrafanaThemeV2, invalid = false) => {
+export const sharedInputStyle = (theme: GrafanaTheme2, invalid = false) => {
   const borderColor = invalid ? theme.colors.error.border : theme.components.input.borderColor;
   const borderColorHover = invalid ? theme.colors.error.shade : theme.components.input.borderHover;
   const background = theme.components.input.background;
@@ -93,7 +93,7 @@ export const inputSizesPixels = (size: string) => {
   }
 };
 
-export function getPropertiesForButtonSize(size: ComponentSize, theme: GrafanaThemeV2) {
+export function getPropertiesForButtonSize(size: ComponentSize, theme: GrafanaTheme2) {
   switch (size) {
     case 'sm':
       return {
diff --git a/packages/grafana-ui/src/components/Forms/getFormStyles.ts b/packages/grafana-ui/src/components/Forms/getFormStyles.ts
index 8ab89fca7a4..e602e8cb2d0 100644
--- a/packages/grafana-ui/src/components/Forms/getFormStyles.ts
+++ b/packages/grafana-ui/src/components/Forms/getFormStyles.ts
@@ -1,5 +1,5 @@
 import { stylesFactory } from '../../themes';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { getLabelStyles } from './Label';
 import { getLegendStyles } from './Legend';
 import { getFieldValidationMessageStyles } from './FieldValidationMessage';
@@ -10,7 +10,7 @@ import { getCheckboxStyles } from './Checkbox';
 
 /** @deprecated */
 export const getFormStyles = stylesFactory(
-  (theme: GrafanaThemeV2, options: { variant: ButtonVariant; size: ComponentSize; invalid: boolean }) => {
+  (theme: GrafanaTheme2, options: { variant: ButtonVariant; size: ComponentSize; invalid: boolean }) => {
     console.warn('getFormStyles is deprecated');
 
     return {
diff --git a/packages/grafana-ui/src/components/GraphNG/utils.ts b/packages/grafana-ui/src/components/GraphNG/utils.ts
index e9e8036ac78..e8e365c5fb4 100644
--- a/packages/grafana-ui/src/components/GraphNG/utils.ts
+++ b/packages/grafana-ui/src/components/GraphNG/utils.ts
@@ -10,7 +10,7 @@ import {
   getFieldColorModeForField,
   getFieldDisplayName,
   getFieldSeriesColor,
-  GrafanaThemeV2,
+  GrafanaTheme2,
   outerJoinDataFrames,
   TimeRange,
   TimeZone,
@@ -83,7 +83,7 @@ export function preparePlotFrame(frames: DataFrame[], dimFields: XYFieldMatchers
 
 export function preparePlotConfigBuilder(
   frame: DataFrame,
-  theme: GrafanaThemeV2,
+  theme: GrafanaTheme2,
   getTimeRange: () => TimeRange,
   getTimeZone: () => TimeZone
 ): UPlotConfigBuilder {
diff --git a/packages/grafana-ui/src/components/IconButton/IconButton.tsx b/packages/grafana-ui/src/components/IconButton/IconButton.tsx
index ec9da91e4dd..d057b097e7b 100644
--- a/packages/grafana-ui/src/components/IconButton/IconButton.tsx
+++ b/packages/grafana-ui/src/components/IconButton/IconButton.tsx
@@ -4,7 +4,7 @@ import { IconName, IconSize, IconType } from '../../types/icon';
 import { stylesFactory } from '../../themes/stylesFactory';
 import { css, cx } from '@emotion/css';
 import { useTheme2 } from '../../themes/ThemeContext';
-import { GrafanaThemeV2, colorManipulator } from '@grafana/data';
+import { GrafanaTheme2, colorManipulator } from '@grafana/data';
 import { Tooltip } from '../Tooltip/Tooltip';
 import { TooltipPlacement } from '../Tooltip/PopoverController';
 import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
@@ -55,7 +55,7 @@ export const IconButton = React.forwardRef<HTMLButtonElement, Props>(
 
 IconButton.displayName = 'IconButton';
 
-const getStyles = stylesFactory((theme: GrafanaThemeV2, size: IconSize, variant: IconButtonVariant) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2, size: IconSize, variant: IconButtonVariant) => {
   const pixelSize = getSvgSize(size);
   const hoverSize = Math.max(pixelSize / 3, 8);
   let iconColor = theme.colors.text.primary;
diff --git a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
index eea3e00fb0e..1a9421ebdaf 100644
--- a/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
+++ b/packages/grafana-ui/src/components/InfoBox/InfoBox.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { css, cx } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { Icon } from '../Icon/Icon';
 import { Alert, AlertVariant } from '../Alert/Alert';
 import { stylesFactory, useStyles2 } from '../../themes';
@@ -43,7 +43,7 @@ export const InfoBox = React.memo(
 
 InfoBox.displayName = 'InfoBox';
 
-const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     docsLink: css`
       display: inline-block;
diff --git a/packages/grafana-ui/src/components/Input/Input.tsx b/packages/grafana-ui/src/components/Input/Input.tsx
index 3055357f76f..a0b9bbfc5bd 100644
--- a/packages/grafana-ui/src/components/Input/Input.tsx
+++ b/packages/grafana-ui/src/components/Input/Input.tsx
@@ -1,5 +1,5 @@
 import React, { HTMLProps, ReactNode } from 'react';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { css, cx } from '@emotion/css';
 import { getFocusStyle, sharedInputStyle } from '../Forms/commonStyles';
 import { stylesFactory, useTheme2 } from '../../themes';
@@ -24,7 +24,7 @@ export interface Props extends Omit<HTMLProps<HTMLInputElement>, 'prefix' | 'siz
 }
 
 interface StyleDeps {
-  theme: GrafanaThemeV2;
+  theme: GrafanaTheme2;
   invalid: boolean;
   width?: number;
 }
diff --git a/packages/grafana-ui/src/components/Menu/Menu.tsx b/packages/grafana-ui/src/components/Menu/Menu.tsx
index 333502506c7..9de75fe26e7 100644
--- a/packages/grafana-ui/src/components/Menu/Menu.tsx
+++ b/packages/grafana-ui/src/components/Menu/Menu.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { css } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '../../themes';
 
 /** @internal */
@@ -27,7 +27,7 @@ export const Menu = React.forwardRef<HTMLDivElement, MenuProps>(
 Menu.displayName = 'Menu';
 
 /** @internal */
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     header: css`
       padding: ${theme.spacing(0.5, 0.5, 1, 0.5)};
diff --git a/packages/grafana-ui/src/components/Menu/MenuGroup.tsx b/packages/grafana-ui/src/components/Menu/MenuGroup.tsx
index b76b36a5280..f71fefecbff 100644
--- a/packages/grafana-ui/src/components/Menu/MenuGroup.tsx
+++ b/packages/grafana-ui/src/components/Menu/MenuGroup.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { css } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '../../themes';
 import { MenuItemProps } from './MenuItem';
 
@@ -37,7 +37,7 @@ export const MenuGroup: React.FC<MenuGroupProps> = ({ label, children, ariaLabel
 MenuGroup.displayName = 'MenuGroup';
 
 /** @internal */
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     groupLabel: css`
       color: ${theme.colors.text.secondary};
diff --git a/packages/grafana-ui/src/components/Menu/MenuItem.tsx b/packages/grafana-ui/src/components/Menu/MenuItem.tsx
index 0dd2596ac6a..2dec14c4901 100644
--- a/packages/grafana-ui/src/components/Menu/MenuItem.tsx
+++ b/packages/grafana-ui/src/components/Menu/MenuItem.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { css, cx } from '@emotion/css';
-import { GrafanaThemeV2, LinkTarget } from '@grafana/data';
+import { GrafanaTheme2, LinkTarget } from '@grafana/data';
 import { useStyles2 } from '../../themes';
 import { Icon } from '../Icon/Icon';
 import { IconName } from '../../types';
@@ -55,7 +55,7 @@ export const MenuItem: React.FC<MenuItemProps> = React.memo(
 MenuItem.displayName = 'MenuItem';
 
 /** @internal */
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     link: css`
       color: ${theme.colors.text.primary};
diff --git a/packages/grafana-ui/src/components/Modal/getModalStyles.ts b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
index a33f11787ae..c1a229cc33f 100644
--- a/packages/grafana-ui/src/components/Modal/getModalStyles.ts
+++ b/packages/grafana-ui/src/components/Modal/getModalStyles.ts
@@ -1,8 +1,8 @@
 import { css } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { stylesFactory } from '../../themes';
 
-export const getModalStyles = stylesFactory((theme: GrafanaThemeV2) => {
+export const getModalStyles = stylesFactory((theme: GrafanaTheme2) => {
   const borderRadius = theme.shape.borderRadius(1);
 
   return {
diff --git a/packages/grafana-ui/src/components/NodeGraph/EdgeLabel.tsx b/packages/grafana-ui/src/components/NodeGraph/EdgeLabel.tsx
index 52ea0ff5f28..d5a9964f405 100644
--- a/packages/grafana-ui/src/components/NodeGraph/EdgeLabel.tsx
+++ b/packages/grafana-ui/src/components/NodeGraph/EdgeLabel.tsx
@@ -2,10 +2,10 @@ import React, { memo } from 'react';
 import { EdgeDatum, NodeDatum } from './types';
 import { css } from '@emotion/css';
 import { useStyles2 } from '../../themes';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { shortenLine } from './utils';
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     mainGroup: css`
       pointer-events: none;
diff --git a/packages/grafana-ui/src/components/NodeGraph/NodeGraph.tsx b/packages/grafana-ui/src/components/NodeGraph/NodeGraph.tsx
index ec790646f54..fc7008edb5b 100644
--- a/packages/grafana-ui/src/components/NodeGraph/NodeGraph.tsx
+++ b/packages/grafana-ui/src/components/NodeGraph/NodeGraph.tsx
@@ -6,7 +6,7 @@ import { EdgeDatum, NodeDatum } from './types';
 import { Node } from './Node';
 import { Edge } from './Edge';
 import { ViewControls } from './ViewControls';
-import { DataFrame, GrafanaThemeV2, LinkModel } from '@grafana/data';
+import { DataFrame, GrafanaTheme2, LinkModel } from '@grafana/data';
 import { useZoom } from './useZoom';
 import { Bounds, Config, defaultConfig, useLayout } from './layout';
 import { EdgeArrowMarker } from './EdgeArrowMarker';
@@ -19,7 +19,7 @@ import { processNodes } from './utils';
 import { Icon } from '..';
 import { useNodeLimit } from './useNodeLimit';
 
-const getStyles = stylesFactory((theme: GrafanaThemeV2) => ({
+const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
   wrapper: css`
     height: 100%;
     width: 100%;
diff --git a/packages/grafana-ui/src/components/NodeGraph/utils.ts b/packages/grafana-ui/src/components/NodeGraph/utils.ts
index 1326512b8d6..c37a81bff7f 100644
--- a/packages/grafana-ui/src/components/NodeGraph/utils.ts
+++ b/packages/grafana-ui/src/components/NodeGraph/utils.ts
@@ -5,7 +5,7 @@ import {
   FieldCache,
   FieldType,
   getFieldColorModeForField,
-  GrafanaThemeV2,
+  GrafanaTheme2,
   MutableDataFrame,
 } from '@grafana/data';
 import { EdgeDatum, NodeDatum } from './types';
@@ -84,7 +84,7 @@ export enum DataFrameFieldNames {
 export function processNodes(
   nodes: DataFrame | undefined,
   edges: DataFrame | undefined,
-  theme: GrafanaThemeV2
+  theme: GrafanaTheme2
 ): { nodes: NodeDatum[]; edges: EdgeDatum[] } {
   if (!nodes) {
     return { nodes: [], edges: [] };
@@ -276,7 +276,7 @@ function edgesFrame() {
   });
 }
 
-function getColor(field: Field, index: number, theme: GrafanaThemeV2): string {
+function getColor(field: Field, index: number, theme: GrafanaTheme2): string {
   if (!field.config.color) {
     return field.values.get(index);
   }
diff --git a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
index 3df5e44ea6a..afbb5853087 100644
--- a/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
+++ b/packages/grafana-ui/src/components/PageLayout/PageToolbar.tsx
@@ -1,6 +1,6 @@
 import React, { FC, ReactNode } from 'react';
 import { css, cx } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '../../themes/ThemeContext';
 import { IconName } from '../../types';
 import { Icon } from '../Icon/Icon';
@@ -109,7 +109,7 @@ export const PageToolbar: FC<Props> = React.memo(
 
 PageToolbar.displayName = 'PageToolbar';
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   const { spacing, typography } = theme;
 
   const titleStyles = `
diff --git a/packages/grafana-ui/src/components/PieChart/PieChart.tsx b/packages/grafana-ui/src/components/PieChart/PieChart.tsx
index e08be6d2e00..b96aa2a0fff 100644
--- a/packages/grafana-ui/src/components/PieChart/PieChart.tsx
+++ b/packages/grafana-ui/src/components/PieChart/PieChart.tsx
@@ -6,7 +6,7 @@ import {
   FieldDisplay,
   formattedValueToString,
   getFieldDisplayValues,
-  GrafanaThemeV2,
+  GrafanaTheme2,
 } from '@grafana/data';
 import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
 import tinycolor from 'tinycolor2';
@@ -414,14 +414,14 @@ function getLabelPos(arc: PieArcDatum<FieldDisplay>, outerRadius: number, innerR
   return [Math.cos(a) * r, Math.sin(a) * r];
 }
 
-function getGradientColorFrom(color: string, theme: GrafanaThemeV2) {
+function getGradientColorFrom(color: string, theme: GrafanaTheme2) {
   return tinycolor(color)
     .darken(20 * (theme.isDark ? 1 : -0.7))
     .spin(8)
     .toRgbString();
 }
 
-function getGradientColorTo(color: string, theme: GrafanaThemeV2) {
+function getGradientColorTo(color: string, theme: GrafanaTheme2) {
   return tinycolor(color)
     .darken(10 * (theme.isDark ? 1 : -0.7))
     .spin(-8)
@@ -453,7 +453,7 @@ function getPieLayout(height: number, width: number, pieType: PieChartType, marg
   };
 }
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     container: css`
       width: 100%;
diff --git a/packages/grafana-ui/src/components/Select/InputControl.tsx b/packages/grafana-ui/src/components/Select/InputControl.tsx
index 34118a307f7..1d2e52f8c02 100644
--- a/packages/grafana-ui/src/components/Select/InputControl.tsx
+++ b/packages/grafana-ui/src/components/Select/InputControl.tsx
@@ -4,7 +4,7 @@ import { sharedInputStyle } from '../Forms/commonStyles';
 import { getInputStyles } from '../Input/Input';
 import { css, cx } from '@emotion/css';
 import { stylesFactory } from '../../themes';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { focusCss } from '../../themes/mixins';
 
 interface InputControlProps {
@@ -17,7 +17,7 @@ interface InputControlProps {
 }
 
 const getInputControlStyles = stylesFactory(
-  (theme: GrafanaThemeV2, invalid: boolean, focused: boolean, disabled: boolean, withPrefix: boolean) => {
+  (theme: GrafanaTheme2, invalid: boolean, focused: boolean, disabled: boolean, withPrefix: boolean) => {
     const styles = getInputStyles({ theme, invalid });
 
     return {
diff --git a/packages/grafana-ui/src/components/Select/SingleValue.tsx b/packages/grafana-ui/src/components/Select/SingleValue.tsx
index ed5656c991d..b3d57fb5c7e 100644
--- a/packages/grafana-ui/src/components/Select/SingleValue.tsx
+++ b/packages/grafana-ui/src/components/Select/SingleValue.tsx
@@ -6,9 +6,9 @@ import { useStyles2 } from '../../themes';
 import { SlideOutTransition } from '../transitions/SlideOutTransition';
 import { FadeTransition } from '../transitions/FadeTransition';
 import { Spinner } from '../Spinner/Spinner';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   const singleValue = css`
     label: singleValue;
     color: ${theme.components.input.text};
diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
index 1e5698b2099..aa738bf35ca 100644
--- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts
+++ b/packages/grafana-ui/src/components/Select/getSelectStyles.ts
@@ -1,8 +1,8 @@
 import { stylesFactory } from '../../themes/stylesFactory';
 import { css } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
-export const getSelectStyles = stylesFactory((theme: GrafanaThemeV2) => {
+export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     menu: css`
       label: grafana-select-menu;
diff --git a/packages/grafana-ui/src/components/Slider/styles.ts b/packages/grafana-ui/src/components/Slider/styles.ts
index 38c8b9e43c2..d50e536c3e6 100644
--- a/packages/grafana-ui/src/components/Slider/styles.ts
+++ b/packages/grafana-ui/src/components/Slider/styles.ts
@@ -1,9 +1,9 @@
 import { stylesFactory } from '../../themes';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { css as cssCore } from '@emotion/react';
 import { css } from '@emotion/css';
 
-export const getStyles = stylesFactory((theme: GrafanaThemeV2, isHorizontal: boolean) => {
+export const getStyles = stylesFactory((theme: GrafanaTheme2, isHorizontal: boolean) => {
   const { spacing } = theme;
   const railColor = theme.colors.border.strong;
   const trackColor = theme.colors.primary.main;
diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx
index 023031ba0fe..63a54dded46 100644
--- a/packages/grafana-ui/src/components/Switch/Switch.tsx
+++ b/packages/grafana-ui/src/components/Switch/Switch.tsx
@@ -1,7 +1,7 @@
 import React, { HTMLProps, useRef } from 'react';
 import { css, cx } from '@emotion/css';
 import { uniqueId } from 'lodash';
-import { GrafanaThemeV2, deprecationWarning } from '@grafana/data';
+import { GrafanaTheme2, deprecationWarning } from '@grafana/data';
 import { stylesFactory, useTheme2 } from '../../themes';
 import { getFocusStyles, getMouseFocusStyles } from '../../themes/mixins';
 
@@ -55,7 +55,7 @@ export const InlineSwitch = React.forwardRef<HTMLInputElement, Props>(({ transpa
 
 InlineSwitch.displayName = 'Switch';
 
-const getSwitchStyles = stylesFactory((theme: GrafanaThemeV2, transparent?: boolean) => {
+const getSwitchStyles = stylesFactory((theme: GrafanaTheme2, transparent?: boolean) => {
   return {
     switch: css`
       width: 32px;
diff --git a/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx b/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx
index 4f180d2b7e9..233afeffd38 100644
--- a/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx
+++ b/packages/grafana-ui/src/components/TabbedContainer/TabbedContainer.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { css } from '@emotion/css';
 
-import { SelectableValue, GrafanaThemeV2 } from '@grafana/data';
+import { SelectableValue, GrafanaTheme2 } from '@grafana/data';
 import { stylesFactory, useTheme2 } from '../../themes';
 import { IconName, TabsBar, Tab, IconButton, CustomScrollbar, TabContent } from '../..';
 
@@ -19,7 +19,7 @@ export interface TabbedContainerProps {
   onClose: () => void;
 }
 
-const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     container: css`
       height: 100%;
diff --git a/packages/grafana-ui/src/components/Table/FilterList.tsx b/packages/grafana-ui/src/components/Table/FilterList.tsx
index cff3411cf16..b21a7cf5f2f 100644
--- a/packages/grafana-ui/src/components/Table/FilterList.tsx
+++ b/packages/grafana-ui/src/components/Table/FilterList.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useCallback, useMemo, useState } from 'react';
 import { FixedSizeList as List } from 'react-window';
 import { css } from '@emotion/css';
-import { GrafanaThemeV2, SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 
 import { stylesFactory, useTheme2 } from '../../themes';
 import { Checkbox, Input, Label, VerticalGroup } from '..';
@@ -78,7 +78,7 @@ export const FilterList: FC<Props> = ({ options, values, onChange }) => {
   );
 };
 
-const getStyles = stylesFactory((theme: GrafanaThemeV2) => ({
+const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
   filterList: css`
     label: filterList;
   `,
diff --git a/packages/grafana-ui/src/components/Table/Table.story.tsx b/packages/grafana-ui/src/components/Table/Table.story.tsx
index eaf87654f8b..ad6ffe80d71 100644
--- a/packages/grafana-ui/src/components/Table/Table.story.tsx
+++ b/packages/grafana-ui/src/components/Table/Table.story.tsx
@@ -8,7 +8,7 @@ import mdx from './Table.mdx';
 import {
   DataFrame,
   FieldType,
-  GrafanaThemeV2,
+  GrafanaTheme2,
   MutableDataFrame,
   ThresholdsConfig,
   ThresholdsMode,
@@ -27,7 +27,7 @@ export default {
   },
 };
 
-function buildData(theme: GrafanaThemeV2, config: Record<string, FieldConfig>): DataFrame {
+function buildData(theme: GrafanaTheme2, config: Record<string, FieldConfig>): DataFrame {
   const data = new MutableDataFrame({
     fields: [
       { name: 'Time', type: FieldType.time, values: [] }, // The time field
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index 0898790de30..8dfe059485c 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -1,8 +1,8 @@
 import { css, cx } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { getScrollbarWidth } from '../../utils';
 
-export const getTableStyles = (theme: GrafanaThemeV2) => {
+export const getTableStyles = (theme: GrafanaTheme2) => {
   const { colors } = theme;
   const headerBg = theme.colors.background.secondary;
   const borderColor = theme.colors.border.weak;
diff --git a/packages/grafana-ui/src/components/Tabs/Counter.tsx b/packages/grafana-ui/src/components/Tabs/Counter.tsx
index cbc861e8b40..e90e621787b 100644
--- a/packages/grafana-ui/src/components/Tabs/Counter.tsx
+++ b/packages/grafana-ui/src/components/Tabs/Counter.tsx
@@ -1,9 +1,9 @@
 import React, { FC } from 'react';
 import { css } from '@emotion/css';
 import { stylesFactory, useStyles2 } from '../../themes';
-import { GrafanaThemeV2, locale } from '@grafana/data';
+import { GrafanaTheme2, locale } from '@grafana/data';
 
-const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     counter: css`
       label: counter;
diff --git a/packages/grafana-ui/src/components/Tabs/Tab.tsx b/packages/grafana-ui/src/components/Tabs/Tab.tsx
index ae0e74eb4c2..bd5690b6812 100644
--- a/packages/grafana-ui/src/components/Tabs/Tab.tsx
+++ b/packages/grafana-ui/src/components/Tabs/Tab.tsx
@@ -1,6 +1,6 @@
 import React, { HTMLProps } from 'react';
 import { css, cx } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
 import { Icon } from '../Icon/Icon';
@@ -52,7 +52,7 @@ export const Tab = React.forwardRef<HTMLAnchorElement, TabProps>(
 
 Tab.displayName = 'Tab';
 
-const getTabStyles = stylesFactory((theme: GrafanaThemeV2) => {
+const getTabStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     item: css`
       list-style: none;
diff --git a/packages/grafana-ui/src/components/Tabs/TabContent.tsx b/packages/grafana-ui/src/components/Tabs/TabContent.tsx
index 9463f09a9d1..6168f0f6767 100644
--- a/packages/grafana-ui/src/components/Tabs/TabContent.tsx
+++ b/packages/grafana-ui/src/components/Tabs/TabContent.tsx
@@ -1,13 +1,13 @@
 import React, { FC, HTMLAttributes, ReactNode } from 'react';
 import { stylesFactory, useTheme2 } from '../../themes';
 import { css, cx } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
 }
 
-const getTabContentStyle = stylesFactory((theme: GrafanaThemeV2) => {
+const getTabContentStyle = stylesFactory((theme: GrafanaTheme2) => {
   return {
     tabContent: css`
       background: ${theme.colors.background.primary};
diff --git a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
index 0792c98ad73..9252a57c415 100644
--- a/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
+++ b/packages/grafana-ui/src/components/Tabs/TabsBar.tsx
@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { stylesFactory, useTheme2 } from '../../themes';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { css, cx } from '@emotion/css';
 
 export interface Props {
@@ -11,7 +11,7 @@ export interface Props {
   hideBorder?: boolean;
 }
 
-const getTabsBarStyles = stylesFactory((theme: GrafanaThemeV2, hideBorder = false) => {
+const getTabsBarStyles = stylesFactory((theme: GrafanaTheme2, hideBorder = false) => {
   return {
     tabsWrapper:
       !hideBorder &&
diff --git a/packages/grafana-ui/src/components/TextArea/TextArea.tsx b/packages/grafana-ui/src/components/TextArea/TextArea.tsx
index 4665dfc7565..679890c3245 100644
--- a/packages/grafana-ui/src/components/TextArea/TextArea.tsx
+++ b/packages/grafana-ui/src/components/TextArea/TextArea.tsx
@@ -1,5 +1,5 @@
 import React, { HTMLProps } from 'react';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { css, cx } from '@emotion/css';
 import { stylesFactory, useTheme2 } from '../../themes';
 import { getFocusStyle, sharedInputStyle } from '../Forms/commonStyles';
@@ -16,7 +16,7 @@ export const TextArea = React.forwardRef<HTMLTextAreaElement, Props>(({ invalid,
   return <textarea {...props} className={cx(styles.textarea, className)} ref={ref} />;
 });
 
-const getTextAreaStyle = stylesFactory((theme: GrafanaThemeV2, invalid = false) => {
+const getTextAreaStyle = stylesFactory((theme: GrafanaTheme2, invalid = false) => {
   return {
     textarea: cx(
       sharedInputStyle(theme),
diff --git a/packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx b/packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx
index 8a5745fec67..13d8b10ccea 100644
--- a/packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx
+++ b/packages/grafana-ui/src/components/ThemeDemos/EmotionPerfTest.tsx
@@ -1,7 +1,7 @@
 /** @jsxImportSource @emotion/react */
 
 import { Profiler, ProfilerOnRenderCallback, useState, FC } from 'react';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { css, cx } from '@emotion/css';
 import { useStyles2, useTheme2 } from '../../themes';
 import { Button } from '../Button';
@@ -141,7 +141,7 @@ function MeasureRender({ children, id }: { children: React.ReactNode; id: string
   );
 }
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     main: css(getStylesObjectMain(theme)),
     large: css({
@@ -156,7 +156,7 @@ const getStyles = (theme: GrafanaThemeV2) => {
   };
 };
 
-const getStylesObjects = (theme: GrafanaThemeV2) => {
+const getStylesObjects = (theme: GrafanaTheme2) => {
   return {
     main: getStylesObjectMain(theme),
     large: {
@@ -171,7 +171,7 @@ const getStylesObjects = (theme: GrafanaThemeV2) => {
   };
 };
 
-function getStylesObjectMain(theme: GrafanaThemeV2): any {
+function getStylesObjectMain(theme: GrafanaTheme2): any {
   return {
     background: 'blue',
     border: '1px solid red',
@@ -184,7 +184,7 @@ function getStylesObjectMain(theme: GrafanaThemeV2): any {
   };
 }
 
-function getStylesObjectChild(theme: GrafanaThemeV2): any {
+function getStylesObjectChild(theme: GrafanaTheme2): any {
   return {
     padding: '2px',
     fontSize: '10px',
diff --git a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
index ee35ea31540..c953ea85cf9 100644
--- a/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
+++ b/packages/grafana-ui/src/components/ThemeDemos/ThemeDemo.tsx
@@ -3,7 +3,7 @@ import { css, cx } from '@emotion/css';
 import { useTheme2 } from '../../themes/ThemeContext';
 import { Icon } from '../Icon/Icon';
 import { HorizontalGroup, VerticalGroup } from '../Layout/Layout';
-import { GrafanaThemeV2, ThemeRichColor } from '@grafana/data';
+import { GrafanaTheme2, ThemeRichColor } from '@grafana/data';
 import { CollapsableSection } from '../Collapse/CollapsableSection';
 import { Field } from '../Forms/Field';
 import { Input } from '../Input/Input';
@@ -211,7 +211,7 @@ export const ThemeDemo = () => {
 };
 
 interface RichColorDemoProps {
-  theme: GrafanaThemeV2;
+  theme: GrafanaTheme2;
   color: ThemeRichColor;
 }
 
@@ -269,7 +269,7 @@ const colorsTableStyle = css`
   }
 `;
 
-export function TextColors({ t }: { t: GrafanaThemeV2 }) {
+export function TextColors({ t }: { t: GrafanaTheme2 }) {
   return (
     <>
       <DemoText color={t.colors.text.primary}>
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangeInput.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangeInput.tsx
index c5fb84bdc40..adfc6fc776c 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangeInput.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangeInput.tsx
@@ -1,6 +1,6 @@
 import React, { FC, FormEvent, MouseEvent, useState } from 'react';
 import { css, cx } from '@emotion/css';
-import { dateMath, dateTime, getDefaultTimeRange, GrafanaThemeV2, TimeRange, TimeZone } from '@grafana/data';
+import { dateMath, dateTime, getDefaultTimeRange, GrafanaTheme2, TimeRange, TimeZone } from '@grafana/data';
 import { useStyles2 } from '../../themes/ThemeContext';
 import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper';
 import { Icon } from '../Icon/Icon';
@@ -106,7 +106,7 @@ export const TimeRangeInput: FC<TimeRangeInputProps> = ({
   );
 };
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   const inputStyles = getInputStyles({ theme, invalid: false });
   return {
     container: css`
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx
index a1e9861c2f3..f276c6e19ab 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerCalendar.tsx
@@ -1,7 +1,7 @@
 import React, { FormEvent, memo, useCallback } from 'react';
 import { css } from '@emotion/css';
 import Calendar from 'react-calendar/dist/entry.nostyle';
-import { dateTime, DateTime, dateTimeParse, GrafanaThemeV2, TimeZone } from '@grafana/data';
+import { dateTime, DateTime, dateTimeParse, GrafanaTheme2, TimeZone } from '@grafana/data';
 import { stylesFactory, useTheme2 } from '../../../themes';
 import { TimePickerTitle } from './TimePickerTitle';
 import { Button } from '../../Button';
@@ -9,7 +9,7 @@ import { Icon } from '../../Icon/Icon';
 import { Portal } from '../../Portal/Portal';
 import { ClickOutsideWrapper } from '../../ClickOutsideWrapper/ClickOutsideWrapper';
 
-const getStyles = stylesFactory((theme: GrafanaThemeV2, isReversed = false) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed = false) => {
   return {
     container: css`
       top: -1px;
@@ -57,7 +57,7 @@ const getStyles = stylesFactory((theme: GrafanaThemeV2, isReversed = false) => {
   };
 });
 
-const getFooterStyles = stylesFactory((theme: GrafanaThemeV2) => {
+const getFooterStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     container: css`
       background-color: ${theme.colors.background.primary};
@@ -74,7 +74,7 @@ const getFooterStyles = stylesFactory((theme: GrafanaThemeV2) => {
   };
 });
 
-const getBodyStyles = stylesFactory((theme: GrafanaThemeV2) => {
+const getBodyStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     title: css`
       color: ${theme.colors.text};
@@ -171,7 +171,7 @@ const getBodyStyles = stylesFactory((theme: GrafanaThemeV2) => {
   };
 });
 
-const getHeaderStyles = stylesFactory((theme: GrafanaThemeV2) => {
+const getHeaderStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     container: css`
       background-color: ${theme.colors.background.primary};
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
index af8fd633fd8..a9f900f0955 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerContent.tsx
@@ -1,4 +1,4 @@
-import { GrafanaThemeV2, isDateTime, TimeOption, TimeRange, TimeZone } from '@grafana/data';
+import { GrafanaTheme2, isDateTime, TimeOption, TimeRange, TimeZone } from '@grafana/data';
 import { css, cx } from '@emotion/css';
 import React, { memo, useState } from 'react';
 import { useMedia } from 'react-use';
@@ -11,7 +11,7 @@ import { TimeRangeForm } from './TimeRangeForm';
 import { TimeRangeList } from './TimeRangeList';
 import { TimePickerFooter } from './TimePickerFooter';
 
-const getStyles = stylesFactory((theme: GrafanaThemeV2, isReversed, hideQuickRanges, isContainerTall) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2, isReversed, hideQuickRanges, isContainerTall) => {
   return {
     container: css`
       background: ${theme.colors.background.primary};
@@ -54,7 +54,7 @@ const getStyles = stylesFactory((theme: GrafanaThemeV2, isReversed, hideQuickRan
   };
 });
 
-const getNarrowScreenStyles = stylesFactory((theme: GrafanaThemeV2) => {
+const getNarrowScreenStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     header: css`
       display: flex;
@@ -73,7 +73,7 @@ const getNarrowScreenStyles = stylesFactory((theme: GrafanaThemeV2) => {
   };
 });
 
-const getFullScreenStyles = stylesFactory((theme: GrafanaThemeV2, hideQuickRanges?: boolean) => {
+const getFullScreenStyles = stylesFactory((theme: GrafanaTheme2, hideQuickRanges?: boolean) => {
   return {
     container: css`
       padding-top: 9px;
@@ -93,7 +93,7 @@ const getFullScreenStyles = stylesFactory((theme: GrafanaThemeV2, hideQuickRange
   };
 });
 
-const getEmptyListStyles = stylesFactory((theme: GrafanaThemeV2) => {
+const getEmptyListStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     container: css`
       padding: 12px;
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx
index a2e99dc6ccd..9aed0940738 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimePickerFooter.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useState, useCallback } from 'react';
 import { css, cx } from '@emotion/css';
-import { TimeZone, GrafanaThemeV2, getTimeZoneInfo } from '@grafana/data';
+import { TimeZone, GrafanaTheme2, getTimeZoneInfo } from '@grafana/data';
 import { stylesFactory, useTheme2 } from '../../../themes';
 import { TimeZoneTitle } from '../TimeZonePicker/TimeZoneTitle';
 import { TimeZoneDescription } from '../TimeZonePicker/TimeZoneDescription';
@@ -82,7 +82,7 @@ export const TimePickerFooter: FC<Props> = (props) => {
   );
 };
 
-const getStyle = stylesFactory((theme: GrafanaThemeV2) => {
+const getStyle = stylesFactory((theme: GrafanaTheme2) => {
   return {
     container: css`
       border-top: 1px solid ${theme.colors.border.weak};
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx
index f57c091dff9..36d6bc2f337 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeRangePicker/TimeRangeOption.tsx
@@ -1,9 +1,9 @@
 import React, { memo } from 'react';
 import { css, cx } from '@emotion/css';
-import { GrafanaThemeV2, TimeOption } from '@grafana/data';
+import { GrafanaTheme2, TimeOption } from '@grafana/data';
 import { useStyles2 } from '../../../themes/ThemeContext';
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     container: css`
       display: flex;
diff --git a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneOption.tsx b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneOption.tsx
index 7c31f45f968..4ee68fd73fd 100644
--- a/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneOption.tsx
+++ b/packages/grafana-ui/src/components/TimePicker/TimeZonePicker/TimeZoneOption.tsx
@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
 import { css, cx } from '@emotion/css';
-import { GrafanaThemeV2, SelectableValue, getTimeZoneInfo } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue, getTimeZoneInfo } from '@grafana/data';
 import { useTheme2 } from '../../../themes/ThemeContext';
 import { stylesFactory } from '../../../themes/stylesFactory';
 import { Icon } from '../../Icon/Icon';
@@ -93,7 +93,7 @@ export const CompactTimeZoneOption: React.FC<PropsWithChildren<Props>> = (props,
   );
 };
 
-const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     container: css`
       display: flex;
diff --git a/packages/grafana-ui/src/components/Timeline/utils.ts b/packages/grafana-ui/src/components/Timeline/utils.ts
index 33ff91a77e3..89cf49d4a91 100644
--- a/packages/grafana-ui/src/components/Timeline/utils.ts
+++ b/packages/grafana-ui/src/components/Timeline/utils.ts
@@ -11,7 +11,7 @@ import {
   TimeZone,
   classicColors,
   Field,
-  GrafanaThemeV2,
+  GrafanaTheme2,
 } from '@grafana/data';
 import { UPlotConfigBuilder } from '../uPlot/config/UPlotConfigBuilder';
 import { TimelineCoreOptions, getConfig } from './timeline';
@@ -45,14 +45,14 @@ export function preparePlotFrame(data: DataFrame[], dimFields: XYFieldMatchers)
 
 export type uPlotConfigBuilderSupplier = (
   frame: DataFrame,
-  theme: GrafanaThemeV2,
+  theme: GrafanaTheme2,
   getTimeRange: () => TimeRange,
   getTimeZone: () => TimeZone
 ) => UPlotConfigBuilder;
 
 export function preparePlotConfigBuilder(
   frame: DataFrame,
-  theme: GrafanaThemeV2,
+  theme: GrafanaTheme2,
   getTimeRange: () => TimeRange,
   getTimeZone: () => TimeZone,
   coreOptions: Partial<TimelineCoreOptions>
diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx
index 62b4c8bda44..613e879bc46 100644
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx
+++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltipContainer.tsx
@@ -3,7 +3,7 @@ import { css, cx } from '@emotion/css';
 import { useStyles2 } from '../../themes';
 import { getTooltipContainerStyles } from '../../themes/mixins';
 import useWindowSize from 'react-use/lib/useWindowSize';
-import { Dimensions2D, GrafanaThemeV2 } from '@grafana/data';
+import { Dimensions2D, GrafanaTheme2 } from '@grafana/data';
 
 /**
  * @public
@@ -105,7 +105,7 @@ export const VizTooltipContainer: React.FC<VizTooltipContainerProps> = ({
 
 VizTooltipContainer.displayName = 'VizTooltipContainer';
 
-const getStyles = (theme: GrafanaThemeV2) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css`
     ${getTooltipContainerStyles(theme)}
   `,
diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts
index 8201be6a4e3..9b1a4818212 100644
--- a/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts
+++ b/packages/grafana-ui/src/components/uPlot/config/UPlotAxisBuilder.ts
@@ -1,4 +1,4 @@
-import { dateTimeFormat, GrafanaThemeV2, systemDateFormats, TimeZone } from '@grafana/data';
+import { dateTimeFormat, GrafanaTheme2, systemDateFormats, TimeZone } from '@grafana/data';
 import uPlot, { Axis } from 'uplot';
 import { PlotConfigBuilder } from '../types';
 import { measureText } from '../../../utils/measureText';
@@ -7,7 +7,7 @@ import { optMinMax } from './UPlotScaleBuilder';
 
 export interface AxisProps {
   scaleKey: string;
-  theme: GrafanaThemeV2;
+  theme: GrafanaTheme2;
   label?: string;
   show?: boolean;
   size?: number | null;
diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts
index dad81e3dbe5..b827a848be2 100755
--- a/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts
+++ b/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts
@@ -1,4 +1,4 @@
-import { DataFrameFieldIndex, FALLBACK_COLOR, FieldColorMode, GrafanaThemeV2, ThresholdsConfig } from '@grafana/data';
+import { DataFrameFieldIndex, FALLBACK_COLOR, FieldColorMode, GrafanaTheme2, ThresholdsConfig } from '@grafana/data';
 import tinycolor from 'tinycolor2';
 import uPlot, { Series } from 'uplot';
 import {
@@ -30,7 +30,7 @@ export interface SeriesProps extends LineConfig, BarConfig, FillConfig, PointsCo
   show?: boolean;
   dataFrameFieldIndex?: DataFrameFieldIndex;
   hideInLegend?: boolean;
-  theme: GrafanaThemeV2;
+  theme: GrafanaTheme2;
 }
 
 export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
diff --git a/packages/grafana-ui/src/components/uPlot/config/gradientFills.ts b/packages/grafana-ui/src/components/uPlot/config/gradientFills.ts
index ea871c4bfb2..0a2fc39c02d 100644
--- a/packages/grafana-ui/src/components/uPlot/config/gradientFills.ts
+++ b/packages/grafana-ui/src/components/uPlot/config/gradientFills.ts
@@ -1,4 +1,4 @@
-import { FieldColorMode, GrafanaThemeV2, ThresholdsConfig } from '@grafana/data';
+import { FieldColorMode, GrafanaTheme2, ThresholdsConfig } from '@grafana/data';
 import tinycolor from 'tinycolor2';
 import uPlot from 'uplot';
 import { getCanvasContext } from '../../../utils/measureText';
@@ -20,7 +20,7 @@ export function getOpacityGradientFn(
 export function getHueGradientFn(
   color: string,
   opacity: number,
-  theme: GrafanaThemeV2
+  theme: GrafanaTheme2
 ): (self: uPlot, seriesIdx: number) => CanvasGradient {
   return (plot: uPlot, seriesIdx: number) => {
     const ctx = getCanvasContext();
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/angularPanelStyles.ts b/packages/grafana-ui/src/themes/GlobalStyles/angularPanelStyles.ts
index 593d3211bf6..1e9608e89c0 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/angularPanelStyles.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/angularPanelStyles.ts
@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
-export function getAgularPanelStyles(theme: GrafanaThemeV2) {
+export function getAgularPanelStyles(theme: GrafanaTheme2) {
   return css`
     .panel-options-group {
       border-bottom: 1px solid ${theme.colors.border.weak};
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/card.ts b/packages/grafana-ui/src/themes/GlobalStyles/card.ts
index 60277058ebe..b3d820d2910 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/card.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/card.ts
@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
-export function getCardStyles(theme: GrafanaThemeV2) {
+export function getCardStyles(theme: GrafanaTheme2) {
   return css`
     .card-section {
       margin-bottom: ${theme.spacing(4)};
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
index 792c9d77bd3..d7878bf6d36 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/elements.ts
@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { GrafanaThemeV2, ThemeTypographyVariant } from '@grafana/data';
+import { GrafanaTheme2, ThemeTypographyVariant } from '@grafana/data';
 
-export function getElementStyles(theme: GrafanaThemeV2) {
+export function getElementStyles(theme: GrafanaTheme2) {
   return css`
     html {
       -ms-overflow-style: scrollbar;
diff --git a/packages/grafana-ui/src/themes/GlobalStyles/page.ts b/packages/grafana-ui/src/themes/GlobalStyles/page.ts
index b620d556d90..53739143a9f 100644
--- a/packages/grafana-ui/src/themes/GlobalStyles/page.ts
+++ b/packages/grafana-ui/src/themes/GlobalStyles/page.ts
@@ -1,7 +1,7 @@
 import { css } from '@emotion/react';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
-export function getPageStyles(theme: GrafanaThemeV2) {
+export function getPageStyles(theme: GrafanaTheme2) {
   const maxWidthBreakpoint =
     theme.breakpoints.values.xxl + theme.spacing.gridSize * 2 + theme.components.sidemenu.width;
 
diff --git a/packages/grafana-ui/src/themes/ThemeContext.tsx b/packages/grafana-ui/src/themes/ThemeContext.tsx
index 646ca73c4ea..1087f23b76c 100644
--- a/packages/grafana-ui/src/themes/ThemeContext.tsx
+++ b/packages/grafana-ui/src/themes/ThemeContext.tsx
@@ -1,4 +1,4 @@
-import { createTheme, GrafanaTheme, GrafanaThemeV2 } from '@grafana/data';
+import { createTheme, GrafanaTheme, GrafanaTheme2 } from '@grafana/data';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import React, { useContext } from 'react';
 import { Themeable, Themeable2 } from '../types/theme';
@@ -10,7 +10,7 @@ type Subtract<T, K> = Omit<T, keyof K>;
 /**
  * Mock used in tests
  */
-let ThemeContextMock: React.Context<GrafanaThemeV2> | null = null;
+let ThemeContextMock: React.Context<GrafanaTheme2> | null = null;
 
 // Used by useStyles()
 export const memoizedStyleCreators = new WeakMap();
@@ -66,7 +66,7 @@ export function useTheme(): GrafanaTheme {
   return useContext(ThemeContextMock || ThemeContext).v1;
 }
 
-export function useTheme2(): GrafanaThemeV2 {
+export function useTheme2(): GrafanaTheme2 {
   return useContext(ThemeContextMock || ThemeContext);
 }
 
@@ -96,7 +96,7 @@ export function useStyles<T>(getStyles: (theme: GrafanaTheme) => T) {
  * you pass in doesn't change, or only if it needs to. (i.e. declare
  * your style creator outside of a function component or use `useCallback()`.)
  * */
-export function useStyles2<T>(getStyles: (theme: GrafanaThemeV2) => T) {
+export function useStyles2<T>(getStyles: (theme: GrafanaTheme2) => T) {
   const theme = useTheme2();
 
   let memoizedStyleCreator = memoizedStyleCreators.get(getStyles) as typeof getStyles;
@@ -111,8 +111,8 @@ export function useStyles2<T>(getStyles: (theme: GrafanaThemeV2) => T) {
 /**
  * Enables theme context  mocking
  */
-export const mockThemeContext = (theme: Partial<GrafanaThemeV2>) => {
-  ThemeContextMock = React.createContext(theme as GrafanaThemeV2);
+export const mockThemeContext = (theme: Partial<GrafanaTheme2>) => {
+  ThemeContextMock = React.createContext(theme as GrafanaTheme2);
 
   return () => {
     ThemeContextMock = null;
diff --git a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
index fc70b4e3f34..fc0f677c660 100644
--- a/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts
@@ -1,9 +1,9 @@
 /* eslint-disable max-len */
 
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
 
-export const darkThemeVarsTemplate = (theme: GrafanaThemeV2) =>
+export const darkThemeVarsTemplate = (theme: GrafanaTheme2) =>
   `${renderGeneratedFileBanner('grafana-ui/src/themes/dark.ts', 'grafana-ui/src/themes/_variables.dark.scss.tmpl.ts')}
 // Global values
 // --------------------------------------------------
diff --git a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
index fc66115f09e..55edebb7a51 100644
--- a/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts
@@ -2,9 +2,9 @@
 
 import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
 import { styleMixins } from '.';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
-export const lightThemeVarsTemplate = (theme: GrafanaThemeV2) =>
+export const lightThemeVarsTemplate = (theme: GrafanaTheme2) =>
   `${renderGeneratedFileBanner('grafana-ui/src/themes/light.ts', 'grafana-ui/src/themes/_variable.light.scss.tmpl.ts')}
 // Global values
 // --------------------------------------------------
diff --git a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
index f9ab9abc765..73adaded65b 100644
--- a/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
+++ b/packages/grafana-ui/src/themes/_variables.scss.tmpl.ts
@@ -1,9 +1,9 @@
 /* eslint-disable max-len */
 
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
 
-export const commonThemeVarsTemplate = (theme: GrafanaThemeV2) =>
+export const commonThemeVarsTemplate = (theme: GrafanaTheme2) =>
   `${renderGeneratedFileBanner('grafana-ui/src/themes/default.ts', 'grafana-ui/src/themes/_variables.scss.tmpl.ts')}
 // Options
 //
diff --git a/packages/grafana-ui/src/themes/mixins.ts b/packages/grafana-ui/src/themes/mixins.ts
index 63529376c5c..1c23bd1afef 100644
--- a/packages/grafana-ui/src/themes/mixins.ts
+++ b/packages/grafana-ui/src/themes/mixins.ts
@@ -1,5 +1,5 @@
 import { CSSObject } from '@emotion/css';
-import { GrafanaTheme, GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme, GrafanaTheme2 } from '@grafana/data';
 import tinycolor from 'tinycolor2';
 
 export function cardChrome(theme: GrafanaTheme): string {
@@ -46,14 +46,14 @@ export const focusCss = (theme: GrafanaTheme) => `
   transition: all 0.2s cubic-bezier(0.19, 1, 0.22, 1);
 `;
 
-export function getMouseFocusStyles(theme: GrafanaThemeV2): CSSObject {
+export function getMouseFocusStyles(theme: GrafanaTheme2): CSSObject {
   return {
     outline: 'none',
     boxShadow: `none`,
   };
 }
 
-export function getFocusStyles(theme: GrafanaThemeV2): CSSObject {
+export function getFocusStyles(theme: GrafanaTheme2): CSSObject {
   return {
     outline: '2px dotted transparent',
     outlineOffset: '2px',
@@ -63,7 +63,7 @@ export function getFocusStyles(theme: GrafanaThemeV2): CSSObject {
 }
 
 // max-width is set up based on .grafana-tooltip class that's used in dashboard
-export const getTooltipContainerStyles = (theme: GrafanaThemeV2) => `
+export const getTooltipContainerStyles = (theme: GrafanaTheme2) => `
   pointer-events: none;
   overflow: hidden;
   background: ${theme.colors.background.secondary};
diff --git a/packages/grafana-ui/src/types/theme.ts b/packages/grafana-ui/src/types/theme.ts
index 258cb737d68..bbe550e1e5f 100644
--- a/packages/grafana-ui/src/types/theme.ts
+++ b/packages/grafana-ui/src/types/theme.ts
@@ -1,9 +1,9 @@
-import { GrafanaTheme, GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme, GrafanaTheme2 } from '@grafana/data';
 
 export interface Themeable {
   theme: GrafanaTheme;
 }
 
 export interface Themeable2 {
-  theme: GrafanaThemeV2;
+  theme: GrafanaTheme2;
 }
diff --git a/packages/grafana-ui/src/utils/storybook/data.ts b/packages/grafana-ui/src/utils/storybook/data.ts
index ca4059d1adc..dcbec552cf2 100644
--- a/packages/grafana-ui/src/utils/storybook/data.ts
+++ b/packages/grafana-ui/src/utils/storybook/data.ts
@@ -1,6 +1,6 @@
-import { applyFieldOverrides, DataFrame, GrafanaThemeV2 } from '@grafana/data';
+import { applyFieldOverrides, DataFrame, GrafanaTheme2 } from '@grafana/data';
 
-export function prepDataForStorybook(data: DataFrame[], theme: GrafanaThemeV2) {
+export function prepDataForStorybook(data: DataFrame[], theme: GrafanaTheme2) {
   return applyFieldOverrides({
     data: data,
     fieldConfig: {
diff --git a/packages/grafana-ui/src/utils/storybook/withTheme.tsx b/packages/grafana-ui/src/utils/storybook/withTheme.tsx
index 7f96740c218..dc70d5bc7ca 100644
--- a/packages/grafana-ui/src/utils/storybook/withTheme.tsx
+++ b/packages/grafana-ui/src/utils/storybook/withTheme.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { ThemeContext } from '../../themes/ThemeContext';
-import { createTheme, GrafanaThemeV2 } from '@grafana/data';
+import { createTheme, GrafanaTheme2 } from '@grafana/data';
 import { RenderFunction } from '../../types';
 import { useDarkMode } from 'storybook-dark-mode';
 import { GlobalStyles } from '../../themes/GlobalStyles/GlobalStyles';
 
-type SassThemeChangeHandler = (theme: GrafanaThemeV2) => void;
+type SassThemeChangeHandler = (theme: GrafanaTheme2) => void;
 const ThemeableStory: React.FunctionComponent<{ handleSassThemeChange: SassThemeChangeHandler }> = ({
   children,
   handleSassThemeChange,
diff --git a/public/app/core/components/CloseButton/CloseButton.tsx b/public/app/core/components/CloseButton/CloseButton.tsx
index db6c07b5264..4066722ac3e 100644
--- a/public/app/core/components/CloseButton/CloseButton.tsx
+++ b/public/app/core/components/CloseButton/CloseButton.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { css } from '@emotion/css';
 import { IconButton, useStyles2 } from '@grafana/ui';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
 type Props = {
   onClick: () => void;
@@ -12,7 +12,7 @@ export const CloseButton: React.FC<Props> = ({ onClick }) => {
   return <IconButton className={styles} name="times" onClick={onClick} />;
 };
 
-const getStyles = (theme: GrafanaThemeV2) =>
+const getStyles = (theme: GrafanaTheme2) =>
   css`
     position: absolute;
     right: ${theme.spacing(0.5)};
diff --git a/public/app/core/components/Login/LoginServiceButtons.tsx b/public/app/core/components/Login/LoginServiceButtons.tsx
index 8ae415a3fe6..e906094bea1 100644
--- a/public/app/core/components/Login/LoginServiceButtons.tsx
+++ b/public/app/core/components/Login/LoginServiceButtons.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import config from 'app/core/config';
 import { css, cx } from '@emotion/css';
 import { Icon, IconName, LinkButton, useStyles, useTheme2, VerticalGroup } from '@grafana/ui';
-import { GrafanaTheme, GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme, GrafanaTheme2 } from '@grafana/data';
 import { pickBy } from 'lodash';
 
 export interface LoginService {
@@ -124,7 +124,7 @@ const LoginDivider = () => {
   );
 };
 
-function getButtonStyleFor(service: LoginService, styles: ReturnType<typeof getServiceStyles>, theme: GrafanaThemeV2) {
+function getButtonStyleFor(service: LoginService, styles: ReturnType<typeof getServiceStyles>, theme: GrafanaTheme2) {
   return cx(
     styles.button,
     css`
diff --git a/public/app/core/components/Page/Page.tsx b/public/app/core/components/Page/Page.tsx
index 20b4a688c6b..86c6dfb7a0f 100644
--- a/public/app/core/components/Page/Page.tsx
+++ b/public/app/core/components/Page/Page.tsx
@@ -7,7 +7,7 @@ import PageHeader from '../PageHeader/PageHeader';
 import { Footer } from '../Footer/Footer';
 import { PageContents } from './PageContents';
 import { CustomScrollbar, useStyles2 } from '@grafana/ui';
-import { GrafanaThemeV2, NavModel } from '@grafana/data';
+import { GrafanaTheme2, NavModel } from '@grafana/data';
 import { Branding } from '../Branding/Branding';
 import { css, cx } from '@emotion/css';
 
@@ -47,7 +47,7 @@ Page.Contents = PageContents;
 
 export default Page;
 
-const getStyles = (theme: GrafanaThemeV2) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css`
     bottom: 0;
     position: absolute;
diff --git a/public/app/core/components/PageHeader/PageHeader.tsx b/public/app/core/components/PageHeader/PageHeader.tsx
index 6554041a0ad..9b6c8ff0194 100644
--- a/public/app/core/components/PageHeader/PageHeader.tsx
+++ b/public/app/core/components/PageHeader/PageHeader.tsx
@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { css } from '@emotion/css';
 import { Tab, TabsBar, Icon, IconName, useStyles2 } from '@grafana/ui';
-import { NavModel, NavModelItem, NavModelBreadcrumb, GrafanaThemeV2 } from '@grafana/data';
+import { NavModel, NavModelItem, NavModelBreadcrumb, GrafanaTheme2 } from '@grafana/data';
 import { PanelHeaderMenuItem } from 'app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem';
 
 export interface Props {
@@ -137,7 +137,7 @@ function renderTitle(title: string, breadcrumbs: NavModelBreadcrumb[]) {
   return <h1 className="page-header__title">{breadcrumbsResult}</h1>;
 }
 
-const getStyles = (theme: GrafanaThemeV2) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   headerCanvas: css`
     background: ${theme.colors.background.canvas};
   `,
diff --git a/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx b/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
index dcfc7c21607..0058f8d3c7e 100644
--- a/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
+++ b/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import { GrafanaThemeV2, PanelPluginMeta, SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, PanelPluginMeta, SelectableValue } from '@grafana/data';
 import { getAllPanelPluginMeta } from '../../../features/dashboard/components/VizTypePicker/VizTypePicker';
 import { Icon, resetSelectStyles, Select, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
@@ -61,7 +61,7 @@ export const PanelTypeFilter = ({ onChange: propsOnChange }: Props): JSX.Element
   );
 };
 
-function getStyles(theme: GrafanaThemeV2) {
+function getStyles(theme: GrafanaTheme2) {
   return {
     container: css`
       label: container;
diff --git a/public/app/core/components/help/HelpModal.tsx b/public/app/core/components/help/HelpModal.tsx
index 05522b60bff..51146c82b1d 100644
--- a/public/app/core/components/help/HelpModal.tsx
+++ b/public/app/core/components/help/HelpModal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { css } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { Modal, useStyles2 } from '@grafana/ui';
 
 const shortcuts = {
@@ -85,7 +85,7 @@ export const HelpModal = ({ onDismiss }: HelpModalProps): JSX.Element => {
   );
 };
 
-function getStyles(theme: GrafanaThemeV2) {
+function getStyles(theme: GrafanaTheme2) {
   return {
     titleDescription: css`
       font-size: ${theme.typography.bodySmall.fontSize};
diff --git a/public/app/features/alerting/NextGenAlertingPage.tsx b/public/app/features/alerting/NextGenAlertingPage.tsx
index 5942ce082a9..1d84dc6a46b 100644
--- a/public/app/features/alerting/NextGenAlertingPage.tsx
+++ b/public/app/features/alerting/NextGenAlertingPage.tsx
@@ -2,7 +2,7 @@ import React, { FormEvent, PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect, ConnectedProps } from 'react-redux';
 import { css } from '@emotion/css';
-import { GrafanaThemeV2, SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
 import { PageToolbar, stylesFactory, ToolbarButton, withTheme2, Themeable2 } from '@grafana/ui';
 import { config } from 'app/core/config';
@@ -158,7 +158,7 @@ const NextGenAlertingPageUnconnected = withTheme2(UnthemedNextGenAlertingPage);
 
 export default hot(module)(connector(NextGenAlertingPageUnconnected));
 
-const getStyles = stylesFactory((theme: GrafanaThemeV2) => ({
+const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
   wrapper: css`
     width: calc(100% - 55px);
     height: 100%;
diff --git a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
index bda3c34dd8f..c6703dd8e62 100644
--- a/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/TemplateForm.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { Alert, Button, Field, Input, LinkButton, TextArea, useStyles2 } from '@grafana/ui';
 import { useCleanup } from 'app/core/hooks/useCleanup';
 import { AlertManagerCortexConfig } from 'app/plugins/datasource/alertmanager/types';
@@ -161,7 +161,7 @@ export const TemplateForm: FC<Props> = ({ existing, alertManagerSourceName, conf
   );
 };
 
-const getStyles = (theme: GrafanaThemeV2) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   externalLink: css`
     color: ${theme.colors.text.secondary};
     text-decoration: underline;
diff --git a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
index 5a9547d3a3f..07b05eabb96 100644
--- a/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/ChannelSubForm.tsx
@@ -1,4 +1,4 @@
-import { GrafanaThemeV2, SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { NotifierDTO } from 'app/types';
 import React, { useMemo, useState } from 'react';
 import { css } from '@emotion/css';
@@ -127,7 +127,7 @@ export function ChannelSubForm<R extends ChannelValues>({
   );
 }
 
-const getStyles = (theme: GrafanaThemeV2) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   buttons: css`
     & > * + * {
       margin-left: ${theme.spacing(1)};
diff --git a/public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx b/public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx
index 660e816c92b..d4d6e3d9fe0 100644
--- a/public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/CollapsibleSection.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, useStyles2 } from '@grafana/ui';
 import React, { FC, useState } from 'react';
 
@@ -24,7 +24,7 @@ export const CollapsibleSection: FC<Props> = ({ label, children }) => {
   );
 };
 
-const getStyles = (theme: GrafanaThemeV2) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css`
     margin-top: ${theme.spacing(1)};
     padding-bottom: ${theme.spacing(1)};
diff --git a/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx b/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx
index c684f488d8b..7d2a5179818 100644
--- a/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx
+++ b/public/app/features/alerting/unified/components/receivers/form/ReceiverForm.tsx
@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { Alert, Button, Field, Input, LinkButton, useStyles2 } from '@grafana/ui';
 import { useCleanup } from 'app/core/hooks/useCleanup';
 import { NotifierDTO } from 'app/types';
@@ -130,7 +130,7 @@ export function ReceiverForm<R extends ChannelValues>({
   );
 }
 
-const getStyles = (theme: GrafanaThemeV2) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   heading: css`
     margin: ${theme.spacing(4, 0)};
   `,
diff --git a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx
index 9cc3cc9b415..20f73a6e5a3 100644
--- a/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx
+++ b/public/app/features/alerting/unified/components/rule-editor/AlertRuleForm.tsx
@@ -1,5 +1,5 @@
 import React, { FC, useMemo } from 'react';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { PageToolbar, Button, useStyles2, CustomScrollbar, Spinner, Alert } from '@grafana/ui';
 import { css } from '@emotion/css';
 
@@ -128,7 +128,7 @@ export const AlertRuleForm: FC<Props> = ({ existing }) => {
   );
 };
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     buttonSpinner: css`
       margin-right: ${theme.spacing(1)};
diff --git a/public/app/features/api-keys/ApiKeysAddedModal.tsx b/public/app/features/api-keys/ApiKeysAddedModal.tsx
index 1f6f3448b47..89043776102 100644
--- a/public/app/features/api-keys/ApiKeysAddedModal.tsx
+++ b/public/app/features/api-keys/ApiKeysAddedModal.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { css } from '@emotion/css';
 import { Alert, Field, Modal, useStyles2 } from '@grafana/ui';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
 export interface Props {
   onDismiss: () => void;
@@ -29,7 +29,7 @@ export function ApiKeysAddedModal({ onDismiss, apiKey, rootPath }: Props): JSX.E
   );
 }
 
-function getStyles(theme: GrafanaThemeV2) {
+function getStyles(theme: GrafanaTheme2) {
   return {
     label: css`
       padding: ${theme.spacing(1)};
diff --git a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
index 58d28df10e4..39d1fcdc49b 100644
--- a/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/DashboardSettings.tsx
@@ -14,7 +14,7 @@ import { AnnotationsSettings } from './AnnotationsSettings';
 import { LinksSettings } from './LinksSettings';
 import { VersionsSettings } from './VersionsSettings';
 import { JsonEditorSettings } from './JsonEditorSettings';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
 
 export interface Props {
@@ -183,7 +183,7 @@ export class DashboardSettings extends PureComponent<Props> {
   }
 }
 
-const getStyles = stylesFactory((theme: GrafanaThemeV2) => ({
+const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
   scrollInner: css`
     min-width: 100%;
     min-height: 100%;
diff --git a/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx b/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx
index c074f2aefa9..32e305d86c9 100644
--- a/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/JsonEditorSettings.tsx
@@ -5,7 +5,7 @@ import { Button, CodeEditor, HorizontalGroup, useStyles2 } from '@grafana/ui';
 import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
 import { getDashboardSrv } from '../../services/DashboardSrv';
 import { DashboardModel } from '../../state/DashboardModel';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
 interface Props {
   dashboard: DashboardModel;
@@ -57,7 +57,7 @@ export const JsonEditorSettings: React.FC<Props> = ({ dashboard }) => {
   );
 };
 
-const getStyles = (theme: GrafanaThemeV2) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   editWrapper: css`
     height: calc(100vh - 250px);
     margin-bottom: 10px;
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
index 18920d95b62..a9517e20371 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneCategory.tsx
@@ -1,6 +1,6 @@
 import React, { FC, ReactNode, useCallback, useEffect, useState } from 'react';
 import { css, cx } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { Counter, Icon, useStyles2 } from '@grafana/ui';
 import { PANEL_EDITOR_UI_STATE_STORAGE_KEY } from './state/reducers';
 import { useLocalStorage } from 'react-use';
@@ -86,7 +86,7 @@ export const OptionsPaneCategory: FC<OptionsPaneCategoryProps> = React.memo(
   }
 );
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     box: css`
       border-bottom: 1px solid ${theme.colors.border.weak};
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
index e3a6c3ac65a..0b43cec9b84 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { FieldConfigSource, GrafanaThemeV2, PanelData, PanelPlugin, SelectableValue } from '@grafana/data';
+import { FieldConfigSource, GrafanaTheme2, PanelData, PanelPlugin, SelectableValue } from '@grafana/data';
 import { DashboardModel, PanelModel } from '../../state';
 import { CustomScrollbar, RadioButtonGroup, useStyles2 } from '@grafana/ui';
 import { getPanelFrameCategory } from './getPanelFrameOptions';
@@ -143,7 +143,7 @@ function renderSearchHits(
   );
 }
 
-const getStyles = (theme: GrafanaThemeV2) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css`
     height: 100%;
     display: flex;
diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
index 6b1d73f8948..56a6e2234da 100644
--- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx
@@ -8,7 +8,7 @@ import { PanelEditorTab, PanelEditorTabId } from './types';
 import { Subscription } from 'rxjs';
 import { PanelQueriesChangedEvent, PanelTransformationsChangedEvent } from 'app/types/events';
 import { PanelEditorQueries } from './PanelEditorQueries';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
 interface PanelEditorTabsProps {
   panel: PanelModel;
@@ -75,7 +75,7 @@ function getCounter(panel: PanelModel, tab: PanelEditorTab) {
   return null;
 }
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     wrapper: css`
       display: flex;
diff --git a/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx b/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx
index 01e093f490d..ae2d8efb270 100644
--- a/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx
+++ b/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx
@@ -1,4 +1,4 @@
-import { AnnotationQuery, EventBus, GrafanaThemeV2 } from '@grafana/data';
+import { AnnotationQuery, EventBus, GrafanaTheme2 } from '@grafana/data';
 import React, { useEffect, useState } from 'react';
 import { getDashboardQueryRunner } from '../../../query/state/DashboardQueryRunner/DashboardQueryRunner';
 import { AnnotationQueryFinished, AnnotationQueryStarted } from '../../../../types/events';
@@ -53,7 +53,7 @@ export const AnnotationPicker = ({ annotation, events, onEnabledChanged }: Annot
   );
 };
 
-function getStyles(theme: GrafanaThemeV2) {
+function getStyles(theme: GrafanaTheme2) {
   return {
     annotation: css`
       display: inline-block;
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
index e9a3d2227c7..88733ad0dcd 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
@@ -15,7 +15,7 @@ import {
   DataFrame,
   DataTransformerConfig,
   DocsId,
-  GrafanaThemeV2,
+  GrafanaTheme2,
   PanelData,
   SelectableValue,
   standardTransformersRegistry,
@@ -368,7 +368,7 @@ const TransformationCard: React.FC<CardProps> = (props) => {
   return <Card {...props} className={styles.card} />;
 };
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     card: css`
       background: ${theme.colors.background.secondary};
diff --git a/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx b/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx
index a3ca7cace20..f7e901213f9 100644
--- a/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/DiffValues.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { isArray, isObject, isUndefined } from 'lodash';
 import { useStyles2, Icon } from '@grafana/ui';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { css } from '@emotion/css';
 import { Diff } from './utils';
 
@@ -24,7 +24,7 @@ export const DiffValues: React.FC<DiffProps> = ({ diff }) => {
   );
 };
 
-const getStyles = (theme: GrafanaThemeV2) => css`
+const getStyles = (theme: GrafanaTheme2) => css`
   background-color: ${theme.colors.action.hover};
   border-radius: ${theme.shape.borderRadius()};
   color: ${theme.colors.text.primary};
diff --git a/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx b/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx
index 649809406da..9b7bbb9ad0f 100644
--- a/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx
+++ b/public/app/features/dashboard/components/VizTypePicker/PanelTypeCard.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { GrafanaThemeV2, isUnsignedPluginSignature, PanelPluginMeta, PluginState } from '@grafana/data';
+import { GrafanaTheme2, isUnsignedPluginSignature, PanelPluginMeta, PluginState } from '@grafana/data';
 import { Badge, BadgeProps, IconButton, PluginSignatureBadge, useStyles2 } from '@grafana/ui';
 import { css, cx } from '@emotion/css';
 import { selectors } from '@grafana/e2e-selectors';
@@ -65,7 +65,7 @@ export const PanelTypeCard: React.FC<Props> = ({
 
 PanelTypeCard.displayName = 'PanelTypeCard';
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     item: css`
       position: relative;
diff --git a/public/app/features/dashboard/containers/DashboardPage.tsx b/public/app/features/dashboard/containers/DashboardPage.tsx
index fa0e6c64ef5..cf71804f686 100644
--- a/public/app/features/dashboard/containers/DashboardPage.tsx
+++ b/public/app/features/dashboard/containers/DashboardPage.tsx
@@ -26,7 +26,7 @@ import { dashboardWatcher } from 'app/features/live/dashboard/dashboardWatcher';
 import { GrafanaRouteComponentProps } from 'app/core/navigation/types';
 import { getTimeSrv } from '../services/TimeSrv';
 import { getKioskMode } from 'app/core/navigation/kiosk';
-import { GrafanaThemeV2, UrlQueryValue } from '@grafana/data';
+import { GrafanaTheme2, UrlQueryValue } from '@grafana/data';
 import { DashboardLoading } from '../components/DashboardLoading/DashboardLoading';
 import { DashboardFailed } from '../components/DashboardLoading/DashboardFailed';
 
@@ -373,7 +373,7 @@ const mapDispatchToProps = {
 /*
  * Styles
  */
-export const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
+export const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     dashboardContainer: css`
       position: absolute;
diff --git a/public/app/features/explore/ExploreDrawer.tsx b/public/app/features/explore/ExploreDrawer.tsx
index a59c7e20aab..222feef2dac 100644
--- a/public/app/features/explore/ExploreDrawer.tsx
+++ b/public/app/features/explore/ExploreDrawer.tsx
@@ -7,7 +7,7 @@ import { css, cx, keyframes } from '@emotion/css';
 import { stylesFactory, useTheme2 } from '@grafana/ui';
 
 // Types
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
 const drawerSlide = keyframes`
   0% {
@@ -19,7 +19,7 @@ const drawerSlide = keyframes`
   }
 `;
 
-const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     container: css`
       position: fixed !important;
diff --git a/public/app/features/inspector/InspectStatsTable.tsx b/public/app/features/inspector/InspectStatsTable.tsx
index ef482ecfd40..52dfc62b77c 100644
--- a/public/app/features/inspector/InspectStatsTable.tsx
+++ b/public/app/features/inspector/InspectStatsTable.tsx
@@ -3,7 +3,7 @@ import {
   FieldType,
   formattedValueToString,
   getDisplayProcessor,
-  GrafanaThemeV2,
+  GrafanaTheme2,
   QueryResultMetaStat,
   TimeZone,
 } from '@grafana/data';
@@ -43,7 +43,7 @@ export const InspectStatsTable: React.FC<InspectStatsTableProps> = ({ timeZone,
   );
 };
 
-function formatStat(stat: QueryResultMetaStat, timeZone: TimeZone, theme: GrafanaThemeV2): string {
+function formatStat(stat: QueryResultMetaStat, timeZone: TimeZone, theme: GrafanaTheme2): string {
   const display = getDisplayProcessor({
     field: {
       type: FieldType.number,
@@ -55,7 +55,7 @@ function formatStat(stat: QueryResultMetaStat, timeZone: TimeZone, theme: Grafan
   return formattedValueToString(display(stat.value));
 }
 
-const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     wrapper: css`
       padding-bottom: ${theme.spacing(2)};
diff --git a/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx b/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx
index 302dc41d790..25f71488601 100644
--- a/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx
+++ b/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { HorizontalGroup, useStyles2, VerticalGroup } from '@grafana/ui';
-import { GrafanaThemeV2, PanelPluginMeta, SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, PanelPluginMeta, SelectableValue } from '@grafana/data';
 import { css } from '@emotion/css';
 import { FilterInput } from '../../../../core/components/FilterInput/FilterInput';
 import { SortPicker } from '../../../../core/components/Select/SortPicker';
@@ -93,7 +93,7 @@ export const LibraryPanelsSearch = ({
   );
 };
 
-function getStyles(theme: GrafanaThemeV2) {
+function getStyles(theme: GrafanaTheme2) {
   return {
     container: css`
       width: 100%;
diff --git a/public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx b/public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx
index b9e3ca1c832..76da4eb275c 100644
--- a/public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx
+++ b/public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx
@@ -1,7 +1,7 @@
 import React, { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
 import { css } from '@emotion/css';
 import { AsyncSelect, Button, Modal, useStyles2 } from '@grafana/ui';
-import { GrafanaThemeV2, SelectableValue, urlUtil } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue, urlUtil } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
 
 import { LibraryPanelDTO } from '../../types';
@@ -85,7 +85,7 @@ async function loadOptionsAsync(uid: string, searchString: string, setLoading: (
   return options;
 }
 
-function getStyles(theme: GrafanaThemeV2) {
+function getStyles(theme: GrafanaTheme2) {
   return {
     container: css``,
   };
diff --git a/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx b/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
index ce646a094c1..532502f179f 100644
--- a/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
+++ b/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useCallback, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { css } from '@emotion/css';
-import { GrafanaThemeV2, PanelPluginMeta } from '@grafana/data';
+import { GrafanaTheme2, PanelPluginMeta } from '@grafana/data';
 import { Button, useStyles2, VerticalGroup } from '@grafana/ui';
 
 import { PanelModel } from 'app/features/dashboard/state';
@@ -109,7 +109,7 @@ export const PanelLibraryOptionsGroup: FC<Props> = ({ panel, searchQuery }) => {
   );
 };
 
-const getStyles = (theme: GrafanaThemeV2) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     libraryPanelsView: css`
       width: 100%;
diff --git a/public/app/features/manage-dashboards/DashboardImportPage.tsx b/public/app/features/manage-dashboards/DashboardImportPage.tsx
index 1b561bdfacf..3f6a6a332f6 100644
--- a/public/app/features/manage-dashboards/DashboardImportPage.tsx
+++ b/public/app/features/manage-dashboards/DashboardImportPage.tsx
@@ -1,7 +1,7 @@
 import React, { FormEvent, PureComponent } from 'react';
 import { MapDispatchToProps, MapStateToProps } from 'react-redux';
 import { css } from '@emotion/css';
-import { AppEvents, GrafanaThemeV2, NavModel } from '@grafana/data';
+import { AppEvents, GrafanaTheme2, NavModel } from '@grafana/data';
 import {
   Button,
   stylesFactory,
@@ -165,7 +165,7 @@ export default DashboardImportPage;
 
 DashboardImportPage.displayName = 'DashboardImport';
 
-const importStyles = stylesFactory((theme: GrafanaThemeV2) => {
+const importStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     option: css`
       margin-bottom: ${theme.spacing(4)};
diff --git a/public/app/features/playlist/styles.ts b/public/app/features/playlist/styles.ts
index 0cacc6505cd..4a301594464 100644
--- a/public/app/features/playlist/styles.ts
+++ b/public/app/features/playlist/styles.ts
@@ -1,7 +1,7 @@
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { css } from '@emotion/css';
 
-export function getPlaylistStyles(theme: GrafanaThemeV2) {
+export function getPlaylistStyles(theme: GrafanaTheme2) {
   return {
     description: css`
       label: description;
diff --git a/public/app/features/plugins/PluginPage.tsx b/public/app/features/plugins/PluginPage.tsx
index 52e7ed7f402..237e151d5ee 100644
--- a/public/app/features/plugins/PluginPage.tsx
+++ b/public/app/features/plugins/PluginPage.tsx
@@ -5,7 +5,7 @@ import { capitalize, find } from 'lodash';
 import {
   AppPlugin,
   GrafanaPlugin,
-  GrafanaThemeV2,
+  GrafanaTheme2,
   NavModel,
   NavModelItem,
   PluginDependencies,
@@ -571,7 +571,7 @@ const PluginSignatureDetailsBadge: React.FC<PluginSignatureDetailsBadgeProps> =
   );
 };
 
-const getDetailsBadgeStyles = (theme: GrafanaThemeV2) => ({
+const getDetailsBadgeStyles = (theme: GrafanaTheme2) => ({
   badge: css`
     background-color: ${theme.colors.background.canvas};
     border-color: ${theme.colors.border.strong};
diff --git a/public/app/features/plugins/UpdatePluginModal.tsx b/public/app/features/plugins/UpdatePluginModal.tsx
index 1e74517eb3a..8b125842bff 100644
--- a/public/app/features/plugins/UpdatePluginModal.tsx
+++ b/public/app/features/plugins/UpdatePluginModal.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Modal, useStyles2, VerticalGroup } from '@grafana/ui';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { css } from '@emotion/css';
 
 export interface UpdatePluginModalProps {
@@ -34,7 +34,7 @@ export function UpdatePluginModal({ onDismiss, id, name }: UpdatePluginModalProp
   );
 }
 
-function getStyles(theme: GrafanaThemeV2) {
+function getStyles(theme: GrafanaTheme2) {
   return {
     small: css`
       font-size: ${theme.typography.bodySmall.fontSize};
diff --git a/public/app/features/users/TokenRevokedModal.tsx b/public/app/features/users/TokenRevokedModal.tsx
index 1156cdf0d82..9ba3ed36df1 100644
--- a/public/app/features/users/TokenRevokedModal.tsx
+++ b/public/app/features/users/TokenRevokedModal.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Button, InfoBox, Portal, stylesFactory, useTheme2 } from '@grafana/ui';
 import { getModalStyles } from '@grafana/ui/src/components/Modal/getModalStyles';
 import { css, cx } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
 interface Props {
   maxConcurrentSessions?: number;
@@ -50,7 +50,7 @@ export const TokenRevokedModal = (props: Props) => {
   );
 };
 
-const getStyles = stylesFactory((theme: GrafanaThemeV2) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     infobox: css`
       margin-bottom: 0;
diff --git a/public/app/plugins/datasource/loki/components/LokiLabel.tsx b/public/app/plugins/datasource/loki/components/LokiLabel.tsx
index e954de0ce95..54446abb185 100644
--- a/public/app/plugins/datasource/loki/components/LokiLabel.tsx
+++ b/public/app/plugins/datasource/loki/components/LokiLabel.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef, HTMLAttributes } from 'react';
 import { cx, css } from '@emotion/css';
-import { GrafanaThemeV2 } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { useTheme2 } from '@grafana/ui';
 // @ts-ignore
 import Highlighter from 'react-highlight-words';
@@ -64,7 +64,7 @@ export const LokiLabel = forwardRef<HTMLElement, Props>(
 
 LokiLabel.displayName = 'LokiLabel';
 
-const getLabelStyles = (theme: GrafanaThemeV2) => ({
+const getLabelStyles = (theme: GrafanaTheme2) => ({
   base: css`
     cursor: pointer;
     font-size: ${theme.typography.size.sm};
diff --git a/public/app/plugins/panel/timeseries/plugins/AnnotationMarker.tsx b/public/app/plugins/panel/timeseries/plugins/AnnotationMarker.tsx
index dc36c6f62b3..28c76c206b2 100644
--- a/public/app/plugins/panel/timeseries/plugins/AnnotationMarker.tsx
+++ b/public/app/plugins/panel/timeseries/plugins/AnnotationMarker.tsx
@@ -1,5 +1,5 @@
 import React, { CSSProperties, useCallback, useRef, useState } from 'react';
-import { GrafanaThemeV2, dateTimeFormat, systemDateFormats, TimeZone, textUtil, getColorForTheme } from '@grafana/data';
+import { GrafanaTheme2, dateTimeFormat, systemDateFormats, TimeZone, textUtil, getColorForTheme } from '@grafana/data';
 import { HorizontalGroup, Portal, Tag, VizTooltipContainer, useStyles2, useTheme2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 import alertDef from 'app/features/alerting/state/alertDef';
@@ -114,7 +114,7 @@ export function AnnotationMarker({ annotation, timeZone }: Props) {
   );
 }
 
-const getAnnotationMarkerStyles = (theme: GrafanaThemeV2) => {
+const getAnnotationMarkerStyles = (theme: GrafanaTheme2) => {
   return {
     markerWrapper: css`
       padding: 0 4px 4px 4px;
diff --git a/public/app/types/events.ts b/public/app/types/events.ts
index 7ee5c6ee2ca..f91813fb027 100644
--- a/public/app/types/events.ts
+++ b/public/app/types/events.ts
@@ -3,7 +3,7 @@ import {
   BusEventBase,
   BusEventWithPayload,
   eventFactory,
-  GrafanaThemeV2,
+  GrafanaTheme2,
   TimeRange,
 } from '@grafana/data';
 import { IconName } from '@grafana/ui';
@@ -152,7 +152,7 @@ export class RenderEvent extends BusEventBase {
   static type = 'render';
 }
 
-export class ThemeChangedEvent extends BusEventWithPayload<GrafanaThemeV2> {
+export class ThemeChangedEvent extends BusEventWithPayload<GrafanaTheme2> {
   static type = 'theme-changed';
 }