style: override ace edit error icon

[nytai]

SUMMARY

replace the ace editor gutter error icon with the SIP-34 error icon.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

before:

after:

TEST PLAN

• 👀

ADDITIONAL INFORMATION

• Has associated issue:
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[rusackas]

'error-solid-small' and 'error-solid' are already available in the Icon component, and respect currentColor - would that be sufficient for this use case?

[nytai]

@rusackas I don't think it's possible to override a background-image css property any other way. Fill color cannot be applied to an svg when it's a background image (not in the dom).

[rusackas]

@nytai correct... but I'd be half tempted to try the CSS mask trick outlined here:
https://codepen.io/noahblon/post/coloring-svgs-in-css-background-images

It won't work in IE, so those users simply won't see red. But if this does work well enough, then it can even be done in Emotion to use the Theme color. Fancy!

Probably getting a bit into the weeds, but if that kind of hack doesn't work, we should at least find a way to namespace these around existing icons (from the Design System). Maybe then we could even come up with a cool script to generate all the semantic color flavors of each Design System icon.

[nytai]

I spent some time trying to get the mask to work, but instead the line number disappeared and the entire svg assets was rendered as red.

This change is really only meant to be a quick fix for overriding a 3rd party library. I think this case is the exception rather than the norm. I'd rather not spend too much time optimizing for a problem we don't yet have. We can always revisit this if it does become an issue.