Chore: Migrate some more SCSS to emotion (#89038)

* migrate section-heading

* move fonts to global styles

* migrate code styles to emotion globals

* migrate spacings styles and leave some in angular

* padding should be 2 here not 1

packages/grafana-sql/src/components/ConfirmModal.tsx

@@ -1,6 +1,8 @@
+import { css } from '@emotion/css';
 import React, { useRef, useEffect } from 'react';
 
-import { Button, Icon, Modal } from '@grafana/ui';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Button, Icon, Modal, useStyles2 } from '@grafana/ui';
 
 type ConfirmModalProps = {
   isOpen: boolean;
@@ -10,6 +12,7 @@ type ConfirmModalProps = {
 };
 export function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }: ConfirmModalProps) {
   const buttonRef = useRef<HTMLButtonElement>(null);
+  const styles = useStyles2(getStyles);
 
   // Moved from grafana/ui
   useEffect(() => {
@@ -24,7 +27,7 @@ export function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }: ConfirmMod
       title={
         <div className="modal-header-title">
           <Icon name="exclamation-triangle" size="lg" />
-          <span className="p-l-1">Warning</span>
+          <span className={styles.titleText}>Warning</span>
         </div>
       }
       onDismiss={onCancel}
@@ -49,3 +52,9 @@ export function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }: ConfirmMod
     </Modal>
   );
 }
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  titleText: css({
+    paddingLeft: theme.spacing(2),
+  }),
+});