Uswds: [Colors]: Add helper classes for text and background colors

[maya]

Description

It would be useful to have all the standards colors accessible for text and background colors as classes. It would make prototyping layouts and components much quicker too.

You could potentially consider ensuring the background colors use accessible text colors, but not sure if that's a must have since multiple colors could be accessible for a single background color.

[shawnbot]

I'm queueing this up for v1.2. Thanks, @maya!

[shawnbot]

This would also be a good chance to do #960.

[sawyerh]

I should be able to share more soon 😄 but wanted to jump in and +1 this. We've created utility classes for WDS background and text colors in our design system for HealthCare.gov and they've been handy for prototyping and beyond. Once we make the repo public, I'll be sure to ping y'all.

[shawnbot]

We could pretty easily do this with a Sass map and an @each loop:

$colors: (
  primary: $color-primary,
  primary-alt: $color-primary-alt
);

@each $name, $color in $colors {
  .usa-fg-#{$name} { color: $color; }
  .usa-bg-#{$name} { background-color: $color; }
}

[maya]

Done, preview: https://federalist-proxy.app.cloud.gov/preview/uswds/uswds-site/add-utility-docs/utilities/color/.