Skip to content

Commit

Permalink
Use the color-primary-element* variables in components
Browse files Browse the repository at this point in the history 
Signed-off-by: Simon L <szaimen@e.mail.de>
  • Loading branch information
@szaimen
szaimen committed May 10, 2023
1 parent 6e22e62 commit 22ab8af
Show file tree
Hide file tree
Showing 24 changed files with 58 additions and 58 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
4 changes: 2 additions & 2 deletions src/components/NcActionTextEditable/NcActionTextEditable.vue
View file
Expand Up @@ -323,8 +323,8 @@ $input-margin: 4px;
&:active,
&:hover,
&:focus {
background-color: var(--color-primary-element);
color: var(--color-primary-text);
background-color: var(--color-primary-element-light);
color: var(--color-primary-element-light-text);
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcActions/NcActions.vue
View file
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue
View file
Expand Up @@ -136,7 +136,7 @@ export default {
&__title {
font-weight: bold;
color: var(--color-primary-element);
color: var(--color-main-text);
font-size: var(--default-font-size);
line-height: $clickable-area;
white-space: nowrap;
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-text-dark);
}
&--open {
color: var(--color-main-text);
&:hover{
color: var(--color-primary);
color: var(--color-primary-element-text-dark);
}
}
}
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) !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-text-dark);
}
&-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-light);
box-shadow: 0 0 0.2em var(--color-primary-element-light);
outline: 0;
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/NcAvatar/NcAvatar.vue
View file
Expand Up @@ -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{
Expand Down
18 changes: 9 additions & 9 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 @@ -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
8 changes: 4 additions & 4 deletions src/components/NcCheckboxRadioSwitch/NcCheckboxRadioSwitch.vue
View file
Expand Up @@ -533,7 +533,7 @@ $spacing: 4px;
margin-right: $spacing;
// Remove the left margin of material design icons to align text
margin-left: -2px;
color: var(--color-primary-element);
color: var(--color-primary-element-text);
width: var(--icon-size);
height: var(--icon-size);
}
Expand All @@ -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 All @@ -562,7 +562,7 @@ $spacing: 4px;
// If switch is checked AND disabled, use the fade primary colour
&-switch.checkbox-radio-switch--disabled.checkbox-radio-switch--checked &__icon > * {
color: var(--color-primary-element-light);
color: var(--color-primary-element-text);
}
$border-radius: calc(var(--default-clickable-area) / 2);
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
8 changes: 4 additions & 4 deletions src/components/NcCounterBubble/NcCounterBubble.vue
View file
Expand Up @@ -89,15 +89,15 @@ export default {
border-radius: var(--border-radius-pill);
background-color: var(--color-primary-element-light);
font-weight: bold;
color: var(--color-primary-element);
color: var(--color-primary-element-light-text);
&--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-light-text);
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-light); */
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);
}
}
}
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-light);
}

/* tag wrapper */
Expand Down
2 changes: 1 addition & 1 deletion src/components/NcPopoverMenu/NcPopoverMenuItem.vue
View file
Expand Up @@ -197,7 +197,7 @@ export default {
}
.menuitem.active {
border-left: 4px solid var(--color-primary);
border-left: 4px solid var(--color-primary-element-light);
border-radius: 0 var(--border-radius-large) var(--border-radius-large) 0 !important;
}
</style>
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

0 comments on commit 22ab8af

Please sign in to comment.