Convert Less to Sass

[anselmbradford]

Changes

• Convert Less files to Sass and bring in Sass files from Convert Less to Sass design-system#1993

How to test this PR

1. yarn install && yarn build and site should be unchanged.

[contolini]

Needs to read from colors map:

Suggested change

	$tint: #{$value}-bg;
	$light: #{$value}-lt;
	$med: #{$value}-md;
	$tint: map.get($colors-map, #{$value}-bg);
	$light: map.get($colors-map, #{$value}-lt);
	$med: map.get($colors-map, #{$value}-md);

[anselmbradford]

Thank you!

[contolini]

Nice job! Re: our chat about system-ui, I've noticed that some of our apps (TCCP, find a housing counselor) are prioritizing system-ui over Avenir Next, causing the font to be slightly different. Not sure why but something to be aware of.

[wpears]

I've noticed that some of our apps (TCCP, find a housing counselor) are prioritizing system-ui over Avenir Next

This seems like it's because Avenir is only defined in cfpb-typography, vs. system-ui being defined in cfpb-core and both of those apps import core but not typography.

I imagine that sass is choking on it in a way that a less reference import isn't.

Perhaps @use is the solution here?

[anselmbradford]

Updated to v3 DS. Try it now. Thanks!

[anselmbradford]

Erp I'll need to fix the jest tests so they don't try to scoop up the scss files, but the site can still be checked locally.

EDIT: fixed it with moduleNameMapper config.

[contolini]

Tests and looks great!