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

6
src/components/input/button.vue
View File

@ -82,11 +82,11 @@ export default {
font-size: 0.85rem;
font-weight: bold;
height: $button-height;
box-shadow: $shadow-sm;
box-shadow: var(--shadow-sm);
&.is-hovered,
&:hover {
box-shadow: $shadow-md;
box-shadow: var(--shadow-md);
}
&.fullheight {
@ -99,7 +99,7 @@ export default {
&:active,
&:focus,
&:focus:not(:active) {
box-shadow: $shadow-xs !important;
box-shadow: var(--shadow-xs) !important;
}
&.is-primary.is-outlined:hover {

6
src/components/list/partials/list-card.vue
View File

@ -90,7 +90,7 @@ export default {
margin: 0 $list-spacing $list-spacing 0;
padding: 1rem;
border-radius: $radius;
box-shadow: $shadow-sm;
box-shadow: var(--shadow-sm);
transition: box-shadow $transition;
display: flex;
@ -98,13 +98,13 @@ export default {
flex-wrap: wrap;
&:hover {
box-shadow: $shadow-md;
box-shadow: var(--shadow-md);
}
&:active,
&:focus,
&:focus:not(:active) {
box-shadow: $shadow-xs !important;
box-shadow: var(--shadow-xs) !important;
}
@media screen and (min-width: $widescreen) {

2
src/components/misc/card.vue
View File

@ -61,7 +61,7 @@ export default {
border-radius: $radius;
margin-bottom: 1rem;
border: 1px solid var(--grey-200);
box-shadow: $shadow-sm;
box-shadow: var(--shadow-sm);
}
.card-header {

2
src/components/notifications/notifications.vue
View File

@ -162,7 +162,7 @@ export default {
max-width: calc(100vw - 2rem);
padding: .75rem .25rem;
border-radius: $radius;
box-shadow: $shadow-sm;
box-shadow: var(--shadow-sm);
font-size: .85rem;
@media screen and (max-width: $tablet) {

4
src/components/tasks/partials/attachments.vue
View File

@ -339,14 +339,14 @@ export default {
width: 100%;
font-size: 5rem;
height: auto;
text-shadow: $shadow-md;
text-shadow: var(--shadow-md);
animation: bounce 2s infinite;
}
.hint {
margin: .5rem auto 2rem;
border-radius: 2px;
box-shadow: $shadow-md;
box-shadow: var(--shadow-md);
background: var(--primary);
padding: 1rem;
color: var(--white);

2
src/components/tasks/partials/defer-task.vue
View File

@ -148,7 +148,7 @@ $defer-task-max-width: 350px + 100px;
color: var(--text);
cursor: default;
z-index: 10;
box-shadow: $shadow-lg;
box-shadow: var(--shadow-lg);
@media screen and (max-width: ($defer-task-max-width)) {
left: .5rem;

2
src/components/tasks/partials/kanban-card.vue
View File

@ -123,7 +123,7 @@ $task-background: var(--white);
-webkit-touch-callout: none; // iOS Safari
user-select: none;
cursor: pointer;
box-shadow: $shadow-xs;
box-shadow: var(--shadow-xs);
display: block;
border: 3px solid transparent;

4
src/styles/theme/theme.scss
View File

@ -149,7 +149,7 @@ button.table {
}
.dropdown-menu .dropdown-content {
box-shadow: $shadow-md;
box-shadow: var(--shadow-md);
}
.is-strikethrough {
@ -166,5 +166,5 @@ button.table {
.box {
border: 1px solid var(--grey-200);
box-shadow: $shadow-sm;
box-shadow: var(--shadow-sm);
}

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

@ -73,7 +73,7 @@
@media (prefers-color-scheme: dark) {
adrinux marked this conversation as resolved Outdated
dpschen commented 2021-11-04 20:47:44 +00:00
Outdated
Review
Copy Link

Nest the @media so we don't need to repeat :root.

Nest the `@media` so we don't need to repeat `:root`.
adrinux commented 2021-11-05 12:59:32 +00:00
Outdated
Review
Copy Link

Good catch. Done a258b938fa

Good catch. Done https://kolaente.dev/adrinux/frontend/commit/a258b938fabdb69b30615897b157c37a020b4059
👍 1
konrad commented 2021-11-07 14:09:50 +00:00
Outdated
Review
Copy Link

Maybe it would make sense to group all dark scheme adjustments (and the base light versio) in separate stylesheets instead of seperating by color or shadows?

Maybe it would make sense to group all dark scheme adjustments (and the base light versio) in separate stylesheets instead of seperating by color or shadows?
dpschen commented 2021-11-07 14:25:38 +00:00
Outdated
Review
Copy Link

I think this is fine. Because we might need adjustments deep in components for dark mode either way.
I think it would be wrong to separate those styles from the components.

I think this is fine. Because we might need adjustments deep in components for dark mode either way. I think it would be wrong to separate those styles from the components.
👍 1
konrad commented 2021-11-07 14:29:01 +00:00
Outdated
Review
Copy Link

That's something I didn't think about. Makes sense.

That's something I didn't think about. Makes sense.
:root {
/* Light mode colours in reverse order for dark mode */
/* Light mode colours reversed for dark mode */
--grey-900: hsl(210, 20%, 98%);
--grey-800: hsl(220, 14.3%, 95.9%);
--grey-700: hsl(220, 13%, 91%);
@ -81,9 +81,11 @@
--grey-500-hsl: 217.9, 10.6%, 64.9%;
--grey-500: hsla(var(--grey-500-hsl), 1);
--grey-400: hsl(220, 8.9%, 46.1%);
--grey-300: hsl(215, 13.8%, 34.1%);
--grey-300-hsl: 215, 13.8%, 34.1%;
--grey-300: hsla(var(--grey-300-hsl), 1);
--grey-200: hsl(216.9, 19.1%, 26.7%);
--grey-100: hsl(215, 27.9%, 16.9%);
--grey-100-hsl: 215, 27.9%, 16.9%;
--grey-100: hsla(var(--grey-100-hsl), 1);
--grey-50: hsl(220.9, 39.3%, 11%);
--white-l: 4% !important;

35
src/styles/variables/shadows.scss
View File

@ -1,9 +1,26 @@
$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);
$shadow-md: 0 10px 20px hsla(var(--grey-500-hsl), .12),
0 3px 6px hsla(var(--grey-500-hsl), .08);
$shadow-lg: 0 15px 25px hsla(var(--grey-500-hsl), .12),
0 5px 10px hsla(var(--grey-500-hsl), .05);
$shadow-xl: 0 20px 40px hsla(var(--grey-500-hsl), .2);
:root {
--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);
--shadow-md: 0 10px 20px hsla(var(--grey-500-hsl), .12),
0 3px 6px hsla(var(--grey-500-hsl), .08);
--shadow-lg: 0 15px 25px hsla(var(--grey-500-hsl), .12),
0 5px 10px hsla(var(--grey-500-hsl), .05);
// unused --shadow-xl: 0 20px 40px hsla(var(--grey-500-hsl), .2);
adrinux marked this conversation as resolved Outdated
dpschen commented 2021-11-04 20:49:29 +00:00
Outdated
Review
Copy Link

good catch!
I think we should either remove it or uncomment it. Like this doesn't make sense (?).

good catch! I think we should either remove it or uncomment it. Like this doesn't make sense (?).
adrinux commented 2021-11-05 13:19:05 +00:00
Outdated
Review
Copy Link

The comment was to spark exactly this conversation :)
Should I remove it?

It's not used. It's not overriding something declared by bulma.

I vote for remove...

The comment was to spark exactly this conversation :) Should I remove it? It's not used. It's not overriding something declared by bulma. I vote for remove...
dpschen commented 2021-11-06 12:08:00 +00:00
Outdated
Review
Copy Link

@konrad: do you remember the reason for shadow?

@konrad: do you remember the reason for shadow?
konrad commented 2021-11-07 13:40:50 +00:00
Outdated
Review
Copy Link

No real reason. When I added the shadows, I added a few variants to have a bit more flexibility. If it's not used anywhere I think it is fine to remove.

No real reason. When I added the shadows, I added a few variants to have a bit more flexibility. If it's not used anywhere I think it is fine to remove.
👍 1
adrinux commented 2021-11-08 15:04:45 +00:00
Outdated
Review
Copy Link

Removed shadow-xl 92b2010cdc

Removed shadow-xl https://kolaente.dev/adrinux/frontend/commit/92b2010cdc7912142105a401056ec200dd6356eb
👍 1
}
@media (prefers-color-scheme: dark) {
:root {
adrinux marked this conversation as resolved Outdated
dpschen commented 2021-11-04 20:50:10 +00:00
Outdated
Review
Copy Link

Nest the @media so we don't need to repeat :root. (2)

Nest the `@media` so we don't need to repeat `:root`. (2)
adrinux commented 2021-11-05 12:59:55 +00:00
Outdated
Review
Copy Link

Done a258b938fa

Done https://kolaente.dev/adrinux/frontend/commit/a258b938fabdb69b30615897b157c37a020b4059
👍 1
/* Even darker shadows for dark mode */
--shadow-xs: 0 1px 3px hsla(var(--grey-100-hsl),.12),
0 1px 2px hsla(var(--grey-100-hsl), .24);
--shadow-sm: 0 3px 6px hsla(var(--grey-100-hsl), .12),
0 2px 4px hsla(var(--grey-100-hsl), .10);
--shadow-md: 0 10px 20px hsla(var(--grey-100-hsl), .12),
0 3px 6px hsla(var(--grey-100-hsl), .08);
--shadow-lg: 0 15px 25px hsla(var(--grey-100-hsl), .12),
0 5px 10px hsla(var(--grey-100-hsl), .05);
// unused --shadow-xl: 0 20px 40px hsla(var(--grey-100-hsl), .2);
}
}

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

@ -162,7 +162,7 @@ export default {
display: inline-flex;
border-radius: $radius;
font-size: .75rem;
box-shadow: $shadow-sm;
box-shadow: var(--shadow-sm);
height: $switch-view-height;
margin-bottom: 1rem;
padding: .5rem;
@ -186,7 +186,7 @@ export default {
&.is-active {
background: var(--primary);
font-weight: bold;
box-shadow: $shadow-xs;
box-shadow: var(--shadow-xs);
}
&:hover {