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

.betterer.results

@@ -3630,13 +3630,11 @@ exports[`better eslint`] = {
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],
     "public/app/features/datasources/components/DataSourceTestingStatus.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, "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, "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"]
     ],
     "public/app/features/datasources/components/DataSourceTypeCard.tsx:5381": [
       [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
@@ -4541,14 +4539,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"]
     ],
-    "public/app/features/inspector/InspectStatsTable.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/inspector/InspectStatsTraceIdsTable.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/inspector/QueryInspector.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"],
@@ -4559,19 +4549,6 @@ exports[`better eslint`] = {
       [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"]
     ],
-    "public/app/features/inspector/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"],
-      [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"]
-    ],
     "public/app/features/invites/InviteeRow.tsx:5381": [
       [0, 0, 0, "No untranslated strings. Wrap text with <Trans />", "0"]
     ],

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),
+  }),
+});

packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx

@@ -1,10 +1,10 @@
 import { css, cx } from '@emotion/css';
 import React, { useState, useCallback, useId } from 'react';
 
-import { SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 
-import { useTheme2 } from '../../themes';
+import { useStyles2, useTheme2 } from '../../themes';
 import { FormField } from '../FormField/FormField';
 import { InlineFormLabel } from '../FormLabel/FormLabel';
 import { InlineField } from '../Forms/InlineField';
@@ -37,28 +37,38 @@ const DEFAULT_ACCESS_OPTION = {
   value: 'proxy',
 };
 
-const HttpAccessHelp = () => (
+const HttpAccessHelp = () => {
-  <div className="grafana-info-box m-t-2">
+  const styles = useStyles2(getAccessStyles);
-    <p>
+  return (
-      Access mode controls how requests to the data source will be handled.
+    <div className={cx('grafana-info-box', styles.infoBox)}>
-      <strong>
+      <p>
-        &nbsp;<i>Server</i>
+        Access mode controls how requests to the data source will be handled.
-      </strong>{' '}
+        <strong>
-      should be the preferred way if nothing else is stated.
+          &nbsp;<i>Server</i>
-    </p>
+        </strong>{' '}
-    <div className="alert-title">Server access mode (Default):</div>
+        should be the preferred way if nothing else is stated.
-    <p>
+      </p>
-      All requests will be made from the browser to Grafana backend/server which in turn will forward the requests to
+      <div className="alert-title">Server access mode (Default):</div>
-      the data source and by that circumvent possible Cross-Origin Resource Sharing (CORS) requirements. The URL needs
+      <p>
-      to be accessible from the grafana backend/server if you select this access mode.
+        All requests will be made from the browser to Grafana backend/server which in turn will forward the requests to
-    </p>
+        the data source and by that circumvent possible Cross-Origin Resource Sharing (CORS) requirements. The URL needs
-    <div className="alert-title">Browser access mode:</div>
+        to be accessible from the grafana backend/server if you select this access mode.
-    <p>
+      </p>
-      All requests will be made from the browser directly to the data source and may be subject to Cross-Origin Resource
+      <div className="alert-title">Browser access mode:</div>
-      Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this access mode.
+      <p>
-    </p>
+        All requests will be made from the browser directly to the data source and may be subject to Cross-Origin
-  </div>
+        Resource Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this access
-);
+        mode.
+      </p>
+    </div>
+  );
+};
+
+const getAccessStyles = (theme: GrafanaTheme2) => ({
+  infoBox: css({
+    marginTop: theme.spacing(3),
+  }),
+});
 
 const LABEL_WIDTH = 26;
 

packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx

@@ -5,8 +5,10 @@ import { useTheme2 } from '../ThemeContext';
 
 import { getAgularPanelStyles } from './angularPanelStyles';
 import { getCardStyles } from './card';
+import { getCodeStyles } from './code';
 import { getElementStyles } from './elements';
 import { getExtraStyles } from './extra';
+import { getFontStyles } from './fonts';
 import { getFormElementStyles } from './forms';
 import { getLegacySelectStyles } from './legacySelect';
 import { getMarkdownStyles } from './markdownStyles';
@@ -22,8 +24,10 @@ export function GlobalStyles() {
   return (
     <Global
       styles={[
+        getCodeStyles(theme),
         getElementStyles(theme),
         getExtraStyles(theme),
+        getFontStyles(theme),
         getFormElementStyles(theme),
         getPageStyles(theme),
         getCardStyles(theme),

packages/grafana-ui/src/themes/GlobalStyles/code.ts

@@ -0,0 +1,40 @@
+import { css } from '@emotion/react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+export function getCodeStyles(theme: GrafanaTheme2) {
+  return css({
+    'code, pre': {
+      ...theme.typography.code,
+      fontSize: theme.typography.bodySmall.fontSize,
+      backgroundColor: theme.colors.background.primary,
+      color: theme.colors.text.primary,
+      border: `1px solid ${theme.colors.border.medium}`,
+      borderRadius: '4px',
+    },
+
+    code: {
+      whiteSpace: 'nowrap',
+      padding: '2px 5px',
+      margin: '0 2px',
+    },
+
+    pre: {
+      display: 'block',
+      margin: `0 0 ${theme.typography.body.lineHeight}`,
+      lineHeight: theme.typography.body.lineHeight,
+      wordBreak: 'break-all',
+      wordWrap: 'break-word',
+      whiteSpace: 'pre-wrap',
+      padding: '10px',
+
+      code: {
+        padding: 0,
+        color: 'inherit',
+        whiteSpace: 'pre-wrap',
+        backgroundColor: 'transparent',
+        border: 0,
+      },
+    },
+  });
+}

packages/grafana-ui/src/themes/GlobalStyles/fonts.ts

@@ -0,0 +1,58 @@
+import { css } from '@emotion/react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+export function getFontStyles(theme: GrafanaTheme2) {
+  return css([
+    {
+      /* latin */
+      '@font-face': {
+        fontFamily: 'Roboto Mono',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        fontDisplay: 'swap',
+        src: "url('./public/fonts/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2') format('woff2')",
+        unicodeRange:
+          'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
+      },
+    },
+    {
+      /* latin */
+      '@font-face': {
+        fontFamily: 'Roboto Mono',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        fontDisplay: 'swap',
+        src: "url('./public/fonts/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2') format('woff2')",
+        unicodeRange:
+          'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
+      },
+    },
+    {
+      /*
+    To add new variations/version of Inter, download from https://rsms.me/inter/ and add the
+    web font files to the public/fonts/inter folder. Do not download the fonts from Google Fonts
+    or somewhere else because they don't support the features we require (like tabular numerals).
+
+    If adding additional weights, consider switching to the InterVariable variable font as combined
+    it may take less space than multiple static weights.
+    */
+      '@font-face': {
+        fontFamily: 'Inter',
+        fontStyle: 'normal',
+        fontWeight: 400,
+        fontDisplay: 'swap',
+        src: "url('./public/fonts/inter/Inter-Regular.woff2') format('woff2')",
+      },
+    },
+    {
+      '@font-face': {
+        fontFamily: 'Inter',
+        fontStyle: 'normal',
+        fontWeight: 500,
+        fontDisplay: 'swap',
+        src: "url('./public/fonts/inter/Inter-Medium.woff2') format('woff2')",
+      },
+    },
+  ]);
+}

public/app/features/datasources/components/DataSourceTestingStatus.tsx

@@ -4,7 +4,7 @@ import React, { HTMLAttributes } from 'react';
 import { DataSourceSettings as DataSourceSettingsType, GrafanaTheme2 } from '@grafana/data';
 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
 import { TestingStatus, config } from '@grafana/runtime';
-import { AlertVariant, Alert, useTheme2, Link } from '@grafana/ui';
+import { AlertVariant, Alert, useTheme2, Link, useStyles2 } from '@grafana/ui';
 
 import { contextSrv } from '../../../core/core';
 import { trackCreateDashboardClicked } from '../tracking';
@@ -25,16 +25,16 @@ interface AlertMessageProps extends HTMLAttributes<HTMLDivElement> {
 
 const getStyles = (theme: GrafanaTheme2, hasTitle: boolean) => {
   return {
-    content: css`
+    content: css({
-      color: ${theme.colors.text.secondary};
+      color: theme.colors.text.secondary,
-      padding-top: ${hasTitle ? theme.spacing(1) : 0};
+      paddingTop: hasTitle ? theme.spacing(1) : 0,
-      max-height: 50vh;
+      maxHeight: '50vh',
-      overflow-y: auto;
+      overflowY: 'auto',
-    `,
+    }),
-    disabled: css`
+    disabled: css({
-      pointer-events: none;
+      pointerEvents: 'none',
-      color: ${theme.colors.text.secondary};
+      color: theme.colors.text.secondary,
-    `,
+    }),
   };
 };
 
