Chore: Migrate more theme v1 usage to v2 (#58121)

2025-02-25 18:55:37 -06:00 · 2022-11-03 13:54:18 +00:00
parent c1c8dc8749
commit f37e53f060
30 changed files with 242 additions and 253 deletions
--- a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx
+++ b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx
@@ -3,8 +3,8 @@ import { css } from '@emotion/css';
 import React, { FunctionComponent, MouseEvent } from 'react';

 // Components
-import { GrafanaTheme } from '@grafana/data';
-import { IconName, IconType, IconSize, IconButton, useTheme, stylesFactory } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { IconName, IconType, IconSize, IconButton, useStyles2 } from '@grafana/ui';

 interface Props {
  icon?: IconName;
@@ -17,8 +17,7 @@ interface Props {
 }

 export const DashNavButton: FunctionComponent<Props> = ({ icon, iconType, iconSize, tooltip, onClick, children }) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useStyles2(getStyles);

  return (
    <div className={styles.noBorderContainer}>
@@ -37,9 +36,9 @@ export const DashNavButton: FunctionComponent<Props> = ({ icon, iconType, iconSi
  );
 };

-const getStyles = stylesFactory((theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
  noBorderContainer: css`
-    padding: 0 ${theme.spacing.xs};
+    padding: 0 ${theme.spacing(0.5)};
    display: flex;
  `,
-}));
+});
--- a/public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx
+++ b/public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx
@@ -1,8 +1,7 @@
 import { css } from '@emotion/css';
 import React from 'react';

-import { GrafanaTheme } from '@grafana/data';
-import { Alert, useStyles } from '@grafana/ui';
+import { Alert } from '@grafana/ui';
 import { getMessageFromError } from 'app/core/utils/errors';
 import { DashboardInitError, AppNotificationSeverity } from 'app/types';

@@ -11,7 +10,6 @@ export interface Props {
 }

 export const DashboardFailed = ({ initError }: Props) => {
-  const styles = useStyles(getStyles);
  if (!initError) {
    return null;
  }
@@ -25,13 +23,11 @@ export const DashboardFailed = ({ initError }: Props) => {
  );
 };

