Reactist <> Product Library Header Alignment

[nats12]

⁉️ Why

The Header component in Reactist is outdated compared to the ones in our product library. Once aligning we also don't need the size prop (ref).

🗺 Overview

Align Reactist with the header styles in our Global product library, this includes:

• font sizes
• line heights of 120% across all fonts
• all weights should be the same across all fonts
• introducing rem sizing

Figma doesn't support rem sizes out of the box, we have a plugin we need to install to help with this (more below).

✅ Task Breakdown

• [ ] Install the Hand››over plugin (can only be done via the Figma app, not browser)
• [ ] Display rem size of each heading via the plugin
• [ ] Update Reactist levels to reflect correct size
• [ ] Update Reactist line heights to 120%
• [ ] Update Reactist font weights to the same number across headers
• [ ] Deprecate size prop along with any redundant styles/code from this update
• [ ] Link with todoist-web and twist-web to verify nothing is broken

📝 Related documents & discussions

• Twist

[frankieyan]

Relevant discussion: https://twist.com/a/1585/ch/1293/t/5845585/