diff --git a/.betterer.results b/.betterer.results
index 3c45ad49184..d9d3f63aeb8 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -860,8 +860,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
     "public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
     "public/app/core/components/AppNotifications/AppNotificationItem.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@@ -916,9 +915,6 @@ exports[`better eslint`] = {
     "public/app/core/components/NestedFolderPicker/NestedFolderList.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
-    "public/app/core/components/NestedFolderPicker/Trigger.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/core/components/PageNotFound/EntityNotFound.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
@@ -927,42 +923,17 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
     ],
     "public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
     "public/app/core/components/PluginHelp/PluginHelp.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
     ],
-    "public/app/core/components/QueryOperationRow/OperationRowHelp.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/core/components/QueryOperationRow/QueryOperationRow.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/QueryOperationRow/QueryOperationRowHeader.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/RolePicker/BuiltinRoleSelector.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
     "public/app/core/components/RolePicker/RolePickerInput.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
     "public/app/core/components/RolePicker/RolePickerMenu.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -973,9 +944,6 @@ exports[`better eslint`] = {
     "public/app/core/components/RolePicker/RolePickerSubMenu.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
-    "public/app/core/components/RolePicker/ValueContainer.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/core/components/Select/OldFolderPicker.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
@@ -999,34 +967,13 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "1"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
-    "public/app/core/components/Upgrade/ProBadge.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/core/components/Upgrade/UpgradeBox.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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, "No untranslated strings. Wrap text with <Trans />", "7"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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"],
-      [0, 0, 0, "Styles should be written using objects.", "12"],
-      [0, 0, 0, "Styles should be written using objects.", "13"],
-      [0, 0, 0, "Styles should be written using objects.", "14"],
-      [0, 0, 0, "Styles should be written using objects.", "15"],
-      [0, 0, 0, "Styles should be written using objects.", "16"],
-      [0, 0, 0, "Styles should be written using objects.", "17"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "18"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "19"],
-      [0, 0, 0, "Styles should be written using objects.", "20"],
-      [0, 0, 0, "Styles should be written using objects.", "21"],
-      [0, 0, 0, "Styles should be written using objects.", "22"],
-      [0, 0, 0, "Styles should be written using objects.", "23"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"]
     ],
     "public/app/core/components/help/HelpModal.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -1185,11 +1132,6 @@ exports[`better eslint`] = {
     "public/app/features/admin/AdminSettings.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
-    "public/app/features/admin/LicenseChrome.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/admin/ServerStats.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
@@ -1200,8 +1142,8 @@ exports[`better eslint`] = {
     ],
     "public/app/features/admin/UpgradePage.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
@@ -1209,12 +1151,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "9"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "10"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "11"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "12"],
-      [0, 0, 0, "Styles should be written using objects.", "13"],
-      [0, 0, 0, "Styles should be written using objects.", "14"],
-      [0, 0, 0, "Styles should be written using objects.", "15"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "10"]
     ],
     "public/app/features/admin/UserCreatePage.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@@ -1233,15 +1170,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
     "public/app/features/admin/UserListPublicDashboardPage/DashboardsListModalButton.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
     "public/app/features/admin/UserListPublicDashboardPage/UserListPublicDashboardPage.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@@ -1265,18 +1194,14 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
     ],
     "public/app/features/admin/UserProfile.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"],
-      [0, 0, 0, "Styles should be written using objects.", "7"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
     ],
     "public/app/features/admin/UserSessions.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -2279,9 +2204,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"]
     ],
     "public/app/features/api-keys/MigrateToServiceAccountsCard.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -2289,10 +2212,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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, "No untranslated strings. Wrap text with <Trans />", "5"]
     ],
     "public/app/features/auth-config/AuthDrawer.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -2364,10 +2284,8 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
     "public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.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, "No untranslated strings. Wrap text with <Trans />", "2"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
     ],
     "public/app/features/connections/components/ConnectionsRedirectNotice/index.ts:5381": [
       [0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"]
@@ -2390,10 +2308,6 @@ exports[`better eslint`] = {
     "public/app/features/connections/tabs/ConnectData/CardGrid/index.tsx:5381": [
       [0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"]
     ],
-    "public/app/features/connections/tabs/ConnectData/CategoryHeader/CategoryHeader.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/connections/tabs/ConnectData/CategoryHeader/index.tsx:5381": [
       [0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"]
     ],
@@ -2401,21 +2315,12 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
     "public/app/features/connections/tabs/ConnectData/NoAccessModal/NoAccessModal.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, "No untranslated strings. Wrap text with <Trans />", "9"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "10"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "11"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "12"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "13"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "14"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"]
     ],
     "public/app/features/connections/tabs/ConnectData/NoAccessModal/index.tsx:5381": [
       [0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"]
@@ -2426,28 +2331,9 @@ exports[`better eslint`] = {
     "public/app/features/connections/tabs/ConnectData/index.tsx:5381": [
       [0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"]
     ],
-    "public/app/features/correlations/CorrelationsPage.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/correlations/Forms/AddCorrelationForm.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/correlations/Forms/ConfigureCorrelationBasicInfoForm.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/correlations/Forms/ConfigureCorrelationSourceForm.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/correlations/Forms/ConfigureCorrelationTargetForm.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
-      [0, 0, 0, "Do not use any type assertions.", "2"]
+      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
     "public/app/features/correlations/components/EmptyCorrelationsCTA.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -3234,9 +3120,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"],
       [0, 0, 0, "Do not use export all (\`export * from ...\`)", "1"]
     ],
-    "public/app/features/datasources/components/BasicSettings.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/features/datasources/components/ButtonRow.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
@@ -3275,9 +3158,6 @@ exports[`better eslint`] = {
     "public/app/features/datasources/components/DataSourceTypeCard.tsx:5381": [
       [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
     ],
-    "public/app/features/datasources/components/DataSourceTypeCardList.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/features/datasources/components/DataSourcesListCard.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
@@ -3289,38 +3169,6 @@ exports[`better eslint`] = {
     "public/app/features/datasources/components/NewDataSource.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
-    "public/app/features/datasources/components/picker/DataSourceCard.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"]
-    ],
-    "public/app/features/datasources/components/picker/DataSourceList.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/datasources/components/picker/DataSourceLogo.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/features/datasources/components/picker/DataSourceModal.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"]
-    ],
     "public/app/features/datasources/components/picker/DataSourcePicker.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
@@ -3352,57 +3200,24 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
-    "public/app/features/dimensions/editors/ColorDimensionEditor.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/dimensions/editors/FileUploader.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
     "public/app/features/dimensions/editors/FolderPickerTab.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
-    "public/app/features/dimensions/editors/ResourceCards.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, "Do not use any type assertions.", "0"]
     ],
     "public/app/features/dimensions/editors/ResourceDimensionEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
     ],
     "public/app/features/dimensions/editors/ResourcePicker.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
     "public/app/features/dimensions/editors/ResourcePickerPopover.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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"]
-    ],
-    "public/app/features/dimensions/editors/ScalarDimensionEditor.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/features/dimensions/editors/ScaleDimensionEditor.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"]
     ],
     "public/app/features/dimensions/editors/TextDimensionEditor.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"],
@@ -3412,20 +3227,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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/dimensions/editors/URLPickerTab.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, "No untranslated strings. Wrap text with <Trans />", "3"]
     ],
     "public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingEditRow.tsx:5381": [
       [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"],
@@ -3445,8 +3247,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
-      [0, 0, 0, "Styles should be written using objects.", "6"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"]
     ],
     "public/app/features/dimensions/editors/index.ts:5381": [
       [0, 0, 0, "Do not use export all (\`export * from ...\`)", "0"],
@@ -3511,15 +3312,10 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
     ],
     "public/app/features/explore/Logs/LiveLogs.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, "No untranslated strings. Wrap text with <Trans />", "5"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"]
     ],
     "public/app/features/explore/Logs/Logs.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -3529,32 +3325,17 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
     "public/app/features/explore/Logs/LogsMetaRow.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
     ],
     "public/app/features/explore/Logs/LogsNavigation.tsx:5381": [
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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/features/explore/Logs/LogsNavigationPages.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, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
     "public/app/features/explore/Logs/LogsSamplePanel.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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, "No untranslated strings. Wrap text with <Trans />", "3"]
     ],
     "public/app/features/explore/Logs/LogsTableEmptyFields.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@@ -3567,24 +3348,9 @@ exports[`better eslint`] = {
     "public/app/features/explore/Logs/LogsTableNavField.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
-    "public/app/features/explore/Logs/LogsVolumePanel.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/explore/Logs/LogsVolumePanelList.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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/explore/Logs/utils/LogsCrossFadeTransition.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, "No untranslated strings. Wrap text with <Trans />", "1"]
     ],
     "public/app/features/explore/MetaInfoText.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@@ -3595,95 +3361,23 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
     ],
     "public/app/features/explore/NodeGraph/NodeGraphContainer.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
-    ],
-    "public/app/features/explore/PrometheusListView/ItemLabels.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/explore/PrometheusListView/ItemValues.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, "No untranslated strings. Wrap text with <Trans />", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
     ],
     "public/app/features/explore/PrometheusListView/RawListContainer.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, "No untranslated strings. Wrap text with <Trans />", "6"]
-    ],
-    "public/app/features/explore/PrometheusListView/RawListItem.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, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
     "public/app/features/explore/PrometheusListView/RawListItemAttributes.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, "No untranslated strings. Wrap text with <Trans />", "3"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"]
     ],
     "public/app/features/explore/QueryLibrary/QueryTemplatesTable/QueryDescriptionCell.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
-    "public/app/features/explore/RichHistory/RichHistoryCard.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, "Styles should be written using objects.", "10"],
-      [0, 0, 0, "Styles should be written using objects.", "11"],
-      [0, 0, 0, "Styles should be written using objects.", "12"],
-      [0, 0, 0, "Styles should be written using objects.", "13"]
-    ],
-    "public/app/features/explore/RichHistory/RichHistoryQueriesTab.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, "Styles should be written using objects.", "10"],
-      [0, 0, 0, "Styles should be written using objects.", "11"],
-      [0, 0, 0, "Styles should be written using objects.", "12"],
-      [0, 0, 0, "Styles should be written using objects.", "13"]
-    ],
-    "public/app/features/explore/RichHistory/RichHistorySettingsTab.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/features/explore/RichHistory/RichHistoryStarredTab.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, "No untranslated strings. Wrap text with <Trans />", "7"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
     "public/app/features/explore/SupplementaryResultError.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@@ -3862,12 +3556,9 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
     "public/app/features/expressions/components/Condition.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
-      [0, 0, 0, "Styles should be written using objects.", "4"],
-      [0, 0, 0, "Styles should be written using objects.", "5"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
     ],
     "public/app/features/expressions/components/Math.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -3879,14 +3570,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "8"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "9"],
-      [0, 0, 0, "Styles should be written using objects.", "10"],
-      [0, 0, 0, "Styles should be written using objects.", "11"],
-      [0, 0, 0, "Styles should be written using objects.", "12"],
-      [0, 0, 0, "Styles should be written using objects.", "13"],
-      [0, 0, 0, "Styles should be written using objects.", "14"],
-      [0, 0, 0, "Styles should be written using objects.", "15"],
-      [0, 0, 0, "Styles should be written using objects.", "16"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "9"]
     ],
     "public/app/features/expressions/components/Threshold.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -3899,13 +3583,10 @@ exports[`better eslint`] = {
     "public/app/features/geo/editor/GazetteerPathEditor.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
-      [0, 0, 0, "Styles should be written using objects.", "3"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
     ],
     "public/app/features/geo/editor/locationModeEditor.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, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
     ],
     "public/app/features/geo/gazetteer/gazetteer.ts:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
@@ -3925,9 +3606,6 @@ exports[`better eslint`] = {
     "public/app/features/gops/configuration-tracker/components/ProgressBar.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
-    "public/app/features/inspector/DetailText.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/features/inspector/InspectDataOptions.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"],
@@ -3950,18 +3628,16 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
     ],
     "public/app/features/inspector/InspectStatsTab.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, "Use data-testid for E2E selectors instead of aria-label", "0"]
     ],
     "public/app/features/inspector/QueryInspector.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, "No untranslated strings. Wrap text with <Trans />", "1"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "3"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "4"],
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "5"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
-      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "7"]
+      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "4"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
+      [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "6"]
     ],
     "public/app/features/invites/InviteeRow.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
@@ -3989,21 +3665,14 @@ exports[`better eslint`] = {
     ],
     "public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "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, "No untranslated strings. Wrap text with <Trans />", "1"]
     ],
     "public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.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/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.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, "No untranslated strings. Wrap text with <Trans />", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
     ],
     "public/app/features/library-panels/components/SaveLibraryPanelModal/SaveLibraryPanelModal.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
@@ -4014,14 +3683,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "5"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"]
     ],
-    "public/app/features/library-panels/styles.ts: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/live/centrifuge/LiveDataStream.ts:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
@@ -4039,92 +3700,20 @@ exports[`better eslint`] = {
     "public/app/features/logs/components/InfiniteScroll.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
-    "public/app/features/logs/components/LoadingIndicator.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/features/logs/components/LogDetails.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
     ],
-    "public/app/features/logs/components/LogDetailsRow.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/features/logs/components/LogLabelStats.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, "No untranslated strings. Wrap text with <Trans />", "5"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "6"],
-      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "7"]
-    ],
-    "public/app/features/logs/components/LogLabelStatsRow.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"]
-    ],
-    "public/app/features/logs/components/LogLabels.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/logs/components/LogRowMessageDisplayedFields.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"],
+      [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "2"]
     ],
     "public/app/features/logs/components/LogRows.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"],
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "1"]
     ],
-    "public/app/features/logs/components/getLogRowStyles.ts: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, "Styles should be written using objects.", "10"],
-      [0, 0, 0, "Styles should be written using objects.", "11"],
-      [0, 0, 0, "Styles should be written using objects.", "12"],
-      [0, 0, 0, "Styles should be written using objects.", "13"],
-      [0, 0, 0, "Styles should be written using objects.", "14"],
-      [0, 0, 0, "Styles should be written using objects.", "15"],
-      [0, 0, 0, "Styles should be written using objects.", "16"],
-      [0, 0, 0, "Styles should be written using objects.", "17"],
-      [0, 0, 0, "Styles should be written using objects.", "18"],
-      [0, 0, 0, "Styles should be written using objects.", "19"],
-      [0, 0, 0, "Styles should be written using objects.", "20"],
-      [0, 0, 0, "Styles should be written using objects.", "21"],
-      [0, 0, 0, "Styles should be written using objects.", "22"],
-      [0, 0, 0, "Styles should be written using objects.", "23"],
-      [0, 0, 0, "Styles should be written using objects.", "24"],
-      [0, 0, 0, "Styles should be written using objects.", "25"],
-      [0, 0, 0, "Styles should be written using objects.", "26"],
-      [0, 0, 0, "Styles should be written using objects.", "27"],
-      [0, 0, 0, "Styles should be written using objects.", "28"],
-      [0, 0, 0, "Styles should be written using objects.", "29"],
-      [0, 0, 0, "Styles should be written using objects.", "30"],
-      [0, 0, 0, "Styles should be written using objects.", "31"],
-      [0, 0, 0, "Styles should be written using objects.", "32"],
-      [0, 0, 0, "Styles should be written using objects.", "33"],
-      [0, 0, 0, "Styles should be written using objects.", "34"]
-    ],
     "public/app/features/logs/components/log-context/LogContextButtons.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
diff --git a/public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx b/public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx
index 8e94ab7bed9..67822e4d17e 100644
--- a/public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx
+++ b/public/app/core/components/AppChrome/TopBar/TopSearchBarCommandPaletteTrigger.tsx
@@ -6,7 +6,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { config } from '@grafana/runtime';
 import { getInputStyles, Icon, Text, ToolbarButton, useStyles2, useTheme2 } from '@grafana/ui';
-import { focusCss } from '@grafana/ui/src/themes/mixins';
+import { getFocusStyles } from '@grafana/ui/src/themes/mixins';
 import { useMediaQueryChange } from 'app/core/hooks/useMediaQueryChange';
 import { t } from 'app/core/internationalization';
 import { getModKey } from 'app/core/utils/browser';
@@ -108,9 +108,7 @@ const getStyles = (theme: GrafanaTheme2) => {
           boxShadow: 'unset',
         },
 
-        '&:focus-visible': css`
-          ${focusCss(theme)}
-        `,
+        '&:focus-visible': getFocusStyles(theme),
       },
     ]),
 
diff --git a/public/app/core/components/NestedFolderPicker/Trigger.tsx b/public/app/core/components/NestedFolderPicker/Trigger.tsx
index ae1e5173f7b..942beab6e96 100644
--- a/public/app/core/components/NestedFolderPicker/Trigger.tsx
+++ b/public/app/core/components/NestedFolderPicker/Trigger.tsx
@@ -5,7 +5,7 @@ import Skeleton from 'react-loading-skeleton';
 
 import { GrafanaTheme2 } from '@grafana/data';
 import { Icon, getInputStyles, useTheme2, Text } from '@grafana/ui';
-import { focusCss, getFocusStyles, getMouseFocusStyles } from '@grafana/ui/src/themes/mixins';
+import { getFocusStyles, getMouseFocusStyles } from '@grafana/ui/src/themes/mixins';
 import { Trans, t } from 'app/core/internationalization';
 
 interface TriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -112,9 +112,7 @@ const getStyles = (theme: GrafanaTheme2, invalid = false) => {
           boxShadow: 'unset',
         },
 
-        '&:focus-visible': css`
-          ${focusCss(theme)}
-        `,
+        '&:focus-visible': getFocusStyles(theme),
         alignItems: 'center',
         display: 'flex',
         flexWrap: 'nowrap',
