diff --git a/dev/scss/main/alertify.scss b/dev/scss/main/alertify.scss
index 3c329b7..93c7752 100644
--- a/dev/scss/main/alertify.scss
+++ b/dev/scss/main/alertify.scss
@@ -1,26 +1,28 @@
-@import "../util";
-@import "alertify/alertify-core";
-@import "alertify/alertify-default";
+@use "../util";
+@use "alertify/alertify-core";
+@use "alertify/alertify-default";
+@use "../base/colors";
+@use "../base/lengths";
 
 /**
  * Alertify styles.
  */
 
 article.alertify-log-warn {
-  background-color: $dark-orange;
+  background-color: colors.$dark-orange;
   code.src {
-    color: $darkest-orange;
+    color: colors.$darkest-orange;
   }
 }
 
 article.alertify-log code.src {
   display: block;
-  color: $dark-red;
+  color: colors.$dark-red;
   font-size: 70%;
 }
 
 .alertify-log-error {
-  background-color: $alert-red;
+  background-color: colors.$alert-red;
 }
 
 #notifications {
@@ -35,14 +37,14 @@
   display: block;
   padding: .5em;
   
-  border-radius: $standard-border-radius;
+  border-radius: lengths.$standard-border-radius;
   max-width: 30em;
-  background-color: $alert-red;
-  color: $nearly-white;
+  background-color: colors.$alert-red;
+  color: colors.$nearly-white;
   &.notify-success {
-    background-color: $ids-green-1
+    background-color: colors.$ids-green-1
   }
   &.notify-warn {
-    background-color: $ids-orange-2
+    background-color: colors.$ids-orange-2
   }
 }
\ No newline at end of file
diff --git a/dev/scss/main/announcements.scss b/dev/scss/main/announcements.scss
index 5db0e27..ea19431 100644
--- a/dev/scss/main/announcements.scss
+++ b/dev/scss/main/announcements.scss
@@ -1,13 +1,17 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
 
 section#announcements {
-  background-color: $ids-green-2;
+  background-color: colors.$ids-green-2;
   mix-blend-mode: soft-light;
   padding: 1em;
   padding-right: 2em;
-  border-radius: $standard-border-radius;
-  border-left: 5px solid $ids-green-1;
+  border-radius: lengths.$standard-border-radius;
+  border-left: 5px solid colors.$ids-green-1;
   height: 20rem;
   overflow-y: scroll;
   font-size: .8rem;
