Chore: Rewrite dashboard component css using object styles (#86930)

.betterer.results

@@ -2495,17 +2495,8 @@ exports[`better eslint`] = {
     "public/app/features/dashboard/components/AddLibraryPanelWidget/index.ts:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`./AddLibraryPanelWidget\`)", "0"]
     ],
-    "public/app/features/dashboard/components/AddWidgetModal/AddWidgetModal.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/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
-    "public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
+      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
     ],
     "public/app/features/dashboard/components/AnnotationSettings/index.tsx:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`./AnnotationSettingsEdit\`)", "0"],
@@ -2534,20 +2525,12 @@ exports[`better eslint`] = {
     "public/app/features/dashboard/components/DashExportModal/index.ts:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`./DashboardExporter\`)", "0"]
     ],
-    "public/app/features/dashboard/components/DashNav/DashNavButton.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/features/dashboard/components/DashNav/index.ts:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`DashNav\`)", "0"]
     ],
-    "public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx:5381": [
       [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"]
+      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
     ],
     "public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.test.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
@@ -2569,23 +2552,14 @@ exports[`better eslint`] = {
     "public/app/features/dashboard/components/DashboardRow/index.ts:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`./DashboardRow\`)", "0"]
     ],
-    "public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/features/dashboard/components/DashboardSettings/VersionsSettings.tsx:5381": [
       [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
     ],
     "public/app/features/dashboard/components/DashboardSettings/index.ts:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`./DashboardSettings\`)", "0"]
     ],
-    "public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/features/dashboard/components/HelpWizard/HelpWizard.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "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, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
     ],
     "public/app/features/dashboard/components/Inspector/PanelInspector.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
@@ -2595,81 +2569,26 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not re-export imported variable (\`./LinkSettingsList\`)", "1"]
     ],
     "public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
-    ],
-    "public/app/features/dashboard/components/PanelEditor/OptionsPane.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, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
     ],
     "public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
-    ],
-    "public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.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"],
-      [0, 0, 0, "Styles should be written using objects.", "7"],
-      [0, 0, 0, "Styles should be written using objects.", "8"],
-      [0, 0, 0, "Styles should be written using objects.", "9"]
+      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"]
     ],
     "public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx:5381": [
       [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "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"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
     "public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx:5381": [
       [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "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"],
-      [0, 0, 0, "Styles should be written using objects.", "7"],
-      [0, 0, 0, "Styles should be written using objects.", "8"],
-      [0, 0, 0, "Styles should be written using objects.", "9"],
-      [0, 0, 0, "Styles should be written using objects.", "10"],
-      [0, 0, 0, "Styles should be written using objects.", "11"]
-    ],
-    "public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.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, "Do not use any type assertions.", "1"]
     ],
     "public/app/features/dashboard/components/PanelEditor/PanelNotSupported.tsx:5381": [
       [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
       [0, 0, 0, "\'Layout\' import from \'@grafana/ui/src/components/Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
     ],
-    "public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx:5381": [
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "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"],
-      [0, 0, 0, "Styles should be written using objects.", "7"],
-      [0, 0, 0, "Styles should be written using objects.", "8"],
-      [0, 0, 0, "Styles should be written using objects.", "9"],
-      [0, 0, 0, "Styles should be written using objects.", "10"]
+      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
     ],
     "public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
@@ -2687,27 +2606,10 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "4"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "5"]
     ],
-    "public/app/features/dashboard/components/PublicDashboardNotAvailable/PublicDashboardNotAvailable.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/features/dashboard/components/RowOptions/RowOptionsModal.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/features/dashboard/components/SaveDashboard/SaveDashboardButton.tsx:5381": [
       [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
       [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"]
     ],
-    "public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.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/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.test.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
@@ -2715,12 +2617,10 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"],
       [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "2"],
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"]
+      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "3"]
     ],
     "public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx:5381": [
-      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
+      [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
     ],
     "public/app/features/dashboard/components/SaveDashboard/types.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
@@ -2733,70 +2633,26 @@ exports[`better eslint`] = {
     ],
     "public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/ConfigPublicDashboard.tsx:5381": [
       [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui/src\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "\'Layout\' import from \'@grafana/ui/src/components/Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "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, "\'Layout\' import from \'@grafana/ui/src/components/Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
     ],
     "public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/Configuration.tsx:5381": [
       [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui/src\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
       [0, 0, 0, "\'Layout\' import from \'@grafana/ui/src/components/Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
     ],
-    "public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/EmailSharingConfiguration.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"]
-    ],
-    "public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/SettingsSummary.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/AcknowledgeCheckboxes.tsx:5381": [
       [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui/src\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
-      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui/src\' is restricted from being used by a pattern. Use Stack component instead.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
-    ],
-    "public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/CreatePublicDashboard.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"]
-    ],
-    "public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ModalAlerts/UnsupportedDataSourcesAlert.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
+      [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui/src\' is restricted from being used by a pattern. Use Stack component instead.", "1"]
     ],
     "public/app/features/dashboard/components/ShareModal/index.ts:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`./ShareModal\`)", "0"],
       [0, 0, 0, "Do not use export all (\`export * from ...\`)", "1"]
     ],
-    "public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/features/dashboard/components/SubMenu/DashboardLinksDashboard.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
-    "public/app/features/dashboard/components/SubMenu/SubMenu.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "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"],
-      [0, 0, 0, "Styles should be written using objects.", "7"],
-      [0, 0, 0, "Styles should be written using objects.", "8"],
-      [0, 0, 0, "Styles should be written using objects.", "9"],
-      [0, 0, 0, "Styles should be written using objects.", "10"]
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],
     "public/app/features/dashboard/components/TransformationsEditor/TransformationPicker.tsx:5381": [
       [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]

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

@@ -68,19 +68,18 @@ export const AddWidgetModal = () => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  modal: css`
-    width: 65%;
-    max-width: 960px;
-
-    ${theme.breakpoints.down('md')} {
-      width: 100%;
-    }
-  `,
-  searchInput: css`
-    margin-bottom: ${theme.spacing(2)};
-  `,
-  grid: css`
-    display: grid;
-    grid-gap: ${theme.spacing(1)};
-  `,
+  modal: css({
+    width: '65%',
+    maxWidth: '960px',
+    [theme.breakpoints.down('md')]: {
+      width: '100%',
+    },
+  }),
+  searchInput: css({
+    marginBottom: theme.spacing(2),
+  }),
+  grid: css({
+    display: 'grid',
+    gridGap: theme.spacing(1),
+  }),
 });

public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx

@@ -265,9 +265,9 @@ const getStyles = (theme: GrafanaTheme2) => {
       maxWidth: theme.spacing(60),
       marginBottom: theme.spacing(2),
     }),
-    select: css`
-      margin-top: 8px;
-    `,
+    select: css({
+      marginTop: '8px',
+    }),
   };
 };
 

public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx

@@ -154,8 +154,8 @@ export const AnnotationSettingsList = ({ dashboard, onNew, onEdit }: Props) => {
 };
 
 const getStyles = () => ({
-  table: css`
-    width: 100%;
-    overflow-x: scroll;
-  `,
+  table: css({
+    width: '100%',
+    overflowX: 'scroll',
+  }),
 });

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

@@ -37,8 +37,8 @@ export const DashNavButton = ({ icon, iconType, iconSize, tooltip, onClick, chil
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  noBorderContainer: css`
-    padding: 0 ${theme.spacing(0.5)};
-    display: flex;
-  `,
+  noBorderContainer: css({
+    padding: `0 ${theme.spacing(0.5)}`,
+    display: 'flex',
+  }),
 });

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

@@ -24,10 +24,10 @@ export const DashboardFailed = ({ initError }: Props) => {
 };
 
 export const styles = {
-  dashboardLoading: css`
-    height: 60vh;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  `,
+  dashboardLoading: css({
+    height: '60vh',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }),
 };

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

@@ -44,16 +44,16 @@ export const getStyles = (theme: GrafanaTheme2) => {
   `;
 
   return {
-    dashboardLoading: css`
-      height: 60vh;
-      display: flex;
-      opacity: 0%;
-      align-items: center;
-      justify-content: center;
-      animation: ${invisibleToVisible} 0s step-end ${slowStartThreshold} 1 normal forwards;
-    `,
-    dashboardLoadingText: css`
-      font-size: ${theme.typography.h4.fontSize};
-    `,
+    dashboardLoading: css({
+      height: '60vh',
+      display: 'flex',
+      opacity: '0%',
+      alignItems: 'center',
+      justifyContent: 'center',
+      animation: `${invisibleToVisible} 0s step-end ${slowStartThreshold} 1 normal forwards`,
+    }),
+    dashboardLoadingText: css({
+      fontSize: theme.typography.h4.fontSize,
+    }),
   };
 };

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

