diff --git a/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx b/packages/grafana-ui/src/components/VizLegend/VizLegendStatsList.tsx
index c4f32f678f3..166d894849c 100644
--- 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;
diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx
index cbcced91f78..e8f9d7a734a 100644
--- 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}>
diff --git a/packages/grafana-ui/src/themes/ThemeContext.test.tsx b/packages/grafana-ui/src/themes/ThemeContext.test.tsx
index 098dee97c9e..e07dc43d40f 100644
--- 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};
           `,
         };
       });
diff --git a/packages/grafana-ui/src/themes/ThemeContext.tsx b/packages/grafana-ui/src/themes/ThemeContext.tsx
index be6d0f4785b..03a6a1483a4 100644
--- 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();
diff --git a/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx b/packages/grafana-ui/src/utils/storybook/DashboardStoryCanvas.tsx
index 435d1158c3d..d887740ebe2 100644
--- 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>;
diff --git a/packages/grafana-ui/src/utils/storybook/StoryExample.tsx b/packages/grafana-ui/src/utils/storybook/StoryExample.tsx
index 192d4130357..8332c87509c 100644
--- 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;
   `;
 
diff --git a/public/app/features/connections/tabs/ConnectData/Search/Search.tsx b/public/app/features/connections/tabs/ConnectData/Search/Search.tsx
index 3ee3613b55c..2c9726d8dd7 100644
--- 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}>
diff --git a/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx b/public/app/features/dashboard/components/VersionHistory/DiffViewer.tsx
index 52490961500..fb6abe3df59 100644
--- 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;
diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx
index aa8d593aa32..23e82c1cc88 100644
--- 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,
+    }),
+  };
+}
diff --git a/public/app/features/datasources/components/DataSourcesList.tsx b/public/app/features/datasources/components/DataSourcesList.tsx
index 608e93caec0..06343ce5d69 100644
--- 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) {
diff --git a/public/app/features/explore/RichHistory/RichHistory.test.tsx b/public/app/features/explore/RichHistory/RichHistory.test.tsx
index 770a6dd6ee0..ea6b16fba9f 100644
--- 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',
diff --git a/public/app/features/explore/RichHistory/RichHistory.tsx b/public/app/features/explore/RichHistory/RichHistory.tsx
index 462104a4b3b..4af66b8b33b 100644
--- 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);
diff --git a/public/app/features/explore/RichHistory/RichHistoryCard.tsx b/public/app/features/explore/RichHistory/RichHistoryCard.tsx
index 65b88892426..d67432a6226 100644
--- 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;
diff --git a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
index 1f7a7d50409..6b0fd24b10e 100644
--- 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();
 
diff --git a/public/app/features/explore/RichHistory/RichHistorySettingsTab.tsx b/public/app/features/explore/RichHistory/RichHistorySettingsTab.tsx
index 2a6103f3fd3..a3df91c7d47 100644
--- 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>
diff --git a/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx b/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
index 362d8ca38db..8b3a2d20576 100644
--- 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();
 
diff --git a/public/app/features/expressions/components/Condition.tsx b/public/app/features/expressions/components/Condition.tsx
index abcb8c90d68..7ca15d80584 100644
--- 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
     ),
diff --git a/public/app/features/inspector/DetailText.tsx b/public/app/features/inspector/DetailText.tsx
index 6e2868daabf..11972f8417f 100644
--- 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>;
 };
diff --git a/public/app/features/library-panels/components/DeleteLibraryPanelModal/DeleteLibraryPanelModal.tsx b/public/app/features/library-panels/components/DeleteLibraryPanelModal/DeleteLibraryPanelModal.tsx
index 92dbf8fb666..c46cae3fdf2 100644
--- 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) {
diff --git a/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx b/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx
index cc06e6bbf43..3560ce189c3 100644
--- 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)};
     `,
   };
 };
diff --git a/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx b/public/app/features/library-panels/components/LibraryPanelsView/LibraryPanelsView.tsx
index 39431a8c3d3..56cde2c3787 100644
--- 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;
diff --git a/public/app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal.tsx b/public/app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal.tsx
index 34ef35fd7c1..442cce84952 100644
--- 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]);
diff --git a/public/app/features/library-panels/styles.ts b/public/app/features/library-panels/styles.ts
index b76b2e7b43e..bfe0c543695 100644
--- 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)};
     `,
   };
 }
