V5 $theme-colors

Hi,

I just tried the new Bootstrap 5.0.0-alpha1 and when I wanted to add a new color to $theme-colors it override all the theme.

I compared the code with the v 4.5.0 and I found that in the file variables.scss the map-merge is missing.

In v4.5.0

$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
);

In V5

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

[greg-hoarau]

Plop, I managed to make it work like this :

// Variables (no theme-colors)
@import "base/variables";

// Bootstrap variables
@import "node_modules/bootstrap/scss/_functions";
@import "node_modules/bootstrap/scss/_variables";

// Variables maps (use map-merge in this file)
@import "base/maps";

// Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

[NatachaH]

@MostlyDead This is how i do in my bootstrap.scss file:

@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";

// Custom the bootstrap theme color (ex: alert-custom-color)
$custom-theme-colors: (
"custom-color": #333
);

// Custom the bootstrap utilities color (ex: text-custom-color or bg-custom-color)
$custom-utilities-colors: $custom-theme-colors;

// Custom the bootstrap table color (ex: table-custom-color)
$custom-table-colors: $custom-theme-colors;

// Merge the custom colors to the bootstrap default
$theme-colors: map-merge($theme-colors, $custom-theme-colors);
$utilities-text-colors: map-merge($utilities-text-colors, $custom-utilities-colors );
$utilities-bg-colors: map-merge($utilities-bg-colors, $custom-utilities-colors);
$table-variants: map-merge($table-variants, $custom-table-colors);

@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/utilities";

... And the other import