fix(theming): Adjust primary text color calculation to also work with high contrast...

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
index 4119d370f08a8f3ee393d9e9bf0ffee1545fbc54..e9388e6ab60ecd33de740a3497215497a008d853 100644 (file)
--- a/apps/theming/css/default.css
+++ b/apps/theming/css/default.css
@@ -77,9 +77,9 @@
   --color-primary-light-text: #00293f;
   --color-primary-light-hover: #dbe4ea;
   --color-primary-element: #00679e;
-  --color-primary-element-hover: #1070a4;
+  --color-primary-element-hover: #005a8a;
   --color-primary-element-text: #ffffff;
-  --color-primary-element-text-dark: #f0f0f0;
+  --color-primary-element-text-dark: #f5f5f5;
   --color-primary-element-light: #e5eff5;
   --color-primary-element-light-hover: #dbe4ea;
   --color-primary-element-light-text: #00293f;

diff --git a/apps/theming/lib/Themes/CommonThemeTrait.php b/apps/theming/lib/Themes/CommonThemeTrait.php
index 38ca760db9f154a39df2a6a4c6794b476db487d2..85172f1e9bcad46b9eaf911dcedb5c44d5c81b90 100644 (file)
--- a/apps/theming/lib/Themes/CommonThemeTrait.php
+++ b/apps/theming/lib/Themes/CommonThemeTrait.php
@@ -43,6 +43,7 @@ trait CommonThemeTrait {
                $colorPrimaryElement = $this->util->elementColor($this->primaryColor, $isBrightColor, $colorMainBackground);
                $colorPrimaryLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
                $colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
+               $invertPrimaryTextColor = $this->util->invertTextColor($colorPrimaryElement);
 
                // primary related colours
                return [
@@ -66,10 +67,10 @@ trait CommonThemeTrait {
 
                        // used for buttons, inputs...
                        '--color-primary-element' => $colorPrimaryElement,
-                       '--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 87),
-                       '--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff',
+                       '--color-primary-element-hover' => $invertPrimaryTextColor ? $this->util->lighten($colorPrimaryElement, 4) : $this->util->darken($colorPrimaryElement, 4),
+                       '--color-primary-element-text' => $invertPrimaryTextColor ? '#000000' : '#ffffff',
                        // mostly used for disabled states
-                       '--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 6),
+                       '--color-primary-element-text-dark' => $invertPrimaryTextColor ? $this->util->lighten('#000000', 4) : $this->util->darken('#ffffff', 4),
 
                        // used for hover/focus states
                        '--color-primary-element-light' => $colorPrimaryElementLight,

diff --git a/apps/theming/tests/Themes/AccessibleThemeTestCase.php b/apps/theming/tests/Themes/AccessibleThemeTestCase.php
index 6c31506999d88f4d3584741bdfdd4ae166a90348..29ad8cfaff24f507d13be3c7978cae6d479882d5 100644 (file)
--- a/apps/theming/tests/Themes/AccessibleThemeTestCase.php
+++ b/apps/theming/tests/Themes/AccessibleThemeTestCase.php
@@ -47,7 +47,10 @@ class AccessibleThemeTestCase extends TestCase {
                                3.0,
                        ],
                        'primary-element-text' => [
-                               ['--color-primary-element-text'],
+                               [
+                                       '--color-primary-element-text',
+                                       '--color-primary-element-text-dark',
+                               ],
                                [
                                        '--color-primary-element',
                                        '--color-primary-element-hover',
@@ -96,8 +99,11 @@ class AccessibleThemeTestCase extends TestCase {
         * @dataProvider dataAccessibilityPairs
         */
        public function testAccessibilityOfVariables($mainColors, $backgroundColors, $minContrast) {
-               $this->assertNotNull($this->theme, 'You need to setup $this->theme in your setUp function');
-               $this->assertNotNull($this->util, 'You need to setup $this->util in your setUp function');
+               if (!isset($this->theme)) {
+                       $this->markTestSkipped('You need to setup $this->theme in your setUp function');
+               } elseif (!isset($this->util)) {
+                       $this->markTestSkipped('You need to setup $this->util in your setUp function');
+               }
 
                $variables = $this->theme->getCSSVariables();