Adjust p-nudge to better align text to the baseline grid

[dgtlntv]

Done

• changed all text nudges that previously had a nudge of 0.4rem to 0.375rem to align default text (and some headings) better to the baseline grid
• I tried to test most of the things that depend on p-nudge
  • While doing that I found a couple of misalignments to the baseline grid (that also existed for the previous nudges)
• One small drive-by typo fix

QA

• Check out all the components that depend on p-nudge and see if they align properly to the baseline grid.
  • eg. default text, some headings, input fields, buttons etc.

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

Before

After

[webteam-app]

Demo starting at https://vanilla-framework-4957.demos.haus

[dgtlntv]

The problem of 1.5px being subtracted from the padding at lower pixel density screens could be circumvented by subtracting either 1.5px or 1px, depending on whether the device supports the display of a 1.5px border, by checking the pixel density of the device.
I am not sure if that'd be too hacky though.

padding-bottom: calc($input-vertical-padding - $input-border-thickness);
@media only screen and (max-resolution: 1.99dppx) {
   padding-bottom: calc($input-vertical-padding - 1px);
}

[lyubomir-popov]

Fine by me, @bartaz please review

[bartaz]

Why is this only inside a media query? Would such exceptions be needed anywhere else?

[dgtlntv]

That is true. We actually would need to do this everywhere where $input-border-thickness has to be accounted for in the components padding. I wonder if the media query should actually should just be moved to the original definition of $input-border-thickness?

[bartaz]

I don't think we can. SCSS variables need value defined on build time, we can't make this value dependent on media query.

If media query is needed we need to do it on component level.

But why is this value different of different dppx?

[dgtlntv]

Ah I see that is unfortunate.

On low pixel density devices the 1.5px border is computed as 1px.
If we use the $input-border-thickness variable in the calculation and the user is on a low pixel density screen then the border is rendered as 1px, but we still subtract 1.5px from the padding which will throw off the baseline grid alignment.
So the easiest solution I could come up with to solve this issue is to check if the screen is capable of displaying 0.5px steps (which should be everything >1.99dppx).

[bartaz]

@dgtlntv thanks, now I see you actually explained it in a comment earlier.

Overall the media query solution is not very hacky by itself, but the problem is that it needs to be done everywhere where we substract border from padding separately. Adding even more confusing complexity.

We don't seem to be doing this right now (while using 1.5px border). So would it be fine (I know it's not ideal), to keep it as is (1.5px regardless of density)? Does it throw the baseline grid off enough that it matters?

[dgtlntv]

They are not really connected, so we could definitely separate them out in several PR's I just combined them here, since they all relate to more accurately align to the baseline grid. But I can focus this PR on adjusting the nudge and creating a new one for the border.

[dgtlntv]

That is strange. Are you zoomed in by any chance? Browser zoom scales changes border values afaik.
Because onMyMachine™ it aligns perfectly both on low and high pixel density screens.

[bartaz]

Good call, indeed I was zoomed in. Without zoom they both (current Vanilla and this PR) align pretty well.

[bartaz]

They are not really connected, so we could definitely separate them out in several PR's I just combined them here, since they all relate to more accurately align to the baseline grid. But I can focus this PR on adjusting the nudge and creating a new one for the border.

I have no problem with nudge value update, so if we can separate it, it can be merged right away.

As for the border adjustments between screen densities we would need to identify all the places where it's needed and find a way to make this work without too much overhead.

[dgtlntv]

I removed all non nudge related changes and will create a separate PR for the border related stuff. :)

[bartaz]

Thanks