Theme: Updated font to Inter, updates typography, a start of moving legacy & global styles from sass to emotion (#32988)

* Testing inter font

* new fonts and global styles

* Added Typography component and storybook

* Moving more global legacy types to emotion global styles

* Updated snapshot

* mapp bold to 500

* Updates

* Fixes and moved html & body styles to emotion

* moved helper function down

* Updated snapshot

* More tweaks

* Updates

* added internal tag

* Updated snapshot

packages/grafana-data/src/themes/colors.ts

@@ -27,7 +27,7 @@ export const colors = {
   // Dashboard bg / layer 0 (light theme)
   gray90: '#F4F5F5',
   // Card bg / layer 1
-  gray100: '#F7F7F8',
+  gray100: '#F4F5F5',
   // divider line
   gray80: '#D0D1D3',
   // from figma

packages/grafana-data/src/themes/createPalette.ts

@@ -69,8 +69,8 @@ export interface ThemeHoverStrengh {}
 export interface ThemePalette extends ThemePaletteBase<ThemePaletteColor> {
   /** Returns a text color for the background */
   getContrastText(background: string): string;
-  /* Return a hover color for any color */
-  getHoverColor(color: string, hoverFactor?: number): string;
+  /* Brighten or darken a color by specified factor (0-1) */
+  emphasize(color: string, amount?: number): string;
 }
 
 /** @internal */
@@ -81,7 +81,7 @@ class DarkPalette implements ThemePaletteBase<Partial<ThemePaletteColor>> {
 
   text = {
     primary: 'rgba(255, 255, 255, 0.77)',
-    secondary: 'rgba(255, 255, 255, 0.55)',
+    secondary: 'rgba(255, 255, 255, 0.50)',
     disabled: 'rgba(255, 255, 255, 0.35)',
     link: colors.blueDarkText,
     maxContrast: colors.white,
@@ -247,10 +247,6 @@ export function createPalette(palette: ThemePaletteInput): ThemePalette {
     return contrastText;
   }
 
-  function getHoverColor(color: string, factorOverride?: number) {
-    return emphasize(color, factorOverride ?? hoverFactor);
-  }
-
   const getRichColor = ({ color, name }: GetRichColorProps): ThemePaletteColor => {
     color = { ...color, name };
     if (!color.main) {
@@ -284,7 +280,9 @@ export function createPalette(palette: ThemePaletteInput): ThemePalette {
       success: getRichColor({ color: success, name: 'success' }),
       warning: getRichColor({ color: warning, name: 'warning' }),
       getContrastText,
-      getHoverColor,
+      emphasize: (color: string, factor?: number) => {
+        return emphasize(color, factor ?? hoverFactor);
+      },
     },
     other
   );

packages/grafana-data/src/themes/createTypography.ts

@@ -25,8 +25,12 @@ export interface ThemeTypography {
   h6: ThemeTypographyVariant;
 
   body: ThemeTypographyVariant;
+  bodySmall: ThemeTypographyVariant;
 
-  /** from legacy old theme */
+  /**
+   * @deprecated
+   * from legacy old theme
+   * */
   size: {
     base: string;
     xs: string;
@@ -59,8 +63,8 @@ export interface ThemeTypographyInput {
   htmlFontSize?: number;
 }
 
-const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif';
-const defaultFontFamilyMonospace = "Menlo, Monaco, Consolas, 'Courier New', monospace";
+const defaultFontFamily = '"Inter", "Helvetica", "Arial", sans-serif';
+const defaultFontFamilyMonospace = "'Roboto Mono', monospace";
 
 export function createTypography(palette: ThemePalette, typographyInput: ThemeTypographyInput = {}): ThemeTypography {
   const {
@@ -71,7 +75,7 @@ export function createTypography(palette: ThemePalette, typographyInput: ThemeTy
     fontWeightLight = 300,
     fontWeightRegular = 400,
     fontWeightMedium = 500,
-    fontWeightBold = 700,
+    fontWeightBold = 500,
     // Tell Grafana-UI what's the font-size on the html element.
     // 16px is the default font-size used by browsers.
     htmlFontSize = 14,
@@ -99,22 +103,20 @@ export function createTypography(palette: ThemePalette, typographyInput: ThemeTy
     fontFamily,
     fontWeight,
     fontSize: pxToRem(size),
-    // Unitless following https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/
     lineHeight,
-    // The letter spacing was designed for the Roboto font-family. Using the same letter-spacing
-    // across font-families can cause issues with the kerning.
-    ...(fontFamily === defaultFontFamily ? { letterSpacing: `${round(letterSpacing / size)}em` } : {}),
+    letterSpacing: `${letterSpacing}em`,
     ...casing,
   });
 
   const variants = {
-    h1: buildVariant(fontWeightLight, 28, 1.167, -1.5),
-    h2: buildVariant(fontWeightLight, 24, 1.2, -0.5),
-    h3: buildVariant(fontWeightRegular, 21, 1.167, 0),
-    h4: buildVariant(fontWeightRegular, 18, 1.235, 0.25),
-    h5: buildVariant(fontWeightRegular, 16, 1.334, 0),
-    h6: buildVariant(fontWeightMedium, 14, 1.6, 0.15),
-    body: buildVariant(fontWeightRegular, 14, 1.5, 0.15),
+    h1: buildVariant(fontWeightMedium, 28, 1.2, -0.01),
+    h2: buildVariant(fontWeightMedium, 24, 1.2, -0.01),
+    h3: buildVariant(fontWeightMedium, 21, 1.3, -0.01),
+    h4: buildVariant(fontWeightRegular, 18, 1.4, -0.005),
+    h5: buildVariant(fontWeightRegular, 16, 1.334, -0.005),
+    h6: buildVariant(fontWeightRegular, 14, 1.6, -0.005),
+    body: buildVariant(fontWeightRegular, 14, 1.5, -0.005),
+    bodySmall: buildVariant(fontWeightRegular, 12, 1.5, -0.005),
   };
 
   const size = {
@@ -139,7 +141,3 @@ export function createTypography(palette: ThemePalette, typographyInput: ThemeTy
     ...variants,
   };
 }
-
-function round(value: number) {
-  return Math.round(value * 1e5) / 1e5;
-}

packages/grafana-data/src/themes/index.ts

@@ -4,7 +4,7 @@ export { ThemePalette } from './createPalette';
 export { ThemeBreakpoints } from './breakpoints';
 export { ThemeShadows } from './createShadows';
 export { ThemeShape } from './createShape';
-export { ThemeTypography } from './createTypography';
+export { ThemeTypography, ThemeTypographyVariant } from './createTypography';
 export { ThemeTransitions } from './createTransitions';
 export { ThemeSpacing } from './createSpacing';
 export { ThemeZIndices } from './zIndex';

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

@@ -3,6 +3,7 @@ import { create } from '@storybook/theming/create';
 import lightTheme from '../src/themes/light';
 import darkTheme from '../src/themes/dark';
 import { GrafanaTheme } from '@grafana/data';
+import '../src/components/Icon/iconBundle';
 
 const createTheme = (theme: GrafanaTheme) => {
   return create({
@@ -27,7 +28,7 @@ const createTheme = (theme: GrafanaTheme) => {
 
     // Toolbar default and active colors
     barTextColor: theme.v2.palette.primary.text,
-    barSelectedColor: theme.v2.palette.getHoverColor(theme.v2.palette.primary.text),
+    barSelectedColor: theme.v2.palette.emphasize(theme.v2.palette.primary.text),
     barBg: theme.v2.palette.layer1,
 
     // Form colors

packages/grafana-ui/src/components/BarGauge/BarGauge.tsx

@@ -499,7 +499,6 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
 
     // shift empty region back to fill gaps due to border radius
     emptyBar.left = '-3px';
-    emptyBar.width = `${maxBarWidth - barWidth}px`;
 
     if (isBasic) {
       // Basic styles

packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap

@@ -62,7 +62,6 @@ exports[`BarGauge Render with basic options should render 1`] = `
           "flexGrow": 1,
           "left": "-3px",
           "position": "relative",
-          "width": "180px",
         }
       }
     />

packages/grafana-ui/src/components/Card/Card.tsx

@@ -151,7 +151,7 @@ const getContainerStyles = stylesFactory((theme: GrafanaTheme, disabled = false,
 
     ...(!disableHover && {
       '&:hover': {
-        background: theme.v2.palette.getHoverColor(theme.v2.palette.layer2, 0.03),
+        background: theme.v2.palette.emphasize(theme.v2.palette.layer2, 0.03),
         cursor: 'pointer',
         zIndex: 1,
       },

packages/grafana-ui/src/components/Icon/Icon.story.tsx

@@ -1,6 +1,5 @@
 import React, { ChangeEvent, useState } from 'react';
 import { css } from '@emotion/css';
-
 import { Input, Field, Icon } from '@grafana/ui';
 import { getAvailableIcons, IconName } from '../../types';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
@@ -8,7 +7,7 @@ import { useTheme } from '../../themes';
 import mdx from './Icon.mdx';
 
 export default {
-  title: 'Docs Overview/Icon',
+  title: 'General/Icon',
   component: Icon,
   decorators: [withCenteredStory],
   parameters: {

packages/grafana-ui/src/components/IconButton/IconButton.story.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import { css } from '@emotion/css';
 import { IconButton } from '@grafana/ui';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { useTheme } from '../../themes/ThemeContext';
-import { GrafanaTheme } from '@grafana/data';
+import { useTheme } from '../../themes';
 import { IconSize, IconName } from '../../types';
 import mdx from './IconButton.mdx';
 
@@ -19,42 +18,29 @@ export default {
 };
 
 export const Simple = () => {
-  const theme = useTheme();
-
   return (
     <div>
-      {renderScenario(
-        'dashboard',
-        theme,
-        ['sm', 'md', 'lg', 'xl', 'xxl'],
-        ['search', 'trash-alt', 'arrow-left', 'times']
-      )}
-      {renderScenario('panel', theme, ['sm', 'md', 'lg', 'xl', 'xxl'], ['search', 'trash-alt', 'arrow-left', 'times'])}
-      {renderScenario('header', theme, ['sm', 'md', 'lg', 'xl', 'xxl'], ['search', 'trash-alt', 'arrow-left', 'times'])}
+      <RenderScenario layer="layer0" />
+      <RenderScenario layer="layer1" />
+      <RenderScenario layer="layer2" />
     </div>
   );
 };
 
-function renderScenario(surface: string, theme: GrafanaTheme, sizes: IconSize[], icons: IconName[]) {
-  let bg = 'red';
+interface ScenarioProps {
+  layer: 'layer0' | 'layer1' | 'layer2';
+}
 
-  switch (surface) {
-    case 'dashboard':
-      bg = theme.colors.dashboardBg;
-      break;
-    case 'panel':
-      bg = theme.colors.bodyBg;
-      break;
-    case 'header': {
-      bg = theme.colors.pageHeaderBg;
-    }
-  }
+const RenderScenario = ({ layer }: ScenarioProps) => {
+  const theme = useTheme();
+  const sizes: IconSize[] = ['sm', 'md', 'lg', 'xl', 'xxl'];
+  const icons: IconName[] = ['search', 'trash-alt', 'arrow-left', 'times'];
 
   return (
     <div
       className={css`
         padding: 30px;
-        background: ${bg};
+        background: ${theme.v2.palette[layer]};
         button {
           margin-right: 8px;
           margin-left: 8px;
@@ -62,14 +48,14 @@ function renderScenario(surface: string, theme: GrafanaTheme, sizes: IconSize[],
         }
       `}
     >
-      <div>Surface: {surface}</div>
+      <div>{layer}</div>
       {icons.map((icon) => {
         return sizes.map((size) => (
           <span key={icon + size}>
-            <IconButton name={icon} size={size} surface={surface as any} />
+            <IconButton name={icon} size={size} />
           </span>
         ));
       })}
     </div>
   );
-}
+};

packages/grafana-ui/src/components/Tabs/Tab.tsx

@@ -31,10 +31,16 @@ export const Tab = React.forwardRef<HTMLLIElement, TabProps>(
       </>
     );
 
+    const itemClass = cx(
+      tabsStyles.tabItem,
+      active ? tabsStyles.activeStyle : tabsStyles.notActive,
+      !href && tabsStyles.padding
+    );
+
     return (
       <li
         {...otherProps}
-        className={cx(!href && tabsStyles.padding, tabsStyles.tabItem, active && tabsStyles.activeStyle)}
+        className={itemClass}
         onClick={onChangeTab}
         aria-label={otherProps['aria-label'] || selectors.components.Tab.title(label)}
         ref={ref}
@@ -57,7 +63,6 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
     tabItem: css`
       list-style: none;
-      margin-right: ${theme.v2.spacing(2)};
       position: relative;
       display: block;
       color: ${theme.v2.palette.text.secondary};
@@ -72,15 +77,28 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => {
         height: 100%;
         color: ${theme.v2.palette.text.secondary};
       }
-
+    `,
+    notActive: css`
       a:hover,
       &:hover,
       &:focus {
         color: ${theme.v2.palette.text.primary};
+
+        &::before {
+          display: block;
+          content: ' ';
+          position: absolute;
+          left: 0;
+          right: 0;
+          height: 4px;
+          border-radius: 2px;
+          bottom: 0px;
+          background: ${theme.v2.palette.action.hover};
+        }
       }
     `,
     padding: css`
-      padding: 11px 15px 9px;
+      padding: ${theme.v2.spacing(1.5, 2, 1)};
     `,
     activeStyle: css`
       label: activeTabStyle;
@@ -100,8 +118,8 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme) => {
         right: 0;
         height: 4px;
         border-radius: 2px;
-        bottom: 2px;
-        background-image: ${theme.v2.palette.gradients.brandHorizontal};
+        bottom: 0px;
+        background-image: ${theme.v2.palette.gradients.brandHorizontal} !important;
       }
     `,
   };

packages/grafana-ui/src/components/Typography/Typography.story.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { StoryExample } from '../../utils/storybook/StoryExample';
+import { VerticalGroup } from '../Layout/Layout';
+import { Typography } from './Typography';
+
+export default {
+  title: 'General/Typography',
+  component: Typography,
+  parameters: {
+    docs: {},
+  },
+};
+
+export const Typopgraphy = () => {
+  return (
+    <VerticalGroup>
+      <StoryExample name="Native header elements (global styles)">
+        <h1>h1. Heading</h1>
+        <h2>h2. Heading</h2>
+        <h3>h3. Heading</h3>
+        <h4>h4. Heading</h4>
+        <h5>h5. Heading</h5>
+        <h6>h6. Heading</h6>
+      </StoryExample>
+    </VerticalGroup>
+  );
+};

packages/grafana-ui/src/components/Typography/Typography.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+/** @internal */
+export interface Props {
+  children: React.ReactNode;
+}
+
+/**
+ * @internal
+ * TODO implementation coming
+ **/
+export const Typography = ({ children }: Props) => {
+  return <h1>{children}</h1>;
+};
+
+Typography.displayName = 'Typography';

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Global } from '@emotion/react';
+import { useTheme } from '..';
+import { getElementStyles } from './elements';
+
+/** @internal */
+export function GlobalStyles() {
+  const theme = useTheme();
+  const types = getElementStyles(theme.v2);
+
+  return <Global styles={[types]} />;
+}

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

@@ -0,0 +1,153 @@
+import { css } from '@emotion/react';
+import { GrafanaThemeV2, ThemeTypographyVariant } from '@grafana/data';
+
+export function getElementStyles(theme: GrafanaThemeV2) {
+  return css`
+    html {
+      -ms-overflow-style: scrollbar;
+      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+      height: 100%;
+      font-size: ${theme.typography.htmlFontSize}px;
+      font-family: ${theme.typography.fontFamily};
+      line-height: ${theme.typography.body.lineHeight};
+      font-kerning: normal;
+    }
+
+    body {
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      color: ${theme.palette.text.primary};
+      background-color: ${theme.palette.layer0};
+      ${getVariantStyles(theme.typography.body)}
+    }
+
+    h1,
+    .h1 {
+      ${getVariantStyles(theme.typography.h1)}
+    }
+    h2,
+    .h2 {
+      ${getVariantStyles(theme.typography.h2)}
+    }
+    h3,
+    .h3 {
+      ${getVariantStyles(theme.typography.h3)}
+    }
+    h4,
+    .h4 {
+      ${getVariantStyles(theme.typography.h4)}
+    }
+    h5,
+    .h5 {
+      ${getVariantStyles(theme.typography.h5)}
+    }
+    h6,
+    .h6 {
+      ${getVariantStyles(theme.typography.h6)}
+    }
+
+    p {
+      margin: 0 0 ${theme.spacing(2)};
+    }
+
+    // Ex: 14px base font * 85% = about 12px
+    small {
+      font-size: ${theme.typography.bodySmall.fontSize};
+    }
+
+    b,
+    strong {
+      font-weight: ${theme.typography.fontWeightMedium};
+    }
+
+    em {
+      font-style: italic;
+      color: ${theme.palette.text.primary};
+    }
+
+    cite {
+      font-style: normal;
+    }
+
+    // Utility classes
+    .muted {
+      color: ${theme.palette.text.secondary};
+    }
+
+    a.muted:hover,
+    a.muted:focus {
+      color: ${theme.palette.text.primary};
+    }
+
+    .text-warning {
+      color: ${theme.palette.warning.text};
+
+      &:hover,
+      &:focus {
+        color: ${theme.palette.emphasize(theme.palette.warning.text, 0.15)};
+      }
+    }
+
+    .text-error {
+      color: ${theme.palette.error.text};
+
+      &:hover,
+      &:focus {
+        color: ${theme.palette.emphasize(theme.palette.error.text, 0.15)};
+      }
+    }
+
+    .text-success {
+      color: $success-text-color;
+
+      &:hover,
+      &:focus {
+        color: ${theme.palette.emphasize(theme.palette.success.text, 0.15)};
+      }
+    }
+
+    a {
+      cursor: pointer;
+      color: ${theme.palette.text.primary};
+      text-decoration: none;
+
+      &:focus {
+        outline: none;
+      }
+
+      &: [disabled] {
+        cursor: default;
+        pointer-events: none !important;
+      }
+    }
+
+    .text-link {
+      text-decoration: underline;
+    }
+
+    .text-left {
+      text-align: left;
+    }
+
+    .text-right {
+      text-align: right;
+    }
+
+    .text-center {
+      text-align: center;
+    }
+  `;
+}
+
+export function getVariantStyles(variant: ThemeTypographyVariant) {
+  return `
+    margin: 0;
+    font-size: ${variant.fontSize};    
+    line-height: ${variant.lineHeight};
+    font-weight: ${variant.fontWeight};
+    letter-spacing: ${variant.letterSpacing};
+    font-family: ${variant.fontFamily};
+    margin-bottom: 0.35em;
+  `;
+}

packages/grafana-ui/src/themes/_variables.dark.scss.tmpl.ts

@@ -2,7 +2,6 @@
 
 import { GrafanaTheme } from '@grafana/data';
 import { renderGeneratedFileBanner } from '../utils/generatedFileBanner';
-import { styleMixins } from '.';
 
 export const darkThemeVarsTemplate = (theme: GrafanaTheme) =>
   `${renderGeneratedFileBanner('grafana-ui/src/themes/dark.ts', 'grafana-ui/src/themes/_variables.dark.scss.tmpl.ts')}
@@ -142,8 +141,8 @@ $page-header-border-color: ${theme.colors.pageHeaderBorder};
 $divider-border-color: $gray-1;
 
 // Graphite Target Editor
-$tight-form-func-bg: ${theme.colors.bg2};
-$tight-form-func-highlight-bg: ${styleMixins.hoverColor(theme.colors.bg2, theme)};
+$tight-form-func-bg: ${theme.v2.palette.layer2};
+$tight-form-func-highlight-bg: ${theme.v2.palette.emphasize(theme.v2.palette.layer2, 0.03)};
 
 $modal-backdrop-bg: ${theme.colors.bg3};
 $code-tag-bg: $dark-1;
@@ -151,7 +150,7 @@ $code-tag-border: $dark-9;
 
 // cards
 $card-background: ${theme.v2.palette.layer2};
-$card-background-hover: ${theme.v2.palette.layer2};
+$card-background-hover: ${theme.v2.palette.emphasize(theme.v2.palette.layer2, 0.03)};
 $card-shadow: none;
 
 // Lists
@@ -170,8 +169,8 @@ $scrollbarBorder: black;
 // -------------------------
 $table-bg-accent: ${theme.v2.palette.layer2};
 $table-border: ${theme.v2.palette.border1};
-$table-bg-odd: ${theme.v2.palette.getHoverColor(theme.v2.palette.layer1, 0.02)};
-$table-bg-hover: ${theme.v2.palette.getHoverColor(theme.v2.palette.layer1, 0.05)};
+$table-bg-odd: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.02)};
+$table-bg-hover: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.05)};
 
 // Buttons
 // -------------------------

packages/grafana-ui/src/themes/_variables.light.scss.tmpl.ts

@@ -164,8 +164,8 @@ $scrollbarBorder: $gray-7;
 // -------------------------
 $table-bg-accent: ${theme.v2.palette.layer2};
 $table-border: ${theme.v2.palette.border1};
-$table-bg-odd: ${theme.v2.palette.getHoverColor(theme.v2.palette.layer1, 0.02)};
-$table-bg-hover: ${theme.v2.palette.getHoverColor(theme.v2.palette.layer1, 0.05)};
+$table-bg-odd: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.02)};
+$table-bg-hover: ${theme.v2.palette.emphasize(theme.v2.palette.layer1, 0.05)};
 
 // Buttons
 // -------------------------

packages/grafana-ui/src/themes/dark.ts

@@ -56,7 +56,7 @@ const textColors = {
   textHeading: v2.palette.text.primary,
   text: v2.palette.text.primary,
   textSemiWeak: v2.palette.text.secondary,
-  textWeak: v2.palette.text.disabled,
+  textWeak: v2.palette.text.secondary,
   textFaint: v2.palette.text.disabled,
   textBlue: v2.palette.primary.text,
 };

packages/grafana-ui/src/themes/default.ts

@@ -31,8 +31,8 @@ const theme: GrafanaThemeCommons = {
   name: 'Grafana Default',
   typography: {
     fontFamily: {
-      sansSerif: "'Roboto', 'Helvetica Neue', Arial, sans-serif",
-      monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace",
+      sansSerif: "'Inter', 'Helvetica Neue', Arial, sans-serif",
+      monospace: "'Roboto Mono', monospace",
     },
     size: {
       base: '14px',
@@ -53,7 +53,7 @@ const theme: GrafanaThemeCommons = {
       light: 300,
       regular: 400,
       semibold: 500,
-      bold: 600,
+      bold: 500,
     },
     lineHeight: {
       xs: 1,

packages/grafana-ui/src/themes/index.ts

@@ -3,6 +3,7 @@ import { getTheme, mockTheme } from './getTheme';
 import { selectThemeVariant } from './selectThemeVariant';
 export { stylesFactory } from './stylesFactory';
 export { ThemeContext, withTheme, mockTheme, getTheme, selectThemeVariant, useTheme, mockThemeContext, useStyles };
+export { GlobalStyles } from './GlobalStyles/GlobalStyles';
 
 import * as styleMixins from './mixins';
 export { styleMixins };

packages/grafana-ui/src/themes/light.ts

@@ -55,7 +55,7 @@ const textColors = {
   textStrong: v2.palette.text.maxContrast,
   text: v2.palette.text.primary,
   textSemiWeak: v2.palette.text.secondary,
-  textWeak: v2.palette.text.disabled,
+  textWeak: v2.palette.text.secondary,
   textFaint: v2.palette.text.disabled,
   textBlue: v2.palette.primary.text,
 };

packages/grafana-ui/src/themes/mixins.ts

@@ -25,6 +25,10 @@ export function listItem(theme: GrafanaTheme): string {
   }
   box-shadow: ${theme.shadows.listItem};
   border-radius: ${theme.border.radius.md};
+
+  a {
+    color: ${theme.v2.palette.text.primary};
+  }  
 `;
 }
 

packages/grafana-ui/src/utils/measureText.ts

@@ -21,7 +21,7 @@ export function getCanvasContext() {
  * @beta
  */
 export function measureText(text: string, fontSize: number): TextMetrics {
-  const fontStyle = `${fontSize}px 'Roboto'`;
+  const fontStyle = `${fontSize}px 'Inter'`;
   const cacheKey = text + fontStyle;
   const fromCache = cache[cacheKey];
 

packages/grafana-ui/src/utils/storybook/withPaddedStory.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { GlobalStyles } from '../../themes';
 import { RenderFunction } from '../../types';
 
 const PaddedStory: React.FunctionComponent<{}> = ({ children }) => {
@@ -10,6 +11,7 @@ const PaddedStory: React.FunctionComponent<{}> = ({ children }) => {
         display: 'flex',
       }}
     >
+      <GlobalStyles />
       {children}
     </div>
   );

public/app/AppWrapper.tsx

@@ -3,7 +3,7 @@ import { Router, Route, Redirect, Switch } from 'react-router-dom';
 import { config, locationService, navigationLogger } from '@grafana/runtime';
 import { Provider } from 'react-redux';
 import { store } from 'app/store/store';
-import { ErrorBoundaryAlert, ModalRoot, ModalsProvider } from '@grafana/ui';
+import { ErrorBoundaryAlert, GlobalStyles, ModalRoot, ModalsProvider } from '@grafana/ui';
 import { GrafanaApp } from './app';
 import { getAppRoutes } from 'app/routes/routes';
 import { ConfigContext, ThemeProvider } from './core/utils/ConfigProvider';
@@ -92,6 +92,7 @@ export class AppWrapper extends React.Component<AppWrapperProps, AppWrapperState
           <ConfigContext.Provider value={config}>
             <ThemeProvider>
               <ModalsProvider>
+                <GlobalStyles />
                 <div className="grafana-app">
                   <Router history={locationService.getHistory()}>
                     <SideMenu />

public/app/core/components/PageHeader/PageHeader.tsx

@@ -124,7 +124,7 @@ function renderTitle(title: string, breadcrumbs: NavModelBreadcrumb[]) {
   for (const bc of breadcrumbs) {
     if (bc.url) {
       breadcrumbsResult.push(
-        <a className="text-link" key={breadcrumbsResult.length} href={bc.url}>
+        <a className="page-header__link" key={breadcrumbsResult.length} href={bc.url}>
           {bc.title}
         </a>
       );

public/app/features/explore/__snapshots__/MetaInfoText.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`MetaInfoText should render component 1`] = `
 <div
-  className="css-1egjxkg"
+  className="css-7qzshi"
 >
   <Memo(MetaInfoItem)
     key="0-label"

public/sass/_variables.dark.generated.scss

@@ -101,7 +101,7 @@ $dashboard-bg: #0d0f16;
 $text-color-strong: #fff;
 $text-color: rgba(255, 255, 255, 0.77);
 $text-color-semi-weak: rgba(255, 255, 255, 0.55);
-$text-color-weak: rgba(255, 255, 255, 0.35);
+$text-color-weak: rgba(255, 255, 255, 0.55);
 $text-color-faint: rgba(255, 255, 255, 0.35);
 $text-color-emphasis: #fff;
 $text-blue: #33a2e5;
@@ -145,7 +145,7 @@ $divider-border-color: $gray-1;
 
 // Graphite Target Editor
 $tight-form-func-bg: #22252b;
-$tight-form-func-highlight-bg: #272a30;
+$tight-form-func-highlight-bg: rgb(40, 43, 49);
 
 $modal-backdrop-bg: rgba(255, 255, 255, 0.08);
 $code-tag-bg: $dark-1;
@@ -153,7 +153,7 @@ $code-tag-border: $dark-9;
 
 // cards
 $card-background: #22252b;
-$card-background-hover: #22252b;
+$card-background-hover: rgb(40, 43, 49);
 $card-shadow: none;
 
 // Lists

public/sass/_variables.generated.scss

@@ -99,8 +99,8 @@ $height-lg: 48;
 // Typography
 // -------------------------
 
-$font-family-sans-serif: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
-$font-family-monospace: Menlo, Monaco, Consolas, 'Courier New', monospace;
+$font-family-sans-serif: 'Inter', 'Helvetica Neue', Arial, sans-serif;
+$font-family-monospace: 'Roboto Mono', monospace;
 
 $font-size-base: 14px !default;
 

public/sass/_variables.light.generated.scss

@@ -55,7 +55,7 @@ $white: #ffffff;
 
 $layer0: #F4F5F5;
 $layer1: #fff;
-$layer2: #F7F7F8;
+$layer2: #F4F5F5;
 
 $divider: rgba(0, 2, 78, 0.07);
 
@@ -96,7 +96,7 @@ $dashboard-bg: #F4F5F5;
 $text-color: rgba(0, 0, 0, 0.75);
 $text-color-strong: #000;
 $text-color-semi-weak: rgba(0, 0, 0, 0.60);
-$text-color-weak: rgba(0, 0, 0, 0.45);
+$text-color-weak: rgba(0, 0, 0, 0.60);
 $text-color-faint: rgba(0, 0, 0, 0.45);
 $text-color-emphasis: #000;
 $text-blue: #1F62E0;
@@ -110,7 +110,7 @@ $brand-gradient-vertical: linear-gradient(#f05a28 30%, #fbca0a 99%);
 // Links
 // -------------------------
 $link-color: rgba(0, 0, 0, 0.75);
-$link-color-disabled: rgba(0, 0, 0, 0.45);
+$link-color-disabled: rgba(0, 0, 0, 0.60);
 $link-hover-color: #000;
 $external-link-color: #33a2e5;
 
@@ -131,23 +131,23 @@ $panel-box-shadow: 0px 1px 1px -1px rgba(0,0,0,0.15),0px 0px 0px 0px rgba(0,0,0,
 $panel-corner: $panel-bg;
 
 // Page header
-$page-header-bg: #F7F7F8;
+$page-header-bg: #F4F5F5;
 $page-header-shadow: inset 0px -3px 10px $gray-6;
 $page-header-border-color: #fff;
 
 $divider-border-color: $gray-2;
 
 // Graphite Target Editor
-$tight-form-func-bg: #F7F7F8;
-$tight-form-func-highlight-bg: #f2f2f3;
+$tight-form-func-bg: #F4F5F5;
+$tight-form-func-highlight-bg: #eff0f0;
 
 $modal-backdrop-bg: #fff;
 $code-tag-bg: $gray-6;
 $code-tag-border: $gray-4;
 
 // cards
-$card-background: #F7F7F8;
-$card-background-hover: #F7F7F8;
+$card-background: #F4F5F5;
+$card-background-hover: #F4F5F5;
 $card-shadow: none;
 
 // Lists
@@ -164,7 +164,7 @@ $scrollbarBorder: $gray-7;
 
 // Tables
 // -------------------------
-$table-bg-accent: #F7F7F8;
+$table-bg-accent: #F4F5F5;
 $table-border: rgba(0, 2, 78, 0.20);
 $table-bg-odd: rgb(249, 249, 249);
 $table-bg-hover: rgb(242, 242, 242);
@@ -212,7 +212,7 @@ $input-box-shadow: none;
 $input-border-focus: #5794f2;
 $input-box-shadow-focus: #5794f2;
 $input-color-placeholder: rgba(0, 0, 0, 0.45);
-$input-label-bg: #F7F7F8;
+$input-label-bg: #F4F5F5;
 $input-color-select-arrow: #7b8087;
 
 // search
@@ -225,7 +225,7 @@ $typeahead-selected-color: $yellow;
 
 // Dropdowns
 // -------------------------
-$dropdownBackground: #F7F7F8;
+$dropdownBackground: #F4F5F5;
 $dropdownBorder: #fff;
 $dropdownDividerTop: rgba(0, 2, 78, 0.07);
 $dropdownDividerBottom: rgba(0, 2, 78, 0.07);
@@ -258,7 +258,7 @@ $side-menu-header-color: #e9edf2;
 
 // Menu dropdowns
 // -------------------------
-$menu-dropdown-bg: #F7F7F8;
+$menu-dropdown-bg: #F4F5F5;
 $menu-dropdown-hover-bg: rgba(0, 0, 0, 0.04);
 $menu-dropdown-shadow: 0px 2px 4px -1px rgba(0,0,0,0.15),0px 4px 5px 0px rgba(0,0,0,0.1),0px 1px 10px 0px rgba(0,0,0,0.1);
 
@@ -278,16 +278,16 @@ $alert-warning-bg: linear-gradient(90deg, $red-base, $red-shade);
 $alert-info-bg: linear-gradient(100deg, $blue-base, $blue-shade);
 
 // Tooltips and popovers
-$tooltipBackground: #F7F7F8;
+$tooltipBackground: #F4F5F5;
 $tooltipColor: rgba(0, 0, 0, 0.75);
-$tooltipArrowColor: #F7F7F8;
+$tooltipArrowColor: #F4F5F5;
 $tooltipBackgroundError: #E0226E;
 $tooltipShadow: 0px 2px 1px -2px rgba(0,0,0,0.15),0px 2px 2px 0px rgba(0,0,0,0.1),0px 1px 5px 0px rgba(0,0,0,0.1);
 
-$popover-bg: #F7F7F8;
+$popover-bg: #F4F5F5;
 $popover-color: rgba(0, 0, 0, 0.75);
 $popover-border-color: rgba(0, 2, 78, 0.20);
-$popover-header-bg: #F7F7F8;
+$popover-header-bg: #F4F5F5;
 $popover-shadow: 0px 5px 5px -5px rgba(0,0,0,0.15),0px 8px 10px 1px rgba(0,0,0,0.1),0px 3px 14px 2px rgba(0,0,0,0.1);
 
 $graph-tooltip-bg: $gray-5;
@@ -332,9 +332,9 @@ $diff-label-bg: rgba(0, 0, 0, 0.04);
 $diff-label-fg: $gray-2;
 
 $diff-arrow-color: $dark-2;
-$diff-group-bg: #F7F7F8;
+$diff-group-bg: #F4F5F5;
 
-$diff-json-bg: #F7F7F8;
+$diff-json-bg: #F4F5F5;
 $diff-json-fg: rgba(0, 0, 0, 0.75);
 
 $diff-json-added: $blue-shade;

public/sass/base/_fonts.scss

@@ -3,257 +3,153 @@
 
 /* cyrillic-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'),
-    url(../fonts/roboto/ek4gzZ-GeXAPcSbHtCeQI_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
-  unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'),
-    url(../fonts/roboto/mErvLBYg_cXG3rLvUsKT_fesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
-  unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'),
-    url(../fonts/roboto/-2n2p-_Y08sg57CNWQfKNvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
-  unicode-range: U+1f00-1fff;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
 }
 /* greek */
-/* not available
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'),
-    url(../fonts/roboto/u0TOpm082MNkS5K0Q4rhqvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
-  unicode-range: U+0370-03ff;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
 }
-*/
 /* vietnamese */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'),
-    url(../fonts/roboto/NdF9MtnOpLzo-noMoG0miPesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'),
-    url(../fonts/roboto/Fcx7Wwv8OzT71A3E1XOAjvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
-  unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-  font-display: swap;
-  font-family: 'Roboto';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../fonts/roboto/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2');
-  unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.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;
 }
 /* cyrillic-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'),
-    url(../fonts/roboto/ZLqKeelYbATG60EpZBSDyxJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
-  unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2JL7SUc.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }
 /* cyrillic */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'),
-    url(../fonts/roboto/oHi30kwQWvpCWqAhzHcCSBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
-  unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa0ZL7SUc.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }
 /* greek-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'),
-    url(../fonts/roboto/rGvHdJnr2l75qb0YND9NyBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
-  unicode-range: U+1f00-1fff;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
 }
 /* greek */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'),
-    url(../fonts/roboto/mx9Uck6uB63VIKFYnEMXrRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
-  unicode-range: U+0370-03ff;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
 }
 /* vietnamese */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'),
-    url(../fonts/roboto/mbmhprMH69Zi6eEPBYVFhRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2pL7SUc.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
 }
 /* latin-ext */
 @font-face {
-  font-family: 'Roboto';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'),
-    url(../fonts/roboto/oOeFwZNlrTefzLYmlVV1UBJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
-  unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa25L7SUc.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 /* latin */
 @font-face {
-  font-display: swap;
-  font-family: 'Roboto';
+  font-family: 'Inter';
   font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'),
-    url(../fonts/roboto/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
-  unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Roboto Italic'), local('Roboto-Italic'),
-    url(../fonts/roboto/WxrXJa0C3KdtC7lMafG4dRTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
-  unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Roboto Italic'), local('Roboto-Italic'),
-    url(../fonts/roboto/OpXUqTo0UgQQhGj_SFdLWBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
-  unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Roboto Italic'), local('Roboto-Italic'),
-    url(../fonts/roboto/1hZf02POANh32k2VkgEoUBTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
-  unicode-range: U+1f00-1fff;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Roboto Italic'), local('Roboto-Italic'),
-    url(../fonts/roboto/cDKhRaXnQTOVbaoxwdOr9xTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
-  unicode-range: U+0370-03ff;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Roboto Italic'), local('Roboto-Italic'),
-    url(../fonts/roboto/K23cxWVTrIFD6DJsEVi07RTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Roboto Italic'), local('Roboto-Italic'),
-    url(../fonts/roboto/vSzulfKSK0LLjjfeaxcREhTbgVql8nDJpwnrE27mub0.woff2) format('woff2');
-  unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7.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-display: swap;
-  font-family: 'Roboto';
-  font-style: italic;
+  font-family: 'Roboto Mono';
+  font-style: normal;
   font-weight: 400;
-  src: local('Roboto Italic'), local('Roboto-Italic'),
-    url(../fonts/roboto/vPcynSL0qHq_6dX7lKVByfesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
-  unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
-}
-/* cyrillic-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 500;
-  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
-    url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0TTOQ_MqJVwkKsUn0wKzc2I.woff2) format('woff2');
-  unicode-range: U+0460-052f, U+20b4, U+2de0-2dff, U+A640-A69F;
-}
-/* cyrillic */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 500;
-  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
-    url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0TUj_cnvWIuuBMVgbX098Mw.woff2) format('woff2');
-  unicode-range: U+0400-045f, U+0490-0491, U+04b0-04b1, U+2116;
-}
-/* greek-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 500;
-  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
-    url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0UbcKLIaa1LC45dFaAfauRA.woff2) format('woff2');
-  unicode-range: U+1f00-1fff;
-}
-/* greek */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 500;
-  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
-    url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0Wo_sUJ8uO4YLWRInS22T3Y.woff2) format('woff2');
-  unicode-range: U+0370-03ff;
-}
-/* vietnamese */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 500;
-  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
-    url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0b6up8jxqWt8HVA3mDhkV_0.woff2) format('woff2');
-  unicode-range: U+0102-0103, U+1ea0-1ef9, U+20ab;
-}
-/* latin-ext */
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 500;
-  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
-    url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0SYE0-AqJ3nfInTTiDXDjU4.woff2) format('woff2');
-  unicode-range: U+0100-024f, U+1-1eff, U+20a0-20ab, U+20ad-20cf, U+2c60-2c7f, U+A720-A7FF;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/robotomono/v13/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';
-  font-style: italic;
+  font-family: 'Roboto Mono';
+  font-style: normal;
   font-weight: 500;
-  src: local('Roboto Medium Italic'), local('Roboto-MediumItalic'),
-    url(../fonts/roboto/OLffGBTaF0XFOW1gnuHF0Y4P5ICox8Kq3LLUNMylGO4.woff2) format('woff2');
-  unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2212, U+2215;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/robotomono/v13/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;
 }