Normalize font styles to use typography mixins

[brad-decker]

Attempt at normalizing all existing font styles to use our typography settings from the design system. I have added comments to all lines that I believe to result in changes to the presentation of the extension with screenshots of the changes

depends on:

1. Add euclid fontface #9018
2. Update css folder structure #9071
3. Use mixins for typography instead of placeholder selectors #9072
4. Update font family globally #9073

[metamaskbot]

Builds ready [51a842b]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (566 ± 30 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	27	37	31	3	2
		domContentLoaded	321	657	565	63	30
		load	322	658	566	63	30
		domInteractive	321	656	565	63	30

[brad-decker]

Update fonts

[metamaskbot]

Builds ready [b2b83a7]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (608 ± 35 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	30	102	40	15	7
		domContentLoaded	355	743	607	73	35
		load	356	745	608	73	35
		domInteractive	354	743	607	73	35

[brad-decker]

Believe we should be using font-size 16 for text, but this could also be a H6

Before

After

[Gudahtt]

Both seem OK to me! @rachelcope , thoughts?

[rachelcope]

I think in the designs we've moved towards font-size 14 for subheader text. The font-size 16 looks a little big here. Is the default paragraph styles font-size 16?

[brad-decker]

@rachelcope paragraph styles match the figma design system at 1REM / 16px. Is this a subtitle or text? Cause its labeled as text, but happens right under a title so could be a subtitle too lol

[Gudahtt]

Regarding the origin shown during the connect flow, I believe that size changed in an earlier PR. The current designs in Figma are inconsistent on size (it's 14px in some places, but 12px in most). I do prefer it at the larger size though, as we should be drawing user's attention to it, since it's the single trustworthy thing we know about the initiator.

[metamaskbot]

Builds ready [b4d5ba9]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (613 ± 27 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	30	43	37	4	2
		domContentLoaded	394	713	612	57	27
		load	396	714	613	57	27
		domInteractive	394	713	611	57	27

[metamaskbot]

Builds ready [eb0974c]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (605 ± 56 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	30	88	42	15	7
		domContentLoaded	335	736	603	116	56
		load	336	738	605	116	56
		domInteractive	335	736	602	116	56

[metamaskbot]

Builds ready [27a440c]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (425 ± 63 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	28	82	37	11	5
		domContentLoaded	257	602	423	132	63
		load	259	603	425	132	63
		domInteractive	257	601	423	132	63

[metamaskbot]

Builds ready [a76ce2a]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (536 ± 78 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	38	116	68	27	13
		domContentLoaded	346	820	534	162	78
		load	347	823	536	162	78
		domInteractive	345	820	533	162	78

[brad-decker]

@rachelcope the font-weight of 500, medium, has almost no effect and font-weight 600 is almost the same as bold. This is font-weight 600.

Is this what it should look like?

[brad-decker]

@rachelcope a new commit changes the button on asset pages font-weight to medium and fixes the sizing of the dapp URL. I'm waiting for some feedback from you on the account name bold issue and I am gonna do the typography stuff for Material UI in a separate PR to keep like things grouped together.

[rachelcope]

On the Account name, Font-weight 600 looks too bold to me. Is font-weight 500 slightly more bold than it was before? I would go with that.

Also, @Gudahtt had commented that the dapp url shouldn't be made smaller because that is the only place where a user can verify the origin. I forgot we had had that conversation before, but I will go with Mark's suggestion of not making it smaller.

Lastly, there are inconsistencies between what is outlined in the figma design system paragraph styles (16px) and what we actually use in the designs (I seem to always use 14px, because 16px seems too big for our screen real estate). I'm of the opinion that think we should update paragraph styles (across figma and css styles) to be 14px. @cjeria any thoughts about this?

[metamaskbot]

Builds ready [3f3d832]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (468 ± 74 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	31	90	46	18	9
		domContentLoaded	267	768	466	153	74
		load	269	769	468	153	74
		domInteractive	267	768	466	153	74

[brad-decker]

@rachelcope if we make that change (paragraph font size) I'd like to do so in a new PR. The change implies a few different paths:

1. Changing Paragraph to be size 14px.
2. Finding all places in the code where we SHOULD be using font-size 14 instead of 16 and changing them.

That's going to be quite a lot to review and QA in addition to the QA efforts already done on this PR. I think an audit of where we are using font-size 16 would be warranted (its a lot) so we can see the potential impact of reducing to 14px... also not all places we're using font-size 16px should change. H5 is 16px.

This leads me to another point: It's very confusing to have two typography settings with the same font-size. Regardless of what you decide my opinion is you should eliminate one heading level:

H1
H2
H3
H4
H5
Paragraph (14px), replacing H6 (14px)
H6 - now 12px
H7 - Now 10 px
H8 - Now 8px

furthermore having H levels beyond 6 is confusing, at least to me due to the lack of an <h7> tag in HTML. Having H levels lower than paragraph also is slightly confusing.

H1 - 48px (new)
H2 - 40px
H3 - 32px
H4 - 24px
H5 - 18px
H6 - 16px
Body - 14px
Body 2 - 12px
Discliamer - 10 px
Label - Now 8px

is a stab in the dark of something with slightly more taxonomy and meaning, but I am open to whatever you think is best-- as long as we can do that and make those changes in a future PR because it will, again, drastically lengthen the QA window on this PR which was meant to avoid stylistic changes as much as possible.

[rachelcope]

@brad-decker makes sense to do the fonts in a different PR. I totally agree with the H6, H7, H8 not making sense. I like your suggestion. We might rethink if we need styles for 12px, 10px, and also 8px or if we could consolidate

[brad-decker]

alright i reverted the change to the URL size on permissions screen

This is font-weight 500 on account name:

600 looks like the screenshot above and is not different than 700 :/

[rachelcope]

Font-weight 500 on LGTM!

[metamaskbot]

Builds ready [58723df]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (488 ± 62 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	29	102	61	27	13
		domContentLoaded	347	806	486	129	62
		load	349	807	488	129	62
		domInteractive	347	806	486	129	62

[brad-decker]

@Gudahtt I'm not sure when we want this to land but it's ready for review. I think I responded to all your feedback.

[metamaskbot]

Builds ready [c24244d]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (516 ± 67 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	27	78	38	11	5
		domContentLoaded	315	729	514	140	67
		load	317	730	516	140	67
		domInteractive	315	728	514	140	67

[brad-decker]

this PR has been broken apart into pieces for further review and consideration for merge:

1. expose variables for typography sizes #9693
2. normalize UI component font styles #9694
3. normalize app component font styles #9695
4. normalize deprecated itcss font styles #9696
5. normalize page font styles #9697