[feature] Extend colors to include shades and tints

[JacobLett]

I often see sites that use a color palette and its various tints/shades throughout the design to create a visual hierarchy. What if we could define a few base color variables that are then extended into various color classes similar to how display heading classes work.

.bg-primary = base color
.bg-primary-1 = lightest tint
.bg-primary-2 = lighter tint
.bg-primary-3 = increase saturation
.bg-primary-4 = shade

Article referenced - https://medium.freecodecamp.com/how-to-construct-a-design-system-864adbf2a117

[bardiharborow]

Ref #18462.

[mdo]

Yeah, I had tried to do this before, but had to punt on it for v4. Maybe in v4.1, but I can't commit to getting to that at this point. Closing for now in hopes of one day swing back around to it.