diff --git a/app/javascript/styles/contrast/variables.scss b/app/javascript/styles/contrast/variables.scss
index 766591ba40..1d721c9d2b 100644
--- a/app/javascript/styles/contrast/variables.scss
+++ b/app/javascript/styles/contrast/variables.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // Dependent colors
 $black: #000000;
 
@@ -11,12 +13,18 @@ $ui-primary-color: $classic-primary-color !default;
 $ui-secondary-color: $classic-secondary-color !default;
 $ui-highlight-color: $classic-highlight-color !default;
 
-$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%);
+$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%);
 
 $inverted-text-color: $black !default;
-$lighter-text-color: darken($ui-base-color, 6%) !default;
-$light-text-color: darken($ui-primary-color, 40%) !default;
+$lighter-text-color: color.adjust($ui-base-color, $lightness: -6%) !default;
+$light-text-color: color.adjust($ui-primary-color, $lightness: -40%) !default;
diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index b19075139a..8d04b63eb3 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -27,7 +27,7 @@
 }
 
 .directory__card__img {
-  background: lighten($ui-base-color, 12%);
+  background: color.adjust($ui-base-color, 12%);
 }
 
 .account__header {
@@ -57,7 +57,7 @@
 .confirmation-modal__cancel-button,
 .mute-modal__cancel-button,
 .block-modal__cancel-button {
-  color: lighten($ui-base-color, 26%);
+  color: color.adjust($ui-base-color, 26%);
 
   &:hover,
   &:focus,
@@ -105,7 +105,7 @@
 
 // Change the background colors of statuses
 .focusable:focus {
-  background: lighten($white, 4%);
+  background: color.adjust($white, 4%);
 }
 
 .account-gallery__item a {
@@ -129,11 +129,11 @@
 
 .compare-history-modal .report-modal__target,
 .report-dialog-modal .poll__option.dialog-option {
-  border-bottom-color: lighten($ui-base-color, 4%);
+  border-bottom-color: color.adjust($ui-base-color, 4%);
 }
 
 .report-dialog-modal__container {
-  border-top-color: lighten($ui-base-color, 4%);
+  border-top-color: color.adjust($ui-base-color, 4%);
 }
 
 .reactions-bar__item:hover,
@@ -144,7 +144,7 @@
 
 .reactions-bar__item.active {
   background-color: mix($white, $ui-highlight-color, 80%);
-  border-color: mix(lighten($ui-base-color, 8%), $ui-highlight-color, 80%);
+  border-color: mix(color.adjust($ui-base-color, 8%), $ui-highlight-color, 80%);
 }
 
 .media-modal__overlay .picture-in-picture__footer {
@@ -176,7 +176,7 @@
 }
 
 .flash-message.warning {
-  color: lighten($gold-star, 16%);
+  color: color.adjust($gold-star, 16%);
 }
 
 .boost-modal__action-bar,
@@ -206,7 +206,7 @@
   border: 1px solid var(--background-border-color);
 
   &:focus {
-    border-color: lighten($ui-base-color, 12%);
+    border-color: color.adjust($ui-base-color, 12%);
     background: $white;
   }
 }
@@ -216,12 +216,12 @@
 }
 
 .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background: lighten($ui-primary-color, 10%);
+  background: color.adjust($ui-primary-color, $lightness: 10%);
 }
 
 .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
   .react-toggle-track {
-  background: lighten($ui-highlight-color, 10%);
+  background: color.adjust($ui-highlight-color, $lightness: 10%);
 }
 
 // Change the default color used for the text in an empty column or on the error column
@@ -234,7 +234,7 @@
 // Change the default colors used on some parts of the profile pages
 .activity-stream-tabs {
   background: $account-background-color;
-  border-bottom-color: lighten($ui-base-color, 8%);
+  border-bottom-color: color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .nothing-here,
@@ -247,8 +247,8 @@
 
 .picture-in-picture-placeholder {
   background: $white;
-  border-color: lighten($ui-base-color, 8%);
-  color: lighten($ui-base-color, 8%);
+  border-color: color.adjust($ui-base-color, $lightness: 8%);
+  color: color.adjust($ui-base-color, $lightness: 8%);
 }
 
 .directory__tag > a {
@@ -263,7 +263,7 @@
   &__toolbar,
   &__row,
   .nothing-here {
-    border-color: lighten($ui-base-color, 8%);
+    border-color: color.adjust($ui-base-color, $lightness: 8%);
   }
 }
 
@@ -280,7 +280,7 @@
     .detailed-status.light,
     .more.light,
     .status.light {
-      border-bottom-color: lighten($ui-base-color, 8%);
+      border-bottom-color: color.adjust($ui-base-color, $lightness: 8%);
     }
   }
 
@@ -341,12 +341,12 @@
   input[type='url'],
   input[type='datetime-local'],
   textarea {
-    background: darken($ui-base-color, 10%);
+    background: color.adjust($ui-base-color, $lightness: -10%);
   }
 
   select {
-    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, 12%))}'/></svg>")
       no-repeat right 8px center / auto 14px;
   }
 }
