From 8ec26e80834841dd66ae6123dad8855d8509120f Mon Sep 17 00:00:00 2001
From: Dan Brown <ssddanbrown@googlemail.com>
Date: Mon, 9 Dec 2024 13:25:35 +0000
Subject: [PATCH] SASS: Updated to use modules and address deprecations

Changes the name of our spacing variables due to the prefixing -/_
meaning private in the use of new "use" rather than include.

All now modular too, so all variables/mixins are accessed via their
package.

Also renamed variables file to vars for simpler/cleaner access/writing.

eg. '$-m' is now 'vars.$m'
---
 resources/sass/_blocks.scss                   |  97 ++++-----
 resources/sass/_buttons.scss                  |  33 ++--
 resources/sass/_codemirror.scss               |  11 +-
 resources/sass/_colors.scss                   |   8 +-
 resources/sass/_components.scss               | 187 +++++++++---------
 resources/sass/_content.scss                  |  65 +++---
 resources/sass/_editor.scss                   |  27 +--
 resources/sass/_forms.scss                    | 123 ++++++------
 resources/sass/_header.scss                   |  97 ++++-----
 resources/sass/_html.scss                     |   7 +-
 resources/sass/_layout.scss                   |  87 ++++----
 resources/sass/_lists.scss                    | 173 ++++++++--------
 resources/sass/_pages.scss                    |  65 +++---
 resources/sass/_spacing.scss                  |   6 +-
 resources/sass/_tables.scss                   |  21 +-
 resources/sass/_text.scss                     |  67 ++++---
 resources/sass/_tinymce.scss                  |  19 +-
 .../sass/{_variables.scss => _vars.scss}      |  36 ++--
 resources/sass/export-styles.scss             |  13 +-
 resources/sass/styles.scss                    | 102 +++++-----
 20 files changed, 649 insertions(+), 595 deletions(-)
 rename resources/sass/{_variables.scss => _vars.scss} (85%)

