From c2ad20fc9340bd7d984ec5dde83b706784989bb4 Mon Sep 17 00:00:00 2001
From: "Serge Bayet (seba)" <seba@odoo.com>
Date: Fri, 8 Dec 2023 11:22:13 +0100
Subject: [PATCH] [FIX] web: support color functional CSS notation

This commit enables support for functional color notation in CSS
(https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color).

This new feature accommodates various color spaces utilized within the
'color()' CSS function, seamlessly converting them into an RGBA format
that is comprehensible to the right panel.

Steps to reproduce:
- Enter edit mode
- Add a snippet with a column
- Click on the column
- Set border-width to 5px, enter
=> A gray border appears but the option colorpicker shows no color

Since [this commit] the border has as default opacity of 15%. But now
the custom color in the colorpicker is correctly set.

[this commit]: https://github.com/odoo/odoo/commit/fad514ebdc25b9de03fd387a0c07dbbc274c364e

task-3536051

closes odoo/odoo#137698

Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 addons/web/static/src/core/utils/colors.js | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/core/utils/colors.js b/addons/web/static/src/core/utils/colors.js
index a06357dcfe7..17054b56234 100644
--- a/addons/web/static/src/core/utils/colors.js
+++ b/addons/web/static/src/core/utils/colors.js
@@ -161,7 +161,7 @@ export function convertRgbaToCSSColor(r, g, b, a) {
  * but this method allows to receive one and returns the correct opacity value.
  *
  * @static
- * @param {string} cssColor - hexadecimal code or rgb() or rgba()
+ * @param {string} cssColor - hexadecimal code or rgb() or rgba() or color()
  * @returns {Object|false}
  *          - red [0, 255] (integer)
  *          - green [0, 255] (integer)
@@ -198,6 +198,26 @@ export function convertCSSColorToRgba(cssColor) {
     // Note: however, if ever implemented be careful of 'white'/'black' which
     // actually are color names for our color system...
 
+    // Check if cssColor is a color() functional notation allowing colorspace
+    // with implicit sRGB.
+    // "<color()>" allows to define a color specification in a formalized
+    // manner. It starts with the "color(" keyword, specifies color space
+    // parameters, and optionally includes an alpha value for transparency.
+    if (/color\(.+\)/.test(cssColor)) {
+        const canvasEl = document.createElement("canvas");
+        canvasEl.height = 1;
+        canvasEl.width = 1;
+        const ctx = canvasEl.getContext("2d");
+        ctx.fillStyle = cssColor;
+        ctx.fillRect(0, 0, 1, 1);
+        const data = ctx.getImageData(0, 0, 1, 1).data;
+        return {
+            red: data[0],
+            green: data[1],
+            blue: data[2],
+            opacity: data[3] / 2.55, // Convert 0-255 to percentage
+        };
+    }
     return false;
 };
 /**