diff --git a/public/app/features/live/dashboard/DashboardChangedModal.tsx b/public/app/features/live/dashboard/DashboardChangedModal.tsx
index 8ac9c6deb7b..24b534208c4 100644
--- 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};
       }
     `,
diff --git a/public/app/features/live/pages/CloudAdminPage.tsx b/public/app/features/live/pages/CloudAdminPage.tsx
index 449c4c06c33..9a6fd74ca26 100644
--- 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;
+  `,
 };
diff --git a/public/app/features/live/pages/PipelineTable.tsx b/public/app/features/live/pages/PipelineTable.tsx
index 308b486ac72..791aa62f9d2 100644
--- 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;
+  `,
 };
diff --git a/public/app/features/live/pages/RuleModal.tsx b/public/app/features/live/pages/RuleModal.tsx
index 2f37514b388..8d1465b07ec 100644
--- 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;
+  `,
 };
diff --git a/public/app/features/live/pages/RuleTest.tsx b/public/app/features/live/pages/RuleTest.tsx
index d4e7be155b9..d8fc6516e9e 100644
--- 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;
+  `,
 };
diff --git a/public/app/features/plugins/components/PluginsErrorsInfo.tsx b/public/app/features/plugins/components/PluginsErrorsInfo.tsx
index 9d085ee0fcf..b550cfcea67 100644
--- 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,
+    }),
+  };
+}
diff --git a/public/app/features/query/components/QueryEditorRowHeader.tsx b/public/app/features/query/components/QueryEditorRowHeader.tsx
index 620a7781efd..4122e04eebc 100644
--- 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`
diff --git a/public/app/features/search/page/components/ConfirmDeleteModal.tsx b/public/app/features/search/page/components/ConfirmDeleteModal.tsx
index 7850be6819b..b6a548dadf4 100644
--- 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)};
+  `,
 });
diff --git a/public/app/features/search/page/components/FolderSection.tsx b/public/app/features/search/page/components/FolderSection.tsx
index 7ec926c4709..1ca6f74a29a 100644
--- 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;
     `,
   };
-});
+};
diff --git a/public/app/features/search/page/components/MoveToFolderModal.tsx b/public/app/features/search/page/components/MoveToFolderModal.tsx
index 3675097ec7e..ef53bb2977c 100644
--- 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)};
     `,
   };
-});
+};
diff --git a/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx b/public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
index 3fc97f52fa1..72b6a5312b5 100644
--- 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);
diff --git a/public/app/features/variables/editor/VariableSelectField.tsx b/public/app/features/variables/editor/VariableSelectField.tsx
index 801ca3f74d8..ef7bb998369 100644
--- 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)};
     `,
   };
 }
diff --git a/public/app/features/variables/inspect/VariablesUnknownTable.tsx b/public/app/features/variables/inspect/VariablesUnknownTable.tsx
index d9ef1157f24..b1d0a95d562 100644
--- 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;
diff --git a/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.test.tsx b/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.test.tsx
index 42b51c096f0..97051f5b8e0 100644
--- 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,
diff --git a/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.tsx b/public/app/plugins/datasource/prometheus/components/PrometheusMetricsBrowser.tsx
index 1e3dc95ed7b..0b2f27a9bf7 100644
--- 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);
diff --git a/public/app/plugins/datasource/tempo/configuration/QuerySettings.tsx b/public/app/plugins/datasource/tempo/configuration/QuerySettings.tsx
index 31c42a46ada..e01f4befab9 100644
--- 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}>
diff --git a/public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraphTooltip.tsx b/public/app/plugins/panel/flamegraph/components/FlameGraph/FlameGraphTooltip.tsx
index b5ec6b5335e..af02ec7a7e9 100644
--- 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}>
diff --git a/public/app/plugins/panel/geomap/GeomapPanel.tsx b/public/app/plugins/panel/geomap/GeomapPanel.tsx
index daa8f89b577..99e63d498b2 100644
--- 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%;
   `,
-}));
+};
diff --git a/public/app/plugins/panel/xychart/ManualEditor.tsx b/public/app/plugins/panel/xychart/ManualEditor.tsx
index 22b00cfe7ff..e80a8f0849f 100644
--- 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};
     }