[FIX] website: fix header shadow color

To reproduce the issue:

- Website > Edit mode > Click on header
- Change the shadow color of the header to a suggested gray > it only
  works with normal colors but not grays.
- Change the header to "Header full" (it has no shadow by default)
- Add a shadow > It works
- Change the shadow color to a gray > it is reverted to no shadow.

To explain what happens exactly, let's suppose we want to set the gray
color from the custom property "--900":

When this color selected on colorpicker, the `customizeWebsiteVariable`
method will update assets to set a new user value:

`'menu-box-shadow': var(--900) ...`

But when the SCSS is compiled, the property name (here "--900") is
computed as a number which generates a wrong CSS value: `var(900) ...`

The goal of this commit is to prevent this behaviour by protecting
colorpicker variable names so they cannot be used for any further math.

task-3069518

closes odoo/odoo#113376

X-original-commit: 3e58af4bd9151f491c6a609b23f956191c594632
Signed-off-by: Arthur Detroux (ard) <ard@odoo.com>
Signed-off-by: Outagant Mehdi (mou) <mou@odoo.com>

addons/website/models/assets.py

@@ -123,6 +123,13 @@ class Assets(models.AbstractModel):
         updatedFileContent = self._get_content_from_url(custom_url) or self._get_content_from_url(url)
         updatedFileContent = updatedFileContent.decode('utf-8')
         for name, value in values.items():
+            # Protect variable names so they cannot be computed as numbers
+            # on SCSS compilation (e.g. var(--700) => var(700)).
+            if isinstance(value, str):
+                value = re.sub(
+                    r"var\(--([0-9]+)\)",
+                    lambda matchobj: "var(--#{" + matchobj.group(1) + "})",
+                    value)
             pattern = "'%s': %%s,\n" % name
             regex = re.compile(pattern % ".+")
             replacement = pattern % value