@@ -18,7 +18,7 @@ export const ListNewButton = ({ children, ...restProps }: Props) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  buttonWrapper: css`
-    padding: ${theme.spacing(3)} 0;
-  `,
+  buttonWrapper: css({
+    padding: `${theme.spacing(3)} 0`,
+  }),
 });

public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx

@@ -60,9 +60,9 @@ const ProvisionedDeleteModal = ({ hideModal, provisionedId }: { hideModal(): voi
     title="Cannot delete provisioned dashboard"
     icon="trash-alt"
     onDismiss={hideModal}
-    className={css`
-      width: 500px;
-    `}
+    className={css({
+      width: '500px',
+    })}
   >
     <p>
       This dashboard is managed by Grafana provisioning and cannot be deleted. Remove the dashboard from the config file

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

@@ -212,24 +212,22 @@ export function HelpWizard({ panel, plugin, onClose }: Props) {
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  code: css`
-    flex-grow: 1;
-    height: 100%;
-    overflow: scroll;
-  `,
-  field: css`
-    width: 100%;
-  `,
-  opts: css`
-    display: flex;
-    display: flex;
-    width: 100%;
-    flex-grow: 0;
-    align-items: center;
-    justify-content: flex-end;
-
-    button {
-      margin-left: 8px;
-    }
-  `,
+  code: css({
+    flexGrow: 1,
+    height: '100%',
+    overflow: 'scroll',
+  }),
+  field: css({
+    width: '100%',
+  }),
+  opts: css({
+    display: 'flex',
+    width: '100%',
+    flexGrow: 0,
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    button: {
+      marginLeft: '8px',
+    },
+  }),
 });

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

@@ -83,10 +83,10 @@ export const DynamicConfigValueEditor = ({
       <OptionsPaneCategory
         id={item.name}
         renderTitle={renderLabel(false, true)}
-        className={css`
-          padding-left: 0;
-          padding-right: 0;
-        `}
+        className={css({
+          paddingLeft: 0,
+          paddingRight: 0,
+        })}
         isNested
         isOpenDefault={property.value !== undefined}
       >
@@ -130,13 +130,11 @@ export const DynamicConfigValueEditor = ({
   );
 };
 
-const getStyles = (theme: GrafanaTheme2) => {
-  return {
-    collapsibleOverrideEditor: css`
-      label: collapsibleOverrideEditor;
-      & + .dynamicConfigValueEditor--nonCollapsible {
-        margin-top: ${theme.spacing(1)};
-      }
-    `,
-  };
-};
+const getStyles = (theme: GrafanaTheme2) => ({
+  collapsibleOverrideEditor: css({
+    label: 'collapsibleOverrideEditor',
+    '& + .dynamicConfigValueEditor--nonCollapsible': {
+      marginTop: theme.spacing(1),
+    },
+  }),
+});

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

@@ -53,42 +53,40 @@ export const OptionsPane = ({
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    wrapper: css`
-      height: 100%;
-      width: 100%;
-      display: flex;
-      flex: 1 1 0;
-      flex-direction: column;
-      padding: 0;
-    `,
-    optionsWrapper: css`
-      flex-grow: 1;
-      min-height: 0;
-    `,
-    vizButtonWrapper: css`
-      padding: 0 ${theme.spacing(2, 2)} 0;
-    `,
-    legacyOptions: css`
-      label: legacy-options;
-      .panel-options-grid {
-        display: flex;
-        flex-direction: column;
-      }
-      .panel-options-group {
-        margin-bottom: 0;
-      }
-      .panel-options-group__body {
-        padding: ${theme.spacing(2)} 0;
-      }
-
-      .section {
-        display: block;
-        margin: ${theme.spacing(2)} 0;
-
-        &:first-child {
-          margin-top: 0;
-        }
-      }
-    `,
+    wrapper: css({
+      height: '100%',
+      width: '100%',
+      display: 'flex',
+      flex: '1 1 0',
+      flexDirection: 'column',
+      padding: 0,
+    }),
+    optionsWrapper: css({
+      flexGrow: 1,
+      minHeight: 0,
+    }),
+    vizButtonWrapper: css({
+      padding: `0 ${theme.spacing(2, 2)} 0`,
+    }),
+    legacyOptions: css({
+      label: 'legacy-options',
+      '.panel-options-grid': {
+        display: 'flex',
+        flexDirection: 'column',
+      },
+      '.panel-options-group': {
+        marginBottom: 0,
+      },
+      '.panel-options-group__body': {
+        padding: `${theme.spacing(2)} 0`,
+      },
+      '.section': {
+        display: 'block',
+        margin: `${theme.spacing(2)} 0`,
+        '&:first-child': {
+          marginTop: 0,
+        },
+      },
+    }),
   };
 };

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

@@ -120,9 +120,9 @@ function OptionPaneLabel({ title, description, overrides, addon }: OptionPanelLa
 
 function getLabelStyles(theme: GrafanaTheme2) {
   return {
-    container: css`
-      display: flex;
-      justify-content: space-between;
-    `,
+    container: css({
+      display: 'flex',
+      justifyContent: 'space-between',
+    }),
   };
 }

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

@@ -174,55 +174,55 @@ export function renderSearchHits(
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  wrapper: css`
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    flex: 1 1 0;
-
-    .search-fragment-highlight {
-      color: ${theme.colors.warning.text};
-      background: transparent;
-    }
-  `,
-  searchBox: css`
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-  `,
-  formRow: css`
-    margin-bottom: ${theme.spacing(1)};
-  `,
-  formBox: css`
-    padding: ${theme.spacing(1)};
-    background: ${theme.colors.background.primary};
-    border: 1px solid ${theme.components.panel.borderColor};
-    border-top-left-radius: ${theme.shape.borderRadius(1.5)};
-    border-bottom: none;
-  `,
-  closeButton: css`
-    margin-left: ${theme.spacing(1)};
-  `,
-  searchHits: css`
-    padding: ${theme.spacing(1, 1, 0, 1)};
-  `,
-  scrollWrapper: css`
-    flex-grow: 1;
-    min-height: 0;
-  `,
-  searchNotice: css`
-    font-size: ${theme.typography.size.sm};
-    color: ${theme.colors.text.secondary};
-    padding: ${theme.spacing(1)};
-    text-align: center;
-  `,
-  mainBox: css`
-    background: ${theme.colors.background.primary};
-    border: 1px solid ${theme.components.panel.borderColor};
-    border-top: none;
-    flex-grow: 1;
-  `,
-  angularDeprecationWrapper: css`
-    padding: ${theme.spacing(1)};
-  `,
+  wrapper: css({
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: '1 1 0',
+
+    '.search-fragment-highlight': {
+      color: theme.colors.warning.text,
+      background: 'transparent',
+    },
+  }),
+  searchBox: css({
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: 0,
+  }),
+  formRow: css({
+    marginBottom: theme.spacing(1),
+  }),
+  formBox: css({
+    padding: theme.spacing(1),
+    background: theme.colors.background.primary,
+    border: `1px solid ${theme.components.panel.borderColor}`,
+    borderTopLeftRadius: theme.shape.borderRadius(1.5),
+    borderBottom: 'none',
+  }),
+  closeButton: css({
+    marginLeft: theme.spacing(1),
+  }),
+  searchHits: css({
+    padding: theme.spacing(1, 1, 0, 1),
+  }),
+  scrollWrapper: css({
+    flexGrow: 1,
+    minHeight: 0,
+  }),
+  searchNotice: css({
+    fontSize: theme.typography.size.sm,
+    color: theme.colors.text.secondary,
+    padding: theme.spacing(1),
+    textAlign: 'center',
+  }),
+  mainBox: css({
+    background: theme.colors.background.primary,
+    border: `1px solid ${theme.components.panel.borderColor}`,
+    borderTop: 'none',
+    flexGrow: 1,
+  }),
+  angularDeprecationWrapper: css({
+    padding: theme.spacing(1),
+  }),
 });

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

@@ -47,23 +47,23 @@ OverrideCategoryTitle.displayName = 'OverrideTitle';
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    matcherUi: css`
-      padding: ${theme.spacing(1)};
-    `,
-    propertyPickerWrapper: css`
-      margin-top: ${theme.spacing(2)};
-    `,
-    overrideDetails: css`
-      font-size: ${theme.typography.bodySmall.fontSize};
-      color: ${theme.colors.text.secondary};
-      font-weight: ${theme.typography.fontWeightRegular};
-    `,
-    options: css`
-      overflow: hidden;
-      padding-right: ${theme.spacing(4)};
-    `,
-    unknownLabel: css`
-      margin-bottom: 0;
-    `,
+    matcherUi: css({
+      padding: theme.spacing(1),
+    }),
+    propertyPickerWrapper: css({
+      marginTop: theme.spacing(2),
+    }),
+    overrideDetails: css({
+      fontSize: theme.typography.bodySmall.fontSize,
+      color: theme.colors.text.secondary,
+      fontWeight: theme.typography.fontWeightRegular,
+    }),
+    options: css({
+      overflow: 'hidden',
+      paddingRight: theme.spacing(4),
+    }),
+    unknownLabel: css({
+      marginBottom: 0,
+    }),
   };
 };

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

@@ -502,64 +502,64 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2, props: Props) => {
       display: 'flex',
       paddingTop: theme.spacing(2),
     }),
