upstream/nextcloud
1
0
Fork 0
mirror of https://github.com/nextcloud/server.git synced 2026-05-28 04:32:30 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 54

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

Browse source 
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
This commit is contained in:
Ferdinand Thiessen 2023-12-15 16:14:37 +01:00
parent 61f401da57
commit 84123b3910
No known key found for this signature in database
GPG key ID: 45FAE7268762B400
3 changed files with 15 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
apps/theming/css/default.css
View file

@ -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;

7
apps/theming/lib/Themes/CommonThemeTrait.php
View file

@ -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,

12
apps/theming/tests/Themes/AccessibleThemeTestCase.php
View file

@ -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();