From 5aad931ba7d41da4e27270a4a5a219483d851730 Mon Sep 17 00:00:00 2001
From: "Luna D." <luna@nighty.cloud>
Date: Tue, 30 Apr 2024 12:16:09 +0200
Subject: [PATCH] switch from scss/sass to plain css with postcss plugins

---
 .../css/{application.scss => application.css} |  20 +-
 assets/css/common/_mixins.scss                |  58 --
 .../{_measurements.scss => measurements.css}  |  14 +-
 assets/css/common/mixins.css                  |  58 ++
 assets/css/elements/_flash.scss               |  48 --
 assets/css/elements/_heading.scss             |  40 --
 assets/css/elements/_separator.scss           |  39 --
 .../css/elements/{_avatar.scss => avatar.css} |   0
 assets/css/elements/{_base.scss => base.css}  |   2 +-
 .../css/elements/{_block.scss => block.css}   |  39 +-
 .../css/elements/{_button.scss => button.css} |  59 +-
 .../elements/{_dropdown.scss => dropdown.css} |   0
 assets/css/elements/flash.css                 |  51 ++
 assets/css/elements/{_flex.scss => flex.css}  |  10 +-
 assets/css/elements/heading.css               |  40 ++
 .../css/elements/{_input.scss => input.css}   |   0
 .../{_interaction.scss => interaction.css}    |  18 +-
 .../css/elements/{_layout.scss => layout.css} |  10 +-
 .../css/elements/{_media.scss => media.css}   |  16 +-
 .../css/elements/{_mobile.scss => mobile.css} |  16 +-
 assets/css/elements/separator.css             |  39 ++
 .../css/elements/{_table.scss => table.css}   |   0
 assets/css/themes/dark-blue.css               |  89 +++
 assets/css/themes/dark-blue.scss              |  92 ---
 assets/css/themes/dark-purple.scss            |  92 ---
 assets/css/views/_burger.scss                 |   4 -
 assets/css/views/{_admin.scss => admin.css}   |   0
 .../views/{_approval.scss => approval.css}    |   2 +-
 assets/css/views/burger.css                   |   4 +
 ...{_communication.scss => communication.css} |   6 +-
 assets/css/views/{_footer.scss => footer.css} |   0
 assets/css/views/{_header.scss => header.css} |  11 +-
 assets/css/views/{_image.scss => image.css}   |   0
 .../views/{_markdown.scss => markdown.css}    |   3 +-
 .../css/views/{_metabar.scss => metabar.css}  |  19 +-
 .../{_pagination.scss => pagination.css}      |   0
 assets/css/views/{_staff.scss => staff.css}   |   0
 .../{_statistics.scss => statistics.css}      |   5 +-
 assets/css/views/{_tag.scss => tag.css}       |  39 +-
 assets/js/app.js                              |   7 -
 assets/package-lock.json                      | 575 ++++++++++++------
 assets/package.json                           |   8 +-
 assets/vite.config.ts                         |  12 +-
 43 files changed, 849 insertions(+), 696 deletions(-)
 rename assets/css/{application.scss => application.css} (64%)
 delete mode 100644 assets/css/common/_mixins.scss
 rename assets/css/common/{_measurements.scss => measurements.css} (84%)
 create mode 100644 assets/css/common/mixins.css
 delete mode 100644 assets/css/elements/_flash.scss
 delete mode 100644 assets/css/elements/_heading.scss
 delete mode 100644 assets/css/elements/_separator.scss
 rename assets/css/elements/{_avatar.scss => avatar.css} (100%)
 rename assets/css/elements/{_base.scss => base.css} (96%)
 rename assets/css/elements/{_block.scss => block.css} (78%)
 rename assets/css/elements/{_button.scss => button.css} (64%)
 rename assets/css/elements/{_dropdown.scss => dropdown.css} (100%)
 create mode 100644 assets/css/elements/flash.css
 rename assets/css/elements/{_flex.scss => flex.css} (89%)
 create mode 100644 assets/css/elements/heading.css
 rename assets/css/elements/{_input.scss => input.css} (100%)
 rename assets/css/elements/{_interaction.scss => interaction.css} (63%)
 rename assets/css/elements/{_layout.scss => layout.css} (91%)
 rename assets/css/elements/{_media.scss => media.css} (88%)
 rename assets/css/elements/{_mobile.scss => mobile.css} (56%)
 create mode 100644 assets/css/elements/separator.css
 rename assets/css/elements/{_table.scss => table.css} (100%)
 create mode 100644 assets/css/themes/dark-blue.css
 delete mode 100644 assets/css/themes/dark-blue.scss
 delete mode 100644 assets/css/themes/dark-purple.scss
 delete mode 100644 assets/css/views/_burger.scss
 rename assets/css/views/{_admin.scss => admin.css} (100%)
 rename assets/css/views/{_approval.scss => approval.css} (94%)
 create mode 100644 assets/css/views/burger.css
 rename assets/css/views/{_communication.scss => communication.css} (92%)
 rename assets/css/views/{_footer.scss => footer.css} (100%)
 rename assets/css/views/{_header.scss => header.css} (93%)
 rename assets/css/views/{_image.scss => image.css} (100%)
 rename assets/css/views/{_markdown.scss => markdown.css} (93%)
 rename assets/css/views/{_metabar.scss => metabar.css} (75%)
 rename assets/css/views/{_pagination.scss => pagination.css} (100%)
 rename assets/css/views/{_staff.scss => staff.css} (100%)
 rename assets/css/views/{_statistics.scss => statistics.css} (89%)
 rename assets/css/views/{_tag.scss => tag.css} (67%)

diff --git a/assets/css/application.scss b/assets/css/application.css
similarity index 64%
rename from assets/css/application.scss
rename to assets/css/application.css
index 5cc73042..5647ddd0 100644
--- a/assets/css/application.scss
+++ b/assets/css/application.css
@@ -7,22 +7,20 @@
  *
  */
 
-$fa-font-path: "@fortawesome/fontawesome-free/webfonts";
+@import "@fortawesome/fontawesome-free/css/fontawesome.css";
+@import "@fortawesome/fontawesome-free/css/solid.css";
+@import "@fortawesome/fontawesome-free/css/regular.css";
+@import "@fortawesome/fontawesome-free/css/brands.css";
+@import "normalize.css";
 
-@import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
-@import "@fortawesome/fontawesome-free/scss/solid.scss";
-@import "@fortawesome/fontawesome-free/scss/regular.scss";
-@import "@fortawesome/fontawesome-free/scss/brands.scss";
-@import "normalize-scss/sass/normalize/import-now";
-
-// Import the default theme to act as a fallback.
+/* Import the default theme to act as a fallback. */
 @import "themes/dark-blue";
 
-// Files containing common properties, such as variable definitions.
+/* Files containing common properties, such as variable definitions. */
 @import "common/measurements";
 @import "common/mixins";
 
-// General style elements that are used throughout the project.
+/* General style elements that are used throughout the project. */
 @import "elements/avatar";
 @import "elements/base";
 @import "elements/block";
@@ -39,7 +37,7 @@ $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
 @import "elements/separator";
 @import "elements/table";
 
-// Style elements specific to certain pages.
+/* Style elements specific to certain pages. */
 @import "views/admin";
 @import "views/burger";
 @import "views/communication";
diff --git a/assets/css/common/_mixins.scss b/assets/css/common/_mixins.scss
deleted file mode 100644
index 687ab402..00000000
--- a/assets/css/common/_mixins.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-@mixin if-desktop {
-  @media (min-width: $min-desktop-width + 1) {
-    @content;
-  }
-}
-
-@mixin if-tablet {
-  @media (max-width: $min-desktop-width) and (min-width: $max-phone-width + 1) {
-    @content;
-  }
-}
-
-@mixin if-phone {
-  @media (max-width: $max-phone-width) {
-    @content;
-  }
-}
-
-@mixin if-mobile {
-  @media (max-width: $min-desktop-width) {
-    @content;
-  }
-}
-
-@mixin even-odd-type($type) {
-  &:nth-child(odd).#{$type},
-  &:nth-child(odd) .#{$type} {
-    background: var(--#{$type}-color);
-  }
-  &:nth-child(even).#{$type},
-  &:nth-child(even) .#{$type} {
-    background: var(--#{$type}-dark-color);
-  }
-  &:nth-child(even) &:nth-child(odd).#{$type},
-  &:nth-child(even) &:nth-child(odd) .#{$type} {
-    background: var(--#{$type}-color);
-  }
-}
-
-@mixin even-odd {
-  &:nth-child(odd) {
-    background: var(--secondary-dark-color);
-  }
-  &:nth-child(even) {
-    background: var(--secondary-muted-color);;
-  }
-
-  @include even-odd-type(primary);
-  @include even-odd-type(success);
-  @include even-odd-type(warning);
-  @include even-odd-type(danger);
-  @include even-odd-type(information);
-  @include even-odd-type(special);
-}
-
-@mixin animated-transition {
-  transition: color var(--transition-animation-duration) ease, background var(--transition-animation-duration) ease;
-}
diff --git a/assets/css/common/_measurements.scss b/assets/css/common/measurements.css
similarity index 84%
rename from assets/css/common/_measurements.scss
rename to assets/css/common/measurements.css
index 9d7338c9..a2078dbf 100644
--- a/assets/css/common/_measurements.scss
+++ b/assets/css/common/measurements.css
@@ -29,7 +29,7 @@ $font-family-monospace: "Droid Sans Mono", monospace;
   --button-group-tall-height: 2.5rem;
   --button-group-small-height: 1.5rem;
 
-  --tag-height: calc(1em * 2);
+  --tag-height: 2em;
   --tag-border-width: 0;
 
   --column-left-width: 360px;
@@ -53,8 +53,8 @@ $font-family-monospace: "Droid Sans Mono", monospace;
   --number-badge-lower-offset: 0.7rem;
   --number-badge-upper-offset: 0.7rem;
 
