diff --git a/app/javascript/flavours/glitch/styles/about.scss b/app/javascript/flavours/glitch/styles/about.scss
index 0f02563b4..004454d19 100644
--- a/app/javascript/flavours/glitch/styles/about.scss
+++ b/app/javascript/flavours/glitch/styles/about.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $maximum-width: 1235px;
 $fluid-breakpoint: $maximum-width + 20px;
 
@@ -26,7 +28,7 @@ $fluid-breakpoint: $maximum-width + 20px;
 
   li {
     position: relative;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
     padding: 1em 1.75em;
     padding-inline-start: 3em;
     font-weight: 500;
diff --git a/app/javascript/flavours/glitch/styles/accounts.scss b/app/javascript/flavours/glitch/styles/accounts.scss
index b0fe21bcf..3fbb5be6e 100644
--- a/app/javascript/flavours/glitch/styles/accounts.scss
+++ b/app/javascript/flavours/glitch/styles/accounts.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 .card {
   & > a {
     display: block;
@@ -10,7 +12,7 @@
     &:active,
     &:focus {
       .card__bar {
-        background: lighten($ui-base-color, 8%);
+        background: color.adjust($ui-base-color, $lightness: 8%);
       }
     }
   }
@@ -18,7 +20,7 @@
   &__img {
     height: 130px;
     position: relative;
-    background: darken($ui-base-color, 12%);
+    background: color.adjust($ui-base-color, $lightness: -12%);
 
     img {
       display: block;
@@ -39,7 +41,7 @@
     display: flex;
     justify-content: flex-start;
     align-items: center;
-    background: lighten($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: 4%);
 
     .avatar {
       flex: 0 0 auto;
@@ -57,7 +59,7 @@
         border-radius: 4px;
         @include avatar-radius;
 
-        background: darken($ui-base-color, 8%);
+        background: color.adjust($ui-base-color, $lightness: -8%);
         object-fit: cover;
       }
     }
@@ -149,7 +151,7 @@
 
   .disabled {
     cursor: default;
-    color: lighten($inverted-text-color, 10%);
+    color: color.adjust($inverted-text-color, $lightness: 10%);
   }
 
   @media screen and (width <= 700px) {
@@ -215,22 +217,22 @@
   }
 
   &.admin {
-    color: lighten($error-red, 12%);
-    background-color: rgba(lighten($error-red, 12%), 0.1);
-    border-color: rgba(lighten($error-red, 12%), 0.5);
+    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);
   }
 }
 
 .simple_form .not_recommended {
-  color: lighten($error-red, 12%);
-  background-color: rgba(lighten($error-red, 12%), 0.1);
-  border-color: rgba(lighten($error-red, 12%), 0.5);
+  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);
 }
 
 .simple_form .glitch_only {
-  color: lighten($warning-red, 12%);
-  background-color: rgba(lighten($warning-red, 12%), 0.1);
-  border-color: rgba(lighten($warning-red, 12%), 0.5);
+  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);
 }
 
 .account__header__fields {
@@ -238,14 +240,14 @@
   padding: 0;
   margin: 15px -15px -15px;
   border: 0 none;
-  border-top: 1px solid lighten($ui-base-color, 12%);
-  border-bottom: 1px solid lighten($ui-base-color, 12%);
+  border-top: 1px solid color.adjust($ui-base-color, $lightness: 12%);
+  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
   font-size: 14px;
   line-height: 20px;
 
   dl {
     display: flex;
-    border-bottom: 1px solid lighten($ui-base-color, 12%);
+    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 12%);
   }
 
   dt,
@@ -264,7 +266,7 @@
     width: 120px;
     flex: 0 0 auto;
     color: $secondary-text-color;
-    background: rgba(darken($ui-base-color, 8%), 0.5);
+    background: rgba(color.adjust($ui-base-color, $lightness: -8%), 0.5);
   }
 
   dd {
@@ -333,7 +335,7 @@
 }
 
 .batch-table__row--muted {
-  color: lighten($ui-base-color, 26%);
+  color: color.adjust($ui-base-color, $lightness: 26%);
 }
 
 .batch-table__row--muted .pending-account__header,
@@ -342,7 +344,7 @@
   &,
   a,
   strong {
-    color: lighten($ui-base-color, 26%);
+    color: color.adjust($ui-base-color, $lightness: 26%);
   }
 }
 