@@ -403,7 +403,7 @@
 .mute-modal select {
   border: 1px solid var(--background-border-color);
   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(lighten($ui-base-color, 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(color.adjust($ui-base-color, 8%))}'/></svg>")
     no-repeat right 8px center / auto 16px;
 }
 
@@ -433,7 +433,7 @@
 }
 
 .compose-form .spoiler-input__input {
-  color: lighten($ui-highlight-color, 8%);
+  color: color.adjust($ui-highlight-color, 8%);
 }
 
 .emoji-mart-search input,
diff --git a/app/javascript/styles/mastodon-light/variables.scss b/app/javascript/styles/mastodon-light/variables.scss
index 23d846ae80..b0f35f9b6f 100644
--- a/app/javascript/styles/mastodon-light/variables.scss
+++ b/app/javascript/styles/mastodon-light/variables.scss
@@ -16,7 +16,7 @@ $grey-600: hsl(240deg, 8%, 33%); // Trout
 $grey-100: hsl(240deg, 51%, 90%); // Topaz
 
 // Differences
-$success-green: lighten(hsl(138deg, 32%, 35%), 8%);
+$success-green: color.adjust(hsl(138deg, 32%, 35%), 8%);
 
 $base-overlay-background: $white !default;
 $valid-value-color: $success-green !default;
@@ -47,23 +47,6 @@ $light-text-color: hsl(240deg, 16%, 32%);
 // Newly added colors
 $account-background-color: $white !default;
 
-// Invert darkened and lightened colors
-@function darken($color, $amount) {
-  @return hsl(
-    hue($color),
-    color.channel($color, 'saturation', $space: hsl),
-    color.channel($color, 'lightness', $space: hsl) + $amount
-  );
-}
-
-@function lighten($color, $amount) {
-  @return hsl(
-    hue($color),
-    color.channel($color, 'saturation', $space: hsl),
-    color.channel($color, 'lightness', $space: hsl) - $amount
-  );
-}
-
 $emojis-requiring-inversion: 'chains';
 
 body {
@@ -80,5 +63,5 @@ body {
   --rich-text-text-color: rgba(114, 47, 83, 100%);
   --rich-text-decorations-color: rgba(255, 175, 212, 100%);
   --input-placeholder-color: #{transparentize($dark-text-color, 0.5)};
-  --input-background-color: #{darken($ui-base-color, 10%)};
+  --input-background-color: #{color.adjust($ui-base-color, 10%)};
 }
diff --git a/app/javascript/styles/mastodon/accounts.scss b/app/javascript/styles/mastodon/accounts.scss
index c769c88f75..9c7939c179 100644
--- a/app/javascript/styles/mastodon/accounts.scss
+++ b/app/javascript/styles/mastodon/accounts.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 .card {
   & > a {
     display: block;
@@ -57,7 +59,7 @@
         display: block;
         margin: 0;
         border-radius: 4px;
-        background: darken($ui-base-color, 8%);
+        background: color.adjust($ui-base-color, -8%);
         object-fit: cover;
       }
     }
@@ -139,7 +141,7 @@
 
   .disabled {
     cursor: default;
-    color: lighten($inverted-text-color, 10%);
+    color: color.adjust($inverted-text-color, 10%);
   }
 
   @media screen and (width <= 700px) {
@@ -243,9 +245,9 @@
 }
 
 .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, 12%);
+  background-color: rgba(color.adjust($error-red, 12%), 0.1);
+  border-color: rgba(color.adjust($error-red, 12%), 0.5);
 }
 
 .account__header__fields {
@@ -253,14 +255,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, 12%);
+  border-bottom: 1px solid color.adjust($ui-base-color, 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, 12%);
   }
 
   dt,
@@ -279,7 +281,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, -8%), 0.5);
   }
 
   dd {
@@ -352,7 +354,7 @@
 }
 
 .batch-table__row--muted {
-  color: lighten($ui-base-color, 26%);
+  color: color.adjust($ui-base-color, 26%);
 }
 
 .batch-table__row--muted .pending-account__header,
@@ -361,7 +363,7 @@
   &,
   a,
   strong {
-    color: lighten($ui-base-color, 26%);
+    color: color.adjust($ui-base-color, 26%);
   }
 }
 
@@ -373,7 +375,7 @@
   tbody td.accounts-table__extra,
   &__count,
   &__count small {
-    color: lighten($ui-base-color, 26%);
+    color: color.adjust($ui-base-color, 26%);
   }
 }
 
diff --git a/app/javascript/styles/mastodon/admin.scss b/app/javascript/styles/mastodon/admin.scss
index b5f8570ae2..9e567727b2 100644
--- a/app/javascript/styles/mastodon/admin.scss
+++ b/app/javascript/styles/mastodon/admin.scss
@@ -1,3 +1,4 @@
+@use 'sass:color';
 @use 'sass:math';
 
 $no-columns-breakpoint: 890px;