diff --git a/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx b/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
index e5320ba6f25..59c2519f872 100644
--- a/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
+++ b/public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx
@@ -73,18 +73,18 @@ export const PanelTypeFilter = ({ onChange: propsOnChange, maxMenuHeight, isWidg
 
 function getStyles(theme: GrafanaTheme2) {
   return {
-    container: css`
-      label: container;
-      position: relative;
-      min-width: 180px;
-      flex-grow: 1;
-    `,
-    clear: css`
-      label: clear;
-      font-size: ${theme.spacing(1.5)};
-      position: absolute;
-      top: -${theme.spacing(4.5)};
-      right: 0;
-    `,
+    container: css({
+      label: 'container',
+      position: 'relative',
+      minWidth: '180px',
+      flexGrow: 1,
+    }),
+    clear: css({
+      label: 'clear',
+      fontSize: theme.spacing(1.5),
+      position: 'absolute',
+      top: theme.spacing(-4.5),
+      right: 0,
+    }),
   };
 }
diff --git a/public/app/core/components/QueryOperationRow/OperationRowHelp.tsx b/public/app/core/components/QueryOperationRow/OperationRowHelp.tsx
index 16f69e2d1cd..b9f4b8d8037 100644
--- a/public/app/core/components/QueryOperationRow/OperationRowHelp.tsx
+++ b/public/app/core/components/QueryOperationRow/OperationRowHelp.tsx
@@ -39,13 +39,13 @@ const getStyles = (theme: GrafanaTheme2, borderTop?: string) => {
   const themeBackgroundColor = theme.colors.background.secondary;
 
   return {
-    wrapper: css`
-      padding: ${theme.spacing(2)};
-      border: 2px solid ${themeBackgroundColor};
-      border-top: ${borderTop ? borderTop + themeBackgroundColor : 'none'};
-      border-radius: 0 0 ${borderRadius} ${borderRadius};
-      position: relative;
-      top: -4px;
-    `,
+    wrapper: css({
+      padding: theme.spacing(2),
+      border: `2px solid ${themeBackgroundColor}`,
+      borderTop: borderTop ? borderTop + themeBackgroundColor : 'none',
+      borderRadius: `0 0 ${borderRadius} ${borderRadius}`,
+      position: 'relative',
+      top: '-4px',
+    }),
   };
 };
diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
index 79c43863777..fbfb98b5f72 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationRow.tsx
@@ -160,13 +160,13 @@ export function QueryOperationRow({
 
 const getQueryOperationRowStyles = (theme: GrafanaTheme2) => {
   return {
-    wrapper: css`
-      margin-bottom: ${theme.spacing(2)};
-    `,
-    content: css`
-      margin-top: ${theme.spacing(0.5)};
-      margin-left: ${theme.spacing(3)};
-    `,
+    wrapper: css({
+      marginBottom: theme.spacing(2),
+    }),
+    content: css({
+      marginTop: theme.spacing(0.5),
+      marginLeft: theme.spacing(3),
+    }),
   };
 };
 
diff --git a/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx b/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
index abd98c64977..f12d8df1046 100644
--- a/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
+++ b/public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
@@ -91,59 +91,58 @@ export const QueryOperationRowHeader = ({
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  header: css`
-    label: Header;
-    padding: ${theme.spacing(0.5, 0.5)};
-    border-radius: ${theme.shape.radius.default};
-    background: ${theme.colors.background.secondary};
-    min-height: ${theme.spacing(4)};
-    display: grid;
-    grid-template-columns: minmax(100px, max-content) min-content;
-    align-items: center;
-    justify-content: space-between;
-    white-space: nowrap;
+  header: css({
+    label: 'Header',
+    padding: theme.spacing(0.5, 0.5),
+    borderRadius: theme.shape.radius.default,
+    background: theme.colors.background.secondary,
+    minHeight: theme.spacing(4),
+    display: 'grid',
+    gridTemplateColumns: 'minmax(100px, max-content) min-content',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    whiteSpace: 'nowrap',
 
-    &:focus {
-      outline: none;
-    }
-  `,
-  column: css`
-    label: Column;
-    display: flex;
-    align-items: center;
-    overflow: hidden;
-  `,
-  dragIcon: css`
-    cursor: grab;
-    color: ${theme.colors.text.disabled};
-    margin: ${theme.spacing(0, 0.5)};
-    &:hover {
-      color: ${theme.colors.text};
-    }
-  `,
-  collapseIcon: css`
-    margin-left: ${theme.spacing(0.5)};
-    color: ${theme.colors.text.disabled};
-    }
-  `,
-  titleWrapper: css`
-    display: flex;
-    align-items: center;
-    flex-grow: 1;
-    cursor: pointer;
-    overflow: hidden;
-    margin-right: ${theme.spacing(0.5)};
-  `,
-  title: css`
-    font-weight: ${theme.typography.fontWeightBold};
-    color: ${theme.colors.text.link};
-    margin-left: ${theme.spacing(0.5)};
-    overflow: hidden;
-    text-overflow: ellipsis;
-  `,
-  disabled: css`
-    color: ${theme.colors.text.disabled};
-  `,
+    '&:focus': {
+      outline: 'none',
+    },
+  }),
+  column: css({
+    label: 'Column',
+    display: 'flex',
+    alignItems: 'center',
+    overflow: 'hidden',
+  }),
+  dragIcon: css({
+    cursor: 'grab',
+    color: theme.colors.text.disabled,
+    margin: theme.spacing(0, 0.5),
+    '&:hover': {
+      color: theme.colors.text.primary,
+    },
+  }),
+  collapseIcon: css({
+    marginLeft: theme.spacing(0.5),
+    color: theme.colors.text.disabled,
+  }),
+  titleWrapper: css({
+    display: 'flex',
+    alignItems: 'center',
+    flexGrow: 1,
+    cursor: 'pointer',
+    overflow: 'hidden',
+    marginRight: theme.spacing(0.5),
+  }),
+  title: css({
+    fontWeight: theme.typography.fontWeightBold,
+    color: theme.colors.text.link,
+    marginLeft: theme.spacing(0.5),
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  }),
+  disabled: css({
+    color: theme.colors.text.disabled,
+  }),
 });
 
 QueryOperationRowHeader.displayName = 'QueryOperationRowHeader';
diff --git a/public/app/core/components/RolePicker/RolePickerInput.tsx b/public/app/core/components/RolePicker/RolePickerInput.tsx
index 8e2e3fa6a02..e528beeadbc 100644
--- a/public/app/core/components/RolePicker/RolePickerInput.tsx
+++ b/public/app/core/components/RolePicker/RolePickerInput.tsx
@@ -3,7 +3,8 @@ import { FormEvent, HTMLProps, useEffect, useRef } from 'react';
 import * as React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { useStyles2, getInputStyles, sharedInputStyle, styleMixins, Tooltip, Icon, Spinner } from '@grafana/ui';
+import { useStyles2, getInputStyles, sharedInputStyle, Tooltip, Icon, Spinner } from '@grafana/ui';
+import { getFocusStyles } from '@grafana/ui/src/themes/mixins';
 
 import { Role } from '../../../types';
 
@@ -144,10 +145,7 @@ const getRolePickerInputStyles = (
     wrapper: cx(
       styles.wrapper,
       sharedInputStyle(theme, invalid),
-      focused &&
-        css`
-          ${styleMixins.focusCss(theme.v1)}
-        `,
+      focused && css(getFocusStyles(theme)),
       disabled && styles.inputDisabled,
       css({
         minWidth: width || ROLE_PICKER_WIDTH + 'px',
@@ -170,32 +168,32 @@ const getRolePickerInputStyles = (
         cursor: 'default',
       }),
       withPrefix &&
-        css`
-          padding-left: 0;
-        `
+        css({
+          paddingLeft: 0,
+        })
     ),
     input: cx(
       sharedInputStyle(theme, invalid),
-      css`
-        max-width: 120px;
-        border: none;
-        cursor: ${focused ? 'default' : 'pointer'};
-      `
+      css({
+        maxWidth: '120px',
+        border: 'none',
+        cursor: focused ? 'default' : 'pointer',
+      })
     ),
     suffix: styles.suffix,
-    dropdownIndicator: css`
-      cursor: pointer;
-    `,
-    selectedRoles: css`
-      display: flex;
-      align-items: center;
-      cursor: ${disabled ? 'not-allowed' : 'pointer'};
-    `,
-    tooltip: css`
-      p {
-        margin-bottom: ${theme.spacing(0.5)};
-      }
-    `,
+    dropdownIndicator: css({
+      cursor: 'pointer',
+    }),
+    selectedRoles: css({
+      display: 'flex',
+      alignItems: 'center',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+    }),
+    tooltip: css({
+      p: {
+        marginBottom: theme.spacing(0.5),
+      },
+    }),
     spinner: css({
       display: 'flex',
       flexGrow: 1,
@@ -205,9 +203,9 @@ const getRolePickerInputStyles = (
 };
 
 const getTooltipStyles = (theme: GrafanaTheme2) => ({
-  tooltip: css`
-    p {
-      margin-bottom: ${theme.spacing(0.5)};
-    }
-  `,
+  tooltip: css({
+    p: {
+      marginBottom: theme.spacing(0.5),
+    },
+  }),
 });
diff --git a/public/app/core/components/RolePicker/ValueContainer.tsx b/public/app/core/components/RolePicker/ValueContainer.tsx
index ad3a7084c27..665aa347f9c 100644
--- a/public/app/core/components/RolePicker/ValueContainer.tsx
+++ b/public/app/core/components/RolePicker/ValueContainer.tsx
@@ -27,14 +27,14 @@ const getStyles = (theme: GrafanaTheme2) => {
     container: cx(
       prefix,
       multiValueContainer,
-      css`
-        position: relative;
-        padding: ${theme.spacing(0.5, 1, 0.5, 1)};
+      css({
+        position: 'relative',
+        padding: theme.spacing(0.5, 1, 0.5, 1),
 
-        svg {
-          margin-right: ${theme.spacing(0.5)};
-        }
-      `
+        svg: {
+          marginRight: theme.spacing(0.5),
+        },
+      })
     ),
   };
 };
diff --git a/public/app/core/components/Upgrade/ProBadge.tsx b/public/app/core/components/Upgrade/ProBadge.tsx
index e8802c8f3bc..a7e9eec4b50 100644
--- a/public/app/core/components/Upgrade/ProBadge.tsx
+++ b/public/app/core/components/Upgrade/ProBadge.tsx
@@ -29,14 +29,14 @@ export const ProBadge = ({ text = 'PRO', className, experimentId, eventVariant =
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    badge: css`
-      margin-left: ${theme.spacing(1.25)};
-      border-radius: ${theme.shape.borderRadius(5)};
-      background-color: ${theme.colors.success.main};
-      padding: ${theme.spacing(0.25, 0.75)};
-      color: white; // use the same color for both themes
-      font-weight: ${theme.typography.fontWeightMedium};
-      font-size: ${theme.typography.pxToRem(10)};
-    `,
+    badge: css({
+      marginLeft: theme.spacing(1.25),
+      borderRadius: theme.shape.borderRadius(5),
+      backgroundColor: theme.colors.success.main,
+      padding: theme.spacing(0.25, 0.75),
+      color: 'white', // use the same color for both themes
+      fontWeight: theme.typography.fontWeightMedium,
+      fontSize: theme.typography.pxToRem(10),
+    }),
   };
 };
diff --git a/public/app/core/components/Upgrade/UpgradeBox.tsx b/public/app/core/components/Upgrade/UpgradeBox.tsx
index e4bfb668273..9f655eea77d 100644
--- a/public/app/core/components/Upgrade/UpgradeBox.tsx
+++ b/public/app/core/components/Upgrade/UpgradeBox.tsx
@@ -58,48 +58,48 @@ const getUpgradeBoxStyles = (theme: GrafanaTheme2, size: ComponentSize) => {
   const fontBase = size === 'md' ? 'body' : 'bodySmall';
 
   return {
-    box: css`
-      display: flex;
-      align-items: center;
-      position: relative;
-      border-radius: ${borderRadius};
-      background: ${theme.colors.success.transparent};
-      padding: ${theme.spacing(2)};
-      color: ${theme.colors.success.text};
-      font-size: ${theme.typography[fontBase].fontSize};
-      text-align: left;
-      line-height: 16px;
-      margin: ${theme.spacing(0, 'auto', 3, 'auto')};
-      max-width: ${theme.breakpoints.values.xxl}px;
-      width: 100%;
-    `,
-    inner: css`
-      display: flex;
-      align-items: center;
-      width: 100%;
-      justify-content: space-between;
-    `,
-    text: css`
-      margin: 0;
-    `,
-    button: css`
-      background-color: ${theme.colors.success.main};
-      font-weight: ${theme.typography.fontWeightLight};
-      color: white;
+    box: css({
+      display: 'flex',
+      alignItems: 'center',
+      position: 'relative',
+      borderRadius: borderRadius,
+      background: theme.colors.success.transparent,
+      padding: theme.spacing(2),
+      color: theme.colors.success.text,
+      fontSize: theme.typography[fontBase].fontSize,
+      textAlign: 'left',
+      lineHeight: '16px',
+      margin: theme.spacing(0, 'auto', 3, 'auto'),
+      maxWidth: `${theme.breakpoints.values.xxl}px`,
+      width: '100%',
+    }),
+    inner: css({
+      display: 'flex',
+      alignItems: 'center',
+      width: '100%',
+      justifyContent: 'space-between',
+    }),
+    text: css({
+      margin: 0,
+    }),
+    button: css({
+      backgroundColor: theme.colors.success.main,
+      fontWeight: theme.typography.fontWeightLight,
+      color: 'white',
 
-      &:hover {
-        background-color: ${theme.colors.success.main};
-      }
+      '&:hover': {
+        backgroundColor: theme.colors.success.main,
+      },
 
-      &:focus-visible {
-        box-shadow: none;
-        color: ${theme.colors.text.primary};
-        outline: 2px solid ${theme.colors.primary.main};
-      }
-    `,
-    icon: css`
-      margin: ${theme.spacing(0.5, 1, 0.5, 0.5)};
-    `,
+      '&:focus-visible': {
+        boxShadow: 'none',
+        color: theme.colors.text.primary,
+        outline: `2px solid ${theme.colors.primary.main}`,
+      },
+    }),
+    icon: css({
+      margin: theme.spacing(0.5, 1, 0.5, 0.5),
+    }),
   };
 };
 
@@ -165,50 +165,50 @@ export const UpgradeContent = ({
 
 const getUpgradeContentStyles = (theme: GrafanaTheme2) => {
   return {
-    container: css`
-      display: flex;
-      justify-content: space-between;
-    `,
-    content: css`
-      width: 45%;
-      margin-right: ${theme.spacing(4)};
-    `,
-    media: css`
-      width: 55%;
+    container: css({
+      display: 'flex',
+      justifyContent: 'space-between',
+    }),
+    content: css({
+      width: '45%',
+      marginRight: theme.spacing(4),
+    }),
+    media: css({
+      width: '55%',
 
-      img {
-        width: 100%;
-      }
-    `,
-    title: css`
-      color: ${theme.colors.text.maxContrast};
-    `,
-    description: css`
-      color: ${theme.colors.text.primary};
-      font-weight: ${theme.typography.fontWeightLight};
-    `,
-    list: css`
-      list-style: none;
-      margin: ${theme.spacing(4, 0, 2, 0)};
+      img: {
+        width: '100%',
+      },
+    }),
+    title: css({
+      color: theme.colors.text.maxContrast,
+    }),
+    description: css({
+      color: theme.colors.text.primary,
+      fontWeight: theme.typography.fontWeightLight,
+    }),
+    list: css({
+      listStyle: 'none',
+      margin: theme.spacing(4, 0, 2, 0),
 
-      li {
-        display: flex;
-        align-items: flex-start;
-        color: ${theme.colors.text.primary};
-        padding: ${theme.spacing(1, 0)};
-      }
-    `,
-    icon: css`
-      color: ${theme.colors.success.main};
-      margin-right: ${theme.spacing(1)};
-    `,
-    link: css`
-      margin-left: ${theme.spacing(2)};
-    `,
-    caption: css`
-      font-weight: ${theme.typography.fontWeightLight};
-      margin: ${theme.spacing(1, 0, 0)};
-    `,
+      li: {
+        display: 'flex',
+        alignItems: 'flex-start',
+        color: theme.colors.text.primary,
+        padding: theme.spacing(1, 0),
+      },
+    }),
+    icon: css({
+      color: theme.colors.success.main,
+      marginRight: theme.spacing(1),
+    }),
+    link: css({
+      marginLeft: theme.spacing(2),
+    }),
+    caption: css({
+      fontWeight: theme.typography.fontWeightLight,
+      margin: theme.spacing(1, 0, 0),
+    }),
   };
 };
 
@@ -235,25 +235,25 @@ export const UpgradeContentVertical = ({
 
 const getContentVerticalStyles = (theme: GrafanaTheme2) => {
   return {
-    container: css`
-      overflow: auto;
-      height: 100%;
-    `,
-    title: css`
-      color: ${theme.colors.text.maxContrast};
-    `,
-    description: css`
-      color: ${theme.colors.text.primary};
-      font-weight: ${theme.typography.fontWeightLight};
-    `,
-    media: css`
-      width: 100%;
-      margin-top: ${theme.spacing(2)};
+    container: css({
+      overflow: 'auto',
+      height: '100%',
+    }),
+    title: css({
+      color: theme.colors.text.maxContrast,
+    }),
+    description: css({
+      color: theme.colors.text.primary,
+      fontWeight: theme.typography.fontWeightLight,
+    }),
+    media: css({
+      width: '100%',
+      marginTop: theme.spacing(2),
 
-      img {
-        width: 100%;
-      }
-    `,
+      img: {
+        width: '100%',
+      },
+    }),
   };
 };
 
diff --git a/public/app/features/admin/LicenseChrome.tsx b/public/app/features/admin/LicenseChrome.tsx
index dbd0b597fd9..6179b97b792 100644
--- a/public/app/features/admin/LicenseChrome.tsx
+++ b/public/app/features/admin/LicenseChrome.tsx
@@ -11,21 +11,21 @@ const getStyles = (theme: GrafanaTheme2) => {
   const footerBg = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray6;
 
   return {
-    container: css`
-      padding: 36px 79px;
-      background: ${theme.components.panel.background};
-    `,
-    footer: css`
-      text-align: center;
-      padding: 16px;
-      background: ${footerBg};
-    `,
-    header: css`
-      height: 137px;
-      padding: 40px 0 0 79px;
-      position: relative;
-      background: url('${backgroundUrl}') right;
-    `,
+    container: css({
+      padding: '36px 79px',
+      background: theme.components.panel.background,
+    }),
+    footer: css({
+      textAlign: 'center',
+      padding: theme.spacing(2),
+      background: footerBg,
+    }),
+    header: css({
+      height: '137px',
+      padding: '40px 0 0 79px',
+      position: 'relative',
+      background: `url('${backgroundUrl}') right`,
+    }),
   };
 };
 
diff --git a/public/app/features/admin/UpgradePage.tsx b/public/app/features/admin/UpgradePage.tsx
index 2cfdf38f0e9..fe8a358b28e 100644
--- a/public/app/features/admin/UpgradePage.tsx
+++ b/public/app/features/admin/UpgradePage.tsx
@@ -54,19 +54,19 @@ export const UpgradeInfo = ({ editionNotice }: UpgradeInfoProps) => {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    column: css`
-      display: grid;
-      grid-template-columns: 100%;
-      column-gap: 20px;
-      row-gap: 40px;
+    column: css({
+      display: 'grid',
+      gridTemplateColumns: '100%',
+      columnGap: '20px',
+      rowGap: '40px',
 
-      @media (min-width: 1050px) {
-        grid-template-columns: 50% 50%;
-      }
-    `,
-    title: css`
-      margin: ${theme.spacing(4)} 0;
-    `,
+      '@media (min-width: 1050px)': {
+        gridTemplateColumns: '50% 50%',
+      },
+    }),
+    title: css({
+      margin: theme.spacing(4, 0),
+    }),
   };
 };
 
@@ -183,15 +183,15 @@ interface ListProps {
 }
 
 const List = ({ children, nested }: React.PropsWithChildren<ListProps>) => {
-  const listStyle = css`
-    display: flex;
-    flex-direction: column;
-    padding-top: 8px;
+  const listStyle = css({
+    display: 'flex',
+    flexDirection: 'column',
+    paddingTop: '8px',
 
-    > div {
-      margin-bottom: ${nested ? 0 : 8}px;
-    }
-  `;
+    '> div': {
+      marginBottom: `${nested ? 0 : 8}px`,
+    },
+  });
 
   return <div className={listStyle}>{children}</div>;
 };
@@ -203,20 +203,20 @@ interface ItemProps {
 
 const Item = ({ children, title, image }: React.PropsWithChildren<ItemProps>) => {
   const imageUrl = image ? image : 'public/img/licensing/checkmark.svg';
-  const itemStyle = css`
-    display: flex;
+  const itemStyle = css({
+    display: 'flex',
 
-    > img {
-      display: block;
-      height: 22px;
-      flex-grow: 0;
-      padding-right: 12px;
-    }
-  `;
-  const titleStyle = css`
-    font-weight: 500;
-    line-height: 1.7;
-  `;
+    '> img': {
+      display: 'block',
+      height: '22px',
+      flexGrow: 0,
+      paddingRight: '12px',
+    },
+  });
+  const titleStyle = css({
+    fontWeight: 500,
+    lineHeight: 1.7,
+  });
 
   return (
     <div className={itemStyle}>
diff --git a/public/app/features/admin/UserListPublicDashboardPage/DashboardsListModalButton.tsx b/public/app/features/admin/UserListPublicDashboardPage/DashboardsListModalButton.tsx
index 9cbcc10c5e7..2823105f1a1 100644
--- a/public/app/features/admin/UserListPublicDashboardPage/DashboardsListModalButton.tsx
+++ b/public/app/features/admin/UserListPublicDashboardPage/DashboardsListModalButton.tsx
@@ -104,42 +104,42 @@ export const DashboardsListModalButton = ({ email }: { email: string }) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  modal: css`
-    width: 590px;
-  `,
-  loading: css`
-    display: flex;
-    justify-content: center;
-  `,
-  listItem: css`
-    display: flex;
-    flex-direction: column;
-    gap: ${theme.spacing(0.5)};
-  `,
-  divider: css`
-    margin: ${theme.spacing(1.5, 0)};
-    color: ${theme.colors.text.secondary};
-  `,
-  urlsContainer: css`
-    display: flex;
-    gap: ${theme.spacing(0.5)};
+  modal: css({
+    width: '590px',
+  }),
+  loading: css({
+    display: 'flex',
+    justifyContent: 'center',
+  }),
+  listItem: css({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing(0.5),
+  }),
+  divider: css({
+    margin: theme.spacing(1.5, 0),
+    color: theme.colors.text.secondary,
+  }),
+  urlsContainer: css({
+    display: 'flex',
+    gap: theme.spacing(0.5),
 
-    ${theme.breakpoints.down('sm')} {
-      flex-direction: column;
-    }
-  `,
-  urlsDivider: css`
-    color: ${theme.colors.text.secondary};
-    ${theme.breakpoints.down('sm')} {
-      display: none;
-    }
-  `,
-  dashboardTitle: css`
-    font-size: ${theme.typography.body.fontSize};
-    font-weight: ${theme.typography.fontWeightBold};
-    margin-bottom: 0;
-  `,
-  url: css`
-    font-size: ${theme.typography.body.fontSize};
-  `,
+    [theme.breakpoints.down('sm')]: {
+      flexDirection: 'column',
+    },
+  }),
+  urlsDivider: css({
+    color: theme.colors.text.secondary,
+    [theme.breakpoints.down('sm')]: {
+      display: 'none',
+    },
+  }),
+  dashboardTitle: css({
+    fontSize: theme.typography.body.fontSize,
+    fontWeight: theme.typography.fontWeightBold,
+    marginBottom: 0,
+  }),
+  url: css({
+    fontSize: theme.typography.body.fontSize,
+  }),
 });
