Merge branch 'low_contrast_fix_contact_dashbaord' into 'main'

Fix low contrast issues on contact dashboard

Closes civicrm#24 and civicrm#26

See merge request extensions/riverlea!13

README.md

@@ -6,14 +6,15 @@ The extension is licensed under [AGPL-3.0](LICENSE.txt).
 
 ## Changelog
 
-- 0.1 - proof-of-concept, Brunswick, empty theme structure doing just two things: for older CMS interfaces enforces a 100% font-size default to cascade the browser default font-size, and demonstrates a 1rem variable on top of that for some Civi body text sizes. The computed font-size of Civi paragraph and table text should show as 16px in Inspector (for standard setups).
-- 0.2 - adds a bunch of css variables for testing/dev, adds the entirity of the current Greenwich Bootstrap 3 build to start cutting it back, and adds a components directory with initial component 'accordions' (with animated exapnd/close + CSS variables). Separate components files will likely be merged when the extension is moving to testing, to reduce http requests.
-- 0.3 - Backdrop, Drupal7 + Seven, Drupal9 + Claro/Seven, Joomla 4, Standalone, WordPress. Loads with two theme variations/streams: Minetta and Walbrook. Does not cover: front-end layouts, < 1000px screens, Joomla 3, other Drupal admin themes, light/dark modes. 
-- 0.4 - CSS files restructure into `/core/css` and `/streams/[stream-name]/css/` with stream variables defined in `[stream-name]/css/_variables.css`. Variables files are version-numbered - 0.4 with this version. *Version numbers should only increase when the CSS Variables in these files change name, are removed or added*.
-- 0.5 - Over 50 UI and accessibility issues fixed following testing in CiviCamp Hamburg - with many thanks to Guillaume Sorel, Thomas Renner, Rositza Dikova, Luciano Spiegel & Peter Reck and the organisers - as well as Rich Lott and the Core Team. Instances of `#crm-container` removed or replaced with `.crm-container` which changes some cascade order. Preparation for overwriting other core CiviCRM CSS files from v0.6 which will require CiviCRM 5.75. Version compatibility raised to 5.72 from 5.69 because of Search Kit Builder interface changes: if that interface isn't used then compatibility before 5.69 should be fine.
-- 0.6 - NEW VARIABLES. Adds basic dark-mode support. Adds new stream: Hackney Brook, based on Finsbury Park (~90% port). Adds new CSS variables to all streams to support Finsbury Park's two main differences to Shoreditch and Greenwich: button icon styling (unique colours, background, border), and contact dashboard side tabs with active/hover border, similar to the 5.72 SearchKit UI, as well as some extra useful variables (e.g. dialog header border, notification border radius, etc).
-- 0.7 - NEW VARIBLES. Improves dark-mode across all three streams. Improves Hackney Brooke. More responsive tables. Many small fixes. Thanks SarahFG, Rich Lott & Guillaume Sorel.
-- 0.8 - NEW VARIABLES. Adds front-end support for each stream.  Adds CiviCRM logo for front-end pages as inline SVG. Adds CSS Variables for front end with `--crm-f` prefix, including to choose between inline and stacked label/inputs, to create a focus background, to limit the form width and adjust the logo size.Some fixes. NB v0.8 will be the last major version of RiverLea to work on CiviCRM < 5.75, due to file structure changes enabled by that release. Small fixes can be added as v0.8.1, v0.8.2, etc.
+- 0.1 - **Proof-of-concept**, Brunswick, empty theme structure doing just two things: for older CMS interfaces enforces a 100% font-size default to cascade the browser default font-size, and demonstrates a 1rem variable on top of that for some Civi body text sizes. The computed font-size of Civi paragraph and table text should show as 16px in Inspector (for standard setups).
+- 0.2 - **Establishes structure**, adds a bunch of css variables for testing/dev, adds the entirity of the current Greenwich Bootstrap 3 build to start cutting it back, and adds a components directory with initial component 'accordions' (with animated exapnd/close + CSS variables). Separate components files will likely be merged when the extension is moving to testing, to reduce http requests.
+- 0.3 - **Two streams, 6 CMS setups tested:** Backdrop, Drupal7 + Seven, Drupal9 + Claro/Seven, Joomla 4, Standalone, WordPress. Loads with two theme variations/streams: Minetta and Walbrook. Does not cover: front-end layouts, < 1000px screens, Joomla 3, other Drupal admin themes, light/dark modes. 
+- 0.4 - **CSS files restructure** into `/core/css` and `/streams/[stream-name]/css/` with stream variables defined in `[stream-name]/css/_variables.css`. Variables files are version-numbered - 0.4 with this version. *Version numbers should only increase when the CSS Variables in these files change name, are removed or added*.
+- 0.5 - **Extensive UI and accessibility fixes** following testing in CiviCamp Hamburg - with many thanks to Guillaume Sorel, Thomas Renner, Rositza Dikova, Luciano Spiegel & Peter Reck and the organisers - as well as Rich Lott and the Core Team. Instances of `#crm-container` removed or replaced with `.crm-container` which changes some cascade order. Preparation for overwriting other core CiviCRM CSS files from v0.6 which will require CiviCRM 5.75. Version compatibility raised to 5.72 from 5.69 because of Search Kit Builder interface changes: if that interface isn't used then compatibility before 5.69 should be fine.
+- 0.6 - **Adds third stream** (Finsbury Park / Hackney Brook). Adds basic dark-mode support. Adds new stream: Hackney Brook, based on Finsbury Park (~90% port). Adds new CSS variables to all streams to support Finsbury Park's two main differences to Shoreditch and Greenwich: button icon styling (unique colours, background, border), and contact dashboard side tabs with active/hover border, similar to the 5.72 SearchKit UI, as well as some extra useful variables (e.g. dialog header border, notification border radius, etc). NEW VARIBLES
+- 0.7 -**Dark-mode**. Improves dark-mode across all three streams. Improves Hackney Brook. More responsive tables. Many small fixes. Thanks SarahFG, Rich Lott & Guillaume Sorel. NEW VARIBLES
+- 0.8 - **Front-end layouts**. Adds front-end support for each stream.  Adds CiviCRM logo for front-end pages as inline SVG. Adds CSS Variables for front end with `--crm-f` prefix, including to choose between inline and stacked label/inputs, to create a focus background, to limit the form width and adjust the logo size.Some fixes. NB v0.8 will be the last major version of RiverLea to work on CiviCRM < 5.75, due to file structure changes enabled by that release. Small fixes can be added as v0.8.1, v0.8.2, etc. NEW VARIBLES
+- 0.9 - **Overwrites civi core CSS**, e.g. SearchKit & FormBuilder adds FontAwesome6. Works on 5.75+ only as it uses Angular css overwrites added in https://github.com/civicrm/civicrm-core/pull/30397 to replace the css for Search Kit, Form Builder and some other files, so that CSS variables can be applied to them, fewer '!important' tags used and file size is shurnk. Adds avatar support on contact dashboard. NEW VARIBLES: crm-c-code-background, crm-dash-image-size, crm-dash-image-radius, crm-dash-image-justify, crm-dash-image-direction. 
 
 ## Installation (CLI, Zip)
 
