pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[REF] *: BS5: handle contrast color

Browse Source 
The logic not identical in BS4 -> BS5
The color contrast system in BS5 relies on WCAG 2.0 contrast algo.
So color-yiq is converted to color-contrast.
Note that there are some "texts/buttons/other visuals" elements
which will not have the same contrast as before.

$yiq-text-dark and $yiq-text-light are respectively replaced with
$color-contrast-dark and $color-contrast-light.

Note that we had to use '$min-contrast-ratio: 2.2' for .o_tag_color_X badge.

Task ID: 2766483

Part-of: odoo/odoo#95450
Co-authored-by: Stefano Rigano <sri@odoo.com>
This commit is contained in:
Romeo Fragomeli
2022-07-07 13:30:17 +02:00
co-authored by Stefano Rigano
parent 42d546a902
commit 41eebf822b
30 changed files with 61 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web_editor/static/src/scss/bootstrap_overridden.scss
Vendored
-2
View File
@@ -1,5 +1,3 @@
// Use auto threshold for yiq colors
$yiq-contrasted-threshold: false !default;
// Automatically update bootstrap colors map (unused by BS itself)
$colors: () !default;
addons/web_editor/static/src/scss/web_editor.common.scss
+5 -5
View File
@@ -16,7 +16,7 @@
@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'));
$-text: color('o-cc#{$index}-text') or color-contrast(o-color('o-cc#{$index}-bg'));
$-headings: color('o-cc#{$index}-headings') or $-text;
$-h2: color('o-cc#{$index}-h2') or $-headings;
$-h3: color('o-cc#{$index}-h3') or $-h2;
@@ -769,7 +769,7 @@ blockquote {
.nav-link.active,
.show > .nav-link {
background-color: $-btn-primary-color;
color: color-yiq($-btn-primary-color);
color: color-contrast($-btn-primary-color);
}
}
.dropdown-menu .dropdown-item { // Need to add +1 priority thanks to
@@ -778,10 +778,10 @@ blockquote {
&:active {
&, h6 { // Quick fix: sometimes we use h6 in dropdowns
@include gradient-bg($-btn-primary-color);
color: color-yiq($-btn-primary-color) !important;
color: color-contrast($-btn-primary-color) !important;
&:hover, &:focus {
color: color-yiq($-btn-primary-color) !important;
color: color-contrast($-btn-primary-color) !important;
}
}
}
@@ -791,7 +791,7 @@ blockquote {
&.active {
background-color: $-btn-primary-color;
color: color-yiq($-btn-primary-color);
color: color-contrast($-btn-primary-color);
border-color: $-btn-primary-color;
}
}
addons/web_editor/static/src/scss/wysiwyg.scss
+1 -1
View File
@@ -377,7 +377,7 @@ $o-we-toolbar-color-clickable-active: $o-we-bg-darkest;
background: $o-brand-primary;
&, &:hover {
color: color-yiq($o-brand-primary);
color: color-contrast($o-brand-primary);
}
&:hover {