[IMP] website, *: allow presets user edition

*: web, web_editor

Now, the user can edit each individual component of each color preset
thanks to the third tab of the left panel. The edition of the first
preset is the same as the others for the users but it is actually
also used for "no-preset" areas, meaning that they impact the whole
website by default (*without impacting the other presets*). The website
thus appears as areas using presets, preset 1 being the default (in the
future all areas will be customizable with a different preset). The only
difference between "using preset 1 explicitely" and "not using a preset"
will be that background color is transparent in no-preset, leaving the
body background appear. If the body background has no image, then there
is no difference at all as the background color of the body is set to be
the background color of the preset 1. In boxed mode, that color is used
for the "box" and the website body uses a different customizable color.

Note: before this commit, the "text" color edition was used to set the
main text color and one of the constrasting color for the color-yiq
function (the darkest if a dark color or the lightest if a light color).
That last part has been removed and automatic colors will now always
use $gray-900 and $white as contrasting colors, unless changed by the
theme explicitely. This needed to be removed as now the "text color"
edition has been moved in the "preset 1" config and should thus only
impact the "no-preset / preset 1" areas instead of all the presets.

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

2 files changed, 15 insertions, 4 deletions

diff --git a/addons/web/static/src/scss/bootstrap_review.scss b/addons/web/static/src/scss/bootstrap_review.scss
index f8c03533669..8fab23b0b1a 100644
--- a/addons/web/static/src/scss/bootstrap_review.scss
+++ b/addons/web/static/src/scss/bootstrap_review.scss
@@ -108,15 +108,22 @@
 // We do it ourself here with a tweak: we introduce btn-fill-* (working as the
 // normal btn-* classes (in opposition to btn-outline-* classes). We then map
 // the btn-* classes to either btn-fill-* or btn-outline-* classes depending on
-// the configuration.
+// the configuration. We also allow to define a border-color different than the
+// background color.
+$o-btn-bg-colors: () !default;
+$o-btn-border-colors: () !default;
 @each $color, $value in $theme-colors {
+    $-bg-color: map-get($o-btn-bg-colors, $color) or $value;
+    $-border-color: map-get($o-btn-border-colors, $color) or $-bg-color;
     .btn-fill-#{$color} {
-        @include button-variant($value, $value);
+        @include button-variant($-bg-color, $-border-color);
     }
 }
 @each $color, $value in $theme-colors {
+    $-bg-color: map-get($o-btn-bg-colors, $color) or $value;
+    $-border-color: map-get($o-btn-border-colors, $color) or $-bg-color;
     .btn-outline-#{$color} {
-        @include button-outline-variant($value);
+        @include button-outline-variant($-border-color);
     }
 }
 $o-btn-outline-defaults: () !default;
diff --git a/addons/web/static/src/scss/bs_mixins_overrides.scss b/addons/web/static/src/scss/bs_mixins_overrides.scss
index c705e5741ba..9ae6db9ecc1 100644
--- a/addons/web/static/src/scss/bs_mixins_overrides.scss
+++ b/addons/web/static/src/scss/bs_mixins_overrides.scss
@@ -14,6 +14,10 @@ $enable-deprecation-messages: false !default;
     @return o-get-most-contrast($color, $light, $dark, $background, $threshold, $cross-mix);
 }
 
+@function mute-color($color) {
+    @return scale-color($color, $alpha: -30%);
+}
+
 // 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.
@@ -37,7 +41,7 @@ $o-color-extras-nesting-selector: '&' !default;
 
                 .text-muted {
                     // Always important since the basic BS rule is important
-                    color: scale-color($-yiq-color, $alpha: -30%) !important;
+                    color: mute-color($-yiq-color) !important;
                 }
             }
         }