Skip to content

Commit

Permalink
Merge pull request #4067 from nextcloud/enh/noid/primary-color-element
Browse files Browse the repository at this point in the history 
Use the color-primary-element* variables in components
  • Loading branch information
@szaimen
szaimen committed May 12, 2023
2 parents 35c17a2 + 1235b14 commit a046d27
Show file tree
Hide file tree
Showing 24 changed files with 53 additions and 53 deletions.
6 changes: 3 additions & 3 deletions src/assets/inputs.scss
View file
Expand Up @@ -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);

Expand All @@ -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);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcActionTextEditable/NcActionTextEditable.vue
View file
Expand Up @@ -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);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcActions/NcActions.vue
View file
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcAppNavigationCounter/NcAppNavigationCounter.vue
View file
Expand Up @@ -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);
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue
View file
Expand Up @@ -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);
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcAppNavigationItem/NcAppNavigationItem.vue
View file
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcAppSettingsDialog/NcAppSettingsDialog.vue
View file
Expand Up @@ -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;
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcAppSidebar/NcAppSidebarTabs.vue
View file
Expand Up @@ -272,7 +272,7 @@ export default {
&__tab {
flex: 1 1;
&.active {
color: var(--color-primary);
color: var(--color-primary-element);
}
&-caption {
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcAppSidebarTab/NcAppSidebarTab.vue
View file
Expand Up @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcAvatar/NcAvatar.vue
View file
Expand Up @@ -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{
Expand Down
20 changes: 10 additions & 10 deletions src/components/NcButton/NcButton.vue
View file
Expand Up @@ -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
Expand Down Expand Up @@ -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;
}
Expand All @@ -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);
}
Expand All @@ -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);
}
}
Expand All @@ -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) {
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
View file
Expand Up @@ -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
Expand Down Expand Up @@ -654,7 +654,7 @@ $spacing: 4px;
font-weight: bold;
label {
background-color: var(--color-primary-light);
background-color: var(--color-primary-element-light);
}
}
}
Expand Down
6 changes: 3 additions & 3 deletions src/components/NcCounterBubble/NcCounterBubble.vue
View file
Expand Up @@ -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;
}
Expand Down
10 changes: 5 additions & 5 deletions src/components/NcDatetimePicker/index.scss
View file
Expand Up @@ -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;
}

Expand Down Expand Up @@ -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,
Expand All @@ -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;
}
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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);
}

Expand Down
6 changes: 3 additions & 3 deletions src/components/NcEmojiPicker/NcEmojiPicker.vue
View file
Expand Up @@ -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"
Expand Down Expand Up @@ -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;
}
Expand All @@ -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);
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcListItem/NcListItem.vue
View file
Expand Up @@ -601,7 +601,7 @@ export default {
&:active,
&.active {
.list-item {
background-color: var(--color-primary-light);
background-color: var(--color-primary-element-light);
}
}
}
Expand Down Expand Up @@ -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);
}
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcModal/NcModal.vue
View file
Expand Up @@ -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);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcMultiselect/index.scss
View file
Expand Up @@ -57,7 +57,7 @@
box-sizing: border-box;

&:focus, &:hover {
border-color: var(--color-primary);
border-color: var(--color-primary-element);
}

/* tag wrapper */
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcRichContenteditable/NcAutoCompleteResult.vue
View file
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcRichContenteditable/NcMentionBubble.vue
View file
Expand Up @@ -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);
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcRichContenteditable/NcRichContenteditable.vue
View file
Expand Up @@ -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;
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcSavingIndicatorIcon/NcSavingIndicatorIcon.vue
View file
Expand Up @@ -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')
},
},
})
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcSelect/NcSelect.vue
View file
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcUserBubble/NcUserBubble.vue
View file
Expand Up @@ -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);
}
Expand Down

0 comments on commit a046d27

Please sign in to comment.