Merge pull request #778 from primer/more-pink

Add More Pink to Primer! 💖🌸💕🌷💞🎀💗🌺💝

Author: shawnbot

src/support/variables/color-system.scss

@@ -85,7 +85,16 @@ $purple-800:      #3a1d6e !default;
 $purple-900:      #29134e !default;
 
 // -------- Pink --------
-$pink-500: #ea4aaa;
+$pink-000:      #ffeef8 !default;
+$pink-100:      #fedbf0 !default;
+$pink-200:      #f9b3dd !default;
+$pink-300:      #f692ce !default;
+$pink-400:      #ec6cb9 !default;
+$pink-500:      #ea4aaa !default;
+$pink-600:      #d03592 !default;
+$pink-700:      #b93a86 !default;
+$pink-800:      #99306f !default;
+$pink-900:      #6d224f !default;
 
 // -------- Fades --------
 // Black based on same hue as $gray-900
@@ -209,6 +218,19 @@ $purples: (
   9: $purple-900,
 ) !default;
 
+$pinks: (
+  0: $pink-000,
+  1: $pink-100,
+  2: $pink-200,
+  3: $pink-300,
+  4: $pink-400,
+  5: $pink-500,
+  6: $pink-600,
+  7: $pink-700,
+  8: $pink-800,
+  9: $pink-900,
+) !default;
+
 $hue-maps: (
   gray: $grays,
   blue: $blues,
@@ -217,4 +239,5 @@ $hue-maps: (
   orange: $oranges,
   red: $reds,
   purple: $purples,
+  pink: $pinks,
 ) !default;

src/support/variables/colors.scss

@@ -49,6 +49,7 @@ $bg-green-light:    $green-100 !default;
 $bg-orange:         $orange-700 !default;
 $bg-purple:         $purple-500 !default;
 $bg-purple-light:   $purple-000 !default;
+$bg-pink:           $pink-500 !default;
 $bg-red:            $red-500 !default;
 $bg-red-light:      $red-100 !default;
 $bg-white:          $white !default;
@@ -64,5 +65,6 @@ $text-green:        $green-500 !default;
 $text-orange:       $orange-900 !default;
 $text-orange-light: $orange-600 !default;
 $text-purple:       $purple !default;
+$text-pink:         $pink-500 !default;
 $text-red:          $red-600 !default;
 $text-white:        $white !default;

src/utilities/colors.scss

@@ -29,6 +29,8 @@
 .bg-yellow-light     { background-color: $bg-yellow-light !important; }
 /* Set the background to $bg-purple */
 .bg-purple     { background-color: $bg-purple !important; }
+/* Set the background to $bg-pink */
+.bg-pink { background-color: $bg-pink !important; }
 /* Set the background to $bg-purple-light */
 .bg-purple-light     { background-color: $bg-purple-light !important; }
 
@@ -65,6 +67,8 @@
 .text-orange-light        { color: $text-orange-light !important; }
 /* Set the text color to $text-purple */
 .text-purple        { color: $text-purple !important; }
+/* Set the text color to $text-pink */
+.text-pink { color: $text-pink !important; }
 /* Set the text color to $text-white */
 .text-white         { color: $text-white !important; }
 /* Set the text color to inherit */