Chore: Convert some core components to use emotion object styles (#78607)

* convert some core components to use emotion object styles

* remove enabled: true

* use radius.default

.betterer.results

@@ -1091,9 +1091,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "5"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "6"]
     ],
-    "public/app/core/components/AppChrome/MegaMenu/NavFeatureHighlight.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/core/components/AppChrome/News/NewsContainer.tsx:5381": [
       [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
     ],
@@ -1106,35 +1103,9 @@ exports[`better eslint`] = {
     "public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
-    "public/app/core/components/Branding/Branding.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
-    "public/app/core/components/CardButton.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/core/components/CloseButton/CloseButton.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/core/components/Divider.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/core/components/DynamicImports/SafeDynamicImport.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
-    "public/app/core/components/EmptyListCTA/EmptyListCTA.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
-    ],
-    "public/app/core/components/FolderFilter/FolderFilter.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
-    "public/app/core/components/ForgottenPassword/ForgottenPassword.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/core/components/GraphNG/GraphNG.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -1152,40 +1123,9 @@ exports[`better eslint`] = {
     "public/app/core/components/GraphNG/hooks.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
-    "public/app/core/components/Layers/LayerDragDropList.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"]
-    ],
-    "public/app/core/components/Layers/LayerName.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"]
-    ],
     "public/app/core/components/NestedFolderPicker/Trigger.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
-    "public/app/core/components/NodeGraphSettings.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
-    ],
-    "public/app/core/components/OptionsUI/color.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"]
-    ],
-    "public/app/core/components/OptionsUI/fieldColor.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/core/components/OptionsUI/registry.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
@@ -1267,17 +1207,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "77"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "78"]
     ],
-    "public/app/core/components/OptionsUI/slider.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/core/components/OptionsUI/strings.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
-    "public/app/core/components/OptionsUI/units.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/core/components/PageHeader/PageHeader.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"]

public/app/core/components/AppChrome/MegaMenu/NavFeatureHighlight.tsx

@@ -20,15 +20,15 @@ export const NavFeatureHighlight = ({ children }: Props): JSX.Element => {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    highlight: css`
+    highlight: css({
-      background-color: ${theme.colors.success.main};
+      backgroundColor: theme.colors.success.main,
-      border-radius: ${theme.shape.radius.circle};
+      borderRadius: theme.shape.radius.circle,
-      width: 6px;
+      width: '6px',
-      height: 6px;
+      height: '6px',
-      display: inline-block;
+      display: 'inline-block',
-      position: absolute;
+      position: 'absolute',
-      top: 50%;
+      top: '50%',
-      transform: translateY(-50%);
+      transform: 'translateY(-50%)',
-    `,
+    }),
   };
 };

public/app/core/components/Branding/Branding.tsx

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
 import React, { FC } from 'react';
 
 import { colorManipulator } from '@grafana/data';