@@ -60,11 +61,12 @@ Contains CSS files in:
 
 ## Roadmap
 
-- Restructure files to overwrite CiviCRM core & angular module CSS Frontend following (https://github.com/civicrm/civicrm-core/pull/30397). This should reduce overall CSS loads/file size and the use of `!Important` declarations. Will require CiviCRM 5.75.
+- ~~Restructure files to overwrite CiviCRM core & angular module CSS Frontend~~
 - ~~Front-end testing & fixes.~~
-- Document streams.
 - ~~Darkmode~~.
 - ~~Migrate Finsbury Park~~ (and others) to a stream.
+- Document streams.
+- Tidy/simplify Bootstrap
 
 ## Creating new 'streams'
 
@@ -78,7 +80,7 @@ E.g. to add a stream called "Vimur", you would name the directory 'vimur', and a
 
 ```
  function riverlea_civicrm_themes(&$themes) {
-  $themes['minetta'] = array(
+  $themes['vimur'] = array(
     'ext' => 'riverlea',
     'title' => 'Riverlea: Vimur',
     'prefix' => 'streams/vimur/',
@@ -91,3 +93,5 @@ E.g. to add a stream called "Vimur", you would name the directory 'vimur', and a
   … 
  }
 ```
+
+Use of the [ThemeTest extension](https://lab.civicrm.org/extensions/themetest) is recommended to more quickly identify which CSS variables match which UI element, and test multiple variations for each.

core/css/_base.css

@@ -147,7 +147,10 @@
 }
 .crm-container .strikethrough {
     text-decoration: line-through;
-  }
+}
+.crm-container .upper {
+    text-transform: uppercase;
+}
 .crm-container h3,
 #bootstrap-theme h3 {
     background-color: var(--crm-heading-bg);
@@ -332,7 +335,7 @@
 	color: var(--crm-c-text);
 	word-break: break-all;
 	word-wrap: break-word;