-  --font-family: #{$font-family-base};
-  --font-family-monospace: #{$font-family-monospace};
+  --font-family: $font-family-base;
+  --font-family-monospace: $font-family-monospace;
 
   --font-size: 14px;
   --font-tiny-size: 12px;
@@ -69,10 +69,10 @@ $font-family-monospace: "Droid Sans Mono", monospace;
 
   --input-text-height: 9rem;
 
-  --min-desktop-width: #{$min-desktop-width};
-  --max-phone-width: #{$max-phone-width};
-  --medium-layout-width: #{$medium-layout-width};
-  --narrow-layout-width: #{$narrow-layout-width};
+  --min-desktop-width: $min-desktop-width;
+  --max-phone-width: $max-phone-width;
+  --medium-layout-width: $medium-layout-width;
+  --narrow-layout-width: $narrow-layout-width;
 
   --transition-animation-duration: 0.15s;
 }
diff --git a/assets/css/common/mixins.css b/assets/css/common/mixins.css
new file mode 100644
index 00000000..6d5c8f3e
--- /dev/null
+++ b/assets/css/common/mixins.css
@@ -0,0 +1,58 @@
+@define-mixin if-desktop {
+  @media (min-width: calc($min-desktop-width + 1px)) {
+    @mixin-content;
+  }
+}
+
+@define-mixin if-tablet {
+  @media (max-width: $min-desktop-width) and (min-width: calc($max-phone-width + 1px)) {
+    @mixin-content;
+  }
+}
+
+@define-mixin if-phone {
+  @media (max-width: $max-phone-width) {
+    @mixin-content;
+  }
+}
+
+@define-mixin if-mobile {
+  @media (max-width: $min-desktop-width) {
+    @mixin-content;
+  }
+}
+
+@define-mixin even-odd-type $type {
+  &:nth-child(odd).$(type),
+  &:nth-child(odd) .$(type) {
+    background: var(--$(type)-color);
+  }
+  &:nth-child(even).$(type),
+  &:nth-child(even) .$(type) {
+    background: var(--$(type)-dark-color);
+  }
+  &:nth-child(even) &:nth-child(odd).$(type),
+  &:nth-child(even) &:nth-child(odd) .$(type) {
+    background: var(--$(type)-color);
+  }
+}
+
+@define-mixin even-odd {
+  &:nth-child(odd) {
+    background: var(--secondary-dark-color);
+  }
+  &:nth-child(even) {
+    background: var(--secondary-muted-color);;
+  }
+
+  @mixin even-odd-type primary;
+  @mixin even-odd-type success;
+  @mixin even-odd-type warning;
+  @mixin even-odd-type danger;
+  @mixin even-odd-type information;
+  @mixin even-odd-type special;
+}
+
+@define-mixin animated-transition {
+  transition: color var(--transition-animation-duration) ease, background var(--transition-animation-duration) ease;
+}
diff --git a/assets/css/elements/_flash.scss b/assets/css/elements/_flash.scss
deleted file mode 100644
index 04755230..00000000
--- a/assets/css/elements/_flash.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-@mixin flash-type($type) {
-  .flash--#{$type} {
-    border: 1px solid var(--#{$type}-border-color);
-    background: var(--#{$type}-color);
-
-    .flash__message {
-      border-left: 1px solid var(--#{$type}-border-color);
-    }
-
-    & a {
-      color: var(--#{$type}-link-color);
-
-      &:hover {
-        color: var(--link-hover-color);
-      }
-    }
-  }
-}
-
-.flash {
-  display: grid;
-  grid-template-columns: auto 1fr;
-  margin: var(--padding-normal);
-  margin-bottom: 0;
-  border-radius: var(--border-radius-inner);
-}
-
-@include if-phone {
-  .flash {
-    margin: var(--padding-small);
-    margin-bottom: 0;
-  }
-}
-
-.flash__icon {
-  @extend .flex__column--centered;
-  padding: var(--padding-normal);
-}
-
-.flash__message {
-  padding: var(--padding-normal);
-}
-
-@include flash-type(success);
-@include flash-type(warning);
-@include flash-type(danger);
-@include flash-type(information);
-@include flash-type(special);
diff --git a/assets/css/elements/_heading.scss b/assets/css/elements/_heading.scss
deleted file mode 100644
index ab9835eb..00000000
--- a/assets/css/elements/_heading.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-@mixin heading($el) {
-  #{$el} {
-    font-size: var(--font-#{$el}-size);
-    font-weight: bold;
-    font-variant: small-caps;
-    padding: var(--padding-small) 0;
-    margin-top: 0;
-    border-bottom: 1px solid var(--primary-border-color);
-  }
-}
-
-@mixin heading-type($type) {
-  .heading--#{$type} {
-    border-bottom-color: var(--#{$type}-border-color);
-  }
-
-  .block--#{$type} {
-    h1, h2, h3, h4, h5, h6 {
-      border-bottom-color: var(--#{$type}-border-color);
-    }
-  }
-}
-
-@include heading(h1);
-@include heading(h2);
-@include heading(h3);
-@include heading(h4);
-@include heading(h5);
-@include heading(h6);
-
-/* To differentiate between h5 and h6, simply make h6 not bold */
-h6 {
-  font-weight: normal;
-}
-
-@include heading-type(success);
-@include heading-type(warning);
-@include heading-type(danger);
-@include heading-type(information);
-@include heading-type(special);
diff --git a/assets/css/elements/_separator.scss b/assets/css/elements/_separator.scss
deleted file mode 100644
index 1294459f..00000000
--- a/assets/css/elements/_separator.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-@mixin separator-type($type) {
-  .separator--#{$type} {
-    border-color: var(--#{$type}-border-color);
-
-    &.separator--vertical {
-      background: var(--#{$type}-border-color);
-    }
-  }
-
-  .button__group--standalone .separator--#{$type},
-  .button__group .separator--#{$type} {
-    &.separator--vertical {
-      background: var(--#{$type}-color) !important;
-    }
-  }
-}
-
-.separator {
-  margin: var(--padding-normal) 0;
-}
-
-.separator--thin {
-  margin: var(--padding-small) 0;
-}
-
-.separator--vertical {
-  width: 1px;
-  height: inherit;
-  margin: 0 var(--padding-small);
-  background: var(--primary-border-color);
-}
-
-@include separator-type(primary);
-@include separator-type(secondary);
-@include separator-type(success);
-@include separator-type(warning);
-@include separator-type(danger);
-@include separator-type(information);
-@include separator-type(special);
diff --git a/assets/css/elements/_avatar.scss b/assets/css/elements/avatar.css
similarity index 100%
rename from assets/css/elements/_avatar.scss
rename to assets/css/elements/avatar.css
diff --git a/assets/css/elements/_base.scss b/assets/css/elements/base.css
similarity index 96%
rename from assets/css/elements/_base.scss
rename to assets/css/elements/base.css
index 68eefad6..702036ce 100644
--- a/assets/css/elements/_base.scss
+++ b/assets/css/elements/base.css
@@ -16,7 +16,7 @@ main {
   flex-grow: 1;
 }
 
-@include if-mobile {
+@mixin if-mobile {
   main {
     padding: var(--padding-small);
   }
diff --git a/assets/css/elements/_block.scss b/assets/css/elements/block.css
similarity index 78%
rename from assets/css/elements/_block.scss
rename to assets/css/elements/block.css
index 553f1a79..aaf53c4c 100644
--- a/assets/css/elements/_block.scss
+++ b/assets/css/elements/block.css
@@ -1,24 +1,24 @@
-@mixin block-type($type) {
-  .block--#{$type} {
+@define-mixin block-type $type {
+  .block--$(type) {
     .block__content {
-      border-color: var(--#{$type}-border-color);
-      background: var(--#{$type}-dark-color);
+      border-color: var(--$(type)-border-color);
+      background: var(--$(type)-dark-color);
     }
 
     .block__footer {
-      background: var(--#{$type}-color);
+      background: var(--$(type)-color);
     }
 
     &.block--muted {
-      border-color: var(--#{$type}-color);
+      border-color: var(--$(type)-color);
     }
 
     &.block--fixed {
-      background: var(--#{$type}-color);
+      background: var(--$(type)-color);
     }
 
     & a {
-      color: var(--#{$type}-link-color);
+      color: var(--$(type)-link-color);
 
       &:hover {
         color: var(--link-hover-color);
@@ -56,8 +56,9 @@
   padding: var(--padding-small);
 }
 
-.block__footer {
-  @extend .flex__row;
+.block__footer, .block__footer--small {
+  display: flex;
+  flex-direction: row;
   background: var(--primary-muted-color);
   padding: var(--padding-normal);
   margin: var(--padding-normal);
@@ -65,12 +66,11 @@
 }
 
 .block__footer--small {
-  @extend .block__footer;
   margin: var(--padding-small);
   margin-top: 0;
 }
 
-@include if-phone {
+@mixin if-phone {
   .block__content {
     padding: var(--padding-small);
   }
@@ -81,7 +81,7 @@
   }
 }
 
-.block__header {
+.block__header, .block__header--single-item  {
   line-height: var(--block-header-height);
   padding: 0 var(--padding-normal);
   font-size: var(--font-header-size);
@@ -93,7 +93,6 @@
 }
 
 .block__header--single-item {
-  @extend .block__header;
   display: inline-block;
   width: 100%;
   box-sizing: border-box;
@@ -150,9 +149,9 @@
   margin-top: var(--padding-normal);
 }
 
-@include block-type(secondary);
-@include block-type(success);
-@include block-type(warning);
-@include block-type(danger);
-@include block-type(information);
-@include block-type(special);
+@mixin block-type secondary;
+@mixin block-type success;
+@mixin block-type warning;
+@mixin block-type danger;
+@mixin block-type information;
+@mixin block-type special;
diff --git a/assets/css/elements/_button.scss b/assets/css/elements/button.css
similarity index 64%
rename from assets/css/elements/_button.scss
rename to assets/css/elements/button.css
index 350017c8..a982e28c 100644
--- a/assets/css/elements/_button.scss
+++ b/assets/css/elements/button.css
@@ -1,38 +1,38 @@
-@mixin button-type($type) {
-  .button--#{$type} {
-    color: var(--#{$type}-link-color) !important;
-    border-color: var(--#{$type}-border-color);
-    background: var(--#{$type}-dark-color);
+@define-mixin button-type $type {
+  .button--$(type) {
+    color: var(--$(type)-link-color) !important;
+    border-color: var(--$(type)-border-color);
+    background: var(--$(type)-dark-color);
 
     &.button--important {
       color: var(--text-color) !important;
-      background: var(--#{$type}-color);
-      box-shadow: 0 -1px var(--#{$type}-dark-color) inset;
+      background: var(--$(type)-color);
+      box-shadow: 0 -1px var(--$(type)-dark-color) inset;
     }
 
     &:hover {
-      background: var(--#{$type}-muted-color) !important;
+      background: var(--$(type)-muted-color) !important;
     }
   }
 
-  .button__group--#{$type} {
-    border-color: var(--#{$type}-color);
-    background: var(--#{$type}-dark-color);
+  .button__group--$(type) {
+    border-color: var(--$(type)-color);
+    background: var(--$(type)-dark-color);
 
     & a {
-      color: var(--#{$type}-link-color);
+      color: var(--$(type)-link-color);
 
       &:hover {
-        @include animated-transition;
+        @mixin animated-transition;
         color: var(--text-color);
-        background: var(--#{$type}-color);
+        background: var(--$(type)-color);
       }
     }
   }
 }
 
 .button {
-  @include animated-transition;
+  @mixin animated-transition;
   display: flex;
   flex: 0 1 auto;
   width: fit-content;
@@ -48,7 +48,7 @@
   align-items: center;
 
   &:hover {
-    @include animated-transition;
+    @mixin animated-transition;
     background: var(--primary-muted-color);
     cursor: pointer;
   }
@@ -64,15 +64,17 @@
 }
 
 .button__row {
-  @extend .flex__row;
+  display: flex;
+  flex-direction: row;
 
   & > button {
     margin-right: var(--padding-small);
   }
 }
 
-.button__group {
-  @extend .flex__row;
+.button__group, .button__group--single, .button__group--standalone {
+  display: flex;
+  flex-direction: row;
   border: 1px solid var(--secondary-color);
   border-radius: var(--border-radius-inner);
   margin-right: var(--padding-normal);
@@ -102,21 +104,16 @@
 }
 
 .button__group--single {
-  @extend .button__group;
   margin-right: 0;
 }
 
-.button__group--standalone {
-  @extend .button__group;
-}
-
 .button__group--standalone a {
-  @include animated-transition;
+  @mixin animated-transition;
   font-weight: bold;
   padding: 0 var(--padding-small);
 
   &:hover {
-    @include animated-transition;
+    @mixin animated-transition;
     background: var(--secondary-muted-color);
   }
 }
@@ -135,8 +132,8 @@
   }
 }
 
-@include button-type(success);
-@include button-type(warning);
-@include button-type(danger);
-@include button-type(information);
-@include button-type(special);
+@mixin button-type success;
+@mixin button-type warning;
+@mixin button-type danger;
+@mixin button-type information;
+@mixin button-type special;
diff --git a/assets/css/elements/_dropdown.scss b/assets/css/elements/dropdown.css
similarity index 100%
rename from assets/css/elements/_dropdown.scss
rename to assets/css/elements/dropdown.css
diff --git a/assets/css/elements/flash.css b/assets/css/elements/flash.css
new file mode 100644
index 00000000..ab78635d
--- /dev/null
+++ b/assets/css/elements/flash.css
@@ -0,0 +1,51 @@
+@define-mixin flash-type $type {
+  .flash--$(type) {
+    border: 1px solid var(--$(type)-border-color);
+    background: var(--$(type)-color);
+
+    .flash__message {
+      border-left: 1px solid var(--$(type)-border-color);
+    }
+
+    & a {
+      color: var(--$(type)-link-color);
+
+      &:hover {
+        color: var(--link-hover-color);
+      }
+    }
+  }
+}
+
+.flash {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  margin: var(--padding-normal);
+  margin-bottom: 0;
+  border-radius: var(--border-radius-inner);
+}
+
+@mixin if-phone {
+  .flash {
+    margin: var(--padding-small);
+    margin-bottom: 0;
+  }
+}
+
+.flash__icon {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: var(--padding-normal);
+}
+
+.flash__message {
+  padding: var(--padding-normal);
+}
+
+@mixin flash-type success;
+@mixin flash-type warning;
+@mixin flash-type danger;
+@mixin flash-type information;
+@mixin flash-type special;
diff --git a/assets/css/elements/_flex.scss b/assets/css/elements/flex.css
similarity index 89%
rename from assets/css/elements/_flex.scss
rename to assets/css/elements/flex.css
index ed33d18e..b39b0ff0 100644
--- a/assets/css/elements/_flex.scss
+++ b/assets/css/elements/flex.css
@@ -13,13 +13,15 @@
 }
 
 .flex__row--centered {
-  @extend .flex__row;
+  display: flex;
+  flex-direction: row;
   align-items: center;
   justify-content: center;
 }
 
 .flex__column--centered {
-  @extend .flex__column;
+  display: flex;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
 }
@@ -77,13 +79,13 @@
   flex: 1 0 auto;
 }
 
-@include if-desktop {
+@mixin if-desktop {
   .flex--maybe-wrap {
     flex-wrap: nowrap;
   }
 }
 
-@include if-mobile {
+@mixin if-mobile {
   .flex--maybe-wrap {
     flex-wrap: wrap;
   }
diff --git a/assets/css/elements/heading.css b/assets/css/elements/heading.css
new file mode 100644
index 00000000..6a94807c
--- /dev/null
+++ b/assets/css/elements/heading.css
@@ -0,0 +1,40 @@
+@define-mixin heading $el {
+  $(el) {
+    font-size: var(--font-$(el)-size);
+    font-weight: bold;
+    font-variant: small-caps;
+    padding: var(--padding-small) 0;
+    margin-top: 0;
+    border-bottom: 1px solid var(--primary-border-color);
+  }
+}
+
+@define-mixin heading-type $type {
+  .heading--$(type) {
+    border-bottom-color: var(--$(type)-border-color);
+  }
+
+  .block--$(type) {
+    h1, h2, h3, h4, h5, h6 {
+      border-bottom-color: var(--$(type)-border-color);
+    }
+  }
+}
+
+@mixin heading h1;
+@mixin heading h2;
+@mixin heading h3;
+@mixin heading h4;
+@mixin heading h5;
+@mixin heading h6;
+
+/* To differentiate between h5 and h6, simply make h6 not bold */
+h6 {
+  font-weight: normal;
+}
+
+@mixin heading-type success;
+@mixin heading-type warning;
+@mixin heading-type danger;
+@mixin heading-type information;
+@mixin heading-type special;
diff --git a/assets/css/elements/_input.scss b/assets/css/elements/input.css
similarity index 100%
rename from assets/css/elements/_input.scss
rename to assets/css/elements/input.css
diff --git a/assets/css/elements/_interaction.scss b/assets/css/elements/interaction.css
similarity index 63%
rename from assets/css/elements/_interaction.scss
rename to assets/css/elements/interaction.css
index 49f6e537..e9980be3 100644
--- a/assets/css/elements/_interaction.scss
+++ b/assets/css/elements/interaction.css
@@ -1,22 +1,22 @@
-@mixin interaction-type($type) {
-  .interaction--#{$type} {
+@define-mixin interaction-type $type {
+  .interaction--$(type) {
     position: relative;
-    color: var(--#{$type}-color) !important;
+    color: var(--$(type)-color) !important;
     padding: 0 var(--padding-tiny);
     width: 1rem;
 
     &.active, &:hover {
       color: var(--text-color) !important;
-      background-color: var(--#{$type}-color);
+      background-color: var(--$(type)-color);
     }
   }
 }
 
-@include interaction-type(fave);
-@include interaction-type(upvote);
-@include interaction-type(downvote);
-@include interaction-type(comment);
-@include interaction-type(hide);
+@mixin interaction-type fave;
+@mixin interaction-type upvote;
+@mixin interaction-type downvote;
+@mixin interaction-type comment;
+@mixin interaction-type hide;
 
 .comments_count {
   position: absolute;
diff --git a/assets/css/elements/_layout.scss b/assets/css/elements/layout.css
similarity index 91%
rename from assets/css/elements/_layout.scss
rename to assets/css/elements/layout.css
index 0b2cc75e..43e7c6c6 100644
--- a/assets/css/elements/_layout.scss
+++ b/assets/css/elements/layout.css
@@ -1,5 +1,6 @@
 .column-layout {
-  @extend .flex__row;
+  display: flex;
+  flex-direction: row;
   width: 100%;
 }
 
@@ -12,7 +13,7 @@
   flex: 1 0 auto;
 }
 
-@include if-mobile {
+@mixin if-mobile {
   .column-layout {
     flex-direction: column;
   }
@@ -23,7 +24,8 @@
 }
 
 #container {
-  @extend .flex__column;
+  display: flex;
+  flex-direction: column;
   box-sizing: border-box;
   height: 100%;
   margin: auto;
@@ -41,7 +43,7 @@
   max-width: var(--medium-layout-width);
 }
 
-@include if-desktop {
+@mixin if-desktop {
   .centered-layout {
     .layout--medium, .layout--narrow {
       margin-left: auto;
diff --git a/assets/css/elements/_media.scss b/assets/css/elements/media.css
similarity index 88%
rename from assets/css/elements/_media.scss
rename to assets/css/elements/media.css
index 927652ce..ec56c42d 100644
--- a/assets/css/elements/_media.scss
+++ b/assets/css/elements/media.css
@@ -1,5 +1,8 @@
 .image-constrained {
-  @extend .flex__row--centered;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 
 .media-list {
@@ -17,7 +20,7 @@
   grid-column: 1 / 1;
 }
 
-@include if-phone {
+@mixin if-phone {
   .media-list {
     grid-template-columns: repeat(auto-fill, minmax(var(--media-small-container-width), 1fr));
   }
@@ -93,15 +96,18 @@
 }
 
 .image-container {
-  @extend .flex__column--centered;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .image-container a {
   display: flex;
   max-height: 100%;
 
-  // For some reason tall images don't center properly within the container
-  // without this hack. I blame CSS.
+  /* For some reason tall images don't center properly within the container
+     without this hack. I blame CSS. */
   & > img {
     max-height: 100%;
     margin: auto;
diff --git a/assets/css/elements/_mobile.scss b/assets/css/elements/mobile.css
similarity index 56%
rename from assets/css/elements/_mobile.scss
rename to assets/css/elements/mobile.css
index b497f238..19c6a569 100644
--- a/assets/css/elements/_mobile.scss
+++ b/assets/css/elements/mobile.css
@@ -1,26 +1,26 @@
-// Phones.
-@include if-phone {
+/* Phones. */
+@mixin if-phone {
   .hidden--phone {
     display: none !important;
   }
 }
 
-// Tablets.
-@include if-tablet {
+/* Tablets. */
+@mixin if-tablet {
   .hidden--tablet {
     display: none !important;
   }
 }
 
-// Phones and tablets.
-@include if-mobile {
+/* Phones and tablets. */
+@mixin if-mobile {
   .hidden--mobile {
     display: none !important;
   }
 }
 
-// Anything larger than 1280px (Desktops).
-@include if-desktop {
+/* Anything larger than 1280px (Desktops). */
+@mixin if-desktop {
   .hidden--desktop {
     display: none !important;
   }
diff --git a/assets/css/elements/separator.css b/assets/css/elements/separator.css
new file mode 100644
index 00000000..d2d9541a
--- /dev/null
+++ b/assets/css/elements/separator.css
@@ -0,0 +1,39 @@
+@define-mixin separator-type $type {
+  .separator--$(type) {
+    border-color: var(--$(type)-border-color);
+
+    &.separator--vertical {
+      background: var(--$(type)-border-color);
+    }
+  }
+
+  .button__group--standalone .separator--$(type),
+  .button__group .separator--$(type) {
+    &.separator--vertical {
+      background: var(--$(type)-color) !important;
+    }
+  }
+}
+
+.separator {
+  margin: var(--padding-normal) 0;
+}
+
+.separator--thin {
+  margin: var(--padding-small) 0;
+}
+
+.separator--vertical {
+  width: 1px;
+  height: inherit;
+  margin: 0 var(--padding-small);
+  background: var(--primary-border-color);
+}
+
+@mixin separator-type primary;
+@mixin separator-type secondary;
+@mixin separator-type success;
+@mixin separator-type warning;
+@mixin separator-type danger;
+@mixin separator-type information;
+@mixin separator-type special;
diff --git a/assets/css/elements/_table.scss b/assets/css/elements/table.css
similarity index 100%
rename from assets/css/elements/_table.scss
rename to assets/css/elements/table.css
diff --git a/assets/css/themes/dark-blue.css b/assets/css/themes/dark-blue.css
new file mode 100644
index 00000000..17cb8d02
--- /dev/null
+++ b/assets/css/themes/dark-blue.css
@@ -0,0 +1,89 @@
+$background-color: #131a22;
+$text-color: #e0e0e0;
+
+$primary-color: #2e4c80;
+$secondary-color: #434f69;
+$danger-color: #672a21;
+$warning-color: #684f2c;
+$success-color: #25603e;
+$information-color: #205861;
+$special-color: #561e5e;
+
+$upvote-color: #5b9b26;
+$downvote-color: #da3412;
+$fave-color: #a18e27;
+$comment-color: #b099dd;
+$hide-color: #da3412;
+
+$tag-default-color: #1b3c21;
+$tag-error-color: #4f181d;
+$tag-rating-color: #113456;
+$tag-origin-color: #1d1858;
+$tag-character-color: #193f47;
+$tag-oc-color: #451f47;
+$tag-species-color: #362118;
+$tag-body-type-color: #393939;
+$tag-content-fanmade-color: #622c4e;
+$tag-content-official-color: #4b491c;
+$tag-spoiler-color: #4f3811;
+
+$spoiler-color: #0f0f0f;
+
+@define-mixin tag-color $tagname, $color, $text-percentage: 35, $border-percentage: 15 {
+  --tag-$(tagname)-color: $(color);
+  --tag-$(tagname)-border-color: hsl(from $color h s calc(l + $border-percentage));
+  --tag-$(tagname)-text-color: hsl(from $color h s calc(l + $text-percentage));
+}
+
+@define-mixin type-color $type, $color {
+  --$(type)-color: $color;
+  --$(type)-border-color: hsl(from $color h calc(s - 20) calc(l + 10));
+  --$(type)-dark-color: hsl(from $color h calc(s - 25) calc(l - 12));
+  --$(type)-link-color: hsl(from $color h calc(s + 10) calc(l + 45));
+}
+
+:root {
+  --background-color: $background-color;
+  --text-color: $text-color;
+
+  --link-color: hsl(from $primary-color h calc(s + 7) calc(l + 35));
+  --link-hover-color: $text-color;
+
+  --primary-color: $primary-color;
+  --primary-border-color: hsl(from $primary-color h calc(s - 20) calc(l + 10));
+  --primary-muted-color: hsl(from $primary-color h calc(s - 10) calc(l - 10));
+  --primary-dark-color: hsl(from $primary-color h calc(s - 15) calc(l - 20));
+
+  --secondary-color: $secondary-color;
+  --secondary-border-color: hsl(from $secondary-color h s calc(l + 10));
+  --secondary-muted-color: hsl(from $secondary-color h calc(s - 5) calc(l - 10));
+  --secondary-dark-color: hsl(from $secondary-color h s calc(l - 15));
+  --secondary-link-color: hsl(from $secondary-color h s calc(l + 55));
+
+  --upvote-color: $upvote-color;
+  --downvote-color: $downvote-color;
+  --fave-color: $fave-color;
+  --comment-color: $comment-color;
+  --hide-color: $hide-color;
+
+  --spoiler-color: $spoiler-color;
+  --spoiler-revealed-color: hsl(from $spoiler-color h s calc(l + 20));
+
+  @mixin type-color success, $success-color;
+  @mixin type-color warning, $warning-color;
+  @mixin type-color danger, $danger-color;
+  @mixin type-color information, $information-color;
+  @mixin type-color special, $special-color;
+
+  @mixin tag-color default, $tag-default-color;
+  @mixin tag-color error, $tag-error-color, 37;
+  @mixin tag-color rating, $tag-rating-color, 37;
+  @mixin tag-color origin, $tag-origin-color, 42;
+  @mixin tag-color character, $tag-character-color;
+  @mixin tag-color oc, $tag-oc-color, 40;
+  @mixin tag-color species, $tag-species-color, 37;
+  @mixin tag-color body-type, $tag-body-type-color, 45, 12;
+  @mixin tag-color content-fanmade, $tag-content-fanmade-color, 40;
+  @mixin tag-color content-official, $tag-content-official-color;
+  @mixin tag-color spoiler, $tag-spoiler-color;
+}
diff --git a/assets/css/themes/dark-blue.scss b/assets/css/themes/dark-blue.scss
deleted file mode 100644
index 6a4b1863..00000000
--- a/assets/css/themes/dark-blue.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-$background-color: #131a22;
-$text-color: #e0e0e0;
-
-$primary-color: #2e4c80;
-$secondary-color: #434f69;
-$danger-color: #672a21;
-$warning-color: #684f2c;
-$success-color: #25603e;
-$information-color: #205861;
-$special-color: #561e5e;
-
-$upvote-color: #5b9b26;
-$downvote-color: #da3412;
-$fave-color: #a18e27;
-$comment-color: #b099dd;
-$hide-color: #da3412;
-
-$tag-default-color: #1b3c21;
-$tag-error-color: #4f181d;
-$tag-rating-color: #113456;
-$tag-origin-color: #1d1858;
-$tag-character-color: #193f47;
-$tag-oc-color: #451f47;
-$tag-species-color: #362118;
-$tag-body-type-color: #393939;
-$tag-content-fanmade-color: #622c4e;
-$tag-content-official-color: #4b491c;
-$tag-spoiler-color: #4f3811;
-
-$spoiler-color: #0f0f0f;
-
-@mixin tag-color($tagname, $color, $text-percentage: 35%, $border-percentage: 15%) {
-  --tag-#{$tagname}-color: #{$color};
-  --tag-#{$tagname}-border-color: #{lighten($color, $border-percentage)};
-  --tag-#{$tagname}-text-color: #{lighten($color, $text-percentage)};
-}
-
-@mixin type-color($type, $color) {
-  --#{$type}-color: #{$color};
-  --#{$type}-border-color: #{lighten(desaturate($color, 20%), 10%)};
-  --#{$type}-dark-color: #{darken(desaturate($color, 25%), 12%)};
-  --#{$type}-link-color: #{lighten(saturate($color, 10%), 45%)};
-}
-
-:root {
-  --background-color: #{$background-color};
-  --text-color: #{$text-color};
-
-  --link-color: #{lighten(saturate($primary-color, 7%), 35%)};
-  --link-hover-color: #{$text-color};
-
-  --primary-color: #{$primary-color};
-  --primary-border-color: #{lighten(desaturate($primary-color, 20%), 10%)};
-  --primary-muted-color: #{darken(desaturate($primary-color, 10%), 10%)};
-  --primary-dark-color: #{darken(desaturate($primary-color, 15%), 20%)};
-
-  --secondary-color: #{$secondary-color};
-  --secondary-border-color: #{lighten($secondary-color, 10%)};
-  --secondary-muted-color: #{darken(desaturate($secondary-color, 5%), 10%)};
-  --secondary-dark-color: #{darken($secondary-color, 15%)};
-  --secondary-link-color: #{lighten($secondary-color, 55%)};
-
-  --upvote-color: #{$upvote-color};
-  --downvote-color: #{$downvote-color};
-  --fave-color: #{$fave-color};
-  --comment-color: #{$comment-color};
-  --hide-color: #{$hide-color};
-
-  --spoiler-color: #{$spoiler-color};
-  --spoiler-revealed-color: #{lighten($spoiler-color, 20%)};
-
-  @include type-color(success, $success-color);
-  @include type-color(warning, $warning-color);
-  @include type-color(danger, $danger-color);
-  @include type-color(information, $information-color);
-  @include type-color(special, $special-color);
-
-  @include tag-color(default, $tag-default-color);
-  @include tag-color(error, $tag-error-color, 37%);
-  @include tag-color(rating, $tag-rating-color, 37%);
-  @include tag-color(origin, $tag-origin-color, 42%);
-  @include tag-color(character, $tag-character-color);
-  @include tag-color(oc, $tag-oc-color, 40%);
-  @include tag-color(species, $tag-species-color, 37%);
-  @include tag-color(body-type, $tag-body-type-color, 45%, 12%);
-  @include tag-color(content-fanmade, $tag-content-fanmade-color, 40%);
-  @include tag-color(content-official, $tag-content-official-color);
-  @include tag-color(spoiler, $tag-spoiler-color);
-
-  /* Exceptions to mixin colors */
-  --tag-origin-border-color: #{lighten(desaturate($tag-origin-color, 10%), 22%)};
-}
diff --git a/assets/css/themes/dark-purple.scss b/assets/css/themes/dark-purple.scss
deleted file mode 100644
index b7364020..00000000
--- a/assets/css/themes/dark-purple.scss
+++ /dev/null
@@ -1,92 +0,0 @@
-$background-color: #1d1924;
-$text-color: #dadada;
-
-$primary-color: #3e2d5c;
-$secondary-color: #4f4066;
-$danger-color: #57261f;
-$warning-color: #5c472a;
-$success-color: #255339;
-$information-color: #1f5057;
-$special-color: #501f57;
-
-$upvote-color: #5b9b26;
-$downvote-color: #da3412;
-$fave-color: #a18e27;
-$comment-color: #b099dd;
-$hide-color: #da3412;
-
-$tag-default-color: #1b3c21;
-$tag-error-color: #4f181d;
-$tag-rating-color: #113456;
-$tag-origin-color: #1d1858;
-$tag-character-color: #193f47;
-$tag-oc-color: #451f47;
-$tag-species-color: #362118;
-$tag-body-type-color: #393939;
-$tag-content-fanmade-color: #622c4e;
-$tag-content-official-color: #4b491c;
-$tag-spoiler-color: #4f3811;
-
-$spoiler-color: #0f0f0f;
-
-@mixin tag-color($tagname, $color, $text-percentage: 35%, $border-percentage: 15%) {
-  --tag-#{$tagname}-color: #{$color};
-  --tag-#{$tagname}-border-color: #{lighten($color, $border-percentage)};
-  --tag-#{$tagname}-text-color: #{lighten($color, $text-percentage)};
-}
-
-@mixin type-color($type, $color) {
-  --#{$type}-color: #{$color};
-  --#{$type}-border-color: #{lighten(desaturate($color, 5%), 30%)};
-  --#{$type}-dark-color: #{darken($color, 15%)};
-  --#{$type}-link-color: #{lighten($color, 45%)};
-}
-
-:root {
-  --background-color: #{$background-color};
-  --text-color: #{$text-color};
-
-  --link-color: #{lighten(saturate($primary-color, 7%), 30%)};
-  --link-hover-color: #{$text-color};
-
-  --primary-color: #{$primary-color};
-  --primary-border-color: #{lighten($primary-color, 20%)};
-  --primary-muted-color: #{darken(desaturate($primary-color, 10%), 10%)};
-  --primary-dark-color: #{darken(desaturate($primary-color, 5%), 15%)};
-
-  --secondary-color: #{$secondary-color};
-  --secondary-border-color: #{lighten($secondary-color, 20%)};
-  --secondary-muted-color: #{darken(desaturate($secondary-color, 5%), 10%)};
-  --secondary-dark-color: #{darken($secondary-color, 15%)};
-  --secondary-link-color: #{lighten($secondary-color, 55%)};
-
-  --upvote-color: #{$upvote-color};
-  --downvote-color: #{$downvote-color};
-  --fave-color: #{$fave-color};
-  --comment-color: #{$comment-color};
-  --hide-color: #{$hide-color};
-
-  --spoiler-color: #{$spoiler-color};
-  --spoiler-revealed-color: #{lighten($spoiler-color, 20%)};
-
-  @include type-color(success, $success-color);
-  @include type-color(warning, $warning-color);
-  @include type-color(danger, $danger-color);
-  @include type-color(information, $information-color);
-  @include type-color(special, $special-color);
-
-  @include tag-color(default, $tag-default-color);
-  @include tag-color(error, $tag-error-color, 37%);
-  @include tag-color(rating, $tag-rating-color, 37%);
-  @include tag-color(origin, $tag-origin-color, 42%);
-  @include tag-color(character, $tag-character-color);
-  @include tag-color(oc, $tag-oc-color, 40%);
-  @include tag-color(species, $tag-species-color, 37%);
-  @include tag-color(body-type, $tag-body-type-color, 45%, 12%);
-  @include tag-color(content-fanmade, $tag-content-fanmade-color, 40%);
-  @include tag-color(content-official, $tag-content-official-color);
-  @include tag-color(spoiler, $tag-spoiler-color);
-
-  /* Exceptions to mixin colors */
-  --tag-origin-border-color: #{lighten(desaturate($tag-origin-color, 10%), 22%)};
-}
diff --git a/assets/css/views/_burger.scss b/assets/css/views/_burger.scss
deleted file mode 100644
index 3d692060..00000000
--- a/assets/css/views/_burger.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-// Temporary; todo: make it work
-#burger {
-  display: none;
-}
diff --git a/assets/css/views/_admin.scss b/assets/css/views/admin.css
similarity index 100%
rename from assets/css/views/_admin.scss
rename to assets/css/views/admin.css
diff --git a/assets/css/views/_approval.scss b/assets/css/views/approval.css
similarity index 94%
rename from assets/css/views/_approval.scss
rename to assets/css/views/approval.css
index 59349099..22f058b6 100644
--- a/assets/css/views/_approval.scss
+++ b/assets/css/views/approval.css
@@ -37,7 +37,7 @@
   line-height: 100%;
 }
 
-@media (max-width: $min_px_width_for_desktop_layout) {
+@mixin if-mobile {
   .approval-grid {
     grid-template-columns: 1fr;
     grid-template-rows: auto;
diff --git a/assets/css/views/burger.css b/assets/css/views/burger.css
new file mode 100644
index 00000000..c32f40e2
--- /dev/null
+++ b/assets/css/views/burger.css
@@ -0,0 +1,4 @@
+/* Temporary; todo: make it work */
+#burger {
+  display: none;
+}
diff --git a/assets/css/views/_communication.scss b/assets/css/views/communication.css
similarity index 92%
rename from assets/css/views/_communication.scss
rename to assets/css/views/communication.css
index 0968c4dd..152ca379 100644
--- a/assets/css/views/_communication.scss
+++ b/assets/css/views/communication.css
@@ -20,7 +20,8 @@
 }
 
 .communication-edit__actions {
-  @extend .flex__row;
+  display: flex;
+  flex-direction: row;
   line-height: var(--block-header-height);
   border: 0;
   margin: var(--padding-normal);
@@ -29,7 +30,8 @@
 }
 
 .communication__anonymous {
-  @extend .flex__row;
+  display: flex;
+  flex-direction: row;
   line-height: ar(--block-header-height);
   background: var(--secondary-color);
   border: 1px solid var(--secondary-border-color);
diff --git a/assets/css/views/_footer.scss b/assets/css/views/footer.css
similarity index 100%
rename from assets/css/views/_footer.scss
rename to assets/css/views/footer.css
diff --git a/assets/css/views/_header.scss b/assets/css/views/header.css
similarity index 93%
rename from assets/css/views/_header.scss
rename to assets/css/views/header.css
index 0b16dd94..496d6472 100644
--- a/assets/css/views/_header.scss
+++ b/assets/css/views/header.css
@@ -22,10 +22,9 @@ header {
 }
 
 .header__search {
-  @extend .flex;
-  @extend .flex--no-wrap;
-  @extend .flex--centered;
-
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
   border: 0;
   border-radius: var(--border-radius-inner);
   background: var(--primary-muted-color);
@@ -38,7 +37,7 @@ header {
 }
 
 .header__input {
-  @include animated-transition;
+  @mixin animated-transition;
   height: var(--navbar-input-size);
   font-size: var(--font-size);
   background: 0;
@@ -82,7 +81,7 @@ nav.dropdown__content {
   line-height: var(--navbar-secondary-size);
 }
 
-@include if-mobile {
+@mixin if-mobile {
   header {
     gap: var(--padding-normal);
     flex-wrap: wrap;
diff --git a/assets/css/views/_image.scss b/assets/css/views/image.css
similarity index 100%
rename from assets/css/views/_image.scss
rename to assets/css/views/image.css
diff --git a/assets/css/views/_markdown.scss b/assets/css/views/markdown.css
similarity index 93%
rename from assets/css/views/_markdown.scss
rename to assets/css/views/markdown.css
index cb6e4a9b..9d42aaa4 100644
--- a/assets/css/views/_markdown.scss
+++ b/assets/css/views/markdown.css
@@ -1,5 +1,6 @@
 .textile-syntax-reference {
-  @extend .flex__row;
+  display: flex;
+  flex-direction: row;
   line-height: var(--block-header-height);
   vertical-align: center;
   margin-bottom: var(--padding-small);
diff --git a/assets/css/views/_metabar.scss b/assets/css/views/metabar.css
similarity index 75%
rename from assets/css/views/_metabar.scss
rename to assets/css/views/metabar.css
index 491b721e..cf2c85b9 100644
--- a/assets/css/views/_metabar.scss
+++ b/assets/css/views/metabar.css
@@ -1,19 +1,19 @@
-@mixin fix-interaction($type) {
-  .interaction--#{$type} {
+@define-mixin fix-interaction $type {
+  .interaction--$(type) {
     padding: var(--padding-tiny) var(--padding-small);
   }
 }
 
-@include if-phone {
+@mixin if-phone {
   .metabar__interactions {
     display: grid;
     width: 100%;
     grid-template-columns: repeat(5, 1fr);
 
-    @include fix-interaction(fave);
-    @include fix-interaction(upvote);
-    @include fix-interaction(downvote);
-    @include fix-interaction(hide);
+    @mixin fix-interaction fave;
+    @mixin fix-interaction upvote;
+    @mixin fix-interaction downvote;
+    @mixin fix-interaction hide;
   }
 
   .metabar__interactions * {
@@ -42,7 +42,10 @@
 }
 
 .metabar {
-  @extend .flex__row--centered;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
   line-height: var(--block-header-height);
 }
 
diff --git a/assets/css/views/_pagination.scss b/assets/css/views/pagination.css
similarity index 100%
rename from assets/css/views/_pagination.scss
rename to assets/css/views/pagination.css
diff --git a/assets/css/views/_staff.scss b/assets/css/views/staff.css
similarity index 100%
rename from assets/css/views/_staff.scss
rename to assets/css/views/staff.css
diff --git a/assets/css/views/_statistics.scss b/assets/css/views/statistics.css
similarity index 89%
rename from assets/css/views/_statistics.scss
rename to assets/css/views/statistics.css
index 2ed1ab26..4a17e399 100644
--- a/assets/css/views/_statistics.scss
+++ b/assets/css/views/statistics.css
@@ -1,12 +1,13 @@
 .statistics {
-  @extend .flex__column;
+  display: flex;
+  flex-direction: column;
   border: 1.5px solid var(--secondary-color);
   border-radius: var(--border-radius-inner);
   overflow: hidden;
 }
 
 .statistics__statistic {
-  @include even-odd;
+  @mixin even-odd;
 
   display: grid;
   grid-template-columns: 15% 15% auto;
diff --git a/assets/css/views/_tag.scss b/assets/css/views/tag.css
similarity index 67%
rename from assets/css/views/_tag.scss
rename to assets/css/views/tag.css
index 3db65412..fb9d6bae 100644
--- a/assets/css/views/_tag.scss
+++ b/assets/css/views/tag.css
@@ -1,25 +1,26 @@
-@mixin tag-color($tag_type) {
-  &[data-tag-category=#{$tag_type}] {
-    color: var(--tag-#{$tag_type}-text-color);
-    background: var(--tag-#{$tag_type}-color);
-    border-color: var(--tag-#{$tag_type}-border-color);
+@define-mixin tag-color $tagtype {
+  &[data-tag-category=$(tagtype)] {
+    color: var(--tag-$(tagtype)-text-color);
+    background: var(--tag-$(tagtype)-color);
+    border-color: var(--tag-$(tagtype)-border-color);
 
     .tag__state {
-      color: var(--tag-#{$tag_type}-text-color);
+      color: var(--tag-$(tagtype)-text-color);
     }
 
     .tag__name {
-      color: var(--tag-#{$tag_type}-text-color);
+      color: var(--tag-$(tagtype)-text-color);
     }
 
     .tag__count {
-      background: var(--tag-#{$tag_type}-border-color);
+      background: var(--tag-$(tagtype)-border-color);
     }
   }
 }
 
 .tag-list {
-  @extend .flex__row;
+  display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   gap: var(--padding-small);
   margin-bottom: var(--padding-normal);
@@ -39,16 +40,16 @@
     color: inherit;
   }
 
-  @include tag-color(error);
-  @include tag-color(rating);
-  @include tag-color(origin);
-  @include tag-color(character);
-  @include tag-color(oc);
-  @include tag-color(species);
-  @include tag-color(body-type);
-  @include tag-color(content-fanmade);
-  @include tag-color(content-official);
-  @include tag-color(spoiler);
+  @mixin tag-color error;
+  @mixin tag-color rating;
+  @mixin tag-color origin;
+  @mixin tag-color character;
+  @mixin tag-color oc;
+  @mixin tag-color species;
+  @mixin tag-color body-type;
+  @mixin tag-color content-fanmade;
+  @mixin tag-color content-official;
+  @mixin tag-color spoiler;
 }
 
 .tag > span {
diff --git a/assets/js/app.js b/assets/js/app.js
index c06ad8d3..a64ec696 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -8,10 +8,3 @@
 // Our code
 import './ujs';
 import './when-ready';
-
-// Base stylesheet.
-import '../css/application.scss';
-
-// Themes.
-import '../css/themes/dark-blue.scss';
-import '../css/themes/dark-purple.scss';
diff --git a/assets/package-lock.json b/assets/package-lock.json
index 4138c85c..6092a760 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -5,7 +5,9 @@
   "packages": {
     "": {
       "dependencies": {
+        "@csstools/postcss-relative-color-syntax": "^2.0.14",
         "@fortawesome/fontawesome-free": "^6.5.2",
+        "@types/postcss-mixins": "^9.0.5",
         "@types/web": "^0.0.143",
         "@typescript-eslint/eslint-plugin": "^7.8.0",
         "@typescript-eslint/parser": "^7.8.0",
@@ -13,8 +15,10 @@
         "cross-env": "^7.0.3",
         "eslint": "^8.34.0",
         "jest-environment-jsdom": "^29.7.0",
-        "normalize-scss": "^8.0.0",
-        "sass": "^1.75.0",
+        "normalize.css": "^8.0.1",
+        "postcss-mixins": "^10.0.1",
+        "postcss-nested": "^6.0.1",
+        "postcss-simple-vars": "^7.0.1",
         "typescript": "^5.4",
         "vite": "^5.2"
       },
@@ -629,6 +633,184 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "node_modules/@csstools/color-helpers": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/@csstools/color-helpers/-/color-helpers-4.2.0.tgz",
+      "integrity": "sha512-hJJrSBzbfGxUsaR6X4Bzd/FLx0F1ulKnR5ljY9AiXCtsR+H+zSWQDFWlKES1BRaVZTDHLpIIHS9K2o0h+JLlrg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      }
+    },
+    "node_modules/@csstools/css-calc": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-calc/-/css-calc-1.2.0.tgz",
+      "integrity": "sha512-iQqIW5vDPqQdLx07/atCuNKDprhIWjB0b8XRhUyXZWBZYUG+9mNyFwyu30rypX84WLevVo25NYW2ipxR8WyseQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^2.6.1",
+        "@csstools/css-tokenizer": "^2.2.4"
+      }
+    },
+    "node_modules/@csstools/css-color-parser": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/css-color-parser/-/css-color-parser-2.0.0.tgz",
+      "integrity": "sha512-0/v6OPpcg+b8TJT2N1Rcp0oH5xEvVOU5K2qDkaR3IMHNXuJ7XfVCQLINt3Cuj8mr54DbilEoZ9uvAmHBoZ//Fw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/color-helpers": "^4.2.0",
+        "@csstools/css-calc": "^1.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-parser-algorithms": "^2.6.1",
+        "@csstools/css-tokenizer": "^2.2.4"
+      }
+    },
+    "node_modules/@csstools/css-parser-algorithms": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.6.1.tgz",
+      "integrity": "sha512-ubEkAaTfVZa+WwGhs5jbo5Xfqpeaybr/RvWzvFxRs4jfq16wH8l8Ty/QEEpINxll4xhuGfdMbipRyz5QZh9+FA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "@csstools/css-tokenizer": "^2.2.4"
+      }
+    },
+    "node_modules/@csstools/css-tokenizer": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.2.4.tgz",
+      "integrity": "sha512-PuWRAewQLbDhGeTvFuq2oClaSCKPIBmHyIobCV39JHRYN0byDcUWJl5baPeNUcqrjtdMNqFooE0FGl31I3JOqw==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      }
+    },
+    "node_modules/@csstools/postcss-progressive-custom-properties": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-progressive-custom-properties/-/postcss-progressive-custom-properties-3.2.0.tgz",
+      "integrity": "sha512-BZlirVxCRgKlE7yVme+Xvif72eTn1MYXj8oZ4Knb+jwaH4u3AN1DjbhM7j86RP5vvuAOexJ4JwfifYYKWMN/QQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/postcss-relative-color-syntax": {
+      "version": "2.0.14",
+      "resolved": "https://registry.npmjs.org/@csstools/postcss-relative-color-syntax/-/postcss-relative-color-syntax-2.0.14.tgz",
+      "integrity": "sha512-NlxgLjAjVCTUVGiWk8WNj3dKvux9eC6O5aLM3BmdA8UXEwBHYI9r4IqlanxG9PlcXnzhTUX6eZsqgmxwt4FPow==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "dependencies": {
+        "@csstools/css-color-parser": "^2.0.0",
+        "@csstools/css-parser-algorithms": "^2.6.1",
+        "@csstools/css-tokenizer": "^2.2.4",
+        "@csstools/postcss-progressive-custom-properties": "^3.2.0",
+        "@csstools/utilities": "^1.0.0"
+      },
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
+    "node_modules/@csstools/utilities": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@csstools/utilities/-/utilities-1.0.0.tgz",
+      "integrity": "sha512-tAgvZQe/t2mlvpNosA4+CkMiZ2azISW5WPAcdSalZlEjQvUfghHxfQcrCiK/7/CrfAWVxyM88kGFYO82heIGDg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/csstools"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/csstools"
+        }
+      ],
+      "engines": {
+        "node": "^14 || ^16 || >=18"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4"
+      }
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.20.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
@@ -1600,9 +1782,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.1.tgz",
-      "integrity": "sha512-P6Wg856Ou/DLpR+O0ZLneNmrv7QpqBg+hK4wE05ijbC/t349BRfMfx+UFj5Ha3fCFopIa6iSZlpdaB4agkWp2Q==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz",
+      "integrity": "sha512-NM0jFxY8bB8QLkoKxIQeObCaDlJKewVlIEkuyYKm5An1tdVZ966w2+MPQ2l8LBZLjR+SgyV+nRkTIunzOYBMLQ==",
       "cpu": [
         "arm"
       ],
@@ -1612,9 +1794,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.17.1.tgz",
-      "integrity": "sha512-piwZDjuW2WiHr05djVdUkrG5JbjnGbtx8BXQchYCMfib/nhjzWoiScelZ+s5IJI7lecrwSxHCzW026MWBL+oJQ==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.17.2.tgz",
+      "integrity": "sha512-yeX/Usk7daNIVwkq2uGoq2BYJKZY1JfyLTaHO/jaiSwi/lsf8fTFoQW/n6IdAsx5tx+iotu2zCJwz8MxI6D/Bw==",
       "cpu": [
         "arm64"
       ],
@@ -1624,9 +1806,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.17.1.tgz",
-      "integrity": "sha512-LsZXXIsN5Q460cKDT4Y+bzoPDhBmO5DTr7wP80d+2EnYlxSgkwdPfE3hbE+Fk8dtya+8092N9srjBTJ0di8RIA==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.17.2.tgz",
+      "integrity": "sha512-kcMLpE6uCwls023+kknm71ug7MZOrtXo+y5p/tsg6jltpDtgQY1Eq5sGfHcQfb+lfuKwhBmEURDga9N0ol4YPw==",
       "cpu": [
         "arm64"
       ],
@@ -1636,9 +1818,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.17.1.tgz",
-      "integrity": "sha512-S7TYNQpWXB9APkxu/SLmYHezWwCoZRA9QLgrDeml+SR2A1LLPD2DBUdUlvmCF7FUpRMKvbeeWky+iizQj65Etw==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.17.2.tgz",
+      "integrity": "sha512-AtKwD0VEx0zWkL0ZjixEkp5tbNLzX+FCqGG1SvOu993HnSz4qDI6S4kGzubrEJAljpVkhRSlg5bzpV//E6ysTQ==",
       "cpu": [
         "x64"
       ],
@@ -1648,9 +1830,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.17.1.tgz",
-      "integrity": "sha512-Lq2JR5a5jsA5um2ZoLiXXEaOagnVyCpCW7xvlcqHC7y46tLwTEgUSTM3a2TfmmTMmdqv+jknUioWXlmxYxE9Yw==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.17.2.tgz",
+      "integrity": "sha512-3reX2fUHqN7sffBNqmEyMQVj/CKhIHZd4y631duy0hZqI8Qoqf6lTtmAKvJFYa6bhU95B1D0WgzHkmTg33In0A==",
       "cpu": [
         "arm"
       ],
@@ -1660,9 +1842,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.17.1.tgz",
-      "integrity": "sha512-9BfzwyPNV0IizQoR+5HTNBGkh1KXE8BqU0DBkqMngmyFW7BfuIZyMjQ0s6igJEiPSBvT3ZcnIFohZ19OqjhDPg==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.17.2.tgz",
+      "integrity": "sha512-uSqpsp91mheRgw96xtyAGP9FW5ChctTFEoXP0r5FAzj/3ZRv3Uxjtc7taRQSaQM/q85KEKjKsZuiZM3GyUivRg==",
       "cpu": [
         "arm"
       ],
@@ -1672,9 +1854,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.17.1.tgz",
-      "integrity": "sha512-e2uWaoxo/rtzA52OifrTSXTvJhAXb0XeRkz4CdHBK2KtxrFmuU/uNd544Ogkpu938BzEfvmWs8NZ8Axhw33FDw==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.17.2.tgz",
+      "integrity": "sha512-EMMPHkiCRtE8Wdk3Qhtciq6BndLtstqZIroHiiGzB3C5LDJmIZcSzVtLRbwuXuUft1Cnv+9fxuDtDxz3k3EW2A==",
       "cpu": [
         "arm64"
       ],
@@ -1684,9 +1866,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.17.1.tgz",
-      "integrity": "sha512-ekggix/Bc/d/60H1Mi4YeYb/7dbal1kEDZ6sIFVAE8pUSx7PiWeEh+NWbL7bGu0X68BBIkgF3ibRJe1oFTksQQ==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.17.2.tgz",
+      "integrity": "sha512-NMPylUUZ1i0z/xJUIx6VUhISZDRT+uTWpBcjdv0/zkp7b/bQDF+NfnfdzuTiB1G6HTodgoFa93hp0O1xl+/UbA==",
       "cpu": [
         "arm64"
       ],
@@ -1696,9 +1878,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.17.1.tgz",
-      "integrity": "sha512-UGV0dUo/xCv4pkr/C8KY7XLFwBNnvladt8q+VmdKrw/3RUd3rD0TptwjisvE2TTnnlENtuY4/PZuoOYRiGp8Gw==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.17.2.tgz",
+      "integrity": "sha512-T19My13y8uYXPw/L/k0JYaX1fJKFT/PWdXiHr8mTbXWxjVF1t+8Xl31DgBBvEKclw+1b00Chg0hxE2O7bTG7GQ==",
       "cpu": [
         "ppc64"
       ],
@@ -1708,9 +1890,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.17.1.tgz",
-      "integrity": "sha512-gEYmYYHaehdvX46mwXrU49vD6Euf1Bxhq9pPb82cbUU9UT2NV+RSckQ5tKWOnNXZixKsy8/cPGtiUWqzPuAcXQ==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.17.2.tgz",
+      "integrity": "sha512-BOaNfthf3X3fOWAB+IJ9kxTgPmMqPPH5f5k2DcCsRrBIbWnaJCgX2ll77dV1TdSy9SaXTR5iDXRL8n7AnoP5cg==",
       "cpu": [
         "riscv64"
       ],
@@ -1720,9 +1902,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.17.1.tgz",
-      "integrity": "sha512-xeae5pMAxHFp6yX5vajInG2toST5lsCTrckSRUFwNgzYqnUjNBcQyqk1bXUxX5yhjWFl2Mnz3F8vQjl+2FRIcw==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.17.2.tgz",
+      "integrity": "sha512-W0UP/x7bnn3xN2eYMql2T/+wpASLE5SjObXILTMPUBDB/Fg/FxC+gX4nvCfPBCbNhz51C+HcqQp2qQ4u25ok6g==",
       "cpu": [
         "s390x"
       ],
@@ -1732,9 +1914,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.17.1.tgz",
-      "integrity": "sha512-AsdnINQoDWfKpBzCPqQWxSPdAWzSgnYbrJYtn6W0H2E9It5bZss99PiLA8CgmDRfvKygt20UpZ3xkhFlIfX9zQ==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.17.2.tgz",
+      "integrity": "sha512-Hy7pLwByUOuyaFC6mAr7m+oMC+V7qyifzs/nW2OJfC8H4hbCzOX07Ov0VFk/zP3kBsELWNFi7rJtgbKYsav9QQ==",
       "cpu": [
         "x64"
       ],
@@ -1744,9 +1926,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.17.1.tgz",
-      "integrity": "sha512-KoB4fyKXTR+wYENkIG3fFF+5G6N4GFvzYx8Jax8BR4vmddtuqSb5oQmYu2Uu067vT/Fod7gxeQYKupm8gAcMSQ==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.17.2.tgz",
+      "integrity": "sha512-h1+yTWeYbRdAyJ/jMiVw0l6fOOm/0D1vNLui9iPuqgRGnXA0u21gAqOyB5iHjlM9MMfNOm9RHCQ7zLIzT0x11Q==",
       "cpu": [
         "x64"
       ],
@@ -1756,9 +1938,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.17.1.tgz",
-      "integrity": "sha512-J0d3NVNf7wBL9t4blCNat+d0PYqAx8wOoY+/9Q5cujnafbX7BmtYk3XvzkqLmFECaWvXGLuHmKj/wrILUinmQg==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.17.2.tgz",
+      "integrity": "sha512-tmdtXMfKAjy5+IQsVtDiCfqbynAQE/TQRpWdVataHmhMb9DCoJxp9vLcCBjEQWMiUYxO1QprH/HbY9ragCEFLA==",
       "cpu": [
         "arm64"
       ],
@@ -1768,9 +1950,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.17.1.tgz",
-      "integrity": "sha512-xjgkWUwlq7IbgJSIxvl516FJ2iuC/7ttjsAxSPpC9kkI5iQQFHKyEN5BjbhvJ/IXIZ3yIBcW5QDlWAyrA+TFag==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.17.2.tgz",
+      "integrity": "sha512-7II/QCSTAHuE5vdZaQEwJq2ZACkBpQDOmQsE6D6XUbnBHW8IAhm4eTufL6msLJorzrHDFv3CF8oCA/hSIRuZeQ==",
       "cpu": [
         "ia32"
       ],
@@ -1780,9 +1962,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.17.1.tgz",
-      "integrity": "sha512-0QbCkfk6cnnVKWqqlC0cUrrUMDMfu5ffvYMTUHf+qMN2uAb3MKP31LPcwiMXBNsvoFGs/kYdFOsuLmvppCopXA==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.17.2.tgz",
+      "integrity": "sha512-TGGO7v7qOq4CYmSBVEYpI1Y5xDuCEnbVC5Vth8mOsW0gDSzxNrVERPc790IGHsrT2dQSimgMr9Ub3Y1Jci5/8w==",
       "cpu": [
         "x64"
       ],
@@ -2050,6 +2232,14 @@
         "undici-types": "~5.26.4"
       }
     },
+    "node_modules/@types/postcss-mixins": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/@types/postcss-mixins/-/postcss-mixins-9.0.5.tgz",
+      "integrity": "sha512-xtHiTGjIV6kr/7j+U682Hz8szSjzp0T606k/OMS4/mrjHZvovBs+ceKllzpOzQLAB8mXmgeJI6K5AbcPh16lsA==",
+      "dependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
     "node_modules/@types/semver": {
       "version": "7.5.8",
       "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz",
@@ -2391,6 +2581,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -2583,17 +2774,6 @@
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
     },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/brace-expansion": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
@@ -2688,6 +2868,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001614",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001614.tgz",
@@ -2731,40 +2919,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/ci-info": {
       "version": "3.9.0",
       "resolved": "https://registry.npmjs.org/ci-info/-/ci-info-3.9.0.tgz",
@@ -2919,6 +3073,17 @@
       "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
       "dev": true
     },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/cssom": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@@ -3961,11 +4126,6 @@
         "node": ">= 4"
       }
     },
-    "node_modules/immutable": {
-      "version": "4.3.5",
-      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
-      "integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw=="
-    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -4037,17 +4197,6 @@
       "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
       "dev": true
     },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-core-module": {
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
@@ -4852,16 +5001,6 @@
         "node": "^14.15.0 || ^16.10.0 || >=18.0.0"
       }
     },
-    "node_modules/jest-runner/node_modules/source-map-support": {
-      "version": "0.5.13",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
-      "integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
-      "dev": true,
-      "dependencies": {
-        "buffer-from": "^1.0.0",
-        "source-map": "^0.6.0"
-      }
-    },
     "node_modules/jest-runtime": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-29.7.0.tgz",
@@ -5473,6 +5612,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5485,10 +5625,10 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/normalize-scss": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-scss/-/normalize-scss-8.0.0.tgz",
-      "integrity": "sha512-C6GXIxQ2LOYWrde27xWbONavmybobxp+V6TY8BiBJw5M+yMNEg2R0WjaeDtmP5JsunFYKvFOvgMAIC0/OxZuJQ=="
+    "node_modules/normalize.css": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz",
+      "integrity": "sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg=="
     },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
@@ -5777,6 +5917,96 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/postcss-js": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
+      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-mixins": {
+      "version": "10.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-mixins/-/postcss-mixins-10.0.1.tgz",
+      "integrity": "sha512-5+cI9r8L5ChegVsLM9pXa53Ft03Mt9xAq+kvzqfrUHGPCArVGOfUvmQK2CLP3XWWP2dqxDLQI+lIcXG+GTqOBQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "fast-glob": "^3.3.2",
+        "postcss-js": "^4.0.1",
+        "postcss-simple-vars": "^7.0.1",
+        "sugarss": "^4.0.1"
+      },
+      "engines": {
+        "node": "^18.0 || >= 20.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
+      "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.11"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.16",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.16.tgz",
+      "integrity": "sha512-A0RVJrX+IUkVZbW3ClroRWurercFhieevHB38sr2+l9eUClMqome3LmEmnhlNy+5Mr2EYN6B2Kaw9wYdd+VHiw==",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-simple-vars": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz",
+      "integrity": "sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==",
+      "engines": {
+        "node": ">=14.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.1"
+      }
+    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -5894,17 +6124,6 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
     "node_modules/redent": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
@@ -6026,9 +6245,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.17.1.tgz",
-      "integrity": "sha512-0gG94inrUtg25sB2V/pApwiv1lUb0bQ25FPNuzO89Baa+B+c0ccaaBKM5zkZV/12pUUdH+lWCSm9wmHqyocuVQ==",
+      "version": "4.17.2",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.17.2.tgz",
+      "integrity": "sha512-/9ClTJPByC0U4zNLowV1tMBe8yMEAxewtR3cUNX5BoEpGH3dQEWpJLr6CLp0fPdYRF/fzVOgvDb1zXuakwF5kQ==",
       "dependencies": {
         "@types/estree": "1.0.5"
       },
@@ -6040,22 +6259,22 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.17.1",
-        "@rollup/rollup-android-arm64": "4.17.1",
-        "@rollup/rollup-darwin-arm64": "4.17.1",
-        "@rollup/rollup-darwin-x64": "4.17.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.17.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.17.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.17.1",
-        "@rollup/rollup-linux-arm64-musl": "4.17.1",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.17.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.17.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.17.1",
-        "@rollup/rollup-linux-x64-gnu": "4.17.1",
-        "@rollup/rollup-linux-x64-musl": "4.17.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.17.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.17.1",
-        "@rollup/rollup-win32-x64-msvc": "4.17.1",
+        "@rollup/rollup-android-arm-eabi": "4.17.2",
+        "@rollup/rollup-android-arm64": "4.17.2",
+        "@rollup/rollup-darwin-arm64": "4.17.2",
+        "@rollup/rollup-darwin-x64": "4.17.2",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.17.2",
+        "@rollup/rollup-linux-arm-musleabihf": "4.17.2",
+        "@rollup/rollup-linux-arm64-gnu": "4.17.2",
+        "@rollup/rollup-linux-arm64-musl": "4.17.2",
+        "@rollup/rollup-linux-powerpc64le-gnu": "4.17.2",
+        "@rollup/rollup-linux-riscv64-gnu": "4.17.2",
+        "@rollup/rollup-linux-s390x-gnu": "4.17.2",
+        "@rollup/rollup-linux-x64-gnu": "4.17.2",
+        "@rollup/rollup-linux-x64-musl": "4.17.2",
+        "@rollup/rollup-win32-arm64-msvc": "4.17.2",
+        "@rollup/rollup-win32-ia32-msvc": "4.17.2",
+        "@rollup/rollup-win32-x64-msvc": "4.17.2",
         "fsevents": "~2.3.2"
       }
     },
@@ -6086,22 +6305,6 @@
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
-    "node_modules/sass": {
-      "version": "1.75.0",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.75.0.tgz",
-      "integrity": "sha512-ShMYi3WkrDWxExyxSZPst4/okE9ts46xZmJDSawJQrnte7M1V9fScVB+uNXOVKRBt0PggHOwoZcn8mYX4trnBw==",
-      "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0",
-        "immutable": "^4.0.0",
-        "source-map-js": ">=0.6.2 <2.0.0"
-      },
-      "bin": {
-        "sass": "sass.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-6.0.0.tgz",
@@ -6199,6 +6402,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-support": {
+      "version": "0.5.13",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.13.tgz",
+      "integrity": "sha512-SHSKFHadjVA5oR4PPqhtAVdcBWwRYVd6g6cAXnIbRiIwc2EhPrTuKUBdSLvlEKyIP3GCf89fltvcZiP9MMFA1w==",
+      "dev": true,
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "source-map": "^0.6.0"
+      }
+    },
     "node_modules/sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
@@ -6303,6 +6516,21 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/sugarss": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz",
+      "integrity": "sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==",
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -6578,6 +6806,11 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+    },
     "node_modules/v8-to-istanbul": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-9.2.0.tgz",
diff --git a/assets/package.json b/assets/package.json
index d1062cf1..6c8742c0 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -10,7 +10,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@csstools/postcss-relative-color-syntax": "^2.0.14",
     "@fortawesome/fontawesome-free": "^6.5.2",
+    "@types/postcss-mixins": "^9.0.5",
     "@types/web": "^0.0.143",
     "@typescript-eslint/eslint-plugin": "^7.8.0",
     "@typescript-eslint/parser": "^7.8.0",
@@ -18,8 +20,10 @@
     "cross-env": "^7.0.3",
     "eslint": "^8.34.0",
     "jest-environment-jsdom": "^29.7.0",
-    "normalize-scss": "^8.0.0",
-    "sass": "^1.75.0",
+    "normalize.css": "^8.0.1",
+    "postcss-mixins": "^10.0.1",
+    "postcss-nested": "^6.0.1",
+    "postcss-simple-vars": "^7.0.1",
     "typescript": "^5.4",
     "vite": "^5.2"
   },
diff --git a/assets/vite.config.ts b/assets/vite.config.ts
index 7d5acb49..fcb01836 100644
--- a/assets/vite.config.ts
+++ b/assets/vite.config.ts
@@ -1,6 +1,10 @@
 import fs from 'fs';
 import path from 'path';
 import autoprefixer from 'autoprefixer';
+import postcssMixins from 'postcss-mixins';
+import postcssNested from 'postcss-nested';
+import postcssSimpleVars from 'postcss-simple-vars';
+import postcssRelativeColor from '@csstools/postcss-relative-color-syntax';
 import { defineConfig, UserConfig, ConfigEnv } from 'vite';
 
 export default defineConfig(({ command }: ConfigEnv): UserConfig => {
@@ -17,7 +21,7 @@ export default defineConfig(({ command }: ConfigEnv): UserConfig => {
 
   const themeNames =
     fs.readdirSync(path.resolve(__dirname, 'css/themes/')).map(name => {
-      const m = name.match(/([-a-z]+).scss/);
+      const m = name.match(/([-a-z]+).css/);
 
       if (m) { return m[1]; }
       return null;
@@ -26,7 +30,7 @@ export default defineConfig(({ command }: ConfigEnv): UserConfig => {
   const themes = new Map();
 
   for (const name of themeNames) {
-    themes.set(`css/${name}`, `./css/themes/${name}.scss`);
+    themes.set(`css/${name}`, `./css/themes/${name}.css`);
   }
 
   return {
@@ -50,7 +54,7 @@ export default defineConfig(({ command }: ConfigEnv): UserConfig => {
       rollupOptions: {
         input: {
           'js/app': './js/app.js',
-          'css/application': './css/application.scss',
+          'css/application': './css/application.css',
           ...Object.fromEntries(themes)
         },
         output: {
@@ -62,7 +66,7 @@ export default defineConfig(({ command }: ConfigEnv): UserConfig => {
     },
     css: {
       postcss:  {
-        plugins: [autoprefixer]
+        plugins: [postcssMixins(), postcssNested(), postcssSimpleVars, postcssRelativeColor(), autoprefixer]
       }
     }
   };