From 5af9aa58c085b6f80bdd77140bc5d527e06782c4 Mon Sep 17 00:00:00 2001
From: Mark Otto <markdotto@gmail.com>
Date: Mon, 11 May 2020 15:26:22 -0700
Subject: [PATCH] Add new border-color and background-color utilities

- bg-gray is new and maps to gray-400
- border-gray-500 and border-gray-700 are new and are meant to complement bg-gray and bg-secondary as one level off from the borders
---
 scss/_utilities.scss                       | 12 +++++++++++-
 site/content/docs/5.0/utilities/borders.md | 14 +++++++++++++-
 site/content/docs/5.0/utilities/colors.md  |  2 ++
 3 files changed, 26 insertions(+), 2 deletions(-)

diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 69615ec4e..36e740ebc 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -77,7 +77,15 @@ $utilities: map-merge(
     "border-color": (
       property: border-color,
       class: border,
-      values: map-merge($theme-colors, ("white": $white))
+      values: map-merge(
+        $theme-colors,
+        (
+          "white": $white,
+          "gray-500": $gray-500,
+          "gray-700": $gray-700,
+          "black": $black
+        )
+      )
     ),
     "border-width": (
       property: border-width,
@@ -418,6 +426,8 @@ $utilities: map-merge(
         (
           "body": $body-bg,
           "white": $white,
+          "gray": $gray-400,
+          "black": black,
           "transparent": transparent
         )
       )
diff --git a/site/content/docs/5.0/utilities/borders.md b/site/content/docs/5.0/utilities/borders.md
index ec2a7cbc0..d01a545f9 100644
--- a/site/content/docs/5.0/utilities/borders.md
+++ b/site/content/docs/5.0/utilities/borders.md
@@ -32,7 +32,7 @@ Use border utilities to add or remove an element's borders. Choose from all bord
 
 ## Border color
 
-Change the border color using utilities built on our theme colors.
+Change the border color using utilities built on our theme colors. We've also included a subset of our gray colors to provide more flexibility.
 
 {{< example class="bd-example-border-utils" >}}
 {{< border.inline >}}
@@ -41,6 +41,18 @@ Change the border color using utilities built on our theme colors.
 {{- end -}}
 {{< /border.inline >}}
 <span class="border border-white"></span>
+<span class="border border-gray-500"></span>
+<span class="border border-gray-700"></span>
+<span class="border border-black"></span>
+{{< /example >}}
+
+The gray `border-color` utilities differ slightly than our `background-color` utilities so that there's some slight contrast between the two.
+
+{{< example >}}
+<div class="p-3 mb-1 bg-light border"></div>
+<div class="p-3 mb-1 bg-gray border border-gray-500"></div>
+<div class="p-3 mb-1 bg-secondary border border-gray-700"></div>
+<div class="p-3 mb-1 bg-dark border border-black"></div>
 {{< /example >}}
 
 ### Border-width
diff --git a/site/content/docs/5.0/utilities/colors.md b/site/content/docs/5.0/utilities/colors.md
index 6ca7a7d12..3bc183a25 100644
--- a/site/content/docs/5.0/utilities/colors.md
+++ b/site/content/docs/5.0/utilities/colors.md
@@ -43,7 +43,9 @@ Similar to the contextual text color classes, easily set the background of an el
 <div class="p-3 mb-2 bg-{{ .name }} {{ if or (eq .name "light") (eq .name "warning") }}text-dark{{ else if (eq .name "info") }}text-body{{ else }}text-white{{ end }}">.bg-{{ .name }}</div>
 {{- end -}}
 {{< /colors.inline >}}
+<div class="p-3 mb-2 bg-gray text-dark">.bg-gray</div>
 <div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
+<div class="p-3 mb-2 bg-black text-white">.bg-black</div>
 <div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
 {{< /example >}}