-    background-color: var(--crm-c-background3);
+    background-color: var(--crm-c-code-background);
 	border: 1px solid var(--crm-c-background4);
 	border-radius: var(--crm-roundness);
 }
@@ -379,7 +382,11 @@
     display: flex;
     flex-wrap: wrap;
 }
+.crm-container {
+    --crm-flex-gap: 0.5rem;
+}
 .crm-container .crm-flex-box > * {
+    gap: var(--crm-flex-gap);
     flex: 1;
     min-width: 0;
 }

core/css/_bootstrap.css

@@ -116,7 +116,7 @@
 	color: var(--crm-input-color);
 	text-align: left;
 	background-color: var(--crm-input-background);
-	width: 100%;
+	/* width: 100%; */
 	border-radius: var(--crm-roundness);
 }
 #bootstrap-theme .has-success .form-control {

core/css/_bootstrap3.css

@@ -1369,7 +1369,7 @@
 	font-style: normal;
 	line-height: 1.428571429;
 }
-#bootstrap-theme code, #bootstrap-theme kbd, #bootstrap-theme pre, #bootstrap-theme samp {
+/*#bootstrap-theme code, #bootstrap-theme kbd, #bootstrap-theme pre, #bootstrap-theme samp {
 	font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 #bootstrap-theme code {
@@ -1378,7 +1378,7 @@
 	color: #c7254e;
 	background-color: #f9f2f4;
 	border-radius: 4px;
-}
+}  */
 #bootstrap-theme kbd {
 	padding: 2px 4px;
 	font-size: 90%;
@@ -2974,26 +2974,26 @@
 	border-bottom-color: transparent;
 } */
 
-#bootstrap-theme .nav-pills > li {
+/* #bootstrap-theme .nav-pills > li {
 	float: left;
 }
 #bootstrap-theme .nav-pills > li > a {
 	border-radius: 4px;
 }
 #bootstrap-theme .nav-pills > li + li {
 	margin-left: 2px;
-}
+} */
 /* #bootstrap-theme .nav-pills > li.active > a, #bootstrap-theme .nav-pills > li.active > a:hover, #bootstrap-theme .nav-pills > li.active > a:focus {
 	color: white;
 	background-color: black;
 } */
-#bootstrap-theme .nav-stacked > li {
+/* #bootstrap-theme .nav-stacked > li {
 	float: none;
 }
 #bootstrap-theme .nav-stacked > li + li {
 	margin-top: 2px;
 	margin-left: 0;
-}
+} */
 #bootstrap-theme .nav-justified, #bootstrap-theme .nav-tabs.nav-justified {
 	width: 100%;
 }

core/css/_cms.css

@@ -149,6 +149,7 @@ body.wp-admin #wpcontent {
 body.wp-admin .crm-container li {
     margin: 0; /* resets WP li bottom margin */
     list-style: none;
+    white-space: inherit;
 }
 body.wp-admin div.ui-notify-message .notify-content li {
     list-style: unset;
@@ -163,9 +164,10 @@ body.wp-admin .crm-container select {
 body.wp-admin #crm-container {
     background: var(--crm-c-page-background);
 }
-
-body.wp-admin .crm-container:has(.crm-contact-page) .breadcrumb {
-
+body.wp-admin .button {
+    line-height: inherit;
+    font-size: inherit;
+    border: inherit;
 }
 body.wp-admin.page-civicrm-contact .breadcrumb {
     display: none; /* Hides breadcrumb on contact dashboard */
@@ -182,8 +184,8 @@ body.wp-admin.wp-core-ui .crm-container select {
 html.crm-standalone {
     --crm-page-width: 100%;
     --crm-page-padding: 1px 1vw;
-    --crm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif; /* Adds fallback for base font */
 }
 html.crm-standalone body {
     margin: unset;
-}
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue",sans-serif; /* Adds fallback for base font */
+}

core/css/_core.css

@@ -1,6 +1,6 @@
 /* Civi CSS Framework (civicrm.css), the core CSS to make Civi UI behave
    coherently in a neutral, clean, responsive and accessible way with as little
-   css as possible. For dev purposes each components is its own file, these 
+   css as possible. For dev purposes each components is its own file, these
    can be merged later. */
 
 @import url(components/_accordion.css);
@@ -16,3 +16,8 @@
 @import url(components/_page.css);
 @import url(components/_components.css);
 @import url(components/_front.css);
+
+/* Font Awesome 6 */
+@import url(../../fa/css/fontawesome.min.css);
+@import url(../../fa/css/brands.min.css);
+@import url(../../fa/css/v4-shims.min.css);