diff --git a/public/app/features/admin/UserPermissions.tsx b/public/app/features/admin/UserPermissions.tsx
index 0ebd00f0366..8b7d46970c0 100644
--- a/public/app/features/admin/UserPermissions.tsx
+++ b/public/app/features/admin/UserPermissions.tsx
@@ -89,10 +89,10 @@ export function UserPermissions({ isGrafanaAdmin, isExternalUser, lockMessage, o
 }
 
 const getTooltipStyles = (theme: GrafanaTheme2) => ({
-  lockMessageClass: css`
-    display: flex;
-    justify-content: flex-end;
-    font-style: italic;
-    margin-right: ${theme.spacing(0.6)};
-  `,
+  lockMessageClass: css({
+    display: 'flex',
+    justifyContent: 'flex-end',
+    fontStyle: 'italic',
+    marginRight: theme.spacing(0.6),
+  }),
 });
diff --git a/public/app/features/admin/UserProfile.tsx b/public/app/features/admin/UserProfile.tsx
index 34ee8a40cd0..911093d9b19 100644
--- a/public/app/features/admin/UserProfile.tsx
+++ b/public/app/features/admin/UserProfile.tsx
@@ -244,9 +244,9 @@ export class UserProfileRow extends PureComponent<UserProfileRowProps, UserProfi
     const { value } = this.state;
     const labelClass = cx(
       'width-16',
-      css`
-        font-weight: 500;
-      `
+      css({
+        fontWeight: 500,
+      })
     );
 
     if (locked) {
@@ -296,15 +296,15 @@ interface LockedRowProps {
 }
 
 export const LockedRow = ({ label, value, lockMessage }: LockedRowProps) => {
-  const lockMessageClass = css`
-    font-style: italic;
-    margin-right: 0.6rem;
-  `;
+  const lockMessageClass = css({
+    fontStyle: 'italic',
+    marginRight: '0.6rem',
+  });
   const labelClass = cx(
     'width-16',
-    css`
-      font-weight: 500;
-    `
+    css({
+      fontWeight: 500,
+    })
   );
 
   return (
diff --git a/public/app/features/api-keys/ApiKeysTable.tsx b/public/app/features/api-keys/ApiKeysTable.tsx
index 20a118bdd21..f695fe5d4e1 100644
--- a/public/app/features/api-keys/ApiKeysTable.tsx
+++ b/public/app/features/api-keys/ApiKeysTable.tsx
@@ -85,10 +85,11 @@ function formatDate(expiration: string | undefined, timeZone: TimeZone): string
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  tableRow: (isExpired: boolean) => css`
-    color: ${isExpired ? theme.colors.text.secondary : theme.colors.text.primary};
-  `,
-  tooltipContainer: css`
-    margin-left: ${theme.spacing(1)};
-  `,
+  tableRow: (isExpired: boolean) =>
+    css({
+      color: isExpired ? theme.colors.text.secondary : theme.colors.text.primary,
+    }),
+  tooltipContainer: css({
+    marginLeft: theme.spacing(1),
+  }),
 });
diff --git a/public/app/features/api-keys/MigrateToServiceAccountsCard.tsx b/public/app/features/api-keys/MigrateToServiceAccountsCard.tsx
index d186d4a2613..fa38aa8c3be 100644
--- a/public/app/features/api-keys/MigrateToServiceAccountsCard.tsx
+++ b/public/app/features/api-keys/MigrateToServiceAccountsCard.tsx
@@ -74,14 +74,14 @@ export const MigrateToServiceAccountsCard = ({ onMigrate, apikeysCount, disabled
 };
 
 export const getStyles = (theme: GrafanaTheme2) => ({
-  text: css`
-    margin-bottom: ${theme.spacing(2)};
-  `,
-  actionRow: css`
-    display: flex;
-    align-items: center;
-  `,
-  actionButton: css`
-    margin-right: ${theme.spacing(2)};
-  `,
+  text: css({
+    marginBottom: theme.spacing(2),
+  }),
+  actionRow: css({
+    display: 'flex',
+    alignItems: 'center',
+  }),
+  actionButton: css({
+    marginRight: theme.spacing(2),
+  }),
 });
diff --git a/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx b/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx
index a27534f5baf..52d2dbf3d34 100644
--- a/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx
+++ b/public/app/features/connections/components/ConnectionsRedirectNotice/ConnectionsRedirectNotice.tsx
@@ -9,17 +9,17 @@ import { AccessControlAction } from '../../../../types';
 import { ROUTES } from '../../constants';
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  alertContent: css`
-    display: flex;
-    flex-direction: row;
-    padding: 0;
-    justify-content: space-between;
-    align-items: center;
-  `,
-  alertParagraph: css`
-    margin: 0 ${theme.spacing(1)} 0 0;
-    line-height: ${theme.spacing(theme.components.height.sm)};
-  `,
+  alertContent: css({
+    display: 'flex',
+    flexDirection: 'row',
+    padding: 0,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  }),
+  alertParagraph: css({
+    margin: theme.spacing(0, 1, 0, 0),
+    lineHeight: theme.spacing(theme.components.height.sm),
+  }),
 });
 
 export function ConnectionsRedirectNotice() {
diff --git a/public/app/features/connections/tabs/ConnectData/CategoryHeader/CategoryHeader.tsx b/public/app/features/connections/tabs/ConnectData/CategoryHeader/CategoryHeader.tsx
index f483e5f9741..a71298088cb 100644
--- a/public/app/features/connections/tabs/ConnectData/CategoryHeader/CategoryHeader.tsx
+++ b/public/app/features/connections/tabs/ConnectData/CategoryHeader/CategoryHeader.tsx
@@ -4,15 +4,15 @@ import { GrafanaTheme2, IconName } from '@grafana/data';
 import { Icon, useStyles2 } from '@grafana/ui';
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  categoryHeader: css`
-    align-items: center;
-    display: flex;
-    margin-bottom: 24px;
-  `,
-  categoryLabel: css`
-    margin-bottom: 0px;
-    margin-left: 8px;
-  `,
+  categoryHeader: css({
+    alignItems: 'center',
+    display: 'flex',
+    marginBottom: theme.spacing(3),
+  }),
+  categoryLabel: css({
+    marginBottom: 0,
+    marginLeft: theme.spacing(1),
+  }),
 });
 
 type Props = { iconName: IconName; label: string };
diff --git a/public/app/features/connections/tabs/ConnectData/NoAccessModal/NoAccessModal.tsx b/public/app/features/connections/tabs/ConnectData/NoAccessModal/NoAccessModal.tsx
index 9206a40e602..2fc70dea167 100644
--- a/public/app/features/connections/tabs/ConnectData/NoAccessModal/NoAccessModal.tsx
+++ b/public/app/features/connections/tabs/ConnectData/NoAccessModal/NoAccessModal.tsx
@@ -6,48 +6,48 @@ import { useStyles2, Modal, Icon, Button } from '@grafana/ui';
 import { type CardGridItem } from '../CardGrid';
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  modal: css`
-    width: 500px;
-  `,
-  modalContent: css`
-    overflow: visible;
-    color: ${theme.colors.text.secondary};
+  modal: css({
+    width: '500px',
+  }),
+  modalContent: css({
+    overflow: 'visible',
+    color: theme.colors.text.secondary,
 
-    a {
-      color: ${theme.colors.text.link};
-    }
-  `,
-  description: css`
-    margin-bottom: ${theme.spacing(2)};
-  `,
-  bottomSection: css`
-    display: flex;
-    border-top: 1px solid ${theme.colors.border.weak};
-    padding-top: ${theme.spacing(3)};
-    margin-top: ${theme.spacing(3)};
-  `,
-  actionsSection: css`
-    display: flex;
-    justify-content: end;
-    margin-top: ${theme.spacing(3)};
-  `,
-  warningIcon: css`
-    color: ${theme.colors.warning.main};
-    padding-right: ${theme.spacing()};
-    margin-top: ${theme.spacing(0.25)};
-  `,
-  header: css`
-    display: flex;
-    align-items: center;
-  `,
-  headerTitle: css`
-    margin: 0;
-  `,
-  headerLogo: css`
-    margin-right: ${theme.spacing(2)};
-    width: 32px;
-    height: 32px;
-  `,
+    a: {
+      color: theme.colors.text.link,
+    },
+  }),
+  description: css({
+    marginBottom: theme.spacing(2),
+  }),
+  bottomSection: css({
+    display: 'flex',
+    borderTop: `1px solid ${theme.colors.border.weak}`,
+    paddingTop: theme.spacing(3),
+    marginTop: theme.spacing(3),
+  }),
+  actionsSection: css({
+    display: 'flex',
+    justifyContent: 'end',
+    marginTop: theme.spacing(3),
+  }),
+  warningIcon: css({
+    color: theme.colors.warning.main,
+    paddingRight: theme.spacing(),
+    marginTop: theme.spacing(0.25),
+  }),
+  header: css({
+    display: 'flex',
+    alignItems: 'center',
+  }),
+  headerTitle: css({
+    margin: 0,
+  }),
+  headerLogo: css({
+    marginRight: theme.spacing(2),
+    width: '32px',
+    height: '32px',
+  }),
 });
 
 export type NoAccessModalProps = {
diff --git a/public/app/features/correlations/CorrelationsPage.tsx b/public/app/features/correlations/CorrelationsPage.tsx
index d653f30a353..163f18b6435 100644
--- a/public/app/features/correlations/CorrelationsPage.tsx
+++ b/public/app/features/correlations/CorrelationsPage.tsx
@@ -35,10 +35,10 @@ const sortDatasource: SortByFn<CorrelationData> = (a, b, column) =>
 
 const isCorrelationsReadOnly = (correlation: CorrelationData) => correlation.provisioned;
 
-const loaderWrapper = css`
-  display: flex;
-  justify-content: center;
-`;
+const loaderWrapper = css({
+  display: 'flex',
+  justifyContent: 'center',
+});
 
 export default function CorrelationsPage() {
   const navModel = useNavModel('correlations');
@@ -255,15 +255,15 @@ function ExpendedRow({ correlation: { source, ...correlation }, readOnly, onUpda
 }
 
 const getDatasourceCellStyles = (theme: GrafanaTheme2) => ({
-  root: css`
-    display: flex;
-    align-items: center;
-  `,
-  dsLogo: css`
-    margin-right: ${theme.spacing()};
-    height: 16px;
-    width: 16px;
-  `,
+  root: css({
+    display: 'flex',
+    alignItems: 'center',
+  }),
+  dsLogo: css({
+    marginRight: theme.spacing(),
+    height: '16px',
+    width: '16px',
+  }),
 });
 
 const DataSourceCell = memo(
@@ -286,9 +286,9 @@ const DataSourceCell = memo(
   }
 );
 
-const noWrap = css`
-  white-space: nowrap;
-`;
+const noWrap = css({
+  whiteSpace: 'nowrap',
+});
 
 const InfoCell = memo(
   function InfoCell({ ...props }: CellProps<CorrelationData, void>) {
diff --git a/public/app/features/correlations/Forms/AddCorrelationForm.tsx b/public/app/features/correlations/Forms/AddCorrelationForm.tsx
index f87f9fec078..bda19c40de6 100644
--- a/public/app/features/correlations/Forms/AddCorrelationForm.tsx
+++ b/public/app/features/correlations/Forms/AddCorrelationForm.tsx
@@ -16,14 +16,14 @@ import { CorrelationsFormContextProvider } from './correlationsFormContext';
 import { FormDTO } from './types';
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  panelContainer: css`
-    position: relative;
-    padding: ${theme.spacing(1)};
-    margin-bottom: ${theme.spacing(2)};
-  `,
-  infoBox: css`
-    margin-top: 20px; // give space for close button
-  `,
+  panelContainer: css({
+    position: 'relative',
+    padding: theme.spacing(1),
+    marginBottom: theme.spacing(2),
+  }),
+  infoBox: css({
+    marginTop: '20px', // give space for close button
+  }),
 });
 
 interface Props {
diff --git a/public/app/features/correlations/Forms/ConfigureCorrelationBasicInfoForm.tsx b/public/app/features/correlations/Forms/ConfigureCorrelationBasicInfoForm.tsx
index 68c8f9d863d..3e6b848eeae 100644
--- a/public/app/features/correlations/Forms/ConfigureCorrelationBasicInfoForm.tsx
+++ b/public/app/features/correlations/Forms/ConfigureCorrelationBasicInfoForm.tsx
@@ -10,12 +10,12 @@ import { FormDTO } from './types';
 import { getInputId } from './utils';
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  label: css`
-    max-width: ${theme.spacing(80)};
-  `,
-  description: css`
-    max-width: ${theme.spacing(80)};
-  `,
+  label: css({
+    maxWidth: theme.spacing(80),
+  }),
+  description: css({
+    maxWidth: theme.spacing(80),
+  }),
 });
 
 export const ConfigureCorrelationBasicInfoForm = () => {
diff --git a/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx b/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
index b079b85d995..b15947465c0 100644
--- a/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
+++ b/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
@@ -15,13 +15,13 @@ import { FormDTO } from './types';
 import { getInputId } from './utils';
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  label: css`
-    max-width: ${theme.spacing(80)};
-  `,
-  variable: css`
-    font-family: ${theme.typography.fontFamilyMonospace};
-    font-weight: ${theme.typography.fontWeightMedium};
-  `,
+  label: css({
+    maxWidth: theme.spacing(80),
+  }),
+  variable: css({
+    fontFamily: theme.typography.fontFamilyMonospace,
+    fontWeight: theme.typography.fontWeightMedium,
+  }),
 });
 
 const getFormText = (queryType: string, dataSourceName?: string) => {
diff --git a/public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx b/public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx
index 84e22a5c36d..75f9aac81aa 100644
--- a/public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx
+++ b/public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx
@@ -32,9 +32,9 @@ export const CORR_TYPES_SELECT: Record<CorrelationType, CorrelationTypeOptions>
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  typeSelect: css`
-    max-width: ${theme.spacing(40)};
-  `,
+  typeSelect: css({
+    maxWidth: theme.spacing(40),
+  }),
 });
 
 export const ConfigureCorrelationTargetForm = () => {
diff --git a/public/app/features/datasources/components/BasicSettings.tsx b/public/app/features/datasources/components/BasicSettings.tsx
index 02f6ba4035a..83cf383db9a 100644
--- a/public/app/features/datasources/components/BasicSettings.tsx
+++ b/public/app/features/datasources/components/BasicSettings.tsx
@@ -70,7 +70,7 @@ export function AlertingEnabled({ enabled }: { enabled: boolean }) {
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  badge: css`
-    margin-bottom: ${theme.spacing(2)};
-  `,
+  badge: css({
+    marginBottom: theme.spacing(2),
+  }),
 });
diff --git a/public/app/features/datasources/components/DataSourceTypeCardList.tsx b/public/app/features/datasources/components/DataSourceTypeCardList.tsx
index ffcfa10cdbf..badb801d123 100644
--- a/public/app/features/datasources/components/DataSourceTypeCardList.tsx
+++ b/public/app/features/datasources/components/DataSourceTypeCardList.tsx
@@ -22,11 +22,11 @@ export function DataSourceTypeCardList({ dataSourcePlugins, onClickDataSourceTyp
       items={dataSourcePlugins}
       getItemKey={(item) => item.id.toString()}
       renderItem={(item) => <DataSourceTypeCard dataSourcePlugin={item} onClick={() => onClickDataSourceType(item)} />}
-      className={css`
-        > li {
-          margin-bottom: 2px;
-        }
-      `}
+      className={css({
+        '> li': {
+          marginBottom: '2px',
+        },
+      })}
     />
   );
 }
diff --git a/public/app/features/datasources/components/picker/DataSourceCard.tsx b/public/app/features/datasources/components/picker/DataSourceCard.tsx
index ba0c71aa144..7e14837a32c 100644
--- a/public/app/features/datasources/components/picker/DataSourceCard.tsx
+++ b/public/app/features/datasources/components/picker/DataSourceCard.tsx
@@ -39,71 +39,74 @@ export function DataSourceCard({ ds, onClick, selected, description, ...htmlProp
 // Get styles for the component
 function getStyles(theme: GrafanaTheme2, builtIn = false) {
   return {
-    card: css`
-      cursor: pointer;
-      background-color: ${theme.colors.background.primary};
-      border-bottom: 1px solid ${theme.colors.border.weak};
+    card: css({
+      cursor: 'pointer',
+      backgroundColor: theme.colors.background.primary,
+      borderBottom: `1px solid ${theme.colors.border.weak}`,
       // Move to list component
-      margin-bottom: 0;
-      border-radius: 0;
-      padding: ${theme.spacing(1)};
-    `,
-    heading: css`
-      width: 100%;
-      overflow: hidden;
+      marginBottom: 0,
+      // set this to 0 to override the default card radius
+      // also need to disable our eslint rule
+      // eslint-disable-next-line @grafana/no-border-radius-literal
+      borderRadius: 0,
+      padding: theme.spacing(1),
+    }),
+    heading: css({
+      width: '100%',
+      overflow: 'hidden',
       // This is needed to enable ellipsis when text overlfows
-      > button {
-        width: 100%;
-      }
-    `,
-    headingContent: css`
-      color: ${theme.colors.text.secondary};
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: flex;
-      justify-content: space-between;
-    `,
-    logo: css`
-      width: 32px;
-      height: 32px;
-      padding: ${theme.spacing(0, 1)};
-      display: flex;
-      align-items: center;
+      '> button': {
+        width: '100%',
+      },
+    }),
+    headingContent: css({
+      color: theme.colors.text.secondary,
+      width: '100%',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      display: 'flex',
+      justifyContent: 'space-between',
+    }),
+    logo: css({
+      width: '32px',
+      height: '32px',
+      padding: theme.spacing(0, 1),
+      display: 'flex',
+      alignItems: 'center',
 
-      > img {
-        max-height: 100%;
-        min-width: 24px;
-        filter: invert(${builtIn && theme.isLight ? 1 : 0});
-      }
-    `,
-    name: css`
-      color: ${theme.colors.text.primary};
-      display: flex;
-      gap: ${theme.spacing(2)};
-    `,
-    type: css`
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      display: flex;
-      align-items: center;
-    `,
-    separator: css`
-      margin: 0 ${theme.spacing(1)};
-      color: ${theme.colors.border.weak};
-    `,
-    selected: css`
-      background-color: ${theme.colors.background.secondary};
-    `,
-    meta: css`
-      display: block;
-      overflow-wrap: unset;
-      white-space: nowrap;
-      width: 100%;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    `,
+      '> img': {
+        maxHeight: '100%',
+        minWidth: '24px',
+        filter: `invert(${builtIn && theme.isLight ? 1 : 0})`,
+      },
+    }),
+    name: css({
+      color: theme.colors.text.primary,
+      display: 'flex',
+      gap: theme.spacing(2),
+    }),
+    type: css({
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      display: 'flex',
+      alignItems: 'center',
+    }),
+    separator: css({
+      margin: theme.spacing(0, 1),
+      color: theme.colors.border.weak,
+    }),
+    selected: css({
+      backgroundColor: theme.colors.background.secondary,
+    }),
+    meta: css({
+      display: 'block',
+      overflowWrap: 'unset',
+      whiteSpace: 'nowrap',
+      width: '100%',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    }),
   };
 }
