Doist/reactist

Reactist <> Product Library Header Alignment

nats12 opened this issue · 1 comments

nats12 commented

⁉️ 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