Drop `color()`, `theme-color()` & `gray()` functions (#29083)

Drop `color()`, `theme-color()` & `gray()` functions  in favor of variables. The functions just called a `map-get()` of a map where just the variables were defined. 

Also the `theme-color-level()` now accepts any color you want instead of only `$theme-colors` colors. The first value now is a variable instead of the `$theme-colors` key.

5 files changed, 10 insertions, 24 deletions

diff --git a/scss/_alert.scss b/scss/_alert.scss
index da2a98af9..45d621806 100644
--- a/scss/_alert.scss
+++ b/scss/_alert.scss
@@ -46,6 +46,6 @@
 
 @each $color, $value in $theme-colors {
   .alert-#{$color} {
-    @include alert-variant(theme-color-level($color, $alert-bg-level), theme-color-level($color, $alert-border-level), theme-color-level($color, $alert-color-level));
+    @include alert-variant(color-level($value, $alert-bg-level), color-level($value, $alert-border-level), color-level($value, $alert-color-level));
   }
 }
diff --git a/scss/_functions.scss b/scss/_functions.scss
index 811ca6280..c9edfff42 100644
--- a/scss/_functions.scss
+++ b/scss/_functions.scss
@@ -93,22 +93,8 @@
   @return if($yiq >= $yiq-contrasted-threshold, $dark, $light);
 }
 
-// Retrieve color Sass maps
-@function color($key: "blue") {
-  @return map-get($colors, $key);
-}
-
-@function theme-color($key: "primary") {
-  @return map-get($theme-colors, $key);
-}
-
-@function gray($key: "100") {
-  @return map-get($grays, $key);
-}
-
-// Request a theme color level
-@function theme-color-level($color-name: "primary", $level: 0) {
-  $color: theme-color($color-name);
+// Request a color level
+@function color-level($color: $primary, $level: 0) {
   $color-base: if($level > 0, $black, $white);
   $level: abs($level);
 
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
index 3f20758da..6ac5e5518 100644
--- a/scss/_list-group.scss
+++ b/scss/_list-group.scss
@@ -155,5 +155,5 @@
 // Organizationally, this must come after the `:hover` states.
 
 @each $color, $value in $theme-colors {
-  @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
+  @include list-group-item-variant($color, color-level($value, -9), color-level($value, 6));
 }
diff --git a/scss/_tables.scss b/scss/_tables.scss
index 20177384b..288f3b44b 100644
--- a/scss/_tables.scss
+++ b/scss/_tables.scss
@@ -106,7 +106,7 @@
 // inheritance to nested tables.
 
 @each $color, $value in $theme-colors {
-  @include table-row-variant($color, theme-color-level($color, $table-bg-level), theme-color-level($color, $table-border-level));
+  @include table-row-variant($color, color-level($value, $table-bg-level), color-level($value, $table-border-level));
 }
 
 @include table-row-variant(active, $table-active-bg);
diff --git a/scss/_variables.scss b/scss/_variables.scss
index f6eb41910..f7868490c 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -161,7 +161,7 @@ $body-text-align:           null !default;
 //
 // Style anchor elements.
 
-$link-color:                              theme-color("primary") !default;
+$link-color:                              $primary !default;
 $link-decoration:                         none !default;
 $link-hover-color:                        darken($link-color, 15%) !default;
 $link-hover-decoration:                   underline !default;
@@ -244,7 +244,7 @@ $box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
 $box-shadow-inset:            inset 0 1px 2px rgba($black, .075) !default;
 
 $component-active-color:      $white !default;
-$component-active-bg:         theme-color("primary") !default;
+$component-active-bg:         $primary !default;
 
 $caret-width:                 .3em !default;
 $caret-vertical-align:        $caret-width * .85 !default;
@@ -661,8 +661,8 @@ $form-file-button-bg:             $input-group-addon-bg !default;
 
 $form-feedback-margin-top:          $form-text-margin-top !default;
 $form-feedback-font-size:           $small-font-size !default;
-$form-feedback-valid-color:         theme-color("success") !default;
-$form-feedback-invalid-color:       theme-color("danger") !default;
+$form-feedback-valid-color:         $success !default;
+$form-feedback-invalid-color:       $danger !default;
 
 $form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
 $form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
@@ -985,7 +985,7 @@ $progress-bg:                       $gray-200 !default;
 $progress-border-radius:            $border-radius !default;
 $progress-box-shadow:               $box-shadow-inset !default;
 $progress-bar-color:                $white !default;
-$progress-bar-bg:                   theme-color("primary") !default;
+$progress-bar-bg:                   $primary !default;
 $progress-bar-animation-timing:     1s linear infinite !default;
 $progress-bar-transition:           width .6s ease !default;