Back office colour system

[joemull]

Closes #5024.

This PR introduces the alpha colour theme to the Janeway back office, and consolidates visual styles across the codebase to do so.

Screenshots

Colours

Original alpha theme (created for new Janeway / memory alpha website)

#262522
#fdf3e3
#bb4e30
#36565f
#c08031

Derivative / extra colours to meet the design needs of the back office

#646360
#494844
#171613
#2f3d3f
#ede3d3
#d3c9ba
#b9b0a1
#9f3415
#24700c
#154a06

Design decisions

TL;DR: See the documentation.

1. Light mode. We don't yet have the ability to do a dark mode in the back office, but this is a step in the right direction. The background is the same warm white received from the designer, but we could lower the chroma value to make it a bit less warm / intense if we think that is similarly tiring to the bright white that was used before.
2. New Janeway logo. It makes sense to introduce the new logo along with the brand colours.
3. Flatter boxes. I did not keep the box shadows, because they did not seem to fit the brand. In a future version, I think box shadows could work, but they'd need to be a new style.
4. Square buttons. I made all regular buttons square for consistency, whether or not a button-group was used.
5. Hover effects. I kept the button hover effects, though I had to improvise the colours for these.
6. Colour contrast. A 4.5 ratio was achieved in nearly all cases (exception--secondary button on background, for which see below).
7. Button system consolidation. We do not use the full range of button styles provided in foundation CSS. Our use cases are usually about distinguishing between main and secondary actions, and flagging destructive actions or problems for the user. So, we now just have three button styles: primary/success, secondary, and warning/error/danger. I went through our existing screens and exhaustively abstracted button HTML into elements, when I could. The elements use an accessible icon syntax (aria-hidden, since there is always a separate text label). I left alone finnicky JS-powered modals and other special use cases where Django template syntax hinders options. Unstyled buttons were also left alone.
8. Callouts and other elements. I left green in for some success styles, where it is the thick bar on the left (bs-callout). As part of this work, I discovered our standard form error element was calling the OLH theme Foundation element, and so the correct styles were not being applied. I fixed this.
9. Dashboard colours. I used primary for workflow elements where there is at least one task, and a transparent background for categories where there are zero tasks.
10. Prepublication. I improvised the style of these boxes, turning them into bs-callout boxes to achieve contrast without losing the nice effect of checking things off.
11. Tables. I upgraded datatables and styled them according to the theme.
12. Rich text boxes. I created a TinyMCE theme that matches the colors. (This makes the remaining JQTE boxes stand out even more now, for better or worse.)
13. Radio buttons. I created a custom style for radio buttons, using a black circle or square and a black dot or square as the fill colour.
14. Bugfixes. In a handful of cases I discovered bugs that I could fix on the fly.

Method

To manage the task of making a particular type of change across hundreds of templates, I wrote a new management command that can create a checklist of template locations to check, based on grep search parameters. It is tailored for use with ripgrep. Here is the final version of the prompt I built iteratively while checking templates:

python src/manage.py create_template_checklist "success|alert|danger|delete|error|warning|callout|badge|hollow" --invert_match="class=\"callout\"|bs-callout\ bs-callout-success|bs-callout\ bs-callout-danger|bs-callout\ bs-callout-warning|bs-callout\ bs-callout-info|bs-callout\ bs-callout-primary|fa\ fa-warning|elements/button_delete|elements/button_yes_delete.html|with\ name=\"delete|include\ \"admin/elements/forms/errors|include\ \"elements/forms/generic_errors|include\ \"elements/forms/generic_error|include\ \"admin/elements/forms/messages_in_callout|include\ \"elements/a_delete|\{\{\ thing_to_delete\ \}\}|thing_to_delete=thing_to_delete" --write

The management command works together with a ripgrep exclusion file, which lists all the deprecated files and folders in the Janeway template tree. I did not check in the exclusion list, but here it is for future reference. It may be something we want to include in some form as a shared deprecation list. In addition, it excludes other noise like JS assets and XML validation schemas, which are not picked up by create_template_checklist but are by many IDE search functions.

--glob=!src/static/admin/**/*.min.js
--glob=!src/static/admin/**/*.min.css
--glob=!src/static/admin/js/tabs.js
--glob=!src/static/admin/js/tagit.js
--glob=!src/static/common/**/*min.js
--glob=!src/static/common/**/*min.css
--glob=!src/static/common/lightbox/
--glob=!src/static/common/datatables/datatables.js
--glob=!src/static/common/js/tinymce/
--glob=!src/static/common/js/moreless.js
--glob=!src/static/common/js/tagit.js
--glob=!src/static/common/js/confirm.js
--glob=!src/static/common/js/jq-ui-timepicker.js
--glob=!src/static/common/js/material-eq-height.js
--glob=!src/static/common/css/jq-ui.css
--glob=!src/themes/OLH/assets/font-awesome/
--glob=!src/themes/OLH/assets/fonts/
--glob=!src/themes/OLH/assets/foundation-sites/
--glob=!src/themes/OLH/assets/jquery/
--glob=!src/themes/OLH/assets/js/
--glob=!src/themes/OLH/assets/scss/_toastr.scss
--glob=!src/themes/OLH/assets/motion-ui/
--glob=!src/themes/OLH/assets/what-input/
--glob=!src/themes/OLH/assets/scss/jquery-te-1.4.0.css
--glob=!src/themes/OLH/assets/scss/jq-ui.css
--glob=!src/transform/
--glob=!src/templates/admin/core/manager/notifications/
--glob=!src/templates/admin/core/manager/pinned_articles.html
--glob=!src/templates/admin/elements/edit_author.html
--glob=!src/templates/admin/elements/edit_identifier.html
--glob=!src/templates/admin/elements/publish/author.html
--glob=!src/templates/admin/elements/roles/enrol_modal.html
--glob=!src/templates/admin/elements/submission/edit_author.html
--glob=!src/templates/admin/elements/submit/author.html
--glob=!src/templates/admin/journal/file_history.html
--glob=!src/templates/admin/preprints/settings.html
--glob=!src/templates/admin/core/email_user.html
--glob=!src/templates/admin/install/
--glob=!src/templates/admin/production/
--glob=!src/templates/admin/elements/production/
--glob=!src/templates/admin/proofing/
--glob=!src/templates/admin/elements/proofing/
--glob=!src/templates/typesetting/elements/production_files.html
--glob=!src/templates/typesetting/elements/new_production_file.html
--glob=!src/core/locales/
--glob=!src/identifiers/tests/test_data/

[StephDriver]

A few A11y thoughts for consideration:

• required * - we've started putting the * in red on the front of house so that it grabs attention more.
• unstyled buttons - don't look like interactive elements - previously had a light blue colour text to distinguish them from other text, need something to show they are clickable.
• link colour / main text colour very similar - needs to have contrast between them if this is only indication that something is a link.
• buttons without borders - not sure that's a good idea. Knowing the target boundary of smallish targets is useful, especially for voice control via a grid.
• hover effect - needs to have a 1:3 contrast with non-hover effect so that change is visible.
• consider the table headings and row colours - currently very similar to the secondary button. Likewise the text area background - these are currently confusable as 'buttons'.

Really Really Like:

• text backgrounds more consistent - e.g. callouts
• button click animations to show you've clicked it
• consistent styling