[chore] upgrade mini-css-extract-plugin to 2.9.4

[build] upgrade to sass 1.93.2 / sass-loader 16.0.5
2025-10-17 01:14:35 +02:00 · 2025-10-17 01:13:21 +02:00
61 changed files with 536 additions and 746 deletions
@@ -1,5 +1,3 @@
-@use "variables" as *;
-
@mixin avatar-radius() {
  border-radius: $ui-avatar-border-size;
  background-position: 50%;
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "mixins" as *;
-@use "variables" as *;
-
 $maximum-width: 1235px;
 $fluid-breakpoint: $maximum-width + 20px;

@@ -30,7 +26,7 @@ $fluid-breakpoint: $maximum-width + 20px;

  li {
    position: relative;
-    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
    padding: 1em 1.75em;
    padding-inline-start: 3em;
    font-weight: 500;
@@ -1,6 +1,3 @@
-@use "mixins" as *;
-@use "variables" as *;
-
 $emojis-requiring-inversion: "back" "copyright" "curly_loop" "currency_exchange"
  "end" "heavy_check_mark" "heavy_division_sign" "heavy_dollar_sign"
  "heavy_minus_sign" "heavy_multiplication_x" "heavy_plus_sign" "on"
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "mixins" as *;
-@use "variables" as *;
-
 .card {
  & > a {
    display: block;
@@ -14,7 +10,7 @@
    &:active,
    &:focus {
      .card__bar {
-        background: color.adjust($ui-base-color, $lightness: 8%);
+        background: lighten($ui-base-color, 8%);
      }
    }
  }
@@ -22,7 +18,7 @@
  &__img {
    height: 130px;
    position: relative;
-    background: color.adjust($ui-base-color, $lightness: -12%);
+    background: darken($ui-base-color, 12%);

    img {
      display: block;
@@ -43,7 +39,7 @@
    display: flex;
    justify-content: flex-start;
    align-items: center;
-    background: color.adjust($ui-base-color, $lightness: 4%);
+    background: lighten($ui-base-color, 4%);

    .avatar {
      flex: 0 0 auto;
@@ -61,7 +57,7 @@
        border-radius: 4px;
        @include avatar-radius;

-        background: color.adjust($ui-base-color, $lightness: -8%);
+        background: darken($ui-base-color, 8%);
        object-fit: cover;
      }
    }
@@ -153,7 +149,7 @@

  .disabled {
    cursor: default;
-    color: color.adjust($inverted-text-color, $lightness: 10%);
+    color: lighten($inverted-text-color, 10%);
  }

  @media screen and (width <= 700px) {
@@ -219,22 +215,22 @@
  }

  &.admin {
-    color: color.adjust($error-red, $lightness: 12%);
-    background-color: rgba(color.adjust($error-red, $lightness: 12%), 0.1);
-    border-color: rgba(color.adjust($error-red, $lightness: 12%), 0.5);
+    color: lighten($error-red, 12%);
+    background-color: rgba(lighten($error-red, 12%), 0.1);
+    border-color: rgba(lighten($error-red, 12%), 0.5);
  }
 }

 .simple_form .not_recommended {
-  color: color.adjust($error-red, $lightness: 12%);
-  background-color: rgba(color.adjust($error-red, $lightness: 12%), 0.1);
-  border-color: rgba(color.adjust($error-red, $lightness: 12%), 0.5);
+  color: lighten($error-red, 12%);
+  background-color: rgba(lighten($error-red, 12%), 0.1);
+  border-color: rgba(lighten($error-red, 12%), 0.5);
 }

 .simple_form .glitch_only {
-  color: color.adjust($warning-red, $lightness: 12%);
-  background-color: rgba(color.adjust($warning-red, $lightness: 12%), 0.1);
-  border-color: rgba(color.adjust($warning-red, $lightness: 12%), 0.5);
+  color: lighten($warning-red, 12%);
+  background-color: rgba(lighten($warning-red, 12%), 0.1);
+  border-color: rgba(lighten($warning-red, 12%), 0.5);
 }

 .account__header__fields {
@@ -242,14 +238,14 @@
  padding: 0;
  margin: 15px -15px -15px;
  border: 0 none;
-  border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
+  border-top: 1px solid lighten($ui-base-color, 12%);
+  border-bottom: 1px solid lighten($ui-base-color, 12%);
  font-size: 14px;
  line-height: 20px;

  dl {
    display: flex;
-    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
+    border-bottom: 1px solid lighten($ui-base-color, 12%);
  }

  dt,
@@ -268,7 +264,7 @@
    width: 120px;
    flex: 0 0 auto;
    color: $secondary-text-color;
-    background: rgba(color.adjust($ui-base-color, $lightness: -8%), 0.5);
+    background: rgba(darken($ui-base-color, 8%), 0.5);
  }

  dd {
@@ -337,7 +333,7 @@
 }

 .batch-table__row--muted {
-  color: color.adjust($ui-base-color, $lightness: 26%);
+  color: lighten($ui-base-color, 26%);
 }

 .batch-table__row--muted .pending-account__header,
@@ -346,7 +342,7 @@
  &,
  a,
  strong {
-    color: color.adjust($ui-base-color, $lightness: 26%);
+    color: lighten($ui-base-color, 26%);
  }
 }

@@ -358,7 +354,7 @@
  tbody td.accounts-table__extra,
  &__count,
  &__count small {
-    color: color.adjust($ui-base-color, $lightness: 26%);
+    color: lighten($ui-base-color, 26%);
  }
 }

@@ -1,7 +1,4 @@
-@use "sass:color";
@use "sass:math";
-@use "mixins" as *;
-@use "variables" as *;

 $no-columns-breakpoint: 600px;
 $sidebar-width: 240px;
@@ -34,8 +31,8 @@ $content-width: 840px;

    &__toggle {
      display: none;
-      background: color.adjust($ui-base-color, $lightness: -4%);
-      border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
+      background: darken($ui-base-color, 4%);
+      border-bottom: 1px solid lighten($ui-base-color, 4%);
      align-items: center;

      &__logo {
@@ -125,7 +122,7 @@ $content-width: 840px;

        &:hover {
          color: $primary-text-color;
-          background-color: color.adjust($ui-base-color, $lightness: -5%);
+          background-color: darken($ui-base-color, 5%);
          transition: all 100ms linear;
          transition-property: color, background-color;
        }
@@ -136,7 +133,7 @@ $content-width: 840px;
      }

      ul {
-        background: color.adjust($ui-base-color, $lightness: -4%);
+        background: darken($ui-base-color, 4%);
        border-radius: 0 0 0 4px;
        margin: 0;

@@ -242,7 +239,7 @@ $content-width: 840px;
          &:hover,
          &:focus,
          &:active {
-            background: color.adjust($ui-base-color, $lightness: 4%);
+            background: lighten($ui-base-color, 4%);
          }

          &.selected {
@@ -295,7 +292,7 @@ $content-width: 840px;
      color: $darker-text-color;
      padding-bottom: 8px;
      margin-bottom: 8px;
-      border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+      border-bottom: 1px solid lighten($ui-base-color, 8%);
    }

    h6 {
@@ -396,7 +393,7 @@ $content-width: 840px;
      ul a,
      ul ul a {
        border-radius: 0;
-        border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
+        border-bottom: 1px solid lighten($ui-base-color, 4%);
        transition: none;

        &:hover {
@@ -524,7 +521,7 @@ body,

      &:hover {
        color: $primary-text-color;
-        border-bottom: 2px solid color.adjust($ui-base-color, $lightness: 5%);
+        border-bottom: 2px solid lighten($ui-base-color, 5%);
      }

      &.selected {
@@ -695,7 +692,7 @@ body,
  padding: 15px;
  padding-inline-start: 15px * 2 + 40px;
  background: $ui-base-color;
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
+  border-bottom: 1px solid darken($ui-base-color, 8%);
  position: relative;
  text-decoration: none;
  color: $darker-text-color;
@@ -715,7 +712,7 @@ body,
  &:hover,
  &:focus,
  &:active {
-    background: color.adjust($ui-base-color, $lightness: 4%);
+    background: lighten($ui-base-color, 4%);
  }

  &__avatar {
@@ -769,7 +766,7 @@ a.inline-name-tag,
  &.suspended {
    .username {
      text-decoration: line-through;
-      color: color.adjust($error-red, $lightness: 12%);
+      color: lighten($error-red, 12%);
    }

    .avatar {
@@ -809,7 +806,7 @@ a.name-tag,
  }

  &.negative {
-    border-left-color: color.adjust($error-red, $lightness: 12%);
+    border-left-color: lighten($error-red, 12%);
  }

  &.warning {
@@ -874,7 +871,7 @@ a.name-tag,
        &:focus,
        &:hover,
        &:active {
-          color: color.adjust($darker-text-color, $lightness: 8%);
+          color: lighten($darker-text-color, 8%);
        }
      }

@@ -888,10 +885,10 @@ a.name-tag,
    &__item {
      display: flex;
      justify-content: flex-start;
-      border-top: 1px solid color.adjust($ui-base-color, $lightness: -4%);
+      border-top: 1px solid darken($ui-base-color, 4%);

      &:hover {
-        background: color.adjust($ui-base-color, $lightness: 2%);
+        background: lighten($ui-base-color, 2%);
      }

      &__reported-by,
@@ -963,7 +960,7 @@ a.name-tag,

  .account__header__fields,
  .account__header__content {
-    background: color.adjust($ui-base-color, $lightness: 8%);
+    background: lighten($ui-base-color, 8%);
    border-radius: 4px;
    height: 100%;
  }
@@ -1000,7 +997,7 @@ a.name-tag,
 .filters-list__item {
  padding: 15px 0;
  background: $ui-base-color;
-  border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
+  border: 1px solid lighten($ui-base-color, 4%);
  border-radius: 4px;
  margin-top: 15px;
 }
@@ -1011,13 +1008,13 @@ a.name-tag,

 .announcements-list,
 .filters-list {
-  border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
+  border: 1px solid lighten($ui-base-color, 4%);
  border-radius: 4px;

  &__item {
    padding: 15px 0;
    background: $ui-base-color;
-    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
+    border-bottom: 1px solid lighten($ui-base-color, 4%);

    &__title {
      padding: 0 15px;
@@ -1092,7 +1089,7 @@ a.name-tag,

  &.expired {
    .expiration {
-      color: color.adjust($error-red, $lightness: 12%);
+      color: lighten($error-red, 12%);
    }

    .permissions-list__item__icon {
@@ -1168,7 +1165,7 @@ a.name-tag,
 .sparkline {
  display: block;
  text-decoration: none;
-  background: color.adjust($ui-base-color, $lightness: 4%);
+  background: lighten($ui-base-color, 4%);
  border-radius: 4px;
  padding: 0;
  position: relative;
@@ -1231,7 +1228,7 @@ a.name-tag,
    }

    path:last-child {
-      stroke: color.adjust($highlight-text-color, $lightness: 6%) !important;
+      stroke: lighten($highlight-text-color, 6%) !important;
      fill: none !important;
    }
  }
@@ -1241,17 +1238,17 @@ a.sparkline {
  &:hover,
  &:focus,
  &:active {
-    background: color.adjust($ui-base-color, $lightness: 6%);
+    background: lighten($ui-base-color, 6%);
  }
 }

 .skeleton {
-  background-color: color.adjust($ui-base-color, $lightness: 8%);
+  background-color: lighten($ui-base-color, 8%);
  background-image: linear-gradient(
    90deg,
-    color.adjust($ui-base-color, $lightness: 8%),
-    color.adjust($ui-base-color, $lightness: 12%),
-    color.adjust($ui-base-color, $lightness: 8%)
+    lighten($ui-base-color, 8%),
+    lighten($ui-base-color, 12%),
+    lighten($ui-base-color, 8%)
  );
  background-size: 200px 100%;
  background-repeat: no-repeat;
@@ -1278,7 +1275,7 @@ a.sparkline {
  }

  &__item {
-    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
+    border-bottom: 1px solid lighten($ui-base-color, 4%);

    &__key {
      font-weight: 500;
@@ -1331,7 +1328,7 @@ a.sparkline {

  &__category {
    cursor: pointer;
-    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
+    border-bottom: 1px solid darken($ui-base-color, 8%);

    &:last-child {
      border-bottom: 0;
@@ -1359,7 +1356,7 @@ a.sparkline {

  &__details {
    &__item {
-      border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+      border-bottom: 1px solid lighten($ui-base-color, 8%);
      padding: 15px 0;

      &:last-child {
@@ -1408,7 +1405,7 @@ a.sparkline {
      width: 100%;
      height: 100%;
      object-fit: cover;
-      background: color.adjust($ui-base-color, $lightness: -8%);
+      background: darken($ui-base-color, 8%);
    }
  }

@@ -1426,7 +1423,7 @@ a.sparkline {
        margin: 0;
        width: 56px;
        height: 56px;
-        background-color: color.adjust($ui-base-color, $lightness: -8%);
+        background-color: darken($ui-base-color, 8%);
        border-radius: 8px;
        border: 1px solid $ui-base-color;
      }
@@ -1545,7 +1542,7 @@ a.sparkline {
    position: relative;
    padding: 15px;
    padding-inline-start: 15px * 2 + 40px;
-    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
+    border-bottom: 1px solid darken($ui-base-color, 8%);

    &:first-child {
      border-top-left-radius: 4px;
@@ -1559,7 +1556,7 @@ a.sparkline {
    }

    &:hover {
-      background-color: color.adjust($ui-base-color, $lightness: 4%);
+      background-color: lighten($ui-base-color, 4%);
    }

    &__avatar {
@@ -1637,13 +1634,13 @@ a.sparkline {
 }

 .report-actions {
-  border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
+  border: 1px solid darken($ui-base-color, 8%);

  &__item {
    display: flex;
    align-items: center;
    line-height: 18px;
-    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
+    border-bottom: 1px solid darken($ui-base-color, 8%);

    &:last-child {
      border-bottom: 0;
@@ -1755,15 +1752,15 @@ a.sparkline {

  &__statuses-list {
    border-radius: 4px;
-    border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
+    border: 1px solid darken($ui-base-color, 8%);
    font-size: 13px;
    line-height: 18px;
    overflow: hidden;

    &__item {
      padding: 16px;
-      background: color.adjust($ui-base-color, $lightness: 2%);
-      border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
+      background: lighten($ui-base-color, 2%);
+      border-bottom: 1px solid darken($ui-base-color, 8%);

      &:last-child {
        border-bottom: 0;
@@ -1807,7 +1804,7 @@ a.sparkline {
      flex: 0 0 auto;
      width: 4px;
      height: 21px;
-      background: color.adjust($ui-base-color, $lightness: 8%);
+      background: lighten($ui-base-color, 8%);
      margin: 0 2px;
      border-radius: 2px;

@@ -1879,7 +1876,7 @@ a.sparkline {
    }

    .status {
-      border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
+      border: 1px solid lighten($ui-base-color, 4%);
      background: $ui-base-color;
      border-radius: 4px;
    }
@@ -1,15 +1,9 @@
-@use "sass:meta";
-@use "sass:string";
-@use "sass:color";
-@use "mixins" as *;
-@use "variables" as *;
-
@function hex-color($color) {
-  @if meta.type-of($color) == "color" {
-    $color: string.slice(color.ie-hex-str($color), 4);
+  @if type-of($color) == "color" {
+    $color: str-slice(ie-hex-str($color), 4);
  }

-  @return "%23" + string.unquote($color);
+  @return "%23" + unquote($color);
 }

 body {
@@ -115,7 +109,7 @@ body {
  }

  &.embed {
-    background: color.scale($ui-base-color, $lightness: 4%);
+    background: lighten($ui-base-color, 4%);
    margin: 0;
    padding-bottom: 0;

@@ -128,7 +122,7 @@ body {
  }

  &.admin {
-    background: color.adjust($ui-base-color, $lightness: -4%);
+    background: darken($ui-base-color, 4%);
    padding: 0;
  }

@@ -212,7 +206,7 @@ button {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
-  color: color.adjust($error-red, $lightness: 4%);
+  color: lighten($error-red, 4%);
  text-align: center;

  & > div {
@@ -1,5 +1,3 @@
-@use "variables" as *;
-
 .logo {
  color: $primary-text-color;
 }
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .image {
  position: relative;
  overflow: hidden;
@@ -88,7 +84,7 @@
      width: 100%;
      height: auto;
      aspect-ratio: 1.9;
-      background: color.adjust($ui-base-color, $lightness: 4%);
+      background: lighten($ui-base-color, 4%);
      border-radius: 8px;
      margin-bottom: 30px;
    }
@@ -114,7 +110,7 @@
  }

  &__meta {
-    background: color.adjust($ui-base-color, $lightness: 4%);
+    background: lighten($ui-base-color, 4%);
    border-radius: 4px;
    display: flex;
    margin-bottom: 30px;
@@ -130,7 +126,7 @@
      width: 0;
      border: 0;
      border-style: solid;
-      border-color: color.adjust($ui-base-color, $lightness: 8%);
+      border-color: lighten($ui-base-color, 8%);
      border-left-width: 1px;
      min-height: calc(100% - 60px);
      flex: 0 0 auto;
@@ -235,7 +231,7 @@
      line-height: 22px;
      padding: 20px;
      border-radius: 4px;
-      background: color.adjust($ui-base-color, $lightness: 4%);
+      background: lighten($ui-base-color, 4%);
      color: $highlight-text-color;
      cursor: pointer;
    }
@@ -245,7 +241,7 @@
    }

    &__body {
-      border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
+      border: 1px solid lighten($ui-base-color, 4%);
      border-top: 0;
      padding: 20px;
      font-size: 15px;
@@ -255,18 +251,18 @@

  &__domain-blocks {
    margin-top: 30px;
-    background: color.adjust($ui-base-color, $lightness: -4%);
-    border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
+    background: darken($ui-base-color, 4%);
+    border: 1px solid lighten($ui-base-color, 4%);
    border-radius: 4px;

    &__domain {
-      border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
+      border-bottom: 1px solid lighten($ui-base-color, 4%);
      padding: 10px;
      font-size: 15px;
      color: $darker-text-color;

      &:nth-child(2n) {
-        background: color.adjust($ui-base-color, $lightness: -2%);
+        background: darken($ui-base-color, 2%);
      }

      &:last-child {
@@ -1,10 +1,6 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .account {
  padding: 10px;
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
  color: inherit;
  text-decoration: none;

@@ -169,7 +165,7 @@

 .account__header__wrapper {
  flex: 0 0 auto;
-  background: color.adjust($ui-base-color, $lightness: 4%);
+  background: lighten($ui-base-color, 4%);
 }

 .account__disclaimer {
@@ -207,8 +203,8 @@
 }

 .account__action-bar {
-  border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
  line-height: 36px;
  overflow: hidden;
  flex: 0 0 auto;
@@ -226,7 +222,7 @@
  text-decoration: none;
  overflow: hidden;
  flex: 0 1 100%;
-  border-inline-start: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-inline-start: 1px solid lighten($ui-base-color, 8%);
  padding: 10px 0;
  border-bottom: 4px solid transparent;

@@ -282,7 +278,7 @@
  padding: 8px 10px;
  padding-inline-start: 68px;
  position: relative;
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
  min-height: 54px;

  &__details {
@@ -328,9 +324,9 @@
 .account--panel {
  display: flex;
  gap: 5px;
-  background: color.adjust($ui-base-color, $lightness: 4%);
-  border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  background: lighten($ui-base-color, 4%);
+  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
  flex-direction: row;
  padding: 5px;
 }
@@ -485,9 +481,9 @@
 .account__moved-note {
  padding: 14px 10px;
  padding-bottom: 16px;
-  background: color.adjust($ui-base-color, $lightness: 4%);
-  border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  background: lighten($ui-base-color, 4%);
+  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);

  &__message {
    position: relative;
@@ -567,7 +563,7 @@
    overflow: hidden;
    height: 145px;
    position: relative;
-    background: color.adjust($ui-base-color, $lightness: -4%);
+    background: darken($ui-base-color, 4%);

    img {
      object-fit: cover;
@@ -580,9 +576,9 @@

  &__bar {
    position: relative;
-    background: color.adjust($ui-base-color, $lightness: 4%);
+    background: lighten($ui-base-color, 4%);
    padding: 5px;
-    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
+    border-bottom: 1px solid lighten($ui-base-color, 12%);

    .avatar {
      display: block;
@@ -590,8 +586,8 @@
      width: 94px;

      .account__avatar {
-        background: color.adjust($ui-base-color, $lightness: -8%);
-        border: 2px solid color.adjust($ui-base-color, $lightness: 4%);
+        background: darken($ui-base-color, 8%);
+        border: 2px solid lighten($ui-base-color, 4%);
      }
    }
  }
@@ -711,10 +707,10 @@

    .account__header__fields {
      margin: 0;
-      border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
+      border-top: 1px solid lighten($ui-base-color, 12%);

      a {
-        color: color.adjust($ui-highlight-color, $lightness: 8%);
+        color: lighten($ui-highlight-color, 8%);
      }

      dl:first-child .verified {
@@ -757,8 +753,8 @@
    flex-direction: column;
    font-size: 14px;
    font-weight: 400;
-    border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
-    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
+    border-top: 1px solid lighten($ui-base-color, 12%);
+    border-bottom: 1px solid lighten($ui-base-color, 12%);

    &__header {
      display: flex;
@@ -787,7 +783,7 @@
        &:hover,
        &:active,
        &:focus {
-          color: color.adjust($darker-text-color, $lightness: 7%);
+          color: lighten($darker-text-color, 7%);
          background-color: rgba($darker-text-color, 0.15);
        }

@@ -796,7 +792,7 @@
        }

        &[disabled] {
-          color: color.adjust($darker-text-color, $lightness: -13%);
+          color: darken($darker-text-color, 13%);
          background-color: transparent;
          cursor: default;
        }
@@ -841,7 +837,7 @@
 .follow-request-banner,
 .account-memorial-banner {
  padding: 20px;
-  background: color.adjust($ui-base-color, $lightness: 4%);
+  background: lighten($ui-base-color, 4%);
  display: flex;
  align-items: center;
  flex-direction: column;
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .announcements__item__content {
  word-wrap: break-word;
  overflow-y: auto;
@@ -46,7 +42,7 @@
 }

 .announcements {
-  background: color.adjust($ui-base-color, $lightness: 8%);
+  background: lighten($ui-base-color, 8%);
  font-size: 13px;
  display: flex;
  align-items: flex-end;
@@ -130,7 +126,7 @@

  &__item {
    flex-shrink: 0;
-    background: color.adjust($ui-base-color, $lightness: 12%);
+    background: lighten($ui-base-color, 12%);
    border: 0;
    border-radius: 3px;
    margin: 2px;
@@ -173,26 +169,26 @@
    &:hover,
    &:focus,
    &:active {
-      background: color.adjust($ui-base-color, $lightness: 16%);
+      background: lighten($ui-base-color, 16%);
      transition: all 200ms ease-out;
      transition-property: background-color, color;

      &__count {
-        color: color.adjust($darker-text-color, $lightness: 4%);
+        color: lighten($darker-text-color, 4%);
      }
    }

    &.active {
      transition: all 100ms ease-in;
      transition-property: background-color, color;
-      background-color: color.mix(
-        color.adjust($ui-base-color, $lightness: 12%),
+      background-color: mix(
+        lighten($ui-base-color, 12%),
        $ui-highlight-color,
        80%
      );

      .reactions-bar__item__count {
-        color: color.adjust($highlight-text-color, $lightness: 8%);
+        color: lighten($highlight-text-color, 8%);
      }
    }
  }
@@ -223,7 +219,7 @@
    &:active,
    &:focus {
      opacity: 1;
-      color: color.adjust($darker-text-color, $lightness: 4%);
+      color: lighten($darker-text-color, 4%);
      transition: all 200ms ease-out;
      transition-property: background-color, color;
    }
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .column__wrapper {
  display: flex;
  flex: 1 1 auto;
@@ -112,7 +108,7 @@ $ui-header-height: 55px;
 }

 .tabs-bar__wrapper {
-  background: color.adjust($ui-base-color, $lightness: -8%);
+  background: darken($ui-base-color, 8%);
  position: sticky;
  top: $ui-header-height;
  z-index: 2;
@@ -174,7 +170,7 @@ $ui-header-height: 55px;
 .column-back-button {
  box-sizing: border-box;
  width: 100%;
-  background: color.adjust($ui-base-color, $lightness: 4%);
+  background: lighten($ui-base-color, 4%);
  border-radius: 4px 4px 0 0;
  color: $highlight-text-color;
  cursor: pointer;
@@ -227,7 +223,7 @@ $ui-header-height: 55px;
 }

 .column-link {
-  background: color.adjust($ui-base-color, $lightness: 8%);
+  background: lighten($ui-base-color, 8%);
  color: $primary-text-color;
  display: block;
  font-size: 16px;
@@ -239,7 +235,7 @@ $ui-header-height: 55px;
  &:hover,
  &:focus,
  &:active {
-    background: color.adjust($ui-base-color, $lightness: 11%);
+    background: lighten($ui-base-color, 11%);
  }

  &:focus {
@@ -331,7 +327,7 @@ $ui-header-height: 55px;
  color: $darker-text-color;
  font-size: 16px;
  font-weight: 700;
-  background: color.adjust($ui-base-color, $lightness: 4%);
+  background: lighten($ui-base-color, 4%);
 }

 .column-header > button,
@@ -378,7 +374,7 @@ $ui-header-height: 55px;
  &:focus-visible,
  &:hover,
  &.active {
-    background: color.adjust($ui-base-color, $lightness: -4%);
+    background: darken($ui-base-color, 4%);
  }

  &:active {
@@ -422,7 +418,7 @@ $ui-header-height: 55px;
  &:hover,
  &.active {
    color: inherit;
-    background: color.adjust($ui-base-color, $lightness: -4%);
+    background: darken($ui-base-color, 4%);
  }

  &:active {
@@ -520,7 +516,7 @@ $ui-header-height: 55px;
    height: 0;
    background: transparent;
    border: 0;
-    border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
+    border-top: 1px solid lighten($ui-base-color, 12%);
    margin: 10px 0;
  }

@@ -536,7 +532,7 @@ $ui-header-height: 55px;
 }

 .column-header__collapsible-inner {
-  background: color.adjust($ui-base-color, $lightness: 8%);
+  background: lighten($ui-base-color, 8%);
  padding: 15px;
 }

@@ -632,11 +628,11 @@ $ui-header-height: 55px;
  &:not([disabled]) {
    &:hover,
    &:focus {
-      background-color: color.adjust($ui-base-color, $lightness: -10%);
+      background-color: darken($ui-base-color, 10%);
    }

    &.active {
-      background-color: color.adjust($ui-highlight-color, $lightness: -2%);
+      background-color: darken($ui-highlight-color, 2%);

      &:hover,
      &:focus {
@@ -688,7 +684,7 @@ $ui-header-height: 55px;
 }

 .follow_requests-unlocked_explanation {
-  background: color.adjust($ui-base-color, $lightness: -4%);
+  background: darken($ui-base-color, 4%);
  contain: initial;
  flex-grow: 0;
 }
@@ -744,7 +740,7 @@ $ui-header-height: 55px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
-  background: color.adjust($ui-base-color, $lightness: 4%);
+  background: lighten($ui-base-color, 4%);

  label {
    flex: 1 1 auto;
@@ -771,7 +767,7 @@ $ui-header-height: 55px;
 }

 .column-settings__outer {
-  background: color.adjust($ui-base-color, $lightness: 8%);
+  background: lighten($ui-base-color, 8%);
  padding: 15px;
 }

@@ -797,7 +793,7 @@ $ui-header-height: 55px;
      @include search-input;

      &::placeholder {
-        color: color.adjust($darker-text-color, $lightness: 4%);
+        color: lighten($darker-text-color, 4%);
      }

      &::-moz-focus-inner {
@@ -811,7 +807,7 @@ $ui-header-height: 55px;
      }

      &:focus {
-        background: color.adjust($ui-base-color, $lightness: 4%);
+        background: lighten($ui-base-color, 4%);
      }

      @media screen and (width <= 600px) {
@@ -830,7 +826,7 @@ $ui-header-height: 55px;
    }

    &__multi-value {
-      background: color.adjust($ui-base-color, $lightness: 8%);
+      background: lighten($ui-base-color, 8%);

      &__remove {
        cursor: pointer;
@@ -838,8 +834,8 @@ $ui-header-height: 55px;
        &:hover,
        &:active,
        &:focus {
-          background: color.adjust($ui-base-color, $lightness: 12%);
-          color: color.adjust($darker-text-color, $lightness: 4%);
+          background: lighten($ui-base-color, 12%);
+          color: lighten($darker-text-color, 4%);
        }
      }
    }
@@ -859,12 +855,12 @@ $ui-header-height: 55px;
      &:hover,
      &:active,
      &:focus {
-        color: color.adjust($dark-text-color, $lightness: 4%);
+        color: lighten($dark-text-color, 4%);
      }
    }

    &__indicator-separator {
-      background-color: color.adjust($ui-base-color, $lightness: 8%);
+      background-color: lighten($ui-base-color, 8%);
    }

    &__menu {
@@ -885,7 +881,7 @@ $ui-header-height: 55px;

      &--is-focused,
      &--is-selected {
-        background: color.adjust($ui-secondary-color, $lightness: -10%);
+        background: darken($ui-secondary-color, 10%);
      }
    }
  }
@@ -899,7 +895,7 @@ $ui-header-height: 55px;

 .notifications-permission-banner {
  padding: 30px;
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -977,8 +973,8 @@ $ui-header-height: 55px;

 .column-list {
  margin: 0 20px;
-  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
-  background: color.adjust($ui-base-color, $lightness: -2%);
+  border: 1px solid lighten($ui-base-color, 8%);
+  background: darken($ui-base-color, 2%);
  border-radius: 4px;

  &__empty-message {
@@ -1093,7 +1089,7 @@ $ui-header-height: 55px;
 }

 .hashtag-header {
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
  padding: 15px;
  font-size: 17px;
  line-height: 22px;
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .compose-form {
  padding: 10px;

@@ -311,7 +307,7 @@
  &:focus,
  &:active,
  &.selected {
-    background: color.adjust($ui-secondary-color, $lightness: -10%);
+    background: darken($ui-secondary-color, 10%);
  }

  > .account,
@@ -402,7 +398,7 @@
    &:hover,
    &:focus,
    &:active {
-      color: color.adjust($secondary-text-color, $lightness: 7%);
+      color: lighten($secondary-text-color, 7%);
    }
  }

@@ -473,7 +469,7 @@
  border-radius: 6px;
  width: 100%;
  height: 6px;
-  background: color.adjust($simple-background-color, $lightness: -8%);
+  background: darken($simple-background-color, 8%);
 }

 .upload-progress__tracker {
@@ -499,7 +495,7 @@
  padding: 10px;
  border-radius: 0 0 4px 4px;
  color: $action-button-color;
-  background: color.adjust($simple-background-color, $lightness: -8%);
+  background: darken($simple-background-color, 8%);
 }

 .compose-form__buttons {
@@ -609,7 +605,7 @@
  }

  &.active:hover {
-    background: color.adjust($ui-highlight-color, $lightness: 4%);
+    background: lighten($ui-highlight-color, 4%);
  }
 }

@@ -691,7 +687,7 @@
          }

          &:hover {
-            background: color.adjust($ui-highlight-color, $lightness: 4%);
+            background: lighten($ui-highlight-color, 4%);
          }
        }
      }
@@ -1,23 +1,19 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .scrollable .account-card {
  margin: 10px;
-  background: color.adjust($ui-base-color, $lightness: 8%);
+  background: lighten($ui-base-color, 8%);
 }

 .scrollable .account-card__title__avatar {
  img,
  .account__avatar {
-    border-color: color.adjust($ui-base-color, $lightness: 8%);
+    border-color: lighten($ui-base-color, 8%);
  }
 }

 .scrollable .account-card__bio::after {
  background: linear-gradient(
    to left,
-    color.adjust($ui-base-color, $lightness: 8%),
+    lighten($ui-base-color, 8%),
    transparent
  );
 }
@@ -65,8 +61,8 @@
    vertical-align: middle;

    &.checked {
-      border-color: color.adjust($ui-highlight-color, $lightness: 4%);
-      background: color.adjust($ui-highlight-color, $lightness: 4%);
+      border-color: lighten($ui-highlight-color, 4%);
+      background: lighten($ui-highlight-color, 4%);
    }
  }
 }
@@ -1,9 +1,6 @@
-@use "sass:color";
-@use "../variables" as *;
-
 .domain {
  padding: 10px;
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);

  .domain__domain-name {
    flex: 1 1 auto;
@@ -1,6 +1,3 @@
-@use "../mixins" as *;
-@use "../variables" as *;
-
 $doodle-background: #d9e1e8;

 .doodle-modal {
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .drawer {
  display: flex;
  gap: var(--size-layout-gap);
@@ -100,7 +96,7 @@
  &:focus-visible,
  &:hover,
  &.active {
-    background: color.adjust($ui-base-color, $lightness: -4%);
+    background: darken($ui-base-color, 4%);
  }
 }

@@ -167,15 +163,15 @@
 }

 .search-results__section {
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);

  &:last-child {
    border-bottom: 0;
  }

  &__header {
-    background: color.adjust($ui-base-color, $lightness: -4%);
-    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+    background: darken($ui-base-color, 4%);
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
    padding: 15px;
    font-weight: 500;
    font-size: 14px;
@@ -216,7 +212,7 @@
    &:hover,
    &:active,
    &:focus {
-      color: color.adjust($secondary-text-color, $lightness: 4%);
+      color: lighten($secondary-text-color, 4%);
      text-decoration: underline;
    }
  }
@@ -253,7 +249,7 @@
 }

 .drawer__inner__mastodon {
-  background: color.adjust($ui-base-color, $lightness: 4%)
+  background: lighten($ui-base-color, 4%)
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z"/></svg>')
    no-repeat bottom / 100% auto;
  flex: 1;
@@ -284,7 +280,7 @@
 }

 .pseudo-drawer {
-  background: color.adjust($ui-base-color, $lightness: 13%);
+  background: lighten($ui-base-color, 13%);
  font-size: 13px;
  text-align: start;
 }
@@ -308,7 +304,7 @@
          bottom /
          100%
          auto,
-        color.adjust($ui-base-color, $lightness: 4%);
+        lighten($ui-base-color, 4%);
    } @else {
      background:
        url("~flavours/glitch/images/wave-drawer-glitched.png")
@@ -316,7 +312,7 @@
          bottom /
          100%
          auto,
-        color.adjust($ui-base-color, $lightness: 4%);
+        lighten($ui-base-color, 4%);
    }

    & > .mastodon {
@@ -1,6 +1,3 @@
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .emojione {
  font-size: inherit;
  vertical-align: middle;
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .emoji-mart {
  &,
  * {
@@ -19,7 +15,7 @@
 }

 .emoji-mart-bar {
-  border: 0 solid color.adjust($ui-secondary-color, $lightness: -8%);
+  border: 0 solid darken($ui-secondary-color, 8%);

  &:first-child {
    border-bottom-width: 1px;
@@ -56,7 +52,7 @@
  border: 0;

  &:hover {
-    color: color.adjust($lighter-text-color, $lightness: -4%);
+    color: darken($lighter-text-color, 4%);
  }
 }

@@ -64,7 +60,7 @@
  color: $highlight-text-color;

  &:hover {
-    color: color.adjust($highlight-text-color, $lightness: -4%);
+    color: darken($highlight-text-color, 4%);
  }

  .emoji-mart-anchor-bar {
@@ -78,7 +74,7 @@
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
-  background-color: color.adjust($ui-highlight-color, $lightness: -3%);
+  background-color: darken($ui-highlight-color, 3%);
 }

 .emoji-mart-anchors {
@@ -1,13 +1,9 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .account-card__header {
  position: relative;
 }

 .explore__search-header {
-  background: color.adjust($ui-base-color, $lightness: -4%);
+  background: darken($ui-base-color, 4%);
  justify-content: center;
  align-items: center;
  padding: 15px;
@@ -18,12 +14,12 @@
  }

  .search__input {
-    border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+    border: 1px solid lighten($ui-base-color, 8%);
    padding: 10px;
  }

  .search__popout {
-    border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+    border: 1px solid lighten($ui-base-color, 8%);
  }

  .search .fa {
@@ -49,7 +45,7 @@
  color: $primary-text-color;
  text-decoration: none;
  padding: 15px;
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
  gap: 15px;

  &:last-child {
@@ -1,26 +1,26 @@
-@use "misc";
-@use "boost";
-@use "accounts";
-@use "domains";
-@use "status";
-@use "modal";
-@use "compose_form";
-@use "columns";
-@use "regeneration_indicator";
-@use "directory";
-@use "search";
-@use "emoji";
-@use "doodle";
-@use "drawer";
-@use "media";
-@use "sensitive";
-@use "lists";
-@use "emoji_picker";
-@use "local_settings";
-@use "single_column";
-@use "announcements";
-@use "explore";
-@use "scrollbars";
-@use "signed_out";
-@use "privacy_policy";
-@use "about";
+@import "misc";
+@import "boost";
+@import "accounts";
+@import "domains";
+@import "status";
+@import "modal";
+@import "compose_form";
+@import "columns";
+@import "regeneration_indicator";
+@import "directory";
+@import "search";
+@import "emoji";
+@import "doodle";
+@import "drawer";
+@import "media";
+@import "sensitive";
+@import "lists";
+@import "emoji_picker";
+@import "local_settings";
+@import "single_column";
+@import "announcements";
+@import "explore";
+@import "scrollbars";
+@import "signed_out";
+@import "privacy_policy";
+@import "about";
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .list-editor {
  background: $ui-base-color;
  flex-direction: column;
@@ -16,7 +12,7 @@

  h4 {
    padding: 15px 0;
-    background: color.adjust($ui-base-color, $lightness: 13%);
+    background: lighten($ui-base-color, 13%);
    font-weight: 500;
    font-size: 16px;
    text-align: center;
@@ -69,11 +65,11 @@
  }

  &__account {
-    background: color.adjust($ui-base-color, $lightness: 13%);
+    background: lighten($ui-base-color, 13%);
  }

  &__lists {
-    background: color.adjust($ui-base-color, $lightness: 13%);
+    background: lighten($ui-base-color, 13%);
    height: 50vh;
    border-radius: 0 0 8px 8px;
    overflow-y: auto;
@@ -81,7 +77,7 @@

  .list {
    padding: 10px;
-    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
  }

  .list__wrapper {
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .glitch.local-settings {
  position: relative;
  display: flex;
@@ -68,7 +64,7 @@
  font-size: inherit;
  text-align: start;
  text-decoration: none;
-  background: color.adjust($ui-secondary-color, $lightness: 8%);
+  background: lighten($ui-secondary-color, 8%);
  cursor: pointer;
  transition: background 0.3s;

@@ -95,7 +91,7 @@
 }

 .glitch.local-settings__navigation {
-  background: color.adjust($ui-secondary-color, $lightness: 8%);
+  background: lighten($ui-secondary-color, 8%);
  width: 212px;
  font-size: 15px;
  line-height: 20px;
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .video-error-cover {
  align-items: center;
  background: $base-overlay-background;
@@ -27,7 +23,7 @@
  &:hover,
  &:active,
  &:focus {
-    color: color.adjust($darker-text-color, $lightness: 8%);
+    color: lighten($darker-text-color, 8%);
  }

  .status__content > & {
@@ -389,7 +385,7 @@
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
-  background: color.adjust($ui-base-color, $lightness: -8%);
+  background: darken($ui-base-color, 8%);
  border-radius: 4px;
  padding-bottom: 44px;
  width: 100%;
@@ -558,7 +554,7 @@
      &:hover,
      &:active,
      &:focus {
-        color: color.adjust($darker-text-color, $lightness: 7%);
+        color: lighten($darker-text-color, 7%);
      }
    }

@@ -694,7 +690,7 @@
      inset-inline-start: 0;
      top: 50%;
      transform: translate(0, -50%);
-      background: color.adjust($ui-highlight-color, $lightness: 8%);
+      background: lighten($ui-highlight-color, 8%);
    }

    &__handle {
@@ -707,7 +703,7 @@
      inset-inline-start: 0;
      margin-inline-start: -6px;
      transform: translate(0, -50%);
-      background: color.adjust($ui-highlight-color, $lightness: 8%);
+      background: lighten($ui-highlight-color, 8%);
      box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
      opacity: 0;

@@ -761,7 +757,7 @@
      height: 4px;
      border-radius: 4px;
      top: 14px;
-      background: color.adjust($ui-highlight-color, $lightness: 8%);
+      background: lighten($ui-highlight-color, 8%);
    }

    &__buffer {
@@ -777,7 +773,7 @@
      height: 12px;
      top: 10px;
      margin-inline-start: -6px;
-      background: color.adjust($ui-highlight-color, $lightness: 8%);
+      background: lighten($ui-highlight-color, 8%);
      box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);

      .no-reduce-motion & {
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .app-body {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
@@ -173,7 +169,7 @@
  &:hover,
  &:active,
  &:focus-visible {
-    color: color.adjust($action-button-color, $lightness: 7%);
+    color: lighten($action-button-color, 7%);
    background-color: rgba($action-button-color, 0.15);
    transition: all 200ms ease-out;
    transition-property: background-color, color;
@@ -218,7 +214,7 @@
    &:hover,
    &:active,
    &:focus-visible {
-      color: color.adjust($lighter-text-color, $lightness: -7%);
+      color: darken($lighter-text-color, 7%);
      background-color: rgba($lighter-text-color, 0.15);
    }

@@ -234,7 +230,7 @@
      color: $highlight-text-color;

      &.disabled {
-        color: color.adjust($highlight-text-color, $lightness: 13%);
+        color: lighten($highlight-text-color, 13%);
      }
    }
  }
@@ -292,7 +288,7 @@
  &:hover,
  &:active,
  &:focus-visible {
-    color: color.adjust($lighter-text-color, $lightness: -7%);
+    color: darken($lighter-text-color, 7%);
    background-color: rgba($lighter-text-color, 0.15);
    transition: all 200ms ease-out;
    transition-property: background-color, color;
@@ -303,7 +299,7 @@
  }

  &.disabled {
-    color: color.adjust($lighter-text-color, $lightness: 20%);
+    color: lighten($lighter-text-color, 20%);
    background-color: transparent;
    cursor: default;
  }
@@ -705,7 +701,7 @@ body > [data-popper-placement] {
 .tabs-bar {
  box-sizing: border-box;
  display: flex;
-  background: color.adjust($ui-base-color, $lightness: 8%);
+  background: lighten($ui-base-color, 8%);
  flex: 0 0 auto;
  overflow-y: auto;
 }
@@ -720,7 +716,7 @@ body > [data-popper-placement] {
  text-align: center;
  font-size: 14px;
  font-weight: 500;
-  border-bottom: 2px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-bottom: 2px solid lighten($ui-base-color, 8%);
  transition: all 50ms linear;
  transition-property: border-bottom, background, color;

@@ -733,8 +729,8 @@ body > [data-popper-placement] {
  &:focus,
  &:active {
    @include multi-columns("screen and (min-width: 631px)") {
-      background: color.adjust($ui-base-color, $lightness: 14%);
-      border-bottom-color: color.adjust($ui-base-color, $lightness: 14%);
+      background: lighten($ui-base-color, 14%);
+      border-bottom-color: lighten($ui-base-color, 14%);
    }
  }

@@ -762,7 +758,7 @@ body > [data-popper-placement] {
    inset-inline-start: 9px;
    top: -13px;
    background: $ui-highlight-color;
-    border: 2px solid color.adjust($ui-base-color, $lightness: 8%);
+    border: 2px solid lighten($ui-base-color, 8%);
    padding: 1px 6px;
    border-radius: 6px;
    font-size: 10px;
@@ -784,7 +780,7 @@ body > [data-popper-placement] {
 }

 .column-link--transparent .icon-with-badge__badge {
-  border-color: color.adjust($ui-base-color, $lightness: -8%);
+  border-color: darken($ui-base-color, 8%);
 }

 .scrollable {
@@ -865,11 +861,11 @@ body > [data-popper-placement] {

 .react-toggle:is(:hover, :focus-within):not(.react-toggle--disabled)
  .react-toggle-track {
-  background-color: color.adjust($ui-base-color, $lightness: -10%);
+  background-color: darken($ui-base-color, 10%);
 }

 .react-toggle--checked .react-toggle-track {
-  background-color: color.adjust($ui-highlight-color, $lightness: -2%);
+  background-color: darken($ui-highlight-color, 2%);
 }

 .react-toggle--checked:is(:hover, :focus-within):not(.react-toggle--disabled)
@@ -922,7 +918,7 @@ body > [data-popper-placement] {
  height: 22px;
  border: 1px solid $ui-base-color;
  border-radius: 50%;
-  background-color: color.adjust($simple-background-color, $lightness: -2%);
+  background-color: darken($simple-background-color, 2%);
  box-sizing: border-box;
  transition: all 0.25s ease;
  transition-property: border-color, left;
@@ -967,7 +963,7 @@ body > [data-popper-placement] {
    margin-top: 10px;

    h4 {
-      border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+      border-bottom: 1px solid lighten($ui-base-color, 8%);
      padding: 10px;
      font-size: 12px;
      text-transform: uppercase;
@@ -1033,8 +1029,8 @@ body > [data-popper-placement] {
  kbd {
    display: inline-block;
    padding: 3px 5px;
-    background-color: color.adjust($ui-base-color, $lightness: 8%);
-    border: 1px solid color.adjust($ui-base-color, $lightness: -4%);
+    background-color: lighten($ui-base-color, 8%);
+    border: 1px solid darken($ui-base-color, 4%);
  }
 }

@@ -1063,7 +1059,7 @@ body > [data-popper-placement] {

  &.light {
    color: $inverted-text-color;
-    border-bottom: 2px solid color.adjust($ui-base-color, $lightness: 27%);
+    border-bottom: 2px solid lighten($ui-base-color, 27%);

    &:focus,
    &:active {
@@ -1097,7 +1093,7 @@ button.icon-button.active i.fa-retweet {
 }

 .reduce-motion button.icon-button.disabled i.fa-retweet {
-  color: color.adjust($action-button-color, $lightness: -13%);
+  color: darken($action-button-color, 13%);
 }

 .load-more {
@@ -1116,12 +1112,12 @@ button.icon-button.active i.fa-retweet {
  text-decoration: none;

  &:hover {
-    background: color.adjust($ui-base-color, $lightness: 2%);
+    background: lighten($ui-base-color, 2%);
  }
 }

 .load-gap {
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
 }

 .timeline-hint {
@@ -1144,7 +1140,7 @@ button.icon-button.active i.fa-retweet {
    &:focus,
    &:active {
      text-decoration: underline;
-      color: color.adjust($highlight-text-color, $lightness: 4%);
+      color: lighten($highlight-text-color, 4%);
    }
  }
 }
@@ -1181,8 +1177,8 @@ button.icon-button.active i.fa-retweet {
    flex-direction: column;
    align-items: center;
    justify-content: center;
-    background: color.adjust($ui-base-color, $lightness: 8%);
-    border-inline-start: 1px solid color.adjust($ui-base-color, $lightness: 20%);
+    background: lighten($ui-base-color, 8%);
+    border-inline-start: 1px solid lighten($ui-base-color, 20%);
    box-shadow: 0 0 5px black;
    border-bottom: 1px solid $ui-base-color;
  }
@@ -1236,7 +1232,7 @@ button.icon-button.active i.fa-retweet {
 }

 .circular-progress {
-  color: color.adjust($ui-base-color, $lightness: 26%);
+  color: lighten($ui-base-color, 26%);
  animation: 1.4s linear 0s infinite normal none running simple-rotate;

  circle {
@@ -1528,12 +1524,12 @@ button.icon-button.active i.fa-retweet {

 .conversation {
  display: flex;
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
  padding: 5px;
  padding-bottom: 0;

  &:focus {
-    background: color.adjust($ui-base-color, $lightness: 2%);
+    background: lighten($ui-base-color, 2%);
    outline: 0;
  }

@@ -1601,10 +1597,10 @@ button.icon-button.active i.fa-retweet {
  }

  &--unread {
-    background: color.adjust($ui-base-color, $lightness: 2%);
+    background: lighten($ui-base-color, 2%);

    &:focus {
-      background: color.adjust($ui-base-color, $lightness: 4%);
+      background: lighten($ui-base-color, 4%);
    }

    .conversation__content__info {
@@ -1,9 +1,5 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .modal-container--preloader {
-  background: color.adjust($ui-base-color, $lightness: 8%);
+  background: lighten($ui-base-color, 8%);
 }

 .modal-root {
@@ -138,7 +134,7 @@
 .onboarding-modal__paginator,
 .error-modal__footer {
  flex: 0 0 auto;
-  background: color.adjust($ui-secondary-color, $lightness: -8%);
+  background: darken($ui-secondary-color, 8%);
  display: flex;
  padding: 25px;

@@ -162,8 +158,8 @@
    &:hover,
    &:focus,
    &:active {
-      color: color.adjust($lighter-text-color, $lightness: -4%);
-      background-color: color.adjust($ui-secondary-color, $lightness: -16%);
+      color: darken($lighter-text-color, 4%);
+      background-color: darken($ui-secondary-color, 16%);
    }

    &.onboarding-modal__done,
@@ -173,7 +169,7 @@
      &:hover,
      &:focus,
      &:active {
-        color: color.adjust($inverted-text-color, $lightness: 4%);
+        color: lighten($inverted-text-color, 4%);
      }
    }
  }
@@ -194,17 +190,17 @@
  width: 14px;
  height: 14px;
  border-radius: 14px;
-  background: color.adjust($ui-secondary-color, $lightness: -16%);
+  background: darken($ui-secondary-color, 16%);
  margin: 0 3px;
  cursor: pointer;

  &:hover {
-    background: color.adjust($ui-secondary-color, $lightness: -18%);
+    background: darken($ui-secondary-color, 18%);
  }

  &.active {
    cursor: default;
-    background: color.adjust($ui-secondary-color, $lightness: -24%);
+    background: darken($ui-secondary-color, 24%);
  }
 }

@@ -235,7 +231,7 @@
    &:hover,
    &:focus,
    &:active {
-      color: color.adjust($highlight-text-color, $lightness: 4%);
+      color: lighten($highlight-text-color, 4%);
    }
  }

@@ -333,7 +329,7 @@
  }

  .figure {
-    background: color.adjust($ui-base-color, $lightness: -8%);
+    background: darken($ui-base-color, 8%);
    color: $secondary-text-color;
    margin-bottom: 20px;
    border-radius: 4px;
@@ -425,7 +421,7 @@
 .mute-modal,
 .block-modal,
 .compare-history-modal {
-  background: color.adjust($ui-secondary-color, $lightness: 8%);
+  background: lighten($ui-secondary-color, 8%);
  color: $inverted-text-color;
  border-radius: 8px;
  overflow: hidden;
@@ -459,7 +455,7 @@
  }

  .status__content__spoiler-link {
-    color: color.adjust($secondary-text-color, $lightness: 8%);
+    color: lighten($secondary-text-color, 8%);
  }
 }

@@ -541,7 +537,7 @@
  max-width: 90vw;
  width: 480px;
  height: 80vh;
-  background: color.adjust($ui-secondary-color, $lightness: 8%);
+  background: lighten($ui-secondary-color, 8%);
  color: $inverted-text-color;
  border-radius: 8px;
  overflow: hidden;
@@ -581,7 +577,7 @@
  &__lead {
    font-size: 17px;
    line-height: 22px;
-    color: color.adjust($inverted-text-color, $lightness: 16%);
+    color: lighten($inverted-text-color, 16%);
    margin-bottom: 30px;

    a {
@@ -624,7 +620,7 @@
    background: $ui-primary-color;

    &:hover {
-      background: color.adjust($ui-primary-color, $lightness: 8%);
+      background: lighten($ui-primary-color, 8%);
    }
  }

@@ -643,7 +639,7 @@
    &:active,
    &:focus,
    &:hover {
-      border-color: color.adjust($inverted-text-color, $lightness: 15%);
+      border-color: lighten($inverted-text-color, 15%);
      border-width: 4px;
    }

@@ -664,7 +660,7 @@

    & > .poll__option__text {
      font-size: 13px;
-      color: color.adjust($inverted-text-color, $lightness: 16%);
+      color: lighten($inverted-text-color, 16%);

      strong {
        font-size: 17px;
@@ -833,7 +829,7 @@
    margin-bottom: 10px;

    &:focus {
-      border: 1px solid color.adjust($ui-secondary-color, $lightness: -8%);
+      border: 1px solid darken($ui-secondary-color, 8%);
    }

    &__wrapper {
@@ -982,7 +978,7 @@
  &:hover,
  &:focus,
  &:active {
-    color: color.adjust($lighter-text-color, $lightness: -4%);
+    color: darken($lighter-text-color, 4%);
    background-color: transparent;
  }
 }
@@ -1026,9 +1022,9 @@
    outline: 0;
    font-family: inherit;
    background: $simple-background-color
-      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($simple-background-color, $lightness: - 14%))}'/></svg>")
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>")
      no-repeat right 8px center / auto 16px;
-    border: 1px solid color.adjust($simple-background-color, $lightness: -14%);
+    border: 1px solid darken($simple-background-color, 14%);
    border-radius: 4px;
    padding: 6px 10px;
    padding-inline-end: 30px;
@@ -1163,7 +1159,7 @@
      }

      &:focus {
-        background: color.adjust($ui-base-color, $lightness: 4%);
+        background: lighten($ui-base-color, 4%);
      }

      @media screen and (width <= 600px) {
@@ -1368,7 +1364,7 @@ img.modal-warning {
    &__input {
      @include search-input;

-      border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+      border: 1px solid lighten($ui-base-color, 8%);
      padding: 4px 6px;
      color: $primary-text-color;
      font-size: 16px;
@@ -1385,7 +1381,7 @@ img.modal-warning {
        flex: 1 1 auto;

        &::placeholder {
-          color: color.adjust($darker-text-color, $lightness: 4%);
+          color: lighten($darker-text-color, 4%);
        }

        &:focus {
@@ -1402,12 +1398,12 @@ img.modal-warning {
      margin-top: -1px;
      padding-top: 5px;
      padding-bottom: 5px;
-      border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+      border: 1px solid lighten($ui-base-color, 8%);
    }

    &.focused &__input {
      border-color: $highlight-text-color;
-      background: color.adjust($ui-base-color, $lightness: 4%);
+      background: lighten($ui-base-color, 4%);
    }

    &.invalid &__input {
@@ -1475,7 +1471,7 @@ img.modal-warning {
  input {
    display: block;
    font-family: inherit;
-    background: color.adjust($ui-base-color, $lightness: -8%);
+    background: darken($ui-base-color, 8%);
    border: 1px solid $highlight-text-color;
    color: $darker-text-color;
    border-radius: 4px;
@@ -1488,7 +1484,7 @@ img.modal-warning {

    &:focus {
      outline: 0;
-      background: color.adjust($ui-base-color, $lightness: -4%);
+      background: darken($ui-base-color, 4%);
    }
  }

@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .privacy-policy {
  background: $ui-base-color;
  padding: 20px;
@@ -173,14 +169,14 @@

  code {
    font-size: 0.875em;
-    background: color.adjust($ui-base-color, $lightness: -8%);
+    background: darken($ui-base-color, 8%);
    border-radius: 4px;
    padding: 0.2em 0.3em;
  }

  hr {
    border: 0;
-    border-top: 1px solid color.adjust($ui-base-color, $lightness: 4%);
+    border-top: 1px solid lighten($ui-base-color, 4%);
    margin-top: 3em;
    margin-bottom: 3em;
  }
@@ -1,6 +1,3 @@
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .regeneration-indicator {
  text-align: center;
  font-size: 16px;
@@ -1,10 +1,6 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 /* Scrollbars */
 html {
-  scrollbar-color: color.adjust($ui-base-color, $lightness: 4%)
+  scrollbar-color: lighten($ui-base-color, 4%)
    rgba($base-overlay-background, 0.1);
 }

@@ -14,17 +10,17 @@ html {
 }

 ::-webkit-scrollbar-thumb {
-  background: color.adjust($ui-base-color, $lightness: 4%);
+  background: lighten($ui-base-color, 4%);
  border: 0 none $base-border-color;
  border-radius: 50px;
 }

 ::-webkit-scrollbar-thumb:hover {
-  background: color.adjust($ui-base-color, $lightness: 6%);
+  background: lighten($ui-base-color, 6%);
 }

 ::-webkit-scrollbar-thumb:active {
-  background: color.adjust($ui-base-color, $lightness: 4%);
+  background: lighten($ui-base-color, 4%);
 }

 ::-webkit-scrollbar-track {
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .search {
  position: relative;
 }
@@ -59,7 +55,7 @@

  &:focus-visible,
  &:hover {
-    background: color.adjust($ui-base-color, $lightness: -10%);
+    background: darken($ui-base-color, 10%);
  }
 }

@@ -172,7 +168,7 @@
  color: $dark-text-color;
  font-weight: 500;
  font-size: 16px;
-  background: color.adjust($ui-base-color, $lightness: 2%);
+  background: lighten($ui-base-color, 2%);
  cursor: default;
 }

@@ -185,8 +181,8 @@
 .trends {
  &__header {
    color: $dark-text-color;
-    background: color.adjust($ui-base-color, $lightness: 2%);
-    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -4%);
+    background: lighten($ui-base-color, 2%);
+    border-bottom: 1px solid darken($ui-base-color, 4%);
    font-weight: 500;
    padding: 15px;
    font-size: 16px;
@@ -202,7 +198,7 @@
    display: flex;
    align-items: center;
    padding: 15px;
-    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
    gap: 15px;

    &:last-child {
@@ -259,7 +255,7 @@
      }

      path:last-child {
-        stroke: color.adjust($highlight-text-color, $lightness: 6%) !important;
+        stroke: lighten($highlight-text-color, 6%) !important;
        fill: none !important;
      }
    }
@@ -283,37 +279,31 @@
        }

        path:last-child {
-          stroke: color.adjust($gold-star, $lightness: 6%) !important;
+          stroke: lighten($gold-star, 6%) !important;
        }
      }
    }

    &--disabled {
      .trends__item__name {
-        color: color.adjust($ui-base-color, $lightness: 12%);
+        color: lighten($ui-base-color, 12%);

        a {
-          color: color.adjust($ui-base-color, $lightness: 12%);
+          color: lighten($ui-base-color, 12%);
        }
      }

      .trends__item__current {
-        color: color.adjust($ui-base-color, $lightness: 12%);
+        color: lighten($ui-base-color, 12%);
      }

      .trends__item__sparkline {
        path:first-child {
-          fill: rgba(
-            color.adjust($ui-base-color, $lightness: 12%),
-            0.25
-          ) !important;
+          fill: rgba(lighten($ui-base-color, 12%), 0.25) !important;
        }

        path:last-child {
-          stroke: color.adjust(
-            color.adjust($ui-base-color, $lightness: 12%),
-            $lightness: 6%
-          ) !important;
+          stroke: lighten(lighten($ui-base-color, 12%), 6%) !important;
        }
      }
    }
@@ -1,5 +1,3 @@
-@use "../variables" as *;
-
 .sensitive-info {
  display: flex;
  flex-direction: row;
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .sign-in-banner {
  padding: 10px;

@@ -18,7 +14,7 @@
        text-decoration: underline;

        .fa {
-          color: color.adjust($dark-text-color, $lightness: 7%);
+          color: lighten($dark-text-color, 7%);
        }
      }
    }
@@ -1,8 +1,3 @@
-@use "sass:color";
-@use "columns" as *;
-@use "../mixins" as *;
-@use "../variables" as *;
-
 .compose-panel {
  width: 285px;
  margin-top: 10px;
@@ -83,7 +78,7 @@
    flex: 0 0 auto;
    border: 0;
    background: transparent;
-    border-top: 1px solid color.adjust($ui-base-color, $lightness: 4%);
+    border-top: 1px solid lighten($ui-base-color, 4%);
    margin: 10px 0;
  }

@@ -265,8 +260,7 @@
    .navigation-panel {
      margin: 0;
      background: $ui-base-color;
-      border-inline-start: 1px solid
-        color.adjust($ui-base-color, $lightness: 8%);
+      border-inline-start: 1px solid lighten($ui-base-color, 8%);
      height: 100vh;
    }

@@ -284,7 +278,7 @@
  .layout-single-column .ui__header {
    display: flex;
    background: $ui-base-color;
-    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
  }

  .layout-single-column {
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "../mixins" as *;
-@use "../variables" as *;
-
@keyframes spring-flip-in {
  0% {
    transform: rotate(0deg);
@@ -89,7 +85,7 @@
      text-decoration: underline;

      .fa {
-        color: color.adjust($dark-text-color, $lightness: 7%);
+        color: lighten($dark-text-color, 7%);
      }
    }

@@ -153,7 +149,7 @@
  box-sizing: border-box;
  width: 100%;
  clear: both;
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
 }

 .notification-follow,
@@ -161,7 +157,7 @@
  position: relative;

  // same like Status
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);

  .account {
    border-bottom: 0 none;
@@ -171,7 +167,7 @@
 .focusable {
  &:focus {
    outline: 0;
-    background: color.adjust($ui-base-color, $lightness: 4%);
+    background: lighten($ui-base-color, 4%);

    &.status.status-direct.muted {
      background: transparent;
@@ -179,7 +175,7 @@

    .detailed-status,
    .detailed-status__action-bar {
-      background: color.adjust($ui-base-color, $lightness: 8%);
+      background: lighten($ui-base-color, 8%);
    }
  }
 }
@@ -191,7 +187,7 @@
  padding: 15px;
  position: relative;
  height: auto;
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
  cursor: auto;

  @supports (-ms-overflow-style: -ms-autohiding-scrollbar) {
@@ -219,9 +215,9 @@
  }

  &.status-direct {
-    --color-status-bg: #{color.mix($ui-base-color, $ui-highlight-color, 95%)};
+    --color-status-bg: #{mix($ui-base-color, $ui-highlight-color, 95%)};

-    border-bottom-color: color.adjust($ui-base-color, $lightness: 12%);
+    border-bottom-color: lighten($ui-base-color, 12%);
  }

  &.light {
@@ -253,7 +249,7 @@
        background: $ui-primary-color;

        &:hover {
-          background: color.adjust($ui-primary-color, $lightness: 8%);
+          background: lighten($ui-primary-color, 8%);
        }
      }
    }
@@ -312,15 +308,15 @@

    &:focus > .status__content::after {
      background: linear-gradient(
-        rgba(color.adjust($ui-base-color, $lightness: 4%), 0),
-        rgba(color.adjust($ui-base-color, $lightness: 4%), 1)
+        rgba(lighten($ui-base-color, 4%), 0),
+        rgba(lighten($ui-base-color, 4%), 1)
      );
    }

    &.status-direct > .status__content::after {
      background: linear-gradient(
-        rgba(color.mix($ui-base-color, $ui-highlight-color, 95%), 0),
-        rgba(color.mix($ui-base-color, $ui-highlight-color, 95%), 1)
+        rgba(mix($ui-base-color, $ui-highlight-color, 95%), 0),
+        rgba(mix($ui-base-color, $ui-highlight-color, 95%), 1)
      );
    }

@@ -343,7 +339,7 @@
    background: transparent;

    .icon-button.disabled {
-      color: color.adjust($action-button-color, $lightness: 13%);
+      color: lighten($action-button-color, 13%);
    }
  }
 }
@@ -384,7 +380,7 @@
  padding: 0 10px;

  .detailed-status__display-name {
-    color: color.adjust($inverted-text-color, $lightness: 16%);
+    color: lighten($inverted-text-color, 16%);

    span {
      display: inline;
@@ -450,9 +446,9 @@
 }

 .detailed-status {
-  background: color.adjust($ui-base-color, $lightness: 4%);
+  background: lighten($ui-base-color, 4%);
  padding: 14px 10px;
-  border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-top: 1px solid lighten($ui-base-color, 8%);

  &--flex {
    display: flex;
@@ -491,9 +487,9 @@
 }

 .detailed-status__action-bar {
-  background: color.adjust($ui-base-color, $lightness: 4%);
-  border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  background: lighten($ui-base-color, 4%);
+  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
  display: flex;
  flex-direction: row;
  padding: 10px 0;
@@ -610,7 +606,7 @@ a.status__display-name,

    &:hover,
    &:focus {
-      background: color.adjust($ui-base-color, $lightness: 29%);
+      background: lighten($ui-base-color, 29%);
      text-decoration: none;
    }
  }
@@ -627,7 +623,7 @@ a.status__display-name,
  position: relative;
  display: flex;
  font-size: 14px;
-  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border: 1px solid lighten($ui-base-color, 8%);
  border-radius: 4px;
  color: $dark-text-color;
  margin-top: 14px;
@@ -689,7 +685,7 @@ a.status-card {
  cursor: pointer;

  &:hover {
-    background: color.adjust($ui-base-color, $lightness: 8%);
+    background: lighten($ui-base-color, 8%);
  }
 }

@@ -750,7 +746,7 @@ a.status-card {

 .status-card__image {
  flex: 0 0 100px;
-  background: color.adjust($ui-base-color, $lightness: 8%);
+  background: lighten($ui-base-color, 8%);
  position: relative;

  & > .fa {
@@ -781,7 +777,7 @@ a.status-card {
 }

 .status-card.compact {
-  border-color: color.adjust($ui-base-color, $lightness: 4%);
+  border-color: lighten($ui-base-color, 4%);

  &.interactive {
    border: 0;
@@ -802,7 +798,7 @@ a.status-card {
 }

 a.status-card.compact:hover {
-  background-color: color.adjust($ui-base-color, $lightness: 4%);
+  background-color: lighten($ui-base-color, 4%);
 }

 .status-card__image-image {
@@ -837,7 +833,7 @@ a.status-card.compact:hover {
 .attachment-list {
  display: flex;
  font-size: 14px;
-  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border: 1px solid lighten($ui-base-color, 8%);
  border-radius: 4px;
  margin-top: 14px;
  overflow: hidden;
@@ -847,7 +843,7 @@ a.status-card.compact:hover {
    color: $dark-text-color;
    padding: 8px 18px;
    cursor: default;
-    border-inline-end: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+    border-inline-end: 1px solid lighten($ui-base-color, 8%);
    display: flex;
    flex-direction: column;
    align-items: center;
@@ -900,7 +896,7 @@ a.status-card.compact:hover {

 .status__wrapper--filtered__button {
  display: inline;
-  color: color.adjust($ui-highlight-color, $lightness: 8%);
+  color: lighten($ui-highlight-color, 8%);
  border: 0;
  background: transparent;
  padding: 0;
@@ -941,12 +937,12 @@ a.status-card.compact:hover {
  }

  &--first-in-thread {
-    border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+    border-top: 1px solid lighten($ui-base-color, 8%);
  }

  &__line {
    height: 10px - 4px;
-    border-inline-start: 2px solid color.adjust($ui-base-color, $lightness: 8%);
+    border-inline-start: 2px solid lighten($ui-base-color, 8%);
    width: 0;
    position: absolute;
    top: 0;
@@ -992,7 +988,7 @@ a.status-card.compact:hover {

  &__footer {
    border-radius: 0 0 4px 4px;
-    background: color.adjust($ui-base-color, $lightness: 4%);
+    background: lighten($ui-base-color, 4%);
    padding: 10px;
    padding-top: 12px;
    display: flex;
@@ -1001,7 +997,7 @@ a.status-card.compact:hover {

  &__header {
    border-radius: 4px 4px 0 0;
-    background: color.adjust($ui-base-color, $lightness: 4%);
+    background: lighten($ui-base-color, 4%);
    padding: 10px;
    display: flex;
    justify-content: space-between;
@@ -1041,7 +1037,7 @@ a.status-card.compact:hover {

 .picture-in-picture-placeholder {
  box-sizing: border-box;
-  border: 2px dashed color.adjust($ui-base-color, $lightness: 8%);
+  border: 2px dashed lighten($ui-base-color, 8%);
  background: $base-shadow-color;
  display: flex;
  flex-direction: column;
@@ -1064,6 +1060,6 @@ a.status-card.compact:hover {
  &:hover,
  &:focus,
  &:active {
-    border-color: color.adjust($ui-base-color, $lightness: 12%);
+    border-color: lighten($ui-base-color, 12%);
  }
 }
@@ -1,6 +1,3 @@
-@use "mixins" as *;
-@use "variables" as *;
-
 .container-alt {
  width: 700px;
  margin: 0 auto;
@@ -1,3 +1,3 @@
-@use "contrast/variables";
-@use "index";
-@use "contrast/diff";
+@import "contrast/variables";
+@import "index";
+@import "contrast/diff";
@@ -1,5 +1,3 @@
-@use "sass:color";
-
 // Dependent colors
 $black: #000000;

@@ -13,18 +11,12 @@ $ui-primary-color: $classic-primary-color !default;
 $ui-secondary-color: $classic-secondary-color !default;
 $ui-highlight-color: $classic-highlight-color !default;

-$darker-text-color: color.adjust($ui-primary-color, $lightness: 20%) !default;
-$dark-text-color: color.adjust($ui-primary-color, $lightness: 12%) !default;
-$secondary-text-color: color.adjust(
-  $ui-secondary-color,
-  $lightness: 6%
-) !default;
-$highlight-text-color: color.adjust(
-  $ui-highlight-color,
-  $lightness: 10%
-) !default;
-$action-button-color: color.adjust($ui-base-color, $lightness: 50%);
+$darker-text-color: lighten($ui-primary-color, 20%) !default;
+$dark-text-color: lighten($ui-primary-color, 12%) !default;
+$secondary-text-color: lighten($ui-secondary-color, 6%) !default;
+$highlight-text-color: lighten($ui-highlight-color, 10%) !default;
+$action-button-color: lighten($ui-base-color, 50%);

 $inverted-text-color: $black !default;
-$lighter-text-color: color.adjust($ui-base-color, $lightness: -6%) !default;
-$light-text-color: color.adjust($ui-primary-color, $lightness: -40%) !default;
+$lighter-text-color: darken($ui-base-color, 6%) !default;
+$light-text-color: darken($ui-primary-color, 40%) !default;
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "mixins" as *;
-@use "variables" as *;
-
 .dashboard__counters {
  display: flex;
  flex-wrap: wrap;
@@ -17,7 +13,7 @@
    & > div,
    & > a {
      padding: 20px;
-      background: color.adjust($ui-base-color, $lightness: 4%);
+      background: lighten($ui-base-color, 4%);
      border-radius: 4px;
      box-sizing: border-box;
      height: 100%;
@@ -31,7 +27,7 @@
      &:hover,
      &:focus,
      &:active {
-        background: color.adjust($ui-base-color, $lightness: 8%);
+        background: lighten($ui-base-color, 8%);
      }
    }
  }
@@ -103,12 +99,12 @@
    }

    &.positive {
-      background: color.adjust($ui-base-color, $lightness: 4%);
+      background: lighten($ui-base-color, 4%);
      color: $valid-value-color;
    }

    &.negative {
-      background: color.adjust($ui-base-color, $lightness: 4%);
+      background: lighten($ui-base-color, 4%);
      color: $error-value-color;
    }

@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "mixins" as *;
-@use "variables" as *;
-
 $no-columns-breakpoint: 600px;

 code {
@@ -168,7 +164,7 @@ code {
    code {
      border-radius: 3px;
      padding: 0.2em 0.4em;
-      background: color.adjust($ui-base-color, $lightness: -12%);
+      background: darken($ui-base-color, 12%);
    }

    li {
@@ -296,7 +292,7 @@ code {

  .required abbr {
    text-decoration: none;
-    color: color.adjust($error-value-color, $lightness: 12%);
+    color: lighten($error-value-color, 12%);
  }

  .fields-group {
@@ -439,13 +435,13 @@ code {
    outline: 0;
    font-family: inherit;
    resize: vertical;
-    background: color.adjust($ui-base-color, $lightness: -10%);
-    border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
+    background: darken($ui-base-color, 10%);
+    border: 1px solid darken($ui-base-color, 14%);
    border-radius: 4px;
    padding: 10px;

    &::placeholder {
-      color: color.adjust($darker-text-color, $lightness: 4%);
+      color: lighten($darker-text-color, 4%);
    }

    &:invalid {
@@ -457,13 +453,13 @@ code {
    }

    &:hover {
-      border-color: color.adjust($ui-base-color, $lightness: -20%);
+      border-color: darken($ui-base-color, 20%);
    }

    &:active,
    &:focus {
      border-color: $highlight-text-color;
-      background: color.adjust($ui-base-color, $lightness: -8%);
+      background: darken($ui-base-color, 8%);
    }
  }

@@ -474,13 +470,13 @@ code {
  input[type="datetime-local"] {
    &:focus:invalid:not(:placeholder-shown),
    &:required:invalid:not(:placeholder-shown) {
-      border-color: color.adjust($error-red, $lightness: 12%);
+      border-color: lighten($error-red, 12%);
    }
  }

  .input.field_with_errors {
    label {
-      color: color.adjust($error-red, $lightness: 12%);
+      color: lighten($error-red, 12%);
    }

    input[type="text"],
@@ -490,13 +486,13 @@ code {
    input[type="datetime-local"],
    textarea,
    select {
-      border-color: color.adjust($error-red, $lightness: 12%);
+      border-color: lighten($error-red, 12%);
    }

    .error {
      display: block;
      font-weight: 500;
-      color: color.adjust($error-red, $lightness: 12%);
+      color: lighten($error-red, 12%);
      margin-top: 4px;
    }
  }
@@ -588,10 +584,10 @@ code {
    outline: 0;
    font-family: inherit;
    resize: vertical;
-    background: color.adjust($ui-base-color, $lightness: -10%)
-      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($ui-base-color, $lightness: 12%))}'/></svg>")
+    background: darken($ui-base-color, 10%)
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
      no-repeat right 8px center / auto 16px;
-    border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
+    border: 1px solid darken($ui-base-color, 14%);
    border-radius: 4px;
    padding-inline-start: 10px;
    padding-inline-end: 30px;
@@ -632,8 +628,8 @@ code {
        width: 5px;
        background-image: linear-gradient(
          to right,
-          rgba(color.adjust($ui-base-color, $lightness: -10%), 0),
-          color.adjust($ui-base-color, $lightness: -10%)
+          rgba(darken($ui-base-color, 10%), 0),
+          darken($ui-base-color, 10%)
        );
      }
    }
@@ -648,7 +644,7 @@ code {
 }

 .flash-message {
-  background: color.adjust($ui-base-color, $lightness: 8%);
+  background: lighten($ui-base-color, 8%);
  color: $darker-text-color;
  border-radius: 4px;
  padding: 15px 10px;
@@ -729,7 +725,7 @@ code {
    }

    &:focus {
-      background: color.adjust($ui-base-color, $lightness: 4%);
+      background: lighten($ui-base-color, 4%);
    }
  }

@@ -813,7 +809,7 @@ code {
    &:hover,
    &:focus,
    &:active {
-      color: color.adjust($highlight-text-color, $lightness: 8%);
+      color: lighten($highlight-text-color, 8%);
    }
  }
 }
@@ -859,7 +855,7 @@ code {
  .permissions-list {
    border: 1px solid $ui-base-color;
    border-radius: 4px;
-    background: color.adjust($ui-base-color, $lightness: -4%);
+    background: darken($ui-base-color, 4%);
    margin-bottom: 30px;
  }

@@ -1009,8 +1005,8 @@ code {
 }

 .input-copy {
-  background: color.adjust($ui-base-color, $lightness: -10%);
-  border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
+  background: darken($ui-base-color, 10%);
+  border: 1px solid darken($ui-base-color, 14%);
  border-radius: 4px;
  display: flex;
  align-items: center;
@@ -1071,7 +1067,7 @@ code {
  &__item {
    padding: 15px;
    color: $ui-secondary-color;
-    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
+    border-bottom: 1px solid lighten($ui-base-color, 4%);
    display: flex;
    align-items: center;

@@ -1,5 +1,3 @@
-@use "variables" as *;
-
 /* 🦥 GoToSocial */

 /* Variables */
@@ -6,8 +6,8 @@
 */

 /* 🛠️ Config */
-@use "colors";
-@use "sizes";
+@import "colors";
+@import "sizes";

 /* 🧩 Components */
-@use "status";
+@import "status";
@@ -1,10 +1,10 @@
 /* 🚥 Status */
-@use "status/status-account";
-@use "status/status-display-name";
-@use "status/status-icons";
-@use "status/status-info";
-@use "status/status-prepend";
-@use "status/status-spoiler";
+@import "status/status-account";
+@import "status/status-display-name";
+@import "status/status-icons";
+@import "status/status-info";
+@import "status/status-prepend";
+@import "status/status-spoiler";

 .status {
    background-color: var(--color-status-bg);
@@ -1,28 +1,28 @@
-@use "mixins";
-@use "variables";
-@use "styles/fonts/roboto";
-@use "styles/fonts/roboto-mono";
+@import "mixins";
+@import "variables";
+@import "styles/fonts/roboto";
+@import "styles/fonts/roboto-mono";

-@use "reset";
-@use "basics";
-@use "branding";
-@use "containers";
-@use "lists";
-@use "modal";
-@use "widgets";
-@use "forms";
-@use "accounts";
-@use "statuses";
-@use "components/index";
-@use "polls";
-@use "about";
-@use "tables";
-@use "admin";
-@use "accessibility";
-@use "rtl";
-@use "dashboard";
-@use "rich_text";
+@import "reset";
+@import "basics";
+@import "branding";
+@import "containers";
+@import "lists";
+@import "modal";
+@import "widgets";
+@import "forms";
+@import "accounts";
+@import "statuses";
+@import "components/index";
+@import "polls";
+@import "about";
+@import "tables";
+@import "admin";
+@import "accessibility";
+@import "rtl";
+@import "dashboard";
+@import "rich_text";

-@use "gts";
-@use "gts/config";
-@use "tangerine/config" as tangerine;
+@import "gts";
+@import "gts/config";
+@import "tangerine/config";
@@ -1,6 +1,5 @@
-@use "sass:color";
-@use "styles/fonts/roboto";
-@use "reset";
+@import "styles/fonts/roboto";
+@import "reset";

 :root {
    --color-bg: #191b22;
@@ -71,7 +70,7 @@ button:focus-visible {

 button {
    padding: 7px 10px;
-    border: 1px solid color.scale(#66befe, $lightness: 7%);
+    border: 1px solid lighten(#66befe, 7%);
    border-radius: 4px;
    box-sizing: border-box;
    color: #2a2b2f;
@@ -96,7 +95,7 @@ input[type="text"] {
    display: block;
    margin: 0;
    padding: 15px;
-    border: 1px solid color.scale(#282c37, $lightness: 7%);
+    border: 1px solid lighten(#282c37, 7%);
    border-radius: 4px;
    box-sizing: border-box;
    box-shadow: none;
@@ -110,7 +109,7 @@ input[type="text"] {
 .content {
    padding: 15px;
    border-radius: 4px;
-    border: 1px solid color.scale(#39404f, $lightness: 7%);
+    border: 1px solid lighten(#39404f, 7%);
    color: #fff;
    background-color: #39404f;
 }
@@ -1,4 +1,4 @@
-@use "mastodon-light/variables";
-@use "index";
-@use "mastodon-light/diff";
-@use "mastodon-light/colors";
+@import "mastodon-light/variables";
+@import "index";
+@import "mastodon-light/diff";
+@import "mastodon-light/colors";
@@ -16,9 +16,6 @@
  /* Secondary */
  --color-secondary-fg: #606984;

-  /* Account */
-  --color-account-bg: #fff;
-
  /* Drawer */
  --color-drawer-bg: #fff;
  --color-drawer-bg--hover: #ccd7e0;
@@ -1,6 +1,3 @@
-@use "sass:color";
-@use "../variables" as *;
-
 // Notes!
 // Sass color functions, "darken" and "lighten" are automatically replaced.

@@ -29,23 +26,23 @@ html {
 .column-inline-form,
 .regeneration-indicator {
  background: $white;
-  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border: 1px solid lighten($ui-base-color, 8%);
  border-top: 0;
 }

 .error-column {
-  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border: 1px solid lighten($ui-base-color, 8%);
 }

 .column > .scrollable.about {
-  border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-top: 1px solid lighten($ui-base-color, 8%);
 }

 .about__meta,
 .about__section__title,
 .interaction-modal {
  background: $white;
-  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border: 1px solid lighten($ui-base-color, 8%);
 }

 .rules-list li::before {
@@ -53,12 +50,12 @@ html {
 }

 .directory__card__img {
-  background: color.adjust($ui-base-color, $lightness: 12%);
+  background: lighten($ui-base-color, 12%);
 }

 .filter-form {
  background: $white;
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
 }

 .column-back-button,
@@ -106,7 +103,7 @@ html {
 .confirmation-modal__cancel-button,
 .mute-modal__cancel-button,
 .block-modal__cancel-button {
-  color: color.adjust($ui-base-color, $lightness: 26%);
+  color: lighten($ui-base-color, 26%);

  &:hover,
  &:focus,
@@ -116,15 +113,15 @@ html {
 }

 .column-subheading {
-  background: color.adjust($ui-base-color, $lightness: -4%);
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  background: darken($ui-base-color, 4%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);
 }

 .getting-started,
 .scrollable {
  .column-link {
    background: $white;
-    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+    border-bottom: 1px solid lighten($ui-base-color, 8%);

    &:hover,
    &:active,
@@ -135,8 +132,8 @@ html {
 }

 .getting-started .navigation-bar {
-  border-top: 1px solid color.adjust($ui-base-color, $lightness: 8%);
-  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border-top: 1px solid lighten($ui-base-color, 8%);
+  border-bottom: 1px solid lighten($ui-base-color, 8%);

  @media screen and (max-width: $no-gap-breakpoint) {
    border-top: 0;
@@ -151,7 +148,7 @@ html {
 .setting-text,
 .report-dialog-modal__textarea,
 .audio-player {
-  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border: 1px solid lighten($ui-base-color, 8%);
 }

 .report-dialog-modal .dialog-option .poll__input {
@@ -172,18 +169,18 @@ html {

 .compose-form__poll-wrapper select {
  background: $simple-background-color
-    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($ui-base-color, $lightness: 8%))}'/></svg>")
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>")
    no-repeat right 8px center / auto 16px;
 }

 .compose-form__poll-wrapper,
 .compose-form__poll-wrapper .poll__footer {
-  border-top-color: color.adjust($ui-base-color, $lightness: 8%);
+  border-top-color: lighten($ui-base-color, 8%);
 }

 .compose-form .compose-form__buttons-wrapper {
  background: $ui-base-color;
-  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border: 1px solid lighten($ui-base-color, 8%);
  border-top: 0;
 }

@@ -198,7 +195,7 @@ html {
  .compose-form__modifiers {
    .compose-form__upload__actions .icon-button,
    .compose-form__upload__warning .icon-button {
-      color: color.adjust($white, $lightness: 7%);
+      color: lighten($white, 7%);

      &:active,
      &:focus,
@@ -209,11 +206,11 @@ html {
  }

  .compose-form__buttons-wrapper {
-    background: color.adjust($ui-base-color, $lightness: -6%);
+    background: darken($ui-base-color, 6%);
  }

  .autosuggest-textarea__suggestions {
-    background: color.adjust($ui-base-color, $lightness: -6%);
+    background: darken($ui-base-color, 6%);
  }

  .autosuggest-textarea__suggestions__item {
@@ -221,16 +218,16 @@ html {
    &:focus,
    &:active,
    &.selected {
-      background: color.adjust($ui-base-color, $lightness: 4%);
+      background: lighten($ui-base-color, 4%);
    }
  }
 }

 .emoji-mart-bar {
-  border-color: color.adjust($ui-base-color, $lightness: 4%);
+  border-color: lighten($ui-base-color, 4%);

  &:first-child {
-    background: color.adjust($ui-base-color, $lightness: -6%);
+    background: darken($ui-base-color, 6%);
  }
 }

@@ -245,7 +242,7 @@ html {

 // Change the background colors of statuses
 .focusable:focus {
-  background: color.adjust($white, $lightness: 4%);
+  background: lighten($white, 4%);
 }

 .detailed-status,
@@ -260,7 +257,7 @@ html {

  &:hover,
  &:focus {
-    background: color.adjust($ui-base-color, $lightness: 4%);
+    background: lighten($ui-base-color, 4%);
  }
 }

@@ -323,12 +320,12 @@ html {

 .language-dropdown__dropdown__results__item
  .language-dropdown__dropdown__results__item__common-name {
-  color: color.adjust($ui-base-color, $lightness: 8%);
+  color: lighten($ui-base-color, 8%);
 }

 .language-dropdown__dropdown__results__item.active
  .language-dropdown__dropdown__results__item__common-name {
-  color: color.adjust($ui-base-color, $lightness: -12%);
+  color: darken($ui-base-color, 12%);
 }

 .dropdown-menu__separator,
@@ -336,11 +333,11 @@ html {
 .dropdown-menu__container__header,
 .compare-history-modal .report-modal__target,
 .report-dialog-modal .poll__option.dialog-option {
-  border-bottom-color: color.adjust($ui-base-color, $lightness: 4%);
+  border-bottom-color: lighten($ui-base-color, 4%);
 }

 .report-dialog-modal__container {
-  border-top-color: color.adjust($ui-base-color, $lightness: 4%);
+  border-top-color: lighten($ui-base-color, 4%);
 }

 // Change the background colors of modals
@@ -362,7 +359,7 @@ html {
 .picture-in-picture__footer,
 .reactions-bar__item {
  background: $white;
-  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border: 1px solid lighten($ui-base-color, 8%);
 }

 .reactions-bar__item:hover,
@@ -375,12 +372,8 @@ html {
 }

 .reactions-bar__item.active {
-  background-color: color.mix($white, $ui-highlight-color, 80%);
-  border-color: color.mix(
-    color.adjust($ui-base-color, $lightness: 8%),
-    $ui-highlight-color,
-    80%
-  );
+  background-color: mix($white, $ui-highlight-color, 80%);
+  border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%);
 }

 .media-modal__overlay .picture-in-picture__footer {
@@ -402,16 +395,16 @@ html {
 }

 .report-modal__comment {
-  border-right-color: color.adjust($ui-base-color, $lightness: 8%);
+  border-right-color: lighten($ui-base-color, 8%);
 }

 .report-modal__container {
-  border-top-color: color.adjust($ui-base-color, $lightness: 8%);
+  border-top-color: lighten($ui-base-color, 8%);
 }

 .column-header__collapsible-inner {
-  background: color.adjust($ui-base-color, $lightness: -4%);
-  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  background: darken($ui-base-color, 4%);
+  border: 1px solid lighten($ui-base-color, 8%);
  border-top: 0;
 }

@@ -426,7 +419,7 @@ html {
 }

 .flash-message.warning {
-  color: color.adjust($gold-star, $lightness: 16%);
+  color: lighten($gold-star, 16%);
 }

 .boost-modal__action-bar,
@@ -435,14 +428,14 @@ html {
 .block-modal__action-bar,
 .onboarding-modal__paginator,
 .error-modal__footer {
-  background: color.adjust($ui-base-color, $lightness: -6%);
+  background: darken($ui-base-color, 6%);

  .onboarding-modal__nav,
  .error-modal__nav {
    &:hover,
    &:focus,
    &:active {
-      background-color: color.adjust($ui-base-color, $lightness: -12%);
+      background-color: darken($ui-base-color, 12%);
    }
  }
 }
@@ -453,10 +446,10 @@ html {

 .embed-modal .embed-modal__container .embed-modal__html {
  background: $white;
-  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border: 1px solid lighten($ui-base-color, 8%);

  &:focus {
-    border-color: color.adjust($ui-base-color, $lightness: 12%);
+    border-color: lighten($ui-base-color, 12%);
    background: $white;
  }
 }
@@ -466,12 +459,12 @@ html {
 }

 .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background: color.adjust($ui-secondary-color, $lightness: -10%);
+  background: darken($ui-secondary-color, 10%);
 }

 .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
  .react-toggle-track {
-  background: color.adjust($ui-highlight-color, $lightness: 10%);
+  background: lighten($ui-highlight-color, 10%);
 }

 // Change the default color used for the text in an empty column or on the error column
@@ -483,8 +476,8 @@ html {

 // Change the default colors used on some parts of the profile pages
 .activity-stream-tabs {
-  background: var(--color-account-bg);
-  border-bottom-color: color.adjust($ui-base-color, $lightness: 8%);
+  background: $account-background-color;
+  border-bottom-color: lighten($ui-base-color, 8%);
 }

 .nothing-here,
@@ -492,7 +485,7 @@ html {
 .directory__tag > a,
 .directory__tag > div {
  background: $white;
-  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border: 1px solid lighten($ui-base-color, 8%);

  @media screen and (max-width: $no-gap-breakpoint) {
    border-left: 0;
@@ -508,15 +501,15 @@ html {
  input[type="password"],
  textarea {
    &:hover {
-      border-color: color.adjust($ui-base-color, $lightness: 12%);
+      border-color: lighten($ui-base-color, 12%);
    }
  }
 }

 .picture-in-picture-placeholder {
  background: $white;
-  border-color: color.adjust($ui-base-color, $lightness: 8%);
-  color: color.adjust($ui-base-color, $lightness: 8%);
+  border-color: lighten($ui-base-color, 8%);
+  color: lighten($ui-base-color, 8%);
 }

 .directory__tag > a {
@@ -535,24 +528,24 @@ html {
  &__toolbar,
  &__row,
  .nothing-here {
-    border-color: color.adjust($ui-base-color, $lightness: 8%);
+    border-color: lighten($ui-base-color, 8%);
  }
 }

 .activity-stream {
-  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border: 1px solid lighten($ui-base-color, 8%);

  &--under-tabs {
    border-top: 0;
  }

  .entry {
-    background: var(--color-account-bg);
+    background: $account-background-color;

    .detailed-status.light,
    .more.light,
    .status.light {
-      border-bottom-color: color.adjust($ui-base-color, $lightness: 8%);
+      border-bottom-color: lighten($ui-base-color, 8%);
    }
  }

@@ -619,7 +612,7 @@ html {

 .reply-indicator {
  background: transparent;
-  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border: 1px solid lighten($ui-base-color, 8%);
 }

 .status__content,
@@ -643,9 +636,9 @@ html {
 }

 .mute-modal select {
-  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border: 1px solid lighten($ui-base-color, 8%);
  background: $simple-background-color
-    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($ui-base-color, $lightness: 8%))}'/></svg>")
+    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 8%))}'/></svg>")
    no-repeat right 8px center / auto 16px;
 }

@@ -657,15 +650,15 @@ html {
  &:not([disabled]) {
    &:hover,
    &:focus {
-      background: color.adjust($ui-secondary-color, $lightness: -10%);
+      background: darken($ui-secondary-color, 10%);
    }

    &.active {
-      background-color: color.adjust($ui-highlight-color, $lightness: -2%);
+      background-color: darken($ui-highlight-color, 2%);

      &:hover,
      &:focus {
-        background: color.adjust($ui-highlight-color, $lightness: 10%);
+        background: lighten($ui-highlight-color, 10%);
      }
    }
  }
@@ -673,16 +666,16 @@ html {

 .glitch.local-settings {
  background: $ui-base-color;
-  border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+  border: 1px solid lighten($ui-base-color, 8%);
 }

 .glitch.local-settings__navigation {
-  background: color.adjust($ui-base-color, $lightness: -8%);
+  background: darken($ui-base-color, 8%);
 }

 .glitch.local-settings__navigation__item {
-  background: color.adjust($ui-base-color, $lightness: -8%);
-  border-bottom: 1px color.adjust($ui-base-color, $lightness: 8%) solid;
+  background: darken($ui-base-color, 8%);
+  border-bottom: 1px lighten($ui-base-color, 8%) solid;

  &:hover {
    background: $ui-base-color;
@@ -712,8 +705,8 @@ html {

 .status.collapsed .status__content::after {
  background: linear-gradient(
-    rgba(color.adjust($ui-base-color, $lightness: -13%), 0),
-    rgba(color.adjust($ui-base-color, $lightness: -13%), 1)
+    rgba(darken($ui-base-color, 13%), 0),
+    rgba(darken($ui-base-color, 13%), 1)
  );
 }

@@ -1,5 +1,3 @@
-@use "sass:color";
-
 // Dependent colors
 $black: #000000;
 $white: #ffffff;
@@ -16,7 +14,7 @@ $grey-600: #4e4c5a; // Trout
 $grey-100: #dadaf3; // Topaz

 // Differences
-$success-green: color.adjust(#3c754d, $lightness: 8%);
+$success-green: lighten(#3c754d, 8%);

 $base-overlay-background: $white !default;
 $valid-value-color: $success-green !default;
@@ -36,10 +34,7 @@ $ui-button-tertiary-border-color: $blurple-500 !default;

 $primary-text-color: $black !default;
 $darker-text-color: $classic-base-color !default;
-$highlight-text-color: color.adjust(
-  $ui-highlight-color,
-  $lightness: -8%
-) !default;
+$highlight-text-color: darken($ui-highlight-color, 8%) !default;
 $dark-text-color: #444b5d;
 $action-button-color: #606984;

@@ -52,19 +47,11 @@ $account-background-color: $white !default;

 // Invert darkened and lightened colors
@function darken($color, $amount) {
-  @return hsl(
-    color.hue($color),
-    color.saturation($color),
-    color.lightness($color) + $amount
-  );
+  @return hsl(hue($color), saturation($color), lightness($color) + $amount);
 }

@function lighten($color, $amount) {
-  @return hsl(
-    color.hue($color),
-    color.saturation($color),
-    color.lightness($color) - $amount
-  );
+  @return hsl(hue($color), saturation($color), lightness($color) - $amount);
 }

 $emojis-requiring-inversion: "chains";
@@ -1,6 +1,3 @@
-@use "mixins" as *;
-@use "variables" as *;
-
 .modal-layout {
  background: $ui-base-color
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 234.80078 31.757813" width="234.80078" height="31.757812"><path d="M19.599609 0c-1.05 0-2.10039.375-2.90039 1.125L0 16.925781v14.832031h234.80078V17.025391l-16.5-15.900391c-1.6-1.5-4.20078-1.5-5.80078 0l-13.80078 13.099609c-1.6 1.5-4.19883 1.5-5.79883 0L179.09961 1.125c-1.6-1.5-4.19883-1.5-5.79883 0L159.5 14.224609c-1.6 1.5-4.20078 1.5-5.80078 0L139.90039 1.125c-1.6-1.5-4.20078-1.5-5.80078 0l-13.79883 13.099609c-1.6 1.5-4.20078 1.5-5.80078 0L100.69922 1.125c-1.600001-1.5-4.198829-1.5-5.798829 0l-13.59961 13.099609c-1.6 1.5-4.200781 1.5-5.800781 0L61.699219 1.125c-1.6-1.5-4.198828-1.5-5.798828 0L42.099609 14.224609c-1.6 1.5-4.198828 1.5-5.798828 0L22.5 1.125C21.7.375 20.649609 0 19.599609 0z" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>')
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "mixins" as *;
-@use "variables" as *;
-
 .poll {
  margin-top: 16px;
  font-size: 14px;
@@ -20,7 +16,7 @@
  &__chart {
    border-radius: 4px;
    display: block;
-    background: color.adjust($ui-primary-color, $lightness: -5%);
+    background: darken($ui-primary-color, 5%);
    height: 5px;
    min-width: 1%;

@@ -51,17 +47,17 @@
    // duplication
    &::-moz-progress-bar {
      border-radius: 4px;
-      background: color.adjust($ui-primary-color, $lightness: -5%);
+      background: darken($ui-primary-color, 5%);
    }

    &::-ms-fill {
      border-radius: 4px;
-      background: color.adjust($ui-primary-color, $lightness: -5%);
+      background: darken($ui-primary-color, 5%);
    }

    &::-webkit-progress-value {
      border-radius: 4px;
-      background: color.adjust($ui-primary-color, $lightness: -5%);
+      background: darken($ui-primary-color, 5%);
    }
  }

@@ -98,7 +94,7 @@
      outline: 0;
      font-family: inherit;
      background: $simple-background-color;
-      border: 1px solid color.adjust($simple-background-color, $lightness: -14%);
+      border: 1px solid darken($simple-background-color, 14%);
      border-radius: 4px;
      padding: 6px 10px;

@@ -140,7 +136,7 @@
    &:active,
    &:focus,
    &:hover {
-      border-color: color.adjust($valid-value-color, $lightness: 15%);
+      border-color: lighten($valid-value-color, 15%);
      border-width: 4px;
    }

@@ -228,7 +224,7 @@
 }

 .compose-form__poll-wrapper {
-  border-top: 1px solid color.adjust($simple-background-color, $lightness: -8%);
+  border-top: 1px solid darken($simple-background-color, 8%);
  overflow-x: hidden;

  ul {
@@ -244,8 +240,7 @@
  }

  .poll__footer {
-    border-top: 1px solid
-      color.adjust($simple-background-color, $lightness: -8%);
+    border-top: 1px solid darken($simple-background-color, 8%);
    padding: 10px;
    display: flex;
    align-items: center;
@@ -301,9 +296,9 @@
    outline: 0;
    font-family: inherit;
    background: $simple-background-color
-      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($simple-background-color, $lightness: - 14%))}'/></svg>")
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(darken($simple-background-color, 14%))}'/></svg>")
      no-repeat right 8px center / auto 16px;
-    border: 1px solid color.adjust($simple-background-color, $lightness: -14%);
+    border: 1px solid darken($simple-background-color, 14%);
    border-radius: 4px;
    padding: 6px 10px;
    padding-inline-end: 30px;
@@ -314,7 +309,7 @@
  color: $dark-text-color;

  &__chart {
-    background: rgba(color.adjust($ui-primary-color, $lightness: -14%), 0.7);
+    background: rgba(darken($ui-primary-color, 14%), 0.7);

    &.leading {
      background: rgba($ui-highlight-color, 0.5);
@@ -1,6 +1,3 @@
-@use "mixins" as *;
-@use "variables" as *;
-
 .status__content__text,
 .e-content,
 .reply-indicator__content {
@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "mixins" as *;
-@use "variables" as *;
-
 body.rtl {
  direction: rtl;

@@ -98,15 +94,15 @@ body.rtl {
    &::after {
      background-image: linear-gradient(
        to left,
-        rgba(color.adjust($ui-base-color, $lightness: -10%), 0),
-        color.adjust($ui-base-color, $lightness: -10%)
+        rgba(darken($ui-base-color, 10%), 0),
+        darken($ui-base-color, 10%)
      );
    }
  }

  .simple_form select {
-    background: color.adjust($ui-base-color, $lightness: -10%)
-      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(color.adjust($ui-base-color, $lightness: 12%))}'/></svg>")
+    background: darken($ui-base-color, 10%)
+      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(lighten($ui-base-color, 12%))}'/></svg>")
      no-repeat left 8px center / auto 16px;
  }

@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "mixins" as *;
-@use "variables" as *;
-
 .activity-stream {
  box-shadow: 0 0 15px rgba($base-shadow-color, 0.2);
  border-radius: 4px;
@@ -73,7 +69,7 @@
  }

  &--highlighted .entry {
-    background: color.adjust($ui-base-color, $lightness: 8%);
+    background: lighten($ui-base-color, 8%);
  }
 }

@@ -1,7 +1,3 @@
-@use "sass:color";
-@use "mixins" as *;
-@use "variables" as *;
-
 .table {
  width: 100%;
  max-width: 100%;
@@ -15,7 +11,7 @@
    vertical-align: top;
    border-top: 1px solid $ui-base-color;
    text-align: start;
-    background: color.adjust($ui-base-color, $lightness: -4%);
+    background: darken($ui-base-color, 4%);

    &.critical {
      font-weight: 700;
@@ -82,7 +78,7 @@
    & > tbody > tr > td {
      padding: 11px 10px;
      background: transparent;
-      border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+      border: 1px solid lighten($ui-base-color, 8%);
      color: $secondary-text-color;
    }

@@ -95,19 +91,17 @@
  &.batch-table {
    & > thead > tr > th {
      background: $ui-base-color;
-      border-top: 1px solid color.adjust($ui-base-color, $lightness: -8%);
-      border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
+      border-top: 1px solid darken($ui-base-color, 8%);
+      border-bottom: 1px solid darken($ui-base-color, 8%);

      &:first-child {
        border-radius: 4px 0 0;
-        border-inline-start: 1px solid
-          color.adjust($ui-base-color, $lightness: -8%);
+        border-inline-start: 1px solid darken($ui-base-color, 8%);
      }

      &:last-child {
        border-radius: 0 4px 0 0;
-        border-inline-end: 1px solid
-          color.adjust($ui-base-color, $lightness: -8%);
+        border-inline-end: 1px solid darken($ui-base-color, 8%);
      }
    }
  }
@@ -192,7 +186,7 @@ a.table-action-link {
    position: sticky;
    top: 0;
    z-index: 1;
-    border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
+    border: 1px solid darken($ui-base-color, 8%);
    background: $ui-base-color;
    border-radius: 4px 0 0;
    height: 47px;
@@ -209,7 +203,7 @@ a.table-action-link {
    height: 47px;
    align-items: center;
    justify-content: center;
-    border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
+    border: 1px solid darken($ui-base-color, 8%);
    border-top: 0;
    color: $secondary-text-color;
    display: none;
@@ -248,14 +242,14 @@ a.table-action-link {
      &:hover,
      &:focus,
      &:active {
-        background: color.adjust($ui-base-color, $lightness: 8%);
+        background: lighten($ui-base-color, 8%);
      }
    }
  }

  &__form {
    padding: 16px;
-    border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
+    border: 1px solid darken($ui-base-color, 8%);
    border-top: 0;
    background: $ui-base-color;

@@ -266,25 +260,25 @@ a.table-action-link {
  }

  &__row {
-    border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
+    border: 1px solid darken($ui-base-color, 8%);
    border-top: 0;
-    background: color.adjust($ui-base-color, $lightness: -4%);
+    background: darken($ui-base-color, 4%);

    @media screen and (max-width: $no-gap-breakpoint) {
      .optional &:first-child {
-        border-top: 1px solid color.adjust($ui-base-color, $lightness: -8%);
+        border-top: 1px solid darken($ui-base-color, 8%);
      }
    }

    &:hover {
-      background: color.adjust($ui-base-color, $lightness: -2%);
+      background: darken($ui-base-color, 2%);
    }

    &:nth-child(even) {
      background: $ui-base-color;

      &:hover {
-        background: color.adjust($ui-base-color, $lightness: 2%);
+        background: lighten($ui-base-color, 2%);
      }
    }

@@ -359,12 +353,12 @@ a.table-action-link {
  }

  .nothing-here {
-    border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
+    border: 1px solid darken($ui-base-color, 8%);
    border-top: 0;
    box-shadow: none;

    @media screen and (max-width: $no-gap-breakpoint) {
-      border-top: 1px solid color.adjust($ui-base-color, $lightness: -8%);
+      border-top: 1px solid darken($ui-base-color, 8%);
    }
  }

@@ -4,7 +4,7 @@
 */

 /* 🛠️ Config */
-@use "keyframes";
+@import "keyframes";

 /* 🧩 Components */
-@use "status-bar";
+@import "status-bar";
@@ -1,5 +1,3 @@
-@use "sass:color";
-
 // Commonly used web colors
 $black: #000000; // Black
 $white: #ffffff; // White
@@ -34,9 +32,9 @@ $error-value-color: $error-red !default;

 // Tell UI to use selected colors
 $ui-base-color: $classic-base-color !default; // Darkest
-$ui-base-lighter-color: color.scale(
+$ui-base-lighter-color: lighten(
  $ui-base-color,
-  $lightness: 26%
+  26%
 ) !default; // Lighter darkest
 $ui-primary-color: $classic-primary-color !default; // Lighter
 $ui-secondary-color: $classic-secondary-color !default; // Lightest
@@ -63,15 +61,9 @@ $primary-text-color: $white !default;
 $darker-text-color: $ui-primary-color !default;
 $dark-text-color: $ui-base-lighter-color !default;
 $secondary-text-color: $ui-secondary-color !default;
-$highlight-text-color: color.scale(
-  $ui-highlight-color,
-  $lightness: 8%
-) !default;
+$highlight-text-color: lighten($ui-highlight-color, 8%) !default;
 $action-button-color: $ui-base-lighter-color !default;
-$action-button-focus-color: color.scale(
-  $ui-base-lighter-color,
-  $lightness: 4%
-) !default;
+$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;
 $passive-text-color: $gold-star !default;
 $active-passive-text-color: $success-green !default;

@@ -102,11 +94,11 @@ $ui-avatar-border-size: 8%;
 $dismiss-overlay-width: 4rem;

 :root {
-  --dropdown-border-color: #{color.scale($ui-base-color, $lightness: 12%)};
-  --dropdown-background-color: #{color.scale($ui-base-color, $lightness: 4%)};
+  --dropdown-border-color: #{lighten($ui-base-color, 12%)};
+  --dropdown-background-color: #{lighten($ui-base-color, 4%)};
  --dropdown-shadow:
    0 20px 25px -5px #{rgba($base-shadow-color, 0.25)},
    0 8px 10px -6px #{rgba($base-shadow-color, 0.25)};
-  --modal-background-color: #{color.scale($ui-base-color, $lightness: -4%)};
-  --modal-border-color: #{color.scale($ui-base-color, $lightness: 4%)};
+  --modal-background-color: #{darken($ui-base-color, 4%)};
+  --modal-border-color: #{lighten($ui-base-color, 4%)};
 }
@@ -1,7 +1,4 @@
-@use "sass:color";
@use "sass:math";
-@use "mixins" as *;
-@use "variables" as *;

 .hero-widget {
  margin-bottom: 10px;
@@ -57,7 +54,7 @@
      font-family: inherit;
      font-size: inherit;
      line-height: inherit;
-      color: color.adjust($darker-text-color, $lightness: 10%);
+      color: lighten($darker-text-color, 10%);
    }

    a {
@@ -226,7 +223,7 @@
      &:hover,
      &:active,
      &:focus {
-        background: color.adjust($ui-base-color, $lightness: 8%);
+        background: lighten($ui-base-color, 8%);
      }
    }

@@ -308,7 +305,7 @@
  tbody td {
    padding: 15px 0;
    vertical-align: middle;
-    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
+    border-bottom: 1px solid lighten($ui-base-color, 8%);
  }

  tbody tr:last-child td {
@@ -1 +1 @@
-// @import "flavours/glitch/styles/contrast";
+@import "flavours/glitch/styles/contrast";
@@ -1 +1 @@
-// @import "flavours/glitch/styles/mastodon-light";
+@import "flavours/glitch/styles/mastodon-light";
@@ -129,8 +129,8 @@
    "requestidlecallback": "^0.3.0",
    "reselect": "^4.1.8",
    "rimraf": "^5.0.1",
-    "sass": "^1.62.1",
-    "sass-loader": "^10.2.0",
+    "sass": "^1.93.2",
+    "sass-loader": "^16.0.5",
    "stacktrace-js": "^2.0.2",
    "stringz": "^2.1.0",
    "substring-trie": "^1.0.2",
@@ -2569,8 +2569,8 @@ __metadata:
    requestidlecallback: "npm:^0.3.0"
    reselect: "npm:^4.1.8"
    rimraf: "npm:^5.0.1"
-    sass: "npm:^1.62.1"
-    sass-loader: "npm:^10.2.0"
+    sass: "npm:^1.93.2"
+    sass-loader: "npm:^16.0.5"
    stacktrace-js: "npm:^2.0.2"
    stringz: "npm:^2.1.0"
    stylelint: "npm:^15.10.1"
@@ -13659,32 +13659,33 @@ __metadata:
  languageName: node
  linkType: hard

-"sass-loader@npm:^10.2.0":
-  version: 10.5.2
-  resolution: "sass-loader@npm:10.5.2"
+"sass-loader@npm:^16.0.5":
+  version: 16.0.5
+  resolution: "sass-loader@npm:16.0.5"
  dependencies:
-    klona: "npm:^2.0.4"
-    loader-utils: "npm:^2.0.0"
    neo-async: "npm:^2.6.2"
-    schema-utils: "npm:^3.0.0"
-    semver: "npm:^7.3.2"
  peerDependencies:
-    fibers: ">= 3.1.0"
+    "@rspack/core": 0.x || 1.x
    node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
    sass: ^1.3.0
-    webpack: ^4.36.0 || ^5.0.0
+    sass-embedded: "*"
+    webpack: ^5.0.0
  peerDependenciesMeta:
-    fibers:
+    "@rspack/core":
      optional: true
    node-sass:
      optional: true
    sass:
      optional: true
-  checksum: 10c0/5ba4a83459fbb50e21d4f4b1b59baf1ddf8dd404099b6d1f2ec887c6903659e505879915030dd9efb1c6dd5fde2d515a19f418487b73d1cc59f6aad60c79bcf5
+    sass-embedded:
+      optional: true
+    webpack:
+      optional: true
+  checksum: 10c0/216422b7b9e6e3f22739dc96887d883d2415f188d5c47631fd28c80608b5fae71167b26d0c74a1e917614e4d494fa73b1190ad5ca2f587c1afee84dc1d30f003
  languageName: node
  linkType: hard

-"sass@npm:^1.62.1":
+"sass@npm:^1.93.2":
  version: 1.93.2
  resolution: "sass@npm:1.93.2"
  dependencies:
@@ -13796,7 +13797,7 @@ __metadata:
  languageName: node
  linkType: hard

-"semver@npm:^7.3.2, semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.7.1, semver@npm:^7.7.2, semver@npm:^7.7.3":
+"semver@npm:^7.3.4, semver@npm:^7.3.5, semver@npm:^7.5.3, semver@npm:^7.5.4, semver@npm:^7.6.0, semver@npm:^7.7.1, semver@npm:^7.7.2, semver@npm:^7.7.3":
  version: 7.7.3
  resolution: "semver@npm:7.7.3"
  bin:
Author	SHA1	Message	Date
Zoë Bijl	63907208a3	[chore] upgrade mini-css-extract-plugin to 2.9.4	2025-10-17 01:14:35 +02:00
Zoë Bijl	8d23ec1e7c	[build] upgrade to sass 1.93.2 / sass-loader 16.0.5	2025-10-17 01:13:21 +02:00