From 3ba89c75be381bdf572503f7bfa036eaa7263e2f Mon Sep 17 00:00:00 2001
From: Lucas Perais <lpe@odoo.com>
Date: Fri, 19 Jan 2024 09:53:34 +0100
Subject: [PATCH] [FIX] web: report: remove CSSCustomProperties in bg and text
 colors

After the migration to Bootstrap5 (odoo/odoo#95450), some standard
bootstrap classes did not work anymore when *printing* the report
via wkhtmltopdf (bg-dark, bg-black etc.....).
This is because wkhtmltopdf doesn't support CSS Custom Properties and many
Bootstrap5 rules use them (many have already been adapted in the referenced PR or linked ones)
wkhtmltopdf doesn"t support rgba CSS function either.

This fix allows for thoses classes to work when printing as they can be used
if the report was edited via Studio's Report Editor.

closes odoo/odoo#150214

X-original-commit: 9e32609e6920485d690b3bdb1e4dc83b338c8b36
Signed-off-by: Romeo Fragomeli (rfr) <rfr@odoo.com>
Signed-off-by: Lucas Perais (lpe) <lpe@odoo.com>
---
 .../src/webclient/actions/reports/report.scss | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/addons/web/static/src/webclient/actions/reports/report.scss b/addons/web/static/src/webclient/actions/reports/report.scss
index 65346da8527..795929b15e9 100644
--- a/addons/web/static/src/webclient/actions/reports/report.scss
+++ b/addons/web/static/src/webclient/actions/reports/report.scss
@@ -2,6 +2,36 @@ $o-default-report-font: 'Lato' !default;
 $o-default-report-primary-color: rgb(0, 0, 0) !default;
 $o-default-report-secondary-color: rgb(0, 0, 0) !default;
 
+// wkhtmltopdf doesn't support CSS custom properties (--name-stuff)
+// It doesn't support CSS's rgba function
+// We re-define here the .bg-[theme-colors] (and text)
+// In order to define them as a css rgb function
+$report-extended-theme-colors: map-merge(
+  $utilities-colors,
+  (
+    "black": to-rgb($black),
+    "white": to-rgb($white),
+    "body": to-rgb($body-bg)
+  )
+);
+@each $color-name, $color-value in $report-extended-theme-colors {
+    .text-#{$color-name} {
+        color: RGB($color-value) if($enable-important-utilities, !important, null);
+    }
+    .bg-#{$color-name} {
+        background-color: RGB($color-value) if($enable-important-utilities, !important, null);
+    }
+}
+// Do a similar operation than before for grays.
+@each $color-name, $color-value in $grays {
+    .text-#{$color-name} {
+        color: $color-value if($enable-important-utilities, !important, null);
+    }
+    .bg-#{$color-name} {
+        background-color: $color-value if($enable-important-utilities, !important, null);
+    }
+}
+
 html, body {
     height: 100%;
     direction: ltr;