From 0958d9ba550945062bcb1becf77e23f1e2913b0b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 6 Oct 2022 12:59:43 +0200 Subject: [PATCH] Theme: Change body line-height to fix alignment issue (#56442) * Theme: Change body line-height to fix alignment issue * Updates --- packages/grafana-data/src/themes/createTypography.ts | 4 +++- public/sass/_variables.generated.scss | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/grafana-data/src/themes/createTypography.ts b/packages/grafana-data/src/themes/createTypography.ts index 9d9776a456f..914818338f0 100644 --- a/packages/grafana-data/src/themes/createTypography.ts +++ b/packages/grafana-data/src/themes/createTypography.ts @@ -115,7 +115,9 @@ export function createTypography(colors: ThemeColors, typographyInput: ThemeTypo 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), + // 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), }; diff --git a/public/sass/_variables.generated.scss b/public/sass/_variables.generated.scss index 43dfe41fa6e..9dc0d312c9b 100644 --- a/public/sass/_variables.generated.scss +++ b/public/sass/_variables.generated.scss @@ -112,7 +112,7 @@ $font-size-md: 14px !default; $font-size-sm: 12px !default; $font-size-xs: 10px !default; -$line-height-base: 1.5 !default; +$line-height-base: 1.5714285714285714 !default; $font-weight-regular: 400 !default; $font-weight-semi-bold: 500 !default;