fix(theming): replace `color-primary-text-dark` with `color-primary-element-text-dark`

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

apps/theming/css/default.css

@@ -63,7 +63,7 @@
   --color-primary-light: #e5f0f5;
   --color-primary-light-text: #002a41;
   --color-primary-light-hover: #dbe5ea;
-  --color-primary-text-dark: #ededed;
+  --color-primary-element-text-dark: #ededed;
   --color-primary-element: #006aa3;
   --color-primary-element-default-hover: #329bd3;
   --color-primary-element-text: #ffffff;

apps/theming/lib/Themes/CommonThemeTrait.php

@@ -39,8 +39,8 @@ trait CommonThemeTrait {
 	 */
 	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, $isBrightColor);
+		$colorPrimaryLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
 		$colorPrimaryElementDefault = $this->util->elementColor($this->defaultPrimaryColor);
 		$colorPrimaryElementLight = $this->util->mix($colorPrimaryElement, $colorMainBackground, -80);
 
@@ -62,16 +62,16 @@ trait CommonThemeTrait {
 			'--color-primary-light' => $colorPrimaryLight,
 			'--color-primary-light-text' => $this->util->mix($this->primaryColor, $this->util->invertTextColor($colorPrimaryLight) ? '#000000' : '#ffffff', -20),
 			'--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' => $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),
-			'--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),

core/css/inputs.scss

@@ -128,13 +128,13 @@ button:not(
 				box-shadow: 0 0 0 2px var(--color-main-text);
 			}
 			&:active {
-				color: var(--color-primary-text-dark);
+				color: var(--color-primary-element-text-dark);
 			}
 		}
 		&:disabled {
 			// opacity is already defined to .5 if disabled
 			background-color: var(--color-primary-element);
-			color: var(--color-primary-text-dark);
+			color: var(--color-primary-element-text-dark);
 			cursor: default;
 		}
 	}

core/css/styles.scss

@@ -154,7 +154,7 @@ body {
 		color: var(--color-primary-text);
 		border-bottom: 2px dotted var(--color-main-background);
 		&:hover, &:focus {
-			color: var(--color-primary-text-dark);
+			color: var(--color-primary-element-text-dark);
 		}
 	}
 }

core/css/variables.scss

@@ -52,7 +52,7 @@ $color-primary-light-hover: mix($color-primary-light, $color-main-text, 95%) !de
 $color-primary-text: #ffffff !default;
 // do not use nc-darken/lighten in case of overriding because
 // primary-text is independent of color-main-text
-$color-primary-text-dark: darken($color-primary-text, 7%) !default;
+$color-primary-element-text-dark: darken($color-primary-text, 7%) !default;
 $color-primary-element: $color-primary !default;
 $color-primary-element-hover: mix($color-primary-element, $color-main-background, 80%) !default;
 $color-primary-element-light: lighten($color-primary-element, 15%) !default;