From e111cfd35eb0f0f2fac828cbdafd3b8093d70a1b Mon Sep 17 00:00:00 2001 From: "stefanorigano (SRI)" Date: Tue, 18 May 2021 11:43:16 +0000 Subject: [PATCH] [IMP] web, *: wcag compliant contextual colors Overall colors review to achieve WACG standard compliance. https://www.w3.org/WAI/standards-guidelines/wcag/ Current contextual colors work fine when used for backgrounds but fail WACG tests when are used for text. Unfortunately Bootstrap use the same palette in both scenarios without providing effective control over text colors. The 'text-emphasis-variant' mixin, indeed, allows to darken a color by a certain amount, but since the amount is not customizable per-color the final result is always either too dark or too light for colors that are not used as a reference. This commit will define a specif SCSS map called `$o-theme-text-colors` that mirrors the default '$theme-colors' structure and contain fine-tuned values to be used specifically for text. In order to keep the same classes names, we customize the default 'text-emphasis-variant' mixin, instructing it to first look for our fine-tuned colors and eventually fallback to default. This commit will also adapt all the modules that use to hardcode text colors in SCSS rather than using default utility classes. We handle this using different approaches: - Use utility classes whenever is possible (eg. 'text-info') - If apply the class directly is not possible, '@extend' it in SCSS - If '@extend' is not ideal because of code complexity (eg. ':hover' interactions), use the new 'o-text-color([color name])' scss function. --- .../static/src/scss/account_dashboard.scss | 2 +- addons/calendar/static/src/scss/calendar.scss | 4 +- .../static/src/xml/resume_templates.xml | 2 +- addons/hr_skills_survey/__manifest__.py | 3 - .../static/src/scss/hr_skills.scss | 5 -- .../static/src/xml/resume_templates.xml | 2 +- .../src/components/activity/activity.scss | 6 +- .../follow_button/follow_button.scss | 4 +- .../src/components/message/message.scss | 4 +- .../mail/static/src/scss/activity_view.scss | 8 +-- addons/mail/static/src/scss/discuss.scss | 3 - .../mail/static/src/scss/mail_activity.scss | 6 +- addons/mail/static/src/widgets/common.xml | 2 +- addons/web/__manifest__.py | 1 + .../legacy/js/core/data_comparison_utils.js | 4 +- .../src/legacy/scss/bootstrap_overridden.scss | 9 +++ .../scss/bs_mixins_overrides_backend.scss | 63 +++++++++++++++++++ .../src/legacy/scss/domain_selector.scss | 4 -- addons/web/static/src/legacy/scss/fields.scss | 13 ++-- .../web/static/src/legacy/scss/form_view.scss | 1 - .../web/static/src/legacy/scss/list_view.scss | 7 --- .../src/legacy/scss/primary_variables.scss | 23 +++++-- addons/web/static/src/legacy/xml/base.xml | 4 +- 23 files changed, 121 insertions(+), 59 deletions(-) delete mode 100644 addons/hr_skills_survey/static/src/scss/hr_skills.scss create mode 100644 addons/web/static/src/legacy/scss/bs_mixins_overrides_backend.scss diff --git a/addons/account/static/src/scss/account_dashboard.scss b/addons/account/static/src/scss/account_dashboard.scss index b93e2d35c55..5050be09648 100644 --- a/addons/account/static/src/scss/account_dashboard.scss +++ b/addons/account/static/src/scss/account_dashboard.scss @@ -47,7 +47,7 @@ } .fa-check { - color: theme-color('success'); + @extend .text-success; } } diff --git a/addons/calendar/static/src/scss/calendar.scss b/addons/calendar/static/src/scss/calendar.scss index aafb36e2626..314a417b4f6 100644 --- a/addons/calendar/static/src/scss/calendar.scss +++ b/addons/calendar/static/src/scss/calendar.scss @@ -53,10 +53,10 @@ } .o_accepted { - color: theme-color('success'); + @extend .text-success; } .o_declined { - color: theme-color('danger'); + @extend .text-danger; } } .o_meeting_filter { diff --git a/addons/hr_skills/static/src/xml/resume_templates.xml b/addons/hr_skills/static/src/xml/resume_templates.xml index 5db3b0064cf..10d9f86df93 100644 --- a/addons/hr_skills/static/src/xml/resume_templates.xml +++ b/addons/hr_skills/static/src/xml/resume_templates.xml @@ -22,7 +22,7 @@ - diff --git a/addons/hr_skills_survey/__manifest__.py b/addons/hr_skills_survey/__manifest__.py index 1d7355e89b9..44f978d55db 100644 --- a/addons/hr_skills_survey/__manifest__.py +++ b/addons/hr_skills_survey/__manifest__.py @@ -20,9 +20,6 @@ This module adds certification to resumé for employees. ], 'auto_install': True, 'assets': { - 'web.assets_backend': [ - 'hr_skills_survey/static/src/scss/**/*', - ], 'web.assets_qweb': [ 'hr_skills_survey/static/src/xml/**/*', ], diff --git a/addons/hr_skills_survey/static/src/scss/hr_skills.scss b/addons/hr_skills_survey/static/src/scss/hr_skills.scss deleted file mode 100644 index 864fb11dd43..00000000000 --- a/addons/hr_skills_survey/static/src/scss/hr_skills.scss +++ /dev/null @@ -1,5 +0,0 @@ -.o_resume_line { - .o_resume_line_icon.icon_trophy { - color: theme-color('warning'); - } -} diff --git a/addons/hr_skills_survey/static/src/xml/resume_templates.xml b/addons/hr_skills_survey/static/src/xml/resume_templates.xml index 8705bc6b69e..17b1ca0d952 100644 --- a/addons/hr_skills_survey/static/src/xml/resume_templates.xml +++ b/addons/hr_skills_survey/static/src/xml/resume_templates.xml @@ -14,7 +14,7 @@
- +
diff --git a/addons/mail/static/src/components/activity/activity.scss b/addons/mail/static/src/components/activity/activity.scss index 64a0ceacedb..06e8c5eb63f 100644 --- a/addons/mail/static/src/components/activity/activity.scss +++ b/addons/mail/static/src/components/activity/activity.scss @@ -80,9 +80,9 @@ // ------------------------------------------------------------------ $o-mail-activity-default-color: gray('300') !default; -$o-mail-activity-overdue-color: darken(theme-color('danger'), 10%) !default; -$o-mail-activity-planned-color: darken(theme-color('success'), 10%) !default; -$o-mail-activity-today-color: darken(theme-color('warning'), 10%) !default; +$o-mail-activity-overdue-color: o-text-color('danger') !default; +$o-mail-activity-planned-color: o-text-color('success') !default; +$o-mail-activity-today-color: o-text-color('warning') !default; .o_Activity_deadlineDateText { diff --git a/addons/mail/static/src/components/follow_button/follow_button.scss b/addons/mail/static/src/components/follow_button/follow_button.scss index 36fb60e788a..b01d5b86a6a 100644 --- a/addons/mail/static/src/components/follow_button/follow_button.scss +++ b/addons/mail/static/src/components/follow_button/follow_button.scss @@ -18,10 +18,10 @@ color: gray('600'); &.o-following { - color: $green; + color: o-text-color('success'); } &.o-unfollow { - color: $orange; + color: o-text-color('warning') } } diff --git a/addons/mail/static/src/components/message/message.scss b/addons/mail/static/src/components/message/message.scss index 0729b503997..f880d1f1c22 100644 --- a/addons/mail/static/src/components/message/message.scss +++ b/addons/mail/static/src/components/message/message.scss @@ -366,7 +366,7 @@ font-style: italic; &.o-author { - color: theme-color('danger'); + color: o-text-color('danger'); font-weight: bold; } } @@ -376,7 +376,7 @@ cursor: pointer; &.o-error { - color: $red; + color: o-text-color('danger'); } } diff --git a/addons/mail/static/src/scss/activity_view.scss b/addons/mail/static/src/scss/activity_view.scss index bbb819ebdab..276c78cc928 100644 --- a/addons/mail/static/src/scss/activity_view.scss +++ b/addons/mail/static/src/scss/activity_view.scss @@ -50,13 +50,13 @@ @include o-position-absolute($bottom: 0, $right: 0); &.planned { - color: theme-color('success'); + @extend .text-success; } &.overdue { - color: theme-color('danger'); + @extend .text-danger; } &.today { - color: theme-color('warning'); + @extend .text-warning; } } } @@ -116,7 +116,7 @@ padding:5px; cursor: pointer; &:hover { - color: theme-color('success'); + color: o-text-color('success'); } } .o_kanban_counter { diff --git a/addons/mail/static/src/scss/discuss.scss b/addons/mail/static/src/scss/discuss.scss index 22e5e71c677..625d04a0a5d 100644 --- a/addons/mail/static/src/scss/discuss.scss +++ b/addons/mail/static/src/scss/discuss.scss @@ -12,9 +12,6 @@ &.o_user_online { color: $o-enterprise-primary-color; } - &.o_user_idle { - color: theme-color('warning'); - } &.fa-stack { width: 1em; height: 1em; diff --git a/addons/mail/static/src/scss/mail_activity.scss b/addons/mail/static/src/scss/mail_activity.scss index 2b31623260f..3d63360a3a5 100644 --- a/addons/mail/static/src/scss/mail_activity.scss +++ b/addons/mail/static/src/scss/mail_activity.scss @@ -130,13 +130,13 @@ } .o_activity_color_planned { - color: darken(theme-color('success'), 10%); + @extend .text-success; } .o_activity_color_overdue { - color: darken(theme-color('danger'), 10%); + @extend .text-danger; } .o_activity_color_today { - color: darken(theme-color('warning'), 10%); + @extend .text-warning; } } diff --git a/addons/mail/static/src/widgets/common.xml b/addons/mail/static/src/widgets/common.xml index 9106f96f4ea..291fcd7446a 100644 --- a/addons/mail/static/src/widgets/common.xml +++ b/addons/mail/static/src/widgets/common.xml @@ -11,7 +11,7 @@ - + diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py index ca39386cf0b..e596e50b492 100644 --- a/addons/web/__manifest__.py +++ b/addons/web/__manifest__.py @@ -291,6 +291,7 @@ This module provides the core of the Odoo Web Client. ], 'web._assets_backend_helpers': [ 'web/static/src/legacy/scss/bootstrap_overridden.scss', + 'web/static/src/legacy/scss/bs_mixins_overrides_backend.scss', ], 'web._assets_frontend_helpers': [ 'web/static/src/legacy/scss/bootstrap_overridden_frontend.scss', diff --git a/addons/web/static/src/legacy/js/core/data_comparison_utils.js b/addons/web/static/src/legacy/js/core/data_comparison_utils.js index ad848824c3d..7e585fd249b 100644 --- a/addons/web/static/src/legacy/js/core/data_comparison_utils.js +++ b/addons/web/static/src/legacy/js/core/data_comparison_utils.js @@ -96,9 +96,9 @@ function renderVariation(variation, field, options) { var value; if (!isNaN(variation)) { if (variation > 0) { - className += ' o_positive'; + className += ' o_positive text-success'; } else if (variation < 0) { - className += ' o_negative'; + className += ' o_negative text-danger'; } else { className += ' o_null'; } diff --git a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss index 5ea88443d06..07c04c57757 100644 --- a/addons/web/static/src/legacy/scss/bootstrap_overridden.scss +++ b/addons/web/static/src/legacy/scss/bootstrap_overridden.scss @@ -24,6 +24,11 @@ $black: #000 !default; $primary: $o-brand-primary !default; $secondary: $white !default; +$success: $o-success !default; +$info: $o-info !default; +$warning: $o-warning !default; +$danger: $o-danger !default; + // Options // // Quickly modify global styling by enabling or disabling optional features. @@ -162,3 +167,7 @@ $breadcrumb-margin-bottom: 0 !default; $breadcrumb-bg: $o-control-panel-background-color !default; $breadcrumb-active-color: #777777 !default; + +// Code + +$code-color: $o-main-code-color!default; diff --git a/addons/web/static/src/legacy/scss/bs_mixins_overrides_backend.scss b/addons/web/static/src/legacy/scss/bs_mixins_overrides_backend.scss new file mode 100644 index 00000000000..d00e0b59433 --- /dev/null +++ b/addons/web/static/src/legacy/scss/bs_mixins_overrides_backend.scss @@ -0,0 +1,63 @@ +//============================================================================== +// Bootstrap Mixins and Functions Extensions +// Those will affect how bootstrap is generated in the backend only +//============================================================================== + + +// Function used to retrive a text color prioritizing our finetuned ones. +//------------------------------------------------------------------------------ +@function o-text-color($key) { + $-all-text-colors: map-merge($theme-colors, $o-theme-text-colors); + + @if map-has-key($-all-text-colors, $key) { + @return map-get($-all-text-colors, $key); + } + + @return false; +} + + +// Customize boostrap 'text-emphasis-variant' mixin allowing text colors other +// than the '$theme-colors' ones. +// It prioritizes the '$o-theme-text-colors' map and fallbacks to default. +//------------------------------------------------------------------------------ +@mixin text-emphasis-variant($parent, $color) { + $-hover: $emphasized-link-hover-darken-percentage; + + // Check for the color name in '$theme-colors'. + $color-name: null; + @each $-name, $-value in $theme-colors { + @if $-value == $color { + $color-name: $-name; + } + } + + // Retrive the finetuned text color or fallback to default. + $color-value: o-text-color($color-name) or $color; + + #{$parent} { + color: $color-value!important; + } + + a#{$parent}, button#{$parent} { + @include hover-focus() { + color: darken($color-value, $-hover) !important; + } + } + + // Handle a very specific exception for the 'fa-circle' class when used in + // conjunction with contextual classes to achieve "status" graphical elements. + // Ideally any '.fa-circle.text-x'occurrency should be replaced with the + // 'o_status' component that uses background-color rather than text-color. + @if map-has-key($o-theme-text-colors, $color-name) { + #{$parent}.fa-circle { + color: $color!important; + } + + a#{$parent}.fa-circle, button#{$parent}.fa-circle { + @include hover-focus() { + color: darken($color, $-hover) !important; + } + } + } +} diff --git a/addons/web/static/src/legacy/scss/domain_selector.scss b/addons/web/static/src/legacy/scss/domain_selector.scss index b35934973b9..64632daf435 100644 --- a/addons/web/static/src/legacy/scss/domain_selector.scss +++ b/addons/web/static/src/legacy/scss/domain_selector.scss @@ -33,10 +33,6 @@ &.o_domain_delete_node_button { font-size: 12px; padding-left: 5px; - - &:hover { - color: theme-color('danger'); - } } } } diff --git a/addons/web/static/src/legacy/scss/fields.scss b/addons/web/static/src/legacy/scss/fields.scss index f4e16b7c78c..dba8e7990b0 100644 --- a/addons/web/static/src/legacy/scss/fields.scss +++ b/addons/web/static/src/legacy/scss/fields.scss @@ -6,7 +6,7 @@ // Invalid .o_field_invalid { &.o_input, .o_input, &.o_form_label { - color: theme-color('danger')!important; + @extend .text-danger; border-color: theme-color('danger')!important; // enterprise o_required_modifier rule overrides this without !important } } @@ -281,7 +281,7 @@ color: $o-main-color-muted; } &.fa-star { - color: gold; + color: $o-main-favorite-color; } } } @@ -292,19 +292,16 @@ font-size: 16px; } i.fa-star-o { - color: $o-main-color-muted; - &:hover { - color: gold; - } + @include o-hover-text-color($o-main-color-muted, $o-main-favorite-color); } i.fa-star { - color: gold; + color: $o-main-favorite-color; } } // Specific success color for toggle_button widget .fa.o_toggle_button_success { - color: theme-color('success'); + @extend .text-success; } // Handle widget diff --git a/addons/web/static/src/legacy/scss/form_view.scss b/addons/web/static/src/legacy/scss/form_view.scss index 6aad865b0b6..e9d60bac488 100644 --- a/addons/web/static/src/legacy/scss/form_view.scss +++ b/addons/web/static/src/legacy/scss/form_view.scss @@ -831,7 +831,6 @@ $o-form-label-margin-right: 0px; // Timezone widget warning .o_tz_warning { - color: theme-color('danger'); cursor: help; position: absolute; margin-left: 10px; diff --git a/addons/web/static/src/legacy/scss/list_view.scss b/addons/web/static/src/legacy/scss/list_view.scss index 7b37e755704..f1863f1a72e 100644 --- a/addons/web/static/src/legacy/scss/list_view.scss +++ b/addons/web/static/src/legacy/scss/list_view.scss @@ -132,13 +132,6 @@ border-style: none; display: table-cell; cursor: pointer; - @include o-hover-text-color($text-muted, theme-color('danger')); - } - - // Contextual classes - @each $color, $value in $theme-colors { - $safe: saturate(theme-color-level($color, 2), 10%); - @include text-emphasis-variant(".text-#{$color}", $safe); } // Grouped list views diff --git a/addons/web/static/src/legacy/scss/primary_variables.scss b/addons/web/static/src/legacy/scss/primary_variables.scss index 2df9300b9a7..d61769cfbae 100644 --- a/addons/web/static/src/legacy/scss/primary_variables.scss +++ b/addons/web/static/src/legacy/scss/primary_variables.scss @@ -9,9 +9,9 @@ $o-font-size-base: 13rem * (1px / $o-root-font-size) !default; $o-line-height-base: 1.5 !default; // This is BS default // Colors -$o-community-color: #7C7BAD !default; -$o-enterprise-color: #875A7B !default; -$o-enterprise-primary-color: #00A09D !default; +$o-community-color: #71639e !default; +$o-enterprise-color: #714B67 !default; +$o-enterprise-primary-color: #017e84 !default; $o-brand-odoo: $o-community-color !default; $o-brand-primary: $o-community-color !default; @@ -30,10 +30,25 @@ $o-gray-700: #495057 !default; $o-gray-800: #343a40 !default; $o-gray-900: #212529 !default; +$o-success: #28a745 !default; +$o-info: #17a2b8 !default; +$o-warning: #ffac00 !default; +$o-danger: #dc3545 !default; + +// Fine-tune contextual text colors. +$o-theme-text-colors: ( + "success": #008818, + "info": #0180a5, + "warning": #9a6b01, + "danger": #d23f3a, +)!default; + $o-main-text-color: $o-gray-700 !default; -$o-main-color-muted: rgba($o-main-text-color, .7) !default; +$o-main-color-muted: rgba($o-main-text-color, .76) !default; $o-main-headings-color: $o-gray-900 !default; $o-main-link-color: darken($o-brand-primary, 5%) !default; +$o-main-favorite-color: #f3cc00 !default; +$o-main-code-color: #d2317b !default; $o-view-background-color: white !default; $o-shadow-color: #303030 !default; diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml index 93ab96dab2d..e4f52c0884d 100644 --- a/addons/web/static/src/legacy/xml/base.xml +++ b/addons/web/static/src/legacy/xml/base.xml @@ -135,7 +135,7 @@ t-on-change="_onInputChange" t-on-click="_onInputClick" /> - + This date is on the future. Make sure it is what you expected. @@ -1054,7 +1054,7 @@