Centralize px ⮕ rem calculation in a function#2595
Draft
anselmbradford wants to merge 1 commit intomainfrom
Draft
Centralize px ⮕ rem calculation in a function#2595anselmbradford wants to merge 1 commit intomainfrom
anselmbradford wants to merge 1 commit intomainfrom
Conversation
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
We can use a SASS
@functionto do the px ⮕ rem conversion, with the aim to eventually swap it with the native CSS@functionhttps://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@functionChanges
Testing
yarn build && yarn startand compare http://localhost:4000/design-system/components/reference-for-custom-elements to https://cfpb.github.io/design-system/components/reference-for-custom-elementsNote
Some calculations used
$btn-font-sizefor the base font size. I think this maybe came from@cfpb/cfpb-design-system/src/elements/cfpb-button/varsbefore that converted to CSS custom props? At any rate, the only value I saw set for this$base-font-size-px, so I stripped it out in favor of that default.Some calculations used ems. I converted these to rems, but we should scrutinize that this is okay.
Do we actually need these calculations? These are very old and we should scrutinize whether they're still best practice.