diff --git a/elements/_grouping.scss b/elements/_grouping.scss
index d2e811a..df30a37 100644
--- a/elements/_grouping.scss
+++ b/elements/_grouping.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Grouping content
 // -----------------------------------------------------------------------------
 // p
@@ -101,12 +103,12 @@ pre {
 
 .pre_code {
 	overflow-x: auto;
-	border-color: darken($color_back_basic, $color_diff_tiny);
+	border-color: color.scale($color_back_basic, $lightness: -$color_diff_tiny);
 	border-style: dotted;
 	border-width: 0 0 0 $width_border_4;
 	border-radius: $radius_basic;
 	padding: $space_basic;
-	background-color: lighten($color_back_basic, $color_diff_tiny);
+	background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
 
 	code {
 		background-color: transparent;
@@ -274,20 +276,20 @@ div {}
 .box_placeholder {
 	width: 100%;
 	height: $space_medium;
-	border: $width_border_4 solid transparentize($alpha_color, 0.1);
+	border: $width_border_4 solid color.adjust($alpha_color, $alpha: -0.1);
 	border-radius: $radius_basic;
-	background-color: transparentize($alpha_color, 0.2);
+	background-color: color.adjust($alpha_color, $alpha: -0.2);
 }
 
 .box_placeholder_bkg {
 	width: 100%;
 	height: $space_medium * 2;
-	border: $width_border_4 solid transparentize($color_front_basic, 0.1);
+	border: $width_border_4 solid color.adjust($color_front_basic, $alpha: -0.1);
 	border-radius: $radius_basic;
 	padding: $space_basic;
 	/*data:[<mime type>][;charset=<charset>][;base64],<encoded data>*/
 	background: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0' y='0' width='100%' height='100%'><line x1='0' y1='0' x2='100%' y2='100%' stroke='%23FFF' stroke-width='.5'/><line x1='0' y1='100%' x2='100%' y2='0' stroke='%23FFF' stroke-width='.5'/></svg>") no-repeat;
-	background-color: transparentize($color_front_basic, 0.1);
+	background-color: color.adjust($color_front_basic, $alpha: -0.1);
 }
 
 .box_file_tile {
diff --git a/elements/_interactive.scss b/elements/_interactive.scss
index 263f75e..d36f6fc 100644
--- a/elements/_interactive.scss
+++ b/elements/_interactive.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Forms
 // -----------------------------------------------------------------------------
 // form
@@ -88,7 +90,7 @@ td > textarea {
 
 	&[readonly="readonly"],
 	&[readonly] {
-		background-color: darken($color_back_io, $color_diff_double);
+		background-color: color.scale($color_back_io, $lightness: -$color_diff_double);
 	}
 
 	&[disabled="disabled"],
@@ -117,7 +119,7 @@ td > textarea {
 
 	&[readonly="readonly"],
 	&[readonly] {
-		border-color: darken($color_border_io, $color_diff_double);
+		border-color: color.scale($color_border_io, $lightness: -$color_diff_double);
 	}
 
 	&[disabled="disabled"],
@@ -165,7 +167,7 @@ button {
 	&[disabled="disabled"],
 	&[disabled] {
 		border-color: transparent;
-		color: lighten($color_text_button, $color_diff_double);
+		color: color.scale($color_text_button, $lightness: $color_diff_double);
 
 		&:hover {
 			background-color: $color_back_button;
diff --git a/elements/_tables.scss b/elements/_tables.scss
index da04d62..94e6b4e 100644
--- a/elements/_tables.scss
+++ b/elements/_tables.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Tabular data
 // -----------------------------------------------------------------------------
 // table
@@ -40,7 +42,7 @@ table {
 	}
 
 	tr:nth-child(even) td {
-		background-color: lighten($color_back_basic, $color_diff_tiny);
+		background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
 	}
 }
 
@@ -125,6 +127,6 @@ td:last-child {
 
 .cell_pre {
 	// border-right-width: $width_border_4;
-	// border-right-color: lighten($color_back_basic, $color_diff_basic);
-	background-color: lighten($color_back_basic, $color_diff_tiny);
+	// border-right-color: color.scale($color_back_basic, $lightness: $color_diff_basic);
+	background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
 }
diff --git a/elements/_textlevel.scss b/elements/_textlevel.scss
index f94beb7..71de523 100644
--- a/elements/_textlevel.scss
+++ b/elements/_textlevel.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Text-Level semantics
 // -----------------------------------------------------------------------------
 // a
@@ -38,7 +40,7 @@
 // -----------------------------------------------------------------------------
 a {
 	color: $color_link_basic;
-	//  color: lighten($color_action_basic, 20%);
+	//  color: color.scale($color_action_basic, $lightness: 20%);
 	text-decoration: none;
 
 	&:active,
@@ -80,13 +82,13 @@ a {
 	display: inline-block;
 	padding: $padding_basic;
 	border-radius: $radius_basic;
-	background-color: transparentize($color_link_basic, 0.8);
+	background-color: color.adjust($color_link_basic, $alpha: -0.8);
 
 	&:active,
 	&:focus,
 	&:hover {
 		border-color: transparent;
-		background-color: transparentize($color_highlight_basic, 0.8);
+		background-color: color.adjust($color_highlight_basic, $alpha: -0.8);
 	}
 }
 
@@ -194,8 +196,8 @@ time {
 // -----------------------------------------------------------------------------
 code {
 	@extend %basic_mono;
-	color: lighten($color_text_basic, $color_diff_basic);
-	background-color: lighten($color_back_basic, $color_diff_tiny);
+	color: color.scale($color_text_basic, $lightness: $color_diff_basic);
+	background-color: color.scale($color_back_basic, $lightness: $color_diff_tiny);
 }
 
 .code_solo {
@@ -227,7 +229,7 @@ kbd {
 	border-style: solid;
 	border-color: $color_darker;
 	border-radius: $radius_basic;
-	color: lighten($color_text_basic, $color_diff_basic);
+	color: color.scale($color_text_basic, $lightness: $color_diff_basic);
 }
 
 // Sub- and superscript
@@ -249,17 +251,17 @@ mark {
 }
 
 .mark_cursor {
-	color: invert($color_text_basic);
+	color: color.invert($color_text_basic);
 	background-color: $color_text_basic;
 }
 
 ::-moz-selection {
-	color: invert($color_text_basic);
+	color: color.invert($color_text_basic);
 	background-color: $color_text_basic;
 }
 
 ::selection {
-	color: invert($color_text_basic);
+	color: color.invert($color_text_basic);
 	background-color: $color_text_basic;
 }
 
diff --git a/functions/_color.scss b/functions/_color.scss
index 228ed81..11fbfac 100644
--- a/functions/_color.scss
+++ b/functions/_color.scss
@@ -1,13 +1,16 @@
+@use "sass:map";
+@use "sass:color";
+
 @function createColorMap($color, $percentage, $opacity) {
   $map: (
     base: $color,
-    light: lighten($color, $percentage),
-    dark: darken($color, $percentage),
-    trans: transparentize($color, $opacity)
+    light: color.scale($color, $lightness: $percentage),
+    dark: color.scale($color, $lightness: -$percentage),
+    trans: color.adjust($color, $alpha: -$opacity)
   );
   @return $map;
 }
 
 @function basic_color($key: 'alpha') {
-  @return map-get($color_palette, $key);
+  @return map.get($color_palette, $key);
 }
diff --git a/functions/_shade.scss b/functions/_shade.scss
index 6607422..263daed 100644
--- a/functions/_shade.scss
+++ b/functions/_shade.scss
@@ -1,4 +1,4 @@
-@charset "UTF-8";
+@use "sass:color";
 
 // Mixes a color with black.
 //
@@ -20,5 +20,5 @@
 // @return {Color}
 
 @function shade($color, $percent) {
-  @return mix(#000, $color, $percent);
+  @return color.mix(#000, $color, $percent);
 }
diff --git a/functions/_tint.scss b/functions/_tint.scss
index 7eee931..d925594 100644
--- a/functions/_tint.scss
+++ b/functions/_tint.scss
@@ -1,4 +1,4 @@
-@charset "UTF-8";
+@use "sass:color";
 
 // Mixes a color with white.
 //
@@ -20,5 +20,5 @@
 // @return {Color}
 
 @function tint($color, $percent) {
-  @return mix(#fff, $color, $percent);
+  @return color.mix(#fff, $color, $percent);
 }
diff --git a/global/_common.scss b/global/_common.scss
index 3565a10..fc42881 100644
--- a/global/_common.scss
+++ b/global/_common.scss
@@ -1,7 +1,7 @@
 // Common styles for global usage
 // -----------------------------------------------------------------------------
 @use "sass:math";
-
+@use "sass:color";
 
 
 // General classes
@@ -53,9 +53,9 @@
 }
 
 @each $size, $variable in (basic, #{$space_basic}),
-(small, #{$space_small}),
-(medium, #{$space_medium}),
-(large, #{$space_large}) {
+	(small, #{$space_small}),
+	(medium, #{$space_medium}),
+	(large, #{$space_large}) {
 	.space_top_#{$size} {
 		margin-top: $variable;
 	}
@@ -108,7 +108,7 @@
 }
 
 .wrap_center {
-	&>* {
+	& > * {
 		margin-right: math.div((100% - $width_basic), 2);
 		margin-left: math.div((100% - $width_basic), 2);
 
@@ -130,7 +130,6 @@
 }
 
 
-
 // Clearing and floating
 // -----------------------------------------------------------------------------
 .clear {
@@ -169,7 +168,6 @@
 }
 
 
-
 // Inlining
 // -----------------------------------------------------------------------------
 .inline {
@@ -177,7 +175,6 @@
 }
 
 
-
 // Flex & grid
 // -----------------------------------------------------------------------------
 %flex-inline {
@@ -205,7 +202,6 @@
 }
 
 
-
 // Positioned elements
 // -----------------------------------------------------------------------------
 %viewport_fixed {
@@ -276,11 +272,13 @@
 .mouse_over {
 	@extend %viewport_fixed;
 	z-index: $z_heaven;
-	background-color: transparentize($color_darkest, 0.5);
 	transition: background-color $duration_long $timing_basic $duration_long;
 	pointer-events: none;
-}
 
+	&.active {
+		background-color: color.adjust($color_darkest, $alpha: -0.5);
+	}
+}
 
 
 // Colors
@@ -294,7 +292,6 @@
 }
 
 
-
 // Text
 // -----------------------------------------------------------------------------
 .txt_tiny {
diff --git a/global/_config.scss b/global/_config.scss
index 7d3b1f0..42b6a91 100644
--- a/global/_config.scss
+++ b/global/_config.scss
@@ -1,6 +1,9 @@
+@use "sass:color";
+@use "sass:map";
+@use "sass:math";
+
 // Default configuration
 // ------------------------------------------------------------------------------
-@use "sass:math";
 
 
 
@@ -86,15 +89,14 @@ $color_brightest: white !default;
 
 $color_text_basic: black !default;
 $color_back_basic: #808080 !default;
-$color_border_basic: lighten($color_text_basic, $color_diff_basic) !default;
+$color_border_basic: color.scale($color_text_basic, $lightness: 12%) !default;
 $color_front_basic: white !default;
 
-$color_medium: lighten($color_darkest, 50%
-);
-$color_dark: lighten($color_darkest, $color_diff_double);
-$color_darker: darken($color_back_basic, $color_diff_basic);
-$color_brighter: lighten($color_back_basic, $color_diff_basic);
-$color_bright: darken($color_brightest, $color_diff_double);
+$color_medium: color.scale($color_darkest, $lightness: 50%);
+$color_dark: color.scale($color_darkest, $lightness: $color_diff_double);
+$color_darker: color.scale($color_back_basic, $lightness: -$color_diff_basic);
+$color_brighter: color.scale($color_back_basic, $lightness: $color_diff_basic);
+$color_bright: color.scale($color_brightest, $lightness: -$color_diff_double);
 
 $color_head_basic: $color_text_basic !default;
 $color_link_basic: $delta_color !default;
@@ -111,8 +113,8 @@ $color_list: (
 @each $key, $value in $color_palette {
 	$map: (
 	);
-$map: map-merge($map, ($key: createColorMap($value, 15%, 0.5)));
-$color_list: map-merge($color_list, $map);
+$map: map.merge($map, ($key: createColorMap($value, 15%, 0.5)));
+$color_list: map.merge($color_list, $map);
 }
 
 
@@ -212,9 +214,9 @@ $io_focus_list: 'a[href]',
 	'textarea:not([disabled])',
 	'*[tabindex]';
 
-$color_text_io: lighten($color_text_basic, $color_diff_basic) !default;
+$color_text_io: color.scale($color_text_basic, $lightness: $color_diff_basic) !default;
 $color_text_button: $color_text_basic !default;
-$color_back_io: darken($color_front_basic, $color_diff_basic) !default;
+$color_back_io: color.scale($color_front_basic, $lightness: -$color_diff_basic) !default;
 $color_back_button: $color_darker !default;
 $color_border_io: $color_front_basic !default;
 $color_border_button: $color_dark !default;
@@ -224,7 +226,7 @@ $border_io: $width_border_io solid $color_border_io;
 $border_io_dotted: $width_border_io dotted $color_border_io;
 
 $shadow_basic: inset 0 1px 3px rgba($color_darkest, 0.06);
-$shadow_focus: $shadow_basic, 0 0 5px adjust-color($color_action_basic, $lightness: -5%, $alpha: -0.3);
+$shadow_focus: $shadow_basic, 0 0 5px color.adjust($color_action_basic, $lightness: -5%, $alpha: -0.3);
 
 
 
diff --git a/mixins/_color.scss b/mixins/_color.scss
index 0849dc9..5ace6b1 100644
--- a/mixins/_color.scss
+++ b/mixins/_color.scss
@@ -1,20 +1,22 @@
+@use "sass:map";
+
 @mixin addDefaultColors() {
-  @if map-has-key($color_palette, alpha) {
-    $alpha_color: map-get($color_palette, alpha) !global;
+  @if map.has-key($color_palette, alpha) {
+    $alpha_color: map.get($color_palette, alpha) !global;
   }
-  @if map-has-key($color_palette, bravo) {
-    $bravo_color: map-get($color_palette, bravo) !global;
+  @if map.has-key($color_palette, bravo) {
+    $bravo_color: map.get($color_palette, bravo) !global;
   }
-  @if map-has-key($color_palette, charlie) {
-    $charlie_color: map-get($color_palette, charlie) !global;
+  @if map.has-key($color_palette, charlie) {
+    $charlie_color: map.get($color_palette, charlie) !global;
   }
-  @if map-has-key($color_palette, delta) {
-    $delta_color: map-get($color_palette, delta) !global;
+  @if map.has-key($color_palette, delta) {
+    $delta_color: map.get($color_palette, delta) !global;
   }
-  @if map-has-key($color_palette, echo) {
-    $echo_color: map-get($color_palette, echo) !global;
+  @if map.has-key($color_palette, echo) {
+    $echo_color: map.get($color_palette, echo) !global;
   }
-  @if map-has-key($color_palette, foxtrot) {
-    $foxtrot_color: map-get($color_palette, foxtrot) !global;
+  @if map.has-key($color_palette, foxtrot) {
+    $foxtrot_color: map.get($color_palette, foxtrot) !global;
   }
 }
diff --git a/mixins/_sprite.scss b/mixins/_sprite.scss
index 6068269..79d9f1f 100644
--- a/mixins/_sprite.scss
+++ b/mixins/_sprite.scss
@@ -1,3 +1,5 @@
+@use "sass:list";
+
 // SCSS variables are information about icon's compiled state, stored under its original file name
 //
 // .icon-home {
@@ -84,21 +86,21 @@ $spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, );
 // // HTML
 // <i class="icon icon-home"></i>
 @mixin sprite-width($sprite) {
-  width: nth($sprite, 5);
+  width: list.nth($sprite, 5);
 }
 
 @mixin sprite-height($sprite) {
-  height: nth($sprite, 6);
+  height: list.nth($sprite, 6);
 }
 
 @mixin sprite-position($sprite) {
-  $sprite-offset-x: nth($sprite, 3);
-  $sprite-offset-y: nth($sprite, 4);
+  $sprite-offset-x: list.nth($sprite, 3);
+  $sprite-offset-y: list.nth($sprite, 4);
   background-position: $sprite-offset-x  $sprite-offset-y;
 }
 
 @mixin sprite-image($sprite) {
-  $sprite-image: nth($sprite, 9);
+  $sprite-image: list.nth($sprite, 9);
   background-image: url(#{$sprite-image});
 }
 
@@ -115,7 +117,7 @@ $spritesheet: (96px, 64px, '../art/sprite.png', $spritesheet-sprites, );
 // @include sprites($spritesheet-sprites);
 @mixin sprites($sprites) {
   @each $sprite in $sprites {
-    $sprite-name: nth($sprite, 10);
+    $sprite-name: list.nth($sprite, 10);
     .#{$sprite-name} {
       @include sprite($sprite);
     }
diff --git a/modules/explanation/_explanation_module.scss b/modules/explanation/_explanation_module.scss
index fe4ed62..899add5 100644
--- a/modules/explanation/_explanation_module.scss
+++ b/modules/explanation/_explanation_module.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass:math";
 
 %expose_after {
@@ -36,7 +37,7 @@
 
 .exp_overlay {
 	@extend %full_parent;
-	background-color: transparentize($alpha_color, .6);
+	background-color: color.adjust($alpha_color, $alpha: -0.6);
 }
 
 .exp_pop {
diff --git a/modules/print/_print_module.scss b/modules/print/_print_module.scss
index 053e92f..84d9c0f 100644
--- a/modules/print/_print_module.scss
+++ b/modules/print/_print_module.scss
@@ -1,5 +1,5 @@
-// Custom extends and mixins
-// ------------------------------------------------------------------------------
+@use "sass:list";
+
 @import "mixins";
 @import "extends";
 
@@ -31,18 +31,18 @@ $din: $a4, $a5, $a6;
 	}
 
 	@each $space in $din {
-		#{nth($space, 1)} {
-			padding-top: nth($space, 2) nth($space, 3) nth($space, 4) nth($space, 5);
+		#{list.nth($space, 1)} {
+			padding-top: list.nth($space, 2) list.nth($space, 3) list.nth($space, 4) list.nth($space, 5);
 
 			.page_head, .page_foot {
-				right: nth($space, 3);
-				left: nth($space, 5);
+				right: list.nth($space, 3);
+				left: list.nth($space, 5);
 			}
 			.page_head {
-				top: nth($space, 2);
+				top: list.nth($space, 2);
 			}
 			.page_foot {
-				bottom: nth($space, 4);
+				bottom: list.nth($space, 4);
 			}
 		}
 	}