Support multi-color icons 🌈

[jattasNI]

😯 Problem to Solve

The design team has started providing icons with colored accents but our current icon strategy relies on setting the SVG fill to a single color. We'll need a way to specify multiple colors for an icon.

We also need to figure out whether the accent colors might need to change in response to themes or icon states like error and warning. Original thread.

💁 Proposed Solution

I think @rajsite had ideas about how to leverage SVG features to make this happen, but I don't recall what they were.

[rajsite]

The super power of our icon approach is that the SVG DOM is inline with the HTML DOM and we can use CSS to target it. So in devtools I added a style that customizes the fill inside this svg:

You can also set class="blah" on svg elements as well and target that from CSS selectors. We have a lot of flexibility there. We just need to see how to minimize the maintenance burden, ie get illustrator to emit useful classes or something so we don't have to hand edit the svg build output.

[jattasNI]

Brandon confirmed that we'll want all the colors of an icon to change with theme and with icon status (error/warning/etc). There will be a straightforward mapping from the original SVG colors to a themed color. We'll have to add a bit of tooling to our generation scripts to annotate the original SVG to indicate which theme color should apply to each part.

In the near term Brandon is OK making the multicolored icons monochromatic. The accents are intended to add some pop to our apps but aren't necessary to convey meaning (since using color for that purpose wouldn't be very accessible).

[jattasNI]

We added our first multicolor icon for #2046 but for now it uses fixed colors and doesn't respect theme or status. Brandon suggested that we'll probably want at least different colors for each theme, although the priority of doing that is still TBD.