diff --git a/src/assets/inputs.scss b/src/assets/inputs.scss
index d331aa80e8..ddf9994c0c 100644
--- a/src/assets/inputs.scss
+++ b/src/assets/inputs.scss
@@ -78,7 +78,7 @@ textarea {
 	/* Primary action button, use sparingly */
 	&.primary {
 		cursor: pointer;
-		color: var(--color-primary-text);
+		color: var(--color-primary-element-text);
 		border-color: var(--color-primary-element);
 		background-color: var(--color-primary-element);
 
@@ -90,13 +90,13 @@ textarea {
 				background-color: var(--color-primary-element-light);
 			}
 			&:active {
-				color: var(--color-primary-text-dark);
+				color: var(--color-primary-element-text-dark);
 			}
 		}
 
 		&:disabled {
 			cursor: default;
-			color: var(--color-primary-text-dark);
+			color: var(--color-primary-element-text-dark);
 			// opacity is already defined to .5 if disabled
 			background-color: var(--color-primary-element);
 		}
diff --git a/src/components/NcActionTextEditable/NcActionTextEditable.vue b/src/components/NcActionTextEditable/NcActionTextEditable.vue
index 0ee7999256..ead32b861e 100644
--- a/src/components/NcActionTextEditable/NcActionTextEditable.vue
+++ b/src/components/NcActionTextEditable/NcActionTextEditable.vue
@@ -324,7 +324,7 @@ $input-margin: 4px;
 				&:hover,
 				&:focus {
 					background-color: var(--color-primary-element);
-					color: var(--color-primary-text);
+					color: var(--color-primary-element-text);
 				}
 			}
 		}
diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
index 9a33923547..af64b7e480 100644
--- a/src/components/NcActions/NcActions.vue
+++ b/src/components/NcActions/NcActions.vue
@@ -1219,7 +1219,7 @@ export default {
 	}
 
 	&.action-item--secondary {
-		--open-background-color: var(--color-primary-light-hover);
+		--open-background-color: var(--color-primary-element-light-hover);
 	}
 
 	&.action-item--error {
diff --git a/src/components/NcAppNavigationCounter/NcAppNavigationCounter.vue b/src/components/NcAppNavigationCounter/NcAppNavigationCounter.vue
index 9ead4324c6..71f1090388 100644
--- a/src/components/NcAppNavigationCounter/NcAppNavigationCounter.vue
+++ b/src/components/NcAppNavigationCounter/NcAppNavigationCounter.vue
@@ -77,8 +77,8 @@ export default {
 
 	&--highlighted {
 		padding: 4px 6px;
-		color: var(--color-primary-text);
-		background-color: var(--color-primary);
+		color: var(--color-primary-element-text);
+		background-color: var(--color-primary-element);
 	}
 }
 
diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue
index edf042d42a..b7e1dfa64e 100644
--- a/src/components/NcButton/NcButton.vue
+++ b/src/components/NcButton/NcButton.vue
@@ -430,10 +430,10 @@ export default {
 	}
 
 	// Default button type
-	color: var(--color-primary-light-text);
-	background-color: var(--color-primary-light);
+	color: var(--color-primary-element-light-text);
+	background-color: var(--color-primary-element-light);
 	&:hover:not(:disabled) {
-		background-color: var(--color-primary-light-hover);
+		background-color: var(--color-primary-element-light-hover);
 	}
 
 	// Back to the default color for this button when active
@@ -506,7 +506,7 @@ export default {
 	// Primary
 	&--vue-primary {
 		background-color: var(--color-primary-element);
-		color: var(--color-primary-text);
+		color: var(--color-primary-element-text);
 		&:hover:not(:disabled) {
 			background-color: var(--color-primary-element-hover);
 		}
@@ -519,11 +519,11 @@ export default {
 
 	// Secondary
 	&--vue-secondary {
-		color: var(--color-primary-light-text);
-		background-color: var(--color-primary-light);
+		color: var(--color-primary-element-light-text);
+		background-color: var(--color-primary-element-light);
 		&:hover:not(:disabled) {
-			color: var(--color-primary-light-text);
-			background-color: var(--color-primary-light-hover);
+			color: var(--color-primary-element-light-text);
+			background-color: var(--color-primary-element-light-hover);
 		}
 	}
 
@@ -548,7 +548,7 @@ export default {
 
 	// Tertiary on primary color (like the header)
 	&--vue-tertiary-on-primary {
-		color: var(--color-primary-text);
+		color: var(--color-primary-element-text);
 		background-color: transparent;
 
 		&:hover:not(:disabled) {
diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
index 7597b70fe6..7049f51bb4 100644
--- a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
+++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -552,7 +552,7 @@ $spacing: 4px;
 
 	&--checked:not(&--disabled):focus-within &__label,
 	&--checked:not(&--disabled) &__label:hover {
-		background-color: var(--color-primary-light-hover);
+		background-color: var(--color-primary-element-light-hover);
 	}
 
 	// Switch specific rules
@@ -654,7 +654,7 @@ $spacing: 4px;
 			font-weight: bold;
 
 			label {
-				background-color: var(--color-primary-light);
+				background-color: var(--color-primary-element-light);
 			}
 		}
 	}
diff --git a/src/components/NcDatetimePicker/index.scss b/src/components/NcDatetimePicker/index.scss
index f7ec08d466..ace73d30e2 100644
--- a/src/components/NcDatetimePicker/index.scss
+++ b/src/components/NcDatetimePicker/index.scss
@@ -75,7 +75,7 @@ $cell_height: 32px;
 	.mx-datepicker-btn-confirm {
 		background-color: var(--color-primary-element);
 		border-color: var(--color-primary-element);
-		color: var(--color-primary-text) !important;
+		color: var(--color-primary-element-text) !important;
 		opacity: 1 !important;
 	}
 
@@ -150,7 +150,7 @@ $cell_height: 32px;
 				font-weight: bold;
 				&:hover,
 				&:focus {
-					color: var(--color-primary-text);
+					color: var(--color-primary-element-text);
 				}
 			}
 			&.in-range,
@@ -177,7 +177,7 @@ $cell_height: 32px;
 			&.active,
 			&.in-range {
 				opacity: $opacity_full;
-				color: var(--color-primary-text);
+				color: var(--color-primary-element-text);
 				background-color: var(--color-primary-element);
 				font-weight: bold;
 			}
@@ -382,7 +382,7 @@ $cell_height: 32px;
 				}
 			}
 			&.mx-active-week {
-				color: var(--color-primary-text);
+				color: var(--color-primary-element-text);
 				background-color: var(--color-primary-element);
 				// Remove cell feedback on selected rows
 				td {
@@ -411,7 +411,7 @@ $cell_height: 32px;
 		.mx-time-item {
 			&.active,
 			&:hover {
-				color: var(--color-primary-text);
+				color: var(--color-primary-element-text);
 				background-color: var(--color-primary-element);
 			}
 
diff --git a/src/components/NcRichContenteditable/NcMentionBubble.vue b/src/components/NcRichContenteditable/NcMentionBubble.vue
index 26391b19c4..1ace14ac03 100644
--- a/src/components/NcRichContenteditable/NcMentionBubble.vue
+++ b/src/components/NcRichContenteditable/NcMentionBubble.vue
@@ -108,7 +108,7 @@ $bubble-avatar-size: $bubble-height - 2 * $bubble-padding;
 
 .mention-bubble {
 	&--primary &__content {
-		color: var(--color-primary-text);
+		color: var(--color-primary-element-text);
 		background-color: var(--color-primary-element);
 	}
 
diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
index 22fcb83d5f..b8f13b2377 100644
--- a/src/components/NcSelect/NcSelect.vue
+++ b/src/components/NcSelect/NcSelect.vue
@@ -983,12 +983,12 @@ body {
 	}
 
 	&.vs--open .vs__dropdown-toggle {
-		border-color: var(--color-primary);
+		border-color: var(--color-primary-element);
 		border-bottom-color: transparent;
 	}
 
 	&:not(.vs--open) .vs__dropdown-toggle:hover {
-		border-color: var(--color-primary);
+		border-color: var(--color-primary-element);
 	}
 
 	&--no-wrap {
@@ -1003,7 +1003,7 @@ body {
 			.vs__dropdown-toggle {
 				border-radius: 0 0 var(--vs-border-radius) var(--vs-border-radius);
 				border-top-color: transparent;
-				border-bottom-color: var(--color-primary);
+				border-bottom-color: var(--color-primary-element);
 			}
 		}
 	}
@@ -1047,7 +1047,7 @@ body {
 }
 
 .vs__dropdown-menu {
-	border-color: var(--color-primary) !important;
+	border-color: var(--color-primary-element) !important;
 	padding: 4px !important;
 
 	&--floating {
diff --git a/src/components/NcUserBubble/NcUserBubble.vue b/src/components/NcUserBubble/NcUserBubble.vue
index 424611ab76..69c10c5d0a 100644
--- a/src/components/NcUserBubble/NcUserBubble.vue
+++ b/src/components/NcUserBubble/NcUserBubble.vue
@@ -303,7 +303,7 @@ export default {
 		background-color: var(--color-background-dark);
 
 		&--primary {
-			color: var(--color-primary-text);
+			color: var(--color-primary-element-text);
 			background-color: var(--color-primary-element);
 		}