Style callout delimiters in discussion for HTML output

[mattt]

Fixes #281

This PR adopts the following color coding for annotation types, but I'm very much open to changing this around:

• Error (bug): Pink
• Warning (attention, important, warning): Orange
• Metadata (author[s], copyright, date): Gray
• Informational (everything else): Blue

This doesn't handle custom callouts, but those are Xcode Playgrounds-specific, and the default rendering is good enough.

---

[Lukas-Stuehrk]

Nice addition, @mattt. This is one of the features where you immediately realise how much this was missing before! This makes the use of callouts so much clearer and useful – and also more familiar for users of Apple's documentations.

I think we should change the color values a little bit. I find the general color scheme and which color is used good and reasonable. But for all three callout styles, the rendered text has a contrast ratio to its background of 1 or slightly above. This is not very nice for people with visual impairment. We should try to go with a contrast ratio of at least 4.5.

My suggestion: We can separate the text color and the color of the left border ("accent"). We keep the accent colors with the values of this pull request. And for the text we go with a black that contains some parts of the accent color, so for example:

• text for pink: rgb(78, 0, 41)
• text for orange: rgb(76, 37, 2)
• text for gray: rgb(51, 51, 51)
• text for blue: rgb(0, 0, 73)

[mattt]

@Lukas-Stuehrk Thanks for pointing out the contrast ratios for that and suggesting more accessible alternatives. These look a lot more reasonable:

[mattt]

Still some room for improvement, possibly using text shadows to preserve contrast without compromising the color palette as much. And some work to do to make this work with dark mode (#160 I know, sorry for the delay 🙇). But I think this is good enough for now.