fix(theming): remove unnecessary `color-primary-element-default-hover` variable

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 e7c556e10e007dd43b97e21fa8ac69e8db2cd415..3a14382d3c0210bb6f77253995b1fafda6c82a73 100644 (file)
--- a/apps/theming/lib/Themes/CommonThemeTrait.php
+++ b/apps/theming/lib/Themes/CommonThemeTrait.php
@@ -41,7 +41,6 @@ trait CommonThemeTrait {
                $isBrightColor = $this->util->isBrightColor($colorMainBackground);
                $colorPrimaryElement = $this->util->elementColor($this->primaryColor, $isBrightColor);
                $colorPrimaryLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
-               $colorPrimaryElementDefault = $this->util->elementColor($this->defaultPrimaryColor);
                $colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
 
                // primary related colours
@@ -67,15 +66,14 @@ trait CommonThemeTrait {
                        '--color-primary-element' => $colorPrimaryElement,
                        '--color-primary-element-hover' => $this->util->mix($colorPrimaryElement, $colorMainBackground, 60),
                        '--color-primary-element-text' => $this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff',
+
                        // used for hover/focus states
                        '--color-primary-element-light' => $colorPrimaryElementLight,
                        '--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),
+                       // mostly used for disabled states
                        '--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 7),
 
-                       // 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/src/components/admin/ColorPickerField.vue b/apps/theming/src/components/admin/ColorPickerField.vue
index c9f1a8e4ef5a9d5e798586d3bd6bea60f46a4055..fd80a45e3870cdc3897e0545a4291092ee75654e 100644 (file)
--- a/apps/theming/src/components/admin/ColorPickerField.vue
+++ b/apps/theming/src/components/admin/ColorPickerField.vue
@@ -115,8 +115,22 @@ export default {
                width: 230px !important;
                border-radius: var(--border-radius-large) !important;
                background-color: var(--color-primary-default) !important;
-               &:hover {
-                       background-color: var(--color-primary-element-default-hover) !important;
+
+               // emulated hover state because it would not make sense
+               // to create a dedicated global variable for the color-primary-default
+               &:hover::after {
+                       background-color: white;
+                       content: "";
+                       position: absolute;
+                       width: 100%;
+                       height: 100%;
+                       opacity: .2;
+                       filter: var(--primary-invert-if-bright);
+               }
+
+               // Above the ::after
+               &::v-deep * {
+                       z-index: 1;
                }
        }
 }