Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjust theming color calculations using sRGB luma #7705

Merged
merged 3 commits into from
Jan 9, 2018
Merged

Adjust theming color calculations using sRGB luma #7705

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e4f9c75
Adjust theming color calculations using sRGB luma
juliusknorr Jan 4, 2018
9b668d0
Fix preview when theming changes invertion of icons
juliusknorr Jan 4, 2018
9bb0299
Add colors to tests
juliusknorr Jan 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 21 additions & 3 deletions apps/theming/css/theming.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
Expand All @@ -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;
}
Expand Down Expand Up @@ -53,6 +66,11 @@
background-color: nc-darken($color-primary-element, 30%) !important;
}
}
} @else {
#appmenu img,
#appmenu image {
filter: none;
}
}

/* Colorized svg images */
Expand Down Expand Up @@ -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');
}
}
Expand Down
35 changes: 27 additions & 8 deletions apps/theming/lib/Util.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,8 +63,8 @@ public function __construct(IConfig $config, IAppManager $appManager, IAppData $
* @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;
Expand All @@ -90,19 +90,38 @@ public function elementColor($color) {
* @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};
}
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))
];
}

/**
Expand Down
20 changes: 13 additions & 7 deletions apps/theming/tests/UtilTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,14 +53,20 @@ protected function setUp() {
$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() {
Expand Down