Chore: Migrate usage of v1 theme to v2 (#58154)

2025-02-25 18:55:37 -06:00 · 2022-11-03 18:15:55 +00:00
parent c1b10e4f0c
commit a8c181bf6a
42 changed files with 390 additions and 406 deletions
--- a/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx
+++ b/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx
@@ -4,14 +4,14 @@ import React from 'react';

 import { DisplayValue, formattedValueToString } from '@grafana/data';

-import { useStyles } from '../../themes/ThemeContext';
+import { useStyles2 } from '../../themes/ThemeContext';
 import { InlineList } from '../List/InlineList';

 /**
 * @internal
 */
 export const VizLegendStatsList: React.FunctionComponent<{ stats: DisplayValue[] }> = ({ stats }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);

  if (stats.length === 0) {
    return null;
--- a/packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx
+++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { Dimensions, TimeZone } from '@grafana/data';
 import { TooltipDisplayMode } from '@grafana/schema';

-import { useStyles } from '../../themes';
+import { useStyles2 } from '../../themes';
 import { FlotPosition } from '../Graph/types';
 import { Portal } from '../Portal/Portal';

@@ -52,7 +52,7 @@ export interface VizTooltipProps {
 * @public
 */
 export const VizTooltip = ({ content, position, offset }: VizTooltipProps) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
  if (position) {
    return (
      <Portal className={styles.portal}>
--- a/packages/grafana-ui/src/themes/ThemeContext.test.tsx
+++ b/packages/grafana-ui/src/themes/ThemeContext.test.tsx
@@ -3,12 +3,12 @@ import { render } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
 import React from 'react';

-import { mockThemeContext, useStyles } from './ThemeContext';
+import { mockThemeContext, useStyles2 } from './ThemeContext';

 describe('useStyles', () => {
  it('memoizes the passed in function correctly', () => {
    const stylesCreator = () => ({});
-    const { rerender, result } = renderHook(() => useStyles(stylesCreator));
+    const { rerender, result } = renderHook(() => useStyles2(stylesCreator));
    const storedReference = result.current;

    rerender();
@@ -16,7 +16,7 @@ describe('useStyles', () => {
  });

  it('does not memoize if the passed in function changes every time', () => {
-    const { rerender, result } = renderHook(() => useStyles(() => ({})));
+    const { rerender, result } = renderHook(() => useStyles2(() => ({})));
    const storedReference = result.current;
    rerender();
    expect(storedReference).not.toBe(result.current);
@@ -24,7 +24,7 @@ describe('useStyles', () => {

  it('updates the memoized function when the theme changes', () => {
    const stylesCreator = () => ({});
-    const { rerender, result } = renderHook(() => useStyles(stylesCreator));
+    const { rerender, result } = renderHook(() => useStyles2(stylesCreator));
    const storedReference = result.current;

    const restoreThemeContext = mockThemeContext({});
@@ -35,10 +35,10 @@ describe('useStyles', () => {

  it('passes in theme and returns style object', (done) => {
    const Dummy: React.FC = function () {
-      const styles = useStyles((theme) => {
+      const styles = useStyles2((theme) => {
        return {
          someStyle: css`
-            color: ${theme.palette.critical};
+            color: ${theme.colors.success.main};
          `,
        };
      });
--- a/packages/grafana-ui/src/themes/ThemeContext.tsx
+++ b/packages/grafana-ui/src/themes/ThemeContext.tsx
@@ -83,6 +83,7 @@ export function useTheme2(): GrafanaTheme2 {
 * 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()`.)
 * */
+/** @deprecated use useStyles2 */
 /** @public */
 export function useStyles<T>(getStyles: (theme: GrafanaTheme) => T) {
  const theme = useTheme();
--- a/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx
+++ b/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx
@@ -1,19 +1,19 @@
 import { css } from '@emotion/css';
 import React, { FC } from 'react';

-import { useTheme } from '../../themes';
+import { useTheme2 } from '../../themes';

 export interface Props {
  children?: React.ReactNode;
 }

 export const DashboardStoryCanvas: FC<Props> = ({ children }) => {
-  const theme = useTheme();
+  const theme = useTheme2();
  const style = css`
    width: 100%;
    height: 100%;
    padding: 32px;
-    background: ${theme.colors.dashboardBg};
+    background: ${theme.colors.background.canvas};
  `;

  return <div className={style}>{children}</div>;
--- a/packages/grafana-ui/src/utils/storybook/StoryExample.tsx
+++ b/packages/grafana-ui/src/utils/storybook/StoryExample.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import React, { FC } from 'react';

-import { useTheme } from '../../themes/ThemeContext';
+import { useTheme2 } from '../../themes/ThemeContext';

 export interface Props {
  name: string;
@@ -9,13 +9,13 @@ export interface Props {
 }

 export const StoryExample: FC<Props> = ({ name, children }) => {
-  const theme = useTheme();
+  const theme = useTheme2();
  const style = css`
    width: 100%;
    padding: 16px;
  `;
  const heading = css`
-    color: ${theme.colors.textWeak};
+    color: ${theme.colors.text.secondary};
    margin-bottom: 16px;
  `;

--- a/public/app/features/connections/tabs/ConnectData/Search/Search.tsx
+++ b/public/app/features/connections/tabs/ConnectData/Search/Search.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import React, { FC } from 'react';

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

 const getStyles = () => ({
  searchContainer: css`
@@ -12,7 +12,7 @@ const getStyles = () => ({
 });

 export const Search: FC<{ onChange: (e: React.FormEvent<HTMLInputElement>) => void }> = ({ onChange }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);

  return (
    <div className={styles.searchContainer}>
--- a/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx
+++ b/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx
@@ -3,48 +3,48 @@ import React from 'react';
 import ReactDiffViewer, { ReactDiffViewerProps, DiffMethod } from 'react-diff-viewer';
 import tinycolor from 'tinycolor2';

-import { useTheme } from '@grafana/ui';
+import { useTheme2 } from '@grafana/ui';

 export const DiffViewer: React.FC<ReactDiffViewerProps> = ({ oldValue, newValue }) => {
-  const theme = useTheme();
+  const theme = useTheme2();

  const styles = {
    variables: {
      // the light theme supplied by ReactDiffViewer is very similar to Grafana
      // the dark theme needs some tweaks.
      dark: {
-        diffViewerBackground: theme.colors.dashboardBg,
-        diffViewerColor: theme.colors.text,
-        addedBackground: tinycolor(theme.palette.greenShade).setAlpha(0.3).toString(),
+        diffViewerBackground: theme.colors.background.canvas,
+        diffViewerColor: theme.colors.text.primary,
+        addedBackground: tinycolor(theme.v1.palette.greenShade).setAlpha(0.3).toString(),
        addedColor: 'white',
-        removedBackground: tinycolor(theme.palette.redShade).setAlpha(0.3).toString(),
+        removedBackground: tinycolor(theme.v1.palette.redShade).setAlpha(0.3).toString(),
        removedColor: 'white',
-        wordAddedBackground: tinycolor(theme.palette.greenBase).setAlpha(0.4).toString(),
-        wordRemovedBackground: tinycolor(theme.palette.redBase).setAlpha(0.4).toString(),
-        addedGutterBackground: tinycolor(theme.palette.greenShade).setAlpha(0.2).toString(),
-        removedGutterBackground: tinycolor(theme.palette.redShade).setAlpha(0.2).toString(),
-        gutterBackground: theme.colors.bg1,
-        gutterBackgroundDark: theme.colors.bg1,
-        highlightBackground: tinycolor(theme.colors.bgBlue1).setAlpha(0.4).toString(),
-        highlightGutterBackground: tinycolor(theme.colors.bgBlue2).setAlpha(0.2).toString(),
-        codeFoldGutterBackground: theme.colors.bg2,
-        codeFoldBackground: theme.colors.bg2,
-        emptyLineBackground: theme.colors.bg2,
-        gutterColor: theme.colors.textFaint,
-        addedGutterColor: theme.colors.text,
-        removedGutterColor: theme.colors.text,
-        codeFoldContentColor: theme.colors.textFaint,
-        diffViewerTitleBackground: theme.colors.bg2,
-        diffViewerTitleColor: theme.colors.textFaint,
-        diffViewerTitleBorderColor: theme.colors.border3,
+        wordAddedBackground: tinycolor(theme.v1.palette.greenBase).setAlpha(0.4).toString(),
+        wordRemovedBackground: tinycolor(theme.v1.palette.redBase).setAlpha(0.4).toString(),
+        addedGutterBackground: tinycolor(theme.v1.palette.greenShade).setAlpha(0.2).toString(),
+        removedGutterBackground: tinycolor(theme.v1.palette.redShade).setAlpha(0.2).toString(),
+        gutterBackground: theme.colors.background.primary,
+        gutterBackgroundDark: theme.colors.background.primary,
+        highlightBackground: tinycolor(theme.colors.primary.main).setAlpha(0.4).toString(),
+        highlightGutterBackground: tinycolor(theme.colors.primary.shade).setAlpha(0.2).toString(),
+        codeFoldGutterBackground: theme.colors.background.secondary,
+        codeFoldBackground: theme.colors.background.secondary,
+        emptyLineBackground: theme.colors.background.secondary,
+        gutterColor: theme.colors.text.disabled,
+        addedGutterColor: theme.colors.text.primary,
+        removedGutterColor: theme.colors.text.primary,
+        codeFoldContentColor: theme.colors.text.disabled,
+        diffViewerTitleBackground: theme.colors.background.secondary,
+        diffViewerTitleColor: theme.colors.text.disabled,
+        diffViewerTitleBorderColor: theme.colors.border.strong,
      },
    },
    codeFold: {
-      fontSize: theme.typography.size.sm,
+      fontSize: theme.typography.bodySmall.fontSize,
    },
    gutter: `
      pre {
-        color: ${tinycolor(theme.colors.textFaint).setAlpha(1).toString()};
+        color: ${tinycolor(theme.colors.text.disabled).setAlpha(1).toString()};
        opacity: 0.61;
      }
    `,
@@ -53,7 +53,7 @@ export const DiffViewer: React.FC<ReactDiffViewerProps> = ({ oldValue, newValue
  return (
    <div
      className={css`
-        font-size: ${theme.typography.size.sm};
+        font-size: ${theme.typography.bodySmall.fontSize};
        // prevent global styles interfering with diff viewer
        pre {
          all: revert;
--- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
+++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 import React, { FC, useState } from 'react';

-import { PanelMenuItem } from '@grafana/data';
+import { PanelMenuItem, GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Icon, toIconName, useTheme } from '@grafana/ui';
+import { Icon, toIconName, useStyles2 } from '@grafana/ui';

 interface Props {
  children?: any;
@@ -13,19 +13,7 @@ export const PanelHeaderMenuItem: FC<Props & PanelMenuItem> = (props) => {
  const [ref, setRef] = useState<HTMLLIElement | null>(null);
  const isSubMenu = props.type === 'submenu';
  const isDivider = props.type === 'divider';
-  const theme = useTheme();
-  const menuIconClassName = css`
-    margin-right: ${theme.spacing.sm};
-    a::after {
-      display: none;
-    }
-  `;
-  const shortcutIconClassName = css`
-    position: absolute;
-    top: 7px;
-    right: ${theme.spacing.xs};
-    color: ${theme.colors.textWeak};
-  `;
+  const styles = useStyles2(getStyles);

  const icon = props.iconClassName ? toIconName(props.iconClassName) : undefined;

@@ -34,16 +22,16 @@ export const PanelHeaderMenuItem: FC<Props & PanelMenuItem> = (props) => {
  ) : (
    <li className={isSubMenu ? `dropdown-submenu ${getDropdownLocationCssClass(ref)}` : undefined} ref={setRef}>
      <a onClick={props.onClick} href={props.href}>
-        {icon && <Icon name={icon} className={menuIconClassName} />}
+        {icon && <Icon name={icon} className={styles.menuIconClassName} />}

        <span className="dropdown-item-text" aria-label={selectors.components.Panels.Panel.headerItems(props.text)}>
          {props.text}
-          {isSubMenu && <Icon name="angle-right" className={shortcutIconClassName} />}
+          {isSubMenu && <Icon name="angle-right" className={styles.shortcutIconClassName} />}
        </span>

        {props.shortcut && (
          <span className="dropdown-menu-item-shortcut">
-            <Icon name="keyboard" className={menuIconClassName} /> {props.shortcut}
+            <Icon name="keyboard" className={styles.menuIconClassName} /> {props.shortcut}
          </span>
        )}
      </a>
@@ -70,3 +58,20 @@ function getDropdownLocationCssClass(element: HTMLElement | null) {
    return 'pull-right';
  }
 }
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    menuIconClassName: css({
+      marginRight: theme.spacing(1),
+      'a::after': {
+        display: 'none',
+      },
+    }),
+    shortcutIconClassName: css({
+      position: 'absolute',
+      top: '7px',
+      right: theme.spacing(0.5),
+      color: theme.colors.text.secondary,
+    }),
+  };
+}
--- a/public/app/features/datasources/components/DataSourcesList.tsx
+++ b/public/app/features/datasources/components/DataSourcesList.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React from 'react';

 import { DataSourceSettings } from '@grafana/data';
-import { Card, Tag, useStyles } from '@grafana/ui';
+import { Card, Tag, useStyles2 } from '@grafana/ui';
 import EmptyListCTA from 'app/core/components/EmptyListCTA/EmptyListCTA';
 import PageLoader from 'app/core/components/PageLoader/PageLoader';
 import { contextSrv } from 'app/core/core';
@@ -38,7 +38,7 @@ export type ViewProps = {
 };

 export function DataSourcesListView({ dataSources, dataSourcesCount, isLoading, hasCreateRights }: ViewProps) {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
  const dataSourcesRoutes = useDataSourcesRoutes();

  if (isLoading) {
--- a/public/app/features/explore/RichHistory/RichHistory.test.tsx
+++ b/public/app/features/explore/RichHistory/RichHistory.test.tsx
@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import React from 'react';

-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { SortOrder } from 'app/core/utils/richHistory';

 import { ExploreId } from '../../../types/explore';
@@ -23,7 +23,7 @@ jest.mock('@grafana/runtime', () => ({

 const setup = (propOverrides?: Partial<RichHistoryProps>) => {
  const props: RichHistoryProps = {
-    theme: {} as GrafanaTheme,
+    theme: {} as GrafanaTheme2,
    exploreId: ExploreId.left,
    height: 100,
    activeDatasourceInstance: 'Test datasource',
--- a/public/app/features/explore/RichHistory/RichHistory.tsx
+++ b/public/app/features/explore/RichHistory/RichHistory.tsx
@@ -2,7 +2,7 @@ import { debounce } from 'lodash';
 import React, { PureComponent } from 'react';

 import { SelectableValue } from '@grafana/data';
-import { Themeable, withTheme, TabbedContainer, TabConfig } from '@grafana/ui';
+import { Themeable2, TabbedContainer, TabConfig, withTheme2 } from '@grafana/ui';
 import { SortOrder, RichHistorySearchFilters, RichHistorySettings } from 'app/core/utils/richHistory';
 import { RichHistoryQuery, ExploreId } from 'app/types/explore';

@@ -26,7 +26,7 @@ export const getSortOrderOptions = () =>
    { label: 'Data source Z-A', value: SortOrder.DatasourceZA },
  ].filter((option) => supportedFeatures().availableFilters.includes(option.value));

-export interface RichHistoryProps extends Themeable {
+export interface RichHistoryProps extends Themeable2 {
  richHistory: RichHistoryQuery[];
  richHistoryTotal?: number;
  richHistorySettings: RichHistorySettings;
@@ -176,4 +176,4 @@ class UnThemedRichHistory extends PureComponent<RichHistoryProps> {
  }
 }

-export const RichHistory = withTheme(UnThemedRichHistory);
+export const RichHistory = withTheme2(UnThemedRichHistory);
--- a/public/app/features/explore/RichHistory/RichHistoryCard.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryCard.tsx
@@ -2,9 +2,9 @@ import { css, cx } from '@emotion/css';
 import React, { useState, useEffect } from 'react';
 import { connect, ConnectedProps } from 'react-redux';

-import { GrafanaTheme, DataSourceApi, DataQuery } from '@grafana/data';
+import { DataSourceApi, DataQuery, GrafanaTheme2 } from '@grafana/data';
 import { config, getDataSourceSrv, reportInteraction } from '@grafana/runtime';
-import { stylesFactory, useTheme, TextArea, Button, IconButton } from '@grafana/ui';
+import { TextArea, Button, IconButton, useStyles2 } from '@grafana/ui';
 import { notifyApp } from 'app/core/actions';
 import appEvents from 'app/core/app_events';
 import { createSuccessNotification } from 'app/core/copy/appNotification';
@@ -47,47 +47,47 @@ interface OwnProps<T extends DataQuery = DataQuery> {

 export type Props<T extends DataQuery = DataQuery> = ConnectedProps<typeof connector> & OwnProps<T>;

-const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
+const getStyles = (theme: GrafanaTheme2) => {
  /* Hard-coded value so all buttons and icons on right side of card are aligned */
  const rightColumnWidth = '240px';
  const rightColumnContentWidth = '170px';

  /* If datasource was removed, card will have inactive color */
-  const cardColor = theme.colors.bg2;
+  const cardColor = theme.colors.background.secondary;

  return {
    queryCard: css`
      display: flex;
      flex-direction: column;
-      border: 1px solid ${theme.colors.border1};
-      margin: ${theme.spacing.sm} 0;
+      border: 1px solid ${theme.colors.border.weak};
+      margin: ${theme.spacing(1)} 0;
      background-color: ${cardColor};
-      border-radius: ${theme.border.radius.sm};
+      border-radius: ${theme.shape.borderRadius(1)};
      .starred {
-        color: ${theme.palette.orange};
+        color: ${theme.v1.palette.orange};
      }
    `,
    cardRow: css`
      display: flex;
      align-items: center;
      justify-content: space-between;
-      padding: ${theme.spacing.sm};
+      padding: ${theme.spacing(1)};
      border-bottom: none;
      :first-of-type {
-        border-bottom: 1px solid ${theme.colors.border1};
-        padding: ${theme.spacing.xs} ${theme.spacing.sm};
+        border-bottom: 1px solid ${theme.colors.border.weak};
+        padding: ${theme.spacing(0.5, 1)};
      }
      img {
-        height: ${theme.typography.size.base};
-        max-width: ${theme.typography.size.base};
-        margin-right: ${theme.spacing.sm};
+        height: ${theme.typography.fontSize}px;
+        max-width: ${theme.typography.fontSize}px;
+        margin-right: ${theme.spacing(1)};
      }
    `,
    datasourceContainer: css`
      display: flex;
      align-items: center;
-      font-size: ${theme.typography.size.sm};
-      font-weight: ${theme.typography.weight.semibold};
+      font-size: ${theme.typography.bodySmall.fontSize};
+      font-weight: ${theme.typography.fontWeightMedium};
    `,
    queryActionButtons: css`
      max-width: ${rightColumnContentWidth};
@@ -95,15 +95,15 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
      justify-content: flex-end;
      font-size: ${theme.typography.size.base};
      button {
-        margin-left: ${theme.spacing.sm};
+        margin-left: ${theme.spacing(1)};
      }
    `,
    queryContainer: css`
-      font-weight: ${theme.typography.weight.semibold};
+      font-weight: ${theme.typography.fontWeightMedium};
      width: calc(100% - ${rightColumnWidth});
    `,
    queryRow: css`
-      border-top: 1px solid ${theme.colors.border1};
+      border-top: 1px solid ${theme.colors.border.weak};
      word-break: break-all;
      padding: 4px 2px;
      :first-child {
@@ -113,17 +113,17 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
    `,
    updateCommentContainer: css`
      width: calc(100% + ${rightColumnWidth});
-      margin-top: ${theme.spacing.sm};
+      margin-top: ${theme.spacing(1)};
    `,
    comment: css`
      overflow-wrap: break-word;
-      font-size: ${theme.typography.size.sm};
-      font-weight: ${theme.typography.weight.regular};
-      margin-top: ${theme.spacing.xs};
+      font-size: ${theme.typography.bodySmall.fontSize};
+      font-weight: ${theme.typography.fontWeightRegular};
+      margin-top: ${theme.spacing(0.5)};
    `,
    commentButtonRow: css`
      > * {
-        margin-right: ${theme.spacing.sm};
+        margin-right: ${theme.spacing(1)};
      }
    `,
    textArea: css`
@@ -135,7 +135,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
      justify-content: flex-end;
      button {
        height: auto;
-        padding: ${theme.spacing.xs} ${theme.spacing.md};
+        padding: ${theme.spacing(0.5, 2)};
        line-height: 1.4;
        span {
          white-space: normal !important;
@@ -143,7 +143,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, isRemoved: boolean) => {
      }
    `,
  };
-});
+};

 export function RichHistoryCard(props: Props) {
  const {
@@ -171,8 +171,7 @@ export function RichHistoryCard(props: Props) {
    getQueryDsInstance();
  }, [query.datasourceUid]);

-  const theme = useTheme();
-  const styles = getStyles(theme, isRemoved);
+  const styles = useStyles2(getStyles);

  const onRunQuery = async () => {
    const queriesToRun = query.queries;
--- a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';

-import { GrafanaTheme, SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { Button, FilterInput, MultiSelect, RangeSlider, Select, stylesFactory, useTheme } from '@grafana/ui';
+import { Button, FilterInput, MultiSelect, RangeSlider, Select, useStyles2 } from '@grafana/ui';
 import {
  createDatasourcesList,
  mapNumbertoTimeInSlider,
@@ -31,21 +31,21 @@ export interface Props {
  height: number;
 }

-const getStyles = stylesFactory((theme: GrafanaTheme, height: number) => {
-  const bgColor = theme.isLight ? theme.palette.gray5 : theme.palette.dark4;
+const getStyles = (theme: GrafanaTheme2, height: number) => {
+  const bgColor = theme.isLight ? theme.v1.palette.gray5 : theme.v1.palette.dark4;

  return {
    container: css`
      display: flex;
    `,
    labelSlider: css`
-      font-size: ${theme.typography.size.sm};
+      font-size: ${theme.typography.bodySmall.fontSize};
      &:last-of-type {
-        margin-top: ${theme.spacing.lg};
+        margin-top: ${theme.spacing(3)};
      }
      &:first-of-type {
-        font-weight: ${theme.typography.weight.semibold};
-        margin-bottom: ${theme.spacing.md};
+        font-weight: ${theme.typography.fontWeightMedium};
+        margin-bottom: ${theme.spacing(2)};
      }
    `,
    containerContent: css`
@@ -54,7 +54,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, height: number) => {
    `,
    containerSlider: css`
      width: 129px;
-      margin-right: ${theme.spacing.sm};
+      margin-right: ${theme.spacing(1)};
    `,
    fixedSlider: css`
      position: fixed;
@@ -63,7 +63,7 @@ const getStyles = stylesFactory((theme: GrafanaTheme, height: number) => {
      bottom: 10px;
      height: ${height - 180}px;
      width: 129px;
-      padding: ${theme.spacing.sm} 0;
+      padding: ${theme.spacing(1)} 0;
    `,
    selectors: css`
      display: flex;
@@ -71,15 +71,15 @@ const getStyles = stylesFactory((theme: GrafanaTheme, height: number) => {
      flex-wrap: wrap;
    `,
    filterInput: css`
-      margin-bottom: ${theme.spacing.sm};
+      margin-bottom: ${theme.spacing(1)};
    `,
    multiselect: css`
      width: 100%;
-      margin-bottom: ${theme.spacing.sm};
+      margin-bottom: ${theme.spacing(1)};
      .gf-form-select-box__multi-value {
        background-color: ${bgColor};
-        padding: ${theme.spacing.xxs} ${theme.spacing.xs} ${theme.spacing.xxs} ${theme.spacing.sm};
-        border-radius: ${theme.border.radius.sm};
+        padding: ${theme.spacing(0.25, 0.5, 0.25, 1)};
+        border-radius: ${theme.shape.borderRadius(1)};
      }
    `,
    sort: css`
@@ -89,34 +89,34 @@ const getStyles = stylesFactory((theme: GrafanaTheme, height: number) => {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
-      margin-top: ${theme.spacing.lg};
+      margin-top: ${theme.spacing(3)};
      h4 {
        margin: 0 10px 0 0;
      }
    `,
    heading: css`
-      font-size: ${theme.typography.heading.h4};
-      margin: ${theme.spacing.md} ${theme.spacing.xxs} ${theme.spacing.sm} ${theme.spacing.xxs};
+      font-size: ${theme.typography.h4.fontSize};
+      margin: ${theme.spacing(2, 0.25, 1, 0.25)};
    `,
    footer: css`
      height: 60px;
-      margin: ${theme.spacing.lg} auto;
+      margin: ${theme.spacing(3)} auto;
      display: flex;
      justify-content: center;
-      font-weight: ${theme.typography.weight.light};
-      font-size: ${theme.typography.size.sm};
+      font-weight: ${theme.typography.fontWeightLight};
+      font-size: ${theme.typography.bodySmall.fontSize};
      a {
-        font-weight: ${theme.typography.weight.semibold};
-        margin-left: ${theme.spacing.xxs};
+        font-weight: ${theme.typography.fontWeightMedium};
+        margin-left: ${theme.spacing(0.25)};
      }
    `,
    queries: css`
-      font-size: ${theme.typography.size.sm};
-      font-weight: ${theme.typography.weight.regular};
-      margin-left: ${theme.spacing.xs};
+      font-size: ${theme.typography.bodySmall.fontSize};
+      font-weight: ${theme.typography.fontWeightRegular};
+      margin-left: ${theme.spacing(0.5)};
    `,
  };
-});
+};

 export function RichHistoryQueriesTab(props: Props) {
  const {
@@ -133,8 +133,7 @@ export function RichHistoryQueriesTab(props: Props) {
    activeDatasourceInstance,
  } = props;

-  const theme = useTheme();
-  const styles = getStyles(theme, height);
+  const styles = useStyles2(useCallback((theme: GrafanaTheme2) => getStyles(theme, height), [height]));

  const listOfDatasources = createDatasourcesList();

--- a/public/app/features/explore/RichHistory/RichHistorySettingsTab.tsx
+++ b/public/app/features/explore/RichHistory/RichHistorySettingsTab.tsx
@@ -1,8 +1,8 @@
 import { css } from '@emotion/css';
 import React from 'react';

-import { GrafanaTheme, SelectableValue } from '@grafana/data';
-import { stylesFactory, useTheme, Select, Button, Field, InlineField, InlineSwitch, Alert } from '@grafana/ui';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { useStyles2, Select, Button, Field, InlineField, InlineSwitch, Alert } from '@grafana/ui';
 import { notifyApp } from 'app/core/actions';
 import appEvents from 'app/core/app_events';
 import { createSuccessNotification } from 'app/core/copy/appNotification';
@@ -22,19 +22,25 @@ export interface RichHistorySettingsProps {
  deleteRichHistory: () => void;
 }

-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme2) => {
  return {
    container: css`
-      font-size: ${theme.typography.size.sm};
+      font-size: ${theme.typography.bodySmall.fontSize};
    `,
    spaceBetween: css`
-      margin-bottom: ${theme.spacing.lg};
+      margin-bottom: ${theme.spacing(3)};
    `,
    input: css`
      max-width: 200px;
    `,
+    bold: css`
+      font-weight: ${theme.typography.fontWeightBold};
+    `,
+    bottomMargin: css`
+      margin-bottom: ${theme.spacing(1)};
+    `,
  };
-});
+};

 const retentionPeriodOptions = [
  { value: 2, label: '2 days' },
@@ -53,8 +59,7 @@ export function RichHistorySettingsTab(props: RichHistorySettingsProps) {
    toggleactiveDatasourceOnly,
    deleteRichHistory,
  } = props;
-  const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useStyles2(getStyles);
  const selectedOption = retentionPeriodOptions.find((v) => v.value === retentionPeriod);

  const onDelete = () => {
@@ -112,20 +117,8 @@ export function RichHistorySettingsTab(props: RichHistorySettingsProps) {
      )}
      {supportedFeatures().clearHistory && (
        <div>
-          <div
-            className={css`
-              font-weight: ${theme.typography.weight.bold};
-            `}
-          >
-            Clear query history
-          </div>
-          <div
-            className={css`
-              margin-bottom: ${theme.spacing.sm};
-            `}
-          >
-            Delete all of your query history, permanently.
-          </div>
+          <div className={styles.bold}>Clear query history</div>
+          <div className={styles.bottomMargin}>Delete all of your query history, permanently.</div>
          <Button variant="destructive" onClick={onDelete}>
            Clear query history
          </Button>
--- a/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 import React, { useEffect } from 'react';

-import { GrafanaTheme, SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { stylesFactory, useTheme, Select, MultiSelect, FilterInput, Button } from '@grafana/ui';
+import { useStyles2, Select, MultiSelect, FilterInput, Button } from '@grafana/ui';
 import {
  createDatasourcesList,
  SortOrder,
@@ -28,8 +28,8 @@ export interface Props {
  exploreId: ExploreId;
 }

-const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  const bgColor = theme.isLight ? theme.palette.gray5 : theme.palette.dark4;
+const getStyles = (theme: GrafanaTheme2) => {
+  const bgColor = theme.isLight ? theme.v1.palette.gray5 : theme.v1.palette.dark4;
  return {
    container: css`
      display: flex;
@@ -44,33 +44,33 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
    `,
    multiselect: css`
      width: 100%;
-      margin-bottom: ${theme.spacing.sm};
+      margin-bottom: ${theme.spacing(1)};
      .gf-form-select-box__multi-value {
        background-color: ${bgColor};
-        padding: ${theme.spacing.xxs} ${theme.spacing.xs} ${theme.spacing.xxs} ${theme.spacing.sm};
-        border-radius: ${theme.border.radius.sm};
+        padding: ${theme.spacing(0.25, 0.5, 0.25, 1)};
+        border-radius: ${theme.shape.borderRadius(1)};
      }
    `,
    filterInput: css`
-      margin-bottom: ${theme.spacing.sm};
+      margin-bottom: ${theme.spacing(1)};
    `,
    sort: css`
      width: 170px;
    `,
    footer: css`
      height: 60px;
-      margin-top: ${theme.spacing.lg};
+      margin-top: ${theme.spacing(3)};
      display: flex;
      justify-content: center;
-      font-weight: ${theme.typography.weight.light};
-      font-size: ${theme.typography.size.sm};
+      font-weight: ${theme.typography.fontWeightLight};
+      font-size: ${theme.typography.bodySmall.fontSize};
      a {
-        font-weight: ${theme.typography.weight.semibold};
-        margin-left: ${theme.spacing.xxs};
+        font-weight: ${theme.typography.fontWeightMedium};
+        margin-left: ${theme.spacing(0.25)};
      }
    `,
  };
-});
+};

 export function RichHistoryStarredTab(props: Props) {
  const {
@@ -86,8 +86,7 @@ export function RichHistoryStarredTab(props: Props) {
    exploreId,
  } = props;

-  const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useStyles2(getStyles);

  const listOfDatasources = createDatasourcesList();

--- a/public/app/features/expressions/components/Condition.tsx
+++ b/public/app/features/expressions/components/Condition.tsx
@@ -1,9 +1,9 @@
 import { css, cx } from '@emotion/css';
-import React, { FC, FormEvent } from 'react';
+import React, { FormEvent } from 'react';

-import { GrafanaTheme, SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
-import { Button, ButtonSelect, Icon, InlineFieldRow, Input, Select, useStyles } from '@grafana/ui';
+import { Button, ButtonSelect, Icon, InlineFieldRow, Input, Select, useStyles2 } from '@grafana/ui';

 import alertDef, { EvalFunction } from '../../alerting/state/alertDef';
 import { ClassicCondition, ReducerType } from '../types';
@@ -20,8 +20,8 @@ const reducerFunctions = alertDef.reducerTypes.map((rt) => ({ label: rt.text, va
 const evalOperators = alertDef.evalOperators.map((eo) => ({ label: eo.text, value: eo.value }));
 const evalFunctions = alertDef.evalFunctions.map((ef) => ({ label: ef.text, value: ef.value }));

-export const Condition: FC<Props> = ({ condition, index, onChange, onRemoveCondition, refIds }) => {
-  const styles = useStyles(getStyles);
+export const Condition = ({ condition, index, onChange, onRemoveCondition, refIds }: Props) => {
+  const styles = useStyles2(getStyles);

  const onEvalOperatorChange = (evalOperator: SelectableValue<string>) => {
    onChange({
@@ -137,10 +137,10 @@ export const Condition: FC<Props> = ({ condition, index, onChange, onRemoveCondi
  );
 };

-const getStyles = (theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme2) => {
  const buttonStyle = css`
-    color: ${theme.colors.textBlue};
-    font-size: ${theme.typography.size.sm};
+    color: ${theme.colors.primary.text};
+    font-size: ${theme.typography.bodySmall.fontSize};
  `;
  return {
    buttonSelectText: buttonStyle,
@@ -148,12 +148,12 @@ const getStyles = (theme: GrafanaTheme) => {
      css`
        display: flex;
        align-items: center;
-        border-radius: ${theme.border.radius.sm};
-        font-weight: ${theme.typography.weight.semibold};
-        border: 1px solid ${theme.colors.border1};
+        border-radius: ${theme.shape.borderRadius(1)};
+        font-weight: ${theme.typography.fontWeightMedium};
+        border: 1px solid ${theme.colors.border.weak};
        white-space: nowrap;
-        padding: 0 ${theme.spacing.sm};
-        background-color: ${theme.colors.bodyBg};
+        padding: 0 ${theme.spacing(1)};
+        background-color: ${theme.colors.background.canvas};
      `,
      buttonStyle
    ),
--- a/public/app/features/inspector/DetailText.tsx
+++ b/public/app/features/inspector/DetailText.tsx
@@ -1,17 +1,17 @@
 import { css } from '@emotion/css';
 import React from 'react';

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

-const getStyles = (theme: GrafanaTheme) => css`
+const getStyles = (theme: GrafanaTheme2) => css`
  margin: 0;
-  margin-left: ${theme.spacing.md};
-  font-size: ${theme.typography.size.sm};
-  color: ${theme.colors.textWeak};
+  margin-left: ${theme.spacing(2)};
+  font-size: ${theme.typography.bodySmall.fontSize};
+  color: ${theme.colors.text.secondary};
 `;

 export const DetailText = ({ children }: React.PropsWithChildren<{}>) => {
-  const collapsedTextStyles = useStyles(getStyles);
+  const collapsedTextStyles = useStyles2(getStyles);
  return <p className={collapsedTextStyles}>{children}</p>;
 };
--- a/public/app/features/library-panels/components/DeleteLibraryPanelModal/DeleteLibraryPanelModal.tsx
+++ b/public/app/features/library-panels/components/DeleteLibraryPanelModal/DeleteLibraryPanelModal.tsx
@@ -1,7 +1,7 @@
 import React, { FC, useEffect, useMemo, useReducer } from 'react';

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

 import { getModalStyles } from '../../styles';
 import { LibraryElementDTO } from '../../types';
@@ -17,7 +17,7 @@ interface Props {
 }

 export const DeleteLibraryPanelModal: FC<Props> = ({ libraryPanel, onDismiss, onConfirm }) => {
-  const styles = useStyles(getModalStyles);
+  const styles = useStyles2(getModalStyles);
  const [{ dashboardTitles, loadingState }, dispatch] = useReducer(
    deleteLibraryPanelModalReducer,
    initialDeleteLibraryPanelModalState
@@ -54,13 +54,13 @@ export const DeleteLibraryPanelModal: FC<Props> = ({ libraryPanel, onDismiss, on
 const LoadingIndicator = () => <span>Loading library panel...</span>;

 const Confirm = () => {
-  const styles = useStyles(getModalStyles);
+  const styles = useStyles2(getModalStyles);

  return <div className={styles.modalText}>Do you want to delete this panel?</div>;
 };

 const HasConnectedDashboards: FC<{ dashboardTitles: string[] }> = ({ dashboardTitles }) => {
-  const styles = useStyles(getModalStyles);
+  const styles = useStyles2(getModalStyles);
  const suffix = dashboardTitles.length === 1 ? 'dashboard.' : 'dashboards.';
  const message = `${dashboardTitles.length} ${suffix}`;
  if (dashboardTitles.length === 0) {
--- a/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx
+++ b/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx
@@ -1,8 +1,8 @@
 import { css } from '@emotion/css';
 import React from 'react';

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

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

@@ -12,7 +12,7 @@ interface Props {
 }

 export const LibraryPanelInformation = ({ panel, formatDate }: Props) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);

  const meta = panel.libraryPanel?.meta;
  if (!meta) {
@@ -42,22 +42,22 @@ export const LibraryPanelInformation = ({ panel, formatDate }: Props) => {
  );
 };

-const getStyles = (theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme2) => {
  return {
    info: css`
      line-height: 1;
    `,
    libraryPanelInfo: css`
-      color: ${theme.colors.textSemiWeak};
-      font-size: ${theme.typography.size.sm};
+      color: ${theme.colors.text.secondary};
+      font-size: ${theme.typography.bodySmall.fontSize};
    `,
    userAvatar: css`
      border-radius: 50%;
      box-sizing: content-box;
      width: 22px;
      height: 22px;
-      padding-left: ${theme.spacing.sm};
-      padding-right: ${theme.spacing.sm};
+      padding-left: ${theme.spacing(1)};
+      padding-right: ${theme.spacing(1)};
    `,
  };
 };
--- a/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx
+++ b/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx
@@ -2,8 +2,8 @@ import { css, cx } from '@emotion/css';
 import React, { useMemo, useReducer } from 'react';
 import { useDebounce } from 'react-use';

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

 import { LibraryElementDTO } from '../../types';
 import { LibraryPanelCard } from '../LibraryPanelCard/LibraryPanelCard';
@@ -34,7 +34,7 @@ export const LibraryPanelsView: React.FC<LibraryPanelViewProps> = ({
  currentPanelId: currentPanel,
  perPage: propsPerPage = 40,
 }) => {
-  const styles = useStyles(getPanelViewStyles);
+  const styles = useStyles2(getPanelViewStyles);
  const [{ libraryPanels, page, perPage, numberOfPages, loadingState, currentPanelId }, dispatch] = useReducer(
    libraryPanelsViewReducer,
    {
@@ -97,7 +97,7 @@ export const LibraryPanelsView: React.FC<LibraryPanelViewProps> = ({
  );
 };

-const getPanelViewStyles = (theme: GrafanaTheme) => {
+const getPanelViewStyles = (theme: GrafanaTheme2) => {
  return {
    container: css`
      display: flex;
@@ -107,7 +107,7 @@ const getPanelViewStyles = (theme: GrafanaTheme) => {
    libraryPanelList: css`
      max-width: 100%;
      display: grid;
-      grid-gap: ${theme.spacing.sm};
+      grid-gap: ${theme.spacing(1)};
    `,
    searchHeader: css`
      display: flex;
@@ -118,7 +118,7 @@ const getPanelViewStyles = (theme: GrafanaTheme) => {
    `,
    pagination: css`
      align-self: center;
-      margin-top: ${theme.spacing.sm};
+      margin-top: ${theme.spacing(1)};
    `,
    noPanelsFound: css`
      label: noPanelsFound;
--- a/public/app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal.tsx
+++ b/public/app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useState } from 'react';
 import { useAsync, useDebounce } from 'react-use';

-import { Button, Icon, Input, Modal, useStyles } from '@grafana/ui';
+import { Button, Icon, Input, Modal, useStyles2 } from '@grafana/ui';

 import { getConnectedDashboards } from '../../state/api';
 import { getModalStyles } from '../../styles';
@@ -44,7 +44,7 @@ export const SaveLibraryPanelModal = ({ panel, folderId, isUnsavedPrompt, onDism
  );

  const { saveLibraryPanel } = usePanelSave();
-  const styles = useStyles(getModalStyles);
+  const styles = useStyles2(getModalStyles);
  const discardAndClose = useCallback(() => {
    onDiscard();
  }, [onDiscard]);
--- a/public/app/features/library-panels/styles.ts
+++ b/public/app/features/library-panels/styles.ts
@@ -1,54 +1,54 @@
 import { css } from '@emotion/css';

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

-export function getModalStyles(theme: GrafanaTheme) {
+export function getModalStyles(theme: GrafanaTheme2) {
  return {
    myTable: css`
      max-height: 204px;
      overflow-y: auto;
      margin-top: 11px;
      margin-bottom: 28px;
-      border-radius: ${theme.border.radius.sm};
-      border: 1px solid ${theme.colors.bg3};
-      background: ${theme.colors.bg1};
-      color: ${theme.colors.textSemiWeak};
-      font-size: ${theme.typography.size.md};
+      border-radius: ${theme.shape.borderRadius(1)};
+      border: 1px solid ${theme.colors.action.hover};
+      background: ${theme.colors.background.primary};
+      color: ${theme.colors.text.secondary};
+      font-size: ${theme.typography.h6.fontSize};
      width: 100%;

      thead {
        color: #538ade;
-        font-size: ${theme.typography.size.sm};
+        font-size: ${theme.typography.bodySmall.fontSize};
      }

      th,
      td {
        padding: 6px 13px;
-        height: ${theme.spacing.xl};
+        height: ${theme.spacing(4)};
      }

      tbody > tr:nth-child(odd) {
-        background: ${theme.colors.bg2};
+        background: ${theme.colors.background.secondary};
      }
    `,
    noteTextbox: css`
-      margin-bottom: ${theme.spacing.xl};
+      margin-bottom: ${theme.spacing(4)};
    `,
    textInfo: css`
-      color: ${theme.colors.textSemiWeak};
+      color: ${theme.colors.text.secondary};
      font-size: ${theme.typography.size.sm};
    `,
    dashboardSearch: css`
-      margin-top: ${theme.spacing.md};
+      margin-top: ${theme.spacing(2)};
    `,
    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)};
    `,
  };
 }
--- a/public/app/features/live/dashboard/DashboardChangedModal.tsx
+++ b/public/app/features/live/dashboard/DashboardChangedModal.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import React, { PureComponent } from 'react';

-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { Modal, stylesFactory } from '@grafana/ui';

@@ -59,7 +59,7 @@ export class DashboardChangedModal extends PureComponent<Props, State> {
  render() {
    const { event } = this.props;
    const { dismiss } = this.state;
-    const styles = getStyles(config.theme);
+    const styles = getStyles(config.theme2);

    const isDelete = event?.action === DashboardEventAction.Deleted;

@@ -98,7 +98,7 @@ export class DashboardChangedModal extends PureComponent<Props, State> {
  }
 }

-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2) => {
  return {
    modal: css`
      width: 500px;
@@ -106,13 +106,13 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
    radioItem: css`
      margin: 0;
      font-size: ${theme.typography.size.sm};
-      color: ${theme.colors.textWeak};
+      color: ${theme.colors.text.secondary};
      padding: 10px;
      cursor: pointer;
      width: 100%;

      &:hover {
-        background: ${theme.colors.bgBlue1};
+        background: ${theme.colors.primary.main};
        color: ${theme.colors.text};
      }
    `,
--- a/public/app/features/live/pages/CloudAdminPage.tsx
+++ b/public/app/features/live/pages/CloudAdminPage.tsx
@@ -1,9 +1,7 @@
 import { css } from '@emotion/css';
 import React, { useEffect, useState } from 'react';

-import { GrafanaTheme } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
-import { useStyles } from '@grafana/ui';
 import { Page } from 'app/core/components/Page/Page';
 import { useNavModel } from 'app/core/hooks/useNavModel';

@@ -13,7 +11,6 @@ export default function CloudAdminPage() {
  const navModel = useNavModel('live-cloud');
  const [cloud, setCloud] = useState<GrafanaCloudBackend[]>([]);
  const [error, setError] = useState<string>();
-  const styles = useStyles(getStyles);

  useEffect(() => {
    getBackendSrv()
@@ -47,10 +44,8 @@ export default function CloudAdminPage() {
  );
 }

-const getStyles = (theme: GrafanaTheme) => {
-  return {
-    row: css`
-      cursor: pointer;
-    `,
-  };
+const styles = {
+  row: css`
+    cursor: pointer;
+  `,
 };
--- a/public/app/features/live/pages/PipelineTable.tsx
+++ b/public/app/features/live/pages/PipelineTable.tsx
@@ -1,9 +1,8 @@
 import { css } from '@emotion/css';
 import React, { useEffect, useState } from 'react';

-import { GrafanaTheme } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
-import { Tag, useStyles, IconButton } from '@grafana/ui';
+import { Tag, IconButton } from '@grafana/ui';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';

 import { RuleModal } from './RuleModal';
@@ -27,7 +26,6 @@ export const PipelineTable = (props: Props) => {
  const [isOpen, setOpen] = useState(false);
  const [selectedRule, setSelectedRule] = useState<Rule>();
  const [clickColumn, setClickColumn] = useState<RuleType>('converter');
-  const styles = useStyles(getStyles);

  const onRowClick = (rule: Rule, event?: any) => {
    if (!rule) {
@@ -137,10 +135,8 @@ export const PipelineTable = (props: Props) => {
  );
 };

-const getStyles = (theme: GrafanaTheme) => {
-  return {
-    row: css`
-      cursor: pointer;
-    `,
-  };
+const styles = {
+  row: css`
+    cursor: pointer;
+  `,
 };
--- a/public/app/features/live/pages/RuleModal.tsx
+++ b/public/app/features/live/pages/RuleModal.tsx
@@ -1,9 +1,8 @@
 import { css } from '@emotion/css';
 import React, { useState, useMemo } from 'react';

-import { GrafanaTheme } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
-import { Modal, TabContent, TabsBar, Tab, Button, useStyles } from '@grafana/ui';
+import { Modal, TabContent, TabsBar, Tab, Button } from '@grafana/ui';

 import { RuleSettingsArray } from './RuleSettingsArray';
 import { RuleSettingsEditor } from './RuleSettingsEditor';
@@ -39,7 +38,6 @@ export const RuleModal = (props: Props) => {
  const [hasChange, setChange] = useState<boolean>(false);
  const [ruleSetting, setRuleSetting] = useState<any>(activeTab?.type ? rule?.settings?.[activeTab.type] : undefined);
  const [entitiesInfo, setEntitiesInfo] = useState<PipeLineEntitiesInfo>();
-  const styles = useStyles(getStyles);

  const onRuleSettingChange = (value: RuleSetting | RuleSetting[]) => {
    setChange(true);
@@ -123,10 +121,8 @@ export const RuleModal = (props: Props) => {
  );
 };

-const getStyles = (theme: GrafanaTheme) => {
-  return {
-    save: css`
-      margin-top: 5px;
-    `,
-  };
+const styles = {
+  save: css`
+    margin-top: 5px;
+  `,
 };
--- a/public/app/features/live/pages/RuleTest.tsx
+++ b/public/app/features/live/pages/RuleTest.tsx
@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 import React, { useState } from 'react';

-import { dataFrameFromJSON, getDisplayProcessor, GrafanaTheme } from '@grafana/data';
+import { dataFrameFromJSON, getDisplayProcessor } from '@grafana/data';
 import { getBackendSrv, config } from '@grafana/runtime';
-import { Button, CodeEditor, Table, useStyles, Field } from '@grafana/ui';
+import { Button, CodeEditor, Table, Field } from '@grafana/ui';

 import { ChannelFrame, Rule } from './types';

@@ -14,7 +14,6 @@ interface Props {
 export const RuleTest = (props: Props) => {
  const [response, setResponse] = useState<ChannelFrame[]>();
  const [data, setData] = useState<string>();
-  const styles = useStyles(getStyles);

  const onBlur = (text: string) => {
    setData(text);
@@ -72,10 +71,8 @@ export const RuleTest = (props: Props) => {
  );
 };

-const getStyles = (theme: GrafanaTheme) => {
-  return {
-    margin: css`
-      margin-bottom: 15px;
-    `,
-  };
+const styles = {
+  margin: css`
+    margin-bottom: 15px;
+  `,
 };
--- a/public/app/features/plugins/components/PluginsErrorsInfo.tsx
+++ b/public/app/features/plugins/components/PluginsErrorsInfo.tsx
@@ -1,16 +1,16 @@
 import { css } from '@emotion/css';
 import React from 'react';

-import { PluginErrorCode, PluginSignatureStatus } from '@grafana/data';
+import { GrafanaTheme2, PluginErrorCode, PluginSignatureStatus } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { HorizontalGroup, InfoBox, List, PluginSignatureBadge, useTheme } from '@grafana/ui';
+import { HorizontalGroup, InfoBox, List, PluginSignatureBadge, useStyles2 } from '@grafana/ui';

 import { useGetErrors, useFetchStatus } from '../admin/state/hooks';

-export function PluginsErrorsInfo(): React.ReactElement | null {
+export function PluginsErrorsInfo() {
  const errors = useGetErrors();
  const { isLoading } = useFetchStatus();
-  const theme = useTheme();
+  const styles = useStyles2(getStyles);

  if (isLoading || errors.length === 0) {
    return null;
@@ -31,22 +31,14 @@ export function PluginsErrorsInfo(): React.ReactElement | null {
        The following plugins are disabled and not shown in the list below:
        <List
          items={errors}
-          className={css`
-            list-style-type: circle;
-          `}
+          className={styles.list}
          renderItem={(error) => (
-            <div
-              className={css`
-                margin-top: ${theme.spacing.sm};
-              `}
-            >
+            <div className={styles.wrapper}>
              <HorizontalGroup spacing="sm" justify="flex-start" align="center">
                <strong>{error.pluginId}</strong>
                <PluginSignatureBadge
                  status={mapPluginErrorCodeToSignatureStatus(error.errorCode)}
-                  className={css`
-                    margin-top: 0;
-                  `}
+                  className={styles.badge}
                />
              </HorizontalGroup>
            </div>
@@ -69,3 +61,17 @@ function mapPluginErrorCodeToSignatureStatus(code: PluginErrorCode) {
      return PluginSignatureStatus.missing;
  }
 }
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    list: css({
+      listStyleType: 'circle',
+    }),
+    wrapper: css({
+      marginTop: theme.spacing(1),
+    }),
+    badge: css({
+      marginTop: 0,
+    }),
+  };
+}
--- a/public/app/features/query/components/QueryEditorRowHeader.tsx
+++ b/public/app/features/query/components/QueryEditorRowHeader.tsx
@@ -1,10 +1,10 @@
 import { css, cx } from '@emotion/css';
 import React, { ReactNode, useState } from 'react';

-import { DataQuery, DataSourceInstanceSettings, GrafanaTheme } from '@grafana/data';
+import { DataQuery, DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { DataSourcePicker } from '@grafana/runtime';
-import { Icon, Input, FieldValidationMessage, useStyles } from '@grafana/ui';
+import { Icon, Input, FieldValidationMessage, useStyles2 } from '@grafana/ui';

 export interface Props<TQuery extends DataQuery = DataQuery> {
  query: TQuery;
@@ -22,7 +22,7 @@ export interface Props<TQuery extends DataQuery = DataQuery> {
 export const QueryEditorRowHeader = <TQuery extends DataQuery>(props: Props<TQuery>) => {
  const { query, queries, onClick, onChange, collapsedText, renderExtras, disabled } = props;

-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
  const [isEditing, setIsEditing] = useState<boolean>(false);
  const [validationError, setValidationError] = useState<string | null>(null);

@@ -146,31 +146,31 @@ const renderDataSource = <TQuery extends DataQuery>(
  );
 };

-const getStyles = (theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme2) => {
  return {
    wrapper: css`
      label: Wrapper;
      display: flex;
      align-items: center;
-      margin-left: ${theme.spacing.xs};
+      margin-left: ${theme.spacing(0.5)};
    `,
    queryNameWrapper: css`
      display: flex;
      cursor: pointer;
      border: 1px solid transparent;
-      border-radius: ${theme.border.radius.md};
+      border-radius: ${theme.shape.borderRadius(2)};
      align-items: center;
-      padding: 0 0 0 ${theme.spacing.xs};
+      padding: 0 0 0 ${theme.spacing(0.5)};
      margin: 0;
      background: transparent;

      &:hover {
-        background: ${theme.colors.bg3};
-        border: 1px dashed ${theme.colors.border3};
+        background: ${theme.colors.action.hover};
+        border: 1px dashed ${theme.colors.border.strong};
      }

      &:focus {
-        border: 2px solid ${theme.colors.formInputBorderActive};
+        border: 2px solid ${theme.colors.primary.border};
      }

      &:hover,
@@ -181,15 +181,15 @@ const getStyles = (theme: GrafanaTheme) => {
      }
    `,
    queryName: css`
-      font-weight: ${theme.typography.weight.semibold};
-      color: ${theme.colors.textBlue};
+      font-weight: ${theme.typography.fontWeightMedium};
+      color: ${theme.colors.primary.text};
      cursor: pointer;
      overflow: hidden;
-      margin-left: ${theme.spacing.xs};
+      margin-left: ${theme.spacing(0.5)};
    `,
    queryEditIcon: cx(
      css`
-        margin-left: ${theme.spacing.md};
+        margin-left: ${theme.spacing(2)};
        visibility: hidden;
      `,
      'query-name-edit-icon'
@@ -199,10 +199,10 @@ const getStyles = (theme: GrafanaTheme) => {
      margin: -4px 0;
    `,
    collapsedText: css`
-      font-weight: ${theme.typography.weight.regular};
-      font-size: ${theme.typography.size.sm};
-      color: ${theme.colors.textWeak};
-      padding-left: ${theme.spacing.sm};
+      font-weight: ${theme.typography.fontWeightRegular};
+      font-size: ${theme.typography.bodySmall.fontSize};
+      color: ${theme.colors.text.secondary};
+      padding-left: ${theme.spacing(1)};
      align-items: center;
      overflow: hidden;
      font-style: italic;
@@ -210,9 +210,9 @@ const getStyles = (theme: GrafanaTheme) => {
      text-overflow: ellipsis;
    `,
    contextInfo: css`
-      font-size: ${theme.typography.size.sm};
+      font-size: ${theme.typography.bodySmall.fontSize};
      font-style: italic;
-      color: ${theme.colors.textWeak};
+      color: ${theme.colors.text.secondary};
      padding-left: 10px;
    `,
    itemWrapper: css`
--- a/public/app/features/search/page/components/ConfirmDeleteModal.tsx
+++ b/public/app/features/search/page/components/ConfirmDeleteModal.tsx
@@ -1,8 +1,8 @@
 import { css } from '@emotion/css';
 import React, { FC } from 'react';

-import { GrafanaTheme } from '@grafana/data';
-import { ConfirmModal, stylesFactory, useTheme } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { ConfirmModal, useStyles2 } from '@grafana/ui';
 import { deleteFoldersAndDashboards } from 'app/features/manage-dashboards/state/actions';

 import { OnMoveOrDeleleSelectedItems } from '../../types';
@@ -15,8 +15,7 @@ interface Props {
 }

 export const ConfirmDeleteModal: FC<Props> = ({ results, onDeleteItems, isOpen, onDismiss }) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useStyles2(getStyles);

  const dashboards = Array.from(results.get('dashboard') ?? []);
  const folders = Array.from(results.get('folder') ?? []);
@@ -61,11 +60,9 @@ export const ConfirmDeleteModal: FC<Props> = ({ results, onDeleteItems, isOpen,
  ) : null;
 };

-const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  return {
-    subtitle: css`
-      font-size: ${theme.typography.size.base};
-      padding-top: ${theme.spacing.md};
-    `,
-  };
+const getStyles = (theme: GrafanaTheme2) => ({
+  subtitle: css`
+    font-size: ${theme.typography.fontSize}px;
+    padding-top: ${theme.spacing(2)};
+  `,
 });
--- a/public/app/features/search/page/components/FolderSection.tsx
+++ b/public/app/features/search/page/components/FolderSection.tsx
@@ -1,10 +1,10 @@
 import { css, cx } from '@emotion/css';
-import React, { FC } from 'react';
+import React, { useCallback } from 'react';
 import { useAsync, useLocalStorage } from 'react-use';

-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Card, Checkbox, CollapsableSection, Icon, IconName, Spinner, stylesFactory, useTheme } from '@grafana/ui';
+import { Card, Checkbox, CollapsableSection, Icon, IconName, Spinner, useStyles2 } from '@grafana/ui';
 import { getSectionStorageKey } from 'app/features/search/utils';
 import { useUniqueId } from 'app/plugins/datasource/influxdb/components/useUniqueId';

@@ -33,7 +33,7 @@ interface SectionHeaderProps {
  tags?: string[];
 }

-export const FolderSection: FC<SectionHeaderProps> = ({
+export const FolderSection = ({
  section,
  selectionToggle,
  onClickItem,
@@ -41,10 +41,14 @@ export const FolderSection: FC<SectionHeaderProps> = ({
  selection,
  renderStandaloneBody,
  tags,
-}) => {
+}: SectionHeaderProps) => {
  const editable = selectionToggle != null;
-  const theme = useTheme();
-  const styles = getSectionHeaderStyles(theme, section.selected, editable);
+  const styles = useStyles2(
+    useCallback(
+      (theme: GrafanaTheme2) => getSectionHeaderStyles(theme, section.selected, editable),
+      [section.selected, editable]
+    )
+  );
  const [sectionExpanded, setSectionExpanded] = useLocalStorage(getSectionStorageKey(section.title), false);

  const results = useAsync(async () => {
@@ -194,8 +198,8 @@ export const FolderSection: FC<SectionHeaderProps> = ({
  );
 };

-const getSectionHeaderStyles = stylesFactory((theme: GrafanaTheme, selected = false, editable: boolean) => {
-  const { sm } = theme.spacing;
+const getSectionHeaderStyles = (theme: GrafanaTheme2, selected = false, editable: boolean) => {
+  const sm = theme.spacing(1);
  return {
    wrapper: cx(
      css`
@@ -203,7 +207,7 @@ const getSectionHeaderStyles = stylesFactory((theme: GrafanaTheme, selected = fa
        font-size: ${theme.typography.size.base};
        padding: 12px;
        border-bottom: none;
-        color: ${theme.colors.textWeak};
+        color: ${theme.colors.text.secondary};
        z-index: 1;

        &:hover,
@@ -240,7 +244,7 @@ const getSectionHeaderStyles = stylesFactory((theme: GrafanaTheme, selected = fa
    `,
    link: css`
      padding: 2px 10px 0;
-      color: ${theme.colors.textWeak};
+      color: ${theme.colors.text.secondary};
      opacity: 0;
      transition: opacity 150ms ease-in-out;
    `,
@@ -257,4 +261,4 @@ const getSectionHeaderStyles = stylesFactory((theme: GrafanaTheme, selected = fa
      padding-bottom: 1rem;
    `,
  };
-});
+};
--- a/public/app/features/search/page/components/MoveToFolderModal.tsx
+++ b/public/app/features/search/page/components/MoveToFolderModal.tsx
@@ -1,8 +1,8 @@
 import { css } from '@emotion/css';
 import React, { FC, useState } from 'react';

-import { GrafanaTheme } from '@grafana/data';
-import { Button, HorizontalGroup, Modal, stylesFactory, useTheme } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, HorizontalGroup, Modal, useStyles2 } from '@grafana/ui';
 import { FolderPicker } from 'app/core/components/Select/FolderPicker';
 import { useAppNotification } from 'app/core/copy/appNotification';
 import { moveDashboards } from 'app/features/manage-dashboards/state/actions';
@@ -19,8 +19,7 @@ interface Props {

 export const MoveToFolderModal: FC<Props> = ({ results, onMoveItems, isOpen, onDismiss }) => {
  const [folder, setFolder] = useState<FolderInfo | null>(null);
-  const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useStyles2(getStyles);
  const notifyApp = useAppNotification();
  const selectedDashboards = Array.from(results.get('dashboard') ?? []);
  const [moving, setMoving] = useState(false);
@@ -80,13 +79,13 @@ export const MoveToFolderModal: FC<Props> = ({ results, onMoveItems, isOpen, onD
  ) : null;
 };

-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme2) => {
  return {
    modal: css`
      width: 500px;
    `,
    content: css`
-      margin-bottom: ${theme.spacing.lg};
+      margin-bottom: ${theme.spacing(3)};
    `,
  };
-});
+};
--- a/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
@@ -4,14 +4,14 @@ import { DragDropContext, Draggable, Droppable, DropResult } from 'react-beautif

 import {
  DataTransformerID,
-  GrafanaTheme,
+  GrafanaTheme2,
  standardTransformers,
  TransformerRegistryItem,
  TransformerUIProps,
 } from '@grafana/data';
 import { createOrderFieldsComparer } from '@grafana/data/src/transformations/transformers/order';
 import { OrganizeFieldsTransformerOptions } from '@grafana/data/src/transformations/transformers/organize';
-import { stylesFactory, useTheme, Input, IconButton, Icon, FieldValidationMessage } from '@grafana/ui';
+import { Input, IconButton, Icon, FieldValidationMessage, useStyles2 } from '@grafana/ui';

 import { useAllFieldNamesFromDataFrames } from '../utils';

@@ -117,16 +117,15 @@ interface DraggableFieldProps {
  onRenameField: (from: string, to: string) => void;
 }

-const DraggableFieldName: React.FC<DraggableFieldProps> = ({
+const DraggableFieldName = ({
  fieldName,
  renamedFieldName,
  index,
  visible,
  onToggleVisibility,
  onRenameField,
-}) => {
-  const theme = useTheme();
-  const styles = getFieldNameStyles(theme);
+}: DraggableFieldProps) => {
+  const styles = useStyles2(getFieldNameStyles);

  return (
    <Draggable draggableId={fieldName} index={index}>
@@ -166,25 +165,25 @@ const DraggableFieldName: React.FC<DraggableFieldProps> = ({

 DraggableFieldName.displayName = 'DraggableFieldName';

-const getFieldNameStyles = stylesFactory((theme: GrafanaTheme) => ({
+const getFieldNameStyles = (theme: GrafanaTheme2) => ({
  toggle: css`
    margin: 0 8px;
-    color: ${theme.colors.textWeak};
+    color: ${theme.colors.text.secondary};
  `,
  draggable: css`
    opacity: 0.4;
    &:hover {
-      color: ${theme.colors.textStrong};
+      color: ${theme.colors.text.maxContrast};
    }
  `,
  name: css`
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
-    font-size: ${theme.typography.size.sm};
-    font-weight: ${theme.typography.weight.semibold};
+    font-size: ${theme.typography.bodySmall.fontSize};
+    font-weight: ${theme.typography.fontWeightMedium};
  `,
-}));
+});

 const reorderToIndex = (fieldNames: string[], startIndex: number, endIndex: number) => {
  const result = Array.from(fieldNames);
--- a/public/app/features/variables/editor/VariableSelectField.tsx
+++ b/public/app/features/variables/editor/VariableSelectField.tsx
@@ -1,8 +1,8 @@
 import { css } from '@emotion/css';
 import React, { PropsWithChildren, ReactElement } from 'react';

-import { GrafanaTheme, SelectableValue } from '@grafana/data';
-import { Field, Select, useStyles } from '@grafana/ui';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { Field, Select, useStyles2 } from '@grafana/ui';
 import { useUniqueId } from 'app/plugins/datasource/influxdb/components/useUniqueId';

 interface VariableSelectFieldProps<T> {
@@ -24,7 +24,7 @@ export function VariableSelectField({
  testId,
  width,
 }: PropsWithChildren<VariableSelectFieldProps<any>>): ReactElement {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
  const uniqueId = useUniqueId();
  const inputId = `variable-select-input-${name}-${uniqueId}`;

@@ -44,10 +44,10 @@ export function VariableSelectField({
  );
 }

-function getStyles(theme: GrafanaTheme) {
+function getStyles(theme: GrafanaTheme2) {
  return {
    selectContainer: css`
-      margin-right: ${theme.spacing.xs};
+      margin-right: ${theme.spacing(0.5)};
    `,
  };
 }
--- a/public/app/features/variables/inspect/VariablesUnknownTable.tsx
+++ b/public/app/features/variables/inspect/VariablesUnknownTable.tsx
@@ -2,9 +2,9 @@ import { css } from '@emotion/css';
 import React, { ReactElement, useEffect, useState } from 'react';
 import { useAsync } from 'react-use';

-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
-import { CollapsableSection, HorizontalGroup, Icon, Spinner, Tooltip, useStyles, VerticalGroup } from '@grafana/ui';
+import { CollapsableSection, HorizontalGroup, Icon, Spinner, Tooltip, useStyles2, VerticalGroup } from '@grafana/ui';

 import { DashboardModel } from '../../dashboard/state';
 import { VariableModel } from '../types';
@@ -23,7 +23,7 @@ export function VariablesUnknownTable({ variables, dashboard }: VariablesUnknown
  const [open, setOpen] = useState(false);
  const [changed, setChanged] = useState(0);
  const [usages, setUsages] = useState<UsagesToNetwork[]>([]);
-  const style = useStyles(getStyles);
+  const style = useStyles2(getStyles);
  useEffect(() => setChanged((prevState) => prevState + 1), [variables, dashboard]);
  const { loading } = useAsync(async () => {
    if (open && changed > 0) {
@@ -74,7 +74,7 @@ export function VariablesUnknownTable({ variables, dashboard }: VariablesUnknown
 }

 function CollapseLabel(): ReactElement {
-  const style = useStyles(getStyles);
+  const style = useStyles2(getStyles);
  return (
    <h5>
      Renamed or missing variables
@@ -90,7 +90,7 @@ function NoUnknowns(): ReactElement {
 }

 function UnknownTable({ usages }: { usages: UsagesToNetwork[] }): ReactElement {
-  const style = useStyles(getStyles);
+  const style = useStyles2(getStyles);
  return (
    <table className="filter-table filter-table--hover">
      <thead>
@@ -122,13 +122,13 @@ function UnknownTable({ usages }: { usages: UsagesToNetwork[] }): ReactElement {
  );
 }

-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
  container: css`
-    margin-top: ${theme.spacing.xl};
-    padding-top: ${theme.spacing.xl};
+    margin-top: ${theme.spacing(4)};
+    padding-top: ${theme.spacing(4)};
  `,
  infoIcon: css`
-    margin-left: ${theme.spacing.sm};
+    margin-left: ${theme.spacing(1)};
  `,
  defaultColumn: css`
    width: 1%;
@@ -136,7 +136,7 @@ const getStyles = (theme: GrafanaTheme) => ({
  firstColumn: css`
    width: 1%;
    vertical-align: top;
-    color: ${theme.colors.textStrong};
+    color: ${theme.colors.text.maxContrast};
  `,
  lastColumn: css`
    overflow: hidden;
--- a/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.test.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.test.tsx
@@ -2,7 +2,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';

-import { getTheme } from '@grafana/ui';
+import { createTheme } from '@grafana/data';

 import PromQlLanguageProvider from '../language_provider';

@@ -131,7 +131,7 @@ describe('PrometheusMetricsBrowser', () => {
    };

    const defaults: BrowserProps = {
-      theme: getTheme(),
+      theme: createTheme({ colors: { mode: 'dark' } }),
      onChange: () => {},
      autoSelect: 0,
      languageProvider: mockLanguageProvider as unknown as PromQlLanguageProvider,
--- a/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.tsx
+++ b/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.tsx
@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import React, { ChangeEvent } from 'react';
 import { FixedSizeList } from 'react-window';

-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import {
  Button,
  HorizontalGroup,
@@ -10,8 +10,8 @@ import {
  Label,
  LoadingPlaceholder,
  stylesFactory,
-  withTheme,
  BrowserLabel as PromLabel,
+  withTheme2,
 } from '@grafana/ui';

 import PromQlLanguageProvider from '../language_provider';
@@ -25,7 +25,7 @@ const LIST_ITEM_SIZE = 25;
 export interface BrowserProps {
  languageProvider: PromQlLanguageProvider;
  onChange: (selector: string) => void;
-  theme: GrafanaTheme;
+  theme: GrafanaTheme2;
  autoSelect?: number;
  hide?: () => void;
  lastUsedLabels: string[];
@@ -112,14 +112,14 @@ export function facetLabels(
  });
 }

-const getStyles = stylesFactory((theme: GrafanaTheme) => ({
+const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
  wrapper: css`
-    background-color: ${theme.colors.bg2};
-    padding: ${theme.spacing.sm};
+    background-color: ${theme.colors.background.secondary};
+    padding: ${theme.spacing(1)};
    width: 100%;
  `,
  list: css`
-    margin-top: ${theme.spacing.sm};
+    margin-top: ${theme.spacing(1)};
    display: flex;
    flex-wrap: wrap;
    max-height: 200px;
@@ -128,17 +128,17 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
  `,
  section: css`
    & + & {
-      margin: ${theme.spacing.md} 0;
+      margin: ${theme.spacing(2)} 0;
    }
    position: relative;
  `,
  selector: css`
-    font-family: ${theme.typography.fontFamily.monospace};
-    margin-bottom: ${theme.spacing.sm};
+    font-family: ${theme.typography.fontFamilyMonospace};
+    margin-bottom: ${theme.spacing(1)};
  `,
  status: css`
-    padding: ${theme.spacing.xs};
-    color: ${theme.colors.textSemiWeak};
+    padding: ${theme.spacing(0.5)};
+    color: ${theme.colors.text.secondary};
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
@@ -154,30 +154,30 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
    opacity: 1;
  `,
  error: css`
-    color: ${theme.palette.brandDanger};
+    color: ${theme.colors.error.main};
  `,
  valueList: css`
-    margin-right: ${theme.spacing.sm};
+    margin-right: ${theme.spacing(1)};
    resize: horizontal;
  `,
  valueListWrapper: css`
-    border-left: 1px solid ${theme.colors.border2};
-    margin: ${theme.spacing.sm} 0;
-    padding: ${theme.spacing.sm} 0 ${theme.spacing.sm} ${theme.spacing.sm};
+    border-left: 1px solid ${theme.colors.border.medium};
+    margin: ${theme.spacing(1)} 0;
+    padding: ${theme.spacing(1)} 0 ${theme.spacing(1)} ${theme.spacing(1)};
  `,
  valueListArea: css`
    display: flex;
    flex-wrap: wrap;
-    margin-top: ${theme.spacing.sm};
+    margin-top: ${theme.spacing(1)};
  `,
  valueTitle: css`
-    margin-left: -${theme.spacing.xs};
-    margin-bottom: ${theme.spacing.sm};
+    margin-left: -${theme.spacing(0.5)};
+    margin-bottom: ${theme.spacing(1)};
  `,
  validationStatus: css`
-    padding: ${theme.spacing.xs};
-    margin-bottom: ${theme.spacing.sm};
-    color: ${theme.colors.textStrong};
+    padding: ${theme.spacing(0.5)};
+    margin-bottom: ${theme.spacing(1)};
+    color: ${theme.colors.text.maxContrast};
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
@@ -656,4 +656,4 @@ export class UnthemedPrometheusMetricsBrowser extends React.Component<BrowserPro
  }
 }

-export const PrometheusMetricsBrowser = withTheme(UnthemedPrometheusMetricsBrowser);
+export const PrometheusMetricsBrowser = withTheme2(UnthemedPrometheusMetricsBrowser);
--- a/public/app/plugins/datasource/tempo/configuration/QuerySettings.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/QuerySettings.tsx
@@ -2,14 +2,14 @@ import { css } from '@emotion/css';
 import React from 'react';

 import { DataSourcePluginOptionsEditorProps, updateDatasourcePluginJsonDataOption } from '@grafana/data';
-import { InlineField, InlineFieldRow, InlineSwitch, Input, useStyles } from '@grafana/ui';
+import { InlineField, InlineFieldRow, InlineSwitch, Input, useStyles2 } from '@grafana/ui';

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

 interface Props extends DataSourcePluginOptionsEditorProps<TempoJsonData> {}

 export function QuerySettings({ options, onOptionsChange }: Props) {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);

  return (
    <div className={styles.container}>
--- a/public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraphTooltip.tsx
+++ b/public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraphTooltip.tsx
@@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React, { LegacyRef } from 'react';

 import { createTheme, Field, getDisplayProcessor } from '@grafana/data';
-import { useStyles, Tooltip } from '@grafana/ui';
+import { useStyles2, Tooltip } from '@grafana/ui';

 import { TooltipData, SampleUnit } from '../types';

@@ -13,7 +13,7 @@ type Props = {
 };

 const FlameGraphTooltip = ({ tooltipRef, tooltipData, showTooltip }: Props) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);

  return (
    <div ref={tooltipRef} className={styles.tooltip}>
--- a/public/app/plugins/panel/geomap/GeomapPanel.tsx
+++ b/public/app/plugins/panel/geomap/GeomapPanel.tsx
@@ -11,9 +11,9 @@ import { fromLonLat } from 'ol/proj';
 import React, { Component, ReactNode } from 'react';
 import { Subscription } from 'rxjs';

-import { DataHoverEvent, GrafanaTheme, PanelData, PanelProps } from '@grafana/data';
+import { DataHoverEvent, PanelData, PanelProps } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { PanelContext, PanelContextRoot, stylesFactory } from '@grafana/ui';
+import { PanelContext, PanelContextRoot } from '@grafana/ui';
 import { PanelEditExitedEvent } from 'app/types/events';

 import { GeomapOverlay, OverlayProps } from './GeomapOverlay';
@@ -53,7 +53,6 @@ export class GeomapPanel extends Component<Props, State> {
  globalCSS = getGlobalStyles(config.theme2);

  mouseWheelZoom?: MouseWheelZoom;
-  style = getStyles(config.theme);
  hoverPayload: GeomapHoverPayload = { point: {}, pageX: -1, pageY: -1 };
  readonly hoverEvent = new DataHoverEvent(this.hoverPayload);

@@ -383,8 +382,8 @@ export class GeomapPanel extends Component<Props, State> {
    return (
      <>
        <Global styles={this.globalCSS} />
-        <div className={this.style.wrap} onMouseLeave={this.clearTooltip}>
-          <div className={this.style.map} ref={this.initMapRef}></div>
+        <div className={styles.wrap} onMouseLeave={this.clearTooltip}>
+          <div className={styles.map} ref={this.initMapRef}></div>
          <GeomapOverlay
            bottomLeft={legends}
            topRight1={topRight1}
@@ -398,7 +397,7 @@ export class GeomapPanel extends Component<Props, State> {
  }
 }

-const getStyles = stylesFactory((theme: GrafanaTheme) => ({
+const styles = {
  wrap: css`
    position: relative;
    width: 100%;
@@ -410,4 +409,4 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => ({
    width: 100%;
    height: 100%;
  `,
-}));
+};
--- a/public/app/plugins/panel/xychart/ManualEditor.tsx
+++ b/public/app/plugins/panel/xychart/ManualEditor.tsx
@@ -1,8 +1,8 @@
 import { css, cx } from '@emotion/css';
 import React, { useState, useEffect } from 'react';

-import { GrafanaTheme, StandardEditorProps } from '@grafana/data';
-import { Button, Field, IconButton, useStyles } from '@grafana/ui';
+import { GrafanaTheme2, StandardEditorProps } from '@grafana/data';
+import { Button, Field, IconButton, useStyles2 } from '@grafana/ui';
 import { FieldNamePicker } from '@grafana/ui/src/components/MatchersUI/FieldNamePicker';
 import { LayerName } from 'app/core/components/Layers/LayerName';
 import { ColorDimensionEditor, ScaleDimensionEditor } from 'app/features/dimensions/editors';
@@ -14,8 +14,8 @@ export const ManualEditor = ({
  onChange,
  context,
 }: StandardEditorProps<ScatterSeriesConfig[], any, XYChartOptions>) => {
-  const [selected, setSelected] = useState<number>(0);
-  const style = useStyles(getStyles);
+  const [selected, setSelected] = useState(0);
+  const style = useStyles2(getStyles);

  const onFieldChange = (val: any | undefined, index: number, field: string) => {
    onChange(
@@ -125,34 +125,34 @@ export const ManualEditor = ({
  );
 };

-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
  marginBot: css`
    margin-bottom: 20px;
  `,
  row: css`
-    padding: ${theme.spacing.xs} ${theme.spacing.sm};
-    border-radius: ${theme.border.radius.sm};
-    background: ${theme.colors.bg2};
-    min-height: ${theme.spacing.formInputHeight}px;
+    padding: ${theme.spacing(0.5, 1)};
+    border-radius: ${theme.shape.borderRadius(1)};
+    background: ${theme.colors.background.secondary};
+    min-height: ${theme.spacing(4)};
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3px;
    cursor: pointer;

-    border: 1px solid ${theme.colors.formInputBorder};
+    border: 1px solid ${theme.components.input.borderColor};
    &:hover {
-      border: 1px solid ${theme.colors.formInputBorderHover};
+      border: 1px solid ${theme.components.input.borderHover};
    }
  `,
  sel: css`
-    border: 1px solid ${theme.colors.formInputBorderActive};
+    border: 1px solid ${theme.colors.primary.border};
    &:hover {
-      border: 1px solid ${theme.colors.formInputBorderActive};
+      border: 1px solid ${theme.colors.primary.border};
    }
  `,
  actionIcon: css`
-    color: ${theme.colors.textWeak};
+    color: ${theme.colors.text.secondary};
    &:hover {
      color: ${theme.colors.text};
    }