[IMP] website, web_editor: restore default inputs to white + add config

This PR refactor the "inputs design system" by reverting the correlation
'$input-bg == $light == color-3', initially introduced by #120302.

Beside ensuring color-consistency, the former system aimed to simplify
palette edition by clarifying how color-3 was used (simply all the UI
elements...).

While the former system was responsive to user customization and
color-presets, it didn't necessarily delight everyone's discerning
taste, at least not with default settings/palette.

This commit enforces a classic "white with borders" design that's
independent from the color palette and doesn't adapt to color-presets.
The rationale behind this decision is that the need for non-white inputs
is "nonexistent" and exceptional cases should be addressed using the
SCSS editor.

As a workaround to ease edition for users that still wants to challenge
themselves with the creation of "not standard" palettes/designs, this
commit introduce a colorPicker option assigned to $input-bg.
The hope is that this new controller help users finding a "compromise
color" that could work with any color-presets.

task-3568806

closes odoo/odoo#139642

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

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

@@ -710,13 +710,6 @@ blockquote {
                     border-color: $-btn-primary-color;
                 }
             }
-
-            // Forms
-            @if ($-bg-color == $light and $-bg-color != $body-bg) {
-                --o-input-bg: #{$body-bg};
-                --o-input-border-color: var(--o-border-color);
-                --o-input-placeholder-color: #{rgba(color-contrast($body-bg), .5)};
-            }
         }
     }
 }

addons/website/static/src/scss/bootstrap_overridden.scss

@@ -241,12 +241,12 @@ $input-border-radius: o-website-value('input-border-radius') !default;
 $input-border-radius-lg: o-website-value('input-border-radius-lg') !default;
 $input-border-radius-sm: o-website-value('input-border-radius-sm') !default;
 
-$input-bg: var(--o-input-bg, #{$light}) !default;
-$input-border-color: var(--o-input-border-color, #{$light}) !default;
-$input-color: color-contrast($light) !default;
-$input-focus-bg: $body-bg !default;
-$input-focus-color: $body-color !default;
-$input-placeholder-color: var(--o-input-placeholder-color, #{rgba($input-color, .5)}) !default;
+$input-bg: o-color('input') or $body-bg !default;
+$input-border-color: $border-color !default;
+$input-color: color-contrast($input-bg) !default;
+$input-placeholder-color: mix($input-bg, $input-color) !default;
+
+$input-disabled-bg: mix($input-color, $input-bg, 10%) !default;
 
 $form-check-input-border: ($input-border-width or 1px) solid $input-border-color !default;
 $form-range-track-bg: $light !default;

addons/website/static/src/scss/primary_variables.scss

@@ -5,6 +5,7 @@
 
 $o-base-color-palette: map-merge($o-base-color-palette, (
     'body': $o-portal-default-body-bg,
+    'input': null,
     'menu': 1, // o_cc1
     'menu-custom': null,
     'menu-border-color': null, // Default to classes used on the template

addons/website/views/snippets/snippets.xml

@@ -1954,6 +1954,12 @@
             <we-input string="Small" class="o_we_sublevel_1" data-customize-website-variable="" data-variable="input-border-radius-sm" data-unit="px" data-save-unit="rem"/>
             <we-input string="Large" class="o_we_sublevel_1" data-customize-website-variable="" data-variable="input-border-radius-lg" data-unit="px" data-save-unit="rem"/>
         </we-collapse>
+        <we-row string="Background">
+            <we-colorpicker title="Background"
+                data-no-transparency="true"
+                data-customize-website-color=""
+                data-color="input"/>
+        </we-row>
     </div>
     <div data-js="OptionsTab" data-selector="theme-advanced" data-no-check="true">
         <we-checkbox string="Show Header"