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/crm/static/src/scss/crm.scss
+1 -1
View File
@@ -66,7 +66,7 @@
}
@at-root a#{&} {
&:hover {
color: color-yiq($background-color);
color: color-contrast($background-color);
background-color: darken($background-color, 10%);
}
}
addons/hr_skills/static/src/css/hr_skills.scss
+1 -1
View File
@@ -144,7 +144,7 @@
}
&.o_group_skills .o_group_name > b, .o_horizontal_separator {
color: color-yiq(gray('200'));
color: color-contrast(gray('200'));
font-style: italic;
}
}
addons/portal/static/src/scss/bootstrap_overridden.scss
Vendored
+4
View File
@@ -1,3 +1,7 @@
// 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;
// This variable affects the `.h-*` and `.w-*` classes.
$sizes: () !default;
$sizes: map-merge((
addons/portal/static/src/scss/portal.scss
+1 -1
View File
@@ -166,7 +166,7 @@ li > p {
flex-flow: row nowrap;
}
.list-group-item:not([class*="list-group-item-"]):not(.active) {
color: color-yiq($list-group-bg);
color: color-contrast($list-group-bg);
}
%o-portal-breadcrumbs {
addons/portal_rating/static/src/scss/portal_rating.scss
+1 -1
View File
@@ -83,7 +83,7 @@ $o-w-rating-star-color: #FACC2E;
}
.o_rating_popup_composer_label {
color: color-yiq(white);
color: color-contrast(white);
}
.o_portal_rating_chatter_messages {
addons/stock/static/src/scss/report_stock_reception.scss
+1 -1
View File
@@ -23,7 +23,7 @@
}
@each $-name, $-bg-color in $theme-colors {
$-safe-text-color: color-yiq(mix($-bg-color, $o-view-background-color));
$-safe-text-color: color-contrast(mix($-bg-color, $o-view-background-color));
@include bg-variant(".bg-#{$-name}-light", rgba(theme-color($-name), 0.5), $-safe-text-color);
}
}
addons/survey/static/src/scss/survey_templates_results.scss
+1 -1
View File
@@ -39,7 +39,7 @@
}
.dropdown-item {
&.active .badge { // Invert badge display when the item is active
background-color: color-yiq(theme-color('primary'));
background-color: color-contrast(theme-color('primary'));
color: theme-color('primary');
}
}
addons/web/static/src/legacy/scss/bootstrap_overridden.scss
Vendored
+4
View File
@@ -38,6 +38,10 @@ $theme-colors: map-merge(
$theme-colors
);
// 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;
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
addons/web/static/src/legacy/scss/bootstrap_overridden_frontend.scss
Vendored
+4
View File
@@ -1,3 +1,7 @@
// 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;
// Fonts
//
// Font, line-height, and color for body text, headings, and more.
addons/web/static/src/legacy/scss/bs_mixins_overrides.scss
+1 -8
View File
@@ -7,13 +7,6 @@
// otherwise we will have deprecation messages for assets_common generation
$enable-deprecation-messages: false !default;
// Override color-yiq function to handle the alpha component of colors and
// automatic threshold
@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light, $background: $body-bg, $cross-mix: true) {
$threshold: if($yiq-contrasted-threshold != false, $yiq-contrasted-threshold / 255 * 100%, false);
@return o-get-most-contrast($color, $light, $dark, $background, $threshold, $cross-mix);
}
@function mute-color($color) {
@return scale-color($color, $alpha: -30%);
}
@@ -34,7 +27,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-yiq($color, $background: $background), null));
$-yiq-color: if($text-color, $text-color, if($-yiq-threshold-met, color-contrast($color), null));
background-color: $color#{if($important, ' !important', '')};
color: $-yiq-color; // not important so that text utilities still work
addons/web/static/src/legacy/scss/fields.scss
+1 -1
View File
@@ -264,7 +264,7 @@
} @else {
&, &::after {
background-color: nth($o-colors, $size);
color: color-yiq(nth($o-colors, $size));
color: color-contrast(nth($o-colors, $size), $min-contrast-ratio: 2.2);
}
}
}
addons/web/static/src/legacy/scss/form_view.scss
+1 -1
View File
@@ -282,7 +282,7 @@ $o-form-label-margin-right: 0px;
&.btn-primary.disabled {
background-color: $o-brand-odoo;
color: color-yiq($o-brand-odoo);
color: color-contrast($o-brand-odoo);
&:after, &:before {
border-left-color: $o-brand-odoo;
addons/web/static/src/legacy/scss/web_calendar.scss
+6 -6
View File
@@ -409,7 +409,7 @@ $o-cw-filter-avatar-size: 20px;
color: black;
&.o_attendee_status_tentative {
color: color-yiq($color);
color: color-contrast($color);
background: repeating-linear-gradient(
45deg,
$color,
@@ -610,7 +610,7 @@ $o-cw-filter-avatar-size: 20px;
&.ui-datepicker-current-day a {
background: $info;
color: color-yiq($info);
color: color-contrast($info);
font-weight: bold;
}
@@ -894,7 +894,7 @@ $o-filter_colors: lighten(#000, 46.7%), #F06050, #F4A460, #F7CD1F, #6CC1ED, #814
&.o_cw_custom_hover, &.o_cw_custom_highlight {
box-shadow: 0 12px 12px -5px rgba($color, 0.3);
color: color-yiq($color);
color: color-contrast($color);
z-index: 10!important;
opacity: 1;
right: 1px!important;
@@ -911,7 +911,7 @@ $o-filter_colors: lighten(#000, 46.7%), #F06050, #F4A460, #F7CD1F, #6CC1ED, #814
}
&.o_attendee_status_tentative {
color: color-yiq($color);
color: color-contrast($color);
.fc-bg {
background: repeating-linear-gradient(
45deg,
@@ -946,7 +946,7 @@ $o-filter_colors: lighten(#000, 46.7%), #F06050, #F4A460, #F7CD1F, #6CC1ED, #814
.o_cw_filter_input_bg {
border-color: $color;
background: $color;
color: color-yiq($color);
color: color-contrast($color);
}
}
@@ -955,7 +955,7 @@ $o-filter_colors: lighten(#000, 46.7%), #F06050, #F4A460, #F7CD1F, #6CC1ED, #814
.card-header, .card-header .popover-header {
background-color: $color-subdle;
color: color-yiq($color-subdle);
color: color-contrast($color-subdle);
}
.card-header {
addons/web/static/src/webclient/burger_menu/burger_menu.scss
+1 -1
View File
@@ -28,7 +28,7 @@
// Scoped variables
$-base-bg: $o-brand-odoo; // change to get variations on the fly (eg. 'dark mode')
$-base-color: color-yiq($-base-bg);
$-base-color: color-contrast($-base-bg);
// ====== Top-Bar
.o_burger_menu_topbar {
addons/web/static/src/webclient/webclient.scss
+1 -1
View File
@@ -84,7 +84,7 @@ kbd {
//== Backgound light colors variations (bootstrap extensions)
@each $-name, $-bg-color in $theme-colors {
$-safe-text-color: color-yiq(mix($-bg-color, $o-view-background-color));
$-safe-text-color: color-contrast(mix($-bg-color, $o-view-background-color));
@include bg-variant(".bg-#{$-name}-light", rgba(theme-color($-name), 0.5), $-safe-text-color);
}
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 {
addons/website/static/src/scss/bootstrap_overridden.scss
Vendored
+11 -8
View File
@@ -2,13 +2,16 @@
// Color system
//
// Use auto threshold for yiq colors
// Note: also need to be defined here so that color-yiq below works
$yiq-contrasted-threshold: false !default;
$white: #FFF !default;
$black: #000 !default;
// Customize the light and dark text colors for use in our YIQ color contrast function.
$yiq-text-dark: o-color('900') !default;
$yiq-text-light: o-color('white') !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;
// Customize the light and dark text colors for use in our color contrast function.
$color-contrast-dark: o-color('900') !default;
$color-contrast-light: o-color('white') !default;
// Spacing
//
@@ -23,7 +26,7 @@ $spacer: 1rem !default; // Need to predefine as used below
// Settings for the `<body>` element.
$body-bg: if(o-website-value('layout') != 'full', o-color('body'), o-color('o-cc1-bg')) !default;
$body-color: o-color('o-cc1-text') or color-yiq(o-color('o-cc1-bg')) !default;
$body-color: o-color('o-cc1-text') or color-contrast(o-color('o-cc1-bg')) !default;
// Links
//
@@ -43,7 +46,7 @@ $link-hover-decoration: if(o-website-value('link-underline') != 'never', underli
// Note: for the 'active' color, color preset edition is not really flexible but
// this could come in a future update.
$component-active-bg: o-color('o-cc1-btn-primary') !default;
$component-active-color: if($component-active-bg, color-yiq($component-active-bg), null) !default;
$component-active-color: if($component-active-bg, color-contrast($component-active-bg), null) !default;
// Fonts
//
addons/website/static/src/scss/website.scss
+2 -2
View File
@@ -222,7 +222,7 @@ $-seen-urls: ();
@include o-apply-colors('menu');
@include o-apply-colors('menu-custom');
$-menu-color: o-color('menu-custom') or o-color('menu');
@if ($-menu-color and color-yiq($-menu-color) != $yiq-text-dark) {
@if ($-menu-color and color-contrast($-menu-color) != $color-contrast-dark) {
@extend .navbar-dark;
}
@include o-add-gradient('menu-gradient');
@@ -1340,7 +1340,7 @@ span.list-inline-item.o_add_language:last-child {
text-decoration: none;
@if $-footer-color == $-copyright-color {
color: rgba(color-yiq($-footer-color), 0.5);
color: rgba(color-contrast($-footer-color), 0.5);
}
&:hover, &:focus {
addons/website/static/src/snippets/s_google_map/000.scss
+2 -2
View File
@@ -16,7 +16,7 @@ $s-google-map-desc-hover-alpha: 0.55 !default;
z-index: 99;
padding: 0 1em;
background: rgba($s-google-map-desc-bg, $s-google-map-desc-alpha);
color: color-yiq(rgba($s-google-map-desc-bg, $s-google-map-desc-alpha));
color: color-contrast(rgba($s-google-map-desc-bg, $s-google-map-desc-alpha));
transition: background-color 250ms ease;
font {
@@ -37,6 +37,6 @@ $s-google-map-desc-hover-alpha: 0.55 !default;
&:hover .description {
background: $s-google-map-desc-hover-bg;
background: rgba($s-google-map-desc-hover-bg, $s-google-map-desc-hover-alpha);
color: color-yiq(rgba($s-google-map-desc-hover-bg, $s-google-map-desc-hover-alpha));
color: color-contrast(rgba($s-google-map-desc-hover-bg, $s-google-map-desc-hover-alpha));
}
}
addons/website/static/src/snippets/s_map/000.scss
+2 -2
View File
@@ -16,7 +16,7 @@ $s-map-desc-hover-alpha: 0.55 !default;
z-index: 99;
padding: 0 1em;
background: rgba($s-map-desc-bg, $s-map-desc-alpha);
color: color-yiq(rgba($s-map-desc-bg, $s-map-desc-alpha));
color: color-contrast(rgba($s-map-desc-bg, $s-map-desc-alpha));
transition: background-color 250ms ease;
font {
@@ -37,7 +37,7 @@ $s-map-desc-hover-alpha: 0.55 !default;
&:hover .description {
background: $s-map-desc-hover-bg;
background: rgba($s-map-desc-hover-bg, $s-map-desc-hover-alpha);
color: color-yiq(rgba($s-map-desc-hover-bg, $s-map-desc-hover-alpha));
color: color-contrast(rgba($s-map-desc-hover-bg, $s-map-desc-hover-alpha));
}
.s_map_color_filter {
@include o-position-absolute(0, 0, 0, 0);
addons/website/static/src/snippets/s_popup/001.scss
+1 -1
View File
@@ -22,7 +22,7 @@
width: $font-size-lg * 2;
height: $font-size-lg * 2;
line-height: $font-size-lg * 2;
@include o-bg-color(color-yiq(o-color('primary')), o-color('primary'), $with-extras: false);
@include o-bg-color(color-contrast(o-color('primary')), o-color('primary'), $with-extras: false);
box-shadow: $box-shadow-sm;
cursor: pointer;
font-size: $font-size-lg;
addons/website_event/static/src/scss/event_templates_common.scss
+1 -1
View File
@@ -77,7 +77,7 @@
}
.dropdown-item {
&.active .badge { // Invert badge display when the item is active
background-color: color-yiq(theme-color('primary'));
background-color: color-contrast(theme-color('primary'));
color: theme-color('primary');
}
}
addons/website_event/static/src/snippets/s_events/000.scss
+1 -1
View File
@@ -81,7 +81,7 @@
}
a {
color: color-yiq($o-brand-primary);
color: color-contrast($o-brand-primary);
&:hover {
text-decoration: none;
addons/website_forum/static/src/scss/website_forum.scss
+1 -1
View File
@@ -39,7 +39,7 @@ $bronze: #eea91e;
word-wrap: break-word;
pre {
color: color-yiq(gray('100'));
color: color-contrast(gray('100'));
border-radius: $border-radius;
padding: 1rem;
background-color: gray('100');
addons/website_mass_mailing/static/src/scss/website_mass_mailing_popup.scss
+1 -1
View File
@@ -15,7 +15,7 @@
line-height: $font-size-lg * 2;
margin: 0;
padding: 0;
@include o-bg-color(color-yiq(o-color('primary')), o-color('primary'), $with-extras: false);
@include o-bg-color(color-contrast(o-color('primary')), o-color('primary'), $with-extras: false);
box-shadow: $box-shadow-sm;
opacity: 1;
}
addons/website_payment/static/src/snippets/s_donation/000.scss
+1 -1
View File
@@ -34,7 +34,7 @@
left: 0%;
margin-top: 28px;
padding: 0.5rem 1rem;
color: color-yiq(o-color('primary'));
color: color-contrast(o-color('primary'));
background: theme-color('primary');
font-size: 1.15rem;
border-radius: 0.3rem;
addons/website_profile/static/src/scss/website_profile.scss
+1 -1
View File
@@ -66,7 +66,7 @@ $owprofile-color-bg: mix($body-bg, #efeff4);
}
&.active {
color: color-yiq($owprofile-color-bg);
color: color-contrast($owprofile-color-bg);
background: $owprofile-color-bg;
border-color: $owprofile-color-bg;
}
addons/website_slides/static/src/scss/website_slides.scss
+2 -2
View File
@@ -95,7 +95,7 @@ $truncate-limits: 2, 3, 10;
}
@at-root a#{&} {
&:hover {
color: color-yiq($background-color);
color: color-contrast($background-color);
background-color: darken($background-color, 10%);
}
}
@@ -310,7 +310,7 @@ $truncate-limits: 2, 3, 10;
}
&.active {
color: color-yiq($tab-active-color);
color: color-contrast($tab-active-color);
background: $tab-active-color;
border-color: $tab-active-color;
}