From 939ec0f269affe21ad0fc643e8eda6675dae421f Mon Sep 17 00:00:00 2001
From: Robert Kaussow <mail@thegeeklab.de>
Date: Fri, 7 Feb 2025 15:14:13 +0100
Subject: [PATCH] refactor: replace deprecated sass global imports (#965)

---
 layouts/shortcodes/gist.html |   1 +
 src/sass/_asciidoc.scss      |  23 +++--
 src/sass/_base.scss          | 181 ++++++++++++++++++-----------------
 src/sass/_chroma_base.scss   |  10 +-
 src/sass/_chroma_dark.scss   |   4 +-
 src/sass/_chroma_light.scss  |   4 +-
 src/sass/_color_mode.scss    | 122 ++++++++++++-----------
 src/sass/_defaults.scss      |   4 +-
 src/sass/_markdown.scss      |  66 ++++++-------
 src/sass/_mobile.scss        |  32 ++++---
 src/sass/_print.scss         |   8 +-
 src/sass/_shortcodes.scss    | 105 ++++++++++----------
 src/sass/_utils.scss         |  10 +-
 src/sass/main.scss           |  24 ++---
 src/sass/mobile.scss         |   5 +-
 src/sass/print.scss          |   5 +-
 16 files changed, 313 insertions(+), 291 deletions(-)
 create mode 100644 layouts/shortcodes/gist.html

diff --git a/layouts/shortcodes/gist.html b/layouts/shortcodes/gist.html
new file mode 100644
index 0000000..5f754f6
--- /dev/null
+++ b/layouts/shortcodes/gist.html
@@ -0,0 +1 @@
+<script src="https://gist.github.com/{{ index .Params 0 }}/{{ index .Params 1 }}.js{{if len .Params | eq 3 }}?file={{ index .Params 2 }}{{end}}"></script>
diff --git a/src/sass/_asciidoc.scss b/src/sass/_asciidoc.scss
index 399a640..946b0ce 100644
--- a/src/sass/_asciidoc.scss
+++ b/src/sass/_asciidoc.scss
@@ -1,18 +1,21 @@
+@use "sass:color";
+@use "defaults";
+
 .admonitionblock {
-  @each $name, $color in $hint-colors {
+  @each $name, $color in defaults.$hint-colors {
     &.#{$name} {
       border-left-color: $color;
       background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
-      color: $body-font-color;
+      color: defaults.$body-font-color;
     }
   }
 
   & {
-    margin: $padding-16 0;
+    margin: defaults.$padding-16 0;
     padding: 0;
 
-    border-left: $border-4 solid var(--accent-color);
-    border-radius: $border-radius;
+    border-left: defaults.$border-4 solid var(--accent-color);
+    border-radius: defaults.$border-radius;
   }
 
   table {
@@ -25,10 +28,10 @@
 
     td {
       display: block;
-      padding: $padding-4 $padding-16 !important;
+      padding: defaults.$padding-4 defaults.$padding-16 !important;
 
       &:first-child {
-        background-color: color.scale($gray-600, $alpha: -95%);
+        background-color: color.scale(defaults.$gray-600, $alpha: -95%);
         font-weight: bold;
 
         &.icon {
@@ -40,18 +43,18 @@
           i.fa::after {
             content: attr(title);
             font-style: normal;
-            padding-left: $padding-24;
+            padding-left: defaults.$padding-24;
           }
 
           i.fa {
-            color: $black;
+            color: defaults.$black;
             background-size: auto 90%;
             background-repeat: no-repeat;
             filter: invert(30%);
             margin-left: -5px;
           }
 
-          @each $name, $icon in $hint-icons {
+          @each $name, $icon in defaults.$hint-icons {
             i.fa.icon-#{$name} {
               background-image: url(img/geekdoc-stack.svg##{$icon});
             }
diff --git a/src/sass/_base.scss b/src/sass/_base.scss
index e610633..1b6fb89 100644
--- a/src/sass/_base.scss
+++ b/src/sass/_base.scss
@@ -1,42 +1,47 @@
+@use "sass:meta";
+@use "sass:map";
+@use "color_mode";
+@use "defaults";
+
 :root {
   --code-max-height: none;
 
-  --header-font-family: #{meta.inspect($header-font-family)};
-  --body-font-family: #{meta.inspect($body-font-family)};
-  --code-font-family: #{meta.inspect($code-font-family)};
+  --header-font-family: #{meta.inspect(defaults.$header-font-family)};
+  --body-font-family: #{meta.inspect(defaults.$body-font-family)};
+  --code-font-family: #{meta.inspect(defaults.$code-font-family)};
 }
 
 :root,
 :root[color-theme="light"] {
-  @include color_theme_light;
-  @include code_theme_light;
+  @include color_mode.color_theme_light;
+  @include color_mode.code_theme_light;
 }
 
 @media (prefers-color-scheme: light) {
   :root {
-    @include color_theme_light;
-    @include code_theme_light;
+    @include color_mode.color_theme_light;
+    @include color_mode.code_theme_light;
   }
 }
 
 :root[color-theme="dark"] {
-  @include color_theme_dark;
-  @include code_theme_dark;
+  @include color_mode.color_theme_dark;
+  @include color_mode.code_theme_dark;
 }
 
 :root[code-theme="dark"] {
-  @include code_theme_dark;
+  @include color_mode.code_theme_dark;
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    @include color_theme_dark;
-    @include code_theme_dark;
+    @include color_mode.color_theme_dark;
+    @include color_mode.code_theme_dark;
   }
 }
 
 html {
-  font-size: $font-size-base;
+  font-size: defaults.$font-size-base;
   letter-spacing: 0.33px;
   scroll-behavior: smooth;
 
@@ -87,7 +92,7 @@ html {
 
 html,
 body {
-  min-width: $body-min-width;
+  min-width: defaults.$body-min-width;
   overflow-x: hidden;
 }
 
@@ -108,7 +113,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-weight: $body-font-weight;
+  font-weight: defaults.$body-font-weight;
   display: flex;
   align-items: center;
 }
@@ -116,7 +121,7 @@ h6 {
 h4,
 h5,
 h6 {
-  font-size: $font-size-16 !important;
+  font-size: defaults.$font-size-16 !important;
 }
 
 a {
@@ -161,20 +166,20 @@ img {
   color: var(--body-font-color);
   background: var(--body-background);
 
-  font-weight: $body-font-weight;
+  font-weight: defaults.$body-font-weight;
 }
 
 .container {
   width: 100%;
-  max-width: $container-max-width;
+  max-width: defaults.$container-max-width;
   margin: 0 auto;
-  padding: $padding-20;
+  padding: defaults.$padding-20;
 }
 
 svg.gdoc-icon {
   display: inline-block;
-  width: $font-size-20;
-  height: $font-size-20;
+  width: defaults.$font-size-20;
+  height: defaults.$font-size-20;
   vertical-align: middle;
   stroke-width: 0;
   stroke: currentColor;
@@ -197,19 +202,19 @@ svg.gdoc-icon {
   }
 
   svg.gdoc-icon {
-    width: $font-size-32;
-    height: $font-size-32;
+    width: defaults.$font-size-32;
+    height: defaults.$font-size-32;
   }
 }
 
 .gdoc-brand {
-  font-size: $font-size-32;
-  line-height: $font-size-32;
+  font-size: defaults.$font-size-32;
+  line-height: defaults.$font-size-32;
 
   &__img {
-    margin-right: $padding-16;
-    width: $padding-32;
-    height: $padding-32;
+    margin-right: defaults.$padding-16;
+    width: defaults.$padding-32;
+    height: defaults.$padding-32;
   }
 }
 
@@ -218,7 +223,7 @@ svg.gdoc-icon {
     display: flex;
 
     > span {
-      margin-left: $padding-8;
+      margin-left: defaults.$padding-8;
     }
   }
 
@@ -233,18 +238,18 @@ svg.gdoc-icon {
 }
 
 .gdoc-nav {
-  flex: 0 0 $menu-width;
+  flex: 0 0 defaults.$menu-width;
 
   nav {
-    width: $menu-width;
-    padding: $padding-16 $padding-32 $padding-16 0;
+    width: defaults.$menu-width;
+    padding: defaults.$padding-16 defaults.$padding-32 defaults.$padding-16 0;
 
     > ul > li > * {
       font-weight: normal;
     }
 
     section {
-      margin-top: $padding-32;
+      margin-top: defaults.$padding-32;
     }
   }
 
@@ -267,22 +272,22 @@ svg.gdoc-icon {
   }
 
   &__list {
-    padding-left: $padding-16;
+    padding-left: defaults.$padding-16;
     margin: 0;
     padding: 0;
     list-style: none;
     user-select: none;
 
     ul {
-      padding-left: $padding-16;
+      padding-left: defaults.$padding-16;
     }
 
     li {
-      margin: $padding-12 0;
+      margin: defaults.$padding-12 0;
     }
 
     svg.gdoc-icon {
-      margin-right: $padding-4;
+      margin-right: defaults.$padding-4;
     }
   }
 
@@ -293,8 +298,8 @@ svg.gdoc-icon {
       cursor: pointer;
 
       svg.gdoc-icon.toggle {
-        width: $font-size-16;
-        height: $font-size-16;
+        width: defaults.$font-size-16;
+        height: defaults.$font-size-16;
       }
     }
 
@@ -347,22 +352,22 @@ svg.gdoc-icon {
 .gdoc-search__list,
 .gdoc-language__list {
   background: var(--body-background);
-  border-radius: $border-radius;
+  border-radius: defaults.$border-radius;
   box-shadow:
     0 1px 3px 0 var(--accent-color-dark),
     0 1px 2px 0 var(--accent-color);
   position: absolute;
   margin: 0;
-  padding: $padding-8 $padding-4 !important;
+  padding: defaults.$padding-8 defaults.$padding-4 !important;
   list-style: none;
-  top: calc(100% + #{$padding-8});
+  top: calc(100% + #{defaults.$padding-8});
   z-index: 2;
 }
 
 .gdoc-page {
-  min-width: calc($body-min-width - $padding-32);
+  min-width: calc(defaults.$body-min-width - defaults.$padding-32);
   flex-grow: 1;
-  padding: $padding-16 0;
+  padding: defaults.$padding-16 0;
 
   h1,
   h2,
@@ -375,7 +380,7 @@ svg.gdoc-icon {
 
   &__header,
   &__footer {
-    margin-bottom: $padding-24;
+    margin-bottom: defaults.$padding-24;
 
     svg.gdoc-icon {
       color: var(--control-icons);
@@ -389,8 +394,8 @@ svg.gdoc-icon {
 
   &__header {
     background: var(--accent-color-lite);
-    padding: $padding-8 $padding-16;
-    border-radius: $border-radius;
+    padding: defaults.$padding-8 defaults.$padding-16;
+    border-radius: defaults.$border-radius;
   }
 
   &__nav {
@@ -425,7 +430,7 @@ svg.gdoc-icon {
   }
 
   &__footer {
-    margin-top: $padding-32;
+    margin-top: defaults.$padding-32;
 
     a:hover {
       text-decoration: none;
@@ -435,8 +440,8 @@ svg.gdoc-icon {
 
 .gdoc-post {
   word-wrap: break-word;
-  border-top: 1px dashed $gray-600;
-  padding: $padding-32 0;
+  border-top: 1px dashed defaults.$gray-600;
+  padding: defaults.$padding-32 0;
 
   &:first-of-type {
     padding-top: 0;
@@ -469,7 +474,7 @@ svg.gdoc-icon {
   }
 
   &__readmore {
-    margin: $padding-32 0;
+    margin: defaults.$padding-32 0;
 
     a,
     a:hover,
@@ -485,22 +490,22 @@ svg.gdoc-icon {
     }
 
     > span {
-      margin: $padding-4 0;
+      margin: defaults.$padding-4 0;
       &:not(:last-child) {
-        margin-right: $padding-8;
+        margin-right: defaults.$padding-8;
       }
     }
 
     svg.gdoc-icon {
-      font-size: $font-size-20;
+      font-size: defaults.$font-size-20;
     }
 
     .gdoc-button {
-      margin: 0 $padding-2 0 0;
+      margin: 0 defaults.$padding-2 0 0;
     }
 
     &--head {
-      margin-bottom: $padding-32;
+      margin-bottom: defaults.$padding-32;
     }
   }
 
@@ -515,19 +520,19 @@ svg.gdoc-icon {
   &__codecopy {
     visibility: hidden;
     position: absolute;
-    top: $padding-8;
-    right: $padding-8;
+    top: defaults.$padding-8;
+    right: defaults.$padding-8;
 
-    border: $border-2 solid var(--code-copy-border-color);
-    border-radius: $border-radius;
+    border: defaults.$border-2 solid var(--code-copy-border-color);
+    border-radius: defaults.$border-radius;
     background: var(--code-copy-background);
-    width: $padding-32;
-    height: $padding-32;
+    width: defaults.$padding-32;
+    height: defaults.$padding-32;
 
     svg.gdoc-icon {
       top: 0;
-      width: $font-size-20;
-      height: $font-size-20;
+      width: defaults.$font-size-20;
+      height: defaults.$font-size-20;
       color: var(--code-copy-font-color);
     }
 
@@ -562,10 +567,10 @@ svg.gdoc-icon {
   }
 
   &__item {
-    line-height: $padding-32;
+    line-height: defaults.$padding-32;
 
     &--row {
-      margin-right: $padding-16;
+      margin-right: defaults.$padding-16;
     }
   }
 
@@ -584,10 +589,10 @@ svg.gdoc-icon {
 
   svg.gdoc-icon {
     position: absolute;
-    left: $padding-8;
+    left: defaults.$padding-8;
     color: var(--control-icons);
-    width: $font-size-20;
-    height: $font-size-20;
+    width: defaults.$font-size-20;
+    height: defaults.$font-size-20;
   }
 
   &::after {
@@ -598,14 +603,14 @@ svg.gdoc-icon {
 
   &__input {
     width: 100%;
-    padding: $padding-8;
-    padding-left: $padding-32;
+    padding: defaults.$padding-8;
+    padding-left: defaults.$padding-32;
 
     transition:
       border-color 0.15s ease-in-out,
       box-shadow 0.15s ease-in-out;
     border: 1px solid transparent;
-    border-radius: $border-radius;
+    border-radius: defaults.$border-radius;
 
     background: var(--accent-color-lite);
     color: var(--body-font-color);
@@ -631,26 +636,26 @@ svg.gdoc-icon {
     }
 
     > li + li {
-      margin-top: $padding-4;
+      margin-top: defaults.$padding-4;
     }
 
     svg.gdoc-icon {
-      margin-right: $padding-4;
+      margin-right: defaults.$padding-4;
     }
   }
 
   &__section {
     display: flex;
     flex-direction: column;
-    padding: $padding-4 !important;
+    padding: defaults.$padding-4 !important;
   }
 
   &__entry {
     display: flex;
     flex-direction: column;
     color: var(--body-font-color);
-    padding: $padding-4 !important;
-    border-radius: $border-radius;
+    padding: defaults.$padding-4 !important;
+    border-radius: defaults.$border-radius;
 
     &:hover,
     &.is-active {
@@ -668,7 +673,7 @@ svg.gdoc-icon {
     }
 
     &--description {
-      font-size: $font-size-14;
+      font-size: defaults.$font-size-14;
       font-style: italic;
     }
   }
@@ -707,7 +712,7 @@ svg.gdoc-icon {
 }
 
 .gdoc-paging {
-  padding: $padding-16 0;
+  padding: defaults.$padding-16 0;
 
   &__item {
     flex: 1 1 0;
@@ -719,7 +724,7 @@ svg.gdoc-icon {
     a:hover,
     a:visited:hover {
       background: var(--link-color);
-      color: $gray-100;
+      color: defaults.$gray-100;
     }
 
     &--next {
@@ -733,13 +738,13 @@ svg.gdoc-icon {
 }
 
 .gdoc-error {
-  padding: $padding-96 $padding-16;
+  padding: defaults.$padding-96 defaults.$padding-16;
   margin: 0 auto;
   max-width: 45em;
 
   svg.gdoc-icon {
-    width: $font-size-128;
-    height: $font-size-128;
+    width: defaults.$font-size-128;
+    height: defaults.$font-size-128;
     color: var(--body-font-color);
   }
 
@@ -750,15 +755,15 @@ svg.gdoc-icon {
   }
 
   &__message {
-    padding-left: $padding-64;
+    padding-left: defaults.$padding-64;
   }
 
   &__line {
-    padding: $padding-8 0;
+    padding: defaults.$padding-8 0;
   }
 
   &__title {
-    font-size: $font-size-64;
+    font-size: defaults.$font-size-64;
   }
 
   &__code {
@@ -767,10 +772,10 @@ svg.gdoc-icon {
 }
 
 .gdoc-toc {
-  margin: $padding-16 0;
+  margin: defaults.$padding-16 0;
 
   li {
-    margin: $padding-4 0;
+    margin: defaults.$padding-4 0;
   }
 
   // Classes to hide nested levels of ToC/Menu
diff --git a/src/sass/_chroma_base.scss b/src/sass/_chroma_base.scss
index 18e0780..2b6d0f4 100644
--- a/src/sass/_chroma_base.scss
+++ b/src/sass/_chroma_base.scss
@@ -1,3 +1,5 @@
+@use "defaults";
+
 @mixin chroma_base {
   .chroma {
     color: var(--code-font-color);
@@ -18,8 +20,8 @@
 
   /* LineTable */
   .chroma .lntable {
-    border: $border-1 solid var(--code-accent-color);
-    border-radius: $border-radius;
+    border: defaults.$border-1 solid var(--code-accent-color);
+    border-radius: defaults.$border-radius;
     border-spacing: 0;
     padding: 0;
     margin: 0;
@@ -37,7 +39,7 @@
   .chroma .lntable td:first-child {
     code {
       background-color: var(--code-accent-color-lite);
-      border-right: $border-1 solid var(--code-accent-color);
+      border-right: defaults.$border-1 solid var(--code-accent-color);
       padding-left: 0;
       padding-right: 0;
       border-radius: 0;
@@ -45,6 +47,6 @@
   }
   .chroma .lntable td:nth-child(2) {
     width: 100%;
-    margin-left: $padding-32;
+    margin-left: defaults.$padding-32;
   }
 }
diff --git a/src/sass/_chroma_dark.scss b/src/sass/_chroma_dark.scss
index d7e0af9..e905edf 100644
--- a/src/sass/_chroma_dark.scss
+++ b/src/sass/_chroma_dark.scss
@@ -1,7 +1,9 @@
+@use "chroma_base";
+
 @mixin chroma_dark {
   /* Theme: Dracula */
   /* Background */
-  @include chroma_base;
+  @include chroma_base.chroma_base;
 
   /* Other */
   .chroma .x {
diff --git a/src/sass/_chroma_light.scss b/src/sass/_chroma_light.scss
index bc43f82..278b6e3 100644
--- a/src/sass/_chroma_light.scss
+++ b/src/sass/_chroma_light.scss
@@ -1,7 +1,9 @@
+@use "chroma_base";
+
 @mixin chroma_github {
   /* Theme: GitHub */
   /* Background */
-  @include chroma_base;
+  @include chroma_base.chroma_base;
 
   /* Other */
   .chroma .x {
diff --git a/src/sass/_color_mode.scss b/src/sass/_color_mode.scss
index b8b4ea5..1def38f 100644
--- a/src/sass/_color_mode.scss
+++ b/src/sass/_color_mode.scss
@@ -1,31 +1,37 @@
+@use "sass:color";
+@use "sass:map";
+@use "chroma_dark";
+@use "chroma_light";
+@use "defaults";
+
 @mixin color_theme_light {
-  --header-background: #{$main-color};
-  --header-font-color: #{$white};
+  --header-background: #{defaults.$main-color};
+  --header-font-color: #{defaults.$white};
 
-  --body-background: #{$body-background};
-  --body-font-color: #{$body-font-color};
+  --body-background: #{defaults.$body-background};
+  --body-font-color: #{defaults.$body-font-color};
 
-  --mark-color: #{$mark-color};
+  --mark-color: #{defaults.$mark-color};
 
-  --button-background: #{color.scale($main-color, $lightness: 15%)};
-  --button-border-color: #{$main-color};
+  --button-background: #{color.scale(defaults.$main-color, $lightness: 15%)};
+  --button-border-color: #{defaults.$main-color};
 
-  --link-color: #{$link-color};
-  --link-color-visited: #{$link-color-visited};
+  --link-color: #{defaults.$link-color};
+  --link-color-visited: #{defaults.$link-color-visited};
 
-  --hint-link-color: #{$link-color};
-  --hint-link-color-visited: #{$link-color-visited};
+  --hint-link-color: #{defaults.$link-color};
+  --hint-link-color-visited: #{defaults.$link-color-visited};
 
-  --accent-color-dark: #{$gray-400};
-  --accent-color: #{$gray-200};
-  --accent-color-lite: #{$gray-100};
+  --accent-color-dark: #{defaults.$gray-400};
+  --accent-color: #{defaults.$gray-200};
+  --accent-color-lite: #{defaults.$gray-100};
 
-  --control-icons: #{color.scale($body-font-color, $lightness: 40%)};
+  --control-icons: #{color.scale(defaults.$body-font-color, $lightness: 40%)};
 
-  --footer-background: #{$second-color};
-  --footer-font-color: #{$white};
-  --footer-link-color: #{$link-color-footer};
-  --footer-link-color-visited: #{$link-color-footer};
+  --footer-background: #{defaults.$second-color};
+  --footer-font-color: #{defaults.$white};
+  --footer-link-color: #{defaults.$link-color-footer};
+  --footer-link-color-visited: #{defaults.$link-color-footer};
 
   .dark-mode-dim .gdoc-markdown {
     img {
@@ -42,39 +48,39 @@
 
     .gdoc-hint__title,
     .admonitionblock table td:first-child {
-      background-color: color.scale($gray-600, $alpha: -95%);
+      background-color: color.scale(defaults.$gray-600, $alpha: -95%);
     }
   }
 }
 
 @mixin color_theme_dark {
-  --header-background: #{$main-color};
-  --header-font-color: #{$white};
+  --header-background: #{defaults.$main-color};
+  --header-font-color: #{defaults.$white};
 
-  --body-background: #{$body-background-dark};
-  --body-font-color: #{color.scale($body-background-dark, $lightness: 70%)};
+  --body-background: #{defaults.$body-background-dark};
+  --body-font-color: #{color.scale(defaults.$body-background-dark, $lightness: 70%)};
 
-  --mark-color: #{$mark-color};
+  --mark-color: #{defaults.$mark-color};
 
-  --button-background: #{color.scale($main-color, $lightness: 15%)};
-  --button-border-color: #{$main-color};
+  --button-background: #{color.scale(defaults.$main-color, $lightness: 15%)};
+  --button-border-color: #{defaults.$main-color};
 
-  --link-color: #{$link-color-dark};
-  --link-color-visited: #{$link-color-visited-dark};
+  --link-color: #{defaults.$link-color-dark};
+  --link-color-visited: #{defaults.$link-color-visited-dark};
 
-  --hint-link-color: #{$link-color};
-  --hint-link-color-visited: #{$link-color-visited};
+  --hint-link-color: #{defaults.$link-color};
+  --hint-link-color-visited: #{defaults.$link-color-visited};
 
-  --accent-color-dark: #{color.scale($body-background-dark, $lightness: -60%)};
-  --accent-color: #{color.scale($body-background-dark, $lightness: -30%)};
-  --accent-color-lite: #{color.scale($body-background-dark, $lightness: -15%)};
+  --accent-color-dark: #{color.scale(defaults.$body-background-dark, $lightness: -60%)};
+  --accent-color: #{color.scale(defaults.$body-background-dark, $lightness: -30%)};
+  --accent-color-lite: #{color.scale(defaults.$body-background-dark, $lightness: -15%)};
 
-  --control-icons: #{color.scale($body-font-color, $lightness: 40%)};
+  --control-icons: #{color.scale(defaults.$body-font-color, $lightness: 40%)};
 
-  --footer-background: #{$second-color};
-  --footer-font-color: #{$white};
-  --footer-link-color: #{$link-color-footer};
-  --footer-link-color-visited: #{$link-color-footer};
+  --footer-background: #{defaults.$second-color};
+  --footer-font-color: #{defaults.$white};
+  --footer-link-color: #{defaults.$link-color-footer};
+  --footer-link-color-visited: #{defaults.$link-color-footer};
 
   .dark-mode-dim {
     .gdoc-markdown img {
@@ -102,39 +108,39 @@
 
     .gdoc-hint__title,
     .admonitionblock table td:first-child {
-      background-color: color.scale($gray-600, $alpha: -85%);
+      background-color: color.scale(defaults.$gray-600, $alpha: -85%);
     }
   }
 }
 
 @mixin code_theme_dark {
-  @include chroma_dark;
+  @include chroma_dark.chroma_dark;
 
   & {
-    --code-background: #{$code-background-dark};
-    --code-accent-color: #{color.scale($code-background-dark, $lightness: -30%)};
-    --code-accent-color-lite: #{color.scale($code-background-dark, $lightness: -15%)};
-    --code-font-color: #{$code-font-color-dark};
+    --code-background: #{defaults.$code-background-dark};
+    --code-accent-color: #{color.scale(defaults.$code-background-dark, $lightness: -30%)};
+    --code-accent-color-lite: #{color.scale(defaults.$code-background-dark, $lightness: -15%)};
+    --code-font-color: #{defaults.$code-font-color-dark};
 
-    --code-copy-background: #{$code-background-dark};
-    --code-copy-font-color: #{color.scale($code-font-color-dark, $lightness: -15%)};
-    --code-copy-border-color: #{color.scale($code-font-color-dark, $lightness: -20%)};
-    --code-copy-success-color: #{color.scale(map.get($hint-colors, "ok"), $alpha: -55%)};
+    --code-copy-background: #{defaults.$code-background-dark};
+    --code-copy-font-color: #{color.scale(defaults.$code-font-color-dark, $lightness: -15%)};
+    --code-copy-border-color: #{color.scale(defaults.$code-font-color-dark, $lightness: -20%)};
+    --code-copy-success-color: #{color.scale(map.get(defaults.$hint-colors, "ok"), $alpha: -55%)};
   }
 }
 
 @mixin code_theme_light {
-  @include chroma_github;
+  @include chroma_light.chroma_github;
 
   & {
-    --code-background: #{$code-background};
-    --code-accent-color: #{color.scale($code-background, $lightness: -45%)};
-    --code-accent-color-lite: #{color.scale($code-background, $lightness: -15%)};
-    --code-font-color: #{$code-font-color};
+    --code-background: #{defaults.$code-background};
+    --code-accent-color: #{color.scale(defaults.$code-background, $lightness: -45%)};
+    --code-accent-color-lite: #{color.scale(defaults.$code-background, $lightness: -15%)};
+    --code-font-color: #{defaults.$code-font-color};
 
-    --code-copy-background: #{$code-background};
-    --code-copy-font-color: #{color.scale($code-font-color, $lightness: 20%)};
-    --code-copy-border-color: #{color.scale($code-font-color, $lightness: 40%)};
-    --code-copy-success-color: #{map.get($hint-colors, "ok")};
+    --code-copy-background: #{defaults.$code-background};
+    --code-copy-font-color: #{color.scale(defaults.$code-font-color, $lightness: 20%)};
+    --code-copy-border-color: #{color.scale(defaults.$code-font-color, $lightness: 40%)};
+    --code-copy-success-color: #{map.get(defaults.$hint-colors, "ok")};
   }
 }
diff --git a/src/sass/_defaults.scss b/src/sass/_defaults.scss
index 4a2df5e..a1cf9f5 100644
--- a/src/sass/_defaults.scss
+++ b/src/sass/_defaults.scss
@@ -1,3 +1,5 @@
+@use "sass:color";
+
 // Used in layout
 $padding-2: 0.125rem !default;
 $padding-4: 0.25rem !default;
@@ -61,7 +63,7 @@ $main-color: rgba(32, 83, 117, 1) !default;
 $second-color: rgba(17, 43, 60, 1) !default;
 $mark-color: rgba(255, 171, 0, 1) !default;
 
-$body-background-dark: mix(invert($body-background, 75%), $second-color) !default;
+$body-background-dark: color.mix(color.invert($body-background, 75%), $second-color) !default;
 $body-font-color-dark: $gray-100 !default;
 
 $link-color-dark: rgba(110, 168, 212, 1) !default;
diff --git a/src/sass/_markdown.scss b/src/sass/_markdown.scss
index 9f37ff7..f734469 100644
--- a/src/sass/_markdown.scss
+++ b/src/sass/_markdown.scss
@@ -1,3 +1,5 @@
+@use "defaults";
+
 .gdoc-markdown {
   line-height: 1.6rem;
 
@@ -10,8 +12,8 @@
     font-weight: 600;
 
     > code {
-      border-top: $border-4 solid var(--accent-color);
-      font-size: $font-size-12 !important;
+      border-top: defaults.$border-4 solid var(--accent-color);
+      font-size: defaults.$font-size-12 !important;
     }
   }
 
@@ -19,7 +21,7 @@
   h5,
   h6 {
     > code {
-      font-size: $font-size-14 !important;
+      font-size: defaults.$font-size-14 !important;
     }
   }
 
@@ -32,7 +34,7 @@
   a,
   &__link {
     text-decoration: underline;
-    border-bottom: $border-1 solid transparent;
+    border-bottom: defaults.$border-1 solid transparent;
     line-height: normal;
 
     &:hover {
@@ -42,14 +44,14 @@
 
   &__link--raw {
     text-decoration: none !important;
-    color: $body-font-color !important;
+    color: defaults.$body-font-color !important;
 
     &:hover {
       text-decoration: none !important;
     }
 
     &:visited {
-      color: $body-font-color !important;
+      color: defaults.$body-font-color !important;
     }
   }
 
@@ -72,12 +74,12 @@
   }
 
   &__figure {
-    padding: $padding-4;
-    margin: $padding-16 0;
+    padding: defaults.$padding-4;
+    margin: defaults.$padding-16 0;
     background-color: var(--accent-color);
     display: table;
-    border-top-left-radius: $border-radius;
-    border-top-right-radius: $border-radius;
+    border-top-left-radius: defaults.$border-radius;
+    border-top-right-radius: defaults.$border-radius;
 
     &--round,
     &--round img {
@@ -88,10 +90,10 @@
       display: table-caption;
       caption-side: bottom;
       background-color: var(--accent-color);
-      padding: 0 $padding-4 $padding-4;
+      padding: 0 defaults.$padding-4 defaults.$padding-4;
       text-align: center;
-      border-bottom-left-radius: $border-radius;
-      border-bottom-right-radius: $border-radius;
+      border-bottom-left-radius: defaults.$border-radius;
+      border-bottom-right-radius: defaults.$border-radius;
     }
 
     img {
@@ -102,37 +104,37 @@
 
   img {
     max-width: 100%;
-    border-radius: $border-radius;
+    border-radius: defaults.$border-radius;
   }
 
   blockquote {
-    margin: $padding-16 0;
-    padding: $padding-8 $padding-16 $padding-8 ($padding-16 - $padding-4); //to keep total left space 16dp
+    margin: defaults.$padding-16 0;
+    padding: defaults.$padding-8 defaults.$padding-16 defaults.$padding-8 (defaults.$padding-16 - defaults.$padding-4); //to keep total left space 16dp
 
-    border-left: $border-4 solid var(--accent-color);
-    border-radius: $border-radius;
+    border-left: defaults.$border-4 solid var(--accent-color);
+    border-radius: defaults.$border-radius;
   }
 
   table:not(.lntable):not(.highlight) {
     display: table;
     border-spacing: 0;
     border-collapse: collapse;
-    margin-top: $padding-16;
-    margin-bottom: $padding-16;
+    margin-top: defaults.$padding-16;
+    margin-bottom: defaults.$padding-16;
     width: 100%;
     text-align: left;
 
     thead {
-      border-bottom: $border-4 solid var(--accent-color);
+      border-bottom: defaults.$border-4 solid var(--accent-color);
     }
 
     tr th,
     tr td {
-      padding: $padding-8 $padding-16;
+      padding: defaults.$padding-8 defaults.$padding-16;
     }
 
     tr {
-      border-bottom: $border-2 solid var(--accent-color);
+      border-bottom: defaults.$border-2 solid var(--accent-color);
     }
 
     tr:nth-child(2n) {
@@ -141,43 +143,43 @@
   }
 
   hr {
-    height: $border-2;
+    height: defaults.$border-2;
     border: none;
     background: var(--accent-color);
   }
 
   ul,
   ol {
-    padding-left: $padding-32;
+    padding-left: defaults.$padding-32;
   }
 
   dl {
     dt {
       font-weight: bolder;
-      margin-top: $padding-16;
+      margin-top: defaults.$padding-16;
     }
 
     dd {
-      margin-left: $padding-32;
+      margin-left: defaults.$padding-32;
     }
   }
 
   code {
-    padding: $padding-4 $padding-8;
+    padding: defaults.$padding-4 defaults.$padding-8;
   }
 
   pre,
   code {
     background-color: var(--code-background);
-    border-radius: $border-radius;
+    border-radius: defaults.$border-radius;
     color: var(--code-font-color);
-    font-size: $font-size-14;
-    line-height: $padding-16;
+    font-size: defaults.$font-size-14;
+    line-height: defaults.$padding-16;
   }
 
   pre code {
     display: block;
-    padding: $padding-16;
+    padding: defaults.$padding-16;
     width: 100%;
   }
 
diff --git a/src/sass/_mobile.scss b/src/sass/_mobile.scss
index 6e8e0a0..1791630 100644
--- a/src/sass/_mobile.scss
+++ b/src/sass/_mobile.scss
@@ -1,7 +1,9 @@
-@media screen and (max-width: $sm-breakpoint) {
+@use "defaults";
+
+@media screen and (max-width: defaults.$sm-breakpoint) {
   .gdoc-nav {
-    margin-left: -$menu-width;
-    font-size: $font-size-base;
+    margin-left: -(defaults.$menu-width);
+    font-size: defaults.$font-size-base;
 
     &__control {
       display: inline-block;
@@ -10,14 +12,14 @@
 
   .gdoc-header {
     svg.gdoc-icon {
-      width: $font-size-24;
-      height: $font-size-24;
+      width: defaults.$font-size-24;
+      height: defaults.$font-size-24;
     }
   }
 
   .gdoc-brand {
-    font-size: $font-size-24;
-    line-height: $font-size-24;
+    font-size: defaults.$font-size-24;
+    line-height: defaults.$font-size-24;
 
     &__img {
       display: none;
@@ -36,23 +38,23 @@
   }
 
   .gdoc-error {
-    padding: $padding-96 $padding-16;
+    padding: defaults.$padding-96 defaults.$padding-16;
 
     svg.gdoc-icon {
-      width: $font-size-96;
-      height: $font-size-96;
+      width: defaults.$font-size-96;
+      height: defaults.$font-size-96;
     }
 
     &__message {
-      padding-left: $padding-32;
+      padding-left: defaults.$padding-32;
     }
 
     &__line {
-      padding: $padding-4 0;
+      padding: defaults.$padding-4 0;
     }
 
     &__title {
-      font-size: $font-size-32;
+      font-size: defaults.$font-size-32;
     }
   }
 
@@ -65,7 +67,7 @@
     flex-direction: column;
 
     &.gdoc-columns {
-      margin: $padding-32 0;
+      margin: defaults.$padding-32 0;
     }
 
     .gdoc-columns__content {
@@ -77,7 +79,7 @@
   #menu-control:checked ~ main {
     .gdoc-nav nav,
     .gdoc-page {
-      transform: translateX($menu-width);
+      transform: translateX(defaults.$menu-width);
     }
 
     .gdoc-page {
diff --git a/src/sass/_print.scss b/src/sass/_print.scss
index 7f3d9f6..bba288d 100644
--- a/src/sass/_print.scss
+++ b/src/sass/_print.scss
@@ -1,3 +1,5 @@
+@use "defaults";
+
 @media print {
   .gdoc-nav,
   .gdoc-footer .container span:not(:first-child),
@@ -7,7 +9,7 @@
   }
 
   .gdoc-footer {
-    border-top: $border-1 solid $gray-300;
+    border-top: defaults.$border-1 solid defaults.$gray-300;
   }
 
   .gdoc-markdown pre {
@@ -16,8 +18,8 @@
   }
 
   .chroma code {
-    border: $border-1 solid $gray-300;
-    padding: $padding-8 !important;
+    border: defaults.$border-1 solid defaults.$gray-300;
+    padding: defaults.$padding-8 !important;
     font-weight: normal !important;
   }
 
diff --git a/src/sass/_shortcodes.scss b/src/sass/_shortcodes.scss
index bcd78d9..3ba650a 100644
--- a/src/sass/_shortcodes.scss
+++ b/src/sass/_shortcodes.scss
@@ -1,21 +1,24 @@
+@use "sass:color";
+@use "defaults";
+
 // {{< expand "Label" "icon" >}}
 .gdoc-expand {
-  margin: $padding-16 0;
+  margin: defaults.$padding-16 0;
 
-  border: $border-1 solid var(--accent-color);
-  border-radius: $border-radius;
+  border: defaults.$border-1 solid var(--accent-color);
+  border-radius: defaults.$border-radius;
 
   overflow: hidden;
 
   &__head {
     background: var(--accent-color-lite);
-    padding: $padding-8 $padding-16;
+    padding: defaults.$padding-8 defaults.$padding-16;
     cursor: pointer;
   }
 
   &__content {
     display: none;
-    padding: 0 $padding-16;
+    padding: 0 defaults.$padding-16;
   }
 
   &__control:checked + &__content {
@@ -29,10 +32,10 @@
 
 // {{< tabs >}}
 .gdoc-tabs {
-  margin: $padding-16 0;
+  margin: defaults.$padding-16 0;
 
-  border: $border-1 solid var(--accent-color);
-  border-radius: $border-radius;
+  border: defaults.$border-1 solid var(--accent-color);
+  border-radius: defaults.$border-radius;
 
   overflow: hidden;
 
@@ -41,21 +44,21 @@
 
   &__label {
     display: inline-block;
-    padding: $padding-8 $padding-16;
-    border-bottom: $border-1 transparent;
+    padding: defaults.$padding-8 defaults.$padding-16;
+    border-bottom: defaults.$border-1 transparent;
     cursor: pointer;
   }
 
   &__content {
     order: 999; //Move content blocks to the end
     width: 100%;
-    border-top: $border-1 solid var(--accent-color-lite);
-    padding: 0 $padding-16;
+    border-top: defaults.$border-1 solid var(--accent-color-lite);
+    padding: 0 defaults.$padding-16;
     display: none;
   }
 
   &__control:checked + &__label {
-    border-bottom: $border-2 solid var(--link-color);
+    border-bottom: defaults.$border-2 solid var(--link-color);
   }
   &__control:checked + &__label + &__content {
     display: block;
@@ -68,7 +71,7 @@
 
 // {{< columns >}}
 .gdoc-columns {
-  margin: $padding-16 0;
+  margin: defaults.$padding-16 0;
 
   &--regular > :first-child {
     flex: 1;
@@ -76,17 +79,17 @@
 
   &--small > :first-child {
     flex: 0.35;
-    min-width: $body-min-width * 0.35;
+    min-width: defaults.$body-min-width * 0.35;
   }
 
   &--large > :first-child {
     flex: 1.65;
-    min-width: $body-min-width * 1.65;
+    min-width: defaults.$body-min-width * 1.65;
   }
 
   &__content {
     flex: 1 1;
-    min-width: $body-min-width * 0.66;
+    min-width: defaults.$body-min-width * 0.66;
     padding: 0;
   }
 
@@ -98,12 +101,12 @@
 // {{< button >}}
 .gdoc-button {
   $root: &;
-  margin: $padding-16 0;
+  margin: defaults.$padding-16 0;
 
   display: inline-block;
   background: var(--accent-color-lite);
-  border: $border-1 solid var(--accent-color);
-  border-radius: $border-radius;
+  border: defaults.$border-1 solid var(--accent-color);
+  border-radius: defaults.$border-radius;
   cursor: pointer;
 
   &__link {
@@ -115,78 +118,78 @@
   &:hover {
     background: var(--button-background);
     border-color: var(--button-border-color);
-    color: $gray-100;
+    color: defaults.$gray-100;
   }
 
   &--regular {
-    font-size: $font-size-base;
+    font-size: defaults.$font-size-base;
 
     #{$root}__link {
-      padding: $padding-4 $padding-8;
+      padding: defaults.$padding-4 defaults.$padding-8;
     }
   }
 
   &--large {
-    font-size: $font-size-20;
+    font-size: defaults.$font-size-20;
 
     #{$root}__link {
-      padding: $padding-8 $padding-16;
+      padding: defaults.$padding-8 defaults.$padding-16;
     }
   }
 }
 
 // {{< hint >}}
 .gdoc-hint {
-  @each $name, $color in $hint-colors {
+  @each $name, $color in defaults.$hint-colors {
     &.#{$name} {
       border-left-color: $color;
       background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
-      color: $body-font-color;
+      color: defaults.$body-font-color;
       padding: 0;
 
       code,
       pre {
         background-color: color.scale($color, $lightness: 80%, $saturation: -75%);
-        color: $code-font-color;
+        color: defaults.$code-font-color;
       }
     }
   }
 
   &__title {
-    padding: $padding-4 $padding-16;
-    background-color: color.scale($gray-600, $alpha: -95%);
+    padding: defaults.$padding-4 defaults.$padding-16;
+    background-color: color.scale(defaults.$gray-600, $alpha: -95%);
     font-weight: bold;
-    color: color.scale($body-font-color, $alpha: -15%);
+    color: color.scale(defaults.$body-font-color, $alpha: -15%);
 
     i.fa::after {
       content: attr(title);
       font-style: normal;
-      padding-left: $padding-24;
+      padding-left: defaults.$padding-24;
     }
 
     i.fa {
-      color: $black;
+      color: defaults.$black;
       background-size: auto 90%;
       background-repeat: no-repeat;
       filter: invert(30%);
       margin-left: -5px;
     }
 
-    @each $name, $icon in $hint-icons {
+    @each $name, $icon in defaults.$hint-icons {
       i.fa.#{$name} {
         background-image: url(img/geekdoc-stack.svg##{$icon});
       }
     }
 
     .gdoc-icon {
-      width: $font-size-24;
-      height: $font-size-24;
+      width: defaults.$font-size-24;
+      height: defaults.$font-size-24;
       margin-left: -5px;
     }
   }
 
   &__text {
-    padding: $padding-4 $padding-16;
+    padding: defaults.$padding-4 defaults.$padding-16;
   }
 
   .gdoc-page__anchor {
@@ -201,7 +204,7 @@
   // Fix height of mermaid SVG elements (see https://github.com/mermaid-js/mermaid/issues/2481)
   > svg {
     height: 100%;
-    padding: $padding-8;
+    padding: defaults.$padding-8;
   }
 }
 
@@ -217,14 +220,14 @@
   &__meta {
     gap: 0.5em;
     line-height: normal;
-    margin-bottom: $padding-4;
+    margin-bottom: defaults.$padding-4;
 
     &:hover .gdoc-page__anchor svg.gdoc-icon {
       color: var(--control-icons);
     }
   }
 
-  @each $name, $color in $hint-colors {
+  @each $name, $color in defaults.$hint-colors {
     &__tag.#{$name} {
       border-color: color.scale($color, $lightness: 90%, $saturation: -30%);
       background-color: color.scale($color, $lightness: 95%, $saturation: -30%);
@@ -232,26 +235,26 @@
   }
 
   &__tag {
-    font-size: $font-size-14;
+    font-size: defaults.$font-size-14;
     font-weight: normal;
-    background-color: $gray-100;
-    border: $border-1 solid $gray-200;
-    border-radius: $border-radius;
-    padding: $padding-2 $padding-4;
-    color: $body-font-color;
+    background-color: defaults.$gray-100;
+    border: defaults.$border-1 solid defaults.$gray-200;
+    border-radius: defaults.$border-radius;
+    padding: defaults.$padding-2 defaults.$padding-4;
+    color: defaults.$body-font-color;
   }
 
   &__default {
-    font-size: $font-size-14;
+    font-size: defaults.$font-size-14;
   }
 }
 
 // {{% progress %}}
 .gdoc-progress {
-  margin-bottom: $padding-16;
+  margin-bottom: defaults.$padding-16;
 
   &__label {
-    padding: $padding-4 0;
+    padding: defaults.$padding-4 0;
 
     &--name {
       font-weight: bold;
@@ -261,7 +264,7 @@
   &__wrap {
     background-color: var(--accent-color-lite);
     border-radius: 1em;
-    box-shadow: inset 0 0 0 $border-1 var(--accent-color);
+    box-shadow: inset 0 0 0 defaults.$border-1 var(--accent-color);
   }
 
   &__bar {
@@ -278,6 +281,6 @@
       transparent
     );
     background-size: 2.5em 2.5em;
-    background-color: $main-color !important;
+    background-color: defaults.$main-color !important;
   }
 }
diff --git a/src/sass/_utils.scss b/src/sass/_utils.scss
index 5d9bddf..733a3d5 100644
--- a/src/sass/_utils.scss
+++ b/src/sass/_utils.scss
@@ -1,3 +1,5 @@
+@use "defaults";
+
 .flex {
   display: flex;
 }
@@ -24,14 +26,14 @@
 
 .flex-grid {
   flex-direction: column;
-  border: $border-1 solid var(--accent-color);
-  border-radius: $border-radius;
+  border: defaults.$border-1 solid var(--accent-color);
+  border-radius: defaults.$border-radius;
   background: var(--accent-color-lite);
 }
 
 .flex-gap {
   flex-wrap: wrap;
-  gap: $padding-16;
+  gap: defaults.$padding-16;
 }
 
 .justify-start {
@@ -83,7 +85,7 @@
 
 .table-wrap {
   overflow: auto;
-  margin: $padding-16 0;
+  margin: defaults.$padding-16 0;
 
   > table {
     margin: 0 !important;
diff --git a/src/sass/main.scss b/src/sass/main.scss
index f03c098..f275d83 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -1,18 +1,8 @@
-@use "sass:map";
-@use "sass:meta";
-@use "sass:color";
+@use "_normalize";
+@use "_utils";
+@use "_fonts";
+@use "_base";
 
-@import "_defaults";
-@import "_color_mode";
-@import "_chroma_base";
-@import "_chroma_light";
-@import "_chroma_dark";
-
-@import "_normalize";
-@import "_utils";
-@import "_fonts";
-@import "_base";
-
-@import "_markdown";
-@import "_asciidoc";
-@import "_shortcodes";
+@use "_markdown";
+@use "_asciidoc";
+@use "_shortcodes";
diff --git a/src/sass/mobile.scss b/src/sass/mobile.scss
index 449c4c7..704d85d 100644
--- a/src/sass/mobile.scss
+++ b/src/sass/mobile.scss
@@ -1,5 +1,4 @@
 @use "sass:color";
 
-@import "_defaults";
-
-@import "_mobile";
+@use "_defaults";
+@use "_mobile";
diff --git a/src/sass/print.scss b/src/sass/print.scss
index f9dca75..6415999 100644
--- a/src/sass/print.scss
+++ b/src/sass/print.scss
@@ -1,5 +1,4 @@
 @use "sass:color";
 
-@import "_defaults";
-
-@import "_print";
+@use "_defaults";
+@use "_print";