Theme: Renames new theme model from GrafanaThemeV2 to just GrafanaTheme (#33619)

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

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);
   };

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;
 }
 

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);

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 = {},

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: {

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';

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;

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;

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;
 }
 

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,

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',
 

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();
 

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();

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;
 

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;
 

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');
 

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;
 

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;

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)};

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;

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',

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',

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)};

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()};

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;
   `,

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

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()};
   `,

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 {

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};

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)};

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)};

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 {

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;

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};

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`

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 {

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;

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;

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',

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 {

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 {

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 {

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;

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;

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;
 }

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)};

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};

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};

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 {

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;

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%;

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);
   }

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 = `

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%;

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 {

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};

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;

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;

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;

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%;

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;
   `,

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

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;

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;

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;

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};

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 &&

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),

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',

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}>

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`

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};

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;

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};

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;

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;

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>

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)}
   `,

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;

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> {

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();

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};

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)};

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;

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;
 

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;

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
 // --------------------------------------------------

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
 // --------------------------------------------------

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
 //

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};

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;
 }

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: {

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,

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)};

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`

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;

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};
   `,

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;

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};