Make a new theme to ship with Civi
In parallel to documenting Civi's Markup in the ThemeTest extension (#56) and agreeing the best markup patterns (#57), produce a new theme to ship with CiviCRM to replace the 15-year-old Greenwich theme.
After extensive discussion @artfulrobot and I (who each produce a theme - Aah and Finsbury Park) are deliberately trying to ignore UI specific questions (fonts? colours? flat? shadows? round-corners?) but instead on making those decisions something trivial to change later (and would obviously make them in discussion with the community).
This themes' primary goal is to give Civi a theme backend that will support not just 2023/24's UI trends (shadowy, vs flat, vs skewmorphic), but the trends of the next 20 years. As well as supporting all 7 Civi versions (Backdrop, Drupal 7 with Seven, Drupal 9+ with Claro, Joomla 3, Joomla 4, Standalone, WordPress), the new theme aims to follow several principles:
Wide use of CSS Variables
Use CSS Custom Properties (aka CSS Variables) to make it quick to re-theme. In principle this could make it viable to have a set of Custom property declarations to make the theme look closer to Shoreditch for those whose training materials require that, or for those who need to match a CMS UI or organisation intranet design guidelines.
A test of CSS Custom Properties being used in this way is currently shipping with the login page markup for CiviCRM Standalone. In the screengrab below you can see the three variable arrays for three different UI's
Bootstrap Subset
Use a Bootstrap subset to continue to support the Bootstrap 3 class names & markup patterns currently in use in post-Shoreditch components (API Explorer, SearchKit, Form Builder, Mosaico, etc). This does not mean Bootstrap 3 as a whole needs to be supported/bundled; and some of Bootstrap 4/5 can be used - but the full Bootstrap 3 or 5 bundle isn't needed.
Accessibile, responsive, small
Standards in accessibility have evolved fast. Just taking base font-size - the current standard practice is to let the browser define this, with a default of 16px and scale every page font in proportion using Rems. However, in Bootstrap 3: HTML is 10px, body is 14px, all sizes are set in pixels. WordPress and Joomla 3 are worse: both have 13px body size, same as the Seven admin theme on Drupal 7 and 8. Bootstrap 4 & 5, Backdrop, Joomla 4 and Drupal 9 Claro theme get it right: body is 1rem, inheriting pixel size from browser (aka 16px). But it’s an extra complexity for Civi's cross-CMS theming. To understand why this is so important, Rich made a demo: https://artfulrobot.uk/lil/about-rems/.
Mobile and tablet support needs to be added as far as possible.
The theme's filesize should be kept as small as possible within the various constraints described here.
Structure
Structure the theme to separate style definitions for Style Guide approved markup patterns (#57) and the legacy support for (some of) the older patterns identified in #56, aka 'Civi hacks'. The CSS also needs a CMS Hacks section to handle CMS-specific quirks which often change with new CMS themes, e.g. Drupal 9's Claro). A possible structure below
Separate front theme?
CiviCRM on the front-end has different needs to the backend. Buttons need to match the parent front-end theme style and there's a number of ways to do this, from having separate CSS Variables for front-end pages that users can configure, to having a minimalist front-end theme that inherits more from the parent theme. This will be looked at subject to time and progress of other goals, for now there is a prototype CSS Variable led, minimalist front-end theme that inherits more of a front-end theme while letting the user configure some defaults (ie button colour/size): Front.