From 7ae2978dcbdd0e3eaa14c78be2f7bb07a3476961 Mon Sep 17 00:00:00 2001 From: Julian Maurice Date: Wed, 28 Sep 2022 09:22:44 +0200 Subject: [PATCH] Bug 30952: Fix color contrast so we are at least WCAG AA compliant Issue #10 Signed-off-by: Martin Renvoize Signed-off-by: Owen Leonard Signed-off-by: Nick Clemens Signed-off-by: Tomas Cohen Arazi --- .../intranet-tmpl/prog/css/src/_header.scss | 12 ++-- .../prog/css/src/_variables.scss | 2 +- .../prog/css/src/staff-global.scss | 58 +++++++++---------- 3 files changed, 35 insertions(+), 37 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss index 4aa6a3a621..250065523f 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss @@ -44,9 +44,9 @@ a.navbar-toggle { } #header_search { - background-color: #418940; + background-color: $background-color-primary; border-radius: 0; - border: 1px solid #418940; + border: 1px solid $background-color-primary; display: flex; padding: 0 .8em; @@ -69,7 +69,7 @@ a.navbar-toggle { display: flex; align-items: center; color: white; - background-color: #418940; + background-color: $background-color-primary; z-index: 2; flex-grow: 1; @@ -105,7 +105,7 @@ a.navbar-toggle { .form-title { padding: 0 16px 0 0; - background-color: #418940; + background-color: $background-color-primary; border-radius: 0 16px 16px 0; display: flex; align-items: center; @@ -153,7 +153,7 @@ a.navbar-toggle { background-color: white; padding: 1em; border-radius: 0 0 8px 8px; - border: 1px solid #418940; + border: 1px solid $background-color-primary; border-top: 0 none; box-shadow: 0 2px 2px 1px #00000030; z-index: 1; @@ -208,7 +208,7 @@ a.navbar-toggle { #lastborrower-window { display: none; - background-image: linear-gradient(to left, #418940, #71B443); + background-color: $background-color-primary; box-shadow: 1px 1px 1px 0 #999; color: #FFFFFF; padding: .2em; diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss index 3d111d85e0..41966bfd6f 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/_variables.scss @@ -1,5 +1,5 @@ $green-text-color: #006100; -$background-color-primary: #418940; +$background-color-primary: #408540; // Copied from Bootstrap 5 without system-ui because of // https://infinnie.github.io/blog/2017/systemui.html diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss index 760413f3a5..4bc9af6fa9 100644 --- a/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss +++ b/koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss @@ -5,7 +5,7 @@ @import "fonts"; ::selection { - background: #418940; + background: $background-color-primary; color: #FFFFFF; } @@ -64,7 +64,7 @@ a { } &.clear_date { - color: #418940; + color: $green-text-color; font-size: 130%; vertical-align: middle; @@ -95,14 +95,14 @@ a { } &:hover { - color: #418940; + color: $green-text-color; text-decoration: none; font-weight: bold; i, img { - border-color: #418940; + border-color: $background-color-primary; background-color: transparent; - color: #418940; + color: $green-text-color; } } @@ -403,8 +403,8 @@ aside { &.active > a, a:hover, a.current { background-color: #F3F4F4; text-decoration: none; - color: #418940; - border-left: solid 5px #418940; + color: $green-text-color; + border-left: solid 5px $background-color-primary; font-weight: bold; } } @@ -623,7 +623,7 @@ cite { input, textarea { &:focus { - border-color: #418940; + border-color: $background-color-primary; border-radius: 4px; } } @@ -1523,7 +1523,7 @@ i { } &.success { - color: #418940; + color: $green-text-color; } &.warn { @@ -1791,7 +1791,7 @@ i { background-color: #FEC32C; i { &.fa { - color: #418940; + color: $green-text-color; } } } @@ -2672,7 +2672,7 @@ td.bundle { .ui-widget-content { background: #FFFFFF none; border-radius: 4px; - border: 3px solid #418940; + border: 3px solid $background-color-primary; color: #222222; } @@ -2786,7 +2786,7 @@ td.bundle { .ui-tabs-panel { background: #FFF none; border-radius: 4px; - border: 3px solid #418940; + border: 3px solid $background-color-primary; fieldset { box-shadow: none; @@ -2800,17 +2800,15 @@ td.bundle { border-radius: 4px 4px 0 0; &.ui-tabs-active, &.ui-state-hover { - background-color: #418940; + background-color: $background-color-primary; border-radius: 4px 4px 0 0; border: 0; border-bottom-width: 0; padding-bottom: 0; a { - color: #FFF; + color: #000; } - - } } } @@ -2833,11 +2831,11 @@ td.bundle { .ui-state-hover { a { - color: #418940; + color: $green-text-color; &:link, &:visited { - color: #418940; + color: $green-text-color; } } } @@ -2948,7 +2946,7 @@ td.bundle { font-weight: normal; padding-bottom: 1px; - background-color: #418940; + background-color: $background-color-primary; border: 0; border-bottom-width: 0; @@ -2977,7 +2975,7 @@ td.bundle { .tabs-container { background: none repeat scroll 0 0 transparent; - border: 3px solid #418940; + border: 3px solid $background-color-primary; border-radius: 4px; color: #222222; display: block; @@ -2990,7 +2988,7 @@ td.bundle { .ui-tabs-panel { background: #FFF none; border-radius: 4px; - border: 3px solid #418940; + border: 3px solid $background-color-primary; fieldset { box-shadow: none; @@ -3162,7 +3160,7 @@ nav { li { display: inline; - color : #418940; + color : $green-text-color; font-style: italic; &+li::before { @@ -3548,7 +3546,7 @@ code { .tab-content { background-color: #fff; - border: 3px solid #418940; + border: 3px solid $background-color-primary; border-radius: 4px; padding: 1em; } @@ -3557,15 +3555,15 @@ code { > li { > a { background-color: #71B443; - color: #FFFFFF; + color: #111; line-height: 1.42857143; margin-right: .4em; padding: .5em 1em; &:hover, &:focus, &:active { - background-color: #418940; + background-color: $background-color-primary; border-radius: 4px 4px 0 0; - border: 1px solid #418940; + border: 1px solid $background-color-primary; padding: .5em 1em; text-decoration: none; color: #FFFFFF; @@ -3576,7 +3574,7 @@ code { a, a:hover, a:focus { - background-color: #418940; + background-color: $background-color-primary; border-radius: 4px 4px 0 0; color: #FFFFFF; cursor: default; @@ -3696,7 +3694,7 @@ progress { #browse-return-to-results { background-color: #e6e6e6; - border: 1px solid lighten(#418940, 30%); + border: 1px solid lighten($background-color-primary, 30%); border-bottom-width: 0; border-top-left-radius: 5px; border-top-right-radius: 5px; @@ -3707,7 +3705,7 @@ progress { .browse-button { background-color: transparent; - border: 1px solid lighten(#418940, 30%); + border: 1px solid lighten($background-color-primary, 30%); display: block; overflow: hidden; padding: .4em .6em; @@ -4285,7 +4283,7 @@ input.renew { font-weight: bold; &:hover { - background-color: #418940; + background-color: $background-color-primary; color: white; text-decoration: none; }