@@ -95,10 +95,11 @@ export function DataSourceTestingStatus({ testingStatus, exploreUrl, dataSource
       path: location.pathname,
     });
   };
+  const styles = useStyles2(getTestingStatusStyles);
 
   if (message) {
     return (
-      <div className="gf-form-group p-t-2">
+      <div className={cx('gf-form-group', styles.container)}>
         <Alert severity={severity} title={message} data-testid={e2eSelectors.pages.DataSource.alert}>
           {testingStatus?.details && (
             <>
@@ -123,3 +124,9 @@ export function DataSourceTestingStatus({ testingStatus, exploreUrl, dataSource
 
   return null;
 }
+
+const getTestingStatusStyles = (theme: GrafanaTheme2) => ({
+  container: css({
+    paddingTop: theme.spacing(3),
+  }),
+});

public/app/features/inspector/InspectStatsTable.tsx

@@ -27,7 +27,7 @@ export const InspectStatsTable = ({ timeZone, name, stats }: InspectStatsTablePr
 
   return (
     <div className={styles.wrapper}>
-      <div className="section-heading">{name}</div>
+      <div className={styles.heading}>{name}</div>
       <table className="filter-table width-30">
         <tbody>
           {stats.map((stat, index) => {
@@ -57,10 +57,14 @@ function formatStat(stat: QueryResultMetaStat, timeZone: TimeZone, theme: Grafan
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  wrapper: css`
+  heading: css({
-    padding-bottom: ${theme.spacing(2)};
+    fontSize: theme.typography.body.fontSize,
-  `,
+    marginBottom: theme.spacing(1),
-  cell: css`
+  }),
-    text-align: right;
+  wrapper: css({
-  `,
+    paddingBottom: theme.spacing(2),
+  }),
+  cell: css({
+    textAlign: 'right',
+  }),
 });

public/app/features/inspector/InspectStatsTraceIdsTable.tsx

@@ -18,7 +18,7 @@ export const InspectStatsTraceIdsTable = ({ name, traceIds }: Props) => {
 
   return (
     <div className={styles.wrapper}>
-      <div className="section-heading">{name}</div>
+      <div className={styles.heading}>{name}</div>
       <table className="filter-table width-30">
         <tbody>
           {traceIds.map((traceId, index) => {
@@ -35,10 +35,14 @@ export const InspectStatsTraceIdsTable = ({ name, traceIds }: Props) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  wrapper: css`
+  heading: css({
-    padding-bottom: ${theme.spacing(2)};
+    fontSize: theme.typography.body.fontSize,
-  `,
+    marginBottom: theme.spacing(1),
-  cell: css`
+  }),
-    text-align: right;
+  wrapper: css({
-  `,
+    paddingBottom: theme.spacing(2),
+  }),
+  cell: css({
+    textAlign: 'right',
+  }),
 });

public/app/features/inspector/QueryInspector.tsx

@@ -228,7 +228,7 @@ export class QueryInspector extends PureComponent<Props, State> {
     return (
       <div className={styles.wrap}>
         <div aria-label={selectors.components.PanelInspector.Query.content}>
-          <h3 className="section-heading">Query inspector</h3>
+          <h3 className={styles.heading}>Query inspector</h3>
           <p className="small muted">
             <Trans i18nKey="inspector.query.description">
               Query inspector allows you to view raw request and response. To collect this data Grafana needs to issue a

public/app/features/inspector/styles.ts

@@ -11,62 +11,66 @@ export const getPanelInspectorStyles = stylesFactory(() => {
 
 export const getPanelInspectorStyles2 = (theme: GrafanaTheme2) => {
   return {
-    wrap: css`
+    heading: css({
-      display: flex;
+      fontSize: theme.typography.body.fontSize,
-      flex-direction: column;
+      marginBottom: theme.spacing(1),
-      height: 100%;
+    }),
-      width: 100%;
+    wrap: css({
-      flex: 1 1 0;
+      display: 'flex',
-      min-height: 0;
+      flexDirection: 'column',
-    `,
+      height: '100%',
-    toolbar: css`
+      width: '100%',
-      display: flex;
+      flex: '1 1 0',
-      width: 100%;
+      minHeight: 0,
-      flex-grow: 0;
+    }),
-      align-items: center;
+    toolbar: css({
-      justify-content: flex-end;
+      display: 'flex',
-      margin-bottom: ${theme.v1.spacing.sm};
+      width: '100%',
-    `,
+      flexGrow: 0,
-    toolbarItem: css`
+      alignItems: 'center',
-      margin-left: ${theme.v1.spacing.md};
+      justifyContent: 'flex-end',
-    `,
+      marginBottom: theme.v1.spacing.sm,
-    content: css`
+    }),
-      flex-grow: 1;
+    toolbarItem: css({
-      height: 100%;
+      marginLeft: theme.v1.spacing.md,
-    `,
+    }),
-    editor: css`
+    content: css({
-      font-family: monospace;
+      flexGrow: 1,
-      height: 100%;
+      height: '100%',
-      flex-grow: 1;
+    }),
-    `,
+    editor: css({
-    viewer: css`
+      fontFamily: 'monospace',
-      overflow: scroll;
+      height: '100%',
-    `,
+      flexGrow: 1,
-    dataFrameSelect: css`
+    }),
-      flex-grow: 2;
+    viewer: css({
-    `,
+      overflow: 'scroll',
-    leftActions: css`
+    }),
-      display: flex;
+    dataFrameSelect: css({
-      flex-grow: 1;
+      flexGrow: 2,
+    }),
+    leftActions: css({
+      display: 'flex',
+      flexGrow: 1,
 
-      max-width: 85%;
+      maxWidth: '85%',
-      @media (max-width: 1345px) {
+      '@media (max-width: 1345px)': {
-        max-width: 75%;
+        maxWidth: '75%',
-      }
+      },
-    `,
+    }),
-    options: css`
+    options: css({
-      padding-top: ${theme.v1.spacing.sm};
+      paddingTop: theme.v1.spacing.sm,
-    `,
+    }),
-    dataDisplayOptions: css`
+    dataDisplayOptions: css({
-      flex-grow: 1;
+      flexGrow: 1,
-      min-width: 300px;
+      minWidth: '300px',
-      margin-right: ${theme.v1.spacing.sm};
+      marginRight: theme.v1.spacing.sm,
-    `,
+    }),
-    selects: css`
+    selects: css({
-      display: flex;
+      display: 'flex',
-      > * {
+      '> *': {
-        margin-right: ${theme.v1.spacing.sm};
+        marginRight: theme.v1.spacing.sm,
-      }
+      },
-    `,
+    }),
   };
 };

public/app/features/invites/SignupInvited.tsx

@@ -1,8 +1,10 @@
+import { css, cx } from '@emotion/css';
 import React, { useState } from 'react';
 import { useAsync } from 'react-use';
 
+import { GrafanaTheme2 } from '@grafana/data';
 import { getBackendSrv } from '@grafana/runtime';
-import { Button, Field, Input } from '@grafana/ui';
+import { Button, Field, Input, useStyles2 } from '@grafana/ui';
 import { Form } from 'app/core/components/Form/Form';
 import { Page } from 'app/core/components/Page/Page';
 import { getConfig } from 'app/core/config';
@@ -37,6 +39,7 @@ export const SignupInvitedPage = ({ match }: Props) => {
   const [initFormModel, setInitFormModel] = useState<FormModel>();
   const [greeting, setGreeting] = useState<string>();
   const [invitedBy, setInvitedBy] = useState<string>();
+  const styles = useStyles2(getStyles);
 
   useAsync(async () => {
     const invite = await getBackendSrv().get(`/api/user/invite/${code}`);
@@ -65,7 +68,7 @@ export const SignupInvitedPage = ({ match }: Props) => {
       <Page.Contents>
         <h3 className="page-sub-heading">Hello {greeting || 'there'}.</h3>
 
-        <div className="modal-tagline p-b-2">
+        <div className={cx('modal-tagline', styles.tagline)}>
           <em>{invitedBy || 'Someone'}</em> has invited you to join Grafana and the organization{' '}
           <span className="highlight-word">{contextSrv.user.orgName}</span>
           <br />
@@ -109,4 +112,10 @@ export const SignupInvitedPage = ({ match }: Props) => {
   );
 };
 
+const getStyles = (theme: GrafanaTheme2) => ({
+  tagline: css({
+    paddingBottom: theme.spacing(3),
+  }),
+});
+
 export default SignupInvitedPage;

public/app/plugins/datasource/graphite/components/AnnotationsEditor.tsx

@@ -1,7 +1,8 @@
+import { css } from '@emotion/css';
 import React, { useState } from 'react';
 
-import { QueryEditorProps } from '@grafana/data';
+import { GrafanaTheme2, QueryEditorProps } from '@grafana/data';
-import { Box, InlineField, Input, TagsInput } from '@grafana/ui';
+import { Box, InlineField, Input, TagsInput, useStyles2 } from '@grafana/ui';
 
 import { GraphiteDatasource } from '../datasource';
 import { GraphiteQuery, GraphiteOptions } from '../types';
@@ -32,6 +33,7 @@ export const AnnotationEditor = (props: QueryEditorProps<GraphiteDatasource, Gra
     setTags(tagsInput);
     updateValue('tags', tagsInput);
   };
+  const styles = useStyles2(getStyles);
 
   return (
     <Box marginBottom={5}>
@@ -44,7 +46,7 @@ export const AnnotationEditor = (props: QueryEditorProps<GraphiteDatasource, Gra
         />
       </InlineField>
 
-      <h5 className="section-heading">Or</h5>
+      <h5 className={styles.heading}>Or</h5>
 
       <InlineField label="Graphite events tags" labelWidth={24}>
         <TagsInput id="tags-input" width={50} tags={tags} onChange={onTagsChange} placeholder="Example: event_tag" />
@@ -52,3 +54,10 @@ export const AnnotationEditor = (props: QueryEditorProps<GraphiteDatasource, Gra
     </Box>
   );
 };
+
+const getStyles = (theme: GrafanaTheme2) => ({
+  heading: css({
+    fontSize: theme.typography.body.fontSize,
+    marginBottom: theme.spacing(1),
+  }),
+});

public/sass/_angular.scss

@@ -1,6 +1,8 @@
 // these styles are only used by angular components/pages
 // once angular is disabled, this file can be deleted
 
+@use 'sass:map';
+
 .edit-tab-content {
   flex-grow: 1;
   min-width: 0;
@@ -1792,3 +1794,41 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
     }
   }
 }
+
+.section-heading {
+  font-size: $font-size-md;
+  margin-bottom: $space-sm;
+}
+
+@each $prop, $abbrev in (margin: m, padding: p) {
+  @each $size, $lengths in $spacers {
+    $length-x: map.get($lengths, x);
+    $length-y: map.get($lengths, y);
+
+    .#{$abbrev}-a-#{$size} {
+      #{$prop}: $length-y $length-x !important;
+    } // a = All sides
+    .#{$abbrev}-t-#{$size} {
+      #{$prop}-top: $length-y !important;
+    }
+    .#{$abbrev}-r-#{$size} {
+      #{$prop}-right: $length-x !important;
+    }
+    .#{$abbrev}-b-#{$size} {
+      #{$prop}-bottom: $length-y !important;
+    }
+    .#{$abbrev}-l-#{$size} {
+      #{$prop}-left: $length-x !important;
+    }
+
+    // Axes
+    .#{$abbrev}-x-#{$size} {
+      #{$prop}-right: $length-x !important;
+      #{$prop}-left: $length-x !important;
+    }
+    .#{$abbrev}-y-#{$size} {
+      #{$prop}-top: $length-y !important;
+      #{$prop}-bottom: $length-y !important;
+    }
+  }
+}

