CSS Library - Swap shared-variables import

[micahchiang]

Description

One of the last remaining things we need to do to get off of Formation is swap the shared-variables import that all applications use. In most instances this is a one line change that updates the import path.

There are some applications that will require variable name updates, for example: the ask-va-too app uses a $color-gray-lightest that css-library doesn't have, and this instead needs to be swapped to var(--vads-color-base-lightest).

Some applications will need additional imports from css-library because css-library/dist/tokens/variables no longer imports mixins and functions like formation/shared-variables did. For example: the caregivers application requires css-library/dist/stylesheets/mixins because one or more of it's partials uses this media mixin. Some applications will also need to import css-library/_functions.scss because they rely on the units() and/or units-px() function, such as several profile partials.

Considerations

• Draft PR with all necessary updates for each application
• Given the breadth of this work, multiple PRs may be required, it could be worthwhile to have more than 1 engineer contribute to this.

Tasks

• Update shared-variables import path from ~@department-of-veterans-affairs/formation/sass/shared-variables to ~@department-of-veterans-affairs/css-library/dist/tokens/variables
• Where necessary, add an import for ~@department-of-veterans-affairs/css-library/dist/stylesheets/mixins
• Where necessary, add an import for ~@department-of-veterans-affairs/css-library/dist/stylesheets/functions
• Test locally to ensure breakpoint styles continue to work, indicating variables are being properly read from css-library

Acceptance Criteria

• Above tasks have been completed

[caw310]

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @powellkerry @rsmithadhoc

[it-harrison]

This will carry-over due to the large number of PRs that needed to be created and the difficulty in getting approvals for all of them.

[it-harrison]

Vets-website has been updated and all PRs merged. An announcement has been made to vfs frontend devs.

[micahchiang]

woohoo! Thanks Ian!