Replace "loose" HEX values with their respective variables (#25672)

9 files changed, 20 insertions, 19 deletions

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 3b048e0d1a..c745858f74 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -135,13 +135,13 @@
 .carousel-control-prev {
   left: 0;
   @if $enable-gradients {
-    background: linear-gradient(90deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
+    background: linear-gradient(90deg, rgba($black, .25), rgba($black, .001));
   }
 }
 .carousel-control-next {
   right: 0;
   @if $enable-gradients {
-    background: linear-gradient(270deg, rgba(0, 0, 0, .25), rgba(0, 0, 0, .001));
+    background: linear-gradient(270deg, rgba($black, .25), rgba($black, .001));
   }
 }
 
diff --git a/scss/_print.scss b/scss/_print.scss
index 5e2ce3a8aa..98163eb10a 100644
--- a/scss/_print.scss
+++ b/scss/_print.scss
@@ -14,7 +14,7 @@
     *::before,
     *::after {
       // Bootstrap specific; comment out `color` and `background`
-      //color: #000 !important; // Black prints faster: http://www.sanbeiji.com/archives/953
+      //color: $black !important; // Black prints faster: http://www.sanbeiji.com/archives/953
       text-shadow: none !important;
       //background: transparent !important;
       box-shadow: none !important;
@@ -51,7 +51,7 @@
     }
     pre,
     blockquote {
-      border: $border-width solid #999;   // Bootstrap custom code; using `$border-width` instead of 1px
+      border: $border-width solid $gray-500;   // Bootstrap custom code; using `$border-width` instead of 1px
       page-break-inside: avoid;
     }
 
@@ -101,7 +101,7 @@
       display: none;
     }
     .badge {
-      border: $border-width solid #000;
+      border: $border-width solid $black;
     }
 
     .table {
@@ -109,13 +109,13 @@
 
       td,
       th {
-        background-color: #fff !important;
+        background-color: $white !important;
       }
     }
     .table-bordered {
       th,
       td {
-        border: 1px solid #ddd !important;
+        border: 1px solid $gray-300 !important;
       }
     }
 
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 5ee563f935..dd23f16d1b 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -30,7 +30,7 @@ html {
   -webkit-text-size-adjust: 100%; // 4
   -ms-text-size-adjust: 100%; // 4
   -ms-overflow-style: scrollbar; // 5
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0); // 6
+  -webkit-tap-highlight-color: rgba($black, 0); // 6
 }
 
 // IE10+ doesn't honor `<meta name="viewport">` in some cases.
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 0d216bb890..68095ce127 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -608,6 +608,7 @@ $nav-pills-border-radius:           $border-radius !default;
 $nav-pills-link-active-color:       $component-active-color !default;
 $nav-pills-link-active-bg:          $component-active-bg !default;
 
+$nav-divider-color:                 $gray-200 !default;
 $nav-divider-margin-y:              ($spacer / 2) !default;
 
 // Navbar
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 2290682421..dec18ba58c 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -45,7 +45,7 @@
     margin-top: .1rem;
     font-size: .875rem;
     line-height: 1;
-    color: #fff;
+    color: $white;
     background-color: rgba($color, .8);
     border-radius: .2rem;
   }
diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
index ecd01f7291..88c4d64b7f 100644
--- a/scss/mixins/_gradients.scss
+++ b/scss/mixins/_gradients.scss
@@ -11,7 +11,7 @@
 // Horizontal gradient, from left to right
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
-@mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+@mixin gradient-x($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
   background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
   background-repeat: repeat-x;
 }
@@ -19,27 +19,27 @@
 // Vertical gradient, from top to bottom
 //
 // Creates two color stops, start and end, by specifying a color and position for each color stop.
-@mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+@mixin gradient-y($start-color: $gray-700, $end-color: $gray-800, $start-percent: 0%, $end-percent: 100%) {
   background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
   background-repeat: repeat-x;
 }
 
-@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
+@mixin gradient-directional($start-color: $gray-700, $end-color: $gray-800, $deg: 45deg) {
   background-image: linear-gradient($deg, $start-color, $end-color);
   background-repeat: repeat-x;
 }
-@mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
+@mixin gradient-x-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
   background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
   background-repeat: no-repeat;
 }
-@mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
+@mixin gradient-y-three-colors($start-color: $blue, $mid-color: $purple, $color-stop: 50%, $end-color: $red) {
   background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
   background-repeat: no-repeat;
 }
-@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
+@mixin gradient-radial($inner-color: $gray-700, $outer-color: $gray-800) {
   background-image: radial-gradient(circle, $inner-color, $outer-color);
   background-repeat: no-repeat;
 }
-@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
+@mixin gradient-striped($color: rgba($white, .15), $angle: 45deg) {
   background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
 }
diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
index 607ffcb86b..cd47a4e9fa 100644
--- a/scss/mixins/_list-group.scss
+++ b/scss/mixins/_list-group.scss
@@ -12,7 +12,7 @@
       }
 
       &.active {
-        color: #fff;
+        color: $white;
         background-color: $color;
         border-color: $color;
       }
diff --git a/scss/mixins/_nav-divider.scss b/scss/mixins/_nav-divider.scss
index 3505d412f2..4fb37b6224 100644
--- a/scss/mixins/_nav-divider.scss
+++ b/scss/mixins/_nav-divider.scss
@@ -2,7 +2,7 @@
 //
 // Dividers (basically an hr) within dropdowns and nav lists
 
-@mixin nav-divider($color: #e5e5e5, $margin-y: $nav-divider-margin-y) {
+@mixin nav-divider($color: $nav-divider-color, $margin-y: $nav-divider-margin-y) {
   height: 0;
   margin: $margin-y 0;
   overflow: hidden;
diff --git a/scss/utilities/_text.scss b/scss/utilities/_text.scss
index f4b6e65e55..5e169c4d97 100644
--- a/scss/utilities/_text.scss
+++ b/scss/utilities/_text.scss
@@ -37,7 +37,7 @@
 
 // Contextual colors
 
-.text-white { color: #fff !important; }
+.text-white { color: $white !important; }
 
 @each $color, $value in $theme-colors {
   @include text-emphasis-variant(".text-#{$color}", $value);