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

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

@ -98,7 +98,8 @@
--grey-200: hsl(216.9, 19.1%, 26.7%);
--grey-100-hsl: 215, 27.9%, 16.9%;
--grey-100: hsl(var(--grey-100-hsl));
--grey-50: hsl(220.9, 39.3%, 11%);
--grey-50-hsl: 220.9, 39.3%, 11%;
--grey-50: hsl(var(--grey-50-hsl));
// Dark grey looks better than black
--white: var(--grey-50);

18
src/styles/custom-properties/shadows.scss
View File

@ -1,5 +1,5 @@
:root {
--shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl),.12),
--shadow-xs: 0 1px 3px hsla(var(--grey-500-hsl), .12),
0 1px 2px hsla(var(--grey-500-hsl), .24);
--shadow-sm: 0 3px 6px hsla(var(--grey-500-hsl), .12),
0 2px 4px hsla(var(--grey-500-hsl), .10);
@ -10,13 +10,13 @@
&.dark {
// Even darker shadows for dark mode
--shadow-xs: 0 1px 3px var(--white),
0 1px 2px var(--white);
--shadow-sm: 0 3px 6px var(--white),
0 2px 4px var(--white);
--shadow-md: 0 10px 20px var(--white),
0 3px 6px var(--white);
--shadow-lg: 0 15px 25px var(--white),
0 5px 10px var(--white);
--shadow-xs: 0 1px 3px hsla(var(--grey-50-hsl), 0.4),
0 1px 2px hsla(var(--grey-50-hsl), 0.8);
--shadow-sm: 0 3px 6px hsla(var(--grey-50-hsl), 0.8),
0 2px 4px hsla(var(--grey-50-hsl), 0.6);
--shadow-md: 0 10px 20px hsla(var(--grey-50-hsl), 0.8),
0 3px 6px hsla(var(--grey-50-hsl), 0.6);
--shadow-lg: 0 15px 25px hsla(var(--grey-50-hsl), 0.8),
0 5px 10px hsla(var(--grey-50-hsl), 0.4);
}
}