[FIX] web, *: make gray utilities available for all bootstrap

* web_editor

Before this commit, the web_editor app defined gray utilities: bg-* and
text-* classes for gray colors (on top of theme colors). Those are now
defined for all bootstrap (note that this was already the case as the
web_editor file was put in the backend and in the frontend). The
difference is that now the gray utilities are defined just after
the standard bootstrap. This allows to complete and fix
https://github.com/odoo/odoo/pull/29253/files as text-muted in gray
card bodies were not using the correct color without this (see code
comments for details).

closes odoo/odoo#29290

addons/web/static/src/scss/bootstrap_review.scss

@@ -9,10 +9,19 @@
     clear: both;
 }
 
+// Extend bootstrap to create background and text utilities for gray colors too
+// Note: the card-body rule below needs those grays utilities to be defined
+// before so that the related o-bg-color text-muted rules work.
+@each $color, $value in $grays {
+    @include bg-variant(".bg-#{$color}", $value);
+    @include text-emphasis-variant(".text-#{$color}", $value);
+}
+
 .card-body {
     // BS4 colored cards do not have a very popular design. This will reset them
     // to a BS3-like one: only the header and footer are colored and the body
     // will use the color of a default card background with a light opacity.
+    // Limitation: bg-* utilities cannot be used on card-body elements anymore.
     @include o-bg-color(rgba($card-bg, $o-card-body-bg-opacity));
 }
 

addons/web_editor/static/src/scss/web_editor.common.scss

@@ -228,9 +228,3 @@ a.o_underline {
         text-decoration: underline;
     }
 }
-
-// Extend bootstrap to create background and text utilities for gray colors too
-@each $color, $value in $grays {
-    @include bg-variant(".bg-#{$color}", $value);
-    @include text-emphasis-variant(".text-#{$color}", $value);
-}