From d1a2eefca663ca10a2ad50878523a56124e6bfee Mon Sep 17 00:00:00 2001
From: konrad <konrad@kola-entertainments.de>
Date: Sat, 23 Jan 2021 17:18:09 +0000
Subject: [PATCH] Improve consistency of the layout (#386)

Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/386
Co-authored-by: konrad <konrad@kola-entertainments.de>
Co-committed-by: konrad <konrad@kola-entertainments.de>
---
 cypress/integration/list/list.spec.js         |  5 +-
 cypress/integration/sharing/team.spec.js      |  2 -
 cypress/support/commands.js                   | 17 ++++
 cypress/support/index.js                      |  1 +
 src/components/input/editor.vue               |  6 +-
 src/components/misc/notification.vue          |  2 +-
 src/components/misc/user.vue                  |  4 +-
 src/components/tasks/edit-task.vue            |  2 +-
 .../tasks/partials/priorityLabel.vue          |  4 +-
 .../tasks/partials/relatedTasks.vue           |  2 +-
 src/styles/components/_all.scss               |  3 +-
 src/styles/components/attachments.scss        | 16 ++--
 src/styles/components/base/card.scss          |  8 +-
 src/styles/components/base/fancycheckbox.scss |  6 +-
 src/styles/components/base/multiselect.scss   | 10 +--
 src/styles/components/base/scrollbars.scss    | 10 +--
 src/styles/components/base/tooltip.scss       | 90 +------------------
 src/styles/components/color-picker.scss       |  2 +-
 src/styles/components/comments.scss           |  2 +-
 src/styles/components/fullpage.scss           | 57 ------------
 src/styles/components/gantt.scss              | 47 +++++-----
 src/styles/components/kanban.scss             | 51 ++++++-----
 src/styles/components/keyboard-shortcuts.scss |  6 +-
 src/styles/components/labels.scss             |  2 +-
 src/styles/components/legal.scss              |  2 +-
 src/styles/components/list-backgrounds.scss   | 18 ++--
 src/styles/components/list.scss               | 18 ++--
 src/styles/components/migrator.scss           |  8 +-
 src/styles/components/modal.scss              |  2 +-
 src/styles/components/namespaces.scss         | 16 ++--
 src/styles/components/switch-view.scss        | 20 ++---
 src/styles/components/table-view.scss         |  2 +-
 src/styles/components/task.scss               | 36 ++++----
 src/styles/components/taskRelations.scss      | 13 +--
 src/styles/components/tasks.scss              | 47 +++++-----
 src/styles/components/teams.scss              |  3 +-
 src/styles/theme/_all.scss                    |  2 +-
 src/styles/theme/background.scss              |  2 +-
 src/styles/theme/content.scss                 |  6 +-
 src/styles/theme/form.scss                    | 16 ++--
 src/styles/theme/link-share.scss              |  2 +-
 src/styles/theme/loading.scss                 | 20 ++---
 src/styles/theme/navigation.scss              | 59 ++++++------
 src/styles/theme/notification.scss            | 14 +--
 src/styles/theme/offline.scss                 |  6 +-
 src/styles/theme/theme.scss                   |  2 +-
 src/styles/theme/update-notification.scss     | 18 ++--
 src/styles/theme/variables/_all.scss          |  3 +
 src/styles/theme/variables/colors.scss        | 17 ++++
 src/styles/theme/variables/shadows.scss       |  5 ++
 .../theme/{ => variables}/variables.scss      | 35 ++++----
 src/views/user/Login.vue                      |  2 +-
 src/views/user/PasswordReset.vue              |  2 +-
 src/views/user/RequestPasswordReset.vue       |  2 +-
 54 files changed, 307 insertions(+), 446 deletions(-)
 create mode 100644 cypress/support/commands.js
 delete mode 100644 src/styles/components/fullpage.scss
 create mode 100644 src/styles/theme/variables/_all.scss
 create mode 100644 src/styles/theme/variables/colors.scss
 create mode 100644 src/styles/theme/variables/shadows.scss
 rename src/styles/theme/{ => variables}/variables.scss (59%)

diff --git a/cypress/integration/list/list.spec.js b/cypress/integration/list/list.spec.js
index 011b489ec..3d85375a3 100644
--- a/cypress/integration/list/list.spec.js
+++ b/cypress/integration/list/list.spec.js
@@ -361,10 +361,7 @@ describe('Lists', () => {
 			})
 			cy.visit('/lists/1/kanban')
 
-			cy.get('.kanban .bucket .tasks')
-				.should('contain', tasks[0].title)
-			
-			cy.get('.kanban .bucket .tasks .task')
+			cy.getAttached('.kanban .bucket .tasks .task')
 				.contains(tasks[0].title)
 				.click()
 
diff --git a/cypress/integration/sharing/team.spec.js b/cypress/integration/sharing/team.spec.js
index 0359af91a..094556355 100644
--- a/cypress/integration/sharing/team.spec.js
+++ b/cypress/integration/sharing/team.spec.js
@@ -23,8 +23,6 @@ describe('Team', () => {
 			.contains('Create')
 			.click()
 
-        cy.get('.fullpage')
-            .should('not.exist')
 		cy.url()
             .should('contain', '/edit')
         cy.get('input#teamtext')
diff --git a/cypress/support/commands.js b/cypress/support/commands.js
new file mode 100644
index 000000000..ccdc6f366
--- /dev/null
+++ b/cypress/support/commands.js
@@ -0,0 +1,17 @@
+/**
+ * getAttached(selector)
+ * getAttached(selectorFn)
+ *
+ * Waits until the selector finds an attached element, then yields it (wrapped).
+ * selectorFn, if provided, is passed $(document). Don't use cy methods inside selectorFn.
+ *
+ * Source: https://github.com/cypress-io/cypress/issues/5743#issuecomment-650421731
+ */
+Cypress.Commands.add('getAttached', selector => {
+	const getElement = typeof selector === 'function' ? selector : $d => $d.find(selector);
+	let $el = null;
+	return cy.document().should($d => {
+		$el = getElement(Cypress.$($d));
+		expect(Cypress.dom.isDetached($el)).to.be.false;
+	}).then(() => cy.wrap($el));
+});
diff --git a/cypress/support/index.js b/cypress/support/index.js
index a51369df0..74c1400d7 100644
--- a/cypress/support/index.js
+++ b/cypress/support/index.js
@@ -1,2 +1,3 @@
 
+import './commands'
 import 'cypress-file-upload'
diff --git a/src/components/input/editor.vue b/src/components/input/editor.vue
index d5ccf95b2..6df9de8b4 100644
--- a/src/components/input/editor.vue
+++ b/src/components/input/editor.vue
@@ -442,7 +442,7 @@ export default {
 <style lang="scss">
 @import '../../../node_modules/highlight.js/scss/atelier-heath-light';
 @import '../../../node_modules/easymde/dist/easymde.min.css';
-@import '../../styles/theme/variables';
+@import '../../styles/theme/variables/all';
 
 .editor {
 	.clear {
@@ -505,7 +505,7 @@ pre.CodeMirror-line {
 }
 
 ul.actions {
-	font-size: .8em;
+	font-size: .8rem;
 	margin: 0;
 
 	li {
@@ -522,7 +522,7 @@ ul.actions {
 	}
 
 	&, a {
-		color: $grey;
+		color: $grey-500;
 	}
 
 	a:hover {
diff --git a/src/components/misc/notification.vue b/src/components/misc/notification.vue
index 280be51b1..c5176a8fa 100644
--- a/src/components/misc/notification.vue
+++ b/src/components/misc/notification.vue
@@ -58,6 +58,6 @@ export default {
 }
 
 .buttons {
-	margin-top: 0.5em;
+	margin-top: 0.5rem;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/misc/user.vue b/src/components/misc/user.vue
index 4e9c8e63f..bcd76e078 100644
--- a/src/components/misc/user.vue
+++ b/src/components/misc/user.vue
@@ -40,7 +40,7 @@ export default {
 
 <style lang="scss" scoped>
 .user {
-	margin: .5em;
+	margin: .5rem;
 
 	&.is-inline {
 		display: inline;
@@ -52,7 +52,7 @@ export default {
 		border-radius: 100%;
 
 		vertical-align: middle;
-		margin-right: .5em;
+		margin-right: .5rem;
 	}
 }
 </style>
diff --git a/src/components/tasks/edit-task.vue b/src/components/tasks/edit-task.vue
index 1904c4300..c259f74d0 100644
--- a/src/components/tasks/edit-task.vue
+++ b/src/components/tasks/edit-task.vue
@@ -284,6 +284,6 @@ export default {
 
 <style scoped>
 form {
-	margin-bottom: 1em;
+	margin-bottom: 1rem;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/tasks/partials/priorityLabel.vue b/src/components/tasks/partials/priorityLabel.vue
index d47ae0457..d9d9eb4a2 100644
--- a/src/components/tasks/partials/priorityLabel.vue
+++ b/src/components/tasks/partials/priorityLabel.vue
@@ -44,7 +44,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-@import '../../../styles/theme/variables';
+@import '../../../styles/theme/variables/all';
 
 .priority-label {
 	display: inline-flex;
@@ -58,7 +58,7 @@ span.high-priority {
 	.icon {
 		vertical-align: middle;
 		width: auto !important;
-		padding: 0 .5em;
+		padding: 0 .5rem;
 	}
 
 	&.not-so-high {
diff --git a/src/components/tasks/partials/relatedTasks.vue b/src/components/tasks/partials/relatedTasks.vue
index 696923441..869a0f4fe 100644
--- a/src/components/tasks/partials/relatedTasks.vue
+++ b/src/components/tasks/partials/relatedTasks.vue
@@ -250,7 +250,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '@/styles/theme/variables';
+@import '@/styles/theme/variables/all';
 
 .add-task-relation-button {
 	margin-top: -3rem;
diff --git a/src/styles/components/_all.scss b/src/styles/components/_all.scss
index 8094d026f..345cf7761 100644
--- a/src/styles/components/_all.scss
+++ b/src/styles/components/_all.scss
@@ -1,7 +1,6 @@
 @import 'base/all';
 
 @import 'attachments';
-@import 'fullpage';
 @import 'gantt';
 @import 'labels';
 @import 'list';
@@ -22,4 +21,4 @@
 @import 'legal';
 @import 'keyboard-shortcuts';
 @import 'api-config';
-@import 'datepicker'
+@import 'datepicker';
diff --git a/src/styles/components/attachments.scss b/src/styles/components/attachments.scss
index 23fecac3e..9266af82e 100644
--- a/src/styles/components/attachments.scss
+++ b/src/styles/components/attachments.scss
@@ -14,7 +14,7 @@
       padding: .5rem;
 
       &:hover {
-        background-color: $grey-lightest;
+        background-color: $grey-100;
       }
 
       .filename {
@@ -24,7 +24,7 @@
       }
 
       .info {
-        color: $grey;
+        color: $grey-500;
         font-size: .9rem;
 
         p {
@@ -84,20 +84,18 @@
 
       .icon {
         width: 100%;
-        font-size: 5em;
+        font-size: 5rem;
         height: auto;
-        text-shadow: 0 2px 2px rgba(0, 0, 0, .14), 0 3px 1px rgba(0, 0, 0, .2), 0 1px 5px rgba(0, 0, 0, .12);
-        -moz-animation: bounce 2s infinite;
-        -webkit-animation: bounce 2s infinite;
+        text-shadow: $shadow-md;
         animation: bounce 2s infinite;
       }
 
       .hint {
-        margin: .5em auto 2em;
+        margin: .5rem auto 2rem;
         border-radius: 2px;
-        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
+        box-shadow: $shadow-md;
         background: $primary;
-        padding: 1em;
+        padding: 1rem;
         color: $white;
         width: 100%;
         max-width: 300px;
diff --git a/src/styles/components/base/card.scss b/src/styles/components/base/card.scss
index 61c947988..1168fc110 100644
--- a/src/styles/components/base/card.scss
+++ b/src/styles/components/base/card.scss
@@ -1,5 +1,5 @@
 .card {
-  background-color: rgba($grey-lighter, 0.075);
+  background-color: $white;
   border-radius: $radius;
   margin-bottom: 1rem;
 
@@ -11,12 +11,12 @@
 
   .card-header {
     box-shadow: none;
-    border-bottom: 1px solid $grey-lighter;
+    border-bottom: 1px solid $grey-200;
     border-radius: $radius $radius 0 0;
   }
 }
 
 .box, .card {
-  border: $thickness solid $border;
-  box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
+  border: 1px solid $grey-200;
+  box-shadow: $shadow-md;
 }
diff --git a/src/styles/components/base/fancycheckbox.scss b/src/styles/components/base/fancycheckbox.scss
index c1aa9f671..57651d981 100644
--- a/src/styles/components/base/fancycheckbox.scss
+++ b/src/styles/components/base/fancycheckbox.scss
@@ -9,7 +9,7 @@
   }
 
   &.is-block {
-    margin: .5em .2em;
+    margin: .5rem .2rem;
   }
 
   .check {
@@ -26,9 +26,9 @@
     }
 
     span {
-      font-size: 0.8em;
+      font-size: 0.8rem;
       vertical-align: top;
-      padding-left: .5em;
+      padding-left: .5rem;
     }
 
     svg {
diff --git a/src/styles/components/base/multiselect.scss b/src/styles/components/base/multiselect.scss
index b96129516..3a3572127 100644
--- a/src/styles/components/base/multiselect.scss
+++ b/src/styles/components/base/multiselect.scss
@@ -12,19 +12,19 @@
 		background: $white !important;
 
 		&, &:focus-within {
-			border-bottom-color: $grey-lighter !important;
+			border-bottom-color: $grey-200 !important;
 		}
 	}
 
 	.input-wrapper {
 		padding: 0;
 		background: $white !important;
-		border-color: $grey-lighter !important;
+		border-color: $grey-200 !important;
 		flex-wrap: wrap;
 		height: auto;
 
 		&:hover {
-			border-color: $grey-light !important;
+			border-color: $grey-300 !important;
 		}
 
 		.input {
@@ -105,7 +105,7 @@
 			}
 
 			&:focus, &:hover {
-				background: $grey-lightest;
+				background: $grey-100;
 				box-shadow: none !important;
 
 				.hint-text {
@@ -114,7 +114,7 @@
 			}
 
 			&:active {
-				background: $grey-lighter;
+				background: $grey-200;
 			}
 		}
 	}
diff --git a/src/styles/components/base/scrollbars.scss b/src/styles/components/base/scrollbars.scss
index 671f36238..92a856e33 100644
--- a/src/styles/components/base/scrollbars.scss
+++ b/src/styles/components/base/scrollbars.scss
@@ -6,17 +6,13 @@
 
 ::-webkit-scrollbar-track {
   background: $scrollbar-track-color;
-  border-radius: 10px;
+  border-radius: .5rem;
 }
 
 ::-webkit-scrollbar-thumb {
-  border-radius: 10px;
+  border-radius: .5rem;
   background: $scrollbar-thumb-color;
-  -webkit-transition: background-color $transition;
-  -moz-transition: background-color $transition;
-  -ms-transition: background-color $transition;
-  -o-transition: background-color $transition;
-  transition: background-color $transition;
+  transition: all $transition;
 
   &:hover {
     background: $scrollbar-hover-color;
diff --git a/src/styles/components/base/tooltip.scss b/src/styles/components/base/tooltip.scss
index 4ecfcdf99..a31b61466 100644
--- a/src/styles/components/base/tooltip.scss
+++ b/src/styles/components/base/tooltip.scss
@@ -1,7 +1,7 @@
 .tooltip {
   visibility: collapse;
   z-index: 10000;
-  font-size: 0.8em;
+  font-size: 0.8rem;
   text-align: center;
   background: $dark;
   color: white;
@@ -37,90 +37,4 @@
     opacity: 1;
     visibility: visible;
   }
-
-  &[x-placement^="top"] {
-    margin-bottom: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 5px 0 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      bottom: -5px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="bottom"] {
-    margin-top: 5px;
-
-    .tooltip-arrow {
-      border-width: 0 5px 5px 5px;
-      border-left-color: transparent !important;
-      border-right-color: transparent !important;
-      border-top-color: transparent !important;
-      top: -5px;
-      left: calc(50% - 5px);
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  &[x-placement^="right"] {
-    margin-left: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 5px 5px 0;
-      border-left-color: transparent !important;
-      border-top-color: transparent !important;
-      border-bottom-color: transparent !important;
-      left: -5px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &[x-placement^="left"] {
-    margin-right: 5px;
-
-    .tooltip-arrow {
-      border-width: 5px 0 5px 5px;
-      border-top-color: transparent !important;
-      border-right-color: transparent !important;
-      border-bottom-color: transparent !important;
-      right: -5px;
-      top: calc(50% - 5px);
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-
-  &.popover {
-    .popover-inner {
-      background: $light;
-      color: $dark;
-      padding: 24px;
-      border-radius: 5px;
-      box-shadow: 0 5px 30px rgba(black, .1);
-    }
-
-    .popover-arrow {
-      border-color: $light;
-    }
-  }
-
-  &[aria-hidden='true'] {
-    visibility: hidden;
-    opacity: 0;
-    transition: opacity .15s, visibility .15s;
-  }
-
-  &[aria-hidden='false'] {
-    visibility: visible;
-    opacity: 1;
-    transition: opacity .15s;
-  }
-}
\ No newline at end of file
+}
diff --git a/src/styles/components/color-picker.scss b/src/styles/components/color-picker.scss
index a8fbc785c..2df889c9a 100644
--- a/src/styles/components/color-picker.scss
+++ b/src/styles/components/color-picker.scss
@@ -5,7 +5,7 @@
 
   .verte__guide {
     border-radius: 100%;
-    border: 1px solid $grey-light;
+    border: 1px solid $grey-300;
     box-shadow: $card-shadow;
   }
 }
\ No newline at end of file
diff --git a/src/styles/components/comments.scss b/src/styles/components/comments.scss
index 8cfb1c4b9..b6e2afed6 100644
--- a/src/styles/components/comments.scss
+++ b/src/styles/components/comments.scss
@@ -2,7 +2,7 @@
   align-items: center;
 
   .media-left {
-    margin: 0 1em;
+    margin: 0 1rem;
   }
 
   .comment-info {
diff --git a/src/styles/components/fullpage.scss b/src/styles/components/fullpage.scss
deleted file mode 100644
index 7cb10596e..000000000
--- a/src/styles/components/fullpage.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-.fullpage {
-  position: fixed;
-  text-align: center;
-  top: 0;
-  z-index: 50;
-  left: 0;
-  right: 0;
-  bottom: 0;
-
-  padding: 15vh 20vh;
-  background: $vikunja-blue;
-  color: $vikunja-light-text;
-  font-size: 2em;
-
-  @media screen and (max-width: $tablet) {
-    padding: 20vw 10vw;
-  }
-
-  input {
-    background: transparent;
-    border: none;
-    border-bottom: 3px solid darken($vikunja-blue, 10);
-    color: $vikunja-light-text;
-    padding: 1em 0.5em;
-    font-size: 1.5em;
-    border-radius: 0;
-
-    &::placeholder {
-      color: $vikunja-light-text;
-    }
-  }
-
-  .button {
-    font-size: 1em;
-    margin-top: 4px;
-  }
-
-  h3 {
-    font-size: 1.5em;
-  }
-
-  .close {
-    position: fixed;
-    top: 5vh;
-    right: 6vh;
-    color: $vikunja-light-text;
-  }
-
-  .small {
-    margin-top: 1em;
-    font-size: 0.5em;
-  }
-}
-
-.fullpage-overlay {
-  z-index: 6 !important;
-}
\ No newline at end of file
diff --git a/src/styles/components/gantt.scss b/src/styles/components/gantt.scss
index 29e3a632c..1a5bd08c0 100644
--- a/src/styles/components/gantt.scss
+++ b/src/styles/components/gantt.scss
@@ -1,8 +1,8 @@
-$gantt-border: 1px solid $grey-lighter;
-$gantt-vertical-border-color: lighten($grey, 45);
+$gantt-border: 1px solid $grey-200;
+$gantt-vertical-border-color: $grey-100;
 
 .gantt-chart-container {
-  padding-bottom: 1em;
+  padding-bottom: 1rem;
 }
 
 .gantt-chart {
@@ -17,7 +17,7 @@ $gantt-vertical-border-color: lighten($grey, 45);
       display: flex;
 
       .month {
-        padding: 0.5em 0 0;
+        padding: 0.5rem 0 0;
         border-right: $gantt-border;
         font-family: $vikunja-font;
         font-weight: bold;
@@ -30,7 +30,7 @@ $gantt-vertical-border-color: lighten($grey, 45);
           display: flex;
 
           .day {
-            padding: 0.5em 0;
+            padding: 0.5rem 0;
             font-weight: normal;
 
             &.today {
@@ -41,13 +41,13 @@ $gantt-vertical-border-color: lighten($grey, 45);
             }
 
             .theday {
-              padding: 0 .5em;
+              padding: 0 .5rem;
               width: 100%;
               display: block;
             }
 
             .weekday {
-              font-size: 0.8em;
+              font-size: 0.8rem;
             }
           }
         }
@@ -66,11 +66,10 @@ $gantt-vertical-border-color: lighten($grey, 45);
       .task {
         display: inline-block;
         border: 2px solid $primary;
-        background: lighten($primary, 40);
-        font-size: 0.85em;
-        margin: 0.5em;
+        font-size: 0.85rem;
+        margin: 0.5rem;
         border-radius: 6px;
-        padding: 0.25em 0.5em;
+        padding: 0.25rem 0.5rem;
         cursor: grab;
         position: relative;
 
@@ -147,7 +146,7 @@ $gantt-vertical-border-color: lighten($grey, 45);
         }
 
         .high-priority {
-          margin: 0 0 0 .5em;
+          margin: 0 0 0 .5rem;
           vertical-align: bottom;
         }
 
@@ -158,8 +157,8 @@ $gantt-vertical-border-color: lighten($grey, 45);
         }
 
         &.nodate {
-          border: 2px dashed $grey-light;
-          background: lighten($grey-light, 40);
+          border: 2px dashed $grey-300;
+          background: $grey-100;
         }
 
         &:active {
@@ -183,17 +182,17 @@ $gantt-vertical-border-color: lighten($grey, 45);
   }
 
   .add-new-task {
-    padding: 1em .7em .4em .7em;
+    padding: 1rem .7rem .4rem .7rem;
     display: flex;
     max-width: 450px;
 
     .input {
-      margin-right: .7em;
-      font-size: .8em;
+      margin-right: .7rem;
+      font-size: .8rem;
     }
 
     .button {
-      font-size: .68em;
+      font-size: .68rem;
     }
   }
 
@@ -209,14 +208,14 @@ $gantt-vertical-border-color: lighten($grey, 45);
 
   .range-picker {
     display: flex;
-    margin-bottom: 1em;
+    margin-bottom: 1rem;
 
     .field {
-      margin: 0 0 0 .5em;
+      margin: 0 0 0 .5rem;
       max-width: 100px;
 
       &, .input {
-        font-size: .8em;
+        font-size: .8rem;
       }
 
       .select {
@@ -225,12 +224,12 @@ $gantt-vertical-border-color: lighten($grey, 45);
 
       select {
         height: auto;
-        font-size: 0.75em;
+        font-size: 0.75rem;
       }
 
       .label {
-        font-size: .9em;
-        padding-left: .4em;
+        font-size: .9rem;
+        padding-left: .4rem;
       }
     }
   }
diff --git a/src/styles/components/kanban.scss b/src/styles/components/kanban.scss
index e760d9605..99dcc4351 100644
--- a/src/styles/components/kanban.scss
+++ b/src/styles/components/kanban.scss
@@ -3,7 +3,7 @@ $task-background: $white;
 $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1);
 $bucket-width: 300px;
 
-$crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
+$crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1rem - 1.5rem - 11px';
 
 .app-content.list\.kanban {
   padding-bottom: 0;
@@ -17,22 +17,21 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
   overflow-y: hidden;
   height: calc(#{$crazy-height-calculation});
   margin: 0 -1.5rem;
-  padding: 0 1.5em;
+  padding: 0 1.5rem;
 
   .bucket {
-
     background-color: $bucket-background;
     border-radius: $radius;
     position: relative;
 
     flex: 0 0 $bucket-width;
-    margin: 0 1em 0 0;
+    margin: 0 1rem 0 0;
     max-height: 100%;
     min-height: 20px;
     max-width: $bucket-width;
 
     .tasks {
-      max-height: calc(#{$crazy-height-calculation} - 1rem - 2.5rem - 2em - #{$button-height} - 1em);
+      max-height: calc(#{$crazy-height-calculation} - 1rem - 2.5rem - 2rem - #{$button-height} - 1rem);
       overflow: auto;
 
       .task {
@@ -50,20 +49,20 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
 
         transition: $ease-out;
         cursor: pointer;
-        box-shadow: 2px 2px 2px darken($white, 12%);
+        box-shadow: $shadow-xs;
         display: block;
 
-        font-size: .9em;
-        padding: .5em;
-        margin: .5em;
+        font-size: .9rem;
+        padding: .5rem;
+        margin: .5rem;
         border-radius: $radius;
         background: $task-background;
 
         &.loader-container.is-loading:after {
-          width: 1.5em;
-          height: 1.5em;
-          top: calc(50% - .75em);
-          left: calc(50% - .75em);
+          width: 1.5rem;
+          height: 1.5rem;
+          top: calc(50% - .75rem);
+          left: calc(50% - .75rem);
           border-width: 2px;
         }
 
@@ -94,7 +93,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
         }
 
         .label-wrapper .tag {
-          margin: .5em .5em 0 0;
+          margin: .5rem .5rem 0 0;
         }
 
         .footer {
@@ -128,7 +127,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
 
           .priority-label {
             font-size: .75rem;
-            height: 2em;
+            height: 2rem;
 
             .icon {
               height: 1rem;
@@ -141,7 +140,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
         .footer .icon,
         .due-date,
         .priority-label {
-          background: darken($task-background, 5%);
+          background: $grey-100;
           border-radius: $radius;
           padding: 0 .5rem;
         }
@@ -151,14 +150,14 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
         }
 
         .task-id {
-          color: $grey;
+          color: $grey-500;
           font-size: .8rem;
         }
 
         .is-done {
           margin: 0;
-          font-size: .8em;
-          padding: .25em .5em;
+          font-size: .8rem;
+          padding: .25rem .5rem;
         }
 
         &.is-moving {
@@ -173,13 +172,13 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
           color: $white;
 
           .task-id {
-            color: $grey-lighter;
+            color: $grey-200;
           }
 
           .footer .icon,
           .due-date,
           .priority-label {
-            background: darken($task-background, 80%);
+            background: $grey-800;
           }
 
           .footer {
@@ -192,9 +191,9 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
 
       .drop-preview {
         border-radius: $radius;
-        margin: 0 .5em .5em;
+        margin: 0 .5rem .5rem;
         background: transparent;
-        border: 3px dashed darken($bucket-background, 5%);
+        border: 3px dashed $grey-300;
       }
     }
 
@@ -228,7 +227,7 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: .5em;
+    padding: .5rem;
 
     .limit {
       padding-left: .5rem;
@@ -245,13 +244,13 @@ $crazy-height-calculation: '100vh - 4.5rem - 1.5rem - 1em - 1.5em - 11px';
 
     .title.input {
       height: auto;
-      padding: .4em .5em;
+      padding: .4rem .5rem;
       display: inline-block;
     }
   }
 
   .bucket-footer {
-    padding: .5em;
+    padding: .5rem;
 
     .button {
       background-color: transparent;
diff --git a/src/styles/components/keyboard-shortcuts.scss b/src/styles/components/keyboard-shortcuts.scss
index 2fabb3a14..892fb07c9 100644
--- a/src/styles/components/keyboard-shortcuts.scss
+++ b/src/styles/components/keyboard-shortcuts.scss
@@ -4,7 +4,7 @@
   right: 1rem;
   z-index: 4500; // The modal has a z-index of 4000
 
-  color: $grey;
+  color: $grey-500;
   transition: color $transition;
 }
 
@@ -33,8 +33,8 @@
 
         span {
           padding: .1rem .35rem;
-          border: 1px solid $grey-light;
-          background: lighten($grey-lightest, 2.5);
+          border: 1px solid $grey-300;
+          background: $grey-100;
           border-radius: 3px;
           font-size: .75rem;
         }
diff --git a/src/styles/components/labels.scss b/src/styles/components/labels.scss
index f851be5e5..2037afb75 100644
--- a/src/styles/components/labels.scss
+++ b/src/styles/components/labels.scss
@@ -5,7 +5,7 @@
 
   .tag {
     margin: .5rem 0 .5rem .5rem;
-    background: darken($background, 5);
+    background: $grey-200;
 
     &.disabled {
       opacity: 0.7;
diff --git a/src/styles/components/legal.scss b/src/styles/components/legal.scss
index 077154318..2a63faa54 100644
--- a/src/styles/components/legal.scss
+++ b/src/styles/components/legal.scss
@@ -1,6 +1,6 @@
 .legal-links {
   margin-top: 1rem;
   text-align: right;
-  color: $grey-light;
+  color: $grey-300;
   font-size: 1rem;
 }
\ No newline at end of file
diff --git a/src/styles/components/list-backgrounds.scss b/src/styles/components/list-backgrounds.scss
index 31dd497e4..c156e692f 100644
--- a/src/styles/components/list-backgrounds.scss
+++ b/src/styles/components/list-backgrounds.scss
@@ -5,19 +5,19 @@
     font-size: .8rem;
 
     a {
-      color: $grey-dark;
+      color: $grey-800;
     }
   }
 
   .image-search-result {
-    margin-top: 1em;
+    margin-top: 1rem;
     display: flex;
     flex-flow: row wrap;
 
     .image {
-      width: calc(100% / 5 - 1em);
+      width: calc(100% / 5 - 1rem);
       height: 120px;
-      margin: .5em;
+      margin: .5rem;
       background-size: cover;
       background-position: center;
       display: flex;
@@ -30,7 +30,7 @@
       }
 
       @media screen and (max-width: $desktop) {
-        width: calc(100% / 4 - 1em);
+        width: calc(100% / 4 - 1rem);
 
         &:nth-child(4n) {
           page-break-after: always; // CSS 2.1 syntax
@@ -39,7 +39,7 @@
       }
 
       @media screen and (max-width: $tablet) {
-        width: calc(100% / 2 - 1em);
+        width: calc(100% / 2 - 1rem);
 
         &:nth-child(2n) {
           page-break-after: always; // CSS 2.1 syntax
@@ -48,7 +48,7 @@
       }
 
       @media screen and (max-width: ($mobile)) {
-        width: calc(100% - 1em);
+        width: calc(100% - 1rem);
 
         &:nth-child(1n) {
           page-break-after: always; // CSS 2.1 syntax
@@ -61,10 +61,10 @@
         display: block;
         opacity: 0;
         width: 100%;
-        padding: .25em 0;
+        padding: .25rem 0;
         text-align: center;
         background: rgba(0, 0, 0, 0.5);
-        font-size: .75em;
+        font-size: .75rem;
         font-weight: bold;
         color: $white;
         transition: opacity $transition;
diff --git a/src/styles/components/list.scss b/src/styles/components/list.scss
index 35708005f..7a5b94539 100644
--- a/src/styles/components/list.scss
+++ b/src/styles/components/list.scss
@@ -10,7 +10,7 @@
   }
 
   .table {
-    border-top: 1px solid darken(#fff, 15%);
+    border-top: 1px solid $grey-100;
     border-radius: 4px;
     overflow: hidden;
 
@@ -29,7 +29,7 @@
 }
 
 .task-add .button {
-  padding: 10px 1em;
+  padding: 10px 1rem;
   height: 40px;
 }
 
@@ -48,7 +48,7 @@
   }
 
   .icon {
-    color: $grey-almost-light;
+    color: $grey-400;
     margin-left: 1rem;
     height: 1rem;
     width: 1rem;
@@ -56,7 +56,7 @@
 }
 
 .edit-list {
-  padding-bottom: 1em;
+  padding-bottom: 1rem;
 }
 
 .filter-container {
@@ -65,7 +65,7 @@
   min-width: 400px;
   max-width: 180px;
   position: absolute;
-  right: 1.5em;
+  right: 1.5rem;
   margin-top: -59px;
   z-index: 4;
 
@@ -74,7 +74,7 @@
     justify-content: flex-end;
 
     .button:not(:last-child) {
-      margin-right: .5em;
+      margin-right: .5rem;
     }
   }
 
@@ -95,7 +95,7 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
-    margin-right: .5em;
+    margin-right: .5rem;
 
     .button, .input {
       height: $switch-view-height;
@@ -119,7 +119,7 @@
   }
 
   .filters input {
-    font-size: .9em;
+    font-size: .9rem;
   }
 
   @media screen and (max-width: $tablet) {
@@ -157,5 +157,5 @@
 }
 
 .list-namespace-title {
-  color: $grey;
+  color: $grey-500;
 }
diff --git a/src/styles/components/migrator.scss b/src/styles/components/migrator.scss
index fbfbe8090..a05f1066b 100644
--- a/src/styles/components/migrator.scss
+++ b/src/styles/components/migrator.scss
@@ -5,7 +5,7 @@
     display: inline-block;
     width: 100px;
     text-transform: capitalize;
-    margin-right: 1em;
+    margin-right: 1rem;
 
     img {
       display: block;
@@ -15,7 +15,7 @@
 
 .migration-in-progress-container {
   max-width: 400px;
-  margin: 4em auto 0;
+  margin: 4rem auto 0;
   text-align: center;
 }
 
@@ -25,7 +25,7 @@
   max-width: 400px;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 2em;
+  margin-bottom: 2rem;
 
   img {
     display: block;
@@ -39,7 +39,7 @@
 
     span {
       transition: all 500ms ease;
-      background: $grey;
+      background: $grey-500;
       height: 10px;
       width: 10px;
       display: inline-block;
diff --git a/src/styles/components/modal.scss b/src/styles/components/modal.scss
index a9cd3f795..1805700bf 100644
--- a/src/styles/components/modal.scss
+++ b/src/styles/components/modal.scss
@@ -54,7 +54,7 @@
       top: 5px;
       right: 26px;
       color: $white;
-      font-size: 2em;
+      font-size: 2rem;
     }
   }
 }
diff --git a/src/styles/components/namespaces.scss b/src/styles/components/namespaces.scss
index fd0fb6b61..6ed934631 100644
--- a/src/styles/components/namespaces.scss
+++ b/src/styles/components/namespaces.scss
@@ -32,7 +32,7 @@ $lists-per-row: 5;
 
     .is-archived {
       font-size: 0.75rem;
-      border: 1px solid $grey;
+      border: 1px solid $grey-500;
       color: $grey !important;
       padding: 2px 4px;
       border-radius: 3px;
@@ -53,7 +53,7 @@ $lists-per-row: 5;
         margin: 0 1rem 1rem 0;
         padding: 1rem;
         border-radius: $radius;
-        box-shadow: 0.3em 0.3em 1em lighten($dark, 75);
+        box-shadow: $shadow-sm;
         transition: box-shadow $transition;
 
         display: flex;
@@ -61,7 +61,13 @@ $lists-per-row: 5;
         flex-wrap: wrap;
 
         &:hover {
-          box-shadow: 0 0 1em lighten($dark, 65);
+          box-shadow: $shadow-md;
+        }
+
+        &:active,
+        &:focus,
+        &:focus:not(:active) {
+          box-shadow: $shadow-xs !important;
         }
 
         @media screen and (min-width: $widescreen) {
@@ -105,7 +111,7 @@ $lists-per-row: 5;
           text-align: right;
 
           .is-archived {
-            font-size: .75em;
+            font-size: .75rem;
             float: left;
           }
         }
@@ -130,7 +136,7 @@ $lists-per-row: 5;
           background-position: center;
 
           .title {
-            text-shadow: 0 0 10px $black, 1px 1px 5px $grey-darker, -1px -1px 5px $grey-darker;
+            text-shadow: 0 0 10px $black, 1px 1px 5px $grey-700, -1px -1px 5px $grey-700;
             color: $white;
           }
         }
diff --git a/src/styles/components/switch-view.scss b/src/styles/components/switch-view.scss
index ef3efccf9..5827b981a 100644
--- a/src/styles/components/switch-view.scss
+++ b/src/styles/components/switch-view.scss
@@ -1,16 +1,16 @@
 .switch-view {
   background: $white;
-  display: inline-block;
+  display: inline-flex;
   border-radius: $radius;
-  font-size: .8em;
-  box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
+  font-size: .75rem;
+  box-shadow: $shadow-sm;
   height: $switch-view-height;
   margin-bottom: 1rem;
-  
+  padding: .5rem;
+
   a {
-    padding: .5em;
-    display: inline-block;
-    margin: .4em;
+    padding: .25rem .5rem;
+    display: block;
     border-radius: $radius;
 
     -webkit-transition: all 100ms;
@@ -20,7 +20,7 @@
     transition: all 100ms;
 
     &:not(:last-child) {
-      margin-right: 0;
+      margin-right: .5rem;
     }
 
     &.is-active, &:hover {
@@ -30,11 +30,11 @@
     &.is-active {
       background: $primary;
       font-weight: bold;
-      box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
+      box-shadow: $shadow-xs;
     }
 
     &:hover {
-      background: lighten($primary, 5);
+      background: $primary;
     }
   }
 }
diff --git a/src/styles/components/table-view.scss b/src/styles/components/table-view.scss
index 542457c08..74505abfe 100644
--- a/src/styles/components/table-view.scss
+++ b/src/styles/components/table-view.scss
@@ -9,7 +9,7 @@
     }
 
     .is-done {
-      font-size: .9em;
+      font-size: .9rem;
       margin: 0;
     }
   }
diff --git a/src/styles/components/task.scss b/src/styles/components/task.scss
index fda55fe4d..0938992c5 100644
--- a/src/styles/components/task.scss
+++ b/src/styles/components/task.scss
@@ -1,14 +1,14 @@
 .task-view {
   // This is a workaround to hide the llama background from the top on the task detail page
-  margin-top: -1.5em;
-  padding: 1em;
+  margin-top: -1.5rem;
+  padding: 1rem;
   background-color: $light-background;
 
   .subtitle {
-    color: $grey;
+    color: $grey-500;
 
     a {
-      color: $grey-dark;
+      color: $grey-800;
     }
   }
 
@@ -17,7 +17,7 @@
   }
 
   .icon.is-grey {
-    color: lighten($grey, 5%);
+    color: $grey-400;
   }
 
   .heading {
@@ -30,13 +30,13 @@
       margin-bottom: 0;
 
       &.input {
-        // 1.8rem is the font-size, 1.125 is the line-height, .3em padding everywhere, 1px border around the whole thing.
-        min-height: calc(1.8rem * 1.125 + .6em + 2px);
+        // 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
+        min-height: calc(1.8rem * 1.125 + .6rem + 2px);
       }
     }
 
     .title.task-id {
-      color: lighten($grey, 25%);
+      color: $grey-400;
       white-space: nowrap;
     }
 
@@ -45,7 +45,7 @@
       align-items: start;
 
       .title.input {
-        margin: 0 -.3em .5rem -.3em; // the title has 0.3em padding - this make the text inside of it align with the rest
+        margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
       }
     }
   }
@@ -57,7 +57,7 @@
     a.remove {
       color: $red;
       vertical-align: middle;
-      padding-left: .5em;
+      padding-left: .5rem;
       line-height: 1;
     }
   }
@@ -93,12 +93,12 @@
   }
 
   .details {
-    padding-bottom: 0.75em;
+    padding-bottom: 0.75rem;
     flex-flow: row wrap;
 
     .detail-title {
       display: block;
-      color: lighten($grey, 15%);
+      color: $grey-400;
     }
 
     .none {
@@ -187,14 +187,14 @@
   .action-buttons {
     a.button {
       width: 100%;
-      margin-bottom: .5em;
+      margin-bottom: .5rem;
       justify-content: left;
     }
   }
 
   .created {
     font-size: .75rem;
-    color: $grey;
+    color: $grey-500;
     text-align: right;
   }
 }
@@ -223,9 +223,9 @@
 .is-done {
   background: $green;
   color: $white;
-  padding: .5em;
-  font-size: 1.5em;
-  margin-left: .5em;
+  padding: .5rem;
+  font-size: 1.5rem;
+  margin-left: .5rem;
   font-weight: bold;
   line-height: 1;
   border-radius: 4px;
@@ -234,7 +234,7 @@
 
 .modal-container .task-view {
   border-radius: $radius;
-  padding: 1em;
+  padding: 1rem;
   color: $text;
   background-color: $light-background !important;
 
diff --git a/src/styles/components/taskRelations.scss b/src/styles/components/taskRelations.scss
index 60f505875..d45a9e391 100644
--- a/src/styles/components/taskRelations.scss
+++ b/src/styles/components/taskRelations.scss
@@ -11,7 +11,7 @@ $remove-icon-width: 24px;
 
   .related-tasks {
     .title {
-      font-size: 1em;
+      font-size: 1rem;
       margin: 0;
     }
 
@@ -21,14 +21,9 @@ $remove-icon-width: 24px;
       a:not(.remove) {
         width: calc(100% - #{$remove-icon-width});
 
-        .task {
-          padding: .5em;
-          max-width: 100%;
-
-          .different-list {
-            color: lighten($dark, 50);
-            width: auto;
-          }
+        .different-list {
+          color: $grey-500;
+          width: auto;
         }
       }
 
diff --git a/src/styles/components/tasks.scss b/src/styles/components/tasks.scss
index 78267fedd..023b4cef6 100644
--- a/src/styles/components/tasks.scss
+++ b/src/styles/components/tasks.scss
@@ -21,13 +21,13 @@
     display: flex;
     flex-wrap: wrap;
     padding: 0.5rem 1rem;
-    border-bottom: 1px solid darken(#fff, 10%);
+    border-bottom: 1px solid $grey-200;
     transition: background-color $transition;
     align-items: center;
     cursor: pointer;
 
     &:hover {
-      background-color: darken($light-background, 3);
+      background-color: $grey-200;
     }
 
     .tasktext,
@@ -45,8 +45,8 @@
 
     .task-list {
       width: auto;
-      color: lighten($grey, 25%);
-      font-size: .9em;
+      color: $grey-400;
+      font-size: .9rem;
       white-space: nowrap;
     }
 
@@ -60,7 +60,7 @@
     }
 
     .tag {
-      margin: 0 0.5em;
+      margin: 0 0.5rem;
     }
 
     .avatar {
@@ -85,7 +85,7 @@
       transition: color ease $transition-duration;
 
       &:hover {
-        color: darken($text, 40%);
+        color: $grey-900;
       }
     }
 
@@ -120,11 +120,11 @@
 
     .tasktext.done {
       text-decoration: line-through;
-      color: $grey;
+      color: $grey-500;
     }
 
     span.parent-tasks {
-      color: lighten($dark, 50);
+      color: $grey-500;
       width: auto;
     }
 
@@ -143,12 +143,12 @@
     }
 
     &.loader-container.is-loading:after {
-      top: calc(50% - 1em);
-      left: calc(50% - 1em);
-      width: 2em;
-      height: 2em;
-      border-left-color: $grey-light;
-      border-bottom-color: $grey-light;
+      top: calc(50% - 1rem);
+      left: calc(50% - 1rem);
+      width: 2rem;
+      height: 2rem;
+      border-left-color: $grey-300;
+      border-bottom-color: $grey-300;
     }
   }
 
@@ -189,7 +189,6 @@
   min-height: calc(100% - 1rem);
   margin-top: 1rem;
 
-
   .priority-select {
     .select, select {
       width: 100%;
@@ -201,23 +200,19 @@
     margin: 0;
 
     li {
-      padding: 0.5em 0.5em 0;
+      padding: 0.5rem 0.5rem 0;
 
       a {
         float: right;
         color: $red;
         transition: all $transition;
-
-        &:hover {
-          color: darken($red, 15);
-        }
       }
     }
   }
 
   .tag {
-    margin-right: 0.5em;
-    margin-bottom: 0.5em;
+    margin-right: 0.5rem;
+    margin-bottom: 0.5rem;
 
     &:last-child {
       margin-right: 0;
@@ -231,7 +226,7 @@
 
     &.nothing {
       text-align: center;
-      margin-top: 3em;
+      margin-top: 3rem;
     }
 
     .input {
@@ -242,7 +237,7 @@
   }
 
   img {
-    margin-top: 2em;
+    margin-top: 2rem;
   }
 
   .user img{
@@ -250,7 +245,7 @@
   }
 
   .spinner.is-loading:after {
-    margin-left: calc(40% - 1em);
+    margin-left: calc(40% - 1rem);
   }
 }
 
@@ -261,7 +256,7 @@
   width: 100%;
   max-width: $defer-task-max-width;
   border-radius: $radius;
-  border: 1px solid $grey-lighter;
+  border: 1px solid $grey-200;
   padding: 1rem;
   margin: 1rem;
   background: $white;
diff --git a/src/styles/components/teams.scss b/src/styles/components/teams.scss
index 2cdafc118..acf5b4a74 100644
--- a/src/styles/components/teams.scss
+++ b/src/styles/components/teams.scss
@@ -12,9 +12,10 @@ ul.teams {
       color: #363636;
       display: block;
       padding: 0.5rem 1rem;
+      transition: background-color $transition;
 
       &:hover {
-        background: darken(#fff, 2%);
+        background: $grey-100;
       }
     }
   }
diff --git a/src/styles/theme/_all.scss b/src/styles/theme/_all.scss
index 3f31bfd2e..eaec17757 100644
--- a/src/styles/theme/_all.scss
+++ b/src/styles/theme/_all.scss
@@ -1,4 +1,4 @@
-@import 'variables';
+@import 'variables/all';
 @import 'theme';
 
 @import 'content';
diff --git a/src/styles/theme/background.scss b/src/styles/theme/background.scss
index 88694286b..a6f4239c1 100644
--- a/src/styles/theme/background.scss
+++ b/src/styles/theme/background.scss
@@ -42,7 +42,7 @@
 
   .task-view {
     border-radius: $radius;
-    margin-top: 1em;
+    margin-top: 1rem;
   }
 
   .kanban .tasks {
diff --git a/src/styles/theme/content.scss b/src/styles/theme/content.scss
index 82e27b093..e03677fe9 100644
--- a/src/styles/theme/content.scss
+++ b/src/styles/theme/content.scss
@@ -5,7 +5,7 @@
   }
 
   .app-content {
-    padding: $navbar-height + 1.5rem 1.5em 1rem 1.5em;
+    padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
     z-index: 2;
 
     &.is-menu-enabled {
@@ -14,7 +14,7 @@
 
     @media screen and (max-width: $tablet) {
       margin-left: 0;
-      padding-top: 1.5em;
+      padding-top: 1.5rem;
       min-height: calc(100vh - 4rem);
 
       &.is-menu-enabled {
@@ -52,7 +52,7 @@
 }
 
 .media-content {
-  width: calc(100% - 48px - 2em);
+  width: calc(100% - 48px - 2rem);
 }
 
 .content h3 {
diff --git a/src/styles/theme/form.scss b/src/styles/theme/form.scss
index af4e34237..080adc793 100644
--- a/src/styles/theme/form.scss
+++ b/src/styles/theme/form.scss
@@ -5,11 +5,11 @@
   font-size: 0.85rem;
   font-weight: bold;
   height: $button-height;
-  box-shadow: .2rem 0.2rem .5rem $grey-lighter;
+  box-shadow: $shadow-sm;
 
   &.is-hovered,
   &:hover {
-    box-shadow: .1rem .1rem 1rem $grey-lighter;
+    box-shadow: $shadow-md;
   }
 
   &.fullheight {
@@ -22,7 +22,7 @@
   &:active,
   &:focus,
   &:focus:not(:active) {
-    box-shadow: .1rem .1rem .75rem $grey-lighter !important;
+    box-shadow: $shadow-xs !important;
   }
 
   &.is-primary.is-outlined:hover {
@@ -60,21 +60,21 @@
       &:active,
       &:focus,
       &:focus:not(:active) {
-        border-color: darken($color, 10);
+        border-color: $color;
       }
     }
   }
 }
 
 .select:after {
-  margin-top: -0.575em;
+  margin-top: -0.575rem;
 }
 
 .select select {
   border-width: $thickness;
 
   &:not([multiple]) {
-    height: calc(2.25em + #{$thickness});
+    height: calc(2.25rem + #{$thickness});
   }
 
   &.is-active,
@@ -119,9 +119,9 @@
   font-weight: 400 !important;
   background: transparent;
   border-color: transparent;
-  margin: 0 .3em;
+  margin: 0 .3rem;
   height: auto;
-  padding: .3em;
+  padding: .3rem;
 
   &:focus {
     background: $input-background-color;
diff --git a/src/styles/theme/link-share.scss b/src/styles/theme/link-share.scss
index a2ab1c579..449c9e334 100644
--- a/src/styles/theme/link-share.scss
+++ b/src/styles/theme/link-share.scss
@@ -2,7 +2,7 @@
   .logo {
     max-width: 500px;
     width: 90%;
-    margin: 2em 0 4em;
+    margin: 2rem 0 4rem;
   }
 
   .logout {
diff --git a/src/styles/theme/loading.scss b/src/styles/theme/loading.scss
index a3f4ec154..ca2dea43d 100644
--- a/src/styles/theme/loading.scss
+++ b/src/styles/theme/loading.scss
@@ -7,11 +7,11 @@
     &:after {
       @include loader;
       position: absolute;
-      top: calc(50% - 2.5em);
-      left: calc(50% - 2.5em);
-      width: 5em;
-      height: 5em;
-      border-width: 0.25em;
+      top: calc(50% - 2.5rem);
+      left: calc(50% - 2.5rem);
+      width: 5rem;
+      height: 5rem;
+      border-width: 0.25rem;
     }
   }
 }
@@ -22,13 +22,13 @@
 
     &:after {
       @include loader;
-      width: 2em;
-      height: 2em;
-      margin-left: calc(50% - 1em);
+      width: 2rem;
+      height: 2rem;
+      margin-left: calc(50% - 1rem);
       position: absolute;
-      margin-top: 1em;
+      margin-top: 1rem;
       z-index: 999;
-      border-width: 0.25em;
+      border-width: 0.25rem;
     }
   }
 }
diff --git a/src/styles/theme/navigation.scss b/src/styles/theme/navigation.scss
index dc2314216..19881babb 100644
--- a/src/styles/theme/navigation.scss
+++ b/src/styles/theme/navigation.scss
@@ -1,15 +1,6 @@
 .navbar {
   z-index: 2;
 
-  @each $name, $pair in $colors {
-    $color: nth($pair, 1);
-    $color-invert: nth($pair, 2);
-
-    &.is-#{$name} {
-      border-color: darken($color, 5);
-    }
-  }
-
   .navbar-dropdown {
     box-shadow: $navbar-dropdown-boxed-shadow;
     top: 101%;
@@ -99,7 +90,7 @@
 }
 
 .navbar-menu .navbar-item .icon {
-  margin: 0 0.5em;
+  margin: 0 0.5rem;
 }
 
 .navbar {
@@ -119,7 +110,7 @@
     overflow-x: auto;
     width: $navbar-width;
 
-    padding: 0 0 1em;
+    padding: 0 0 1rem;
     left: -147vw;
     bottom: 0;
 
@@ -134,13 +125,13 @@
 
     .menu {
       .menu-label {
-        font-size: 1em;
+        font-size: 1rem;
         font-weight: 700;
         font-weight: bold;
         font-family: $vikunja-font;
-        color: $grey;
+        color: $vikunja-nav-color;
         font-weight: 500;
-        min-height: 2.5em;
+        min-height: 2.5rem;
         padding-top: 0;
         padding-left: $navbar-padding;
 
@@ -246,9 +237,9 @@
         opacity: 0;
         height: 0;
         text-align: center;
-        color: $grey;
+        color: $grey-500;
         cursor: pointer;
-        font-size: 0.8em;
+        font-size: 0.8rem;
       }
 
       .menu-list {
@@ -264,7 +255,7 @@
         }
 
         span.list-menu-link, a {
-          padding: 0.75em .5em 0.75em $navbar-padding * 1.5;
+          padding: 0.75rem .5rem 0.75rem $navbar-padding * 1.5;
           transition: all 0.2s ease;
 
           -webkit-border-radius: 0;
@@ -280,12 +271,12 @@
             height: 1rem;
             vertical-align: middle;
             padding-bottom: 4px;
-            padding-right: 0.5em;
+            padding-right: 0.5rem;
           }
 
           &.router-link-exact-active {
             color: $primary;
-            border-left: $vikunja-nav-selected-width solid darken($primary, 5%);
+            border-left: $vikunja-nav-selected-width solid $primary;
 
             .icon {
               color: $primary;
@@ -294,7 +285,7 @@
 
           &:hover {
             background: $white;
-            border-left: $vikunja-nav-selected-width solid darken($primary, 3%);
+            border-left: $vikunja-nav-selected-width solid $primary;
           }
 
         }
@@ -313,15 +304,15 @@
       }
 
       &.loader-container.is-loading:after {
-        width: 1.5em;
-        height: 1.5em;
-        top: calc(50% - .75em);
-        left: calc(50% - .75em);
+        width: 1.5rem;
+        height: 1.5rem;
+        top: calc(50% - .75rem);
+        left: calc(50% - .75rem);
         border-width: 2px;
       }
 
       .icon {
-        color: $grey-almost-light;
+        color: $grey-400;
       }
     }
 
@@ -335,7 +326,7 @@
         }
 
         span.list-menu-link, a {
-          padding-left: 2em;
+          padding-left: 2rem;
           display: inline-block;
         }
       }
@@ -357,7 +348,7 @@
   }
 
   .logout-icon {
-    color: lighten($black, 10);
+    color: $grey-900;
 
     .icon {
       vertical-align: middle;
@@ -377,7 +368,7 @@
 
   .dropdown-menu {
     .dropdown-content {
-      box-shadow: 0.3em 0.3em 0.8em darken($light, 6);
+      box-shadow: $shadow-md;
     }
   }
 }
@@ -386,12 +377,12 @@
   display: none;
   z-index: 31;
   font-weight: bold;
-  font-size: 2em;
+  font-size: 2rem;
   color: $dark;
   line-height: 1;
 
   &:hover, &:focus {
-    color: darken($dark, 20);
+    color: $grey-900;
   }
 }
 
@@ -443,14 +434,14 @@
 }
 
 .logout-icon {
-  margin-right: 0.85em !important;
+  margin-right: 0.85rem !important;
 }
 
 .menu-bottom-link {
   width: 100%;
-  color: $grey-light;
+  color: $grey-300;
   text-align: center;
   display: block;
-  margin: 1em 0;
-  font-size: .8em;
+  margin: 1rem 0;
+  font-size: .8rem;
 }
diff --git a/src/styles/theme/notification.scss b/src/styles/theme/notification.scss
index ce0ea83ba..7944d77f5 100644
--- a/src/styles/theme/notification.scss
+++ b/src/styles/theme/notification.scss
@@ -1,18 +1,10 @@
 .notification {
   border: $thickness solid $border;
-
-  @each $name, $pair in $colors {
-    $color: nth($pair, 1);
-
-    &.is-#{$name} {
-      border-color: darken($color, 5);
-    }
-  }
 }
 
 .notifications {
-  left: 0.5em !important;
-  bottom: 1em !important;
+  left: 0.5rem !important;
+  bottom: 1rem !important;
 
   .notification-wrapper .notification {
     -webkit-border-radius: 0;
@@ -21,7 +13,7 @@
     border-top-width: 0;
     border-right-width: 0;
     border-bottom-width: 0;
-    border-left-width: 0.4em;
+    border-left-width: 0.4rem;
   }
 }
 
diff --git a/src/styles/theme/offline.scss b/src/styles/theme/offline.scss
index 1d514a91f..89e0607a2 100644
--- a/src/styles/theme/offline.scss
+++ b/src/styles/theme/offline.scss
@@ -10,15 +10,15 @@
     width: 100vw;
     bottom: 5vh;
     color: $white;
-    padding: 0 1em;
+    padding: 0 1rem;
 
     h1 {
       font-weight: bold;
-      font-size: 1.5em;
+      font-size: 1.5rem;
       text-align: center;
       color: $white;
       font-weight: 700 !important;
-      font-size: 1.5em;
+      font-size: 1.5rem;
     }
   }
 }
diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss
index 18c740064..b036f8ba0 100644
--- a/src/styles/theme/theme.scss
+++ b/src/styles/theme/theme.scss
@@ -81,7 +81,7 @@ button.table {
 }
 
 .pagination {
-  padding-bottom: 1em;
+  padding-bottom: 1rem;
 
   .pagination-previous,
   .pagination-next {
diff --git a/src/styles/theme/update-notification.scss b/src/styles/theme/update-notification.scss
index 299e4e70f..36cda4225 100644
--- a/src/styles/theme/update-notification.scss
+++ b/src/styles/theme/update-notification.scss
@@ -1,18 +1,18 @@
 .update-notification {
-  margin: 1em;
+  margin: 1rem;
   display: flex;
   align-items: center;
   background: $warning;
-  padding: 0 0 0 .5em;
+  padding: 0 0 0 .5rem;
   border-radius: $radius;
-  font-size: .9em;
-  color: darken($dark, 5);
+  font-size: .9rem;
+  color: $grey-900;
   justify-content: space-between;
 
   @media screen and (max-width: $desktop) {
     & {
       position: fixed;
-      bottom: 1em;
+      bottom: 1rem;
       margin: 0;
       width: 450px;
       left: calc(50vw - 225px);
@@ -22,9 +22,9 @@
   @media screen and (max-width: $tablet) {
     & {
       position: fixed;
-      left: 1em;
-      right: 1em;
-      bottom: 1em;
+      left: 1rem;
+      right: 1rem;
+      bottom: 1rem;
       width: auto;
     }
   }
@@ -35,6 +35,6 @@
   }
 
   .button {
-    margin-left: .5em;
+    margin-left: .5rem;
   }
 }
diff --git a/src/styles/theme/variables/_all.scss b/src/styles/theme/variables/_all.scss
new file mode 100644
index 000000000..bea5be250
--- /dev/null
+++ b/src/styles/theme/variables/_all.scss
@@ -0,0 +1,3 @@
+@import 'colors';
+@import 'shadows';
+@import 'variables';
\ No newline at end of file
diff --git a/src/styles/theme/variables/colors.scss b/src/styles/theme/variables/colors.scss
new file mode 100644
index 000000000..d9e320504
--- /dev/null
+++ b/src/styles/theme/variables/colors.scss
@@ -0,0 +1,17 @@
+$grey-100: #f3f4f6;
+$grey-200: #E5E7EB;
+$grey-300: #D1D5DB;
+$grey-400: #9CA3AF;
+$grey-500: #6B7280;
+$grey-600: #4B5563;
+$grey-700: #374151;
+$grey-800: #1F2937;
+$grey-900: #111827;
+
+// Bulma defaults
+$grey-dark: $grey-800;
+$grey-darker: $grey-700;
+$grey: $grey-500;
+$grey-light: $grey-300;
+$grey-lighter: $grey-200;
+$grey-lightest: $grey-100;
diff --git a/src/styles/theme/variables/shadows.scss b/src/styles/theme/variables/shadows.scss
new file mode 100644
index 000000000..5782efd99
--- /dev/null
+++ b/src/styles/theme/variables/shadows.scss
@@ -0,0 +1,5 @@
+$shadow-xs: 0 1px 3px rgba($grey-500, .12), 0 1px 2px rgba($grey-500, .24);
+$shadow-sm: 0 3px 6px rgba($grey-500, .12), 0 2px 4px rgba($grey-500, .10);
+$shadow-md: 0 10px 20px rgba($grey-500, .12), 0 3px 6px rgba($grey-500, .08);
+$shadow-lg: 0 15px 25px rgba($grey-500, .12), 0 5px 10px rgba($grey-500, .05);
+$shadow-xl: 0 20px 40px rgba($grey-500, .2);
diff --git a/src/styles/theme/variables.scss b/src/styles/theme/variables/variables.scss
similarity index 59%
rename from src/styles/theme/variables.scss
rename to src/styles/theme/variables/variables.scss
index 0445400a7..b0f3d7e10 100644
--- a/src/styles/theme/variables.scss
+++ b/src/styles/theme/variables/variables.scss
@@ -1,52 +1,45 @@
+@import 'colors';
+
 $black: hsl(0, 0%, 4%) !default;
 $orange: #ff851b;
 $green: #00db60;
 $red: #ff4136;
 $blue: #1973ff;
 $primary: $blue;
-$dark: lighten($black, 8);
-$grey: hsl(0, 0%, 48%);
-$grey-almost-light: hsl(0, 0%, 57%);
+$dark: $grey-900;
 
 $info-invert: #fff;
 $family-sans-serif: 'Open Sans', Helvetica, Arial, sans-serif;
 $thickness: 1px;
-$pagination-current-border: darken($primary, 5);
+$pagination-current-border: $primary;
 $navbar-item-active-color: $primary;
 $dropdown-content-shadow: none;
 $navbar-dropdown-boxed-shadow: $dropdown-content-shadow;
 $bulmaswatch-import-font: false !default;
-$light-background: #F1F5F8;
+$light-background: $grey-100;
 $transition-duration: 100ms;
 $flash-background-duration: 750ms;
 $transparent-background-light: rgba($light-background, 0.9);
 
 $vikunja-font: 'Quicksand', sans-serif;
-$vikunja-light-text: darken(#fff, 10%);
+$vikunja-light-text: $grey-100;
 $vikunja-blue: #7F23FF; // #7F23FF; // #5974d9
 $vikunja-green: #4DB788;
 
-$navbar-padding: 2em;
+$navbar-padding: 2rem;
 $vikunja-nav-background: $light-background;
-$vikunja-nav-color: lighten($black, 25);
-$vikunja-nav-selected-width: 0.4em;
+$vikunja-nav-color: $grey-800;
+$vikunja-nav-selected-width: 0.4rem;
 
 $transition-duration: 150ms;
 $transition: $transition-duration ease;
 
-$multiselect-primary: $green;
-$multiselect-dark: #35495e;
-$multiselect-border: #e8e8e8;
-$multiselect-highlight: $green;
-$multiselect-highlight-negative: $red;
-$multiselect-disabled: darken(#fff, 40);
-
 $scrollbar-height: 8px;
-$scrollbar-track-color: lighten($dark, 65);
-$scrollbar-thumb-color: lighten($dark, 40);
-$scrollbar-hover-color: lighten($dark, 30);
+$scrollbar-track-color: $grey-300;
+$scrollbar-thumb-color: $grey-500;
+$scrollbar-hover-color: $grey-700;
 
-$button-height: 2.648em;
+$button-height: 2.648rem;
 
 $switch-view-height: 43px;
 
@@ -57,3 +50,5 @@ $navbar-height: 4rem;
 $navbar-width: 300px;
 
 $editor-border-color: #ddd;
+
+$dropdown-item-hover-background-color: $grey-100;
diff --git a/src/views/user/Login.vue b/src/views/user/Login.vue
index 49f1516b6..08cd11ece 100644
--- a/src/views/user/Login.vue
+++ b/src/views/user/Login.vue
@@ -186,7 +186,7 @@ export default {
 
 <style scoped>
 .button {
-	margin: 0 0.4em 0 0;
+	margin: 0 0.4rem 0 0;
 }
 
 .reset-password-link {
diff --git a/src/views/user/PasswordReset.vue b/src/views/user/PasswordReset.vue
index f1c3d8ff6..05ce4197e 100644
--- a/src/views/user/PasswordReset.vue
+++ b/src/views/user/PasswordReset.vue
@@ -114,6 +114,6 @@ export default {
 
 <style scoped>
 .button {
-	margin: 0 0.4em 0 0;
+	margin: 0 0.4rem 0 0;
 }
 </style>
diff --git a/src/views/user/RequestPasswordReset.vue b/src/views/user/RequestPasswordReset.vue
index b6c17d9ad..72e1bc716 100644
--- a/src/views/user/RequestPasswordReset.vue
+++ b/src/views/user/RequestPasswordReset.vue
@@ -85,6 +85,6 @@ export default {
 
 <style scoped>
 .button {
-	margin: 0 0.4em 0 0;
+	margin: 0 0.4rem 0 0;
 }
 </style>