Add utility classes for all the colors

[shawnbot]

Right now we've got a smattering of colors available in cryptically named utility classes like text-gray-dark ($gray-900) and bg-green-light ($green-100). We'd like to make the full color palette available as foreground and background utilities, i.e. as .text-gray-9 and .bg-green-1.

We're aiming for parity with Primer Components, which expose "theme-aware" props for foreground and background:

• color="blue.4" is equivalent to color={theme.colors.blue[4]}
• bg="gray.1" is equivalent to bg={theme.colors.gray[1]}

and in which our theme's colors object contains arrays of values for each hue. The $hue-X00 naming scheme is (in @broccolini's words) an artifact of a previous color scheme, so we'd like to eventually — and in a semver-friendly way — rename or alias these to $hue-X so that they match the utility class names.

In other words, something like:

// in support/variables/color-system.scss
$gray-000: $gray-0;
$gray-100: $gray-1;
// ...
$gray-900: $gray-9;

// in utilities/colors.scss
.bg-gray-0 { background-color: $gray-0 !important; }
.bg-gray-light,
.bg-gray-1 { background-color: $gray-1 !important; }
// ...
.bg-gray-dark,
.bg-gray-9 { background-color: $gray-9 !important; }

We'll probably still suggest the use of -light and -dark utilities for general use, and to reduce the confusion around which shade of a given hue can/should be used in most contexts. But this change will make it easier to track down which shade those utilities use, and offer a broader palette on which new components can be built in HTML alone.

[simurai]

Shipped in #760