1 files changed, 203 insertions, 0 deletions
diff --git a/devtools/client/themes/variables.css b/devtools/client/themes/variables.css
new file mode 100644
index 000000000..84f9282a6
--- /dev/null
+++ b/devtools/client/themes/variables.css
@@ -0,0 +1,203 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* Variable declarations for light and dark devtools themes.
+ * Colors are taken from:
+ * https://developer.mozilla.org/en-US/docs/Tools/DevToolsColors.
+ * Changes should be kept in sync with commandline.css and commandline.inc.css.
+ */
+
+/* IMPORTANT NOTE:
+ * This file is parsed in js (see client/shared/theme.js)
+ * so the formatting should be consistent (i.e. no '}' inside a rule).
+ */
+
+:root.theme-light {
+  --theme-body-background: white;
+  --theme-sidebar-background: white;
+  --theme-contrast-background: #e6b064;
+
+  --theme-tab-toolbar-background: #fcfcfc;
+  --theme-toolbar-background: #fcfcfc;
+  --theme-selection-background: #4c9ed9;
+  --theme-selection-background-semitransparent: rgba(76, 158, 217, 0.15);
+  --theme-selection-color: #f5f7fa;
+  --theme-splitter-color: #dde1e4;
+  --theme-comment: #696969;
+
+  --theme-body-color: #393f4c;
+  --theme-body-color-alt: #585959;
+  --theme-body-color-inactive: #999797;
+  --theme-content-color1: #292e33;
+  --theme-content-color2: #8fa1b2;
+  --theme-content-color3: #667380;
+
+  --theme-highlight-green: #2cbb0f;
+  --theme-highlight-blue: #0088cc;
+  --theme-highlight-bluegrey: #0072ab;
+  --theme-highlight-purple: #5b5fff;
+  --theme-highlight-lightorange: #d97e00;
+  --theme-highlight-orange: #f13c00;
+  --theme-highlight-red: #ed2655;
+  --theme-highlight-pink: #b82ee5;
+  --theme-highlight-gray: #dde1e4;
+
+  /* For accessibility purposes we want to enhance the focus styling. This
+   * should improve keyboard navigation usability. */
+  --theme-focus-outline-color: #000000;
+
+  /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
+  --theme-graphs-green: #85d175;
+  --theme-graphs-blue: #83b7f6;
+  --theme-graphs-bluegrey: #0072ab;
+  --theme-graphs-purple: #b693eb;
+  --theme-graphs-yellow: #efc052;
+  --theme-graphs-orange: #d97e00;
+  --theme-graphs-red: #e57180;
+  --theme-graphs-grey: #cccccc;
+  --theme-graphs-full-red: #f00;
+  --theme-graphs-full-blue: #00f;
+
+  /* Images */
+  --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
+  --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
+
+  /* Tooltips */
+  --theme-tooltip-border: #d9e1e8;
+  --theme-tooltip-background: rgba(255, 255, 255, .9);
+  --theme-tooltip-shadow: rgba(155, 155, 155, 0.26);
+
+  /* Command line */
+  --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme);
+  --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus);
+}
+
+:root.theme-dark {
+  --theme-body-background: #393f4c;
+  --theme-sidebar-background: #393f4c;
+  --theme-contrast-background: #ffb35b;
+
+  --theme-tab-toolbar-background: #272b35;
+  --theme-toolbar-background: #272b35;
+  --theme-selection-background: #5675B9;
+  --theme-selection-background-semitransparent: rgba(86, 117, 185, 0.5);
+  --theme-selection-color: #f5f7fa;
+  --theme-splitter-color: #454d5d;
+  --theme-comment: #757873;
+
+  --theme-body-color: #8fa1b2;
+  --theme-body-color-alt: #b6babf;
+  --theme-body-color-inactive: #8fa1b2;
+  --theme-content-color1: #a9bacb;
+  --theme-content-color2: #8fa1b2;
+  --theme-content-color3: #5f7387;
+
+  --theme-highlight-green: #00ff7f;
+  --theme-highlight-blue: #46afe3;
+  --theme-highlight-bluegrey: #5e88b0;
+  --theme-highlight-purple: #bcb8db;
+  --theme-highlight-lightorange: #d99b28;
+  --theme-highlight-orange: #d96629;
+  --theme-highlight-red: #eb5368;
+  --theme-highlight-pink: #df80ff;
+  --theme-highlight-gray: #e9f4fe;
+
+  /* For accessibility purposes we want to enhance the focus styling. This
+   * should improve keyboard navigation usability. */
+  --theme-focus-outline-color: #ced3d9;
+
+  /* Colors used in Graphs, like performance tools. Mostly similar to some "highlight-*" colors. */
+  --theme-graphs-green: #70bf53;
+  --theme-graphs-blue: #46afe3;
+  --theme-graphs-bluegrey: #5e88b0;
+  --theme-graphs-purple: #df80ff;
+  --theme-graphs-yellow: #d99b28;
+  --theme-graphs-orange: #d96629;
+  --theme-graphs-red: #eb5368;
+  --theme-graphs-grey: #757873;
+  --theme-graphs-full-red: #f00;
+  --theme-graphs-full-blue: #00f;
+
+  /* Images */
+  --theme-pane-collapse-image: url(chrome://devtools/skin/images/pane-collapse.svg);
+  --theme-pane-expand-image: url(chrome://devtools/skin/images/pane-expand.svg);
+
+  /* Tooltips */
+  --theme-tooltip-border: #434850;
+  --theme-tooltip-background: rgba(19, 28, 38, .9);
+  --theme-tooltip-shadow: rgba(25, 25, 25, 0.76);
+
+  /* Command line */
+  --theme-command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme);
+  --theme-command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#dark-theme-focus);
+}
+
+:root.theme-firebug {
+  --theme-body-background: #fcfcfc;
+  --theme-sidebar-background: #fcfcfc;
+  --theme-contrast-background: #e6b064;
+
+  --theme-tab-toolbar-background: #d8eaf9;
+  --theme-toolbar-background: #f0f1f2;
+  --theme-selection-background: #3399ff;
+  --theme-selection-background-semitransparent: rgba(128,128,128,0.2);
+  --theme-selection-color: white;
+  --theme-splitter-color: #aabccf;
+  --theme-comment: green;
+
+  --theme-body-color: #000000;
+  --theme-body-color-alt: #585959;
+  --theme-content-color1: #292e33;
+  --theme-content-color2: #8fa1b2;
+  --theme-content-color3: #667380;
+
+  --theme-highlight-green: #2cbb0f;
+  --theme-highlight-blue: #3455db;
+  --theme-highlight-bluegrey: #0072ab;
+  --theme-highlight-purple: #887ce6;
+  --theme-highlight-lightorange: #d97e00;
+  --theme-highlight-orange: #f13c00;
+  --theme-highlight-red: #e22f6f;
+  --theme-highlight-pink: #b82ee5;
+  --theme-highlight-gray: #dde1e4;
+
+  /* Colors used in Graphs, like performance tools. Similar colors to Chrome's timeline. */
+  --theme-graphs-green: #85d175;
+  --theme-graphs-blue: #83b7f6;
+  --theme-graphs-bluegrey: #0072ab;
+  --theme-graphs-purple: #b693eb;
+  --theme-graphs-yellow: #efc052;
+  --theme-graphs-orange: #d97e00;
+  --theme-graphs-red: #e57180;
+  --theme-graphs-grey: #cccccc;
+  --theme-graphs-full-red: #f00;
+  --theme-graphs-full-blue: #00f;
+
+  /* Images */
+  --theme-pane-collapse-image: url(chrome://devtools/skin/images/firebug/pane-collapse.svg);
+  --theme-pane-expand-image: url(chrome://devtools/skin/images/firebug/pane-expand.svg);
+
+  /* Font size */
+  --theme-toolbar-font-size: 12px;
+
+  /* Header */
+  --theme-header-background: #F0F0F0 linear-gradient(to top,
+                                                     rgba(0, 0, 0, 0.1),
+                                                     transparent) repeat-x;
+
+  /* Command line */
+  --theme-command-line-image: url(chrome://devtools/skin/images/firebug/commandline-icon.svg);
+  --theme-command-line-image-focus: url(chrome://devtools/skin/images/firebug/commandline-icon.svg#focus);
+}
+
+:root {
+  --theme-focus-border-color-textbox: #0675d3;
+  --theme-textbox-box-shadow: rgba(97,181,255,.75);
+
+  /* For accessibility purposes we want to enhance the focus styling. This
+   * should improve keyboard navigation usability. */
+  --theme-focus-outline: 1px dotted var(--theme-focus-outline-color);
+  --theme-focus-box-shadow-textbox: 0 0 0 1px var(--theme-textbox-box-shadow);
+}