elasticsearch plugin: Migrate from GrafanaTheme to GrafanaTheme2 (#35336)

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx

@@ -1,5 +1,5 @@
 import { SelectableValue } from '@grafana/data';
-import { InlineSegmentGroup, Segment, SegmentAsync, useTheme } from '@grafana/ui';
+import { InlineSegmentGroup, Segment, SegmentAsync, useTheme2 } from '@grafana/ui';
 import { cx } from '@emotion/css';
 import React, { useCallback } from 'react';
 import { useDatasource, useQuery } from '../ElasticsearchQueryContext';
@@ -62,7 +62,7 @@ const getTypeOptions = (
 };
 
 export const MetricEditor = ({ value }: Props) => {
-  const styles = getStyles(useTheme(), !!value.hide);
+  const styles = getStyles(useTheme2(), !!value.hide);
   const datasource = useDatasource();
   const query = useQuery();
   const dispatch = useDispatch<MetricAggregationAction>();

public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/styles.ts

@@ -1,16 +1,17 @@
-import { GrafanaTheme } from '@grafana/data';
-import { stylesFactory } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
 import { css } from '@emotion/css';
 
-export const getStyles = stylesFactory((theme: GrafanaTheme, hidden: boolean) => ({
-  color:
-    hidden &&
-    css`
-      &,
-      &:hover,
-      label,
-      a {
-        color: ${hidden ? theme.colors.textFaint : theme.colors.text};
-      }
-    `,
-}));
+export const getStyles = (theme: GrafanaTheme2, hidden: boolean) => {
+  return {
+    color:
+      hidden &&
+      css`
+        &,
+        &:hover,
+        label,
+        a {
+          color: ${hidden ? theme.colors.text.disabled : theme.colors.text.primary};
+        }
+      `,
+  };
+};

public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.tsx

@@ -1,5 +1,5 @@
-import { GrafanaTheme } from '@grafana/data';
-import { IconButton, InlineFieldRow, InlineLabel, InlineSegmentGroup, stylesFactory, useTheme } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { IconButton, InlineFieldRow, InlineLabel, InlineSegmentGroup, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 import { noop } from 'lodash';
 import React, { PropsWithChildren } from 'react';
@@ -18,8 +18,7 @@ export const QueryEditorRow = ({
   onHideClick,
   hidden = false,
 }: PropsWithChildren<Props>) => {
-  const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useStyles2(getStyles);
 
   return (
     <InlineFieldRow>
@@ -55,14 +54,14 @@ export const QueryEditorRow = ({
   );
 };
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
     iconWrapper: css`
       display: flex;
     `,
     icon: css`
-      color: ${theme.colors.textWeak};
-      margin-left: ${theme.spacing.xxs};
+      color: ${theme.colors.text.secondary};
+      margin-left: ${theme.spacing(0.25)};
     `,
   };
-});
+};

public/app/plugins/datasource/elasticsearch/components/QueryEditor/SettingsEditorContainer.tsx

@@ -1,10 +1,10 @@
-import { GrafanaTheme } from '@grafana/data';
-import { Icon, InlineSegmentGroup, stylesFactory, useTheme } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Icon, InlineSegmentGroup, useTheme2 } from '@grafana/ui';
 import { css, cx } from '@emotion/css';
 import React, { PropsWithChildren, useState } from 'react';
 import { segmentStyles } from './styles';
 
-const getStyles = stylesFactory((theme: GrafanaTheme, hidden: boolean) => {
+const getStyles = (theme: GrafanaTheme2, hidden: boolean) => {
   return {
     wrapper: css`
       max-width: 500px;
@@ -12,20 +12,21 @@ const getStyles = stylesFactory((theme: GrafanaTheme, hidden: boolean) => {
       flex-direction: column;
     `,
     settingsWrapper: css`
-      padding-top: ${theme.spacing.xs};
+      padding-top: ${theme.spacing(0.5)};
     `,
     icon: css`
-      margin-right: ${theme.spacing.xs};
+      margin-right: ${theme.spacing(0.5)};
     `,
     button: css`
       justify-content: start;
       ${hidden &&
       css`
-        color: ${theme.colors.textFaint};
+        color: ${theme.colors.text.disabled};
       `}
     `,
   };
-});
+};
+
 interface Props {
   label: string;
   hidden?: boolean;
@@ -33,7 +34,9 @@ interface Props {
 
 export const SettingsEditorContainer = ({ label, children, hidden = false }: PropsWithChildren<Props>) => {
   const [open, setOpen] = useState(false);
-  const styles = getStyles(useTheme(), hidden);
+
+  const theme = useTheme2();
+  const styles = getStyles(theme, hidden);
 
   return (
     <InlineSegmentGroup>

public/app/plugins/datasource/elasticsearch/configuration/DataLinks.tsx

@@ -1,19 +1,21 @@
 import React from 'react';
 import { css } from '@emotion/css';
-import { Button, stylesFactory, useTheme } from '@grafana/ui';
-import { GrafanaTheme, VariableOrigin, DataLinkBuiltInVars } from '@grafana/data';
+import { Button, useStyles2 } from '@grafana/ui';
+import { GrafanaTheme2, VariableOrigin, DataLinkBuiltInVars } from '@grafana/data';
 import { DataLinkConfig } from '../types';
 import { DataLink } from './DataLink';
 
-const getStyles = stylesFactory((theme: GrafanaTheme) => ({
-  infoText: css`
-    padding-bottom: ${theme.spacing.md};
-    color: ${theme.colors.textWeak};
-  `,
-  dataLink: css`
-    margin-bottom: ${theme.spacing.sm};
-  `,
-}));
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    infoText: css`
+      padding-bottom: ${theme.spacing(2)};
+      color: ${theme.colors.text.secondary};
+    `,
+    dataLink: css`
+      margin-bottom: ${theme.spacing(1)};
+    `,
+  };
+};
 
 type Props = {
   value?: DataLinkConfig[];
@@ -21,8 +23,7 @@ type Props = {
 };
 export const DataLinks = (props: Props) => {
   const { value, onChange } = props;
-  const theme = useTheme();
-  const styles = getStyles(theme);
+  const styles = useStyles2(getStyles);
 
   return (
     <>