We need to import font- utilities from css-library. This is broadly a two step process:
Update breakpoint names for the font- classes to USWDS v3 equivalents
Comment out the font- import in formation/core.scss, manually publish a new formation release, and then update the version of Formation in vets-website.
Current VADS Name
USWDS v3 Name
xsmall-screen (320px)
mobile (320px)
small-screen (480px)
mobile-lg (480px)
small-desktop-screen (1008px)
desktop (1024px)
large-screen (1200px)
desktop-lg (1200px)
Considerations
In completing #3060 we discovered that "turning off" utility imports, and thereby removing the !Important keyword on corresponding utilities had some unexpected side effects. Specifically, some elements in vets-website still ended up inheriting styles from Formation due to element selector specificity instead of the css-library utilities stylesheet.
If the above happens, we've found most Formation style inheritance ends up coming from va.scss or typography.scss
We won't need to touch the medium-screen breakpoint since we're keeping that in and have manually added it to our utilities.css file.
Likewise, tablet is identical across both stylesheets and doesn't need to be changed, so it isn't included in the table above.
There's a 16px difference between small-desktop-screen and its replacement, desktop, but this shouldn't matter.
Global search in vets-website shows:
nothing for font-style
nothing for font-family
nothing for font-weight
nothing for text-decoration
Global search in content-build shows:
nothing for font-style
nothing for font-family
nothing for font-weight
nothing for text-decoration
Tasks
[ ] Search and replace instances of <vads-responsive-prefix>:vads-u-font- with corresponding uswds v3 name in the table above. Example: xsmall-screen:vads-u-border-bottom--0 becomes mobile:vads-u-border-bottom--0
[ ] run vets-website locally to verify that breakpoints are being applied from css-library utilities.css
[ ] specifically run the proxy-rewrite application and test the injected header and footer
Description
We need to import font- utilities from css-library. This is broadly a two step process:
Considerations
!Important
keyword on corresponding utilities had some unexpected side effects. Specifically, some elements in vets-website still ended up inheriting styles from Formation due to element selector specificity instead of the css-library utilities stylesheet.medium-screen
breakpoint since we're keeping that in and have manually added it to our utilities.css file.tablet
is identical across both stylesheets and doesn't need to be changed, so it isn't included in the table above.small-desktop-screen
and its replacement,desktop
, but this shouldn't matter.Tasks
<vads-responsive-prefix>:vads-u-font-
with corresponding uswds v3 name in the table above. Example:xsmall-screen:vads-u-border-bottom--0
becomesmobile:vads-u-border-bottom--0
utilities.css
Acceptance Criteria