From c6ebb0d7863e8f218202ac6c6b27783ad6c16448 Mon Sep 17 00:00:00 2001 From: =?utf8?q?John=20Molakvo=C3=A6?= Date: Thu, 4 May 2023 09:26:05 +0200 Subject: [PATCH] fix(theming): calc primary element from current main background MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ --- apps/theming/lib/Themes/CommonThemeTrait.php | 13 ++++++++----- apps/theming/lib/Util.php | 12 +++++++++++- 2 files changed, 19 insertions(+), 6 deletions(-) diff --git a/apps/theming/lib/Themes/CommonThemeTrait.php b/apps/theming/lib/Themes/CommonThemeTrait.php index 17591c232bb..e4afa892089 100644 --- a/apps/theming/lib/Themes/CommonThemeTrait.php +++ b/apps/theming/lib/Themes/CommonThemeTrait.php @@ -38,8 +38,9 @@ trait CommonThemeTrait { * will change in between. */ protected function generatePrimaryVariables(string $colorMainBackground, string $colorMainText): array { + $isBrightColor = $this->util->isBrightColor($colorMainBackground); $colorPrimaryLight = $this->util->mix($this->primaryColor, $colorMainBackground, -80); - $colorPrimaryElement = $this->util->elementColor($this->primaryColor); + $colorPrimaryElement = $this->util->elementColor($this->primaryColor, $isBrightColor); $colorPrimaryElementDefault = $this->util->elementColor($this->defaultPrimaryColor); $colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80); @@ -65,13 +66,15 @@ trait CommonThemeTrait { // used for buttons, inputs... '--color-primary-element' => $colorPrimaryElement, - '--color-primary-element-default-hover' => $this->util->mix($colorPrimaryElementDefault, $colorMainBackground, 60), - '--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', '--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 60), - '--color-primary-element-light' => $colorPrimaryElementLight, - '--color-primary-element-light-text' => $this->util->mix($colorPrimaryElement, $this->util->invertTextColor($colorPrimaryElementLight) ? '#000000' : '#ffffff', -20), '--color-primary-element-light-hover' => $this->util->mix($colorPrimaryElementLight, $colorMainText, 90), + '--color-primary-element-light-text' => $this->util->mix($colorPrimaryElement, $this->util->invertTextColor($colorPrimaryElementLight) ? '#000000' : '#ffffff', -20), + '--color-primary-element-light' => $colorPrimaryElementLight, '--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 7), + '--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', + + // default global primary element hover. To be used with --color-primary-default + '--color-primary-element-default-hover' => $this->util->mix($colorPrimaryElementDefault, $colorMainBackground, 60), // to use like this: background-image: var(--gradient-primary-background); '--gradient-primary-background' => 'linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%)', diff --git a/apps/theming/lib/Util.php b/apps/theming/lib/Util.php index a85dacd3de2..e856802cb05 100644 --- a/apps/theming/lib/Util.php +++ b/apps/theming/lib/Util.php @@ -52,10 +52,20 @@ class Util { } /** + * Should we invert the text on this background color? * @param string $color rgb color value * @return bool */ - public function invertTextColor($color) { + public function invertTextColor(string $color): bool { + return $this->isBrightColor($color); + } + + /** + * Is this color too bright ? + * @param string $color rgb color value + * @return bool + */ + public function isBrightColor(string $color): bool { $l = $this->calculateLuma($color); if ($l > 0.6) { return true; -- 2.39.5