Merge pull request #17098 from nextcloud/fix/css/variables-color-primary-light

Create color-primary-light variable

apps/theming/css/theming.scss

@@ -31,6 +31,9 @@ $invert: luma($color-primary) > 0.6;
 }
 
 @if ($invert) {
+	// too bright, use dark text to mix the primary
+	$color-primary-light: mix($color-primary, $color-main-text, 10%);
+
 	#appmenu:not(.inverted) svg {
 		filter: invert(1);
 	}

core/css/css-variables.scss

@@ -11,6 +11,7 @@
 	--color-background-darker: $color-background-darker;
 
 	--color-primary: $color-primary;
+	--color-primary-light: $color-primary-light;
 	--color-primary-text: $color-primary-text;
 	--color-primary-text-dark: $color-primary-text-dark;
 	--color-primary-element: $color-primary-element;

core/css/variables.scss

@@ -40,6 +40,7 @@ $color-background-dark: nc-darken($color-main-background, 7%) !default;
 $color-background-darker: nc-darken($color-main-background, 14%) !default;
 
 $color-primary: #0082c9 !default;
+$color-primary-light: mix($color-primary, $color-main-background, 10%) !default;
 $color-primary-text: #ffffff !default;
 // do not use nc-darken/lighten in case of overriding because
 // primary-text is independent of color-main-text