creative + product coloring

[snide]

Summary

Updates EUI colors to match more against brand.

Checklist

- [ ] This was checked in mobile
- [ ] This was checked in IE11

• This was checked in dark mode
  - [ ] Any props added have proper autodocs
• Documentation examples were added
• A changelog entry exists and is marked appropriately
  - [ ] This was checked for breaking changes and labeled appropriately
  - [ ] Jest tests were updated or added to match the most common scenarios
• This was checked against keyboard-only and screenreader scenarios
  - [ ] This required updates to Framer X components

[snide]

Hey all. We got together with @JessSmithSup to get our color schemes closer to brand. These all pass the same AA checks they did before, but the colors were cooled a bit. Biggest change is the addition of some blue hues to our grays and an overall brightening of the palette.

If anyone has any comments or concerns, give a yell. We'll merge this sometime in the next week and its very easy to adjust.

[cchaos]

Man, it is so nice to have all these documented so it's easy to see how the color affects all the components.

Important changes needed

1. Fix horizontal steps background

2. Let's make the bottom border of the selected double 2px high. It's hard to see.

3. Form control placeholder text

4. Disabled switch and checkbox/radios compared to their label color (so close, they maybe should be the same)

Slightly less important (can wait)

a. Remove $euiColorSlightHue

b. I think the highlight colors we use now (lighter color of primary) are really close to the grays and can probably just switch to using a gray

Same with the sub-steps:

And table footers

c. Do we need to be darkening buttons on hover? I think the movement and underline is enough. It takes away from the nice colors.

d. Should the primary badge be lightly more blue?

e. May want to revisit some code coloring and make it so it's more of permutations on the existing colors and not hard-coded hex values

Docs only

i. Update the little previews

ii. Do the color palettes need to be updated too?

---

I'm not even getting into dark mode right now

[snide]

I think the highlight colors we use now (lighter color of primary) are really close to the grays and can probably just switch to using a gray

Not sure I agree with gray, but we can probably saturate them more or something. The focus is important for lots of places beyond this example. Agree it needs some work.

Do we need to be darkening buttons on hover? I think the movement and underline is enough. It takes away from the nice colors.

Somewhat there for accessibility to give another point of reference, but it doesn't need to be there. I can try removing.

Should the primary badge be lightly more blue?

Or should default be something else?

Rest of these I agree with and can adjust.

[cchaos]

Yeah both the hover color and badge statements were more along the lines of "these are now very close in color and maybe should be tweaked in some fashion".

I'd like to see the buttons without the darker hover state.

[snide]

@cchaos This is ready for another gander. Everything but the buttons were addressed.

[snide]

OK. Think we're good on this.

[cchaos]

Thanks!

[gjones]

I'm good with these, I'm unable to test in cloud yet, so once its merged I'll pull in and scramble.