-    verticalSplitPanesWrapper: css`
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      width: 100%;
-      position: relative;
-    `,
-    mainPaneWrapper: css`
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-      width: 100%;
-      padding-right: ${uiState.isPanelOptionsVisible ? 0 : paneSpacing};
-    `,
-    variablesWrapper: css`
-      label: variablesWrapper;
-      display: flex;
-      flex-grow: 1;
-      flex-wrap: wrap;
-      gap: ${theme.spacing(1, 2)};
-    `,
-    panelWrapper: css`
-      flex: 1 1 0;
-      min-height: 0;
-      width: 100%;
-      padding-left: ${paneSpacing};
-    `,
-    tabsWrapper: css`
-      height: 100%;
-      width: 100%;
-    `,
-    panelToolbar: css`
-      display: flex;
-      padding: 0 0 ${paneSpacing} ${paneSpacing};
-      justify-content: space-between;
-      flex-wrap: wrap;
-    `,
-    angularWarning: css`
-      display: flex;
-      height: theme.spacing(4);
-      align-items: center;
-    `,
-    toolbarLeft: css`
-      padding-left: ${theme.spacing(1)};
-    `,
-    centeringContainer: css`
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: relative;
-      flex-direction: column;
-    `,
-    onlyPanel: css`
-      height: 100%;
-      position: absolute;
-      overflow: hidden;
-      width: 100%;
-    `,
+    verticalSplitPanesWrapper: css({
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      width: '100%',
+      position: 'relative',
+    }),
+    mainPaneWrapper: css({
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+      width: '100%',
+      paddingRight: `${uiState.isPanelOptionsVisible ? 0 : paneSpacing}`,
+    }),
+    variablesWrapper: css({
+      label: 'variablesWrapper',
+      display: 'flex',
+      flexGrow: 1,
+      flexWrap: 'wrap',
+      gap: theme.spacing(1, 2),
+    }),
+    panelWrapper: css({
+      flex: '1 1 0',
+      minHeight: 0,
+      width: '100%',
+      paddingLeft: paneSpacing,
+    }),
+    tabsWrapper: css({
+      height: '100%',
+      width: '100%',
+    }),
+    panelToolbar: css({
+      display: 'flex',
+      padding: `0 0 ${paneSpacing} ${paneSpacing}`,
+      justifyContent: 'space-between',
+      flexWrap: 'wrap',
+    }),
+    angularWarning: css({
+      display: 'flex',
+      height: theme.spacing(4),
+      alignItems: 'center',
+    }),
+    toolbarLeft: css({
+      paddingLeft: theme.spacing(1),
+    }),
+    centeringContainer: css({
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'relative',
+      flexDirection: 'column',
+    }),
+    onlyPanel: css({
+      height: '100%',
+      position: 'absolute',
+      overflow: 'hidden',
+      width: '100%',
+    }),
   };
 });
 

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

