Bug 1389732 - Add photon colors to variables.css. r=bgrins draft
authorGabriel Luong <gabriel.luong@gmail.com>
Sat, 12 Aug 2017 00:50:59 -0700
changeset 645662 d869a081b44f2a7af39ddc0ba0b16fa41b75f928
parent 645661 be93c09fd3e37112fda7693205b7c1f70675091f
child 725960 317220ef2beb8184972a2207de8d422fdfba6e73
push id73821
push userbmo:gl@mozilla.com
push dateSun, 13 Aug 2017 22:14:23 +0000
reviewersbgrins
bugs1389732
milestone57.0a1
Bug 1389732 - Add photon colors to variables.css. r=bgrins MozReview-Commit-ID: IcSvM9OsUVw
devtools/client/shared/components/test/mochitest/test_tabs_menu.html
devtools/client/themes/colors.css
devtools/client/themes/dark-theme.css
devtools/client/themes/firebug-theme.css
devtools/client/themes/light-theme.css
devtools/client/themes/moz.build
devtools/client/themes/variables.css
--- a/devtools/client/shared/components/test/mochitest/test_tabs_menu.html
+++ b/devtools/client/shared/components/test/mochitest/test_tabs_menu.html
@@ -6,16 +6,17 @@
 <!--
 Test all-tabs menu.
 -->
 <head>
   <meta charset="utf-8">
   <title>Tabs component All-tabs menu test</title>
   <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
   <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
+  <link rel="stylesheet" type="text/css" href="resource://devtools/client/themes/colors.css">
   <link rel="stylesheet" type="text/css" href="resource://devtools/client/themes/variables.css">
   <link rel="stylesheet" type="text/css" href="resource://devtools/client/themes/common.css">
   <link rel="stylesheet" type="text/css" href="resource://devtools/client/themes/light-theme.css">
   <link rel="stylesheet" type="text/css" href="resource://devtools/client/shared/components/tabs/tabs.css">
   <link rel="stylesheet" type="text/css" href="resource://devtools/client/shared/components/tabs/tabbar.css">
   <link rel="stylesheet" type="text/css" href="resource://devtools/client/inspector/components/side-panel.css">
   <link rel="stylesheet" type="text/css" href="resource://devtools/client/inspector/components/inspector-tab-panel.css">
 </head>
new file mode 100644
--- /dev/null
+++ b/devtools/client/themes/colors.css
@@ -0,0 +1,72 @@
+/* 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/. */
+
+/* Colors are taken from:; https://github.com/FirefoxUX/design-tokens */
+
+/* Firefox Colors CSS Variables v1.0.3 */
+
+:root {
+  --magenta-50: #ff1ad9;
+  --magenta-60: #ed00b5;
+  --magenta-70: #b5007f;
+  --magenta-80: #7d004f;
+  --magenta-90: #440027;
+
+  --purple-50: #9400ff;
+  --purple-60: #8000d7;
+  --purple-70: #6200a4;
+  --purple-80: #440071;
+  --purple-90: #25003e;
+
+  --blue-40: #45a1ff;
+  --blue-50: #0a84ff;
+  --blue-60: #0060df;
+  --blue-70: #003eaa;
+  --blue-80: #002275;
+  --blue-90: #000f40;
+
+  --teal-50: #00feff;
+  --teal-60: #00c8d7;
+  --teal-70: #008ea4;
+  --teal-80: #005a71;
+  --teal-90: #002d3e;
+
+  --green-50: #30e60b;
+  --green-60: #12bc00;
+  --green-70: #058b00;
+  --green-80: #006504;
+  --green-90: #003706;
+
+  --yellow-50: #ffe900;
+  --yellow-60: #d7b600;
+  --yellow-70: #a47f00;
+  --yellow-80: #715100;
+  --yellow-90: #3e2800;
+
+  --red-50: #ff0039;
+  --red-60: #d70022;
+  --red-70: #a4000f;
+  --red-80: #5a0002;
+  --red-90: #3e0200;
+
+  --orange-50: #ff9400;
+  --orange-60: #d76e00;
+  --orange-70: #a44900;
+  --orange-80: #712b00;
+  --orange-90: #3e1300;
+
+  --grey-10: #f9f9fa;
+  --grey-20: #ededf0;
+  --grey-30: #d7d7db;
+  --grey-40: #b1b1b3;
+  --grey-50: #737373;
+  --grey-60: #4a4a4f;
+  --grey-70: #38383d;
+  --grey-80: #2a2a2e;
+  --grey-90: #0c0c0d;
+
+  --ink-70: #363959;
+  --ink-80: #202340;
+  --ink-90: #0f1126;
+}
--- a/devtools/client/themes/dark-theme.css
+++ b/devtools/client/themes/dark-theme.css
@@ -1,13 +1,14 @@
 /* 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/. */
 
