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

Adjust theming color calculations using sRGB luma 

based on https://robots.thoughtbot.com/closer-look-color-lightness

Signed-off-by: Julius Härtl <jus@bitgrid.net>
This commit is contained in:
Julius Härtl 2018-01-04 17:35:56 +01:00
parent ecf8850464
commit e4f9c75a05
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
2 changed files with 39 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
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 { .nc-theming-main-background {
background-color: $color-primary; background-color: $color-primary;
} }
@ -10,7 +19,7 @@
color: $color-primary-text; color: $color-primary-text;
} }
@if (lightness($color-primary) > 55) { @if (luma($color-primary) > 0.6) {
.searchbox input[type="search"] { .searchbox input[type="search"] {
background: transparent url('../../../core/img/actions/search.svg') no-repeat 6px center; background: transparent url('../../../core/img/actions/search.svg') no-repeat 6px center;
} }
@ -90,8 +99,8 @@ input.primary,
color: $color-primary-text; color: $color-primary-text;
} }
@if (lightness($color-primary) > 50) { @if (luma($color-primary) > 0.6) {
#body-login #submit-icon.icon-confirm-white { #body-login #submit-wrapper .icon-confirm-white {
background-image: url('../../../core/img/actions/confirm.svg'); background-image: url('../../../core/img/actions/confirm.svg');
} }
} }

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

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