Attachment 141041 Details for Bug 30952 – Bug 30952: Fix color contrast so we are at least WCAG AA compliant

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

Bug-30952-Fix-color-contrast-so-we-are-at-least-WC.patch (text/plain), 8.88 KB, created by Julian Maurice on 2022-09-28 07:23:54 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Julian Maurice

Created: 2022-09-28 07:23:54 UTC

Size: 8.88 KB

patch

obsolete

>From 4bceb4a3d6b12c6880472e4392442a798127fdc3 Mon Sep 17 00:00:00 2001
>From: Julian Maurice <julian.maurice@biblibre.com>
>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
>---
> .../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 457ead1ba7..8689c3c149 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;
>         }
>     }
> }
>@@ -2670,7 +2670,7 @@ td.bundle {
> .ui-widget-content {
>     background: #FFFFFF none;
>     border-radius: 4px;
>-    border: 3px solid #418940;
>+    border: 3px solid $background-color-primary;
>     color: #222222;
> }
> 
>@@ -2784,7 +2784,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;
>@@ -2798,17 +2798,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;
>                 }
>-
>-
>             }
>         }
>     }
>@@ -2831,11 +2829,11 @@ td.bundle {
> 
>     .ui-state-hover {
>         a {
>-            color: #418940;
>+            color: $green-text-color;
> 
>             &:link,
>             &:visited {
>-                color: #418940;
>+                color: $green-text-color;
>             }
>         }
>     }
>@@ -2946,7 +2944,7 @@ td.bundle {
>                 font-weight: normal;
>                 padding-bottom: 1px;
> 
>-                background-color: #418940;
>+                background-color: $background-color-primary;
>                 border: 0;
>                 border-bottom-width: 0;
> 
>@@ -2975,7 +2973,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;
>@@ -2988,7 +2986,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;
>@@ -3160,7 +3158,7 @@ nav {
> 
>             li {
>                 display: inline;
>-                color : #418940;
>+                color : $green-text-color;
>                 font-style: italic;
> 
>                 &+li::before {
>@@ -3546,7 +3544,7 @@ code {
> 
> .tab-content {
>     background-color: #fff;
>-    border: 3px solid #418940;
>+    border: 3px solid $background-color-primary;
>     border-radius: 4px;
>     padding: 1em;
> }
>@@ -3555,15 +3553,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;
>@@ -3574,7 +3572,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;
>@@ -3694,7 +3692,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;
>@@ -3705,7 +3703,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;
>@@ -4283,7 +4281,7 @@ input.renew {
>             font-weight: bold;
> 
>             &:hover {
>-                background-color: #418940;
>+                background-color: $background-color-primary;
>                 color: white;
>                 text-decoration: none;
>             }
>-- 
>2.30.2

Actions: View | Diff | Splinter Review

Attachments on bug 30952: 136810 | 136812 | 136813 | 136815 | 136816 | 136818 | 136819 | 136820 | 136822 | 136823 | 136825 | 136827 | 136828 | 136830 | 136831 | 136833 | 136834 | 136836 | 136837 | 136839 | 136840 | 136842 | 136844 | 136845 | 136847 | 136848 | 136878 | 136879 | 136880 | 136881 | 136882 | 136883 | 136884 | 136885 | 136886 | 136887 | 136888 | 136889 | 136890 | 136891 | 136892 | 136893 | 136894 | 136895 | 136896 | 136897 | 136898 | 136899 | 136900 | 136901 | 136902 | 136950 | 136951 | 136952 | 136953 | 136954 | 136955 | 136956 | 136957 | 136958 | 136959 | 136960 | 136961 | 136962 | 136963 | 136964 | 136965 | 136966 | 136967 | 136968 | 136969 | 136970 | 136971 | 136972 | 136973 | 136974 | 137408 | 137409 | 137410 | 137411 | 137414 | 137415 | 137416 | 137417 | 137418 | 137419 | 137420 | 137744 | 137767 | 137768 | 137775 | 137776 | 137994 | 138091 | 138092 | 138093 | 138094 | 138095 | 138096 | 138097 | 138098 | 138099 | 138100 | 138101 | 138102 | 138103 | 138245 | 138246 | 138247 | 138293 | 138299 | 138300 | 138302 | 140117 | 140118 | 140119 | 140120 | 140121 | 140122 | 140123 | 140124 | 140125 | 140126 | 140127 | 140128 | 140129 | 140130 | 140131 | 140132 | 140133 | 140134 | 140135 | 140136 | 140137 | 140138 | 140139 | 140140 | 140141 | 140142 | 140143 | 140371 | 140372 | 140373 | 140374 | 140433 | 140435 | 140459 | 140460 | 140512 | 140513 | 140514 | 140515 | 140516 | 140517 | 140519 | 140520 | 140521 | 140522 | 140523 | 140524 | 140525 | 140526 | 140527 | 140528 | 140529 | 140530 | 140531 | 140532 | 140533 | 140534 | 140535 | 140536 | 140537 | 140538 | 140539 | 140540 | 140541 | 140542 | 140543 | 140544 | 140545 | 140546 | 140547 | 140548 | 140549 | 140550 | 140551 | 140552 | 140553 | 140554 | 140555 | 140556 | 140557 | 140558 | 140559 | 140560 | 140566 | 140567 | 140570 | 140571 | 140575 | 140576 | 140577 | 140588 | 140613 | 140617 | 140618 | 140619 | 140620 | 140628 | 140629 | 140635 | 140649 | 140650 | 140651 | 140652 | 140653 | 140654 | 140658 | 140687 | 140976 | 140977 | 141020 | 141024 | 141026 | 141027 | 141041 | 141043 | 141044 | 141047 | 141052 | 141053 | 141054 | 141055 | 141056 | 141057 | 141064 | 141074 | 141075 | 141631 | 141632 | 141633 | 141634 | 141635 | 141636 | 141637 | 141638 | 141639 | 141640 | 141641 | 141642 | 141643 | 141644 | 141645 | 141646 | 141647 | 141648 | 141649 | 141650 | 141651 | 141652 | 141653 | 141654 | 141655 | 141656 | 141657 | 141658 | 141659 | 141660 | 141661 | 141662 | 141663 | 141664 | 141665 | 141666 | 141667 | 141668 | 141669 | 141670 | 141671 | 141672 | 141673 | 141674 | 141675 | 141676 | 141677 | 141678 | 141679 | 141680 | 141681 | 141682 | 141683 | 141684 | 141685 | 141686 | 141687 | 141688 | 141689 | 141690 | 141691 | 141692 | 141693 | 141694 | 141695 | 141696 | 141697 | 141698 | 141699 | 141700 | 141701 | 141702 | 141703 | 141704 | 141705 | 141706 | 141707 | 141708 | 141709 | 141710 | 141711 | 141712 | 141713 | 142604 | 142605