diff --git a/public/app/features/datasources/components/picker/DataSourceList.tsx b/public/app/features/datasources/components/picker/DataSourceList.tsx
index fa2600418a6..11fc0bc90e0 100644
--- a/public/app/features/datasources/components/picker/DataSourceList.tsx
+++ b/public/app/features/datasources/components/picker/DataSourceList.tsx
@@ -115,15 +115,15 @@ function EmptyState({ className, onClickCTA }: { className?: string; onClickCTA?
 
 function getEmptyStateStyles(theme: GrafanaTheme2) {
   return {
-    container: css`
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-    `,
-    message: css`
-      margin-bottom: ${theme.spacing(3)};
-    `,
+    container: css({
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }),
+    message: css({
+      marginBottom: theme.spacing(3),
+    }),
   };
 }
 
@@ -138,16 +138,16 @@ function getDataSourceVariableIDs() {
 
 function getStyles(theme: GrafanaTheme2, selectedItemCssSelector: string) {
   return {
-    container: css`
-      display: flex;
-      flex-direction: column;
-      ${selectedItemCssSelector} {
-        background-color: ${theme.colors.background.secondary};
-      }
-    `,
-    emptyState: css`
-      height: 100%;
-      flex: 1;
-    `,
+    container: css({
+      display: 'flex',
+      flexDirection: 'column',
+      [`${selectedItemCssSelector}`]: {
+        backgroundColor: theme.colors.background.secondary,
+      },
+    }),
+    emptyState: css({
+      height: '100%',
+      flex: 1,
+    }),
   };
 }
diff --git a/public/app/features/datasources/components/picker/DataSourceLogo.tsx b/public/app/features/datasources/components/picker/DataSourceLogo.tsx
index 35b2ae5ed7d..c8bfcc4601d 100644
--- a/public/app/features/datasources/components/picker/DataSourceLogo.tsx
+++ b/public/app/features/datasources/components/picker/DataSourceLogo.tsx
@@ -32,10 +32,10 @@ export function DataSourceLogoPlaceHolder() {
 
 function getStyles(theme: GrafanaTheme2, builtIn = false) {
   return {
-    pickerDSLogo: css`
-      height: 20px;
-      width: 20px;
-      filter: invert(${builtIn && theme.isLight ? 1 : 0});
-    `,
+    pickerDSLogo: css({
+      height: '20px',
+      width: '20px',
+      filter: `invert(${builtIn && theme.isLight ? 1 : 0})`,
+    }),
   };
 }
diff --git a/public/app/features/datasources/components/picker/DataSourceModal.tsx b/public/app/features/datasources/components/picker/DataSourceModal.tsx
index 908f13670a2..5ea31b34431 100644
--- a/public/app/features/datasources/components/picker/DataSourceModal.tsx
+++ b/public/app/features/datasources/components/picker/DataSourceModal.tsx
@@ -235,95 +235,95 @@ export function DataSourceModal({
 
 function getDataSourceModalStyles(theme: GrafanaTheme2) {
   return {
-    modal: css`
-      width: 80%;
-      height: 80%;
-      max-width: 1200px;
-      max-height: 900px;
+    modal: css({
+      width: '80%',
+      height: '80%',
+      maxWidth: '1200px',
+      maxHeight: '900px',
 
-      ${theme.breakpoints.down('md')} {
-        width: 100%;
-      }
-    `,
-    modalContent: css`
-      display: flex;
-      flex-direction: row;
-      height: 100%;
+      [theme.breakpoints.down('md')]: {
+        width: '100%',
+      },
+    }),
+    modalContent: css({
+      display: 'flex',
+      flexDirection: 'row',
+      height: '100%',
 
-      ${theme.breakpoints.down('md')} {
-        flex-direction: column;
-      }
-    `,
-    leftColumn: css`
-      display: flex;
-      flex-direction: column;
-      width: 50%;
-      height: 100%;
-      padding-right: ${theme.spacing(4)};
-      border-right: 1px solid ${theme.colors.border.weak};
+      [theme.breakpoints.down('md')]: {
+        flexDirection: 'column',
+      },
+    }),
+    leftColumn: css({
+      display: 'flex',
+      flexDirection: 'column',
+      width: '50%',
+      height: '100%',
+      paddingRight: theme.spacing(4),
+      borderRight: `1px solid ${theme.colors.border.weak}`,
 
-      ${theme.breakpoints.down('md')} {
-        width: 100%;
-        border-right: 0;
-        padding-right: 0;
-        flex: 1;
-        overflow-y: auto;
-      }
-    `,
-    rightColumn: css`
-      display: flex;
-      flex-direction: column;
-      width: 50%;
-      height: 100%;
-      justify-items: space-evenly;
-      align-items: stretch;
-      padding-left: ${theme.spacing(4)};
+      [theme.breakpoints.down('md')]: {
+        width: '100%',
+        borderRight: 0,
+        paddingRight: 0,
+        flex: 1,
+        overflowY: 'auto',
+      },
+    }),
+    rightColumn: css({
+      display: 'flex',
+      flexDirection: 'column',
+      width: '50%',
+      height: '100%',
+      justifyItems: 'space-evenly',
+      alignItems: 'stretch',
+      paddingLeft: theme.spacing(4),
 
-      ${theme.breakpoints.down('md')} {
-        width: 100%;
-        padding-left: 0;
-        flex: 0;
-      }
-    `,
-    builtInDataSources: css`
-      flex: 1 1;
-      margin-bottom: ${theme.spacing(4)};
+      [theme.breakpoints.down('md')]: {
+        width: '100%',
+        paddingLeft: 0,
+        flex: 0,
+      },
+    }),
+    builtInDataSources: css({
+      flex: '1 1',
+      marginBottom: theme.spacing(4),
 
-      ${theme.breakpoints.down('md')} {
-        flex: 0;
-      }
-    `,
-    builtInDataSourcesList: css`
-      ${theme.breakpoints.down('md')} {
-        display: none;
-        margin-bottom: 0;
-      }
+      [theme.breakpoints.down('md')]: {
+        flex: 0,
+      },
+    }),
+    builtInDataSourcesList: css({
+      [theme.breakpoints.down('md')]: {
+        display: 'none',
+        marginBottom: 0,
+      },
 
-      margin-bottom: ${theme.spacing(4)};
-    `,
-    appendBuiltInDataSourcesList: css`
-      ${theme.breakpoints.up('md')} {
-        display: none;
-      }
-    `,
-    newDSSection: css`
-      display: flex;
-      flex-direction: row;
-      width: 100%;
-      justify-content: space-between;
-      align-items: center;
-    `,
-    newDSDescription: css`
-      flex: 1 0;
-      text-overflow: ellipsis;
-      overflow: hidden;
-      white-space: nowrap;
-      color: ${theme.colors.text.secondary};
-    `,
-    searchInput: css`
-      width: 100%;
-      min-height: 32px;
-      margin-bottom: ${theme.spacing(1)};
-    `,
+      marginBottom: theme.spacing(4),
+    }),
+    appendBuiltInDataSourcesList: css({
+      [theme.breakpoints.up('md')]: {
+        display: 'none',
+      },
+    }),
+    newDSSection: css({
+      display: 'flex',
+      flexDirection: 'row',
+      width: '100%',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+    }),
+    newDSDescription: css({
+      flex: '1 0',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      color: theme.colors.text.secondary,
+    }),
+    searchInput: css({
+      width: '100%',
+      minHeight: '32px',
+      marginBottom: theme.spacing(1),
+    }),
   };
 }
diff --git a/public/app/features/dimensions/editors/ColorDimensionEditor.tsx b/public/app/features/dimensions/editors/ColorDimensionEditor.tsx
index d0b8b7a9c3c..7cb7c63c6ba 100644
--- a/public/app/features/dimensions/editors/ColorDimensionEditor.tsx
+++ b/public/app/features/dimensions/editors/ColorDimensionEditor.tsx
@@ -86,13 +86,13 @@ export const ColorDimensionEditor = (props: StandardEditorProps<ColorDimensionCo
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  container: css`
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: flex-end;
-    align-items: center;
-  `,
-  picker: css`
-    padding-left: 8px;
-  `,
+  container: css({
+    display: 'flex',
+    flexWrap: 'nowrap',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+  }),
+  picker: css({
+    paddingLeft: theme.spacing(1),
+  }),
 });
diff --git a/public/app/features/dimensions/editors/FileUploader.tsx b/public/app/features/dimensions/editors/FileUploader.tsx
index fe7373ccabc..053930bca53 100644
--- a/public/app/features/dimensions/editors/FileUploader.tsx
+++ b/public/app/features/dimensions/editors/FileUploader.tsx
@@ -81,53 +81,53 @@ export const FileUploader = ({ mediaType, setFormData, setUpload, error }: Props
 
 function getStyles(theme: GrafanaTheme2, isDragActive?: boolean) {
   return {
-    container: css`
-      display: flex;
-      flex-direction: column;
-      width: 100%;
-    `,
-    dropzone: css`
-      display: flex;
-      flex: 1;
-      flex-direction: column;
-      align-items: center;
-      padding: ${theme.spacing(6)};
-      border-radius: 2px;
-      border: 2px dashed ${theme.colors.border.medium};
-      background-color: ${isDragActive ? theme.colors.background.secondary : theme.colors.background.primary};
-      cursor: pointer;
-    `,
-    iconWrapper: css`
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-    `,
-    acceptMargin: css`
-      margin: ${theme.spacing(2, 0, 1)};
-    `,
-    small: css`
-      color: ${theme.colors.text.secondary};
-      margin-bottom: ${theme.spacing(2)};
-    `,
-    iconContainer: css`
-      display: flex;
-      flex-direction: column;
-      width: 80%;
-      align-items: center;
-      align-self: center;
-    `,
-    iconPreview: css`
-      width: 238px;
-      height: 198px;
-      border: 1px solid ${theme.colors.border.medium};
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    `,
-    img: css`
-      width: 147px;
-      height: 147px;
-      fill: ${theme.colors.text.primary};
-    `,
+    container: css({
+      display: 'flex',
+      flexDirection: 'column',
+      width: '100%',
+    }),
+    dropzone: css({
+      display: 'flex',
+      flex: 1,
+      flexDirection: 'column',
+      alignItems: 'center',
+      padding: theme.spacing(6),
+      borderRadius: theme.shape.radius.default,
+      border: `2px dashed ${theme.colors.border.medium}`,
+      backgroundColor: isDragActive ? theme.colors.background.secondary : theme.colors.background.primary,
+      cursor: 'pointer',
+    }),
+    iconWrapper: css({
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+    }),
+    acceptMargin: css({
+      margin: theme.spacing(2, 0, 1),
+    }),
+    small: css({
+      color: theme.colors.text.secondary,
+      marginBottom: theme.spacing(2),
+    }),
+    iconContainer: css({
+      display: 'flex',
+      flexDirection: 'column',
+      width: '80%',
+      alignItems: 'center',
+      alignSelf: 'center',
+    }),
+    iconPreview: css({
+      width: '238px',
+      height: '198px',
+      border: `1px solid ${theme.colors.border.medium}`,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }),
+    img: css({
+      width: '147px',
+      height: '147px',
+      fill: theme.colors.text.primary,
+    }),
   };
 }
diff --git a/public/app/features/dimensions/editors/FolderPickerTab.tsx b/public/app/features/dimensions/editors/FolderPickerTab.tsx
index cdd7e2eb61f..6071a90f228 100644
--- a/public/app/features/dimensions/editors/FolderPickerTab.tsx
+++ b/public/app/features/dimensions/editors/FolderPickerTab.tsx
@@ -123,10 +123,10 @@ export const FolderPickerTab = (props: Props) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  cardsWrapper: css`
-    height: 30vh;
-    min-height: 50px;
-    margin-top: 5px;
-    max-width: 680px;
-  `,
+  cardsWrapper: css({
+    height: '30vh',
+    minHeight: '50px',
+    marginTop: '5px',
+    maxWidth: '680px',
+  }),
 });
diff --git a/public/app/features/dimensions/editors/ResourceCards.tsx b/public/app/features/dimensions/editors/ResourceCards.tsx
index 33e6fa87081..14f78b974b1 100644
--- a/public/app/features/dimensions/editors/ResourceCards.tsx
+++ b/public/app/features/dimensions/editors/ResourceCards.tsx
@@ -93,46 +93,46 @@ export const ResourceCards = (props: CardProps) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  card: css`
-    display: inline-block;
-    width: 90px;
-    height: 90px;
-    margin: 0.75rem;
-    margin-left: 15px;
-    text-align: center;
-    cursor: pointer;
-    position: relative;
-    background-color: transparent;
-    border: 1px solid transparent;
-    border-radius: 8px;
-    padding-top: 6px;
-    :hover {
-      border-color: ${theme.colors.action.hover};
-      box-shadow: ${theme.shadows.z2};
-    }
-  `,
-  selected: css`
-    border: 2px solid ${theme.colors.primary.main};
-    :hover {
-      border-color: ${theme.colors.primary.main};
-    }
-  `,
-  img: css`
-    width: 40px;
-    height: 40px;
-    object-fit: cover;
-    vertical-align: middle;
-    fill: ${theme.colors.text.primary};
-  `,
-  text: css`
-    color: ${theme.colors.text.primary};
-    white-space: nowrap;
-    font-size: 12px;
-    text-overflow: ellipsis;
-    display: block;
-    overflow: hidden;
-  `,
-  grid: css`
-    border: 1px solid ${theme.colors.border.medium};
-  `,
+  card: css({
+    display: 'inline-block',
+    width: '90px',
+    height: '90px',
+    margin: '0.75rem',
+    marginLeft: '15px',
+    textAlign: 'center',
+    cursor: 'pointer',
+    position: 'relative',
+    backgroundColor: 'transparent',
+    border: '1px solid transparent',
+    borderRadius: theme.shape.radius.default,
+    paddingTop: '6px',
+    ':hover': {
+      borderColor: theme.colors.action.hover,
+      boxShadow: theme.shadows.z2,
+    },
+  }),
+  selected: css({
+    border: `2px solid ${theme.colors.primary.main}`,
+    ':hover': {
+      borderColor: theme.colors.primary.main,
+    },
+  }),
+  img: css({
+    width: '40px',
+    height: '40px',
+    objectFit: 'cover',
+    verticalAlign: 'middle',
+    fill: theme.colors.text.primary,
+  }),
+  text: css({
+    color: theme.colors.text.primary,
+    whiteSpace: 'nowrap',
+    fontSize: '12px',
+    textOverflow: 'ellipsis',
+    display: 'block',
+    overflow: 'hidden',
+  }),
+  grid: css({
+    border: `1px solid ${theme.colors.border.medium}`,
+  }),
 });
diff --git a/public/app/features/dimensions/editors/ResourcePicker.tsx b/public/app/features/dimensions/editors/ResourcePicker.tsx
index 737b0cac4b0..89375f1439d 100644
--- a/public/app/features/dimensions/editors/ResourcePicker.tsx
+++ b/public/app/features/dimensions/editors/ResourcePicker.tsx
@@ -138,16 +138,16 @@ function getDisplayName(src?: string, name?: string): string | undefined {
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  pointer: css`
-    cursor: pointer;
-    input[readonly] {
-      cursor: pointer;
-    }
-  `,
-  icon: css`
-    vertical-align: middle;
-    display: inline-block;
-    fill: currentColor;
-    width: 25px;
-  `,
+  pointer: css({
+    cursor: 'pointer',
+    'input[readonly]': {
+      cursor: 'pointer',
+    },
+  }),
+  icon: css({
+    verticalAlign: 'middle',
+    display: 'inline-block',
+    fill: 'currentColor',
+    width: '25px',
+  }),
 });
diff --git a/public/app/features/dimensions/editors/ResourcePickerPopover.tsx b/public/app/features/dimensions/editors/ResourcePickerPopover.tsx
index 3becc33cfba..e62e0c6a202 100644
--- a/public/app/features/dimensions/editors/ResourcePickerPopover.tsx
+++ b/public/app/features/dimensions/editors/ResourcePickerPopover.tsx
@@ -143,49 +143,49 @@ export const ResourcePickerPopover = (props: Props) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  resourcePickerPopover: css`
-    border-radius: ${theme.shape.radius.default};
-    box-shadow: ${theme.shadows.z3};
-    background: ${theme.colors.background.primary};
-    border: 1px solid ${theme.colors.border.weak};
-  `,
-  resourcePickerPopoverTab: css`
-    width: 50%;
-    text-align: center;
-    padding: ${theme.spacing(1, 0)};
-    background: ${theme.colors.background.secondary};
-    color: ${theme.colors.text.secondary};
-    font-size: ${theme.typography.bodySmall.fontSize};
-    cursor: pointer;
-    border: none;
+  resourcePickerPopover: css({
+    borderRadius: theme.shape.radius.default,
+    boxShadow: theme.shadows.z3,
+    background: theme.colors.background.primary,
+    border: `1px solid ${theme.colors.border.weak}`,
+  }),
+  resourcePickerPopoverTab: css({
+    width: '50%',
+    textAlign: 'center',
+    padding: theme.spacing(1, 0),
+    background: theme.colors.background.secondary,
+    color: theme.colors.text.secondary,
+    fontSize: theme.typography.bodySmall.fontSize,
+    cursor: 'pointer',
+    border: 'none',
 
-    &:focus:not(:focus-visible) {
-      outline: none;
-      box-shadow: none;
-    }
+    '&:focus:not(:focus-visible)': {
+      outline: 'none',
+      boxShadow: 'none',
+    },
 
-    :focus-visible {
-      position: relative;
-    }
-  `,
-  resourcePickerPopoverActiveTab: css`
-    color: ${theme.colors.text.primary};
-    font-weight: ${theme.typography.fontWeightMedium};
-    background: ${theme.colors.background.primary};
-  `,
-  resourcePickerPopoverContent: css`
-    width: 315px;
-    font-size: ${theme.typography.bodySmall.fontSize};
-    min-height: 184px;
-    padding: ${theme.spacing(1)};
-    display: flex;
-    flex-direction: column;
-  `,
-  resourcePickerPopoverTabs: css`
-    display: flex;
-    width: 100%;
-    border-radius: ${theme.shape.radius.default} ${theme.shape.radius.default} 0 0;
-  `,
+    ':focus-visible': {
+      position: 'relative',
+    },
+  }),
+  resourcePickerPopoverActiveTab: css({
+    color: theme.colors.text.primary,
+    fontWeight: theme.typography.fontWeightMedium,
+    background: theme.colors.background.primary,
+  }),
+  resourcePickerPopoverContent: css({
+    width: '315px',
+    fontSize: theme.typography.bodySmall.fontSize,
+    minHeight: '184px',
+    padding: theme.spacing(1),
+    display: 'flex',
+    flexDirection: 'column',
+  }),
+  resourcePickerPopoverTabs: css({
+    display: 'flex',
+    width: '100%',
+    borderRadius: `${theme.shape.radius.default} ${theme.shape.radius.default} 0 0`,
+  }),
   buttonRow: css({
     display: 'flex',
     justifyContent: 'center',
diff --git a/public/app/features/dimensions/editors/ScalarDimensionEditor.tsx b/public/app/features/dimensions/editors/ScalarDimensionEditor.tsx
index aaacb13b841..4dc08ddfda5 100644
--- a/public/app/features/dimensions/editors/ScalarDimensionEditor.tsx
+++ b/public/app/features/dimensions/editors/ScalarDimensionEditor.tsx
@@ -111,7 +111,7 @@ export const ScalarDimensionEditor = ({ value, context, onChange, item }: Props)
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  range: css`
-    padding-top: 8px;
-  `,
+  range: css({
+    paddingTop: theme.spacing(1),
+  }),
 });
diff --git a/public/app/features/dimensions/editors/ScaleDimensionEditor.tsx b/public/app/features/dimensions/editors/ScaleDimensionEditor.tsx
index df20b6a5761..5c042e25a71 100644
--- a/public/app/features/dimensions/editors/ScaleDimensionEditor.tsx
+++ b/public/app/features/dimensions/editors/ScaleDimensionEditor.tsx
@@ -131,7 +131,7 @@ export const ScaleDimensionEditor = (props: StandardEditorProps<ScaleDimensionCo
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  range: css`
-    padding-top: 8px;
-  `,
+  range: css({
+    paddingTop: theme.spacing(1),
+  }),
 });
diff --git a/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx b/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx
index 0988e4170c6..cd2191d24fe 100644
--- a/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx
+++ b/public/app/features/dimensions/editors/ThresholdsEditor/ThresholdsEditor.tsx
@@ -290,44 +290,44 @@ interface ThresholdStyles {
 
 const getStyles = stylesFactory((theme: GrafanaTheme2): ThresholdStyles => {
   return {
-    wrapper: css`
-      display: flex;
-      flex-direction: column;
-    `,
-    thresholds: css`
-      display: flex;
-      flex-direction: column;
-      margin-bottom: ${theme.spacing(2)};
-    `,
-    item: css`
-      margin-bottom: ${theme.spacing(1)};
+    wrapper: css({
+      display: 'flex',
+      flexDirection: 'column',
+    }),
+    thresholds: css({
+      display: 'flex',
+      flexDirection: 'column',
+      marginBottom: theme.spacing(2),
+    }),
+    item: css({
+      marginBottom: theme.spacing(1),
 
-      &:last-child {
-        margin-bottom: 0;
-      }
-    `,
-    colorPicker: css`
-      padding: 0 ${theme.spacing(1)};
-    `,
-    addButton: css`
-      margin-bottom: ${theme.spacing(1)};
-    `,
-    percentIcon: css`
-      font-size: ${theme.typography.bodySmall.fontSize};
-      color: ${theme.colors.text.secondary};
-    `,
-    inputPrefix: css`
-      display: flex;
-      align-items: center;
-    `,
-    trashIcon: css`
-      color: ${theme.colors.text.secondary};
-      cursor: pointer;
-      margin-right: 0;
+      '&:last-child': {
+        marginBottom: 0,
+      },
+    }),
+    colorPicker: css({
+      padding: theme.spacing(0, 1),
+    }),
+    addButton: css({
+      marginBottom: theme.spacing(1),
+    }),
+    percentIcon: css({
+      fontSize: theme.typography.bodySmall.fontSize,
+      color: theme.colors.text.secondary,
+    }),
+    inputPrefix: css({
+      display: 'flex',
+      alignItems: 'center',
+    }),
+    trashIcon: css({
+      color: theme.colors.text.secondary,
+      cursor: 'pointer',
+      marginRight: 0,
 
-      &:hover {
-        color: ${theme.colors.text};
-      }
-    `,
+      '&:hover': {
+        color: theme.colors.text.primary,
+      },
+    }),
   };
 });
diff --git a/public/app/features/dimensions/editors/URLPickerTab.tsx b/public/app/features/dimensions/editors/URLPickerTab.tsx
index 9bc7c861e78..1fb3e693b02 100644
--- a/public/app/features/dimensions/editors/URLPickerTab.tsx
+++ b/public/app/features/dimensions/editors/URLPickerTab.tsx
@@ -46,24 +46,24 @@ export const URLPickerTab = (props: Props) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  iconContainer: css`
-    display: flex;
-    flex-direction: column;
-    width: 80%;
-    align-items: center;
-    align-self: center;
-  `,
-  iconPreview: css`
-    width: 238px;
-    height: 198px;
-    border: 1px solid ${theme.colors.border.medium};
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  `,
-  img: css`
-    width: 147px;
-    height: 147px;
-    fill: ${theme.colors.text.primary};
-  `,
+  iconContainer: css({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '80%',
+    alignItems: 'center',
+    alignSelf: 'center',
+  }),
+  iconPreview: css({
+    width: '238px',
+    height: '198px',
+    border: `1px solid ${theme.colors.border.medium}`,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  }),
+  img: css({
+    width: '147px',
+    height: '147px',
+    fill: theme.colors.text.primary,
+  }),
 });
