diff --git a/dev/scss/base/banner.scss b/dev/scss/base/banner.scss
index 811cafe..3607002 100644
--- a/dev/scss/base/banner.scss
+++ b/dev/scss/base/banner.scss
@@ -1,3 +1,5 @@
+@use "colors";
+
 .banner {
   position: fixed;
   width: 10em;
@@ -32,8 +34,8 @@
     transform-origin: 0 0 ;
     transform:rotate(45deg);
 
-    background-color: $light-orange;
-    color: $dark-orange;
-    border: 1px solid $dark-orange;
+    background-color: colors.$light-orange;
+    color: colors.$dark-orange;
+    border: 1px solid colors.$dark-orange;
   }
 }
\ No newline at end of file
diff --git a/dev/scss/base/base.scss b/dev/scss/base/base.scss
index 7750665..b004494 100644
--- a/dev/scss/base/base.scss
+++ b/dev/scss/base/base.scss
@@ -1,16 +1,20 @@
 @charset "utf-8";
-@import "../util";
-@import "fonts";
-@import "flextable";
-@import "fragment";
-@import "load";
-@import "form";
-@import "view";
-@import "menu";
-@import "banner";
-@import "showPWD";
-@import "copyToClipboard";
-@import "buttongroup";
+@use "../util";
+@use "fonts";
+@use "flextable";
+@use "fragment";
+@use "load";
+@use "form";
+@use "view";
+@use "menu";
+@use "banner";
+@use "showPWD";
+@use "copyToClipboard";
+@use "buttongroup";
+@use "colors";
+@use "icons";
+@use "lengths";
+@use "mixins";
 
 /**
  * Basic global CSS rules for Kalamar
@@ -18,7 +22,7 @@
 
 
 * {
-  @include box-sizing-box;
+  @include mixins.box-sizing-box;
 }
 
 body,
@@ -26,12 +30,12 @@
 select,
 g > text {
   font-family: verdana, tahoma, arial, Helvetica, sans-serif;
-  color:       $dark-grey;
+  color:       colors.$dark-grey;
   margin:      0;
 }
 
 g > text {
-  fill: $dark-grey;
+  fill: colors.$dark-grey;
 }
 
 // html {
@@ -49,14 +53,14 @@
 
 a {
   &:visited {
-    color: $darkest-orange;
+    color: colors.$darkest-orange;
   }
   
   &:link {
     text-decoration: none;
-    color:           $dark-orange;
+    color:           colors.$dark-orange;
     &:hover {
-      color:      $darkest-orange;
+      color:      colors.$darkest-orange;
       transition: color 0.3s ease 0s;
     }
   }
@@ -64,8 +68,8 @@
   // External links
   &[href^="http://"]::after,
   &[href^="https://"]::after {
-    @include icon-font;
-    content:   " " + $fa-extlink;
+    @include mixins.icon-font;
+    content:   " " + icons.$fa-extlink;
     font-size: 75%;
   }
 }
@@ -94,21 +98,21 @@
 }
 
 blockquote {
-  border-radius:    $standard-border-radius;
+  border-radius:    lengths.$standard-border-radius;
   padding:          2pt 5pt 2pt 20pt;
   margin:           0;
-  border-left:      5px solid $ids-blue-1;
-  background-color: $ids-blue-2;
-  color:            $ids-blue-1;
+  border-left:      5px solid colors.$ids-blue-1;
+  background-color: colors.$ids-blue-2;
+  color:            colors.$ids-blue-1;
   -webkit-mix-blend-mode: normal; // Safari
   mix-blend-mode:   soft-light;
   
   &.bug,
   &.missing,
   &.warning {
-    border-left-color: $dark-red;
-    background-color:  $middle-red;
-    color:             $nearly-white;
+    border-left-color: colors.$dark-red;
+    background-color:  colors.$middle-red;
+    color:             colors.$nearly-white;
     mix-blend-mode:    multiply;
   }
 }
@@ -124,11 +128,11 @@
       border-width: 0;
 
       &[data-type=token]::after {
-	      color: $ids-blue-1;
+	      color: colors.$ids-blue-1;
       }
 
       &[data-type=span]::after {
-	      color: $ids-pink-1;
+	      color: colors.$ids-pink-1;
       }
 
       &::after {
diff --git a/dev/scss/base/buttongroup.scss b/dev/scss/base/buttongroup.scss
index 1937e53..fc9c6a6 100644
--- a/dev/scss/base/buttongroup.scss
+++ b/dev/scss/base/buttongroup.scss
@@ -1,5 +1,10 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "choose";
+@use "colors";
+@use "icons";
+@use "lengths";
+@use "mixins";
 
 /*
  * Define the base layout of horizontal button groups
@@ -15,34 +20,34 @@
     > span,
     input[type=submit],  
     a {
-      @include choose-item;
-      box-shadow:   $choose-box-shadow;
+      @include choose.choose-item;
+      box-shadow:   choose.$choose-box-shadow;
       font-size:    9pt;
       font-weight:  normal;
       line-height:  1.5em;
       padding:      0 4px;
       display:      inline-block;
       border-style: solid;
-      border-width: $border-size 0;
+      border-width: lengths.$border-size 0;
 
       &:not(.inactive):hover {
-	@include choose-hover;
+	@include choose.choose-hover;
         transition: none;
       }
 
       &:first-child {
 	      border: {
-	        left-width:          $border-size;
-	        top-left-radius:     $standard-border-radius;
-	        bottom-left-radius:  $standard-border-radius;
+	        left-width:          lengths.$border-size;
+	        top-left-radius:     lengths.$standard-border-radius;
+	        bottom-left-radius:  lengths.$standard-border-radius;
 	      }
       }
 
       &:last-child {
 	      border: {
-	        right-width:         $border-size;
-	        top-right-radius:    $standard-border-radius;
-	        bottom-right-radius: $standard-border-radius;
+	        right-width:         lengths.$border-size;
+	        top-right-radius:    lengths.$standard-border-radius;
+	        bottom-right-radius: lengths.$standard-border-radius;
         }
       }
     }
@@ -57,21 +62,21 @@
       min-width: auto;
 
       > span.check {
-        @include icon-font;
+        @include mixins.icon-font;
         width:      1em;
         display:    inline-block;
         text-align: left;
 
         &:not(.checked)::after {
-          content: $fa-check;
+          content: icons.$fa-check;
         }
 
         &.checked::after {
-          content: $fa-checked;
+          content: icons.$fa-checked;
         }
 
         > span {
-          @include blind;
+          @include mixins.blind;
         }
       }
     }
@@ -85,12 +90,12 @@
     z-index:   20;
     margin:    0;
     padding:   0;
-    width:     $right-view-distance;
+    width:     lengths.$right-view-distance;
     font-size: 10pt;
-    color:     $nearly-white;
+    color:     colors.$nearly-white;
 
     > span:first-child {
-      margin-top: $border-size
+      margin-top: lengths.$border-size
     }
 
     > span {
@@ -101,19 +106,19 @@
       font-style:      normal;
       
       &.download::after {
-	      content: $fa-download;
+	      content: icons.$fa-download;
       }
       
       &.close::after {
-	      content: $fa-close;
+	      content: icons.$fa-close;
       }
 
       &.minimize::after {
-	      content: $fa-minimize;
+	      content: icons.$fa-minimize;
       }
       
       &.plugin::after {
-	      content: $fa-plugin;        
+	      content: icons.$fa-plugin;        
       }
     }
   }
@@ -126,7 +131,7 @@
   font-size:  10pt;
   left:       0;
   text-align: left;
-  margin:     -1 * $border-size;
+  margin:     -1 * lengths.$border-size;
   margin-top: 0;
 
   > li:first-of-type {
@@ -135,10 +140,10 @@
 }
 
 .button-icon {
-  @include icon-font;
+  @include mixins.icon-font;
   line-height: 1.3;
   > span {
-    @include blind;
+    @include mixins.blind;
   }
   &[data-icon]::after {
     content: attr(data-icon);
diff --git a/dev/scss/base/choose.scss b/dev/scss/base/choose.scss
index fc3d250..93779a4 100644
--- a/dev/scss/base/choose.scss
+++ b/dev/scss/base/choose.scss
@@ -1,13 +1,14 @@
-@import "colors";
+@use 'sass:color';
+@use "colors";
 
 /**
  * Some color definitions and mixins for
  * buttons and menus.
  */
