codyhouse/codyhouse-framework

Text component vertical space changed in v3

danis039 opened this issue · 3 comments

danis039 commented

Hi guys,

I've just migrated to v3 and noticed there's a change in the vertical space of text component.

v2:

.text-component p {
    margin-bottom: calc(var(--space-unit) * 0.75 * var(--text-vspace-multiplier, 1));
}

v3:

.text-component p {
    margin-bottom: calc(var(--space-unit)*.9375*var(--text-space-y-multiplier, 1));
}

Was this change intentional? Because in order to keep the same layout of my text components I need to alter my --text-space-y-multiplier/--text-vspace-multiplier values.

Cheers!

sebastiano-guerriero commented

Hi Daniel!

Yes, it was intentional. Because we moved from Em to Rem units in v3, the vertical spacing was no longer affected by the font size, so we had to increase a bit the spacing factor.

If you upgraded to v2 and kept the Em units in your project, as you already mentioned, it would be a good idea to modify the --line-height-multiplier and --text-space-y-multiplier variables.

If you're using Rem units, you can modify the variables mentioned above, or the --space-unit , in your custom-style/_typography.scss file.

.text-component {
  --line-height-multiplier: 1;
  --text-space-y-multiplier: 1;
  
  > * { // use Em units
    --text-unit: 1em;
    --space-unit: 1em;
  }
}

Cheers

danis039 commented

Thanks for the info, @sebastiano-guerriero :) Just out of curiosity, why the move to rem units (since you had this nice em unit system in place)?

sebastiano-guerriero commented

no prob! This decision was mostly due to the problems in handling horizontal spacing when using Em units (e.g., if you have two text elements stacked vertically, with two different font sizes, and you want to set the same left padding using utility classes). However, we've preserved the best (old) Em features using CSS variables :) More info here: https://codyhouse.co/blog/post/codyframe-3-0#space-type

Cheers

  • 🎉1