diff --git a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx
index d2578d7bd98..9b970427143 100644
--- a/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx
+++ b/public/app/features/dimensions/editors/ValueMappingsEditor/ValueMappingsEditorModal.tsx
@@ -148,11 +148,11 @@ export function ValueMappingsEditorModal({ value, onChange, onClose, showIconPic
 }
 
 export const getStyles = (theme: GrafanaTheme2) => ({
-  tableWrap: css`
-    max-height: calc(80vh - 170px);
-    min-height: 40px;
-    overflow: auto;
-  `,
+  tableWrap: css({
+    maxHeight: 'calc(80vh - 170px)',
+    minHeight: '40px',
+    overflow: 'auto',
+  }),
 
   editTable: css({
     width: '100%',
diff --git a/public/app/features/explore/Logs/LiveLogs.tsx b/public/app/features/explore/Logs/LiveLogs.tsx
index 31b7d2f87cf..07c33ce6a0c 100644
--- a/public/app/features/explore/Logs/LiveLogs.tsx
+++ b/public/app/features/explore/Logs/LiveLogs.tsx
@@ -1,4 +1,4 @@
-import { css, cx } from '@emotion/css';
+import { css, cx, keyframes } from '@emotion/css';
 import { PureComponent } from 'react';
 import * as React from 'react';
 import tinycolor from 'tinycolor2';
@@ -13,46 +13,51 @@ import { sortLogRows } from '../../logs/utils';
 import { ElapsedTime } from '../ElapsedTime';
 import { filterLogRowsByIndex } from '../state/utils';
 
-const getStyles = (theme: GrafanaTheme2) => ({
-  logsRowsLive: css`
-    label: logs-rows-live;
-    font-family: ${theme.typography.fontFamilyMonospace};
-    font-size: ${theme.typography.bodySmall.fontSize};
-    display: flex;
-    flex-flow: column nowrap;
-    height: 60vh;
-    overflow-y: scroll;
-    :first-child {
-      margin-top: auto !important;
-    }
-  `,
-  logsRowFade: css`
-    label: logs-row-fresh;
-    color: ${theme.colors.text};
-    background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()};
-    animation: fade 1s ease-out 1s 1 normal forwards;
-    @keyframes fade {
-      from {
-        background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()};
-      }
-      to {
-        background-color: transparent;
-      }
-    }
-  `,
-  logsRowsIndicator: css`
-    font-size: ${theme.typography.h6.fontSize};
-    padding-top: ${theme.spacing(1)};
-    display: flex;
-    align-items: center;
-  `,
-  button: css`
-    margin-right: ${theme.spacing(1)};
-  `,
-  fullWidth: css`
-    width: 100%;
-  `,
-});
+const getStyles = (theme: GrafanaTheme2) => {
+  const fade = keyframes({
+    from: {
+      backgroundColor: tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString(),
+    },
+    to: {
+      backgroundColor: 'transparent',
+    },
+  });
+
+  return {
+    logsRowsLive: css({
+      label: 'logs-rows-live',
+      fontFamily: theme.typography.fontFamilyMonospace,
+      fontSize: theme.typography.bodySmall.fontSize,
+      display: 'flex',
+      flexFlow: 'column nowrap',
+      height: '60vh',
+      overflowY: 'scroll',
+      ':first-child': {
+        marginTop: 'auto !important',
+      },
+    }),
+    logsRowFade: css({
+      label: 'logs-row-fresh',
+      color: theme.colors.text.primary,
+      backgroundColor: tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString(),
+      [theme.transitions.handleMotion('no-preference', 'reduce')]: {
+        animation: `${fade} 1s ease-out 1s 1 normal forwards`,
+      },
+    }),
+    logsRowsIndicator: css({
+      fontSize: theme.typography.h6.fontSize,
+      paddingTop: theme.spacing(1),
+      display: 'flex',
+      alignItems: 'center',
+    }),
+    button: css({
+      marginRight: theme.spacing(1),
+    }),
+    fullWidth: css({
+      width: '100%',
+    }),
+  };
+};
 
 export interface Props extends Themeable2 {
   logRows?: LogRowModel[];
diff --git a/public/app/features/explore/Logs/LogsMetaRow.tsx b/public/app/features/explore/Logs/LogsMetaRow.tsx
index c6c3e17ceed..26f59a2689a 100644
--- a/public/app/features/explore/Logs/LogsMetaRow.tsx
+++ b/public/app/features/explore/Logs/LogsMetaRow.tsx
@@ -28,11 +28,11 @@ import { MetaInfoText, MetaItemProps } from '../MetaInfoText';
 import { getLogsExtractFields } from './LogsTable';
 
 const getStyles = () => ({
-  metaContainer: css`
-    flex: 1;
-    display: flex;
-    flex-wrap: wrap;
-  `,
+  metaContainer: css({
+    flex: 1,
+    display: 'flex',
+    flexWrap: 'wrap',
+  }),
 });
 
 export type Props = {
diff --git a/public/app/features/explore/Logs/LogsNavigation.tsx b/public/app/features/explore/Logs/LogsNavigation.tsx
index e65bcbb40d8..945c679bcd0 100644
--- a/public/app/features/explore/Logs/LogsNavigation.tsx
+++ b/public/app/features/explore/Logs/LogsNavigation.tsx
@@ -212,44 +212,46 @@ export default memo(LogsNavigation);
 const getStyles = (theme: GrafanaTheme2, oldestLogsFirst: boolean) => {
   const navContainerHeight = `calc(100vh - 2*${theme.spacing(2)} - 2*${TOP_BAR_LEVEL_HEIGHT}px)`;
   return {
-    navContainer: css`
-      max-height: ${navContainerHeight};
-      ${oldestLogsFirst ? 'width: 58px;' : ''}
-      display: flex;
-      flex-direction: column;
-      ${config.featureToggles.logsInfiniteScrolling
-        ? `justify-content: flex-end;`
-        : `justify-content: ${oldestLogsFirst ? 'flex-start' : 'space-between'};`}
-      position: sticky;
-      top: ${theme.spacing(2)};
-      right: 0;
-    `,
-    navButton: css`
-      width: 58px;
-      height: 68px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      line-height: 1;
-    `,
-    navButtonContent: css`
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      width: 100%;
-      height: 100%;
-      white-space: normal;
-    `,
-    scrollToTopButton: css`
-      width: 40px;
-      height: 40px;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      margin-top: ${theme.spacing(1)};
-    `,
+    navContainer: css({
+      maxHeight: navContainerHeight,
+      width: oldestLogsFirst ? '58px' : 'auto',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: config.featureToggles.logsInfiniteScrolling
+        ? 'flex-end'
+        : oldestLogsFirst
+          ? 'flex-start'
+          : 'space-between',
+      position: 'sticky',
+      top: theme.spacing(2),
+      right: 0,
+    }),
+    navButton: css({
+      width: '58px',
+      height: '68px',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      lineHeight: 1,
+    }),
+    navButtonContent: css({
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '100%',
+      height: '100%',
+      whiteSpace: 'normal',
+    }),
+    scrollToTopButton: css({
+      width: '40px',
+      height: '40px',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginTop: theme.spacing(1),
+    }),
   };
 };
diff --git a/public/app/features/explore/Logs/LogsNavigationPages.tsx b/public/app/features/explore/Logs/LogsNavigationPages.tsx
index 6d2bea0d2ec..05f0f022e1c 100644
--- a/public/app/features/explore/Logs/LogsNavigationPages.tsx
+++ b/public/app/features/explore/Logs/LogsNavigationPages.tsx
@@ -64,57 +64,51 @@ export function LogsNavigationPages({ pages, currentPageIndex, oldestLogsFirst,
 
 const getStyles = (theme: GrafanaTheme2, loading: boolean) => {
   return {
-    pagesWrapper: css`
-      height: 100%;
-      padding-left: ${theme.spacing(0.5)};
-      display: flex;
-      flex-direction: column;
-      overflow-y: scroll;
-      &::after {
-        content: '';
-        display: block;
-        background: repeating-linear-gradient(
-          135deg,
-          ${theme.colors.background.primary},
-          ${theme.colors.background.primary} 5px,
-          ${theme.colors.background.secondary} 5px,
-          ${theme.colors.background.secondary} 15px
-        );
-        width: 3px;
-        height: inherit;
-        margin-bottom: 8px;
-      }
-    `,
-    pagesContainer: css`
-      display: flex;
-      padding: 0;
-      flex-direction: column;
-    `,
-    page: css`
-      display: flex;
-      margin: ${theme.spacing(2)} 0;
-      cursor: ${loading ? 'auto' : 'pointer'};
-      white-space: normal;
-      .selectedBg {
-        background: ${theme.colors.primary.main};
-      }
-      .selectedText {
-        color: ${theme.colors.primary.main};
-      }
-    `,
-    line: css`
-      width: 3px;
-      height: 100%;
-      align-items: center;
-      background: ${theme.colors.text.secondary};
-    `,
-    time: css`
-      width: 60px;
-      min-height: 80px;
-      font-size: ${theme.v1.typography.size.sm};
-      padding-left: ${theme.spacing(0.5)};
-      display: flex;
-      align-items: center;
-    `,
+    pagesWrapper: css({
+      height: '100%',
+      paddingLeft: theme.spacing(0.5),
+      display: 'flex',
+      flexDirection: 'column',
+      overflowY: 'scroll',
+      '&::after': {
+        content: "''",
+        display: 'block',
+        background: `repeating-linear-gradient(135deg, ${theme.colors.background.primary}, ${theme.colors.background.primary} 5px, ${theme.colors.background.secondary} 5px, ${theme.colors.background.secondary} 15px)`,
+        width: '3px',
+        height: 'inherit',
+        marginBottom: theme.spacing(1),
+      },
+    }),
+    pagesContainer: css({
+      display: 'flex',
+      padding: 0,
+      flexDirection: 'column',
+    }),
+    page: css({
+      display: 'flex',
+      margin: theme.spacing(2, 0),
+      cursor: loading ? 'auto' : 'pointer',
+      whiteSpace: 'normal',
+      '.selectedBg': {
+        background: theme.colors.primary.main,
+      },
+      '.selectedText': {
+        color: theme.colors.primary.main,
+      },
+    }),
+    line: css({
+      width: '3px',
+      height: '100%',
+      alignItems: 'center',
+      background: theme.colors.text.secondary,
+    }),
+    time: css({
+      width: '60px',
+      minHeight: '80px',
+      fontSize: theme.v1.typography.size.sm,
+      paddingLeft: theme.spacing(0.5),
+      display: 'flex',
+      alignItems: 'center',
+    }),
   };
 };
diff --git a/public/app/features/explore/Logs/LogsSamplePanel.tsx b/public/app/features/explore/Logs/LogsSamplePanel.tsx
index 0f4e2539ddd..44bc1430d57 100644
--- a/public/app/features/explore/Logs/LogsSamplePanel.tsx
+++ b/public/app/features/explore/Logs/LogsSamplePanel.tsx
@@ -128,16 +128,16 @@ export function LogsSamplePanel(props: Props) {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    logSamplesButton: css`
-      position: absolute;
-      top: ${theme.spacing(1)};
-      right: ${theme.spacing(1)};
-    `,
-    logContainer: css`
-      overflow: scroll;
-    `,
-    infoTooltip: css`
-      margin-left: ${theme.spacing(1)};
-    `,
+    logSamplesButton: css({
+      position: 'absolute',
+      top: theme.spacing(1),
+      right: theme.spacing(1),
+    }),
+    logContainer: css({
+      overflow: 'scroll',
+    }),
+    infoTooltip: css({
+      marginLeft: theme.spacing(1),
+    }),
   };
 };
diff --git a/public/app/features/explore/Logs/LogsVolumePanel.tsx b/public/app/features/explore/Logs/LogsVolumePanel.tsx
index 16f54444aae..0a01a60b9b7 100644
--- a/public/app/features/explore/Logs/LogsVolumePanel.tsx
+++ b/public/app/features/explore/Logs/LogsVolumePanel.tsx
@@ -105,23 +105,23 @@ export function LogsVolumePanel(props: Props) {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    extraInfoContainer: css`
-      display: flex;
-      justify-content: end;
-      position: absolute;
-      right: 5px;
-      top: -10px;
-      font-size: ${theme.typography.bodySmall.fontSize};
-      color: ${theme.colors.text.secondary};
-    `,
-    contentContainer: css`
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: relative;
-    `,
-    streaming: css`
-      color: ${theme.colors.success.text};
-    `,
+    extraInfoContainer: css({
+      display: 'flex',
+      justifyContent: 'end',
+      position: 'absolute',
+      right: '5px',
+      top: '-10px',
+      fontSize: theme.typography.bodySmall.fontSize,
+      color: theme.colors.text.secondary,
+    }),
+    contentContainer: css({
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+    }),
+    streaming: css({
+      color: theme.colors.success.text,
+    }),
   };
 };
diff --git a/public/app/features/explore/Logs/LogsVolumePanelList.tsx b/public/app/features/explore/Logs/LogsVolumePanelList.tsx
index f2bbc0b3905..01390d46c37 100644
--- a/public/app/features/explore/Logs/LogsVolumePanelList.tsx
+++ b/public/app/features/explore/Logs/LogsVolumePanelList.tsx
@@ -154,25 +154,25 @@ export const LogsVolumePanelList = ({
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    listContainer: css`
-      padding-top: 10px;
-    `,
-    extraInfoContainer: css`
-      display: flex;
-      justify-content: end;
-      position: absolute;
-      right: 5px;
-      top: 5px;
-    `,
-    oldInfoText: css`
-      font-size: ${theme.typography.bodySmall.fontSize};
-      color: ${theme.colors.text.secondary};
-    `,
-    alertContainer: css`
-      width: 50%;
-      min-width: ${theme.breakpoints.values.sm}px;
-      margin: 0 auto;
-    `,
+    listContainer: css({
+      paddingTop: '10px',
+    }),
+    extraInfoContainer: css({
+      display: 'flex',
+      justifyContent: 'end',
+      position: 'absolute',
+      right: '5px',
+      top: '5px',
+    }),
+    oldInfoText: css({
+      fontSize: theme.typography.bodySmall.fontSize,
+      color: theme.colors.text.secondary,
+    }),
+    alertContainer: css({
+      width: '50%',
+      minWidth: `${theme.breakpoints.values.sm}px`,
+      margin: '0 auto',
+    }),
   };
 };
 
diff --git a/public/app/features/explore/Logs/utils/LogsCrossFadeTransition.tsx b/public/app/features/explore/Logs/utils/LogsCrossFadeTransition.tsx
index ca62b7c310d..56ca3aea96d 100644
--- a/public/app/features/explore/Logs/utils/LogsCrossFadeTransition.tsx
+++ b/public/app/features/explore/Logs/utils/LogsCrossFadeTransition.tsx
@@ -1,43 +1,49 @@
 import { css } from '@emotion/css';
-import memoizeOne from 'memoize-one';
 import { useRef } from 'react';
 import * as React from 'react';
 import { CSSTransition } from 'react-transition-group';
 
+import { GrafanaTheme2 } from '@grafana/data';
+import { useStyles2 } from '@grafana/ui';
+
 const transitionDuration = 500;
 // We add a bit of delay to the transition as another perf optimisation. As at the start we need to render
 // quite a bit of new rows, if we start transition at the same time there can be frame rate drop. This gives time
 // for react to first render them and then do the animation.
 const transitionDelay = 100;
 
-const getStyles = memoizeOne(() => {
+const getStyles = (theme: GrafanaTheme2) => {
   return {
-    logsEnter: css`
-      label: logsEnter;
-      position: absolute;
-      opacity: 0;
-      height: auto;
-      width: 100%;
-    `,
-    logsEnterActive: css`
-      label: logsEnterActive;
-      opacity: 1;
-      transition: opacity ${transitionDuration}ms ease-out ${transitionDelay}ms;
-    `,
-    logsExit: css`
-      label: logsExit;
-      position: absolute;
-      opacity: 1;
-      height: auto;
-      width: 100%;
-    `,
-    logsExitActive: css`
-      label: logsExitActive;
-      opacity: 0;
-      transition: opacity ${transitionDuration}ms ease-out ${transitionDelay}ms;
-    `,
+    logsEnter: css({
+      label: 'logsEnter',
+      position: 'absolute',
+      opacity: 0,
+      height: 'auto',
+      width: '100%',
+    }),
+    logsEnterActive: css({
+      label: 'logsEnterActive',
+      opacity: 1,
+      [theme.transitions.handleMotion('no-preference', 'reduce')]: {
+        transition: `opacity ${transitionDuration}ms ease-out ${transitionDelay}ms`,
+      },
+    }),
+    logsExit: css({
+      label: 'logsExit',
+      position: 'absolute',
+      opacity: 1,
+      height: 'auto',
+      width: '100%',
+    }),
+    logsExitActive: css({
+      label: 'logsExitActive',
+      opacity: 0,
+      [theme.transitions.handleMotion('no-preference', 'reduce')]: {
+        transition: `opacity ${transitionDuration}ms ease-out ${transitionDelay}ms`,
+      },
+    }),
   };
-});
+};
 
 type Props = {
   children: React.ReactElement;
@@ -51,7 +57,7 @@ type Props = {
 export function LogsCrossFadeTransition(props: Props) {
   const { visible, children } = props;
   const transitionRef = useRef(null);
-  const styles = getStyles();
+  const styles = useStyles2(getStyles);
   return (
     <CSSTransition
       in={visible}
diff --git a/public/app/features/explore/NodeGraph/NodeGraphContainer.tsx b/public/app/features/explore/NodeGraph/NodeGraphContainer.tsx
index 9894c43d086..adaa5e058d6 100644
--- a/public/app/features/explore/NodeGraph/NodeGraphContainer.tsx
+++ b/public/app/features/explore/NodeGraph/NodeGraphContainer.tsx
@@ -13,13 +13,13 @@ import { StoreState } from '../../../types';
 import { useLinks } from '../utils/links';
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  warningText: css`
-    label: warningText;
-    display: flex;
-    align-items: center;
-    font-size: ${theme.typography.bodySmall.fontSize};
-    color: ${theme.colors.text.secondary};
-  `,
+  warningText: css({
+    label: 'warningText',
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary,
+  }),
 });
 
 interface OwnProps {
diff --git a/public/app/features/explore/PrometheusListView/ItemLabels.tsx b/public/app/features/explore/PrometheusListView/ItemLabels.tsx
index e3c2a27ddcc..f68765b6594 100644
--- a/public/app/features/explore/PrometheusListView/ItemLabels.tsx
+++ b/public/app/features/explore/PrometheusListView/ItemLabels.tsx
@@ -8,17 +8,17 @@ import { rawListItemColumnWidth } from './RawListItem';
 
 const getItemLabelsStyles = (theme: GrafanaTheme2, expanded: boolean) => {
   return {
-    valueNavigation: css`
-      width: ${rawListItemColumnWidth};
-      font-weight: bold;
-    `,
-    valueNavigationWrapper: css`
-      display: flex;
-      justify-content: flex-end;
-    `,
-    itemLabelsWrap: css`
-      ${!expanded ? `border-bottom: 1px solid ${theme.colors.border.medium}` : ''};
-    `,
+    valueNavigation: css({
+      width: rawListItemColumnWidth,
+      fontWeight: 'bold',
+    }),
+    valueNavigationWrapper: css({
+      display: 'flex',
+      justifyContent: 'flex-end',
+    }),
+    itemLabelsWrap: css({
+      borderBottom: expanded ? `1px solid ${theme.colors.border.medium}` : '',
+    }),
   };
 };
 
diff --git a/public/app/features/explore/PrometheusListView/ItemValues.tsx b/public/app/features/explore/PrometheusListView/ItemValues.tsx
index 8b6919922c5..74680b65322 100644
--- a/public/app/features/explore/PrometheusListView/ItemValues.tsx
+++ b/public/app/features/explore/PrometheusListView/ItemValues.tsx
@@ -7,39 +7,39 @@ import { rawListItemColumnWidth, rawListPaddingToHoldSpaceForCopyIcon, RawListVa
 import { RawPrometheusListItemEmptyValue } from './utils/getRawPrometheusListItemsFromDataFrame';
 
 const getStyles = (theme: GrafanaTheme2, totalNumberOfValues: number) => ({
-  rowWrapper: css`
-    position: relative;
-    min-width: ${rawListItemColumnWidth};
-    padding-right: 5px;
-  `,
-  rowValue: css`
-    white-space: nowrap;
-    overflow-x: auto;
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-    display: block;
-    padding-right: 10px;
+  rowWrapper: css({
+    position: 'relative',
+    minWidth: rawListItemColumnWidth,
+    paddingRight: '5px',
+  }),
+  rowValue: css({
+    whiteSpace: 'nowrap',
+    overflowX: 'auto',
+    MsOverflowStyle: 'none' /* IE and Edge */,
+    scrollbarWidth: 'none' /* Firefox */,
+    display: 'block',
+    paddingRight: '10px',
 
-    &::-webkit-scrollbar {
-      display: none; /* Chrome, Safari and Opera */
-    }
+    '&::-webkit-scrollbar': {
+      display: 'none' /* Chrome, Safari and Opera */,
+    },
 
-    &:before {
-      pointer-events: none;
-      content: '';
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      background: linear-gradient(to right, transparent calc(100% - 25px), ${theme.colors.background.primary});
-    }
-  `,
-  rowValuesWrap: css`
-    padding-left: ${rawListPaddingToHoldSpaceForCopyIcon};
-    width: calc(${totalNumberOfValues} * ${rawListItemColumnWidth});
-    display: flex;
-  `,
+    '&:before': {
+      pointerEvents: 'none',
+      content: "''",
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      background: `linear-gradient(to right, transparent calc(100% - 25px), ${theme.colors.background.primary})`,
+    },
+  }),
+  rowValuesWrap: css({
+    paddingLeft: rawListPaddingToHoldSpaceForCopyIcon,
+    width: `calc(${totalNumberOfValues} * ${rawListItemColumnWidth})`,
+    display: 'flex',
+  }),
 });
 
 export const ItemValues = ({
diff --git a/public/app/features/explore/PrometheusListView/RawListContainer.tsx b/public/app/features/explore/PrometheusListView/RawListContainer.tsx
index dfc6381c1e8..852ce90c4a0 100644
--- a/public/app/features/explore/PrometheusListView/RawListContainer.tsx
+++ b/public/app/features/explore/PrometheusListView/RawListContainer.tsx
@@ -22,33 +22,33 @@ export interface RawListContainerProps {
 }
 
 const styles = {
-  wrapper: css`
-    height: 100%;
-    overflow: scroll;
-  `,
-  switchWrapper: css`
-    display: flex;
-    flex-direction: row;
-    margin-bottom: 0;
-  `,
-  switchLabel: css`
-    margin-left: 15px;
-    margin-bottom: 0;
-  `,
-  switch: css`
-    margin-left: 10px;
-  `,
-  resultCount: css`
-    margin-bottom: 4px;
-  `,
-  header: css`
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 0;
-    font-size: 12px;
-    line-height: 1.25;
-  `,
+  wrapper: css({
+    height: '100%',
+    overflow: 'scroll',
+  }),
+  switchWrapper: css({
+    display: 'flex',
+    flexDirection: 'row',
+    marginBottom: 0,
+  }),
+  switchLabel: css({
+    marginLeft: '15px',
+    marginBottom: 0,
+  }),
+  switch: css({
+    marginLeft: '10px',
+  }),
+  resultCount: css({
+    marginBottom: '4px',
+  }),
+  header: css({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '10px 0',
+    fontSize: '12px',
+    lineHeight: 1.25,
+  }),
 };
 
 const mobileWidthThreshold = 480;
diff --git a/public/app/features/explore/PrometheusListView/RawListItem.tsx b/public/app/features/explore/PrometheusListView/RawListItem.tsx
index 8f1f03d490f..465cf895565 100644
--- a/public/app/features/explore/PrometheusListView/RawListItem.tsx
+++ b/public/app/features/explore/PrometheusListView/RawListItem.tsx
@@ -24,54 +24,50 @@ export const rawListItemColumnWidth = '80px';
 export const rawListPaddingToHoldSpaceForCopyIcon = '25px';
 
 const getStyles = (theme: GrafanaTheme2, totalNumberOfValues: number, isExpandedView: boolean) => ({
-  rowWrapper: css`
-    border-bottom: 1px solid ${theme.colors.border.medium};
-    display: flex;
-    position: relative;
-    padding-left: 22px;
-    ${!isExpandedView ? 'align-items: center;' : ''}
-    ${!isExpandedView ? 'height: 100%;' : ''}
-  `,
-  copyToClipboardWrapper: css`
-    position: absolute;
-    left: 0;
-    ${!isExpandedView ? 'bottom: 0;' : ''}
-    ${isExpandedView ? 'top: 4px;' : 'top: 0;'}
-    margin: auto;
-    z-index: 1;
-    height: 16px;
-    width: 16px;
-  `,
-  rowLabelWrapWrap: css`
-    position: relative;
-    width: calc(100% - (${totalNumberOfValues} * ${rawListItemColumnWidth}) - ${rawListPaddingToHoldSpaceForCopyIcon});
-  `,
-  rowLabelWrap: css`
-    white-space: nowrap;
-    overflow-x: auto;
-    -ms-overflow-style: none; /* IE and Edge */
-    scrollbar-width: none; /* Firefox */
-    padding-right: ${rawListExtraSpaceAtEndOfLine};
+  rowWrapper: css({
+    borderBottom: `1px solid ${theme.colors.border.medium}`,
+    display: 'flex',
+    position: 'relative',
+    paddingLeft: '22px',
+    alignItems: !isExpandedView ? 'center' : '',
+    height: !isExpandedView ? '100%' : '',
+  }),
+  copyToClipboardWrapper: css({
+    position: 'absolute',
+    left: 0,
+    bottom: !isExpandedView ? '0' : '',
+    top: isExpandedView ? '4px' : '0',
+    margin: 'auto',
+    zIndex: 1,
+    height: '16px',
+    width: '16px',
+  }),
+  rowLabelWrapWrap: css({
+    position: 'relative',
+    width: `calc(100% - (${totalNumberOfValues} * ${rawListItemColumnWidth}) - ${rawListPaddingToHoldSpaceForCopyIcon})`,
+  }),
+  rowLabelWrap: css({
+    whiteSpace: 'nowrap',
+    overflowX: 'auto',
+    MsOverflowStyle: 'none' /* IE and Edge */,
+    scrollbarWidth: 'none' /* Firefox */,
+    paddingRight: rawListExtraSpaceAtEndOfLine,
 
-    &::-webkit-scrollbar {
-      display: none; /* Chrome, Safari and Opera */
-    }
+    '&::-webkit-scrollbar': {
+      display: 'none' /* Chrome, Safari and Opera */,
+    },
 
-    &:after {
-      pointer-events: none;
-      content: '';
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      background: linear-gradient(
-        to right,
-        transparent calc(100% - ${rawListExtraSpaceAtEndOfLine}),
-        ${theme.colors.background.primary}
-      );
-    }
-  `,
+    '&:after': {
+      pointerEvents: 'none',
+      content: "''",
+      width: '100%',
+      height: '100%',
+      position: 'absolute',
+      left: 0,
+      top: 0,
+      background: `linear-gradient(to right, transparent calc(100% - ${rawListExtraSpaceAtEndOfLine}), ${theme.colors.background.primary})`,
+    },
+  }),
 });
 
 function getQueryValues(allLabels: Pick<instantQueryRawVirtualizedListData, 'Value' | string | number>) {
diff --git a/public/app/features/explore/PrometheusListView/RawListItemAttributes.tsx b/public/app/features/explore/PrometheusListView/RawListItemAttributes.tsx
index 296ddb81a0b..eb6d4d0a570 100644
--- a/public/app/features/explore/PrometheusListView/RawListItemAttributes.tsx
+++ b/public/app/features/explore/PrometheusListView/RawListItemAttributes.tsx
@@ -11,16 +11,16 @@ const getStyles = (theme: GrafanaTheme2) => {
   const greenish = theme.isDark ? '#73bf69' : '#56a64b';
 
   return {
-    metricName: css`
-      color: ${greenish};
-    `,
-    metricValue: css`
-      color: ${reddish};
-    `,
-    expanded: css`
-      display: block;
-      text-indent: 1em;
-    `,
+    metricName: css({
+      color: greenish,
+    }),
+    metricValue: css({
+      color: reddish,
+    }),
+    expanded: css({
+      display: 'block',
+      textIndent: '1em',
+    }),
   };
 };
 
diff --git a/public/app/features/explore/RichHistory/RichHistoryCard.tsx b/public/app/features/explore/RichHistory/RichHistoryCard.tsx
index a7aa69293d9..b931ecec06e 100644
--- a/public/app/features/explore/RichHistory/RichHistoryCard.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryCard.tsx
@@ -50,88 +50,88 @@ const getStyles = (theme: GrafanaTheme2) => {
   const cardColor = theme.colors.background.secondary;
 
   return {
-    queryCard: css`
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      border: 1px solid ${theme.colors.border.weak};
-      margin: ${theme.spacing(1)} 0;
-      background-color: ${cardColor};
-      border-radius: ${theme.shape.radius.default};
-      .starred {
-        color: ${theme.v1.palette.orange};
-      }
-    `,
-    cardRow: css`
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: ${theme.spacing(1)};
-      border-bottom: none;
-      :first-of-type {
-        border-bottom: 1px solid ${theme.colors.border.weak};
-        padding: ${theme.spacing(0.5, 1)};
-      }
-      img {
-        height: ${theme.typography.fontSize}px;
-        max-width: ${theme.typography.fontSize}px;
-        margin-right: ${theme.spacing(1)};
-      }
-    `,
-    queryActionButtons: css`
-      max-width: ${rightColumnContentWidth};
-      display: flex;
-      justify-content: flex-end;
-      font-size: ${theme.typography.size.base};
-      button {
-        margin-left: ${theme.spacing(1)};
-      }
-    `,
-    queryContainer: css`
-      font-weight: ${theme.typography.fontWeightMedium};
-      width: calc(100% - ${rightColumnWidth});
-    `,
-    updateCommentContainer: css`
-      width: calc(100% + ${rightColumnWidth});
-      margin-top: ${theme.spacing(1)};
-    `,
-    comment: css`
-      overflow-wrap: break-word;
-      font-size: ${theme.typography.bodySmall.fontSize};
-      font-weight: ${theme.typography.fontWeightRegular};
-      margin-top: ${theme.spacing(0.5)};
-    `,
-    commentButtonRow: css`
-      > * {
-        margin-top: ${theme.spacing(1)};
-        margin-right: ${theme.spacing(1)};
-      }
-    `,
-    textArea: css`
-      width: 100%;
-    `,
-    runButton: css`
-      max-width: ${rightColumnContentWidth};
-      display: flex;
-      justify-content: flex-end;
-      button {
-        height: auto;
-        padding: ${theme.spacing(0.5, 2)};
-        line-height: 1.4;
-        span {
-          white-space: normal !important;
-        }
-      }
-    `,
-    loader: css`
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: ${theme.colors.background.secondary};
-    `,
+    queryCard: css({
+      position: 'relative',
+      display: 'flex',
+      flexDirection: 'column',
+      border: `1px solid ${theme.colors.border.weak}`,
+      margin: theme.spacing(1, 0),
+      backgroundColor: cardColor,
+      borderRadius: theme.shape.radius.default,
+      '.starred': {
+        color: theme.v1.palette.orange,
+      },
+    }),
+    cardRow: css({
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: theme.spacing(1),
+      borderBottom: 'none',
+      ':first-of-type': {
+        borderBottom: `1px solid ${theme.colors.border.weak}`,
+        padding: theme.spacing(0.5, 1),
+      },
+      img: {
+        height: `${theme.typography.fontSize}px`,
+        maxWidth: `${theme.typography.fontSize}px`,
+        marginRight: theme.spacing(1),
+      },
+    }),
+    queryActionButtons: css({
+      maxWidth: rightColumnContentWidth,
+      display: 'flex',
+      justifyContent: 'flex-end',
+      fontSize: theme.typography.size.base,
+      button: {
+        marginLeft: theme.spacing(1),
+      },
+    }),
+    queryContainer: css({
+      fontWeight: theme.typography.fontWeightMedium,
+      width: `calc(100% - ${rightColumnWidth})`,
+    }),
+    updateCommentContainer: css({
+      width: `calc(100% + ${rightColumnWidth})`,
+      marginTop: theme.spacing(1),
+    }),
+    comment: css({
+      overflowWrap: 'break-word',
+      fontSize: theme.typography.bodySmall.fontSize,
+      fontWeight: theme.typography.fontWeightRegular,
+      marginTop: theme.spacing(0.5),
+    }),
+    commentButtonRow: css({
+      '> *': {
+        marginTop: theme.spacing(1),
+        marginRight: theme.spacing(1),
+      },
+    }),
+    textArea: css({
+      width: '100%',
+    }),
+    runButton: css({
+      maxWidth: rightColumnContentWidth,
+      display: 'flex',
+      justifyContent: 'flex-end',
+      button: {
+        height: 'auto',
+        padding: theme.spacing(0.5, 2),
+        lineHeight: 1.4,
+        span: {
+          whiteSpace: 'normal !important',
+        },
+      },
+    }),
+    loader: css({
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: theme.colors.background.secondary,
+    }),
   };
 };
 
@@ -357,23 +357,23 @@ export function RichHistoryCard(props: Props) {
 }
 
 const getQueryStyles = (theme: GrafanaTheme2) => ({
-  queryRow: css`
-    border-top: 1px solid ${theme.colors.border.weak};
-    display: flex;
-    flex-direction: row;
-    padding: 4px 0px;
-    gap: 4px;
-    :first-child {
-      border-top: none;
-    }
-  `,
-  dsInfoContainer: css`
-    display: flex;
-    align-items: center;
-  `,
-  queryText: css`
-    word-break: break-all;
-  `,
+  queryRow: css({
+    borderTop: `1px solid ${theme.colors.border.weak}`,
+    display: 'flex',
+    flexDirection: 'row',
+    padding: theme.spacing(0.5, 0),
+    gap: theme.spacing(0.5),
+    ':first-child': {
+      borderTop: 'none',
+    },
+  }),
+  dsInfoContainer: css({
+    display: 'flex',
+    alignItems: 'center',
+  }),
+  queryText: css({
+    wordBreak: 'break-all',
+  }),
 });
 
 interface QueryProps {
@@ -403,13 +403,14 @@ const Query = ({ query, showDsInfo = false }: QueryProps) => {
   );
 };
 
-const getDsInfoStyles = (size: 'sm' | 'md') => (theme: GrafanaTheme2) => css`
-  display: flex;
-  align-items: center;
-  font-size: ${theme.typography[size === 'sm' ? 'bodySmall' : 'body'].fontSize};
-  font-weight: ${theme.typography.fontWeightMedium};
-  white-space: nowrap;
-`;
+const getDsInfoStyles = (size: 'sm' | 'md') => (theme: GrafanaTheme2) =>
+  css({
+    display: 'flex',
+    alignItems: 'center',
+    fontSize: theme.typography[size === 'sm' ? 'bodySmall' : 'body'].fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
+    whiteSpace: 'nowrap',
+  });
 
 function DatasourceInfo({ dsApi, size }: { dsApi?: DataSourceApi; size: 'sm' | 'md' }) {
   const getStyles = useCallback((theme: GrafanaTheme2) => getDsInfoStyles(size)(theme), [size]);
diff --git a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
index 5c8a3636e9b..5ef09e26468 100644
--- a/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryQueriesTab.tsx
@@ -34,81 +34,81 @@ export interface RichHistoryQueriesTabProps {
 
 const getStyles = (theme: GrafanaTheme2, height: number) => {
   return {
-    container: css`
-      display: flex;
-    `,
-    labelSlider: css`
-      font-size: ${theme.typography.bodySmall.fontSize};
-      &:last-of-type {
-        margin-top: ${theme.spacing(3)};
-      }
-      &:first-of-type {
-        font-weight: ${theme.typography.fontWeightMedium};
-        margin-bottom: ${theme.spacing(2)};
-      }
-    `,
-    containerContent: css`
+    container: css({
+      display: 'flex',
+    }),
+    labelSlider: css({
+      fontSize: theme.typography.bodySmall.fontSize,
+      '&:last-of-type': {
+        marginTop: theme.spacing(3),
+      },
+      '&:first-of-type': {
+        fontWeight: theme.typography.fontWeightMedium,
+        marginBottom: theme.spacing(2),
+      },
+    }),
+    containerContent: css({
       /* 134px is based on the width of the Query history tabs bar, so the content is aligned to right side of the tab */
-      width: calc(100% - 134px);
-    `,
-    containerSlider: css`
-      width: 129px;
-      margin-right: ${theme.spacing(1)};
-    `,
-    fixedSlider: css`
-      position: fixed;
-    `,
-    slider: css`
-      bottom: 10px;
-      height: ${height - 180}px;
-      width: 129px;
-      padding: ${theme.spacing(1)} 0;
-    `,
-    selectors: css`
-      display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-    `,
-    filterInput: css`
-      margin-bottom: ${theme.spacing(1)};
-    `,
-    multiselect: css`
-      width: 100%;
-      margin-bottom: ${theme.spacing(1)};
-    `,
-    sort: css`
-      width: 170px;
-    `,
-    sessionName: css`
-      display: flex;
-      align-items: flex-start;
-      justify-content: flex-start;
-      margin-top: ${theme.spacing(3)};
-      h4 {
-        margin: 0 10px 0 0;
-      }
-    `,
-    heading: css`
-      font-size: ${theme.typography.h4.fontSize};
-      margin: ${theme.spacing(2, 0.25, 1, 0.25)};
-    `,
-    footer: css`
-      height: 60px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-weight: ${theme.typography.fontWeightLight};
-      font-size: ${theme.typography.bodySmall.fontSize};
-      a {
-        font-weight: ${theme.typography.fontWeightMedium};
-        margin-left: ${theme.spacing(0.25)};
-      }
-    `,
-    queries: css`
-      font-size: ${theme.typography.bodySmall.fontSize};
-      font-weight: ${theme.typography.fontWeightRegular};
-      margin-left: ${theme.spacing(0.5)};
-    `,
+      width: 'calc(100% - 134px)',
+    }),
+    containerSlider: css({
+      width: '129px',
+      marginRight: theme.spacing(1),
+    }),
+    fixedSlider: css({
+      position: 'fixed',
+    }),
+    slider: css({
+      bottom: '10px',
+      height: `${height - 180}px`,
+      width: '129px',
+      padding: theme.spacing(1, 0),
+    }),
+    selectors: css({
+      display: 'flex',
+      justifyContent: 'space-between',
+      flexWrap: 'wrap',
+    }),
+    filterInput: css({
+      marginBottom: theme.spacing(1),
+    }),
+    multiselect: css({
+      width: '100%',
+      marginBottom: theme.spacing(1),
+    }),
+    sort: css({
+      width: '170px',
+    }),
+    sessionName: css({
+      display: 'flex',
+      alignItems: 'flex-start',
+      justifyContent: 'flex-start',
+      marginTop: theme.spacing(3),
+      h4: {
+        margin: '0 10px 0 0',
+      },
+    }),
+    heading: css({
+      fontSize: theme.typography.h4.fontSize,
+      margin: theme.spacing(2, 0.25, 1, 0.25),
+    }),
+    footer: css({
+      height: '60px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      fontWeight: theme.typography.fontWeightLight,
+      fontSize: theme.typography.bodySmall.fontSize,
+      a: {
+        fontWeight: theme.typography.fontWeightMedium,
+        marginLeft: theme.spacing(0.25),
+      },
+    }),
+    queries: css({
+      fontSize: theme.typography.bodySmall.fontSize,
+      fontWeight: theme.typography.fontWeightRegular,
+      marginLeft: theme.spacing(0.5),
+    }),
   };
 };
 
diff --git a/public/app/features/explore/RichHistory/RichHistorySettingsTab.tsx b/public/app/features/explore/RichHistory/RichHistorySettingsTab.tsx
index 43b10370c4f..95d19e353a8 100644
--- a/public/app/features/explore/RichHistory/RichHistorySettingsTab.tsx
+++ b/public/app/features/explore/RichHistory/RichHistorySettingsTab.tsx
@@ -24,21 +24,21 @@ export interface RichHistorySettingsProps {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    container: css`
-      font-size: ${theme.typography.bodySmall.fontSize};
-    `,
-    spaceBetween: css`
-      margin-bottom: ${theme.spacing(3)};
-    `,
-    input: css`
-      max-width: 200px;
-    `,
-    bold: css`
-      font-weight: ${theme.typography.fontWeightBold};
-    `,
-    bottomMargin: css`
-      margin-bottom: ${theme.spacing(1)};
-    `,
+    container: css({
+      fontSize: theme.typography.bodySmall.fontSize,
+    }),
+    spaceBetween: css({
+      marginBottom: theme.spacing(3),
+    }),
+    input: css({
+      maxWidth: '200px',
+    }),
+    bold: css({
+      fontWeight: theme.typography.fontWeightBold,
+    }),
+    bottomMargin: css({
+      marginBottom: theme.spacing(1),
+    }),
   };
 };
 
diff --git a/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx b/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
index 793d4bd5de0..e7c46a2c355 100644
--- a/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
+++ b/public/app/features/explore/RichHistory/RichHistoryStarredTab.tsx
@@ -33,39 +33,39 @@ export interface RichHistoryStarredTabProps {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    container: css`
-      display: flex;
-    `,
-    containerContent: css`
-      width: 100%;
-    `,
-    selectors: css`
-      display: flex;
-      justify-content: space-between;
-      flex-wrap: wrap;
-    `,
-    multiselect: css`
-      width: 100%;
-      margin-bottom: ${theme.spacing(1)};
-    `,
-    filterInput: css`
-      margin-bottom: ${theme.spacing(1)};
-    `,
-    sort: css`
-      width: 170px;
-    `,
-    footer: css`
-      height: 60px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-weight: ${theme.typography.fontWeightLight};
-      font-size: ${theme.typography.bodySmall.fontSize};
-      a {
-        font-weight: ${theme.typography.fontWeightMedium};
-        margin-left: ${theme.spacing(0.25)};
-      }
-    `,
+    container: css({
+      display: 'flex',
+    }),
+    containerContent: css({
+      width: '100%',
+    }),
+    selectors: css({
+      display: 'flex',
+      justifyContent: 'space-between',
+      flexWrap: 'wrap',
+    }),
+    multiselect: css({
+      width: '100%',
+      marginBottom: theme.spacing(1),
+    }),
+    filterInput: css({
+      marginBottom: theme.spacing(1),
+    }),
+    sort: css({
+      width: '170px',
+    }),
+    footer: css({
+      height: '60px',
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      fontWeight: theme.typography.fontWeightLight,
+      fontSize: theme.typography.bodySmall.fontSize,
+      a: {
+        fontWeight: theme.typography.fontWeightMedium,
+        marginLeft: theme.spacing(0.25),
+      },
+    }),
   };
 };
 
diff --git a/public/app/features/expressions/components/Condition.tsx b/public/app/features/expressions/components/Condition.tsx
index 0b5383921de..fc6455fd540 100644
--- a/public/app/features/expressions/components/Condition.tsx
+++ b/public/app/features/expressions/components/Condition.tsx
@@ -64,9 +64,9 @@ export const Condition = ({ condition, index, onChange, onRemoveCondition, refId
     });
   };
 
-  const buttonWidth = css`
-    width: 75px;
-  `;
+  const buttonWidth = css({
+    width: '75px',
+  });
 
   const isRange =
     condition.evaluator.type === EvalFunction.IsWithinRange || condition.evaluator.type === EvalFunction.IsOutsideRange;
@@ -140,23 +140,23 @@ export const Condition = ({ condition, index, onChange, onRemoveCondition, refId
 };
 
 const getStyles = (theme: GrafanaTheme2) => {
-  const buttonStyle = css`
-    color: ${theme.colors.primary.text};
-    font-size: ${theme.typography.bodySmall.fontSize};
-  `;
+  const buttonStyle = css({
+    color: theme.colors.primary.text,
+    fontSize: theme.typography.bodySmall.fontSize,
+  });
   return {
     buttonSelectText: buttonStyle,
     button: cx(
-      css`
-        display: flex;
-        align-items: center;
-        border-radius: ${theme.shape.radius.default};
-        font-weight: ${theme.typography.fontWeightMedium};
-        border: 1px solid ${theme.colors.border.weak};
-        white-space: nowrap;
-        padding: 0 ${theme.spacing(1)};
-        background-color: ${theme.colors.background.canvas};
-      `,
+      css({
+        display: 'flex',
+        alignItems: 'center',
+        borderRadius: theme.shape.radius.default,
+        fontWeight: theme.typography.fontWeightMedium,
+        border: `1px solid ${theme.colors.border.weak}`,
+        whiteSpace: 'nowrap',
+        padding: `0 ${theme.spacing(1)}`,
+        backgroundColor: theme.colors.background.canvas,
+      }),
       buttonStyle
     ),
   };
diff --git a/public/app/features/expressions/components/Math.tsx b/public/app/features/expressions/components/Math.tsx
index 82ac024baed..2332ce3530b 100644
--- a/public/app/features/expressions/components/Math.tsx
+++ b/public/app/features/expressions/components/Math.tsx
@@ -152,41 +152,41 @@ const DocumentedFunction = ({ name, description }: DocumentedFunctionProps) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  documentationHeader: css`
-    font-size: ${theme.typography.h5.fontSize};
-    font-weight: ${theme.typography.h5.fontWeight};
-  `,
-  documentationLink: css`
-    color: ${theme.colors.text.link};
-  `,
-  documentationContainer: css`
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    gap: ${theme.spacing(2)};
+  documentationHeader: css({
+    fontSize: theme.typography.h5.fontSize,
+    fontWeight: theme.typography.h5.fontWeight,
+  }),
+  documentationLink: css({
+    color: theme.colors.text.link,
+  }),
+  documentationContainer: css({
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    gap: theme.spacing(2),
 
-    padding: ${theme.spacing(1)} ${theme.spacing(2)};
-  `,
-  documentationFunctions: css`
-    display: grid;
-    grid-template-columns: max-content auto;
-    column-gap: ${theme.spacing(2)};
-  `,
-  info: css`
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    cursor: pointer;
-    gap: ${theme.spacing(1)};
-  `,
+    padding: theme.spacing(1, 2),
+  }),
+  documentationFunctions: css({
+    display: 'grid',
+    gridTemplateColumns: 'max-content auto',
+    columnGap: theme.spacing(2),
+  }),
+  info: css({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    cursor: 'pointer',
+    gap: theme.spacing(1),
+  }),
 });
 
 const getDocumentedFunctionStyles = (theme: GrafanaTheme2) => ({
-  name: css`
-    font-weight: ${theme.typography.fontWeightBold};
-  `,
-  description: css`
-    font-size: ${theme.typography.bodySmall.fontSize};
-    color: ${theme.colors.text.disabled};
-  `,
+  name: css({
+    fontWeight: theme.typography.fontWeightBold,
+  }),
+  description: css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.disabled,
+  }),
 });
diff --git a/public/app/features/geo/editor/GazetteerPathEditor.tsx b/public/app/features/geo/editor/GazetteerPathEditor.tsx
index 944f23a4ac0..5bd0a4ff130 100644
--- a/public/app/features/geo/editor/GazetteerPathEditor.tsx
+++ b/public/app/features/geo/editor/GazetteerPathEditor.tsx
@@ -1,7 +1,7 @@
 import { css } from '@emotion/css';
 import { useMemo, useState, useEffect } from 'react';
 
-import { StandardEditorProps, SelectableValue } from '@grafana/data';
+import { StandardEditorProps, SelectableValue, GrafanaTheme2 } from '@grafana/data';
 import { Alert, Select, useStyles2 } from '@grafana/ui';
 
 import { COUNTRIES_GAZETTEER_PATH, Gazetteer, getGazetteer } from '../gazetteer/gazetteer';
@@ -86,15 +86,15 @@ export const GazetteerPathEditor = ({
   );
 };
 
-const getStyles = () => ({
-  keys: css`
-    margin-top: 4px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
+const getStyles = (theme: GrafanaTheme2) => ({
+  keys: css({
+    marginTop: theme.spacing(0.5),
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
 
-    > span {
-      margin-left: 4px;
-    }
-  `,
+    '> span': {
+      marginLeft: theme.spacing(0.5),
+    },
+  }),
 });
diff --git a/public/app/features/geo/editor/locationModeEditor.tsx b/public/app/features/geo/editor/locationModeEditor.tsx
index 2bce3e10980..6ded40a3abe 100644
--- a/public/app/features/geo/editor/locationModeEditor.tsx
+++ b/public/app/features/geo/editor/locationModeEditor.tsx
@@ -103,19 +103,19 @@ export const LocationModeEditor = ({
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    alert: css`
-      & div {
-        padding: 4px;
-      }
-      margin-bottom: 0px;
-      margin-top: 5px;
-      padding: 2px;
-    `,
+    alert: css({
+      '& div': {
+        padding: theme.spacing(0.5),
+      },
+      marginBottom: '0px',
+      marginTop: '5px',
+      padding: theme.spacing(0.25),
+    }),
     // TODO apply styling to horizontal group (currently not working)
-    hGroup: css`
-      & div {
-        width: 100%;
-      }
-    `,
+    hGroup: css({
+      '& div': {
+        width: '100%',
+      },
+    }),
   };
 };
diff --git a/public/app/features/inspector/DetailText.tsx b/public/app/features/inspector/DetailText.tsx
index 2ea340cc092..553376f2941 100644
--- a/public/app/features/inspector/DetailText.tsx
+++ b/public/app/features/inspector/DetailText.tsx
@@ -4,13 +4,14 @@ import * as React from 'react';
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 
-const getStyles = (theme: GrafanaTheme2) => css`
-  padding: ${theme.spacing(0, 2)};
-  font-size: ${theme.typography.bodySmall.fontSize};
-  color: ${theme.colors.text.secondary};
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
+const getStyles = (theme: GrafanaTheme2) =>
+  css({
+    padding: theme.spacing(0, 2),
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  });
 
 export const DetailText = ({ children }: React.PropsWithChildren<{}>) => {
   const collapsedTextStyles = useStyles2(getStyles);
diff --git a/public/app/features/inspector/InspectStatsTab.tsx b/public/app/features/inspector/InspectStatsTab.tsx
index 0c1b76e7755..77628c9d7a1 100644
--- a/public/app/features/inspector/InspectStatsTab.tsx
+++ b/public/app/features/inspector/InspectStatsTab.tsx
@@ -70,7 +70,7 @@ export const InspectStatsTab = ({ data, timeZone }: InspectStatsTabProps) => {
   );
 };
 
-const containerStyles = css`
-  height: 100%;
-  overflow-y: scroll;
-`;
+const containerStyles = css({
+  height: '100%',
+  overflowY: 'scroll',
+});
diff --git a/public/app/features/inspector/QueryInspector.tsx b/public/app/features/inspector/QueryInspector.tsx
index 73e45aa113e..7b9f9912754 100644
--- a/public/app/features/inspector/QueryInspector.tsx
+++ b/public/app/features/inspector/QueryInspector.tsx
@@ -192,11 +192,11 @@ export class QueryInspector extends PureComponent<Props, State> {
     }
 
     const styles = {
-      refId: css`
-        font-weight: ${config.theme.typography.weight.semibold};
-        color: ${config.theme.colors.textBlue};
-        margin-right: 8px;
-      `,
+      refId: css({
+        fontWeight: config.theme.typography.weight.semibold,
+        color: config.theme.colors.textBlue,
+        marginRight: '8px',
+      }),
     };
 
     return (
diff --git a/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx b/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx
index 95a517074cb..e31b6f0698f 100644
--- a/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx
+++ b/public/app/features/library-panels/components/LibraryPanelInfo/LibraryPanelInfo.tsx
@@ -43,20 +43,20 @@ export const LibraryPanelInformation = ({ panel, formatDate }: Props) => {
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    info: css`
-      line-height: 1;
-    `,
-    libraryPanelInfo: css`
-      color: ${theme.colors.text.secondary};
-      font-size: ${theme.typography.bodySmall.fontSize};
-    `,
-    userAvatar: css`
-      border-radius: ${theme.shape.radius.circle};
-      box-sizing: content-box;
-      width: 22px;
-      height: 22px;
-      padding-left: ${theme.spacing(1)};
-      padding-right: ${theme.spacing(1)};
-    `,
+    info: css({
+      lineHeight: 1,
+    }),
+    libraryPanelInfo: css({
+      color: theme.colors.text.secondary,
+      fontSize: theme.typography.bodySmall.fontSize,
+    }),
+    userAvatar: css({
+      borderRadius: theme.shape.radius.circle,
+      boxSizing: 'content-box',
+      width: '22px',
+      height: '22px',
+      paddingLeft: theme.spacing(1),
+      paddingRight: theme.spacing(1),
+    }),
   };
 };
diff --git a/public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx b/public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx
index 83a063f7bcd..7d3e41aa98b 100644
--- a/public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx
+++ b/public/app/features/library-panels/components/OpenLibraryPanelModal/OpenLibraryPanelModal.tsx
@@ -1,10 +1,9 @@
-import { css } from '@emotion/css';
 import debounce from 'debounce-promise';
 import { MouseEvent, useCallback, useEffect, useMemo, useState } from 'react';
 
-import { GrafanaTheme2, SelectableValue, urlUtil } from '@grafana/data';
+import { SelectableValue, urlUtil } from '@grafana/data';
 import { locationService } from '@grafana/runtime';
-import { AsyncSelect, Button, Modal, useStyles2 } from '@grafana/ui';
+import { AsyncSelect, Button, Modal } from '@grafana/ui';
 import { t, Trans } from 'app/core/internationalization';
 
 import { DashboardSearchItem } from '../../../search/types';
@@ -17,7 +16,6 @@ export interface OpenLibraryPanelModalProps {
 }
 
 export function OpenLibraryPanelModal({ libraryPanel, onDismiss }: OpenLibraryPanelModalProps): JSX.Element {
-  const styles = useStyles2(getStyles);
   const [loading, setLoading] = useState(false);
   const [connected, setConnected] = useState(0);
   const [option, setOption] = useState<SelectableValue<DashboardSearchItem> | undefined>(undefined);
@@ -45,7 +43,7 @@ export function OpenLibraryPanelModal({ libraryPanel, onDismiss }: OpenLibraryPa
       onClickBackdrop={onDismiss}
       isOpen
     >
-      <div className={styles.container}>
+      <div>
         {connected === 0 ? (
           <span>
             <Trans i18nKey={'library-panels.modal.panel-not-linked'}>
@@ -97,9 +95,3 @@ async function loadOptionsAsync(uid: string, searchString: string, setLoading: (
 
   return options;
 }
-
-function getStyles(theme: GrafanaTheme2) {
-  return {
-    container: css``,
-  };
-}
diff --git a/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx b/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
index 5864e4e25d3..5978d723249 100644
--- a/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
+++ b/public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
@@ -84,7 +84,7 @@ export const PanelLibraryOptionsGroup = ({ panel, searchQuery, isWidget = false
 };
 
 const styles = {
-  libraryPanelsView: css`
-    width: 100%;
-  `,
+  libraryPanelsView: css({
+    width: '100%',
+  }),
 };
diff --git a/public/app/features/library-panels/styles.ts b/public/app/features/library-panels/styles.ts
index c836ea6a06a..05f1cfba99a 100644
--- a/public/app/features/library-panels/styles.ts
+++ b/public/app/features/library-panels/styles.ts
@@ -4,51 +4,50 @@ import { GrafanaTheme2 } from '@grafana/data';
 
 export function getModalStyles(theme: GrafanaTheme2) {
   return {
-    myTable: css`
-      max-height: 204px;
-      overflow-y: auto;
-      margin-top: 11px;
-      margin-bottom: 28px;
-      border-radius: ${theme.shape.radius.default};
-      border: 1px solid ${theme.colors.action.hover};
-      background: ${theme.colors.background.primary};
-      color: ${theme.colors.text.secondary};
-      font-size: ${theme.typography.h6.fontSize};
-      width: 100%;
+    myTable: css({
+      maxHeight: '204px',
+      overflowY: 'auto',
+      marginTop: '11px',
+      marginBottom: '28px',
+      borderRadius: theme.shape.radius.default,
+      border: `1px solid ${theme.colors.action.hover}`,
+      background: theme.colors.background.primary,
+      color: theme.colors.text.secondary,
+      fontSize: theme.typography.h6.fontSize,
+      width: '100%',
 
-      thead {
-        color: #538ade;
-        font-size: ${theme.typography.bodySmall.fontSize};
-      }
+      thead: {
+        color: '#538ade',
+        fontSize: theme.typography.bodySmall.fontSize,
+      },
 
-      th,
-      td {
-        padding: 6px 13px;
-        height: ${theme.spacing(4)};
-      }
+      'th, td': {
+        padding: '6px 13px',
+        height: theme.spacing(4),
+      },
 
-      tbody > tr:nth-child(odd) {
-        background: ${theme.colors.background.secondary};
-      }
-    `,
-    noteTextbox: css`
-      margin-bottom: ${theme.spacing(4)};
-    `,
-    textInfo: css`
-      color: ${theme.colors.text.secondary};
-      font-size: ${theme.typography.size.sm};
-    `,
-    dashboardSearch: css`
-      margin-top: ${theme.spacing(2)};
-    `,
-    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)};
-    `,
+      'tbody > tr:nth-child(odd)': {
+        background: theme.colors.background.secondary,
+      },
+    }),
+    noteTextbox: css({
+      marginBottom: theme.spacing(4),
+    }),
+    textInfo: css({
+      color: theme.colors.text.secondary,
+      fontSize: theme.typography.size.sm,
+    }),
+    dashboardSearch: css({
+      marginTop: 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),
+    }),
   };
 }
