[REF] web_editor, *: review how html properties are printed (scss)

*: website

Make sure strings are printed quoted and null values are not printed.

Part of https://github.com/odoo/odoo/pull/54065
task-2291398

1 files changed, 13 insertions, 13 deletions

diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss
index 020ba4f5203..9bfb7cf025e 100644
--- a/addons/web_editor/static/src/scss/web_editor.common.scss
+++ b/addons/web_editor/static/src/scss/web_editor.common.scss
@@ -4,7 +4,7 @@
 
 :root {
     @each $color, $value in $grays {
-        --#{$color}: #{$value};
+        @include print-variable($color, $value);
     }
 
     // Most of the keys of the color combination color should be null. We have
@@ -19,45 +19,45 @@
         $-h6: color('o-cc#{$index}-h6') or $-h5;
 
         @if not color('o-cc#{$index}-text') {
-            --o-cc#{$index}-text: #{$-text};
+            @include print-variable('o-cc#{$index}-text', $-text);
         }
         @if not color('o-cc#{$index}-headings') {
-            --o-cc#{$index}-headings: #{$-headings};
+            @include print-variable('o-cc#{$index}-headings', $-headings);
         }
         @if not color('o-cc#{$index}-h2') {
-            --o-cc#{$index}-h2: #{$-h2};
+            @include print-variable('o-cc#{$index}-h2', $-h2);
         }
         @if not color('o-cc#{$index}-h3') {
-            --o-cc#{$index}-h3: #{$-h3};
+            @include print-variable('o-cc#{$index}-h3', $-h3);
         }
         @if not color('o-cc#{$index}-h4') {
-            --o-cc#{$index}-h4: #{$-h4};
+            @include print-variable('o-cc#{$index}-h4', $-h4);
         }
         @if not color('o-cc#{$index}-h5') {
-            --o-cc#{$index}-h5: #{$-h5};
+            @include print-variable('o-cc#{$index}-h5', $-h5);
         }
         @if not color('o-cc#{$index}-h6') {
-            --o-cc#{$index}-h6: #{$-h6};
+            @include print-variable('o-cc#{$index}-h6', $-h6);
         }
 
         @if not color('o-cc#{$index}-link') {
-            --o-cc#{$index}-link: #{theme-color('primary')};
+            @include print-variable('o-cc#{$index}-link', theme-color('primary'));
         }
 
         $-btn-primary: color('o-cc#{$index}-btn-primary');
         @if not $-btn-primary {
-            --o-cc#{$index}-btn-primary: #{theme-color('primary')};
+            @include print-variable('o-cc#{$index}-btn-primary', theme-color('primary'));
         }
         @if not color('o-cc#{$index}-btn-primary-border') {
-            --o-cc#{$index}-btn-primary-border: #{$-btn-primary or theme-color('primary')};
+            @include print-variable('o-cc#{$index}-btn-primary-border', $-btn-primary or theme-color('primary'));
         }
 
         $-btn-secondary: color('o-cc#{$index}-btn-secondary');
         @if not $-btn-secondary {
-            --o-cc#{$index}-btn-secondary: #{theme-color('secondary')};
+            @include print-variable('o-cc#{$index}-btn-secondary', theme-color('secondary'));
         }
         @if not color('o-cc#{$index}-btn-secondary-border') {
-            --o-cc#{$index}-btn-secondary-border: #{$-btn-secondary or theme-color('secondary')};
+            @include print-variable('o-cc#{$index}-btn-secondary-border', $-btn-secondary or theme-color('secondary'));
         }
     }
 }