firefox-devtools / ux

Firefox DevTools UX Community
Mozilla Public License 2.0
103 stars 21 forks source link

Improve error/warning colors in Console's dark theme #12

Closed violasong closed 5 years ago

violasong commented 6 years ago

In dark mode, the warning messages look way brighter than the error messages, but errors should have equal (or more) visual priority. (The colors are lighter versions of the Photon palette, but could use improvement.)

image
natashahockey commented 6 years ago

I'd like to claim this issue for my first UX task πŸ‘

violasong commented 6 years ago

Sounds good! One thing I forgot to mention - we're in the process of improving color contrasts in dark mode, so for this task it would be better to lighten the error color rather than darker the warning color

natashahockey commented 6 years ago

Awesome, I've put together a quick mockup in Sketch. I don't have the correct font you use, so I've gone with Menlo for now. I've used the colour Yellow 60 #d7b600 from the design system to make it darker. Look forward to hearing your feedback on this :)

error warning colour
martinbalfanz commented 6 years ago

I quickly applied the suggested color and I think it looks good!

screen shot 2018-08-27 at 11 36 56

BTW: I believe Menlo is the correct font πŸ™‚

natashahockey commented 6 years ago

Awesome! Glad you’re happy with the suggested solution πŸ˜€

violasong commented 6 years ago

Hi Natasha, thanks for this work! I was actually thinking it would be best to change the red text color to be brighter, rather than changing the yellow color to be darker. Sorry for the confusion!

It could be nice to get the red contrast ratio to 6:1 or above to match other work on raising contrast.

bwinton commented 6 years ago

I thought we switched to San Francisco for the macOS font...

@natashahockey: In theory, you should be able to download all the fonts from links off of the Design System. Please let me know if that doesn't work!

martinbalfanz commented 6 years ago

@bwinton San Francisco in general yes, but not as monospaced font (e.g. for the Console).

For reference from our source code:

:root[platform="mac"] {
  --monospace-font-family: Menlo, monospace;
}

:root[platform="win"] {
  --monospace-font-family: Consolas, monospace;
}

:root[platform="linux"] {
  --monospace-font-family: monospace;
}
fvsch commented 5 years ago

It seems we have updated colors for errors and warnings in the dark theme nowadays (we aligned them with Photon in a few different bugs). @violasong, are these okay and can we close this issue, or should we update them?

screenshot
violasong commented 5 years ago

Yes, this is done β€” thanks for the nice fix for this!