-
Notifications
You must be signed in to change notification settings - Fork 166
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adjust p-nudge to better align text to the baseline grid #4957
Merged
Merged
Changes from 10 commits
Commits
Show all changes
12 commits
Select commit
Hold shift + click to select a range
bc732f0
adjust p-nudge
dgtlntv e5bd94f
Merge branch 'canonical:main' into main
dgtlntv b69c496
Update _base_forms.scss
dgtlntv 62ae512
Merge branch 'main' of https://github.com/dgtlntv/vanilla-framework
dgtlntv 381888f
moved accounting of border to padding
dgtlntv 2acf13a
fix hardcoded value
dgtlntv df3853c
fixed property ordering
dgtlntv 97922d6
Update _base_forms.scss
dgtlntv fb6ff2c
actually it has nothing to do with subpixel rendering
dgtlntv a62c167
Merge branch 'canonical:main' into main
dgtlntv ae2dbf9
revert changes unrelated to the nudge update
dgtlntv 14b9f55
removed extra line
dgtlntv File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why is this only inside a media query? Would such exceptions be needed anywhere else?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@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?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good call, indeed I was zoomed in. Without zoom they both (current Vanilla and this PR) align pretty well.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I removed all non nudge related changes and will create a separate PR for the border related stuff. :)