public/sass/_grafana.scss

@@ -13,12 +13,10 @@
 @import 'base/type';
 @import 'base/forms';
 @import 'base/grid';
-@import 'base/fonts';
+@import 'base/font_awesome';
-@import 'base/code';
 
 // UTILS
 @import 'utils/utils';
-@import 'utils/spacings';
 @import 'utils/widths';
 
 // COMPONENTS
@@ -33,7 +31,6 @@
 @import 'components/dropdown';
 @import 'components/infobox';
 @import 'components/query_editor';
-@import 'components/tabbed_view';
 @import 'components/query_part';
 @import 'components/json_explorer';
 @import 'components/dashboard_grid';

public/sass/base/_code.scss

@@ -1,62 +0,0 @@
-//
-// Code (inline and blocK)
-// --------------------------------------------------
-
-// Inline and block code styles
-code,
-pre {
-  @include font-family-monospace();
-  font-size: $font-size-base - 2;
-  background-color: $code-tag-bg;
-  color: $text-color;
-  border: 1px solid $code-tag-border;
-  border-radius: 4px;
-}
-
-// Inline code
-code {
-  color: $text-color;
-  white-space: nowrap;
-  padding: 2px 5px;
-  margin: 0 2px;
-}
-
-code.code--small {
-  font-size: $font-size-xs;
-  padding: $space-xxs;
-  margin: 0 2px;
-}
-
-// Blocks of code
-pre {
-  display: block;
-  margin: 0 0 $line-height-base;
-  line-height: $line-height-base;
-  word-break: break-all;
-  word-wrap: break-word;
-  white-space: pre;
-  white-space: pre-wrap;
-  background-color: $code-tag-bg;
-  padding: 10px;
-
-  &.pre--no-style {
-    background: transparent;
-    border: none;
-    padding: 0px;
-  }
-
-  // Make prettyprint styles more spaced out for readability
-  &.prettyprint {
-    margin-bottom: $line-height-base;
-  }
-
-  // Account for some code outputs that place code tags in pre tags
-  code {
-    padding: 0;
-    color: inherit;
-    white-space: pre;
-    white-space: pre-wrap;
-    background-color: transparent;
-    border: 0;
-  }
-}

