Redo color vars

This pulls in some changes from #18462 to include a set of generic color variables. It doesn't include a Sass map for generating the theme colors yet, since we can't easily do that for all components, but does give a few more color choices to folks and an easier way to customize.

1 files changed, 17 insertions, 5 deletions

diff --git a/scss/_variables.scss b/scss/_variables.scss
index 0a97cfcda..2d4c90109 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -92,17 +92,29 @@
 //
 // Grayscale and brand colors for use across Bootstrap.
 
+// Start with assigning color names to specific hex values.
+$red:    #d9534f !default;
+$orange: #f0ad4e !default;
+$yellow: #ffd500 !default;
+$green:  #5cb85c !default;
+$blue:   #0275d8 !default;
+$teal:   #5bc0de !default;
+$pink:   #ff5b77 !default;
+$purple: #613d7c !default;
+
+// Create grayscale
 $gray-dark:                 #292b2c !default;
 $gray:                      #464a4c !default;
 $gray-light:                #636c72 !default;
 $gray-lighter:              #eceeef !default;
 $gray-lightest:             #f7f7f9 !default;
 
-$brand-primary:             #0275d8 !default;
-$brand-success:             #5cb85c !default;
-$brand-info:                #5bc0de !default;
-$brand-warning:             #f0ad4e !default;
-$brand-danger:              #d9534f !default;
+// Reassign color vars to semantic color scheme
+$brand-primary:             $blue !default;
+$brand-success:             $green !default;
+$brand-info:                $teal !default;
+$brand-warning:             $orange !default;
+$brand-danger:              $red !default;
 $brand-inverse:             $gray-dark !default;