@@ -354,7 +356,7 @@
   tbody td.accounts-table__extra,
   &__count,
   &__count small {
-    color: lighten($ui-base-color, 26%);
+    color: color.adjust($ui-base-color, $lightness: 26%);
   }
 }
 
diff --git a/app/javascript/flavours/glitch/styles/admin.scss b/app/javascript/flavours/glitch/styles/admin.scss
index 7af0b616d..d1b60ddc7 100644
--- a/app/javascript/flavours/glitch/styles/admin.scss
+++ b/app/javascript/flavours/glitch/styles/admin.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass:math";
 
 $no-columns-breakpoint: 600px;
@@ -31,8 +32,8 @@ $content-width: 840px;
 
     &__toggle {
       display: none;
-      background: darken($ui-base-color, 4%);
-      border-bottom: 1px solid lighten($ui-base-color, 4%);
+      background: color.adjust($ui-base-color, $lightness: -4%);
+      border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
       align-items: center;
 
       &__logo {
@@ -122,7 +123,7 @@ $content-width: 840px;
 
         &:hover {
           color: $primary-text-color;
-          background-color: darken($ui-base-color, 5%);
+          background-color: color.adjust($ui-base-color, $lightness: -5%);
           transition: all 100ms linear;
           transition-property: color, background-color;
         }
@@ -133,7 +134,7 @@ $content-width: 840px;
       }
 
       ul {
-        background: darken($ui-base-color, 4%);
+        background: color.adjust($ui-base-color, $lightness: -4%);
         border-radius: 0 0 0 4px;
         margin: 0;
 
@@ -239,7 +240,7 @@ $content-width: 840px;
           &:hover,
           &:focus,
           &:active {
-            background: lighten($ui-base-color, 4%);
+            background: color.adjust($ui-base-color, $lightness: 4%);
           }
 
           &.selected {
@@ -292,7 +293,7 @@ $content-width: 840px;
       color: $darker-text-color;
       padding-bottom: 8px;
       margin-bottom: 8px;
-      border-bottom: 1px solid lighten($ui-base-color, 8%);
+      border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
     }
 
     h6 {
@@ -393,7 +394,7 @@ $content-width: 840px;
       ul a,
       ul ul a {
         border-radius: 0;
-        border-bottom: 1px solid lighten($ui-base-color, 4%);
+        border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
         transition: none;
 
         &:hover {
@@ -521,7 +522,7 @@ body,
 
       &:hover {
         color: $primary-text-color;
-        border-bottom: 2px solid lighten($ui-base-color, 5%);
+        border-bottom: 2px solid color.adjust($ui-base-color, $lightness: 5%);
       }
 
       &.selected {
@@ -692,7 +693,7 @@ body,
   padding: 15px;
   padding-inline-start: 15px * 2 + 40px;
   background: $ui-base-color;
-  border-bottom: 1px solid darken($ui-base-color, 8%);
+  border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
   position: relative;
   text-decoration: none;
   color: $darker-text-color;
@@ -712,7 +713,7 @@ body,
   &:hover,
   &:focus,
   &:active {
-    background: lighten($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: 4%);
   }
 
   &__avatar {
@@ -766,7 +767,7 @@ a.inline-name-tag,
   &.suspended {
     .username {
       text-decoration: line-through;
-      color: lighten($error-red, 12%);
+      color: color.adjust($error-red, $lightness: 12%);
     }
 
     .avatar {
@@ -806,7 +807,7 @@ a.name-tag,
   }
 
   &.negative {
-    border-left-color: lighten($error-red, 12%);
+    border-left-color: color.adjust($error-red, $lightness: 12%);
   }
 
   &.warning {
@@ -871,7 +872,7 @@ a.name-tag,
         &:focus,
         &:hover,
         &:active {
-          color: lighten($darker-text-color, 8%);
+          color: color.adjust($darker-text-color, $lightness: 8%);
         }
       }
 
@@ -885,10 +886,10 @@ a.name-tag,
     &__item {
       display: flex;
       justify-content: flex-start;
-      border-top: 1px solid darken($ui-base-color, 4%);
+      border-top: 1px solid color.adjust($ui-base-color, $lightness: -4%);
 
       &:hover {
-        background: lighten($ui-base-color, 2%);
+        background: color.adjust($ui-base-color, $lightness: 2%);
       }
 
       &__reported-by,
@@ -960,7 +961,7 @@ a.name-tag,
 
   .account__header__fields,
   .account__header__content {
-    background: lighten($ui-base-color, 8%);
+    background: color.adjust($ui-base-color, $lightness: 8%);
     border-radius: 4px;
     height: 100%;
   }
@@ -997,7 +998,7 @@ a.name-tag,
 .filters-list__item {
   padding: 15px 0;
   background: $ui-base-color;
-  border: 1px solid lighten($ui-base-color, 4%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
   border-radius: 4px;
   margin-top: 15px;
 }
@@ -1008,13 +1009,13 @@ a.name-tag,
 
 .announcements-list,
 .filters-list {
-  border: 1px solid lighten($ui-base-color, 4%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
   border-radius: 4px;
 
   &__item {
     padding: 15px 0;
     background: $ui-base-color;
-    border-bottom: 1px solid lighten($ui-base-color, 4%);
+    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
 
     &__title {
       padding: 0 15px;
@@ -1089,7 +1090,7 @@ a.name-tag,
 
   &.expired {
     .expiration {
-      color: lighten($error-red, 12%);
+      color: color.adjust($error-red, $lightness: 12%);
     }
 
     .permissions-list__item__icon {
@@ -1165,7 +1166,7 @@ a.name-tag,
 .sparkline {
   display: block;
   text-decoration: none;
-  background: lighten($ui-base-color, 4%);
+  background: color.adjust($ui-base-color, $lightness: 4%);
   border-radius: 4px;
   padding: 0;
   position: relative;
@@ -1228,7 +1229,7 @@ a.name-tag,
     }
 
     path:last-child {
-      stroke: lighten($highlight-text-color, 6%) !important;
+      stroke: color.adjust($highlight-text-color, $lightness: 6%) !important;
       fill: none !important;
     }
   }
@@ -1238,17 +1239,17 @@ a.sparkline {
   &:hover,
   &:focus,
   &:active {
-    background: lighten($ui-base-color, 6%);
+    background: color.adjust($ui-base-color, $lightness: 6%);
   }
 }
 
 .skeleton {
-  background-color: lighten($ui-base-color, 8%);
+  background-color: color.adjust($ui-base-color, $lightness: 8%);
   background-image: linear-gradient(
     90deg,
-    lighten($ui-base-color, 8%),
-    lighten($ui-base-color, 12%),
-    lighten($ui-base-color, 8%)
+    color.adjust($ui-base-color, $lightness: 8%),
+    color.adjust($ui-base-color, $lightness: 12%),
+    color.adjust($ui-base-color, $lightness: 8%)
   );
   background-size: 200px 100%;
   background-repeat: no-repeat;
@@ -1275,7 +1276,7 @@ a.sparkline {
   }
 
   &__item {
-    border-bottom: 1px solid lighten($ui-base-color, 4%);
+    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
 
     &__key {
       font-weight: 500;
@@ -1328,7 +1329,7 @@ a.sparkline {
 
   &__category {
     cursor: pointer;
-    border-bottom: 1px solid darken($ui-base-color, 8%);
+    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
 
     &:last-child {
       border-bottom: 0;
@@ -1356,7 +1357,7 @@ a.sparkline {
 
   &__details {
     &__item {
-      border-bottom: 1px solid lighten($ui-base-color, 8%);
+      border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
       padding: 15px 0;
 
       &:last-child {
@@ -1405,7 +1406,7 @@ a.sparkline {
       width: 100%;
       height: 100%;
       object-fit: cover;
-      background: darken($ui-base-color, 8%);
+      background: color.adjust($ui-base-color, $lightness: -8%);
     }
   }
 
@@ -1423,7 +1424,7 @@ a.sparkline {
         margin: 0;
         width: 56px;
         height: 56px;
-        background-color: darken($ui-base-color, 8%);
+        background-color: color.adjust($ui-base-color, $lightness: -8%);
         border-radius: 8px;
         border: 1px solid $ui-base-color;
       }
@@ -1542,7 +1543,7 @@ a.sparkline {
     position: relative;
     padding: 15px;
     padding-inline-start: 15px * 2 + 40px;
-    border-bottom: 1px solid darken($ui-base-color, 8%);
+    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
 
     &:first-child {
       border-top-left-radius: 4px;
@@ -1556,7 +1557,7 @@ a.sparkline {
     }
 
     &:hover {
-      background-color: lighten($ui-base-color, 4%);
+      background-color: color.adjust($ui-base-color, $lightness: 4%);
     }
 
     &__avatar {
@@ -1634,13 +1635,13 @@ a.sparkline {
 }
 
 .report-actions {
-  border: 1px solid darken($ui-base-color, 8%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
 
   &__item {
     display: flex;
     align-items: center;
     line-height: 18px;
-    border-bottom: 1px solid darken($ui-base-color, 8%);
+    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
 
     &:last-child {
       border-bottom: 0;
@@ -1752,15 +1753,15 @@ a.sparkline {
 
   &__statuses-list {
     border-radius: 4px;
-    border: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
     font-size: 13px;
     line-height: 18px;
     overflow: hidden;
 
     &__item {
       padding: 16px;
-      background: lighten($ui-base-color, 2%);
-      border-bottom: 1px solid darken($ui-base-color, 8%);
+      background: color.adjust($ui-base-color, $lightness: 2%);
+      border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
 
       &:last-child {
         border-bottom: 0;
@@ -1804,7 +1805,7 @@ a.sparkline {
       flex: 0 0 auto;
       width: 4px;
       height: 21px;
-      background: lighten($ui-base-color, 8%);
+      background: color.adjust($ui-base-color, $lightness: 8%);
       margin: 0 2px;
       border-radius: 2px;
 
@@ -1876,7 +1877,7 @@ a.sparkline {
     }
 
     .status {
-      border: 1px solid lighten($ui-base-color, 4%);
+      border: 1px solid color.adjust($ui-base-color, $lightness: 4%);
       background: $ui-base-color;
       border-radius: 4px;
     }
diff --git a/app/javascript/flavours/glitch/styles/basics.scss b/app/javascript/flavours/glitch/styles/basics.scss
index 5d45a5253..0ba89ccbe 100644
--- a/app/javascript/flavours/glitch/styles/basics.scss
+++ b/app/javascript/flavours/glitch/styles/basics.scss
@@ -1,3 +1,7 @@
+@use "sass:meta";
+@use "sass:string";
+@use 'sass:color';
+
 @function hex-color($color) {
   @if type-of($color) == "color" {
     $color: str-slice(ie-hex-str($color), 4);
@@ -109,7 +113,7 @@ body {
   }
 
   &.embed {
-    background: lighten($ui-base-color, 4%);
+    background: color.scale($ui-base-color, $lightness: 4%);
     margin: 0;
     padding-bottom: 0;
 
@@ -122,7 +126,7 @@ body {
   }
 
   &.admin {
-    background: darken($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: -4%);
     padding: 0;
   }
 
@@ -206,7 +210,7 @@ button {
   font-size: 16px;
   font-weight: 400;
   line-height: 1.7;
-  color: lighten($error-red, 4%);
+  color: color.adjust($error-red, $lightness: 4%);
   text-align: center;
 
   & > div {
diff --git a/app/javascript/flavours/glitch/styles/dashboard.scss b/app/javascript/flavours/glitch/styles/dashboard.scss
index 36a7f4425..555f4e934 100644
--- a/app/javascript/flavours/glitch/styles/dashboard.scss
+++ b/app/javascript/flavours/glitch/styles/dashboard.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 .dashboard__counters {
   display: flex;
   flex-wrap: wrap;
@@ -13,7 +15,7 @@
     & > div,
     & > a {
       padding: 20px;
-      background: lighten($ui-base-color, 4%);
+      background: color.adjust($ui-base-color, $lightness: 4%);
       border-radius: 4px;
       box-sizing: border-box;
       height: 100%;
@@ -27,7 +29,7 @@
       &:hover,
       &:focus,
       &:active {
-        background: lighten($ui-base-color, 8%);
+        background: color.adjust($ui-base-color, $lightness: 8%);
       }
     }
   }
@@ -99,12 +101,12 @@
     }
 
     &.positive {
-      background: lighten($ui-base-color, 4%);
+      background: color.adjust($ui-base-color, $lightness: 4%);
       color: $valid-value-color;
     }
 
     &.negative {
-      background: lighten($ui-base-color, 4%);
+      background: color.adjust($ui-base-color, $lightness: 4%);
       color: $error-value-color;
     }
 
diff --git a/app/javascript/flavours/glitch/styles/forms.scss b/app/javascript/flavours/glitch/styles/forms.scss
index 531c5b204..109f9c1d1 100644
--- a/app/javascript/flavours/glitch/styles/forms.scss
+++ b/app/javascript/flavours/glitch/styles/forms.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 $no-columns-breakpoint: 600px;
 
 code {
@@ -164,7 +165,7 @@ code {
     code {
       border-radius: 3px;
       padding: 0.2em 0.4em;
-      background: darken($ui-base-color, 12%);
+      background: color.adjust($ui-base-color, $lightness: -12%);
     }
 
     li {
@@ -292,7 +293,7 @@ code {
 
   .required abbr {
     text-decoration: none;
-    color: lighten($error-value-color, 12%);
+    color: color.adjust($error-value-color, $lightness: 12%);
   }
 
   .fields-group {
@@ -435,13 +436,13 @@ code {
     outline: 0;
     font-family: inherit;
     resize: vertical;
-    background: darken($ui-base-color, 10%);
-    border: 1px solid darken($ui-base-color, 14%);
+    background: color.adjust($ui-base-color, $lightness: -10%);
+    border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
     border-radius: 4px;
     padding: 10px;
 
     &::placeholder {
-      color: lighten($darker-text-color, 4%);
+      color: color.adjust($darker-text-color, $lightness: 4%);
     }
 
     &:invalid {
@@ -453,13 +454,13 @@ code {
     }
 
     &:hover {
-      border-color: darken($ui-base-color, 20%);
+      border-color: color.adjust($ui-base-color, $lightness: -20%);
     }
 
     &:active,
     &:focus {
       border-color: $highlight-text-color;
-      background: darken($ui-base-color, 8%);
+      background: color.adjust($ui-base-color, $lightness: -8%);
     }
   }
 
@@ -470,13 +471,13 @@ code {
   input[type="datetime-local"] {
     &:focus:invalid:not(:placeholder-shown),
     &:required:invalid:not(:placeholder-shown) {
-      border-color: lighten($error-red, 12%);
+      border-color: color.adjust($error-red, $lightness: 12%);
     }
   }
 
   .input.field_with_errors {
     label {
-      color: lighten($error-red, 12%);
+      color: color.adjust($error-red, $lightness: 12%);
     }
 
     input[type="text"],
@@ -486,13 +487,13 @@ code {
     input[type="datetime-local"],
     textarea,
     select {
-      border-color: lighten($error-red, 12%);
+      border-color: color.adjust($error-red, $lightness: 12%);
     }
 
     .error {
       display: block;
       font-weight: 500;
-      color: lighten($error-red, 12%);
+      color: color.adjust($error-red, $lightness: 12%);
       margin-top: 4px;
     }
   }
@@ -584,10 +585,10 @@ code {
     outline: 0;
     font-family: inherit;
     resize: vertical;
-    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>")
+    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>")
       no-repeat right 8px center / auto 16px;
-    border: 1px solid darken($ui-base-color, 14%);
+    border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
     border-radius: 4px;
     padding-inline-start: 10px;
     padding-inline-end: 30px;
@@ -628,8 +629,8 @@ code {
         width: 5px;
         background-image: linear-gradient(
           to right,
-          rgba(darken($ui-base-color, 10%), 0),
-          darken($ui-base-color, 10%)
+          rgba(color.adjust($ui-base-color, $lightness: -10%), 0),
+          color.adjust($ui-base-color, $lightness: -10%)
         );
       }
     }
@@ -644,7 +645,7 @@ code {
 }
 
 .flash-message {
-  background: lighten($ui-base-color, 8%);
+  background: color.adjust($ui-base-color, $lightness: 8%);
   color: $darker-text-color;
   border-radius: 4px;
   padding: 15px 10px;
@@ -725,7 +726,7 @@ code {
     }
 
     &:focus {
-      background: lighten($ui-base-color, 4%);
+      background: color.adjust($ui-base-color, $lightness: 4%);
     }
   }
 
@@ -809,7 +810,7 @@ code {
     &:hover,
     &:focus,
     &:active {
-      color: lighten($highlight-text-color, 8%);
+      color: color.adjust($highlight-text-color, $lightness: 8%);
     }
   }
 }
@@ -855,7 +856,7 @@ code {
   .permissions-list {
     border: 1px solid $ui-base-color;
     border-radius: 4px;
-    background: darken($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: -4%);
     margin-bottom: 30px;
   }
 
@@ -1005,8 +1006,8 @@ code {
 }
 
 .input-copy {
-  background: darken($ui-base-color, 10%);
-  border: 1px solid darken($ui-base-color, 14%);
+  background: color.adjust($ui-base-color, $lightness: -10%);
+  border: 1px solid color.adjust($ui-base-color, $lightness: -14%);
   border-radius: 4px;
   display: flex;
   align-items: center;
@@ -1067,7 +1068,7 @@ code {
   &__item {
     padding: 15px;
     color: $ui-secondary-color;
-    border-bottom: 1px solid lighten($ui-base-color, 4%);
+    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 4%);
     display: flex;
     align-items: center;
 
diff --git a/app/javascript/flavours/glitch/styles/tables.scss b/app/javascript/flavours/glitch/styles/tables.scss
index 44ef00ba7..3231c1835 100644
--- a/app/javascript/flavours/glitch/styles/tables.scss
+++ b/app/javascript/flavours/glitch/styles/tables.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 .table {
   width: 100%;
   max-width: 100%;
@@ -11,7 +13,7 @@
     vertical-align: top;
     border-top: 1px solid $ui-base-color;
     text-align: start;
-    background: darken($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: -4%);
 
     &.critical {
       font-weight: 700;
@@ -78,7 +80,7 @@
     & > tbody > tr > td {
       padding: 11px 10px;
       background: transparent;
-      border: 1px solid lighten($ui-base-color, 8%);
+      border: 1px solid color.adjust($ui-base-color, $lightness: 8%);
       color: $secondary-text-color;
     }
 
@@ -91,17 +93,19 @@
   &.batch-table {
     & > thead > tr > th {
       background: $ui-base-color;
-      border-top: 1px solid darken($ui-base-color, 8%);
-      border-bottom: 1px solid darken($ui-base-color, 8%);
+      border-top: 1px solid color.adjust($ui-base-color, $lightness: -8%);
+      border-bottom: 1px solid color.adjust($ui-base-color, $lightness: -8%);
 
       &:first-child {
         border-radius: 4px 0 0;
-        border-inline-start: 1px solid darken($ui-base-color, 8%);
+        border-inline-start: 1px solid
+          color.adjust($ui-base-color, $lightness: -8%);
       }
 
       &:last-child {
         border-radius: 0 4px 0 0;
-        border-inline-end: 1px solid darken($ui-base-color, 8%);
+        border-inline-end: 1px solid
+          color.adjust($ui-base-color, $lightness: -8%);
       }
     }
   }
@@ -186,7 +190,7 @@ a.table-action-link {
     position: sticky;
     top: 0;
     z-index: 1;
-    border: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
     background: $ui-base-color;
     border-radius: 4px 0 0;
     height: 47px;
@@ -203,7 +207,7 @@ a.table-action-link {
     height: 47px;
     align-items: center;
     justify-content: center;
-    border: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
     border-top: 0;
     color: $secondary-text-color;
     display: none;
@@ -242,14 +246,14 @@ a.table-action-link {
       &:hover,
       &:focus,
       &:active {
-        background: lighten($ui-base-color, 8%);
+        background: color.adjust($ui-base-color, $lightness: 8%);
       }
     }
   }
 
   &__form {
     padding: 16px;
-    border: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
     border-top: 0;
     background: $ui-base-color;
 
@@ -260,25 +264,25 @@ a.table-action-link {
   }
 
   &__row {
-    border: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
     border-top: 0;
-    background: darken($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, $lightness: -4%);
 
     @media screen and (max-width: $no-gap-breakpoint) {
       .optional &:first-child {
-        border-top: 1px solid darken($ui-base-color, 8%);
+        border-top: 1px solid color.adjust($ui-base-color, $lightness: -8%);
       }
     }
 
     &:hover {
-      background: darken($ui-base-color, 2%);
+      background: color.adjust($ui-base-color, $lightness: -2%);
     }
 
     &:nth-child(even) {
       background: $ui-base-color;
 
       &:hover {
-        background: lighten($ui-base-color, 2%);
+        background: color.adjust($ui-base-color, $lightness: 2%);
       }
     }
 
@@ -353,12 +357,12 @@ a.table-action-link {
   }
 
   .nothing-here {
-    border: 1px solid darken($ui-base-color, 8%);
+    border: 1px solid color.adjust($ui-base-color, $lightness: -8%);
     border-top: 0;
     box-shadow: none;
 
     @media screen and (max-width: $no-gap-breakpoint) {
-      border-top: 1px solid darken($ui-base-color, 8%);
+      border-top: 1px solid color.adjust($ui-base-color, $lightness: -8%);
     }
   }
 
diff --git a/app/javascript/flavours/glitch/styles/variables.scss b/app/javascript/flavours/glitch/styles/variables.scss
index c67cf05d3..54f5ada7d 100644
--- a/app/javascript/flavours/glitch/styles/variables.scss
+++ b/app/javascript/flavours/glitch/styles/variables.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // Commonly used web colors
 $black: #000000; // Black
 $white: #ffffff; // White
@@ -32,9 +34,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: lighten(
+$ui-base-lighter-color: color.scale(
   $ui-base-color,
-  26%
+  $lightness: 26%
 ) !default; // Lighter darkest
 $ui-primary-color: $classic-primary-color !default; // Lighter
 $ui-secondary-color: $classic-secondary-color !default; // Lightest
@@ -61,9 +63,15 @@ $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: lighten($ui-highlight-color, 8%) !default;
+$highlight-text-color: color.scale(
+  $ui-highlight-color,
+  $lightness: 8%
+) !default;
 $action-button-color: $ui-base-lighter-color !default;
-$action-button-focus-color: lighten($ui-base-lighter-color, 4%) !default;
+$action-button-focus-color: color.scale(
+  $ui-base-lighter-color,
+  $lightness: 4%
+) !default;
 $passive-text-color: $gold-star !default;
 $active-passive-text-color: $success-green !default;
 
@@ -94,11 +102,11 @@ $ui-avatar-border-size: 8%;
 $dismiss-overlay-width: 4rem;
 
 :root {
-  --dropdown-border-color: #{lighten($ui-base-color, 12%)};
-  --dropdown-background-color: #{lighten($ui-base-color, 4%)};
+  --dropdown-border-color: #{color.scale($ui-base-color, $lightness: 12%)};
+  --dropdown-background-color: #{color.scale($ui-base-color, $lightness: 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: #{darken($ui-base-color, 4%)};
-  --modal-border-color: #{lighten($ui-base-color, 4%)};
+  --modal-background-color: #{color.scale($ui-base-color, $lightness: -4%)};
+  --modal-border-color: #{color.scale($ui-base-color, $lightness: 4%)};
 }
diff --git a/app/javascript/flavours/glitch/styles/widgets.scss b/app/javascript/flavours/glitch/styles/widgets.scss
index 151c3e419..1f2e3d17c 100644
--- a/app/javascript/flavours/glitch/styles/widgets.scss
+++ b/app/javascript/flavours/glitch/styles/widgets.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass:math";
 
 .hero-widget {
@@ -54,7 +55,7 @@
       font-family: inherit;
       font-size: inherit;
       line-height: inherit;
-      color: lighten($darker-text-color, 10%);
+      color: color.adjust($darker-text-color, $lightness: 10%);
     }
 
     a {
@@ -223,7 +224,7 @@
       &:hover,
       &:active,
       &:focus {
-        background: lighten($ui-base-color, 8%);
+        background: color.adjust($ui-base-color, $lightness: 8%);
       }
     }
 
@@ -305,7 +306,7 @@
   tbody td {
     padding: 15px 0;
     vertical-align: middle;
-    border-bottom: 1px solid lighten($ui-base-color, 8%);
+    border-bottom: 1px solid color.adjust($ui-base-color, $lightness: 8%);
   }
 
   tbody tr:last-child td {