-import { useTheme2, styleMixins } from '@grafana/ui';
+import { useTheme2 } from '@grafana/ui';
 
 export interface BrandComponentProps {
   className?: string;
@@ -16,28 +16,28 @@ export const LoginLogo: FC<BrandComponentProps & { logo?: string }> = ({ classNa
 const LoginBackground: FC<BrandComponentProps> = ({ className, children }) => {
   const theme = useTheme2();
 
-  const background = css`
+  const background = css({
-    &:before {
+    '&:before': {
-      content: '';
+      content: '""',
-      position: fixed;
+      position: 'fixed',
-      left: 0;
+      left: 0,
-      right: 0;
+      right: 0,
-      bottom: 0;
+      bottom: 0,
-      top: 0;
+      top: 0,
-      background: url(public/img/g8_login_${theme.isDark ? 'dark' : 'light'}.svg);
+      background: `url(public/img/g8_login_${theme.isDark ? 'dark' : 'light'}.svg)`,
-      background-position: top center;
+      backgroundPosition: 'top center',
-      background-size: auto;
+      backgroundSize: 'auto',
-      background-repeat: no-repeat;
+      backgroundRepeat: 'no-repeat',
 
-      opacity: 0;
+      opacity: 0,
-      transition: opacity 3s ease-in-out;
+      transition: 'opacity 3s ease-in-out',
 
-      @media ${styleMixins.mediaUp(theme.v1.breakpoints.md)} {
+      [theme.breakpoints.up('md')]: {
-        background-position: center;
+        backgroundPosition: 'center',
-        background-size: cover;
+        backgroundSize: 'cover',
-      }
+      },
-    }
+    },
-  `;
+  });
 
   return <div className={cx(background, className)}>{children}</div>;
 };
@@ -48,10 +48,10 @@ const MenuLogo: FC<BrandComponentProps> = ({ className }) => {
 
 const LoginBoxBackground = () => {
   const theme = useTheme2();
-  return css`
+  return css({
-    background: ${colorManipulator.alpha(theme.colors.background.primary, 0.7)};
+    background: colorManipulator.alpha(theme.colors.background.primary, 0.7),
-    background-size: cover;
+    backgroundSize: 'cover',
-  `;
+  });
 };
 
 export class Branding {

public/app/core/components/CardButton.tsx

@@ -27,27 +27,26 @@ CardButton.displayName = 'CardButton';
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    action: css`
+    action: css({
-      display: flex;
+      display: 'flex',
-      flex-direction: column;
+      flexDirection: 'column',
-      height: 100%;
+      height: '100%',
 
-      justify-self: center;
+      justifySelf: 'center',
-      cursor: pointer;
+      cursor: 'pointer',
-      background: ${theme.colors.background.secondary};
+      background: theme.colors.background.secondary,
-      border-radius: ${theme.shape.radius.default};
+      borderRadius: theme.shape.radius.default,
-      color: ${theme.colors.text.primary};
+      color: theme.colors.text.primary,
-      border: unset;
+      border: 'unset',
-      width: 100%;
+      width: '100%',
-      display: flex;
 
-      justify-content: center;
+      justifyContent: 'center',
-      align-items: center;
+      alignItems: 'center',
-      text-align: center;
+      textAlign: 'center',
 
-      &:hover {
+      '&:hover': {
-        background: ${theme.colors.emphasize(theme.colors.background.secondary)};
+        background: theme.colors.emphasize(theme.colors.background.secondary),
-      }
+      },
-    `,
+    }),
   };
 };

public/app/core/components/CloseButton/CloseButton.tsx

@@ -24,8 +24,9 @@ export const CloseButton = ({ onClick, 'aria-label': ariaLabel, style }: Props)
   );
 };
 
-const getStyles = (theme: GrafanaTheme2) => css`
+const getStyles = (theme: GrafanaTheme2) =>
-  position: absolute;
+  css({
-  right: ${theme.spacing(0.5)};
+    position: 'absolute',
-  top: ${theme.spacing(1)};
+    right: theme.spacing(0.5),
-`;
+    top: theme.spacing(1),
+  });

public/app/core/components/Divider.tsx

@@ -15,11 +15,11 @@ export const Divider = ({ hideLine = false }) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  divider: css`
+  divider: css({
-    margin: ${theme.spacing(4, 0)};
+    margin: theme.spacing(4, 0),
-  `,
+  }),
-  dividerHideLine: css`
+  dividerHideLine: css({
-    border: none;
+    border: 'none',
-    margin: ${theme.spacing(3, 0)};
+    margin: theme.spacing(3, 0),
-  `,
+  }),
 });

public/app/core/components/EmptyListCTA/EmptyListCTA.tsx

@@ -19,14 +19,14 @@ export interface Props {
   infoBoxTitle?: string;
 }
 
-const ctaStyle = css`
+const ctaStyle = css({
-  text-align: center;
+  textAlign: 'center',
-`;
+});
 
-const infoBoxStyles = css`
+const infoBoxStyles = css({
-  max-width: 700px;
+  maxWidth: '700px',
-  margin: 0 auto;
+  margin: '0 auto',
-`;
+});
 
 const EmptyListCTA = ({
   title,
@@ -71,9 +71,9 @@ const EmptyListCTA = ({
   };
 
   const ctaElementClassName = !footer()
-    ? css`
+    ? css({
-        margin-bottom: 20px;
+        marginBottom: '20px',
-      `
+      })
     : '';
 
   const ButtonEl = buttonLink ? LinkButton : Button;

public/app/core/components/FolderFilter/FolderFilter.tsx

@@ -85,18 +85,18 @@ async function getFoldersAsOptions(
 
 function getStyles(theme: GrafanaTheme2) {
   return {
-    container: css`
+    container: css({
-      label: container;
+      label: 'container',
-      position: relative;
+      position: 'relative',
-      min-width: 180px;
+      minWidth: '180px',
-      flex-grow: 1;
+      flexGrow: 1,
-    `,
+    }),
-    clear: css`
+    clear: css({
-      label: clear;
+      label: 'clear',
-      font-size: ${theme.spacing(1.5)};
+      fontSize: theme.spacing(1.5),
-      position: absolute;
+      position: 'absolute',
-      top: -${theme.spacing(4.5)};
+      top: -theme.spacing(4.5),
-      right: 0;
+      right: 0,
-    `,
+    }),
   };
 }

