Theme: Inter font (behind feature toggle) (#56441)

* Theme: Inter font change with new line-height

* Add it behind feature toggle

* make buildVariant easier to read + enforce integer multiples of 2 (#56486)

* Minor update

* Update

Co-authored-by: Ashley Harrison <ashley.harrison@grafana.com>

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

@@ -99,26 +99,31 @@ export function createTypography(colors: ThemeColors, typographyInput: ThemeTypo
     lineHeight: number,
     letterSpacing: number,
     casing?: object
-  ): ThemeTypographyVariant => ({
+  ): ThemeTypographyVariant => {
+    if (lineHeight % 2 !== 0 || size % 2 !== 0) {
+      throw new Error('Font size and line height should be integer multiples of 2 to prevent issues with alignment');
+    }
+
+    return {
       fontFamily,
       fontWeight,
       fontSize: pxToRem(size),
-    lineHeight,
+      lineHeight: lineHeight / size,
       ...(fontFamily === defaultFontFamily ? { letterSpacing: `${round(letterSpacing / size)}em` } : {}),
       ...casing,
-  });
+    };
+  };
 
+  // All our fonts/line heights should be integer multiples of 2 to prevent issues with alignment
   const variants = {
-    h1: buildVariant(fontWeightLight, 28, 1.167, -0.25),
+    h1: buildVariant(fontWeightRegular, 28, 32, -0.25),
-    h2: buildVariant(fontWeightLight, 24, 1.2, 0),
+    h2: buildVariant(fontWeightRegular, 24, 28, 0),
-    h3: buildVariant(fontWeightRegular, 21, 1.167, 0),
+    h3: buildVariant(fontWeightRegular, 22, 24, 0),
-    h4: buildVariant(fontWeightRegular, 18, 1.235, 0.25),
+    h4: buildVariant(fontWeightRegular, 18, 22, 0.25),
-    h5: buildVariant(fontWeightRegular, 16, 1.334, 0),
+    h5: buildVariant(fontWeightRegular, 16, 22, 0),
-    h6: buildVariant(fontWeightMedium, 14, 1.6, 0.15),
+    h6: buildVariant(fontWeightMedium, 14, 22, 0.15),
-    // The line-height of 1.5714285714285714 results in a real line-height of 22px for the default font size. Which is an even number and result in more perfect vertical alignment
+    body: buildVariant(fontWeightRegular, fontSize, 22, 0.15),
-    body: buildVariant(fontWeightRegular, fontSize, 1.5714285714285714, 0.15),
+    bodySmall: buildVariant(fontWeightRegular, 12, 18, 0.15),
-    // The line-height of 1.5 results in a real line height of 18px for the font size of 12px
-    bodySmall: buildVariant(fontWeightRegular, 12, 1.5, 0.15),
   };
 
   const size = {

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

@@ -1,4 +1,5 @@
 export { createTheme } from './createTheme';
+export type { NewThemeOptions } from './createTheme';
 export type { ThemeRichColor, GrafanaTheme2 } from './types';
 export type { ThemeColors } from './createColors';
 export type { ThemeBreakpoints, ThemeBreakpointsKey } from './breakpoints';

packages/grafana-data/src/types/featureToggles.gen.ts

@@ -72,6 +72,7 @@ export interface FeatureToggles {
   redshiftAsyncQueryDataSupport?: boolean;
   athenaAsyncQueryDataSupport?: boolean;
   increaseInMemDatabaseQueryCache?: boolean;
+  interFont?: boolean;
   newPanelChromeUI?: boolean;
   queryLibrary?: boolean;
   showDashboardValidationWarnings?: boolean;

packages/grafana-runtime/src/config.ts

@@ -17,6 +17,7 @@ import {
   PreloadPlugin,
   systemDateFormats,
   SystemDateFormatSettings,
+  NewThemeOptions,
 } from '@grafana/data';
 
 export interface AzureSettings {
@@ -141,9 +142,6 @@ export class GrafanaBootConfig implements GrafanaConfig {
   rudderstackConfigUrl: undefined;
 
   constructor(options: GrafanaBootConfig) {
-    const mode = options.bootData.user.lightTheme ? 'light' : 'dark';
-    this.theme2 = createTheme({ colors: { mode } });
-    this.theme = this.theme2.v1;
     this.bootData = options.bootData;
     this.isPublicDashboardView = options.bootData.settings.isPublicDashboardView;
 
@@ -176,11 +174,28 @@ export class GrafanaBootConfig implements GrafanaConfig {
 
     overrideFeatureTogglesFromUrl(this);
 
+    // Creating theme after apply feature toggle overrides as the code below is checking a feature toggle right now
+    this.theme2 = createTheme(getThemeCustomizations(this));
+
+    this.theme = this.theme2.v1;
     // Special feature toggle that impact theme/component looks
     this.theme2.flags.topnav = this.featureToggles.topnav;
   }
 }
 
+function getThemeCustomizations(config: GrafanaBootConfig) {
+  const mode = config.bootData.user.lightTheme ? 'light' : 'dark';
+  const themeOptions: NewThemeOptions = {
+    colors: { mode },
+  };
+
+  if (config.featureToggles.interFont) {
+    themeOptions.typography = { fontFamily: '"Inter", "Helvetica", "Arial", sans-serif' };
+  }
+
+  return themeOptions;
+}
+
 function overrideFeatureTogglesFromUrl(config: GrafanaBootConfig) {
   if (window.location.href.indexOf('__feature') === -1) {
     return;

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

@@ -6,6 +6,7 @@ import { useTheme2 } from '..';
 import { getAgularPanelStyles } from './angularPanelStyles';
 import { getCardStyles } from './card';
 import { getElementStyles } from './elements';
+import { getFormElementStyles } from './forms';
 import { getMarkdownStyles } from './markdownStyles';
 import { getPageStyles } from './page';
 
@@ -17,6 +18,7 @@ export function GlobalStyles() {
     <Global
       styles={[
         getElementStyles(theme),
+        getFormElementStyles(theme),
         getPageStyles(theme),
         getCardStyles(theme),
         getAgularPanelStyles(theme),

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

@@ -0,0 +1,45 @@
+import { css } from '@emotion/react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+export function getFormElementStyles(theme: GrafanaTheme2) {
+  return css`
+    input,
+    button,
+    select,
+    textarea {
+      font-size: ${theme.typography.body.fontSize};
+      font-weight: ${theme.typography.body.fontWeight};
+      line-height: ${theme.typography.body.lineHeight};
+    }
+    input,
+    button,
+    select,
+    textarea {
+      font-family: ${theme.typography.body.fontFamily};
+    }
+
+    input,
+    select {
+      background-color: ${theme.components.input.background};
+      color: ${theme.components.input.text};
+      border: none;
+      box-shadow: none;
+    }
+
+    textarea {
+      height: auto;
+    }
+
+    // Reset width of input images, buttons, radios, checkboxes
+    input[type='file'],
+    input[type='image'],
+    input[type='submit'],
+    input[type='reset'],
+    input[type='button'],
+    input[type='radio'],
+    input[type='checkbox'] {
+      width: auto; // Override of generic input selector
+    }
+  `;
+}

pkg/services/featuremgmt/registry.go

@@ -310,6 +310,10 @@ var (
 			Name:        "increaseInMemDatabaseQueryCache",
 			Description: "Enable more in memory caching for database queries",
 		},
+		{
+			Name:        "interFont",
+			Description: "Switch to inter font",
+		},
 		{
 			Name:         "newPanelChromeUI",
 			Description:  "Show updated look and feel of grafana-ui PanelChrome: panel header, icons, and menu",

pkg/services/featuremgmt/toggles_gen.go

@@ -231,6 +231,10 @@ const (
 	// Enable more in memory caching for database queries
 	FlagIncreaseInMemDatabaseQueryCache = "increaseInMemDatabaseQueryCache"
 
+	// FlagInterFont
+	// Switch to inter font
+	FlagInterFont = "interFont"
+
 	// FlagNewPanelChromeUI
 	// Show updated look and feel of grafana-ui PanelChrome: panel header, icons, and menu
 	FlagNewPanelChromeUI = "newPanelChromeUI"

public/sass/_variables.generated.scss

@@ -119,7 +119,7 @@ $font-weight-semi-bold: 500 !default;
 
 $font-size-h1: 2rem !default;
 $font-size-h2: 1.7142857142857142rem !default;
-$font-size-h3: 1.5rem !default;
+$font-size-h3: 1.5714285714285714rem !default;
 $font-size-h4: 1.2857142857142858rem !default;
 $font-size-h5: 1.1428571428571428rem !default;
 $font-size-h6: 1rem !default;

public/sass/base/_fonts.scss

@@ -1,6 +1,30 @@
 @import 'font_awesome';
 @import 'grafana_icons';
 
+/* latin */
+@font-face {
+  font-family: 'Roboto Mono';
+  font-style: normal;
+  font-weight: 400;
+  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 Mono';
+  font-style: normal;
+  font-weight: 500;
+  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;
+}
+
 /* cyrillic-ext */
 @font-face {
   font-family: 'Roboto';
@@ -280,3 +304,132 @@
   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: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  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: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  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: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  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: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  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-family: 'Inter';
+  font-style: normal;
+  font-weight: 400;
+  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: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  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: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  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: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa2ZL7SUc.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+/* greek */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(../fonts/inter/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1pL7SUc.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  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: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  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-family: 'Inter';
+  font-style: normal;
+  font-weight: 500;
+  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;
+}

public/sass/base/_forms.scss

@@ -8,42 +8,6 @@
 // Reset height since textareas have rows
 // Set font for forms
 
-input,
-button,
-select,
-textarea {
-  @include font-shorthand($font-size-base, normal, $line-height-base);
-}
-input,
-button,
-select,
-textarea {
-  font-family: $font-family-sans-serif; // And only set font-family here for those that need it (note the missing label element)
-}
-
-input,
-select {
-  background-color: $input-bg;
-  color: $input-color;
-  border: none;
-  box-shadow: none;
-}
-
-textarea {
-  height: auto;
-}
-
-// Reset width of input images, buttons, radios, checkboxes
-input[type='file'],
-input[type='image'],
-input[type='submit'],
-input[type='reset'],
-input[type='button'],
-input[type='radio'],
-input[type='checkbox'] {
-  width: auto; // Override of generic input selector
-}
-
 // Set the height of select and file controls to match text inputs
 select,
 input[type='file'] {