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.

site/content/docs/4.3/getting-started/theming.md

@@ -100,12 +100,19 @@ Some of our Sass maps are merged into empty ones by default. This is done to all
 
 #### Modify map
 
-To modify an existing color in our `$theme-colors` map, add the following to your custom Sass file:
+All variables in the `$theme-colors` map are defined as standalone variables. To modify an existing color in our `$theme-colors` map, add the following to your custom Sass file:
+
+{{< highlight scss >}}
+$primary: #0074d9;
+$danger: #ff4136;
+{{< /highlight >}}
+
+Later on, theses variables are set in Bootstrap's `$theme-colors` map:
 
 {{< highlight scss >}}
 $theme-colors: (
-  "primary": #0074d9,
-  "danger": #ff4136
+  "primary": $primary,
+  "danger": $danger
 );
 {{< /highlight >}}
 
@@ -146,36 +153,19 @@ For example, we use the `primary`, `success`, and `danger` keys from `$theme-col
 
 ### Functions
 
-Bootstrap utilizes several Sass functions, but only a subset are applicable to general theming. We've included three functions for getting values from the color maps:
-
-{{< highlight scss >}}
-@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);
-}
-{{< /highlight >}}
-
-These allow you to pick one color from a Sass map much like how you'd use a color variable from v3.
+In Bootstrap 5, we've dropped the `color()`, `theme-color()` and `gray()` functions because the values are also available as standalone variables. So instead of using `theme-color("primary")`, you can now just use the `$primary` variable.
 
 {{< highlight scss >}}
 .custom-element {
-  color: gray("100");
-  background-color: theme-color("dark");
+  color: $gray-100;
+  background-color: $dark;
 }
 {{< /highlight >}}
 
-We also have another function for getting a particular _level_ of color from the `$theme-colors` map. Negative level values will lighten the color, while higher levels will darken.
+We also have a function for getting a particular _level_ of color. Negative level values will lighten the color, while higher levels will darken.
 
 {{< highlight scss >}}
-@function theme-color-level($color-name: "primary", $level: 0) {
-  $color: theme-color($color-name);
+@function color-level($color: $primary, $level: 0) {
   $color-base: if($level > 0, #000, #fff);
   $level: abs($level);
 
@@ -187,12 +177,10 @@ In practice, you'd call the function and pass in two parameters: the name of the
 
 {{< highlight scss >}}
 .custom-element {
-  color: theme-color-level(primary, -10);
+  color: color-level($primary, -10);
 }
 {{< /highlight >}}
 
-Additional functions could be added in the future or your own custom Sass to create level functions for additional Sass maps, or even a generic one if you wanted to be more verbose.
-
 ### Color contrast
 
 An additional function we include in Bootstrap is the color contrast function, `color-yiq`. It utilizes the [YIQ color space](https://en.wikipedia.org/wiki/YIQ) to automatically return a light (`#fff`) or dark (`#111`) contrast color based on the specified base color. This function is especially useful for mixins or loops where you're generating multiple classes.
@@ -219,7 +207,7 @@ You can also specify a base color with our color map functions:
 
 {{< highlight scss >}}
 .custom-element {
-  color: color-yiq(theme-color("dark")); // returns `color: #fff`
+  color: color-yiq($dark); // returns `color: #fff`
 }
 {{< /highlight >}}
 
@@ -272,11 +260,7 @@ All colors available in Bootstrap 4, are available as Sass variables and a Sass
 Here's how you can use these in your Sass:
 
 {{< highlight scss >}}
-// With variable
 .alpha { color: $purple; }
-
-// From the Sass map with our `color()` function
-.beta { color: color("purple"); }
 {{< /highlight >}}
 
 [Color utility classes]({{< docsref "/utilities/colors" >}}) are also available for setting `color` and `background-color`.
@@ -349,7 +333,7 @@ Here are two examples of how we loop over the `$theme-colors` map to generate mo
 // Generate alert modifier classes
 @each $color, $value in $theme-colors {
   .alert-#{$color} {
-    @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
+    @include alert-variant(color-level($color, -10), color-level($color, -9), color-level($color, 6));
   }
 }
 

site/content/docs/4.3/migration.md

@@ -33,6 +33,8 @@ Changes to our source Sass files and compiled CSS.
 - **Todo:** Rearrange forms source files (under `scss/forms/`)
 - **Todo:** Rearrange grid source files (under `scss/grid/`)
 - Removed print styles and `$enable-print-styles` variable. Print display classes, however, have remained intact. [See #28339](https://github.com/twbs/bootstrap/pull/28339).
+- Dropped `color()`, `theme-color()` & `gray()` functions in favor of variables. [See #29083](https://github.com/twbs/bootstrap/pull/29083)
+- The `theme-color-level()` function is renamed to `color-level()` and now accepts any color you want instead of only `$theme-color` colors. [See #29083](https://github.com/twbs/bootstrap/pull/29083)
 
 ## JavaScript