diff --git a/resources/sass/_blocks.scss b/resources/sass/_blocks.scss
index 9e96e920b..8c248caee 100644
--- a/resources/sass/_blocks.scss
+++ b/resources/sass/_blocks.scss
@@ -1,14 +1,17 @@
+@use "mixins";
+@use "vars";
+
 /**
  * Card-style blocks
  */
 
 .card {
-  @include lightDark(background-color, #FFF, #222);
-  box-shadow: $bs-card;
+  @include mixins.lightDark(background-color, #FFF, #222);
+  box-shadow: vars.$bs-card;
   border-radius: 3px;
   break-inside: avoid;
   .body, p.empty-text {
-    padding-block: $-m;
+    padding-block: vars.$m;
   }
   a, p {
     word-wrap: break-word;
@@ -17,9 +20,9 @@
 }
 
 .card-title {
-  padding: $-m $-m $-xs;
+  padding: vars.$m vars.$m vars.$xs;
   margin: 0;
-  font-size: $fs-m;
+  font-size: vars.$fs-m;
   color: #222;
   fill: #222;
   font-weight: 400;
@@ -29,21 +32,21 @@
 }
 .card-footer-link, button.card-footer-link  {
   display: block;
-  padding: $-s $-m;
+  padding: vars.$s vars.$m;
   line-height: 1;
   border-top: 1px solid;
   width: 100%;
   text-align: left;
-  @include lightDark(border-color, #DDD, #555);
+  @include mixins.lightDark(border-color, #DDD, #555);
   border-radius: 0 0 3px 3px;
   font-size: 0.9em;
-  margin-top: $-xs;
+  margin-top: vars.$xs;
   &:hover {
     text-decoration: none;
-    @include lightDark(background-color, #f2f2f2, #2d2d2d);
+    @include mixins.lightDark(background-color, #f2f2f2, #2d2d2d);
   }
   &:focus {
-    @include lightDark(background-color, #eee, #222);
+    @include mixins.lightDark(background-color, #eee, #222);
     outline: 1px dotted #666;
     outline-offset: -2px;
   }
@@ -51,17 +54,17 @@
 
 .card.border-card {
   border: 1px solid;
-  @include lightDark(border-color, #ddd, #000);
+  @include mixins.lightDark(border-color, #ddd, #000);
 }
 
 .card.drag-card {
   border: 1px solid #DDD;
-  @include lightDark(border-color, #ddd, #000);
-  @include lightDark(background-color, #fff, #333);
+  @include mixins.lightDark(border-color, #ddd, #000);
+  @include mixins.lightDark(background-color, #fff, #333);
   border-radius: 4px;
   display: flex;
-  padding: 0 0 0 ($-s + 28px);
-  margin: $-s 0;
+  padding: 0 0 0 (vars.$s + 28px);
+  margin: vars.$s 0;
   position: relative;
   .drag-card-action {
     cursor: pointer;
@@ -73,30 +76,30 @@
     justify-content: center;
     width: 28px;
     flex-grow: 0;
-    padding: 0 $-xs;
+    padding: 0 vars.$xs;
     &:hover {
-      @include lightDark(background-color, #eee, #2d2d2d);
+      @include mixins.lightDark(background-color, #eee, #2d2d2d);
     }
     .svg-icon {
       margin-inline-end: 0px;
     }
   }
   .outline input {
-    margin: $-s 0;
+    margin: vars.$s 0;
     width: 100%;
   }
   .outline {
     position: relative;
   }
   .handle {
-    @include lightDark(background-color, #eee, #2d2d2d);
+    @include mixins.lightDark(background-color, #eee, #2d2d2d);
     left: 0;
     position: absolute;
     top: 0;
     bottom: 0;
   }
   > div {
-    padding: 0 $-s;
+    padding: 0 vars.$s;
     max-width: 80%;
     flex: 1;
   }
@@ -106,17 +109,17 @@
   display: flex;
   flex-direction: column;
   border: 1px solid #ddd;
-  @include lightDark(border-color, #ddd, #000);
-  margin-bottom: $-l;
+  @include mixins.lightDark(border-color, #ddd, #000);
+  margin-bottom: vars.$l;
   border-radius: 4px;
   overflow: hidden;
   min-width: 100px;
-  color: $text-dark;
+  color: vars.$text-dark;
   transition: border-color ease-in-out 120ms, box-shadow ease-in-out 120ms;
   &:hover {
-    color: $text-dark;
+    color: vars.$text-dark;
     text-decoration: none;
-    @include lightDark(box-shadow, $bs-card, $bs-card-dark);
+    @include mixins.lightDark(box-shadow, vars.$bs-card, vars.$bs-card-dark);
   }
   h2 {
     width: 100%;
@@ -134,7 +137,7 @@
     border-bottom-width: 2px;
   }
   .grid-card-content, .grid-card-footer {
-    padding: $-l;
+    padding: vars.$l;
   }
   .grid-card-content + .grid-card-footer {
     padding-top: 0;
@@ -149,10 +152,10 @@
 }
 
 .content-wrap.card {
-  padding: $-m $-xxl;
+  padding: vars.$m vars.$xxl;
   margin-inline-start: auto;
   margin-inline-end: auto;
-  margin-bottom: $-l;
+  margin-bottom: vars.$l;
   overflow: initial;
   min-height: 60vh;
   border-radius: 8px;
@@ -163,26 +166,26 @@
     width: 100%;
   }
 }
-@include smaller-than($xxl) {
+@include mixins.smaller-than(vars.$bp-xxl) {
   .content-wrap.card {
-    padding: $-m $-xl;
+    padding: vars.$m vars.$xl;
   }
 }
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
   .content-wrap.card {
-    padding: $-m $-l;
+    padding: vars.$m vars.$l;
   }
 }
-@include smaller-than($s) {
+@include mixins.smaller-than(vars.$bp-s) {
   .content-wrap.card {
-    padding: $-m $-m;
+    padding: vars.$m vars.$m;
   }
 }
 
 .sub-card {
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
   border: 1.5px solid;
-  @include lightDark(border-color, #E2E2E2, #444);
+  @include mixins.lightDark(border-color, #E2E2E2, #444);
   border-radius: 4px;
 }
 
@@ -194,7 +197,7 @@
 }
 
 .fade-in-when-active {
-  @include lightDark(opacity, 0.6, 0.7);
+  @include mixins.lightDark(opacity, 0.6, 0.7);
   transition: opacity ease-in-out 120ms;
   &:hover, &:focus-within {
     opacity: 1 !important;
@@ -209,29 +212,29 @@
  */
 .tag-item {
   display: inline-flex;
-  margin-bottom: $-xs;
-  margin-inline-end: $-xs;
+  margin-bottom: vars.$xs;
+  margin-inline-end: vars.$xs;
   border-radius: 4px;
   border: 1px solid;
   overflow: hidden;
   font-size: 0.85em;
-  @include lightDark(border-color, #CCC, #666);
+  @include mixins.lightDark(border-color, #CCC, #666);
   a, span, a:hover, a:active {
     padding: 4px 8px;
-    @include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8));
+    @include mixins.lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.8));
     transition: background-color ease-in-out 80ms;
     text-decoration: none;
   }
   a:hover {
-    @include lightDark(background-color, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
+    @include mixins.lightDark(background-color, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.3));
   }
   svg {
-    @include lightDark(fill, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
+    @include mixins.lightDark(fill, rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));
   }
   .tag-value {
     border-inline-start: 1px solid;
-    @include lightDark(border-color, #DDD, #666);
-    @include lightDark(background-color, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))
+    @include mixins.lightDark(border-color, #DDD, #666);
+    @include mixins.lightDark(background-color, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2))
   }
 }
 
@@ -253,7 +256,7 @@
 .api-method {
   font-size: 0.75rem;
   background-color: #888;
-  padding: $-xs;
+  padding: vars.$xs;
   line-height: 1.3;
   opacity: 0.7;
   vertical-align: top;
@@ -271,7 +274,7 @@
 
 .sticky-sidebar {
   position: sticky;
-  top: $-m;
-  max-height: calc(100vh - #{$-m});
+  top: vars.$m;
+  max-height: calc(100vh - #{vars.$m});
   overflow-y: auto;
 }
diff --git a/resources/sass/_buttons.scss b/resources/sass/_buttons.scss
index e629e7726..29deda3a0 100644
--- a/resources/sass/_buttons.scss
+++ b/resources/sass/_buttons.scss
@@ -1,3 +1,6 @@
+@use "mixins";
+@use "vars";
+
 button {
   background-color: transparent;
   border: 0;
@@ -8,9 +11,9 @@ button {
   text-decoration: none;
   font-size: 0.85rem;
   line-height: 1.4em;
-  padding: $-xs*1.3 $-m;
-  margin-top: $-xs;
-  margin-bottom: $-xs;
+  padding: vars.$xs*1.3 vars.$m;
+  margin-top: vars.$xs;
+  margin-bottom: vars.$xs;
   display: inline-block;
   font-weight: 400;
   outline: 0;
@@ -30,12 +33,12 @@ button {
     color: #FFFFFF;
   }
   &:hover {
-    @include lightDark(box-shadow, $bs-light, $bs-dark);
+    @include mixins.lightDark(box-shadow, vars.$bs-light, vars.$bs-dark);
     filter: brightness(110%);
   }
   &:focus {
     outline: 1px dotted currentColor;
-    outline-offset: -$-xs;
+    outline-offset: -(vars.$xs);
     box-shadow: none;
     filter: brightness(90%);
   }
@@ -46,16 +49,16 @@ button {
 
 .button.outline {
   background-color: transparent;
-  @include lightDark(color, #666, #AAA);
+  @include mixins.lightDark(color, #666, #AAA);
   fill: currentColor;
   border: 1px solid;
-  @include lightDark(border-color, #CCC, #666);
+  @include mixins.lightDark(border-color, #CCC, #666);
   &:hover, &:focus, &:active {
-    @include lightDark(color, #444, #BBB);
+    @include mixins.lightDark(color, #444, #BBB);
     border: 1px solid #CCC;
     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
     background-color: #F2F2F2;
-    @include lightDark(background-color, #f8f8f8, #444);
+    @include mixins.lightDark(background-color, #f8f8f8, #444);
     filter: none;
   }
   &:active {
@@ -67,12 +70,12 @@ button {
 }
 
 .button + .button {
-  margin-inline-start: $-s;
+  margin-inline-start: vars.$s;
 }
 
 .button.small {
   font-size: 0.75rem;
-  padding: $-xs*1.2 $-s;
+  padding: vars.$xs*1.2 vars.$s;
 }
 
 .text-button {
@@ -119,22 +122,22 @@ button {
 .icon-button:hover {
   background-color: rgba(0, 0, 0, 0.05);
   border-radius: 4px;
-  @include lightDark(border-color, #DDD, #444);
+  @include mixins.lightDark(border-color, #DDD, #444);
   cursor: pointer;
 }
 
 .button.svg {
   display: flex;
   align-items: center;
-  padding: $-s $-m;
-  padding-bottom: ($-s - 2px);
+  padding: vars.$s vars.$m;
+  padding-bottom: (vars.$s - 2px);
   width: 100%;
   svg {
     display: inline-block;
     width: 24px;
     height: 24px;
     bottom: auto;
-    margin-inline-end: $-m;
+    margin-inline-end: vars.$m;
   }
 }
 
diff --git a/resources/sass/_codemirror.scss b/resources/sass/_codemirror.scss
index 5f14cb9db..a516b4426 100644
--- a/resources/sass/_codemirror.scss
+++ b/resources/sass/_codemirror.scss
@@ -1,3 +1,6 @@
+@use "mixins";
+@use "vars";
+
 /**
  * Custom CodeMirror BookStack overrides
  */
@@ -6,7 +9,7 @@
   font-size: 12px;
   border: 1px solid #ddd;
   line-height: 1.4;
-  margin-bottom: $-l;
+  margin-bottom: vars.$l;
 }
 
 .page-content .cm-editor,
@@ -42,9 +45,9 @@
   background-color: #EEE;
   border: 1px solid #DDD;
   border-start-end-radius: 4px;
-  @include lightDark(background-color, #eee, #333);
-  @include lightDark(border-color, #ddd, #444);
-  @include lightDark(color, #444, #888);
+  @include mixins.lightDark(background-color, #eee, #333);
+  @include mixins.lightDark(border-color, #ddd, #444);
+  @include mixins.lightDark(color, #444, #888);
   line-height: 0;
   cursor: pointer;
   z-index: 5;
diff --git a/resources/sass/_colors.scss b/resources/sass/_colors.scss
index c77c1d8b3..bf7a7a0fc 100644
--- a/resources/sass/_colors.scss
+++ b/resources/sass/_colors.scss
@@ -1,3 +1,5 @@
+@use "mixins";
+
 /**
  * Background colors
  */
@@ -7,7 +9,7 @@
 }
 .primary-background-light {
   background-color: var(--color-primary-light);
-  @include whenDark {
+  @include mixins.whenDark {
     background: #000;
     .text-link {
       color: #AAA !important;
@@ -50,12 +52,12 @@
 }
 
 .text-muted {
-  @include lightDark(color, #575757, #888888, true);
+  @include mixins.lightDark(color, #575757, #888888, true);
   fill: currentColor !important;
 }
 
 .text-dark {
-  @include lightDark(color, #222, #ccc, true);
+  @include mixins.lightDark(color, #222, #ccc, true);
   fill: currentColor !important;
 }
 
diff --git a/resources/sass/_components.scss b/resources/sass/_components.scss
index 18d1bc18f..888b32527 100644
--- a/resources/sass/_components.scss
+++ b/resources/sass/_components.scss
@@ -1,16 +1,21 @@
+@use "sass:math";
+
+@use "mixins";
+@use "vars";
+
 
 // System wide notifications
 .notification {
   position: fixed;
   top: 0;
   right: 0;
-  margin: $-xl;
-  padding: $-m $-l;
+  margin: vars.$xl;
+  padding: vars.$m vars.$l;
   background-color: #FFF;
-  @include lightDark(background-color, #fff, #444);
+  @include mixins.lightDark(background-color, #fff, #444);
   border-radius: 4px;
   border-inline-start: 6px solid currentColor;
-  box-shadow: $bs-large;
+  box-shadow: vars.$bs-large;
   z-index: 999999;
   cursor: pointer;
   max-width: 360px;
@@ -28,20 +33,20 @@
   svg {
     width: 2.8rem;
     height: 2.8rem;
-    padding-inline-end: $-s;
+    padding-inline-end: vars.$s;
     fill: currentColor;
   }
   .dismiss {
     margin-top: -8px;
     svg {
       height: 1.0rem;
-      @include lightDark(color, #444, #888);
+      @include mixins.lightDark(color, #444, #888);
     }
   }
   span {
     vertical-align: middle;
     line-height: 1.3;
-    @include whenDark {
+    @include mixins.whenDark {
       color: #BBB;
     }
   }
@@ -78,12 +83,12 @@
     transform: rotate(90deg);
   }
   svg[data-icon="caret-right"] + * {
-    margin-inline-start: $-xxs;
+    margin-inline-start: vars.$xxs;
   }
 }
 
 [overlay], .popup-background {
-  @include lightDark(background-color, rgba(0, 0, 0, 0.333), rgba(0, 0, 0, 0.6));
+  @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.333), rgba(0, 0, 0, 0.6));
   position: fixed;
   z-index: 95536;
   width: 100%;
@@ -104,7 +109,7 @@
 }
 
 .popup-body {
-  @include lightDark(background-color, #fff, #333);
+  @include mixins.lightDark(background-color, #fff, #333);
   max-height: 90%;
   max-width: 1200px;
   width: 90%;
@@ -144,7 +149,7 @@
   border-radius: 0;
   box-shadow: none;
   color: #FFF;
-  padding: $-xs $-m;
+  padding: vars.$xs vars.$m;
   cursor: pointer;
 }
 
@@ -161,7 +166,7 @@
   background-color: var(--color-primary-light);
   min-height: 41px;
   button {
-    padding: 10px $-m;
+    padding: 10px vars.$m;
   }
 }
 
@@ -183,7 +188,7 @@
   .popup-title {
     color: #FFF;
     margin-inline-end: auto;
-    padding: 8px $-m;
+    padding: 8px vars.$m;
   }
   &.flex-container-row {
     display: flex !important;
@@ -226,7 +231,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 
 .dropzone-landing-area {
   background-color: var(--color-primary-light);
-  padding: $-m $-l;
+  padding: vars.$m vars.$l;
   width: 100%;
   border: 1px dashed var(--color-primary);
   color: var(--color-primary);
@@ -275,8 +280,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   display: flex;
   margin: 1rem;
   flex-direction: row;
-  @include lightDark(background, #FFF, #444);
-  box-shadow: $bs-large;
+  @include mixins.lightDark(background, #FFF, #444);
+  box-shadow: vars.$bs-large;
   border-radius: 4px;
   overflow: hidden;
   padding-bottom: 3px;
@@ -354,7 +359,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   position: sticky;
   top: 0;
   z-index: 5;
-  @include lightDark(background-color, rgba(255, 255, 255, 0.85), rgba(80, 80, 80, 0.85));
+  @include mixins.lightDark(background-color, rgba(255, 255, 255, 0.85), rgba(80, 80, 80, 0.85));
 }
 .image-manager-filter-bar-bg {
   position: absolute;
@@ -367,16 +372,16 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 }
 
 .image-manager-filters {
-  box-shadow: $bs-med;
+  box-shadow: vars.$bs-med;
   border-radius: 4px;
   overflow: hidden;
   border-bottom: 0 !important;
-  @include whenDark {
+  @include mixins.whenDark {
     border: 1px solid #000 !important;
   }
   button {
     line-height: 0;
-    @include lightDark(background-color, #FFF, #333);
+    @include mixins.lightDark(background-color, #FFF, #333);
   }
   svg {
     margin: 0;
@@ -404,7 +409,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   padding: 0;
   cursor: pointer;
   aspect-ratio: 1;
-  @include lightDark(border-color, #ddd, #000);
+  @include mixins.lightDark(border-color, #ddd, #000);
   transition: all linear 80ms;
   overflow: hidden;
   &.selected {
@@ -441,7 +446,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   &:focus .image-meta {
     opacity: 1;
   }
-  @include smaller-than($m) {
+  @include mixins.smaller-than(vars.$bp-m) {
     .image-meta {
       display: none;
     }
@@ -450,7 +455,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 
 .image-manager .load-more {
   text-align: center;
-  padding: $-s $-m;
+  padding: vars.$s vars.$m;
   clear: both;
   .loading-container {
     margin: 0;
@@ -467,7 +472,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 }
 
 .image-manager-warning {
-  @include lightDark(background, #FFF, #333);
+  @include mixins.lightDark(background, #FFF, #333);
   color: var(--color-warning);
   font-weight: bold;
   border-inline: 3px solid var(--color-warning);
@@ -479,16 +484,16 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   overflow-y: auto;
   overflow-x: hidden;
   border-inline-start: 1px solid #DDD;
-  @include lightDark(border-color, #ddd, #000);
+  @include mixins.lightDark(border-color, #ddd, #000);
   .inner {
     min-height: auto;
-    padding: $-m;
+    padding: vars.$m;
   }
   .image-manager-viewer img {
     max-width: 100%;
     max-height: 180px;
     display: block;
-    margin: 0 auto $-m auto;
+    margin: 0 auto vars.$m auto;
     box-shadow: 0 1px 21px 1px rgba(76, 76, 76, 0.3);
   }
   .image-manager-viewer {
@@ -501,7 +506,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
     }
   }
 }
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
   .image-manager-sidebar {
     border-inline-start: 0;
   }
@@ -522,7 +527,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 
 .tab-container.bordered [role="tablist"] button[role="tab"] {
   border-inline-end: 1px solid #DDD;
-  @include lightDark(border-inline-end-color, #DDD, #000);
+  @include mixins.lightDark(border-inline-end-color, #DDD, #000);
   &:last-child {
     border-inline-end: none;
   }
@@ -534,14 +539,14 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   justify-items: start;
   text-align: start;
   border-bottom: 1px solid #DDD;
-  @include lightDark(border-color, #ddd, #444);
-  margin-bottom: $-m;
+  @include mixins.lightDark(border-color, #ddd, #444);
+  margin-bottom: vars.$m;
 }
 
 .tab-container [role="tablist"] button[role="tab"] {
   display: inline-block;
-  padding: $-s;
-  @include lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
+  padding: vars.$s;
+  @include mixins.lightDark(color, rgba(0, 0, 0, .5), rgba(255, 255, 255, .5));
   cursor: pointer;
   border-bottom: 2px solid transparent;
   margin-bottom: -1px;
@@ -551,8 +556,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
     outline: 0 !important;
   }
   &:hover, &:focus {
-    @include lightDark(color, rgba(0, 0, 0, .8), rgba(255, 255, 255, .8));
-    @include lightDark(border-bottom-color,  rgba(0, 0, 0, .2), rgba(255, 255, 255, .2));
+    @include mixins.lightDark(color, rgba(0, 0, 0, .8), rgba(255, 255, 255, .8));
+    @include mixins.lightDark(border-bottom-color,  rgba(0, 0, 0, .2), rgba(255, 255, 255, .2));
   }
   &:focus {
     outline: 1px dotted var(--color-primary);
@@ -562,7 +567,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 .tab-container [role="tablist"].controls-card {
   margin-bottom: 0;
   border-bottom: 0;
-  padding: 0 $-xs;
+  padding: 0 vars.$xs;
 }
 
 .image-picker .none {
@@ -583,16 +588,16 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 
 .code-editor .lang-options button {
   display: block;
-  padding: $-xs $-m;
+  padding: vars.$xs vars.$m;
   border-bottom: 1px solid;
-  @include lightDark(color, #333, #AAA);
-  @include lightDark(border-bottom-color, #EEE, #000);
+  @include mixins.lightDark(color, #333, #AAA);
+  @include mixins.lightDark(border-bottom-color, #EEE, #000);
   cursor: pointer;
   width: 100%;
   text-align: left;
   font-family: var(--font-code);
   font-size: 0.7rem;
-  padding-left: 24px + $-xs;
+  padding-left: 24px + vars.$xs;
   &:hover, &.active {
     background-color: var(--color-primary-light);
     color: var(--color-primary);
@@ -633,7 +638,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   background-color: var(--color-primary-light);
   width: 100%;
   color: var(--color-primary);
-  padding: $-xxs $-s;
+  padding: vars.$xxs vars.$s;
   margin-bottom: 0;
 }
 
@@ -648,7 +653,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   border-radius: 0;
   border: 0;
   border-bottom: 1px solid #DDD;
-  padding: $-xs $-s;
+  padding: vars.$xs vars.$s;
   height: auto;
 }
 
@@ -667,7 +672,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   height: 80vh;
 }
 
-@include smaller-than($s) {
+@include mixins.smaller-than(vars.$bp-s) {
   .code-editor .lang-options {
     display: none;
   }
@@ -680,21 +685,21 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 }
 
 .comments-container {
-  padding-inline: $-xl;
-  @include smaller-than($m) {
-    padding-inline: $-xs;
+  padding-inline: vars.$xl;
+  @include mixins.smaller-than(vars.$bp-m) {
+    padding-inline: vars.$xs;
   }
 }
 .comment-box {
   border-radius: 4px;
   border: 1px solid #DDD;
-  @include lightDark(border-color, #ddd, #000);
-  @include lightDark(background-color, #FFF, #222);
+  @include mixins.lightDark(border-color, #ddd, #000);
+  @include mixins.lightDark(background-color, #FFF, #222);
   .content {
     font-size: 0.666em;
-    padding: $-xs $-s;
+    padding: vars.$xs vars.$s;
     p, ul, ol {
-      font-size: $fs-m;
+      font-size: vars.$fs-m;
       margin: .5em 0;
     }
   }
@@ -708,7 +713,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   .actions button:focus {
     outline: 1px dotted var(--color-primary);
   }
-  @include smaller-than($m) {
+  @include mixins.smaller-than(vars.$bp-m) {
     .actions {
       opacity: 1;
     }
@@ -717,8 +722,8 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 
 .comment-box .header {
   border-bottom: 1px solid #DDD;
-  padding: $-xs $-s;
-  @include lightDark(border-color, #DDD, #000);
+  padding: vars.$xs vars.$s;
+  @include mixins.lightDark(border-color, #DDD, #000);
   a {
     color: inherit;
   }
@@ -735,10 +740,10 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 
 .comment-thread-indicator {
   border-inline-start: 3px dotted #DDD;
-  @include lightDark(border-color, #DDD, #444);
-  margin-inline-start: $-xs;
-  width: $-l;
-  height: calc(100% - $-m);
+  @include mixins.lightDark(border-color, #DDD, #444);
+  margin-inline-start: vars.$xs;
+  width: vars.$l;
+  height: calc(100% - vars.$m);
 }
 
 .comment-branch .comment-branch .comment-branch .comment-branch .comment-thread-indicator {
@@ -748,7 +753,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 .comment-reply {
   display: none;
   margin: 0 !important;
-  margin-bottom: -$-xxs !important;
+  margin-bottom: -(vars.$xxs) !important;
 }
 
 .comment-branch .comment-branch .comment-branch .comment-branch .comment-reply {
@@ -760,17 +765,17 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
     font-size: 0.8rem;
   }
   .header {
-    padding: $-xs;
+    padding: vars.$xs;
   }
   .right-meta {
     display: none;
   }
   .content {
-    padding: $-xs $-s;
+    padding: vars.$xs vars.$s;
   }
 }
 .comment-container-compact .comment-thread-indicator {
-  width: $-m;
+  width: vars.$m;
 }
 
 #tag-manager .drag-card {
@@ -792,15 +797,15 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
     display: flex;
     flex-direction: column;
     border-inline-start: 1px solid;
-    @include lightDark(border-color, #ddd, #000);
+    @include mixins.lightDark(border-color, #ddd, #000);
   }
   .template-item-actions button {
     cursor: pointer;
     flex: 1;
-    @include lightDark(background-color, #FFF, #222);
+    @include mixins.lightDark(background-color, #FFF, #222);
     border: 0;
     border-top: 1px solid;
-    @include lightDark(border-color, #DDD, #000);
+    @include mixins.lightDark(border-color, #DDD, #000);
   }
   .template-item-actions button svg {
     margin: 0;
@@ -818,7 +823,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   border: 1px solid transparent;
   border-radius: 4px;
   line-height: normal;
-  padding: $-xs;
+  padding: vars.$xs;
   &:hover {
     border-color: #DDD;
   }
@@ -828,7 +833,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 }
 .dropdown-search-toggle-select {
   display: flex;
-  gap: $-s;
+  gap: vars.$s;
   line-height: normal;
   .svg-icon {
     height: 26px;
@@ -862,7 +867,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 }
 
 .dropdown-search-dropdown {
-  box-shadow: $bs-med;
+  box-shadow: vars.$bs-med;
   overflow: hidden;
   min-height: 100px;
   width: 240px;
@@ -871,16 +876,16 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   z-index: 80;
   right: 0;
   top: 0;
-  margin-top: $-m;
-  @include rtl {
+  margin-top: vars.$m;
+  @include mixins.rtl {
     right: auto;
-    left: -$-m;
+    left: -(vars.$m);
   }
   .dropdown-search-search .svg-icon {
     position: absolute;
-    left: $-s;
-    @include rtl {
-      right: $-s;
+    left: vars.$s;
+    @include mixins.rtl {
+      right: vars.$s;
       left: auto;
     }
     top: 11px;
@@ -893,14 +898,14 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
     text-align: start;
   }
   .dropdown-search-item {
-    padding: $-s $-m;
+    padding: vars.$s vars.$m;
     &:hover,&:focus {
       background-color: #F2F2F2;
       text-decoration: none;
     }
   }
   input, input:focus {
-    padding-inline-start: $-xl;
+    padding-inline-start: vars.$xl;
     border-radius: 0;
     border: 0;
     border-bottom: 1px solid #DDD;
@@ -910,9 +915,9 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
   }
 }
 
-@include smaller-than($l) {
+@include mixins.smaller-than(vars.$bp-l) {
   .dropdown-search-dropdown {
-    inset-inline: $-m auto;
+    inset-inline: vars.$m auto;
   }
   .dropdown-search-dropdown .dropdown-search-list {
     max-height: 240px;
@@ -924,13 +929,13 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 }
 .item-list-row {
   border: 1.5px solid;
-  @include lightDark(border-color, #E2E2E2, #444);
+  @include mixins.lightDark(border-color, #E2E2E2, #444);
   border-bottom-width: 0;
   label {
     padding-bottom: 0;
   }
   &:hover {
-    @include lightDark(background-color, #F6F6F6, #333);
+    @include mixins.lightDark(background-color, #F6F6F6, #333);
   }
 }
 .item-list-row:first-child {
@@ -980,7 +985,7 @@ body.flexbox-support #entity-selector-wrap .popup-body .form-group {
 }
 .shortcut-hint {
   position: fixed;
-  padding: $-xxs $-xxs;
+  padding: vars.$xxs vars.$xxs;
   font-size: .85rem;
   font-weight: 700;
   line-height: 1;
@@ -996,8 +1001,8 @@ $btt-size: 40px;
 .back-to-top {
   background-color: var(--color-primary);
   position: fixed;
-  bottom: $-m;
-  right: $-l;
+  bottom: vars.$m;
+  right: vars.$l;
   padding: 5px 7px;
   cursor: pointer;
   color: #FFF;
@@ -1036,17 +1041,17 @@ $btt-size: 40px;
   max-height: 280px;
   overflow-y: scroll;
   border: 1px solid;
-  @include lightDark(border-color, #DDD, #000);
+  @include mixins.lightDark(border-color, #DDD, #000);
   border-radius: 3px;
   min-height: 20px;
-  @include lightDark(background-color, #EEE, #000);
+  @include mixins.lightDark(background-color, #EEE, #000);
 }
 .scroll-box-item {
   border-bottom: 1px solid;
   border-top: 1px solid;
-  @include lightDark(border-color, #DDD, #000);
+  @include mixins.lightDark(border-color, #DDD, #000);
   margin-top: -1px;
-  @include lightDark(background-color, #FFF, #222);
+  @include mixins.lightDark(background-color, #FFF, #222);
   display: flex;
   align-items: flex-start;
   padding: 1px;
@@ -1055,7 +1060,7 @@ $btt-size: 40px;
   }
   &:hover {
     cursor: pointer;
-    @include lightDark(background-color, #f8f8f8, #333);
+    @include mixins.lightDark(background-color, #f8f8f8, #333);
   }
   .handle {
     color: #AAA;
@@ -1068,13 +1073,13 @@ $btt-size: 40px;
     margin: 0;
   }
   > * {
-    padding: $-xs $-m;
+    padding: vars.$xs vars.$m;
   }
   .handle + * {
     padding-left: 0;
   }
   &:hover .handle {
-    @include lightDark(color, #444, #FFF);
+    @include mixins.lightDark(color, #444, #FFF);
   }
   &:hover button {
     opacity: 1;
@@ -1087,8 +1092,8 @@ $btt-size: 40px;
 input.scroll-box-search, .scroll-box-header-item {
   font-size: 0.8rem;
   border: 1px solid;
-  @include lightDark(border-color, #DDD, #000);
-  @include lightDark(background-color, #FFF, #222);
+  @include mixins.lightDark(border-color, #DDD, #000);
+  @include mixins.lightDark(background-color, #FFF, #222);
   margin-bottom: -1px;
   border-radius: 3px 3px 0 0;
   width: 100%;
diff --git a/resources/sass/_content.scss b/resources/sass/_content.scss
index 7d130bb0c..b0176d64e 100644
--- a/resources/sass/_content.scss
+++ b/resources/sass/_content.scss
@@ -1,3 +1,6 @@
+@use "mixins";
+@use "vars";
+
 /**
  * Page Content
  * Styles specific to blocks used within page content.
@@ -13,14 +16,14 @@
   }
   img.align-left, table.align-left, iframe.align-left, video.align-left {
     float: left !important;
-    margin: $-xs $-m $-m 0;
+    margin: vars.$xs vars.$m vars.$m 0;
   }
   .align-right {
     text-align: right !important;
   }
   img.align-right, table.align-right, iframe.align-right, video.align-right {
     float: right !important;
-    margin: $-xs 0 $-xs $-s;
+    margin: vars.$xs 0 vars.$xs vars.$s;
   }
   .align-center {
     text-align: center;
@@ -40,7 +43,7 @@
   }
   hr {
     clear: both;
-    margin: $-m 0;
+    margin: vars.$m 0;
   }
   table {
     hyphens: auto;
@@ -63,23 +66,23 @@
 
   details {
     border: 1px solid;
-    @include lightDark(border-color, #DDD, #555);
+    @include mixins.lightDark(border-color, #DDD, #555);
     margin-bottom: 1em;
-    padding: $-s;
+    padding: vars.$s;
   }
   details > summary {
-    margin-top: -$-s;
-    margin-left: -$-s;
-    margin-right: -$-s;
-    margin-bottom: -$-s;
+    margin-top: -(vars.$s);
+    margin-left: -(vars.$s);
+    margin-right: -(vars.$s);
+    margin-bottom: -(vars.$s);
     font-weight: bold;
-    @include lightDark(background-color, #EEE, #333);
-    padding: $-xs $-s;
+    @include mixins.lightDark(background-color, #EEE, #333);
+    padding: vars.$xs vars.$s;
   }
   details[open] > summary {
-    margin-bottom: $-s;
+    margin-bottom: vars.$s;
     border-bottom: 1px solid;
-    @include lightDark(border-color, #DDD, #555);
+    @include mixins.lightDark(border-color, #DDD, #555);
   }
   details > summary + * {
     margin-top: .2em;
@@ -138,10 +141,10 @@ body .page-content img,
   border-inline-start: 3px solid #BBB;
   border-inline-end: none;
   background-color: #EEE;
-  padding: $-s;
-  padding-left: $-xl;
-  padding-inline-start: $-xl;
-  padding-inline-end: $-s;
+  padding: vars.$s;
+  padding-left: vars.$xl;
+  padding-inline-start: vars.$xl;
+  padding-inline-end: vars.$s;
   display: block;
   position: relative;
   overflow: auto;
@@ -151,8 +154,8 @@ body .page-content img,
     content: '';
     width: 1.2em;
     height: 1.2em;
-    left: $-xs + 2px;
-    inset-inline-start: $-xs + 2px;
+    left: vars.$xs + 2px;
+    inset-inline-start: vars.$xs + 2px;
     inset-inline-end: unset;
     top: 50%;
     margin-top: -9px;
@@ -162,30 +165,30 @@ body .page-content img,
     opacity: 0.8;
   }
   &.success {
-    @include lightDark(border-color, $positive, $positive-dark);
-    @include lightDark(background-color, #eafdeb, #122913);
-    @include lightDark(color, #063409, $positive-dark);
+    @include mixins.lightDark(border-color, vars.$positive, vars.$positive-dark);
+    @include mixins.lightDark(background-color, #eafdeb, #122913);
+    @include mixins.lightDark(color, #063409, vars.$positive-dark);
   }
   &.success:before {
     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiMzNzZjMzkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEyIDJDNi40OCAyIDIgNi40OCAyIDEyczQuNDggMTAgMTAgMTAgMTAtNC40OCAxMC0xMFMxNy41MiAyIDEyIDJ6bS0yIDE1bC01LTUgMS40MS0xLjQxTDEwIDE0LjE3bDcuNTktNy41OUwxOSA4bC05IDl6Ii8+PC9zdmc+");
   }
   &.danger {
-    @include lightDark(border-color, $negative, $negative-dark);
-    @include lightDark(background-color, #fcdbdb, #250505);
-    @include lightDark(color, #4d0706, $negative-dark);
+    @include mixins.lightDark(border-color, vars.$negative, vars.$negative-dark);
+    @include mixins.lightDark(background-color, #fcdbdb, #250505);
+    @include mixins.lightDark(color, #4d0706, vars.$negative-dark);
   }
   &.danger:before {
     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiOTE4MTgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0xNS43MyAzSDguMjdMMyA4LjI3djcuNDZMOC4yNyAyMWg3LjQ2TDIxIDE1LjczVjguMjdMMTUuNzMgM3pNMTIgMTcuM2MtLjcyIDAtMS4zLS41OC0xLjMtMS4zIDAtLjcyLjU4LTEuMyAxLjMtMS4zLjcyIDAgMS4zLjU4IDEuMyAxLjMgMCAuNzItLjU4IDEuMy0xLjMgMS4zem0xLTQuM2gtMlY3aDJ2NnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==");
   }
   &.info {
-    @include lightDark(border-color, $info, $info-dark);
-    @include lightDark(background-color, #d3efff, #001825);
-    @include lightDark(color, #01466c, $info-dark);
+    @include mixins.lightDark(border-color, vars.$info, vars.$info-dark);
+    @include mixins.lightDark(background-color, #d3efff, #001825);
+    @include mixins.lightDark(color, #01466c, vars.$info-dark);
   }
   &.warning {
-    @include lightDark(border-color, $warning, $warning-dark);
-    @include lightDark(background-color, #fee3d3, #30170a);
-    @include lightDark(color, #6a2802, $warning-dark);
+    @include mixins.lightDark(border-color, vars.$warning, vars.$warning-dark);
+    @include mixins.lightDark(background-color, #fee3d3, #30170a);
+    @include mixins.lightDark(color, #6a2802, vars.$warning-dark);
   }
   &.warning:before {
     background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9IiNiNjUzMWMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+ICAgIDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gICAgPHBhdGggZD0iTTEgMjFoMjJMMTIgMiAxIDIxem0xMi0zaC0ydi0yaDJ2MnptMC00aC0ydi00aDJ2NHoiLz48L3N2Zz4=");
diff --git a/resources/sass/_editor.scss b/resources/sass/_editor.scss
index b33cb4d05..e273f1942 100644
--- a/resources/sass/_editor.scss
+++ b/resources/sass/_editor.scss
@@ -1,3 +1,6 @@
+@use "mixins";
+@use "vars";
+
 // Common variables
 :root {
   --editor-color-primary: #206ea7;
@@ -262,11 +265,11 @@ body.editor-is-fullscreen {
   color: #FFF;
 }
 .editor-modal-title {
-  padding: 8px $-m;
+  padding: 8px vars.$m;
 }
 .editor-modal-close {
   color: #FFF;
-  padding: 8px $-m;
+  padding: 8px vars.$m;
   align-items: center;
   justify-content: center;
   cursor: pointer;
@@ -281,7 +284,7 @@ body.editor-is-fullscreen {
   }
 }
 .editor-modal-body {
-  padding: $-m;
+  padding: vars.$m;
 }
 
 // Specific UI elements
@@ -493,21 +496,21 @@ textarea.editor-form-field-input {
 .editor-form-actions {
   display: flex;
   justify-content: end;
-  gap: $-s;
-  margin-top: $-m;
+  gap: vars.$s;
+  margin-top: vars.$m;
 }
 .editor-form-actions > button {
   display: block;
   font-size: 0.85rem;
   line-height: 1.4em;
-  padding: $-xs*1.3 $-m;
+  padding: vars.$xs*1.3 vars.$m;
   font-weight: 400;
   border-radius: 4px;
   cursor: pointer;
   box-shadow: none;
   &:focus {
     outline: 1px dotted currentColor;
-    outline-offset: -$-xs;
+    outline-offset: -(vars.$xs);
     box-shadow: none;
     filter: brightness(90%);
   }
@@ -517,20 +520,20 @@ textarea.editor-form-field-input {
   color: #FFF;
   border: 1px solid var(--color-primary);
   &:hover {
-    @include lightDark(box-shadow, $bs-light, $bs-dark);
+    @include mixins.lightDark(box-shadow, vars.$bs-light, vars.$bs-dark);
     filter: brightness(110%);
   }
 }
 .editor-form-action-secondary {
   border: 1px solid;
-  @include lightDark(border-color, #CCC, #666);
-  @include lightDark(color, #666, #AAA);
+  @include mixins.lightDark(border-color, #CCC, #666);
+  @include mixins.lightDark(color, #666, #AAA);
   &:hover, &:focus, &:active {
-    @include lightDark(color, #444, #BBB);
+    @include mixins.lightDark(color, #444, #BBB);
     border: 1px solid #CCC;
     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
     background-color: #F2F2F2;
-    @include lightDark(background-color, #f8f8f8, #444);
+    @include mixins.lightDark(background-color, #f8f8f8, #444);
     filter: none;
   }
   &:active {
diff --git a/resources/sass/_forms.scss b/resources/sass/_forms.scss
index 1c679aaa0..b66688f8d 100644
--- a/resources/sass/_forms.scss
+++ b/resources/sass/_forms.scss
@@ -1,13 +1,18 @@
+@use "sass:math";
+
+@use "mixins";
+@use "vars";
+
 
 .input-base {
   border-radius: 3px;
   border: 1px solid #D4D4D4;
-  @include lightDark(background-color, #fff, #333);
-  @include lightDark(border-color, #d4d4d4, #111);
-  @include lightDark(color, #666, #AAA);
+  @include mixins.lightDark(background-color, #fff, #333);
+  @include mixins.lightDark(border-color, #d4d4d4, #111);
+  @include mixins.lightDark(color, #666, #AAA);
   display: inline-block;
-  font-size: $fs-m;
-  padding: $-xs*1.8;
+  font-size: vars.$fs-m;
+  padding: vars.$xs*1.8;
   height: 40px;
   width: 250px;
   max-width: 100%;
@@ -49,7 +54,7 @@
   #markdown-editor-input {
     font-style: normal;
     font-weight: 400;
-    padding: $-xs $-m;
+    padding: vars.$xs vars.$m;
     color: #444;
     border-radius: 0;
     max-height: 100%;
@@ -72,7 +77,7 @@
 .markdown-editor-wrap {
   border-top: 1px solid #DDD;
   border-bottom: 1px solid #DDD;
-  @include lightDark(border-color, #ddd, #000);
+  @include mixins.lightDark(border-color, #ddd, #000);
   position: relative;
   flex: 1;
   min-width: 0;
@@ -92,11 +97,11 @@
 
 .markdown-panel-divider {
   width: 2px;
-  @include lightDark(background-color, #ddd, #000);
+  @include mixins.lightDark(background-color, #ddd, #000);
   cursor: col-resize;
 }
 
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
   #markdown-editor {
     flex-direction: column;
   }
@@ -109,7 +114,7 @@
   }
   .editor-toolbar-label {
     float: none !important;
-    @include lightDark(border-color, #DDD, #555);
+    @include mixins.lightDark(border-color, #DDD, #555);
     display: block;
   }
   .markdown-editor-wrap:not(.active) .editor-toolbar + div,
@@ -150,10 +155,10 @@ html.markdown-editor-display.dark-mode {
   font-size: 11px;
   line-height: 1.6;
   border-bottom: 1px solid #CCC;
-  @include lightDark(background-color, #FFF, #333);
-  @include lightDark(border-color, #CCC, #000);
+  @include mixins.lightDark(background-color, #FFF, #333);
+  @include mixins.lightDark(border-color, #CCC, #000);
   flex: none;
-  @include whenDark {
+  @include mixins.whenDark {
     button {
       color: #AAA;
     }
@@ -161,12 +166,12 @@ html.markdown-editor-display.dark-mode {
 }
 
 .editor-toolbar .buttons {
-  font-size: $fs-m;
+  font-size: vars.$fs-m;
   .dropdown-menu {
     padding: 0;
   }
   .toggle-switch {
-    margin: $-s 0;
+    margin: vars.$s 0;
   }
 }
 
@@ -175,18 +180,18 @@ html.markdown-editor-display.dark-mode {
   width: 2rem;
   text-align: center;
   border-left: 1px solid;
-  @include lightDark(border-color, #DDD, #555);
+  @include mixins.lightDark(border-color, #DDD, #555);
   svg {
     margin-inline-end: 0;
   }
   &:hover {
-    @include lightDark(background-color, #DDD, #222);
+    @include mixins.lightDark(background-color, #DDD, #222);
   }
 }
 
 
 label {
-  @include lightDark(color, #666, #ddd);
+  @include mixins.lightDark(color, #666, #ddd);
   display: block;
   line-height: 1.4em;
   font-size: 0.94em;
@@ -202,12 +207,12 @@ label.radio, label.checkbox {
   font-weight: 400;
   user-select: none;
   input[type="radio"], input[type="checkbox"] {
-    margin-inline-end: $-xs;
+    margin-inline-end: vars.$xs;
   }
 }
 
 label.inline.checkbox {
-  margin-inline-end: $-m;
+  margin-inline-end: vars.$m;
 }
 
 label + p.small {
@@ -218,7 +223,7 @@ table.form-table {
   max-width: 100%;
   td {
     overflow: hidden;
-    padding: math.div($-xxs, 2) 0;
+    padding: math.div(vars.$xxs, 2) 0;
   }
 }
 
@@ -236,7 +241,7 @@ select {
   background-position: calc(100% - 20px) 64%;
   background-repeat: no-repeat;
 
-  @include rtl {
+  @include mixins.rtl {
     background-position: 20px 70%;
   }
 }
@@ -257,9 +262,9 @@ input[type=color] {
 .toggle-switch {
   user-select: none;
   display: inline-grid;
-  grid-template-columns: (16px + $-s) 1fr;
+  grid-template-columns: (16px + vars.$s) 1fr;
   align-items: center;
-  margin: $-m 0;
+  margin: vars.$m 0;
   .custom-checkbox {
     width: 16px;
     height: 16px;
@@ -302,7 +307,7 @@ input[type=color] {
 }
 .toggle-switch-list {
   .toggle-switch {
-    margin: $-xs 0;
+    margin: vars.$xs 0;
   }
   &.compact .toggle-switch {
     margin: 1px 0;
@@ -310,18 +315,18 @@ input[type=color] {
 }
 
 .form-group {
-  margin-bottom: $-s;
+  margin-bottom: vars.$s;
 }
 
 .setting-list > div {
   border-bottom: 1px solid #DDD;
-  padding: $-xl 0;
+  padding: vars.$xl 0;
   &:last-child {
     border-bottom: none;
   }
 }
 .setting-list-label {
-  @include lightDark(color, #222, #DDD);
+  @include mixins.lightDark(color, #222, #DDD);
   color: #222;
   font-size: 1rem;
 }
@@ -329,7 +334,7 @@ input[type=color] {
   margin-bottom: 0;
 }
 .setting-list-label + .grid {
-  margin-top: $-m;
+  margin-top: vars.$m;
 }
 
 .setting-list .grid, .stretch-inputs {
@@ -349,19 +354,19 @@ input[type=color] {
 
 .form-group {
   div.text-pos, div.text-neg, p.text-post, p.text-neg {
-    padding: $-xs 0;
+    padding: vars.$xs 0;
   }
 }
 
 .form-group.collapsible {
-  padding: 0 $-m;
+  padding: 0 vars.$m;
   border: 1px solid;
-  @include lightDark(border-color, #DDD, #000);
+  @include mixins.lightDark(border-color, #DDD, #000);
   border-radius: 4px;
   .collapse-title {
-    margin-inline-start: -$-m;
-    margin-inline-end: -$-m;
-    padding: $-s $-m;
+    margin-inline-start: -(vars.$m);
+    margin-inline-end: -(vars.$m);
+    padding: vars.$s vars.$m;
     display: block;
     width: calc(100% + 32px);
     text-align: start;
@@ -377,13 +382,13 @@ input[type=color] {
   .collapse-title label:before {
     display: inline-block;
     content: '▸';
-    margin-inline-end: $-m;
+    margin-inline-end: vars.$m;
     transition: all ease-in-out 400ms;
     transform: rotate(0);
   }
   .collapse-content {
     display: none;
-    padding-bottom: $-m;
+    padding-bottom: vars.$m;
   }
   &.open .collapse-title label:before {
     transform: rotate(90deg);
@@ -407,7 +412,7 @@ input[type=color] {
 .title-input input[type="text"] {
   display: block;
   width: 100%;
-  padding: $-s;
+  padding: vars.$s;
   margin-top: 0;
   font-size: 2em;
   height: auto;
@@ -416,15 +421,15 @@ input[type=color] {
 .description-input textarea {
   display: block;
   width: 100%;
-  padding: $-s;
-  font-size: $fs-m;
+  padding: vars.$s;
+  font-size: vars.$fs-m;
   color: #666;
   height: auto;
 }
 
 .description-input > .tox-tinymce {
   border: 1px solid #DDD !important;
-  @include lightDark(border-color, #DDD !important, #000 !important);
+  @include mixins.lightDark(border-color, #DDD !important, #000 !important);
   border-radius: 3px;
   .tox-toolbar__primary {
     justify-content: end;
@@ -437,7 +442,7 @@ input[type=color] {
   button[tabindex="-1"] {
     background-color: transparent;
     border: none;
-    @include lightDark(color, #666, #AAA);
+    @include mixins.lightDark(color, #666, #AAA);
     padding: 0;
     cursor: pointer;
     position: absolute;
@@ -446,8 +451,8 @@ input[type=color] {
   }
   input {
     display: block;
-    padding: $-xs * 1.5;
-    padding-inline-start: $-l + 4px;
+    padding: vars.$xs * 1.5;
+    padding-inline-start: vars.$l + 4px;
     width: 300px;
     max-width: 100%;
     height: auto;
@@ -466,10 +471,10 @@ input[type=color] {
   height: 38px;
   z-index: -1;
   &.floating {
-    box-shadow: $bs-med;
+    box-shadow: vars.$bs-med;
     border-radius: 4px;
     overflow: hidden;
-    @include whenDark {
+    @include mixins.whenDark {
       border: 1px solid #000;
     }
   }
@@ -477,7 +482,7 @@ input[type=color] {
     height: 100%;
     border-radius: 0;
     border: 1px solid #ddd;
-    @include lightDark(border-color, #ddd, #000);
+    @include mixins.lightDark(border-color, #ddd, #000);
     margin-inline-start: -1px;
     &:last-child {
       border-inline-end: 0;
@@ -486,7 +491,7 @@ input[type=color] {
   input {
     border: 0;
     flex: 5;
-    padding: $-xs $-s;
+    padding: vars.$xs vars.$s;
     &:focus, &:active {
       outline: 1px dotted var(--color-primary);
       outline-offset: -2px;
@@ -498,8 +503,8 @@ input[type=color] {
     width: 48px;
     border-inline-start: 1px solid #DDD;
     background-color: #FFF;
-    @include lightDark(background-color, #FFF, #333);
-    @include lightDark(color, #444, #AAA);
+    @include mixins.lightDark(background-color, #FFF, #333);
+    @include mixins.lightDark(color, #444, #AAA);
   }
   button:focus {
     outline: 1px dotted var(--color-primary);
@@ -508,7 +513,7 @@ input[type=color] {
   svg {
     margin: 0;
   }
-  @include smaller-than($s) {
+  @include mixins.smaller-than(vars.$bp-s) {
     width: 180px;
   }
 }
@@ -548,30 +553,30 @@ input[type=color] {
 .custom-simple-file-input {
   max-width: 100%;
   border: 1px solid;
-  @include lightDark(border-color, #DDD, #666);
+  @include mixins.lightDark(border-color, #DDD, #666);
   border-radius: 4px;
-  padding: $-s $-m;
+  padding: vars.$s vars.$m;
 }
 .custom-simple-file-input::file-selector-button {
   background-color: transparent;
   text-decoration: none;
   font-size: 0.8rem;
   line-height: 1.4em;
-  padding: $-xs $-s;
+  padding: vars.$xs vars.$s;
   border: 1px solid;
   font-weight: 400;
   outline: 0;
   border-radius: 4px;
   cursor: pointer;
-  margin-right: $-m;
-  @include lightDark(color, #666, #AAA);
-  @include lightDark(border-color, #CCC, #666);
+  margin-right: vars.$m;
+  @include mixins.lightDark(color, #666, #AAA);
+  @include mixins.lightDark(border-color, #CCC, #666);
   &:hover, &:focus, &:active {
-    @include lightDark(color, #444, #BBB);
+    @include mixins.lightDark(color, #444, #BBB);
     border: 1px solid #CCC;
     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
     background-color: #F2F2F2;
-    @include lightDark(background-color, #f8f8f8, #444);
+    @include mixins.lightDark(background-color, #f8f8f8, #444);
     filter: none;
   }
   &:active {
diff --git a/resources/sass/_header.scss b/resources/sass/_header.scss
index d72b66729..3ec7275a4 100644
--- a/resources/sass/_header.scss
+++ b/resources/sass/_header.scss
@@ -1,3 +1,6 @@
+@use "mixins";
+@use "vars";
+
 /**
  * Includes the main navigation header and the faded toolbar.
  */
@@ -6,7 +9,7 @@ header.grid {
   grid-template-columns: minmax(max-content, 2fr) 1fr minmax(max-content, 2fr);
 }
 
-@include smaller-than($l) {
+@include mixins.smaller-than(vars.$bp-l) {
   header.grid {
     grid-template-columns: 1fr;
     grid-row-gap: 0;
@@ -20,8 +23,8 @@ header {
   top: 0;
   color: rgb(250, 250, 250);
   border-bottom: 1px solid #DDD;
-  box-shadow: $bs-card;
-  @include lightDark(border-bottom-color, #DDD, #000);
+  box-shadow: vars.$bs-card;
+  @include mixins.lightDark(border-bottom-color, #DDD, #000);
   .header-links {
     display: flex;
     align-items: center;
@@ -33,7 +36,7 @@ header {
   }
   .links a {
     display: inline-block;
-    padding: 10px $-m;
+    padding: 10px vars.$m;
     color: #FFF;
     border-radius: 3px;
   }
@@ -42,7 +45,7 @@ header {
     background-color: rgba(255, 255, 255, .15);
   }
   .dropdown-container {
-    padding-inline-start: $-m;
+    padding-inline-start: vars.$m;
     padding-inline-end: 0;
   }
   .avatar, .user-name {
@@ -58,12 +61,12 @@ header {
     display: inline-flex;
     align-items: center;
     cursor: pointer;
-    padding: $-s;
-    margin: 0 (-$-s);
+    padding: vars.$s;
+    margin: 0 (-(vars.$s));
     border-radius: 3px;
-    gap: $-xs;
+    gap: vars.$xs;
     > span {
-      padding-inline-start: $-xs;
+      padding-inline-start: vars.$xs;
       display: inline-block;
       line-height: 1;
     }
@@ -75,8 +78,8 @@ header {
     &:hover {
       background-color: rgba(255, 255, 255, 0.15);
     }
-    @include between($l, $xl) {
-      padding-inline-start: $-xs;
+    @include mixins.between(vars.$bp-l, vars.$bp-xl) {
+      padding-inline-start: vars.$xs;
       .name {
         display: none;
       }
@@ -98,7 +101,7 @@ header .search-box {
     color: #EEE;
     z-index: 2;
     height: auto;
-    padding: $-xs*1.5;
+    padding: vars.$xs*1.5;
     padding-inline-start: 40px;
     &:focus {
       outline: none;
@@ -109,7 +112,7 @@ header .search-box {
     color: #FFF;
     opacity: 0.6;
   }
-  @include between($l, $xl) {
+  @include mixins.between(vars.$bp-l, vars.$bp-xl) {
     max-width: 200px;
   }
   &:focus-within #header-search-box-button {
@@ -122,7 +125,7 @@ header .search-box {
   top: 10px;
   color: #FFF;
   opacity: 0.6;
-  @include lightDark(color, rgba(255, 255, 255, 0.8), #AAA);
+  @include mixins.lightDark(color, rgba(255, 255, 255, 0.8), #AAA);
   svg {
     margin-inline-end: 0;
   }
@@ -131,15 +134,15 @@ header .search-box {
 .global-search-suggestions {
   display: none;
   position: absolute;
-  top: -$-s;
+  top: -(vars.$s);
   left: 0;
   right: 0;
   z-index: -1;
-  margin-left: -$-xxl;
-  margin-right: -$-xxl;
+  margin-left: -(vars.$xxl);
+  margin-right: -(vars.$xxl);
   padding-top: 56px;
   border-radius: 3px;
-  box-shadow: $bs-hover;
+  box-shadow: vars.$bs-hover;
   transform-origin: top center;
   opacity: .5;
   transform: scale(0.9);
@@ -166,19 +169,19 @@ header .search-box.search-active:focus-within {
     display: block;
   }
   input {
-    @include lightDark(background-color, #EEE, #333);
-    @include lightDark(border-color, #DDD, #111);
+    @include mixins.lightDark(background-color, #EEE, #333);
+    @include mixins.lightDark(border-color, #DDD, #111);
   }
   #header-search-box-button, input {
-    @include lightDark(color, #444, #AAA);
+    @include mixins.lightDark(color, #444, #AAA);
   }
 }
 
 .logo {
   display: inline-flex;
-  padding: ($-s - 6px) $-s;
-  margin: 6px (-$-s);
-  gap: $-s;
+  padding: (vars.$s - 6px) vars.$s;
+  margin: 6px (-(vars.$s));
+  gap: vars.$s;
   align-items: center;
   border-radius: 4px;
   &:hover {
@@ -204,7 +207,7 @@ header .search-box.search-active:focus-within {
   font-size: 2em;
   border: 2px solid rgba(255, 255, 255, 0.8);
   border-radius: 4px;
-  padding: 0 $-xs;
+  padding: 0 vars.$xs;
   line-height: 1;
   cursor: pointer;
   user-select: none;
@@ -215,18 +218,18 @@ header .search-box.search-active:focus-within {
 }
 
 
-@include smaller-than($l) {
+@include mixins.smaller-than(vars.$bp-l) {
   header .header-links {
-    @include lightDark(background-color, #fff, #333);
+    @include mixins.lightDark(background-color, #fff, #333);
     display: none;
     z-index: 10;
-    inset-inline-end: $-m;
+    inset-inline-end: vars.$m;
     border-radius: 4px;
     overflow: hidden;
     position: absolute;
-    box-shadow: $bs-hover;
-    margin-top: $-m;
-    padding: $-xs 0;
+    box-shadow: vars.$bs-hover;
+    margin-top: vars.$m;
+    padding: vars.$xs 0;
     &.show {
       display: block;
     }
@@ -235,14 +238,14 @@ header .search-box.search-active:focus-within {
     text-align: start;
     display: grid;
     align-items: center;
-    padding: 8px $-m;
-    gap: $-m;
-    color: $text-dark;
+    padding: 8px vars.$m;
+    gap: vars.$m;
+    color: vars.$text-dark;
     grid-template-columns: 16px auto;
     line-height: 1.4;
-    @include lightDark(color, $text-dark, #eee);
+    @include mixins.lightDark(color, vars.$text-dark, #eee);
     svg {
-      margin-inline-end: $-s;
+      margin-inline-end: vars.$s;
       width: 16px;
     }
     &:hover {
@@ -251,7 +254,7 @@ header .search-box.search-active:focus-within {
       text-decoration: none;
     }
     &:focus {
-      @include lightDark(background-color, #eee, #333);
+      @include mixins.lightDark(background-color, #eee, #333);
       outline-color: var(--color-primary);
       color: var(--color-primary);
     }
@@ -280,19 +283,19 @@ header .search-box.search-active:focus-within {
   z-index: 5;
   background-color: #FFF;
   border-bottom: 1px solid #DDD;
-  @include lightDark(border-bottom-color, #DDD, #333);
-  box-shadow: $bs-card;
+  @include mixins.lightDark(border-bottom-color, #DDD, #333);
+  box-shadow: vars.$bs-card;
 }
 .tri-layout-mobile-tab {
   text-align: center;
   border-bottom: 3px solid #BBB;
   cursor: pointer;
   margin: 0;
-  @include lightDark(background-color, #FFF, #222);
-  @include lightDark(border-bottom-color, #BBB, #333);
+  @include mixins.lightDark(background-color, #FFF, #222);
+  @include mixins.lightDark(border-bottom-color, #BBB, #333);
   &:first-child {
     border-inline-end: 1px solid #DDD;
-    @include lightDark(border-inline-end-color, #DDD, #000);
+    @include mixins.lightDark(border-inline-end-color, #DDD, #000);
   }
   &[aria-selected="true"] {
     border-bottom-color: currentColor !important;
@@ -308,8 +311,8 @@ header .search-box.search-active:focus-within {
   opacity: 0.7;
   .icon-list-item {
     width: auto;
-    padding-top: $-xs;
-    padding-bottom: $-xs;
+    padding-top: vars.$xs;
+    padding-bottom: vars.$xs;
   }
   .separator {
     display: inline-block;
@@ -326,9 +329,9 @@ header .search-box.search-active:focus-within {
   }
 }
 
-@include smaller-than($l) {
+@include mixins.smaller-than(vars.$bp-l) {
   .breadcrumbs .icon-list-item {
-    padding: $-xs;
+    padding: vars.$xs;
     > span + span {
       display: none;
     }
@@ -355,5 +358,5 @@ header .search-box.search-active:focus-within {
 
 .faded span.faded-text {
   display: inline-block;
-  padding: $-s;
+  padding: vars.$s;
 }
\ No newline at end of file
diff --git a/resources/sass/_html.scss b/resources/sass/_html.scss
index 1d5defa97..edaff0810 100644
--- a/resources/sass/_html.scss
+++ b/resources/sass/_html.scss
@@ -1,3 +1,6 @@
+@use "mixins";
+@use "vars";
+
 * {
   box-sizing: border-box;
   outline-color: var(--color-primary);
@@ -21,9 +24,9 @@ html {
 }
 
 body {
-  font-size: $fs-m;
+  font-size: vars.$fs-m;
   line-height: 1.6;
-  @include lightDark(color, #444, #AAA);
+  @include mixins.lightDark(color, #444, #AAA);
   -webkit-font-smoothing: antialiased;
   height: 100%;
   display: flex;
diff --git a/resources/sass/_layout.scss b/resources/sass/_layout.scss
index 6c78419d8..8175db948 100644
--- a/resources/sass/_layout.scss
+++ b/resources/sass/_layout.scss
@@ -1,13 +1,16 @@
+@use "mixins";
+@use "vars";
+
 
 /**
  * Generic content container
  */
 .container {
-  max-width: $xxl;
+  max-width: vars.$bp-xxl;
   margin-inline-start: auto;
   margin-inline-end: auto;
-  padding-inline-start: $-m;
-  padding-inline-end: $-m;
+  padding-inline-start: vars.$m;
+  padding-inline-end: vars.$m;
   &.medium {
     max-width: 1100px;
   }
@@ -24,8 +27,8 @@
  */
 .grid {
   display: grid;
-  grid-column-gap: $-l;
-  grid-row-gap: $-l;
+  grid-column-gap: vars.$l;
+  grid-row-gap: vars.$l;
   > * {
     min-width: 0;
   }
@@ -42,15 +45,15 @@
     grid-template-columns: 1fr 3fr;
   }
   &.gap-y-xs {
-    grid-row-gap: $-xs;
+    grid-row-gap: vars.$xs;
   }
   &.gap-xl {
-    grid-column-gap: $-xl;
-    grid-row-gap: $-xl;
+    grid-column-gap: vars.$xl;
+    grid-row-gap: vars.$xl;
   }
   &.gap-xxl {
-    grid-column-gap: $-xxl;
-    grid-row-gap: $-xxl;
+    grid-column-gap: vars.$xxl;
+    grid-row-gap: vars.$xxl;
   }
   &.v-center {
     align-items: center;
@@ -67,7 +70,7 @@
   }
 }
 
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
   .grid.third:not(.no-break) {
     grid-template-columns: 1fr 1fr;
   }
@@ -78,8 +81,8 @@
     grid-template-columns: 1fr 1fr;
   }
   .grid.gap-xl {
-    grid-column-gap: $-m;
-    grid-row-gap: $-m;
+    grid-column-gap: vars.$m;
+    grid-row-gap: vars.$m;
   }
   .grid.right-focus.reverse-collapse > *:nth-child(2) {
     order: 0;
@@ -89,13 +92,13 @@
   }
 }
 
-@include smaller-than($s) {
+@include mixins.smaller-than(vars.$bp-s) {
   .grid.third:not(.no-break) {
     grid-template-columns: 1fr;
   }
 }
 
-@include smaller-than($xs) {
+@include mixins.smaller-than(vars.$bp-xs) {
   .grid.half.collapse-xs {
     grid-template-columns: 1fr;
   }
@@ -287,19 +290,19 @@ body.flexbox {
 
 .sticky-top-m {
   position: sticky;
-  top: $-m;
+  top: vars.$m;
 }
 
 /**
  * Visibility
  */
-@each $sizeLetter, $size in $screen-sizes {
-  @include smaller-than($size) {
+@each $sizeLetter, $size in vars.$screen-sizes {
+  @include mixins.smaller-than($size) {
     .hide-under-#{$sizeLetter} {
       display: none !important;
     }
   }
-  @include larger-than($size) {
+  @include mixins.larger-than($size) {
     .hide-over-#{$sizeLetter} {
       display: none !important;
     }
@@ -333,7 +336,7 @@ body.flexbox {
   columns: 2;
 }
 
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
   .dual-column-content {
     columns: 1;
   }
@@ -357,11 +360,11 @@ body.flexbox {
  */
 .tri-layout-container {
   display: grid;
-  margin-inline-start: $-xl;
-  margin-inline-end: $-xl;
+  margin-inline-start: vars.$xl;
+  margin-inline-end: vars.$xl;
   grid-template-columns: 1fr 4fr 1fr;
   grid-template-areas: "a b c";
-  grid-column-gap: $-xl;
+  grid-column-gap: vars.$xl;
   position: relative;
 }
 .tri-layout-sides {
@@ -379,7 +382,7 @@ body.flexbox {
 }
 .tri-layout-middle {
   grid-area: b;
-  padding-top: $-m;
+  padding-top: vars.$m;
   min-width: 0;
   z-index: 5;
 }
@@ -392,9 +395,9 @@ body.flexbox {
   min-width: 0;
 }
 
-@include larger-than($xxl) {
+@include mixins.larger-than(vars.$bp-xxl) {
   .tri-layout-left-contents, .tri-layout-right-contents {
-    padding: $-xl $-m;
+    padding: vars.$xl vars.$m;
     position: sticky;
     top: 0;
     max-height: 100vh;
@@ -413,22 +416,22 @@ body.flexbox {
     margin: 0 auto;
   }
 }
-@include between($xxl, $xxxl) {
+@include mixins.between(vars.$bp-xxl, vars.$bp-xxxl) {
   .tri-layout-sides-content, .tri-layout-container {
-    grid-template-columns: 1fr calc(940px + (2 * $-m)) 1fr;
+    grid-template-columns: 1fr calc(940px + (2 * vars.$m)) 1fr;
   }
   .tri-layout-container {
-    grid-column-gap: $-s;
-    margin-inline-start: $-m;
-    margin-inline-end: $-m;
+    grid-column-gap: vars.$s;
+    margin-inline-start: vars.$m;
+    margin-inline-end: vars.$m;
   }
 }
-@include smaller-than($xxl) {
+@include mixins.smaller-than(vars.$bp-xxl) {
   .tri-layout-container {
     grid-template-areas:  "a b b";
     grid-template-columns: 1fr 3fr;
     grid-template-rows: min-content min-content 1fr;
-    padding-inline-end: $-l;
+    padding-inline-end: vars.$l;
   }
   .tri-layout-sides {
     grid-column-start: a;
@@ -438,7 +441,7 @@ body.flexbox {
     display: block;
   }
 }
-@include between($l, $xxl) {
+@include mixins.between(vars.$bp-l, vars.$bp-xxl) {
   .tri-layout-sides-content {
     position: sticky;
     top: 0;
@@ -454,12 +457,12 @@ body.flexbox {
     }
   }
 }
-@include larger-than($l) {
+@include mixins.larger-than(vars.$bp-l) {
   .tri-layout-mobile-tabs {
     display: none;
   }
   .tri-layout-left-contents > *, .tri-layout-right-contents > * {
-    @include lightDark(opacity, 0.6, 0.75);
+    @include mixins.lightDark(opacity, 0.6, 0.75);
     transition: opacity ease-in-out 120ms;
     &:hover, &:focus-within {
       opacity: 1 !important;
@@ -469,16 +472,16 @@ body.flexbox {
     }
   }
 }
-@include smaller-than($l) {
+@include mixins.smaller-than(vars.$bp-l) {
   .tri-layout-container {
     grid-template-areas:  none;
     grid-template-columns: 1fr;
     grid-column-gap: 0;
-    padding-inline-end: $-xs;
-    padding-inline-start: $-xs;
+    padding-inline-end: vars.$xs;
+    padding-inline-start: vars.$xs;
     .tri-layout-sides {
-      padding-inline-start: $-m;
-      padding-inline-end: $-m;
+      padding-inline-start: vars.$m;
+      padding-inline-end: vars.$m;
       grid-column: 1/1;
     }
     .tri-layout-left > *, .tri-layout-right > * {
@@ -512,7 +515,7 @@ body.flexbox {
   }
 }
 
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
   .tri-layout-container {
     margin-inline-start: 0;
     margin-inline-end: 0;
diff --git a/resources/sass/_lists.scss b/resources/sass/_lists.scss
index 00aa04f48..fd76f498e 100644
--- a/resources/sass/_lists.scss
+++ b/resources/sass/_lists.scss
@@ -1,3 +1,6 @@
+@use "mixins";
+@use "vars";
+
 
 .book-contents .entity-list-item {
   .icon {
@@ -6,7 +9,7 @@
     justify-self: stretch;
     align-self: stretch;
     height: auto;
-    margin-inline-end: $-xs;
+    margin-inline-end: vars.$xs;
   }
   .icon:after {
     opacity: 0.5;
@@ -25,7 +28,7 @@
 
 .entity-list-item + .chapter-expansion {
   display: flex;
-  padding: 0 $-m $-m $-m;
+  padding: 0 vars.$m vars.$m vars.$m;
   align-items: center;
   border: 0;
   width: 100%;
@@ -58,7 +61,7 @@
   }
   .chapter-contents-toggle {
     border-radius: 0 4px 4px 0;
-    padding: $-xs ($-m + $-xxs);
+    padding: vars.$xs (vars.$m + vars.$xxs);
     width: 100%;
     text-align: start;
   }
@@ -86,20 +89,20 @@
 }
 
 .sidebar-page-nav {
-  $nav-indent: $-m;
+  $nav-indent: vars.$m;
   list-style: none;
-  @include margin($-s, 0, $-m, $-xs);
+  @include mixins.margin(vars.$s, 0, vars.$m, vars.$xs);
   position: relative;
   &:after {
     content: '';
     display: block;
     position: absolute;
     left: 0;
-    @include rtl {
+    @include mixins.rtl {
       left: auto;
       right: 0;
     }
-    @include lightDark(background-color, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
+    @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.2));
     width: 2px;
     top: 5px;
     bottom: 5px;
@@ -132,7 +135,7 @@
     font-weight: bold;
   }
   li:not(.current-heading) .sidebar-page-nav-bullet {
-    @include lightDark(background-color, #BBB, #666, true);
+    @include mixins.lightDark(background-color, #BBB, #666, true);
   }
   .sidebar-page-nav-bullet {
     width: 6px;
@@ -142,9 +145,9 @@
     top: 30%;
     border-radius: 50%;
     box-shadow: 0 0 0 6px #F2F2F2;
-    @include lightDark(box-shadow, 0 0 0 6px #F2F2F2, 0 0 0 6px #111);
+    @include mixins.lightDark(box-shadow, 0 0 0 6px #F2F2F2, 0 0 0 6px #111);
     z-index: 1;
-    @include rtl {
+    @include mixins.rtl {
       left: auto;
       right: -2px;
     }
@@ -154,7 +157,7 @@
 // Sidebar list
 .book-tree .sidebar-page-list  {
   list-style: none;
-  @include margin($-xs, -$-s, 0, -$-s);
+  @include mixins.margin(vars.$xs, -(vars.$s), 0, -(vars.$s));
   padding-inline-start: 0;
   padding-inline-end: 0;
 
@@ -172,22 +175,22 @@
     padding-inline-end: 0;
     .content {
       width: 100%;
-      padding-top: $-xs;
-      padding-bottom: $-xs;
+      padding-top: vars.$xs;
+      padding-bottom: vars.$xs;
       max-width: calc(100% - 20px);
     }
   }
   .entity-list-item.selected {
-    @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+    @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
   }
   .entity-list-item.no-hover {
-    margin-top: -$-xs;
+    margin-top: -(vars.$xs);
     padding-inline-end: 0;
   }
   .entity-list-item-name {
     font-size: 1em;
     margin: 0;
-    margin-inline-end: $-m;
+    margin-inline-end: vars.$m;
   }
   .chapter-child-menu {
     font-size: .8rem;
@@ -198,13 +201,13 @@
     display: block;
     width: 100%;
     text-align: start;
-    padding: $-xxs $-s ($-xxs * 2) $-s;
+    padding: vars.$xxs vars.$s (vars.$xxs * 2) vars.$s;
     border-radius: 0 3px 3px 0;
     line-height: 1;
-    margin-top: -$-xxs;
-    margin-bottom: -$-xxs;
+    margin-top: -(vars.$xxs);
+    margin-bottom: -(vars.$xxs);
     &:hover {
-      @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+      @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
     }
   }
   .entity-list-item .icon {
@@ -236,8 +239,8 @@
   list-style: none;
 }
 .sort-box {
-  margin-bottom: $-m;
-  padding: $-m $-xl;
+  margin-bottom: vars.$m;
+  padding: vars.$m vars.$xl;
   position: relative;
   &::before {
     pointer-events: none;
@@ -279,14 +282,14 @@
     margin-inline-start: 0;
   }
   .sortable-page-sublist {
-    margin-bottom: $-m;
+    margin-bottom: vars.$m;
     margin-top: 0;
-    padding-inline-start: $-m;
+    padding-inline-start: vars.$m;
   }
   li {
-    @include lightDark(background-color, #FFF, #222);
+    @include mixins.lightDark(background-color, #FFF, #222);
     border: 1px solid;
-    @include lightDark(border-color, #DDD, #666);
+    @include mixins.lightDark(border-color, #DDD, #666);
     margin-top: -1px;
     min-height: 38px;
   }
@@ -294,7 +297,7 @@
     border-inline-start: 2px solid currentColor;
   }
   li:first-child {
-    margin-top: $-xs;
+    margin-top: vars.$xs;
   }
 }
 .sortable-page-list li.placeholder {
@@ -335,21 +338,21 @@ details.sort-box[open] summary .caret-container svg {
 }
 
 .activity-list-item {
-  padding: $-s 0;
+  padding: vars.$s 0;
   display: grid;
   grid-template-columns: min-content 1fr;
-  grid-column-gap: $-m;
+  grid-column-gap: vars.$m;
   font-size: 0.9em;
 }
 .card .activity-list-item {
-  padding-block: $-s;
+  padding-block: vars.$s;
 }
 
 .user-list-item {
   display: inline-grid;
-  padding: $-s;
+  padding: vars.$s;
   grid-template-columns: min-content 1fr;
-  grid-column-gap: $-m;
+  grid-column-gap: vars.$m;
   font-size: 0.9em;
   align-items: center;
   > div:first-child {
@@ -360,7 +363,7 @@ details.sort-box[open] summary .caret-container svg {
 ul.pagination {
   display: inline-flex;
   list-style: none;
-  margin: $-m 0;
+  margin: vars.$m 0;
   padding-inline-start: 1px;
   li:first-child {
     a, span {
@@ -374,19 +377,19 @@ ul.pagination {
   }
   a, span {
     display: block;
-    padding: $-xxs $-s;
+    padding: vars.$xxs vars.$s;
     border: 1px solid #CCC;
     margin-inline-start: -1px;
     user-select: none;
-    @include lightDark(color, #555, #eee);
-    @include lightDark(border-color, #ccc, #666);
+    @include mixins.lightDark(color, #555, #eee);
+    @include mixins.lightDark(border-color, #ccc, #666);
   }
   li.disabled {
     cursor: not-allowed;
   }
   li.active span {
-    @include lightDark(color, #111, #eee);
-    @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5));
+    @include mixins.lightDark(color, #111, #eee);
+    @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.5));
   }
 }
 
@@ -395,7 +398,7 @@ ul.pagination {
 }
 
 .entity-list, .icon-list {
-  margin: 0 (-$-m);
+  margin: 0 (-(vars.$m));
   h4 {
     margin: 0;
   }
@@ -405,7 +408,7 @@ ul.pagination {
   .text-small.text-muted {
     color: #AAA;
     font-size: 0.75em;
-    margin-top: $-xs;
+    margin-top: vars.$xs;
   }
   .text-muted p.text-muted {
     margin-top: 0;
@@ -420,7 +423,7 @@ ul.pagination {
 }
 
 .icon-list hr {
-  margin: $-s $-m;
+  margin: vars.$s vars.$m;
   max-width: 140px;
   opacity: 0.25;
   height: 1.1px;
@@ -431,10 +434,10 @@ ul.pagination {
 }
 
 .entity-list-item, .icon-list-item {
-  padding: $-s $-m;
+  padding: vars.$s vars.$m;
   display: flex;
   align-items: center;
-  gap: $-m;
+  gap: vars.$m;
   background-color: transparent;
   border: 0;
   width: 100%;
@@ -458,7 +461,7 @@ ul.pagination {
     cursor: pointer;
   }
   &:not(.no-hover):hover {
-    @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+    @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
     text-decoration: none;
     border-radius: 4px;
   }
@@ -466,7 +469,7 @@ ul.pagination {
     background-color: transparent;
   }
   &:focus {
-    @include lightDark(background-color, #eee, #222);
+    @include mixins.lightDark(background-color, #eee, #222);
     outline: 1px dotted #666;
     outline-offset: -2px;
   }
@@ -493,7 +496,7 @@ ul.pagination {
 .split-icon-list-item {
   display: flex;
   align-items: center;
-  gap: $-m;
+  gap: vars.$m;
   background-color: transparent;
   border: 0;
   width: 100%;
@@ -501,10 +504,10 @@ ul.pagination {
   word-break: break-word;
   border-radius: 4px;
   > a {
-    padding: $-s $-m;
+    padding: vars.$s vars.$m;
     display: flex;
     align-items: center;
-    gap: $-m;
+    gap: vars.$m;
     flex: 1;
   }
   > a:hover {
@@ -515,7 +518,7 @@ ul.pagination {
     flex: none;
   }
   &:hover {
-    @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+    @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
   }
 }
 
@@ -532,21 +535,21 @@ ul.pagination {
   visibility: visible;
 }
 .icon-list-item-dropdown-toggle {
-  padding: $-xs;
+  padding: vars.$xs;
   display: flex;
   align-items: center;
   cursor: pointer;
-  @include lightDark(color, #888, #999);
+  @include mixins.lightDark(color, #888, #999);
   svg {
     margin: 0;
   }
   &:hover {
-    @include lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
+    @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.06), rgba(255, 255, 255, 0.06));
   }
 }
 
 .card .entity-list-item:not(.no-hover, .book-contents .entity-list-item):hover {
-  @include lightDark(background-color, #F2F2F2, #2d2d2d);
+  @include mixins.lightDark(background-color, #F2F2F2, #2d2d2d);
   border-radius: 0;
 }
 .card .entity-list-item .entity-list-item:hover {
@@ -554,10 +557,10 @@ ul.pagination {
 }
 
 .entity-list-item-children {
-  padding: $-m $-l;
+  padding: vars.$m vars.$l;
   > div {
     overflow: hidden;
-    padding: 0 0 $-xs 0;
+    padding: 0 0 vars.$xs 0;
   }
   .entity-chip {
     text-overflow: ellipsis;
@@ -568,7 +571,7 @@ ul.pagination {
     white-space: nowrap;
   }
   > .entity-list > .entity-list-item:last-child {
-    margin-bottom: -$-xs;
+    margin-bottom: -(vars.$xs);
   }
 }
 
@@ -580,22 +583,22 @@ ul.pagination {
   background-position: 50% 50%;
   border-radius: 3px;
   position: relative;
-  margin-inline-end: $-l;
+  margin-inline-end: vars.$l;
 
   &.entity-list-item-image-wide {
     width: 220px;
   }
 
   .svg-icon {
-    @include lightDark(color, #fff, rgba(255, 255, 255, 0.6));
+    @include mixins.lightDark(color, #fff, rgba(255, 255, 255, 0.6));
     font-size: 1.66rem;
     margin-inline-end: 0;
     position: absolute;
-    bottom: $-xs;
-    left: $-xs;
+    bottom: vars.$xs;
+    left: vars.$xs;
   }
 
-  @include smaller-than($m) {
+  @include mixins.smaller-than(vars.$bp-m) {
     width: 80px;
   }
 }
@@ -605,7 +608,7 @@ ul.pagination {
 }
 
 .entity-list.compact {
-  font-size: 0.6 * $fs-m;
+  font-size: 0.6 * vars.$fs-m;
   h4, a {
     line-height: 1.2;
   }
@@ -613,8 +616,8 @@ ul.pagination {
     display: none;
   }
   .entity-list-item p {
-    font-size: $fs-m * 0.8;
-    padding-top: $-xs;
+    font-size: vars.$fs-m * 0.8;
+    padding-top: vars.$xs;
   }
   .entity-list-item p:empty {
     padding-top: 0;
@@ -624,12 +627,12 @@ ul.pagination {
   }
   > p.empty-text {
     display: block;
-    font-size: $fs-m;
+    font-size: vars.$fs-m;
   }
   hr {
     margin: 0;
   }
-  @include smaller-than($m) {
+  @include mixins.smaller-than(vars.$bp-m) {
     h4 {
       font-size: 1.666em;
     }
@@ -660,13 +663,13 @@ ul.pagination {
   top: 0;
   list-style: none;
   inset-inline-end: 0;
-  margin: $-m 0;
-  @include lightDark(background-color, #fff, #333);
+  margin: vars.$m 0;
+  @include mixins.lightDark(background-color, #fff, #333);
   box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.18);
   border-radius: 3px;
   min-width: 180px;
-  padding: $-xs 0;
-  @include lightDark(color, #555, #eee);
+  padding: vars.$xs 0;
+  @include mixins.lightDark(color, #555, #eee);
   fill: currentColor;
   text-align: start !important;
   max-height: 500px;
@@ -697,11 +700,11 @@ ul.pagination {
     border-bottom: 1px solid #DDD;
   }
   li hr {
-    margin: $-xs 0;
+    margin: vars.$xs 0;
   }
   .icon-item, .text-item, .label-item {
-    padding: 8px $-m;
-    @include lightDark(color, #555, #eee);
+    padding: 8px vars.$m;
+    @include mixins.lightDark(color, #555, #eee);
     fill: currentColor;
     white-space: nowrap;
     line-height: 1.4;
@@ -721,7 +724,7 @@ ul.pagination {
       outline-offset: -2px;
     }
     svg {
-      margin-inline-end: $-s;
+      margin-inline-end: vars.$s;
       display: inline-block;
       width: 16px;
     }
@@ -733,7 +736,7 @@ ul.pagination {
     display: grid;
     align-items: center;
     grid-template-columns: auto min-content;
-    gap: $-m;
+    gap: vars.$m;
   }
   .label-item > *:nth-child(2) {
     opacity: 0.7;
@@ -745,7 +748,7 @@ ul.pagination {
     display: grid;
     align-items: start;
     grid-template-columns: 16px auto;
-    gap: $-m;
+    gap: vars.$m;
     svg {
       margin-inline-end: 0;
       margin-block-start: 1px;
@@ -757,7 +760,7 @@ ul.pagination {
 // being cut by scrollable container.
 .tri-layout-right .dropdown-menu,
 .tri-layout-left .dropdown-menu {
-  inset-inline-end: $-xs;
+  inset-inline-end: vars.$xs;
 }
 
 // Books grid view
@@ -781,7 +784,7 @@ ul.pagination {
 .featured-image-container-wrap {
   position: relative;
   .svg-icon {
-    @include lightDark(color, #fff, rgba(255, 255, 255, 0.6));
+    @include mixins.lightDark(color, #fff, rgba(255, 255, 255, 0.6));
     font-size: 2rem;
     margin-inline-end: 0;
     position: absolute;
@@ -800,30 +803,30 @@ ul.pagination {
   background: transparent;
   border: none;
   color: currentColor;
-  padding: $-m 0;
+  padding: vars.$m 0;
 }
 
 .active-link-list {
   a {
     display: inline-block;
-    padding: $-s;
+    padding: vars.$s;
   }
   a:not(.active) {
-    @include lightDark(color, #444, #888);
+    @include mixins.lightDark(color, #444, #888);
   }
   a:hover {
-    @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
+    @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
     border-radius: 4px;
     text-decoration: none;
   }
   &.in-sidebar {
     a {
       display: block;
-      margin-bottom: $-xs;
+      margin-bottom: vars.$xs;
     }
     a.active {
       border-radius: 4px;
-      @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
+      @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
     }
   }
 }
@@ -833,7 +836,7 @@ ul.pagination {
   line-height: 1.2;
   margin: 0.6em 0;
   align-content: start;
-  gap: $-s;
+  gap: vars.$s;
   a {
     line-height: 1.2;
   }
diff --git a/resources/sass/_pages.scss b/resources/sass/_pages.scss
index 426f7961c..17bcfcfbf 100755
--- a/resources/sass/_pages.scss
+++ b/resources/sass/_pages.scss
@@ -1,3 +1,6 @@
+@use "mixins";
+@use "vars";
+
 .page-editor {
   display: flex;
   flex-direction: column;
@@ -22,8 +25,8 @@
 .page-editor-page-area {
   width: 100%;
   border-radius: 8px;
-  box-shadow: $bs-card;
-  @include lightDark(background-color, #FFF, #333)
+  box-shadow: vars.$bs-card;
+  @include mixins.lightDark(background-color, #FFF, #333)
 }
 
 .page-edit-toolbar {
@@ -34,7 +37,7 @@
   align-items: center;
 }
 
-@include larger-than($xxl) {
+@include mixins.larger-than(vars.$bp-xxl) {
   .page-editor-wysiwyg2024 .page-edit-toolbar,
   .page-editor-wysiwyg2024 .page-editor-page-area,
   .page-editor-wysiwyg .page-edit-toolbar,
@@ -48,7 +51,7 @@
   }
 }
 
-@include smaller-than($m) {
+@include mixins.smaller-than(vars.$bp-m) {
   .page-edit-toolbar {
     display: flex;
     flex-direction: row;
@@ -76,7 +79,7 @@
     position: relative;
     outline-offset: -1px;
     outline: 1px dashed var(--color-primary);
-    box-shadow: $bs-card;
+    box-shadow: vars.$bs-card;
     z-index: 50;
   }
 }
@@ -96,7 +99,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
   }
 }
 
-@include smaller-than($s) {
+@include mixins.smaller-than(vars.$bp-s) {
   .page-edit-toolbar {
     overflow-x: scroll;
     overflow-y: visible;
@@ -116,9 +119,9 @@ body.tox-fullscreen, body.markdown-fullscreen {
   width: 52px;
   height: 52px;
   font-size: 26px;
-  inset-inline-end: $-xs;
-  bottom: $-s;
-  box-shadow: $bs-hover;
+  inset-inline-end: vars.$xs;
+  bottom: vars.$s;
+  box-shadow: vars.$bs-hover;
   background-color: currentColor;
   text-align: center;
   svg {
@@ -150,10 +153,10 @@ body.tox-fullscreen, body.markdown-fullscreen {
 }
 .pointer {
   border: 1px solid #CCC;
-  @include lightDark(border-color, #ccc, #000);
+  @include mixins.lightDark(border-color, #ccc, #000);
   border-radius: 4px;
   box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.1);
-  @include lightDark(background-color, #fff, #333);
+  @include mixins.lightDark(background-color, #fff, #333);
   width: 275px;
 
   &.is-page-editable {
@@ -174,8 +177,8 @@ body.tox-fullscreen, body.markdown-fullscreen {
     border-right: 1px solid #CCC;
     border-bottom: 1px solid #CCC;
     z-index: 56;
-    @include lightDark(background-color, #fff, #333);
-    @include lightDark(border-color, #ccc, #000);
+    @include mixins.lightDark(background-color, #fff, #333);
+    @include mixins.lightDark(border-color, #ccc, #000);
   }
   input, button, a {
     position: relative;
@@ -188,14 +191,14 @@ body.tox-fullscreen, body.markdown-fullscreen {
   input {
     background-color: #FFF;
     border: 1px solid #DDD;
-    @include lightDark(border-color, #ddd, #000);
+    @include mixins.lightDark(border-color, #ddd, #000);
     color: #666;
     width: 160px;
     z-index: 40;
     padding: 5px 10px;
   }
   .text-button {
-    @include lightDark(color, #444, #AAA);
+    @include mixins.lightDark(color, #444, #AAA);
   }
   .input-group .button {
     line-height: 1;
@@ -210,22 +213,22 @@ body.tox-fullscreen, body.markdown-fullscreen {
     height: 1.2em;
   }
   .button {
-    @include lightDark(border-color, #ddd, #000);
+    @include mixins.lightDark(border-color, #ddd, #000);
   }
 }
 
 // Page editor sidebar toolbox
 .floating-toolbox {
-  @include lightDark(background-color, #FFF, #222);
+  @include mixins.lightDark(background-color, #FFF, #222);
   overflow: hidden;
   align-items: stretch;
   flex-direction: row;
   display: flex;
   max-height: 100%;
   border-radius: 8px;
-  box-shadow: $bs-card;
+  box-shadow: vars.$bs-card;
   margin-bottom: auto;
-  margin-inline-start: $-l;
+  margin-inline-start: vars.$l;
   position: relative;
   &.open {
     position: relative;
@@ -254,23 +257,23 @@ body.tox-fullscreen, body.markdown-fullscreen {
   }
   .tabs {
     border-inline-end: 1px solid #DDD;
-    @include lightDark(border-inline-end-color, #DDD, #000);
+    @include mixins.lightDark(border-inline-end-color, #DDD, #000);
     width: 40px;
     flex: 0 1 auto;
     margin-inline-end: -1px;
   }
   .tabs-inner {
-    @include lightDark(background-color, #FFFFFF, #222);
+    @include mixins.lightDark(background-color, #FFFFFF, #222);
   }
   .tabs svg {
     padding: 0;
     margin: 0;
   }
   .tabs-inner > button {
-    @include lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5));
+    @include mixins.lightDark(color, rgba(0, 0, 0, 0.7), rgba(255, 255, 255, 0.5));
     display: block;
     cursor: pointer;
-    padding: 10px $-xs;
+    padding: 10px vars.$xs;
     font-size: 18px;
     line-height: 1.6;
   }
@@ -295,8 +298,8 @@ body.tox-fullscreen, body.markdown-fullscreen {
   }
   h4 {
     font-size: 24px;
-    margin: $-m 0 0 0;
-    padding: 0 $-l $-s $-l;
+    margin: vars.$m 0 0 0;
+    padding: 0 vars.$l vars.$s vars.$l;
   }
   .tags input {
     max-width: 100%;
@@ -304,8 +307,8 @@ body.tox-fullscreen, body.markdown-fullscreen {
     min-width: 50px;
   }
   .tags td, .inline-start-table > div > div > div {
-    padding-inline-end: $-s;
-    padding-top: $-s;
+    padding-inline-end: vars.$s;
+    padding-top: vars.$s;
     position: relative;
   }
   .handle {
@@ -324,13 +327,13 @@ body.tox-fullscreen, body.markdown-fullscreen {
   }
 }
 
-@include smaller-than($xxl) {
+@include mixins.smaller-than(vars.$bp-xxl) {
   .floating-toolbox {
-    margin-inline-start: $-s;
+    margin-inline-start: vars.$s;
   }
 }
 
-@include smaller-than($s) {
+@include mixins.smaller-than(vars.$bp-s) {
   .page-editor-page-area-wrap {
     margin: 4px !important;
   }
@@ -429,7 +432,7 @@ body.tox-fullscreen, body.markdown-fullscreen {
   border-radius: 3px;
   position: relative;
   overflow: hidden;
-  padding: $-xs $-s;
+  padding: vars.$xs vars.$s;
   fill: currentColor;
   opacity: 0.85;
   transition: opacity ease-in-out 120ms;
diff --git a/resources/sass/_spacing.scss b/resources/sass/_spacing.scss
index 14f8918dc..6b5e2f837 100644
--- a/resources/sass/_spacing.scss
+++ b/resources/sass/_spacing.scss
@@ -1,8 +1,10 @@
+@use "vars";
+
 // Here we generate spacing utility classes for our sizes for all box sides and axis.
 // These will output to classes like .px-m (Padding on x-axis, medium size) or .mr-l (Margin right, large size)
 
 @mixin spacing($prop, $propLetter) {
-  @each $sizeLetter, $size in $spacing {
+  @each $sizeLetter, $size in vars.$spacing {
     .#{$propLetter}-#{$sizeLetter} {
       #{$prop}: $size !important;
     }
@@ -31,7 +33,7 @@
 @include spacing('margin', 'm');
 @include spacing('padding', 'p');
 
-@each $sizeLetter, $size in $spacing {
+@each $sizeLetter, $size in vars.$spacing {
   .gap-#{$sizeLetter} {
     gap: $size !important;
   }
diff --git a/resources/sass/_tables.scss b/resources/sass/_tables.scss
index a3da33621..16be32fb3 100644
--- a/resources/sass/_tables.scss
+++ b/resources/sass/_tables.scss
@@ -1,8 +1,11 @@
+@use "mixins";
+@use "vars";
+
 table {
   min-width: 100px;
   max-width: 100%;
   thead {
-    @include lightDark(background-color, #f8f8f8, #333);
+    @include mixins.lightDark(background-color, #f8f8f8, #333);
     font-weight: 500;
   }
   td, th {
@@ -27,7 +30,7 @@ table.table {
   th, td {
     text-align: start;
     border: none;
-    padding: $-s $-s;
+    padding: vars.$s vars.$s;
     vertical-align: middle;
     margin: 0;
     overflow: visible;
@@ -36,7 +39,7 @@ table.table {
     font-weight: bold;
   }
   tr:hover {
-    @include lightDark(background-color, #F2F2F2, #333);
+    @include mixins.lightDark(background-color, #F2F2F2, #333);
   }
   .text-right {
     text-align: end;
@@ -51,10 +54,10 @@ table.table {
     display: inline-block;
   }
   &.expand-to-padding {
-    margin-left: -$-s;
-    margin-right: -$-s;
-    width: calc(100% + (2*#{$-s}));
-    max-width: calc(100% + (2*#{$-s}));
+    margin-left: -(vars.$s);
+    margin-right: -(vars.$s);
+    width: calc(100% + (2*#{vars.$s}));
+    max-width: calc(100% + (2*#{vars.$s}));
   }
 }
 
@@ -66,10 +69,10 @@ table.no-style {
 }
 
 table.list-table {
-  margin: 0 (-$-xs);
+  margin: 0 (-(vars.$xs));
   td {
     border: 0;
     vertical-align: middle;
-    padding: $-xs;
+    padding: vars.$xs;
   }
 }
\ No newline at end of file
diff --git a/resources/sass/_text.scss b/resources/sass/_text.scss
index 56e66195c..04fd31e6d 100644
--- a/resources/sass/_text.scss
+++ b/resources/sass/_text.scss
@@ -1,3 +1,6 @@
+@use "mixins";
+@use "vars";
+
 /**
  * Fonts
  */
@@ -43,7 +46,7 @@ h1, h2, h3, h4, h5, h6 {
   position: relative;
   display: block;
   font-family: var(--font-heading, var(--font-body));
-  @include lightDark(color, #222, #BBB);
+  @include mixins.lightDark(color, #222, #BBB);
 }
 
 h5 {
@@ -56,7 +59,7 @@ h5, h6 {
   margin-bottom: 0.66em;
 }
 
-@include smaller-than($s) {
+@include mixins.smaller-than(vars.$bp-s) {
   h1 {
     font-size: 2.8275em;
   }
@@ -133,16 +136,16 @@ p, ul, ol, pre, table, blockquote {
 hr {
   border: 0;
   height: 1px;
-  @include lightDark(background, #eaeaea, #555);
-  margin-bottom: $-l;
+  @include mixins.lightDark(background, #eaeaea, #555);
+  margin-bottom: vars.$l;
   &.faded {
     background-image: linear-gradient(to right, #FFF, #e3e0e0 20%, #e3e0e0 80%, #FFF);
   }
   &.darker {
-    @include lightDark(background, #DDD, #666);
+    @include mixins.lightDark(background, #DDD, #666);
   }
   &.margin-top, &.even {
-    margin-top: $-l;
+    margin-top: vars.$l;
   }
 }
 
@@ -174,8 +177,8 @@ sub, .subscript {
 pre {
   font-size: 12px;
   border: 1px solid #DDD;
-  @include lightDark(background-color, #FFF, #2B2B2B);
-  @include lightDark(border-color, #DDD, #111);
+  @include mixins.lightDark(background-color, #FFF, #2B2B2B);
+  @include mixins.lightDark(border-color, #DDD, #111);
   border-radius: 4px;
   padding-inline-start: 26px;
   position: relative;
@@ -189,8 +192,8 @@ pre {
     width: 22.4px;
     inset-inline-start: 0;
     height: 100%;
-    @include lightDark(background-color, #f5f5f5, #313335);
-    @include lightDark(border-inline-end, 1px solid #DDD, none);
+    @include mixins.lightDark(background-color, #f5f5f5, #313335);
+    @include mixins.lightDark(border-inline-end, 1px solid #DDD, none);
   }
 }
 
@@ -208,16 +211,16 @@ blockquote {
   position: relative;
   border-left: 4px solid transparent;
   border-left-color: var(--color-primary);
-  @include lightDark(background-color, #f8f8f8, #333);
-  padding: $-s $-m $-s $-xl;
+  @include mixins.lightDark(background-color, #f8f8f8, #333);
+  padding: vars.$s vars.$m vars.$s vars.$xl;
   overflow: auto;
   &:before {
     content: "\201C";
     font-size: 2em;
     font-weight: bold;
     position: absolute;
-    top: $-s;
-    left: $-s;
+    top: vars.$s;
+    left: vars.$s;
     color: #777;
   }
 }
@@ -238,8 +241,8 @@ blockquote {
   font-size: 0.84em;
   border: 1px solid #DDD;
   border-radius: 3px;
-  @include lightDark(background-color, #f8f8f8, #2b2b2b);
-  @include lightDark(border-color, #DDD, #444);
+  @include mixins.lightDark(background-color, #f8f8f8, #2b2b2b);
+  @include mixins.lightDark(border-color, #DDD, #444);
 }
 
 code {
@@ -252,7 +255,7 @@ code {
 
 span.code {
   @extend .code-base;
-  padding: 1px $-xs;
+  padding: 1px vars.$xs;
 }
 
 pre code {
@@ -272,8 +275,8 @@ span.highlight {
  * Lists
  */
 ul, ol {
-  padding-left: $-m * 2.0;
-  padding-right: $-m * 2.0;
+  padding-left: vars.$m * 2.0;
+  padding-right: vars.$m * 2.0;
   display: flow-root;
   p {
     margin: 0;
@@ -300,8 +303,8 @@ li > ol, li > ul {
   margin-block-start: 0;
   padding-block-end: 0;
   padding-block-start: 0;
-  padding-left: $-m * 1.2;
-  padding-right: $-m * 1.2;
+  padding-left: vars.$m * 1.2;
+  padding-right: vars.$m * 1.2;
 }
 
 /**
@@ -312,17 +315,17 @@ li > ol, li > ul {
 li.checkbox-item, li.task-list-item {
   display: list-item;
   list-style: none;
-  margin-left: -($-m * 1.2);
-  margin-inline-start: -($-m * 1.2);
+  margin-left: -(vars.$m * 1.2);
+  margin-inline-start: -(vars.$m * 1.2);
   margin-inline-end: 0;
   input[type="checkbox"] {
-    margin-right: $-xs;
-    margin-inline-end: $-xs;
+    margin-right: vars.$xs;
+    margin-inline-end: vars.$xs;
     margin-inline-start: 0;
   }
   li.checkbox-item, li.task-list-item {
-    margin-left: $-xs;
-    margin-inline-start: $-xs;
+    margin-left: vars.$xs;
+    margin-inline-start: vars.$xs;
     margin-inline-end: 0;
   }
 }
@@ -344,8 +347,8 @@ li.checkbox-item, li.task-list-item {
   text-align: end;
 }
 
-@each $sizeLetter, $size in $screen-sizes {
-  @include larger-than($size) {
+@each $sizeLetter, $size in vars.$screen-sizes {
+  @include mixins.larger-than($size) {
     .text-#{$sizeLetter}-center {
       text-align: center;
     }
@@ -395,7 +398,7 @@ li.checkbox-item, li.task-list-item {
  * Grouping
  */
 .header-group {
-  margin: $-m 0;
+  margin: vars.$m 0;
   h1, h2, h3, h4, h5, h6 {
     margin: 0;
   }
@@ -403,7 +406,7 @@ li.checkbox-item, li.task-list-item {
 
 span.sep {
   color: #BBB;
-  padding: 0 $-xs;
+  padding: 0 vars.$xs;
 }
 
 .list > * {
@@ -419,7 +422,7 @@ span.sep {
   display: inline-block;
   position: relative;
   bottom: -0.105em;
-  margin-inline-end: $-xs;
+  margin-inline-end: vars.$xs;
   pointer-events: none;
   fill: currentColor;
 }
diff --git a/resources/sass/_tinymce.scss b/resources/sass/_tinymce.scss
index 129e47821..8cc96df41 100644
--- a/resources/sass/_tinymce.scss
+++ b/resources/sass/_tinymce.scss
@@ -1,3 +1,6 @@
+@use "mixins";
+@use "vars";
+
 
 // Custom full screen mode
 .tox.tox-fullscreen {
@@ -35,7 +38,7 @@
   padding: 1rem;
   top: 4px;
   font-style: italic;
-  @include lightDark(color, rgba(34,47,62,.5), rgba(155,155,155,.5))
+  @include mixins.lightDark(color, rgba(34,47,62,.5), rgba(155,155,155,.5))
 }
 
 // Default styles for our custom root nodes
@@ -74,23 +77,23 @@ body.page-content.mce-content-body  {
   pointer-events: none;
 }
 .page-content.mce-content-body details doc-root {
-  padding: $-s;
-  margin-left: (2px - $-s);
-  margin-right: (2px - $-s);
-  margin-bottom: (2px - $-s);
-  margin-top: (2px - $-s);
+  padding: vars.$s;
+  margin-left: (2px - vars.$s);
+  margin-right: (2px - vars.$s);
+  margin-bottom: (2px - vars.$s);
+  margin-top: (2px - vars.$s);
   overflow: hidden;
 }
 
 // Allow alignment to be reflected in media embed wrappers
 .page-content.mce-content-body .mce-preview-object.align-right {
   float: right !important;
-  margin: $-xs 0 $-xs $-s;
+  margin: vars.$xs 0 vars.$xs vars.$s;
 }
 
 .page-content.mce-content-body .mce-preview-object.align-left {
   float: left !important;
-  margin: $-xs $-m $-m 0;
+  margin: vars.$xs vars.$m vars.$m 0;
 }
 
 .page-content.mce-content-body .mce-preview-object.align-center {
diff --git a/resources/sass/_variables.scss b/resources/sass/_vars.scss
similarity index 85%
rename from resources/sass/_variables.scss
rename to resources/sass/_vars.scss
index 35586bf58..26539656e 100644
--- a/resources/sass/_variables.scss
+++ b/resources/sass/_vars.scss
@@ -2,30 +2,30 @@
 ///////////////
 
 // Screen breakpoints
-$xxxl: 1700px;
-$xxl: 1400px;
-$xl: 1100px;
-$l: 1000px;
-$m: 880px;
-$s: 600px;
-$xs: 400px;
-$xxs: 360px;
+$bp-xxxl: 1700px;
+$bp-xxl: 1400px;
+$bp-xl: 1100px;
+$bp-l: 1000px;
+$bp-m: 880px;
+$bp-s: 600px;
+$bp-xs: 400px;
+$bp-xxs: 360px;
 
 // List of screen sizes
-$screen-sizes: (('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl));
+$screen-sizes: (('xxs', $bp-xxs), ('xs', $bp-xs), ('s', $bp-s), ('m', $bp-m), ('l', $bp-l), ('xl', $bp-xl));
 
 // Spacing (Margins+Padding)
-$-xxxl: 64px;
-$-xxl: 48px;
-$-xl: 32px;
-$-l: 24px;
-$-m: 16px;
-$-s: 12px;
-$-xs: 6px;
-$-xxs: 3px;
+$xxxl: 64px;
+$xxl: 48px;
+$xl: 32px;
+$l: 24px;
+$m: 16px;
+$s: 12px;
+$xs: 6px;
+$xxs: 3px;
 
 // List of our spacing sizes
-$spacing: (('none', 0), ('xxs', $-xxs), ('xs', $-xs), ('s', $-s), ('m', $-m), ('l', $-l), ('xl', $-xl), ('xxl', $-xxl), ('auto', auto));
+$spacing: (('none', 0), ('xxs', $xxs), ('xs', $xs), ('s', $s), ('m', $m), ('l', $l), ('xl', $xl), ('xxl', $xxl), ('auto', auto));
 
 // Fonts
 $font-body: -apple-system, BlinkMacSystemFont,
diff --git a/resources/sass/export-styles.scss b/resources/sass/export-styles.scss
index cfa1ebdf8..8dd7be375 100644
--- a/resources/sass/export-styles.scss
+++ b/resources/sass/export-styles.scss
@@ -1,10 +1,11 @@
 @use "sass:math";
-@import "variables";
-@import "mixins";
-@import "html";
-@import "text";
-@import "tables";
-@import "content";
+
+@use "vars";
+@use "mixins";
+@use "html";
+@use "text";
+@use "tables";
+@use "content";
 
 html, body {
   background-color: #FFF;
diff --git a/resources/sass/styles.scss b/resources/sass/styles.scss
index 2106f86e6..c6642d0ca 100644
--- a/resources/sass/styles.scss
+++ b/resources/sass/styles.scss
@@ -1,31 +1,31 @@
-@use "sass:math";
+@use "sass:meta";
 
-@import "reset";
-@import "variables";
-@import "mixins";
-@import "spacing";
-@import "opacity";
-@import "html";
-@import "text";
-@import "colors";
-@import "layout";
-@import "blocks";
-@import "buttons";
-@import "tables";
-@import "forms";
-@import "animations";
-@import "tinymce";
-@import "editor";
-@import "codemirror";
-@import "components";
-@import "header";
-@import "footer";
-@import "lists";
-@import "pages";
-@import "content";
+@use "reset";
+@use "vars";
+@use "mixins";
+@use "spacing";
+@use "opacity";
+@use "html";
+@use "text";
+@use "colors";
+@use "layout";
+@use "blocks";
+@use "buttons";
+@use "tables";
+@use "forms";
+@use "animations";
+@use "tinymce";
+@use "editor";
+@use "codemirror";
+@use "components";
+@use "header";
+@use "footer";
+@use "lists";
+@use "pages";
+@use "content";
 
 @media print {
-  @import "print";
+  @include meta.load-css("print");
 }
 
 // Jquery Sortable Styles
@@ -41,7 +41,7 @@ body.dragging, body.dragging * {
 // User Avatar Images
 .avatar {
   border-radius: 100%;
-  @include lightDark(background-color, #eee, #000);
+  @include mixins.lightDark(background-color, #eee, #000);
   width: 30px;
   height: 30px;
   &.med {
@@ -60,7 +60,7 @@ body.dragging, body.dragging * {
     border-radius: 3px;
   }
   &[src$="user_avatar.png"] {
-    @include whenDark {
+    @include mixins.whenDark {
       filter: invert(1);
     }
   }
@@ -71,7 +71,7 @@ $loadingSize: 10px;
 .loading-container {
   position: relative;
   display: block;
-  margin: $-xl auto;
+  margin: vars.$xl auto;
   > div {
     width: $loadingSize;
     height: $loadingSize;
@@ -79,7 +79,7 @@ $loadingSize: 10px;
     display: inline-block;
     vertical-align: top;
     transform: translate3d(-10px, 0, 0);
-    margin-top: $-xs;
+    margin-top: vars.$xs;
     animation-name: loadingBob;
     animation-duration: 1.4s;
     animation-iteration-count: infinite;
@@ -89,17 +89,17 @@ $loadingSize: 10px;
     animation-delay: -300ms;
   }
   > div:first-child {
-      left: -($loadingSize+$-xs);
+      left: -($loadingSize+vars.$xs);
       background-color: var(--color-book);
       animation-delay: -600ms;
   }
   > div:last-of-type {
-    left: $loadingSize+$-xs;
+    left: $loadingSize+vars.$xs;
     background-color: var(--color-chapter);
     animation-delay: 0ms;
   }
   > span {
-    margin-inline-start: $-s;
+    margin-inline-start: vars.$s;
     font-style: italic;
     color: #888;
     vertical-align: top;
@@ -107,7 +107,7 @@ $loadingSize: 10px;
 }
 
 .inline.block .loading-container {
-  margin: $-xs $-s;
+  margin: vars.$xs vars.$s;
 }
 
 .skip-to-content-link {
@@ -118,10 +118,10 @@ $loadingSize: 10px;
   z-index: 15;
   border-radius: 0 4px 4px 0;
   display: block;
-  box-shadow: $bs-dark;
+  box-shadow: vars.$bs-dark;
   font-weight: bold;
   &:focus {
-    top: $-xl;
+    top: vars.$xl;
     outline-offset: -10px;
     outline: 2px dotted var(--color-link);
   }
@@ -129,7 +129,7 @@ $loadingSize: 10px;
 
 .entity-selector {
   border: 1px solid #DDD;
-  @include lightDark(border-color, #ddd, #111);
+  @include mixins.lightDark(border-color, #ddd, #111);
   border-radius: 3px;
   overflow: hidden;
   font-size: 0.8em;
@@ -140,7 +140,7 @@ $loadingSize: 10px;
     border: 0;
     border-bottom: 1px solid #DDD;
     font-size: 16px;
-    padding: $-s $-m;
+    padding: vars.$s vars.$m;
   }
   input[type="text"]:focus {
     outline: 1px solid var(--color-primary);
@@ -150,12 +150,12 @@ $loadingSize: 10px;
   .entity-list {
     overflow-y: scroll;
     height: 400px;
-    @include lightDark(background-color, #eee, #222);
+    @include mixins.lightDark(background-color, #eee, #222);
     margin-inline-end: 0;
     margin-inline-start: 0;
   }
   .entity-list-item {
-    @include lightDark(background-color, #fff, #222);
+    @include mixins.lightDark(background-color, #fff, #222);
   }
   .entity-list-item p {
     margin-bottom: 0;
@@ -165,11 +165,11 @@ $loadingSize: 10px;
     outline-offset: -4px;
   }
   .entity-list-item.selected {
-    @include lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
+    @include mixins.lightDark(background-color, rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));
   }
   .loading {
     height: 400px;
-    padding-top: $-l;
+    padding-top: vars.$l;
   }
   &.compact {
     font-size: 10px;
@@ -182,14 +182,14 @@ $loadingSize: 10px;
   }
   &.small {
     .entity-list-item {
-      padding: $-xs $-m;
+      padding: vars.$xs vars.$m;
     }
     .entity-list, .loading {
       height: 300px;
     }
     input[type="text"] {
       font-size: 13px;
-      padding: $-xs $-m;
+      padding: vars.$xs vars.$m;
       height: auto;
     }
   }
@@ -207,11 +207,11 @@ $loadingSize: 10px;
   z-index: 150;
 }
 
-@include between($s, $m) {
+@include mixins.between(vars.$bp-s, vars.$bp-m) {
   #home-default > .grid.third {
     display: block;
     columns: 2;
-    column-gap: $-l !important;
+    column-gap: vars.$l !important;
   }
 }
 
@@ -222,29 +222,29 @@ $loadingSize: 10px;
   }
   .list-sort {
     display: inline-grid;
-    margin-inline-start: $-s;
+    margin-inline-start: vars.$s;
     grid-template-columns: minmax(120px, max-content) 40px;
     font-size: 0.9rem;
     border: 2px solid #DDD;
-    @include lightDark(border-color, #ddd, #444);
+    @include mixins.lightDark(border-color, #ddd, #444);
     border-radius: 4px;
   }
   .list-sort-label {
     font-weight: bold;
     display: inline-block;
-    @include lightDark(color, #555, #888);
+    @include mixins.lightDark(color, #555, #888);
   }
   .list-sort-type {
     text-align: start;
   }
   .list-sort-type, .list-sort-dir {
-    padding: $-xs $-s;
+    padding: vars.$xs vars.$s;
     cursor: pointer;
   }
   .list-sort-dir {
     border-inline-start: 2px solid #DDD;
     color: #888;
-    @include lightDark(border-color, #ddd, #444);
+    @include mixins.lightDark(border-color, #ddd, #444);
     .svg-icon {
       transition: transform ease-in-out 120ms;
     }
@@ -256,5 +256,5 @@ $loadingSize: 10px;
 
 .import-item {
   border-inline-start: 2px solid currentColor;
-  padding-inline-start: $-xs;
+  padding-inline-start: vars.$xs;
 }
\ No newline at end of file