public/app/core/components/ForgottenPassword/ForgottenPassword.tsx

@@ -10,13 +10,14 @@ interface EmailDTO {
   userOrEmail: string;
 }
 
-const paragraphStyles = (theme: GrafanaTheme2) => css`
+const paragraphStyles = (theme: GrafanaTheme2) =>
-  color: ${theme.colors.text.secondary};
+  css({
-  font-size: ${theme.typography.bodySmall.fontSize};
+    color: theme.colors.text.secondary,
-  font-weight: ${theme.typography.fontWeightRegular};
+    fontSize: theme.typography.bodySmall.fontSize,
-  margin-top: ${theme.spacing(1)};
+    fontWeight: theme.typography.fontWeightRegular,
-  display: block;
+    marginTop: theme.spacing(1),
-`;
+    display: 'block',
+  });
 
 export const ForgottenPassword = () => {
   const [emailSent, setEmailSent] = useState(false);

public/app/core/components/Layers/LayerDragDropList.tsx

@@ -127,49 +127,49 @@ LayerDragDropList.defaultProps = {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  wrapper: css`
+  wrapper: css({
-    margin-bottom: ${theme.spacing(2)};
+    marginBottom: theme.spacing(2),
-  `,
+  }),
-  row: css`
+  row: css({
-    padding: ${theme.spacing(0.5, 1)};
+    padding: theme.spacing(0.5, 1),
-    border-radius: ${theme.shape.radius.default};
+    borderRadius: theme.shape.radius.default,
-    background: ${theme.colors.background.secondary};
+    background: theme.colors.background.secondary,
-    min-height: ${theme.spacing(4)};
+    minHeight: theme.spacing(4),
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-    justify-content: space-between;
+    justifyContent: 'space-between',
-    margin-bottom: 3px;
+    marginBottom: '3px',
-    cursor: pointer;
+    cursor: 'pointer',
 
-    border: 1px solid ${theme.components.input.borderColor};
+    border: `1px solid ${theme.components.input.borderColor}`,
-    &:hover {
+    '&:hover': {
-      border: 1px solid ${theme.components.input.borderHover};
+      border: `1px solid ${theme.components.input.borderHover}`,
-    }
+    },
-  `,
+  }),
-  sel: css`
+  sel: css({
-    border: 1px solid ${theme.colors.primary.border};
+    border: `1px solid ${theme.colors.primary.border}`,
-    &:hover {
+    '&:hover': {
-      border: 1px solid ${theme.colors.primary.border};
+      border: `1px solid ${theme.colors.primary.border}`,
-    }
+    },
-  `,
+  }),
-  dragIcon: css`
+  dragIcon: css({
-    cursor: drag;
+    cursor: 'drag',
-  `,
+  }),
-  actionIcon: css`
+  actionIcon: css({
-    color: ${theme.colors.text.secondary};
+    color: theme.colors.text.secondary,
-    &:hover {
+    '&:hover': {
-      color: ${theme.colors.text};
+      color: theme.colors.text.primary,
-    }
+    },
-  `,
+  }),
-  typeWrapper: css`
+  typeWrapper: css({
-    color: ${theme.colors.primary.text};
+    color: theme.colors.primary.text,
-    margin-right: 5px;
+    marginRight: '5px',
-  `,
+  }),
-  textWrapper: css`
+  textWrapper: css({
-    display: flex;
+    display: 'flex',
-    align-items: center;
+    alignItems: 'center',
-    flex-grow: 1;
+    flexGrow: 1,
-    overflow: hidden;
+    overflow: 'hidden',
-    margin-right: ${theme.spacing(1)};
+    marginRight: theme.spacing(1),
-  `,
+  }),
 });

public/app/core/components/Layers/LayerName.tsx

