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

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

2 files changed, 18 insertions, 6 deletions

diff --git a/apps/theming/lib/Themes/CommonThemeTrait.php b/apps/theming/lib/Themes/CommonThemeTrait.php
index e7c556e10e0..3a14382d3c0 100644
--- 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 c9f1a8e4ef5..fd80a45e387 100644
--- 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;
 		}
 	}
 }