update es-note

[mansona]

This is essentially a "first pass" on the es-note design

I created an issue to track the need for an update to this component: #307

[mansona]

@MelSumner you mentioned on #305 that the current design should be fine but that doesn't make any sense 🤔 there is no such thing as "the current design" any more for anything in the styleguide, as the first thing we did in this redesign process was clear out all of the CSS.

I have updated this PR so that it no longer depends on the new colour pallet and we can improve the design of the <EsNote /> component as part of #307 when we need it for other projects 👍

[MelSumner]

@mansona I'll be more precise next time- I meant the one that exists now on the guides and api docs. It might be helpful to be a little more generous in interpretation, though.

Concerns on this latest update:

• does it stand out enough on the existing gray background?
• do the two backgrounds have enough color contrast between them to pass color contrast checks?

If not, let's just add a brand border on the element. That will help it have enough color contrast to pass muster for now.

[mansona]

@MelSumner so as I mentioned before, this component will need a full design review before it can be used in any project (that's why I created #307) so this PR isn't really trying to get the EsNote ready to be used anywhere.

I updated the design to include the border-radius and border colour that the card uses to try and address the contrast issue (adding a brand colour was a bit too garish 🙈). If this isn't enough I'm happy to just switch it to the brand colour for now as it will be updated soon anyway 👍

[MelSumner]

@mansona since a11y is a hard requirement for any code to merge, let's at least make sure even the thing that is merged today is conformant. We can def iterate from there.

[mansona]

@MelSumner I have bumped the border to the point that it passed the https://webaim.org/resources/contrastchecker/ 👍 I am now satisfied that this is conformant

[MelSumner]

Thank you! 👍