public/sass/base/_fonts.scss

@@ -1,49 +0,0 @@
-@import 'font_awesome';
-
-/* latin */
-@font-face {
-  font-family: 'Roboto Mono';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url(#{$font-file-path}/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2)
-    format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
-    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/* latin */
-@font-face {
-  font-family: 'Roboto Mono';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url(#{$font-file-path}/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2)
-    format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC,
-    U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-/*
-To add new variations/version of Inter, download from https://rsms.me/inter/ and add the
-web font files to the public/fonts/inter folder. Do not download the fonts from Google Fonts
-or somewhere else because they don't support the features we require (like tabular numerals).
-
-If adding additional weights, consider switching to the InterVariable variable font as combined
-it may take less space than multiple static weights.
-*/
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url('#{$font-file-path}/inter/Inter-Regular.woff2') format('woff2');
-}
-
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url('#{$font-file-path}/inter/Inter-Medium.woff2') format('woff2');
-}

public/sass/components/_tabbed_view.scss

@@ -1,4 +0,0 @@
-.section-heading {
-  font-size: $font-size-md;
-  margin-bottom: $space-sm;
-}

public/sass/utils/_spacings.scss

@@ -1,50 +0,0 @@
-@use 'sass:map';
-// Margin and Padding
-
-.m-x-auto {
-  margin-right: auto !important;
-  margin-left: auto !important;
-}
-
-@each $prop, $abbrev in (margin: m, padding: p) {
-  @each $size, $lengths in $spacers {
-    $length-x: map.get($lengths, x);
-    $length-y: map.get($lengths, y);
-
-    .#{$abbrev}-a-#{$size} {
-      #{$prop}: $length-y $length-x !important;
-    } // a = All sides
-    .#{$abbrev}-t-#{$size} {
-      #{$prop}-top: $length-y !important;
-    }
-    .#{$abbrev}-r-#{$size} {
-      #{$prop}-right: $length-x !important;
-    }
-    .#{$abbrev}-b-#{$size} {
-      #{$prop}-bottom: $length-y !important;
-    }
-    .#{$abbrev}-l-#{$size} {
-      #{$prop}-left: $length-x !important;
-    }
-
-    // Axes
-    .#{$abbrev}-x-#{$size} {
-      #{$prop}-right: $length-x !important;
-      #{$prop}-left: $length-x !important;
-    }
-    .#{$abbrev}-y-#{$size} {
-      #{$prop}-top: $length-y !important;
-      #{$prop}-bottom: $length-y !important;
-    }
-  }
-}
-
-// Positioning
-
-.pos-f-t {
-  position: fixed;
-  top: 0;
-  right: 0;
-  left: 0;
-  z-index: $zindex-navbar-fixed;
-}