firefox-devtools
Design System: Document DevTools colors
Based on Photon colors
- Dark and light mode variations
- Main UI grays and blue accent
- Blue/magenta/purple primary patterns
- Green/indigo secondary patterns
Hey @violasong, maybe I can get this one! What would be the best way to start or the main goal of the task?
- Come up with a color pallet based in Photon colors
- Add the colors that you mentioned above in the current Photon colors pallet?
- Describe the color usage with the current color we are using in DevTools?
Sorry for so many questions 😄
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 :)
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
I started working on these in relation to breadcrumbs. Happy to share my notes, but they're not that comprehensive yet.
Hey Caterina! Would be great to see what you have so far so that we can think where to put the info.