Created attachment 174934 [details] Screenshot showing examples of Bootstrap alerts and text with background Some of the built-in Bootstrap alert and text background classes aren't working very well in terms of visibility and contrast. The "info" alert should stand out more, and the text background classes don't all have usable contrast. See the attached screenshot.
Created attachment 174935 [details] Screenshot showing proposed updated colors
Created attachment 174936 [details] [review] Bug 38519: Improve contrast of Bootstrap alerts and text background classes This patch updates staff interface CSS in order to improve visibility and contrast in Bootstrap alerts and text with background classes. Some of these changes are made via our custom _variables.scss file which sets overrides of default Bootstrap classes. I was not able to figure out a good way to customize the .text-bg-* classes via that method so I've inserted those changes into staff-global.scss. The patch also removes our custom .note class because it can be replaced with .alert.alert-info. To test, apply the patch and rebuild the staff interface CSS. - Clear your browser cache if necessary. - View places where the updated classes can be found: - For example: Administration -> Authorized values. Click a category which has no saved values, e.g. Asort1. There should be two "info" classed alerts: One showing "NOTE: If you changed an authorized value..." and one showing "There are no authorized values..." - Other examples of pages which are updated to use "alert alert-info" instead of the "note" class: - Patron search where the search is limited by permissions, e.g. Acquisitions -> Vendor -> Basket -> Add user. - Administration -> Search engine configuration: "Warning: Any changes to the configuration will only take effect..." - See also pages where a count of something uses the text-bg-info class: - Bibliographic detail page when the record has holds - Patron module home page when there are pending modifications - Tools home page when there are tags or comments pending approval - A patron checkout screen when the Claims tab is present ( BundleLostValue or ClaimReturnedLostValue prefs are set). Sponsored-by: Athens County Public Libraries
One way of getting a quick look at these changes: Add this markup to the IntranetMainUserBlock HTML customization: <div class="text-bg-primary p-3">Primary (text-bg-primary)</div> <div class="text-bg-secondary p-3">Secondary (text-bg-secondary)</div> <div class="text-bg-success p-3">Success (text-bg-success)</div> <div class="text-bg-danger p-3">Danger (text-bg-danger)</div> <div class="text-bg-warning p-3">Warning (text-bg-warning)</div> <div class="text-bg-info p-3">Info (text-bg-info)</div> <div class="alert alert-primary" role="alert"> Primary alert (alert alert-primary) </div> <div class="alert alert-secondary" role="alert"> Secondary alert (alert alert-primary) </div> <div class="alert alert-success" role="alert"> Success alert (alert alert-primary) </div> <div class="alert alert-danger" role="alert"> Danger alert (alert alert-primary) </div> <div class="alert alert-warning" role="alert"> Warning alert (alert alert-primary) </div> <div class="alert alert-info" role="alert"> Info alert (alert alert-primary) </div> <div class="alert alert-light" role="alert"> Light alert (alert alert-primary) </div> <div class="alert alert-dark" role="alert"> Dark alert (alert alert-primary) </div>
Created attachment 174996 [details] [review] Bug 38519: Improve contrast of Bootstrap alerts and text background classes This patch updates staff interface CSS in order to improve visibility and contrast in Bootstrap alerts and text with background classes. Some of these changes are made via our custom _variables.scss file which sets overrides of default Bootstrap classes. I was not able to figure out a good way to customize the .text-bg-* classes via that method so I've inserted those changes into staff-global.scss. The patch also removes our custom .note class because it can be replaced with .alert.alert-info. To test, apply the patch and rebuild the staff interface CSS. - Clear your browser cache if necessary. - View places where the updated classes can be found: - For example: Administration -> Authorized values. Click a category which has no saved values, e.g. Asort1. There should be two "info" classed alerts: One showing "NOTE: If you changed an authorized value..." and one showing "There are no authorized values..." - Other examples of pages which are updated to use "alert alert-info" instead of the "note" class: - Patron search where the search is limited by permissions, e.g. Acquisitions -> Vendor -> Basket -> Add user. - Administration -> Search engine configuration: "Warning: Any changes to the configuration will only take effect..." - See also pages where a count of something uses the text-bg-info class: - Bibliographic detail page when the record has holds - Patron module home page when there are pending modifications - Tools home page when there are tags or comments pending approval - A patron checkout screen when the Claims tab is present ( BundleLostValue or ClaimReturnedLostValue prefs are set). Sponsored-by: Athens County Public Libraries Signed-off-by: David Nind <david@davidnind.com>
Thanks for the easy way to show all the changes in one place! All the changed colours have a WCAG rating of AAA for the colour contrast, except from Dark alert (alert alert-primary), which is AA. For me personally, the info and info alert boxes are greatly improved - I find them much easier to read.