+@import url(resource://devtools/client/themes/colors.css);
 @import url(resource://devtools/client/themes/variables.css);
 @import url(resource://devtools/client/themes/common.css);
 @import url(chrome://devtools/skin/toolbars.css);
 @import url(chrome://devtools/skin/tooltips.css);
 
 body {
   margin: 0;
 }
--- a/devtools/client/themes/firebug-theme.css
+++ b/devtools/client/themes/firebug-theme.css
@@ -1,13 +1,14 @@
 /* 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/. */
 
+@import url(resource://devtools/client/themes/colors.css);
 @import url(resource://devtools/client/themes/variables.css);
 @import url(resource://devtools/client/themes/common.css);
 @import url(chrome://devtools/skin/light-theme.css);
 
 :root.theme-firebug {
   font-size: 11px;
   font-family: var(--proportional-font-family);
 }
--- a/devtools/client/themes/light-theme.css
+++ b/devtools/client/themes/light-theme.css
@@ -1,13 +1,14 @@
 /* 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/. */
 
+@import url(resource://devtools/client/themes/colors.css);
 @import url(resource://devtools/client/themes/variables.css);
 @import url(resource://devtools/client/themes/common.css);
 @import url(chrome://devtools/skin/toolbars.css);
 @import url(chrome://devtools/skin/tooltips.css);
 
 body {
   margin: 0;
 }
--- a/devtools/client/themes/moz.build
+++ b/devtools/client/themes/moz.build
@@ -4,15 +4,16 @@
 # 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/.
 
 DIRS += [
     'audio',
 ]
 
 DevToolsModules(
+    'colors.css',
     'commandline-browser.css',
     'common.css',
     'responsivedesign.css',
     'splitters.css',
     'toolbars.css',
     'variables.css',
 )
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -237,9 +237,73 @@
 
   --toolbarbutton-background: rgba(110,120,130,0.1);
   --toolbarbutton-border-color: transparent;
   --toolbarbutton-hover-background: rgba(110,120,130,0.2);
   --toolbarbutton-hover-border-color: var(--toolbarbutton-border-color);
   --toolbarbutton-checked-background: var(--theme-selection-background);
   --toolbarbutton-checked-color: var(--theme-selection-color);
   --toolbarbutton-checked-border-color: var(--toolbarbutton-border-color);
+
+  /* Firefox Colors CSS Variables v1.0.3 */
+  --magenta-50: #ff1ad9;
+  --magenta-60: #ed00b5;
+  --magenta-70: #b5007f;
+  --magenta-80: #7d004f;
+  --magenta-90: #440027;
+
+  --purple-50: #9400ff;
+  --purple-60: #8000d7;
+  --purple-70: #6200a4;
+  --purple-80: #440071;
+  --purple-90: #25003e;
+
+  --blue-40: #45a1ff;
+  --blue-50: #0a84ff;
+  --blue-60: #0060df;
+  --blue-70: #003eaa;
+  --blue-80: #002275;
+  --blue-90: #000f40;
+
+  --teal-50: #00feff;
+  --teal-60: #00c8d7;
+  --teal-70: #008ea4;
+  --teal-80: #005a71;
+  --teal-90: #002d3e;
+
+  --green-50: #30e60b;
+  --green-60: #12bc00;
+  --green-70: #058b00;
+  --green-80: #006504;
+  --green-90: #003706;
+
+  --yellow-50: #ffe900;
+  --yellow-60: #d7b600;
+  --yellow-70: #a47f00;
+  --yellow-80: #715100;
+  --yellow-90: #3e2800;
+
+  --red-50: #ff0039;
+  --red-60: #d70022;
+  --red-70: #a4000f;
+  --red-80: #5a0002;
+  --red-90: #3e0200;
+
+  --orange-50: #ff9400;
+  --orange-60: #d76e00;
+  --orange-70: #a44900;
+  --orange-80: #712b00;
+  --orange-90: #3e1300;
+
+  --grey-10: #f9f9fa;
+  --grey-20: #ededf0;
+  --grey-30: #d7d7db;
+  --grey-40: #b1b1b3;
+  --grey-50: #737373;
+  --grey-60: #4a4a4f;
+  --grey-70: #38383d;
+  --grey-80: #2a2a2e;
+  --grey-90: #0c0c0d;
+
+  --ink-70: #363959;
+  --ink-80: #202340;
+  --ink-90: #0f1126;
 }