diff --git a/public/app/features/logs/components/LoadingIndicator.tsx b/public/app/features/logs/components/LoadingIndicator.tsx
index 8c33d85bb41..e3d4b94b670 100644
--- a/public/app/features/logs/components/LoadingIndicator.tsx
+++ b/public/app/features/logs/components/LoadingIndicator.tsx
@@ -19,7 +19,7 @@ export const LoadingIndicator = ({ adjective = 'newer' }: Props) => {
   );
 };
 
-const loadingIndicatorStyles = css`
-  display: flex;
-  justify-content: center;
-`;
+const loadingIndicatorStyles = css({
+  display: 'flex',
+  justifyContent: 'center',
+});
diff --git a/public/app/features/logs/components/LogDetailsRow.tsx b/public/app/features/logs/components/LogDetailsRow.tsx
index 2bf94eabf05..0139ddec647 100644
--- a/public/app/features/logs/components/LogDetailsRow.tsx
+++ b/public/app/features/logs/components/LogDetailsRow.tsx
@@ -50,60 +50,60 @@ interface State {
 
 const getStyles = memoizeOne((theme: GrafanaTheme2) => {
   return {
-    wordBreakAll: css`
-      label: wordBreakAll;
-      word-break: break-all;
-    `,
-    copyButton: css`
-      & > button {
-        color: ${theme.colors.text.secondary};
-        padding: 0;
-        justify-content: center;
-        border-radius: ${theme.shape.radius.circle};
-        height: ${theme.spacing(theme.components.height.sm)};
-        width: ${theme.spacing(theme.components.height.sm)};
-        svg {
-          margin: 0;
-        }
+    wordBreakAll: css({
+      label: 'wordBreakAll',
+      wordBreak: 'break-all',
+    }),
+    copyButton: css({
+      '& > button': {
+        color: theme.colors.text.secondary,
+        padding: 0,
+        justifyContent: 'center',
+        borderRadius: theme.shape.radius.circle,
+        height: theme.spacing(theme.components.height.sm),
+        width: theme.spacing(theme.components.height.sm),
+        svg: {
+          margin: 0,
+        },
 
-        span > div {
-          top: -5px;
-          & button {
-            color: ${theme.colors.success.main};
-          }
-        }
-      }
-    `,
-    adjoiningLinkButton: css`
-      margin-left: ${theme.spacing(1)};
-    `,
-    wrapLine: css`
-      label: wrapLine;
-      white-space: pre-wrap;
-    `,
-    logDetailsStats: css`
-      padding: 0 ${theme.spacing(1)};
-    `,
-    logDetailsValue: css`
-      display: flex;
-      align-items: center;
-      line-height: 22px;
+        'span > div': {
+          top: '-5px',
+          '& button': {
+            color: theme.colors.success.main,
+          },
+        },
+      },
+    }),
+    adjoiningLinkButton: css({
+      marginLeft: theme.spacing(1),
+    }),
+    wrapLine: css({
+      label: 'wrapLine',
+      whiteSpace: 'pre-wrap',
+    }),
+    logDetailsStats: css({
+      padding: `0 ${theme.spacing(1)}`,
+    }),
+    logDetailsValue: css({
+      display: 'flex',
+      alignItems: 'center',
+      lineHeight: '22px',
 
-      .log-details-value-copy {
-        visibility: hidden;
-      }
-      &:hover {
-        .log-details-value-copy {
-          visibility: visible;
-        }
-      }
-    `,
-    buttonRow: css`
-      display: flex;
-      flex-direction: row;
-      gap: ${theme.spacing(0.5)};
-      margin-left: ${theme.spacing(0.5)};
-    `,
+      '.log-details-value-copy': {
+        visibility: 'hidden',
+      },
+      '&:hover': {
+        '.log-details-value-copy': {
+          visibility: 'visible',
+        },
+      },
+    }),
+    buttonRow: css({
+      display: 'flex',
+      flexDirection: 'row',
+      gap: theme.spacing(0.5),
+      marginLeft: theme.spacing(0.5),
+    }),
   };
 });
 
