diff --git a/packages/grafana-data/src/themes/createTypography.ts b/packages/grafana-data/src/themes/createTypography.ts index 914818338f0..2971c6d605d 100644 --- a/packages/grafana-data/src/themes/createTypography.ts +++ b/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 => ({ - fontFamily, - fontWeight, - fontSize: pxToRem(size), - lineHeight, - ...(fontFamily === defaultFontFamily ? { letterSpacing: `${round(letterSpacing / size)}em` } : {}), - ...casing, - }); + ): 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 / 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), - h2: buildVariant(fontWeightLight, 24, 1.2, 0), - 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), - // 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, 1.5714285714285714, 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), + h1: buildVariant(fontWeightRegular, 28, 32, -0.25), + h2: buildVariant(fontWeightRegular, 24, 28, 0), + h3: buildVariant(fontWeightRegular, 22, 24, 0), + h4: buildVariant(fontWeightRegular, 18, 22, 0.25), + h5: buildVariant(fontWeightRegular, 16, 22, 0), + h6: buildVariant(fontWeightMedium, 14, 22, 0.15), + body: buildVariant(fontWeightRegular, fontSize, 22, 0.15), + bodySmall: buildVariant(fontWeightRegular, 12, 18, 0.15), }; const size = { diff --git a/packages/grafana-data/src/themes/index.ts b/packages/grafana-data/src/themes/index.ts index 596546b2235..a0f2f9fcc9d 100644 --- a/packages/grafana-data/src/themes/index.ts +++ b/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'; diff --git a/packages/grafana-data/src/types/featureToggles.gen.ts b/packages/grafana-data/src/types/featureToggles.gen.ts index 2e111bcc152..f3ea98d30fb 100644 --- a/packages/grafana-data/src/types/featureToggles.gen.ts +++ b/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; diff --git a/packages/grafana-runtime/src/config.ts b/packages/grafana-runtime/src/config.ts index e8ab648f636..73c89a41173 100644 --- a/packages/grafana-runtime/src/config.ts +++ b/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; diff --git a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx b/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx index fb95b5efdca..f46a07512d5 100644 --- a/packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx +++ b/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() {