@@ -105,55 +105,54 @@ export const LayerName = ({ name, onChange, verifyLayerNameUniqueness, overrideS
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    wrapper: css`
+    wrapper: css({
-      label: Wrapper;
+      label: 'Wrapper',
-      display: flex;
+      display: 'flex',
-      align-items: center;
+      alignItems: 'center',
-      margin-left: ${theme.spacing(0.5)};
+      marginLeft: theme.spacing(0.5),
-    `,
+    }),
-    layerNameWrapper: css`
+    layerNameWrapper: css({
-      display: flex;
+      display: 'flex',
-      cursor: pointer;
+      cursor: 'pointer',
-      border: 1px solid transparent;
+      border: '1px solid transparent',
-      border-radius: ${theme.shape.borderRadius(2)};
+      borderRadius: theme.shape.radius.default,
-      align-items: center;
+      alignItems: 'center',
-      padding: 0 0 0 ${theme.spacing(0.5)};
+      padding: `0 0 0 ${theme.spacing(0.5)}`,
-      margin: 0;
+      margin: 0,
-      background: transparent;
+      background: 'transparent',
 
-      &:hover {
+      '&:hover': {
-        background: ${theme.colors.action.hover};
+        background: theme.colors.action.hover,
-        border: 1px dashed ${theme.colors.border.strong};
+        border: `1px dashed ${theme.colors.border.strong}`,
-      }
+      },
 
-      &:focus {
+      '&:focus': {
-        border: 2px solid ${theme.colors.primary.border};
+        border: `2px solid ${theme.colors.primary.border}`,
-      }
+      },
 
-      &:hover,
+      '&:hover, &:focus': {
-      &:focus {
+        '.query-name-edit-icon': {
-        .query-name-edit-icon {
+          visibility: 'visible',
-          visibility: visible;
+        },
-        }
+      },
-      }
+    }),
-    `,
+    layerName: css({
-    layerName: css`
+      fontWeight: theme.typography.fontWeightMedium,
-      font-weight: ${theme.typography.fontWeightMedium};
+      color: theme.colors.primary.text,
-      color: ${theme.colors.primary.text};
+      cursor: 'pointer',
-      cursor: pointer;
+      overflow: 'hidden',
-      overflow: hidden;
+      marginLeft: theme.spacing(0.5),
-      margin-left: ${theme.spacing(0.5)};
+    }),
-    `,
     layerEditIcon: cx(
-      css`
+      css({
-        margin-left: ${theme.spacing(2)};
+        marginLeft: theme.spacing(2),
-        visibility: hidden;
+        visibility: 'hidden',
-      `,
+      }),
       'query-name-edit-icon'
     ),
-    layerNameInput: css`
+    layerNameInput: css({
-      max-width: 300px;
+      maxWidth: '300px',
-      margin: -4px 0;
+      margin: '-4px 0',
-    `,
+    }),
   };
 };

public/app/core/components/Login/LoginLayout.tsx

@@ -145,7 +145,7 @@ export const getLoginStyles = (theme: GrafanaTheme2) => {
       justifyContent: 'flex-start',
       zIndex: 1,
       minHeight: 320,
-      borderRadius: theme.shape.borderRadius(4),
+      borderRadius: theme.shape.radius.default,
       padding: theme.spacing(2, 0),
       opacity: 0,
       transition: 'opacity 0.5s ease-in-out',
@@ -157,13 +157,12 @@ export const getLoginStyles = (theme: GrafanaTheme2) => {
     }),
     loginOuterBox: css({
       display: 'flex',
-      overflowU: 'hidden',
+      overflowY: 'hidden',
       alignItems: 'center',
       justifyContent: 'center',
     }),
     loginInnerBox: css({
       padding: theme.spacing(0, 2, 2, 2),
-
       display: 'flex',
       flexDirection: 'column',
       alignItems: 'center',

public/app/core/components/NodeGraphSettings.tsx

@@ -70,17 +70,17 @@ export const NodeGraphSection = ({ options, onOptionsChange }: DataSourcePluginO
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  infoText: css`
+  infoText: css({
-    label: infoText;
+    label: 'infoText',
-    padding-bottom: ${theme.spacing(2)};
+    paddingBottom: theme.spacing(2),
-    color: ${theme.colors.text.secondary};
+    color: theme.colors.text.secondary,
-  `,
+  }),
-  container: css`
+  container: css({
-    label: container;
+    label: 'container',
-    width: 100%;
+    width: '100%',
-  `,
+  }),
-  row: css`
+  row: css({
-    label: row;
+    label: 'row',
-    align-items: baseline;
+    alignItems: 'baseline',
-  `,
+  }),
 });

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

