Additions to the color documentation

jekyll/_includes/color/blue.md

@@ -1,5 +1,17 @@
 <table class="colors">
   <tbody>
+    <tr class="blue-20">
+      <td class="name">Blue 20</td>
+      <td><code>#baddff</code></td>
+      <td><span class="bg">AAA</span></td>
+      <td class="fg">Fails</td>
+    </tr>
+    <tr class="blue-30">
+      <td class="name">Blue 30</td>
+      <td><code>#80bfff</code></td>
+      <td><span class="bg">AAA</span></td>
+      <td class="fg">Fails</td>
+    </tr>
     <tr class="blue-40">
       <td class="name">Blue 40</td>
       <td><code>#45a1ff</code></td>

jekyll/_includes/color/devtools.md

@@ -0,0 +1,57 @@
+<table class="colors">
+  <tbody>
+    <tr class="blue-55">
+      <td class="name">Blue 55</td>
+      <td><code>#0074e8</code></td>
+      <td><span class="bg">AA</span></td>
+      <td class="fg">AA</td>
+    </tr>
+    <tr class="magenta-65">
+      <td class="name">Magenta 65</td>
+      <td><code>#dd00a9</code></td>
+      <td><span class="bg">AA</span></td>
+      <td class="fg">AA</td>
+    </tr>
+    <tr class="yellow-65">
+      <td class="name">Yellow 65</td>
+      <td><code>#be9b00</code></td>
+      <td><span class="bg">AA</span></td>
+      <td class="fg">Fails</td>
+    </tr>
+    <tr class="grey-25">
+      <td class="name">Grey 25</td>
+      <td><code>#e0e0e2</code></td>
+      <td><span class="bg">AAA</span></td>
+      <td class="fg">Fails</td>
+    </tr>
+    <tr class="grey-45">
+      <td class="name">Grey 45</td>
+      <td><code>#939395</code></td>
+      <td><span class="bg">AA</span></td>
+      <td class="fg">AA Large</td>
+    </tr>
+    <tr class="grey-55">
+      <td class="name">Grey 55</td>
+      <td><code>#5c5c5f</code></td>
+      <td><span class="bg">AA</span></td>
+      <td class="fg">AA</td>
+    </tr>
+    <tr class="grey-85">
+      <td class="name">Grey 85</td>
+      <td><code>#1b1b1d</code></td>
+      <td><span class="bg">AAA</span></td>
+      <td class="fg">AAA</td>
+    </tr>
+  </tbody>
+</table>
+
+
+
+
+
+
+
+
+
+
+

jekyll/_includes/color/magenta.md

@@ -1,5 +1,11 @@
 <table class="colors">
   <tbody>
+    <tr class="magenta-40">
+      <td class="name">Magenta 40</td>
+      <td><code>#ff54e3</code></td>
+      <td><span class="bg">AA</span></td>
+      <td class="fg">AA Large</td>
+    </tr>
     <tr class="magenta-50">
       <td class="name">Magenta 50</td>
       <td><code>#ff1ad9</code></td>

jekyll/_includes/color/red.md

@@ -1,5 +1,11 @@
 <table class="colors">
   <tbody>
+      <tr class="red-40">
+      <td class="name">Red 40</td>
+      <td><code>#ff3b65</code></td>
+      <td><span class="bg">AA Large</span></td>
+      <td class="fg">AA Large</td>
+    </tr>
     <tr class="red-50">
       <td class="name">Red 50</td>
       <td><code>#ff0039</code></td>
@@ -32,3 +38,4 @@
     </tr>
   </tbody>
 </table>
+

jekyll/_sass/_colors.scss

@@ -151,6 +151,24 @@
   }
 
   /* Blues. */