-$choose-bg:           $light-grey;
-$choose-color:        $dark-grey;
-$choose-blind-color:  $middle-grey;
-$choose-border-color: $middle-grey;
+$choose-bg:           colors.$light-grey;
+$choose-color:        colors.$dark-grey;
+$choose-blind-color:  colors.$middle-grey;
+$choose-border-color: colors.$middle-grey;
 $choose-border:       2px solid $choose-border-color;
 $choose-box-shadow:   2px 2px 2px  rgba(0,0,0,0.2);
 
@@ -19,7 +20,7 @@
   color:            $choose-color;
   background-color: $choose-bg;
   border-color:     $choose-border-color;
-  text-shadow:      $light-shadow;
+  text-shadow:      colors.$light-shadow;
 }
 
 
@@ -27,9 +28,9 @@
  * Chooseable items (mouse over)
  */
 @mixin choose-hover {
-  color:            $nearly-white;
-  background-color: $dark-orange;
-  border-color:     $darker-orange;
+  color:            colors.$nearly-white;
+  background-color: colors.$dark-orange;
+  border-color:     colors.$darker-orange;
   text-shadow:      none;
 }
 
@@ -38,8 +39,8 @@
  * Chooseable items (not available)
  */
 @mixin choose-inactive {
-  color:            lighten($choose-color, 20%);
-  background-color: lighten($choose-bg, 20%);
+  color:            color.adjust($choose-color, $lightness: 20%, $space: hsl);
+  background-color: color.adjust($choose-bg, $lightness: 20%, $space: hsl);
   border-color:     transparent;
   text-shadow:      none;
 }
