diff options
Diffstat (limited to 'addons/web_editor/static/src/scss')
3 files changed, 50 insertions, 6 deletions
diff --git a/addons/web_editor/static/src/scss/secondary_variables.scss b/addons/web_editor/static/src/scss/secondary_variables.scss index 5fb7d16a119..815e2c728e2 100644 --- a/addons/web_editor/static/src/scss/secondary_variables.scss +++ b/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); +} 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 a2981937e27..e4e0a6f48d2 100644 --- a/addons/web_editor/static/src/scss/web_editor.common.scss +++ b/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'); } } diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss index 321adeb7024..00d7884f4f7 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/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) { |