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

[torkelo]

• Update main font from Roboto to Inter
• Update main mono space font to Roboto Mono
• Update typography
• Add Typography storybook for the native elements
• Adds a Typography component that will be implemented later and be similar to https://material-ui.com/components/typography/
• Adds a GlobalStyles component and a start/embryo of moving old sass global styles to emotion
• Rename palette.getHoverColor to palette.emphasize

[domasx2]

600 weight (bold) glyphs were missing for Roboto, which made bold text look smudged on some systems as browser interpolates to 600 from other weight. Maybe we could fix this and add 600 with Inter?

[torkelo]

@domasx2 where do you use font-weight 600?

[domasx2]

@domasx2 where do you use font-weight 600?

theme.typography.weight.bold is set to 600, and various designs (eg, unified alerting) call for it to be used

https://github.com/grafana/grafana/blob/master/packages/grafana-ui/src/themes/default.ts#L56

[torkelo]

theme.typography.weight.bold is set to 600, and various designs (eg, unified alerting) call for it to be used
https://github.com/grafana/grafana/blob/master/packages/grafana-ui/src/themes/default.ts#L56

Did not know that we should always use semibold, will map bold to 500