Improve display of labels (fixes #602)

[Iinh]

Storybook for Label.svelte:

Some notes:
I wanted to find a color palette that is color-blind friendly. This article recommends a few different palettes, and I decided to go with the light colors as I find them fit the best with Protocol. The pill design is largely inspired by Github labels.

To make this component more reusable, such that the same text will get the same color, I generate the label color using an A1Z26 cipher. The text is first turned into a number from 1-9, then from this number we can get a color from the color palette map.

However, if for some reason we want to use a specific color for the pill, we can override the above method by setting a labelNumber number. I did this with the deprecated and expired labels.

I'm not sure if this approach is more complicated than necessary, and I'm open to feedback if there's any way we can improve it :)

Pull Request checklist

• The pull request has a descriptive title (and a reference to an issue it
  fixes, if applicable)
• All tests and linter checks are passing
• The pull request is free of merge conflicts

[wlach]

@hamilton you have some expertise in this area, could you comment on the a11y side of things?

[hamilton]

@wlach asked me to take a look. From an accessibility standpoint, it looks like label-5 has contrast issues with white text. It may be somewhat easier to not allow people to mix and match text + label with this in mind. I don't see any contrast issues with the other ones.

I left some take-or-leave suggestions as well.

[wlach]

This looks great, I defer to @hamilton's suggestions on the tweaks.

I think we may want to define more "types" of labels in the future (ala what you did with expired and deprecated), but I think this implementation is more than good enough to start with.

[Iinh]

Thanks @hamilton and @wlach for reviewing this PR. I fixed the contrast and padding issue, here are the updated labels:

@hamilton If you don't mind could you share the plugin that you used to catch that contrast issue? I couldn't find the same one in the Firefox add-on store. Thanks :)

[hamilton]

@linh my pleasure! It's actually built-in to Firefox devtools – look for "Accessibility" in the tabs.