issue 605: improve the way chill loads bootstrap module

custom variables are loaded before bootstrap variables, custom maps are loaded after

src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/_shared.scss

@@ -1,14 +1,23 @@
-// Configuration
+/*
+ * This shared file is used in Chill sass sheets and Vue sass styles to use some bootstrap/chill variables.
+ * Search on @import 'ChillMainAssets/module/bootstrap/shared';
+ */
+
+// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
 @import "bootstrap/scss/functions";
 
-/*
-*  Replaced by CHILL variables
-*  it is necessary to keep the possibility of making a diff with original !
-*  original: "bootstrap/scss/variables";
-*/
+// 2. Include any default variable overrides here
 @import "custom/_variables";
 
+// 3. Include remainder of required Bootstrap stylesheets
+@import "bootstrap/scss/variables";
+
+// 4. Include any default map overrides here
+@import "custom/_maps";
+
+// 5. Include remainder of required parts
 @import "bootstrap/scss/mixins";
-@import "bootstrap/scss/utilities";
+@import "bootstrap/scss/root";
+
 
 

src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/bootstrap.scss

@@ -1,18 +1,8 @@
-/*!
- * Bootstrap v5.0.1 (https://getbootstrap.com/)
- * Copyright 2011-2021 The Bootstrap Authors
- * Copyright 2011-2021 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
- *
- * Enable / disable bootstrap assets
- */
-
-// Bootstrap configuration files are shared with chill entrypoint
+// Some Bootstrap variables and configuration files are shared with chill entrypoint
 @import "shared";
 
-// scss-docs-start import-stack
-// Layout & components
-@import "bootstrap/scss/root";
+// 6. Optionally include any other parts as needed
+@import "bootstrap/scss/utilities";
 @import "bootstrap/scss/reboot";
 @import "bootstrap/scss/type";
 @import "bootstrap/scss/images";
@@ -42,14 +32,11 @@
 @import "bootstrap/scss/carousel";
 @import "bootstrap/scss/spinners";
 @import "bootstrap/scss/offcanvas";
-
-// Helpers
 @import "bootstrap/scss/helpers";
 
-// Utilities
+// 7. Optionally include utilities API last to generate classes based on the Sass map in
 @import "bootstrap/scss/utilities/api";
-// scss-docs-end import-stack
 
-// CHILL custom
+// 8. Add additional custom code here
 @import "custom";
 @import "custom/_debug";

src/Bundle/ChillMainBundle/Resources/public/module/bootstrap/custom/_maps.scss

@@ -0,0 +1,69 @@
+//// CHILL OVERRIDE DEFAULT BOOTSTRAP COLORS MAP
+
+// 'beige' variations
+$beige-100: tint-color($beige, 80%);
+$beige-200: tint-color($beige, 60%);
+$beige-300: tint-color($beige, 40%);
+$beige-400: tint-color($beige, 20%);
+$beige-500: $beige;
+$beige-600: shade-color($beige, 20%);
+$beige-700: shade-color($beige, 40%);
+$beige-800: shade-color($beige, 60%);
+$beige-900: shade-color($beige, 80%);
+
+$chill-blue:         $blue;
+$chill-green:        $green;
+$chill-green-dark:   $green-600;
+$chill-orange:       $orange;
+$chill-yellow:       $yellow;
+$chill-red:          $red;
+$chill-beige:        $beige;
+$chill-pink:         $pink;
+$chill-dark-gray:    $gray-800;
+$chill-gray:         $gray-600;
+$chill-l-gray:       $gray-400;
+$chill-ll-gray:      $gray-300;
+$chill-light-gray:   $gray-200;
+$chill-llight-gray:  $gray-100;
+
+$colors: (
+    "blue":       $blue,
+    "green":      $green,
+    "green-dark": $green-600,
+    "yellow":     $yellow,
+    "orange":     $orange,
+    "red":        $red,
+    "pink":       $pink,
+    "beige":      $beige,
+    "white":      $white,
+    "gray":       $gray-600,
+    "dark":       $gray-800,
+    "black":      $black
+);
+
+$chill-colors: (
+    "chill-blue":         $chill-blue,
+    "chill-green":        $chill-green,
+    "chill-green-dark":   $chill-green-dark,
+    "chill-orange":       $chill-orange,
+    "chill-yellow":       $chill-yellow,
+    "chill-red":          $chill-red,
+    "chill-beige":        $chill-beige,
+    "chill-pink":         $chill-pink,
+    "chill-dark-gray":    $chill-dark-gray,
+    "chill-gray":         $chill-gray,
+    "chill-l-gray":       $chill-l-gray,
+    "chill-ll-gray":      $chill-ll-gray,
+    "chill-light-gray":   $chill-light-gray,
+    "chill-llight-gray":  $chill-llight-gray,
+);
+
+// Merge the maps
+$theme-colors: map-merge($theme-colors, $chill-colors);
+
+// Chill color classes
+@each $color, $value in $chill-colors {
+    .#{$color} {
+        color: $value;
+    }
+}