@@ -71,30 +71,30 @@ export const ColorValueEditor = ({ value, settings, onChange, details }: Props)
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    spot: css`
+    spot: css({
-      cursor: pointer;
+      cursor: 'pointer',
-      color: ${theme.colors.text};
+      color: theme.colors.text.primary,
-      background: ${theme.components.input.background};
+      background: theme.components.input.background,
-      padding: 3px;
+      padding: '3px',
-      height: ${theme.v1.spacing.formInputHeight}px;
+      height: theme.v1.spacing.formInputHeight,
-      border: 1px solid ${theme.components.input.borderColor};
+      border: `1px solid ${theme.components.input.borderColor}`,
-      display: flex;
+      display: 'flex',
-      flex-direction: row;
+      flexDirection: 'row',
-      align-items: center;
+      alignItems: 'center',
-      align-content: flex-end;
+      alignContent: 'flex-end',
-      &:hover {
+      '&:hover': {
-        border: 1px solid ${theme.components.input.borderHover};
+        border: `1px solid ${theme.components.input.borderHover}`,
-      }
+      },
-    `,
+    }),
-    colorPicker: css`
+    colorPicker: css({
-      padding: 0 ${theme.spacing(1)};
+      padding: `0 ${theme.spacing(1)}`,
-    `,
+    }),
-    colorText: css`
+    colorText: css({
-      flex-grow: 2;
+      flexGrow: 2,
-    `,
+    }),
-    placeholderText: css`
+    placeholderText: css({
-      flex-grow: 2;
+      flexGrow: 2,
-      color: ${theme.colors.text.secondary};
+      color: theme.colors.text.secondary,
-    `,
+    }),
   };
 };

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

@@ -150,12 +150,12 @@ const FieldColorModeViz: FC<ModeProps> = ({ mode, theme }) => {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    group: css`
+    group: css({
-      display: flex;
+      display: 'flex',
-    `,
+    }),
-    select: css`
+    select: css({
-      margin-right: 8px;
+      marginRight: theme.spacing(1),
-      flex-grow: 1;
+      flexGrow: 1,
-    `,
+    }),
   };
 };

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

@@ -130,13 +130,13 @@ function getTextWidth(text: string, font: string): number | null {
 
 const getStylesSlider = (theme: GrafanaTheme2, width: number) => {
   return {
-    numberInputWrapper: css`
+    numberInputWrapper: css({
-      margin-left: ${theme.spacing(3)};
+      marginLeft: theme.spacing(3),
-      max-height: 32px;
+      maxHeight: '32px',
-      max-width: ${width}px;
+      maxWidth: width,
-      min-width: ${width}px;
+      minWidth: width,
-      overflow: visible;
+      overflow: 'visible',
-      width: 100%;
+      width: '100%',
-    `,
+    }),
   };
 };

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

@@ -92,19 +92,19 @@ export class StringArrayEditor extends React.PureComponent<Props, State> {
 
 const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
-    textInput: css`
+    textInput: css({
-      margin-bottom: 5px;
+      marginBottom: '5px',
-      &:hover {
+      '&:hover': {
-        border: 1px solid ${theme.components.input.borderHover};
+        border: `1px solid ${theme.components.input.borderHover}`,
-      }
+      },
-    `,
+    }),
-    trashIcon: css`
+    trashIcon: css({
-      color: ${theme.colors.text.secondary};
+      color: theme.colors.text.secondary,
-      cursor: pointer;
+      cursor: 'pointer',
 
-      &:hover {
+      '&:hover': {
-        color: ${theme.colors.text};
+        color: theme.colors.text.primary,
-      }
+      },
-    `,
+    }),
   };
 });

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

@@ -22,14 +22,14 @@ export function UnitValueEditor({ value, onChange, item }: Props) {
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  wrapper: css`
+  wrapper: css({
-    width: 100%;
+    width: '100%',
-    display: flex;
+    display: 'flex',
-    flex-direction: rows;
+    flexDirection: 'row',
-    align-items: center;
+    alignItems: 'center',
-  `,
+  }),
-  first: css`
+  first: css({
-    margin-right: 8px;
+    marginRight: theme.spacing(1),
-    flex-grow: 2;
+    flexGrow: 2,
-  `,
+  }),
 });