Formation Deprecation - CSS Library Utility class rename

[micahchiang]

Description

In order to prevent disruption in the switch from Formation to css-library, we need to maintain the existing utility naming convention. This can be done at the same time as #2538, but won't really be testable until that ticket is finished.

Considerations

• Current utility naming conventions include the prefix vads-u-, followed by the css property, and then suffixed with --<unit-value for example border top is vads-u-border-top--1px.
• We currently rely on uswds theme settings to generate utilities for us.
• We should be able to change our utility settings to get what we need. Taking borders as an example again, this is what we currently have in css library:

  $u-border-base: (
  border: (
  base: 'vads-border',
  modifiers: (
    noModifier: '',
    'top': '-top',
    'right': '-right',
    'bottom': '-bottom',
    'left': '-left',
  ),
  values: map-collect($tokens-border),
  settings: $border-settings,
  property: 'border',
  type: 'utility',
  ),
  );

  This currently outputs a list of classes that looks like this: vads-border-top-1px

• Updating the base property with vads-u-border should get us the prefix.
• Updating the property names in tokens/border.scss to include a - prefix might get us what we need for our existing suffix convention. Experimentation may be required
• We'll have to check that all the utility classes generated from css library cover existing use cases provided by formation. For example if Formation gives us a vads-u-border-top--2p5px utility class, then the same should be generated in css library
• Documentation on our current utility classes

Tasks

• [ ] update naming convention settings in all css-library utility class functions.
• [ ] Test updates with verdaccio in vets-website

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 @nickjg231 @powellkerry @rmessina1010 @rsmithadhoc

[jamigibbs]

Here is the ESLint rule that was written to map the Formation utility names to the new utility names that might be helpful: https://github.com/department-of-veterans-affairs/veteran-facing-services-tools/issues/900