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..724fc1131c 100644
--- a/src/components/NcActionTextEditable/NcActionTextEditable.vue
+++ b/src/components/NcActionTextEditable/NcActionTextEditable.vue
@@ -323,8 +323,8 @@ $input-margin: 4px;
 				&:active,
 				&:hover,
 				&:focus {
-					background-color: var(--color-primary-element);
-					color: var(--color-primary-text);
+					background-color: var(--color-primary-element-light);
+					color: var(--color-primary-element-light-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/NcAppNavigationCaption/NcAppNavigationCaption.vue b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
index ff0927ace2..d198ea1457 100644
--- a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
+++ b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
@@ -136,7 +136,7 @@ export default {
 
 	&__title {
 		font-weight: bold;
-		color: var(--color-primary-element);
+		color: var(--color-main-text);
 		font-size: var(--default-font-size);
 		line-height: $clickable-area;
 		white-space: nowrap;
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/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue b/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
index 445f4d7466..0f834270d7 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
@@ -83,12 +83,12 @@ export default {
 	color: var(--color-main-text);
 
 	&:hover{
-		color: var(--color-primary);
+		color: var(--color-primary-element-text-dark);
 	}
 	&--open {
 		color: var(--color-main-text);
 		&:hover{
-			color: var(--color-primary);
+			color: var(--color-primary-element-text-dark);
 		}
 	}
 }
diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
index 73ca440b54..3d3176ad45 100644
--- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
+++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
@@ -748,7 +748,7 @@ export default {
 	// When .active class is applied, change color background of link and utils. The
 	// !important prevents the focus state to override the active state.
 	&.active {
-		background-color: var(--color-primary-light) !important;
+		background-color: var(--color-primary-element-light) !important;
 	}
 	&:focus-within,
 	&:hover {
@@ -938,7 +938,7 @@ export default {
 [data-themes*='highcontrast'] {
 	.app-navigation-entry {
 		&:active {
-			background-color: var(--color-primary-light-hover) !important;
+			background-color: var(--color-primary-element-light) !important;
 		}
 	}
 }
diff --git a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
index ea1140fbe1..9bf0a2669e 100644
--- a/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
+++ b/src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
@@ -435,7 +435,7 @@ export default {
 			background-color: var(--color-background-hover);
 		}
 		&--active {
-			background-color: var(--color-primary-light) !important;
+			background-color: var(--color-primary-element-light) !important;
 		}
 	}
 }
diff --git a/src/components/NcAppSidebar/NcAppSidebarTabs.vue b/src/components/NcAppSidebar/NcAppSidebarTabs.vue
index b540881f17..a1129be07b 100644
--- a/src/components/NcAppSidebar/NcAppSidebarTabs.vue
+++ b/src/components/NcAppSidebar/NcAppSidebarTabs.vue
@@ -272,7 +272,7 @@ export default {
 	&__tab {
 		flex: 1 1;
 		&.active {
-			color: var(--color-primary);
+			color: var(--color-primary-element-text-dark);
 		}
 
 		&-caption {
diff --git a/src/components/NcAppSidebarTab/NcAppSidebarTab.vue b/src/components/NcAppSidebarTab/NcAppSidebarTab.vue
index 72bfa0ac1c..864a8909ae 100644
--- a/src/components/NcAppSidebarTab/NcAppSidebarTab.vue
+++ b/src/components/NcAppSidebarTab/NcAppSidebarTab.vue
@@ -147,8 +147,8 @@ export default {
 	overflow: auto;
 
 	&:focus {
-		border-color: var(--color-primary);
-		box-shadow: 0 0 0.2em var(--color-primary);
+		border-color: var(--color-primary-element-light);
+		box-shadow: 0 0 0.2em var(--color-primary-element-light);
 		outline: 0;
 	}
 
diff --git a/src/components/NcAvatar/NcAvatar.vue b/src/components/NcAvatar/NcAvatar.vue
index 07d4213969..69a844131b 100644
--- a/src/components/NcAvatar/NcAvatar.vue
+++ b/src/components/NcAvatar/NcAvatar.vue
@@ -786,8 +786,8 @@ export default {
 			background-color: var(--color-background-hover);
 		}
 		.acli.active & {
-			border-color: var(--color-primary-light);
-			background-color: var(--color-primary-light);
+			border-color: var(--color-primary-element-light);
+			background-color: var(--color-primary-element-light);
 		}
 
 		&--online{
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..6104d3cec5 100644
--- a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
+++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
@@ -533,7 +533,7 @@ $spacing: 4px;
 		margin-right: $spacing;
 		// Remove the left margin of material design icons to align text
 		margin-left: -2px;
-		color: var(--color-primary-element);
+		color: var(--color-primary-element-text);
 		width: var(--icon-size);
 		height: var(--icon-size);
 	}
@@ -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
@@ -562,7 +562,7 @@ $spacing: 4px;
 
 	// If switch is checked AND disabled, use the fade primary colour
 	&-switch.checkbox-radio-switch--disabled.checkbox-radio-switch--checked &__icon > * {
-		color: var(--color-primary-element-light);
+		color: var(--color-primary-element-text);
 	}
 
 	$border-radius: calc(var(--default-clickable-area) / 2);
@@ -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/NcCounterBubble/NcCounterBubble.vue b/src/components/NcCounterBubble/NcCounterBubble.vue
index 550d33d764..d1984affc2 100644
--- a/src/components/NcCounterBubble/NcCounterBubble.vue
+++ b/src/components/NcCounterBubble/NcCounterBubble.vue
@@ -89,15 +89,15 @@ export default {
 	border-radius: var(--border-radius-pill);
 	background-color: var(--color-primary-element-light);
 	font-weight: bold;
-	color: var(--color-primary-element);
+	color: var(--color-primary-element-light-text);
 
 	&--highlighted {
-		color: var(--color-primary-text);
-		background-color: var(--color-primary);
+		color: var(--color-primary-element-text);
+		background-color: var(--color-primary-element);
 	}
 
 	&--outlined {
-		color: var(--color-primary);
+		color: var(--color-primary-element-light-text);
 		background: transparent;
 		box-shadow: inset 0 0 0 2px;
 	}
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/NcEmojiPicker/NcEmojiPicker.vue b/src/components/NcEmojiPicker/NcEmojiPicker.vue
index b7d5e714b1..a395e8f9a0 100644
--- a/src/components/NcEmojiPicker/NcEmojiPicker.vue
+++ b/src/components/NcEmojiPicker/NcEmojiPicker.vue
@@ -98,7 +98,7 @@ This component allows the user to pick an emoji.
 		</template>
 		<Picker ref="picker"
 			:auto-focus="false /* We manage the input focus ourselves */"
-			color="var(--color-primary)"
+			color="var(--color-primary-element)"
 			:data="emojiIndex"
 			:emoji="previewFallbackEmoji"
 			:i18n="i18n"
@@ -331,7 +331,7 @@ export default {
 	}
 
 	.emoji-mart-search input:focus-visible {
-		box-shadow: inset 0 0 0 2px var(--color-primary);
+		box-shadow: inset 0 0 0 2px var(--color-primary-element);
 		outline: none;
 	}
 
@@ -348,7 +348,7 @@ export default {
 			padding: 12px 4px;
 			height: auto;
 			&:focus-visible {
-				/* box-shadow: inset 0 0 0 2px var(--color-primary); */
+				/* box-shadow: inset 0 0 0 2px var(--color-primary-element-light); */
 				outline: 2px solid var(--color-primary-element);
 			}
 		}
diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
index 4175c5c7ef..ebb9d63a06 100644
--- a/src/components/NcListItem/NcListItem.vue
+++ b/src/components/NcListItem/NcListItem.vue
@@ -601,7 +601,7 @@ export default {
 	&:active,
 	&.active {
 		.list-item {
-			background-color: var(--color-primary-light);
+			background-color: var(--color-primary-element-light);
 		}
 	}
 }
@@ -677,7 +677,7 @@ export default {
 		&:active,
 		&.active {
 			.list-item {
-				background-color: var(--color-primary-light-hover);
+				background-color: var(--color-primary-element-light);
 			}
 		}
 	}
diff --git a/src/components/NcMultiselect/index.scss b/src/components/NcMultiselect/index.scss
index f2e8a3f581..f225ceb8ef 100644
--- a/src/components/NcMultiselect/index.scss
+++ b/src/components/NcMultiselect/index.scss
@@ -57,7 +57,7 @@
 		box-sizing: border-box;
 
 		&:focus, &:hover {
-			border-color: var(--color-primary);
+			border-color: var(--color-primary-element-light);
 		}
 
 		/* tag wrapper */
diff --git a/src/components/NcPopoverMenu/NcPopoverMenuItem.vue b/src/components/NcPopoverMenu/NcPopoverMenuItem.vue
index 0a54fbebc0..c04ec4fa0f 100644
--- a/src/components/NcPopoverMenu/NcPopoverMenuItem.vue
+++ b/src/components/NcPopoverMenu/NcPopoverMenuItem.vue
@@ -197,7 +197,7 @@ export default {
 	}
 
 	.menuitem.active {
-		border-left: 4px solid var(--color-primary);
+		border-left: 4px solid var(--color-primary-element-light);
 		border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0 !important;
 	}
 </style>
diff --git a/src/components/NcRichContenteditable/NcAutoCompleteResult.vue b/src/components/NcRichContenteditable/NcAutoCompleteResult.vue
index 1bb9caaabf..8cc015c967 100644
--- a/src/components/NcRichContenteditable/NcAutoCompleteResult.vue
+++ b/src/components/NcRichContenteditable/NcAutoCompleteResult.vue
@@ -115,8 +115,8 @@ $autocomplete-padding: 10px;
 	padding: $autocomplete-padding;
 
 	.highlight & {
-		color: var(--color-main-text);
-		background: var(--color-primary-light);
+		color: var(--color-primary-element-light-text);
+		background: var(--color-primary-element-light);
 		&, * {
 			cursor: pointer;
 		}
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/NcRichContenteditable/NcRichContenteditable.vue b/src/components/NcRichContenteditable/NcRichContenteditable.vue
index 86f2213e05..beb43a5116 100644
--- a/src/components/NcRichContenteditable/NcRichContenteditable.vue
+++ b/src/components/NcRichContenteditable/NcRichContenteditable.vue
@@ -792,8 +792,8 @@ export default {
 
 	.highlight {
 		opacity: 1;
-		color: var(--color-main-text);
-		background: var(--color-primary-light);
+		color: var(--color-primary-element-light-text);
+		background: var(--color-primary-element-light);
 		&, * {
 			cursor: pointer;
 		}
diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
index 22fcb83d5f..e76c1d3490 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-hover);
 	}
 
 	&--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);
 		}