source{d} branded superset UI - Typography

[ricardobaeta]

This PR is related to the 2019-R5-CE and addresses the source{d}-branded superset UI EPIC.

Our approach is to address initially the overall Typography on the UI, and the state of this PR it's only related to Typography, and nothing else on the UI. Keep that in mind when reviewing. Our brand typography "Source Sans Pro" & "Source Code Pro" were applied.

This approach is part of the source{d}-branded Superset UI Design Document on the Typography Solution - where you can check the rationale of the decisions made.

The code on the custom-brand.less is still immature, given the issues I'm having on redefining variables, and them not being applied to the UI, because they're overwritten by the default ones. Solving this issue would be a priority, IMHO, to get the code clean without !important's all over and not get the most out of variables. Also, this is an incremental evolution, thus the Typography work is not perfect yet.

A codemirror_override.less file was added to address the UAST code panel, where we overwrite rules taken from the solarized codemirror theme and the following brand work will evolve on mentioned file.

This PR will evolve to continue to address the Solutions on the mentioned Design Doc, and the next steps are going to be:

1. UI Components Solution
2. UI Interactive Elements Solution

We'll tackle the remaining Solutions for this source{d}-branded superset UI EPIC, right after.

[smacker]

Please also remove .DS_Store file. To avoid adding them in the future you can create file ~/.gitignore and add .DS_Store there. Then git will always ignore it.

[smacker]

I'll test it manually when comments from above are applied.

[ricardobaeta]

All comments addressed! Thank you so much @smacker :)

[smacker]

Change of the font size broke table charts:

[smacker]

correct font wasn't applied:

[smacker]

font-face defenition isn't correct most probably:

@font-face {
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  src: url("../fonts/SourceSansPro-Regular.ttf") format("truetype");
}

As far as I know only 1 font in font family can be defined.
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face

[ricardobaeta]

Change of the font size broke table charts:

Yes, this is typography work, and it has dependencies, and one of them is addressing our design doc UI Elements Solution.

Will keep pushing forward!

[ricardobaeta]

correct font wasn't applied:

Yes, as you say we can't have two font-face declarations. And we're calling Source Sans Pro with font-face and it's ok. We need to find a solution for calling Source Code Pro to apply it to the code on the UI.

Suggestions?

[smacker]

After all the fixes tested locally and it's good enough to go. There are some minor problems but original UI also have problems so I don't think we should block the PR because of it.
The only "major" problem is broken dashboard but we can address it in a separate PR (by adjusting the size of the widgets and re-exporting json)

The only thing I would still improve is to rebase commits. But it might be a little bit too complicated for Ricardo, so I'll do it myself later and re-push into this branch.

I also create an issue for a small improvement we can do later: #108

[ricardobaeta]

I also create an issue for a small improvement we can do later: #108

@smacker This is solved by this commit.

[marnovo]

Thanks Ricardo. I failed to run it locally, can I trust typography is consistent across the interface elements?

If so, agreed with @smacker on #106 (comment). Let's merge typography and rebase + quick fix the dashboards afterwards.

[ricardobaeta]

Thanks Ricardo. I failed to run it locally, can I trust typography is consistent across the interface elements?

Source Sans Pro & Source Code Pro is applied and controlled across the typographic interface elements. We still aren't making the most out of variables - the proper way to be consistent - therefore, we might still find some outliers and UI elements affected by hacky typography code work.

Sorting these variables issue has, in my opinion, a strong priority to comprehensively control the consistency and hierarchy of typography embedded on all interface elements.

If so, agreed with @smacker on #106 (comment). Let's merge typography and rebase + quick fix the dashboards afterwards.

I agree with @smacker as well.

[carlosms]

LGTM. Although the new typography changes the height of some elements and there are places where this might not fit.
See for example the top right "edit dashboard" drop down. Or the chevron-down icon next to the language flag.

Before:

After:

[smacker]

@carlosms sorry we were discussing it on slack. Ricardo is aware of that small issues and they will be fixed in next prs. Those things are the

are some minor problems

which I mentioned in my prev comment

[ricardobaeta]

Thanks @carlosms !

LGTM. Although the new typography changes the height of some elements and there are places where this might not fit.
See for example the top right "edit dashboard" drop down. Or the chevron-down icon next to the language flag.

Yes, these are known issues, that we'll be solved in the upcoming PR's.