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/