fix(theming): Make sure `color-border-maxcontrast` fulfills 3:1 contrast

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

diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
index 157e28982c03e3a3a03e88b36d204c1873afda4d..7434710555babed5d2ea24f5159e5b7d53ce9fc6 100644 (file)
--- a/apps/theming/css/default.css
+++ b/apps/theming/css/default.css
@@ -43,7 +43,7 @@
   --color-box-shadow: rgba(var(--color-box-shadow-rgb), 0.5);
   --color-border: #ededed;
   --color-border-dark: #dbdbdb;
-  --color-border-maxcontrast: #949494;
+  --color-border-maxcontrast: #7d7d7d;
   --font-face: system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --default-font-size: 15px;
   --animation-quick: 100ms;

diff --git a/apps/theming/lib/Themes/DarkHighContrastTheme.php b/apps/theming/lib/Themes/DarkHighContrastTheme.php
index de6fe2d4835f8501ab900b09298af825c472f401..965dac2922c2567c6e1926ad4392d5ed23b71c6e 100644 (file)
--- a/apps/theming/lib/Themes/DarkHighContrastTheme.php
+++ b/apps/theming/lib/Themes/DarkHighContrastTheme.php
@@ -118,6 +118,7 @@ class DarkHighContrastTheme extends DarkTheme implements ITheme {
 
                                '--color-border' => $this->util->lighten($colorMainBackground, 50),
                                '--color-border-dark' => $this->util->lighten($colorMainBackground, 50),
+                               '--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 55),
                        ]
                );
        }

diff --git a/apps/theming/lib/Themes/DarkTheme.php b/apps/theming/lib/Themes/DarkTheme.php
index 4b038a8812c80220ddd837db3bfdb2bc9809bc6f..f63854289ad0407b82af7463a67f48c2463fd86f 100644 (file)
--- a/apps/theming/lib/Themes/DarkTheme.php
+++ b/apps/theming/lib/Themes/DarkTheme.php
@@ -115,7 +115,7 @@ class DarkTheme extends DefaultTheme implements ITheme {
 
                                '--color-border' => $this->util->lighten($colorMainBackground, 7),
                                '--color-border-dark' => $this->util->lighten($colorMainBackground, 14),
-                               '--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 30),
+                               '--color-border-maxcontrast' => $this->util->lighten($colorMainBackground, 40),
 
                                '--background-invert-if-dark' => 'invert(100%)',
                                '--background-invert-if-bright' => 'no',

diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
index d36feb000ae547b5f1771eeff7043c16c0c3525f..3dfa89f8d3a84ea34a5fb15e5514328a53bd85a1 100644 (file)
--- a/apps/theming/lib/Themes/DefaultTheme.php
+++ b/apps/theming/lib/Themes/DefaultTheme.php
@@ -171,7 +171,7 @@ class DefaultTheme implements ITheme {
 
                        '--color-border' => $this->util->darken($colorMainBackground, 7),
                        '--color-border-dark' => $this->util->darken($colorMainBackground, 14),
-                       '--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 42),
+                       '--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 51),
 
                        '--font-face' => "system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen-Sans, Cantarell, Ubuntu, 'Helvetica Neue', 'Noto Sans', 'Liberation Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'",
                        '--default-font-size' => '15px',

diff --git a/apps/theming/lib/Themes/HighContrastTheme.php b/apps/theming/lib/Themes/HighContrastTheme.php
index f02a30a7cb868d6768841bdd535e5bffb7a8fb26..92511b59c81d78950e322bf755adf64bd21378fc 100644 (file)
--- a/apps/theming/lib/Themes/HighContrastTheme.php
+++ b/apps/theming/lib/Themes/HighContrastTheme.php
@@ -121,6 +121,7 @@ class HighContrastTheme extends DefaultTheme implements ITheme {
 
                                '--color-border' => $this->util->darken($colorMainBackground, 50),
                                '--color-border-dark' => $this->util->darken($colorMainBackground, 50),
+                               '--color-border-maxcontrast' => $this->util->darken($colorMainBackground, 56),
                        ]
                );
        }

diff --git a/apps/theming/tests/Themes/AccessibleThemeTestCase.php b/apps/theming/tests/Themes/AccessibleThemeTestCase.php
index 84121dd41b0b93663c77a5fa84d8a3dd0d3d93fc..f5bbcf44c64f231d603ef8028c4ee32201f467e7 100644 (file)
--- a/apps/theming/tests/Themes/AccessibleThemeTestCase.php
+++ b/apps/theming/tests/Themes/AccessibleThemeTestCase.php
@@ -74,6 +74,18 @@ class AccessibleThemeTestCase extends TestCase {
                                ],
                                $elementContrast,
                        ],
+                       'border-colors' => [
+                               [
+                                       '--color-border-maxcontrast',
+                               ],
+                               [
+                                       '--color-main-background',
+                                       '--color-background-hover',
+                                       '--color-background-dark',
+                                       '--color-main-background-blur',
+                               ],
+                               $elementContrast,
+                       ],
                        // Those two colors are used for borders which will be `color-main-text` on focussed state, thus need 3:1 contrast to it
                        'success-error-border-colors' => [
                                [