LP1999282 Less intense badges for staff interface

Flips the contrast on badges to make them less intense and comply with
color contrast requirements. In keeping with the less intense alert
styles, the badges have more subtle background colors. I have also
adjusted the spacing and font weight to make the characters larger
without greatly increasing the overall size of the badge.

All of these styles pass WCAG AAA contrast checks. In anticipation of
Bootstrap 5, I have included the new .text-bg-* classes alongside the
current ones.

The access key modal (Control-H) is a good place to observe the overall
effect.

Signed-off-by: Stephanie Leary <stephanie.leary@equinoxOLI.org>

diff --git a/Open-ILS/src/eg2/src/styles.css b/Open-ILS/src/eg2/src/styles.css
index b239168..84d899a 100644 (file)
--- a/Open-ILS/src/eg2/src/styles.css
+++ b/Open-ILS/src/eg2/src/styles.css
@@ -342,3 +342,59 @@ input.small {
   background-color: #f9dede;
   color: #212121;
 }
+
+/* Less intense, WCAG AAA-compliant badges */
+.badge {
+  font-weight: 400;
+  font-size: .9em;
+  line-height: .9em;
+  padding-top: .15em;
+}
+
+.badge-primary,
+.badge.text-bg-primary {
+  background: #cfe2ff;
+  color: #062C65;
+}
+
+.badge-secondary,
+.badge.text-bg-secondary {
+  background: #dee2e6;
+  color: #212529;
+}
+
+.badge-success,
+.badge.text-bg-success {
+  background: #dff0d8;
+  color: #003B35;
+}
+
+.badge-danger,
+.badge.text-bg-danger {
+  background: #f8d7da;
+  color: #58151c;
+}
+
+.badge-warning,
+.badge.text-bg-warning {
+  background: #ffe69c;
+  color: #723809;
+}
+
+.badge-info,
+.badge.text-bg-info {
+  background: #cff4fc;
+  color: #032830;
+}
+
+.badge-light,
+.badge.text-bg-light {
+  background: #e9ecef;
+  color: #212529;
+}
+
+.badge-dark,
+badge.text-bg-dark {
+  color: #000;
+  background: #adb5bd;
+}
\ No newline at end of file