Merge pull request #737 from primer/brocs_test

Add new yellow utilities and variables

Author: simurai

pages/css/utilities/colors.md

@@ -75,9 +75,16 @@ Background colors are most commonly used for filling large blocks of content or
   </div>
   <div class="col-9 float-left">
     <div class="container-lg clearfix">
-      <div class="h4">.bg-yellow-light</div>
-      <code>{colors.yellow[2]}, $bg-yellow-light</code>
-      <Swatch className="bg-yellow-light" />
+      <div class="col-6 float-left">
+        <div class="h4">.bg-yellow-dark</div>
+        <code>{colors.yellow[7]}, $bg-yellow-dark</code>
+        <Swatch className="bg-yellow-dark border-right-0" />
+      </div>
+      <div class="col-6 float-left">
+        <div class="h4">.bg-yellow-light</div>
+        <code>{colors.yellow[2]}, $bg-yellow-light</code>
+        <Swatch className="bg-yellow-light" />
+      </div>
     </div>
   </div>
 </div>
@@ -173,6 +180,10 @@ You can set the color inheritance on an element by using the `text-inherit` clas
   .text-orange-light on white
 </div>
 <span class="float-left text-red tooltipped tooltipped-n" aria-label="Does not meet accessibility standards"><%= octicon("alert") %></span>
+<div class="text-yellow mb-2">
+  .text-yellow on white
+</div>
+<span class="float-left text-red tooltipped tooltipped-n" aria-label="Does not meet accessibility standards"><%= octicon("alert") %></span>
 <div class="text-green mb-2 ml-4">
   .text-green on white
 </div>
@@ -199,6 +210,9 @@ You can set the color inheritance on an element by using the `text-inherit` clas
 <div class="bg-green-light mb-2">
   .text-gray-dark on .bg-green-light
 </div>
+<div class="bg-yellow-dark mb-2">
+  .text-gray-dark on .bg-yellow-dark
+</div>
 <div class="bg-yellow mb-2">
   .text-gray-dark on .bg-yellow
 </div>

src/support/variables/colors.scss

@@ -53,6 +53,7 @@ $bg-red-light:      $red-100 !default;
 $bg-white:          $white !default;
 $bg-yellow:         $yellow-500 !default;
 $bg-yellow-light:   $yellow-200 !default;
+$bg-yellow-dark:    $yellow-700 !default;
 
 // Text colors
 $text-blue:         $blue-500 !default;
@@ -66,3 +67,4 @@ $text-purple:       $purple !default;
 $text-pink:         $pink-500 !default;
 $text-red:          $red-600 !default;
 $text-white:        $white !default;
+$text-yellow:       $yellow-800 !default;

src/utilities/colors.scss

@@ -2,6 +2,8 @@
 // stylelint-disable primer/selector-no-utility
 // stylelint-disable block-opening-brace-space-before, comment-empty-line-before
 
+@warn ".text-pending and .bg-pending will be deprecated in 13.0.0. Use .text-yellow and .bg-yellow-dark instead";
+
 // background colors
 /* Set the background to $bg-white */
 .bg-white      { background-color: $bg-white !important; }
@@ -27,6 +29,8 @@
 .bg-yellow     { background-color: $bg-yellow !important; }
 /* Set the background to $bg-yellow-light */
 .bg-yellow-light     { background-color: $bg-yellow-light !important; }
+/* Set the background to $bg-yellow-dark */
+.bg-yellow-dark      { background-color: $bg-yellow-dark !important; }
 /* Set the background to $bg-purple */
 .bg-purple     { background-color: $bg-purple !important; }
 /* Set the background to $bg-pink */
@@ -61,6 +65,8 @@
 .text-gray-dark     { color: $text-gray-dark !important; }
 /* Set the text color to $text-green */
 .text-green         { color: $text-green !important; }
+/* Set the text color to $text-yellow */
+.text-yellow        { color: $text-yellow !important; }
 /* Set the text color to $text-orange */
 .text-orange        { color: $text-orange !important; }
 /* Set the text color to $text-orange-light */
@@ -74,10 +80,10 @@
 /* Set the text color to inherit */
 .text-inherit       { color: inherit !important; }
 
-// Text states
-// These can probably all be regular utilities
+// Pending states
+// This will be deprecated in the future, use .text-yellow instead
 .text-pending { color: $yellow-800 !important; }
-// Separate text and background colors in future to improve a11y
+// This will be deprecated in the future, use .bg-yellow-dark instead
 .bg-pending { color: $yellow-700 !important; }
 
 // Link colors