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 +2 -1
2 changed files with 2 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0e93ddf4b5 - Show all commits

2
src/styles/global.scss
View File

@ -13,5 +13,7 @@
@import "bulma-css-variables/sass/helpers/_all";
@import "bulma-css-variables/sass/layout/_all";
@import "variables/colors";
@import "theme";
@import "components";

1
src/styles/variables/_index.scss
View File

@ -1,4 +1,3 @@
@import "colors";
@import "shadows";
@import "variables";
konrad marked this conversation as resolved Outdated
dpschen commented 2021-11-04 21:09:34 +00:00
Outdated
Review
Copy Link

The @import "colors"; should be removed here and instead added in global.scss below the bulma imports.
Probably also below the theme and components overwrites, but I'm not 100% sure about that.

Reason: the colors.scss produces now CSS output (the :root rules) — it was compiled to nothing before.
Since it's prefixed to every components rendered CSS this would result in a lot of code duplication in the end.
Probably not a big issue with gzip but still unnecessary.

Maybe we should rename it (maybe custom-properties.scss ?) and move it out of this folder (the name variables stood for 'SCSS variables') so that we don't mix contexts, since all the other files inside are imported by this _index.scss.

The `@import "colors";` should be removed here and instead added in `global.scss` below the bulma imports. Probably also below the `theme` and `components` overwrites, but I'm not 100% sure about that. Reason: the `colors.scss` produces now CSS output (the `:root` rules) — it was compiled to nothing before. Since it's prefixed to every components rendered CSS this would result in a lot of code duplication in the end. Probably not a big issue with gzip but still unnecessary. Maybe we should rename it (maybe `custom-properties.scss` ?) and move it out of this folder (the name `variables` stood for 'SCSS variables') so that we don't mix contexts, since all the other files inside are imported by this `_index.scss`.
dpschen commented 2021-11-04 21:40:35 +00:00
Outdated
Review
Copy Link

That's why. No clue as to how to reorder the inline styles though.

#756 (comment)

I just realise that this might fix also the issue you had with !important.

> That's why. No clue as to how to reorder the inline styles though. https://kolaente.dev/vikunja/frontend/issues/756#issuecomment-15640 I just realise that this might fix also the issue you had with `!important`.
adrinux commented 2021-11-05 10:45:59 +00:00
Outdated
Review
Copy Link

Yes, there is definitely a lot of duplication and yes I'm sure that's why I had to use !important so much (it seems to be used quite a lot in scss, not just by me!).

Wasn't clear to me if that was introduced by my changes or pre-existing. I have to say I feel like I'd need a couple of hours and to draw a flow chart to figure out the flow of all these imports :) That said it looks like there was already some cleanup recently.

Added an issue so I remember to try this.

Yes, there is definitely a lot of duplication and yes I'm sure that's why I had to use !important so much (it seems to be used quite a lot in scss, not just by me!). Wasn't clear to me if that was introduced by my changes or pre-existing. I have to say I feel like I'd need a couple of hours and to draw a flow chart to figure out the flow of all these imports :) That said it looks like there was already some cleanup recently. Added an [issue](https://kolaente.dev/adrinux/frontend/issues/3#issue-5514) so I remember to try this.
adrinux commented 2021-11-05 23:41:12 +00:00
Outdated
Review
Copy Link

That's why. No clue as to how to reorder the inline styles though.

#756 (comment)

I just realise that this might fix also the issue you had with !important.

I've just removed all the '!important' declarations in colors.scss I needed before with no ill effect.

> > That's why. No clue as to how to reorder the inline styles though. > > https://kolaente.dev/vikunja/frontend/issues/756#issuecomment-15640 > > I just realise that this might fix also the issue you had with `!important`. I've just removed all the '!important' declarations in colors.scss I needed before with no ill effect.
🎉 2