Use the color-primary-element* variables

Signed-off-by: Simon L <szaimen@e.mail.de>

css/mail.scss

@@ -349,7 +349,7 @@
 				&,
 				> a {
 					opacity: 1;
-					box-shadow: inset 2px 0 var(--color-primary);
+					box-shadow: inset 2px 0 var(--color-primary-element);
 				}
 			}
 

src/components/AppSettingsMenu.vue

@@ -277,7 +277,7 @@ p.app-settings {
 	margin-top: 6px;
 }
 .app-settings-button.button.primary.new-button {
-	color: var(--color-primary-text);
+	color: var(--color-primary-element-text);
 	//this style will be removed after we migrate also the  'add mail account' to material design
 	padding-left: 34px;
 	gap: 4px;

src/components/MailboxInlinePicker.vue

@@ -90,7 +90,7 @@ input.vue-treeselect__input {
 	background: var(--color-main-background);
 }
 .vue-treeselect--single .vue-treeselect__option--selected {
-	background: var(--color-primary-light);
+	background: var(--color-primary-element-light);
 	border-radius: var(--border-radius-large);
 }
 .vue-treeselect__option.vue-treeselect__option--highlight,

src/components/ThreadEnvelope.vue

@@ -719,7 +719,7 @@ export default {
 			display: none;
 
 			&.primary {
-				background-color: var(--color-primary);
+				background-color: var(--color-primary-element);
 				opacity: 1;
 				margin-bottom: 0;