vikunja/frontend
Archived
6
39
Fork 48
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

Migrate to bulma-css-variables and introduce dark mode #954

Merged
konrad merged 72 commits from adrinux/frontend:bulma-css-variables into main 2021-11-22 21:12:55 +00:00
Conversation 24 Commits 72 Files Changed 73 +5 -4
3 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 9dda522151 - Show all commits

5
src/styles/variables/colors.scss
View File

@ -66,6 +66,8 @@
--primary-a: 1 !important;
--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
adrinux marked this conversation as resolved Outdated
dpschen commented 2021-11-04 20:47:06 +00:00
Outdated
Review
Copy Link

Is it possible to use calc() here?

Is it possible to use `calc()` here?
dpschen commented 2021-11-04 21:03:38 +00:00
Outdated
Review
Copy Link

Ahh I saw the !important now

Ahh I saw the `!important` now
adrinux commented 2021-11-05 12:43:49 +00:00
Outdated
Review
Copy Link

Is it possible to use calc() here?

I did initially but really I think it just obfuscates the actual value, though I don't much like the this either.
So:

calc(var(--primary-l) * 1.3)

Works to give a 30% increase?

--primary-light is only used in src/views/tasks/TaskDetailView.vue and I've no idea what end result it has. Can't see what different values do. Any idea?

If we stick with hard coding a value I wonder if using the pattern bulma-css-variables uses would be clearer:

 --primary-h: 216.5deg !important;
 --primary-s: 100% !important;
 --primary-l: 54.9% !important;
 --primary-light-l: 73%;
 --primary-a: 1 !important;
 --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));

  // simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
  --primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
  --primary-translucent: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);

Thoughts? EDIT: have actually just changed it to the latter.

> Is it possible to use `calc()` here? I did initially but really I think it just obfuscates the actual value, though I don't much like the this either. So: ``` calc(var(--primary-l) * 1.3) ``` Works to give a 30% increase? --primary-light is only used in src/views/tasks/TaskDetailView.vue and I've no idea what end result it has. Can't see what different values do. Any idea? If we stick with hard coding a value I wonder if using the pattern bulma-css-variables uses would be clearer: ``` --primary-h: 216.5deg !important; --primary-s: 100% !important; --primary-l: 54.9% !important; --primary-light-l: 73%; --primary-a: 1 !important; --primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a)); // simulate sass lighten($primary, 30) by increasing lightness 30% to 73% --primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a)); --primary-translucent: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5); ``` Thoughts? EDIT: have actually just changed it to the latter.
--primary-translucent: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
}
@ -92,5 +94,4 @@
--text-light: var(--grey-300) !important;
--text-strong: var(--grey-900) !important;
}
}
}

2
src/views/migrator/MigrateService.vue
View File

@ -246,7 +246,7 @@ export default {
}
10% {
transform: translate(0, -15px);
background-color: $primary-dark;
background-color: var(--primary-dark);
}
}
</style>

2
src/views/tasks/TaskDetailView.vue
View File

@ -929,7 +929,7 @@ $flash-background-duration: 750ms;
@keyframes flash-background {
0% {
background: lighten($primary, 30);
background: var(--primary-light);
}
100% {
background: transparent;