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

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

@ -13,57 +13,46 @@
--grey-700: hsl(216.9, 19.1%, 26.7%);
--grey-800: hsl(215, 27.9%, 16.9%);
--grey-900: hsl(220.9, 39.3%, 11%);
--site-background: var(--grey-100);
--scheme-main: var(--white);
// Overrides of Bulma defaults
// --black-bis: #121212;
// --black-ter: #242424;
--grey-darker: var(--grey-700);
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
--grey-dark: var(--grey-800);
--grey: var(--grey-500);
--grey-light: var(--grey-300);
--grey-lighter: var(--grey-200);
--grey-lightest: var(--grey-100);
// --white-ter: whitesmoke;
// --white-bis: #fafafa;
--input-border-color: var(--grey-200);
--white-h: 0deg;
--white-s: 0%;
--white-l: 100%;
adrinux marked this conversation as resolved Outdated
dpschen commented 2021-11-16 16:47:01 +00:00
Outdated
Review
Copy Link

I didn't get what these uncommented values are for?

I didn't get what these uncommented values are for?
adrinux commented 2021-11-16 18:14:33 +00:00
Outdated
Review
Copy Link

Thought I might need to override them when I started, removed them now.

Thought I might need to override them when I started, removed them now.
👍 1
--white-a: 1;
--white: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));
--white-translucent: hsla(var(--white-h), var(--white-s), var(--white-l), 0.75);
--black-h: 0deg;
--black-s: 0%;
--black-l: 4%;
--black-a: 1;
--black: hsla(var(--black-h), var(--black-s), var(--black-l), var(--black-a));
// $warning / $orange: #ff851b or hsl(27.9, 100%, 55.3%)
--warning-h: 27.9deg;
--warning-s: 100%;
--warning-l: 55.3%;
--warning-a: 1;
--warning: hsla(var(--warning-h), var(--warning-s), var(--warning-l), var(--warning-a));
// $success / $green is #00db60 or hsl(146.3, 100%, 42.9%)
--success-h: 146.3deg;
--success-s: 100%;
--success-l: 42.9%;
--success-a: 1;
--success: hsla(var(--success-h), var(--success-s), var(--success-l), var(--success-a));
// $danger / $red is #ff4136 or hsl(3.3, 100%, 60.6%)
--danger-h: 3.3deg;
--danger-s: 100%;
--danger-l: 60.6%;
--danger-a: 1;
--danger: hsla(var(--danger-h), var(--danger-s), var(--danger-l), var(--danger-a));
// var(--primary) / $blue is #1973ff or hsl(216.5, 100%, 54.9%)
--primary-h: 216.5deg;
--primary-s: 100%;
@ -75,6 +64,7 @@
--primary: hsla(var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-a));
--primary-light: hsla(var(--primary-h), var(--primary-s), var(--primary-light-l), var(--primary-a));
// Define custom color variable to prevent change in dark mode
--switch-view-color: hsla(var(--white-h), var(--white-s), var(--white-l), var(--white-a));