Stop using yellow buttons for normal operations

[Stephanie Leary]

The yellow .btn-warning style is used throughout Evergreen as a generic secondary button style. As the class name indicates, this is intended to be used for warnings; it is a cognitive accessibility problem to use yellow, orange, and red for things that are not warnings or errors.

The yellow in particular is also a color contrast problem; while the border added in bug 1991562 helps set these buttons off from the page background, it is still the most difficult to read, especially on hover.

We need a secondary button style that can be used for normal operations that don't involve warnings.

[Stephanie Leary (stephanieleary)]

Branch in progress: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/lp2023803-calmer-cancel-delete-buttons

This creates two new button variants: .btn-normal and .btn-destroy. In their default states, both buttons are light gray with black text, identical to input group buttons. In hover and focus states, .btn-destroy keeps its gray background, but its text and border turn red. In the active state (i.e. when pressed), .btn-destroy has a red background with white text, identical to .btn-danger's default state.

The attached screenshot shows the various .btn-destroy states. (On hover/focus/active, .btn-normal just gets slightly darker.)

I'm parking this branch here so we can experiment with replacing the .btn-warning style for innocuous operations (cancel, go back, etc.) and some uses of .btn-danger where there is no emergency that requires the user's immediate attention.

[Stephanie Leary (stephanieleary)]

Note that these button classes are now in main, and you can see them in the brand new custom OU trees interface (see bug 1993825). Use them with wild abandon!

.btn-normal
.btn-outline-normal
.btn-destroy
.btn-outline-destroy

[Stephanie Leary (stephanieleary)]

Here's a branch that replaces all instances of .btn-warning. It's another 200+ file monster, I'm afraid, but the actual changes are simple:

- .btn-normal for the Cancel button in all modals and confirm dialogs, and most other one-off instances
- .btn-destroy for removing items from a list, clearing form input, or otherwise deleting some data

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sleary/LP2023803-goodbye-yellow-brick-buttons

[Bill Erickson (berick)]

Applied and poked around various parts of the Ang/AngJS UI's. Looks great to me. Big +1 on lowering the intensity.

Since it's a big patch, here's a sign-off branch in case anyone else wants to review and test.

https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/berick/lp2023803-ixnay-on-the-ancelcay

[Galen Charlton (gmc)]

Pushed to main, along with a follow-up that adds some release notes, including a bit of a developer's guide to the new button styles. Thanks, Stephanie and Bill!

Noting, in case it is helpful to anybody else, that I used the following command after cherry-picking the patches to quickly verify that the series had _only_ changes to the button styles:

git diff --color-words=. origin/main..HEAD -U0 |grep -v 'diff --git'|grep -v 'index '|grep -v Open-ILS/src|grep -v '@@'|less -r