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

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

@ -7,7 +7,7 @@
--grey-300: hsl(216, 12.2%, 83.9%);
--grey-400: hsl(217.9, 10.6%, 64.9%);
--grey-500-hsl: 220, 8.9%, 46.1%;
adrinux marked this conversation as resolved Outdated
konrad commented 2021-11-07 14:06:26 +00:00
Outdated
Review
Copy Link

Why is there grey-500 and grey-500-hsl? If they are the same, why are there two of them?

Why is there `grey-500` and `grey-500-hsl`? If they are the same, why are there two of them?
dpschen commented 2021-11-07 14:14:41 +00:00
Outdated
Review
Copy Link

As far as I understand grey-500 is directly usable inside a css color property.
E.g:

background-color: var(--grey-500);

While grey-500-hsl are just the pure hsl values with the intend to use them in different contexts. E.g.:

background-color: hsla(var(--grey-500-hsl, 0.4);
As far as I understand `grey-500` is directly usable inside a css color property. E.g: ```css background-color: var(--grey-500); ``` While `grey-500-hsl` are just the pure hsl values with the intend to use them in different contexts. E.g.: ```css background-color: hsla(var(--grey-500-hsl, 0.4); ```
konrad commented 2021-11-07 14:23:46 +00:00
Outdated
Review
Copy Link

Makes sense. Then maybe there should be variables like these for all color variants? To make it consistent?

Makes sense. Then maybe there should be variables like these for all color variants? To make it consistent?
dpschen commented 2021-11-07 14:32:02 +00:00
Outdated
Review
Copy Link

Yes, that's true. Especially since bulma-scss-variables does the same for all predefined ones.

Yes, that's true. Especially since bulma-scss-variables does the same for all predefined ones.
adrinux commented 2021-11-08 16:06:47 +00:00
Outdated
Review
Copy Link

Yes, @dpschen is right, I picked up that approach from bulma-css-variables and it's for adding the alpha where needed.

@konrad the reason I only added them for a couple of greys is because those are the only greys where an alpha variant is actually used. I get the desire for uniformity and consistency, but is it worth declaring unused variables?

(Technically I should remove the dark mode --grey-300-hsl because that's not currently used in the PR either, was the result of some experimenting.)

Yes, @dpschen is right, I picked up that approach from bulma-css-variables and it's for adding the alpha where needed. @konrad the reason I only added them for a couple of greys is because those are the only greys where an alpha variant is actually used. I get the desire for uniformity and consistency, but is it worth declaring unused variables? (Technically I should remove the dark mode --grey-300-hsl because that's not currently used in the PR either, was the result of some experimenting.)
konrad commented 2021-11-09 18:15:53 +00:00
Outdated
Review
Copy Link

I get the desire for uniformity and consistency, but is it worth declaring unused variables?

It probably is not. Let's say as long as there's only a few variants where a -hsl variant makes sense there's no need to add one for each color. As long as maybe more than half of the variants are used as-is (without a -hsl variant) I'm fine with adding them on a case-by-case basis when they are needed.

> I get the desire for uniformity and consistency, but is it worth declaring unused variables? It probably is not. Let's say as long as there's only a few variants where a `-hsl` variant makes sense there's no need to add one for each color. As long as maybe more than half of the variants are used as-is (without a `-hsl` variant) I'm fine with adding them on a case-by-case basis when they are needed.
👍 1
--grey-500: hsla(var(--grey-500-hsl), 1);
--grey-500: hsl(var(--grey-500-hsl));
adrinux marked this conversation as resolved Outdated
dpschen commented 2021-11-04 21:02:24 +00:00
Outdated
Review
Copy Link

Is hsla needed here? With an opacity of 1 it seems unnecessary

Is hsla needed here? With an opacity of `1` it seems unnecessary
adrinux commented 2021-11-05 11:22:26 +00:00
Outdated
Review
Copy Link
  • The --grey-500-hsl is used elsewhere to create opacity variants.
  • You're right we can just reuse --grey-500-hsl here, have changed it 2a65126a80
- The --grey-500-hsl is used elsewhere to create opacity variants. - You're right we can just reuse --grey-500-hsl here, have changed it 2a65126a80c762f5ca00422e4f8981a21ec32e75
👍 1
--grey-600: hsl(215, 13.8%, 34.1%);
--grey-700: hsl(216.9, 19.1%, 26.7%);
--grey-800: hsl(215, 27.9%, 16.9%);
@ -79,13 +79,13 @@
--grey-700: hsl(220, 13%, 91%);
--grey-600: hsl(216, 12.2%, 83.9%);
--grey-500-hsl: 217.9, 10.6%, 64.9%;
--grey-500: hsla(var(--grey-500-hsl), 1);
--grey-500: hsl(var(--grey-500-hsl));
--grey-400: hsl(220, 8.9%, 46.1%);
--grey-300-hsl: 215, 13.8%, 34.1%;
--grey-300: hsla(var(--grey-300-hsl), 1);
--grey-300: hsl(var(--grey-300-hsl));
--grey-200: hsl(216.9, 19.1%, 26.7%);
--grey-100-hsl: 215, 27.9%, 16.9%;
--grey-100: hsla(var(--grey-100-hsl), 1);
--grey-100: hsl(var(--grey-100-hsl));
--grey-50: hsl(220.9, 39.3%, 11%);
--white-l: 4% !important;