Letter-spacing

[machikoyasuda]

closes #1600

Status: Rebased and Ready for Review

What this PR does

• Remove the old letter-spacing variable, and add letter-spacing percentage variables
• Use CSS calc to calculate letter-spacing: the font-size in rem * the letter-spacing percentage
• Use the type set by the most basic element (like h1, h3) - prefer to not add class or component-level overrides when the type is using the same styles as the already-styled basic elements.

Testing

The browser developer tools shows letter-spacing in pixels. Make sure your Figma is in Dev Mode, with display set to Pixels, so you can compare the Figma's pixels to the browser's pixels.

H1

Desktop	Mobile
1.75px	0.72px

H2: There are 3 kinds of H2's on the app

A regular H2 where the size/letter-spacing don't change responsively, h2, .h2

Desktop	Mobile
0.72px	0.72px

H2 that down-sizes to a P on Mobile, .h2-sm-p

Desktop	Mobile
0.72px	0.9px

H2 that downsizes to font-size 20px on Mobile, .h2-sm

Desktop	Mobile
0.72px	1px

H4

Desktop	Mobile
1px	0.54px

Body, Paragraph

Desktop	Mobile
0.9px	0.9px

Buttons

Desktop	Mobile
0.4px	0.4px

Previous Page

Desktop	Mobile
0.7px	0.7px

[thekaveman]

This is going to cause some pretty significant conflicts with the work in #1626.

Since this is pretty straightforward class changes (and I'm headed out Wed-Fri) can this wait until after #1626 is merged?

[machikoyasuda]

This PR is code complete, but will wait on #1626 for any potential merge conflicts. Will be reviewed after #1626.

[machikoyasuda]

Rebased latest dev

[machikoyasuda]

@thekaveman @angela-tran this PR is rebased with the latest dev and is now ready for review

[machikoyasuda]

@thekaveman @angela-tran Wait sorry no it's not!!! One sec

[machikoyasuda]

@thekaveman @angela-tran Nowwwww ready for review