[IMP] website, *: introduce new classes to color snippets

*: web, web_editor, website_blog, website_event

New o_cc${xxx} classes where ${xxx} is a number [1-5] to style snippets:
they come with a background color, a text color, headings colors, a
link color, primary button colors and secondary button colors which
will later be possible to customize by the user.

The classes are made so that they are working on two levels. So if a
column receives a color class and the snippet too, everything will work
fine. More than 2 levels are not supported and the editor is made so
those cases should not appear. See o_colored_level class.

Part of https://github.com/odoo/odoo/pull/45856
task-2197038

3 files changed, 33 insertions, 10 deletions

diff --git a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
index d7f30a8d869..0c656ae1db2 100644
--- a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
+++ b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss
@@ -3,3 +3,15 @@
 // Font, line-height, and color for body text, headings, and more.
 
 $font-size-base: (14 / 16) * 1rem !default;
+
+// Inherit color for blockquote-footer, use text-muted on top of it if you want
+// a muted one. This is defined here to be consistent in the whole frontend, as
+// when used with background classes, it should not be forced to a gray color.
+$blockquote-small-color: inherit !default;
+
+// Figures
+
+// Inherit color for figure-caption, use text-muted on top of it if you want
+// a muted one. This is defined here to be consistent in the whole frontend, as
+// when used with background classes, it should not be forced to a gray color.
+$figure-caption-color: inherit !default;
diff --git a/addons/web/static/src/scss/bs_mixins_overrides.scss b/addons/web/static/src/scss/bs_mixins_overrides.scss
index b2b54d554d8..c705e5741ba 100644
--- a/addons/web/static/src/scss/bs_mixins_overrides.scss
+++ b/addons/web/static/src/scss/bs_mixins_overrides.scss
@@ -14,19 +14,33 @@ $enable-deprecation-messages: false !default;
     @return o-get-most-contrast($color, $light, $dark, $background, $threshold, $cross-mix);
 }
 
-@mixin o-bg-color($color, $text-color: null, $with-muted: true) {
+// This placeholder regroups the rules that will apply on all elements with a
+// bg-* class (see o-bg-color, bg-variant). The optimized-css way would be to
+// have a common class for them all.
+%o-bg-color-component-color-reset {
+    h1, h2, h3, h4, h5, h6 {
+        color: inherit;
+    }
+}
+
+$o-color-extras-nesting-selector: '&' !default;
+
+@mixin o-bg-color($color, $text-color: null, $with-extras: true, $important: true, $nesting-selector: $o-color-extras-nesting-selector) {
     @if ($color) {
         $-yiq-color: if($text-color, $text-color, color-yiq($color));
-        background-color: $color !important;
+        background-color: $color#{if($important, ' !important', '')};
         color: $-yiq-color; // not important so that text utilities still work
 
-        @if ($with-muted) {
-            .text-muted {
-                color: scale-color($-yiq-color, $alpha: -30%) !important;
+        @if $with-extras {
+            #{$nesting-selector} {
+                @extend %o-bg-color-component-color-reset;
+
+                .text-muted {
+                    // Always important since the basic BS rule is important
+                    color: scale-color($-yiq-color, $alpha: -30%) !important;
+                }
             }
         }
-
-        @include o-bg-color-extension($color, $text-color, $with-muted);
     }
 }
 
diff --git a/addons/web/static/src/scss/utils.scss b/addons/web/static/src/scss/utils.scss
index 1d410fc7475..89c38290da3 100644
--- a/addons/web/static/src/scss/utils.scss
+++ b/addons/web/static/src/scss/utils.scss
@@ -197,9 +197,6 @@
     @return $-with-support-font;
 }
 
-// Mixin which allows to extend the BS4 bg-variant mixin
-@mixin o-bg-color-extension($color, $text-color, $with-muted) {}
-
 // Function to remove all null values of a map
 @function o-map-omit($map) {
     $-map: ();