Skip to content

Commit

Permalink
fix(theming): Adjust hover color to be accessible
Browse files Browse the repository at this point in the history 
Signed-off-by: Ferdinand Thiessen <[email protected]>
  • Loading branch information
@susnux
susnux committed Dec 15, 2023
1 parent c157f6c commit 96b10b4
Show file tree
Hide file tree
Showing 4 changed files with 131 additions and 18 deletions.
2 changes: 1 addition & 1 deletion apps/theming/css/default.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@
--color-primary-light-text: #00293f;
--color-primary-light-hover: #dbe4ea;
--color-primary-element: #00679e;
--color-primary-element-hover: #1674a6;
--color-primary-element-hover: #1070a4;
--color-primary-element-text: #ffffff;
--color-primary-element-text-dark: #f0f0f0;
--color-primary-element-light: #e5eff5;
Expand Down
2 changes: 1 addition & 1 deletion apps/theming/lib/Themes/CommonThemeTrait.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ protected function generatePrimaryVariables(string $colorMainBackground, string

// used for buttons, inputs...
'--color-primary-element' => $colorPrimaryElement,
'--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 82),
'--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 87),
'--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff',
// mostly used for disabled states
'--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 6),
Expand Down
116 changes: 116 additions & 0 deletions apps/theming/tests/Themes/AccessibleThemeTestCase.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<?php
/**
* @copyright Copyright (c) 2023 Ferdinand Thiessen <[email protected]>
*
* @author Ferdinand Thiessen <[email protected]>
*
* @license AGPL-3.0-or-later
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Affero General Public License as
* published by the Free Software Foundation, either version 3 of the
* License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Affero General Public License for more details.
*
* You should have received a copy of the GNU Affero General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
namespace OCA\Theming\Tests\Themes;

use OCA\Theming\ITheme;
use OCA\Theming\Util;
use Test\TestCase;

class AccessibleThemeTestCase extends TestCase {
protected ITheme $theme;
protected Util $util;

public function dataAccessibilityPairs() {
return [
'primary-element on background' => [
[
'--color-primary-element',
'--color-primary-element-hover',
],
[
'--color-main-background',
'--color-background-hover',
'--color-background-dark',
'--color-background-darker',
'--color-main-background-blur',
],
3.0,
],
'primary-element-text' => [
['--color-primary-element-text'],
[
'--color-primary-element',
'--color-primary-element-hover',
],
4.5,
],
'primary-element-light-text' => [
['--color-primary-element-light-text'],
[
'--color-primary-element-light',
'--color-primary-element-light-hover',
],
4.5,
],
'main-text' => [
['--color-main-text'],
[
'--color-main-background',
'--color-background-hover',
'--color-background-dark',
'--color-background-darker',
'--color-main-background-blur',
],
4.5,
],
'max-contrast-text' => [
['--color-text-maxcontrast'],
[
'--color-main-background',
'--color-background-hover',
'--color-background-dark',
],
4.5,
],
'max-contrast text-on blur' => [
['--color-text-maxcontrast-background-blur'],
[
'--color-main-background-blur',
],
4.5,
],
];
}

/**
* @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');

$variables = $this->theme->getCSSVariables();

// Blur effect does not work so we mockup the color - worst supported case is the default "clouds" background image (on dark themes the clouds with white color are bad on bright themes the primary color as sky is bad)
$variables['--color-main-background-blur'] = $this->util->mix($variables['--color-main-background'], $this->util->isBrightColor($variables['--color-main-background']) ? $variables['--color-primary'] : '#ffffff', 75);

foreach ($backgroundColors as $background) {
$this->assertStringStartsWith('#', $variables[$background], 'Is not a plain color variable - consider to remove or fix this test');
foreach ($mainColors as $main) {
$this->assertStringStartsWith('#', $variables[$main], 'Is not a plain color variable - consider to remove or fix this test');
$realContrast = $this->util->colorContrast($variables[$main], $variables[$background]);
$this->assertGreaterThanOrEqual($minContrast, $realContrast, "Contrast is not high enough for $main (" . $variables[$main] . ") on $background (" . $variables[$background] . ')');
}
}
}
}
29 changes: 13 additions & 16 deletions apps/theming/tests/Themes/DefaultThemeTest.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*
*/
namespace OCA\Theming\Tests\Service;
namespace OCA\Theming\Tests\Themes;

use OCA\Theming\AppInfo\Application;
use OCA\Theming\ImageManager;
Expand All @@ -36,9 +36,8 @@
use OCP\IURLGenerator;
use OCP\IUserSession;
use PHPUnit\Framework\MockObject\MockObject;
use Test\TestCase;

class DefaultThemeTest extends TestCase {
class DefaultThemeTest extends AccessibleThemeTestCase {
/** @var ThemingDefaults|MockObject */
private $themingDefaults;
/** @var IUserSession|MockObject */
Expand All @@ -54,8 +53,6 @@ class DefaultThemeTest extends TestCase {
/** @var IAppManager|MockObject */
private $appManager;

private DefaultTheme $defaultTheme;

protected function setUp(): void {
$this->themingDefaults = $this->createMock(ThemingDefaults::class);
$this->userSession = $this->createMock(IUserSession::class);
Expand All @@ -65,7 +62,7 @@ protected function setUp(): void {
$this->l10n = $this->createMock(IL10N::class);
$this->appManager = $this->createMock(IAppManager::class);

$util = new Util(
$this->util = new Util(
$this->config,
$this->appManager,
$this->createMock(IAppData::class),
Expand Down Expand Up @@ -101,8 +98,8 @@ protected function setUp(): void {
return "/$app/img/$filename";
});

$this->defaultTheme = new DefaultTheme(
$util,
$this->theme = new DefaultTheme(
$this->util,
$this->themingDefaults,
$this->userSession,
$this->urlGenerator,
Expand All @@ -117,31 +114,31 @@ protected function setUp(): void {


public function testGetId() {
$this->assertEquals('default', $this->defaultTheme->getId());
$this->assertEquals('default', $this->theme->getId());
}

public function testGetType() {
$this->assertEquals(ITheme::TYPE_THEME, $this->defaultTheme->getType());
$this->assertEquals(ITheme::TYPE_THEME, $this->theme->getType());
}

public function testGetTitle() {
$this->assertEquals('System default theme', $this->defaultTheme->getTitle());
$this->assertEquals('System default theme', $this->theme->getTitle());
}

public function testGetEnableLabel() {
$this->assertEquals('Enable the system default', $this->defaultTheme->getEnableLabel());
$this->assertEquals('Enable the system default', $this->theme->getEnableLabel());
}

public function testGetDescription() {
$this->assertEquals('Using the default system appearance.', $this->defaultTheme->getDescription());
$this->assertEquals('Using the default system appearance.', $this->theme->getDescription());
}

public function testGetMediaQuery() {
$this->assertEquals('', $this->defaultTheme->getMediaQuery());
$this->assertEquals('', $this->theme->getMediaQuery());
}

public function testGetCustomCss() {
$this->assertEquals('', $this->defaultTheme->getCustomCss());
$this->assertEquals('', $this->theme->getCustomCss());
}

/**
Expand All @@ -151,7 +148,7 @@ public function testGetCustomCss() {
public function testThemindDisabledFallbackCss() {
// Generate variables
$variables = '';
foreach ($this->defaultTheme->getCSSVariables() as $variable => $value) {
foreach ($this->theme->getCSSVariables() as $variable => $value) {
$variables .= " $variable: $value;" . PHP_EOL;
};

Expand Down

0 comments on commit 96b10b4

Please sign in to comment.