vikunja/frontend
Archived
6
39
Fork 49
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 +18 -6
2 changed files with 18 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 38ed29052e - Show all commits

20
src/styles/custom-properties/colors.scss
View File

@ -1,6 +1,7 @@
// Vikunja colors as CSS custom properties
:root {
// Vikunja specific variables
--grey-50: hsl(210, 20%, 98%);
--grey-100: hsl(220, 14.3%, 95.9%);
--grey-200: hsl(220, 13%, 91%);
@ -16,7 +17,7 @@
--site-background: var(--grey-100);
--scheme-main: var(--white);
// Vikunja overrides of Bulma defaults
// Overrides of Bulma defaults
dpschen commented 2021-11-16 16:46:38 +00:00
Outdated
Review
Copy Link

This comment is a bit unclear: where do the overwrites of bulmas defaults end?

This comment is a bit unclear: where do the overwrites of bulmas defaults end?
adrinux commented 2021-11-16 18:13:56 +00:00
Outdated
Review
Copy Link

Tightened up the whitespace so all the overrides are in one block. That clearer?

Tightened up the whitespace so all the overrides are in one block. That clearer?
dpschen commented 2021-11-17 14:27:30 +00:00
Outdated
Review
Copy Link

Tbh I liked that they were devided by an empty line. How about an end comment, something like:

// END OF Overrides of Bulma defaults
Tbh I liked that they were devided by an empty line. How about an end comment, something like: ``` // END OF Overrides of Bulma defaults ```
👍 1
adrinux commented 2021-11-17 20:20:21 +00:00
Outdated
Review
Copy Link

Tbh I liked that they were devided by an empty line. How about an end comment, something like:

// END OF Overrides of Bulma defaults

@dpschen You can have end comment if you prefer :) And empty lines back?

While we're talking about this block, how would feel about removing the comment lines with the old color name/hex etc?
Mostly in to show what I'd done but they seem superfluous now.

> Tbh I liked that they were devided by an empty line. How about an end comment, something like: > > ``` > // END OF Overrides of Bulma defaults > ``` @dpschen You can have end comment if you prefer :) And empty lines back? While we're talking about this block, how would feel about removing the comment lines with the old color name/hex etc? Mostly in to show what I'd done but they seem superfluous now.
adrinux commented 2021-11-21 11:58:07 +00:00
Outdated
Review
Copy Link

Added end comment, added whitespace back, removed extra hsl in comment

Added end comment, added whitespace back, removed extra hsl in comment
// --black-bis: #121212;
// --black-ter: #242424;
--grey-darker: var(--grey-700);
@ -66,17 +67,21 @@
--primary-h: 216.5deg;
--primary-s: 100%;
--primary-l: 54.9%;
// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
--primary-light-l: 73%;
--primary-a: 1;
--primary-hsl: 216.5deg, 100%, 54.9%;
--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
dpschen marked this conversation as resolved Outdated
dpschen commented 2021-11-16 16:48:35 +00:00
Outdated
Review
Copy Link

Reuse --primary-h, --primary-s and --primary-ls values

Reuse `--primary-h`, `--primary-s` and `--primary-l`s values
dpschen commented 2021-11-16 16:59:42 +00:00
Outdated
Review
Copy Link

Done

Done
// 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));
// Define custom color to prevent change in dark mode
--switch-view-color: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
@media (prefers-color-scheme: dark) {
// Light mode colours reversed for dark mode
--grey-900: hsl(210, 20%, 98%);
--grey-900-hsl: 210, 20%, 98%;
--grey-900: hsl(var(--grey-900-hsl));
--grey-800: hsl(220, 14.3%, 95.9%);
--grey-700: hsl(220, 13%, 91%);
--grey-600: hsl(216, 12.2%, 83.9%);
@ -89,12 +94,19 @@
--grey-100: hsl(var(--grey-100-hsl));
--grey-50: hsl(220.9, 39.3%, 11%);
// Dark grey looks better than black
--white: var(--grey-50);
--black-l: 100%;
// Text renders better in grey than black
--text: var(--grey-800);
--text-invert: #000;
--text-light: var(--grey-300);
--text-strong: var(--grey-900);
// Elements that rely on Bulma defaults in light mode but
// need to be overriden in dark mode
--input-placeholder-color: hsla(var(--grey-900-hsl), 0.6) !important;
}
}

4
src/views/list/ShowList.vue
View File

@ -179,8 +179,8 @@ export default {
}
&.is-active,
&:hover {
color: var(--white);
&:hover {
color: var(--switch-view-color);
}
&.is-active {