@@ -30,9 +34,9 @@
   }
   
   dd.maintenance > h4::after {
-    @include icon-font;
-    color: $ids-pink-1;
-    content: " " + $fa-warn;
+    @include mixins.icon-font;
+    color: colors.$ids-pink-1;
+    content: " " + icons.$fa-warn;
   }
   
   dd {
diff --git a/dev/scss/main/intro.scss b/dev/scss/main/intro.scss
index f667759..d7c650e 100644
--- a/dev/scss/main/intro.scss
+++ b/dev/scss/main/intro.scss
@@ -1,4 +1,6 @@
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/lengths";
 
 /**
  * Styles for the intro page
@@ -8,18 +10,18 @@
   &-container {
     margin-top: 3rem;
     display: flex;
-    gap: $standard-size-and-spacing;
+    gap: lengths.$standard-size-and-spacing;
   }
 
   // Visited links
   a:visited {
-    color: $darkest-orange
+    color: colors.$darkest-orange
   }
 
   div.announcement {
-    background-color: $light-orange;
-    padding:          $base-padding;
-    border:           5px dashed $dark-orange;
+    background-color: colors.$light-orange;
+    padding:          lengths.$base-padding;
+    border:           5px dashed colors.$dark-orange;
     border-radius:    1em;
     width:            90%;
     margin:           auto;
diff --git a/dev/scss/main/introjs-ids.scss b/dev/scss/main/introjs-ids.scss
index 89496b1..44b3ff6 100644
--- a/dev/scss/main/introjs-ids.scss
+++ b/dev/scss/main/introjs-ids.scss
@@ -1,4 +1,5 @@
-@import "../util";
+@use "../util";
+@use "../base/colors";
 
 /**
  * Styles overriding introJS styles
@@ -21,5 +22,5 @@
 
 
 .tgreeting {
-    color: $darkest-orange;
+    color: colors.$darkest-orange;
     }
diff --git a/dev/scss/main/koralquery.scss b/dev/scss/main/koralquery.scss
index 53dd64d..bcba160 100644
--- a/dev/scss/main/koralquery.scss
+++ b/dev/scss/main/koralquery.scss
@@ -1,5 +1,7 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/lengths";
 
 /**
  * Styles for the KoralQuery view.
@@ -10,13 +12,13 @@
   > div {
     // TODO:
     //   Mark this with result-view
-    background-color: $nearly-white;
+    background-color: colors.$nearly-white;
     overflow-x:       auto;
     font-size:        85%;
 
     margin: {
       top:    2pt;
-      right:  $right-view-distance;
+      right:  lengths.$right-view-distance;
       bottom: 2pt;
       left:  2pt;
     }
diff --git a/dev/scss/main/kwic.scss b/dev/scss/main/kwic.scss
index c3a52fa..f6313b0 100644
--- a/dev/scss/main/kwic.scss
+++ b/dev/scss/main/kwic.scss
@@ -1,5 +1,10 @@
+@use 'sass:color';
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
 
 /**
  * Styles for the KWIC view.
@@ -24,7 +29,7 @@
     list-style-type: none;
     margin:          0;
     padding:         0;
-    border:          $result-border-size solid $kwic-border;
+    border:          lengths.$result-border-size solid colors.$kwic-border;
     font-size:       $font-size;
 
     > li {
@@ -36,7 +41,7 @@
       
       border: {
         style: solid;
-        color: $dark-orange;
+        color: colors.$dark-orange;
         width: 0;
       }
 
@@ -47,7 +52,7 @@
 
       // Zebra style
       &:nth-of-type(even) div.match-main div.match-wrap {
-        background-color: $kwic-line-even;
+        background-color: colors.$kwic-line-even;
       }
 
       // References
@@ -70,7 +75,7 @@
         > div.match-wrap {
           width:            99999%;
 	        margin-left:      -49999.5%;
-	        background-color: $kwic-line-noneven;
+	        background-color: colors.$kwic-line-noneven;
 	        overflow-x:       hidden;
 	        overflow-y:       visible;
 	        white-space:      normal;
@@ -88,13 +93,13 @@
         overflow-x:       hidden;
         text-overflow:    ellipsis;
         white-space:      nowrap;
-        background-color: lighten($middle-grey, 5%);
-        color:            $nearly-white;
+        background-color: color.adjust(colors.$middle-grey, $lightness: 5%, $space: hsl);
+        color:            colors.$nearly-white;
         font-size:        75%;
         padding:          0 5pt;
 
         border: {
-          color: $dark-grey;
+          color: colors.$dark-grey;
           style: solid;
           width: 2px 1px 0 0;
         }
@@ -112,7 +117,7 @@
         }
 
         &.flip {
-          background-color: lighten($middle-grey, 17%);
+          background-color: color.adjust(colors.$middle-grey, $lightness: 17%, $space: hsl);
         }
       }
 
@@ -134,7 +139,7 @@
 div.snippet {
 	text-overflow: ellipsis;
 	text-indent:   0;
-	text-shadow:   $light-shadow;
+	text-shadow:   colors.$light-shadow;
   font-size:     0;
   white-space:   nowrap !important;
 
@@ -146,16 +151,16 @@
   > mark,
   > span.match {
     font-weight: bold;
-    color: $black;
+    color: colors.$black;
     text-shadow: none;
     padding-left: 4pt;
     padding-right: 2pt;
   }
 
   > span.match > span.cutted::after {
-    @include icon-font;
-    content: $fa-cut;
-    color:   $light-green;
+    @include mixins.icon-font;
+    content: icons.$fa-cut;
+    color:   colors.$light-green;
 
     padding: {
       left:  4pt;
@@ -177,8 +182,8 @@
     top:                0;
     left:               0;
     width:              11px;
-    background-color:   $dark-orange;
-    border-right:       1px solid $darkest-orange;
+    background-color:   colors.$dark-orange;
+    border-right:       1px solid colors.$darkest-orange;
   }
 }
 
@@ -191,7 +196,7 @@
 #search > ol > li:target {
   position:         relative;
   display:          block;
-  background-color: $dark-orange;
+  background-color: colors.$dark-orange;
   text-align:       left;
   border-width:     2px;
   white-space:      normal;
@@ -204,22 +209,22 @@
   }
 
   + li.active {
-    border-top:  $border-size solid $light-grey;
-    padding-top: 3 * $border-size;
+    border-top:  lengths.$border-size solid colors.$light-grey;
+    padding-top: 3 * lengths.$border-size;
 
     .button-group.button-view {
-      padding-top: 3 * $border-size;
+      padding-top: 3 * lengths.$border-size;
     }
   }
   
   .snippet {
     white-space:      normal !important;
     padding:          2pt 0 5pt 5pt;
-    background-color: $light-orange;
+    background-color: colors.$light-orange;
 
     margin: {
       top:    0;
-      right:  $right-view-distance;
+      right:  lengths.$right-view-distance;
       bottom: 0;
       left:   0;
     }
@@ -236,7 +241,7 @@
       font-size: 85%;
       text-shadow:none;
       font-weight: normal;
-      color: $dark-grey;
+      color: colors.$dark-grey;
       &::before, &::after {
         display: inline-block !important;
         border-width: 2px;
@@ -250,7 +255,7 @@
         border-top-left-radius: 5px;
         border-bottom-left-radius: 5px;
         border-right-width: 0;
-        background-color: $dark-orange  !important;
+        background-color: colors.$dark-orange  !important;
         content: attr(data-key) ':';
       }
 
@@ -261,7 +266,7 @@
         padding-left: 1pt;
         border-top-right-radius: 5px;
         border-bottom-right-radius: 5px;
-        background-color: $dark-orange  !important;
+        background-color: colors.$dark-orange  !important;
         content: attr(data-value);
       }
     }
@@ -295,7 +300,7 @@
     div.match-wrap {
       cursor:           default;
       min-height:       20pt;
-      background-color: $dark-orange;
+      background-color: colors.$dark-orange;
       width:            100%;
       margin-left:      0;
       overflow-x:       visible;
@@ -309,9 +314,9 @@
 
   p.ref {
     display:       block;
-    color:         $nearly-white;
+    color:         colors.$nearly-white;
     padding:       3pt 10pt 3pt 3pt;
-    padding-right: $right-view-distance;
+    padding-right: lengths.$right-view-distance;
     margin:        0pt;
     width:         100%;
     bottom:        0;
@@ -320,7 +325,7 @@
     > span.sigle {
       font-size:      75%;
       vertical-align: top;
-      color:          $light-orange;
+      color:          colors.$light-orange;
       float:          right;
     }
 
@@ -441,7 +446,7 @@
   }
 }
 
-.class-1 { border-color: $kwic-highlight-1; }
-.class-2 { border-color: $kwic-highlight-2; }
-.class-3 { border-color: $kwic-highlight-3; }
-.class-4 { border-color: $kwic-highlight-4; }
+.class-1 { border-color: colors.$kwic-highlight-1; }
+.class-2 { border-color: colors.$kwic-highlight-2; }
+.class-3 { border-color: colors.$kwic-highlight-3; }
+.class-4 { border-color: colors.$kwic-highlight-4; }
diff --git a/dev/scss/main/logos.scss b/dev/scss/main/logos.scss
index e27f1d6..e35d7c7 100644
--- a/dev/scss/main/logos.scss
+++ b/dev/scss/main/logos.scss
@@ -1,5 +1,8 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/mixins";
+@use "../base/paths";
 
 /**
  * Rules for logos.
@@ -29,7 +32,7 @@
     }
 
     > span {
-      @include blind;
+      @include mixins.blind;
     }
 
     > div.logoaddon {
@@ -43,9 +46,9 @@
       top: 2.1rem;
       transform: rotate(-5deg);
       // text-align:right;
-      color: $nearly-white;
+      color: colors.$nearly-white;
       // padding: 3pt;
-      text-shadow: 1pt 1pt 0 $light-green, -1pt -1pt 0 $light-green, -1pt 1pt 0 $light-green, 1pt -1pt 0 $light-green;
+      text-shadow: 1pt 1pt 0 colors.$light-green, -1pt -1pt 0 colors.$light-green, -1pt 1pt 0 colors.$light-green, 1pt -1pt 0 colors.$light-green;
 
       // Values from new logo:
       // font-size: 45%;
@@ -58,7 +61,7 @@
 }
 
 aside.active + header .logo div.logoaddon {
-  text-shadow: 1pt 1pt 0 $dark-green, -1pt -1pt 0 $dark-green, -1pt 1pt 0 $dark-green, 1pt -1pt 0 $dark-green;
+  text-shadow: 1pt 1pt 0 colors.$dark-green, -1pt -1pt 0 colors.$dark-green, -1pt 1pt 0 colors.$dark-green, 1pt -1pt 0 colors.$dark-green;
 }
 
 /**
@@ -75,7 +78,7 @@
   z-index:     105;
   background: {
     size:  78% !important;
-    image: url('#{$img-path}/korap-logo.svg');
+    image: url('#{paths.$img-path}/korap-logo.svg');
   }
   transform: translateY(-50%);
   -o-transform: translateY(-50%);
diff --git a/dev/scss/main/main.scss b/dev/scss/main/main.scss
index 2e67113..21e0596 100644
--- a/dev/scss/main/main.scss
+++ b/dev/scss/main/main.scss
@@ -1,29 +1,30 @@
 @use 'sass:math';
-@import 'highlight'; // JSON highlighting
-@import 'kwic'; // Kwic view information
-@import 'logos'; // Logo images
-@import 'matchinfo'; // Match table
-@import 'pagination'; // Pagination
-@import 'query'; // View query
-@import 'resultinfo'; // Information on results
-@import 'tutorial'; // Embedded and non-embedded tutorial
-@import 'koralquery'; // KoralQuery
-@import 'alertify'; // Styling alerts
-@import 'intro'; // Intro page
-@import 'panel'; // Base panel system
-@import 'introjs'; // Guided Tour
-@import 'introjs-ids'; // Guided Tour: IDS specific
-@import 'oauth'; // OAuth Management styles
-@import 'announcements'; // Styling for announcements
-@import 'news'; // View for optional news
-@import 'plugin'; // Rules for embedded plugins
-@import 'marketplace'; // Plugin Marketplace styles
+@use 'highlight'; // JSON highlighting
+@use 'kwic'; // Kwic view information
+@use 'logos'; // Logo images
+@use 'matchinfo'; // Match table
+@use 'pagination'; // Pagination
+@use 'query'; // View query
+@use 'resultinfo'; // Information on results
+@use 'tutorial'; // Embedded and non-embedded tutorial
+@use 'koralquery'; // KoralQuery
+@use 'alertify'; // Styling alerts
+@use 'intro'; // Intro page
+@use 'panel'; // Base panel system
+@use 'introjs'; // Guided Tour
+@use 'introjs-ids'; // Guided Tour: IDS specific
+@use 'oauth'; // OAuth Management styles
+@use 'announcements'; // Styling for announcements
+@use 'news'; // View for optional news
+@use 'plugin'; // Rules for embedded plugins
+@use 'marketplace'; // Plugin Marketplace styles
 // @import "tagger";   // Tagger
 
-@import '../util';
+@use '../util';
+@use "../base/lengths";
 
 main {
-  padding: 0 $standard-size-and-spacing;
+  padding: 0 lengths.$standard-size-and-spacing;
 
   // margin: {
   //   left:  $standard-margin;
@@ -31,7 +32,7 @@
   // }
 
   &.shifted {
-    padding-left: calc($standard-size-and-spacing + $logo-left-distance);
+    padding-left: calc(lengths.$standard-size-and-spacing + lengths.$logo-left-distance);
   }
 
   &.embedded {
diff --git a/dev/scss/main/marketplace.scss b/dev/scss/main/marketplace.scss
index 6f8a8aa..40bd291 100644
--- a/dev/scss/main/marketplace.scss
+++ b/dev/scss/main/marketplace.scss
@@ -1,4 +1,5 @@
-@import "../base/base";
+@use "../base/base";
+@use "../base/lengths";
 
 /*
 * Styles for marketplace
@@ -39,7 +40,7 @@
       margin-top: 0;
       width:        20%;
       min-width:    20em;
-      padding:      $base-padding;
+      padding:      lengths.$base-padding;
       cursor:           pointer;
       border-width:     thin;
       text-align:       center;
diff --git a/dev/scss/main/matchinfo.scss b/dev/scss/main/matchinfo.scss
index a0f98c4..3df52b7 100644
--- a/dev/scss/main/matchinfo.scss
+++ b/dev/scss/main/matchinfo.scss
@@ -1,8 +1,10 @@
 @charset "utf-8";
-@import "../util";
-@import "view/matchtable";
-@import "view/matchtree";
-@import "view/metatable";
+@use "../util";
+@use "view/matchtable";
+@use "view/matchtree";
+@use "view/metatable";
+@use "../base/colors";
+@use "../base/lengths";
 
 
 /**
@@ -14,7 +16,7 @@
 div.matchinfo {
   position:    relative;
   width:       100%;
-  padding-top: $border-size;
+  padding-top: lengths.$border-size;
   height:      auto;
   font-size:   10pt;
   text-align:  left;
@@ -24,7 +26,7 @@
   }
 
   .view + .view {
-    margin-top: 4 * $border-size !important;
+    margin-top: 4 * lengths.$border-size !important;
   }
 }
 
@@ -33,7 +35,7 @@
 div.matchtable,
 div.matchtree {
   position:         relative;
-  background-color: $dark-orange;
+  background-color: colors.$dark-orange;
 }
 
 div.button-group.button-panel.button-matchinfo {
diff --git a/dev/scss/main/news.scss b/dev/scss/main/news.scss
index c1c0911..619ccfa 100644
--- a/dev/scss/main/news.scss
+++ b/dev/scss/main/news.scss
@@ -1,5 +1,8 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/mixins";
 
 section#news {
   margin: 2rem 0;
@@ -21,9 +24,9 @@
   }
   
   dd.maintenance > h4::after {
-    @include icon-font;
-    color: $ids-pink-1;
-    content: " " + $fa-warn;
+    @include mixins.icon-font;
+    color: colors.$ids-pink-1;
+    content: " " + icons.$fa-warn;
   }
   
   dd {
diff --git a/dev/scss/main/oauth.scss b/dev/scss/main/oauth.scss
index e5702e6..590cf78 100644
--- a/dev/scss/main/oauth.scss
+++ b/dev/scss/main/oauth.scss
@@ -1,4 +1,8 @@
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
 
 /**
  * Styles for OAuth management form.
@@ -33,17 +37,17 @@
   font-weight: bold;
 
   &::before {
-    @include icon-font;
+    @include mixins.icon-font;
     display:   inline-block;
     width:     1.5em;
-    content:   $fa-client;
-    color:     $ids-blue-1;
+    content:   icons.$fa-client;
+    color:     colors.$ids-blue-1;
     font-size: 100%;
   }
 }
 
 .client-type-confidential::after {
-  @include icon-font;
+  @include mixins.icon-font;
   margin-left: .3em;
   display:   inline-block;
   width:     1.5em;
@@ -53,16 +57,16 @@
 }
 
 .client-type-confidential::after {
-  content:   $fa-confidential;
-  color:     $ids-blue-1;
+  content:   icons.$fa-confidential;
+  color:     colors.$ids-blue-1;
 }
 
 #client_source {
   white-space: pre;
-  border-radius: $standard-border-radius;
-  border-color:     $ids-grey-2;
+  border-radius: lengths.$standard-border-radius;
+  border-color:     colors.$ids-grey-2;
   border-style:     solid;
-  background-color: $light-orange;
+  background-color: colors.$light-orange;
 }
 
 li.token {
@@ -74,13 +78,13 @@
     font-weight: bold;
 
   &::before {
-    @include icon-font;
+    @include mixins.icon-font;
     font-feature-settings: "ss01" on;
     margin-left: -1.5em;
     display:   inline-block;
     width:     1.5em;
-    content:   $fa-token;
-    color:     $ids-blue-1 !important;
+    content:   icons.$fa-token;
+    color:     colors.$ids-blue-1 !important;
     font-size: 100%;
     font-weight: 900;
   }
diff --git a/dev/scss/main/pagination.scss b/dev/scss/main/pagination.scss
index f261fc7..07015c8 100644
--- a/dev/scss/main/pagination.scss
+++ b/dev/scss/main/pagination.scss
@@ -1,6 +1,10 @@
 @charset "utf-8";
 @use 'sass:math';
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/icons";
+@use "../base/lengths";
+@use "../base/mixins";
 
 /**
  * The pagination view
@@ -23,8 +27,8 @@
    */
     position:    fixed;
     font-size:   0;
-    right:       math.div($standard-margin,4);
-    bottom:      math.div($standard-margin,2);
+    right:       math.div(lengths.$standard-margin,4);
+    bottom:      math.div(lengths.$standard-margin,2);
     z-index:     35;
     padding:     0;
     height:      auto;
@@ -36,40 +40,40 @@
         vertical-align: bottom;
 
         &:not(:link):not([rel=self]) {
-            color: $choose-blind-color;
+            color: choose.$choose-blind-color;
         }
 
         &.ellipsis, &[rel=prev], &[rel=next] {
             > span {
-	        @include blind;
+	        @include mixins.blind;
             }
         }
     
         &.ellipsis::after {
-	    @include icon-font;
-	    content:     $fa-elipsis;
+	    @include mixins.icon-font;
+	    content:     icons.$fa-elipsis;
 	    line-height: 1em;
         }
 
         &[rel=self] {
-            @include choose-active;
+            @include choose.choose-active;
             border: {
-	        left-width:  $border-size;
-	        right-width: $border-size;
+	        left-width:  lengths.$border-size;
+	        right-width: lengths.$border-size;
 	        left-style:  solid;
 	        right-style: solid;
             }
         }
 
         &[rel=prev]::after {
-            @include icon-font;
-	    content:     $fa-previous;
+            @include mixins.icon-font;
+	    content:     icons.$fa-previous;
 	    line-height: 1em;
         }
 
         &[rel=next]::after {
-            @include icon-font;
-	    content:     $fa-next;
+            @include mixins.icon-font;
+	    content:     icons.$fa-next;
 	    line-height: 1em;
         }
     }
