Merge pull request #33641 from nextcloud/bugfix/noid/primary-element-vars

apps/settings/css/settings.css

@@ -223,7 +223,7 @@ select#timezone, select#languageinput, select#localeinput {
   text-decoration: underline;
 }
 .development-notice a:not(.link-button):hover {
-  background-color: var(--color-primary-element-lighter);
+  background-color: var(--color-primary-element-hover);
 }
 
 .link-button {

apps/settings/css/settings.scss

@@ -190,7 +190,7 @@ select {
 	a:not(.link-button) {
 		text-decoration: underline;
 		&:hover {
-			background-color: var(--color-primary-element-lighter);
+			background-color: var(--color-primary-element-hover);
 		}
 	}
 }

apps/theming/css/default.css

@@ -18,10 +18,13 @@
   --color-primary-light-hover: #dbe7ee;
   --color-primary-text-dark: #ededed;
   --color-primary-element: #0082c9;
-  --color-primary-element-hover: #198ece;
-  --color-primary-element-light: #17adff;
-  --color-primary-element-lighter: #d8ecf6;
-  --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%);
+  --color-primary-element-text: #ffffff;
+  --color-primary-element-hover: #329bd3;
+  --color-primary-element-light: #e5f2f9;
+  --color-primary-element-light-text: #0082c9;
+  --color-primary-element-light-hover: #dbe7ee;
+  --color-primary-element-text-dark: #ededed;
+  --gradient-primary-background: linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);
   --color-main-text: #222222;
   --color-text-maxcontrast: #767676;
   --color-text-light: #222222;

apps/theming/lib/Themes/DefaultTheme.php

@@ -90,6 +90,9 @@ class DefaultTheme implements ITheme {
 		$colorBoxShadowRGB = join(',', $this->util->hexToRGB($colorBoxShadow));
 		$colorPrimaryLight = $this->util->mix($this->primaryColor, $colorMainBackground, -80);
 
+		$colorPrimaryElement = $this->util->elementColor($this->primaryColor);
+		$colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
+
 		$hasCustomLogoHeader = $this->imageManager->hasImage('logo') ||  $this->imageManager->hasImage('logoheader');
 		$hasCustomPrimaryColour = !empty($this->config->getAppValue('theming', 'color'));
 
@@ -120,12 +123,15 @@ class DefaultTheme implements ITheme {
 			'--color-primary-light-hover' => $this->util->mix($colorPrimaryLight, $colorMainText, 90),
 			'--color-primary-text-dark' => $this->util->darken($this->util->invertTextColor($this->primaryColor) ? '#000000' : '#ffffff', 7),
 			// used for buttons, inputs...
-			'--color-primary-element' => $this->util->elementColor($this->primaryColor),
-			'--color-primary-element-hover' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, 80),
-			'--color-primary-element-light' => $this->util->lighten($this->util->elementColor($this->primaryColor), 15),
-			'--color-primary-element-lighter' => $this->util->mix($this->util->elementColor($this->primaryColor), $colorMainBackground, -70),
+			'--color-primary-element' => $colorPrimaryElement,
+			'--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' => $colorPrimaryElement,
+			'--color-primary-element-light-hover' => $this->util->mix($colorPrimaryElementLight, $colorMainText, 90),
+			'--color-primary-element-text-dark' => $this->util->darken($this->util->invertTextColor($colorPrimaryElement) ? '#000000' : '#ffffff', 7),
 			// to use like this: background-image: var(--gradient-primary-background);
-			'--gradient-primary-background' => 'linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-element-light) 100%)',
+			'--gradient-primary-background' => 'linear-gradient(40deg, var(--color-primary) 0%, var(--color-primary-hover) 100%)',
 
 			// max contrast for WCAG compliance
 			'--color-main-text' => $colorMainText,