@@ -113,25 +113,25 @@ function getCounter(panel: PanelModel, tab: PanelEditorTab) {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    wrapper: css`
-      display: flex;
-      flex-direction: column;
-      height: 100%;
-    `,
-    tabBar: css`
-      padding-left: ${theme.spacing(2)};
-    `,
-    tabContent: css`
-      padding: 0;
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      min-height: 0;
-      background: ${theme.colors.background.primary};
-      border: 1px solid ${theme.components.panel.borderColor};
-      border-left: none;
-      border-bottom: none;
-      border-top-right-radius: ${theme.shape.borderRadius(1.5)};
-    `,
+    wrapper: css({
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%',
+    }),
+    tabBar: css({
+      paddingLeft: theme.spacing(2),
+    }),
+    tabContent: css({
+      padding: 0,
+      display: 'flex',
+      flexDirection: 'column',
+      flex: 1,
+      minHeight: 0,
+      background: theme.colors.background.primary,
+      border: `1px solid ${theme.components.panel.borderColor}`,
+      borderLeft: 'none',
+      borderBottom: 'none',
+      borderTopRightRadius: theme.shape.borderRadius(1.5),
+    }),
   };
 };

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

@@ -65,11 +65,11 @@ export const VisualizationButton = ({ panel }: Props) => {
 VisualizationButton.displayName = 'VisualizationTab';
 
 const styles = {
-  wrapper: css`
-    display: flex;
-    flex-direction: column;
-  `,
-  vizButton: css`
-    text-align: left;
-  `,
+  wrapper: css({
+    display: 'flex',
+    flexDirection: 'column',
+  }),
+  vizButton: css({
+    textAlign: 'left',
+  }),
 };

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

@@ -143,46 +143,46 @@ VisualizationSelectPane.displayName = 'VisualizationSelectPane';
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    icon: css`
-      color: ${theme.v1.palette.gray33};
-    `,
-    wrapper: css`
-      display: flex;
-      flex-direction: column;
-      flex: 1 1 0;
-      height: 100%;
-    `,
-    vizButton: css`
-      text-align: left;
-    `,
-    scrollWrapper: css`
-      flex-grow: 1;
-      min-height: 0;
-    `,
-    scrollContent: css`
-      padding: ${theme.spacing(1)};
-    `,
-    openWrapper: css`
-      display: flex;
-      flex-direction: column;
-      flex: 1 1 100%;
-      height: 100%;
-      background: ${theme.colors.background.primary};
-      border: 1px solid ${theme.colors.border.weak};
-    `,
-    searchRow: css`
-      display: flex;
-      margin-bottom: ${theme.spacing(1)};
-    `,
-    closeButton: css`
-      margin-left: ${theme.spacing(1)};
-    `,
-    customFieldMargin: css`
-      margin-bottom: ${theme.spacing(1)};
-    `,
-    formBox: css`
-      padding: ${theme.spacing(1)};
-      padding-bottom: 0;
-    `,
+    icon: css({
+      color: theme.v1.palette.gray33,
+    }),
+    wrapper: css({
+      display: 'flex',
+      flexDirection: 'column',
+      flex: '1 1 0',
+      height: '100%',
+    }),
+    vizButton: css({
+      textAlign: 'left',
+    }),
+    scrollWrapper: css({
+      flexGrow: 1,
+      minHeight: 0,
+    }),
+    scrollContent: css({
+      padding: theme.spacing(1),
+    }),
+    openWrapper: css({
+      display: 'flex',
+      flexDirection: 'column',
+      flex: '1 1 100%',
+      height: '100%',
+      background: theme.colors.background.primary,
+      border: `1px solid ${theme.colors.border.weak}`,
+    }),
+    searchRow: css({
+      display: 'flex',
+      marginBottom: theme.spacing(1),
+    }),
+    closeButton: css({
+      marginLeft: theme.spacing(1),
+    }),
+    customFieldMargin: css({
+      marginBottom: theme.spacing(1),
+    }),
+    formBox: css({
+      padding: theme.spacing(1),
+      paddingBottom: 0,
+    }),
   };
 };

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