diff --git a/dev/scss/main/panel.scss b/dev/scss/main/panel.scss
index 568ba5b..94893b9 100644
--- a/dev/scss/main/panel.scss
+++ b/dev/scss/main/panel.scss
@@ -1,4 +1,5 @@
-@import "../util";
+@use "../util";
+@use "../base/lengths";
 
 /**
  * Base styles for all panels and views,
@@ -13,7 +14,7 @@
 
 div.view {
   position:    relative;
-  padding-top: $border-size;
+  padding-top: lengths.$border-size;
   display:     block;
   width:       100%;
 }
diff --git a/dev/scss/main/plugin.scss b/dev/scss/main/plugin.scss
index 5b289a6..e0ac886 100644
--- a/dev/scss/main/plugin.scss
+++ b/dev/scss/main/plugin.scss
@@ -1,10 +1,13 @@
+@use "../base/colors";
+@use "../base/lengths";
+
 /**
  * Base rules for all plugin related styles,
  * like widgets.
  */
 
 div.view.widget {
-  padding-right: $right-view-distance;
+  padding-right: lengths.$right-view-distance;
 
   > iframe {
     margin:     0;
@@ -16,5 +19,5 @@
 }
 
 div.panel.result > div > div.widget > iframe {
-  background-color: $nearly-white;
+  background-color: colors.$nearly-white;
 }
\ No newline at end of file
diff --git a/dev/scss/main/query.scss b/dev/scss/main/query.scss
index 7f99696..407cf10 100644
--- a/dev/scss/main/query.scss
+++ b/dev/scss/main/query.scss
@@ -1,30 +1,33 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/colors";
+@use "../base/lengths";
 
 
 pre.query {
   overflow-x: hidden; 
   padding: .5em;
-  @include choose-item;
+  @include choose.choose-item;
   position:relative;
   border: {
     width: 2px;
     style: solid;
-    radius: $standard-border-radius;
+    radius: lengths.$standard-border-radius;
   }
-  box-shadow: $choose-box-shadow;
+  box-shadow: choose.$choose-box-shadow;
   &:not(.unsupported) {
     cursor: pointer;
     &:hover {
-      @include choose-hover;
+      @include choose.choose-hover;
     }
     &:active {
-      @include choose-active;
+      @include choose.choose-active;
     }
   }
   &.unsupported span {
     vertical-align: super;
-    color: $dark-blue;
+    color: colors.$dark-blue;
     font-size: 90%;
     font-weight: bold;
     cursor: help;
diff --git a/dev/scss/main/resultinfo.scss b/dev/scss/main/resultinfo.scss
index 0255161..2fbae69 100644
--- a/dev/scss/main/resultinfo.scss
+++ b/dev/scss/main/resultinfo.scss
@@ -1,5 +1,8 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/colors";
+@use "../base/icons";
+@use "../base/lengths";
 
 /**
  * Rules applicable for the result panel
@@ -54,8 +57,8 @@
 
 
 div.result.panel .view {
-  border:           1px solid $kwic-border;
-  background-color: $dark-orange;
+  border:           1px solid colors.$kwic-border;
+  background-color: colors.$dark-orange;
 }
 
 
@@ -68,21 +71,21 @@
 
   > span {
     line-height:  1.5em;
-    border-width: $result-border-size 0;
+    border-width: lengths.$result-border-size 0;
 
     &:first-child {
-      border-left-width: $result-border-size;
+      border-left-width: lengths.$result-border-size;
     }
 
     &:last-child {
-      border-right-width: $result-border-size;
+      border-right-width: lengths.$result-border-size;
     }
   }
 }
 
 
 #total-results {
-  color:       $light-green;
+  color:       colors.$light-green;
   font-weight: bold;
 }
 
@@ -102,15 +105,15 @@
   // TODO:
   //   Add icon via data-icon
   &.align.left::after {
-    content: $fa-left-align;
+    content: icons.$fa-left-align;
   }
   &.align.right::after {
-    content: $fa-right-align;
+    content: icons.$fa-right-align;
   }
   &.align.center::after {
-    content: $fa-center-align;
+    content: icons.$fa-center-align;
   }
   &.show-kq::after {
-    content: $fa-code;
+    content: icons.$fa-code;
   }
 }
diff --git a/dev/scss/main/tutorial.scss b/dev/scss/main/tutorial.scss
index d6f8459..44654dd 100644
--- a/dev/scss/main/tutorial.scss
+++ b/dev/scss/main/tutorial.scss
@@ -1,5 +1,9 @@
 @charset "utf-8";
-@import "../util";
+@use "../util";
+@use "../base/choose";
+@use "../base/colors";
+@use "../base/lengths";
+@use "../base/paths";
 
 /**
  * Rules for the embedded documentation.
@@ -12,19 +16,19 @@
   bottom:           5%;
   left:             2%;
   right:            2%;
-  padding-right:    $right-view-distance;
-  background-color: $nearly-white;
-  box-shadow:       $choose-box-shadow;
+  padding-right:    lengths.$right-view-distance;
+  background-color: colors.$nearly-white;
+  box-shadow:       choose.$choose-box-shadow;
 
   border: {
-    width:  2 * $border-size;
-    color:  $dark-grey;
+    width:  2 * lengths.$border-size;
+    color:  colors.$dark-grey;
     style:  solid;
-    radius: $standard-border-radius;
+    radius: lengths.$standard-border-radius;
   }
 
   .button-group.button-view {
-    background-color: $middle-grey;
+    background-color: colors.$middle-grey;
     display:          block;
     height:           100%;
   }
@@ -36,7 +40,7 @@
     // Hack for a Firefox bug
     min-height: 100.1%;
     background: {
-      image:    url('#{$img-path}/korap-bg.svg');
+      image:    url('#{paths.$img-path}/korap-bg.svg');
       repeat:   no-repeat;
       position: center center;
       size:     15%;
@@ -55,11 +59,11 @@
 }
 
 body.embedded {
-  background-color: $nearly-white;
+  background-color: colors.$nearly-white;
   aside {
-    @include choose-item;
+    @include choose.choose-item;
     padding-top: 0;
-    background-color: $middle-grey;
+    background-color: colors.$middle-grey;
 
     > div {
       position:         relative;
diff --git a/dev/scss/main/view/matchtable.scss b/dev/scss/main/view/matchtable.scss
index 05ec880..ca2d3ed 100644
--- a/dev/scss/main/view/matchtable.scss
+++ b/dev/scss/main/view/matchtable.scss
@@ -1,5 +1,9 @@
 @use 'sass:math';
-@import "../../util";
+@use "../../util";
+@use "../../base/colors";
+@use "../../base/icons";
+@use "../../base/lengths";
+@use "../../base/mixins";
 
 /**
  * Table view
@@ -11,8 +15,8 @@
 
   > div {
     z-index:      20;
-    margin-left:  $left-distance - math.div($border-size,2);
-    margin-right: $right-view-distance;
+    margin-left:  lengths.$left-distance - math.div(lengths.$border-size,2);
+    margin-right: lengths.$right-view-distance;
     padding:      0;
     overflow-x:   auto;
     overflow-y:   visible;
@@ -26,7 +30,7 @@
   }
 
   th {
-    color: $nearly-white;
+    color: colors.$nearly-white;
   }
 
   // Use matchinfo cells for query creation
@@ -51,9 +55,9 @@
     &.matchkeyvalues {
       padding: 0;
       > div {
-        @include cell-info;
+        @include mixins.cell-info;
         > span {
-          color:         $darkest-orange;
+          color:         colors.$darkest-orange;
           text-align:    right;
           padding-right: .5em;
           &::after {
@@ -66,7 +70,7 @@
 
   td, div {
     &.notinindex {
-      background-color: $ids-grey-2 !important;
+      background-color: colors.$ids-grey-2 !important;
       cursor: default;
     }
   }
@@ -78,8 +82,8 @@
     td.chosen,
     th.chosen,
     div.chosen {
-      background-color: $light-green !important;
-      color:            $nearly-white;
+      background-color: colors.$light-green !important;
+      color:            colors.$nearly-white;
     }
 
     /**
@@ -87,7 +91,7 @@
      */
     > th:nth-of-type(1),
     > th:nth-of-type(2) {
-      @include matchinfo-head;
+      @include mixins.matchinfo-head;
       position:       absolute;
       z-index:        80;
       vertical-align: middle;
@@ -95,29 +99,29 @@
     }
 
     > th:nth-of-type(2) {
-      left: math.div($left-width,2) + $border-size;
+      left: math.div(lengths.$left-width,2) + lengths.$border-size;
     }
 
     // Includes header line as well
     > * {
-      @include cell-info;
-      border: math.div($border-size,2) solid $dark-orange;
+      @include mixins.cell-info;
+      border: math.div(lengths.$border-size,2) solid colors.$dark-orange;
     }
 
     > td {
-      background-color: $middle-orange;
+      background-color: colors.$middle-orange;
       white-space:      nowrap;
       vertical-align:   top;
       text-align:       center;
       &.mark {
-        background-color: $light-orange;
+        background-color: colors.$light-orange;
       }
     }
 
     &:nth-child(even) > td {
-      background-color: $light-orange;
+      background-color: colors.$light-orange;
       &.mark {
-        background-color: $middle-orange;
+        background-color: colors.$middle-orange;
       }
     }
   }
@@ -127,7 +131,7 @@
     text-align:       center;
 
     &:not(.no-anno) {
-      background-color: $darker-orange;
+      background-color: colors.$darker-orange;
     }
 
     &:nth-of-type(1),
@@ -136,16 +140,16 @@
     }
 
     &.mark {
-      background-color: $darkest-orange;
+      background-color: colors.$darkest-orange;
     }
     
     &.cutted {
-      background-color: $light-orange;
+      background-color: colors.$light-orange;
 
       &::after {
-        @include icon-font;
-        content: $fa-cut;
-        color:   $light-green;
+        @include mixins.icon-font;
+        content: icons.$fa-cut;
+        color:   colors.$light-green;
         padding: {
           left:  4pt;
           right: 4pt;
diff --git a/dev/scss/main/view/matchtree.scss b/dev/scss/main/view/matchtree.scss
index 4f5edbc..e62bb5a 100644
--- a/dev/scss/main/view/matchtree.scss
+++ b/dev/scss/main/view/matchtree.scss
@@ -1,5 +1,8 @@
-@import "../../util";
-@import "tree";
+@use "../../util";
+@use "tree";
+@use "../../base/colors";
+@use "../../base/lengths";
+@use "../../base/mixins";
 
 /**
  * Matchtree view
@@ -15,19 +18,19 @@
   h6 {
     display:   inline;
     font-size: inherit;
-    color:     $nearly-white;
+    color:     colors.$nearly-white;
     margin:    0;
     padding:   0 !important;
     float:     left;
 
     > span {
-      @include matchinfo-head;
-      @include cell-info;
+      @include mixins.matchinfo-head;
+      @include mixins.cell-info;
       display: inline-block !important;
       margin: 0;
 
       &:nth-of-type(2) {
-	      margin-left: $border-size;
+	      margin-left: lengths.$border-size;
       }
     }
   }
@@ -36,10 +39,10 @@
     position:         unset;
     z-index:          4;
     overflow-x:       auto;
-    margin:           $border-size;
-    margin-left:      $left-distance;
-    margin-right:     $right-view-distance;
-    background-color: $light-orange;
+    margin:           lengths.$border-size;
+    margin-left:      lengths.$left-distance;
+    margin-right:     lengths.$right-view-distance;
+    background-color: colors.$light-orange;
   }
 
   svg {
diff --git a/dev/scss/main/view/metatable.scss b/dev/scss/main/view/metatable.scss
index 7467c11..55f0ea0 100644
--- a/dev/scss/main/view/metatable.scss
+++ b/dev/scss/main/view/metatable.scss
@@ -1,26 +1,28 @@
 @charset "utf-8";
-@import "../../util";
+@use "../../util";
+@use "../../base/colors";
+@use "../../base/lengths";
 
 // Metatable
 div.metatable > dl {
-  margin-right: $right-view-distance;
-  margin-top:   $border-size;
+  margin-right: lengths.$right-view-distance;
+  margin-top:   lengths.$border-size;
 
   > div {
-    border-color: $dark-orange;
+    border-color: colors.$dark-orange;
 
     > * {
       padding: .2em;
     }
 
     > dt {
-      background: $darker-orange;
-      color:      $nearly-white;
+      background: colors.$darker-orange;
+      color:      colors.$nearly-white;
       width:      12.5em;
     }
 
     > dd {
-      background-color: $light-orange;
+      background-color: colors.$light-orange;
       cursor: pointer;
 
       &.metakeyvalues {
@@ -30,12 +32,12 @@
           text-indent: -5pt;
           margin-left: 6pt;
           padding-left: 4pt;
-          border-radius: $standard-border-radius;
+          border-radius: lengths.$standard-border-radius;
           margin-bottom: 2pt;
 
           &::before {
             content: "\2022\00A0";
-            color:   $dark-orange;
+            color:   colors.$dark-orange;
             width: 5pt;
             display: inline-block;
           }
@@ -45,13 +47,13 @@
       // equal to td.chosen
       &.chosen,
       > div.chosen {
-        background-color: $light-green !important;
-        color:            $nearly-white;
+        background-color: colors.$light-green !important;
+        color:            colors.$nearly-white;
       }
 
       &[data-type="type:store"],
       &[data-type="type:attachement"] {
-        background-color: $middle-orange;
+        background-color: colors.$middle-orange;
         cursor:           default;
 
         a {
diff --git a/dev/scss/main/view/tree.scss b/dev/scss/main/view/tree.scss
index c7e064b..7242116 100644
--- a/dev/scss/main/view/tree.scss
+++ b/dev/scss/main/view/tree.scss
@@ -1,65 +1,66 @@
 @charset "utf-8";
-@import "../../util";
+@use "../../util";
+@use "../../base/colors";
 
 /**
  * SVG tree
  */
 path.edge {
-  stroke:       $darker-orange;
+  stroke:       colors.$darker-orange;
   stroke-width: 2px;
   fill:         none;
 }
 
 g.arc.infocus > path.edge {
-  stroke: $dark-green;
+  stroke: colors.$dark-green;
 }
 
 marker#arr {
   overflow: visible;
   path {
-    stroke:       $darkest-orange;
-    fill:         $darkest-orange;
+    stroke:       colors.$darkest-orange;
+    fill:         colors.$darkest-orange;
     fill-opacity: 1;
     stroke-width: 2; 
   }
 }
 
 path.anchor {
-  stroke:         $darkest-orange;
+  stroke:         colors.$darkest-orange;
   stroke-width:   3;
   stroke-linecap: round;
   z-index:        20;
 }
 
 g.root rect.empty {
-  stroke:       $darker-orange;
-  fill:         $darker-orange;
+  stroke:       colors.$darker-orange;
+  fill:         colors.$darker-orange;
   stroke-width: 2px;
 }
 
 g.middle,
 g.label {
   rect {
-    stroke:       $darker-orange;
+    stroke:       colors.$darker-orange;
     stroke-width: 2px;
-    fill:         $middle-orange;
+    fill:         colors.$middle-orange;
   }
 }
 
 g.label.infocus rect {
-  stroke: $dark-green;
-  fill:   $lightest-green;
+  stroke: colors.$dark-green;
+  fill:   colors.$lightest-green;
 }
 
 g.middle.mark {
   rect {
-    fill: $darker-orange;
+    fill: colors.$darker-orange;
   }
   > text {
-    fill: $light-orange;
+    fill: colors.$light-orange;
 
     > tspan {
-      stroke: $light-orange;
+      stroke: colors.$light-orange;
     }
   }
 }