Bug 30952: Fix color contrast so we are at least WCAG AA compliant

Issue #10

Signed-off-by: Martin Renvoize <martin.renvoize@ptfs-europe.com>
Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Nick Clemens <nick@bywatersolutions.com>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>

diff --git a/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss b/koha-tmpl/intranet-tmpl/prog/css/src/_header.scss
index 4aa6a3a..2500655 100644 (file)
--- 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 3d111d8..41966bf 100644 (file)
--- 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 760413f..4bc9af6 100644 (file)
--- 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;
             }