fix(theming): calc primary element from current main background

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

diff --git a/apps/theming/lib/Themes/CommonThemeTrait.php b/apps/theming/lib/Themes/CommonThemeTrait.php
index 17591c232bb0d41667f2c8ccc71431d57d8d43c1..e4afa892089efdf302063124f6523ee0f8a4be82 100644 (file)
--- 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 a85dacd3de2c2a5d3eab477bd1b6c53fb2ceddb2..e856802cb05e07431e5a58aaa5df5435a5449d97 100644 (file)
--- 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;