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

packages/grafana-ui/src/components/Select/ValueContainer.tsx

@@ -1,13 +1,13 @@
 import { cx } from '@emotion/css';
 import React, { Component, ReactNode } from 'react';
 
-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
 import { withTheme2 } from '../../themes/ThemeContext';
 
 import { getSelectStyles } from './getSelectStyles';
 
-class UnthemedValueContainer extends Component<any & { theme: GrafanaTheme }> {
+class UnthemedValueContainer extends Component<any & { theme: GrafanaTheme2 }> {
   render() {
     const { children } = this.props;
     const { selectProps } = this.props;

packages/grafana-ui/src/components/Typeahead/Typeahead.tsx

@@ -53,7 +53,7 @@ export class Typeahead extends PureComponent<Props, State> {
 
     const allItems = flattenGroupItems(this.props.groupedItems);
     const longestLabel = calculateLongestLabel(allItems);
-    const { listWidth, listHeight, itemHeight } = calculateListSizes(this.context.v1, allItems, longestLabel);
+    const { listWidth, listHeight, itemHeight } = calculateListSizes(this.context, allItems, longestLabel);
     this.setState({
       listWidth,
       listHeight,
@@ -87,7 +87,7 @@ export class Typeahead extends PureComponent<Props, State> {
     if (isEqual(prevProps.groupedItems, this.props.groupedItems) === false) {
       const allItems = flattenGroupItems(this.props.groupedItems);
       const longestLabel = calculateLongestLabel(allItems);
-      const { listWidth, listHeight, itemHeight } = calculateListSizes(this.context.v1, allItems, longestLabel);
+      const { listWidth, listHeight, itemHeight } = calculateListSizes(this.context, allItems, longestLabel);
       this.setState({ listWidth, listHeight, itemHeight, allItems, typeaheadIndex: null });
     }
   };

packages/grafana-ui/src/components/VizLegend/VizLegend.story.tsx

@@ -1,9 +1,9 @@
 import { Story, Meta } from '@storybook/react';
 import React, { FC, useEffect, useState } from 'react';
 
-import { DisplayValue, GrafanaTheme } from '@grafana/data';
+import { DisplayValue, GrafanaTheme2 } from '@grafana/data';
 import { LegendDisplayMode, LegendPlacement } from '@grafana/schema';
-import { useTheme, VizLegend } from '@grafana/ui';
+import { useTheme2, VizLegend } from '@grafana/ui';
 
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
@@ -43,7 +43,7 @@ interface LegendStoryDemoProps {
 }
 
 const LegendStoryDemo: FC<LegendStoryDemoProps> = ({ displayMode, seriesCount, name, placement, stats }) => {
-  const theme = useTheme();
+  const theme = useTheme2();
   const [items, setItems] = useState<VizLegendItem[]>(generateLegendItems(seriesCount, theme, stats));
 
   useEffect(() => {
@@ -149,7 +149,7 @@ export const WithValues: Story = ({ containerWidth, seriesCount }) => {
 
 function generateLegendItems(
   numberOfSeries: number,
-  theme: GrafanaTheme,
+  theme: GrafanaTheme2,
   statsToDisplay?: DisplayValue[]
 ): VizLegendItem[] {
   const alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');

packages/grafana-ui/src/utils/typeahead.ts

@@ -1,6 +1,6 @@
 import { default as calculateSize } from 'calculate-size';
 
-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 
 import { CompletionItemGroup, CompletionItem, CompletionItemKind } from '../types/completion';
 
@@ -23,10 +23,10 @@ export const calculateLongestLabel = (allItems: CompletionItem[]): string => {
   }, '');
 };
 
-export const calculateListSizes = (theme: GrafanaTheme, allItems: CompletionItem[], longestLabel: string) => {
+export const calculateListSizes = (theme: GrafanaTheme2, allItems: CompletionItem[], longestLabel: string) => {
   const size = calculateSize(longestLabel, {
-    font: theme.typography.fontFamily.monospace,
-    fontSize: theme.typography.size.sm,
+    font: theme.typography.fontFamilyMonospace,
+    fontSize: theme.typography.bodySmall.fontSize,
     fontWeight: 'normal',
   });
 
@@ -41,15 +41,15 @@ export const calculateListSizes = (theme: GrafanaTheme, allItems: CompletionItem
   };
 };
 
-export const calculateItemHeight = (longestLabelHeight: number, theme: GrafanaTheme) => {
-  const horizontalPadding = parseInt(theme.spacing.sm, 10) * 2;
+export const calculateItemHeight = (longestLabelHeight: number, theme: GrafanaTheme2) => {
+  const horizontalPadding = theme.spacing.gridSize * 2;
   const itemHeight = longestLabelHeight + horizontalPadding;
 
   return itemHeight;
 };
 
-export const calculateListWidth = (longestLabelWidth: number, theme: GrafanaTheme) => {
-  const verticalPadding = parseInt(theme.spacing.sm, 10) + parseInt(theme.spacing.md, 10);
+export const calculateListWidth = (longestLabelWidth: number, theme: GrafanaTheme2) => {
+  const verticalPadding = theme.spacing.gridSize * 3;
   const maxWidth = 800;
   const listWidth = Math.min(Math.max(longestLabelWidth + verticalPadding, 200), maxWidth);
 

public/app/core/components/OptionsUI/strings.tsx

@@ -1,8 +1,9 @@
 import { css } from '@emotion/css';
 import React from 'react';
 
-import { FieldConfigEditorProps, StringFieldConfigSettings, GrafanaTheme } from '@grafana/data';
-import { stylesFactory, getTheme, Button, Icon, Input } from '@grafana/ui';
+import { FieldConfigEditorProps, StringFieldConfigSettings, GrafanaTheme2 } from '@grafana/data';
+import { config } from '@grafana/runtime';
+import { stylesFactory, Button, Icon, Input } from '@grafana/ui';
 
 type Props = FieldConfigEditorProps<string[], StringFieldConfigSettings>;
 interface State {
@@ -53,7 +54,7 @@ export class StringArrayEditor extends React.PureComponent<Props, State> {
   render() {
     const { value, item } = this.props;
     const { showAdd } = this.state;
-    const styles = getStyles(getTheme());
+    const styles = getStyles(config.theme2);
     const placeholder = item.settings?.placeholder || 'Add text';
     return (
       <div>
@@ -90,16 +91,16 @@ export class StringArrayEditor extends React.PureComponent<Props, State> {
   }
 }
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
     textInput: css`
       margin-bottom: 5px;
       &:hover {
-        border: 1px solid ${theme.colors.formInputBorderHover};
+        border: 1px solid ${theme.components.input.borderHover};
       }
     `,
     trashIcon: css`
-      color: ${theme.colors.textWeak};
+      color: ${theme.colors.text.secondary};
       cursor: pointer;
 
       &:hover {

public/app/features/alerting/unified/components/rule-editor/AnnotationsField.tsx

@@ -2,15 +2,15 @@ import { css, cx } from '@emotion/css';
 import React, { useCallback } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 
-import { GrafanaTheme } from '@grafana/data';
-import { Button, Field, Input, InputControl, Label, TextArea, useStyles } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, Field, Input, InputControl, Label, TextArea, useStyles2 } from '@grafana/ui';
 
 import { RuleFormValues } from '../../types/rule-form';
 
 import { AnnotationKeyInput } from './AnnotationKeyInput';
 
 const AnnotationsField = () => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
   const {
     control,
     register,
@@ -97,7 +97,7 @@ const AnnotationsField = () => {
   );
 };
 
-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   annotationValueInput: css`
     width: 426px;
   `,
@@ -114,7 +114,7 @@ const getStyles = (theme: GrafanaTheme) => ({
     flex-direction: column;
   `,
   field: css`
-    margin-bottom: ${theme.spacing.xs};
+    margin-bottom: ${theme.spacing(0.5)};
   `,
   flexRow: css`
     display: flex;
@@ -122,7 +122,7 @@ const getStyles = (theme: GrafanaTheme) => ({
     justify-content: flex-start;
   `,
   flexRowItemMargin: css`
-    margin-left: ${theme.spacing.xs};
+    margin-left: ${theme.spacing(0.5)};
   `,
 });
 

public/app/features/alerting/unified/components/rule-editor/CloudEvaluationBehavior.tsx

@@ -2,8 +2,8 @@ import { css } from '@emotion/css';
 import React from 'react';
 import { useFormContext } from 'react-hook-form';
 
-import { GrafanaTheme } from '@grafana/data';
-import { Field, Input, InputControl, Select, useStyles } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Field, Input, InputControl, Select, useStyles2 } from '@grafana/ui';
 
 import { RuleFormType, RuleFormValues } from '../../types/rule-form';
 import { timeOptions } from '../../utils/time';
@@ -12,7 +12,7 @@ import { PreviewRule } from './PreviewRule';
 import { RuleEditorSection } from './RuleEditorSection';
 
 export const CloudEvaluationBehavior = () => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
   const {
     register,
     control,
@@ -57,7 +57,7 @@ export const CloudEvaluationBehavior = () => {
   );
 };
 
-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   inlineField: css`
     margin-bottom: 0;
   `,
@@ -68,6 +68,6 @@ const getStyles = (theme: GrafanaTheme) => ({
     align-items: flex-start;
   `,
   timeUnit: css`
-    margin-left: ${theme.spacing.xs};
+    margin-left: ${theme.spacing(0.5)};
   `,
 });

public/app/features/alerting/unified/components/rule-editor/LabelsField.tsx

@@ -2,8 +2,8 @@ import { css, cx } from '@emotion/css';
 import React, { FC } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 
-import { GrafanaTheme } from '@grafana/data';
-import { Button, Field, Input, InlineLabel, Label, useStyles } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, Field, Input, InlineLabel, Label, useStyles2 } from '@grafana/ui';
 
 import { RuleFormValues } from '../../types/rule-form';
 
@@ -12,7 +12,7 @@ interface Props {
 }
 
 const LabelsField: FC<Props> = ({ className }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
   const {
     register,
     control,
@@ -94,10 +94,10 @@ const LabelsField: FC<Props> = ({ className }) => {
   );
 };
 
-const getStyles = (theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     wrapper: css`
-      margin-bottom: ${theme.spacing.xl};
+      margin-bottom: ${theme.spacing(4)};
     `,
     flexColumn: css`
       display: flex;
@@ -109,11 +109,11 @@ const getStyles = (theme: GrafanaTheme) => {
       justify-content: flex-start;
 
       & + button {
-        margin-left: ${theme.spacing.xs};
+        margin-left: ${theme.spacing(0.5)};
       }
     `,
     deleteLabelButton: css`
-      margin-left: ${theme.spacing.xs};
+      margin-left: ${theme.spacing(0.5)};
       align-self: flex-start;
     `,
     addLabelButton: css`
@@ -127,13 +127,13 @@ const getStyles = (theme: GrafanaTheme) => {
       align-self: flex-start;
       width: 28px;
       justify-content: center;
-      margin-left: ${theme.spacing.xs};
+      margin-left: ${theme.spacing(0.5)};
     `,
     labelInput: css`
       width: 175px;
-      margin-bottom: ${theme.spacing.sm};
+      margin-bottom: ${theme.spacing(1)};
       & + & {
-        margin-left: ${theme.spacing.sm};
+        margin-left: ${theme.spacing(1)};
       }
     `,
   };

public/app/features/alerting/unified/components/rules/ActionButton.tsx

@@ -1,17 +1,20 @@
 import { css, cx } from '@emotion/css';
 import React, { FC } from 'react';
 
-import { GrafanaTheme } from '@grafana/data';
-import { useStyles } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
 import { Button, ButtonProps } from '@grafana/ui/src/components/Button';
 
 type Props = Omit<ButtonProps, 'variant' | 'size'>;
 
-export const ActionButton: FC<Props> = ({ className, ...restProps }) => (
-  <Button variant="secondary" size="xs" className={cx(useStyles(getStyle), className)} {...restProps} />
-);
+export const ActionButton: FC<Props> = ({ className, ...restProps }) => {
+  const styles = useStyles2(getStyle);
+  return <Button variant="secondary" size="xs" className={cx(styles.wrapper, className)} {...restProps} />;
+};
 
-export const getStyle = (theme: GrafanaTheme) => css`
-  height: 24px;
-  font-size: ${theme.typography.size.sm};
-`;
+export const getStyle = (theme: GrafanaTheme2) => ({
+  wrapper: css`
+    height: 24px;
+    font-size: ${theme.typography.bodySmall.fontSize};
+  `,
+});

public/app/features/alerting/unified/components/rules/RuleDetailsMatchingInstances.tsx

@@ -2,8 +2,8 @@ import { css, cx } from '@emotion/css';
 import { countBy } from 'lodash';
 import React, { useMemo, useState } from 'react';
 
-import { GrafanaTheme } from '@grafana/data';
-import { LinkButton, useStyles } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { LinkButton, useStyles2 } from '@grafana/ui';
 import { MatcherFilter } from 'app/features/alerting/unified/components/alert-groups/MatcherFilter';
 import {
   AlertInstanceStateFilter,
@@ -33,7 +33,7 @@ interface ShowMoreStats {
 }
 
 function ShowMoreInstances(props: { ruleViewPageLink: string; stats: ShowMoreStats }) {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
   const { ruleViewPageLink, stats } = props;
 
   return (
@@ -64,7 +64,7 @@ export function RuleDetailsMatchingInstances(props: Props): JSX.Element | null {
   const [filterKey] = useState<number>(Math.floor(Math.random() * 100));
   const queryStringKey = `queryString-${filterKey}`;
 
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
 
   const stateFilterType = isGrafanaRulesSource(namespace.rulesSource) ? GRAFANA_RULES_SOURCE_NAME : 'prometheus';
 
@@ -140,7 +140,7 @@ function filterAlerts(
   return filteredAlerts;
 }
 
-const getStyles = (theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     flexRow: css`
       display: flex;
@@ -148,18 +148,18 @@ const getStyles = (theme: GrafanaTheme) => {
       align-items: flex-end;
       width: 100%;
       flex-wrap: wrap;
-      margin-bottom: ${theme.spacing.sm};
+      margin-bottom: ${theme.spacing(1)};
     `,
     spaceBetween: css`
       justify-content: space-between;
     `,
     rowChild: css`
-      margin-right: ${theme.spacing.sm};
+      margin-right: ${theme.spacing(1)};
     `,
     footerRow: css`
       display: flex;
       flex-direction: column;
-      gap: ${theme.spacing.sm};
+      gap: ${theme.spacing(1)};
       justify-content: space-between;
       align-items: center;
       width: 100%;

public/app/features/alerting/unified/components/rules/RulesFilter.tsx

@@ -2,10 +2,10 @@ import { css, cx } from '@emotion/css';
 import { debounce } from 'lodash';
 import React, { FormEvent, useState } from 'react';
 
-import { DataSourceInstanceSettings, GrafanaTheme, SelectableValue } from '@grafana/data';
+import { DataSourceInstanceSettings, GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
 import { DataSourcePicker, logInfo } from '@grafana/runtime';
-import { Button, Field, Icon, Input, Label, RadioButtonGroup, Tooltip, useStyles } from '@grafana/ui';
+import { Button, Field, Icon, Input, Label, RadioButtonGroup, Tooltip, useStyles2 } from '@grafana/ui';
 import { useQueryParams } from 'app/core/hooks/useQueryParams';
 import { PromAlertingRuleState, PromRuleType } from 'app/types/unified-alerting-dto';
 
@@ -51,7 +51,7 @@ const RulesFilter = () => {
 
   const { dataSource, alertState, queryString, ruleType } = getFiltersFromUrlParams(queryParams);
 
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
   const stateOptions = Object.entries(PromAlertingRuleState).map(([key, value]) => ({
     label: alertStateToReadable(value),
     value,
@@ -178,13 +178,13 @@ const RulesFilter = () => {
   );
 };
 
-const getStyles = (theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     container: css`
       display: flex;
       flex-direction: column;
-      padding-bottom: ${theme.spacing.sm};
-      margin-bottom: ${theme.spacing.sm};
+      padding-bottom: ${theme.spacing(1)};
+      margin-bottom: ${theme.spacing(1)};
     `,
     inputWidth: css`
       width: 340px;
@@ -201,10 +201,10 @@ const getStyles = (theme: GrafanaTheme) => {
       justify-content: space-between;
     `,
     rowChild: css`
-      margin: 0 ${theme.spacing.sm} 0 0;
+      margin: ${theme.spacing(0, 1, 0, 0)};
     `,
     clearButton: css`
-      margin-top: ${theme.spacing.sm};
+      margin-top: ${theme.spacing(1)};
     `,
   };
 };

public/app/features/alerting/unified/components/silences/SilencePeriod.tsx

@@ -2,14 +2,14 @@ import { css } from '@emotion/css';
 import React from 'react';
 import { useController, useFormContext } from 'react-hook-form';
 
-import { dateTime, GrafanaTheme } from '@grafana/data';
-import { Field, TimeRangeInput, useStyles } from '@grafana/ui';
+import { dateTime } from '@grafana/data';
+import { Field, TimeRangeInput } from '@grafana/ui';
 
 import { SilenceFormFields } from '../../types/silence-form';
 
 export const SilencePeriod = () => {
   const { control, getValues } = useFormContext<SilenceFormFields>();
-  const styles = useStyles(getStyles);
+
   const {
     field: { onChange: onChangeStartsAt, value: startsAt },
     fieldState: { invalid: startsAtInvalid },
@@ -74,8 +74,8 @@ export const SilencePeriod = () => {
   );
 };
 
-const getStyles = (theme: GrafanaTheme) => ({
+const styles = {
   timeRange: css`
     width: 400px;
   `,
-});
+};

public/app/features/dashboard/components/DashNav/DashNavButton.tsx

@@ -3,8 +3,8 @@ import { css } from '@emotion/css';
 import React, { FunctionComponent, MouseEvent } from 'react';
 
 // Components
-import { GrafanaTheme } from '@grafana/data';
-import { IconName, IconType, IconSize, IconButton, useTheme, stylesFactory } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { IconName, IconType, IconSize, IconButton, useStyles2 } from '@grafana/ui';
 
 interface Props {
   icon?: IconName;
@@ -17,8 +17,7 @@ interface Props {
 }
 
 export const DashNavButton: FunctionComponent<Props> = ({ icon, iconType, iconSize, tooltip, onClick, children }) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useStyles2(getStyles);
 
   return (
     <div className={styles.noBorderContainer}>
@@ -37,9 +36,9 @@ export const DashNavButton: FunctionComponent<Props> = ({ icon, iconType, iconSi
   );
 };
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   noBorderContainer: css`
-    padding: 0 ${theme.spacing.xs};
+    padding: 0 ${theme.spacing(0.5)};
     display: flex;
   `,
-}));
+});

public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx

@@ -1,8 +1,7 @@
 import { css } from '@emotion/css';
 import React from 'react';
 
-import { GrafanaTheme } from '@grafana/data';
-import { Alert, useStyles } from '@grafana/ui';
+import { Alert } from '@grafana/ui';
 import { getMessageFromError } from 'app/core/utils/errors';
 import { DashboardInitError, AppNotificationSeverity } from 'app/types';
 
@@ -11,7 +10,6 @@ export interface Props {
 }
 
 export const DashboardFailed = ({ initError }: Props) => {
-  const styles = useStyles(getStyles);
   if (!initError) {
     return null;
   }
@@ -25,13 +23,11 @@ export const DashboardFailed = ({ initError }: Props) => {
   );
 };
 
-export const getStyles = (theme: GrafanaTheme) => {
-  return {
-    dashboardLoading: css`
-      height: 60vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    `,
-  };
+export const styles = {
+  dashboardLoading: css`
+    height: 60vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `,
 };

public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx

@@ -1,9 +1,9 @@
 import { css, keyframes } from '@emotion/css';
 import React from 'react';
 
-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
-import { Button, HorizontalGroup, Spinner, useStyles, VerticalGroup } from '@grafana/ui';
+import { Button, HorizontalGroup, Spinner, useStyles2, VerticalGroup } from '@grafana/ui';
 import { DashboardInitPhase } from 'app/types';
 
 export interface Props {
@@ -11,7 +11,7 @@ export interface Props {
 }
 
 export const DashboardLoading = ({ initPhase }: Props) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
   const cancelVariables = () => {
     locationService.push('/');
   };
@@ -34,7 +34,7 @@ export const DashboardLoading = ({ initPhase }: Props) => {
   );
 };
 
-export const getStyles = (theme: GrafanaTheme) => {
+export const getStyles = (theme: GrafanaTheme2) => {
   // Amount of time we want to pass before we start showing loading spinner
   const slowStartThreshold = '0.5s';
 
@@ -53,7 +53,7 @@ export const getStyles = (theme: GrafanaTheme) => {
       animation: ${invisibleToVisible} 0s step-end ${slowStartThreshold} 1 normal forwards;
     `,
     dashboardLoadingText: css`
-      font-size: ${theme.typography.size.lg};
+      font-size: ${theme.typography.h4.fontSize};
     `,
   };
 };

public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx

@@ -1,13 +1,13 @@
 import { css } from '@emotion/css';
 import React, { ButtonHTMLAttributes } from 'react';
 
-import { GrafanaTheme } from '@grafana/data';
-import { Button, useStyles } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, useStyles2 } from '@grafana/ui';
 
 export interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {}
 
 export const ListNewButton: React.FC<Props> = ({ children, ...restProps }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
   return (
     <div className={styles.buttonWrapper}>
       <Button icon="plus" variant="secondary" {...restProps}>
@@ -17,8 +17,8 @@ export const ListNewButton: React.FC<Props> = ({ children, ...restProps }) => {
   );
 };
 
-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   buttonWrapper: css`
-    padding: ${theme.spacing.lg} 0;
+    padding: ${theme.spacing(3)} 0;
   `,
 });

public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx

@@ -7,9 +7,9 @@ import {
   FieldConfigOptionsRegistry,
   FieldConfigProperty,
   FieldOverrideContext,
-  GrafanaTheme,
+  GrafanaTheme2,
 } from '@grafana/data';
-import { Counter, Field, HorizontalGroup, IconButton, Label, stylesFactory, useTheme } from '@grafana/ui';
+import { Counter, Field, HorizontalGroup, IconButton, Label, useStyles2 } from '@grafana/ui';
 
 import { OptionsPaneCategory } from './OptionsPaneCategory';
 
@@ -32,8 +32,7 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> =
   isSystemOverride,
   searchQuery,
 }) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useStyles2(getStyles);
   const item = registry?.getIfExists(property.id);
 
   if (!item) {
@@ -125,13 +124,13 @@ export const DynamicConfigValueEditor: React.FC<DynamicConfigValueEditorProps> =
   );
 };
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     collapsibleOverrideEditor: css`
       label: collapsibleOverrideEditor;
       & + .dynamicConfigValueEditor--nonCollapsible {
-        margin-top: ${theme.spacing.formSpacingBase}px;
+        margin-top: ${theme.spacing(1)};
       }
     `,
   };
-});
+};

public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx

@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 import React from 'react';
 
-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { useStyles } from '@grafana/ui';
+import { useStyles2 } from '@grafana/ui';
 import { useSelector } from 'app/types';
 
 import { OptionsPaneOptions } from './OptionsPaneOptions';
@@ -21,7 +21,7 @@ export const OptionsPane: React.FC<OptionPaneRenderProps> = ({
   dashboard,
   instanceState,
 }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
   const isVizPickerOpen = useSelector((state) => state.panelEditor.isVizPickerOpen);
   const { data } = usePanelLatestData(panel, { withTransforms: true, withFieldConfig: false }, true);
 
@@ -51,7 +51,7 @@ export const OptionsPane: React.FC<OptionPaneRenderProps> = ({
   );
 };
 
-const getStyles = (theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     wrapper: css`
       height: 100%;
@@ -66,7 +66,7 @@ const getStyles = (theme: GrafanaTheme) => {
       min-height: 0;
     `,
     vizButtonWrapper: css`
-      padding: 0 ${theme.spacing.md} ${theme.spacing.md} 0;
+      padding: 0 ${theme.spacing(2, 2)} 0;
     `,
     legacyOptions: css`
       label: legacy-options;
@@ -78,12 +78,12 @@ const getStyles = (theme: GrafanaTheme) => {
         margin-bottom: 0;
       }
       .panel-options-group__body {
-        padding: ${theme.spacing.md} 0;
+        padding: ${theme.spacing(2)} 0;
       }
 
       .section {
         display: block;
-        margin: ${theme.spacing.md} 0;
+        margin: ${theme.spacing(2)} 0;
 
         &:first-child {
           margin-top: 0;

public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx

@@ -1,8 +1,8 @@
 import { css } from '@emotion/css';
 import React, { FC } from 'react';
 
-import { FieldConfigOptionsRegistry, GrafanaTheme, ConfigOverrideRule } from '@grafana/data';
-import { HorizontalGroup, Icon, IconButton, useStyles } from '@grafana/ui';
+import { FieldConfigOptionsRegistry, GrafanaTheme2, ConfigOverrideRule } from '@grafana/data';
+import { HorizontalGroup, Icon, IconButton, useStyles2 } from '@grafana/ui';
 import { FieldMatcherUIRegistryItem } from '@grafana/ui/src/components/MatchersUI/types';
 
 interface OverrideCategoryTitleProps {
@@ -21,7 +21,7 @@ export const OverrideCategoryTitle: FC<OverrideCategoryTitleProps> = ({
   override,
   onOverrideRemove,
 }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
   const properties = override.properties.map((p) => registry.getIfExists(p.id)).filter((prop) => !!prop);
   const propertyNames = properties.map((p) => p?.name).join(', ');
   const matcherOptions = matcherUi.optionsToLabel(override.matcher.options);
@@ -45,22 +45,22 @@ export const OverrideCategoryTitle: FC<OverrideCategoryTitleProps> = ({
 
 OverrideCategoryTitle.displayName = 'OverrideTitle';
 
-const getStyles = (theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     matcherUi: css`
-      padding: ${theme.spacing.sm};
+      padding: ${theme.spacing(1)};
     `,
     propertyPickerWrapper: css`
-      margin-top: ${theme.spacing.formSpacingBase * 2}px;
+      margin-top: ${theme.spacing(2)};
     `,
     overrideDetails: css`
-      font-size: ${theme.typography.size.sm};
-      color: ${theme.colors.textWeak};
-      font-weight: ${theme.typography.weight.regular};
+      font-size: ${theme.typography.bodySmall.fontSize};
+      color: ${theme.colors.text.secondary};
+      font-weight: ${theme.typography.fontWeightRegular};
     `,
     options: css`
       overflow: hidden;
-      padding-right: ${theme.spacing.xl};
+      padding-right: ${theme.spacing(4)};
     `,
     unknownLabel: css`
       margin-bottom: 0;

public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx

@@ -1,9 +1,8 @@
 import { css } from '@emotion/css';
-import React, { FC } from 'react';
+import React from 'react';
 
-import { GrafanaTheme } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { ToolbarButton, ButtonGroup, useStyles } from '@grafana/ui';
+import { ToolbarButton, ButtonGroup } from '@grafana/ui';
 import { useDispatch, useSelector } from 'app/types';
 
 import { PanelModel } from '../../state';
@@ -15,8 +14,7 @@ type Props = {
   panel: PanelModel;
 };
 
-export const VisualizationButton: FC<Props> = ({ panel }) => {
-  const styles = useStyles(getStyles);
+export const VisualizationButton = ({ panel }: Props) => {
   const dispatch = useDispatch();
   const plugin = useSelector(getPanelPluginWithFallback(panel.type));
   const isPanelOptionsVisible = useSelector((state) => state.panelEditor.ui.isPanelOptionsVisible);
@@ -63,14 +61,12 @@ export const VisualizationButton: FC<Props> = ({ panel }) => {
 
 VisualizationButton.displayName = 'VisualizationTab';
 
-const getStyles = (theme: GrafanaTheme) => {
-  return {
-    wrapper: css`
-      display: flex;
-      flex-direction: column;
-    `,
-    vizButton: css`
-      text-align: left;
-    `,
-  };
+const styles = {
+  wrapper: css`
+    display: flex;
+    flex-direction: column;
+  `,
+  vizButton: css`
+    text-align: left;
+  `,
 };

public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx

@@ -2,9 +2,9 @@ import { css } from '@emotion/css';
 import React, { FC, useCallback, useRef, useState } from 'react';
 import { useLocalStorage } from 'react-use';
 
-import { GrafanaTheme, PanelData, SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, PanelData, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Button, CustomScrollbar, FilterInput, RadioButtonGroup, useStyles } from '@grafana/ui';
+import { Button, CustomScrollbar, FilterInput, RadioButtonGroup, useStyles2 } from '@grafana/ui';
 import { Field } from '@grafana/ui/src/components/Forms/Field';
 import { LS_VISUALIZATION_SELECT_TAB_KEY } from 'app/core/constants';
 import { PanelLibraryOptionsGroup } from 'app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup';
@@ -34,7 +34,7 @@ export const VisualizationSelectPane: FC<Props> = ({ panel, data }) => {
   );
 
   const dispatch = useDispatch();
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
   const searchRef = useRef<HTMLInputElement | null>(null);
 
   const onVizChange = useCallback(
@@ -125,10 +125,10 @@ export const VisualizationSelectPane: FC<Props> = ({ panel, data }) => {
 
 VisualizationSelectPane.displayName = 'VisualizationSelectPane';
 
-const getStyles = (theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     icon: css`
-      color: ${theme.palette.gray33};
+      color: ${theme.v1.palette.gray33};
     `,
     wrapper: css`
       display: flex;
@@ -144,28 +144,28 @@ const getStyles = (theme: GrafanaTheme) => {
       min-height: 0;
     `,
     scrollContent: css`
-      padding: ${theme.spacing.sm};
+      padding: ${theme.spacing(1)};
     `,
     openWrapper: css`
       display: flex;
       flex-direction: column;
       flex: 1 1 100%;
       height: 100%;
-      background: ${theme.colors.bg1};
-      border: 1px solid ${theme.colors.border1};
+      background: ${theme.colors.background.primary};
+      border: 1px solid ${theme.colors.border.weak};
     `,
     searchRow: css`
       display: flex;
-      margin-bottom: ${theme.spacing.sm};
+      margin-bottom: ${theme.spacing(1)};
     `,
     closeButton: css`
-      margin-left: ${theme.spacing.sm};
+      margin-left: ${theme.spacing(1)};
     `,
     customFieldMargin: css`
-      margin-bottom: ${theme.spacing.sm};
+      margin-bottom: ${theme.spacing(1)};
     `,
     formBox: css`
-      padding: ${theme.spacing.sm};
+      padding: ${theme.spacing(1)};
       padding-bottom: 0;
     `,
   };

public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx

@@ -1,9 +1,9 @@
 import { css } from '@emotion/css';
 import React, { useEffect } from 'react';
 
-import { GrafanaTheme } from '@grafana/data';
+import { GrafanaTheme2 } from '@grafana/data';
 import { FetchError } from '@grafana/runtime';
-import { Button, ConfirmModal, Modal, stylesFactory, useTheme } from '@grafana/ui';
+import { Button, ConfirmModal, Modal, useStyles2 } from '@grafana/ui';
 import { DashboardModel } from 'app/features/dashboard/state';
 
 import { SaveDashboardAsButton } from './SaveDashboardButton';
@@ -77,10 +77,9 @@ export const SaveDashboardErrorProxy: React.FC<SaveDashboardErrorProxyProps> = (
   );
 };
 
-const ConfirmPluginDashboardSaveModal: React.FC<SaveDashboardModalProps> = ({ onDismiss, dashboard }) => {
-  const theme = useTheme();
+const ConfirmPluginDashboardSaveModal = ({ onDismiss, dashboard }: SaveDashboardModalProps) => {
   const { onDashboardSave } = useDashboardSave(dashboard);
-  const styles = getConfirmPluginDashboardSaveModalStyles(theme);
+  const styles = useStyles2(getConfirmPluginDashboardSaveModalStyles);
 
   return (
     <Modal className={styles.modal} title="Plugin dashboard" icon="copy" isOpen={true} onDismiss={onDismiss}>
@@ -122,21 +121,21 @@ const isHandledError = (errorStatus: string) => {
   }
 };
 
-const getConfirmPluginDashboardSaveModalStyles = stylesFactory((theme: GrafanaTheme) => ({
+const getConfirmPluginDashboardSaveModalStyles = (theme: GrafanaTheme2) => ({
   modal: css`
     width: 500px;
   `,
   modalText: css`
-    font-size: ${theme.typography.heading.h4};
-    color: ${theme.colors.link};
-    margin-bottom: calc(${theme.spacing.d} * 2);
-    padding-top: ${theme.spacing.d};
+    font-size: ${theme.typography.h4.fontSize};
+    color: ${theme.colors.text.primary};
+    margin-bottom: ${theme.spacing(4)}
+    padding-top: ${theme.spacing(2)};
   `,
   modalButtonRow: css`
     margin-bottom: 14px;
     a,
     button {
-      margin-right: ${theme.spacing.d};
+      margin-right: ${theme.spacing(2)};
     }
   `,
-}));
+});

public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx

@@ -2,14 +2,12 @@ import { css } from '@emotion/css';
 import { saveAs } from 'file-saver';
 import React, { useCallback, useState } from 'react';
 
-import { GrafanaTheme } from '@grafana/data';
 import { Stack } from '@grafana/experimental';
-import { Button, ClipboardButton, HorizontalGroup, stylesFactory, TextArea, useTheme } from '@grafana/ui';
+import { Button, ClipboardButton, HorizontalGroup, TextArea } from '@grafana/ui';
 
 import { SaveDashboardFormProps } from '../types';
 
 export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({ dashboard, onCancel }) => {
-  const theme = useTheme();
   const [dashboardJSON, setDashboardJson] = useState(() => {
     const clone = dashboard.getSaveModelClone();
     delete clone.id;
@@ -23,7 +21,6 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
     saveAs(blob, dashboard.title + '-' + new Date().getTime() + '.json');
   }, [dashboard.title, dashboardJSON]);
 
-  const styles = getStyles(theme);
   return (
     <>
       <Stack direction="column" gap={2}>
@@ -70,14 +67,12 @@ export const SaveProvisionedDashboardForm: React.FC<SaveDashboardFormProps> = ({
   );
 };
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
-  return {
-    json: css`
-      height: 400px;
-      width: 100%;
-      overflow: auto;
-      resize: none;
-      font-family: monospace;
-    `,
-  };
-});
+const styles = {
+  json: css`
+    height: 400px;
+    width: 100%;
+    overflow: auto;
+    resize: none;
+    font-family: monospace;
+  `,
+};

public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx

@@ -5,12 +5,12 @@ import { mergeMap } from 'rxjs/operators';
 import {
   DataFrame,
   DataTransformerConfig,
-  GrafanaTheme,
+  GrafanaTheme2,
   transformDataFrame,
   TransformerRegistryItem,
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Icon, JSONFormatter, useStyles } from '@grafana/ui';
+import { Icon, JSONFormatter, useStyles2 } from '@grafana/ui';
 
 import { TransformationsEditorTransformation } from './types';
 
@@ -31,7 +31,7 @@ export const TransformationEditor = ({
   configs,
   onChange,
 }: TransformationEditorProps) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
   const [input, setInput] = useState<DataFrame[]>([]);
   const [output, setOutput] = useState<DataFrame[]>([]);
   const config = useMemo(() => configs[index], [configs, index]);
@@ -97,8 +97,8 @@ export const TransformationEditor = ({
   );
 };
 
-const getStyles = (theme: GrafanaTheme) => {
-  const debugBorder = theme.isLight ? theme.palette.gray85 : theme.palette.gray15;
+const getStyles = (theme: GrafanaTheme2) => {
+  const debugBorder = theme.isLight ? theme.v1.palette.gray85 : theme.v1.palette.gray15;
 
   return {
     title: css`
@@ -112,8 +112,8 @@ const getStyles = (theme: GrafanaTheme) => {
       align-items: center;
     `,
     name: css`
-      font-weight: ${theme.typography.weight.semibold};
-      color: ${theme.colors.textBlue};
+      font-weight: ${theme.typography.fontWeightMedium};
+      color: ${theme.colors.primary.text};
     `,
     iconRow: css`
       display: flex;
@@ -123,8 +123,8 @@ const getStyles = (theme: GrafanaTheme) => {
       border: none;
       box-shadow: none;
       cursor: pointer;
-      color: ${theme.colors.textWeak};
-      margin-left: ${theme.spacing.sm};
+      color: ${theme.colors.text.secondary};
+      margin-left: ${theme.spacing(1)};
       &:hover {
         color: ${theme.colors.text};
       }
@@ -141,13 +141,13 @@ const getStyles = (theme: GrafanaTheme) => {
       align-items: center;
       align-self: stretch;
       justify-content: center;
-      margin: 0 ${theme.spacing.xs};
-      color: ${theme.colors.textBlue};
+      margin: 0 ${theme.spacing(0.5)};
+      color: ${theme.colors.primary.text};
     `,
     debugTitle: css`
-      padding: ${theme.spacing.sm} ${theme.spacing.xxs};
-      font-family: ${theme.typography.fontFamily.monospace};
-      font-size: ${theme.typography.size.sm};
+      padding: ${theme.spacing(1)} ${theme.spacing(0.25)};
+      font-family: ${theme.typography.fontFamilyMonospace};
+      font-size: ${theme.typography.bodySmall.fontSize};
       color: ${theme.colors.text};
       border-bottom: 1px solid ${debugBorder};
       flex-grow: 0;
@@ -155,11 +155,11 @@ const getStyles = (theme: GrafanaTheme) => {
     `,
 
     debug: css`
-      margin-top: ${theme.spacing.sm};
-      padding: 0 ${theme.spacing.sm} ${theme.spacing.sm} ${theme.spacing.sm};
+      margin-top: ${theme.spacing(1)};
+      padding: 0 ${theme.spacing(1, 1, 1)};
       border: 1px solid ${debugBorder};
-      background: ${theme.isLight ? theme.palette.white : theme.palette.gray05};
-      border-radius: ${theme.border.radius.sm};
+      background: ${theme.isLight ? theme.v1.palette.white : theme.v1.palette.gray05};
+      border-radius: ${theme.shape.borderRadius(1)};
       width: 100%;
       min-height: 300px;
       display: flex;
@@ -170,7 +170,7 @@ const getStyles = (theme: GrafanaTheme) => {
       flex-grow: 1;
       height: 100%;
       overflow: hidden;
-      padding: ${theme.spacing.xs};
+      padding: ${theme.spacing(0.5)};
     `,
   };
 };

public/app/features/dashboard/components/VersionHistory/DiffGroup.tsx

@@ -2,8 +2,8 @@ import { css } from '@emotion/css';
 import { last } from 'lodash';
 import React from 'react';
 
-import { GrafanaTheme } from '@grafana/data';
-import { useStyles } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
 
 import { DiffTitle } from './DiffTitle';
 import { DiffValues } from './DiffValues';
@@ -14,8 +14,8 @@ type DiffGroupProps = {
   title: string;
 };
 
-export const DiffGroup: React.FC<DiffGroupProps> = ({ diffs, title }) => {
-  const styles = useStyles(getStyles);
+export const DiffGroup = ({ diffs, title }: DiffGroupProps) => {
+  const styles = useStyles2(getStyles);
 
   if (diffs.length === 1) {
     return (
@@ -41,17 +41,17 @@ export const DiffGroup: React.FC<DiffGroupProps> = ({ diffs, title }) => {
   );
 };
 
-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   container: css`
-    background-color: ${theme.colors.bg2};
-    font-size: ${theme.typography.size.md};
-    margin-bottom: ${theme.spacing.md};
-    padding: ${theme.spacing.md};
+    background-color: ${theme.colors.background.secondary};
+    font-size: ${theme.typography.h6.fontSize};
+    margin-bottom: ${theme.spacing(2)};
+    padding: ${theme.spacing(2)};
   `,
   list: css`
-    margin-left: ${theme.spacing.xl};
+    margin-left: ${theme.spacing(4)};
   `,
   listItem: css`
-    margin-bottom: ${theme.spacing.sm};
+    margin-bottom: ${theme.spacing(1)};
   `,
 });

public/app/features/dashboard/components/VersionHistory/DiffTitle.tsx

@@ -1,8 +1,8 @@
 import { css } from '@emotion/css';
 import React from 'react';
 
-import { GrafanaTheme } from '@grafana/data';
-import { useStyles, Icon } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2, Icon } from '@grafana/ui';
 
 import { DiffValues } from './DiffValues';
 import { Diff, getDiffText } from './utils';
@@ -15,7 +15,8 @@ type DiffTitleProps = {
 const replaceDiff: Diff = { op: 'replace', originalValue: undefined, path: [''], value: undefined, startLineNumber: 0 };
 
 export const DiffTitle: React.FC<DiffTitleProps> = ({ diff, title }) => {
-  const styles = useStyles(getDiffTitleStyles);
+  const styles = useStyles2(getDiffTitleStyles);
+
   return diff ? (
     <>
       <Icon type="mono" name="circle" className={styles[diff.op]} /> <span className={styles.embolden}>{title}</span>{' '}
@@ -29,32 +30,32 @@ export const DiffTitle: React.FC<DiffTitleProps> = ({ diff, title }) => {
   );
 };
 
-const getDiffTitleStyles = (theme: GrafanaTheme) => ({
+const getDiffTitleStyles = (theme: GrafanaTheme2) => ({
   embolden: css`
-    font-weight: ${theme.typography.weight.bold};
+    font-weight: ${theme.typography.fontWeightBold};
   `,
   add: css`
-    color: ${theme.palette.online};
+    color: ${theme.colors.success.main};
   `,
   replace: css`
-    color: ${theme.palette.warn};
+    color: ${theme.colors.success.main};
   `,
   move: css`
-    color: ${theme.palette.warn};
+    color: ${theme.colors.success.main};
   `,
   copy: css`
-    color: ${theme.palette.warn};
+    color: ${theme.colors.success.main};
   `,
   _get: css`
-    color: ${theme.palette.warn};
+    color: ${theme.colors.success.main};
   `,
   test: css`
-    color: ${theme.palette.warn};
+    color: ${theme.colors.success.main};
   `,
   remove: css`
-    color: ${theme.palette.critical};
+    color: ${theme.colors.success.main};
   `,
   withoutDiff: css`
-    margin-bottom: ${theme.spacing.md};
+    margin-bottom: ${theme.spacing(2)};
   `,
 });

public/app/features/dashboard/components/VersionHistory/VersionHistoryComparison.tsx

@@ -1,8 +1,8 @@
 import { css, cx } from '@emotion/css';
 import React from 'react';
 
-import { GrafanaTheme } from '@grafana/data';
-import { Button, ModalsController, CollapsableSection, HorizontalGroup, useStyles } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, ModalsController, CollapsableSection, HorizontalGroup, useStyles2 } from '@grafana/ui';
 
 import { DecoratedRevisionModel } from '../DashboardSettings/VersionsSettings';
 
@@ -20,7 +20,7 @@ type DiffViewProps = {
 
 export const VersionHistoryComparison: React.FC<DiffViewProps> = ({ baseInfo, newInfo, diffData, isNewLatest }) => {
   const diff = jsonDiff(diffData.lhs, diffData.rhs);
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
 
   return (
     <div>
@@ -68,13 +68,13 @@ export const VersionHistoryComparison: React.FC<DiffViewProps> = ({ baseInfo, ne
   );
 };
 
-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   spacer: css`
-    margin-bottom: ${theme.spacing.xl};
+    margin-bottom: ${theme.spacing(4)};
   `,
   versionInfo: css`
-    color: ${theme.colors.textWeak};
-    font-size: ${theme.typography.size.sm};
+    color: ${theme.colors.text.secondary};
+    font-size: ${theme.typography.bodySmall.fontSize};
   `,
   noMarginBottom: css`
     margin-bottom: 0;

public/app/features/dashboard/components/VersionHistory/VersionHistoryHeader.tsx

@@ -2,8 +2,8 @@ import { css } from '@emotion/css';
 import { noop } from 'lodash';
 import React from 'react';
 
-import { GrafanaTheme } from '@grafana/data';
-import { Icon, IconButton, useStyles } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Icon, IconButton, useStyles2 } from '@grafana/ui';
 
 type VersionHistoryHeaderProps = {
   onClick?: () => void;
@@ -18,7 +18,7 @@ export const VersionHistoryHeader: React.FC<VersionHistoryHeaderProps> = ({
   newVersion = 0,
   isNewLatest = false,
 }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
 
   return (
     <h3 className={styles.header}>
@@ -31,11 +31,11 @@ export const VersionHistoryHeader: React.FC<VersionHistoryHeaderProps> = ({
   );
 };
 
-const getStyles = (theme: GrafanaTheme) => ({
+const getStyles = (theme: GrafanaTheme2) => ({
   header: css`
-    font-size: ${theme.typography.heading.h3};
+    font-size: ${theme.typography.h3.fontSize};
     display: flex;
-    gap: ${theme.spacing.md};
-    margin-bottom: ${theme.spacing.lg};
+    gap: ${theme.spacing(2)};
+    margin-bottom: ${theme.spacing(3)};
   `,
 });

public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderLoadingIndicator.tsx

@@ -1,8 +1,8 @@
 import { css } from '@emotion/css';
 import React, { FC } from 'react';
 
-import { GrafanaTheme, LoadingState } from '@grafana/data';
-import { Icon, Tooltip, useStyles } from '@grafana/ui';
+import { GrafanaTheme2, LoadingState } from '@grafana/data';
+import { Icon, Tooltip, useStyles2 } from '@grafana/ui';
 
 interface Props {
   state: LoadingState;
@@ -10,7 +10,7 @@ interface Props {
 }
 
 export const PanelHeaderLoadingIndicator: FC<Props> = ({ state, onClick }) => {
-  const styles = useStyles(getStyles);
+  const styles = useStyles2(getStyles);
 
   if (state === LoadingState.Loading) {
     return (
@@ -33,13 +33,13 @@ export const PanelHeaderLoadingIndicator: FC<Props> = ({ state, onClick }) => {
   return null;
 };
 
-function getStyles(theme: GrafanaTheme) {
+function getStyles(theme: GrafanaTheme2) {
   return {
     streamIndicator: css`
       width: 10px;
       height: 10px;
-      background: ${theme.colors.textFaint};
-      box-shadow: 0 0 2px ${theme.colors.textFaint};
+      background: ${theme.colors.text.disabled};
+      box-shadow: 0 0 2px ${theme.colors.text.disabled};
       border-radius: 50%;
       position: relative;
       top: 6px;

public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx

@@ -8,7 +8,7 @@ import {
   ThresholdsConfig,
   ThresholdsMode,
   SelectableValue,
-  GrafanaTheme,
+  GrafanaTheme2,
 } from '@grafana/data';
 import {
   Input,
@@ -216,7 +216,7 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
     return (
       <ThemeContext.Consumer>
         {(theme) => {
-          const styles = getStyles(theme.v1);
+          const styles = getStyles(theme);
           return (
             <div className={styles.wrapper}>
               <Button
@@ -296,7 +296,7 @@ interface ThresholdStyles {
   trashIcon: string;
 }
 
-const getStyles = stylesFactory((theme: GrafanaTheme): ThresholdStyles => {
+const getStyles = stylesFactory((theme: GrafanaTheme2): ThresholdStyles => {
   return {
     wrapper: css`
       display: flex;
@@ -305,31 +305,31 @@ const getStyles = stylesFactory((theme: GrafanaTheme): ThresholdStyles => {
     thresholds: css`
       display: flex;
       flex-direction: column;
-      margin-bottom: ${theme.spacing.formSpacingBase * 2}px;
+      margin-bottom: ${theme.spacing(2)};
     `,
     item: css`
-      margin-bottom: ${theme.spacing.sm};
+      margin-bottom: ${theme.spacing(1)};
 
       &:last-child {
         margin-bottom: 0;
       }
     `,
     colorPicker: css`
-      padding: 0 ${theme.spacing.sm};
+      padding: 0 ${theme.spacing(1)};
     `,
     addButton: css`
-      margin-bottom: ${theme.spacing.sm};
+      margin-bottom: ${theme.spacing(1)};
     `,
     percentIcon: css`
-      font-size: ${theme.typography.size.sm};
-      color: ${theme.colors.textWeak};
+      font-size: ${theme.typography.bodySmall.fontSize};
+      color: ${theme.colors.text.secondary};
     `,
     inputPrefix: css`
       display: flex;
       align-items: center;
     `,
     trashIcon: css`
-      color: ${theme.colors.textWeak};
+      color: ${theme.colors.text.secondary};
       cursor: pointer;
       margin-right: 0;