diff --git a/imports/ui/components/AccountPageFooter/AccountPageFooter.scss b/imports/ui/components/AccountPageFooter/AccountPageFooter.scss
index 0e6b0df..4088d82 100644
--- a/imports/ui/components/AccountPageFooter/AccountPageFooter.scss
+++ b/imports/ui/components/AccountPageFooter/AccountPageFooter.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/colors';
+@use '../../stylesheets/colors' as *;
 
 .AccountPageFooter {
   margin: 25px 0 0;
diff --git a/imports/ui/components/Content/Content.scss b/imports/ui/components/Content/Content.scss
index a1573ea..e909a7e 100644
--- a/imports/ui/components/Content/Content.scss
+++ b/imports/ui/components/Content/Content.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/mixins';
+@use '../../stylesheets/mixins' as *;
 
 .Content {
   max-width: 700px;
diff --git a/imports/ui/components/DistanceSlider/DistanceSlider.scss b/imports/ui/components/DistanceSlider/DistanceSlider.scss
index 629b81f..ecfa5ff 100644
--- a/imports/ui/components/DistanceSlider/DistanceSlider.scss
+++ b/imports/ui/components/DistanceSlider/DistanceSlider.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/mixins';
+@use '../../stylesheets/mixins' as *;
 
 .dist-slider {
     width: 400px;
diff --git a/imports/ui/components/Feedback/Feedback.scss b/imports/ui/components/Feedback/Feedback.scss
index 5e7b5fb..c83b538 100644
--- a/imports/ui/components/Feedback/Feedback.scss
+++ b/imports/ui/components/Feedback/Feedback.scss
@@ -1,5 +1,5 @@
 /* From: https://github.com/spektom/bootstrap-feedback-form */
-@import '../../stylesheets/mixins';
+@use '../../stylesheets/mixins' as *;
 
 #feedback {
   position: fixed;
diff --git a/imports/ui/components/Footer/Footer.scss b/imports/ui/components/Footer/Footer.scss
index 65779c8..2b8cfb3 100644
--- a/imports/ui/components/Footer/Footer.scss
+++ b/imports/ui/components/Footer/Footer.scss
@@ -1,5 +1,5 @@
-@import '../../stylesheets/mixins';
-@import '../../stylesheets/colors';
+@use '../../stylesheets/mixins' as *;
+@use '../../stylesheets/colors' as *;
 
 html {
   position: relative;
diff --git a/imports/ui/components/InputHint/InputHint.scss b/imports/ui/components/InputHint/InputHint.scss
index 521d272..2977572 100644
--- a/imports/ui/components/InputHint/InputHint.scss
+++ b/imports/ui/components/InputHint/InputHint.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/colors';
+@use '../../stylesheets/colors' as *;
 
 .InputHint {
   display: block;
diff --git a/imports/ui/components/Navigation/Navigation.scss b/imports/ui/components/Navigation/Navigation.scss
index b7beb37..840b431 100644
--- a/imports/ui/components/Navigation/Navigation.scss
+++ b/imports/ui/components/Navigation/Navigation.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/mixins';
+@use '../../stylesheets/mixins' as *;
 
 .navbar {
   border-radius: 0;
diff --git a/imports/ui/components/OAuthLoginButton/OAuthLoginButton.scss b/imports/ui/components/OAuthLoginButton/OAuthLoginButton.scss
index 2d13bb0..afe3547 100644
--- a/imports/ui/components/OAuthLoginButton/OAuthLoginButton.scss
+++ b/imports/ui/components/OAuthLoginButton/OAuthLoginButton.scss
@@ -1,4 +1,5 @@
-@import '../../stylesheets/colors';
+@use 'sass:color';
+@use '../../stylesheets/colors' as *;
 
 .OAuthLoginButton {
 /*  display: block;
@@ -19,21 +20,21 @@
     background: $facebook;
     color: #fff;
 
-    &:hover { background: darken($facebook, 5%); }
+    &:hover { background: color.adjust($facebook, $lightness: -5%); }
   }
 
   &.OAuthLoginButton-google {
     background: $google;
     color: #fff;
 
-    &:hover { background: darken($google, 5%); }
+    &:hover { background: color.adjust($google, $lightness: -5%); }
   }
 
   &.OAuthLoginButton-github {
     background: $github;
     color: #fff;
 
-    &:hover { background: darken($github, 5%); }
+    &:hover { background: color.adjust($github, $lightness: -5%); }
   }
 
   &:active {
diff --git a/imports/ui/components/OAuthLoginButtons/OAuthLoginButtons.scss b/imports/ui/components/OAuthLoginButtons/OAuthLoginButtons.scss
index 4f49ae5..6015a88 100644
--- a/imports/ui/components/OAuthLoginButtons/OAuthLoginButtons.scss
+++ b/imports/ui/components/OAuthLoginButtons/OAuthLoginButtons.scss
@@ -1,4 +1,5 @@
-@import '../../stylesheets/colors';
+@use 'sass:color';
+@use '../../stylesheets/colors' as *;
 
 .OAuthLoginButtons {
   margin-bottom: 25px;
@@ -11,7 +12,7 @@
     .EmailMessage {
       display: inline-block;
       background: #fff; /* default */
-      background: lighten($todos-palette5, 70%);
+      background: color.adjust($todos-palette5, $lightness: 70%);
       padding: 0 10px;
       position: absolute;
       bottom: -27px;
diff --git a/imports/ui/components/PageHeader/PageHeader.scss b/imports/ui/components/PageHeader/PageHeader.scss
index 2f8474f..04da8de 100644
--- a/imports/ui/components/PageHeader/PageHeader.scss
+++ b/imports/ui/components/PageHeader/PageHeader.scss
@@ -1,5 +1,5 @@
-@import '../../stylesheets/mixins';
-@import '../../stylesheets/colors';
+@use '../../stylesheets/mixins' as *;
+@use '../../stylesheets/colors' as *;
 
 .PageHeader {
   border-bottom: 1px solid $gray-lighter;
diff --git a/imports/ui/components/SelectionMap/SelectionMap.scss b/imports/ui/components/SelectionMap/SelectionMap.scss
index b9ef72a..ec8c8a5 100644
--- a/imports/ui/components/SelectionMap/SelectionMap.scss
+++ b/imports/ui/components/SelectionMap/SelectionMap.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/mixins';
+@use '../../stylesheets/mixins' as *;
 
 .selectionmap-leaflet-container {
   height: 100%;
diff --git a/imports/ui/layouts/App/App.scss b/imports/ui/layouts/App/App.scss
index a57950a..011427e 100644
--- a/imports/ui/layouts/App/App.scss
+++ b/imports/ui/layouts/App/App.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/colors';
+@use '../../stylesheets/colors' as *;
 
 .App > .container {
   margin-bottom: 20px;
diff --git a/imports/ui/pages/Fires/Fires.scss b/imports/ui/pages/Fires/Fires.scss
index 213d9e8..941c5ca 100644
--- a/imports/ui/pages/Fires/Fires.scss
+++ b/imports/ui/pages/Fires/Fires.scss
@@ -1,5 +1,5 @@
-@import '../../stylesheets/colors';
-@import '../../stylesheets/mixins';
+@use '../../stylesheets/colors' as *;
+@use '../../stylesheets/mixins' as *;
 
 .fire-leaflet-container {
   min-height: 40vh;
diff --git a/imports/ui/pages/FiresMap/FiresMap.scss b/imports/ui/pages/FiresMap/FiresMap.scss
index 5d0d094..3432e5a 100644
--- a/imports/ui/pages/FiresMap/FiresMap.scss
+++ b/imports/ui/pages/FiresMap/FiresMap.scss
@@ -1,5 +1,5 @@
-@import '../../stylesheets/mixins';
-@import '../../stylesheets/colors';
+@use '../../stylesheets/mixins' as *;
+@use '../../stylesheets/colors' as *;
 
 /* https://github.com/PaulLeCam/react-leaflet/issues/108 */
 
diff --git a/imports/ui/pages/Index/Index-custom.scss b/imports/ui/pages/Index/Index-custom.scss
index 8e089c1..7c7b95a 100644
--- a/imports/ui/pages/Index/Index-custom.scss
+++ b/imports/ui/pages/Index/Index-custom.scss
@@ -1,5 +1,5 @@
-@import '../../stylesheets/mixins';
-@import '../../stylesheets/colors';
+@use '../../stylesheets/mixins' as *;
+@use '../../stylesheets/colors' as *;
 
 .full-width {
   position: relative;
diff --git a/imports/ui/pages/Index/Index.scss b/imports/ui/pages/Index/Index.scss
index 527aa93..8d1aca0 100644
--- a/imports/ui/pages/Index/Index.scss
+++ b/imports/ui/pages/Index/Index.scss
@@ -1,9 +1,10 @@
-@import '../../stylesheets/mixins';
-@import '../../stylesheets/colors';
+@use 'sass:color';
+@use '../../stylesheets/mixins' as *;
+@use '../../stylesheets/colors' as *;
 
 .Index {
   padding: 20px;
-  background: lighten($todos-back1, 75%);
+  background: color.adjust($todos-back1, $lightness: 75%);
   text-align: center;
   border-radius: 3px;
   color: $todos-font1;
@@ -23,7 +24,7 @@
 
   p {
     font-size: 18px;
-    color: lighten($cb-blue, 25%);
+    color: color.adjust($cb-blue, $lightness: 25%);
   }
 
   > div {
@@ -41,18 +42,18 @@
 
   footer {
     margin: 20px -20px -20px;
-    border-top: 1px solid darken($cb-blue, 10%);
+    border-top: 1px solid color.adjust($cb-blue, $lightness: -10%);
     padding: 20px;
 
     p {
       font-size: 14px;
       line-height: 22px;
-      color: lighten($cb-blue, 35%);
+      color: color.adjust($cb-blue, $lightness: 35%);
       margin: 0;
     }
 
     p a {
-      color: lighten($cb-blue, 35%);
+      color: color.adjust($cb-blue, $lightness: 35%);
       text-decoration: underline;
     }
   }
diff --git a/imports/ui/pages/Logout/Logout.scss b/imports/ui/pages/Logout/Logout.scss
index e43b760..59a3341 100644
--- a/imports/ui/pages/Logout/Logout.scss
+++ b/imports/ui/pages/Logout/Logout.scss
@@ -1,5 +1,6 @@
-@import '../../stylesheets/mixins';
-@import '../../stylesheets/colors';
+@use 'sass:color';
+@use '../../stylesheets/mixins' as *;
+@use '../../stylesheets/colors' as *;
 
 .Logout {
   margin: 20px;
@@ -19,7 +20,7 @@
 
   p {
     font-size: 18px;
-    color: lighten($todos-palette3, 25%);
+    color: color.adjust($todos-palette3, $lightness: 25%);
   }
 
   ul {
diff --git a/imports/ui/pages/Page/Page.scss b/imports/ui/pages/Page/Page.scss
index 183bf23..e92c5ae 100644
--- a/imports/ui/pages/Page/Page.scss
+++ b/imports/ui/pages/Page/Page.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/mixins';
+@use '../../stylesheets/mixins' as *;
 
 .Page {
   margin-bottom: 0px;
diff --git a/imports/ui/pages/Profile/Profile.scss b/imports/ui/pages/Profile/Profile.scss
index 049e46b..881c056 100644
--- a/imports/ui/pages/Profile/Profile.scss
+++ b/imports/ui/pages/Profile/Profile.scss
@@ -1,4 +1,4 @@
-@import '../../stylesheets/colors';
+@use '../../stylesheets/colors' as *;
 
 .OAuthProfile {
   .LoggedInWith {
diff --git a/imports/ui/pages/Subscriptions/SubscriptionsMap.scss b/imports/ui/pages/Subscriptions/SubscriptionsMap.scss
index 908ef8e..492b1fb 100644
--- a/imports/ui/pages/Subscriptions/SubscriptionsMap.scss
+++ b/imports/ui/pages/Subscriptions/SubscriptionsMap.scss
@@ -1,5 +1,5 @@
-@import '../../stylesheets/mixins';
-@import '../../stylesheets/colors';
+@use '../../stylesheets/mixins' as *;
+@use '../../stylesheets/colors' as *;
 
 .subscriptionsmap-leaflet-container {
   height: 100%;
diff --git a/imports/ui/stylesheets/app.scss b/imports/ui/stylesheets/app.scss
index 409c749..b82631e 100644
--- a/imports/ui/stylesheets/app.scss
+++ b/imports/ui/stylesheets/app.scss
@@ -1,6 +1,6 @@
-@import './colors';
-@import './forms';
-@import './bootstrap-overrides';
-@import './custom';
-@import './cookies-eu';
-@import './new-age';
+@use './colors' as *;
+@use './forms' as *;
+@use './bootstrap-overrides' as *;
+@use './custom' as *;
+@use './cookies-eu' as *;
+@use './new-age' as *;
diff --git a/imports/ui/stylesheets/bootstrap-overrides.scss b/imports/ui/stylesheets/bootstrap-overrides.scss
index 3a4149e..7f1f297 100644
--- a/imports/ui/stylesheets/bootstrap-overrides.scss
+++ b/imports/ui/stylesheets/bootstrap-overrides.scss
@@ -1,7 +1,9 @@
-@import './mixins';
+@use 'sass:color';
+@use './mixins' as *;
+@use './colors' as *;
 
 body {
-  background-color: lighten($todos-palette5, 70%);
+  background-color: color.adjust($todos-palette5, $lightness: 70%);
   /* for fixed header */
   /* padding-top: 50px; */
   overflow-x: hidden;
diff --git a/imports/ui/stylesheets/cookies-eu.scss b/imports/ui/stylesheets/cookies-eu.scss
index 6038ccd..e177373 100644
--- a/imports/ui/stylesheets/cookies-eu.scss
+++ b/imports/ui/stylesheets/cookies-eu.scss
@@ -1,5 +1,7 @@
+@use 'sass:color';
+@use './colors' as *;
 #js-cookie-policy-default {
-  background-color: lighten($todos-palette3, 10%);
+  background-color: color.adjust($todos-palette3, $lightness: 10%);
 }
 
 .cookie-policy {
diff --git a/imports/ui/stylesheets/custom.scss b/imports/ui/stylesheets/custom.scss
index 3e5c2b7..a7c55ed 100644
--- a/imports/ui/stylesheets/custom.scss
+++ b/imports/ui/stylesheets/custom.scss
@@ -1,5 +1,5 @@
-@import './mixins';
-@import './colors';
+@use './mixins' as *;
+@use './colors' as *;
 
 a, a:hover  {
   color: $todos-palette1a;
diff --git a/imports/ui/stylesheets/forms.scss b/imports/ui/stylesheets/forms.scss
index de85585..429a169 100644
--- a/imports/ui/stylesheets/forms.scss
+++ b/imports/ui/stylesheets/forms.scss
@@ -1,5 +1,5 @@
-@import './mixins';
-@import './colors';
+@use './mixins' as *;
+@use './colors' as *;
 
 form {
   label,
diff --git a/imports/ui/stylesheets/new-age.scss b/imports/ui/stylesheets/new-age.scss
index ca74c67..e7f7f0d 100644
--- a/imports/ui/stylesheets/new-age.scss
+++ b/imports/ui/stylesheets/new-age.scss
@@ -1,4 +1,4 @@
-@import './mixins';
+@use './mixins' as *;
 
 /*!
  * Start Bootstrap - New Age v4.0.0-beta.2 (https://startbootstrap.com/template-overviews/new-age)