[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

1 files changed, 11 insertions, 3 deletions

diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
index d1644a1174e..c1144ec23a7 100644
--- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss
+++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss
@@ -3,16 +3,22 @@ $yiq-contrasted-threshold: false !default;
 
 // Automatically update bootstrap colors map (unused by BS itself)
 $colors: () !default;
-$colors: map-merge($o-color-palette, $colors);
+@each $name, $color in $o-color-palette {
+    $colors: map-merge(('#{$name}': o-color($color)), $colors);
+}
 
 // Automatically extend bootstrap to create theme background/text/button classes
 $theme-colors: () !default;
-$theme-colors: map-merge($o-theme-color-palette, $theme-colors);
+@each $name, $color in $o-theme-color-palette {
+    $theme-colors: map-merge(('#{$name}': o-color($color)), $theme-colors);
+}
 
 // Automatically extend bootstrap gray palette (the theme palette is supposed to
 // at least declare white and black)
 $grays: () !default;
-$grays: map-merge($o-gray-color-palette, $grays);
+@each $name, $color in $o-gray-color-palette {
+    $grays: map-merge(('#{$name}': o-color($color)), $grays);
+}
 
 // Bootstrap use standard variables to define individual colors which are then
 // placed into a map which is then used to get the value of each individual
@@ -55,3 +61,5 @@ $gray-700: gray('700') !default;
 $gray-800: gray('800') !default;
 $gray-900: gray('900') !default;
 $black: gray('black') !default;
+
+$o-color-system-initialized: true;