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

[IMP] web, *: wcag compliant contextual colors

Browse Source 
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.
This commit is contained in:
stefanorigano (SRI)
2021-06-18 21:31:32 +02:00
committed by Aaron Bohy
parent 097e726037
commit e111cfd35e
23 changed files with 121 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/account/static/src/scss/account_dashboard.scss
+1 -1
View File
@@ -47,7 +47,7 @@
}
.fa-check {
color: theme-color('success');
@extend .text-success;
}
}
addons/calendar/static/src/scss/calendar.scss
+2 -2
View File
@@ -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 {
addons/hr_skills/static/src/xml/resume_templates.xml
+1 -1
View File
@@ -22,7 +22,7 @@
<t t-name="hr_trash_button">
<td class="o_list_record_remove pr-3">
<button name="delete" arial-label="Delete row" class="btn btn-secondary">
<button name="delete" arial-label="Delete row" class="btn btn-link text-danger">
<i class="fa fa-trash"/>
</button>
</td>
addons/hr_skills_survey/__manifest__.py
-3
View File
@@ -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/**/*',
],
addons/hr_skills_survey/static/src/scss/hr_skills.scss
-5
View File
@@ -1,5 +0,0 @@
.o_resume_line {
.o_resume_line_icon.icon_trophy {
color: theme-color('warning');
}
}
addons/hr_skills_survey/static/src/xml/resume_templates.xml
+1 -1
View File
@@ -14,7 +14,7 @@
<t t-if="data.description" t-esc="data.description"/>
</div>
<div class="o_resume_line_icon icon_trophy col-lg-1">
<i class="fa fa-trophy fa-2x"></i>
<i class="fa fa-trophy fa-2x text-warning"></i>
</div>
</div>
</td>
addons/mail/static/src/components/activity/activity.scss
+3 -3
View File
@@ -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 {
addons/mail/static/src/components/follow_button/follow_button.scss
+2 -2
View File
@@ -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')
}
}
addons/mail/static/src/components/message/message.scss
+2 -2
View File
@@ -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');
}
}
addons/mail/static/src/scss/activity_view.scss
+4 -4
View File
@@ -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 {
addons/mail/static/src/scss/discuss.scss
-3
View File
@@ -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;
addons/mail/static/src/scss/mail_activity.scss
+3 -3
View File
@@ -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;
}
}
addons/mail/static/src/widgets/common.xml
+1 -1
View File
@@ -11,7 +11,7 @@
<i class="o_mail_user_status o_user_online fa fa-circle" title="Online" role="img" aria-label="User is online"/>
</t>
<t t-if="status == 'away'">
<i class="fa fa-circle o_mail_user_status o_user_idle" title="Idle" role="img" aria-label="User is idle"/>
<i class="fa fa-circle o_mail_user_status o_user_idle text-warning" title="Idle" role="img" aria-label="User is idle"/>
</t>
<t t-if="status == 'offline'">
<i class="o_mail_user_status fa fa-circle-o" title="Offline" role="img" aria-label="User is offline"/>
addons/web/__manifest__.py
+1
View File
@@ -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',
addons/web/static/src/legacy/js/core/data_comparison_utils.js
+2 -2
View File
@@ -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';
}
addons/web/static/src/legacy/scss/bootstrap_overridden.scss
Vendored
+9
View File
@@ -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;
addons/web/static/src/legacy/scss/bs_mixins_overrides_backend.scss
+63
View File
@@ -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;
}
}
}
}
addons/web/static/src/legacy/scss/domain_selector.scss
-4
View File
@@ -33,10 +33,6 @@
&.o_domain_delete_node_button {
font-size: 12px;
padding-left: 5px;
&:hover {
color: theme-color('danger');
}
}
}
}
addons/web/static/src/legacy/scss/fields.scss
+5 -8
View File
@@ -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
addons/web/static/src/legacy/scss/form_view.scss
-1
View File
@@ -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;
addons/web/static/src/legacy/scss/list_view.scss
-7
View File
@@ -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
addons/web/static/src/legacy/scss/primary_variables.scss
+19 -4
View File
@@ -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;
addons/web/static/src/legacy/xml/base.xml
+2 -2
View File
@@ -135,7 +135,7 @@
t-on-change="_onInputChange"
t-on-click="_onInputClick"
/>
<span t-if="props.warn_future and state.warning" class="fa fa-exclamation-triangle o_tz_warning o_datepicker_warning">
<span t-if="props.warn_future and state.warning" class="fa fa-exclamation-triangle text-danger o_tz_warning o_datepicker_warning">
<t>This date is on the future. Make sure it is what you expected.</t>
</span>
<span class="o_datepicker_button"/>
@@ -1054,7 +1054,7 @@
<t t-name="DomainNode.ControlPanel">
<div t-if="!widget.readonly &amp;&amp; !widget.noControlPanel" class="o_domain_node_control_panel" role="toolbar" aria-label="Domain node">
<button class="btn o_domain_delete_node_button" title="Delete node" aria-label="Delete node"><i class="fa fa-times"/></button>
<button class="btn btn-link text-danger o_domain_delete_node_button" title="Delete node" aria-label="Delete node"><i class="fa fa-times"/></button>
<button class="btn o_domain_add_node_button" title="Add node" aria-label="Add node"><i class="fa fa-plus-circle"/></button>
<button class="btn o_domain_add_node_button" title="Add branch" aria-label="Add branch" data-branch="1"><i class="fa fa-ellipsis-h"/></button>
</div>