@@ -48,9 +49,9 @@
  * Chooseable items (active)
  */
 @mixin choose-active {
-  color:            $dark-green;
-  background-color: $light-green;
-  border-color:     $dark-green;
+  color:            colors.$dark-green;
+  background-color: colors.$light-green;
+  border-color:     colors.$dark-green;
   text-shadow:      none;
 }
 
@@ -59,8 +60,8 @@
  * Chooseable items (action: remove something)
  */
 @mixin choose-remove {
-  color:            $nearly-white;
-  background-color: $middle-red;
-  border-color:     $dark-red;
+  color:            colors.$nearly-white;
+  background-color: colors.$middle-red;
+  border-color:     colors.$dark-red;
   text-shadow:      none;
 }
diff --git a/dev/scss/base/colors.scss b/dev/scss/base/colors.scss
index 2873ec7..6d5acd0 100644
--- a/dev/scss/base/colors.scss
+++ b/dev/scss/base/colors.scss
@@ -3,6 +3,8 @@
  * for Kalamar,
  */
 
+@use 'sass:color';
+
 /**
  * Official IDS colors
  */
@@ -35,10 +37,10 @@
  * Green Colors
  */
 $dark-green:     $ids-green-1; // #496000;
-$middle-green:   lighten($ids-green-1, 9%);
-$light-green:    lighten($ids-green-1, 13%); // #7ba400;
-$lightest-green: desaturate(lighten($light-green, 35%), 20%); // #d8e38c;
-$grey-green:     darken(desaturate($lightest-green, 25%), 12%); // #bcc387;
+$middle-green:   color.adjust($ids-green-1, $lightness: 9%, $space: hsl);
+$light-green:    color.adjust($ids-green-1, $lightness: 13%, $space: hsl); // #7ba400;
+$lightest-green: color.adjust($light-green, $lightness: 35%, $saturation: -20%, $space: hsl); // #d8e38c;
+$grey-green:     color.adjust($lightest-green, $saturation: -25%, $lightness: -12%, $space: hsl); // #bcc387;
 
 
 /**
@@ -46,7 +48,7 @@
  */
 $light-blue:     $ids-blue-2;
 $dark-blue:      $ids-blue-1;
-$darkest-blue:   darken($dark-blue, 40%);
+$darkest-blue:   color.adjust($dark-blue, $lightness: -40%, $space: hsl);
 
 
 /**
@@ -54,7 +56,7 @@
  */
 $middle-grey:  $ids-grey-1; // #999;
 $light-grey:   $ids-grey-2; // #ddd;
-$dark-grey:    darken($middle-grey, 15%);
+$dark-grey:    color.adjust($middle-grey, $lightness: -15%, $space: hsl);
 $nearly-white: #fefefe;
 
 
@@ -62,8 +64,8 @@
  * Red Colors (no IDS relation)
  */
 $middle-red: #c1002b;
