search

firefox-devtools / ux

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

Design System: Document DevTools colors #15

Open violasong opened 5 years ago

violasong commented 5 years ago

Based on Photon colors

thiagotomasi commented 5 years ago

Hey @violasong, maybe I can get this one! What would be the best way to start or the main goal of the task?

Sorry for so many questions 😄

violasong commented 5 years ago

Hi Thiago, thanks, these are great questions!

The main idea is to add DevTools-specific colors to the Photon color page, and also document DevTools color patterns. If you fork this repository, this is the file we propose changing. I'm not sure if it would be better to make a DevTools section in that page, or add our special colors into the Blue, Green, etc sections. Could be best to start with a DevTools section to make things simpler? cc: @bwinton.

Here is the css file with all the DevTools colors. @gl and others in the DevTools Slack are very familiar with this set of variables and can help.

The best place to start documenting is the dark mode syntax coloring, which I believe are all new to Photon: --theme-highlight-green, etc. Also, the "intermediate colors" (names ending in '5') would be great to include. Inspecting the Inspector as explained in the readme could be helpful for some of these color tasks. I know @caterinasworld also started jotting down some notes about the main UI grays and blues that could be helpful :)

violasong commented 5 years ago

It would probably be best to move conversations about this issue over to the design system project: https://github.com/devtools-html/photon/issues/8

caterinasworld commented 5 years ago

I started working on these in relation to breadcrumbs. Happy to share my notes, but they're not that comprehensive yet.

violasong commented 5 years ago

Hey Caterina! Would be great to see what you have so far so that we can think where to put the info.