diff --git a/public/app/features/logs/components/LogLabelStats.tsx b/public/app/features/logs/components/LogLabelStats.tsx
index f6ac4558966..e4b8b07797b 100644
--- a/public/app/features/logs/components/LogLabelStats.tsx
+++ b/public/app/features/logs/components/LogLabelStats.tsx
@@ -11,36 +11,36 @@ const STATS_ROW_LIMIT = 5;
 
 const getStyles = stylesFactory((theme: GrafanaTheme2) => {
   return {
-    logsStats: css`
-      label: logs-stats;
-      background: inherit;
-      color: ${theme.colors.text.primary};
-      word-break: break-all;
-      width: fit-content;
-      max-width: 100%;
-    `,
-    logsStatsHeader: css`
-      label: logs-stats__header;
-      border-bottom: 1px solid ${theme.colors.border.medium};
-      display: flex;
-    `,
-    logsStatsTitle: css`
-      label: logs-stats__title;
-      font-weight: ${theme.typography.fontWeightMedium};
-      padding-right: ${theme.spacing(2)};
-      display: inline-block;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      flex-grow: 1;
-    `,
-    logsStatsClose: css`
-      label: logs-stats__close;
-      cursor: pointer;
-    `,
-    logsStatsBody: css`
-      label: logs-stats__body;
-      padding: 5px 0px;
-    `,
+    logsStats: css({
+      label: 'logs-stats',
+      background: 'inherit',
+      color: theme.colors.text.primary,
+      wordBreak: 'break-all',
+      width: 'fit-content',
+      maxWidth: '100%',
+    }),
+    logsStatsHeader: css({
+      label: 'logs-stats__header',
+      borderBottom: `1px solid ${theme.colors.border.medium}`,
+      display: 'flex',
+    }),
+    logsStatsTitle: css({
+      label: 'logs-stats__title',
+      fontWeight: theme.typography.fontWeightMedium,
+      paddingRight: theme.spacing(2),
+      display: 'inline-block',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      flexGrow: 1,
+    }),
+    logsStatsClose: css({
+      label: 'logs-stats__close',
+      cursor: 'pointer',
+    }),
+    logsStatsBody: css({
+      label: 'logs-stats__body',
+      padding: '5px 0px',
+    }),
   };
 });
 
