From 00b2afb2224f1319af367539c9db8bc484c1f8bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 27 Mar 2019 16:03:31 +0100 Subject: [PATCH 1/3] Darken element color and add exception for primary buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- apps/theming/css/theming.scss | 22 ++++++++++++++++++++++ apps/theming/lib/Util.php | 2 +- core/img/actions/checkbox-mixed-dark.svg | 1 + 3 files changed, 24 insertions(+), 1 deletion(-) create mode 100644 core/img/actions/checkbox-mixed-dark.svg diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss index 7db64924f3..ae0e7ad2f8 100644 --- a/apps/theming/css/theming.scss +++ b/apps/theming/css/theming.scss @@ -203,6 +203,28 @@ input.primary, } } +/** Handle primary buttons for bright colors */ +@if (luma($color-primary) > 0.8) { + select, + button, .button, + input:not([type='range']), + textarea, + div[contenteditable=true], + .pager li a { + &.primary:not(:disabled) { + background-color: var(--color-background-dark); + color: var(--color-main-text); + border: 1px solid var(--color-background-darker); + + &:hover, &:focus, &:active { + background-color: var(--color-background-darker); + color: var(--color-main-text); + } + } + } + +} + @if ($color-primary == #ffffff) { /* show grey border below header */ #body-user #header, diff --git a/apps/theming/lib/Util.php b/apps/theming/lib/Util.php index 38b876f361..75abea142c 100644 --- a/apps/theming/lib/Util.php +++ b/apps/theming/lib/Util.php @@ -79,7 +79,7 @@ class Util { public function elementColor($color) { $l = $this->calculateLuminance($color); if($l>0.8) { - return '#dddddd'; + return '#aaaaaa'; } return $color; } diff --git a/core/img/actions/checkbox-mixed-dark.svg b/core/img/actions/checkbox-mixed-dark.svg new file mode 100644 index 0000000000..2f3fd3fa82 --- /dev/null +++ b/core/img/actions/checkbox-mixed-dark.svg @@ -0,0 +1 @@ + From f1f113c5232f6c191a431140624b0fe4e44770ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 27 Mar 2019 16:03:56 +0100 Subject: [PATCH 2/3] Fix checkbox styling with dark theme MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- apps/accessibility/css/themedark.scss | 12 ++++++++++++ core/img/actions/checkbox-mark-dark.svg | 1 + core/img/actions/checkbox-mixed-dark.svg | 2 +- 3 files changed, 14 insertions(+), 1 deletion(-) create mode 100644 core/img/actions/checkbox-mark-dark.svg diff --git a/apps/accessibility/css/themedark.scss b/apps/accessibility/css/themedark.scss index 84f3d99c59..185b921fe6 100644 --- a/apps/accessibility/css/themedark.scss +++ b/apps/accessibility/css/themedark.scss @@ -74,3 +74,15 @@ $color-border-dark: lighten($color-main-background, 14%); filter: invert(100%); } } + +input[type=checkbox] { + &.checkbox { + &:checked + label:before { + background-image: url('../../../core/img/actions/checkbox-mark-dark.svg'); + } + + &:indeterminate + label:before { + background-image: url('../../../core/img/actions/checkbox-mixed-dark.svg'); + } + } +} diff --git a/core/img/actions/checkbox-mark-dark.svg b/core/img/actions/checkbox-mark-dark.svg new file mode 100644 index 0000000000..dbd016163c --- /dev/null +++ b/core/img/actions/checkbox-mark-dark.svg @@ -0,0 +1 @@ + diff --git a/core/img/actions/checkbox-mixed-dark.svg b/core/img/actions/checkbox-mixed-dark.svg index 2f3fd3fa82..22da18e04c 100644 --- a/core/img/actions/checkbox-mixed-dark.svg +++ b/core/img/actions/checkbox-mixed-dark.svg @@ -1 +1 @@ - + From 798b2e87b9bd49843c6929da93066fab111f1498 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julius=20H=C3=A4rtl?= Date: Wed, 27 Mar 2019 16:11:57 +0100 Subject: [PATCH 3/3] Fix light primary button styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Julius Härtl --- apps/theming/css/theming.scss | 7 ++----- apps/theming/tests/CapabilitiesTest.php | 2 +- apps/theming/tests/UtilTest.php | 2 +- 3 files changed, 4 insertions(+), 7 deletions(-) diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss index ae0e7ad2f8..928c54bc10 100644 --- a/apps/theming/css/theming.scss +++ b/apps/theming/css/theming.scss @@ -84,10 +84,6 @@ $invert: luma($color-primary) > 0.6; @include icon-color('checkbox-mark', 'actions', $color-white, 1, true); } } - /* Always give primary button a border for light primary colors */ - .primary { - border-color: $color-border !important; - } } @else { #appmenu:not(.inverted) svg { filter: none; @@ -214,11 +210,12 @@ input.primary, &.primary:not(:disabled) { background-color: var(--color-background-dark); color: var(--color-main-text); - border: 1px solid var(--color-background-darker); + border-color: var(--color-text-lighter); &:hover, &:focus, &:active { background-color: var(--color-background-darker); color: var(--color-main-text); + border-color: var(--color-text); } } } diff --git a/apps/theming/tests/CapabilitiesTest.php b/apps/theming/tests/CapabilitiesTest.php index 775b588c78..332d755655 100644 --- a/apps/theming/tests/CapabilitiesTest.php +++ b/apps/theming/tests/CapabilitiesTest.php @@ -74,7 +74,7 @@ class CapabilitiesTest extends TestCase { 'slogan' => 'slogan', 'color' => '#FFFFFF', 'color-text' => '#000000', - 'color-element' => '#dddddd', + 'color-element' => '#aaaaaa', 'logo' => 'http://absolute/logo', 'background' => 'http://absolute/background', 'background-plain' => false, diff --git a/apps/theming/tests/UtilTest.php b/apps/theming/tests/UtilTest.php index d0263e1122..a36c733068 100644 --- a/apps/theming/tests/UtilTest.php +++ b/apps/theming/tests/UtilTest.php @@ -105,7 +105,7 @@ class UtilTest extends TestCase { public function testElementColorOnBrightBackground() { $elementColor = $this->util->elementColor('#ffffff'); - $this->assertEquals('#dddddd', $elementColor); + $this->assertEquals('#aaaaaa', $elementColor); } public function testGenerateRadioButtonWhite() {