Update tailwind.config.js

[annedino4]

Added new colours and changed some old colours with the new colourful tree design in mind. See below file for reference:
https://www.figma.com/file/w8RpeMkOo63As4k50y4ezt/Primer-Design-Library-22?node-id=0%3A1

[dhess]

This should probably be called tertiary.

[dhess]

@annedino4 This PR appears to be based on an old PR of George's, so I'm going to rebase it.

[dhess]

We're unable to use Chromatic right now due to breakage, which is unfortunate as this PR is exactly the sort of thing it's good at, but oh well. I've made screenshots instead, which I'll share here.

I think secondary-hover is too close to primary now:

[dhess]

On a related note, the secondary red color is now more red than "salmon." I think we chose the more pink-ish red for warnings & holes because it looks less like an error, so what's the thinking in moving towards red?

[annedino4]

On a related note, the secondary red color is now more red than "salmon." I think we chose the more pink-ish red for warnings & holes because it looks less like an error, so what's the thinking in moving towards red?

We use that colour for tiny text (undo) which is not suitable contract-wise. It is safer and more versatile using a darker colour for warning. How about below?

[dhess]

It's a good point about the contrast of the "undo" text, but personally I really dislike those brown-ish colors for warnings, especially as they're going to be fairly commonly used.

What if, instead, we kept the current warning color since it looks nice as a button/hole color, and instead make the Undo and Redo buttons on the toolbar solid colors like our other buttons? Then we can use white text against the background and everything is fine. It's also more consistent with our other buttons, including the tree/text button that's also on the toolbar.

[dhess]

Alternatively, there's no reason we can't use red-primary for the Undo button (including the text) so that it has better contrast.

[annedino4]

Alternatively, there's no reason we can't use red-primary for the Undo button (including the text) so that it has better contrast.

Yes I agree, I'll update the document.

I have also explored using dark text on the salmon colour, as small white text on the salmon background failed the contrast check as well.

We could make sure going forward, we (1) Don't use the salmon colour for text and (2) Always use dark text against the salmon coloured background?

[dhess]

Hmm, that is unfortunate that the salmon color with white text doesn't pass the check, because I think it would be out of place if it were the only button color without white text. Can we explore some more orange-ish options that pass the test with white text?

[annedino4]

Hmm, that is unfortunate that the salmon color with white text doesn't pass the check, because I think it would be out of place if it were the only button color without white text. Can we explore some more orange-ish options that pass the test with white text?

Sorry, the background colour needs to be "dark enough" to display small white text to pass the check, see below for avalible colours:

Alternatively, we could follow the style of a standard action button, rendering the bloder the warning colour

[dhess]

I think I prefer the 2nd row (#CD3864 and #7E213B). You?

[annedino4]

I think I prefer the 2nd row (#CD3864 and #7E213B). You?

Yes happy to go with that! I will update the colours accordingly.
Now since the warning colour create no issues displaying small text, components effected will remain using the warning colour :

[dhess]

I will pick this up and take it over the line. In light of our decision to create a separate high-contrast theme, some of the changes here may not be necessary.