diff --git a/css/files.scss b/css/files.scss
index bec6051f9c..6358bb4adf 100644
--- a/css/files.scss
+++ b/css/files.scss
@@ -44,7 +44,7 @@
 		padding: 3px;
 		border-left: 3px solid transparent;
 		&.active {
-			border-left: 3px solid var(--color-primary);
+			border-left: 3px solid var(--color-primary-element);
 		}
 
 		.label {
@@ -115,7 +115,7 @@
 }
 
 #versionsTabView li.active {
-	border-left: 3px solid var(--color-primary, #000);
+	border-left: 3px solid var(--color-primary-element, #000);
 	padding-left: 12px;
 }
 
diff --git a/src/helpers/coolParameters.js b/src/helpers/coolParameters.js
index b06d6ad59b..f8fdba8a5d 100644
--- a/src/helpers/coolParameters.js
+++ b/src/helpers/coolParameters.js
@@ -53,10 +53,9 @@ const getCollaboraTheme = () => {
 const generateCSSVarTokens = () => {
 	/* NC versus COOL */
 	const cssVarMap = {
-		'--color-primary-text': '--co-primary-text',
+		'--color-primary-element-text': '--co-primary-text',
 		'--color-primary-element': '--co-primary-element:--co-text-accent',
-		'--color-primary-light': '--co-primary-light',
-		'--color-primary-element-light': '--co-primary-element-light',
+		'--color-primary-element-light': '--co-primary-light:--co-primary-element-light',
 		'--color-error': '--co-color-error',
 		'--color-warning': '--co-color-warning',
 		'--color-success': '--co-color-success',