Bootstrap v4: What's the point of theme-color vs. standard color variable?

Question

In Bootstrap v4.0.0.beta.2 they are using color maps too which allow us to use colors like theme-color("primary") instead of $brand-primary now.

My question is when I am adding my own custom CSS and want to use the colors from bootstrap, what advantage is there for me to use the theme-color function instead of just grabbing the variable that it is based on such as $primary?

Inside the bootstrap variables file they have:

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;
$warning:       $yellow !default;
$danger:        $red !default;
$light:         $gray-100 !default;
$dark:          $gray-800 !default;

$theme-colors: () !default;
$theme-colors: map-merge((
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
), $theme-colors);

Why wouldn't I just use $primary? or $gray-300?

I'm not doing any fancy SASS stuff in my custom file, just standard CSS with these variables.

Answer 1

theme-colors() is mostly used by Bootstrap internally to iterate all of the theme colors. There are a bunch of components like buttons, badges, alerts, etc.. that are "built" in CSS for each theme color. Instead of doing..

   .badge-danger {
        @include badge-variant($danger);
   }
   .badge-warning {
        @include badge-variant($warning);
   }
   ...(repeat for each color)

This is much easier...

@each $color, $value in $theme-colors {
  .badge-#{$color} {
    @include badge-variant($value);
  }
}

This would also make it easier to utilize the when extending or customizing Bootstrap (like this for example) with new elements that need use of all the theme colors.

But, if you're "not doing any fancy SASS stuff in my custom file, just standard CSS with these variables" it would be easiest to just reference the color variable...

$primary, $gray-300, etc...

Related: How to change the bootstrap primary color?