@@ -35,34 +35,34 @@ export const PublicDashboardNotAvailable = ({ paused }: { paused?: boolean }) =>
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  container: css`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
+  container: css({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: '100%',
 
-    :before {
-      opacity: 1;
-    }
-  `,
-  box: css`
-    width: 608px;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    gap: ${theme.spacing(4)};
-    z-index: 1;
-    border-radius: ${theme.shape.borderRadius(4)};
-    padding: ${theme.spacing(6, 8)};
-    opacity: 1;
-  `,
-  title: css`
-    font-size: ${theme.typography.h3.fontSize};
-    text-align: center;
-    margin: 0;
-  `,
-  description: css`
-    font-size: ${theme.typography.h5.fontSize};
-    margin: 0;
-  `,
+    ':before': {
+      opacity: 1,
+    },
+  }),
+  box: css({
+    width: '608px',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+    gap: theme.spacing(4),
+    zIndex: 1,
+    borderRadius: theme.shape.borderRadius(4),
+    padding: theme.spacing(6, 8),
+    opacity: 1,
+  }),
+  title: css({
+    fontSize: theme.typography.h3.fontSize,
+    textAlign: 'center',
+    margin: 0,
+  }),
+  description: css({
+    fontSize: theme.typography.h5.fontSize,
+    margin: 0,
+  }),
 });

public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx

@@ -24,8 +24,8 @@ export const RowOptionsModal = ({ repeat, title, onDismiss, onUpdate, warning }:
 };
 
 const getStyles = () => ({
-  modal: css`
-    label: RowOptionsModal;
-    width: 500px;
-  `,
+  modal: css({
+    label: 'RowOptionsModal',
+    width: '500px',
+  }),
 });

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

