From 0eebc7259ba844945cbdc2b501d405e2dac39ccc Mon Sep 17 00:00:00 2001 From: Simon L Date: Tue, 9 May 2023 15:30:52 +0200 Subject: [PATCH 1/2] Use the color-primary-element* variables in components Signed-off-by: Simon L --- 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 +- .../NcAppSidebarTab/NcAppSidebarTab.vue | 4 ++-- src/components/NcAvatar/NcAvatar.vue | 4 ++-- src/components/NcButton/NcButton.vue | 20 +++++++++---------- .../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 +- 22 files changed, 50 insertions(+), 50 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 143014f4da..a3fb860c08 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 987e658abb..ef4a8acf7b 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/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 35931a0229..3c7100e8ee 100644 --- a/src/components/NcAppNavigationItem/NcAppNavigationItem.vue +++ b/src/components/NcAppNavigationItem/NcAppNavigationItem.vue @@ -767,7 +767,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 { @@ -957,7 +957,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/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 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..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/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. Date: Fri, 12 May 2023 09:24:46 +0200 Subject: [PATCH 2/2] fix backport Signed-off-by: Simon L --- .../NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue | 4 ++-- src/components/NcPopoverMenu/NcPopoverMenuItem.vue | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue index d947fd9539..21ca81a19e 100644 --- a/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue +++ b/src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue @@ -499,7 +499,7 @@ $spacing: 4px; &:not(&--disabled) &__label:hover, &:not(&--disabled) &__label:focus-within { - background-color: var(--color-primary-light); + background-color: var(--color-primary-element-light); } // Switch specific rules @@ -574,7 +574,7 @@ $spacing: 4px; border: 2px solid var(--color-primary-element-light); &:hover { - border: 2px solid var(--color-primary); + border: 2px solid var(--color-primary-element); } label { diff --git a/src/components/NcPopoverMenu/NcPopoverMenuItem.vue b/src/components/NcPopoverMenu/NcPopoverMenuItem.vue index 0a54fbebc0..1c1ef9bb01 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); border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0 !important; }