From b86669ef61a0345276493fd0a884bd98ef38dae9 Mon Sep 17 00:00:00 2001 From: Ankush Menat Date: Sat, 21 May 2022 16:41:53 +0530 Subject: [PATCH 1/8] fix(a11y): increase contrast levels All these were failing WCAG recommended contrast levels. --- frappe/public/scss/common/css_variables.scss | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/frappe/public/scss/common/css_variables.scss b/frappe/public/scss/common/css_variables.scss index a89ebb3b50..92e505442d 100644 --- a/frappe/public/scss/common/css_variables.scss +++ b/frappe/public/scss/common/css_variables.scss @@ -177,19 +177,18 @@ --text-2xl: 20px; --text-3xl: 22px; - --text-on-blue: var(--blue-600); - --text-on-light-blue: var(--blue-500); + --text-on-blue: var(--blue-700); + --text-on-light-blue: var(--blue-700); --text-on-dark-blue: var(--blue-700); - --text-on-blue: var(--blue-600); - --text-on-green: var(--dark-green-500); - --text-on-yellow: var(--yellow-500); - --text-on-orange: var(--orange-500); - --text-on-red: var(--red-500); + --text-on-green: var(--dark-green-700); + --text-on-yellow: var(--yellow-700); + --text-on-orange: var(--orange-600); + --text-on-red: var(--red-600); --text-on-gray: var(--gray-600); --text-on-light-gray: var(--gray-800); - --text-on-purple: var(--purple-500); - --text-on-pink: var(--pink-500); - --text-on-cyan: var(--cyan-600); + --text-on-purple: var(--purple-700); + --text-on-pink: var(--pink-600); + --text-on-cyan: var(--cyan-800); // alert colors --alert-text-danger: var(--red-600); From 154f7abea1d0fc80c65297e758851ce4241a8aa9 Mon Sep 17 00:00:00 2001 From: Ankush Menat Date: Sat, 21 May 2022 17:24:22 +0530 Subject: [PATCH 2/8] fix: always show consistent style for comment count Muted text on pure white background is difficult to read --- frappe/public/js/frappe/list/list_view.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/frappe/public/js/frappe/list/list_view.js b/frappe/public/js/frappe/list/list_view.js index 4d172e9802..167fd3ed9d 100644 --- a/frappe/public/js/frappe/list/list_view.js +++ b/frappe/public/js/frappe/list/list_view.js @@ -870,9 +870,7 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList { `; } - const comment_count = ` + const comment_count = ` ${frappe.utils.icon('small-message')} ${doc._comment_count > 99 ? "99+" : doc._comment_count} `; From ec798598efb9915abbc2b517c6b3cccd43f21c25 Mon Sep 17 00:00:00 2001 From: Ankush Menat Date: Sat, 21 May 2022 17:34:59 +0530 Subject: [PATCH 3/8] fix: pagination button contrast --- frappe/public/scss/desk/list.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frappe/public/scss/desk/list.scss b/frappe/public/scss/desk/list.scss index c71dbdca89..07f6636825 100644 --- a/frappe/public/scss/desk/list.scss +++ b/frappe/public/scss/desk/list.scss @@ -204,8 +204,8 @@ $level-margin-right: 8px; border: 1px solid var(--dark-border-color); &.btn-info { - background-color: var(--gray-400); - border-color: var(--gray-400); + background-color: var(--gray-600); + border-color: var(--gray-600); color: var(--white); font-weight: var(--text-bold); } From 552ea50a733a6a2bdcbcf43668379bb339f514ab Mon Sep 17 00:00:00 2001 From: Ankush Menat Date: Sat, 21 May 2022 17:51:23 +0530 Subject: [PATCH 4/8] fix: bump shade of muted text to gray-700 --- frappe/public/scss/common/css_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frappe/public/scss/common/css_variables.scss b/frappe/public/scss/common/css_variables.scss index 92e505442d..d19502d1aa 100644 --- a/frappe/public/scss/common/css_variables.scss +++ b/frappe/public/scss/common/css_variables.scss @@ -143,7 +143,7 @@ --btn-shadow: var(--shadow-xs); // Type Colors - --text-muted: var(--gray-600); + --text-muted: var(--gray-700); --text-light: var(--gray-800); --text-color: var(--gray-900); --heading-color: var(--gray-900); From ae6657c66b9b489ab4c11d69bf23e5acfde49785 Mon Sep 17 00:00:00 2001 From: Ankush Menat Date: Sat, 21 May 2022 17:57:06 +0530 Subject: [PATCH 5/8] fix: darken text color on light blue buttons --- frappe/public/scss/desk/list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frappe/public/scss/desk/list.scss b/frappe/public/scss/desk/list.scss index 07f6636825..31d1661abb 100644 --- a/frappe/public/scss/desk/list.scss +++ b/frappe/public/scss/desk/list.scss @@ -401,7 +401,7 @@ input.list-check-all { } .filter-button.btn-primary-light { - color: var(--blue-500); + color: var(--text-on-blue); } .sort-selector { From 2800923d1b1b090d4f959e7ebc9e4e6d52d4817d Mon Sep 17 00:00:00 2001 From: Ankush Menat Date: Mon, 23 May 2022 14:31:32 +0530 Subject: [PATCH 6/8] fix: darken blue 600 Co-Authored-By: Shariq Ansari --- frappe/public/scss/common/css_variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frappe/public/scss/common/css_variables.scss b/frappe/public/scss/common/css_variables.scss index d19502d1aa..3593469e68 100644 --- a/frappe/public/scss/common/css_variables.scss +++ b/frappe/public/scss/common/css_variables.scss @@ -16,7 +16,7 @@ --blue-900: #1A4469; --blue-800: #154875; --blue-700: #1366AE; - --blue-600: #1579D0; + --blue-600: #1673C5; --blue-500: #2490EF; --blue-400: #50A6F2; --blue-300: #7CBCF5; @@ -178,7 +178,7 @@ --text-3xl: 22px; --text-on-blue: var(--blue-700); - --text-on-light-blue: var(--blue-700); + --text-on-light-blue: var(--blue-600); --text-on-dark-blue: var(--blue-700); --text-on-green: var(--dark-green-700); --text-on-yellow: var(--yellow-700); From 57b2f755e59b26e7c3f39e634615d65d41cc7230 Mon Sep 17 00:00:00 2001 From: Ankush Menat Date: Tue, 24 May 2022 11:50:51 +0530 Subject: [PATCH 7/8] fix: use darker shade for text on dark blue Co-authored-by: Shariq Ansari <30859809+shariquerik@users.noreply.github.com> --- frappe/public/scss/common/css_variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frappe/public/scss/common/css_variables.scss b/frappe/public/scss/common/css_variables.scss index 3593469e68..cadb5bf330 100644 --- a/frappe/public/scss/common/css_variables.scss +++ b/frappe/public/scss/common/css_variables.scss @@ -179,7 +179,7 @@ --text-on-blue: var(--blue-700); --text-on-light-blue: var(--blue-600); - --text-on-dark-blue: var(--blue-700); + --text-on-dark-blue: var(--blue-800); --text-on-green: var(--dark-green-700); --text-on-yellow: var(--yellow-700); --text-on-orange: var(--orange-600); From b61e1d8e55fd727d506bf2df90ce252a79243fae Mon Sep 17 00:00:00 2001 From: Ankush Menat Date: Tue, 24 May 2022 12:19:36 +0530 Subject: [PATCH 8/8] fix: same stroke color as text on list filters --- frappe/public/scss/desk/filters.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frappe/public/scss/desk/filters.scss b/frappe/public/scss/desk/filters.scss index 0552311ee2..ffaea7a9bd 100644 --- a/frappe/public/scss/desk/filters.scss +++ b/frappe/public/scss/desk/filters.scss @@ -1,6 +1,6 @@ .filter-icon.active { use { - stroke: var(--blue-500); + stroke: var(--text-on-blue); } }