diff --git a/public/app/features/logs/components/LogLabelStatsRow.tsx b/public/app/features/logs/components/LogLabelStatsRow.tsx
index 18eeeb37953..9dd5b796dc5 100644
--- a/public/app/features/logs/components/LogLabelStatsRow.tsx
+++ b/public/app/features/logs/components/LogLabelStatsRow.tsx
@@ -4,49 +4,49 @@ import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  logsStatsRow: css`
-    label: logs-stats-row;
-    margin: ${parseInt(theme.spacing(2), 10) / 1.75}px 0;
-  `,
-  logsStatsRowActive: css`
-    label: logs-stats-row--active;
-    color: ${theme.colors.primary.text};
-    position: relative;
-  `,
-  logsStatsRowLabel: css`
-    label: logs-stats-row__label;
-    display: flex;
-    margin-bottom: 1px;
-  `,
-  logsStatsRowValue: css`
-    label: logs-stats-row__value;
-    flex: 1;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  `,
-  logsStatsRowCount: css`
-    label: logs-stats-row__count;
-    text-align: right;
-    margin-left: ${theme.spacing(0.75)};
-  `,
-  logsStatsRowPercent: css`
-    label: logs-stats-row__percent;
-    text-align: right;
-    margin-left: ${theme.spacing(0.75)};
-    width: ${theme.spacing(4.5)};
-  `,
-  logsStatsRowBar: css`
-    label: logs-stats-row__bar;
-    height: ${theme.spacing(0.5)};
-    overflow: hidden;
-    background: ${theme.colors.text.disabled};
-  `,
-  logsStatsRowInnerBar: css`
-    label: logs-stats-row__innerbar;
-    height: ${theme.spacing(0.5)};
-    overflow: hidden;
-    background: ${theme.colors.primary.main};
-  `,
+  logsStatsRow: css({
+    label: 'logs-stats-row',
+    margin: `${parseInt(theme.spacing(2), 10) / 1.75}px 0`,
+  }),
+  logsStatsRowActive: css({
+    label: 'logs-stats-row--active',
+    color: theme.colors.primary.text,
+    position: 'relative',
+  }),
+  logsStatsRowLabel: css({
+    label: 'logs-stats-row__label',
+    display: 'flex',
+    marginBottom: '1px',
+  }),
+  logsStatsRowValue: css({
+    label: 'logs-stats-row__value',
+    flex: 1,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  }),
+  logsStatsRowCount: css({
+    label: 'logs-stats-row__count',
+    textAlign: 'right',
+    marginLeft: theme.spacing(0.75),
+  }),
+  logsStatsRowPercent: css({
+    label: 'logs-stats-row__percent',
+    textAlign: 'right',
+    marginLeft: theme.spacing(0.75),
+    width: theme.spacing(4.5),
+  }),
+  logsStatsRowBar: css({
+    label: 'logs-stats-row__bar',
+    height: theme.spacing(0.5),
+    overflow: 'hidden',
+    background: theme.colors.text.disabled,
+  }),
+  logsStatsRowInnerBar: css({
+    label: 'logs-stats-row__innerbar',
+    height: theme.spacing(0.5),
+    overflow: 'hidden',
+    background: theme.colors.primary.main,
+  }),
 });
 
 export interface Props {
diff --git a/public/app/features/logs/components/LogLabels.tsx b/public/app/features/logs/components/LogLabels.tsx
index 9fa3e77b112..c3d7b9117ad 100644
--- a/public/app/features/logs/components/LogLabels.tsx
+++ b/public/app/features/logs/components/LogLabels.tsx
@@ -86,28 +86,28 @@ LogLabel.displayName = 'LogLabel';
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
-    logsLabels: css`
-      display: flex;
-      flex-wrap: wrap;
-      font-size: ${theme.typography.size.xs};
-    `,
-    logsLabel: css`
-      label: logs-label;
-      display: flex;
-      padding: ${theme.spacing(0, 0.25)};
-      background-color: ${theme.colors.background.secondary};
-      border-radius: ${theme.shape.radius.default};
-      margin: ${theme.spacing(0.125, 0.5, 0, 0)};
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      overflow: hidden;
-    `,
-    logsLabelValue: css`
-      label: logs-label__value;
-      display: inline-block;
-      max-width: ${theme.spacing(25)};
-      text-overflow: ellipsis;
-      overflow: hidden;
-    `,
+    logsLabels: css({
+      display: 'flex',
+      flexWrap: 'wrap',
+      fontSize: theme.typography.size.xs,
+    }),
+    logsLabel: css({
+      label: 'logs-label',
+      display: 'flex',
+      padding: theme.spacing(0, 0.25),
+      backgroundColor: theme.colors.background.secondary,
+      borderRadius: theme.shape.radius.default,
+      margin: theme.spacing(0.125, 0.5, 0, 0),
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+    }),
+    logsLabelValue: css({
+      label: 'logs-label__value',
+      display: 'inline-block',
+      maxWidth: theme.spacing(25),
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+    }),
   };
 };
diff --git a/public/app/features/logs/components/LogRowMessageDisplayedFields.tsx b/public/app/features/logs/components/LogRowMessageDisplayedFields.tsx
index 4bc81f76cee..5391dd0cce9 100644
--- a/public/app/features/logs/components/LogRowMessageDisplayedFields.tsx
+++ b/public/app/features/logs/components/LogRowMessageDisplayedFields.tsx
@@ -72,9 +72,9 @@ export const LogRowMessageDisplayedFields = memo((props: Props) => {
 });
 
 const displayedFieldsStyles = {
-  noWrap: css`
-    white-space: nowrap;
-  `,
+  noWrap: css({
+    whiteSpace: 'nowrap',
+  }),
 };
 
 LogRowMessageDisplayedFields.displayName = 'LogRowMessageDisplayedFields';
diff --git a/public/app/features/logs/components/getLogRowStyles.ts b/public/app/features/logs/components/getLogRowStyles.ts
index e3609dae455..eec5a40bfe4 100644
--- a/public/app/features/logs/components/getLogRowStyles.ts
+++ b/public/app/features/logs/components/getLogRowStyles.ts
@@ -32,11 +32,11 @@ export const getLogLevelStyles = (theme: GrafanaTheme2, logLevel?: LogLevel) =>
   }
 
   return {
-    logsRowLevelColor: css`
-      &::after {
-        background-color: ${logColor};
-      }
-    `,
+    logsRowLevelColor: css({
+      '&::after': {
+        backgroundColor: logColor,
+      },
+    }),
   };
 };
 
@@ -44,79 +44,79 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
   const hoverBgColor = styleMixins.hoverColor(theme.colors.background.secondary, theme);
   const contextOutlineColor = tinycolor(theme.components.dashboard.background).setAlpha(0.7).toRgbString();
   return {
-    logsRowLevel: css`
-      label: logs-row__level;
-      max-width: ${theme.spacing(1.25)};
-      cursor: default;
-      &::after {
-        content: '';
-        display: block;
-        position: absolute;
-        top: 1px;
-        bottom: 1px;
-        width: 3px;
-        left: ${theme.spacing(0.5)};
-      }
-    `,
+    logsRowLevel: css({
+      label: 'logs-row__level',
+      maxWidth: theme.spacing(1.25),
+      cursor: 'default',
+      '&::after': {
+        content: "''",
+        display: 'block',
+        position: 'absolute',
+        top: '1px',
+        bottom: '1px',
+        width: '3px',
+        left: theme.spacing(0.5),
+      },
+    }),
     // Compared to logsRowLevel we need to make error logs wider to accommodate the icon
     logsRowWithError: css({
       maxWidth: `${theme.spacing(1.5)}`,
     }),
-    logsRowMatchHighLight: css`
-      label: logs-row__match-highlight;
-      background: inherit;
-      padding: inherit;
-      color: ${theme.components.textHighlight.text}
-      background-color: ${theme.components.textHighlight};
-    `,
+    logsRowMatchHighLight: css({
+      label: 'logs-row__match-highlight',
+      background: 'inherit',
+      padding: 'inherit',
+      color: theme.components.textHighlight.text,
+      backgroundColor: theme.components.textHighlight.background,
+    }),
     logRows: css({
       position: 'relative',
     }),
-    logsRowsTable: css`
-      label: logs-rows;
-      font-family: ${theme.typography.fontFamilyMonospace};
-      font-size: ${theme.typography.bodySmall.fontSize};
-      width: 100%;
-      position: relative;
-    `,
-    logsRowsTableContain: css`
-      contain: strict;
-    `,
-    highlightBackground: css`
-      background-color: ${tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString()};
-    `,
-    logsRow: css`
-      label: logs-row;
-      width: 100%;
-      cursor: pointer;
-      vertical-align: top;
+    logsRowsTable: css({
+      label: 'logs-rows',
+      fontFamily: theme.typography.fontFamilyMonospace,
+      fontSize: theme.typography.bodySmall.fontSize,
+      width: '100%',
+      position: 'relative',
+    }),
+    logsRowsTableContain: css({
+      contain: 'strict',
+    }),
+    highlightBackground: css({
+      backgroundColor: tinycolor(theme.colors.info.transparent).setAlpha(0.25).toString(),
+    }),
+    logsRow: css({
+      label: 'logs-row',
+      width: '100%',
+      cursor: 'pointer',
+      verticalAlign: 'top',
 
-      &:hover {
-        .log-row-menu {
-          z-index: 1;
-        }
+      '&:hover': {
+        '.log-row-menu': {
+          zIndex: 1,
+        },
 
-        background: ${hoverBgColor};
-      }
+        background: hoverBgColor,
+      },
 
-      td:not(.log-row-menu-cell):last-child {
-        width: 100%;
-      }
+      'td:not(.log-row-menu-cell):last-child': {
+        width: '100%',
+      },
 
-      > td:not(.log-row-menu-cell) {
-        position: relative;
-        padding-right: ${theme.spacing(1)};
-        border-top: 1px solid transparent;
-        border-bottom: 1px solid transparent;
-        height: 100%;
-      }
-    `,
-    logsRowDuplicates: css`
-      label: logs-row__duplicates;
-      text-align: right;
-      width: 4em;
-      cursor: default;
-    `,
+      '> td:not(.log-row-menu-cell)': {
+        position: 'relative',
+        paddingRight: theme.spacing(1),
+        borderTop: '1px solid transparent',
+        borderBottom: '1px solid transparent',
+        height: '100%',
+      },
+    }),
+    logsRowDuplicates: css({
+      label: 'logs-row__duplicates',
+      textAlign: 'right',
+      width: '4em',
+      cursor: 'default',
+    }),
     logIconError: css({
       color: theme.colors.warning.main,
       position: 'relative',
@@ -127,202 +127,201 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
       position: 'relative',
       top: '-2px',
     }),
-    logsRowToggleDetails: css`
-      label: logs-row-toggle-details__level;
-      font-size: 9px;
-      padding-top: 5px;
-      max-width: 15px;
-    `,
-    logsRowLocalTime: css`
-      label: logs-row__localtime;
-      white-space: nowrap;
-    `,
-    logsRowLabels: css`
-      label: logs-row__labels;
-      white-space: nowrap;
-      max-width: 22em;
+    logsRowToggleDetails: css({
+      label: 'logs-row-toggle-details__level',
+      fontSize: '9px',
+      paddingTop: '5px',
+      maxWidth: '15px',
+    }),
+    logsRowLocalTime: css({
+      label: 'logs-row__localtime',
+      whiteSpace: 'nowrap',
+    }),
+    logsRowLabels: css({
+      label: 'logs-row__labels',
+      whiteSpace: 'nowrap',
+      maxWidth: '22em',
 
       /* This is to make the labels vertical align */
-      > span {
-        margin-top: 0.75px;
-      }
-    `,
-    logsRowMessage: css`
-      label: logs-row__message;
-      white-space: pre-wrap;
-      word-break: break-all;
-      overflow-wrap: anywhere;
-      width: 100%;
-      text-align: left;
-    `,
-    copyLogButton: css`
-      padding: 0 0 0 ${theme.spacing(0.5)};
-      height: ${theme.spacing(3)};
-      width: ${theme.spacing(3.25)};
-      line-height: ${theme.spacing(2.5)};
-      overflow: hidden;
-      &:hover {
-          background-color: ${colorManipulator.alpha(theme.colors.text.primary, 0.12)};
-        }
-      }
-    `,
+      '> span': {
+        marginTop: '0.75px',
+      },
+    }),
+    logsRowMessage: css({
+      label: 'logs-row__message',
+      whiteSpace: 'pre-wrap',
+      wordBreak: 'break-all',
+      overflowWrap: 'anywhere',
+      width: '100%',
+      textAlign: 'left',
+    }),
+    copyLogButton: css({
+      padding: theme.spacing(0, 0, 0, 0.5),
+      height: theme.spacing(3),
+      width: theme.spacing(3.25),
+      lineHeight: theme.spacing(2.5),
+      overflow: 'hidden',
+      '&:hover': {
+        backgroundColor: colorManipulator.alpha(theme.colors.text.primary, 0.12),
+      },
+    }),
     //Log details specific CSS
-    logDetailsContainer: css`
-      label: logs-row-details-table;
-      border: 1px solid ${theme.colors.border.medium};
-      padding: 0 ${theme.spacing(1)} ${theme.spacing(1)};
-      border-radius: ${theme.shape.radius.default};
-      margin: ${theme.spacing(2.5)} ${theme.spacing(1)} ${theme.spacing(2.5)} ${theme.spacing(2)};
-      cursor: default;
-    `,
-    logDetailsTable: css`
-      label: logs-row-details-table;
-      line-height: 18px;
-      width: 100%;
-      td:last-child {
-        width: 100%;
-      }
-    `,
-    logsDetailsIcon: css`
-      label: logs-row-details__icon;
-      position: relative;
-      color: ${theme.v1.palette.gray3};
-      padding-top: 1px;
-      padding-bottom: 1px;
-      padding-right: ${theme.spacing(0.75)};
-    `,
-    logDetailsLabel: css`
-      label: logs-row-details__label;
-      max-width: 30em;
-      min-width: 20em;
-      padding: 0 ${theme.spacing(1)};
-      overflow-wrap: break-word;
-    `,
-    logDetailsHeading: css`
-      label: logs-row-details__heading;
-      font-weight: ${theme.typography.fontWeightBold};
-      padding: ${theme.spacing(1)} 0 ${theme.spacing(0.5)};
-    `,
-    logDetailsValue: css`
-      label: logs-row-details__row;
-      position: relative;
-      vertical-align: middle;
-      cursor: default;
+    logDetailsContainer: css({
+      label: 'logs-row-details-table',
+      border: `1px solid ${theme.colors.border.medium}`,
+      padding: theme.spacing(0, 1, 1),
+      borderRadius: theme.shape.radius.default,
+      margin: theme.spacing(2.5, 1, 2.5, 2),
+      cursor: 'default',
+    }),
+    logDetailsTable: css({
+      label: 'logs-row-details-table',
+      lineHeight: '18px',
+      width: '100%',
+      'td:last-child': {
+        width: '100%',
+      },
+    }),
+    logsDetailsIcon: css({
+      label: 'logs-row-details__icon',
+      position: 'relative',
+      color: theme.v1.palette.gray3,
+      paddingTop: '1px',
+      paddingBottom: '1px',
+      paddingRight: theme.spacing(0.75),
+    }),
+    logDetailsLabel: css({
+      label: 'logs-row-details__label',
+      maxWidth: '30em',
+      minMidth: '20em',
+      padding: theme.spacing(0, 1),
+      overflowWrap: 'break-word',
+    }),
+    logDetailsHeading: css({
+      label: 'logs-row-details__heading',
+      fontWeight: theme.typography.fontWeightBold,
+      padding: theme.spacing(1, 0, 0.5),
+    }),
+    logDetailsValue: css({
+      label: 'logs-row-details__row',
+      position: 'relative',
+      verticalAlign: 'middle',
+      cursor: 'default',
 
-      &:hover {
-        background-color: ${hoverBgColor};
-      }
-    `,
+      '&:hover': {
+        backgroundColor: hoverBgColor,
+      },
+    }),
     // Log row
-    topVerticalAlign: css`
-      label: topVerticalAlign;
-      margin-top: -${theme.spacing(0.9)};
-      margin-left: -${theme.spacing(0.25)};
-    `,
-    detailsOpen: css`
-      &:hover {
-        background-color: ${styleMixins.hoverColor(theme.colors.background.primary, theme)};
-      }
-    `,
-    errorLogRow: css`
-      label: erroredLogRow;
-      color: ${theme.colors.text.secondary};
-    `,
+    topVerticalAlign: css({
+      label: 'topVerticalAlign',
+      marginTop: theme.spacing(-0.9),
+      marginLeft: theme.spacing(-0.25),
+    }),
+    detailsOpen: css({
+      '&:hover': {
+        backgroundColor: styleMixins.hoverColor(theme.colors.background.primary, theme),
+      },
+    }),
+    errorLogRow: css({
+      label: 'erroredLogRow',
+      color: theme.colors.text.secondary,
+    }),
     // Log Row Message
-    positionRelative: css`
-      label: positionRelative;
-      position: relative;
-    `,
-    rowWithContext: css`
-      label: rowWithContext;
-      z-index: 1;
-      outline: 9999px solid ${contextOutlineColor};
-      display: inherit;
-    `,
-    horizontalScroll: css`
-      label: horizontalScroll;
-      white-space: pre;
-    `,
-    contextNewline: css`
-      display: block;
-      margin-left: 0px;
-    `,
-    rowMenu: css`
-      label: rowMenu;
-      display: flex;
-      flex-wrap: nowrap;
-      flex-direction: row;
-      align-content: flex-end;
-      justify-content: space-evenly;
-      align-items: center;
-      position: absolute;
-      top: 0;
-      bottom: auto;
-      background: ${theme.colors.background.primary};
-      box-shadow: ${theme.shadows.z3};
-      padding: ${theme.spacing(0.5, 1, 0.5, 1)};
-      z-index: 100;
-      gap: ${theme.spacing(0.5)};
+    positionRelative: css({
+      label: 'positionRelative',
+      position: 'relative',
+    }),
+    rowWithContext: css({
+      label: 'rowWithContext',
+      zIndex: 1,
+      outline: `9999px solid ${contextOutlineColor}`,
+      display: 'inherit',
+    }),
+    horizontalScroll: css({
+      label: 'horizontalScroll',
+      whiteSpace: 'pre',
+    }),
+    contextNewline: css({
+      display: 'block',
+      marginLeft: '0px',
+    }),
+    rowMenu: css({
+      label: 'rowMenu',
+      display: 'flex',
+      flexWrap: 'nowrap',
+      flexDirection: 'row',
+      alignContent: 'flex-end',
+      justifyContent: 'space-evenly',
+      alignItems: 'center',
+      position: 'absolute',
+      top: 0,
+      bottom: 'auto',
+      background: theme.colors.background.primary,
+      boxShadow: theme.shadows.z3,
+      padding: theme.spacing(0.5, 1, 0.5, 1),
+      zIndex: 100,
+      gap: theme.spacing(0.5),
 
-      & > button {
-        margin: 0;
-      }
-    `,
-    logRowMenuCell: css`
-      position: sticky;
-      z-index: ${theme.zIndex.dropdown};
-      margin-top: -${theme.spacing(0.125)};
-      right: 0px;
+      '& > button': {
+        margin: 0,
+      },
+    }),
+    logRowMenuCell: css({
+      position: 'sticky',
+      zIndex: theme.zIndex.dropdown,
+      marginTop: theme.spacing(-0.125),
+      right: 0,
 
-      & > span {
-        transform: translateX(-100%);
-      }
-    `,
-    logLine: css`
-      background-color: transparent;
-      border: none;
-      diplay: inline;
-      font-family: ${theme.typography.fontFamilyMonospace};
-      font-size: ${theme.typography.bodySmall.fontSize};
-      letter-spacing: ${theme.typography.bodySmall.letterSpacing};
-      text-align: left;
-      padding: 0;
-      user-select: text;
-    `,
+      '& > span': {
+        transform: 'translateX(-100%)',
+      },
+    }),
+    logLine: css({
+      backgroundColor: 'transparent',
+      border: 'none',
+      diplay: 'inline',
+      fontFamily: theme.typography.fontFamilyMonospace,
+      fontSize: theme.typography.bodySmall.fontSize,
+      letterSpacing: theme.typography.bodySmall.letterSpacing,
+      textAlign: 'left',
+      padding: 0,
+      userSelect: 'text',
+    }),
     // Log details
-    logsRowLevelDetails: css`
-      label: logs-row__level_details;
-      &::after {
-        top: -3px;
-      }
-    `,
-    logDetails: css`
-      label: logDetailsDefaultCursor;
-      cursor: default;
+    logsRowLevelDetails: css({
+      label: 'logs-row__level_details',
+      '&::after': {
+        top: '-3px',
+      },
+    }),
+    logDetails: css({
+      label: 'logDetailsDefaultCursor',
+      cursor: 'default',
 
-      &:hover {
-        background-color: ${theme.colors.background.primary};
-      }
-    `,
-    visibleRowMenu: css`
-      label: visibleRowMenu;
-      aspect-ratio: 1/1;
-      z-index: 90;
-    `,
-    linkButton: css`
-      label: linkButton;
-      > button {
-        padding-top: ${theme.spacing(0.5)};
-      }
-    `,
-    hidden: css`
-      label: hidden;
-      visibility: hidden;
-    `,
-    unPinButton: css`
-      height: ${theme.spacing(3)};
-      line-height: ${theme.spacing(2.5)};
-    `,
+      '&:hover': {
+        backgroundColor: theme.colors.background.primary,
+      },
+    }),
+    visibleRowMenu: css({
+      label: 'visibleRowMenu',
+      aspectRatio: '1/1',
+      zIndex: 90,
+    }),
+    linkButton: css({
+      label: 'linkButton',
+      '> button': {
+        paddingTop: theme.spacing(0.5),
+      },
+    }),
+    hidden: css({
+      label: 'hidden',
+      visibility: 'hidden',
+    }),
+    unPinButton: css({
+      height: theme.spacing(3),
+      lineHeight: theme.spacing(2.5),
+    }),
   };
 });