Formation Global Updates: Update base font size and convert rem value
#987
Conversation
Signed-off-by: Micah Chiang <micahkchiang@gmail.com>
Signed-off-by: Micah Chiang <micahkchiang@gmail.com>
Signed-off-by: Micah Chiang <micahkchiang@gmail.com>
There was a problem hiding this comment.
$text-max-width: 70rem; // Note: USWDS value is 53rem;
$site-max-width: 100rem; // Worksout to about 1000px. USWDS value is 1040px
Here it looks like USWDS deviates from the coefficient ( 10/16 = 0.625). This is an example of a possible arbitrary change made by USWDS. If we know for a fact that the required value is 53rem, and not 43.75rem (.0625 * 70rem = 43.75rem), then this need to be manually calculated.
(will add. util for handling cases like this) :)
There was a problem hiding this comment.
@rmessina1010 We are not trying to match USWDS v3 at this point. We are just trying to convert rems so that they calculate to 16px root font size.
There was a problem hiding this comment.
on line 32, why not use font-size:$uswds-base ; ?
There was a problem hiding this comment.
A worthwhile note about the usage of !default, the keyword makes it so that the value is applied only if the variable name has not been previously defined, or is null. This means that if , in the import order, a previous scss document defines any of these variables, it's the value in the said document that will remain. Just checking this is what's desired.
Signed-off-by: Micah Chiang <micahkchiang@gmail.com>
micahchiang
force-pushed
the
66753-formation-font-size-override
branch
from
3ecc394
to
1dd84f4
Compare
Signed-off-by: Micah Chiang <micahkchiang@gmail.com>
There was a problem hiding this comment.
Deleted. Unused in vets-website, content-build, and doc site.
There was a problem hiding this comment.
Deleted. Unused in vets-website, content-build, and doc site.
There was a problem hiding this comment.
Deleted. Unused in vets-website, content-build, and doc site. We'll have to remove the imports from vets-website. Classes themselves aren't used.
There was a problem hiding this comment.
Same as above. Table instances have been migrated to va-table.
scripts/prepublish.js
Outdated
| } | ||
| // if (branchName !== 'master') { | ||
| // console.log( | ||
| // chalk.yellow( |
There was a problem hiding this comment.
I don't think this was supposed to be checked in.
packages/formation/sass/_shame.scss
Outdated
There was a problem hiding this comment.
line 19 has a typo
it should be max-width: scale-rem(100rem);
There was a problem hiding this comment.
in padding-left: calc(#{scale-rem(2rem)} - 7px);
was the #{..} necessary? it's not an scss variable, this may introduce errors
There was a problem hiding this comment.
This looks correct based on sass documentation and stackoverflow: https://stackoverflow.com/questions/46097871/how-to-use-calc-with-function-inside
When I try to remove that syntax I get an error in vs-code saying that the ending parenthesis was expected.
There was a problem hiding this comment.
Based on some research, it seems like since scale-rem can return a string (e.g. 1rem), keeping that interpolation is the correct thing to do here
There was a problem hiding this comment.
padding-left: 2rem - .9375rem;
was this meant to be a calc()?
if so, the conversion should be scale-rem(calc(2rem - .9375rem));
There was a problem hiding this comment.
I replaced this with padding-left: scale-rem(1.0625rem);
…tment-of-veterans-affairs/veteran-facing-services-tools into 66753-formation-font-size-override
Using Verdaccio to publish this package locally, we can review how these changes look with vets-website.
Description
This PR updates Formation so that it uses the USWDS v3 root font-size which are:
html: 100%body: 16pxIt adds a custom REM conversion function so that we can update the old Formation REM values to the USWDS v3 rem value.
I've started to go through each of the stylesheets and either:
a) wrapped any
remvalues with a conversion function, or,b) created a duplicate of an external libraries stylesheet (this is mostly the USWDS v1 imports), added it to the
/formation-overrides/folder, and wrapped anyremvalues with the conversion function. Then just replaced the old import with the new one. For example.Any place that I have added a
// [x]note means that the stylesheet has been reviewed and updated (if necessary):https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/blob/07305e2d2b4815c98b21be8c23f0bf8f2677b029/packages/formation/sass/core.scss
Note: If a duplicate stylesheet needed to be created for a uswds v1 import, that needs to be added to the minimal stylesheet as well. Here is the related PR for the minimal stylesheet: department-of-veterans-affairs/vets-website#26606
Testing done
Screenshots
Acceptance criteria
Definition of done