From 809029602ecfbd62f50cfebed7e5d8e661804c98 Mon Sep 17 00:00:00 2001 From: divy-odoo Date: Wed, 12 Apr 2023 10:17:55 +0000 Subject: [PATCH] [FIX] web, website, portal: fix the text color contrast over background 1. Introduce primary variable to simplified overridden value of `$min-contrast-ratio` and document its need. 2. Reduce `$min-contrast-ratio` to 2.9 to solve the inconsistency with the previous version 15.0 of text color over some background color. Of course it won't restore everything to the way it was: we still want the version 16.0 to be an evolution over version 15.0 using what bootstrap recommended to compare contrasts. But as going from 3.0 to 2.9 should not impact existing websites too much and solve use cases we feel need solving, we feel it is an ok change. 3. Restore override of the `color-contrast` method that will now handle the transparent colors. Before this commit, a color-contrast function was just considering RGB value only, after this commit it will consider RGBA value, relying (by default) on the fact the body background is the background behind the colors we are comparing. task-3241031 closes odoo/odoo#126759 X-original-commit: 313220ed4a0ff4ae26eb113a3a88b0dc44b649fe Signed-off-by: Quentin Smetz (qsm) Signed-off-by: Divyesh Vyas (divy) --- .../static/src/scss/bootstrap_overridden.scss | 4 ++- .../scss/bootstrap_overridden_frontend.scss | 2 +- .../static/src/scss/bs_mixins_overrides.scss | 25 ++++++++++++++++++- .../static/src/scss/primary_variables.scss | 3 +++ .../static/src/scss/bootstrap_overridden.scss | 4 ++- 5 files changed, 34 insertions(+), 4 deletions(-) diff --git a/addons/portal/static/src/scss/bootstrap_overridden.scss b/addons/portal/static/src/scss/bootstrap_overridden.scss index 6b3031ae531..58fd9f65fb0 100644 --- a/addons/portal/static/src/scss/bootstrap_overridden.scss +++ b/addons/portal/static/src/scss/bootstrap_overridden.scss @@ -1,6 +1,8 @@ // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast -$min-contrast-ratio: 3 !default; + +// Overridden here as it is a dependency for some variables/functions afterwards +$min-contrast-ratio: $o-frontend-min-contrast-ratio !default; //Restore BS4 Colors $blue: #007bff !default; diff --git a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss index 86ef5ee374b..da5ac2ce6d1 100644 --- a/addons/web/static/src/scss/bootstrap_overridden_frontend.scss +++ b/addons/web/static/src/scss/bootstrap_overridden_frontend.scss @@ -16,7 +16,7 @@ $primary: $blue !default; // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast -$min-contrast-ratio: 3 !default; +$min-contrast-ratio: $o-frontend-min-contrast-ratio !default; // Body diff --git a/addons/web/static/src/scss/bs_mixins_overrides.scss b/addons/web/static/src/scss/bs_mixins_overrides.scss index 9be536f67e0..01992118eef 100644 --- a/addons/web/static/src/scss/bs_mixins_overrides.scss +++ b/addons/web/static/src/scss/bs_mixins_overrides.scss @@ -7,6 +7,29 @@ // otherwise we will have deprecation messages for assets_common generation $enable-deprecation-messages: false !default; +// Override color-contrast function to handle the alpha component of colors +@function color-contrast($background, $color-contrast-dark: $color-contrast-dark, $color-contrast-light: $color-contrast-light, $min-contrast-ratio: $min-contrast-ratio, $main-background: $body-bg) { + $real-color: opaque($main-background, $background); + + $foregrounds: $color-contrast-light, $color-contrast-dark, $white, $black; + $max-ratio: 0; + $max-ratio-color: null; + + @each $color in $foregrounds { + $contrast-ratio: contrast-ratio($real-color, $color); + @if $contrast-ratio > $min-contrast-ratio { + @return $color; + } @else if $contrast-ratio > $max-ratio { + $max-ratio: $contrast-ratio; + $max-ratio-color: $color; + } + } + + @warn "Found no color leading to #{$min-contrast-ratio}:1 contrast ratio against #{$real-color} (mix of given color and background)..."; + + @return $max-ratio-color; +} + @function mute-color($color) { @return scale-color($color, $alpha: -30%); } @@ -27,7 +50,7 @@ $o-color-extras-nesting-selector: '&' !default; @if ($color) { $-yiq-threshold-met: alpha($color) > $yiq-min-opacity-threshold; - $-yiq-color: if($text-color, $text-color, if($-yiq-threshold-met, color-contrast($color), null)); + $-yiq-color: if($text-color, $text-color, if($-yiq-threshold-met, color-contrast($color, $main-background: $background), null)); background-color: $color#{if($important, ' !important', '')}; color: $-yiq-color; // not important so that text utilities still work diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss index 07a2f63f5d3..1e6623f5729 100644 --- a/addons/web/static/src/scss/primary_variables.scss +++ b/addons/web/static/src/scss/primary_variables.scss @@ -3,6 +3,9 @@ /// They are available in every asset bundle. /// +// Contrast ratio +$o-frontend-min-contrast-ratio: 2.9 !default; + // Color-scheme $o-webclient-color-scheme: bright !default; diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss index cafa97b32d4..3ea2844a3f4 100644 --- a/addons/website/static/src/scss/bootstrap_overridden.scss +++ b/addons/website/static/src/scss/bootstrap_overridden.scss @@ -15,7 +15,9 @@ $black: #000 !default; // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7. // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast -$min-contrast-ratio: 3 !default; + +// Overridden here as it is a dependency for some variables/functions afterwards +$min-contrast-ratio: $o-frontend-min-contrast-ratio !default; // Prefix for :root CSS variables $variable-prefix: '' !default;