@@ -39,7 +40,7 @@ $content-width: 840px;
     &__toggle {
       display: none;
       background: var(--background-color);
-      border-bottom: 1px solid lighten($ui-base-color, 4%);
+      border-bottom: 1px solid color.adjust($ui-base-color, 4%);
       align-items: center;
 
       &__logo {
@@ -233,7 +234,7 @@ $content-width: 840px;
           &:hover,
           &:focus,
           &:active {
-            background: lighten($ui-base-color, 4%);
+            background: color.adjust($ui-base-color, 4%);
           }
 
           &.selected {
@@ -533,7 +534,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, 5%);
       }
 
       &.selected {
@@ -778,7 +779,7 @@ a.inline-name-tag,
   &.suspended {
     .username {
       text-decoration: line-through;
-      color: lighten($error-red, 12%);
+      color: color.adjust($error-red, 12%);
     }
 
     .avatar {
@@ -818,7 +819,7 @@ a.name-tag,
   }
 
   &.negative {
-    border-left-color: lighten($error-red, 12%);
+    border-left-color: color.adjust($error-red, 12%);
   }
 
   &.warning {
@@ -1113,7 +1114,7 @@ a.name-tag,
 
   &.expired {
     .expiration {
-      color: lighten($error-red, 12%);
+      color: color.adjust($error-red, 12%);
     }
 
     .permissions-list__item__icon {
@@ -1253,7 +1254,7 @@ a.name-tag,
     }
 
     path:last-child {
-      stroke: lighten($highlight-text-color, 6%) !important;
+      stroke: color.adjust($highlight-text-color, 6%) !important;
       fill: none !important;
     }
   }
@@ -1271,9 +1272,9 @@ a.sparkline {
   background-color: var(--background-color);
   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, 8%),
+    color.adjust($ui-base-color, 12%),
+    color.adjust($ui-base-color, 8%)
   );
   background-size: 200px 100%;
   background-repeat: no-repeat;
@@ -1300,7 +1301,7 @@ a.sparkline {
   }
 
   &__item {
-    border-bottom: 1px solid lighten($ui-base-color, 4%);
+    border-bottom: 1px solid color.adjust($ui-base-color, 4%);
 
     &__key {
       font-weight: 500;
@@ -1834,7 +1835,7 @@ a.sparkline {
       flex: 0 0 auto;
       width: 4px;
       height: 21px;
-      background: lighten($ui-base-color, 8%);
+      background: color.adjust($ui-base-color, 8%);
       margin: 0 2px;
       border-radius: 2px;
 
@@ -1906,7 +1907,7 @@ a.sparkline {
     }
 
     .status {
-      border: 1px solid lighten($ui-base-color, 4%);
+      border: 1px solid color.adjust($ui-base-color, 4%);
       background: $ui-base-color;
       border-radius: 4px;
     }
@@ -1921,7 +1922,7 @@ a.sparkline {
   line-height: 20px;
   word-wrap: break-word;
   font-weight: 400;
-  border: 1px solid lighten($ui-base-color, 4%);
+  border: 1px solid color.adjust($ui-base-color, 4%);
   color: $primary-text-color;
   box-sizing: border-box;
   min-height: 100%;
diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index 1a74d8d52d..b76b1be5a0 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/app/javascript/styles/mastodon/basics.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 @function hex-color($color) {
   @if type-of($color) == 'color' {
     $color: str-slice(ie-hex-str($color), 4);
@@ -210,7 +212,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/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index a80bf59713..b8fe2c586b 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -130,8 +130,8 @@
     &:active,
     &:focus,
     &:hover {
-      border-color: lighten($highlight-text-color, 4%);
-      color: lighten($highlight-text-color, 4%);
+      border-color: color.adjust($highlight-text-color, 4%);
+      color: color.adjust($highlight-text-color, 4%);
       background-color: transparent;
       text-decoration: none;
     }
@@ -254,7 +254,7 @@
   &:hover,
   &:active,
   &:focus {
-    color: lighten($action-button-color, 7%);
+    color: color.adjust($action-button-color, 7%);
     background-color: rgba($action-button-color, 0.15);
   }
 
@@ -263,7 +263,7 @@
   }
 
   &.disabled {
-    color: darken($action-button-color, 13%);
+    color: color.adjust($action-button-color, -13%);
     background-color: transparent;
     cursor: default;
   }
@@ -274,7 +274,7 @@
     &:hover,
     &:active,
     &:focus {
-      color: darken($lighter-text-color, 7%);
+      color: color.adjust($lighter-text-color, -7%);
       background-color: rgba($lighter-text-color, 0.15);
     }
 
@@ -283,7 +283,7 @@
     }
 
     &.disabled {
-      color: lighten($lighter-text-color, 7%);
+      color: color.adjust($lighter-text-color, 7%);
       background-color: transparent;
     }
   }
@@ -299,7 +299,7 @@
     }
 
     &.disabled {
-      color: lighten($highlight-text-color, 13%);
+      color: color.adjust($highlight-text-color, 13%);
     }
   }
 
@@ -354,7 +354,7 @@
   &:hover,
   &:active,
   &:focus {
-    color: darken($lighter-text-color, 7%);
+    color: color.adjust($lighter-text-color, -7%);
     background-color: rgba($lighter-text-color, 0.15);
   }
 
@@ -363,7 +363,7 @@
   }
 
   &.disabled {
-    color: lighten($lighter-text-color, 20%);
+    color: color.adjust($lighter-text-color, 20%);
     background-color: transparent;
     cursor: default;
   }
@@ -855,7 +855,7 @@ body > [data-popper-placement] {
       &__sep {
         width: 1px;
         height: 22px;
-        background: lighten($ui-base-color, 8%);
+        background: color.adjust($ui-base-color, 8%);
         flex: 0 0 auto;
       }
     }
@@ -1130,7 +1130,7 @@ body > [data-popper-placement] {
       inset-inline-start: 50%;
       top: 4px;
       transform: translateX(-50%);
-      background: lighten($ui-base-color, 8%);
+      background: color.adjust($ui-base-color, 8%);
       width: 2px;
       height: calc(100% + 32px - 8px); // Account for gap to next element
     }
@@ -1167,11 +1167,11 @@ body > [data-popper-placement] {
 
 .edit-indicator {
   border-radius: 4px 4px 0 0;
-  background: lighten($ui-base-color, 4%);
+  background: color.adjust($ui-base-color, 4%);
   padding: 12px;
   overflow-y: auto;
   flex: 0 0 auto;
-  border-bottom: 0.5px solid lighten($ui-base-color, 8%);
+  border-bottom: 0.5px solid color.adjust($ui-base-color, 8%);
   display: flex;
   flex-direction: column;
   gap: 4px;
@@ -1349,7 +1349,7 @@ body > [data-popper-placement] {
 
   &__button {
     display: inline;
-    color: lighten($ui-highlight-color, 8%);
+    color: color.adjust($ui-highlight-color, 8%);
     border: 0;
     background: transparent;
     padding: 0;
@@ -1434,7 +1434,7 @@ body > [data-popper-placement] {
 
         &:hover,
         &:focus {
-          background: lighten($ui-primary-color, 8%);
+          background: color.adjust($ui-primary-color, 8%);
         }
       }
     }
@@ -1485,7 +1485,7 @@ body > [data-popper-placement] {
 
   &__line {
     height: 16px - 4px;
-    border-inline-start: 2px solid lighten($ui-base-color, 8%);
+    border-inline-start: 2px solid color.adjust($ui-base-color, 8%);
     width: 0;
     position: absolute;
     top: 0;
@@ -1590,7 +1590,7 @@ body > [data-popper-placement] {
   padding: 0 10px;
 
   .detailed-status__display-name {
-    color: lighten($inverted-text-color, 16%);
+    color: color.adjust($inverted-text-color, 16%);
 
     span {
       display: inline;
@@ -1801,13 +1801,17 @@ body > [data-popper-placement] {
   &:focus {
     .detailed-status,
     .detailed-status__action-bar {
-      background: mix(lighten($ui-base-color, 4%), $ui-highlight-color, 95%);
+      background: mix(
+        color.adjust($ui-base-color, 4%),
+        $ui-highlight-color,
+        95%
+      );
     }
   }
 
   .detailed-status__action-bar {
     border-top-color: mix(
-      lighten($ui-base-color, 8%),
+      color.adjust($ui-base-color, 8%),
       $ui-highlight-color,
       95%
     );
@@ -3201,7 +3205,7 @@ $ui-header-logo-wordmark-width: 99px;
 }
 
 .copy-paste-text {
-  background: lighten($ui-base-color, 4%);
+  background: color.adjust($ui-base-color, 4%);
   border-radius: 8px;
   border: 1px solid var(--background-border-color);
   padding: 16px;
@@ -3578,7 +3582,7 @@ $ui-header-logo-wordmark-width: 99px;
 
 .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
   .react-toggle-track {
-  background: lighten($ui-highlight-color, 5%);
+  background: color.adjust($ui-highlight-color, 5%);
 }
 
 .switch-to-advanced {
@@ -3723,7 +3727,7 @@ $ui-header-logo-wordmark-width: 99px;
   kbd {
     display: inline-block;
     padding: 3px 5px;
-    background-color: lighten($ui-base-color, 8%);
+    background-color: color.adjust($ui-base-color, 8%);
     border: 1px solid darken($ui-base-color, 4%);
   }
 }
@@ -3958,7 +3962,7 @@ a.status-card {
   flex: 0 0 auto;
   width: 120px;
   aspect-ratio: 1;
-  background: lighten($ui-base-color, 8%);
+  background: color.adjust($ui-base-color, 8%);
   position: relative;
 
   & > .icon {
@@ -4082,7 +4086,7 @@ a.status-card {
     &:focus,
     &:active {
       text-decoration: underline;
-      color: lighten($highlight-text-color, 4%);
+      color: color.adjust($highlight-text-color, 4%);
     }
   }
 
@@ -4194,7 +4198,7 @@ a.status-card {
     font-size: 14px;
 
     &:hover {
-      color: lighten($highlight-text-color, 6%);
+      color: color.adjust($highlight-text-color, 6%);
     }
   }
 }
@@ -4300,7 +4304,7 @@ a.status-card {
   }
 
   &:hover {
-    color: lighten($darker-text-color, 4%);
+    color: color.adjust($darker-text-color, 4%);
   }
 
   &:focus-visible {
@@ -4451,7 +4455,7 @@ a.status-card {
 }
 
 .circular-progress {
-  color: lighten($ui-base-color, 26%);
+  color: color.adjust($ui-base-color, 26%);
   animation: 1.4s linear 0s infinite normal none running simple-rotate;
 
   circle {
@@ -4606,7 +4610,7 @@ a.status-card {
 }
 
 .modal-container--preloader {
-  background: lighten($ui-base-color, 8%);
+  background: color.adjust($ui-base-color, 8%);
 }
 
 .account--panel {
@@ -4682,7 +4686,7 @@ a.status-card {
       @include search-input;
 
       &::placeholder {
-        color: lighten($darker-text-color, 4%);
+        color: color.adjust($darker-text-color, 4%);
       }
 
       &::-moz-focus-inner {
@@ -4696,7 +4700,7 @@ a.status-card {
       }
 
       &:focus {
-        background: lighten($ui-base-color, 4%);
+        background: color.adjust($ui-base-color, 4%);
       }
 
       @media screen and (width <= 600px) {
@@ -4715,7 +4719,7 @@ a.status-card {
     }
 
     &__multi-value {
-      background: lighten($ui-base-color, 8%);
+      background: color.adjust($ui-base-color, 8%);
 
       &__remove {
         cursor: pointer;
@@ -4723,8 +4727,8 @@ a.status-card {
         &:hover,
         &:active,
         &:focus {
-          background: lighten($ui-base-color, 12%);
-          color: lighten($darker-text-color, 4%);
+          background: color.adjust($ui-base-color, 12%);
+          color: color.adjust($darker-text-color, 4%);
         }
       }
     }
@@ -4744,12 +4748,12 @@ a.status-card {
       &:hover,
       &:active,
       &:focus {
-        color: lighten($dark-text-color, 4%);
+        color: color.adjust($dark-text-color, 4%);
       }
     }
 
     &__indicator-separator {
-      background-color: lighten($ui-base-color, 8%);
+      background-color: color.adjust($ui-base-color, 8%);
     }
 
     &__menu {
@@ -7135,7 +7139,7 @@ a.status-card {
       &:hover,
       &:active,
       &:focus {
-        color: lighten($darker-text-color, 7%);
+        color: color.adjust($darker-text-color, 7%);
       }
     }
 
@@ -7257,7 +7261,7 @@ a.status-card {
       inset-inline-start: 0;
       top: 50%;
       transform: translate(0, -50%);
-      background: lighten($ui-highlight-color, 8%);
+      background: color.adjust($ui-highlight-color, 8%);
     }
 
     &__handle {
@@ -7270,7 +7274,7 @@ a.status-card {
       inset-inline-start: 0;
       margin-inline-start: -6px;
       transform: translate(0, -50%);
-      background: lighten($ui-highlight-color, 8%);
+      background: color.adjust($ui-highlight-color, 8%);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
       opacity: 0;
 
@@ -7324,7 +7328,7 @@ a.status-card {
       height: 4px;
       border-radius: 4px;
       top: 14px;
-      background: lighten($ui-highlight-color, 8%);
+      background: color.adjust($ui-highlight-color, 8%);
     }
 
     &__buffer {
@@ -7340,7 +7344,7 @@ a.status-card {
       height: 12px;
       top: 10px;
       margin-inline-start: -6px;
-      background: lighten($ui-highlight-color, 8%);
+      background: color.adjust($ui-highlight-color, 8%);
       box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
 
       .no-reduce-motion & {
@@ -7975,7 +7979,7 @@ noscript {
       }
 
       a {
-        color: lighten($ui-highlight-color, 8%);
+        color: color.adjust($ui-highlight-color, 8%);
       }
 
       .icon {
@@ -8185,7 +8189,7 @@ noscript {
       }
 
       path:last-child {
-        stroke: lighten($highlight-text-color, 6%) !important;
+        stroke: color.adjust($highlight-text-color, 6%) !important;
         fill: none !important;
       }
     }
@@ -8209,31 +8213,34 @@ noscript {
         }
 
         path:last-child {
-          stroke: lighten($gold-star, 6%) !important;
+          stroke: color.adjust($gold-star, 6%) !important;
         }
       }
     }
 
     &--disabled {
       .trends__item__name {
-        color: lighten($ui-base-color, 12%);
+        color: color.adjust($ui-base-color, 12%);
 
         a {
-          color: lighten($ui-base-color, 12%);
+          color: color.adjust($ui-base-color, 12%);
         }
       }
 
       .trends__item__current {
-        color: lighten($ui-base-color, 12%);
+        color: color.adjust($ui-base-color, 12%);
       }
 
       .trends__item__sparkline {
         path:first-child {
-          fill: rgba(lighten($ui-base-color, 12%), 0.25) !important;
+          fill: rgba(color.adjust($ui-base-color, 12%), 0.25) !important;
         }
 
         path:last-child {
-          stroke: lighten(lighten($ui-base-color, 12%), 6%) !important;
+          stroke: color.adjust(
+            color.adjust($ui-base-color, 12%),
+            6%
+          ) !important;
         }
       }
     }
@@ -8251,7 +8258,7 @@ noscript {
   padding-bottom: 0;
 
   &:focus {
-    background: lighten($ui-base-color, 2%);
+    background: color.adjust($ui-base-color, 2%);
     outline: 0;
   }
 
@@ -8320,7 +8327,7 @@ noscript {
 }
 
 .announcements {
-  background: lighten($ui-base-color, 8%);
+  background: color.adjust($ui-base-color, 8%);
   font-size: 13px;
   display: flex;
   align-items: flex-end;
@@ -8404,7 +8411,7 @@ noscript {
 
   &__item {
     flex-shrink: 0;
-    background: lighten($ui-base-color, 12%);
+    background: color.adjust($ui-base-color, 12%);
     color: $darker-text-color;
     border: 0;
     border-radius: 3px;
@@ -8447,21 +8454,21 @@ noscript {
     &:hover,
     &:focus,
     &:active {
-      background: lighten($ui-base-color, 16%);
+      background: color.adjust($ui-base-color, 16%);
       transition: all 200ms ease-out;
       transition-property: background-color, color;
-      color: lighten($darker-text-color, 4%);
+      color: color.adjust($darker-text-color, 4%);
     }
 
     &.active {
       transition: all 100ms ease-in;
       transition-property: background-color, color;
       background-color: mix(
-        lighten($ui-base-color, 12%),
+        color.adjust($ui-base-color, 12%),
         $ui-highlight-color,
         80%
       );
-      color: lighten($highlight-text-color, 8%);
+      color: color.adjust($highlight-text-color, 8%);
     }
   }
 
@@ -8491,7 +8498,7 @@ noscript {
     &:active,
     &:focus {
       opacity: 1;
-      color: lighten($darker-text-color, 4%);
+      color: color.adjust($darker-text-color, 4%);
       transition: all 200ms ease-out;
       transition-property: background-color, color;
     }
@@ -8531,7 +8538,7 @@ noscript {
 
   &__footer {
     border-radius: 0 0 4px 4px;
-    background: lighten($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, 4%);
     padding: 10px;
     padding-top: 12px;
     display: flex;
@@ -8540,7 +8547,7 @@ noscript {
 
   &__header {
     border-radius: 4px 4px 0 0;
-    background: lighten($ui-base-color, 4%);
+    background: color.adjust($ui-base-color, 4%);
     padding: 10px;
     display: flex;
     justify-content: space-between;
@@ -8602,7 +8609,7 @@ noscript {
   &:hover,
   &:focus,
   &:active {
-    border-color: lighten($ui-base-color, 12%);
+    border-color: color.adjust($ui-base-color, 12%);
   }
 }
 
@@ -9000,7 +9007,7 @@ noscript {
         min-width: 0;
 
         &::placeholder {
-          color: lighten($darker-text-color, 4%);
+          color: color.adjust($darker-text-color, 4%);
         }
 
         &:focus {
@@ -9022,7 +9029,7 @@ noscript {
 
     &.focused &__input {
       border-color: $highlight-text-color;
-      background: lighten($ui-base-color, 4%);
+      background: color.adjust($ui-base-color, 4%);
     }
 
     &.invalid &__input {
@@ -9302,7 +9309,7 @@ noscript {
 
   hr {
     border: 0;
-    border-top: 1px solid lighten($ui-base-color, 4%);
+    border-top: 1px solid color.adjust($ui-base-color, 4%);
     margin-top: 3em;
     margin-bottom: 3em;
   }
@@ -9515,7 +9522,7 @@ noscript {
       width: 100%;
       height: auto;
       aspect-ratio: 1.9;
-      background: lighten($ui-base-color, 4%);
+      background: color.adjust($ui-base-color, 4%);
       border-radius: 8px;
       margin-bottom: 30px;
     }
@@ -9747,7 +9754,7 @@ noscript {
   color: $white;
   background: rgba($black, 0.85);
   backdrop-filter: blur(8px);
-  border: 1px solid rgba(lighten($classic-base-color, 4%), 0.85);
+  border: 1px solid rgba(color.adjust($classic-base-color, 4%), 0.85);
   border-radius: 8px;
   box-shadow:
     0 10px 15px -3px rgba($base-shadow-color, 0.25),
@@ -9952,7 +9959,7 @@ noscript {
         opacity: 1;
 
         .inline-follow-suggestions__body__scroll-button__icon {
-          background: lighten($ui-highlight-color, 4%);
+          background: color.adjust($ui-highlight-color, 4%);
         }
       }
     }
diff --git a/app/javascript/styles/mastodon/dashboard.scss b/app/javascript/styles/mastodon/dashboard.scss
index d049b2456c..19a68a8d56 100644
--- a/app/javascript/styles/mastodon/dashboard.scss
+++ b/app/javascript/styles/mastodon/dashboard.scss
@@ -98,12 +98,12 @@
     }
 
     &.positive {
-      background: lighten($ui-base-color, 4%);
+      background: color.adjust($ui-base-color, 4%);
       color: $valid-value-color;
     }
 
     &.negative {
-      background: lighten($ui-base-color, 4%);
+      background: color.adjust($ui-base-color, 4%);
       color: $error-value-color;
     }
 
diff --git a/app/javascript/styles/mastodon/emoji_picker.scss b/app/javascript/styles/mastodon/emoji_picker.scss
index 3189000588..29fc384ddf 100644
--- a/app/javascript/styles/mastodon/emoji_picker.scss
+++ b/app/javascript/styles/mastodon/emoji_picker.scss
@@ -39,7 +39,7 @@
   color: $darker-text-color;
 
   &:hover {
-    color: lighten($darker-text-color, 4%);
+    color: color.adjust($darker-text-color, 4%);
   }
 }
 
@@ -47,7 +47,7 @@
   color: $highlight-text-color;
 
   &:hover {
-    color: lighten($highlight-text-color, 4%);
+    color: color.adjust($highlight-text-color, 4%);
   }
 
   .emoji-mart-anchor-bar {
diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss
index 0d7992aba2..bf90929206 100644
--- a/app/javascript/styles/mastodon/forms.scss
+++ b/app/javascript/styles/mastodon/forms.scss
@@ -337,7 +337,7 @@ code {
 
   .required abbr {
     text-decoration: none;
-    color: lighten($error-value-color, 12%);
+    color: color.adjust($error-value-color, 12%);
   }
 
   .fields-group {
@@ -506,13 +506,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, 12%);
     }
   }
 
   .input.field_with_errors {
     label {
-      color: lighten($error-red, 12%);
+      color: color.adjust($error-red, 12%);
     }
 
     input[type='text'],
@@ -522,13 +522,13 @@ code {
     input[type='datetime-local'],
     textarea,
     select {
-      border-color: lighten($error-red, 12%);
+      border-color: color.adjust($error-red, 12%);
     }
 
     .error {
       display: block;
       font-weight: 500;
-      color: lighten($error-red, 12%);
+      color: color.adjust($error-red, 12%);
       margin-top: 4px;
     }
   }
@@ -620,7 +620,7 @@ code {
     font-family: inherit;
     resize: vertical;
     background: $ui-base-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(lighten($ui-base-color, 12%))}'/></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(color.adjust($ui-base-color, 12%))}'/></svg>")
       no-repeat right 8px center / auto 14px;
     border: 1px solid var(--background-border-color);
     border-radius: 4px;
@@ -760,7 +760,7 @@ code {
     }
 
     &:focus {
-      background: lighten($ui-base-color, 4%);
+      background: color.adjust($ui-base-color, 4%);
     }
   }
 
@@ -844,7 +844,7 @@ code {
     &:hover,
     &:focus,
     &:active {
-      color: lighten($highlight-text-color, 8%);
+      color: color.adjust($highlight-text-color, 8%);
     }
   }
 }
@@ -1097,7 +1097,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, 4%);
     display: flex;
     align-items: center;
 
diff --git a/app/javascript/styles/mastodon/modal.scss b/app/javascript/styles/mastodon/modal.scss
index 60e7d62245..23864b6182 100644
--- a/app/javascript/styles/mastodon/modal.scss
+++ b/app/javascript/styles/mastodon/modal.scss
@@ -1,5 +1,7 @@
+@use 'sass:color';
+
 .modal-layout {
-  background: darken($ui-base-color, 4%)
+  background: color.adjust($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" fill="#{hex-color($ui-base-lighter-color)}33"/></svg>')
     repeat-x bottom fixed;
   display: flex;
diff --git a/app/javascript/styles/mastodon/polls.scss b/app/javascript/styles/mastodon/polls.scss
index ced4c60c44..33ccc39f4b 100644
--- a/app/javascript/styles/mastodon/polls.scss
+++ b/app/javascript/styles/mastodon/polls.scss
@@ -121,7 +121,7 @@
     &:active,
     &:focus,
     &:hover {
-      border-color: lighten($valid-value-color, 15%);
+      border-color: color.adjust($valid-value-color, 15%);
       border-width: 4px;
     }
 
diff --git a/app/javascript/styles/mastodon/rtl.scss b/app/javascript/styles/mastodon/rtl.scss
index 0a05ce7c62..610f2ecd99 100644
--- a/app/javascript/styles/mastodon/rtl.scss
+++ b/app/javascript/styles/mastodon/rtl.scss
@@ -41,7 +41,7 @@ body.rtl {
 
   .simple_form select {
     background: $ui-base-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(lighten($ui-base-color, 12%))}'/></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(color.adjust($ui-base-color, 12%))}'/></svg>")
       no-repeat left 8px center / auto 16px;
   }
 
diff --git a/app/javascript/styles/mastodon/tables.scss b/app/javascript/styles/mastodon/tables.scss
index 07d1ce12fd..6dfbc5d089 100644
--- a/app/javascript/styles/mastodon/tables.scss
+++ b/app/javascript/styles/mastodon/tables.scss
@@ -241,7 +241,7 @@ a.table-action-link {
       &:hover,
       &:focus,
       &:active {
-        background: lighten($ui-base-color, 8%);
+        background: color.adjust($ui-base-color, 8%);
       }
     }
   }
diff --git a/app/javascript/styles/mastodon/variables.scss b/app/javascript/styles/mastodon/variables.scss
index 2095eb310c..2999ecb7ea 100644
--- a/app/javascript/styles/mastodon/variables.scss
+++ b/app/javascript/styles/mastodon/variables.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 // Commonly used web colors
 $black: #000000; // Black
 $white: #ffffff; // White
@@ -33,9 +35,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.adjust(
   $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
@@ -67,9 +69,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.adjust(
+  $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.adjust(
+  $ui-base-lighter-color,
+  $lightness: 4%
+) !default;
 $passive-text-color: $gold-star !default;
 $active-passive-text-color: $success-green !default;
 
@@ -95,26 +103,38 @@ $font-display: 'mastodon-font-display' !default;
 $font-monospace: 'mastodon-font-monospace' !default;
 
 :root {
-  --dropdown-border-color: #{lighten($ui-base-color, 4%)};
-  --dropdown-background-color: #{rgba(darken($ui-base-color, 8%), 0.9)};
+  --dropdown-border-color: #{color.adjust($ui-base-color, $lightness: 4%)};
+  --dropdown-background-color: #{rgba(
+      color.adjust($ui-base-color, $lightness: -8%),
+      0.9
+    )};
   --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: #{rgba(darken($ui-base-color, 8%), 0.7)};
+  --modal-background-color: #{rgba(
+      color.adjust($ui-base-color, $lightness: -8%),
+      0.7
+    )};
   --modal-background-variant-color: #{rgba($ui-base-color, 0.7)};
-  --modal-border-color: #{lighten($ui-base-color, 4%)};
-  --background-border-color: #{lighten($ui-base-color, 4%)};
+  --modal-border-color: #{color.adjust($ui-base-color, $lightness: 4%)};
+  --background-border-color: #{color.adjust($ui-base-color, $lightness: 4%)};
   --background-filter: blur(10px) saturate(180%) contrast(75%) brightness(70%);
-  --background-color: #{darken($ui-base-color, 8%)};
-  --background-color-tint: #{rgba(darken($ui-base-color, 8%), 0.9)};
-  --surface-background-color: #{darken($ui-base-color, 4%)};
+  --background-color: #{color.adjust($ui-base-color, $lightness: -8%)};
+  --background-color-tint: #{rgba(
+      color.adjust($ui-base-color, $lightness: -8%),
+      0.9
+    )};
+  --surface-background-color: #{color.adjust($ui-base-color, $lightness: -4%)};
   --surface-variant-background-color: #{$ui-base-color};
-  --surface-variant-active-background-color: #{lighten($ui-base-color, 4%)};
-  --on-surface-color: #{transparentize($ui-base-color, 0.5)};
+  --surface-variant-active-background-color: #{color.adjust(
+      $ui-base-color,
+      $lightness: 4%
+    )};
+  --on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)};
   --avatar-border-radius: 8px;
   --media-outline-color: #{rgba(#fcf8ff, 0.15)};
   --overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.25)});
-  --error-background-color: #{darken($error-red, 16%)};
-  --error-active-background-color: #{darken($error-red, 12%)};
+  --error-background-color: #{color.adjust($error-red, $lightness: -16%)};
+  --error-active-background-color: #{color.adjust($error-red, $lightness: -12%)};
   --on-error-color: #fff;
   --rich-text-container-color: rgba(87, 24, 60, 100%);
   --rich-text-text-color: rgba(255, 175, 212, 100%);
diff --git a/app/javascript/styles/mastodon/widgets.scss b/app/javascript/styles/mastodon/widgets.scss
index f467069052..56bb8b85e5 100644
--- a/app/javascript/styles/mastodon/widgets.scss
+++ b/app/javascript/styles/mastodon/widgets.scss
@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 .directory {
   &__tag {
     box-sizing: border-box;
@@ -108,7 +110,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, 8%);
   }
 
   tbody tr:last-child td {