+  .blue-20 {
+    .name::before, .bg {
+      background-color: $blue-20;
+      color: $blue-90;
+    }
+    .fg {
+      color: $blue-20;
+    }
+  }
+  .blue-30 {
+    .name::before, .bg {
+      background-color: $blue-30;
+      color: $blue-90;
+    }
+    .fg {
+      color: $blue-30;
+    }
+  }
   .blue-40 {
     .name::before, .bg {
       background-color: $blue-40;
@@ -254,6 +272,15 @@
   }
 
   /* Magentas. */
+  .magenta-40 {
+    .name::before, .bg {
+      background-color: $magenta-40;
+      color: $magenta-90;
+    }
+    .fg {
+      color: $magenta-40;
+    }
+  }
   .magenta-50 {
     .name::before, .bg {
       background-color: $magenta-50;
@@ -395,6 +422,15 @@
   }
 
   /* Reds. */
+  .red-40 {
+    .name::before, .bg {
+      background-color: $red-40;
+      color: $white-100;
+    }
+    .fg {
+      color: $red-40;
+    }
+  }
   .red-50 {
     .name::before, .bg {
       background-color: $red-50;
@@ -671,4 +707,69 @@
       border: 1px solid $grey-color-light;
     }
   }  
+
+    /* DevTools Specific. */
+    .blue-55 {
+      .name::before, .bg {
+        background-color: $blue-55;
+        color: $white-100;
+      }
+      .fg {
+        color: $blue-55;
+      }
+    } 
+    .magenta-65 {
+      .name::before, .bg {
+        background-color: $magenta-65;
+        color: $white-100;
+      }
+      .fg {
+        color: $magenta-65;
+      }
+    } 
+    .yellow-65 {
+      .name::before, .bg {
+        background-color: $yellow-65;
+        color: $yellow-90;
+      }
+      .fg {
+        color: $yellow-65;
+      }
+    } 
+    .grey-25 {
+      .name::before, .bg {
+        background-color: $grey-25;
+        color: $grey-90;
+      }
+      .fg {
+        color: $grey-25;
+      }
+    } 
+    .grey-45 {
+      .name::before, .bg {
+        background-color: $grey-45;
+        color: $grey-90;
+      }
+      .fg {
+        color: $grey-45;
+      }
+    } 
+    .grey-55 {
+      .name::before, .bg {
+        background-color: $grey-55;
+        color: $white-100;
+      }
+      .fg {
+        color: $grey-55;
+      }
+    } 
+    .grey-85 {
+      .name::before, .bg {
+        background-color: $grey-85;
+        color: $white-100;
+      }
+      .fg {
+        color: $grey-85;
+      }
+    } 
 }

jekyll/_sass/_photon-colors.scss

@@ -3,7 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 /* Photon Colors SCSS Variables v3.3.1 */
-
+$magenta-40: #ff54e3;
 $magenta-50: #ff1ad9;
 $magenta-60: #ed00b5;
 $magenta-70: #b5007f;
@@ -18,6 +18,8 @@ $purple-70: #6200a4;
 $purple-80: #440071;
 $purple-90: #25003e;
 
+$blue-20: #baddff;
+$blue-30: #80bfff;
 $blue-40: #45a1ff;
 $blue-50: #0a84ff;
 $blue-50-a30: rgba(10, 132, 255, 0.3);
@@ -44,6 +46,7 @@ $yellow-70: #a47f00;
 $yellow-80: #715100;
 $yellow-90: #3e2800;
 
+$red-40: #ff3b65;
 $red-50: #ff0039;
 $red-60: #d70022;
 $red-70: #a4000f;
@@ -90,3 +93,13 @@ $ink-90: #0f1126;
 
 $white-100: #ffffff;
 
+//DevTools Special Case
+$blue-55: #0074e8;
+$magenta-65: #dd00a9;
+$yellow-65: #be9b00;
+$grey-25: #e0e0e2;
+$grey-45: #939395;
+$grey-55: #5c5c5f;
+$grey-85: #1b1b1d;
+
+

jekyll/_visuals/color.md

@@ -81,6 +81,15 @@ We use white for the background of doorhangers or in-content menus.
 
 {% include color/white.md %}
 
+### DevTools Exclusive Additions
+
+The complex interface of DevTools has yielded an expansion to the standard Photon color chart.   
+These Photon colors should **only** be used in exceptional circumstances when standard photon colors do not provide a sufficient color range or contrast in DevTools interfaces.
+
+**These reserve colors should not be used in any other scenario.**
+
+{% include color/devtools.md %}
+
 ## Text and Background Colors
 
 Visit [typography](typography.html) for more information on text color.

jekyll/interactives/variables.css

@@ -15,6 +15,7 @@
    --purple-80:#440071;
    --purple-90:#25003e;
 
+   --blue-30:#80bfff;
    --blue-40:#45a1ff;
    --blue-50:#0a84ff;
    --blue-60:#0060df;