Bug 1568846 - Update link of FirefoxUX photon colors repo; r=rcaliman
authorFlorens Verschelde <florens@fvsch.com>
Thu, 25 Jul 2019 18:49:06 +0000
changeset 484747 11a3b334b9514fd2d4d31030e2e1aba567ffb068
parent 484746 bf2ccd99261e26f747158043e6fd8dce2237551f
child 484748 3ccd3e9f16a2dee28372895c3ea4294c09b4f647
push id36347
push usercsabou@mozilla.com
push dateFri, 26 Jul 2019 03:42:45 +0000
treeherdermozilla-central@8b544aa4209a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersrcaliman
bugs1568846
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1568846 - Update link of FirefoxUX photon colors repo; r=rcaliman - Link to new repo https://github.com/FirefoxUX/photon-colors/blob/master/photon-colors.css - Explain why we don't include all available colors (test failure) - Explain why we add some custom values - Move the Red values after the Yellow ones to match upstream Differential Revision: https://phabricator.services.mozilla.com/D39344
devtools/client/themes/variables.css
--- a/devtools/client/themes/variables.css
+++ b/devtools/client/themes/variables.css
@@ -237,19 +237,23 @@
   --toolbarbutton-focus-color: var(--theme-selection-focus-color);
   --toolbarbutton-checked-background: var(--theme-selection-background);
   --toolbarbutton-checked-color: var(--theme-selection-color);
   --toolbarbutton-checked-focus-background: var(--blue-60);
 
   /* The photon animation curve */
   --animation-curve: cubic-bezier(.07,.95,0,1);
 
-  /* Firefox Colors CSS Variables v1.0.3
-   * Colors are taken from: https://github.com/FirefoxUX/design-tokens
-   * Some intermediate colors were added (names ending in '5').
+  /*
+   * Photon Colors CSS Variables v3.3.2
+   * - Colors are taken from https://github.com/FirefoxUX/photon-colors/blob/master/photon-colors.css
+   * - We only add Photon color variables that we are actually using; unused
+   *   variables will fail browser/base/content/test/static/browser_parsable_css.js
+   * - We added a few unofficial colors: a few intermediary values (e.g. Blue 45),
+  *    and lighter variants for the dark theme (e.g. Red 20, Red 40).
    */
   --magenta-50: #ff1ad9;
   --magenta-65: #dd00a9;
   --magenta-70: #b5007f;
 
   --purple-50: #9400ff;
   --purple-60: #8000d7;
 
@@ -259,32 +263,32 @@
   --blue-55: #0074e8;
   --blue-60: #0060df;
   --blue-70: #003eaa;
   --blue-80: #002275;
 
   --teal-60: #00c8d7;
   --teal-70: #008ea4;
 
-  --red-20: #ffb3d2;
-  --red-40: #ff3b6b;
-  --red-50: #ff0039;
-  --red-60: #d70022;
-  --red-70: #a4000f;
-
   --green-50: #30e60b;
   --green-60: #12bc00;
   --green-70: #058b00;
 
   --yellow-50: #ffe900;
   --yellow-60: #d7b600;
   --yellow-65: #be9b00;
   --yellow-70: #a47f00;
   --yellow-80: #715100;
 
+  --red-20: #ffb3d2;
+  --red-40: #ff3b6b;
+  --red-50: #ff0039;
+  --red-60: #d70022;
+  --red-70: #a4000f;
+
   --grey-10: #f9f9fa;
   --grey-10-a15: rgba(249, 249, 250, 0.15);
   --grey-10-a20: rgba(249, 249, 250, 0.2);
   --grey-10-a25: rgba(249, 249, 250, 0.25);
   --grey-10-a30: rgba(249, 249, 250, 0.3);
   --grey-20: #ededf0;
   --grey-25: #e0e0e2;
   --grey-30: #d7d7db;