Use the primary element color in case it primary color is too bright

Signed-off-by: Joas Schilling <coding@schilljs.com>
Signed-off-by: npmbuildbot[bot] <npmbuildbot[bot]@users.noreply.github.com>

Author: nickvergessen

core/css/apps.scss

@@ -161,7 +161,7 @@ kbd {
 				&,
 				> a {
 					opacity: 1;
-					box-shadow: inset 4px 0 var(--color-primary);
+					box-shadow: inset 4px 0 var(--color-primary-element);
 				}
 			}
 
@@ -217,7 +217,7 @@ kbd {
 					}
 
 					&.active {
-						box-shadow: inset 4px 0 var(--color-primary);
+						box-shadow: inset 4px 0 var(--color-primary-element);
 					}
 
 					/* align loader */
@@ -740,7 +740,7 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 	&.opened {
 		background-color: var(--color-main-background);
 		opacity: 1;
-		box-shadow: inset 4px 0 var(--color-primary);
+		box-shadow: inset 4px 0 var(--color-primary-element);
 	}
 }
 

core/css/header.scss

@@ -143,7 +143,7 @@
 					&:active,
 					&.active {
 						opacity: 1;
-						box-shadow: inset 4px 0 var(--color-primary);
+						box-shadow: inset 4px 0 var(--color-primary-element);
 					}
 					span {
 						display: inline-block;

core/js/dist/main.js

@@ -188,7 +188,7 @@
 			padding: 4px 4px 4px 14px;
 
 			&.ui-state-focus, &.ui-state-active {
-				box-shadow: inset 4px 0 var(--color-primary);
+				box-shadow: inset 4px 0 var(--color-primary-element);
 				color: var(--color-main-text);
 			}
 		}