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

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;

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

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

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

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

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