Use the color-primary-element* variables

Signed-off-by: Simon L <szaimen@e.mail.de>
Signed-off-by: nextcloud-command <nextcloud-command@users.noreply.github.com>

5 files changed, 19 insertions, 19 deletions

diff --git a/core/src/components/AppMenu.vue b/core/src/components/AppMenu.vue
index 012757e155a..888a106ed05 100644
--- a/core/src/components/AppMenu.vue
+++ b/core/src/components/AppMenu.vue
@@ -161,7 +161,7 @@ $header-icon-size: 20px;
 				width: 12px;
 				height: 5px;
 				border-radius: 3px;
-				background-color: var(--color-primary-text);
+				background-color: var(--color-primary-element-text);
 				left: 50%;
 				bottom: 6px;
 				display: block;
@@ -178,7 +178,7 @@ $header-icon-size: 20px;
 			width: calc(100% - 4px);
 			height: calc(100% - 4px);
 			margin: 2px;
-			color: var(--color-primary-text);
+			color: var(--color-primary-element-text);
 			position: relative;
 		}
 
@@ -194,7 +194,7 @@ $header-icon-size: 20px;
 			opacity: 0;
 			position: absolute;
 			font-size: 12px;
-			color: var(--color-primary-text);
+			color: var(--color-primary-element-text);
 			text-align: center;
 			bottom: -5px;
 			left: 50%;
@@ -253,7 +253,7 @@ $header-icon-size: 20px;
 
 	/* Remove all background and align text color if not expanded */
 	&:not([aria-expanded="true"]) {
-		color: var(--color-primary-text);
+		color: var(--color-primary-element-text);
 
 		&:hover {
 			opacity: 1;
@@ -290,7 +290,7 @@ $header-icon-size: 20px;
 	content: "";
 	width: 8px;
 	height: 8px;
-	background-color: var(--color-primary-text);
+	background-color: var(--color-primary-element-text);
 	border-radius: 50%;
 	position: absolute;
 	display: block;
diff --git a/core/src/components/Profile/PrimaryActionButton.vue b/core/src/components/Profile/PrimaryActionButton.vue
index 7a1f031b60c..dcd28e0c3a1 100644
--- a/core/src/components/Profile/PrimaryActionButton.vue
+++ b/core/src/components/Profile/PrimaryActionButton.vue
@@ -61,7 +61,7 @@ export default {
 	computed: {
 		colorPrimaryText() {
 			// For some reason the returned string has prepended whitespace
-			return getComputedStyle(document.body).getPropertyValue('--color-primary-text').trim()
+			return getComputedStyle(document.body).getPropertyValue('--color-primary-element-text').trim()
 		},
 	},
 }
@@ -77,7 +77,7 @@ export default {
 		line-height: 44px;
 		text-align: center;
 		border-radius: var(--border-radius-pill);
-		color: var(--color-primary-text);
+		color: var(--color-primary-element-text);
 		background-color: var(--color-primary-element);
 		overflow: hidden;
 		white-space: nowrap;
diff --git a/core/src/jquery/css/jquery-ui-fixes.scss b/core/src/jquery/css/jquery-ui-fixes.scss
index cb52ecdb2d7..4c2241d8d5d 100644
--- a/core/src/jquery/css/jquery-ui-fixes.scss
+++ b/core/src/jquery/css/jquery-ui-fixes.scss
@@ -52,7 +52,7 @@
 .ui-state-active,
 .ui-widget-content .ui-state-active,
 .ui-widget-header .ui-state-active {
-	border: 1px solid var(--color-primary);
+	border: 1px solid var(--color-primary-element);
 	background: var(--color-main-background) none;
 	font-weight: bold;
 	color: var(--color-main-text);
@@ -223,9 +223,9 @@
 }
 
 .ui-button.primary {
-	background-color: var(--color-primary);
-	color: var(--color-primary-text);
-	border: 1px solid var(--color-primary-text);
+	background-color: var(--color-primary-element);
+	color: var(--color-primary-element-text);
+	border: 1px solid var(--color-primary-element-text);
 }
 
 // fix ui-buttons on hover
diff --git a/core/src/views/Profile.vue b/core/src/views/Profile.vue
index eda6e428463..84859f4a971 100644
--- a/core/src/views/Profile.vue
+++ b/core/src/views/Profile.vue
@@ -361,9 +361,9 @@ $content-max-width: 640px;
 				border: none;
 				margin-left: 18px;
 				margin-top: 2px;
-				color: var(--color-primary-element);
-				background-color: var(--color-primary-text);
-				box-shadow: 0 0 0 2px var(--color-primary-text);
+				color: var(--color-primary-element-text);
+				background-color: var(--color-primary-element);
+				box-shadow: 0 0 0 2px var(--color-primary-element);
 				border-radius: var(--border-radius-pill);
 				padding: 0 18px;
 				font-size: var(--default-font-size);
@@ -374,7 +374,7 @@ $content-max-width: 640px;
 				&:hover,
 				&:focus,
 				&:active {
-					color: var(--color-primary-element);
+					color: var(--color-primary-element-light-text);
 					background-color: var(--color-primary-element-light);
 				}
 
diff --git a/core/src/views/UserMenu.vue b/core/src/views/UserMenu.vue
index 5112b8a4eae..8602b2faa1d 100644
--- a/core/src/views/UserMenu.vue
+++ b/core/src/views/UserMenu.vue
@@ -85,7 +85,7 @@ export default {
 				opacity: 1 !important;
 				&:focus-visible {
 					.user-menu__avatar {
-						border: 2px solid var(--color-primary-text);
+						border: 2px solid var(--color-primary-element);
 					}
 				}
 			}
@@ -104,7 +104,7 @@ export default {
 		&:active,
 		&:focus,
 		&:hover {
-			border: 2px solid var(--color-primary-text);
+			border: 2px solid var(--color-primary-element-text);
 		}
 	}
 
@@ -138,13 +138,13 @@ export default {
 
 						&:focus-visible {
 							background-color: var(--color-background-hover) !important;
-							box-shadow: inset 0 0 0 2px var(--color-primary) !important;
+							box-shadow: inset 0 0 0 2px var(--color-primary-element) !important;
 							outline: none !important;
 						}
 
 						&:active,
 						&.active {
-							background-color: var(--color-primary-light);
+							background-color: var(--color-primary-element-light);
 						}
 
 						span {