[IMP] web_editor, *: automatically increase default link color contrast

*: website

Inside a color combination (or outside, as considered the same as inside
color combination number 1), the link color can be configured. It is
set by themes to one of the 5 theme colors. Sometimes, no color of
those 5 colors contrast enough with the color combination's background
and we accepted that before, relying on the fact the user can change the
link color if he wants too. Now we automatically increase the contrast
of those link colors, except if the user overrides it.

This system might be extended to all foreground colors in the future but
the system has to be improved for that.

closes odoo/odoo#58739

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

addons/web_editor/static/src/scss/secondary_variables.scss

@@ -124,3 +124,14 @@ $o-color-system-initialized: false;
     // If not initialized, search the css color value in selected color palettes
     @return o-related-color($name, $max-recursions: 10, $use-cc-bg: true);
 }
+
+// Same as 'increase-contrast' except that the color is not changed if the given
+// related color name is part of the given exclusion list (default to a global
+// exclusion list which can be extended by other apps).
+$o-we-auto-contrast-exclusions: () !default;
+@function auto-contrast($color1, $color2, $color1-name, $exclude: $o-we-auto-contrast-exclusions) {
+    @if index($exclude, $color1-name) {
+        @return $color1;
+    }
+    @return increase-contrast($color1, $color2);
+}

addons/web_editor/static/src/scss/web_editor.common.scss

@@ -10,6 +10,8 @@
     // Most of the keys of the color combination color should be null. We have
     // to indicate their fallback values.
     @for $index from 1 through length($o-color-combinations) {
+        $-bg-color: o-color(color('o-cc#{$index}-bg'));
+
         $-text: color('o-cc#{$index}-text') or color-yiq(o-color('o-cc#{$index}-bg'));
         $-headings: color('o-cc#{$index}-headings') or $-text;
         $-h2: color('o-cc#{$index}-h2') or $-headings;
@@ -40,9 +42,9 @@
             @include print-variable('o-cc#{$index}-h6', $-h6);
         }
 
-        @if not color('o-cc#{$index}-link') {
-            @include print-variable('o-cc#{$index}-link', theme-color('primary'));
-        }
+        $-link: color('o-cc#{$index}-link');
+        $-link-color: if($-link, o-color($-link), theme-color('primary'));
+        @include print-variable('o-cc#{$index}-link', auto-contrast($-link-color, $-bg-color, 'o-cc#{$index}-link'));
 
         $-btn-primary: color('o-cc#{$index}-btn-primary');
         @if not $-btn-primary {
@@ -644,7 +646,8 @@ blockquote {
     // bg and text utility classes. **
     .o_cc#{$index} {
         // Background & Text
-        @include o-bg-color(o-color($-bg), o-color($-text), $important: false, $yiq-min-opacity-threshold: 0);
+        $-bg-color: o-color($-bg);
+        @include o-bg-color($-bg-color, o-color($-text), $important: false, $yiq-min-opacity-threshold: 0);
 
         #{$o-color-extras-nesting-selector} {
             // Headings
@@ -672,10 +675,10 @@ blockquote {
             $-link-color: if($-link, o-color($-link), theme-color('primary'));
             $-link-hover-color: darken($-link-color, 15%);
             a:not(.btn), .btn-link {
-                color: $-link-color;
+                color: auto-contrast($-link-color, $-bg-color, 'o-cc#{$index}-link');
 
                 @include hover {
-                    color: $-link-hover-color;
+                    color: auto-contrast($-link-hover-color, $-bg-color, 'o-cc#{$index}-link');
                 }
             }
 

addons/web_editor/static/src/scss/web_editor.variables.scss

@@ -576,6 +576,36 @@ $o-color-extras-nesting-selector: '&, .o_colored_level &';
     }
 }
 
+// Function which returns if a color has contrast enough in comparaison to
+// another given color.
+@function has-enough-contrast($color1, $color2) {
+    $r: (max(red($color1), red($color2))) - (min(red($color1), red($color2)));
+    $g: (max(green($color1), green($color2))) - (min(green($color1), green($color2)));
+    $b: (max(blue($color1), blue($color2))) - (min(blue($color1), blue($color2)));
+    $sum-rgb: $r + $g + $b;
+    @return ($sum-rgb >= 500);
+}
+
+// Function which transforms a color to increase its contrast in comparison to
+// another given color.
+@function increase-contrast($color1, $color2) {
+    @if not $color1 or not $color2 {
+        @return null;
+    }
+    $luma-c1: luma($color1);
+    $luma-c2: luma($color2);
+    $lightness-c1: lightness($color1);
+    $lightness-inc: if($luma-c1 < $luma-c2, -1%, 1%);
+    $i: 0;
+    // Max 15% lightness change even if not contrasted enough
+    @while ($lightness-c1 > 0.1% and $lightness-c1 < 99.9% and $i < 15 and not has-enough-contrast($color1, $color2)) {
+        $color1: adjust-color($color1, $lightness: $lightness-inc);
+        $lightness-c1: $lightness-c1 + $lightness-inc;
+        $i: $i + 1;
+    }
+    @return $color1;
+}
+
 // Print a document property the right way (depending on the type of the printed
 // variable).
 @mixin print-variable($key, $value) {

addons/website/static/src/scss/bootstrap_overridden.scss

@@ -29,7 +29,10 @@ $body-color: o-color('o-cc1-text') or color-yiq(o-color('o-cc1-bg')) !default;
 //
 // Style anchor elements.
 
-$link-color: o-color('o-cc1-link') !default;
+$-link-color: o-color('o-cc1-link');
+$-link-color: if($-link-color, $-link-color, o-color('primary'));
+$link-color: auto-contrast($-link-color, o-color('o-cc1-bg'), 'o-cc1-link') !default;
+$link-hover-color: auto-contrast(darken($link-color, 15%), o-color('o-cc1-bg'), 'o-cc1-link') !default;
 $link-decoration: if(o-website-value('link-underline') == 'always', underline, none) !default;
 $link-hover-decoration: if(o-website-value('link-underline') != 'never', underline, none) !default;
 

addons/website/static/src/scss/secondary_variables.scss

@@ -127,6 +127,9 @@ $o-original-color-palette-number: $o-color-palette-number;
 $o-color-palette-number: length($o-color-palettes);
 $o-theme-color-palette-number: length($o-theme-color-palettes);
 
+$o-we-auto-contrast-exclusions: () !default;
+$o-we-auto-contrast-exclusions: join($o-we-auto-contrast-exclusions, map-keys(o-map-omit($o-user-color-palette)));
+
 //------------------------------------------------------------------------------
 // Fonts
 //------------------------------------------------------------------------------