diff options
Diffstat (limited to 'devtools/docs/user/devtoolscolors/index.rst')
| -rw-r--r-- | devtools/docs/user/devtoolscolors/index.rst | 207 |
1 files changed, 207 insertions, 0 deletions
diff --git a/devtools/docs/user/devtoolscolors/index.rst b/devtools/docs/user/devtoolscolors/index.rst new file mode 100644 index 0000000000..68a54a1d62 --- /dev/null +++ b/devtools/docs/user/devtoolscolors/index.rst @@ -0,0 +1,207 @@ +============== +DevToolsColors +============== + +.. warning:: + **Firefox developers**: Don't change any of these values without UX approval. If any of these values need to be changed, you will need to change some CSS code in ``/browser/themes/*/devtools/``. File a DevTools bug accordingly. + + +This chart lists colors and CSS variables as implemented in the dark theme and light theme for developer tools. + +.. |br| raw:: html + + <br/><br/> + +.. list-table:: + :widths: 25 22 22 31 + :header-rows: 1 + + * - + - Dark Theme + - Light Theme + - CSS Variables + + * - **Chrome Colors** + - + - + - + + * - **Tab Toolbar** + - #252c33 |br| + rgba(37, 44, 51, 1) + - #ebeced |br| + rgba(235, 236, 237, 1) + - ``--theme-tab-toolbar-background`` + + * - **Toolbars** + - #343c45 |br| + rgba(52, 60, 69, 1) + - #f0f1f2 |br| + rgba(240, 241, 242, 1) + - ``--theme-toolbar-background`` + + * - **Selection Background** + - #1d4f73 |br| + rgba(29, 79, 115, 1) + - #4c9ed9 |br| + rgba(76, 158, 217, 1) + - ``--theme-selection-background`` + + * - **Selection Text Color** + - #f5f7fa |br| + rgba(245, 247, 250, 1) + - #f5f7fa |br| + rgba(245, 247, 250, 1) + - ``--theme-selection-color`` + + * - **Splitters** + - #000000 |br| + rgba(0, 0, 0, 1) + - #aaaaaa |br| + rgba(170, 170, 170, 1) + - ``--theme-splitter-color`` + + * - **Comment** + - #5c6773 |br| + rgba(92, 103, 115, 1) + - #747573 |br| + rgba(116, 117, 115, 1) + - ``--theme-comment`` + + * - **Content Colors** + - + - + - + + * - **Background - Body** + - #14171a |br| + rgba(17, 19, 21, 1) + - #fcfcfc |br| + rgba(252, 252, 252, 1) + - ``--theme-body-background`` + + * - **Background - Sidebar** + - #181d20 |br| + rgba(24, 29, 32, 1) + - #f7f7f7 |br| + rgba(247, 247, 247, 1) + - ``--theme-sidebar-background`` + + * - **Background - Attention** + - #b28025 |br| + rgba(178, 128, 37, 1) + - #e6b064 |br| + rgba(230, 176, 100, 1) + - ``--theme-contrast-background`` + + * - **Text Colors** + - + - + - + + * - **Body Text** + - #8fa1b2 |br| + rgba(143, 161, 178, 1) + - #18191a |br| + rgba(24, 25, 26, 1) + - ``--theme-body-color`` + + * - **Foreground (Text) - Grey** + - #b6babf |br| + rgba(182, 186, 191, 1) + - #585959 |br| + rgba(88, 89, 89, 1) + - ``--theme-body-color-alt`` + + * - **Content (Text) - High Contrast** + - #a9bacb |br| + rgba(169, 186, 203, 1) + - #292e33 |br| + rgba(41, 46, 51, 1) + - ``--theme-content-color1`` + + * - **Content (Text) - Grey** + - #8fa1b2 |br| + rgba(143, 161, 178, 1) + - #8fa1b2 |br| + rgba(143, 161, 178, 1) + - ``--theme-content-color2`` + + * - **Content (Text) - Dark Grey** + - #667380 |br| + rgba(102, 115, 128, 1) + - #667380 |br| + rgba(102, 115, 128, 1) + - ``--theme-content-color3`` + + * - **Highlight Colors** + - + - + - + + * - **Blue** + - #46afe3 |br| + rgba(70, 175, 227, 1) + - #0088cc |br| + rgba(0, 136, 204, 1) + - ``--theme-highlight-blue`` + + * - **Purple** + - #6b7abb |br| + rgba(107, 122, 187, 1) + - #5b5fff |br| + rgba(91, 95, 255, 1) + - ``--theme-highlight-purple`` + + * - **Pink** + - #df80ff |br| + rgba(223, 128, 255, 1) + - #b82ee5 |br| + rgba(184, 46, 229, 1) + - ``--theme-highlight-pink`` + + * - **Red** + - #eb5368 |br| + rgba(235, 83, 104, 1) + - #ed2655 |br| + rgba(237, 38, 85, 1) + - ``--theme-highlight-red`` + + * - **Orange** + - #d96629 |br| + rgba(217, 102, 41, 1) + - #f13c00 |br| + rgba(241, 60, 0, 1) + - ``--theme-highlight-orange`` + + * - **Light Orange** + - #d99b28 |br| + rgba(217, 155, 40, 1) + - #d97e00 |br| + rgba(217, 126, 0, 1) + - ``--theme-highlight-lightorange`` + + * - **Green** + - #70bf53 |br| + rgba(112, 191, 83, 1) + - #2cbb0f |br| + rgba(44, 187, 15, 1) + - ``--theme-highlight-green`` + + * - **Blue-Grey** + - #5e88b0 |br| + rgba(94, 136, 176, 1) + - #0072ab |br| + rgba(0, 114, 171, 1) + - ``--theme-highlight-bluegrey`` + + * - **Yellow** + - #ffffb4 |br| + rgba(255, 255, 180, 1) + - #ffffb4 |br| + rgba(255, 255, 180, 1) + - ``--theme-highlight-yellow`` + + +.. warning:: + Not yet finalized. See `bug 916766 <https://bugzilla.mozilla.org/show_bug.cgi?id=916766>`_ for progress. |