-export const getStyles = (theme: GrafanaTheme) => {
-  return {
-    dashboardLoading: css`
-      height: 60vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    `,
-  };
+export const styles = {
+  dashboardLoading: css`
+    height: 60vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `,
 };
--- a/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx
+++ b/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx
@@ -1,9 +1,9 @@
 import { css, keyframes } from '@emotion/css';
 import React from 'react';

-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
-import { Button, HorizontalGroup, Spinner, useStyles, VerticalGroup } from '@grafana/ui';
+import { Button, HorizontalGroup, Spinner, useStyles2, VerticalGroup } from '@grafana/ui';
 import { DashboardInitPhase } from 'app/types';

 export interface Props {
@@ -11,7 +11,7 @@ export interface Props {
 }

 export const DashboardLoading = ({ initPhase }: Props) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
  const cancelVariables = () => {
    locationService.push('/');
  };
@@ -34,7 +34,7 @@ export const DashboardLoading = ({ initPhase }: Props) => {
  );
 };

-export const getStyles = (theme: GrafanaTheme) => {
+export const getStyles = (theme: GrafanaTheme2) => {
  // Amount of time we want to pass before we start showing loading spinner
  const slowStartThreshold = '0.5s';

@@ -53,7 +53,7 @@ export const getStyles = (theme: GrafanaTheme) => {
      animation: ${invisibleToVisible} 0s step-end ${slowStartThreshold} 1 normal forwards;
    `,
    dashboardLoadingText: css`
-      font-size: ${theme.typography.size.lg};
+      font-size: ${theme.typography.h4.fontSize};
    `,
  };
 };
--- a/public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx
@@ -1,13 +1,13 @@
 import { css } from '@emotion/css';
 import React, { ButtonHTMLAttributes } from 'react';

-import { GrafanaTheme } from '@grafana/data';
-import { Button, useStyles } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, useStyles2 } from '@grafana/ui';

 export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {}

 export const ListNewButton: React.FC<Props> = ({ children, ...restProps }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
  return (
    <div className={styles.buttonWrapper}>
      <Button icon="plus" variant="secondary" {...restProps}>
@@ -17,8 +17,8 @@ export const ListNewButton: React.FC<Props> = ({ children, ...restProps }) => {
  );
 };

-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
  buttonWrapper: css`
-    padding: ${theme.spacing.lg} 0;
+    padding: ${theme.spacing(3)} 0;
  `,
 });
--- a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx
@@ -7,9 +7,9 @@ import {
  FieldConfigOptionsRegistry,
  FieldConfigProperty,
  FieldOverrideContext,
-  GrafanaTheme,
+  GrafanaTheme2,
 } from '@grafana/data';
-import { Counter, Field, HorizontalGroup, IconButton, Label, stylesFactory, useTheme } from '@grafana/ui';
+import { Counter, Field, HorizontalGroup, IconButton, Label, useStyles2 } from '@grafana/ui';

 import { OptionsPaneCategory } from './OptionsPaneCategory';

@@ -32,8 +32,7 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> =
  isSystemOverride,
  searchQuery,
 }) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useStyles2(getStyles);
  const item = registry?.getIfExists(property.id);

  if (!item) {
@@ -125,13 +124,13 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> =
  );
 };

-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme2) => {
  return {
    collapsibleOverrideEditor: css`
      label: collapsibleOverrideEditor;
      & + .dynamicConfigValueEditor--nonCollapsible {
-        margin-top: ${theme.spacing.formSpacingBase}px;
+        margin-top: ${theme.spacing(1)};
      }
    `,
  };
-});
+};
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx
@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 import React from 'react';

-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { useStyles } from '@grafana/ui';
+import { useStyles2 } from '@grafana/ui';
 import { useSelector } from 'app/types';

 import { OptionsPaneOptions } from './OptionsPaneOptions';
@@ -21,7 +21,7 @@ export const OptionsPane: React.FC<OptionPaneRenderProps> = ({
  dashboard,
  instanceState,
 }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
  const isVizPickerOpen = useSelector((state) => state.panelEditor.isVizPickerOpen);
  const { data } = usePanelLatestData(panel, { withTransforms: true, withFieldConfig: false }, true);

@@ -51,7 +51,7 @@ export const OptionsPane: React.FC<OptionPaneRenderProps> = ({
  );
 };

-const getStyles = (theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme2) => {
  return {
    wrapper: css`
      height: 100%;
@@ -66,7 +66,7 @@ const getStyles = (theme: GrafanaTheme) => {
      min-height: 0;
    `,
    vizButtonWrapper: css`
-      padding: 0 ${theme.spacing.md} ${theme.spacing.md} 0;
+      padding: 0 ${theme.spacing(2, 2)} 0;
    `,
    legacyOptions: css`
      label: legacy-options;
@@ -78,12 +78,12 @@ const getStyles = (theme: GrafanaTheme) => {
        margin-bottom: 0;
      }
      .panel-options-group__body {
-        padding: ${theme.spacing.md} 0;
+        padding: ${theme.spacing(2)} 0;
      }

      .section {
        display: block;
-        margin: ${theme.spacing.md} 0;
+        margin: ${theme.spacing(2)} 0;

        &:first-child {
          margin-top: 0;
--- a/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx
@@ -1,8 +1,8 @@
 import { css } from '@emotion/css';
 import React, { FC } from 'react';

-import { FieldConfigOptionsRegistry, GrafanaTheme, ConfigOverrideRule } from '@grafana/data';
-import { HorizontalGroup, Icon, IconButton, useStyles } from '@grafana/ui';
+import { FieldConfigOptionsRegistry, GrafanaTheme2, ConfigOverrideRule } from '@grafana/data';
+import { HorizontalGroup, Icon, IconButton, useStyles2 } from '@grafana/ui';
 import { FieldMatcherUIRegistryItem } from '@grafana/ui/src/components/MatchersUI/types';

 interface OverrideCategoryTitleProps {
@@ -21,7 +21,7 @@ export const OverrideCategoryTitle: FC<OverrideCategoryTitleProps> = ({
  override,
  onOverrideRemove,
 }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
  const properties = override.properties.map((p) => registry.getIfExists(p.id)).filter((prop) => !!prop);
  const propertyNames = properties.map((p) => p?.name).join(', ');
  const matcherOptions = matcherUi.optionsToLabel(override.matcher.options);
@@ -45,22 +45,22 @@ export const OverrideCategoryTitle: FC<OverrideCategoryTitleProps> = ({

 OverrideCategoryTitle.displayName = 'OverrideTitle';

-const getStyles = (theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme2) => {
  return {
    matcherUi: css`
-      padding: ${theme.spacing.sm};
+      padding: ${theme.spacing(1)};
    `,
    propertyPickerWrapper: css`
-      margin-top: ${theme.spacing.formSpacingBase * 2}px;
+      margin-top: ${theme.spacing(2)};
    `,
    overrideDetails: css`
-      font-size: ${theme.typography.size.sm};
-      color: ${theme.colors.textWeak};
-      font-weight: ${theme.typography.weight.regular};
+      font-size: ${theme.typography.bodySmall.fontSize};
+      color: ${theme.colors.text.secondary};
+      font-weight: ${theme.typography.fontWeightRegular};
    `,
    options: css`
      overflow: hidden;
-      padding-right: ${theme.spacing.xl};
+      padding-right: ${theme.spacing(4)};
    `,
    unknownLabel: css`
      margin-bottom: 0;
--- a/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx
@@ -1,9 +1,8 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';

-import { GrafanaTheme } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { ToolbarButton, ButtonGroup, useStyles } from '@grafana/ui';
+import { ToolbarButton, ButtonGroup } from '@grafana/ui';
 import { useDispatch, useSelector } from 'app/types';

 import { PanelModel } from '../../state';
@@ -15,8 +14,7 @@ type Props = {
  panel: PanelModel;
 };

-export const VisualizationButton: FC<Props> = ({ panel }) => {
-  const styles = useStyles(getStyles);
+export const VisualizationButton = ({ panel }: Props) => {
  const dispatch = useDispatch();
  const plugin = useSelector(getPanelPluginWithFallback(panel.type));
  const isPanelOptionsVisible = useSelector((state) => state.panelEditor.ui.isPanelOptionsVisible);
@@ -63,14 +61,12 @@ export const VisualizationButton: FC<Props> = ({ panel }) => {

 VisualizationButton.displayName = 'VisualizationTab';

-const getStyles = (theme: GrafanaTheme) => {
-  return {
-    wrapper: css`
-      display: flex;
-      flex-direction: column;
-    `,
-    vizButton: css`
-      text-align: left;
-    `,
-  };
+const styles = {
+  wrapper: css`
+    display: flex;
+    flex-direction: column;
+  `,
+  vizButton: css`
+    text-align: left;
+  `,
 };
--- a/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx
@@ -2,9 +2,9 @@ import { css } from '@emotion/css';
 import React, { FC, useCallback, useRef, useState } from 'react';
 import { useLocalStorage } from 'react-use';

-import { GrafanaTheme, PanelData, SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, PanelData, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Button, CustomScrollbar, FilterInput, RadioButtonGroup, useStyles } from '@grafana/ui';
+import { Button, CustomScrollbar, FilterInput, RadioButtonGroup, useStyles2 } from '@grafana/ui';
 import { Field } from '@grafana/ui/src/components/Forms/Field';
 import { LS_VISUALIZATION_SELECT_TAB_KEY } from 'app/core/constants';
 import { PanelLibraryOptionsGroup } from 'app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup';
@@ -34,7 +34,7 @@ export const VisualizationSelectPane: FC<Props> = ({ panel, data }) => {
  );

  const dispatch = useDispatch();
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
  const searchRef = useRef<HTMLInputElement | null>(null);

  const onVizChange = useCallback(
@@ -125,10 +125,10 @@ export const VisualizationSelectPane: FC<Props> = ({ panel, data }) => {

 VisualizationSelectPane.displayName = 'VisualizationSelectPane';

-const getStyles = (theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme2) => {
  return {
    icon: css`
-      color: ${theme.palette.gray33};
+      color: ${theme.v1.palette.gray33};
    `,
    wrapper: css`
      display: flex;
@@ -144,28 +144,28 @@ const getStyles = (theme: GrafanaTheme) => {
      min-height: 0;
    `,
    scrollContent: css`
-      padding: ${theme.spacing.sm};
+      padding: ${theme.spacing(1)};
    `,
    openWrapper: css`
      display: flex;
      flex-direction: column;
      flex: 1 1 100%;
      height: 100%;
-      background: ${theme.colors.bg1};
-      border: 1px solid ${theme.colors.border1};
+      background: ${theme.colors.background.primary};
+      border: 1px solid ${theme.colors.border.weak};
    `,
    searchRow: css`
      display: flex;
-      margin-bottom: ${theme.spacing.sm};
+      margin-bottom: ${theme.spacing(1)};
    `,
    closeButton: css`
-      margin-left: ${theme.spacing.sm};
+      margin-left: ${theme.spacing(1)};
    `,
    customFieldMargin: css`
-      margin-bottom: ${theme.spacing.sm};
+      margin-bottom: ${theme.spacing(1)};
    `,
    formBox: css`
-      padding: ${theme.spacing.sm};
+      padding: ${theme.spacing(1)};
      padding-bottom: 0;
    `,
  };
--- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx
@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 import React, { useEffect } from 'react';

-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { FetchError } from '@grafana/runtime';
-import { Button, ConfirmModal, Modal, stylesFactory, useTheme } from '@grafana/ui';
+import { Button, ConfirmModal, Modal, useStyles2 } from '@grafana/ui';
 import { DashboardModel } from 'app/features/dashboard/state';

 import { SaveDashboardAsButton } from './SaveDashboardButton';
@@ -77,10 +77,9 @@ export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = (
  );
 };

-const ConfirmPluginDashboardSaveModal: React.FC<SaveDashboardModalProps> = ({ onDismiss, dashboard }) => {
-  const theme = useTheme();
+const ConfirmPluginDashboardSaveModal = ({ onDismiss, dashboard }: SaveDashboardModalProps) => {
  const { onDashboardSave } = useDashboardSave(dashboard);
-  const styles = getConfirmPluginDashboardSaveModalStyles(theme);
+  const styles = useStyles2(getConfirmPluginDashboardSaveModalStyles);

  return (
    <Modal className={styles.modal} title="Plugin dashboard" icon="copy" isOpen={true} onDismiss={onDismiss}>
@@ -122,21 +121,21 @@ const isHandledError = (errorStatus: string) => {
  }
 };

-const getConfirmPluginDashboardSaveModalStyles = stylesFactory((theme: GrafanaTheme) => ({
+const getConfirmPluginDashboardSaveModalStyles = (theme: GrafanaTheme2) => ({
  modal: css`
    width: 500px;
  `,
  modalText: css`
-    font-size: ${theme.typography.heading.h4};
-    color: ${theme.colors.link};
-    margin-bottom: calc(${theme.spacing.d} * 2);
-    padding-top: ${theme.spacing.d};
+    font-size: ${theme.typography.h4.fontSize};
+    color: ${theme.colors.text.primary};
+    margin-bottom: ${theme.spacing(4)}
+    padding-top: ${theme.spacing(2)};
  `,
  modalButtonRow: css`
    margin-bottom: 14px;
    a,
    button {
-      margin-right: ${theme.spacing.d};
+      margin-right: ${theme.spacing(2)};
    }
  `,
-}));
+});
--- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
+++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx
@@ -2,14 +2,12 @@ import { css } from '@emotion/css';
 import { saveAs } from 'file-saver';
 import React, { useCallback, useState } from 'react';

-import { GrafanaTheme } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
-import { Button, ClipboardButton, HorizontalGroup, stylesFactory, TextArea, useTheme } from '@grafana/ui';
+import { Button, ClipboardButton, HorizontalGroup, TextArea } from '@grafana/ui';

 import { SaveDashboardFormProps } from '../types';

 export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard, onCancel }) => {
-  const theme = useTheme();
  const [dashboardJSON, setDashboardJson] = useState(() => {
    const clone = dashboard.getSaveModelClone();
    delete clone.id;
@@ -23,7 +21,6 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
    saveAs(blob, dashboard.title + '-' + new Date().getTime() + '.json');
  }, [dashboard.title, dashboardJSON]);

-  const styles = getStyles(theme);
  return (
    <>
      <Stack direction="column" gap={2}>
@@ -70,14 +67,12 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
  );
 };

-const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  return {
-    json: css`
-      height: 400px;
-      width: 100%;
-      overflow: auto;
-      resize: none;
-      font-family: monospace;
-    `,
-  };
-});
+const styles = {
+  json: css`
+    height: 400px;
+    width: 100%;
+    overflow: auto;
+    resize: none;
+    font-family: monospace;
+  `,
+};
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx
@@ -5,12 +5,12 @@ import { mergeMap } from 'rxjs/operators';
 import {
  DataFrame,
  DataTransformerConfig,
-  GrafanaTheme,
+  GrafanaTheme2,
  transformDataFrame,
  TransformerRegistryItem,
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Icon, JSONFormatter, useStyles } from '@grafana/ui';
+import { Icon, JSONFormatter, useStyles2 } from '@grafana/ui';

 import { TransformationsEditorTransformation } from './types';

@@ -31,7 +31,7 @@ export const TransformationEditor = ({
  configs,
  onChange,
 }: TransformationEditorProps) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
  const [input, setInput] = useState<DataFrame[]>([]);
  const [output, setOutput] = useState<DataFrame[]>([]);
  const config = useMemo(() => configs[index], [configs, index]);
@@ -97,8 +97,8 @@ export const TransformationEditor = ({
  );
 };

-const getStyles = (theme: GrafanaTheme) => {
-  const debugBorder = theme.isLight ? theme.palette.gray85 : theme.palette.gray15;
+const getStyles = (theme: GrafanaTheme2) => {
+  const debugBorder = theme.isLight ? theme.v1.palette.gray85 : theme.v1.palette.gray15;

  return {
    title: css`
@@ -112,8 +112,8 @@ const getStyles = (theme: GrafanaTheme) => {
      align-items: center;
    `,
    name: css`
-      font-weight: ${theme.typography.weight.semibold};
-      color: ${theme.colors.textBlue};
+      font-weight: ${theme.typography.fontWeightMedium};
+      color: ${theme.colors.primary.text};
    `,
    iconRow: css`
      display: flex;
@@ -123,8 +123,8 @@ const getStyles = (theme: GrafanaTheme) => {
      border: none;
      box-shadow: none;
      cursor: pointer;
-      color: ${theme.colors.textWeak};
-      margin-left: ${theme.spacing.sm};
+      color: ${theme.colors.text.secondary};
+      margin-left: ${theme.spacing(1)};
      &:hover {
        color: ${theme.colors.text};
      }
@@ -141,13 +141,13 @@ const getStyles = (theme: GrafanaTheme) => {
      align-items: center;
      align-self: stretch;
      justify-content: center;
-      margin: 0 ${theme.spacing.xs};
-      color: ${theme.colors.textBlue};
+      margin: 0 ${theme.spacing(0.5)};
+      color: ${theme.colors.primary.text};
    `,
    debugTitle: css`
-      padding: ${theme.spacing.sm} ${theme.spacing.xxs};
-      font-family: ${theme.typography.fontFamily.monospace};
-      font-size: ${theme.typography.size.sm};
+      padding: ${theme.spacing(1)} ${theme.spacing(0.25)};
+      font-family: ${theme.typography.fontFamilyMonospace};
+      font-size: ${theme.typography.bodySmall.fontSize};
      color: ${theme.colors.text};
      border-bottom: 1px solid ${debugBorder};
      flex-grow: 0;
@@ -155,11 +155,11 @@ const getStyles = (theme: GrafanaTheme) => {
    `,

    debug: css`
-      margin-top: ${theme.spacing.sm};
-      padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
+      margin-top: ${theme.spacing(1)};
+      padding: 0 ${theme.spacing(1, 1, 1)};
      border: 1px solid ${debugBorder};
-      background: ${theme.isLight ? theme.palette.white : theme.palette.gray05};
-      border-radius: ${theme.border.radius.sm};
+      background: ${theme.isLight ? theme.v1.palette.white : theme.v1.palette.gray05};
+      border-radius: ${theme.shape.borderRadius(1)};
      width: 100%;
      min-height: 300px;
      display: flex;
@@ -170,7 +170,7 @@ const getStyles = (theme: GrafanaTheme) => {
      flex-grow: 1;
      height: 100%;
      overflow: hidden;
-      padding: ${theme.spacing.xs};
+      padding: ${theme.spacing(0.5)};
    `,
  };
 };
--- a/public/app/features/dashboard/components/VersionHistory/DiffGroup.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/DiffGroup.tsx
@@ -2,8 +2,8 @@ import { css } from '@emotion/css';
 import { last } from 'lodash';
 import React from 'react';

-import { GrafanaTheme } from '@grafana/data';
-import { useStyles } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';

 import { DiffTitle } from './DiffTitle';
 import { DiffValues } from './DiffValues';
@@ -14,8 +14,8 @@ type DiffGroupProps = {
  title: string;
 };

-export const DiffGroup: React.FC<DiffGroupProps> = ({ diffs, title }) => {
-  const styles = useStyles(getStyles);
+export const DiffGroup = ({ diffs, title }: DiffGroupProps) => {
+  const styles = useStyles2(getStyles);

  if (diffs.length === 1) {
    return (
@@ -41,17 +41,17 @@ export const DiffGroup: React.FC<DiffGroupProps> = ({ diffs, title }) => {
  );
 };

-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
  container: css`
-    background-color: ${theme.colors.bg2};
-    font-size: ${theme.typography.size.md};
-    margin-bottom: ${theme.spacing.md};
-    padding: ${theme.spacing.md};
+    background-color: ${theme.colors.background.secondary};
+    font-size: ${theme.typography.h6.fontSize};
+    margin-bottom: ${theme.spacing(2)};
+    padding: ${theme.spacing(2)};
  `,
  list: css`
-    margin-left: ${theme.spacing.xl};
+    margin-left: ${theme.spacing(4)};
  `,
  listItem: css`
-    margin-bottom: ${theme.spacing.sm};
+    margin-bottom: ${theme.spacing(1)};
  `,
 });
--- a/public/app/features/dashboard/components/VersionHistory/DiffTitle.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/DiffTitle.tsx
@@ -1,8 +1,8 @@
 import { css } from '@emotion/css';
 import React from 'react';

-import { GrafanaTheme } from '@grafana/data';
-import { useStyles, Icon } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2, Icon } from '@grafana/ui';

 import { DiffValues } from './DiffValues';
 import { Diff, getDiffText } from './utils';
@@ -15,7 +15,8 @@ type DiffTitleProps = {
 const replaceDiff: Diff = { op: 'replace', originalValue: undefined, path: [''], value: undefined, startLineNumber: 0 };

 export const DiffTitle: React.FC<DiffTitleProps> = ({ diff, title }) => {
-  const styles = useStyles(getDiffTitleStyles);
+  const styles = useStyles2(getDiffTitleStyles);
+
  return diff ? (
    <>
      <Icon type="mono" name="circle" className={styles[diff.op]} /> <span className={styles.embolden}>{title}</span>{' '}
@@ -29,32 +30,32 @@ export const DiffTitle: React.FC<DiffTitleProps> = ({ diff, title }) => {
  );
 };

-const getDiffTitleStyles = (theme: GrafanaTheme) => ({
+const getDiffTitleStyles = (theme: GrafanaTheme2) => ({
  embolden: css`
-    font-weight: ${theme.typography.weight.bold};
+    font-weight: ${theme.typography.fontWeightBold};
  `,
  add: css`
-    color: ${theme.palette.online};
+    color: ${theme.colors.success.main};
  `,
  replace: css`
-    color: ${theme.palette.warn};
+    color: ${theme.colors.success.main};
  `,
  move: css`
-    color: ${theme.palette.warn};
+    color: ${theme.colors.success.main};
  `,
  copy: css`
-    color: ${theme.palette.warn};
+    color: ${theme.colors.success.main};
  `,
  _get: css`
-    color: ${theme.palette.warn};
+    color: ${theme.colors.success.main};
  `,
  test: css`
-    color: ${theme.palette.warn};
+    color: ${theme.colors.success.main};
  `,
  remove: css`
-    color: ${theme.palette.critical};
+    color: ${theme.colors.success.main};
  `,
  withoutDiff: css`
-    margin-bottom: ${theme.spacing.md};
+    margin-bottom: ${theme.spacing(2)};
  `,
 });
--- a/public/app/features/dashboard/components/VersionHistory/VersionHistoryComparison.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/VersionHistoryComparison.tsx
@@ -1,8 +1,8 @@
 import { css, cx } from '@emotion/css';
 import React from 'react';

-import { GrafanaTheme } from '@grafana/data';
-import { Button, ModalsController, CollapsableSection, HorizontalGroup, useStyles } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, ModalsController, CollapsableSection, HorizontalGroup, useStyles2 } from '@grafana/ui';

 import { DecoratedRevisionModel } from '../DashboardSettings/VersionsSettings';

@@ -20,7 +20,7 @@ type DiffViewProps = {

 export const VersionHistoryComparison: React.FC<DiffViewProps> = ({ baseInfo, newInfo, diffData, isNewLatest }) => {
  const diff = jsonDiff(diffData.lhs, diffData.rhs);
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);

  return (
    <div>
@@ -68,13 +68,13 @@ export const VersionHistoryComparison: React.FC<DiffViewProps> = ({ baseInfo, ne
  );
 };

-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
  spacer: css`
-    margin-bottom: ${theme.spacing.xl};
+    margin-bottom: ${theme.spacing(4)};
  `,
  versionInfo: css`
-    color: ${theme.colors.textWeak};
-    font-size: ${theme.typography.size.sm};
+    color: ${theme.colors.text.secondary};
+    font-size: ${theme.typography.bodySmall.fontSize};
  `,
  noMarginBottom: css`
    margin-bottom: 0;
--- a/public/app/features/dashboard/components/VersionHistory/VersionHistoryHeader.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/VersionHistoryHeader.tsx
@@ -2,8 +2,8 @@ import { css } from '@emotion/css';
 import { noop } from 'lodash';
 import React from 'react';

-import { GrafanaTheme } from '@grafana/data';
-import { Icon, IconButton, useStyles } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Icon, IconButton, useStyles2 } from '@grafana/ui';

 type VersionHistoryHeaderProps = {
  onClick?: () => void;
@@ -18,7 +18,7 @@ export const VersionHistoryHeader: React.FC<VersionHistoryHeaderProps> = ({
  newVersion = 0,
  isNewLatest = false,
 }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);

  return (
    <h3 className={styles.header}>
@@ -31,11 +31,11 @@ export const VersionHistoryHeader: React.FC<VersionHistoryHeaderProps> = ({
  );
 };

-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
  header: css`
-    font-size: ${theme.typography.heading.h3};
+    font-size: ${theme.typography.h3.fontSize};
    display: flex;
-    gap: ${theme.spacing.md};
-    margin-bottom: ${theme.spacing.lg};
+    gap: ${theme.spacing(2)};
+    margin-bottom: ${theme.spacing(3)};
  `,
 });