IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-16 18:34:52 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Torkel Ödegaard 2022-10-15 16:22:33 +02:00 committed by GitHub
parent 129a28919b
commit 9f5e691994
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 252 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/grafana-data/src/themes/createTypography.ts
View File

@ -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 = {

1
packages/grafana-data/src/themes/index.ts
View File

@ -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';

1
packages/grafana-data/src/types/featureToggles.gen.ts
View File

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

21
packages/grafana-runtime/src/config.ts
View File

@ -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;

2
packages/grafana-ui/src/themes/GlobalStyles/GlobalStyles.tsx
View File

@ -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),

45
packages/grafana-ui/src/themes/GlobalStyles/forms.ts Normal file
View File

@ -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
}
`;
}

4
pkg/services/featuremgmt/registry.go
View File

@ -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",

4
pkg/services/featuremgmt/toggles_gen.go
View File

@ -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"

2
public/sass/_variables.generated.scss
View File

@ -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;

153
public/sass/base/_fonts.scss
View File

@ -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;
}

36
public/sass/base/_forms.scss
View File

@ -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'] {