[FIX] web_editor: properly allow to reset bg/fg text colors

Steps to reproduce:
- Go on a backend HTML field (project task description for instance)
- Write and select some text
- Open the text background color colorpicker
- Hit the "reset" button (the trash icon)
=> The text becomes black (or white in dark mode)

This was because of [1] which indirectly removed the CSS variables
`--black` and `--white`, on which the colorpalette relies.

Note: the test update made by the original commit was lost in the
forward-port because [2] removed the test. It will be restored at some
point thanks to task-3177674.

[1]: https://github.com/odoo/odoo/commit/28444a5792b9929f5250e38f3f864694e22e9370
[2]: https://github.com/odoo/odoo/commit/49297bc7bba75541ca139e6c84e0d3b311765145

closes odoo/odoo#125131

X-original-commit: 907c5b6cc24e0b86c219cda1299a87b7901f4e76
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/web_editor/static/src/scss/bootstrap_overridden.scss

@@ -1,3 +1,6 @@
+// TODO this whole file is probably not needed in the backend and may be the
+// cause of color issues. It will be reviewed in master (probably removed from
+// backend bundles and simplified).
 
 // Automatically update bootstrap colors map (unused by BS itself)
 $colors: () !default;

addons/web_editor/static/src/scss/web_editor.backend.scss

@@ -1,3 +1,14 @@
+:root {
+    // Make sure black and white CSS variables are defined as they are needed
+    // for the colorpickers to work properly. In the frontend, those are
+    // automatically defined because they are part of the $grays map. In the
+    // backend, bootstrap is more standard and those are not added in the $grays
+    // map (not needed and was actually a problem to make the enterprise dark
+    // mode work properly).
+    --white: #{$white};
+    --black: #{$black};
+}
+
 .o_field_html {
     position: relative;
     word-wrap: break-word;

addons/web_editor/static/tests/test_utils.js

@@ -28,7 +28,19 @@ const COLOR_PICKER_TEMPLATE = `
             <button data-color="white-50"/>
             <button data-color="white-75"/>
         </div>
-        <div class="o_colorpicker_section" data-name="common" data-display="Common Colors" data-icon-class="fa fa-paint-brush"/>
+        <div class="o_colorpicker_section" data-name="common" data-display="Common Colors" data-icon-class="fa fa-paint-brush">
+            <button data-color="black"></button>
+            <button data-color="900"></button>
+            <button data-color="800"></button>
+            <button data-color="700" class="d-none"></button>
+            <button data-color="600"></button>
+            <button data-color="500" class="d-none"></button>
+            <button data-color="400"></button>
+            <button data-color="300" class="d-none"></button>
+            <button data-color="200"></button>
+            <button data-color="100"></button>
+            <button data-color="white"></button>
+        </div>
     </colorpicker>
 `;
 const SNIPPETS_TEMPLATE = `