mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #7705 from nextcloud/theming-calc-adjust 

Adjust theming color calculations using sRGB luma
This commit is contained in:
Morris Jobke 2018-01-09 23:04:30 +01:00 committed by GitHub
parent 167f4624ce 9bb0299c98
commit 8257689e35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 61 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/theming/css/theming.scss
View File

@ -1,3 +1,12 @@
/** Calculate luma as it is also used in OCA\Theming\Util::calculateLuma */
@function luma($c) {
$-local-red: red(rgba($c, 1.0));
$-local-green: green(rgba($c, 1.0));
$-local-blue: blue(rgba($c, 1.0));
@return (0.2126 * $-local-red + 0.7152 * $-local-green + 0.0722 * $-local-blue) / 255;
}
.nc-theming-main-background {
background-color: $color-primary;
}
@ -10,7 +19,11 @@
color: $color-primary-text;
}
@if (lightness($color-primary) > 55) {
@if (luma($color-primary) > 0.6) {
#appmenu img,
#appmenu image {
filter: invert(1);
}
.searchbox input[type="search"] {
background: transparent url('../../../core/img/actions/search.svg') no-repeat 6px center;
}
@ -53,6 +66,11 @@
background-color: nc-darken($color-primary-element, 30%) !important;
}
}
} @else {
#appmenu img,
#appmenu image {
filter: none;
}
}
/* Colorized svg images */
@ -90,8 +108,8 @@ input.primary,
color: $color-primary-text;
}
@if (lightness($color-primary) > 50) {
#body-login #submit-icon.icon-confirm-white {
@if (luma($color-primary) > 0.6) {
#body-login #submit-wrapper .icon-confirm-white {
background-image: url('../../../core/img/actions/confirm.svg');
}
}

35
apps/theming/lib/Util.php
View File

@ -63,8 +63,8 @@ class Util {
* @return bool
*/
public function invertTextColor($color) {
$l = $this->calculateLuminance($color);
if($l>0.55) {
$l = $this->calculateLuma($color);
if($l>0.6) {
return true;
} else {
return false;
@ -90,6 +90,26 @@ class Util {
* @return float
*/
public function calculateLuminance($color) {
list($red, $green, $blue) = $this->hexToRGB($color);
$compiler = new Compiler();
$hsl = $compiler->toHSL($red, $green, $blue);
return $hsl[3]/100;
}
/**
* @param string $color rgb color value
* @return float
*/
public function calculateLuma($color) {
list($red, $green, $blue) = $this->hexToRGB($color);
return (0.2126 * $red + 0.7152 * $green + 0.0722 * $blue) / 255;
}
/**
* @param string $color rgb color value
* @return int[]
*/
public function hexToRGB($color) {
$hex = preg_replace("/[^0-9A-Fa-f]/", '', $color);
if (strlen($hex) === 3) {
$hex = $hex{0} . $hex{0} . $hex{1} . $hex{1} . $hex{2} . $hex{2};
@ -97,12 +117,11 @@ class Util {
if (strlen($hex) !== 6) {
return 0;
}
$red = hexdec(substr($hex, 0, 2));
$green = hexdec(substr($hex, 2, 2));
$blue = hexdec(substr($hex, 4, 2));
$compiler = new Compiler();
$hsl = $compiler->toHSL($red, $green, $blue);
return $hsl[3]/100;
return [
hexdec(substr($hex, 0, 2)),
hexdec(substr($hex, 2, 2)),
hexdec(substr($hex, 4, 2))
];
}
/**

20
apps/theming/tests/UtilTest.php
View File

@ -53,14 +53,20 @@ class UtilTest extends TestCase {
$this->util = new Util($this->config, $this->appManager, $this->appData);
}
public function testInvertTextColorLight() {
$invert = $this->util->invertTextColor('#ffffff');
$this->assertEquals(true, $invert);
public function dataInvertTextColor() {
return [
['#ffffff', true],
['#000000', false],
['#0082C9', false],
['#ffff00', true],
];
}
public function testInvertTextColorDark() {
$invert = $this->util->invertTextColor('#000000');
$this->assertEquals(false, $invert);
/**
* @dataProvider dataInvertTextColor
*/
public function testInvertTextColor($color, $expected) {
$invert = $this->util->invertTextColor($color);
$this->assertEquals($expected, $invert);
}
public function testCalculateLuminanceLight() {