From 1235b147c2bc0127d7a1258ecb3ac0d20bf1886c Mon Sep 17 00:00:00 2001
From: Simon L <szaimen@e.mail.de>
Date: Tue, 9 May 2023 15:30:52 +0200
Subject: [PATCH] Use the color-primary-element* variables in components

Signed-off-by: Simon L <szaimen@e.mail.de>
---
 src/assets/inputs.scss                        |  6 +++---
 .../NcActionTextEditable.vue                  |  2 +-
 src/components/NcActions/NcActions.vue        |  2 +-
 .../NcAppNavigationCounter.vue                |  4 ++--
 .../NcAppNavigationIconCollapsible.vue        |  4 ++--
 .../NcAppNavigationItem.vue                   |  4 ++--
 .../NcAppSettingsDialog.vue                   |  2 +-
 .../NcAppSidebar/NcAppSidebarTabs.vue         |  2 +-
 .../NcAppSidebarTab/NcAppSidebarTab.vue       |  4 ++--
 src/components/NcAvatar/NcAvatar.vue          |  4 ++--
 src/components/NcButton/NcButton.vue          | 20 +++++++++----------
 .../NcCheckboxRadioSwitch.vue                 |  4 ++--
 .../NcCounterBubble/NcCounterBubble.vue       |  6 +++---
 src/components/NcDatetimePicker/index.scss    | 10 +++++-----
 .../NcEmojiPicker/NcEmojiPicker.vue           |  6 +++---
 src/components/NcListItem/NcListItem.vue      |  4 ++--
 src/components/NcModal/NcModal.vue            |  4 ++--
 src/components/NcMultiselect/index.scss       |  2 +-
 .../NcAutoCompleteResult.vue                  |  4 ++--
 .../NcRichContenteditable/NcMentionBubble.vue |  2 +-
 .../NcRichContenteditable.vue                 |  4 ++--
 .../NcSavingIndicatorIcon.vue                 |  2 +-
 src/components/NcSelect/NcSelect.vue          |  2 +-
 src/components/NcUserBubble/NcUserBubble.vue  |  2 +-
 24 files changed, 53 insertions(+), 53 deletions(-)

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 2d83c41ca8..3c59d14cac 100644
--- a/src/components/NcActionTextEditable/NcActionTextEditable.vue
+++ b/src/components/NcActionTextEditable/NcActionTextEditable.vue
@@ -318,7 +318,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 5048c631b1..afe30d6b45 100644
--- a/src/components/NcActions/NcActions.vue
+++ b/src/components/NcActions/NcActions.vue
@@ -1229,7 +1229,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/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue b/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
index 445f4d7466..279e4db22f 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);
 	}
 	&--open {
 		color: var(--color-main-text);
 		&:hover{
-			color: var(--color-primary);
+			color: var(--color-primary-element);
 		}
 	}
 }
diff --git a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue
index 73ca440b54..27b904e8c0 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-hover) !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..9fc59081c6 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);
 		}
 
 		&-caption {
diff --git a/src/components/NcAppSidebarTab/NcAppSidebarTab.vue b/src/components/NcAppSidebarTab/NcAppSidebarTab.vue
index 72bfa0ac1c..a0f77c276d 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);
+		box-shadow: 0 0 0.2em var(--color-primary-element);
 		outline: 0;
 	}
 
diff --git a/src/components/NcAvatar/NcAvatar.vue b/src/components/NcAvatar/NcAvatar.vue
index 72bfa24218..3a9b235f4c 100644
--- a/src/components/NcAvatar/NcAvatar.vue
+++ b/src/components/NcAvatar/NcAvatar.vue
@@ -793,8 +793,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..908ce62e68 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
@@ -495,7 +495,7 @@ export default {
 	&:focus-visible {
 		outline: 2px solid var(--color-main-text) !important;
 		&.button-vue--vue-tertiary-on-primary {
-			outline: 2px solid var(--color-primary-text);
+			outline: 2px solid var(--color-primary-element-text);
 			border-radius: var(--border-radius);
 			background-color: transparent;
 		}
@@ -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/NcCounterBubble/NcCounterBubble.vue b/src/components/NcCounterBubble/NcCounterBubble.vue
index 550d33d764..23b9981f21 100644
--- a/src/components/NcCounterBubble/NcCounterBubble.vue
+++ b/src/components/NcCounterBubble/NcCounterBubble.vue
@@ -92,12 +92,12 @@ export default {
 	color: var(--color-primary-element);
 
 	&--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);
 		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..6df762c30e 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); */
 				outline: 2px solid var(--color-primary-element);
 			}
 		}
diff --git a/src/components/NcListItem/NcListItem.vue b/src/components/NcListItem/NcListItem.vue
index 053f497932..2798248458 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-hover);
 			}
 		}
 	}
diff --git a/src/components/NcModal/NcModal.vue b/src/components/NcModal/NcModal.vue
index 057b90e742..4c45d40279 100644
--- a/src/components/NcModal/NcModal.vue
+++ b/src/components/NcModal/NcModal.vue
@@ -877,11 +877,11 @@ export default {
 		position: absolute;
 		transition: opacity 250ms,
 			visibility 250ms;
-		color: var(--color-primary-text);
+		color: var(--color-primary-element-text);
 
 		&:focus-visible {
 			// Override NcButton focus styles
-			box-shadow: 0 0 0 2px var(--color-primary-text);
+			box-shadow: 0 0 0 2px var(--color-primary-element-text);
 			background-color: var(--color-box-shadow);
 		}
 
diff --git a/src/components/NcMultiselect/index.scss b/src/components/NcMultiselect/index.scss
index f2e8a3f581..802883f8f5 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);
 		}
 
 		/* tag wrapper */
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/NcSavingIndicatorIcon/NcSavingIndicatorIcon.vue b/src/components/NcSavingIndicatorIcon/NcSavingIndicatorIcon.vue
index 39e5a0d4fc..d0cf8417e6 100644
--- a/src/components/NcSavingIndicatorIcon/NcSavingIndicatorIcon.vue
+++ b/src/components/NcSavingIndicatorIcon/NcSavingIndicatorIcon.vue
@@ -123,7 +123,7 @@ export default defineComponent({
 	emits: ['click'],
 	computed: {
 		indicatorColor() {
-			return this.error ? 'var(--color-error)' : (this.saving ? 'var(--color-primary)' : 'none')
+			return this.error ? 'var(--color-error)' : (this.saving ? 'var(--color-primary-element)' : 'none')
 		},
 	},
 })
diff --git a/src/components/NcSelect/NcSelect.vue b/src/components/NcSelect/NcSelect.vue
index 80fe510354..dd8033f5aa 100644
--- a/src/components/NcSelect/NcSelect.vue
+++ b/src/components/NcSelect/NcSelect.vue
@@ -1066,7 +1066,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);
 		}