@@ -126,20 +126,19 @@ export const proxyHandlesError = (errorStatus: string) => {
 };
 
 const getConfirmPluginDashboardSaveModalStyles = (theme: GrafanaTheme2) => ({
-  modal: css`
-    width: 500px;
-  `,
-  modalText: css`
-    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(2)};
-    }
-  `,
+  modal: css({
+    width: '500px',
+  }),
+  modalText: css({
+    fontSize: theme.typography.h4.fontSize,
+    color: theme.colors.text.primary,
+    marginBottom: theme.spacing(4),
+    paddingTop: theme.spacing(2),
+  }),
+  modalButtonRow: css({
+    marginBottom: '14px',
+    'a, button': {
+      marginRight: theme.spacing(2),
+    },
+  }),
 });

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

@@ -21,9 +21,9 @@ export const UnsavedChangesModal = ({ dashboard, onSaveSuccess, onDiscard, onDis
       title="Unsaved changes"
       onDismiss={onDismiss}
       icon="exclamation-triangle"
-      className={css`
-        width: 500px;
-      `}
+      className={css({
+        width: '500px',
+      })}
     >
       <h5>Do you want to save your changes?</h5>
       <Modal.ButtonRow>

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

@@ -135,11 +135,11 @@ export const SaveDashboardForm = ({
 
 function getStyles(theme: GrafanaTheme2) {
   return {
-    message: css`
-      display: flex;
-      align-items: end;
-      flex-direction: column;
-      width: 100%;
-    `,
+    message: css({
+      display: 'flex',
+      alignItems: 'end',
+      flexDirection: 'column',
+      width: '100%',
+    }),
   };
 }

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

@@ -67,11 +67,11 @@ export const SaveProvisionedDashboardForm = ({ dashboard, onCancel }: Omit<SaveD
 };
 
 const styles = {
-  json: css`
-    height: 400px;
-    width: 100%;
-    overflow: auto;
-    resize: none;
-    font-family: monospace;
-  `,
+  json: css({
+    height: '400px',
+    width: '100%',
+    overflow: 'auto',
+    resize: 'none',
+    fontFamily: 'monospace',
+  }),
 };

public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/ConfigPublicDashboard.tsx

@@ -163,9 +163,9 @@ export function ConfigPublicDashboardBase({
             data-testid={selectors.PauseSwitch}
           />
           <Label
-            className={css`
-              margin-bottom: 0;
-            `}
+            className={css({
+              marginBottom: 0,
+            })}
           >
             <Trans i18nKey="public-dashboard.config.pause-sharing-dashboard-label">Pause sharing dashboard</Trans>
           </Label>
@@ -265,18 +265,18 @@ export function ConfigPublicDashboard({ publicDashboard, unsupportedDatasources
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  configContainer: css`
-    label: config container;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    gap: ${theme.spacing(3)};
-  `,
-  fieldSpace: css`
-    label: field space;
-    width: 100%;
-    margin-bottom: 0;
-  `,
+  configContainer: css({
+    label: 'config container',
+    display: 'flex',
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+    gap: theme.spacing(3),
+  }),
+  fieldSpace: css({
+    label: 'field space',
+    width: '100%',
+    marginBottom: 0,
+  }),
   timeRange: css({
     display: 'inline-block',
   }),

public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/EmailSharingConfiguration.tsx

@@ -228,52 +228,50 @@ export const EmailSharingConfiguration = ({ dashboard }: { dashboard: DashboardM
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  container: css`
-    label: emailConfigContainer;
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    gap: ${theme.spacing(3)};
-  `,
-  field: css`
-    label: field-noMargin;
-    margin-bottom: 0;
-  `,
-  emailContainer: css`
-    label: emailContainer;
-    display: flex;
-    gap: ${theme.spacing(1)};
-  `,
-  emailInput: css`
-    label: emailInput;
-    flex-grow: 1;
-  `,
-  table: css`
-    label: table;
-    display: flex;
-    max-height: 220px;
-    overflow-y: scroll;
-
-    & tbody {
-      display: flex;
-      flex-direction: column;
-      flex-grow: 1;
-    }
-
-    & tr {
-      min-height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: ${theme.spacing(0.5, 1)};
+  container: css({
+    label: 'emailConfigContainer',
+    display: 'flex',
+    flexDirection: 'column',
+    flexWrap: 'wrap',
+    gap: theme.spacing(3),
+  }),
+  field: css({
+    label: 'field-noMargin',
+    marginBottom: 0,
+  }),
+  emailContainer: css({
+    label: 'emailContainer',
+    display: 'flex',
+    gap: theme.spacing(1),
+  }),
+  emailInput: css({
+    label: 'emailInput',
+    flexGrow: 1,
+  }),
+  table: css({
+    label: 'table',
+    display: 'flex',
+    maxHeight: '220px',
+    overflowY: 'scroll',
+    '& tbody': {
+      display: 'flex',
+      flexDirection: 'column',
+      flexGrow: 1,
+    },
+    '& tr': {
+      minHeight: '40px',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: theme.spacing(0.5, 1),
 
-      :nth-child(odd) {
-        background: ${theme.colors.background.secondary};
-      }
-    }
-  `,
-  tableButtonsContainer: css`
-    display: flex;
-    justify-content: end;
-  `,
+      ':nth-child(odd)': {
+        background: theme.colors.background.secondary,
+      },
+    },
+  }),
+  tableButtonsContainer: css({
+    display: 'flex',
+    justifyContent: 'end',
+  }),
 });

public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/SettingsSummary.tsx

@@ -66,12 +66,12 @@ const getStyles = (theme: GrafanaTheme2) => {
     summaryWrapper: css({
       display: 'flex',
     }),
-    summary: css`
-      label: collapsedText;
-      margin-left: ${theme.spacing.gridSize * 2}px;
-      font-size: ${theme.typography.bodySmall.fontSize};
-      color: ${theme.colors.text.secondary};
-    `,
+    summary: css({
+      label: 'collapsedText',
+      marginLeft: `${theme.spacing.gridSize * 2}px`,
+      fontSize: theme.typography.bodySmall.fontSize,
+      color: theme.colors.text.secondary,
+    }),
     timeRange: css({
       display: 'inline-block',
     }),

public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/AcknowledgeCheckboxes.tsx

@@ -110,7 +110,7 @@ export const AcknowledgeCheckboxes = ({
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  title: css`
-    font-weight: ${theme.typography.fontWeightBold};
-  `,
+  title: css({
+    fontWeight: theme.typography.fontWeightBold,
+  }),
 });

public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/CreatePublicDashboard.tsx

@@ -110,27 +110,27 @@ export function CreatePublicDashboard({ hasError }: { hasError?: boolean }) {
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  container: css`
-    display: flex;
-    flex-direction: column;
-    gap: ${theme.spacing(4)};
-  `,
-  title: css`
-    font-size: ${theme.typography.h4.fontSize};
-    margin: ${theme.spacing(0, 0, 2)};
-  `,
-  description: css`
-    color: ${theme.colors.text.secondary};
-    margin-bottom: ${theme.spacing(0)};
-  `,
-  checkboxes: css`
-    margin: ${theme.spacing(0, 0, 4)};
-  `,
-  buttonContainer: css`
-    display: flex;
-    justify-content: end;
-  `,
-  loadingSpinner: css`
-    margin-left: ${theme.spacing(1)};
-  `,
+  container: css({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(4),
+  }),
+  title: css({
+    fontSize: theme.typography.h4.fontSize,
+    margin: theme.spacing(0, 0, 2),
+  }),
+  description: css({
+    color: theme.colors.text.secondary,
+    marginBottom: theme.spacing(0),
+  }),
+  checkboxes: css({
+    margin: theme.spacing(0, 0, 4),
+  }),
+  buttonContainer: css({
+    display: 'flex',
+    justifyContent: 'end',
+  }),
+  loadingSpinner: css({
+    marginLeft: theme.spacing(1),
+  }),
 });

public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ModalAlerts/UnsupportedDataSourcesAlert.tsx

@@ -38,8 +38,8 @@ export const UnsupportedDataSourcesAlert = ({ unsupportedDataSources }: { unsupp
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  unsupportedDataSourceDescription: css`
-    color: ${theme.colors.text.secondary};
-    margin-bottom: ${theme.spacing(1)};
-  `,
+  unsupportedDataSourceDescription: css({
+    color: theme.colors.text.secondary,
+    marginBottom: theme.spacing(1),
+  }),
 });

public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx

@@ -68,22 +68,20 @@ export const AnnotationPicker = ({ annotation, events, onEnabledChanged }: Annot
 
 function getStyles(theme: GrafanaTheme2) {
   return {
-    annotation: css`
-      display: inline-block;
-      margin-right: ${theme.spacing(1)};
-
-      .fa-caret-down {
-        font-size: 75%;
-        padding-left: ${theme.spacing(1)};
-      }
-
-      .gf-form-inline .gf-form {
-        margin-bottom: 0;
-      }
-    `,
-    indicator: css`
-      align-self: center;
-      padding: 0 ${theme.spacing(0.5)};
-    `,
+    annotation: css({
+      display: 'inline-block',
+      marginRight: theme.spacing(1),
+      '.fa-caret-down': {
+        fontSize: '75%',
+        paddingLeft: theme.spacing(1),
+      },
+      '.gf-form-inline .gf-form': {
+        marginBottom: 0,
+      },
+    }),
+    indicator: css({
+      alignSelf: 'center',
+      padding: `0 ${theme.spacing(0.5)}`,
+    }),
   };
 }

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

@@ -80,20 +80,19 @@ const mapStateToProps: MapStateToProps<ConnectedProps, OwnProps, StoreState> = (
 
 const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
-    formStyles: css`
-      display: flex;
-      flex-wrap: wrap;
-      display: contents;
-    `,
-    submenu: css`
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-      align-content: flex-start;
-      align-items: flex-start;
-      gap: ${theme.spacing(1)} ${theme.spacing(2)};
-      padding: 0 0 ${theme.spacing(1)} 0;
-    `,
+    formStyles: css({
+      display: 'contents',
+      flexWrap: 'wrap',
+    }),
+    submenu: css({
+      display: 'flex',
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      alignContent: 'flex-start',
+      alignItems: 'flex-start',
+      gap: `${theme.spacing(1)} ${theme.spacing(2)}`,
+      padding: `0 0 ${theme.spacing(1)} 0`,
+    }),
     spacer: css({
       flexGrow: 1,
     }),

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

@@ -83,7 +83,7 @@ export const TransformationEditor = ({
   );
 
   return (
-    <div className={styles.editor} data-testid={selectors.components.TransformTab.transformationEditor(uiConfig.name)}>
+    <div data-testid={selectors.components.TransformTab.transformationEditor(uiConfig.name)}>
       {editor}
       {debugMode && (
         <Drawer title="Debug transformation" subtitle={uiConfig.name} onClose={toggleShowDebug}>
@@ -113,76 +113,75 @@ export const TransformationEditor = ({
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    title: css`
-      display: flex;
-      padding: 4px 8px 4px 8px;
-      position: relative;
-      height: 35px;
-      border-radius: 4px 4px 0 0;
-      flex-wrap: nowrap;
-      justify-content: space-between;
-      align-items: center;
-    `,
-    name: css`
-      font-weight: ${theme.typography.fontWeightMedium};
-      color: ${theme.colors.primary.text};
-    `,
-    iconRow: css`
-      display: flex;
-    `,
-    icon: css`
-      background: transparent;
-      border: none;
-      box-shadow: none;
-      cursor: pointer;
-      color: ${theme.colors.text.secondary};
-      margin-left: ${theme.spacing(1)};
-      &:hover {
-        color: ${theme.colors.text};
-      }
-    `,
-    editor: css``,
-    debugWrapper: css`
-      display: flex;
-      flex-direction: row;
-    `,
-    debugSeparator: css`
-      width: 48px;
-      min-height: 300px;
-      display: flex;
-      align-items: center;
-      align-self: stretch;
-      justify-content: center;
-      margin: 0 ${theme.spacing(0.5)};
-      color: ${theme.colors.primary.text};
-    `,
-    debugTitle: css`
-      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 ${theme.colors.border.weak};
-      flex-grow: 0;
-      flex-shrink: 1;
-    `,
-
-    debug: css`
-      margin-top: ${theme.spacing(1)};
-      padding: 0 ${theme.spacing(1, 1, 1)};
-      border: 1px solid ${theme.colors.border.weak};
-      background: ${theme.isLight ? theme.v1.palette.white : theme.v1.palette.gray05};
-      border-radius: ${theme.shape.radius.default};
-      width: 100%;
-      min-height: 300px;
-      display: flex;
-      flex-direction: column;
-      align-self: stretch;
-    `,
-    debugJson: css`
-      flex-grow: 1;
-      height: 100%;
-      overflow: hidden;
-      padding: ${theme.spacing(0.5)};
-    `,
+    title: css({
+      display: 'flex',
+      padding: '4px 8px 4px 8px',
+      position: 'relative',
+      height: '35px',
+      // eslint-disable-next-line @grafana/no-border-radius-literal
+      borderRadius: '4px 4px 0 0',
+      flexWrap: 'nowrap',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    }),
+    name: css({
+      fontWeight: theme.typography.fontWeightMedium,
+      color: theme.colors.primary.text,
+    }),
+    iconRow: css({
+      display: 'flex',
+    }),
+    icon: css({
+      background: 'transparent',
+      border: 'none',
+      boxShadow: 'none',
+      cursor: 'pointer',
+      color: theme.colors.text.secondary,
+      marginLeft: theme.spacing(1),
+      '&:hover': {
+        color: theme.colors.text.primary,
+      },
+    }),
+    debugWrapper: css({
+      display: 'flex',
+      flexDirection: 'row',
+    }),
+    debugSeparator: css({
+      width: '48px',
+      minHeight: '300px',
+      display: 'flex',
+      alignItems: 'center',
+      alignSelf: 'stretch',
+      justifyContent: 'center',
+      margin: `0 ${theme.spacing(0.5)}`,
+      color: theme.colors.primary.text,
+    }),
+    debugTitle: css({
+      padding: `${theme.spacing(1)} ${theme.spacing(0.25)}`,
+      fontFamily: theme.typography.fontFamilyMonospace,
+      fontSize: theme.typography.bodySmall.fontSize,
+      color: theme.colors.text.primary,
+      borderBottom: `1px solid ${theme.colors.border.weak}`,
+      flexGrow: 0,
+      flexShrink: 1,
+    }),
+    debug: css({
+      marginTop: theme.spacing(1),
+      padding: `0 ${theme.spacing(1, 1, 1)}`,
+      border: `1px solid ${theme.colors.border.weak}`,
+      background: `${theme.isLight ? theme.v1.palette.white : theme.v1.palette.gray05}`,
+      borderRadius: theme.shape.radius.default,
+      width: '100%',
+      minHeight: '300px',
+      display: 'flex',
+      flexDirection: 'column',
+      alignSelf: 'stretch',
+    }),
+    debugJson: css({
+      flexGrow: 1,
+      height: '100%',
+      overflow: 'hidden',
+      padding: theme.spacing(0.5),
+    }),
   };
 };

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

@@ -232,16 +232,16 @@ function TransformationsGrid({ showIllustrations, transformations, onClick, data
 
 function getTransformationGridStyles(theme: GrafanaTheme2) {
   return {
-    // eslint-disable-next-line @emotion/syntax-preference
-    heading: css`
-            font-weight: 400,
-            > button: {
-                width: '100%',
-                display: 'flex',
-                justify-content: 'space-between',
-                align-items: 'center',
-                flex-wrap: 'no-wrap',
-        },`,
+    heading: css({
+      fontWeight: 400,
+      '> button': {
+        width: '100%',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        flexWrap: 'nowrap',
+      },
+    }),
     description: css({
       fontSize: '12px',
       display: 'flex',