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

…vars
nextcloud · Aug 26, 2022 · efbe972 · efbe972
2 parents f617796 + cc21ea6
commit efbe972
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 11 deletions.
diff --git a/apps/settings/css/settings.css b/apps/settings/css/settings.css
diff --git a/apps/settings/css/settings.scss b/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);
 		}
 	}
 }

diff --git a/apps/theming/css/default.css b/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;

diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
@@ -90,6 +90,9 @@ public function getCSSVariables(): array {
 		$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 @@ public function getCSSVariables(): array {
 			'--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,