Consider enforcing scss values

[katydecorah]

Is your feature request related to a problem? Please describe.

While working on https://github.com/microsoft/accessibility-insights-web/pull/5158, I noticed that the values of font-weight for semibold text varied: 600 or $fontWeightSemiBold. This does not present a bug, but by using variables ($fontWeightSemiBold) we have the potential for reducing human error and making the stylesheets more adaptable to global changes.

Describe the desired outcome

Introduce patterns to writing scss that are ideally enforced through tests, such as stylelint. For example, with stylelint-declaration-strict-value we could enforce that font-weight always uses a variable.

Describe alternatives you've considered

• Manually update property values to a consistent pattern. (However, without tests we risk regression.)
• We could do nothing! As described, this work would be an investment that could help us write scss more efficiently (re: not needing to manually update values because swapped in variables) in the future.

Additional context

I haven't yet investigated if there are other property values that should enforce a value. I think performing an audit of scss files and variables would be a good first step in determining scope, especially if we want introduce tooling like stylelint.

[ghost]

This issue has been marked as ready for team triage; we will triage it in our weekly review and update the issue. Thank you for contributing to Accessibility Insights!

[DaveTryon]

Make this a guideline for SCSS changes (already in OneNote)