-$light-red:  lighten($middle-red, 40%);
-$dark-red:   darken($middle-red, 40%);
+$light-red:  color.adjust($middle-red, $lightness: 40%, $space: hsl);
+$dark-red:   color.adjust($middle-red, $lightness: -40%, $space: hsl);
 $alert-red:  rgb(254,26,0);
 
 /**
diff --git a/dev/scss/base/copyToClipboard.scss b/dev/scss/base/copyToClipboard.scss
index 2c93b79..6903f13 100644
--- a/dev/scss/base/copyToClipboard.scss
+++ b/dev/scss/base/copyToClipboard.scss
@@ -1,10 +1,11 @@
-@import "icons";
+@use "icons";
+@use "mixins";
 
 a.copy-to-clipboard::after {
     position: absolute;
-    @include icon-font;
+    @include mixins.icon-font;
     width: 1em;
-    content: $fa-copy;
+    content: icons.$fa-copy;
     cursor: pointer;
     margin-left: .4em;
     margin-top: .6em;
diff --git a/dev/scss/base/flextable.scss b/dev/scss/base/flextable.scss
index f10cec3..734a965 100644
--- a/dev/scss/base/flextable.scss
+++ b/dev/scss/base/flextable.scss
@@ -1,6 +1,6 @@
 @use 'sass:math';
-@import "lengths";
-@import "mixins";
+@use "lengths";
+@use "mixins";
 
 /**
  * This defines flexible table cells
@@ -21,26 +21,26 @@
     flex-direction: row;
     text-align: center;
     width: 100%;
-    border-width: math.div($border-size,2);
+    border-width: math.div(lengths.$border-size,2);
     border-style: solid;
     align-items: stretch;
     > * {
-      @include cell-info;
+      @include mixins.cell-info;
     }
     > dt {
       text-align: left;
       width: 12.5em;
-      padding: $item-padding;
+      padding: lengths.$item-padding;
       margin: 0;
     }
     > dd {
       text-align: left;
-      padding: $item-padding;
+      padding: lengths.$item-padding;
       margin: 0;
       width: 100%;
       max-width: none;
       max-height: 6em;
-      margin-left: $border-size;
+      margin-left: lengths.$border-size;
       white-space: normal;
       overflow-y: auto;
       overflow-x: hidden;
diff --git a/dev/scss/base/fonts.scss b/dev/scss/base/fonts.scss
index febfa57..5fef211 100644
--- a/dev/scss/base/fonts.scss
+++ b/dev/scss/base/fonts.scss
@@ -1,5 +1,5 @@
 @charset "utf-8";
-@import "paths";
+@use "paths";
 
 /**
  * Load web fonts for Kalamar
@@ -7,8 +7,8 @@
 
 @font-face {
   font-family: 'FontAwesome';
-  src: url('#{$font-path}/fontawesome-webfont.eot?v=4.3.0');
-  src: url('#{$font-path}/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('#{$font-path}/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('#{$font-path}/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('#{$font-path}/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('#{$font-path}/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
+  src: url('#{paths.$font-path}/fontawesome-webfont.eot?v=4.3.0');
+  src: url('#{paths.$font-path}/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), url('#{paths.$font-path}/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), url('#{paths.$font-path}/fontawesome-webfont.woff?v=4.3.0') format('woff'), url('#{paths.$font-path}/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), url('#{paths.$font-path}/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
   font-weight: normal;
   font-style:  normal;
 }
\ No newline at end of file
diff --git a/dev/scss/base/form.scss b/dev/scss/base/form.scss
index 70e6bcf..a150e3b 100644
--- a/dev/scss/base/form.scss
+++ b/dev/scss/base/form.scss
@@ -1,5 +1,8 @@
-@import "lengths";
-@import "colors";
+@use "lengths";
+@use "colors";
+@use "choose";
+@use "icons";
+@use "mixins";
 
 /**
  * Definition of form elements for Kalamar.
@@ -27,7 +30,7 @@
     background-color: transparent;
     margin-left: 0;
     font-weight: bold;
-    border-radius: $standard-border-radius;
+    border-radius: lengths.$standard-border-radius;
   }
 
   label,
@@ -54,7 +57,7 @@
     }
     legend::after {
       content: ':';
-      color: $ids-green-2;
+      color: colors.$ids-green-2;
     }
     input, label[for] {
       display: inline-block;
@@ -72,13 +75,13 @@
   textarea,
   button,
   a.form-button {
-    border-radius: $standard-border-radius;
+    border-radius: lengths.$standard-border-radius;
   }
   
   input,
   textarea {
-    border-color:     $ids-grey-2;
-    background-color: $nearly-white;
+    border-color:     colors.$ids-grey-2;
+    background-color: colors.$nearly-white;
     border-style:     solid;
   }
   
@@ -90,7 +93,7 @@
     display:      inline-block;
     width:        20%;
     min-width:    20em;
-    padding:      $base-padding;
+    padding:      lengths.$base-padding;
   }
 
   input[type=radio] {
@@ -103,11 +106,11 @@
   
   input[readonly=readonly],
   textarea[readonly] {
-    background-color: $light-orange;
+    background-color: colors.$light-orange;
   }
   
   .field-with-error {
-    border-color: $ids-pink-1;
+    border-color: colors.$ids-pink-1;
   }
 
   input[type=submit],
@@ -117,25 +120,25 @@
     cursor:           pointer;
     border-width:     thin;
     text-align:       center;
-    background-color: $middle-green;
-    border-color:     $dark-green;
+    background-color: colors.$middle-green;
+    border-color:     colors.$dark-green;
     // font-size:        8pt;
-    color:            $dark-green;
+    color:            colors.$dark-green;
   }
 
   span.file-upload {
-    @include choose-item;
-    box-shadow:   $choose-box-shadow;
-    border: $choose-border;
-    border-radius:     $standard-border-radius;
-    padding: $item-padding;
+    @include choose.choose-item;
+    box-shadow:   choose.$choose-box-shadow;
+    border: choose.$choose-border;
+    border-radius:     lengths.$standard-border-radius;
+    padding: lengths.$item-padding;
     position: relative;
     overflow: hidden;
     right: 0;
     display: inline-block;
 
     &:hover {
-      @include choose-hover;
+      @include choose.choose-hover;
       transition: none;
     }
    
@@ -150,15 +153,15 @@
       opacity: 0;
       filter: alpha(opacity=0);
       &.field-with-error {
-        background-color: $ids-pink-1;
+        background-color: colors.$ids-pink-1;
         opacity: .3;
         filter: alpha(opacity=.3);
       }
     }
 
     &::after {
-      @include icon-font;
-      content: $fa-upload;
+      @include mixins.icon-font;
+      content: icons.$fa-upload;
     }
   }
   
@@ -167,20 +170,20 @@
   }
   
   label.field-required::after {
-    color:   $ids-blue-1;
+    color:   colors.$ids-blue-1;
     content: '*';
   }
 
   span.field-required{
-    color:   $ids-blue-1;
+    color:   colors.$ids-blue-1;
   }
 
 }
 
 .button-abort {
-  background-color: $middle-orange !important;
-  color:            $darkest-orange !important;
-  border-color:     $darkest-orange !important;
+  background-color: colors.$middle-orange !important;
+  color:            colors.$darkest-orange !important;
+  border-color:     colors.$darkest-orange !important;
 }
 
 button, input[type=submit] {
@@ -191,15 +194,15 @@
   }
   
   &[type=submit] {
-    @include choose-item;
+    @include choose.choose-item;
     font-weight: normal;
     padding:     0;
     height:      100%;
     top:         0;
-    width:       $button-width;
+    width:       lengths.$button-width;
 
     > span:nth-of-type(1) {
-      @include blind;
+      @include mixins.blind;
     }
 
     &::after {
@@ -208,7 +211,7 @@
     
     &:hover,
     &:focus {
-      @include choose-hover;
+      @include choose.choose-hover;
     }
 
     &::-moz-focus-inner {
@@ -216,7 +219,7 @@
     }
 
     &:active {
-      @include choose-active;
+      @include choose.choose-active;
     }
 
     /*
@@ -225,24 +228,24 @@
      */
     &:last-of-type {
       border: {
-        right-width:         $border-size;
+        right-width:         lengths.$border-size;
         right-style:         solid;
-        top-right-radius:    $standard-border-radius;
-        bottom-right-radius: $standard-border-radius;
+        top-right-radius:    lengths.$standard-border-radius;
+        bottom-right-radius: lengths.$standard-border-radius;
       }
     }
   }
 }
 
 button[type=submit] {
-  border: $border-size solid $nearly-white;
+  border: lengths.$border-size solid colors.$nearly-white;
 }
 
 *[type=submit].form-submit {
-  box-shadow:   $choose-box-shadow;
-  border-radius:     $standard-border-radius;
+  box-shadow:   choose.$choose-box-shadow;
+  border-radius:     lengths.$standard-border-radius;
   border-width: 2px !important;
-  padding: $base-padding !important;
+  padding: lengths.$base-padding !important;
 }
 
 /**
@@ -266,13 +269,13 @@
       margin-right:   .2em;
 
       &::after {
-	      @include icon-font; 
-	      content: $fa-check;
+	      @include mixins.icon-font; 
+	      content: icons.$fa-check;
       }
     }
   }
 
   &:checked + label span::after {
-    content: $fa-checked;
+    content: icons.$fa-checked;
   }
 }
diff --git a/dev/scss/base/fragment.scss b/dev/scss/base/fragment.scss
index f68e7db..43932fb 100644
--- a/dev/scss/base/fragment.scss
+++ b/dev/scss/base/fragment.scss
@@ -1,7 +1,7 @@
 @charset "utf-8";
-@import "choose";
-@import "lengths";
-@import "icons";
+@use "choose";
+@use "lengths";
+@use "icons";
 
 /**
  * Definitions of fragments for vc and query
@@ -10,25 +10,25 @@
 
 .vc.fragment,
 p.query.fragment {
-  @include choose-item;
+  @include choose.choose-item;
   position: relative;
   padding:  4pt 6pt !important;
   
   border : {
-    width:  $border-size;
+    width:  lengths.$border-size;
     style:  solid;
-    radius: $standard-border-radius;
+    radius: lengths.$standard-border-radius;
   }
 
   margin: {
-    left:   $left-distance;
+    left:   lengths.$left-distance;
     top:    .5em;
     bottom: .5em;
-    right:  $right-view-distance;
+    right:  lengths.$right-view-distance;
   }
 
   &:hover {
-    @include choose-hover;
+    @include choose.choose-hover;
     cursor: pointer;
   }
 
@@ -45,9 +45,9 @@
   
   &::after {
 	  font-family: 'FontAwesome';
-	  content:     $fa-to-query;
+	  content:     icons.$fa-to-query;
     position:    absolute;
     right:       4pt;
-    top:         $border-size;
+    top:         lengths.$border-size;
   }
 }
diff --git a/dev/scss/base/menu.scss b/dev/scss/base/menu.scss
index 993b237..433f69e 100644
--- a/dev/scss/base/menu.scss
+++ b/dev/scss/base/menu.scss
@@ -1,7 +1,7 @@
 @charset "utf-8";
-@import "choose";
-@import "lengths";
-@import "icons";
+@use "choose";
+@use "lengths";
+@use "icons";
 
 /**
  * Definitions for menu design.
@@ -34,18 +34,18 @@
   
   > li,
   > span.non-item:not(.active) {
-    @include choose-item;
+    @include choose.choose-item;
   }
 
   > li,
   > span.non-item:not(:empty) {
-    @include choose-item;
-    box-shadow:  $choose-box-shadow;
+    @include choose.choose-item;
+    box-shadow:  choose.$choose-box-shadow;
     cursor:      pointer;
-    padding:     $item-padding;
+    padding:     lengths.$item-padding;
     white-space: normal;
     border: {
-      width:        $border-size;
+      width:        lengths.$border-size;
       bottom-width: 0px;
       top-width:    0px;
       style:        solid;
@@ -59,10 +59,10 @@
   div.lengthField {
     border: {
       color: transparent;
-      width: $border-size;
+      width: lengths.$border-size;
     }
     overflow: hidden;
-    padding: $item-padding;
+    padding: lengths.$item-padding;
     padding-top: 0;
     padding-bottom: 0;
     span {
@@ -87,7 +87,7 @@
     transition:       opacity .5s ease 1s;
 
     > span {
-      @include choose-active;
+      @include choose.choose-active;
       position: absolute;
       display:  block;
       right:    0;
@@ -101,12 +101,12 @@
     }
 
     &.active > span {
-      @include choose-hover;
+      @include choose.choose-hover;
     }
 
     > div {
-      @include choose-item;
-      box-shadow: $choose-box-shadow;
+      @include choose.choose-item;
+      box-shadow: choose.$choose-box-shadow;
       position:   absolute;
       right:      0;
       width:      10px;
@@ -138,17 +138,17 @@
   > li {
     &:first-of-type {
       border-top: {
-	      width:        $border-size;
-	      left-radius:  $standard-border-radius;
-	      right-radius: $standard-border-radius;
+	      width:        lengths.$border-size;
+	      left-radius:  lengths.$standard-border-radius;
+	      right-radius: lengths.$standard-border-radius;
       }
     }
 
     &:last-of-type {
       border-bottom: {
-	      width:        $border-size;
-	      left-radius:  $standard-border-radius;
-	      right-radius: $standard-border-radius;
+	      width:        lengths.$border-size;
+	      left-radius:  lengths.$standard-border-radius;
+	      right-radius: lengths.$standard-border-radius;
       }
     }
     mark {
@@ -161,18 +161,18 @@
 
   > li.active,
   span.non-item.active {
-    @include choose-active;
+    @include choose.choose-active;
   }
 
   > li:hover,
   span.non-item:hover {
-    @include choose-hover;
+    @include choose.choose-hover;
   }
 
   span.non-item {
     border: {
-      radius: $standard-border-radius;
-      width:  $border-size !important;
+      radius: lengths.$standard-border-radius;
+      width:  lengths.$border-size !important;
     }
   }
   
@@ -216,7 +216,7 @@
     &:not(.no-more):before {
       position:    absolute;
       font-family: "FontAwesome";
-      content:     $fa-up;
+      content:     icons.$fa-up;
       right:       .5em;
       top:         .4em;
     }
@@ -225,7 +225,7 @@
     &:not(.no-more):before {
       position:    absolute;
       font-family: "FontAwesome";
-      content:     $fa-down;
+      content:     icons.$fa-down;
       right:       .5em;
       bottom:      .4em;
     }
@@ -246,7 +246,7 @@
     content: '';
   }
   > li.active:hover {
-    @include choose-remove;
+    @include choose.choose-remove;
   }
 }
 
diff --git a/dev/scss/base/mixins.scss b/dev/scss/base/mixins.scss
index 88eaaae..cc55686 100644
--- a/dev/scss/base/mixins.scss
+++ b/dev/scss/base/mixins.scss
@@ -1,5 +1,6 @@
 @use 'sass:math';
-@import "colors";
+@use "colors";
+@use "lengths";
 
 /**
  * Mixin for blind elements
@@ -28,7 +29,7 @@
 @mixin input-field {
   outline:   none;
   font-size: 11pt;
-  border:    $border-size solid $nearly-white;
+  border:    lengths.$border-size solid colors.$nearly-white;
   padding:   2px;
   margin:    0;
 }
@@ -64,6 +65,6 @@
 
 
 @mixin matchinfo-head {
-  border-top: $border-size solid $darker-orange; // #ff8000;
-  width:      math.div($left-width, 2);
+  border-top: lengths.$border-size solid colors.$darker-orange; // #ff8000;
+  width:      math.div(lengths.$left-width, 2);
 }
diff --git a/dev/scss/base/showPWD.scss b/dev/scss/base/showPWD.scss
index 77de2c1..061650b 100644
--- a/dev/scss/base/showPWD.scss
+++ b/dev/scss/base/showPWD.scss
@@ -1,4 +1,5 @@
-@import "icons";
+@use "icons";
+@use "mixins";
 
 input.show-pwd {
     padding-right: 2em;
@@ -6,9 +7,9 @@
 
 a.show-pwd::after {
     position: absolute;
-    @include icon-font;
+    @include mixins.icon-font;
     width: 1em;
-    content: $fa-show;
+    content: icons.$fa-show;
     cursor: pointer;
     margin-left: -1.5em;
     margin-top: .6em;
@@ -16,5 +17,5 @@
 }
 
 a.show-pwd.hide::after {
-    content: $fa-hide;
+    content: icons.$fa-hide;
 }
diff --git a/dev/scss/base/view.scss b/dev/scss/base/view.scss
index 5aa4b6e..dbb5c65 100644
--- a/dev/scss/base/view.scss
+++ b/dev/scss/base/view.scss
@@ -1,5 +1,5 @@
-@import "colors";
+@use "colors";
 
 .result-view {
-  background-color: $nearly-white;
+  background-color: colors.$nearly-white;
 }
\ No newline at end of file