accredited-representative-portal: swap css variable imports

[it-harrison]

Note: Delete the description statements, complete each step. None are optional, but can be justified as to why they cannot be completed as written. Provide known gaps to testing that may raise the risk of merging to production.

Are you removing, renaming or moving a folder in this PR?

• No, I'm not changing any folders (skip to TeamSites and delete the rest of this section)
• Yes, I'm removing, renaming or moving a folder

⚠️ TeamSites ⚠️

Examples of a TeamSite: https://va.gov/health and https://benefits.va.gov/benefits/. This scenario is also referred to as the "injected" header and footer. You can reach out in the #sitewide-public-websites Slack channel for questions.

Did you change site-wide styles, platform utilities or other infrastructure?

• No
• Yes, and I used the proxy-rewrite steps to test the injected header scenario

Summary

This PR swaps css variable imports from Formation to CSS-Library in accordance with the deprecation of Formation from vets-website

Related issue(s)

3328

Testing done

• local testing on profile, mhv, and combined-debt-portal

Screenshots

MHV Landing page and Messages

Profile

Combined Debt Portal

Claims Status

Facility Locator

GI

Injected Header

What areas of the site does it impact?

(Describe what parts of the site are impacted if code touched other areas)

Acceptance criteria

Quality Assurance & Testing

• I fixed|updated|added unit tests and integration tests for each feature (if applicable).
• No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs
• Linting warnings have been addressed
• Documentation has been updated (link to documentation *if necessary)
• Screenshot of the developed feature is added
• Accessibility testing has been performed

Error Handling

• Browser console contains no warnings or errors.
• Events are being sent to the appropriate logging solution
• Feature/bug has a monitor built into Datadog or Grafana (if applicable)

Authentication

• Did you login to a local build and verify all authenticated routes work as expected with a test user

Requested Feedback

(OPTIONAL) What should the reviewers know in addition to the above. Is there anything specific you wish the reviewer to assist with. Do you have any concerns with this PR, why?

[nihil2501]

@it-harrison Asked a preliminary question.

[nihil2501]

@it-harrison Could you briefly explain why the change in this file also includes a mixins import? That will help me understand the context better, as I am lacking a little on the frontend architecture for vets-website.

[it-harrison]

hi @nihil2501 the reason for the mixin import is that this file is using the @media mixin which is in the formation shared-variables file but which is not in the css-library variables file; in css-library it is in the file ~@department-of-veterans-affairs/css-library/dist/stylesheets/mixins so there is an extra import

[nihil2501]

LGTM

[nihil2501]

Thanks @it-harrison . Looks like I'll need to get readded too the team that owns this code. Working on that first.

[williamphelps13]

Approving since @nihil2501 got tied up in getting added to that team

[nihil2501]

@williamphelps13 Thanks Will and hello there!