Chore: SCSS cleanup (#89563)

* fix fonts loading from CDN

* migrate font-awesome styles to emotion globals

* fix font-awesome rendering

* remove storybook scss overrides

* fix storybook theme imports

packages/grafana-ui/.storybook/grafana.dark.scss

@@ -1,6 +0,0 @@
-// reset font file paths so storybook loads them based on
-// staticDirs defined in packages/grafana-ui/.storybook/main.ts
-$font-file-path: './public/fonts';
-$fa-font-path: $font-file-path;
-
-@import '../../../public/sass/grafana.dark.scss';

packages/grafana-ui/.storybook/grafana.light.scss

@@ -1,6 +0,0 @@
-// reset font file paths so storybook loads them based on
-// staticDirs defined in packages/grafana-ui/.storybook/main.ts
-$font-file-path: './public/fonts';
-$fa-font-path: $font-file-path;
-
-@import '../../../public/sass/grafana.light.scss';

packages/grafana-ui/.storybook/preview.ts

@@ -17,9 +17,9 @@ import { withTimeZone } from '../src/utils/storybook/withTimeZone';
 import { ThemedDocsContainer } from '../src/utils/storybook/ThemedDocsContainer';
 
 // @ts-ignore
-import lightTheme from './grafana.light.scss';
+import lightTheme from '../../../public/sass/grafana.light.scss';
 // @ts-ignore
-import darkTheme from './grafana.dark.scss';
+import darkTheme from '../../../public/sass/grafana.dark.scss';
 import { GrafanaDark, GrafanaLight } from './storybookTheme';
 
 const handleThemeChange = (theme: any) => {

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

@@ -9,6 +9,7 @@ import { getCardStyles } from './card';
 import { getCodeStyles } from './code';
 import { getElementStyles } from './elements';
 import { getExtraStyles } from './extra';
+import { getFontAwesomeStyles } from './fontAwesome';
 import { getFontStyles } from './fonts';
 import { getFormElementStyles } from './forms';
 import { getJsonFormatterStyles } from './jsonFormatter';
@@ -31,6 +32,7 @@ export function GlobalStyles() {
         getCodeStyles(theme),
         getElementStyles(theme),
         getExtraStyles(theme),
+        getFontAwesomeStyles(theme),
         getFontStyles(theme),
         getFormElementStyles(theme),
         getJsonFormatterStyles(theme),

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

@@ -3,6 +3,9 @@ import { css } from '@emotion/react';
 import { GrafanaTheme2 } from '@grafana/data';
 
 export function getFontStyles(theme: GrafanaTheme2) {
+  const grafanaPublicPath = typeof window !== 'undefined' && window.__grafana_public_path__;
+  const fontRoot = grafanaPublicPath ? `${grafanaPublicPath}fonts/` : 'public/fonts/';
+
   return css([
     {
       /* latin */
@@ -11,7 +14,7 @@ export function getFontStyles(theme: GrafanaTheme2) {
         fontStyle: 'normal',
         fontWeight: 400,
         fontDisplay: 'swap',
-        src: "url('./public/fonts/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2') format('woff2')",
+        src: `url('${fontRoot}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',
       },
@@ -23,7 +26,7 @@ export function getFontStyles(theme: GrafanaTheme2) {
         fontStyle: 'normal',
         fontWeight: 500,
         fontDisplay: 'swap',
-        src: "url('./public/fonts/roboto/L0xTDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vrtSM1J-gEPT5Ese6hmHSh0mQ.woff2') format('woff2')",
+        src: `url('${fontRoot}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',
       },
@@ -42,7 +45,7 @@ export function getFontStyles(theme: GrafanaTheme2) {
         fontStyle: 'normal',
         fontWeight: 400,
         fontDisplay: 'swap',
-        src: "url('./public/fonts/inter/Inter-Regular.woff2') format('woff2')",
+        src: `url('${fontRoot}inter/Inter-Regular.woff2') format('woff2')`,
       },
     },
     {
@@ -51,7 +54,7 @@ export function getFontStyles(theme: GrafanaTheme2) {
         fontStyle: 'normal',
         fontWeight: 500,
         fontDisplay: 'swap',
-        src: "url('./public/fonts/inter/Inter-Medium.woff2') format('woff2')",
+        src: `url('${fontRoot}inter/Inter-Medium.woff2') format('woff2')`,
       },
     },
   ]);

public/sass/_angular.scss

@@ -1842,7 +1842,7 @@ $easing: cubic-bezier(0, 0, 0.265, 1);
 }
 
 /* makes the font 33% larger relative to the icon container */
-.#{$fa-css-prefix}-lg {
+.fa-lg {
   font-size: calc(4em / 3);
   line-height: calc(3em / 4);
   vertical-align: -15%;

public/sass/_grafana.scss

@@ -12,7 +12,6 @@
 @import 'base/type';
 @import 'base/forms';
 @import 'base/grid';
-@import 'base/font_awesome';
 
 // UTILS
 @import 'utils/utils';